/* ========= Homepage (Section 1) ========= */

.hero-onramp{
  position: relative;
  overflow: clip;
}

/* Retro grid & synth sun */
.hero-onramp .grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(transparent 0 22px, var(--nda-grid) 22px 23px),
    repeating-linear-gradient(90deg, transparent 0 22px, var(--nda-grid) 22px 23px);
  mask: linear-gradient(#000 30%, transparent 100%);
}
.hero-onramp .grid-bg .scanline{
  position:absolute; inset:0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px);
  animation: scan 6s linear infinite;
}
@keyframes scan { to { transform: translateY(4px); } }

.hero-onramp .grid-bg .sun{
  position:absolute; width:280px; aspect-ratio:1/1; border-radius:50%;
  left: 50%; top: 18%; translate: -50% -50%;
  background: radial-gradient(circle at 50% 65%, #ffea7a 0, #ff4bd8 40%, transparent 60%);
  filter: blur(6px) contrast(110%) saturate(130%) drop-shadow(0 0 25px rgba(255,75,216,.45));
  opacity:.6;
}

.hero-onramp .container{
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1.2fr;
  gap: clamp(20px, 5vw, 48px);
  align-items: start;
}

/* Intro copy */
.hero-onramp .intro .kicker{
  font: 700 .8rem/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase;
  color: var(--nda-cyan);
}
.hero-onramp .intro .title{
  font-family: Orbitron, Inter, sans-serif;
  font-weight: 700; letter-spacing: .02em; margin: 6px 0 10px;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  filter: var(--nda-glow);
}
.hero-onramp .intro .title span{
  background: linear-gradient(90deg, var(--nda-pink), var(--nda-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-onramp .intro .lede{ color:#dfe3ff; opacity:.95; margin-bottom: 8px; }
.hero-onramp .intro .meta{ color:#c5ccff; opacity:.8; font-size:.95rem; }

/* Tri-strip images with isometric tilt */
.tri-strip{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2.8vw, 22px); perspective: 800px;
}
.tri-strip .tile{
  position:relative; transform-style: preserve-3d;
  transition: transform .25s ease, filter .25s ease;
  animation: floatY 6s ease-in-out infinite;
  filter: var(--nda-glow);
}
.tri-strip .tile:nth-child(2){ animation-delay: .25s; }
.tri-strip .tile:nth-child(3){ animation-delay: .5s; }

.tri-strip .tile img{
  outline: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.tri-strip .tile::after{
  content:"";
  position:absolute; inset: -6px; border-radius: 16px;
  border: 1px solid rgba(123,94,255,.35);
  opacity:.35; transition: opacity .25s ease;
}
.tri-strip .tile:hover{ transform: translateY(-4px) rotateX(6deg); filter: drop-shadow(0 0 25px rgba(75,255,231,.35)); }
.tri-strip .tile:hover::after{ opacity:.9; }
.tri-strip figcaption{
  margin-top: 8px; font-size: .9rem; color:#cdd3ff; opacity:.9;
}

/* Scrollytape (decor spine) */
.scrollytape{
  position:absolute; right: 12px; top: 50%; translate: 0 -50%;
  display:flex; flex-direction: column; gap: 16px;
}
.scrollytape .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--nda-cyan), var(--nda-violet));
  box-shadow: 0 0 10px rgba(75,255,231,.5);
  opacity: .8; transform: translateY(var(--p));
}

/* Responsive rules */
@media (max-width: 1200px){
  .hero-onramp .grid-bg .sun{ top: 20%; }
}
@media (max-width: 992px){
  .hero-onramp .container{ grid-template-columns: 1fr; }
  .scrollytape{ display:none; }
}
@media (max-width: 768px){
  .tri-strip{ grid-template-columns: 1fr 1fr; }
  .tri-strip .tile:nth-child(3){ grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 480px){
  .tri-strip{ grid-template-columns: 1fr; }
}
/* ========= Section 2: Circuit ========= */
.section-head .kicker{
  font: 700 .78rem/1 Inter, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: var(--nda-cyan);
  margin-bottom: 6px;
}
.section-head h2{
  font-family: Orbitron, Inter, sans-serif; font-weight:700;
  font-size: clamp(1.3rem, 2.6vw, 2rem); margin: 6px 0 8px;
  filter: var(--nda-glow);
}
.section-head .lede{ color:#dfe3ff; opacity:.92; }

.circuit{
  position: relative;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(122,92,255,.12), transparent 60%),
    conic-gradient(from 180deg at 50% 80%, rgba(255,255,255,.06), transparent 25%);
}
.ring-gallery{
  --gap: clamp(10px, 3vw, 22px);
  margin-top: 18px;
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gap);
}
.ring-item{
  position:relative; padding: 10px; border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .25s ease, box-shadow .25s ease;
  filter: var(--nda-glow);
}
.ring-item:hover{ transform: translateY(-4px) rotateZ(-.5deg); box-shadow: 0 0 24px rgba(75,255,231,.18); }
.ring-item figcaption{ margin-top: 8px; color:#cdd3ff; font-size: .9rem; }

.feature-lanes{
  margin: 18px 0 6px; padding: 0; list-style: none; display: grid; gap: 10px;
}
.feature-lanes li{ color:#d7dbff; }
.chip{
  display:inline-block; margin-right: 8px; padding: 6px 10px; border-radius: 999px;
  font-size: .78rem; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.chip-pink{ border-color: rgba(255,75,216,.45); }
.chip-cyan{ border-color: rgba(75,255,231,.45); }
.chip-violet{ border-color: rgba(122,92,255,.45); }

.meters{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.meter{ display:grid; grid-template-columns: 100px 1fr; align-items:center; gap: 10px; }
.meter .label{ color:#c8ceff; }
.meter .bar{
  position:relative; height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.08);
}
.meter .meter-fill{
  display:block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--nda-pink), var(--nda-cyan));
  box-shadow: 0 0 18px rgba(123,94,255,.35);
  transition: width 900ms cubic-bezier(.2,.6,.2,1);
}

/* ========= Section 3: Viewer Challenges ========= */
.viewer-rail{
  position:relative;
  background:
    radial-gradient(60% 40% at 10% 0%, rgba(75,255,231,.08), transparent 70%),
    radial-gradient(60% 40% at 90% 0%, rgba(255,75,216,.08), transparent 70%);
}
.rail{
  counter-reset: step; list-style: none; margin: 16px 0 0; padding: 0;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(10px, 3vw, 22px);
}
.rail-item{
  position:relative; padding: 12px; border-radius: 16px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  filter: var(--nda-glow);
  transition: transform .25s ease;
}
.rail-item:hover{ transform: translateY(-4px); }
.rail-item::before{
  counter-increment: step; content: counter(step);
  position:absolute; top: -12px; left: -12px; width: 28px; height: 28px; border-radius: 50%;
  display:grid; place-items:center; font-weight:700; color:#071017;
  background: linear-gradient(90deg, var(--nda-pink), var(--nda-cyan));
  box-shadow: 0 0 12px rgba(75,255,231,.35);
}

.counts{
  margin-top: 16px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px;
}
.countbox{
  padding: 14px; border-radius: 16px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08); text-align:center;
}
.countbox .countup{
  display:block; font-family: Orbitron, Inter, sans-serif; font-weight:700;
  font-size: clamp(1.2rem, 3.4vw, 2rem);
  background: linear-gradient(90deg, var(--nda-pink), var(--nda-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: var(--nda-glow);
}
.countbox .label{ color:#cdd3ff; }

/* ========= Section 4: Loadouts (flip cards) ========= */
.loadouts{
  position:relative;
  background: radial-gradient(70% 50% at 50% 0%, rgba(122,92,255,.10), transparent 60%);
}
.flipgrid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(10px, 3vw, 22px);
}
.flip{
  perspective: 1000px; filter: var(--nda-glow);
}
.flip-inner{
  position:relative; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.flip:hover .flip-inner{ transform: rotateY(180deg); }
.flip-front, .flip-back{
  position:relative; min-height: 280px; border-radius: 16px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  backface-visibility: hidden; padding: 12px;
}
.flip-front h3{
  margin: 8px 0 0; font-family: Orbitron, Inter, sans-serif; font-weight:700;
}
.flip-back{
  position:absolute; inset:0; transform: rotateY(180deg);
  display:flex; align-items:center; justify-content:center; text-align:center; color:#dfe3ff;
}

/* ========= Responsive for sections 2–4 ========= */
@media (max-width: 992px){
  .ring-gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .meters{ grid-template-columns: 1fr; }
  .rail{ grid-template-columns: 1fr; }
  .counts{ grid-template-columns: 1fr 1fr; }
  .flipgrid{ grid-template-columns: 1fr; }
}
@media (max-width: 480px){
  .counts{ grid-template-columns: 1fr; }
}
/* ===== Section 5: City Hops ===== */
.city-hops{
  position:relative;
  background:
    radial-gradient(60% 40% at 0% 10%, rgba(75,255,231,.08), transparent 70%),
    radial-gradient(60% 40% at 100% 0%, rgba(255,75,216,.08), transparent 70%);
}
.hop-strip{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(10px, 3vw, 22px);
}
.hop-card{
  padding: 10px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  filter: var(--nda-glow);
  transform: translateZ(0);
  transition: transform .28s ease, box-shadow .28s ease;
}
.hop-card:hover{ transform: translateY(-6px) rotateZ(-.6deg); box-shadow: 0 0 28px rgba(75,255,231,.22); }
.hop-card figcaption{ margin-top:8px; color:#cdd3ff; font-size:.92rem; }

.path-marquee{
  margin-top: 16px; overflow: hidden; white-space: nowrap;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 999px; padding: 10px 12px; position: relative;
}
.path-marquee span{
  display:inline-block; padding-right: 40px;
  animation: marquee 16s linear infinite;
  letter-spacing: .2em; text-transform: uppercase; color:#cfe8ff;
}
@keyframes marquee { to { transform: translateX(-100%); } }

/* ===== Section 6: Physics ===== */
.physics{
  position:relative;
  background:
    radial-gradient(70% 50% at 50% -10%, rgba(122,92,255,.10), transparent 60%),
    conic-gradient(from 270deg at 50% 90%, rgba(255,255,255,.04), transparent 25%);
}
.ribbons{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(10px, 3vw, 22px);
}
.ribbon-card{
  padding: 10px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  filter: var(--nda-glow);
  transition: transform .25s ease;
}
.ribbon-card:hover{ transform: translateY(-4px); }

.oscilloscope{
  position: relative; margin-top: 18px; padding: 16px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(80% 60% at 50% 40%, rgba(20,18,50,.8), rgba(10,8,30,.7));
  overflow: hidden;
}
.oscilloscope .beam{
  position:absolute; left:0; right:0; top:50%; height:2px;
  background: linear-gradient(90deg, rgba(0,0,0,0), #7a5cff, rgba(0,0,0,0));
  animation: beamMove 3.6s linear infinite;
}
@keyframes beamMove {
  0%{ transform: translateX(-100%); } 100%{ transform: translateX(100%); }
}
.oscilloscope .ticks{
  position:absolute; inset: 0; background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 40px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 24px);
  mask: linear-gradient(#000, transparent 90%);
}
.oscilloscope .note{ margin: 12px 0 0; color:#cdd3ff; text-align:center; }

/* ===== Section 7: Brand Pulse ===== */
.brand-pulse{
  position:relative;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(255,75,216,.10), transparent 60%),
    radial-gradient(60% 40% at 0% 80%, rgba(75,255,231,.06), transparent 70%);
}
.skin-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(10px, 3vw, 22px);
}
.skin{
  padding: 10px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  filter: var(--nda-glow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.skin:hover{ transform: translateY(-4px) scale(1.02); box-shadow: 0 0 24px rgba(255,75,216,.18); }
.skin figcaption{ margin-top: 8px; color:#cdd3ff; text-align:center; }

.legend{
  margin-top: 12px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px;
  list-style:none; padding:0; color:#d7dbff;
}
.key{ display:inline-block; width:14px; height:14px; border-radius:50%; margin-right:8px; vertical-align:-2px; }
.key-cyan{ background: linear-gradient(90deg, var(--nda-cyan), transparent); }
.key-magenta{ background: linear-gradient(90deg, var(--nda-pink), transparent); }
.key-violet{ background: linear-gradient(90deg, var(--nda-violet), transparent); }

/* ===== Responsive for sections 5–7 ===== */
@media (max-width: 992px){
  .hop-strip{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ribbons{ grid-template-columns: 1fr; }
  .skin-grid{ grid-template-columns: 1fr; }
  .legend{ grid-template-columns: 1fr; }
}
/* ===== Section 8: Heats Timeline ===== */
.heats{
  position: relative;
  background:
    radial-gradient(60% 40% at 20% 0%, rgba(75,255,231,.08), transparent 70%),
    radial-gradient(60% 40% at 80% 0%, rgba(255,75,216,.08), transparent 70%);
}
.heat-snap{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: clamp(10px, 3vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
.heat-snap::-webkit-scrollbar{ height: 6px; }
.heat-snap::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }
.heat-card{
  scroll-snap-align: start;
  padding: 10px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  filter: var(--nda-glow);
  transition: transform .25s ease;
}
.heat-card:hover{ transform: translateY(-4px); }
.heat-card figcaption{ margin-top:8px; color:#cdd3ff; }

.timeline{ margin-top: 14px; position: relative; }
.tline{
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--nda-pink), var(--nda-cyan));
  box-shadow: 0 0 18px rgba(123,94,255,.35);
  animation: tlinePulse 2.6s ease-in-out infinite;
}
@keyframes tlinePulse{ 50%{ filter: drop-shadow(0 0 16px rgba(75,255,231,.3)); } }
.tlabels{
  list-style:none; padding:0; margin: 8px 0 0;
  display:grid; grid-template-columns: repeat(6, minmax(0,1fr));
  color:#cdd3ff; gap: 6px; font-size:.9rem;
}

/* ===== Section 9: Audio Reactive ===== */
.audioreact{
  position: relative;
  background: radial-gradient(60% 50% at 50% 0%, rgba(122,92,255,.10), transparent 60%);
}
.audio-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(10px, 3vw, 22px);
}
.audio-card{
  padding: 10px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  filter: var(--nda-glow);
  transition: transform .25s ease;
}
.audio-card:hover{ transform: translateY(-4px); }
.eq-panel{
  margin-top: 16px; border-radius: 16px; padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(80% 60% at 50% 50%, rgba(20,18,50,.8), rgba(10,8,30,.7));
  overflow: hidden;
}
.eq-bars{
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 120px;
}
.eq-bars i{
  display:block; width:100%; height: 20%;
  background: linear-gradient(180deg, var(--nda-cyan), var(--nda-violet));
  border-radius: 6px 6px 0 0;
  animation: eqBump 1.6s ease-in-out infinite;
}
.eq-bars i:nth-child(3n){ animation-duration: 1.2s; }
.eq-bars i:nth-child(4n){ animation-duration: 1.9s; }
@keyframes eqBump{
  0%,100%{ height: 20%; } 50%{ height: 90%; }
}
.eq-panel .note{ margin-top: 10px; color:#cdd3ff; text-align:center; }

/* ===== Section 10: Protocols ===== */
.protocols{
  position: relative;
  background:
    radial-gradient(60% 40% at 10% 0%, rgba(75,255,231,.06), transparent 70%),
    radial-gradient(60% 40% at 90% 0%, rgba(255,75,216,.06), transparent 70%);
}
.proto-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(10px, 3vw, 22px);
}
.proto-card{
  padding: 10px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  filter: var(--nda-glow);
  transition: transform .25s ease;
}
.proto-card:hover{ transform: translateY(-4px); }

.accordions{ margin-top: 14px; display: grid; gap: 10px; }
.acc-btn{
  width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px;
  color: #e8ecff; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12); cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.acc-btn:hover{ background: rgba(122,92,255,.14); border-color: rgba(122,92,255,.35); transform: translateY(-1px); }
.acc-panel{
  padding: 12px 14px; color:#dfe3ff; border-left: 2px solid rgba(122,92,255,.5);
  background: rgba(255,255,255,.03); border-radius: 8px;
}

/* ===== Responsive for 8–10 ===== */
@media (max-width: 992px){
  .tlabels{ grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 4px; }
  .audio-grid{ grid-template-columns: 1fr; }
  .proto-grid{ grid-template-columns: 1fr; }
}
/* ===== Section 11: Power-Ups ===== */
.powerups{
  position: relative;
  background:
    radial-gradient(60% 40% at 15% 0%, rgba(75,255,231,.08), transparent 70%),
    radial-gradient(60% 40% at 85% 0%, rgba(255,75,216,.08), transparent 70%);
}
.mods-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(10px, 3vw, 22px);
}
.mod-card{
  padding: 10px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  filter: var(--nda-glow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.mod-card:hover{ transform: translateY(-4px); box-shadow: 0 0 24px rgba(75,255,231,.18); }

.mod-rail{
  margin-top: 14px; display:flex; flex-wrap: wrap; gap: 10px;
}
.mod-chip{
  appearance:none; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:#e8ecff; padding: 10px 14px; border-radius: 999px; cursor: pointer;
  font-weight: 600; letter-spacing: .04em;
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.mod-chip:hover{ border-color: rgba(122,92,255,.35); background: rgba(122,92,255,.14); }

/* ===== Section 12: Community ===== */
.community{
  position: relative;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(122,92,255,.10), transparent 60%);
}
.crew-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px, 3vw, 22px);
}
.crew-card{
  padding: 10px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  filter: var(--nda-glow);
  transition: transform .25s ease;
}
.crew-card:hover{ transform: translateY(-4px); }

.ladder{
  margin-top: 14px; display:grid; gap: 10px;
}
.ladder-list{
  list-style: none; padding:0; margin:0; display:grid; gap: 8px;
  color:#dfe3ff;
}
.ladder-list li{
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.tag{
  display:inline-grid; place-items:center; width:34px; height:22px; margin-right:8px;
  border-radius: 999px; font-weight:700; color:#071017;
  background: linear-gradient(90deg, var(--nda-pink), var(--nda-cyan));
}
.tag.gold{ background: linear-gradient(90deg, #ffd76a, #ffae00); color:#1a1200; }
.tag.silver{ background: linear-gradient(90deg, #cfd6e6, #aeb6c8); color:#0b0f16; }
.tag.bronze{ background: linear-gradient(90deg, #e7b389, #b8743e); color:#1a0f08; }

.ticker{
  overflow:hidden; white-space:nowrap; border: 1px dashed rgba(255,255,255,.16);
  border-radius: 999px; padding: 10px 12px; position:relative;
}
.ticker span{
  display:inline-block; padding-right: 40px;
  animation: marquee 18s linear infinite;
  letter-spacing: .2em; text-transform: uppercase; color:#cfe8ff;
}

/* ===== Section 13: Sustainability ===== */
.sustain{
  position: relative;
  background:
    radial-gradient(60% 50% at 0% 60%, rgba(75,255,231,.06), transparent 70%),
    radial-gradient(60% 50% at 100% 20%, rgba(255,75,216,.06), transparent 70%);
}
.sustain-wrap{
  display:grid; grid-template-columns: 350px 1fr; gap: clamp(12px, 3.2vw, 28px);
  align-items: start;
}
.sustain-img{
  padding: 10px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
  filter: var(--nda-glow);
}
.sustain-points{
  margin: 0; padding-left: 18px; color:#dfe3ff; display:grid; gap: 8px;
}

/* ===== Responsive (11–13) ===== */
@media (max-width: 992px){
  .mods-grid{ grid-template-columns: 1fr; }
  .crew-grid{ grid-template-columns: 1fr; }
  .sustain-wrap{ grid-template-columns: 1fr; }
}
/* ===== Section 14: App HUD ===== */
.app-hud{
  position: relative;
  background:
    radial-gradient(60% 40% at 10% 0%, rgba(75,255,231,.08), transparent 70%),
    radial-gradient(60% 40% at 90% 0%, rgba(255,75,216,.08), transparent 70%);
}
.hud-wrap{
  display:grid; grid-template-columns: 350px 1fr;
  gap: clamp(12px, 3vw, 28px); align-items: start;
}
.hud-shot{
  padding: 10px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  filter: var(--nda-glow);
  position: relative; overflow: hidden;
}
.hud-shot::after{
  /* diagonal glint */
  content:""; position:absolute; inset:-30% -30%;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.08), transparent 20%);
  animation: glintSweep 4.8s linear infinite;
}
@keyframes glintSweep { to { transform: rotate(360deg); } }

.hud-points{
  margin: 0; padding-left: 18px; color:#dfe3ff; display:grid; gap: 8px;
}

.badges{
  margin-top: 14px; display:flex; flex-wrap: wrap; gap: 10px;
}
.ghost-btn{
  display:inline-block; text-decoration:none; color:#e8ecff;
  padding: 10px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  transition: transform .18s ease, border-color .2s ease, background .2s ease;
}
.ghost-btn:hover{ transform: translateY(-2px); border-color: rgba(122,92,255,.35); background: rgba(122,92,255,.14); }

/* ===== Section 15: Closing Band ===== */
.closing-band{
  position: relative;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(122,92,255,.1), transparent 60%),
    conic-gradient(from 180deg at 50% 80%, rgba(255,255,255,.05), transparent 25%);
}
.closing-wrap{
  display:grid; grid-template-columns: 350px 1fr;
  gap: clamp(12px, 3vw, 28px); align-items:center;
}
.closing-img{
  padding: 10px; border-radius: 16px; position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
  filter: var(--nda-glow);
}
.closing-img::before{
  content:""; position:absolute; inset: -2px;
  border-radius: 18px;
  border: 2px solid transparent;
  background: linear-gradient(90deg, var(--nda-pink), var(--nda-cyan)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: borderShift 6s linear infinite;
}
@keyframes borderShift { to { filter: hue-rotate(360deg); } }

.cta-stack{ display:grid; gap: 10px; align-content: start; }
.solid-btn, .outline-btn{
  display:inline-block; text-decoration:none; text-align:center;
  padding: 12px 16px; border-radius: 12px; font-weight:700;
  transition: transform .18s ease, background .2s ease, border-color .2s ease;
}
.solid-btn{
  color:#071017; background: linear-gradient(90deg, var(--nda-pink), var(--nda-cyan));
  box-shadow: 0 0 18px rgba(123,94,255,.35);
}
.solid-btn:hover{ transform: translateY(-2px); }
.outline-btn{
  color:#e8ecff; border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.outline-btn:hover{ transform: translateY(-2px); border-color: rgba(122,92,255,.35); background: rgba(122,92,255,.14); }

.glow-ticker{
  margin-top: 18px; overflow:hidden; white-space:nowrap;
  border: 1px dashed rgba(255,255,255,.16); border-radius: 999px; padding: 10px 12px;
}
.glow-ticker span{
  display:inline-block; padding-right: 40px; letter-spacing: .2em; text-transform: uppercase; color:#cfe8ff;
  animation: marquee 16s linear infinite;
}

/* ===== Responsive (14–15) ===== */
@media (max-width: 992px){
  .hud-wrap{ grid-template-columns: 1fr; }
  .closing-wrap{ grid-template-columns: 1fr; }
}