:root {
  --bg: #07090b;
  --panel: #0d1013;
  --panel2: #11151a;
  --fg: #f4f6f7;
  --muted: #929aa3;
  --line: #262c33;
  --accent: #72f1d3;
  --accent2: #84bfff;
  --pad: clamp(24px, 5vw, 88px)
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")
}

.mono {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  letter-spacing: .08em
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  z-index: 90;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(to bottom, rgba(7, 9, 11, .94), rgba(7, 9, 11, .7), transparent);
  backdrop-filter: blur(14px)
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--fg);
  text-decoration: none
}

.brand-mark {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .55);
  display: grid;
  place-items: center;
  font-weight: 800
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1
}

.brand-copy b {
  font-size: 13px;
  letter-spacing: .16em
}

.brand-copy small {
  font-size: 9px;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: .1em
}

.nav {
  display: flex;
  gap: 24px
}

.nav a,
.menu-btn {
  color: #c9ced3;
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .08em
}

.nav a:hover {
  color: #fff
}

.menu-btn {
  display: none;
  background: none;
  border: 0
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 20px
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 10px/1 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .12em;
  color: #59626b
}

.lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 7px 2px;
  color: #7f8992;
  font: inherit;
  cursor: pointer
}

.lang-btn:hover {
  color: #fff
}

.lang-btn.active {
  color: var(--accent)
}

.hero {
  height: 100svh;
  min-height: 720px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 120px var(--pad) 56px;
  overflow: hidden;
  background: #050708
}

.hero-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
  will-change: transform
}

.hero-video-wash {
  background: linear-gradient(90deg, rgba(3, 5, 7, .91) 0%, rgba(3, 5, 7, .63) 34%, rgba(3, 5, 7, .18) 69%, rgba(3, 5, 7, .08) 100%), linear-gradient(0deg, rgba(3, 5, 7, .90) 0%, rgba(3, 5, 7, .23) 54%, rgba(3, 5, 7, .42) 100%)
}

.hero-video-label {
  position: absolute;
  z-index: 3;
  right: var(--pad);
  bottom: 112px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8f99a3;
  font-size: 9px;
  letter-spacing: .12em
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(114, 241, 211, .45);
  animation: pulse 2s infinite
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(114, 241, 211, .45)
  }

  70% {
    box-shadow: 0 0 0 9px rgba(114, 241, 211, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(114, 241, 211, 0)
  }
}

.hero-media {
  position: absolute;
  inset: 0
}

.media-frame {
  overflow: hidden;
  position: relative;
  background: #111
}

.media-frame img,
.media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.06) brightness(.55)
}

.media-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 7, 9, .92) 0%, rgba(4, 7, 9, .58) 42%, rgba(4, 7, 9, .16) 100%), linear-gradient(0deg, rgba(4, 7, 9, .86), transparent 55%)
}

.media-wash.dark {
  background: linear-gradient(0deg, rgba(4, 7, 9, .86), rgba(4, 7, 9, .24))
}

.scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(114, 241, 211, .55);
  box-shadow: 0 0 18px rgba(114, 241, 211, .35);
  animation: scan 7s linear infinite
}

@keyframes scan {
  from {
    top: 0
  }

  to {
    top: 100%
  }
}

.hero-crosshair {
  position: absolute;
  left: 74%;
  top: 43%;
  width: 124px;
  height: 124px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%
}

.hero-crosshair:before,
.hero-crosshair:after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, .18)
}

.hero-crosshair:before {
  width: 164px;
  height: 1px;
  left: -20px;
  top: 50%
}

.hero-crosshair:after {
  height: 164px;
  width: 1px;
  top: -20px;
  left: 50%
}

.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  padding-bottom: 92px
}

.eyebrow,
.section-index {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .18em
}

.hero h1 {
  font-size: clamp(54px, 7.6vw, 136px);
  line-height: .86;
  margin: 18px 0 28px;
  letter-spacing: -.055em;
  font-weight: 680
}

.hero h1 em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 246, 247, .82)
}

.lead {
  max-width: 760px;
  color: #c6ccd1;
  font-size: clamp(17px, 1.45vw, 23px);
  line-height: 1.55
}

.hero-project-name {
  max-width: 860px
}

.text-link {
  display: inline-flex;
  gap: 18px;
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .14em;
  margin-top: 20px
}

.text-link span:last-child {
  color: var(--accent)
}

.hero-scroll {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 108px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: #7d8790;
  text-decoration: none;
  font-size: 8px;
  letter-spacing: .14em;
  white-space: nowrap
}

.hero-scroll i {
  font-style: normal;
  color: var(--accent);
  animation: scrollNudge 1.7s ease-in-out infinite
}

@keyframes scrollNudge {

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

  50% {
    transform: translateY(5px)
  }
}

.hero-ui {
  position: absolute;
  z-index: 3;
  top: 112px;
  color: #a7aeb5;
  font-size: 10px
}

.hero-ui-left {
  left: var(--pad)
}

.hero-ui-right {
  right: var(--pad)
}

.hero-stats {
  position: absolute;
  z-index: 3;
  left: var(--pad);
  right: var(--pad);
  bottom: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .17)
}

.hero-stats div {
  padding: 14px 0 0;
  border-right: 1px solid rgba(255, 255, 255, .12)
}

.hero-stats div:last-child {
  border-right: 0;
  padding-left: 24px
}

.hero-stats span {
  display: block;
  color: #7d858e;
  font-size: 9px;
  letter-spacing: .15em
}

.hero-stats strong {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em
}

.status-live {
  color: var(--accent) !important
}

.section-pad {
  padding: 130px var(--pad)
}

.statement {
  border-top: 1px solid var(--line)
}

.statement-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 9vw;
  margin-top: 56px
}

.statement h2,
.architecture h2,
.program h2,
.stage-one h2,
.method h2,
.documentation-section h2 {
  font-size: clamp(42px, 5.6vw, 92px);
  line-height: .99;
  letter-spacing: -.045em;
  margin: 0;
  font-weight: 560
}

.statement h2 span,
.program h2 span,
.method h2 span,
.documentation-section h2 span {
  color: #6f7881
}

.statement-copy {
  padding-top: 12px
}

.statement-copy p,
.architecture-head p,
.stage-one-copy p,
.documentation-copy p {
  color: #9fa7af;
  font-size: 17px;
  line-height: 1.72
}

.cinematic {
  height: min(54vw, 730px);
  margin: 0 var(--pad)
}

.cinematic-caption {
  position: absolute;
  left: 42px;
  bottom: 36px
}

.cinematic-caption span {
  font-size: 10px;
  color: var(--accent)
}

.cinematic-caption strong {
  display: block;
  font-size: clamp(28px, 4vw, 68px);
  line-height: .95;
  margin-top: 12px
}

.architecture {
  border-bottom: 1px solid var(--line)
}

.architecture-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin: 34px 0 58px
}

.architecture-head h2 {
  max-width: 930px
}

.architecture-head p {
  max-width: 430px
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line)
}

.principle-card {
  min-height: 300px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(145deg, rgba(255, 255, 255, .025), transparent)
}

.principle-card span {
  color: #66717b;
  font-size: 10px
}

.principle-card h3 {
  font-size: 26px;
  line-height: 1.08;
  margin: 16px 0 12px;
  font-weight: 520
}

.principle-card p {
  margin: 0;
  color: #7f8790;
  font-size: 13px;
  line-height: 1.6
}

.principle-card.accent-card {
  background: linear-gradient(145deg, rgba(114, 241, 211, .06), transparent)
}

.principle-card.accent-card span {
  color: var(--accent)
}

.program {
  border-top: 1px solid var(--line);
  background: #090c0f
}

.program-head {
  max-width: 1120px
}

.program-head .section-index {
  margin-bottom: 26px
}

.stage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 68px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line)
}

.stage-card {
  min-height: 340px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: linear-gradient(155deg, rgba(255, 255, 255, .02), transparent)
}

.stage-card.active {
  background: linear-gradient(155deg, rgba(114, 241, 211, .07), transparent)
}

.stage-top {
  display: flex;
  justify-content: space-between;
  gap: 16px
}

.stage-top span,
.stage-top b,
.stage-card small {
  font: 9px/1.3 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .1em
}

.stage-top span {
  color: #65707b
}

.stage-top b {
  color: #66717b;
  font-weight: 400
}

.stage-card h3 {
  font-size: 32px;
  margin: 70px 0 14px;
  font-weight: 520
}

.stage-card p {
  color: #818b94;
  line-height: 1.65;
  font-size: 14px;
  margin: 0
}

.stage-card small {
  margin-top: auto;
  color: #64707a
}

.stage-card.active small {
  color: var(--accent)
}

.safety-note {
  margin-top: 22px;
  border: 1px solid var(--line);
  padding: 24px 26px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: center
}

.safety-note span {
  color: var(--accent);
  font-size: 9px
}

.safety-note p {
  margin: 0;
  color: #8c969f;
  line-height: 1.65;
  font-size: 14px
}

.stage-one {
  border-bottom: 1px solid var(--line)
}

.stage-one-layout {
  display: grid;
  grid-template-columns: 1.1fr .55fr;
  gap: 8vw;
  align-items: center;
  margin-top: 44px
}

.stage-one-copy .eyebrow {
  margin-bottom: 26px
}

.stage-one-copy h2 {
  margin-bottom: 34px
}

.stage-one-media {
  aspect-ratio: 4/5
}

.media-tag {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #d9e2e5
}

.media-tag span:first-child {
  color: var(--accent)
}

.objective-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 86px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line)
}

.objective-card {
  padding: 34px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 280px
}

.objective-card>span {
  font-size: 9px;
  color: #6f7881
}

.objective-card h3 {
  font-size: clamp(24px, 2.6vw, 42px);
  line-height: 1.05;
  margin: 42px 0 18px;
  font-weight: 520
}

.objective-card p {
  color: #818a93;
  line-height: 1.65;
  margin: 0;
  max-width: 720px
}

.result-card {
  background: linear-gradient(145deg, rgba(114, 241, 211, .055), transparent)
}

.result-card>span {
  color: var(--accent)
}

.system-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line)
}

.system-card {
  min-height: 220px;
  padding: 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255, 255, 255, .02), transparent)
}

.system-card.main-card {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative
}

.system-card.main-card:before {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  border: 1px solid #38404a;
  top: 42px;
  left: 42px;
  transform: rotate(45deg)
}

.system-card.main-card:after {
  content: "UAV";
  position: absolute;
  top: 92px;
  left: 88px;
  font: 11px/1 monospace;
  color: var(--accent)
}

.system-card span {
  font-size: 10px;
  color: #6f7881
}

.system-card h3 {
  font-size: 22px;
  margin: 12px 0 8px;
  font-weight: 520
}

.system-card p {
  margin: 0;
  color: #7f8790;
  font-size: 13px;
  line-height: 1.5
}

.system-card.future {
  background: linear-gradient(145deg, rgba(114, 241, 211, .05), transparent)
}

.system-card.future span {
  color: var(--accent)
}

.method {
  border-top: 1px solid var(--line)
}

.method-layout {
  display: grid;
  grid-template-columns: 1fr .85fr;
  gap: 8vw;
  margin-top: 42px
}

.method-steps {
  border-top: 1px solid var(--line)
}

.method-steps article {
  min-height: 86px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center
}

.method-steps b {
  font: 10px monospace;
  color: var(--accent)
}

.method-steps span {
  font-size: 18px;
  color: #b5bcc2
}

.documentation-section {
  background: #090c0f;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.documentation-copy {
  max-width: 1180px
}

.documentation-copy .section-index {
  margin-bottom: 28px
}

.documentation-copy p {
  max-width: 760px;
  margin-top: 34px
}

.deliverables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 64px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line)
}

.deliverables article {
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  min-height: 190px
}

.deliverables article>span {
  font: 10px monospace;
  color: var(--accent)
}

.deliverables h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 520
}

.deliverables p {
  margin: 0;
  color: #7d8790;
  line-height: 1.6;
  font-size: 13px
}

.gallery {
  padding-top: 100px
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  grid-template-rows: auto auto;
  gap: 16px;
  margin-top: 38px
}

.gallery figure {
  margin: 0;
  min-height: 380px
}

.gallery .g-wide {
  aspect-ratio: 3/2
}

.gallery .g-tall {
  grid-row: span 2;
  aspect-ratio: 4/5;
  min-height: 776px
}

.gallery .g-square {
  aspect-ratio: 1/1
}

.gallery figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 15px;
  display: flex;
  justify-content: space-between;
  font: 9px monospace;
  color: #dce1e4
}

.gallery figcaption span {
  color: var(--accent)
}

.gallery figcaption b {
  font: inherit;
  font-weight: 400
}

.closing {
  height: 92svh;
  position: relative;
  display: grid;
  place-items: center;
  text-align: center
}

.closing-media {
  position: absolute;
  inset: 0
}

.closing-copy {
  position: relative;
  z-index: 2
}

.closing-copy span {
  font-size: 10px;
  color: var(--accent)
}

.closing h2 {
  font-size: clamp(52px, 7vw, 120px);
  line-height: .80;
  letter-spacing: -.05em;
  margin: 28px 0;
}

.closing p {
  font-size: 20px;
  color: #b8c0c7
}

footer {
  padding: 50px var(--pad);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 30px;
  align-items: center
}

footer p {
  color: #68727b;
  font-size: 11px;
  max-width: 470px
}

.footer-brand {
  pointer-events: none
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease
}

.reveal.visible {
  opacity: 1;
  transform: none
}

@media(max-width:1120px) {
  .nav {
    display: none
  }

  .menu-btn {
    display: block;
    cursor: pointer
  }

  .nav.open {
    display: flex;
    position: fixed;
    top: 82px;
    left: 0;
    right: 0;
    padding: 22px var(--pad) 30px;
    background: rgba(7, 9, 11, .98);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 18px
  }

  .principles-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .statement-grid,
  .method-layout {
    grid-template-columns: 1fr
  }

  .statement-copy {
    max-width: 760px
  }

  .stage-one-layout {
    grid-template-columns: 1fr .65fr
  }

  .system-board {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:760px) {
  .topbar {
    height: 66px
  }

  .brand-copy small {
    display: none
  }

  .nav.open {
    top: 66px
  }

  .hero {
    height: 100svh;
    min-height: 680px;
    padding: 96px 22px 28px;
    display: flex;
    align-items: flex-end
  }

  .hero-ui {
    top: 84px
  }

  .hero-ui-right {
    display: none
  }

  .hero h1 {
    font-size: 50px
  }

  .hero-copy {
    padding: 0 0 154px
  }

  .hero-video-label {
    right: 22px;
    bottom: 108px
  }

  .hero-scroll {
    display: none
  }

  .hero-stats {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 18px;
    grid-template-columns: repeat(2, 1fr);
    width: auto;
    margin-top: 0;
    gap: 10px
  }

  .hero-stats div {
    border-right: 0;
    padding-left: 0 !important
  }

  .section-pad {
    padding: 86px 22px
  }

  .cinematic {
    margin: 0 22px;
    height: 62vw
  }

  .architecture-head {
    display: block
  }

  .architecture-head p {
    margin-top: 25px
  }

  .principles-grid,
  .stage-grid,
  .objective-grid,
  .deliverables {
    grid-template-columns: 1fr
  }

  .stage-card {
    min-height: 285px
  }

  .stage-card h3 {
    margin-top: 52px
  }

  .safety-note {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .stage-one-layout {
    grid-template-columns: 1fr
  }

  .stage-one-media {
    max-width: 520px
  }

  .system-board {
    grid-template-columns: 1fr
  }

  .system-card.main-card {
    grid-column: auto;
    min-height: 320px
  }

  .method-steps article {
    grid-template-columns: 54px 1fr
  }

  .method-steps span {
    font-size: 16px
  }

  .gallery-grid {
    grid-template-columns: 1fr
  }

  .gallery .g-tall {
    grid-row: auto;
    min-height: 0
  }

  .gallery figure {
    min-height: 0
  }

  .closing {
    height: 78svh
  }

  .closing h2 {
    font-size: 58px
  }

  footer {
    grid-template-columns: 1fr
  }

  .topbar-actions {
    gap: 10px
  }

  .lang-switch {
    gap: 5px
  }

  .lang-btn {
    font-size: 9px
  }
}


/* V5 — Hero aligned to the STAC-TD reference: full-bleed video, minimal copy, transparent navigation */
.topbar {
  background: linear-gradient(to bottom, rgba(5, 7, 9, .58), rgba(5, 7, 9, .14), transparent);
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
}

body.scrolled .topbar {
  background: rgba(7, 9, 11, .88);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, .12);
}

.hero-stac-style {
  height: 100svh;
  min-height: 720px;
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  background: #050708;
}

.hero-stac-style .hero-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-stac-style .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  filter: none;
}

.hero-stac-style .hero-video-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 5, 7, .26) 0%, rgba(3, 5, 7, .06) 34%, rgba(3, 5, 7, .18) 62%, rgba(3, 5, 7, .82) 100%),
    linear-gradient(90deg, rgba(3, 5, 7, .38) 0%, rgba(3, 5, 7, .08) 58%, rgba(3, 5, 7, .10) 100%);
}

.hero-reference-copy {
  position: absolute;
  z-index: 4;
  left: var(--pad);
  bottom: clamp(118px, 14vh, 170px);
  width: min(1180px, 78vw);
}

.hero-reference-code {
  margin: 0 0 22px;
  color: #f4f6f7;
  font-size: 11px;
  letter-spacing: .18em;
}

.hero-reference-copy h1 {
  max-width: 1100px;
  margin: 0;
  font-size: clamp(46px, 5.7vw, 104px);
  line-height: .98;
  letter-spacing: -.048em;
  font-weight: 520;
  color: #fff;
  text-wrap: balance;
}

.hero-reference-bottom {
  position: absolute;
  z-index: 4;
  left: var(--pad);
  right: var(--pad);
  bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .28);
  color: #d0d6db;
  font-size: 9px;
  letter-spacing: .14em;
}

.hero-reference-bottom a {
  color: #fff;
  text-decoration: none;
  transition: opacity .2s ease;
}

.hero-reference-bottom a:hover {
  opacity: .65;
}

@media(max-width:760px) {
  .hero-stac-style {
    min-height: 660px;
  }

  .hero-reference-copy {
    left: 22px;
    right: 22px;
    bottom: 128px;
    width: auto;
  }

  .hero-reference-copy h1 {
    font-size: clamp(42px, 12vw, 66px);
    line-height: .98;
  }

  .hero-reference-code {
    font-size: 9px;
    margin-bottom: 16px;
  }

  .hero-reference-bottom {
    left: 22px;
    right: 22px;
    bottom: 22px;
    align-items: flex-end;
  }

  .hero-reference-bottom span {
    max-width: 48%;
    line-height: 1.45;
  }

  .hero-reference-bottom a {
    text-align: right;
    max-width: 48%;
    line-height: 1.45;
  }
}

/* Phase status treatment — V6 */
.stage-card.completed {
  background: linear-gradient(155deg, rgba(255, 255, 255, .035), transparent);
  position: relative
}

.stage-card.completed:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(255, 255, 255, .28)
}

.stage-card.completed small {
  color: #aab3ba
}

.status-complete {
  color: #c8d0d6 !important
}

.stage-card.next {
  position: relative
}

.stage-card.next:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--accent)
}

/* V8 — ajustes visuales consolidados */
.inline-media-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
  font-size: 9px;
  color: #d8dfe3;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .55)
}

.inline-media-caption span:first-child {
  color: var(--accent)
}

/* 01 — El square acompaña a la grilla sin quedar pegado al borde derecho */
.principles-compose {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(300px, .52fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch
}

.principles-compose .principles-grid {
  grid-template-columns: repeat(2, 1fr)
}

.principles-visual {
  min-height: 100%;
  aspect-ratio: 4/5;
  width: calc(100% - clamp(18px, 2vw, 34px));
  justify-self: start
}

.program-visual {
  height: min(42vw, 560px);
  margin-top: 58px
}

.program-visual img {
  filter: grayscale(1) contrast(1.04) brightness(.62)
}

.program-visual:after,
.principles-visual:after,
.architecture-visual:after,
.method-visual:after,
.documentation-visual:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(4, 7, 9, .76) 100%);
  pointer-events: none
}

.program-visual figcaption,
.principles-visual figcaption,
.architecture-visual figcaption,
.method-visual figcaption,
.documentation-visual figcaption {
  z-index: 2
}

/* 02 — Arquitectura: visual rectangular, grande y con peso equivalente al titular */
.architecture-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(460px, .95fr);
  gap: clamp(34px, 4.5vw, 72px);
  align-items: center;
  margin: 34px 0 72px
}

.architecture-feature .architecture-head {
  display: block;
  margin: 0
}

.architecture-feature .architecture-head p {
  margin-top: 34px;
  max-width: 650px
}

.architecture-visual {
  aspect-ratio: 3/2;
  width: 100%;
  max-height: none
}

/* 03 — Metodología: se elimina el uso aislado del formato 9:16; la validación pasa a horizontal */
.method-layout {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
  align-items: start
}

.method-side {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3vw, 44px);
  align-items: start
}

.method-visual {
  aspect-ratio: 16/9;
  min-height: 0;
  max-height: none
}

/* 04 — Transferencia: imagen 3:2 con presencia editorial, no como miniatura secundaria */
.documentation-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(520px, 1fr);
  gap: clamp(34px, 4.5vw, 72px);
  align-items: center;
  margin-bottom: 78px
}

.documentation-feature .documentation-copy {
  max-width: none
}

.documentation-visual {
  aspect-ratio: 3/2;
  min-height: 420px;
  width: 100%
}

@media(max-width:1050px) {

  .principles-compose,
  .architecture-feature,
  .documentation-feature {
    grid-template-columns: 1fr
  }

  .principles-visual {
    aspect-ratio: 16/9;
    min-height: 420px;
    width: 100%;
    justify-self: stretch
  }

  .architecture-visual {
    aspect-ratio: 16/9;
    max-height: none
  }

  .documentation-visual {
    min-height: 0
  }

  .method-side {
    grid-template-columns: 1fr
  }

  .method-visual {
    aspect-ratio: 16/9;
    min-height: 0;
    max-height: none
  }
}

@media(max-width:760px) {
  .principles-compose .principles-grid {
    grid-template-columns: 1fr
  }

  .principles-visual {
    min-height: 320px
  }

  .program-visual {
    height: 58vw;
    min-height: 320px
  }

  .documentation-feature {
    margin-bottom: 48px
  }
}

/* V9 — medios finales del proyecto */
.hero-stac-style .hero-video {
  pointer-events: none;
  user-select: none;
}

.media-frame img,
.media-frame video {
  filter: saturate(.82) contrast(1.05) brightness(.78);
}

.program-visual img {
  filter: saturate(.82) contrast(1.04) brightness(.78);
}

.closing-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  filter: saturate(.82) contrast(1.05) brightness(.64) !important;
}

.cinematic img {
  filter: saturate(.95) contrast(1.03) brightness(1.25);
}

img[src*="phase-2-platform-evolution-3x2.png"] {
  filter: saturate(.95) contrast(1.03) brightness(1.15);
}
/* ============================================================
   DELIVERY POLISH — FINAL INTERACTION & MOTION LAYER
   ============================================================ */

:root{
  --ease-out: cubic-bezier(.22,.8,.25,1);
  --ease-soft: cubic-bezier(.25,.46,.45,.94);
}

/* Scroll progress */
.scroll-progress{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:2px;
  z-index:120;
  pointer-events:none;
  background:rgba(255,255,255,.025);
}
.scroll-progress span{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  box-shadow:0 0 16px rgba(114,241,211,.30);
  will-change:transform;
}

/* Navigation state */
.nav a{
  position:relative;
  transition:color .25s ease, opacity .25s ease;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-13px;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .3s var(--ease-out);
}
.nav a.active{
  color:#fff;
}
.nav a.active::after,
.nav a:hover::after{
  transform:scaleX(1);
}

/* Brand microinteraction */
.brand-mark{
  position:relative;
  overflow:hidden;
  transition:border-color .3s ease, color .3s ease, transform .3s var(--ease-out);
}
.brand-mark::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(115deg,transparent 20%,rgba(114,241,211,.28) 50%,transparent 80%);
  transform:translateX(-130%);
  transition:transform .65s var(--ease-out);
}
.brand:hover .brand-mark{
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-1px);
}
.brand:hover .brand-mark::after{
  transform:translateX(130%);
}

/* Hero polish */
.hero-reference-code,
.hero-reference-bottom{
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.hero-reference-copy h1{
  text-shadow:0 6px 40px rgba(0,0,0,.34);
}
.hero-reference-bottom a{
  position:relative;
}
.hero-reference-bottom a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-5px;
  height:1px;
  background:var(--accent);
  transform:scaleX(.18);
  transform-origin:right center;
  opacity:.65;
  transition:transform .35s var(--ease-out), opacity .35s ease;
}
.hero-reference-bottom a:hover::after{
  transform:scaleX(1);
  opacity:1;
}

/* Media treatment */
.media-frame{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055);
}
.media-frame img{
  transition:transform 1.3s var(--ease-soft), filter .5s ease;
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .media-frame:hover img{
    transform:scale(1.018);
  }
}
.inline-media-caption,
.cinematic-caption,
.media-tag{
  transition:transform .45s var(--ease-out), opacity .45s ease;
}
@media (hover:hover) and (pointer:fine){
  .media-frame:hover .inline-media-caption,
  .media-frame:hover .media-tag{
    transform:translateY(-3px);
  }
}

/* Cinematic section subtle motion */
.cinematic::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(114,241,211,.045),transparent 24%,transparent 74%,rgba(132,191,255,.035));
  mix-blend-mode:screen;
}
.cinematic-caption{
  z-index:3;
}

/* Cards: quiet premium hover instead of flashy motion */
.principle-card,
.stage-card,
.objective-card,
.system-card,
.deliverables article{
  transition:
    transform .36s var(--ease-out),
    border-color .36s ease,
    background .36s ease,
    box-shadow .36s ease;
}
@media (hover:hover) and (pointer:fine){
  .principle-card:hover,
  .stage-card:hover,
  .objective-card:hover,
  .deliverables article:hover{
    transform:translateY(-4px);
    border-color:rgba(114,241,211,.24);
    box-shadow:0 18px 44px rgba(0,0,0,.14);
  }

  .system-board > .system-card:not(.uav-diagram-card):hover{
    transform:translateY(-3px);
    border-color:rgba(114,241,211,.22);
    background:linear-gradient(145deg,rgba(114,241,211,.045),transparent);
  }
}

/* Stage cards stagger when their parent enters the viewport */
.stage-grid.reveal .stage-card,
.principles-grid.reveal .principle-card,
.deliverables.reveal article,
.method-steps.reveal article{
  opacity:0;
  transform:translateY(18px);
}
.stage-grid.reveal.visible .stage-card,
.principles-grid.reveal.visible .principle-card,
.deliverables.reveal.visible article,
.method-steps.reveal.visible article{
  opacity:1;
  transform:none;
  transition:
    opacity .72s var(--ease-out),
    transform .72s var(--ease-out),
    border-color .36s ease,
    background .36s ease;
}
.stage-grid.reveal.visible .stage-card:nth-child(2),
.principles-grid.reveal.visible .principle-card:nth-child(2),
.deliverables.reveal.visible article:nth-child(2),
.method-steps.reveal.visible article:nth-child(2){ transition-delay:.07s; }

.stage-grid.reveal.visible .stage-card:nth-child(3),
.principles-grid.reveal.visible .principle-card:nth-child(3),
.deliverables.reveal.visible article:nth-child(3),
.method-steps.reveal.visible article:nth-child(3){ transition-delay:.14s; }

.principles-grid.reveal.visible .principle-card:nth-child(4),
.deliverables.reveal.visible article:nth-child(4),
.method-steps.reveal.visible article:nth-child(4){ transition-delay:.21s; }

.method-steps.reveal.visible article:nth-child(5){ transition-delay:.28s; }
.method-steps.reveal.visible article:nth-child(6){ transition-delay:.35s; }

/* Method step hover */
.method-steps article{
  position:relative;
  transition:padding-left .3s var(--ease-out), background .3s ease;
}
.method-steps article::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:0;
  background:var(--accent);
  transform:translateY(-50%);
  transition:height .3s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .method-steps article:hover{
    padding-left:12px;
    background:linear-gradient(90deg,rgba(114,241,211,.035),transparent 55%);
  }
  .method-steps article:hover::before{
    height:58%;
  }
}

/* ============================================================
   UAV INTEGRATION DIAGRAM — consolidated from inline CSS
   ============================================================ */
.system-card.main-card.uav-diagram-card{
  grid-column:1 / -1;
  grid-row:auto;
  display:block;
  position:relative;
  overflow:hidden;
  min-height:610px;
  padding:0 !important;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,48%),rgba(120,255,212,.075),transparent 31%),
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006));
  border:1px solid rgba(255,255,255,.09);
  transition:background .18s linear,border-color .35s ease;
}

/* Neutralize legacy diamond pseudo-elements from .main-card */
.system-card.main-card.uav-diagram-card::before{
  content:"";
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  top:0;
  left:0;
  transform:none;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),transparent 96%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),transparent 96%);
  opacity:.82;
}
.system-card.main-card.uav-diagram-card::after{
  content:none;
}

.uav-diagram-head{
  position:relative;
  z-index:4;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:32px;
  padding:28px 30px 0;
}
.uav-diagram-head h3{
  margin:7px 0 4px;
  font-size:clamp(26px,3vw,44px);
  line-height:1;
  letter-spacing:-.04em;
}
.uav-diagram-head p{
  margin:0;
  max-width:500px;
  color:rgba(255,255,255,.56);
  font-size:14px;
  line-height:1.5;
}
.uav-diagram-status{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:5px;
  color:var(--accent);
  white-space:nowrap;
  font-size:11px;
  letter-spacing:.14em;
}
.uav-diagram-status::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 0 rgba(114,241,211,.38);
  animation:diagramPulse 2.4s ease-out infinite;
}
@keyframes diagramPulse{
  0%{ box-shadow:0 0 0 0 rgba(114,241,211,.34); }
  70%{ box-shadow:0 0 0 10px rgba(114,241,211,0); }
  100%{ box-shadow:0 0 0 0 rgba(114,241,211,0); }
}

.uav-diagram{
  --diagram-accent:var(--accent);
  position:relative;
  z-index:2;
  height:480px;
  margin-top:2px;
}
.uav-diagram-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.uav-diagram-lines line{
  stroke:rgba(255,255,255,.15);
  stroke-width:1.2;
  stroke-dasharray:7 11;
  vector-effect:non-scaling-stroke;
  animation:lineFlow 18s linear infinite;
  transition:stroke .25s ease,stroke-width .25s ease,filter .25s ease,opacity .25s ease;
}
@keyframes lineFlow{
  to{ stroke-dashoffset:-180; }
}
.uav-diagram-lines circle{
  fill:var(--diagram-accent);
  opacity:.55;
}

.uav-core{
  position:absolute;
  left:50%;
  top:49%;
  transform:translate(-50%,-50%);
  width:190px;
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:22px;
  border:1px solid rgba(114,241,211,.5);
  border-radius:50%;
  background:radial-gradient(circle,rgba(114,241,211,.105),rgba(8,13,16,.95) 64%);
  box-shadow:0 0 0 14px rgba(114,241,211,.022),0 0 55px rgba(114,241,211,.08);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.uav-core::before,
.uav-core::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.uav-core::before{
  inset:-15px;
  border:1px solid rgba(255,255,255,.07);
}
.uav-core::after{
  inset:-31px;
  border:1px dashed rgba(255,255,255,.075);
  animation:coreOrbit 26s linear infinite;
}
@keyframes coreOrbit{
  to{ transform:rotate(360deg); }
}
.uav-core .mono{
  color:var(--diagram-accent);
  font-size:10px;
  letter-spacing:.15em;
}
.uav-core strong{
  margin:9px 0 6px;
  font-size:24px;
  line-height:1;
  letter-spacing:-.035em;
}
.uav-core small{
  color:rgba(255,255,255,.46);
  font-size:10px;
  letter-spacing:.12em;
}

.uav-node{
  appearance:none;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  position:absolute;
  width:190px;
  min-height:82px;
  padding:14px 15px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:0;
  background:rgba(7,10,12,.88);
  backdrop-filter:blur(8px);
  transition:
    transform .22s var(--ease-out),
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}
.uav-node:focus-visible{
  outline:1px solid var(--diagram-accent);
  outline-offset:4px;
}
.uav-node span{
  display:block;
  margin-bottom:7px;
  color:rgba(255,255,255,.43);
  font-size:9px;
  letter-spacing:.13em;
}
.uav-node b{
  display:block;
  color:rgba(255,255,255,.92);
  font-size:14px;
  font-weight:600;
  line-height:1.2;
}
.uav-node:hover,
.uav-node:focus-visible,
.uav-node.is-active{
  transform:translateY(-4px);
  border-color:var(--diagram-accent);
  background:rgba(13,21,20,.96);
  box-shadow:0 12px 35px rgba(0,0,0,.28);
}

.uav-diagram:has(.uav-node:hover) .uav-core,
.uav-diagram:has(.uav-node:focus-visible) .uav-core,
.uav-diagram.has-active .uav-core{
  border-color:var(--diagram-accent);
  box-shadow:0 0 0 14px rgba(114,241,211,.032),0 0 70px rgba(114,241,211,.14);
}

.uav-diagram.active-flight .line-flight,
.uav-diagram.active-airframe .line-airframe,
.uav-diagram.active-propulsion .line-propulsion,
.uav-diagram.active-command .line-command,
.uav-diagram.active-fpv .line-fpv,
.uav-diagram.active-doc .line-doc,
.uav-diagram:has(.node-flight:hover) .line-flight,
.uav-diagram:has(.node-airframe:hover) .line-airframe,
.uav-diagram:has(.node-propulsion:hover) .line-propulsion,
.uav-diagram:has(.node-command:hover) .line-command,
.uav-diagram:has(.node-fpv:hover) .line-fpv,
.uav-diagram:has(.node-doc:hover) .line-doc,
.uav-diagram:has(.node-flight:focus-visible) .line-flight,
.uav-diagram:has(.node-airframe:focus-visible) .line-airframe,
.uav-diagram:has(.node-propulsion:focus-visible) .line-propulsion,
.uav-diagram:has(.node-command:focus-visible) .line-command,
.uav-diagram:has(.node-fpv:focus-visible) .line-fpv,
.uav-diagram:has(.node-doc:focus-visible) .line-doc{
  stroke:var(--diagram-accent);
  stroke-width:1.9;
  filter:drop-shadow(0 0 5px rgba(114,241,211,.52));
}

.node-flight{ left:50%; top:4%; transform:translateX(-50%); }
.node-flight:hover,
.node-flight:focus-visible,
.node-flight.is-active{ transform:translate(-50%,-4px); }

.node-airframe{ left:5%; top:25%; }
.node-propulsion{ left:8%; bottom:10%; }
.node-command{ right:5%; top:25%; }
.node-fpv{ right:8%; bottom:10%; }

.node-doc{ left:50%; bottom:0; transform:translateX(-50%); }
.node-doc:hover,
.node-doc:focus-visible,
.node-doc.is-active{ transform:translate(-50%,-4px); }

/* Hero video and closing video get a subtle cinematic drift */
.hero-stac-style .hero-video{
  will-change:transform;
}
.closing-video{
  transform:scale(1.015);
  animation:closingDrift 18s ease-in-out infinite alternate;
}
@keyframes closingDrift{
  from{ transform:scale(1.015) translate3d(-.3%,0,0); }
  to{ transform:scale(1.035) translate3d(.3%,-.25%,0); }
}

/* Better reveal defaults */
.reveal{
  will-change:opacity,transform;
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}

/* No-script fallback */
.noscript-note{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:200;
  max-width:420px;
  padding:12px 14px;
  border:1px solid var(--line);
  background:#0d1013;
  color:#c7cdd2;
  font-size:12px;
}

/* Responsive diagram */
@media(max-width:860px){
  .system-card.main-card.uav-diagram-card{
    min-height:auto;
  }
  .uav-diagram-head{
    padding:24px 22px 4px;
    flex-direction:column;
    gap:8px;
  }
  .uav-diagram-status{ margin-top:0; }
  .uav-diagram{
    height:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:22px;
  }
  .uav-diagram-lines{ display:none; }

  .uav-core,
  .uav-node,
  .node-flight,
  .node-airframe,
  .node-propulsion,
  .node-command,
  .node-fpv,
  .node-doc{
    position:relative;
    inset:auto;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    transform:none;
    width:auto;
  }
  .uav-core{
    grid-column:1 / -1;
    width:170px;
    margin:10px auto 24px;
  }
  .uav-node:hover,
  .uav-node:focus-visible,
  .uav-node.is-active,
  .node-flight:hover,
  .node-flight:focus-visible,
  .node-flight.is-active,
  .node-doc:hover,
  .node-doc:focus-visible,
  .node-doc.is-active{
    transform:translateY(-3px);
  }
}

@media(max-width:560px){
  .uav-diagram{ grid-template-columns:1fr; }
  .uav-core{ grid-column:auto; }
}

/* Motion accessibility */
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero-stac-style .hero-video,
  .closing-video{
    transform:none !important;
  }
}
/* ============================================================
   HEADER V2 — project / phase oriented
   ============================================================ */

.topbar{
  height:78px;
  padding:0 var(--pad);
  background:
    linear-gradient(180deg,rgba(5,7,9,.72) 0%,rgba(5,7,9,.26) 62%,transparent 100%);
  border-bottom:1px solid rgba(255,255,255,.09);
  backdrop-filter:none;
}

.topbar-inner{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:minmax(245px,auto) auto 1fr auto;
  align-items:center;
  gap:clamp(18px,2.4vw,42px);
}

.brand-project{
  min-width:0;
}

.brand-project .brand-mark{
  width:38px;
  height:38px;
  font:700 9px/1 "SFMono-Regular",Consolas,monospace;
  letter-spacing:.06em;
  border-color:rgba(255,255,255,.42);
  color:#f2f5f6;
}

.brand-project .brand-copy b{
  font-size:12px;
  letter-spacing:.17em;
  white-space:nowrap;
}

.brand-project .brand-copy small{
  color:#858e97;
  font-size:8px;
  letter-spacing:.10em;
  white-space:nowrap;
}

.header-phase{
  height:31px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  border-left:1px solid rgba(255,255,255,.10);
  border-right:1px solid rgba(255,255,255,.10);
  white-space:nowrap;
}

.header-phase-label,
.header-phase-status,
.header-phase-next{
  font-size:8px;
  letter-spacing:.12em;
}

.header-phase-label{
  color:#7f8992;
}

.header-phase-status{
  color:#dfe5e8;
}

.header-phase i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px rgba(114,241,211,.45);
}

.header-phase-next{
  color:var(--accent);
}

.nav{
  justify-content:center;
  gap:clamp(15px,1.55vw,26px);
  min-width:0;
}

.nav a{
  font-size:9px;
  letter-spacing:.11em;
  color:#a8afb5;
  white-space:nowrap;
}

.nav a::after{
  bottom:-12px;
}

.topbar-actions{
  justify-self:end;
}

body.scrolled .topbar{
  height:68px;
  background:rgba(7,9,11,.90);
  backdrop-filter:blur(18px) saturate(125%);
  border-bottom-color:rgba(255,255,255,.11);
  box-shadow:0 8px 34px rgba(0,0,0,.16);
}

.topbar,
.topbar-inner,
.brand-project .brand-mark{
  transition:
    height .35s var(--ease-out),
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    backdrop-filter .35s ease;
}

/* The header status becomes quieter after leaving the hero */
body.scrolled .header-phase-next{
  color:#9ca5ad;
}

body.scrolled .header-phase i{
  box-shadow:none;
}

@media(max-width:1320px){
  .topbar-inner{
    grid-template-columns:minmax(225px,auto) auto 1fr auto;
    gap:18px;
  }

  .header-phase-next{
    display:none;
  }

  .header-phase{
    padding:0 10px;
  }

  .nav{
    gap:16px;
  }
}

@media(max-width:1120px){
  .topbar{
    height:74px;
  }

  .topbar-inner{
    grid-template-columns:1fr auto auto;
  }

  .header-phase{
    justify-self:end;
  }

  .nav{
    display:none;
  }

  .nav.open{
    display:flex;
    position:fixed;
    top:74px;
    left:0;
    right:0;
    padding:26px var(--pad) 34px;
    background:rgba(7,9,11,.97);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }

  body.scrolled .nav.open{
    top:68px;
  }

  .nav.open a{
    width:100%;
    padding:15px 0;
    border-bottom:1px solid rgba(255,255,255,.07);
    font-size:11px;
  }

  .nav.open a::after{
    display:none;
  }
}

@media(max-width:760px){
  .topbar{
    height:66px;
    padding:0 22px;
  }

  .topbar-inner{
    grid-template-columns:1fr auto;
    gap:10px;
  }

  .brand-project .brand-mark{
    width:34px;
    height:34px;
  }

  .brand-project .brand-copy small,
  .header-phase{
    display:none;
  }

  .topbar-actions{
    gap:8px;
  }

  .nav.open,
  body.scrolled .nav.open{
    top:66px;
    padding-left:22px;
    padding-right:22px;
  }
}
/* ============================================================
   DYNAMIC SOUNDTRACK CONTROL
   ============================================================ */

.audio-toggle{
  position:relative;
  width:36px;
  height:36px;
  padding:0;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(7,9,11,.12);
  color:#a9b1b8;
  cursor:pointer;
  overflow:hidden;
  transition:
    color .28s ease,
    border-color .28s ease,
    background .28s ease,
    transform .28s var(--ease-out);
}

.audio-toggle::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center,rgba(114,241,211,.12),transparent 68%);
  opacity:0;
  transition:opacity .3s ease;
}

.audio-toggle:hover,
.audio-toggle:focus-visible{
  color:#fff;
  border-color:rgba(114,241,211,.42);
  background:rgba(7,9,11,.42);
}

.audio-toggle:hover{
  transform:translateY(-1px);
}

.audio-toggle:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:3px;
}

.audio-icon{
  position:absolute;
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  transition:
    opacity .28s ease,
    transform .28s var(--ease-out);
}

.audio-icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.audio-icon svg path:first-child{
  fill:currentColor;
  stroke:none;
}

.audio-icon-off{
  opacity:0;
  transform:scale(.72);
}

.audio-toggle.is-muted .audio-icon-on{
  opacity:0;
  transform:scale(.72);
}

.audio-toggle.is-muted .audio-icon-off{
  opacity:1;
  transform:scale(1);
}

.audio-toggle.is-playing{
  color:var(--accent);
  border-color:rgba(114,241,211,.30);
}

.audio-toggle.is-playing::before{
  opacity:1;
}

.audio-level{
  position:absolute;
  right:4px;
  bottom:4px;
  height:8px;
  display:flex;
  align-items:flex-end;
  gap:1px;
  opacity:0;
  transition:opacity .25s ease;
}

.audio-level i{
  display:block;
  width:1px;
  height:3px;
  background:currentColor;
  transform-origin:center bottom;
}

.audio-toggle.is-playing .audio-level{
  opacity:.75;
}

.audio-toggle.is-playing .audio-level i:nth-child(1){
  animation:audioMeter1 .82s ease-in-out infinite alternate;
}

.audio-toggle.is-playing .audio-level i:nth-child(2){
  animation:audioMeter2 .62s ease-in-out infinite alternate;
}

.audio-toggle.is-playing .audio-level i:nth-child(3){
  animation:audioMeter3 .94s ease-in-out infinite alternate;
}

@keyframes audioMeter1{
  from{height:2px}
  to{height:7px}
}

@keyframes audioMeter2{
  from{height:6px}
  to{height:3px}
}

@keyframes audioMeter3{
  from{height:3px}
  to{height:8px}
}

/* A subtle visual cue while a video section owns the soundtrack */
body.music-video-zone .audio-toggle.is-playing{
  box-shadow:inset 0 0 0 1px rgba(114,241,211,.045),0 0 18px rgba(114,241,211,.055);
}

@media(max-width:760px){
  .audio-toggle{
    width:32px;
    height:32px;
  }

  .audio-icon{
    width:15px;
    height:15px;
  }
}

@media(prefers-reduced-motion:reduce){
  .audio-level i{
    animation:none !important;
    height:5px !important;
  }
}
/* AUDIO V5 — first-interaction cue */
.audio-toggle.needs-unlock{
  color:#d7dde1;
  border-color:rgba(255,255,255,.20);
}

.audio-toggle.needs-unlock::after{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(114,241,211,.22);
  opacity:.2;
  animation:audioUnlockCue 1.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes audioUnlockCue{
  0%,100%{
    opacity:.12;
    transform:scale(.94);
  }
  50%{
    opacity:.55;
    transform:scale(1);
  }
}

body.audio-error .audio-toggle{
  border-color:rgba(255,120,120,.42);
}

@media(prefers-reduced-motion:reduce){
  .audio-toggle.needs-unlock::after{
    animation:none !important;
    opacity:.35;
  }
}
/* ============================================================
   V7 — MOBILE OPTIMIZATION
   Keeps desktop composition intact and refines 320–760px.
   ============================================================ */

@media(max-width:760px){

  :root{
    --pad:22px;
  }

  /* Performance: fixed grain is visually unnecessary on small screens */
  .noise{
    opacity:.018;
  }

  /* Header */
  .topbar{
    padding-left:18px;
    padding-right:18px;
  }

  .brand{
    gap:9px;
  }

  .brand-project .brand-mark{
    width:32px;
    height:32px;
    font-size:8px;
  }

  .brand-project .brand-copy b{
    font-size:10px;
    letter-spacing:.14em;
  }

  .topbar-actions{
    gap:6px;
  }

  .lang-switch{
    gap:4px;
  }

  .lang-btn{
    padding-left:1px;
    padding-right:1px;
  }

  .menu-btn{
    padding:8px 0 8px 5px;
    font-size:9px;
  }

  .audio-toggle{
    width:30px;
    height:30px;
  }

  /* Hero */
  .hero-stac-style{
    min-height:620px;
  }

  .hero-reference-copy{
    left:18px;
    right:18px;
    bottom:124px;
  }

  .hero-reference-code{
    font-size:8px;
    letter-spacing:.14em;
    margin-bottom:13px;
  }

  .hero-reference-copy h1{
    max-width:560px;
    font-size:clamp(37px,10.9vw,56px);
    line-height:.98;
    letter-spacing:-.043em;
  }

  .hero-reference-bottom{
    left:18px;
    right:18px;
    bottom:18px;
    gap:14px;
    padding-top:13px;
    font-size:7.5px;
    letter-spacing:.10em;
  }

  .hero-reference-bottom span{
    max-width:53%;
  }

  .hero-reference-bottom a{
    max-width:43%;
  }

  /* Global spacing */
  .section-pad{
    padding:74px 20px;
  }

  .section-index,
  .eyebrow{
    font-size:9px;
    line-height:1.45;
    letter-spacing:.14em;
  }

  .statement-grid{
    margin-top:36px;
    gap:30px;
  }

  .statement h2,
  .architecture h2,
  .program h2,
  .stage-one h2,
  .method h2,
  .documentation-section h2{
    font-size:clamp(34px,10vw,50px);
    line-height:1.01;
    letter-spacing:-.038em;
  }

  .statement-copy p,
  .architecture-head p,
  .stage-one-copy p,
  .documentation-copy p{
    font-size:15px;
    line-height:1.67;
  }

  /* Cinematic */
  .cinematic{
    margin:0 18px;
    height:68vw;
    min-height:280px;
    max-height:460px;
  }

  .cinematic-caption{
    left:20px;
    right:20px;
    bottom:20px;
  }

  .cinematic-caption span{
    font-size:8px;
  }

  .cinematic-caption strong{
    font-size:clamp(24px,7.8vw,39px);
    line-height:.98;
    margin-top:9px;
  }

  /* Principles */
  .architecture-head{
    margin:28px 0 38px;
  }

  .principles-compose{
    gap:20px;
  }

  .principle-card{
    min-height:220px;
    padding:22px;
  }

  .principle-card h3{
    font-size:23px;
  }

  .principles-visual{
    min-height:285px;
  }

  /* Program */
  .program-head .section-index{
    margin-bottom:20px;
  }

  .program-visual{
    min-height:260px;
    height:64vw;
    margin-top:38px;
  }

  .stage-grid{
    margin-top:42px;
  }

  .stage-card{
    min-height:250px;
    padding:23px 21px;
  }

  .stage-card h3{
    margin-top:42px;
    font-size:28px;
  }

  .stage-card p{
    font-size:13px;
  }

  .safety-note{
    margin-top:16px;
    padding:20px;
  }

  /* Phase 1 */
  .stage-one-layout{
    margin-top:34px;
    gap:38px;
  }

  .stage-one-copy h2{
    margin-bottom:27px;
  }

  .stage-one-media{
    width:100%;
    max-width:none;
  }

  .objective-grid{
    margin-top:48px;
  }

  .objective-card{
    min-height:auto;
    padding:25px 22px;
  }

  .objective-card h3{
    margin:28px 0 15px;
    font-size:clamp(23px,7vw,32px);
  }

  /* Architecture */
  .architecture-feature{
    gap:30px;
    margin:28px 0 48px;
  }

  .architecture-feature .architecture-head p{
    margin-top:22px;
  }

  .architecture-visual{
    aspect-ratio:4/3;
  }

  .system-card{
    min-height:175px;
    padding:21px;
  }

  .system-card h3{
    font-size:20px;
  }

  /* Diagram mobile */
  .system-card.main-card.uav-diagram-card{
    min-height:auto;
  }

  .uav-diagram-head{
    padding:21px 18px 2px;
  }

  .uav-diagram-head h3{
    font-size:30px;
  }

  .uav-diagram-head p{
    font-size:12px;
  }

  .uav-diagram-status{
    font-size:8px;
  }

  .uav-diagram{
    padding:18px;
    gap:8px;
  }

  .uav-core{
    width:148px;
    margin:8px auto 20px;
  }

  .uav-core strong{
    font-size:20px;
  }

  .uav-node{
    min-height:72px;
    padding:12px 13px;
  }

  /* Methodology */
  .method-layout{
    margin-top:30px;
    gap:34px;
  }

  .method-steps article{
    min-height:74px;
    grid-template-columns:43px 1fr;
  }

  .method-steps span{
    font-size:15px;
    line-height:1.35;
  }

  /* Documentation */
  .documentation-feature{
    gap:30px;
    margin-bottom:42px;
  }

  .documentation-copy .section-index{
    margin-bottom:20px;
  }

  .documentation-copy p{
    margin-top:25px;
  }

  .documentation-visual{
    aspect-ratio:4/3;
  }

  .deliverables{
    margin-top:42px;
  }

  .deliverables article{
    grid-template-columns:39px 1fr;
    gap:12px;
    min-height:auto;
    padding:22px 20px;
  }

  .deliverables h3{
    font-size:20px;
  }

  /* Closing */
  .closing{
    height:min(78svh,760px);
    min-height:600px;
  }

  .closing-copy{
    width:100%;
    padding:0 20px;
  }

  .closing h2{
    font-size:clamp(42px,11.5vw,64px);
    line-height:.86;
    letter-spacing:-.043em;
    margin:22px 0;
  }

  .closing p{
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
    font-size:15px;
    line-height:1.55;
  }

  /* Footer */
  footer{
    padding:38px 20px;
    gap:18px;
  }

  footer p{
    font-size:10px;
    line-height:1.55;
  }

  footer .text-link{
    margin-top:4px;
  }

  /* Tap target / accidental hover cleanup */
  @media(hover:none){
    .principle-card:hover,
    .stage-card:hover,
    .objective-card:hover,
    .deliverables article:hover,
    .system-board > .system-card:not(.uav-diagram-card):hover{
      transform:none;
      box-shadow:none;
    }

    .media-frame:hover img{
      transform:none;
    }
  }
}

/* Extra-small phones */
@media(max-width:390px){

  .hero-reference-copy h1{
    font-size:clamp(34px,10.5vw,44px);
  }

  .hero-reference-bottom{
    font-size:7px;
  }

  .statement h2,
  .architecture h2,
  .program h2,
  .stage-one h2,
  .method h2,
  .documentation-section h2{
    font-size:clamp(31px,9.4vw,42px);
  }

  .cinematic-caption strong{
    font-size:clamp(22px,7.3vw,31px);
  }

  .closing h2{
    font-size:clamp(38px,10.7vw,48px);
  }

  .lang-switch{
    display:none;
  }
}

/* Landscape phones: keep hero usable instead of excessively tall */
@media(max-width:900px) and (max-height:520px) and (orientation:landscape){

  .hero-stac-style{
    min-height:520px;
  }

  .hero-reference-copy{
    bottom:92px;
    width:min(720px,76vw);
  }

  .hero-reference-copy h1{
    font-size:clamp(34px,6.4vw,58px);
  }

  .hero-reference-bottom{
    bottom:14px;
  }

  .closing{
    min-height:520px;
    height:100svh;
  }

  .closing h2{
    font-size:clamp(38px,7vw,68px);
  }
}