@font-face { font-family: Montserrat; src: url("fonts/Montserrat-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Montserrat; src: url("fonts/Montserrat-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: Montserrat; src: url("fonts/Montserrat-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: Montserrat; src: url("fonts/Montserrat-Black.ttf") format("truetype"); font-weight: 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype"); font-weight: 100 800; font-display: swap; }

:root {
  --ink: #171717;
  --paper: #f7f7f4;
  --white: #fafafa;
  --yellow: #ffc800;
  --mint: #5ae09a;
  --blue: #4074e8;
  --rose: #d84f8c;
  --muted: #606067;
  --mono: "JetBrains Mono", monospace;
  --sans: Montserrat, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
body { font-family: var(--sans); color: var(--ink); }
deck-stage:not(:defined) { visibility: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; letter-spacing: 0; }

.slide {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  color: var(--ink);
}

.slide-header {
  position: absolute;
  z-index: 20;
  top: 58px;
  left: 82px;
  right: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.slide-header.light { color: var(--white); }
.kicker, .chapter, .meeting-stamp, .slide-number, .screen span, .environment-strip, .workflow, .audience p, .audience-number, .attack-path article > span, .decision-bar span, .asset-dock {
  font-family: var(--mono);
  letter-spacing: 0;
  text-transform: uppercase;
}
.kicker { font-size: 22px; font-weight: 800; }
.chapter { font-size: 15px; font-weight: 800; }
h1 { font-size: 90px; line-height: .98; font-weight: 900; }
h2 { font-size: 76px; line-height: 1.01; font-weight: 900; }
h3 { font-size: 34px; line-height: 1.08; font-weight: 900; }

/* 01 — proof first */
.proof { color: var(--white); background: #080808; }
.proof-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #050505; }
.proof-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #080808 0%, #080808 45%, rgba(8,8,8,.75) 57%, rgba(8,8,8,.26) 73%, rgba(8,8,8,.34) 100%); transition: opacity .25s ease; }
.proof::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.22); pointer-events: none; transition: opacity .25s ease; }
.brand-row { position: absolute; z-index: 3; top: 58px; left: 78px; right: 78px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.brand-lockup { width: 188px; height: auto; }
.meeting-stamp { font-size: 14px; font-weight: 800; color: rgba(255,255,255,.78); }
.proof-copy { position: absolute; z-index: 3; left: 82px; top: 220px; width: 920px; pointer-events: none; }
.proof-copy .kicker { margin-bottom: 30px; color: var(--yellow); }
.proof-copy h1 { color: var(--white); }
.proof-prompt { margin-top: 34px; font-size: 26px; line-height: 1.4; font-weight: 600; color: rgba(255,255,255,.76); }
.proof-links { position: absolute; z-index: 4; left: 82px; bottom: 76px; display: flex; gap: 14px; }
.proof-links a { display: flex; align-items: center; min-height: 50px; padding: 0 20px; border: 1px solid rgba(255,255,255,.38); background: rgba(8,8,8,.74); font-size: 15px; font-weight: 700; }
.proof-links a:first-child { color: var(--ink); border-color: var(--yellow); background: var(--yellow); }
.proof-links a:hover, .proof-links a:focus-visible { outline: 4px solid var(--white); outline-offset: 3px; }
.slide-number { position: absolute; z-index: 3; right: 82px; bottom: 76px; font-size: 14px; font-weight: 800; color: rgba(255,255,255,.62); }
.proof .brand-row, .proof-copy, .proof-links, .proof .slide-number { transition: opacity .25s ease; }
.proof.is-playing .proof-shade,
.proof.is-playing::after,
.proof.is-playing .brand-row,
.proof.is-playing .proof-copy,
.proof.is-playing .proof-links,
.proof.is-playing .slide-number { opacity: 0; pointer-events: none; }

/* 02 — live surfaces */
.product { background: #efefeb; }
.product-title { position: absolute; left: 82px; top: 145px; width: 1200px; }
.product-title h2 { font-size: 72px; }
.product-title p { margin-top: 20px; font-size: 24px; line-height: 1.42; font-weight: 600; color: var(--muted); }
.product-mosaic { position: absolute; left: 82px; right: 82px; top: 306px; bottom: 132px; display: grid; grid-template-columns: 1.35fr .82fr .82fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.screen { position: relative; overflow: hidden; border: 2px solid var(--ink); background: #fff; box-shadow: 7px 7px 0 var(--ink); }
.screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .3s ease; }
.screen span { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 16px; background: rgba(10,10,10,.92); color: #fff; font-size: 13px; font-weight: 800; }
.screen span b { color: var(--yellow); }
.screen:hover img, .screen:focus-visible img { transform: scale(1.025); }
.screen:focus-visible { outline: 5px solid var(--yellow); outline-offset: 4px; }
.screen-dashboard { grid-row: 1 / 3; }
.screen-funding { grid-column: 2; grid-row: 1; }
.screen-admin { grid-column: 2; grid-row: 2; }
.screen-public { grid-column: 3; grid-row: 1 / 3; }
.environment-strip { position: absolute; left: 82px; right: 82px; bottom: 46px; display: flex; align-items: center; gap: 18px; font-size: 13px; font-weight: 800; }
.environment-strip > span { margin-right: auto; color: var(--muted); }
.environment-strip a { padding: 11px 16px; border-bottom: 3px solid var(--ink); }
.environment-strip a:hover, .environment-strip a:focus-visible { color: var(--blue); border-color: var(--blue); outline: none; }

/* 03 — problem */
.problem { background: var(--paper); }
.problem::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(23,23,23,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(23,23,23,.045) 1px, transparent 1px); background-size: 42px 42px; }
.problem-copy { position: absolute; left: 82px; top: 157px; width: 900px; }
.problem-copy h2 { font-size: 70px; }
.problem-copy p { margin-top: 30px; width: 800px; font-size: 24px; line-height: 1.48; font-weight: 500; color: var(--muted); }
.problem-map { position: absolute; top: 146px; right: 54px; width: 900px; height: 690px; }
.problem-map svg { position: absolute; inset: 28px 0 auto 0; width: 900px; height: 640px; overflow: visible; }
.problem-map path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: 9 11; opacity: .38; }
.truth, .store-core { position: absolute; z-index: 2; display: flex; flex-direction: column; justify-content: center; border: 3px solid var(--ink); background: #fff; box-shadow: 8px 8px 0 var(--ink); }
.truth { width: 274px; height: 170px; padding: 22px 24px; }
.truth span { font: 800 13px var(--mono); }
.truth strong { margin-top: 9px; font-size: 22px; font-weight: 900; }
.truth small { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--muted); }
.truth-operator { left: 4px; top: 0; border-color: var(--blue); }
.truth-civic { right: 5px; top: 0; border-color: var(--mint); }
.truth-community { left: 318px; bottom: 0; border-color: var(--rose); }
.store-core { left: 318px; top: 232px; width: 276px; height: 220px; align-items: center; text-align: center; background: var(--yellow); }
.store-mark { display: grid; place-items: center; width: 62px; height: 62px; border: 3px solid var(--ink); border-radius: 50%; font-size: 20px; font-weight: 900; }
.store-core strong { margin-top: 16px; font-size: 26px; font-weight: 900; }
.store-core small { margin-top: 8px; font-size: 13px; font-weight: 700; }
.problem-close { position: absolute; left: 82px; bottom: 70px; padding-left: 24px; border-left: 7px solid var(--yellow); }
.problem-close span, .problem-close strong { display: block; }
.problem-close span { font-size: 20px; font-weight: 600; color: var(--muted); }
.problem-close strong { margin-top: 5px; font-size: 31px; font-weight: 900; }

/* 04 — shared decision */
.solution { color: var(--white); background: #111; }
.solution::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #111 0 35%, #181818 35% 100%); }
.solution-title { position: absolute; left: 82px; top: 154px; width: 810px; }
.solution-title h2 { font-size: 70px; }
.workflow { display: flex; align-items: center; gap: 14px; margin-top: 36px; color: var(--yellow); font-size: 13px; font-weight: 800; }
.workflow i { width: 26px; height: 1px; background: rgba(255,255,255,.3); }
.audience-rivers { position: absolute; left: 930px; right: 82px; top: 154px; height: 710px; display: grid; grid-template-rows: repeat(3, 1fr); border-top: 2px solid rgba(255,255,255,.55); border-bottom: 2px solid rgba(255,255,255,.55); }
.audience { position: relative; display: grid; grid-template-columns: 82px 200px 315px 1fr; align-items: center; gap: 20px; padding: 0 25px; border-bottom: 1px solid rgba(255,255,255,.22); }
.audience:last-child { border-bottom: 0; }
.audience::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; background: var(--accent); }
.audience.operator { --accent: var(--blue); }
.audience.civic { --accent: var(--mint); }
.audience.community { --accent: var(--rose); }
.audience-number { font-size: 15px; font-weight: 800; color: var(--accent); }
.audience p { font-size: 13px; font-weight: 800; color: rgba(255,255,255,.58); }
.audience h3 { font-size: 29px; }
.audience small { font-size: 17px; line-height: 1.42; font-weight: 500; color: rgba(255,255,255,.65); }
.solution-close { position: absolute; left: 82px; bottom: 115px; }
.solution-close span, .solution-close strong { display: block; }
.solution-close span { font-size: 25px; font-weight: 600; color: rgba(255,255,255,.56); }
.solution-close strong { margin-top: 8px; font-size: 46px; font-weight: 900; color: var(--yellow); }

/* 05 — attack plan */
.attack { background: var(--paper); }
.attack-title { position: absolute; left: 82px; top: 150px; width: 1030px; }
.attack-title h2 { font-size: 69px; }
.attack-title p { margin-top: 22px; width: 920px; font-size: 22px; line-height: 1.45; font-weight: 600; color: var(--muted); }
.attack-path { position: absolute; left: 82px; right: 82px; top: 414px; height: 306px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.attack-path article { position: relative; padding: 32px 38px 24px; border-right: 2px solid var(--ink); }
.attack-path article:last-child { border-right: 0; }
.attack-path article::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: var(--accent); }
.attack-path article:nth-child(1) { --accent: var(--blue); }
.attack-path article:nth-child(2) { --accent: var(--mint); }
.attack-path article:nth-child(3) { --accent: var(--rose); }
.attack-path article > span { font-size: 13px; font-weight: 800; color: var(--muted); }
.attack-path h3 { margin-top: 29px; font-size: 32px; }
.attack-path p { margin-top: 20px; font-size: 18px; line-height: 1.45; font-weight: 500; color: var(--muted); }
.decision-bar { position: absolute; left: 82px; right: 82px; top: 758px; display: flex; align-items: center; min-height: 86px; padding: 0 28px; background: var(--yellow); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.decision-bar span { width: 250px; font-size: 13px; font-weight: 800; }
.decision-bar strong { font-size: 28px; font-weight: 900; }
.asset-dock { position: absolute; left: 82px; right: 82px; bottom: 52px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.asset-dock a { display: flex; align-items: center; min-height: 62px; padding: 0 16px; border-bottom: 3px solid var(--ink); font-size: 12px; font-weight: 800; }
.asset-dock a span { margin-right: 14px; color: var(--muted); }
.asset-dock a:hover, .asset-dock a:focus-visible { color: var(--blue); border-color: var(--blue); outline: none; }

@media (prefers-reduced-motion: no-preference) {
  .slide[data-deck-active] .proof-copy,
  .slide[data-deck-active] .product-title,
  .slide[data-deck-active] .problem-copy,
  .slide[data-deck-active] .solution-title,
  .slide[data-deck-active] .attack-title { animation: rise .72s cubic-bezier(.16,1,.3,1) both; }
  .slide[data-deck-active] .product-mosaic,
  .slide[data-deck-active] .problem-map,
  .slide[data-deck-active] .audience-rivers,
  .slide[data-deck-active] .attack-path { animation: reveal .88s .1s cubic-bezier(.16,1,.3,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes reveal { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
}

@media print {
  @page { size: 1920px 1080px; margin: 0; }
  body { background: #fff; }
}