/* ============================================================
   GROWTH MARKETING CAMPAIGN — Calm, breathable design.
   Single fade transition between slides.
   ============================================================ */

:root {
  --bg-deep: #07071a;
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.72);
  --text-dim: rgba(255, 255, 255, 0.55);

  --accent-1: #818cf8;
  --accent-2: #a78bfa;
  --accent-3: #60a5fa;
  --accent-pink: #f472b6;

  --gradient-text: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
  --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  --card-border: rgba(255, 255, 255, 0.12);
  --card-border-hover: rgba(255, 255, 255, 0.25);

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
}

html, body { background: var(--bg-deep); }

.reveal {
  font-family: var(--font-sans);
  color: var(--text);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.reveal .slides { text-align: left; }

.reveal .slides section { height: 100%; }

.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--text);
  margin: 0;
  line-height: 1.1;
}

.reveal p {
  margin: 0;
  line-height: 1.55;
  color: var(--text-muted);
}

.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* ---------- Slide layouts ---------- */
.title-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  padding: 5% 7%;
  gap: 1.2rem;
  position: relative;
  z-index: 1;
}

.title-slide.center-all {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.title-slide.center-all .hero-title { max-width: none; }

.content-slide {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 4.5% 6%;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

.content-slide.center {
  justify-content: center;
  align-items: flex-start;
}

.content-slide.top {
  justify-content: flex-start;
  padding-top: 3.5%;
}

.section-title.compact {
  font-size: 2.2rem;
  margin-bottom: 0.3rem;
}

/* ---------- Title slide ---------- */
.eyebrow {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-1);
}

.hero-title {
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1.05;
  max-width: 18ch;
}

.hero-title .word-plan,
.hero-title .word-launch,
.hero-title .word-optimize {
  display: inline-block;
  margin-right: 0.4rem;
}

.hero-title .word-plan { animation: word-rise 0.7s 0.1s ease both; }
.hero-title .word-launch { animation: word-rise 0.7s 0.35s ease both; }
.hero-title .word-optimize { animation: word-rise 0.7s 0.6s ease both; }

@keyframes word-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-subtitle {
  font-size: 1.5rem;
  color: var(--text-muted);
  max-width: 50ch;
  font-weight: 400;
  line-height: 1.5;
}

.title-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--text-dim);
  margin-top: 1.5rem;
  font-weight: 500;
}

.author-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
}

/* ---------- Section headers ---------- */
.section-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
}

.section-title {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.5rem;
  max-width: 22ch;
}

.big-title {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.08;
  max-width: 16ch;
}

.part-marker {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  padding: 0.4rem 1rem;
  border: 1px solid var(--card-border);
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  margin-bottom: 1rem;
  width: fit-content;
}

.lead {
  font-size: 1.4rem;
  color: var(--text-muted);
  max-width: 55ch;
  line-height: 1.5;
  margin-top: 0.5rem;
}

/* ---------- Agenda ---------- */
.agenda-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.agenda-card {
  background: var(--gradient-card);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.agenda-card:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-4px);
}

.agenda-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.75rem;
}

.agenda-card h3 {
  font-size: 1.7rem;
  margin-bottom: 0.7rem;
}

.agenda-card p {
  font-size: 1.2rem;
  line-height: 1.5;
}

/* ---------- Workstreams ---------- */
.workstream-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-top: 1rem;
}

.ws-card {
  background: var(--gradient-card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 1.4rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.ws-card:hover {
  border-color: var(--card-border-hover);
  background: linear-gradient(135deg, rgba(129,140,248,0.12) 0%, rgba(167,139,250,0.04) 100%);
}

.ws-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 0.4rem;
  color: var(--accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-icon svg { width: 100%; height: 100%; }

.ws-card h4 { font-size: 1.45rem; }
.ws-card p { font-size: 1.12rem; line-height: 1.5; flex: 1; }

.ws-owner {
  font-size: 0.95rem;
  color: var(--accent-1);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 0.4rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--card-border);
}

/* ---------- Gantt ---------- */
.gantt {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.gantt-header {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-dim);
  font-weight: 500;
  margin-bottom: 0.3rem;
}

.gantt-weeks {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  text-align: center;
  letter-spacing: 0.05em;
}

.gantt-weeks .launch { color: var(--accent-pink); font-weight: 700; }

.gantt-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  background: rgba(255,255,255,0.025);
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
}

.gantt-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  padding-right: 1rem;
}

.gantt-bar {
  position: relative;
  height: 32px;
  border-radius: 8px;
  margin-left: var(--start);
  width: var(--width);
  display: flex;
  align-items: center;
  padding: 0 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.bar-1 { background: linear-gradient(90deg, #60a5fa, #818cf8); }
.bar-2 { background: linear-gradient(90deg, #818cf8, #a78bfa); }
.bar-3 { background: linear-gradient(90deg, #a78bfa, #c084fc); }
.bar-4 { background: linear-gradient(90deg, #c084fc, #e879f9); }
.bar-5 { background: linear-gradient(90deg, #f472b6, #fb7185); }
.bar-6 { background: linear-gradient(90deg, #60a5fa, #34d399); }
.bar-7 { background: linear-gradient(90deg, #fb7185, #f472b6); }

/* ---------- Two column ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  margin-top: 1rem;
}

.col {
  background: var(--gradient-card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 1.75rem;
}

.col-title { font-size: 1.3rem; margin-bottom: 1.1rem; }

.kpi-row { display: flex; flex-direction: column; gap: 1rem; }

.kpi-num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
}

.kpi-label { font-size: 1rem; color: var(--text-muted); margin-top: 0.2rem; }

.bullet-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.bullet-list li {
  font-size: 1.12rem;
  color: var(--text-muted);
  padding-left: 1.3rem;
  position: relative;
  line-height: 1.5;
}

.bullet-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gradient-text);
}

.bullet-list li strong { color: var(--text); font-weight: 600; }

.callout {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(129, 140, 248, 0.1);
  border-left: 3px solid var(--accent-1);
  border-radius: 6px;
  font-size: 0.98rem;
  font-style: italic;
  color: var(--text);
}

/* ---------- Metrics ---------- */
.metrics-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  margin-top: 1rem;
}

.metric-col {
  background: var(--gradient-card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 1.75rem;
}

.metric-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  margin-bottom: 0.9rem;
}

.metric-col.leading .metric-tag { background: rgba(96,165,250,0.15); color: #60a5fa; }
.metric-col.lagging .metric-tag { background: rgba(244,114,182,0.15); color: #f472b6; }

.metric-col h3 { font-size: 1.4rem; margin-bottom: 1rem; }

.metric-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.metric-col ul li {
  font-size: 1.1rem;
  color: var(--text-muted);
  padding-left: 1.4rem;
  position: relative;
  line-height: 1.45;
}

.metric-col ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-1);
  font-weight: 600;
}

.metric-col ul li strong { color: var(--text); font-weight: 600; }

/* ---------- Budget ---------- */
.budget-bar {
  display: flex;
  height: 90px;
  border-radius: 14px;
  overflow: hidden;
  margin: 0.5rem 0 1.2rem 0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.bb-segment {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 0.5rem;
  text-align: center;
}

.bb-segment.tof { background: linear-gradient(135deg, #60a5fa, #818cf8); }
.bb-segment.mof { background: linear-gradient(135deg, #a78bfa, #c084fc); }
.bb-segment.bof { background: linear-gradient(135deg, #f472b6, #fb7185); }

.bb-pct {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}

.bb-label { font-size: 0.9rem; font-weight: 500; margin-top: 0.25rem; opacity: 0.95; }

.budget-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.budget-card {
  background: var(--gradient-card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 1.3rem;
}

.bc-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  margin-bottom: 0.6rem;
}

.bc-tag.tof { background: rgba(96,165,250,0.18); color: #60a5fa; }
.bc-tag.mof { background: rgba(192,132,252,0.18); color: #c084fc; }
.bc-tag.bof { background: rgba(244,114,182,0.18); color: #f472b6; }

.budget-card h4 { font-size: 1.45rem; margin-bottom: 0.6rem; }
.budget-card p { font-size: 1.12rem; margin-bottom: 0.5rem; line-height: 1.5; }
.budget-card p strong { color: var(--text); font-weight: 600; }

/* ---------- ABM journey ---------- */
.abm-journey {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 1rem;
  align-items: stretch;
  margin-top: 1rem;
}

.abm-stage {
  background: var(--gradient-card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.abm-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.abm-stage h3 { font-size: 1.3rem; }

.abm-sub {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-1);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.abm-stage ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.abm-stage ul li {
  font-size: 0.98rem;
  color: var(--text-muted);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.5;
}

.abm-stage ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent-2);
  font-weight: 700;
}

.abm-outcome {
  font-size: 0.88rem;
  color: var(--accent-pink);
  font-weight: 500;
  font-style: italic;
  padding-top: 0.7rem;
  margin-top: 0.4rem;
  border-top: 1px solid var(--card-border);
}

.abm-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--accent-1);
  font-weight: 300;
}

/* ---------- Tech stack (layered) ---------- */
.stack-layered {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1rem;
}

.stack-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.tool-card {
  background: var(--gradient-card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 1.3rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: all 0.3s ease;
}

.tool-card:hover {
  border-color: rgba(167, 139, 250, 0.45);
  transform: translateY(-3px);
}

.tool-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.tool-role {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-1);
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.tool-card p { font-size: 0.95rem; line-height: 1.5; }

.orchestration-layer {
  position: relative;
  background: linear-gradient(135deg, rgba(96,165,250,0.18) 0%, rgba(167,139,250,0.18) 50%, rgba(244,114,182,0.18) 100%);
  border: 1px solid rgba(167, 139, 250, 0.4);
  border-radius: 18px;
  padding: 1.4rem 1.7rem;
  overflow: hidden;
}

.orch-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250%;
  height: 250%;
  background: radial-gradient(circle, rgba(167,139,250,0.2) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  animation: pulse-glow 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.75; transform: translate(-50%, -50%) scale(1.12); }
}

.orch-content { position: relative; z-index: 1; }

.orch-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  background: rgba(255,255,255,0.12);
  color: var(--accent-2);
  margin-bottom: 0.5rem;
  border: 1px solid rgba(167,139,250,0.3);
}

.orchestration-layer h3 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.orchestration-layer p { font-size: 1rem; line-height: 1.5; color: var(--text); max-width: 80ch; }

/* ---------- Insights list ---------- */
.insights-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.8rem;
}

.insight-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 1.1rem;
  background: var(--gradient-card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 1rem 1.4rem;
  transition: all 0.3s ease;
}

.insight-row:hover {
  border-color: var(--card-border-hover);
  background: linear-gradient(135deg, rgba(129,140,248,0.1) 0%, rgba(244,114,182,0.04) 100%);
}

.insight-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.insight-content h4 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.insight-content p { font-size: 1rem; line-height: 1.5; }

/* ---------- Recommendations ---------- */
.rec-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 1rem;
}

.rec-card {
  display: grid;
  grid-template-columns: 90px 1fr;
  background: var(--gradient-card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 1.4rem 1.6rem;
  gap: 1rem;
  align-items: center;
  transition: all 0.3s ease;
}

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

.rec-num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.rec-body h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.rec-body p { font-size: 1.05rem; line-height: 1.55; }

/* ---------- Hero entrance animations ---------- */
.fade-in-up { animation: fadeInUp 0.8s ease both; }
.fade-in-up.delay-1 { animation-delay: 0.15s; }
.fade-in-up.delay-2 { animation-delay: 0.3s; }
.fade-in-up.delay-3 { animation-delay: 0.45s; }

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

/* ---------- Background orbs ---------- */
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.bg-orb.orb-1 {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, #6366f1 0%, transparent 70%);
  top: -120px;
  right: -120px;
  animation: orb-float-1 20s ease-in-out infinite;
}

.bg-orb.orb-2 {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, #ec4899 0%, transparent 70%);
  bottom: -140px;
  left: -120px;
  animation: orb-float-2 24s ease-in-out infinite;
}

.bg-orb.orb-3 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, #60a5fa 0%, transparent 70%);
  top: 40%;
  left: 45%;
  animation: orb-float-3 26s ease-in-out infinite;
}

@keyframes orb-float-1 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(60px, 80px); }
}
@keyframes orb-float-2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-70px, -50px); }
}
@keyframes orb-float-3 {
  0%, 100% { transform: translate(-50%, -50%); opacity: 0.4; }
  50%      { transform: translate(-30%, -60%); opacity: 0.7; }
}

/* ---------- Reveal styling ---------- */
.reveal .controls { color: var(--accent-1); }
.reveal .progress { color: var(--accent-2); height: 3px; }

.reveal .slide-number {
  background: rgba(0,0,0,0.4);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  padding: 0.4rem 0.7rem;
  border-radius: 100px;
  backdrop-filter: blur(10px);
}

::selection { background: var(--accent-2); color: white; }

/* ============================================================
   NEW DESIGN BLOCKS — slides 7, 8, 10, 11, 12, 13
   ============================================================ */

.slide-hint {
  font-size: 0.85rem;
  color: var(--text-dim);
  font-style: italic;
  margin-top: -0.4rem;
  letter-spacing: 0.02em;
}

/* ---------- Slide 7: KPI hero + persona track ---------- */
.kpi-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 0.8rem;
}

.kpi-hero-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  padding: 1.8rem 1.7rem 1.6rem;
  overflow: hidden;
  transition: all 0.35s ease;
}

.kpi-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(167,139,250,0.18), transparent 50%);
  pointer-events: none;
}

.kpi-hero-card:hover {
  border-color: rgba(167,139,250,0.45);
  transform: translateY(-4px);
}

.kpi-hero-num {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 0.5rem;
}

.kpi-hero-label {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.kpi-hero-sub {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.audience-row {
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px dashed rgba(255,255,255,0.12);
}

.audience-tag {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-1);
  margin-bottom: 0.85rem;
}

.persona-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}

.persona-chip {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  transition: all 0.3s ease;
}

.persona-chip:hover {
  background: rgba(129,140,248,0.1);
  border-color: rgba(129,140,248,0.4);
  transform: translateY(-2px);
}

.persona-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(167,139,250,0.2));
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: 12px;
  color: var(--accent-2);
}
.persona-avatar svg { width: 22px; height: 22px; }

.persona-role {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-1);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.persona-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.persona-sub {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-top: 0.15rem;
}

/* ---------- Slide 8: Cockpit dashboard ---------- */
.cockpit {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 1.3rem;
  margin-top: 0.8rem;
}

.cockpit-panel {
  background: linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  padding: 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  position: relative;
  overflow: hidden;
}

.cockpit-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(96,165,250,0.08), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(167,139,250,0.06), transparent 40%);
  pointer-events: none;
}

.gauges-panel { border-color: rgba(129,140,248,0.3); }

.destination-panel {
  border-color: rgba(244,114,182,0.4);
  background: linear-gradient(160deg, rgba(244,114,182,0.08) 0%, rgba(167,139,250,0.04) 100%);
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  position: relative;
  z-index: 2;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.live {
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.2);
  animation: blink-live 1.6s ease-in-out infinite;
}

.status-dot.target {
  background: var(--accent-pink);
  box-shadow: 0 0 0 4px rgba(244, 114, 182, 0.25);
  animation: blink-live 2s ease-in-out infinite;
}

@keyframes blink-live {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.2); }
  50%      { opacity: 0.6; box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.05); }
}

.panel-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #34d399;
  margin-bottom: 0.15rem;
}

.panel-tag.dest { color: var(--accent-pink); }

.panel-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

/* Gauges grid */
.gauges-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  position: relative;
  z-index: 2;
}

.gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(129,140,248,0.18);
  border-radius: 14px;
  padding: 1rem 1rem 1.05rem;
  text-align: center;
  transition: all 0.3s ease;
}

.gauge:hover {
  border-color: rgba(167,139,250,0.5);
  background: rgba(0,0,0,0.35);
  transform: translateY(-2px);
}

.gauge-svg {
  width: 100%;
  max-width: 130px;
  height: auto;
  margin-bottom: 0.45rem;
}

.gauge-arc {
  filter: drop-shadow(0 0 4px currentColor);
  animation: gauge-fill 1.4s ease-out both;
  transform-origin: 60px 60px;
}

@keyframes gauge-fill {
  from { stroke-dasharray: 0 200; }
}

.gauge-needle {
  filter: drop-shadow(0 0 3px currentColor);
  transform-origin: 60px 60px;
  animation: needle-sweep 1.6s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}

@keyframes needle-sweep {
  from { transform: rotate(-90deg); }
}

.gauge-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 0.3rem;
}

.gauge-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Destination display */
.dest-display {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
  z-index: 2;
  flex: 1;
}

.dest-row {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(244,114,182,0.2);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  transition: all 0.3s ease;
}

.dest-row:hover {
  background: rgba(244,114,182,0.1);
  border-color: rgba(244,114,182,0.5);
  transform: translateX(-3px);
}

.dest-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: linear-gradient(135deg, rgba(244,114,182,0.2), rgba(192,132,252,0.2));
  border: 1px solid rgba(244,114,182,0.35);
  border-radius: 10px;
  flex-shrink: 0;
  color: var(--accent-pink);
}
.dest-icon svg { width: 22px; height: 22px; }

.dest-metric {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 0.2rem;
}

.dest-meta {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.dest-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(244,114,182,0.3);
  position: relative;
  z-index: 2;
}

.eta-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.eta-value {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-pink);
  letter-spacing: 0.02em;
}

/* ---------- end slide 8 cockpit ---------- */
.metric-flow {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 1rem;
  margin-top: 1rem;
  align-items: stretch;
}

.flow-side {
  background: var(--gradient-card);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flow-side.leading {
  border-left: 3px solid var(--accent-3);
}

.flow-side.lagging {
  border-left: 3px solid var(--accent-pink);
}

.flow-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.flow-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-3);
  box-shadow: 0 0 0 4px rgba(96,165,250,0.2);
  margin-top: 0.5rem;
  flex-shrink: 0;
  animation: pulse-dot 2.5s ease-in-out infinite;
}

.flow-dot.lag {
  background: var(--accent-pink);
  box-shadow: 0 0 0 4px rgba(244,114,182,0.2);
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(96,165,250,0.2); }
  50%      { box-shadow: 0 0 0 8px rgba(96,165,250,0.05); }
}

.flow-tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-3);
  margin-bottom: 0.2rem;
}

.flow-tag.lag { color: var(--accent-pink); }

.flow-question {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.flow-pills {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.flow-pill {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: rgba(96,165,250,0.08);
  border-left: 2px solid var(--accent-3);
  border-radius: 8px;
  padding: 0.7rem 0.95rem;
  transition: all 0.25s ease;
}

.flow-pill.lag {
  background: rgba(244,114,182,0.08);
  border-left-color: var(--accent-pink);
}

.flow-pill:hover {
  background: rgba(96,165,250,0.14);
  transform: translateX(4px);
}

.flow-pill.lag:hover {
  background: rgba(244,114,182,0.14);
  transform: translateX(-4px);
}

.flow-pill strong {
  font-size: 1.08rem;
  color: var(--text);
  font-weight: 600;
}

.flow-pill span {
  font-size: 0.98rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.flow-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.flow-line {
  flex: 1;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent-2), transparent);
  min-height: 40px;
}

.flow-arrow {
  font-size: 2.4rem;
  color: var(--accent-2);
  animation: arrow-float 2.4s ease-in-out infinite;
  transform: rotate(90deg);
}

@media (min-width: 1100px) {
  .flow-arrow { transform: rotate(0deg); }
  .metric-flow { grid-template-columns: 1fr 80px 1fr; }
  .flow-connector { flex-direction: column; }
}

@keyframes arrow-float {
  0%, 100% { transform: translateX(0) rotate(0); opacity: 0.7; }
  50%      { transform: translateX(6px) rotate(0); opacity: 1; }
}

/* ---------- Slide 10: Real journey path ---------- */
.journey {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-top: 1rem;
}

.journey-path {
  position: relative;
  height: 70px;
  margin: 0 4%;
}

.journey-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  transform: translateY(-50%);
}

.journey-line-fill {
  position: absolute;
  top: 50%;
  left: 0;
  width: 92%;
  height: 3px;
  background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6);
  border-radius: 2px;
  transform: translateY(-50%);
  box-shadow: 0 0 16px rgba(167,139,250,0.6);
}

.journey-milestone {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.journey-milestone.m-1 { left: 8%; }
.journey-milestone.m-2 { left: 38%; }
.journey-milestone.m-3 { left: 68%; }

.milestone-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  border: 3px solid #0a0a23;
  box-shadow: 0 0 0 3px rgba(167,139,250,0.5), 0 0 24px rgba(167,139,250,0.6);
  position: relative;
  z-index: 2;
}

.milestone-label {
  position: absolute;
  top: -1.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.journey-flag {
  position: absolute;
  top: 50%;
  left: 92%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.flag-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: linear-gradient(135deg, #f472b6, #fb7185);
  border: 3px solid #0a0a23;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(244,114,182,0.5), 0 0 28px rgba(244,114,182,0.7);
}

.flag-text {
  position: absolute;
  top: -1.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-pink);
  white-space: nowrap;
}

.journey-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.j-stage {
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 1.3rem 1.3rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: all 0.3s ease;
}

.j-stage:hover {
  border-color: rgba(167,139,250,0.4);
  transform: translateY(-3px);
}

.j-stage-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.j-stage-num {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(167,139,250,0.2));
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: 14px;
  background-clip: padding-box;
  color: var(--accent-2);
}

.j-stage-sub {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-1);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.j-stage h3 {
  font-size: 1.3rem;
  line-height: 1.25;
}

.j-stage-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.j-stage-list li {
  font-size: 1.05rem;
  color: var(--text-muted);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.45;
}

.j-stage-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
}

.j-outcome {
  background: rgba(167,139,250,0.1);
  border: 1px solid rgba(167,139,250,0.25);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
}

.j-outcome.final {
  background: rgba(244,114,182,0.12);
  border-color: rgba(244,114,182,0.35);
}

.j-outcome-label {
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.j-outcome.final .j-outcome-label { color: var(--accent-pink); }

.j-outcome-text {
  font-size: 1.02rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
}

/* ---------- Slide 11: Constellation tech stack ---------- */
.constellation {
  position: relative;
  width: 100%;
  height: 520px;
  margin-top: 0.5rem;
}

.constellation-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.node {
  position: absolute;
  width: 260px;
  background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 1.2rem 1.3rem;
  z-index: 2;
  transition: all 0.35s ease;
  backdrop-filter: blur(10px);
}

.node:hover {
  border-color: rgba(167,139,250,0.5);
  transform: scale(1.04);
  box-shadow: 0 12px 36px rgba(167,139,250,0.25);
}

.node-tl { top: 5%;   left: 2%; }
.node-tr { top: 5%;   right: 2%; }
.node-bl { bottom: 5%; left: 2%; }
.node-br { bottom: 5%; right: 2%; }

.node-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 0.45rem;
  color: var(--accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.node-icon svg { width: 100%; height: 100%; }

.node-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 0.35rem;
}

.node-role {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-1);
  font-weight: 600;
  margin-bottom: 0.55rem;
}

.node-desc {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.node-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.core-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,0.4) 0%, transparent 65%);
  animation: core-pulse 4s ease-in-out infinite;
}

.core-pulse.delay {
  animation-delay: 2s;
}

@keyframes core-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.45; }
  50%      { transform: scale(1.15); opacity: 0.8; }
}

.core-inner {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(96,165,250,0.4), rgba(167,139,250,0.5) 50%, rgba(244,114,182,0.4) 100%);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 0 60px rgba(167,139,250,0.5), inset 0 0 40px rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  z-index: 2;
}

.core-tag {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  font-weight: 700;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.7rem;
  background: rgba(0,0,0,0.25);
  border-radius: 100px;
}

.core-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.core-sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.4;
  max-width: 22ch;
}

/* ---------- Slide 12: Inbox / envelopes ---------- */
.inbox-hint {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(167, 139, 250, 0.95);
  letter-spacing: 0.04em;
  margin-top: 0.6rem;
  margin-bottom: 0.2rem;
  font-style: italic;
}

.inbox {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.6rem;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(167,139,250,0.4) transparent;
}

.inbox::-webkit-scrollbar { width: 6px; }
.inbox::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.4); border-radius: 3px; }
.inbox::-webkit-scrollbar-track { background: transparent; }

.envelope {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.97) 0%, rgba(241, 245, 249, 0.95) 100%);
  color: #1f2937;
  border-radius: 12px;
  padding: 0.75rem 1.1rem;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(167, 139, 250, 0.3);
  flex-shrink: 0;
}

.envelope.winner {
  background: linear-gradient(160deg, rgba(236, 253, 245, 0.98) 0%, rgba(209, 250, 229, 0.95) 100%);
  border: 1.5px solid rgba(16, 185, 129, 0.6);
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.35), 0 0 0 1px rgba(16, 185, 129, 0.2);
}

.envelope:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow: 0 10px 28px rgba(167, 139, 250, 0.35);
  border-color: rgba(167, 139, 250, 0.55);
}

.envelope.winner:hover {
  box-shadow: 0 12px 34px rgba(16, 185, 129, 0.5);
  border-color: rgba(16, 185, 129, 0.8);
}

.env-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: white;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  padding: 0.22rem 0.6rem;
  border-radius: 100px;
  margin-bottom: 0.35rem;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
  align-self: flex-start;
}

.env-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04) 0%, transparent 8%),
    linear-gradient(135deg, transparent 49.5%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.05) 50.5%, transparent 51%);
}

.env-front {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 1rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

.env-stamp {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  background: linear-gradient(135deg, #818cf8, #a78bfa);
  color: white;
  border-radius: 8px;
  border: 2px dashed rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(129, 140, 248, 0.4);
}

.envelope.winner .env-stamp {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.5);
}

.env-from {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.envelope.winner .env-from { color: #047857; }

.env-subject {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.3;
}

.env-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 800;
  color: #6d28d9;
  background: rgba(167, 139, 250, 0.22);
  border: 1.5px solid rgba(109, 40, 217, 0.55);
  border-radius: 50%;
  transition: all 0.3s ease;
  flex-shrink: 0;
  animation: ctaPulse 2s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(167, 139, 250, 0); }
}

.envelope:hover .env-cta {
  background: rgba(167, 139, 250, 0.4);
  border-color: rgba(109, 40, 217, 0.85);
  transform: scale(1.1);
}

.envelope.winner .env-cta {
  color: #047857;
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.5);
}

.envelope.is-open .env-cta-arrow {
  transform: rotate(180deg);
}

.envelope.is-open .env-cta {
  transform: rotate(180deg);
  animation: none;
}

.env-letter {
  max-height: 0;
  overflow: hidden;
  font-size: 1.08rem;
  line-height: 1.55;
  color: #374151;
  transition: max-height 0.5s ease, margin-top 0.5s ease, padding-top 0.5s ease;
  position: relative;
  z-index: 2;
}

.envelope.is-open .env-letter {
  max-height: 140px;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed rgba(0,0,0,0.15);
}

/* ---------- Slide 13: Memo flip cards ---------- */
.memo-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 0.8rem;
  perspective: 1500px;
}

.memo {
  position: relative;
  height: 320px;
  cursor: pointer;
}

.memo-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.memo.is-flipped .memo-inner {
  transform: rotateY(180deg);
}

.memo-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 18px;
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.memo-front {
  background: linear-gradient(160deg, rgba(255,255,255,0.97) 0%, rgba(243, 244, 246, 0.95) 100%);
  color: #1f2937;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  border: 1px solid rgba(167, 139, 250, 0.35);
}

.memo-front::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6);
}

.memo-seal {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #a78bfa, #6d28d9);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(109, 40, 217, 0.5), inset 0 -2px 4px rgba(0,0,0,0.25);
  border: 2px solid rgba(255, 255, 255, 0.5);
  transform: rotate(-8deg);
}

.memo-stamp {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #6d28d9;
  border: 2px solid #6d28d9;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  transform: rotate(-2deg);
  background: rgba(167, 139, 250, 0.12);
}

.memo-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: #1f2937;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  max-width: 14ch;
}

.memo-from {
  font-size: 0.95rem;
  color: #6b7280;
  font-style: italic;
  margin-top: auto;
}

.memo-flip-cta {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #6d28d9;
  text-transform: uppercase;
}

.memo-back {
  background: linear-gradient(160deg, rgba(255,255,255,0.98) 0%, rgba(245, 243, 255, 0.96) 100%);
  color: #1f2937;
  transform: rotateY(180deg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  border: 1px solid rgba(167, 139, 250, 0.35);
}

.memo-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6d28d9;
  border-bottom: 1px solid rgba(109, 40, 217, 0.25);
  padding-bottom: 0.5rem;
  margin-bottom: 0.85rem;
}

.memo-back h3 {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 800;
  color: #1f2937;
  line-height: 1.25;
  margin-bottom: 0.7rem;
}

.memo-back p {
  font-size: 1.02rem;
  line-height: 1.55;
  color: #374151;
  flex: 1;
}

.memo-sign {
  font-family: 'Space Grotesk', cursive;
  font-style: italic;
  font-size: 1rem;
  color: #6d28d9;
  margin-top: 0.7rem;
  text-align: right;
}

/* Hide reveal-injected fragment artifacts on flippable cards */
.memo.fragment.visible,
.envelope.fragment.visible { opacity: 1; }

/* =====================================================================
   PRINT / PDF EXPORT — open all interactive cards automatically
   Activated when URL contains ?print-pdf (Reveal adds .print-pdf to body)
   ===================================================================== */
body.print-pdf .inbox,
.print-pdf .inbox {
  max-height: none !important;
  overflow: visible !important;
}

body.print-pdf .envelope .env-letter,
.print-pdf .envelope .env-letter {
  max-height: 500px !important;
  margin-top: 0.7rem !important;
  padding-top: 0.7rem !important;
  border-top: 1px dashed rgba(0,0,0,0.15);
  overflow: visible !important;
}

body.print-pdf .envelope .env-cta,
.print-pdf .envelope .env-cta {
  display: none !important;
}

/* Memos: disable 3D flip and show the back (content) side flat */
body.print-pdf .memo,
.print-pdf .memo {
  height: auto !important;
  min-height: 320px;
}

body.print-pdf .memo-inner,
.print-pdf .memo-inner {
  transform: none !important;
  transform-style: flat !important;
  position: static !important;
  height: auto !important;
}

body.print-pdf .memo-front,
.print-pdf .memo-front {
  display: none !important;
}

body.print-pdf .memo-back,
.print-pdf .memo-back {
  position: static !important;
  transform: none !important;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  inset: auto !important;
  height: auto !important;
  min-height: 320px;
}

/* Reveal fragments: force all to visible state in print */
body.print-pdf .fragment,
.print-pdf .fragment {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Also handle @media print as a safety net (if user prints without ?print-pdf) */
@media print {
  .inbox { max-height: none !important; overflow: visible !important; }
  .envelope .env-letter {
    max-height: 500px !important;
    margin-top: 0.7rem !important;
    padding-top: 0.7rem !important;
    border-top: 1px dashed rgba(0,0,0,0.15);
    overflow: visible !important;
  }
  .envelope .env-cta { display: none !important; }
  .memo { height: auto !important; }
  .memo-inner { transform: none !important; transform-style: flat !important; position: static !important; height: auto !important; }
  .memo-front { display: none !important; }
  .memo-back {
    position: static !important;
    transform: none !important;
    backface-visibility: visible !important;
    inset: auto !important;
    height: auto !important;
  }
  .fragment { opacity: 1 !important; visibility: visible !important; }
}