/* ========================================
   Allinmap Presentation — Styles
   Mapped 1:1 from app/style.ts design tokens
   ======================================== */

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

:root {
  /* ── Primary (teal) ── */
  --primary-50:  #E6F7F6;
  --primary-100: #B8E8E4;
  --primary-200: #7DD4CE;
  --primary-300: #40C0B8;
  --primary-400: #1AAD9F;
  --primary-500: #009688;
  --primary-600: #008577;
  --primary-700: #007266;
  --primary-800: #005E54;
  --primary-900: #004A42;
  --primary-950: #00362F;

  /* ── Custom maps (purple) ── */
  --custom-50: #7E57C2;

  /* ── Neutral ── */
  --neutral-50:  #FAFBFC;
  --neutral-100: #F1F3F5;
  --neutral-200: #E2E6EB;
  --neutral-300: #C5CBD4;
  --neutral-400: #8C95A3;
  --neutral-500: #5C6574;
  --neutral-600: #444D5C;
  --neutral-700: #323A47;
  --neutral-800: #222831;
  --neutral-900: #151B24;
  --neutral-950: #0D1117;

  /* ── Semantic ── */
  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-500);
  --text-inverse:   #FFFFFF;

  --surface-page:     var(--neutral-50);
  --surface-card:     #FFFFFF;
  --surface-elevated: #FFFFFF;
  --surface-muted:    var(--neutral-100);

  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);

  /* ── Warning ── */
  --warning-200: #FFF1C7;
  --warning-400: #FFE390;
  --warning-800: #FFC722;
  --warning-900: #664D00;

  /* ── Markers ── */
  --marker-toilet:    #004596;
  --marker-bin:       #009660;
  --marker-bench:     #962D00;
  --marker-fountain:  #0BB7C2;
  --marker-panoramic: #D6AB00;
  --marker-skate:     #3E5C18;
  --marker-gym:       #686880;
  --marker-basket:    #CA5310;
  --marker-soccer:    #004D40;
  --marker-atm:       #294EDB;

  /* ── Radius (from theme) ── */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-round: 18px;
  --radius-xxl:   20px;
  --radius-chip:  30px;
  --radius-pill:  50px;
  --radius-full:  100px;

  /* ── Spacing ── */
  --sp-xs:   4px;
  --sp-sm:   8px;
  --sp-md:   12px;
  --sp-lg:   16px;
  --sp-xl:   20px;
  --sp-xxl:  24px;
  --sp-xxxl: 32px;
  --sp-2xl:  40px;
  --sp-3xl:  48px;
  --sp-4xl:  64px;

  /* ── Misc ── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--surface-page);
  color: var(--text-primary);
}

/* ---------- Three.js Canvas ---------- */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Progress Bar ---------- */
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(0,0,0,0.06);
  z-index: 100;
}

#progress-fill {
  height: 100%;
  width: 12.5%;
  background: linear-gradient(90deg, var(--primary-400), var(--primary-900));
  transition: width 0.5s ease;
  border-radius: 0 2px 2px 0;
}

/* ---------- Navigation ---------- */
#slide-nav {
  position: fixed;
  bottom: var(--sp-xxxl);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: var(--sp-sm) var(--sp-xl);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

#slide-nav button {
  background: none;
  border: none;
  color: var(--neutral-500);
  cursor: pointer;
  padding: var(--sp-sm);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

#slide-nav button:hover {
  color: var(--primary-500);
  background: rgba(0,150,136,0.08);
}

#slide-counter {
  color: var(--neutral-500);
  font-size: 13px;
  font-weight: 500;
  min-width: 40px;
  text-align: center;
  letter-spacing: 1px;
}

/* ---------- Language Toggle ---------- */
#lang-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  padding: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--neutral-500);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.5px;
}

.lang-btn:hover {
  color: var(--neutral-800);
  background: rgba(0, 0, 0, 0.05);
}

.lang-btn.active {
  color: #fff;
  background: var(--primary-500);
}

.lang-flag {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

/* ---------- Slides Container ---------- */
#slides-container {
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: 1;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  overflow-y: auto;
  overflow-x: hidden;
}

.slide.active {
  opacity: 1;
  visibility: visible;
}

/* Slide backgrounds — transparent so Three.js canvas shows through */
.slide[data-bg="light"] {
  background: transparent;
  color: var(--text-primary);
}

/* ---------- Slide Content Layout ---------- */
.slide-content {
  width: 100%;
  max-width: 1200px;
  padding: var(--sp-4xl) var(--sp-3xl) 100px;
  position: relative;
  z-index: 2;
}

.slide-content.center-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4xl);
  align-items: center;
}

.two-col.reverse {
  grid-template-columns: 1fr 1fr;
}

.two-col.reverse .col-visual {
  order: -1;
}

/* ---------- Typography ---------- */
.slide-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--primary-500);
  margin-bottom: var(--sp-lg);
  padding: var(--sp-xs) var(--sp-lg);
  background: rgba(0,150,136,0.08);
  border-radius: var(--radius-chip);
  border: 1px solid rgba(0,150,136,0.12);
}

.slide-label.purple {
  color: var(--custom-50);
  background: rgba(126,87,194,0.1);
  border-color: rgba(126,87,194,0.18);
}

h1 { font-size: clamp(48px, 6vw, 80px); font-weight: 900; line-height: 1.05; letter-spacing: -2px; }
h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 800; line-height: 1.15; letter-spacing: -1px; margin-bottom: var(--sp-xl); }
h3 { font-size: 16px; font-weight: 700; margin-bottom: var(--sp-sm); letter-spacing: 0.1px; }

p { font-size: 15px; line-height: 1.65; color: inherit; opacity: 0.85; }

.section-subtitle { font-size: 17px; margin-bottom: var(--sp-2xl); color: var(--text-secondary); }

/* ---------- Slide 1: Title ---------- */
.logo-mark {
  margin-bottom: var(--sp-xxl);
  animation: float 4s ease-in-out infinite;
}

.logo-img {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-xxl);
  box-shadow: 0 8px 32px rgba(0,150,136,0.25);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.title-main {
  color: var(--neutral-900);
  margin-bottom: var(--sp-md);
}

.title-sub {
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: var(--sp-xxl);
}

.title-divider {
  width: 48px;
  height: 3px;
  background: var(--primary-500);
  border-radius: 3px;
  margin-bottom: var(--sp-xxl);
}

.title-tagline {
  max-width: 600px;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--sp-3xl);
}

.scroll-hint {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 13px;
  color: var(--neutral-400);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* ---------- Slide 2: Problem ---------- */
.pain-points {
  list-style: none;
  margin-top: var(--sp-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.pain-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--surface-card);
  border-radius: var(--radius-round);
  border: 1px solid var(--border-default);
}

.pain-icon {
  flex-shrink: 0;
  margin-top: 2px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.pain-points strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.1px;
  margin-bottom: 2px;
}

.pain-points span {
  font-size: 13px;
  color: var(--text-muted);
}

/* Mockup card — matches MapCard style */
.mockup-card {
  background: var(--surface-card);
  border-radius: var(--radius-round);
  border: 1px solid var(--border-default);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.mockup-header {
  padding: var(--sp-md) var(--sp-lg);
  display: flex;
  gap: var(--sp-sm);
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border-subtle);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
}
.dot.red { background: #FF5F57; }
.dot.yellow { background: #FFBD2E; }
.dot.green { background: #28CA42; }

.mockup-body {
  padding: var(--sp-xxl);
}

.confused-map {
  position: relative;
  width: 100%;
  height: 240px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.map-placeholder-bg {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(45deg, var(--primary-50) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(11,183,194,0.08) 25%, transparent 25%),
    linear-gradient(135deg, rgba(214,171,0,0.06) 25%, transparent 25%),
    var(--surface-muted);
}

.question-marks span {
  position: absolute;
  font-size: 40px;
  font-weight: 800;
  color: rgba(244, 67, 54, 0.35);
  animation: bobble 3s ease-in-out infinite;
}

.question-marks span:nth-child(2) { animation-delay: 0.5s; }
.question-marks span:nth-child(3) { animation-delay: 1s; }
.question-marks span:nth-child(4) { animation-delay: 1.5s; }

@keyframes bobble {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(5deg); }
}

/* ---------- Slide 3: Solution ---------- */
.large-heading {
  font-size: clamp(40px, 5vw, 72px);
  margin-bottom: var(--sp-xxl);
}

.highlight {
  background: linear-gradient(135deg, var(--custom-50), #B39DDB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.solution-desc {
  max-width: 640px;
  font-size: 16px;
  color: var(--neutral-600);
  margin-bottom: var(--sp-3xl);
}

.features-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  justify-content: center;
}

.feature-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-xl);
  background: rgba(0,150,136,0.06);
  border: 1px solid rgba(0,150,136,0.12);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-700);
  transition: all 0.3s;
}

.feature-pill:hover {
  background: rgba(126,87,194,0.12);
  border-color: var(--custom-50);
  transform: translateY(-2px);
}

.feature-emoji { font-size: 18px; }

.pill-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

svg.pill-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.icon-svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ---------- Slide 4: Map Features ---------- */
.map-features-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
  margin-top: var(--sp-lg);
}

.map-feature-card {
  background: var(--surface-card);
  border-radius: var(--radius-round);
  padding: var(--sp-xxxl) var(--sp-xxl);
  border: 1px solid var(--border-default);
  transition: all 0.3s;
  text-align: center;
}

.map-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(126,87,194,0.08);
  border-color: rgba(126,87,194,0.3);
}

.map-feature-card h3 {
  color: var(--text-primary);
}

.map-feature-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

.mf-icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Floor stack animation */
.floor-stack {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  perspective: 400px;
}

.floor-layer {
  width: 80px;
  height: 26px;
  background: linear-gradient(135deg, var(--custom-50), #9575CD);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 13px;
  transform: rotateX(10deg) translateY(calc(var(--i) * -2px));
  opacity: calc(1 - var(--i) * 0.15);
  box-shadow: 0 2px 8px rgba(126,87,194,0.3);
  animation: stackFloat 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.2s);
}

@keyframes stackFloat {
  0%, 100% { transform: rotateX(10deg) translateY(calc(var(--i) * -2px)); }
  50% { transform: rotateX(10deg) translateY(calc(var(--i) * -6px)); }
}

/* Polygon SVG */
.polygon-svg {
  width: 100%;
  height: 100%;
}

.polygon-svg polygon {
  animation: polygonPulse 4s ease-in-out infinite;
}

.polygon-svg polygon:first-child {
  fill: rgba(126,87,194,0.15);
  stroke: var(--custom-50);
}

.polygon-svg polygon:last-child {
  fill: rgba(126,87,194,0.08);
  stroke: #9575CD;
}

@keyframes polygonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Pins demo */
.pins-demo {
  position: relative;
  width: 100%;
  height: 100%;
}

.demo-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  animation: pinDrop 0.6s ease-out, pinBounce 3s ease-in-out infinite 0.6s;
}

@keyframes pinDrop {
  0% { transform: translateY(-40px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes pinBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.demo-pin-img {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 40px;
  height: 40px;
  object-fit: contain;
  animation: pinDrop 0.6s ease-out, pinBounce 3s ease-in-out infinite 0.6s;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.2));
}

/* ---------- Slide 5: Event Visibility ---------- */
.phone-mockup {
  width: 280px;
  height: 540px;
  background: var(--neutral-900);
  border-radius: 40px;
  padding: 12px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,255,255,0.06);
  margin: 0 auto;
}

.phone-notch {
  width: 120px;
  height: 28px;
  background: var(--neutral-900);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--neutral-800), var(--neutral-950));
  border-radius: var(--radius-chip);
  overflow: hidden;
  padding: var(--sp-3xl) var(--sp-lg) var(--sp-lg);
}

.notif-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

/* Matches EventNotificationTip: neutral[900] bg, 14px radius, 16px padding */
.notif-card {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.04);
  opacity: 0;
  transform: translateX(-20px);
  animation: slideInNotif 0.5s ease forwards;
  animation-delay: var(--delay);
}

.slide.active .notif-card {
  animation: slideInNotif 0.5s ease forwards;
  animation-delay: var(--delay);
}

@keyframes slideInNotif {
  to { opacity: 1; transform: translateX(0); }
}

.notif-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-marker {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.notif-text strong {
  display: block;
  font-size: 14px;
  color: white;
  font-weight: 700;
  letter-spacing: 0.1px;
}

.notif-text span {
  font-size: 11px;
  color: var(--neutral-400);
  font-weight: 500;
}

.benefit-list {
  list-style: none;
  margin-top: var(--sp-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
}

.benefit-list li {
  display: flex;
  gap: var(--sp-lg);
  align-items: flex-start;
}

.benefit-icon {
  flex-shrink: 0;
  margin-top: 2px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-marker {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

svg.benefit-marker {
  width: 40px;
  height: 40px;
}

.benefit-list strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: var(--sp-xs);
  letter-spacing: 0.1px;
}

.benefit-list p {
  font-size: 13px;
  color: var(--neutral-600);
  margin: 0;
}

/* ---------- Slide 6: Amenities ---------- */
.amenity-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin: var(--sp-xxl) 0 var(--sp-lg);
}

.amenity-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-700);
  transition: all 0.2s;
}

.chip-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.amenity-chip:hover {
  background: var(--primary-100);
  border-color: var(--primary-300);
  transform: scale(1.03);
}

.amenity-note {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

/* Principal map mockup */
.principal-map-mockup {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: var(--radius-round);
  overflow: hidden;
  border: 1px solid var(--border-default);
}

.map-layer-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, var(--primary-50) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(11,183,194,0.08) 0%, transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(0,150,136,0.04) 0%, transparent 30%),
    var(--surface-muted);
}

.map-event-zone {
  position: absolute;
  top: 30%;
  left: 30%;
  width: 40%;
  height: 40%;
  background: rgba(126,87,194,0.1);
  border: 2px dashed var(--custom-50);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: zonePulse 3s ease-in-out infinite;
}

.map-event-zone span {
  font-size: 12px;
  font-weight: 700;
  color: var(--custom-50);
  text-transform: uppercase;
  letter-spacing: 2px;
}

@keyframes zonePulse {
  0%, 100% { background: rgba(126,87,194,0.08); }
  50% { background: rgba(126,87,194,0.16); }
}

.amenity-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  transition: transform 0.3s;
  cursor: pointer;
  animation: amenityFloat 3s ease-in-out infinite;
  animation-delay: calc(var(--y, 0%) * 0.01);
}

.map-pin-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.amenity-pin:hover {
  transform: scale(1.3);
}

@keyframes amenityFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ---------- Slide 7: Screenshots ---------- */
.screenshots-carousel {
  display: flex;
  gap: var(--sp-xxxl);
  justify-content: center;
  margin-top: var(--sp-lg);
  flex-wrap: wrap;
}

.screenshot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
}

.screenshot-phone {
  width: 180px;
  height: 360px;
  background: var(--neutral-900);
  border-radius: 28px;
  padding: var(--sp-sm);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.04);
  transition: transform 0.3s;
}

.screenshot-phone:hover {
  transform: translateY(-8px) scale(1.02);
}

.screenshot-placeholder {
  width: 100%;
  height: 100%;
  background: var(--neutral-950);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.screenshot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
}

.screenshot-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-600);
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  cursor: zoom-out;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius-xl);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  object-fit: contain;
}

.lightbox.active .lightbox-img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 36px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  line-height: 1;
}

.lightbox-close:hover {
  opacity: 1;
}

.screenshot-phone {
  cursor: zoom-in;
}

/* Screenshot inner elements */
.sp-header {
  padding: var(--sp-md) var(--sp-sm) var(--sp-sm);
}

.sp-search {
  height: 24px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
}

.sp-title-bar {
  height: 14px;
  width: 60%;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-xs);
}

.sp-map {
  flex: 1;
  position: relative;
  background:
    radial-gradient(circle at 40% 40%, rgba(0,150,136,0.12) 0%, transparent 50%),
    linear-gradient(180deg, var(--neutral-800), var(--neutral-950));
  margin: 0 6px;
  border-radius: var(--radius-md);
}

.sp-pin {
  position: absolute;
  width: 10px;
  height: 14px;
  background: var(--primary-400);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.sp-pin.small {
  width: 8px;
  height: 11px;
}

.sp-polygon {
  position: absolute;
  top: 40%;
  left: 15%;
  width: 50%;
  height: 30%;
  background: rgba(126,87,194,0.15);
  border: 1px solid rgba(126,87,194,0.35);
  clip-path: polygon(10% 0%, 90% 10%, 100% 80%, 20% 100%, 0% 40%);
}

.sp-bottom-bar {
  display: flex;
  justify-content: space-around;
  padding: var(--sp-sm) var(--sp-sm) 14px;
}

.sp-tab {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
}

.sp-tab.active {
  background: var(--primary-500);
}

/* Event map screenshot */
.sp-event-map {
  flex: 1;
  position: relative;
  background: linear-gradient(180deg, var(--neutral-800), var(--neutral-950));
  margin: 0 6px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.sp-floor-selector {
  display: flex;
  gap: 4px;
  padding: 6px;
  justify-content: center;
}

.sp-floor-selector span {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.35);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.sp-floor-selector span.active {
  background: var(--custom-50);
  color: white;
}

.sp-zones {
  position: absolute;
  inset: 36px 8px 8px;
}

.sp-zone {
  position: absolute;
  background: rgba(126,87,194,0.12);
  border: 1px solid rgba(126,87,194,0.25);
  border-radius: var(--radius-xs);
}

.sp-zone.z1 { top: 10%; left: 5%; width: 45%; height: 35%; }
.sp-zone.z2 { top: 55%; left: 30%; width: 55%; height: 30%; }

/* Notifications screenshot */
.sp-notifications {
  flex: 1;
  padding: var(--sp-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.sp-notif {
  height: 48px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.03);
}

.sp-notif.dim { opacity: 0.35; }

/* Detail card screenshot */
.sp-detail-card {
  flex: 1;
  padding: var(--sp-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.sp-detail-img {
  height: 100px;
  background: linear-gradient(135deg, rgba(0,150,136,0.2), rgba(126,87,194,0.1));
  border-radius: 10px;
}

.sp-detail-info {
  padding: 4px;
}

.sp-detail-name {
  height: 14px;
  width: 70%;
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-xs);
  margin-bottom: var(--sp-sm);
}

.sp-detail-rating {
  margin-bottom: var(--sp-sm);
}

.sp-detail-rating span {
  color: var(--warning-800);
  font-size: 12px;
}

.sp-detail-rating span.dim {
  color: rgba(255,255,255,0.12);
}

.sp-detail-desc {
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  margin-bottom: 6px;
}

.sp-detail-desc.short {
  width: 60%;
}

/* ---------- Slide 8: CTA ---------- */
.cta-logo {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-xxl);
  margin-bottom: var(--sp-xxl);
  box-shadow: 0 8px 32px rgba(0,150,136,0.25);
  animation: float 4s ease-in-out infinite;
}

.cta-heading {
  font-size: clamp(42px, 5.5vw, 76px);
  color: var(--neutral-900);
  margin-bottom: var(--sp-xl);
}

.cta-desc {
  max-width: 600px;
  font-size: 16px;
  color: var(--neutral-600);
  margin-bottom: var(--sp-2xl);
}

.cta-free-badge {
  display: inline-block;
  padding: 10px 28px;
  background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
  border: 2px solid var(--primary-300);
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-800);
  margin-bottom: var(--sp-3xl);
}

.cta-stats {
  display: flex;
  gap: var(--sp-3xl);
  margin-bottom: var(--sp-3xl);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 42px;
  font-weight: 900;
  color: var(--primary-500);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 13px;
  color: var(--neutral-500);
  font-weight: 500;
}

.cta-buttons {
  display: flex;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-2xl);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 14px 36px;
  background: var(--primary-500);
  color: white;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: all 0.3s;
  box-shadow: 0 4px 20px rgba(0,150,136,0.3);
  letter-spacing: 0.2px;
}

.btn-primary:hover {
  background: var(--primary-400);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,150,136,0.4);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 14px 36px;
  background: transparent;
  color: var(--primary-500);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: 1px solid var(--primary-500);
  transition: all 0.3s;
}

.btn-secondary:hover {
  border-color: var(--primary-400);
  color: white;
  background: var(--primary-500);
}

.cta-footer {
  font-size: 13px;
  color: var(--neutral-400);
  font-style: italic;
}

/* ---------- Slide Enter Animations ---------- */
.slide.active .slide-label,
.slide.active h1,
.slide.active h2,
.slide.active .title-sub,
.slide.active .title-divider,
.slide.active .title-tagline,
.slide.active p,
.slide.active .scroll-hint,
.slide.active .pain-points li,
.slide.active .feature-pill,
.slide.active .map-feature-card,
.slide.active .benefit-list li,
.slide.active .amenity-chip,
.slide.active .screenshot-item,
.slide.active .stat,
.slide.active .cta-buttons,
.slide.active .cta-footer {
  animation: fadeUp 0.6s ease forwards;
}

.slide.active .slide-label { animation-delay: 0.05s; }
.slide.active h1,
.slide.active h2 { animation-delay: 0.1s; }
.slide.active .title-sub { animation-delay: 0.2s; }
.slide.active .title-divider { animation-delay: 0.25s; }

.slide.active .pain-points li:nth-child(1) { animation-delay: 0.2s; }
.slide.active .pain-points li:nth-child(2) { animation-delay: 0.3s; }
.slide.active .pain-points li:nth-child(3) { animation-delay: 0.4s; }

.slide.active .feature-pill:nth-child(1) { animation-delay: 0.2s; }
.slide.active .feature-pill:nth-child(2) { animation-delay: 0.25s; }
.slide.active .feature-pill:nth-child(3) { animation-delay: 0.3s; }
.slide.active .feature-pill:nth-child(4) { animation-delay: 0.35s; }
.slide.active .feature-pill:nth-child(5) { animation-delay: 0.4s; }
.slide.active .feature-pill:nth-child(6) { animation-delay: 0.45s; }

.slide.active .map-feature-card:nth-child(1) { animation-delay: 0.15s; }
.slide.active .map-feature-card:nth-child(2) { animation-delay: 0.25s; }
.slide.active .map-feature-card:nth-child(3) { animation-delay: 0.35s; }

.slide.active .benefit-list li:nth-child(1) { animation-delay: 0.2s; }
.slide.active .benefit-list li:nth-child(2) { animation-delay: 0.3s; }
.slide.active .benefit-list li:nth-child(3) { animation-delay: 0.4s; }

.slide.active .amenity-chip:nth-child(n) { animation-delay: calc(0.1s + var(--i, 0) * 0.05s); }
.slide.active .amenity-chip:nth-child(1) { animation-delay: 0.1s; }
.slide.active .amenity-chip:nth-child(2) { animation-delay: 0.15s; }
.slide.active .amenity-chip:nth-child(3) { animation-delay: 0.2s; }
.slide.active .amenity-chip:nth-child(4) { animation-delay: 0.25s; }
.slide.active .amenity-chip:nth-child(5) { animation-delay: 0.3s; }
.slide.active .amenity-chip:nth-child(6) { animation-delay: 0.35s; }
.slide.active .amenity-chip:nth-child(7) { animation-delay: 0.4s; }
.slide.active .amenity-chip:nth-child(8) { animation-delay: 0.45s; }
.slide.active .amenity-chip:nth-child(9) { animation-delay: 0.5s; }
.slide.active .amenity-chip:nth-child(10) { animation-delay: 0.55s; }

.slide.active .screenshot-item:nth-child(1) { animation-delay: 0.1s; }
.slide.active .screenshot-item:nth-child(2) { animation-delay: 0.2s; }
.slide.active .screenshot-item:nth-child(3) { animation-delay: 0.3s; }
.slide.active .screenshot-item:nth-child(4) { animation-delay: 0.4s; }

.slide.active .stat:nth-child(1) { animation-delay: 0.2s; }
.slide.active .stat:nth-child(2) { animation-delay: 0.3s; }
.slide.active .stat:nth-child(3) { animation-delay: 0.4s; }

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

/* Initial state for animations */
.slide .slide-label,
.slide h1,
.slide h2,
.slide .title-sub,
.slide .title-divider,
.slide .title-tagline,
.slide .scroll-hint,
.slide .pain-points li,
.slide .feature-pill,
.slide .map-feature-card,
.slide .benefit-list li,
.slide .amenity-chip,
.slide .screenshot-item,
.slide .stat,
.slide .cta-buttons,
.slide .cta-footer {
  opacity: 0;
  transform: translateY(20px);
}

/* Keep paragraphs that aren't specifically animated visible */
.slide.active p {
  animation: fadeUp 0.6s ease 0.15s forwards;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .two-col {
    grid-template-columns: 1fr;
    gap: var(--sp-2xl);
  }

  .two-col.reverse .col-visual {
    order: 0;
  }

  .map-features-showcase {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .screenshots-carousel {
    gap: var(--sp-xl);
  }

  .screenshot-phone {
    width: 140px;
    height: 280px;
  }

  .cta-stats {
    gap: var(--sp-xxxl);
  }

  .slide-content {
    padding: var(--sp-2xl) var(--sp-xxl) 100px;
  }
}

@media (max-width: 640px) {
  .screenshots-carousel {
    flex-wrap: wrap;
  }

  .cta-stats {
    flex-direction: column;
    gap: var(--sp-xxl);
  }

  .cta-buttons {
    flex-direction: column;
  }

  .phone-mockup {
    width: 240px;
    height: 460px;
  }
}

/* ---------- PDF Export ---------- */

.nav-divider {
  width: 1px;
  height: 20px;
  background: var(--border-default);
  margin: 0 2px;
}

#export-pdf {
  background: none;
  border: none;
  color: var(--neutral-500);
  cursor: pointer;
  padding: var(--sp-sm);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

#export-pdf:hover {
  color: var(--primary-500);
  background: rgba(0,150,136,0.08);
}

/* Export overlay */
#export-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xl);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#export-overlay.active {
  display: flex;
}

.export-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-default);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#export-progress {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

/* Exporting mode: skip all animations, force final states */
body.exporting #slide-nav,
body.exporting #lang-toggle,
body.exporting #progress-bar,
body.exporting #lightbox {
  display: none !important;
}

body.exporting .slide,
body.exporting .slide * {
  transition: none !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}

body.exporting .slide .slide-label,
body.exporting .slide h1,
body.exporting .slide h2,
body.exporting .slide p,
body.exporting .slide .title-sub,
body.exporting .slide .title-divider,
body.exporting .slide .title-tagline,
body.exporting .slide .scroll-hint,
body.exporting .slide .pain-points li,
body.exporting .slide .feature-pill,
body.exporting .slide .map-feature-card,
body.exporting .slide .benefit-list li,
body.exporting .slide .amenity-chip,
body.exporting .slide .screenshot-item,
body.exporting .slide .stat,
body.exporting .slide .cta-buttons,
body.exporting .slide .cta-footer,
body.exporting .slide .notif-card {
  opacity: 1 !important;
  transform: none !important;
}