/* Software portfolio — cinematic stages keyed to app icons */
.page-software {
  background: #070f1c;
}

.suite-rail {
  display: none;
  position: fixed;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 1100px) {
  .suite-rail { display: flex; }
}
.suite-rail a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  text-decoration: none;
}
.suite-rail a:hover { color: var(--color-accent); }

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 6rem 1.5rem 4rem;
  overflow: hidden;
}
.stage__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 18% 45%, color-mix(in srgb, var(--stage-accent) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 35% at 85% 20%, color-mix(in srgb, var(--stage-accent-2, var(--stage-accent)) 10%, transparent), transparent 65%);
}
.stage__grid {
  position: relative;
  z-index: 1;
  width: min(100%, 72rem);
  margin-inline: auto;
  display: grid;
  gap: 2.5rem;
  /* Same rule every stage: icon + copy share vertical center */
  align-items: center;
}
@media (min-width: 860px) {
  .stage__grid {
    grid-template-columns: 17rem 1fr;
    gap: 4rem;
  }
  .stage__grid--suite {
    grid-template-columns: 1fr;
    max-width: 40rem;
  }
}

/* One mark: the app icon itself — no nested plate behind squircles */
.stage__mark {
  width: 17rem;
  height: 17rem;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  align-self: center;
}
.stage__mark img {
  display: block;
  width: 17rem;
  height: 17rem;
  object-fit: contain;
  border-radius: 1.75rem;
  filter: drop-shadow(0 18px 40px color-mix(in srgb, var(--stage-accent) 35%, transparent));
}

.stage__kicker {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stage-accent);
}
.stage h1 {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--stage-text, #f4f7fb);
  max-width: 18ch;
}
.stage__lede {
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  color: var(--stage-muted, #9aacc4);
  max-width: 38rem;
}
.stage__price {
  margin: 1.75rem 0 1.5rem;
  font-size: 1.15rem;
  color: var(--stage-muted, #9aacc4);
}
.stage__price strong {
  color: var(--stage-text, #f4f7fb);
  font-size: 1.5rem;
}

/* Meridian — navy, teal→green M, gold Polaris bar */
.stage--meridian {
  --stage-accent: #3ecfb4;
  --stage-accent-2: #e6b84a;
  --stage-surface: #0d1b2a;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #12263a 0%, #0a0a0f 55%);
}

/* Sonar — OLED black + signal red glow */
.stage--sonar {
  --stage-accent: #ff2a2a;
  --stage-accent-2: #D71921;
  --stage-surface: #111114;
  background: #0A0A0A;
}

/* Compass — navy, cyan needle glow, gold rose */
.stage--compass {
  --stage-accent: #00E5FF;
  --stage-accent-2: #FFB800;
  --stage-text: #F4EBD9;
  --stage-muted: #a8b8cc;
  --stage-surface: #0B2147;
  background: radial-gradient(ellipse 70% 50% at 30% 40%, #0f2a55 0%, #0B1B2B 60%);
}

/* Atrium — dark card; white/purple glow matching logo (logo mark unchanged) */
.stage--atrium {
  --stage-accent: #c4b5fd;
  --stage-accent-2: #f5f3ff;
  --stage-text: #f4f7fb;
  --stage-muted: #a8b0c2;
  --stage-surface: #0c0a14;
  background:
    radial-gradient(ellipse 55% 50% at 20% 45%, rgba(139, 92, 246, 0.28) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 55% 40%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
    #070b14;
}
.stage--atrium .stage__glow {
  opacity: 1;
  background:
    radial-gradient(ellipse 50% 45% at 18% 48%, rgba(167, 139, 250, 0.35), transparent 70%),
    radial-gradient(ellipse 35% 35% at 42% 38%, rgba(255, 255, 255, 0.14), transparent 65%),
    radial-gradient(ellipse 30% 30% at 78% 22%, rgba(124, 58, 237, 0.18), transparent 70%);
}
.stage--suite {
  --stage-accent: #3db4ff;
  background: #070f1c;
}


/* Haven — shield mark on blue */
.stage--haven {
  --stage-accent: #22d3ee;
  --stage-accent-2: #3b82f6;
  --stage-surface: #0b3d91;
  background: radial-gradient(ellipse 70% 55% at 25% 40%, #1e4db7 0%, #0b0f14 58%);
}

/* Waypoint — neon electric blue W */
.stage--waypoint {
  --stage-accent: #3b9eff;
  --stage-accent-2: #00e5ff;
  --stage-surface: #050505;
  background: radial-gradient(ellipse 65% 50% at 20% 45%, #0a1a33 0%, #050505 60%);
}