/* ══════════════════════════
   VELTRIX — MISSION SECTIONS
   ══════════════════════════ */
.ms {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: var(--sp-32) 0;
}

.ms-inner {
  position: relative;
  z-index: var(--z-content);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-8);
  width: 100%;
}

/* Mission tag */
.ms-tag {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
.ms-num {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--amber);
  letter-spacing: 0.15em;
}
.ms-sep {
  color: rgba(245,245,245,0.2);
  font-family: var(--font-mono);
}
.ms-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: rgba(245,245,245,0.35);
}

/* Mission heading */
.ms-h {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 800;
  color: var(--ice);
  line-height: 1.15;
  margin-bottom: var(--sp-6);
  max-width: 720px;
}

.ms-p {
  font-size: 1.1rem;
  color: var(--ice-dim);
  max-width: 540px;
  margin-bottom: var(--sp-12);
}

/* Mission cards */
.ms-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  max-width: 860px;
}
.ms-cards.inline-cards {
  grid-template-columns: repeat(2, 1fr);
}

.mc {
  background: rgba(23, 23, 28, 0.6);
  border: 1px solid var(--ice-border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  transition: border-color var(--dur-mid), background var(--dur-mid), transform var(--dur-mid);
  backdrop-filter: blur(8px);
}
.mc:hover {
  border-color: var(--amber-border);
  background: rgba(23, 23, 28, 0.85);
  transform: translateY(-4px);
}
.mc-icon {
  font-size: 1.2rem;
  color: var(--amber);
  margin-bottom: var(--sp-4);
  filter: drop-shadow(0 0 6px rgba(245,179,1,0.4));
}
.mc h3 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--ice);
  margin-bottom: var(--sp-2);
}
.mc p {
  font-size: 0.88rem;
  color: rgba(245,245,245,0.5);
  line-height: 1.65;
}

/* ── BG PATTERNS ── */
.ms-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(245,179,1,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,179,1,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.ms-dots-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(245,179,1,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* ── MISSION 01 background accent ── */
#mission-build::before {
  content: '01';
  position: absolute;
  right: -3%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(10rem, 20vw, 18rem);
  font-weight: 900;
  color: rgba(245,179,1,0.03);
  pointer-events: none;
  line-height: 1;
  letter-spacing: -0.05em;
}

/* ── MISSION 02: CREATE — layout ── */
.create-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

/* AI Hub */
.create-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

.ai-hub {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-hub-core {
  position: relative;
  z-index: 2;
  width: 80px;
  height: 80px;
  background: var(--carbon);
  border: 2px solid var(--amber);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--amber);
  box-shadow: 0 0 30px rgba(245,179,1,0.2);
}

.hub-pulse {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(245,179,1,0.3);
  animation: hub-pulse-anim 2s ease-in-out infinite;
}
@keyframes hub-pulse-anim {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 0; }
}

.ai-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(245,179,1,0.12);
  animation: ring-spin 20s linear infinite;
}
.ring-1 { width: 170px; height: 170px; }
.ring-2 { width: 250px; height: 250px; animation-direction: reverse; animation-duration: 30s; }
@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Orbit nodes */
.ai-orbit {
  position: absolute;
  width: 42px;
  height: 42px;
  top: 50%;
  left: 50%;
}
.ai-orbit .ai-node {
  position: absolute;
  top: -21px;
  left: -21px;
  width: 42px;
  height: 42px;
  transform:
    rotate(var(--deg))
    translateY(calc(-1 * var(--dist)))
    rotate(calc(-1 * var(--deg)));
}

.ai-node {
  background: var(--carbon);
  border: 1px solid var(--amber-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--amber);
  transition: border-color var(--dur-mid), background var(--dur-mid);
  animation: node-float 3s ease-in-out infinite;
}
.ai-node:hover {
  border-color: var(--amber);
  background: var(--amber-dim);
}
.ai-orbit:nth-child(odd) .ai-node { animation-delay: 0.5s; }
@keyframes node-float {
  0%, 100% { box-shadow: 0 0 0 rgba(245,179,1,0); }
  50%       { box-shadow: 0 0 12px rgba(245,179,1,0.2); }
}

/* ── MISSION 03: AUTOMATE ── */
.dark-ms {
  background: linear-gradient(135deg, var(--obsidian) 0%, rgba(23,23,28,0.5) 100%);
}

.automate-bg {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 59px,
      rgba(245,179,1,0.04) 59px,
      rgba(245,179,1,0.04) 60px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 59px,
      rgba(245,179,1,0.04) 59px,
      rgba(245,179,1,0.04) 60px
    );
}

/* Flow diagram */
.flow-diag {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--sp-12);
  flex-wrap: wrap;
}

.flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  background: rgba(23,23,28,0.8);
  border: 1px solid var(--ice-border);
  border-radius: var(--r-md);
  min-width: 90px;
  transition: border-color var(--dur-mid);
}
.flow-node:hover { border-color: var(--amber-border); }
.fn-ico {
  font-size: 1.2rem;
  color: var(--ice-dim);
  line-height: 1;
}
.fn-ai .fn-ico { color: var(--amber); }
.fn-out .fn-ico { color: var(--success); }
.flow-node span {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  color: rgba(245,245,245,0.4);
}

.flow-line {
  flex: 1;
  min-width: 30px;
  height: 2px;
  background: rgba(245,179,1,0.15);
  position: relative;
  overflow: hidden;
}
.flow-pkt {
  position: absolute;
  left: -20px;
  top: -2px;
  width: 20px;
  height: 6px;
  background: linear-gradient(to right, transparent, var(--amber));
  border-radius: var(--r-full);
  animation: pkt-travel 2s linear infinite;
}
.flow-line:nth-child(4) .flow-pkt { animation-delay: 0.66s; }
.flow-line:nth-child(6) .flow-pkt { animation-delay: 1.33s; }
@keyframes pkt-travel {
  from { left: -20px; }
  to   { left: 100%; }
}

/* ── MISSION 04: EVOLVE ── */
.evolve-ms {
  background: var(--obsidian);
}

.evolve-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(245,179,1,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.evolve-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.center-tag {
  justify-content: center;
}

.evolve-h {
  font-size: clamp(2.2rem, 4.5vw, 4.2rem);
  text-align: center;
}

.evolve-sub {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  color: var(--amber);
  margin-bottom: var(--sp-12);
}

/* Stats */
.evolve-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-8);
  max-width: 900px;
  width: 100%;
  margin-bottom: var(--sp-12);
}
.es {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6);
  background: rgba(23,23,28,0.5);
  border: 1px solid var(--ice-border);
  border-radius: var(--r-md);
  transition: border-color var(--dur-mid);
}
.es:hover { border-color: var(--amber-border); }
.es-n {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--amber);
  line-height: 1;
}
.es-l {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(245,245,245,0.35);
  text-align: center;
}

.evolve-quote {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.5vw, 1.05rem);
  color: rgba(245,245,245,0.25);
  font-style: italic;
  letter-spacing: 0.03em;
  line-height: 1.7;
  max-width: 620px;
}