/* ============ TOKENS ============ */
:root {
  --bg:       #000000;
  --bg-alt:   #0a0a0a;
  --panel:    #0c0c0c;
  --border:   rgba(255, 255, 255, 0.16);
  --border-2: rgba(255, 255, 255, 0.28);
  --accent:   #4dd9c0;
  --accent-dim: rgba(77, 217, 192, 0.15);
  --text:     #ffffff;
  --text-2:   rgba(255, 255, 255, 0.72);
  --text-3:   rgba(255, 255, 255, 0.46);
  --ease:     cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ============ RESET ============ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* ============ NAVBAR ============ */
.navbar {
  position: fixed;
  top: 0; width: 100%;
  z-index: 100;
  background: transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              backdrop-filter 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}

.navbar.scrolled {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

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

.nav-links > a,
.nav-link-with-dropdown {
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.55rem 0.95rem;
  transition: color 0.2s var(--ease);
}

.nav-links > a:hover,
.nav-links > a.active,
.nav-link-with-dropdown:hover {
  color: var(--text);
}

.nav-join {
  border: 1px solid var(--border-2);
  color: var(--text) !important;
  margin-left: 0.6rem;
  transition: background 0.2s var(--ease), color 0.2s var(--ease) !important;
}
.nav-join:hover { background: var(--text); color: #000 !important; }

/* Dropdown */
.nav-item { position: relative; }

.dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: rgba(8, 8, 8, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  padding: 0.4rem;
  min-width: 190px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.dropdown a {
  display: block;
  padding: 0.6rem 0.9rem;
  color: var(--text-2);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
  white-space: nowrap;
}

.dropdown a:hover { background: rgba(255,255,255,0.06); color: var(--text); }

.has-dropdown:hover .dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--text);
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 2.4rem;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}

.btn-fill {
  background: var(--text);
  color: #000;
  border: 1px solid var(--text);
}
.btn-fill:hover { background: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.78); }

.btn-outline {
  background: rgba(0,0,0,0.15);
  color: var(--text);
  border: 1px solid var(--border-2);
  backdrop-filter: blur(2px);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); border-color: var(--text); }

.btn-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2.25rem;
}

/* ============ PANELS (homepage) ============ */
.panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 130px 1.5rem 10vh;
  overflow: hidden;
}

.panel--bottom { padding-bottom: 10vh; }

/* Placeholder media (blueprint grid) */
.panel-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--panel);
  background-image:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0.05), transparent 62%),
    linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px);
  background-size: 100% 100%, 46px 46px, 46px 46px;
}

.panel-media::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.13);
  font-weight: 500;
}

.panel-media--hero {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Real photo background (replaces the placeholder grid) */
.panel-media.photo {
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.panel-media.photo::after { content: none; }

#competitions .panel-media.photo { filter: brightness(0.55); }

#subteams .panel-media.photo {
  background-size: 190%;
  filter: brightness(0.4);
}

/* Waypoint navigation animation (replaces a static photo) */
.panel-media--anim::after { content: none; }

.waypoint-anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wp-route {
  fill: none;
  stroke: rgba(255,255,255,0.28);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  animation: wpFlow 3.2s linear infinite;
}

.wp-node {
  fill: #000;
  stroke: rgba(255,255,255,0.75);
  stroke-width: 1.5;
  animation: wpPulse 9s ease-in-out infinite;
}

.wp-drone {
  color: var(--text);
  opacity: 0.45;
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.3));
}
.wp-drone line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.wp-drone circle { fill: var(--panel); stroke: currentColor; stroke-width: 1.8; }
.wp-drone rect { fill: currentColor; }

@keyframes wpFlow { to { stroke-dashoffset: -36; } }

@keyframes wpPulse {
  0% { r: 7; opacity: 0.6; fill: #000; }
  4% { r: 12; opacity: 1; fill: #fff; }
  11% { r: 7; opacity: 0.6; fill: #000; }
  100% { r: 7; opacity: 0.6; fill: #000; }
}

/* ============ PILLAR ICONS ============ */
.pillar-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.1rem;
}

.pillar-svg { width: 100%; height: 100%; overflow: hidden; }

/* Autonomous Navigation */
.pn-route {
  fill: none;
  stroke: rgba(255,255,255,0.32);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 5 6;
  animation: wpFlow 2.4s linear infinite;
}
.pn-node {
  fill: #000;
  stroke: rgba(255,255,255,0.7);
  stroke-width: 1.2;
  animation: wpPulse 3.4s ease-in-out infinite;
}
.pn-drone {
  color: var(--text);
  opacity: 0.5;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.35));
}
.pn-drone line { stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; }
.pn-drone circle { fill: var(--panel); stroke: currentColor; stroke-width: 1; }
.pn-drone rect { fill: currentColor; }

/* Computer Vision */
.cv-frame {
  fill: none;
  stroke: rgba(255,255,255,0.55);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.cv-target {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: cvBlip 2.6s ease-in-out infinite;
}
.cv-scan {
  stroke: rgba(255,255,255,0.85);
  stroke-width: 1.2;
  animation: cvSweep 2.6s cubic-bezier(0.45,0,0.55,1) infinite;
}
@keyframes cvBlip {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes cvSweep {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(42px); opacity: 0; }
}

/* Simulation Pipeline */
.sim-ring {
  fill: none;
  stroke: rgba(255,255,255,0.4);
  stroke-width: 1.3;
  stroke-dasharray: 3 5;
  transform-box: fill-box;
  transform-origin: center;
}
.sim-ring--a { animation: simSpin 5s linear infinite; }
.sim-ring--b { animation: simSpin 7s linear infinite reverse; }
.sim-core {
  fill: var(--text);
  animation: cvBlip 3s ease-in-out infinite;
}
@keyframes simSpin { to { transform: rotate(360deg); } }

/* Custom Embedded Systems */
.emb-trace {
  fill: none;
  stroke: rgba(255,255,255,0.32);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.emb-pad {
  fill: #000;
  stroke: rgba(255,255,255,0.65);
  stroke-width: 1.2;
}
.emb-pulse {
  fill: var(--text);
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.65));
}

/* Legibility scrim */
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.18) 26%,
    rgba(0,0,0,0.18) 60%,
    rgba(0,0,0,0.92) 86%,
    #000 100%
  );
}

.panel-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 940px;
}

/* ============ TYPOGRAPHY ============ */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.panel-content h1 {
  font-size: clamp(2.9rem, 7vw, 5.75rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.panel-content h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.panel-text {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  color: var(--text);
  max-width: 620px;
  margin: 0 auto 0.75rem;
  line-height: 1.7;
  font-weight: 300;
}

.panel-text a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border-2); padding-bottom: 1px; }
.panel-text a:hover { border-color: var(--text); }

.comp-title {
  font-size: clamp(3rem, 8vw, 6rem);
  letter-spacing: 0.04em;
}

.comp-fullname {
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 1.5rem;
}

/* ============ COMP TAGS ============ */
.comp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1.75rem;
}

.comp-tags span {
  font-size: 0.66rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--border-2);
  color: var(--text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ============ COMPETITIONS GRID ============ */
.comp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 2.5rem 3rem;
  margin-top: 3.25rem;
  text-align: left;
}

.comp-card .comp-title { font-size: clamp(2rem, 3.6vw, 3rem); }
.comp-card .panel-text { margin-left: 0; }
.comp-card .comp-tags,
.comp-card .btn-row { justify-content: flex-start; }

/* ============ PILLARS ROW ============ */
.pillar-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 3rem;
  margin-top: 3.25rem;
}

.pillar {
  max-width: 210px;
  text-align: center;
}

.pillar h4 {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.65rem;
}

.pillar p {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.6;
  font-weight: 300;
}

/* ============ SUBTEAMS LIST ============ */
.subteams {
  margin: 3rem auto 0;
  max-width: 720px;
  border-top: 1px solid var(--border);
  text-align: left;
}

.subteam {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 1.6rem 1rem;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: padding 0.2s var(--ease), background 0.2s var(--ease);
}

.subteam:hover { background: rgba(255,255,255,0.03); padding-left: 1.5rem; }
.subteam:hover .subteam-arrow { color: var(--text); transform: translateX(5px); }

.subteam-num {
  font-size: 0.7rem;
  color: var(--text);
  letter-spacing: 0.16em;
  flex-shrink: 0;
  width: 26px;
}

.subteam-info { flex: 1; }

.subteam-info h4 {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  color: var(--text);
}

.subteam-info p {
  font-size: 0.83rem;
  color: var(--text);
  font-weight: 300;
}

.subteam-arrow {
  color: var(--text);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}

.subteam-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.subteam-svg { width: 100%; height: 100%; overflow: hidden; }

/* Mechanical — meshing gears */
.mech-gear {
  fill: none;
  stroke: rgba(255,255,255,0.5);
  stroke-width: 5;
  stroke-dasharray: 3.6 3.2;
  transform-box: fill-box;
  transform-origin: center;
}
.mech-gear--a { animation: simSpin 6s linear infinite; }
.mech-gear--b { animation: simSpin 4s linear infinite reverse; }
.mech-gear-hub {
  fill: var(--panel);
  stroke: rgba(255,255,255,0.6);
  stroke-width: 1.2;
}

/* ============ CONTACT LINKS ============ */
.contact-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  border: 1px solid var(--border);
  max-width: 640px;
  margin: 2.75rem auto 0;
}

.contact-item {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.6rem 1.5rem;
  border-right: 1px solid var(--border);
}

.contact-item:last-child { border-right: none; }

.contact-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
}

.contact-val {
  font-size: 0.9rem;
  color: var(--text);
  text-decoration: none;
}
.contact-val:hover { text-decoration: underline; }
.contact-tbd, .tbd-note { color: var(--text-3); font-style: italic; }

/* Hero drone placeholder */
.hero-drone {
  width: min(520px, 62vw);
  height: auto;
  opacity: 0.5;
  filter: drop-shadow(0 0 42px rgba(77, 217, 192, 0.25));
}

/* ============ HERO SVG ANIMATIONS ============ */
.prop-spin {
  animation: prop-rotate 0.88s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.prop-spin-rev { animation-direction: reverse; }

@keyframes prop-rotate { to { transform: rotate(360deg); } }

.drone-pulse { opacity: 0.1; animation: drone-ring-pulse 4s linear infinite; }
.drone-pulse-1 { animation-delay: 0s; }
.drone-pulse-2 { animation-delay: 0.5s; }
.drone-pulse-3 { animation-delay: 1.0s; }
.drone-pulse-4 { animation-delay: 1.5s; }

@keyframes drone-ring-pulse {
  0%, 18%, 100% { opacity: 0.1; }
  8% { opacity: 0.85; }
}

.drone-led { animation: led-blink 2.5s ease-in-out infinite; }
@keyframes led-blink {
  0%, 80%, 100% { opacity: 1; }
  88% { opacity: 0.1; }
}

/* ============ PAGE SECTIONS (subpages) ============ */
.full-section {
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.full-section-alt { background: var(--bg-alt); }

.full-section--photo {
  position: relative;
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top: none;
}

.full-section--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.86) 0%,
    rgba(0,0,0,0.68) 22%,
    rgba(0,0,0,0.68) 62%,
    rgba(0,0,0,0.9) 88%,
    rgba(0,0,0,0.96) 100%
  );
}

.full-section--photo .full-section-inner {
  position: relative;
  z-index: 1;
}

/* Perception meetings sits on a detection mosaic whose own labels compete with
   the copy — needs a heavier wash than the standard photo fade. */
#meetings.full-section--photo::before {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.93) 0%,
    rgba(0,0,0,0.87) 22%,
    rgba(0,0,0,0.87) 62%,
    rgba(0,0,0,0.94) 88%,
    rgba(0,0,0,0.97) 100%
  );
}

.full-section-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 7rem 1.5rem;
}

.section-eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

h2 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  color: var(--text);
}

.section-body {
  font-size: 1rem;
  color: var(--text-2);
  max-width: 620px;
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 1rem;
}

.section-body a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border-2); }
.section-body a:hover { border-color: var(--text); }

/* Images */
.image-block { margin-top: 3.5rem; }

.section-img {
  width: 100%;
  border: 1px solid var(--border);
  display: block;
}

.img-placeholder {
  width: 100%;
  aspect-ratio: 16 / 7;
  background-color: var(--panel);
  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: 44px 44px, 44px 44px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.img-label {
  font-size: 0.7rem;
  color: var(--text-3);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* ============ PAGE HERO (subpages) ============ */
.page-hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0 1.5rem 6vh;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--panel);
  background-image:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.05), transparent 62%),
    linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px);
  background-size: 100% 100%, 46px 46px, 46px 46px;
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.14) 26%, rgba(0,0,0,0.14) 58%, rgba(0,0,0,0.92) 86%, #000 100%);
}

/* Real photo background for subpage heroes */
.page-hero.photo {
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-hero.photo::before { display: none; }

.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
}

.hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: block;
}

.page-hero h1 {
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.03;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  color: var(--text);
}

.page-hero .hero-desc {
  font-size: 1.05rem;
  color: var(--text);
  max-width: 500px;
  line-height: 1.7;
  font-weight: 300;
}

/* ============ WORK GRID (subteam pages) ============ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 3rem;
}

.work-card {
  background: var(--bg-alt);
  padding: 2rem;
  transition: background 0.2s var(--ease);
}

.work-card:hover { background: #141414; }

.work-card h4 {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.7rem;
}

.work-card p {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.7;
  font-weight: 300;
}

.work-grid-mech { grid-template-columns: 1fr 1fr; }

/* ============ PAYLOAD DROP ANIMATION ============ */
.payload-scene-wrap {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background-color: var(--panel);
  background-image:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.05), transparent 62%),
    linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px);
  background-size: 100% 100%, 46px 46px, 46px 46px;
  border: 1px solid var(--border);
}

.payload-scene { width: 100%; display: block; }

.pay-target-glow { animation: pay-target-flash 5s linear infinite; }
@keyframes pay-target-flash {
  0%, 60%   { opacity: 0.3; }
  68%, 80%  { opacity: 1; }
  86%, 100% { opacity: 0.3; }
}

/* ============ EMBEDDED ANIMATION ============ */
.emb-spin-cw {
  animation: prop-rotate 0.7s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.emb-spin-ccw {
  animation: prop-rotate 0.7s linear infinite reverse;
  transform-box: fill-box;
  transform-origin: center;
}

/* ============ SIMULATIONS WAYPOINT FLASH ============ */
.sim-wp1 { animation: sim-wp1-flash 8s linear infinite; }
.sim-wp2 { animation: sim-wp2-flash 8s linear infinite; }
.sim-wp3 { animation: sim-wp3-flash 8s linear infinite; }
.sim-wp4 { animation: sim-wp4-flash 8s linear infinite; }
.sim-wp5 { animation: sim-wp5-flash 8s linear infinite; }
.sim-wp1-txt { animation: sim-wp1-txt-flash 8s linear infinite; }
.sim-wp2-txt { animation: sim-wp2-txt-flash 8s linear infinite; }
.sim-wp3-txt { animation: sim-wp3-txt-flash 8s linear infinite; }
.sim-wp4-txt { animation: sim-wp4-txt-flash 8s linear infinite; }
.sim-wp5-txt { animation: sim-wp5-txt-flash 8s linear infinite; }

@keyframes sim-wp1-flash {
  0%,  2% { fill: #ffffff; }
  4%,  96% { fill: #0c0c0c; }
  98%, 100% { fill: #ffffff; }
}
@keyframes sim-wp2-flash {
  0%,  20% { fill: #0c0c0c; }
  23%, 27% { fill: #ffffff; }
  30%, 100% { fill: #0c0c0c; }
}
@keyframes sim-wp3-flash {
  0%,  41% { fill: #0c0c0c; }
  44%, 48% { fill: #ffffff; }
  51%, 100% { fill: #0c0c0c; }
}
@keyframes sim-wp4-flash {
  0%,  52% { fill: #0c0c0c; }
  55%, 59% { fill: #ffffff; }
  62%, 100% { fill: #0c0c0c; }
}
@keyframes sim-wp5-flash {
  0%,  79% { fill: #0c0c0c; }
  82%, 86% { fill: #ffffff; }
  89%, 100% { fill: #0c0c0c; }
}

@keyframes sim-wp1-txt-flash {
  0%,  2% { fill: #0c0c0c; }
  4%,  96% { fill: #ffffff; }
  98%, 100% { fill: #0c0c0c; }
}
@keyframes sim-wp2-txt-flash {
  0%,  20% { fill: #ffffff; }
  23%, 27% { fill: #0c0c0c; }
  30%, 100% { fill: #ffffff; }
}
@keyframes sim-wp3-txt-flash {
  0%,  41% { fill: #ffffff; }
  44%, 48% { fill: #0c0c0c; }
  51%, 100% { fill: #ffffff; }
}
@keyframes sim-wp4-txt-flash {
  0%,  52% { fill: #ffffff; }
  55%, 59% { fill: #0c0c0c; }
  62%, 100% { fill: #ffffff; }
}
@keyframes sim-wp5-txt-flash {
  0%,  79% { fill: #ffffff; }
  82%, 86% { fill: #0c0c0c; }
  89%, 100% { fill: #ffffff; }
}

/* ============ SPEC / STACK LAYERS ============ */
.specs-list, .stack-layers {
  margin-top: 2.5rem;
  border: 1px solid var(--border);
}

.spec-row, .stack-layer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border);
  gap: 1rem;
}

.spec-row:last-child, .stack-layer:last-child { border-bottom: none; }

.spec-key, .stack-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  flex-shrink: 0;
}

.spec-val, .stack-desc {
  font-size: 0.88rem;
  color: var(--text-2);
  text-align: right;
  font-weight: 300;
}

/* ============ MEMBER GRID ============ */
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
  margin-top: 2.5rem;
}

.member-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 1rem 0.9rem;
  text-align: center;
  transition: border-color 0.2s var(--ease);
}

.member-card:hover { border-color: var(--border-2); }

.member-avatar {
  font-size: 1.4rem;
  width: 38px; height: 38px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.6rem;
}

.member-card h4 { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.15rem; color: var(--text); }
.member-major { font-size: 0.73rem; color: var(--text-2); margin-bottom: 0.1rem; }
.member-role { font-size: 0.73rem; color: var(--text-3); }

/* ============ MEETING CARDS ============ */
.meeting-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 2.5rem;
}

.meeting-card {
  background: var(--bg-alt);
  padding: 1.75rem;
}

.meeting-cards--plain {
  background: none;
  border: none;
}

.full-section--photo .meeting-card {
  background: transparent;
}

.meeting-card h4 {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.6rem;
}

.meeting-loc { font-size: 0.78rem; color: var(--text-3); margin-top: 0.5rem; letter-spacing: 0.06em; }
.meeting-note { font-size: 0.85rem; color: var(--text-3); margin-top: 1.25rem; font-weight: 300; }

/* ============ FAQ ============ */
.faq-list {
  margin-top: 2.5rem;
  border: 1px solid var(--border);
}

.faq-item {
  padding: 1.9rem 2rem;
  border-bottom: 1px solid var(--border);
}

.faq-item:last-child { border-bottom: none; }

.faq-item h4 {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.6rem;
}

.faq-item p { font-size: 0.88rem; color: var(--text-2); line-height: 1.7; font-weight: 300; }

/* ============ JOIN STEPS ============ */
.steps {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
}

.step {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}

.step:last-child { border-bottom: none; }

.step-num {
  font-size: 0.72rem;
  color: var(--text-2);
  letter-spacing: 0.16em;
  flex-shrink: 0;
  padding-top: 3px;
  width: 26px;
}

.step h4 {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.step p { font-size: 0.88rem; color: var(--text-2); line-height: 1.7; font-weight: 300; }

/* ============ JOIN BUTTON (team page) ============ */
.btn-join {
  display: inline-block;
  margin-top: 2rem;
  margin-bottom: 3.5rem;
  padding: 0.9rem 2.5rem;
  background: var(--text);
  color: #000;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--text);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn-join:hover { background: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.78); }

.contact-inner { text-align: left; }
.contact-inner .contact-links { margin-left: 0; margin-right: 0; justify-content: flex-start; }

/* ============ SPONSORS PAGE ============ */
.stats-row {
  display: flex;
  gap: 3rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.stat-item { text-align: left; }

.stat-big {
  display: block;
  font-size: 2.75rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  margin-bottom: 0.35rem;
}

.stat-label {
  font-size: 0.72rem;
  color: var(--text-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tier-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 2.5rem;
}

.tier-card {
  background: var(--bg-alt);
  padding: 1.9rem;
  transition: background 0.2s var(--ease);
}
.tier-card:hover { background: #141414; }

.tier-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border-2);
  color: var(--text);
  margin-bottom: 1rem;
}

.tier-card h4 {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.sponsor-logo-grid {
  margin-top: 2.5rem;
  border: 1px solid var(--border);
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--panel);
  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: 44px 44px, 44px 44px;
}

.sponsor-logo-placeholder { text-align: center; }

/* ============ FOOTER ============ */
.footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 2.5rem 1.5rem;
}

.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  color: var(--text-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  .nav-inner { padding: 0 1.4rem; }

  .nav-links {
    display: none;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: rgba(6, 6, 6, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.5rem 1.5rem;
    gap: 0.2rem;
  }

  .nav-links.open { display: flex; }
  .nav-toggle { display: flex; }
  .nav-join { margin-left: 0; margin-top: 0.5rem; }

  .dropdown {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: none;
    border: none;
    backdrop-filter: none;
    padding: 0.25rem 0 0.5rem 1rem;
  }

  .panel { padding: 110px 1.4rem 80px; }
  .panel--bottom { padding-bottom: 10vh; }

  .pillar-row { gap: 2rem; }
  .pillar { max-width: 260px; }

  .comp-grid { grid-template-columns: 1fr; gap: 3rem; }

  .contact-item { border-right: none; border-bottom: 1px solid var(--border); }
  .contact-item:last-child { border-bottom: none; }

  .work-grid, .work-grid-mech { grid-template-columns: 1fr; }
  /* Reset the desktop inline grid placement so cards stack in source order */
  .work-grid-mech > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .meeting-cards { grid-template-columns: 1fr; }
  .tier-cards { grid-template-columns: 1fr; }
  .stats-row { flex-direction: column; gap: 1.5rem; }
  .step { gap: 1rem; }
  .full-section-inner { padding: 5rem 1.5rem; }

  .footer-inner { flex-direction: column; text-align: center; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .waypoint-anim, .pillar-svg, .subteam-svg { animation-play-state: paused; }
}