/* =========================================================================
   Scale with AI: Vad händer inom AI
   Standalone deck. Designsystem-tokens lånade från OmniPresentations §3, §5, §7.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  --o-bg-deep: #02060f;
  --o-bg-amber: #0a0708;
  --o-fg: #f5f7fa;
  --o-fg-dim: #b6c0cc;
  --o-fg-mute: #7a8694;
  --o-blue: #1e4366;
  --o-blue-soft: #2e669e;
  --o-gold: #daad82;
  --o-gold-soft: rgba(218, 173, 130, 0.18);
  --o-gold-edge: rgba(218, 173, 130, 0.42);
  --o-glass-bg: rgba(255, 255, 255, 0.04);
  --o-glass-border: rgba(255, 255, 255, 0.08);
  --o-glass-bg-strong: rgba(255, 255, 255, 0.06);
  --o-glass-border-strong: rgba(255, 255, 255, 0.12);

  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Menlo', monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-md: 18px;
  --radius-lg: 28px;

  --blur-md: 18px;
  --blur-lg: 36px;

  --motion-bg-fade: 800ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--o-bg-deep);
  color: var(--o-fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  position: relative;
}

/* ---------- Slide host ---------- */
.deck { position: fixed; inset: 0; }

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* ----- Staggered entry: eyebrow → headline → body → cards/timeline ----- */
.slide.active .eyebrow         { animation: rise-in 700ms 100ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.slide.active .headline        { animation: rise-in 800ms 200ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.slide.active .quote           { animation: rise-in 900ms 250ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.slide.active .body            { animation: rise-in 800ms 350ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.slide.active .caption         { animation: rise-in 700ms 500ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.slide.active .cta-button      { animation: rise-in 700ms 550ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.slide.active .cta-tagline     { animation: rise-in 700ms 450ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.slide.active .gold-bar        { animation: gold-bar-grow 600ms 100ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }

.slide.active .stat-card,
.slide.active .timeline-step,
.slide.active .vote-option,
.slide.active .end-card {
  animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.slide.active .stat-card:nth-child(1),
.slide.active .timeline-step:nth-child(1),
.slide.active .vote-option:nth-child(1),
.slide.active .end-card:nth-child(1) { animation-delay: 400ms; }
.slide.active .stat-card:nth-child(2),
.slide.active .timeline-step:nth-child(2),
.slide.active .vote-option:nth-child(2),
.slide.active .end-card:nth-child(2) { animation-delay: 480ms; }
.slide.active .stat-card:nth-child(3),
.slide.active .timeline-step:nth-child(3),
.slide.active .vote-option:nth-child(3) { animation-delay: 560ms; }
.slide.active .stat-card:nth-child(4),
.slide.active .timeline-step:nth-child(4),
.slide.active .vote-option:nth-child(4) { animation-delay: 640ms; }

/* Inactive slides keep entry-animatable elements hidden so the next reveal isn't a flash */
.slide:not(.active) .eyebrow,
.slide:not(.active) .headline,
.slide:not(.active) .quote,
.slide:not(.active) .body,
.slide:not(.active) .caption,
.slide:not(.active) .stat-card,
.slide:not(.active) .timeline-step,
.slide:not(.active) .vote-option,
.slide:not(.active) .end-card,
.slide:not(.active) .cta-button,
.slide:not(.active) .cta-tagline,
.slide:not(.active) .gold-bar {
  opacity: 0;
  transform: translateY(24px);
}

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

@keyframes gold-bar-grow {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .slide.active .eyebrow,
  .slide.active .headline,
  .slide.active .quote,
  .slide.active .body,
  .slide.active .caption,
  .slide.active .stat-card,
  .slide.active .timeline-step,
  .slide.active .vote-option,
  .slide.active .cta-button,
  .slide.active .cta-tagline,
  .slide.active .gold-bar { animation: none; }
}

.slide-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 6vw, 96px);
  z-index: 2;
}

/* ---------- Liquid-bg variants ---------- */
.liquid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.liquid-bg::before,
.liquid-bg::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* Aurora — ribbon-sweeps on cover/dividers */
.liquid-aurora {
  background: #02060f;
}
.liquid-aurora::before {
  background:
    radial-gradient(ellipse 35% 30% at 78% 30%, rgba(80, 160, 200, 0.18), transparent 55%),
    radial-gradient(ellipse 25% 25% at 18% 88%, rgba(80, 160, 200, 0.14), transparent 55%);
}
.liquid-aurora .blob-blue,
.liquid-aurora .blob-gold,
.liquid-aurora .blob-accent {
  position: absolute;
  will-change: transform;
}
.liquid-aurora .blob-blue {
  inset: 18% -10% 52% 0%;
  background: radial-gradient(ellipse 50% 80% at 35% 50%, rgba(46, 130, 200, 0.85), transparent 65%);
  animation: an-ribbon-blue 22s ease-in-out infinite;
}
.liquid-aurora .blob-gold {
  inset: 50% 5% 12% -5%;
  background: radial-gradient(ellipse 55% 80% at 60% 50%, rgba(218, 173, 130, 0.55), transparent 65%);
  animation: an-ribbon-gold 26s ease-in-out infinite;
}
.liquid-aurora .blob-accent {
  inset: 8% 70% 65% 12%;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(218, 173, 130, 0.40), transparent 60%);
  animation: an-accent-gold 18s ease-in-out infinite;
}

/* Deep — single breath, focused */
.liquid-deep {
  background: #02060f;
}
.liquid-deep::before {
  background: radial-gradient(ellipse 55% 50% at 50% 55%, rgba(46, 110, 180, 0.55), transparent 62%);
  animation: an-deep-breath 26s ease-in-out infinite;
}
.liquid-deep::after {
  background: radial-gradient(ellipse 30% 25% at 14% 20%, rgba(218, 173, 130, 0.22), transparent 65%);
  animation: an-deep-ember 32s ease-in-out infinite;
}

/* Amber — heartbeat, warm */
.liquid-amber {
  background: #0a0708;
}
.liquid-amber::before {
  background:
    radial-gradient(ellipse 50% 45% at 55% 45%, rgba(218, 173, 130, 0.55), transparent 60%),
    radial-gradient(ellipse 32% 30% at 22% 80%, rgba(184, 132, 92, 0.42), transparent 60%);
  animation: an-amber-heart 18s ease-in-out infinite;
}
.liquid-amber::after {
  background: radial-gradient(ellipse 30% 32% at 82% 22%, rgba(46, 102, 158, 0.18), transparent 60%);
  animation: an-amber-blue 22s ease-in-out infinite;
  animation-delay: -7s;
}

/* Spectrum — orbiting spotlights, energetic */
.liquid-spectrum {
  background: #02060f;
}
.liquid-spectrum .blob-blue,
.liquid-spectrum .blob-gold,
.liquid-spectrum .blob-cyan {
  position: absolute;
  will-change: transform;
}
.liquid-spectrum .blob-blue {
  inset: 0;
  background: radial-gradient(ellipse 32% 30% at 30% 35%, rgba(46, 130, 200, 0.85), transparent 60%);
  animation: an-orbit-blue 12s ease-in-out infinite;
}
.liquid-spectrum .blob-gold {
  inset: 0;
  background: radial-gradient(ellipse 32% 30% at 70% 65%, rgba(218, 173, 130, 0.65), transparent 60%);
  animation: an-orbit-gold 12s ease-in-out infinite;
  animation-delay: -4s;
}
.liquid-spectrum .blob-cyan {
  inset: 0;
  background: radial-gradient(ellipse 28% 26% at 50% 80%, rgba(80, 180, 220, 0.40), transparent 60%);
  animation: an-orbit-cyan 12s ease-in-out infinite;
  animation-delay: -8s;
}

/* ---------- Noise overlay (subtle film grain) ---------- */
.noise-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* ---------- Animations ---------- */
@keyframes an-ribbon-blue {
  0%, 100% { transform: translateX(-15%) scaleY(0.85); opacity: 0.7; }
  50%      { transform: translateX(15%)  scaleY(1.30); opacity: 1; }
}
@keyframes an-ribbon-gold {
  0%, 100% { transform: translateX(12%)  scaleY(0.85); opacity: 0.55; }
  50%      { transform: translateX(-12%) scaleY(1.25); opacity: 0.95; }
}
@keyframes an-accent-gold {
  0%, 100% { transform: scale(0.8);  opacity: 0.45; }
  50%      { transform: scale(1.30); opacity: 1; }
}
@keyframes an-deep-breath {
  0%, 100% { transform: scale(0.88); opacity: 0.7; }
  50%      { transform: scale(1.18); opacity: 1; }
}
@keyframes an-deep-ember {
  0%, 100% { opacity: 0.5; transform: translate(-3%, 2%) scale(0.9); }
  50%      { opacity: 1;   transform: translate(4%, -3%) scale(1.15); }
}
@keyframes an-amber-heart {
  0%, 100% { transform: scale(0.92); opacity: 0.75; }
  35%      { transform: scale(1.12); opacity: 1; }
  70%      { transform: scale(1.04); opacity: 0.92; }
}
@keyframes an-amber-blue {
  0%, 100% { opacity: 0.45; transform: translate(0, 0); }
  50%      { opacity: 0.85; transform: translate(-3%, 2%); }
}
@keyframes an-orbit-blue {
  0%, 100% { transform: translate(0, 0)   scale(0.85); opacity: 0.75; }
  50%      { transform: translate(15%, 12%) scale(1.45); opacity: 1; }
}
@keyframes an-orbit-gold {
  0%, 100% { transform: translate(0, 0)    scale(0.85); opacity: 0.55; }
  50%      { transform: translate(-14%, 10%) scale(1.40); opacity: 0.95; }
}
@keyframes an-orbit-cyan {
  0%, 100% { transform: translate(0, 0)    scale(0.8);  opacity: 0.45; }
  50%      { transform: translate(10%, -14%) scale(1.30); opacity: 0.8; }
}

/* Reduced-motion: slow and dampen, but don't kill — subtle drift is essential to the design language */
@media (prefers-reduced-motion: reduce) {
  .liquid-bg *,
  .liquid-bg::before,
  .liquid-bg::after { animation-duration: 60s !important; }
}

/* ---------- Glass panel (Apple-depth + gold edge-light per design-system §2) ---------- */
.glass {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025) 45%, rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--blur-md)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(160%);
  padding: clamp(32px, 4.5vw, 72px);
  max-width: 88%;
  max-height: 80%;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 36px 90px -24px rgba(0, 0, 0, 0.75),
    0 0 80px -20px rgba(46, 110, 180, 0.18);
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, transparent 70%, rgba(0, 0, 0, 0.18));
}

.glass-strong {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(218, 173, 130, 0.32);
  backdrop-filter: blur(var(--blur-lg)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(218, 173, 130, 0.10),
    0 0 0 1px rgba(218, 173, 130, 0.42),
    0 50px 120px -28px rgba(0, 0, 0, 0.85),
    0 0 100px -10px rgba(218, 173, 130, 0.30);
}

.glass-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.glass-stack.tight { gap: var(--space-3); }

/* ---------- Typography ---------- */
/* Display copy uses Sora; body copy uses Inter */
.eyebrow {
  font-family: var(--font-display);
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o-gold);
  font-weight: 500;
}

.headline {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--o-fg);
  line-height: 1.05;
}
.headline.h1 { font-size: clamp(48px, 6.4vw, 104px); font-weight: 800; }
.headline.h2 { font-size: clamp(36px, 4.6vw, 72px); font-weight: 700; }
.headline.h3 { font-size: clamp(24px, 2.4vw, 36px); font-weight: 600; }

.quote {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 60px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--o-fg);
  position: relative;
}
.quote::before {
  content: '“';
  position: absolute;
  left: -0.6em;
  top: -0.2em;
  font-size: 1.6em;
  color: var(--o-gold);
  opacity: 0.65;
  font-weight: 400;
}

.body {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.55;
  font-weight: 400;
  color: var(--o-fg-dim);
  max-width: 60ch;
}

.caption {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.05vw, 18px);
  color: var(--o-fg-mute);
  letter-spacing: 0.04em;
  font-weight: 400;
}

/* ---------- Stat cards ---------- */
.stat-grid {
  display: grid;
  gap: var(--space-5);
  width: 100%;
}
.stat-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.stat-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.stat-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: clamp(20px, 2.4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 48px -16px rgba(0, 0, 0, 0.55);
}

.stat-card.highlight {
  background:
    linear-gradient(180deg, rgba(218, 173, 130, 0.14), rgba(218, 173, 130, 0.04) 45%, rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(218, 173, 130, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(218, 173, 130, 0.20),
    0 24px 70px -22px rgba(218, 173, 130, 0.32),
    0 18px 48px -16px rgba(0, 0, 0, 0.55);
}

.stat-card .stat-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-fg-mute);
  font-weight: 500;
}

.stat-value {
  font-family: var(--font-display);
  font-size: clamp(42px, 4.8vw, 76px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--o-fg);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-card.highlight .stat-value { color: var(--o-gold); }

/* Word-stat variant: when value is a word (not a number), scale down to fit */
.stat-grid.word-stats .stat-value {
  font-size: clamp(26px, 2.8vw, 44px);
  font-variant-numeric: normal;
  letter-spacing: -0.01em;
}

.stat-label {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.1vw, 18px);
  color: var(--o-fg-dim);
  line-height: 1.45;
  font-weight: 400;
}

.stat-trend {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px;
  background: var(--o-glass-bg-strong);
}
.stat-trend.up    { color: var(--o-gold); }
.stat-trend.down  { color: #d97a7a; }
.stat-trend.flat  { color: var(--o-fg-mute); }

/* ---------- Adoption curve (SVG) ---------- */
.adoption-curve {
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 460;
  max-height: clamp(280px, 44vh, 480px);
  margin-top: var(--space-3);
  display: block;
}
.ac-grid line {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.ac-y-axis text,
.ac-x-axis text {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--o-fg-mute);
  letter-spacing: 0.04em;
}
.ac-curve {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
}
.slide.active .ac-curve {
  animation: ac-draw 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.ac-pc       { stroke: rgba(180, 200, 220, 0.45); }
.ac-internet { stroke: rgba(80, 140, 200, 0.85); }
.ac-genai    { stroke: var(--o-gold); stroke-width: 4; filter: drop-shadow(0 0 10px rgba(218, 173, 130, 0.45)); }

.slide.active .ac-pc       { animation-delay: 300ms; }
.slide.active .ac-internet { animation-delay: 600ms; }
.slide.active .ac-genai    { animation-delay: 900ms; animation-duration: 1.0s; }

.ac-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  fill: var(--o-fg-mute);
  opacity: 0;
}
.ac-internet-label { fill: rgba(140, 180, 220, 0.95); }
.ac-genai-label    { fill: var(--o-gold); font-weight: 700; font-size: 16px; }

.slide.active .ac-pc-label       { animation: ac-fade 500ms 1300ms forwards; }
.slide.active .ac-internet-label { animation: ac-fade 500ms 1600ms forwards; }
.slide.active .ac-genai-label    { animation: ac-fade 500ms 1700ms forwards; }

.ac-marker {
  fill: var(--o-gold);
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(218, 173, 130, 0.7));
  transform-box: fill-box;
  transform-origin: center;
}
.ac-marker-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  fill: var(--o-gold);
  opacity: 0;
}
.slide.active .ac-marker {
  animation: ac-pop 500ms 1800ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             ac-pulse 2.4s 2400ms ease-in-out infinite;
}
.slide.active .ac-marker-label { animation: ac-fade 500ms 2000ms forwards; }

@keyframes ac-draw  { to { stroke-dashoffset: 0; } }
@keyframes ac-fade  { to { opacity: 1; } }
@keyframes ac-pop   {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ac-pulse {
  0%, 100% { transform: scale(1);   filter: drop-shadow(0 0 6px rgba(218, 173, 130, 0.5)); }
  50%      { transform: scale(1.25); filter: drop-shadow(0 0 14px rgba(218, 173, 130, 0.9)); }
}

@media (prefers-reduced-motion: reduce) {
  .ac-curve { stroke-dashoffset: 0; }
  .slide.active .ac-curve,
  .slide.active .ac-marker,
  .slide.active .ac-marker-label,
  .slide.active .ac-label { animation: none; opacity: 1; }
}

/* ---------- Timeline ---------- */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  width: 100%;
  position: relative;
}
.timeline-step {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: clamp(16px, 2vw, 28px);
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 32px -12px rgba(0, 0, 0, 0.45);
}
.timeline-step.last {
  background:
    linear-gradient(180deg, rgba(218, 173, 130, 0.14), rgba(218, 173, 130, 0.04));
  border: 1px solid rgba(218, 173, 130, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(218, 173, 130, 0.18),
    0 16px 40px -12px rgba(218, 173, 130, 0.30);
}
/* SVG arrow drawn between timeline steps (added inside each non-last step in HTML) */
.timeline-arrow {
  position: absolute;
  right: calc(-1 * var(--space-4) - 14px);
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 18px;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}
.timeline-step:last-child .timeline-arrow { display: none; }
.timeline-arrow path {
  stroke: var(--o-gold);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  filter: drop-shadow(0 0 4px rgba(218, 173, 130, 0.5));
}
.slide.active .timeline-arrow path {
  animation: arrow-draw 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.slide.active .timeline-step:nth-child(1) .timeline-arrow path { animation-delay: 700ms; }
.slide.active .timeline-step:nth-child(2) .timeline-arrow path { animation-delay: 820ms; }
.slide.active .timeline-step:nth-child(3) .timeline-arrow path { animation-delay: 940ms; }

@keyframes arrow-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .timeline-arrow path { stroke-dashoffset: 0; }
  .slide.active .timeline-arrow path { animation: none; }
}
.timeline-num {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 44px);
  font-weight: 700;
  color: var(--o-gold);
  line-height: 1;
  margin-bottom: var(--space-3);
  font-variant-numeric: tabular-nums;
}
.timeline-title {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.2vw, 20px);
  font-weight: 600;
  color: var(--o-fg);
  line-height: 1.3;
}

/* ---------- Voting (handuppräckning, kompakt så D inte klipps) ---------- */
.vote-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
  width: 100%;
}
.vote-option {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: clamp(10px, 1.4vw, 18px) clamp(14px, 1.8vw, 24px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  font-size: clamp(15px, 1.2vw, 20px);
  color: var(--o-fg);
  line-height: 1.35;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.vote-option .key {
  font-family: var(--font-display);
  width: clamp(32px, 2.6vw, 40px);
  height: clamp(32px, 2.6vw, 40px);
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(218, 173, 130, 0.42), rgba(218, 173, 130, 0.10));
  color: var(--o-gold);
  font-weight: 700;
  font-size: clamp(14px, 1vw, 17px);
  letter-spacing: 0.05em;
  flex-shrink: 0;
  border: 1px solid rgba(218, 173, 130, 0.35);
}

.vote-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--o-glass-bg-strong);
  border: 1px solid var(--o-glass-border-strong);
  border-radius: var(--radius-md);
}
.vote-qr img {
  width: clamp(180px, 18vw, 280px);
  height: clamp(180px, 18vw, 280px);
  background: white;
  padding: 12px;
  border-radius: 12px;
}
.vote-qr .scan-hint {
  font-size: clamp(13px, 0.95vw, 16px);
  color: var(--o-fg-mute);
  text-align: center;
  letter-spacing: 0.04em;
}
.vote-qr .vote-url {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: clamp(12px, 0.85vw, 14px);
  color: var(--o-gold);
  word-break: break-all;
  text-align: center;
}

.vote-results-placeholder {
  background: var(--o-glass-bg-strong);
  border: 1px dashed var(--o-glass-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  width: 100%;
  text-align: center;
  font-size: clamp(16px, 1.3vw, 22px);
  color: var(--o-fg-mute);
}

/* ---------- Cover-specific (no glass-panel) ---------- */
.cover-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
  text-align: left;
  max-width: 1200px;
  width: 100%;
}

/* ---------- Section divider (no glass-panel) ---------- */
.divider-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
}
.divider-content .gold-bar {
  width: 80px;
  height: 3px;
  background: var(--o-gold);
  margin-bottom: var(--space-5);
  border-radius: 2px;
}

/* ---------- CTA ---------- */
.cta-button {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background: var(--o-gold);
  color: #1a1208;
  border: none;
  border-radius: 999px;
  font-size: clamp(16px, 1.3vw, 22px);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.02em;
  margin-top: var(--space-5);
}

/* End-of-deck two-card CTA row (QR for OmniScribe + monter) */
.end-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  width: 100%;
  margin-top: var(--space-3);
}
.end-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: clamp(20px, 2.4vw, 36px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 24px);
  text-decoration: none;
  color: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 48px -16px rgba(0, 0, 0, 0.55);
  min-height: 100%;
}
.end-card.highlight {
  background:
    linear-gradient(180deg, rgba(218, 173, 130, 0.14), rgba(218, 173, 130, 0.04));
  border: 1px solid rgba(218, 173, 130, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(218, 173, 130, 0.20),
    0 24px 70px -22px rgba(218, 173, 130, 0.32),
    0 18px 48px -16px rgba(0, 0, 0, 0.55);
}
.end-qr {
  width: clamp(100px, 11vw, 170px);
  height: clamp(100px, 11vw, 170px);
  background: white;
  padding: 8px;
  border-radius: 12px;
  flex-shrink: 0;
}
.end-card-text { display: flex; flex-direction: column; gap: 4px; }
.end-card-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--o-fg-mute);
}
.end-card.highlight .end-card-eyebrow { color: var(--o-gold); }
.end-card-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 30px);
  font-weight: 700;
  color: var(--o-fg);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.end-card.highlight .end-card-title { color: var(--o-gold); }
.end-card-sub {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.05vw, 17px);
  color: var(--o-fg-dim);
  line-height: 1.4;
  margin-top: 2px;
}
.cta-tagline {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.5vw, 26px);
  color: var(--o-gold);
  font-style: italic;
  font-weight: 400;
  margin-top: var(--space-4);
}

/* ---------- HUD ---------- */
.hud {
  position: fixed;
  bottom: 16px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  z-index: 10;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--o-fg-mute);
  letter-spacing: 0.05em;
}
.hud-counter {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--o-glass-border);
  border-radius: 999px;
  padding: 6px 14px;
  backdrop-filter: blur(8px);
}
.hud-help {
  cursor: help;
  opacity: 0.6;
  font-size: 11px;
}

/* ---------- Layouts ---------- */
.layout-cover .slide-inner {
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(48px, 7vw, 120px);
  padding-bottom: clamp(80px, 12vh, 200px);
}
.layout-cover .cover-content { gap: var(--space-6); }
.layout-cover .eyebrow { font-size: clamp(14px, 1.05vw, 18px); }
.layout-cover .caption { font-size: clamp(16px, 1.2vw, 22px); color: var(--o-fg-dim); }

.layout-hero .slide-inner { justify-content: center; }

.layout-content .slide-inner { justify-content: center; padding: clamp(48px, 7vw, 110px); }
.layout-content .glass {
  width: 100%;
  max-width: 1400px;
  max-height: 88%;
  padding: clamp(36px, 5vw, 76px) clamp(36px, 5vw, 76px) clamp(44px, 6vw, 88px);
}
.layout-content .glass-stack { gap: clamp(18px, 2.2vw, 32px); }

.layout-comparison .slide-inner { padding: clamp(48px, 7vw, 110px); }
.layout-comparison .slide-inner .comparison-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  max-width: 1400px;
  align-items: center;
  text-align: center;
}
.layout-comparison .stat-grid { max-width: 1100px; }
.layout-comparison .headline.h2 { max-width: 18ch; }

.layout-section-divider .slide-inner { justify-content: center; }

.layout-vote-live .glass {
  width: 86%;
  max-width: 1400px;
  max-height: 92%;
  padding: clamp(28px, 3.6vw, 56px);
}
.layout-vote-live .glass-stack { gap: var(--space-4); }
.layout-vote-live .headline.h2 {
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.12;
}
.layout-results .glass { width: 86%; max-width: 1400px; }

.layout-cta .slide-inner { justify-content: center; }
.layout-cta .glass {
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

/* ---------- Print fallback (in case of PDF export) ---------- */
@media print {
  .slide { opacity: 1 !important; pointer-events: auto !important; page-break-after: always; }
  .hud { display: none; }
}