:root {
  --bg: #0b0b0d;            /* page background, near black like the Reboot logo field */
  --surface: #15151a;       /* cards, table rows */
  --surface-2: #1d1d24;     /* hover / raised */
  --text: #f5f5f2;          /* primary text */
  --muted: #a0a0ab;         /* secondary text */
  --accent: #f15a24;        /* Reboot orange, sampled from logo */
  --accent-soft: rgba(241, 90, 36, 0.14);
  --border: rgba(245, 245, 242, 0.10);
  --ok: #4ade80;            /* matrix check */
  --warn: #fbbf24;          /* matrix partial */
  --bad: #64646e;           /* matrix cross, deliberately muted not red */
  --radius: 14px;
  --font: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --max-w: 1160px;
}

/* reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- deck frame (given, verbatim) ---- */
html,body{height:100%;overflow:hidden}
.deck{height:100vh;position:relative}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:6vh 8vw;opacity:0;transform:translateX(40px);pointer-events:none;
  transition:opacity .45s ease,transform .45s ease}
.slide.current{opacity:1;transform:none;pointer-events:auto}
.slide.prev{transform:translateX(-40px)}
@media (prefers-reduced-motion: reduce){.slide{transition:none;transform:none}}
.deck-footer{position:fixed;bottom:18px;left:0;right:0;display:flex;align-items:center;
  justify-content:space-between;padding:0 28px;z-index:60}
.dots{display:flex;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--border);cursor:pointer}
.dot.on{background:var(--accent)}
.counter{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}

/* ---- ambient depth so the stage reads lit, not flat ---- */
.deck::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(241,90,36,.10), transparent 46%),
    radial-gradient(90% 80% at 6% 96%, rgba(241,90,36,.05), transparent 50%);
}

/* ---- fixed Reboot brand, every slide ---- */
/* position:fixed elements are commonly promoted to their own GPU compositing layer by
   the browser, which isolates mix-blend-mode from the real page background the same
   way .slide's transition does. Give it its own backdrop (it already shrink-wraps to
   the image, so this paints only behind the logo, nothing wider). */
.deck-brand{position:fixed;top:26px;left:28px;z-index:60;background:var(--bg)}
.deck-brand img{height:30px;width:auto;opacity:.9;mix-blend-mode:screen}

/* ---- signature: oversized outlined section index, top-right ---- */
.slide-index{
  position:absolute;top:2.4vh;right:6vw;z-index:0;
  font-size:clamp(6rem,15vw,15rem);font-weight:800;line-height:.8;
  letter-spacing:-.02em;color:transparent;
  -webkit-text-stroke:1.5px rgba(241,90,36,.16);
  user-select:none;pointer-events:none;
}

/* keep real content above the ambient + ghost-index layers */
.slide > .wrap{position:relative;z-index:1}
.wrap{width:100%;max-width:var(--max-w);margin:0 auto}
.wrap-wide{max-width:1360px}

/* ---- deck-scale type ---- */
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  color:var(--accent);margin-bottom:26px;
}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--accent);border-radius:2px}
.slide h1{
  font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.04;font-weight:800;
  letter-spacing:-.025em;max-width:16ch;
}
.slide .lead{
  font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.6;color:var(--muted);
  font-weight:400;max-width:60ch;margin-top:28px;
}
.slide .lead strong{color:var(--text);font-weight:600}
.footnote{font-size:.95rem;color:var(--muted);margin-top:22px}

/* ---- cover ---- */
.cover{align-items:flex-start}
/* .cover is inside .slide, which is promoted to its own compositing layer by its
   opacity/transform transition; that isolates mix-blend-mode from the real page
   background. Give the logo a same-layer backdrop (this wrapper) so the blend has
   something to blend against, sized to hug the logo so nothing else is affected. */
.cover-logo-wrap{display:block;width:fit-content;background:var(--bg);margin-bottom:40px}
.cover .cover-logo{height:clamp(64px,9vw,104px);width:auto;opacity:1;display:block;mix-blend-mode:screen}
.tag{
  display:inline-block;font-size:.82rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);
  border:1px solid rgba(241,90,36,.45);background:var(--accent-soft);
  padding:9px 16px;border-radius:999px;margin-bottom:30px;
}
.wordmark{
  font-size:clamp(3.4rem,9vw,7rem);font-weight:800;letter-spacing:-.03em;
  line-height:1;margin-bottom:22px;
}
.wordmark span{color:var(--accent)}
.cover h1{margin-bottom:22px}
.cover .lead{margin-top:0}

/* ---- cards ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:30px}
.card .card-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--accent);font-weight:600;margin-bottom:14px;display:block}
.card h3{font-size:clamp(1.15rem,1.6vw,1.5rem);font-weight:700;letter-spacing:-.01em;margin-bottom:12px}
.card p{color:var(--muted);font-size:1.02rem;line-height:1.6}
.card .card-num{font-size:.9rem;font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;margin-bottom:14px;display:block}

.cards{display:grid;gap:22px;margin-top:44px}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}

/* ---- chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:16px;margin-top:44px;max-width:1100px}
.chip{display:inline-flex;align-items:center;
  font-size:clamp(1.05rem,1.5vw,1.35rem);font-weight:600;
  padding:18px 26px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface);}
.chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);
  margin-right:15px;flex:none}

/* ---- screenshot frame ---- */
.two{display:grid;grid-template-columns:0.9fr 1.1fr;gap:6vw;align-items:center}
.two .copy h1{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.shot{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.shot::before{content:"";display:block;height:34px;background:var(--surface-2);
  border-bottom:1px solid var(--border);
  background-image:radial-gradient(circle,var(--bad) 5px,transparent 5px),
    radial-gradient(circle,var(--bad) 5px,transparent 5px),
    radial-gradient(circle,var(--bad) 5px,transparent 5px);
  background-position:18px center,40px center,62px center;background-repeat:no-repeat}
.shot img{width:100%;display:block}

/* ---- image-dominant pillar slides ----
   The screenshot is the point of these slides, so it carries the frame: a thin
   two-column copy band on top, then the shot centered and sized to fill the
   remaining stage height. There is no lightbox here (the deck IS the zoom), so
   the shot runs as large as the slide allows. */
.img-slide{height:100%;display:flex;flex-direction:column;justify-content:center}
.img-slide-head{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:end;margin-bottom:3.4vh}
.img-slide-head .eyebrow{margin-bottom:18px}
.img-slide-head h1{font-size:clamp(1.9rem,3.4vw,2.9rem);margin:0}
.img-slide-head .lead{margin:0;font-size:clamp(1.02rem,1.4vw,1.28rem);max-width:56ch}
.shot-center{text-align:center}
.shot-center .shot{display:inline-block;max-width:74%;vertical-align:top}
.shot-center .shot img{width:auto;max-width:100%;max-height:58vh}

/* ---- statement slides ---- */
.statement h1{font-size:clamp(3rem,8vw,6.4rem);max-width:18ch}
.statement .lead{font-size:clamp(1.25rem,2vw,1.7rem);max-width:52ch}

/* ---- next steps ---- */
.steps{list-style:none;display:grid;gap:18px;margin-top:44px;max-width:900px}
.steps li{display:flex;gap:22px;align-items:baseline;
  font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.5;
  border-bottom:1px solid var(--border);padding-bottom:18px}
.steps li .n{color:var(--accent);font-weight:800;font-variant-numeric:tabular-nums;flex:none}
.contact{margin-top:40px}
.contact .who{font-size:1.4rem;font-weight:700}
.contact .mail{color:var(--accent);font-size:1.2rem;margin-top:6px}

/* ---- matrix ---- */
.matrix-wrap{overflow:hidden;margin-top:40px;border:1px solid var(--border);border-radius:var(--radius);
  max-width:1360px}
.matrix{width:100%;border-collapse:collapse;font-size:clamp(.9rem,1.15vw,1.05rem)}
.matrix th,.matrix td{padding:18px 18px;border-bottom:1px solid var(--border);text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.matrix th:last-child,.matrix td:last-child{background:var(--accent-soft)}
.matrix thead th{color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.matrix thead th:last-child{color:var(--accent)}
.matrix tbody td:first-child{color:var(--text);font-weight:500}
.matrix tbody tr:last-child td{border-bottom:none}
.mark-ok{color:var(--ok);font-size:1.35em}
.mark-warn{color:var(--warn);font-size:1.35em}
.mark-bad{color:var(--bad);font-size:1.35em}

/* ---- responsive fallback (small screens / narrow projectors) ---- */
@media (max-width:900px){
  .cards-3,.cards-4{grid-template-columns:1fr}
  .two{grid-template-columns:1fr;gap:32px}
  .img-slide-head{grid-template-columns:1fr;gap:18px;margin-bottom:2.6vh}
  .shot-center .shot{max-width:100%}
  .shot-center .shot img{max-height:52vh}
  .slide-index{display:none}
}