/* ============================================================
   DIGILEARNING — pitch deck design system (bold editorial)
   Shared by /pitch/ (flagship) and /pitch/year-ahead/
   1280x720 fixed slides. Present-mode on web, ?export for capture.
   ============================================================ */
:root{
  --ink:#0D0A0F; --ink2:#120D18; --card:#161019; --line:#2A2233;
  --wh:#F4EFF7; --mu:#C9C0D6; --mu2:#A99EBB;
  --bl:#3B9BF0; --pk:#ED5FD3; --gr:#78C043; --go:#FFC40D;
  --disp:'Fredoka',system-ui,sans-serif;
  --body:'Outfit',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#000;color:var(--wh);font-family:var(--body);-webkit-font-smoothing:antialiased}

/* ---------- stage / slides ---------- */
.deck{width:1280px;height:720px;position:relative;overflow:hidden;background:var(--ink)}
.slide{position:absolute;inset:0;width:1280px;height:720px;overflow:hidden;
  background:var(--ink);padding:82px 96px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:scale(1.02);
  transition:opacity .6s ease,transform .6s ease,visibility .6s}
.slide.on{opacity:1;visibility:visible;transform:none}
.slide.prev{transform:scale(.98)}

/* ---------- present-mode scaling ---------- */
#scaler{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 700px at 50% -10%,#170f22,#050308 70%)}
#stagewrap{transform-origin:center center}

/* ---------- chrome (present only) ---------- */
.chrome{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;
  gap:18px;padding:16px 26px;font-family:var(--body)}
.chrome .bar{flex:1;height:3px;background:#241d30;border-radius:3px;overflow:hidden}
.chrome .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--bl),var(--pk));transition:width .5s}
.chrome .pg{font-size:12px;letter-spacing:2px;color:var(--mu2);font-variant-numeric:tabular-nums;white-space:nowrap}
.chrome .wm{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.3px}
.chrome .wm b{font-weight:700}.chrome .wm .i1{color:var(--bl)}.chrome .wm .i2{color:var(--pk)}.chrome .wm .i3{color:var(--gr)}
.navhint{position:fixed;top:18px;right:22px;z-index:40;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--mu2);opacity:.7}
.arrow{position:fixed;top:50%;transform:translateY(-50%);z-index:40;width:48px;height:48px;
  border-radius:50%;border:1px solid var(--line);background:rgba(20,14,25,.6);color:var(--wh);
  font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);transition:.2s;opacity:.55}
.arrow:hover{opacity:1;border-color:var(--bl)}
.arrow.l{left:24px}.arrow.r{right:24px}

/* ---------- typography ---------- */
.eyebrow{font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:3.5px;
  text-transform:uppercase;color:var(--mu2);display:flex;align-items:center;gap:14px}
.eyebrow .dots{display:inline-flex;gap:5px}
.eyebrow .dots i{width:7px;height:7px;border-radius:50%;display:block}
.eyebrow .dots i:nth-child(1){background:var(--bl)}
.eyebrow .dots i:nth-child(2){background:var(--pk)}
.eyebrow .dots i:nth-child(3){background:var(--gr)}
h1.display{font-family:var(--disp);font-weight:700;line-height:.98;letter-spacing:-1.5px;
  font-size:96px;text-wrap:balance}
h2.headline{font-family:var(--disp);font-weight:700;line-height:1.0;letter-spacing:-1px;font-size:62px;text-wrap:balance}
h3.sub{font-family:var(--disp);font-weight:600;font-size:30px;letter-spacing:-.4px;line-height:1.1}
.lead{font-size:23px;line-height:1.5;color:var(--mu);max-width:60ch;font-weight:300}
.lead strong{color:var(--wh);font-weight:600}
.tint-bl{color:var(--bl)}.tint-pk{color:var(--pk)}.tint-gr{color:var(--gr)}.tint-go{color:var(--go)}
.spacer{flex:1}

/* ---------- wordmark ---------- */
.wordmark{font-family:var(--disp);font-weight:700;letter-spacing:-.8px;font-size:26px;color:var(--wh)}
.wordmark .i1{color:var(--bl)}.wordmark .i2{color:var(--pk)}.wordmark .i3{color:var(--gr)}

/* ---------- full-bleed image slides ---------- */
.slide.bleed{padding:0}
.slide .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.slide .scrim{position:absolute;inset:0;z-index:1}
.scrim.bottom{background:linear-gradient(180deg,rgba(8,5,12,.15) 0%,rgba(8,5,12,.35) 45%,rgba(8,5,12,.92) 100%)}
.scrim.left{background:linear-gradient(90deg,rgba(8,5,12,.94) 0%,rgba(8,5,12,.72) 42%,rgba(8,5,12,.15) 100%)}
.scrim.tint{background:linear-gradient(120deg,rgba(59,155,240,.22),rgba(237,95,211,.10) 60%,transparent)}
.scrim.top{background:linear-gradient(180deg,rgba(8,5,12,.72),rgba(8,5,12,.2) 26%,transparent 46%)}
.slide .over{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;padding:82px 96px}

/* ---------- stat grid ---------- */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 44px;margin-top:26px}
.stat .n{font-family:var(--disp);font-weight:700;font-size:76px;line-height:1;letter-spacing:-2px;
  background:linear-gradient(120deg,#fff,var(--bl) 60%,var(--pk));-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.stat .k{font-size:16px;color:var(--mu2);margin-top:10px;letter-spacing:.2px;line-height:1.3}
.statgrid.two{grid-template-columns:repeat(2,1fr)}
.statgrid.four{grid-template-columns:repeat(4,1fr);gap:26px}
.statgrid.four .n{font-size:60px}

/* ---------- feature list ---------- */
.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;flex:1;align-items:center}
.flist{display:grid;gap:16px;margin-top:8px}
.flist .row{display:flex;gap:14px;align-items:flex-start}
.flist .row .d{width:10px;height:10px;border-radius:50%;margin-top:9px;flex:none;background:var(--bl)}
.flist .row:nth-child(2n) .d{background:var(--pk)}
.flist .row:nth-child(3n) .d{background:var(--gr)}
.flist .row .t{font-family:var(--disp);font-weight:600;font-size:21px}
.flist .row .x{font-size:16px;color:var(--mu2);line-height:1.35}
.imgcard{border-radius:22px;overflow:hidden;height:520px;border:1px solid var(--line);position:relative}
.imgcard img{width:100%;height:100%;object-fit:cover}
.imgcard .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;font-size:14px;color:var(--wh);
  background:linear-gradient(180deg,transparent,rgba(8,5,12,.85));z-index:2}

/* ---------- montage ---------- */
.montage{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:14px;flex:1;min-height:0;margin-top:26px}
.montage .m{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.montage .m img{width:100%;height:100%;object-fit:cover}
.montage .m .lbl{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;font-size:13px;font-weight:600;
  color:#fff;background:linear-gradient(180deg,transparent,rgba(8,5,12,.86));z-index:2;letter-spacing:.3px}
.montage .m.wide{grid-column:span 2}.montage .m.tall{grid-row:span 2}

/* ---------- quotes / case studies ---------- */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:30px}
.case{border:1px solid var(--line);border-radius:22px;padding:38px 40px;background:
  linear-gradient(180deg,rgba(59,155,240,.06),transparent);position:relative;overflow:hidden}
.case .mark{font-family:var(--disp);font-weight:700;font-size:64px;line-height:.5;color:var(--bl);opacity:.5}
.case:nth-child(2) .mark{color:var(--pk)}
.case blockquote{font-family:var(--disp);font-weight:600;font-size:27px;line-height:1.2;margin:14px 0 20px;letter-spacing:-.3px}
.case .who{font-size:16px;color:var(--mu)}
.case .who b{color:var(--wh);font-family:var(--disp)}
.case .arc{font-size:14px;color:var(--mu2);margin-top:4px}

/* ---------- logo wall ---------- */
.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;flex:1;align-content:center;margin-top:14px}
.wall .lw{height:74px;border:1px solid var(--line);border-radius:14px;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:14px 16px}
.wall .lw img{max-width:100%;max-height:100%;object-fit:contain}

/* ---------- CTA menu ---------- */
.ways{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:32px}
.way{border:1px solid var(--line);border-top:2px solid var(--bl);border-radius:18px;padding:26px 22px;
  background:linear-gradient(180deg,rgba(59,155,240,.08),#0f0b14 55%)}
.way:nth-child(2){border-top-color:var(--pk);background:linear-gradient(180deg,rgba(237,95,211,.08),#0f0b14 55%)}
.way:nth-child(3){border-top-color:var(--gr);background:linear-gradient(180deg,rgba(120,192,67,.08),#0f0b14 55%)}
.way:nth-child(4){border-top-color:var(--go);background:linear-gradient(180deg,rgba(255,196,13,.08),#0f0b14 55%)}
.way:nth-child(5){border-top-color:var(--pk);background:linear-gradient(180deg,rgba(237,95,211,.08),#0f0b14 55%)}
.way .ic{font-size:26px}
.way .t{font-family:var(--disp);font-weight:700;font-size:22px;margin-top:12px}
.way .x{font-size:14px;color:var(--mu2);margin-top:8px;line-height:1.35}
.contact{display:flex;gap:34px;margin-top:30px;font-size:18px;color:var(--mu)}
.contact b{color:var(--wh)}

/* ---------- pills / tags ---------- */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pill{border:1px solid var(--line);border-radius:30px;padding:9px 18px;font-size:15px;color:var(--mu);
  font-weight:500;background:rgba(255,255,255,.02)}
.pill b{color:var(--wh);font-weight:600}
.award{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(120,192,67,.4);
  background:rgba(120,192,67,.1);color:var(--gr);border-radius:30px;padding:9px 18px;font-weight:700;
  font-size:14px;letter-spacing:.5px;text-transform:uppercase}

/* slide number badge */
.sn{position:absolute;top:40px;right:52px;z-index:3;font-family:var(--disp);font-weight:600;
  font-size:15px;color:var(--mu2);letter-spacing:1px;font-variant-numeric:tabular-nums}
.slide .foot{position:absolute;left:96px;bottom:44px;z-index:3;font-size:13px;letter-spacing:2px;
  text-transform:uppercase;color:var(--mu2)}

/* ---------- EXPORT MODE: stack all slides for capture ---------- */
body.export{background:var(--ink)}
body.export #scaler{position:static;display:block;background:var(--ink)}
body.export #stagewrap{transform:none!important}
body.export .deck{height:auto}
body.export .slide{position:relative;inset:auto;opacity:1;visibility:visible;transform:none;
  display:flex;page-break-after:always}
body.export .slide.bleed{display:block}
body.export .chrome,body.export .arrow,body.export .navhint{display:none}

/* ============================================================
   LIGHT THEME — content slides (non-photo). Lifts the deck with
   an editorial dark/light rhythm. Applied to every .slide that
   isn't a full-bleed photo slide.
   ============================================================ */
.slide.light{background:linear-gradient(180deg,#FBF9FE 0%,#F1EAFA 100%);color:var(--ink)}
.slide.light::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(720px 420px at 92% -8%,rgba(59,155,240,.10),transparent 60%),
             radial-gradient(620px 400px at -6% 108%,rgba(237,95,211,.08),transparent 60%)}
.slide.light > *{position:relative;z-index:1}
.slide.light .eyebrow{color:#8478A0}
.slide.light .eyebrow .dots i{opacity:1}
.slide.light h1.display,.slide.light h2.headline,.slide.light h3.sub{color:var(--ink)}
.slide.light .lead{color:#524A63}
.slide.light .lead strong{color:var(--ink)}
.slide.light .sn{color:#BEB2D2}
.slide.light .foot{color:#8478A0}
.slide.light .stat .n{background:linear-gradient(120deg,var(--bl),var(--pk));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.slide.light .stat .k{color:#6B6280}
.slide.light .flist .row .t{color:var(--ink)}
.slide.light .flist .row .x{color:#6B6280}
.slide.light .imgcard{border-color:#E7E0F1;box-shadow:0 20px 50px -22px rgba(28,10,45,.35)}
.slide.light .pill{border-color:#E0D7EE;color:#524A63;background:#fff}
.slide.light .pill b{color:var(--ink)}
.slide.light .award{background:rgba(120,192,67,.14);border-color:rgba(120,192,67,.5);color:#4f8a1e}
.slide.light .case{border-color:#E7E0F1;background:linear-gradient(180deg,rgba(59,155,240,.06),#fff);
  box-shadow:0 16px 44px -26px rgba(28,10,45,.4)}
.slide.light .case blockquote{color:var(--ink)}
.slide.light .case .who{color:#524A63}.slide.light .case .who b{color:var(--ink)}
.slide.light .case .arc{color:#8478A0}
.slide.light .way{background:#fff;border-color:#E7E0F1;border-top-width:2px;box-shadow:0 12px 34px -22px rgba(28,10,45,.4)}
.slide.light .way:nth-child(1){border-top-color:var(--bl)}
.slide.light .way:nth-child(2){border-top-color:var(--pk)}
.slide.light .way:nth-child(3){border-top-color:var(--gr)}
.slide.light .way:nth-child(4){border-top-color:var(--go)}
.slide.light .way:nth-child(5){border-top-color:var(--pk)}
.slide.light .way .t{color:var(--ink)}.slide.light .way .x{color:#6B6280}
.slide.light .contact{color:#524A63}.slide.light .contact b{color:var(--ink)}
.slide.light .wall .lw{border-color:#E7E0F1;box-shadow:0 6px 18px -8px rgba(28,10,45,.22)}
.slide.light .montage .m{border-color:#E7E0F1}

/* ---------- responsive note: JS scales #stagewrap in present mode ---------- */
@media (max-width:520px){ .navhint{display:none} }