/* VNA Finalist Presentation — Styles
   Design system: "Confident Precision"
   Dark-first, typographically bold, spatially generous. */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --color-bg-primary: #0D0F12;
  --color-bg-secondary: #161921;
  --color-bg-elevated: #1E222C;

  --color-text-primary: #F0F0F2;
  --color-text-secondary: #9499A8;
  --color-text-muted: #5C6175;

  --color-accent: #E8A838;
  --color-accent-hover: #F0BC5C;
  --color-accent-muted: rgba(232, 168, 56, 0.15);

  --color-border: rgba(148, 153, 168, 0.12);
  --color-border-accent: rgba(232, 168, 56, 0.3);

  --color-phase-discovery: #5B8DEF;
  --color-phase-build: #E8A838;
  --color-phase-validate: #6FCF97;
  --color-phase-live: #F06292;

  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --text-hero: clamp(3rem, 5vw, 4.5rem);
  --text-section: clamp(2rem, 3.5vw, 3rem);
  --text-heading: clamp(1.25rem, 2vw, 1.75rem);
  --text-body: clamp(1rem, 1.2vw, 1.2rem);
  --text-label: 0.85rem;
  --text-data: clamp(2.5rem, 4vw, 4rem);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--color-text-muted) var(--color-bg-primary);
}

body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Typography ── */
.section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-hero);
  line-height: 1.1;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
}

.section-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-heading);
  color: var(--color-text-secondary);
  line-height: 1.4;
  font-weight: 400;
  max-width: 800px;
}

.section-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.data-number {
  font-family: var(--font-body);
  font-size: var(--text-data);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.02em;
}

.data-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.5rem;
}

.accent { color: var(--color-accent); }

/* ── Section Layout ── */
.presentation-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 6rem) clamp(3rem, 6vw, 8rem);
  padding-right: clamp(4rem, 8vw, 10rem);
  position: relative;
  scroll-snap-align: start;
}

.section-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* ── Navigation ── */
.presentation-nav {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 100;
}

.nav-dot-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-text-muted);
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 0;
  flex-shrink: 0;
}

.nav-dot:hover {
  background: var(--color-text-secondary);
  transform: scale(1.3);
}

.nav-dot.active {
  background: var(--color-accent);
  transform: scale(1.5);
  box-shadow: 0 0 12px rgba(232, 168, 56, 0.4);
}

.nav-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  background: var(--color-bg-elevated);
  padding: 4px 10px;
  border-radius: 4px;
  pointer-events: none;
  /* Hidden by default — fade out is 0.3s */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Hover: fade in fast (0.15s) */
.nav-dot-wrap:hover .nav-tooltip {
  opacity: 1;
  transition: opacity 0.15s ease;
}

/* Flash on section change: controlled by JS */
.nav-tooltip.flash {
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Logo in nav area */
.nav-logo {
  position: fixed;
  top: 2rem;
  left: 2.5rem;
  z-index: 100;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.nav-logo:hover { opacity: 1; }

.nav-logo img {
  height: 32px;
  width: auto;
}

/* ── Animations ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.animate-in {
  opacity: 0;
}

.section-visible .animate-in {
  animation: fadeInUp 0.6s ease-out forwards;
}

.section-visible .animate-in:nth-child(1) { animation-delay: 0s; }
.section-visible .animate-in:nth-child(2) { animation-delay: 0.1s; }
.section-visible .animate-in:nth-child(3) { animation-delay: 0.15s; }
.section-visible .animate-in:nth-child(4) { animation-delay: 0.2s; }
.section-visible .animate-in:nth-child(5) { animation-delay: 0.25s; }
.section-visible .animate-in:nth-child(6) { animation-delay: 0.3s; }
.section-visible .animate-in:nth-child(7) { animation-delay: 0.35s; }
.section-visible .animate-in:nth-child(8) { animation-delay: 0.4s; }

.section-visible .animate-fade {
  animation: fadeIn 0.8s ease-out forwards;
}

/* ── Cards ── */
.card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 2rem;
  transition: border-color 0.2s ease;
}

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

.card--highlighted {
  border-color: var(--color-accent);
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, rgba(232, 168, 56, 0.04) 100%);
}

.card-title {
  font-family: var(--font-body);
  font-size: var(--text-heading);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.card-role {
  font-size: var(--text-label);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  margin-bottom: 1rem;
}

.card-text {
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: 1.6;
}

/* Read-more links */
.read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--color-accent);
  text-decoration: none;
  font-size: var(--text-label);
  font-weight: 500;
  transition: color 0.2s ease;
}

.read-more:hover {
  color: var(--color-accent-hover);
}

.read-more::after {
  content: '\2192';
  display: inline-block;
  transition: transform 0.2s ease;
}

.read-more:hover::after {
  transform: translateX(4px);
}

/* Section divider */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--color-border) 20%, var(--color-border) 80%, transparent 100%);
  margin: 0 auto;
  max-width: 800px;
}

/* ── Section 0: Title ── */
.section-title-screen {
  text-align: center;
  align-items: center;
}

.title-logo {
  width: 190px;
  height: auto;
  margin-bottom: 2.5rem;
  opacity: 0.95;
}

.closing-logo {
  width: 160px;
  height: auto;
  margin-top: 1.5rem;
  opacity: 0.45;
}

.title-main {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  line-height: 1.05;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.title-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  color: var(--color-accent);
  margin-bottom: 2.5rem;
  line-height: 1.2;
}

.title-date {
  font-size: 1rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.title-presenters {
  font-size: 1.15rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
}

.title-tagline {
  margin-top: 4rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--color-text-secondary);
}

/* ── Section 1: Setting the Stage ── */
.stage-framing {
  font-size: var(--text-heading);
  color: var(--color-text-secondary);
  max-width: 700px;
  margin-bottom: 3rem;
  line-height: 1.5;
}

.ai-thread {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-width: 700px;
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

.presenter-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

.roadmap {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.roadmap-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.75rem 1.25rem;
}

.roadmap-number {
  font-weight: 700;
  color: var(--color-accent);
  font-size: 1rem;
  min-width: 1.5em;
}

.roadmap-label {
  font-size: 0.95rem;
  color: var(--color-text-primary);
}

.roadmap-time {
  font-size: var(--text-label);
  color: var(--color-text-secondary);
  margin-left: 0.25rem;
}

.questions-invite {
  margin-top: 2rem;
  color: var(--color-text-secondary);
  font-style: normal;
  font-family: var(--font-body);
  font-size: 1.1rem;
}

/* ── Section 2: Architecture Diagram ── */
.arch-container {
  position: relative;
  max-width: 1200px;
  margin: 1rem auto 0;
}

.arch-description {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.tech-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.arch-layer {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 2px;
  position: relative;
}

.arch-layer-label {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-primary);
  min-width: 36px;
  border-radius: 8px 0 0 8px;
}

.arch-layer[data-layer="channels"] .arch-layer-label { background: rgba(91, 141, 239, 0.2); }
.arch-layer[data-layer="core"] .arch-layer-label { background: rgba(232, 168, 56, 0.2); }
.arch-layer[data-layer="data"] .arch-layer-label { background: rgba(111, 207, 151, 0.2); }
.arch-layer[data-layer="infra"] .arch-layer-label { background: rgba(240, 98, 146, 0.2); }
.arch-layer[data-layer="testing"] .arch-layer-label { background: rgba(149, 117, 205, 0.2); }

.arch-nodes {
  display: flex;
  gap: 0.5rem;
  flex: 1;
  padding: 0.5rem;
  background: var(--color-bg-secondary);
  border-radius: 0 8px 8px 0;
  border: 1px solid var(--color-border);
  border-left: none;
  flex-wrap: wrap;
}

.arch-node {
  flex: 1;
  min-width: 140px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.arch-node:hover {
  border-color: var(--color-border-accent);
}

.arch-node-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.2rem;
}

.arch-node-tech {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.arch-arrows {
  display: flex;
  justify-content: center;
  padding: 0.1rem 0;
}

.arch-arrow {
  width: 2px;
  height: 10px;
  background: var(--color-text-muted);
  position: relative;
  margin: 0 3rem;
  opacity: 0.4;
}

.arch-arrow::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--color-text-muted);
}

.arch-detail-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-accent);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  display: none;
}

.arch-detail-panel.visible { display: block; }

.arch-detail-panel h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.4rem;
}

.arch-detail-panel p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.security-bar {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.75rem;
  padding: 0.6rem 1.5rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.security-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.security-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-phase-validate);
  flex-shrink: 0;
}

/* ── Section 3: Timeline ── */
.timeline-container {
  max-width: 1200px;
  margin: 2rem auto 0;
  position: relative;
}

.timeline-header {
  display: flex;
  margin-left: 140px;
  margin-bottom: 0.5rem;
  position: relative;
}

.timeline-month {
  flex: 1;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.timeline-rfp-window {
  position: absolute;
  top: -4px;
  left: 0;
  height: calc(100% + 8px);
  background: rgba(240, 98, 146, 0.06);
  border: 1px dashed rgba(240, 98, 146, 0.25);
  border-radius: 4px;
  pointer-events: none;
}

.timeline-rfp-label {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: var(--color-phase-live);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.timeline-lanes {
  position: relative;
}

.timeline-lane {
  display: flex;
  align-items: center;
  height: 52px;
  margin-bottom: 4px;
  position: relative;
}

.timeline-lane-label {
  width: 140px;
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  padding-right: 1rem;
  text-align: right;
  line-height: 1.3;
  font-weight: 500;
}

.timeline-lane-track {
  flex: 1;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.timeline-bar {
  position: absolute;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.timeline-bar:hover {
  filter: brightness(1.1);
  transform: scaleY(1.1);
}

.timeline-bar[data-phase="discovery"] { background: var(--color-phase-discovery); }
.timeline-bar[data-phase="build"] { background: var(--color-phase-build); }
.timeline-bar[data-phase="validate"] { background: var(--color-phase-validate); }
.timeline-bar[data-phase="live"] { background: var(--color-phase-live); }
.timeline-bar[data-phase="setup"] { background: var(--color-phase-discovery); }

.timeline-milestones {
  display: flex;
  margin-left: 140px;
  margin-top: 0.75rem;
  position: relative;
  height: 28px;
}

.timeline-milestone {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.milestone-diamond {
  width: 12px;
  height: 12px;
  background: var(--color-accent);
  transform: rotate(45deg);
  border-radius: 2px;
  flex-shrink: 0;
}

.milestone-label {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  margin-top: 6px;
  white-space: nowrap;
  text-align: center;
  max-width: 80px;
  line-height: 1.2;
}

.timeline-gates {
  display: flex;
  margin-left: 140px;
  margin-top: 0.75rem;
  position: relative;
  height: 28px;
}

.timeline-gate {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.gate-shield {
  width: 14px;
  height: 16px;
  background: var(--color-phase-validate);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  flex-shrink: 0;
}

.gate-label {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  margin-top: 4px;
  white-space: nowrap;
  text-align: center;
  max-width: 80px;
  line-height: 1.2;
}

.timeline-detail-panel {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-accent);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  display: none;
  animation: fadeIn 0.3s ease-out;
}

.timeline-detail-panel.visible { display: block; }

.timeline-detail-panel h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.3rem;
}

.timeline-detail-panel p {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.realism-callout {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: rgba(240, 98, 146, 0.06);
  border: 1px solid rgba(240, 98, 146, 0.2);
  border-radius: 8px;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.realism-callout-icon {
  font-size: 1.25rem;
  color: var(--color-phase-live);
  flex-shrink: 0;
  line-height: 1;
}

.realism-callout p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.realism-callout strong {
  color: var(--color-text-primary);
}

/* ── Section 4: Team Structure ── */
.team-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 580px;
  margin: 2rem auto 0;
}

.team-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.team-connections line {
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.team-node {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 1;
  transition: all 0.3s ease;
  text-align: center;
}

.team-node-inner {
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.team-node:hover .team-node-inner {
  border-color: var(--color-border-accent);
}

.team-node--center .team-node-inner {
  width: 160px;
  height: 160px;
  border-color: var(--color-accent);
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, rgba(232, 168, 56, 0.06) 100%);
}

.team-node--pm .team-node-inner {
  width: 110px;
  height: 110px;
  border-color: var(--color-text-muted);
}

.team-node--outer .team-node-inner {
  width: 120px;
  height: 120px;
}

.team-node-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.team-node--center .team-node-name {
  font-size: 0.85rem;
}

.team-node-role {
  font-size: 0.68rem;
  color: var(--color-text-secondary);
  margin-top: 0.15rem;
  line-height: 1.2;
  max-width: 90px;
}

.team-node--center .team-node-role {
  color: var(--color-accent);
  font-size: 0.65rem;
  font-weight: 500;
}

.team-detail-panel {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-accent);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  display: none;
  animation: fadeIn 0.3s ease-out;
  z-index: 10;
}

.team-detail-panel.visible { display: block; }

.team-detail-panel h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.3rem;
}

.team-detail-panel p {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.staffing-philosophy {
  margin-top: 1.5rem;
  text-align: center;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Section 5: SDLC / How We Work ── */

.sdlc-inner {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 4rem;
  align-items: center;
}

.sdlc-text {
  display: flex;
  flex-direction: column;
}

.sdlc-text .section-subtitle {
  margin-bottom: 2.5rem;
}

.sdlc-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sdlc-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  transition: border-color 0.2s ease;
}

.sdlc-card:hover {
  border-color: var(--color-border-accent);
}

.sdlc-card--accent {
  border-color: rgba(232, 168, 56, 0.35);
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, rgba(232, 168, 56, 0.04) 100%);
}

.sdlc-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-elevated);
  border-radius: 8px;
  color: var(--color-accent);
  margin-top: 0.1rem;
}

.sdlc-card--accent .sdlc-card-icon {
  background: rgba(232, 168, 56, 0.12);
}

.sdlc-card-title {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.sdlc-card--accent .sdlc-card-title {
  color: var(--color-accent);
}

.sdlc-card-body {
  font-family: var(--font-body);
  font-size: var(--text-label);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Sprint cycle SVG */
.sdlc-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sprint-svg {
  width: 100%;
  max-width: 380px;
  height: auto;
}

/* Arc segments */
.sprint-arc {
  fill: none;
  stroke-linecap: round;
}

.sprint-arc--plan  { stroke: var(--color-phase-discovery); opacity: 0.7; }
.sprint-arc--build { stroke: var(--color-accent); opacity: 1; stroke-width: 24px; }
.sprint-arc--demo  { stroke: var(--color-phase-validate); opacity: 0.7; }
.sprint-arc--retro { stroke: var(--color-text-muted); opacity: 0.5; }

/* Phase labels */
.sprint-phase-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  fill: var(--color-text-secondary);
}

.sprint-phase-label--plan  { fill: var(--color-phase-discovery); }
.sprint-phase-label--build { fill: var(--color-accent); font-weight: 700; font-size: 15px; }
.sprint-phase-label--demo  { fill: var(--color-phase-validate); }
.sprint-phase-label--retro { fill: var(--color-text-secondary); }

/* Center text */
.sprint-center-number {
  font-family: var(--font-body);
  font-size: 48px;
  font-weight: 700;
  fill: var(--color-accent);
  dominant-baseline: middle;
}

.sprint-center-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  fill: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.sprint-cadence-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  fill: var(--color-text-secondary);
  letter-spacing: 0.04em;
}

/* Entrance animation for SDLC diagram */
.section-visible .sdlc-diagram.animate-in {
  animation-delay: 0.25s;
}

/* Responsive: stack on narrow viewports */
@media (max-width: 900px) {
  .sdlc-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .sdlc-diagram {
    order: -1;
  }

  .sprint-svg {
    max-width: 280px;
  }
}

/* ── Section 6: Support Flow ── */

/* New 3-card horizontal layout */
.support-flow-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 1200px;
  margin: 2rem auto 0;
}

.support-flow-row .flow-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 175px;
  min-width: 0;
  text-align: left;
}

.support-flow-row .flow-arrow {
  align-self: center;
  flex-shrink: 0;
  padding: 0 1.25rem;
}

.support-step-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-secondary);
  margin-bottom: 0.65rem;
}

.support-step-label--t1 { color: var(--color-phase-discovery); }
.support-step-label--t2 { color: var(--color-accent); }

.support-card-outcome {
  margin-top: auto;
  padding-top: 1.25rem;
}

.support-card-pct {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 700;
  color: var(--color-phase-validate);
  line-height: 1;
}

.support-card-pct-label {
  display: block;
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

.support-card-resolved {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  background: rgba(111, 207, 151, 0.08);
  border: 1px solid rgba(111, 207, 151, 0.3);
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-phase-validate);
}

/* Bottom row: AI callout + demo teaser side by side */
.support-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.support-bottom-row .ai-enablement-callout {
  max-width: none;
  margin-top: 0;
}

.support-bottom-row .demo-teaser {
  margin: 0;
  text-align: left;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flow-node {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.25rem;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  text-align: center;
  min-width: 150px;
}

.flow-node:hover {
  border-color: var(--color-border-accent);
}

.flow-node--tier1 {
  border-left: 3px solid var(--color-phase-discovery);
  min-width: 200px;
}

.flow-node--tier2 {
  border-left: 3px solid var(--color-accent);
  min-width: 200px;
}

.flow-node--user {
  border-left: 3px solid var(--color-text-muted);
}

.flow-node--resolved {
  border-left: 3px solid var(--color-phase-validate);
}

.flow-node-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.4rem;
}

.flow-node-desc {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.flow-arrow {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  color: var(--color-text-secondary);
  font-size: 1.2rem;
  flex-shrink: 0;
  align-self: center;
}

.flow-branch {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.flow-branch-row {
  display: flex;
  align-items: center;
  gap: 0;
}

.flow-branch-label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.support-detail-panel {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-accent);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
  display: none;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.support-detail-panel.visible { display: block; }

.support-detail-panel h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.3rem;
}

.support-detail-panel p {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.ai-enablement-callout {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  border-left: 2px solid var(--color-accent);
  max-width: 620px;
}

.ai-enablement-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-label);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  flex-shrink: 0;
}

.ai-enablement-callout p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.demo-hint-name {
  font-weight: 600;
  font-style: normal;
  color: var(--color-accent);
}

.demo-teaser {
  margin-top: 2.5rem;
  padding: 1.5rem 2rem;
  background: var(--color-accent-muted);
  border: 1px solid var(--color-border-accent);
  border-radius: 10px;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.demo-teaser p {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--color-text-primary);
  line-height: 1.5;
}

.demo-teaser .demo-hint {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ── Section 6: Pricing ── */

/* Side-by-side layout: card left, includes right */
.pricing-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  max-width: 1050px;
  margin: 1.75rem auto 0;
  align-items: start;
}

.pricing-layout .pricing-grid {
  margin: 0;
  max-width: none;
}

/* Right panel: strip the box — it's context, not hero */
.pricing-layout .pricing-includes {
  margin-top: 0;
  max-width: none;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0.25rem 0;
}

/* Tighten card internals to keep everything in-viewport */
.pricing-layout .pricing-card {
  padding: 2rem;
}

.pricing-layout .pricing-card-title {
  margin-bottom: 1.25rem;
}

.pricing-layout .pricing-row {
  margin-bottom: 1rem;
}

/* Subtitle is large at 1920px — scope it down for this section */
#section-6 .section-subtitle {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  margin-bottom: 0;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1050px;
  margin: 2rem auto 0;
}

.pricing-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 2.5rem;
  position: relative;
  transition: border-color 0.2s ease;
}

.pricing-card--recommended {
  border-color: var(--color-accent);
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, rgba(232, 168, 56, 0.04) 100%);
}

.pricing-badge {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-bg-primary);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  margin-bottom: 1.25rem;
}

.pricing-badge--alt {
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
}

.pricing-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 2rem;
}

.pricing-row {
  margin-bottom: 1.5rem;
}

.pricing-row .data-number {
  font-size: clamp(2rem, 3.5vw, 3rem);
}

.pricing-row .data-label {
  margin-top: 0.25rem;
}

.pricing-rationale {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  font-style: italic;
}

.pricing-includes {
  max-width: 1050px;
  margin: 2.5rem auto 0;
  padding: 1.5rem 2rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.pricing-includes h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
}

.includes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  list-style: none;
}

.includes-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.includes-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-phase-validate);
  flex-shrink: 0;
}

/* ── Section 7: Closing ── */
.closing-section {
  text-align: center;
  align-items: center;
}

.closing-recap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 3rem;
  align-items: center;
}

.recap-item {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.recap-item::before {
  content: '';
  width: 8px;
  height: 2px;
  background: var(--color-accent);
  flex-shrink: 0;
}

.closing-demo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-section);
  color: var(--color-accent);
  margin-bottom: 2rem;
}

.closing-statement {
  max-width: 680px;
  margin: 0 auto 3rem;
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.closing-contact {
  display: flex;
  gap: 3rem;
  justify-content: center;
}

.contact-item {
  text-align: center;
}

.contact-name {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 1rem;
  margin-bottom: 0.15rem;
}

.contact-role {
  font-size: var(--text-label);
  color: var(--color-text-secondary);
}

.closing-url {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.closing-url a {
  color: var(--color-accent);
  text-decoration: none;
}

.closing-url a:hover {
  color: var(--color-accent-hover);
}

/* ── Diagram Interactive States ── */
.diagram-node {
  transition: opacity 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
}

.diagram-node.dimmed {
  opacity: 0.2;
  pointer-events: none;
}

.diagram-node.focused {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(232, 168, 56, 0.25));
}

.arch-node.focused {
  border-color: var(--color-accent);
}

/* Layer-level focus for architecture */
.arch-layer.dimmed { opacity: 0.2; pointer-events: none; }
.arch-layer.focused { opacity: 1; }
.arch-layer { transition: opacity 0.3s ease; }

/* Timeline element states */
.timeline-lane.dimmed { opacity: 0.2; }
.timeline-lane.focused { opacity: 1; }
.timeline-lane { transition: opacity 0.3s ease; }

.timeline-milestone.dimmed { opacity: 0.2; }
.timeline-milestone.focused { opacity: 1; }
.timeline-milestone { transition: opacity 0.3s ease; }

.timeline-gate.dimmed { opacity: 0.2; }
.timeline-gate.focused { opacity: 1; }
.timeline-gate { transition: opacity 0.3s ease; }

/* Team node states */
.team-node.dimmed { opacity: 0.2; }
.team-node.focused { opacity: 1; }
.team-node.focused .team-node-inner {
  border-color: var(--color-accent);
  box-shadow: 0 0 20px rgba(232, 168, 56, 0.15);
}

/* Support flow states */
.flow-node.dimmed { opacity: 0.2; }
.flow-node.focused {
  opacity: 1;
  border-color: var(--color-accent);
  box-shadow: 0 0 16px rgba(232, 168, 56, 0.12);
}
.flow-arrow.dimmed { opacity: 0.1; }

/* ═══════════════════════════════════════════════════════════════
   ENHANCEMENTS — Motion & Polish
   ═══════════════════════════════════════════════════════════════ */

/* ── Scroll Progress Bar ── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--color-accent);
  z-index: 1000;
  pointer-events: none;
  transform-origin: left center;
}

/* ── Section Label — Clip-Path Wipe Entrance ── */
.section-label.animate-in {
  clip-path: inset(0 100% 0 0);
  opacity: 1 !important;
}

.section-visible .section-label.animate-in {
  animation: labelWipe 0.4s ease-out forwards !important;
  animation-delay: 0s !important;
}

@keyframes labelWipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* Updated stagger: label wipes first (0s/0.4s), content follows from 0.4s */
.section-visible .animate-in:nth-child(1) { animation-delay: 0s; }
.section-visible .animate-in:nth-child(2) { animation-delay: 0.4s; }
.section-visible .animate-in:nth-child(3) { animation-delay: 0.55s; }
.section-visible .animate-in:nth-child(4) { animation-delay: 0.65s; }
.section-visible .animate-in:nth-child(5) { animation-delay: 0.75s; }
.section-visible .animate-in:nth-child(6) { animation-delay: 0.85s; }
.section-visible .animate-in:nth-child(7) { animation-delay: 0.95s; }
.section-visible .animate-in:nth-child(8) { animation-delay: 1.05s; }

/* ── Section 0: Title — Ambient Background + Special Timings ── */
.section-title-screen {
  overflow: hidden;
}

.section-title-screen::before {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 60% 55% at 25% 65%, rgba(232, 168, 56, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 45% at 75% 30%, rgba(91, 141, 239, 0.04) 0%, transparent 65%),
    radial-gradient(ellipse 90% 90% at 50% 50%, rgba(30, 34, 44, 0.5) 0%, transparent 100%);
  animation: ambientDrift 25s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.section-title-screen .section-inner {
  position: relative;
  z-index: 1;
}

@keyframes ambientDrift {
  0%   { transform: scale(1)    translate(0%, 0%); }
  33%  { transform: scale(1.06) translate(3%, -3%); }
  66%  { transform: scale(1.03) translate(-3%, 4%); }
  100% { transform: scale(1.05) translate(2%, 2%); }
}

/* Title section: no section-label, so no 2-beat delay — use direct stagger */
.section-title-screen.section-visible .animate-in:nth-child(1) { animation-delay: 0s; }
.section-title-screen.section-visible .animate-in:nth-child(2) { animation-delay: 0.3s; }
.section-title-screen.section-visible .animate-in:nth-child(3) { animation-delay: 0.5s; }
.section-title-screen.section-visible .animate-in:nth-child(4) { animation-delay: 0.7s; }
.section-title-screen.section-visible .animate-in:nth-child(5) { animation-delay: 0.85s; }
.section-title-screen.section-visible .animate-in:nth-child(6) { animation-delay: 1.0s; }
.section-title-screen.section-visible .animate-in:nth-child(7) { animation-delay: 1.25s; }

/* Logo: scale from 0.95 → 1.0 on load */
@keyframes logoEntrance {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 0.95; transform: scale(1); }
}

.section-title-screen.section-visible .title-logo.animate-in {
  animation: logoEntrance 1.2s ease-out forwards !important;
  animation-delay: 0s !important;
}

/* Self-drawing accent line — center-outward */
.title-accent-line {
  width: 200px;
  height: 2px;
  background: rgba(232, 168, 56, 0.4);
  transform-origin: center;
  transform: scaleX(0);
  margin-top: 2.5rem;
  border-radius: 1px;
}

.section-title-screen.section-visible .title-accent-line {
  animation: lineExpandCenter 1.5s ease-out forwards;
  animation-delay: 1.25s;
}

@keyframes lineExpandCenter {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Nav Dot — Active Pulse + Auto-Tooltip ── */
@keyframes dotActivePulse {
  0%   { transform: scale(1.4); box-shadow: 0 0 0 0 rgba(232, 168, 56, 0.5); }
  40%  { transform: scale(1.7); box-shadow: 0 0 0 8px rgba(232, 168, 56, 0); }
  100% { transform: scale(1.4); box-shadow: 0 0 12px rgba(232, 168, 56, 0.4); }
}

.nav-dot.active.dot-pulse {
  animation: dotActivePulse 0.4s ease-out forwards;
}

/* .nav-tooltip.flash handles the section-change flash — defined above */

/* ── Detail Panels — Slide-Up Entrance (all panels) ── */
@keyframes slideUpPanel {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.arch-detail-panel.visible,
.timeline-detail-panel.visible,
.support-detail-panel.visible {
  animation: slideUpPanel 0.3s ease-out forwards;
  border-left: 3px solid var(--color-accent);
  padding-left: 1.25rem;
}

.team-detail-panel.visible {
  display: block;
  animation: slideUpPanel 0.3s ease-out forwards;
  border-left: 3px solid var(--color-accent);
  padding-left: 1.25rem;
}

/* Layer badge in arch detail panel */
.arch-layer-badge {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-secondary);
  margin-bottom: 0.3rem;
}

/* ── Architecture Diagram — Traveling Dot on Arrows ── */
.arch-arrow {
  overflow: visible;
  position: relative;
}

@keyframes dotTravel {
  0%   { top: -3px; opacity: 0; }
  15%  { opacity: 0.85; }
  85%  { opacity: 0.85; }
  100% { top: 19px; opacity: 0; }
}

.arch-arrow::before {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--color-accent);
  border-radius: 50%;
  left: 50%;
  top: -3px;
  transform: translateX(-50%);
  opacity: 0;
  animation: dotTravel 2.5s ease-in-out infinite;
}

.arch-arrow:nth-child(1)::before { animation-delay: 0s; }
.arch-arrow:nth-child(2)::before { animation-delay: 0.85s; }
.arch-arrow:nth-child(3)::before { animation-delay: 1.7s; }

/* Layer focus — inner glow on nodes container */
.arch-layer.focused .arch-nodes {
  box-shadow: inset 0 0 60px rgba(232, 168, 56, 0.05);
}

.arch-layer.focused .arch-layer-label {
  color: var(--color-accent);
}

/* Component focused — accent top-border */
.arch-node.focused {
  border-top: 2px solid var(--color-accent);
  border-color: var(--color-accent);
}

/* Arch node hover — border brightening */
.arch-node:hover {
  border-color: var(--color-text-secondary);
}

/* ── Team Diagram — Enhanced Nodes ── */

/* Center node: ~30% larger (160 → 208px) */
.team-node--center .team-node-inner {
  width: 208px;
  height: 208px;
}

.team-node--center .team-node-name {
  font-size: 1rem;
}

.team-node--center .team-node-role {
  font-size: 0.72rem;
}

/* Rotating dashed outer ring on center node */
.team-node--center::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 246px;
  height: 246px;
  border-radius: 50%;
  border: 1.5px dashed rgba(232, 168, 56, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: ringRotate 60s linear infinite;
  z-index: 0;
}

@keyframes ringRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* PM node — connector styling */
.team-node--pm .team-node-inner {
  border-color: var(--color-text-secondary);
  border-style: solid;
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, rgba(91, 141, 239, 0.06) 100%);
}

/* Outer nodes — dashed border */
.team-node--outer .team-node-inner {
  border-style: dashed;
}

/* Outer node hover — border brightens */
.team-node--outer:hover .team-node-inner {
  border-color: var(--color-text-secondary);
}

/* Team SVG orbit ring */
.team-orbit-ring {
  stroke: var(--color-text-muted);
  stroke-opacity: 0.25;
  stroke-dasharray: 5 5;
  fill: none;
  stroke-width: 1;
}

/* PM animated connection line */
.team-pm-connection {
  stroke: var(--color-accent) !important;
  stroke-opacity: 0.55 !important;
  stroke-width: 1.5 !important;
  stroke-dasharray: 6 4;
  animation: pmFlowLine 1.8s linear infinite;
  opacity: 1 !important;
}

@keyframes pmFlowLine {
  from { stroke-dashoffset: 20; }
  to   { stroke-dashoffset: 0; }
}

/* Default: all nodes at full opacity; dim only when something is focused */
.team-node { opacity: 1; }

/* ── Support Flow — Animated Arrows ── */
.flow-arrow {
  position: relative;
  overflow: hidden;
}

@keyframes flowDotTravel {
  0%   { left: -10px; opacity: 0; }
  20%  { opacity: 0.75; }
  80%  { opacity: 0.75; }
  100% { left: calc(100% + 10px); opacity: 0; }
}

.flow-arrow::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
  animation: flowDotTravel 2s linear infinite;
  opacity: 0;
}

/* Demo teaser — slow shimmer border */
@keyframes teaserBorderShimmer {
  0%, 100% { border-color: var(--color-border-accent); }
  50%       { border-color: rgba(91, 141, 239, 0.4); }
}

.demo-teaser {
  animation: teaserBorderShimmer 4s ease-in-out infinite;
}

/* ── Pricing — Badge Pulse, Count-Up Numbers ── */
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

.pricing-badge {
  display: inline-block;
  animation: badgePulse 3s ease-in-out infinite;
}

/* Pricing includes animates with a slight offset from the card */
.section-visible .pricing-includes.animate-in {
  animation-delay: 0.15s !important;
}

/* ── Closing Section — Ambient Background + Display Font ── */
.closing-section {
  overflow: hidden;
}

.closing-section::before {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 60% 55% at 76% 62%, rgba(232, 168, 56, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 50% 45% at 24% 32%, rgba(91, 141, 239, 0.03) 0%, transparent 65%);
  animation: ambientDrift 30s ease-in-out infinite alternate;
  animation-delay: -8s;
  pointer-events: none;
  z-index: 0;
}

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

/* Closing statement — body font for legibility at screen-share resolution */
.closing-statement {
  font-family: var(--font-body);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--color-text-secondary);
  max-width: 680px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

/* Closing accent line (mirrors title) */
.closing-accent-line {
  width: 200px;
  height: 2px;
  background: rgba(232, 168, 56, 0.35);
  transform-origin: center;
  transform: scaleX(0);
  margin: 2rem auto 2.5rem;
  border-radius: 1px;
}

.section-visible .closing-accent-line {
  animation: lineExpandCenter 1.5s ease-out forwards;
  animation-delay: 0.9s;
}

/* ── Roadmap Live Progress States ── */
.roadmap-item {
  transition: border-color 0.35s ease, background 0.35s ease;
}

.roadmap-item.roadmap-active {
  border-color: var(--color-accent);
  background: rgba(232, 168, 56, 0.07);
}

.roadmap-item.roadmap-complete {
  border-color: var(--color-phase-validate);
  background: rgba(111, 207, 151, 0.05);
}

.roadmap-item.roadmap-complete .roadmap-number::after {
  content: ' ✓';
  font-size: 0.75em;
  color: var(--color-phase-validate);
}

/* ── Prefers Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  /* Disable ambient backgrounds */
  .section-title-screen::before,
  .closing-section::before { animation: none; }

  /* Keep accent lines visible but static */
  .title-accent-line,
  .closing-accent-line { animation: none; transform: scaleX(1); }

  /* Kill looping animations */
  .arch-arrow::before,
  .team-node--center::before,
  .team-pm-connection,
  .flow-arrow::before,
  .demo-teaser,
  .pricing-badge { animation: none; }

  /* Nav dot — no pulse */
  .nav-dot.active.dot-pulse { animation: none; }

  /* Section label — fall back to fadeInUp instead of clip-path wipe */
  .section-label.animate-in {
    clip-path: none !important;
    opacity: 0;
  }

  .section-visible .section-label.animate-in {
    animation: fadeInUp 0.4s ease-out forwards !important;
  }

  /* Logo — simple fade, no scale */
  .section-title-screen.section-visible .title-logo.animate-in {
    animation: fadeIn 0.6s ease-out forwards !important;
  }
}