/* ============================================================================
   BRUNEI-TEMPLATE — reusable presentation framework (Jejakin)
   ----------------------------------------------------------------------------
   HOW TO RE-THEME for a new topic (edit only the :root vars below):
     --ocean-* / --leaf-* / --lime*  → your palette (two accent families)
     --grad-deep                     → the slide BACKGROUND gradient
     --grad-brand                    → headings / accents / progress bar
     --sand / --coral                → secondary accents
     --font / --display / --mono     → fonts (also update the <link> in index.html)
   LOGO:    swap assets/logo.png (toolbar) + the cover logo in js/slides.js.
   EVENT:   change the event name in index.html (.tb-event) + <title>.
   CONTENT: edit js/slides.js (one array; t("EN","ID") for bilingual).
   Engine (js/deck.js) and the components below are reusable as-is:
     .s-title .s-close | .grid.g3/.g2 + .card | .split + ul.bul + .stats
     .flow/.fnode/.farrow (animated) | .loop .node | .journey .step
     .shots .shot (screenshots) | .proof .pimg (photo wall) | .band | .pills
     .plogo (logo-on-white chip) | image lightbox (click to enlarge)
   ============================================================================ */

/* ===========================================================================
   Mangroves: The Gateway to Blue Carbon and Smarter Seas
   Theme: Jejakin (mangrove green) × Ocean Week Brunei (ocean blue) gradient
   =========================================================================== */
:root{
  /* Ocean (Brunei) */
  --ocean-abyss:#011627;
  --ocean-deep:#012a4a;
  --ocean-navy:#023e8a;
  --ocean-blue:#0466c8;
  --ocean-teal:#0096c7;
  --ocean-cyan:#00b4d8;
  --ocean-foam:#48cae4;
  --ocean-mist:#90e0ef;
  /* Mangrove (Jejakin) */
  --leaf-deep:#04471c;
  --leaf:#00893f;
  --leaf-bright:#19b54a;
  --lime:#6fd424;
  --lime-glow:#8fe02a;
  /* Accent */
  --sand:#ffd166;
  --coral:#f4a261;
  /* Ink */
  --ink:#eaf6ff;
  --ink-dim:#a9c6d8;
  --ink-faint:#6f93a8;
  --line:rgba(144,224,239,.16);
  --card:rgba(7,28,46,.55);
  --card-2:rgba(4,18,32,.6);
  --shadow:0 24px 60px -24px rgba(0,0,0,.7);
  --grad-brand:linear-gradient(100deg,var(--ocean-cyan),var(--lime));
  --grad-deep:linear-gradient(160deg,var(--ocean-abyss) 0%,var(--ocean-deep) 42%,#013a54 78%,#024c3a 100%);
  --font:"Inter",system-ui,sans-serif;
  --display:"Sora","Inter",sans-serif;
  --mono:"JetBrains Mono",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--grad-deep);
  background-attachment:fixed;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Lang visibility */
[data-lang="en"] .id{display:none}
[data-lang="id"] .en{display:none}

/* ---------------------------------------------------------------- Toolbar */
#toolbar{
  position:fixed;top:0;left:0;right:0;height:56px;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;
  background:linear-gradient(180deg,rgba(1,22,39,.92),rgba(1,22,39,0));
  backdrop-filter:blur(4px);
}
.tb-left{display:flex;align-items:center;gap:14px}
.tb-logo{height:26px;width:auto}
/* white glow is baked into logo-jejakin.png (per-region: leaf softer, wordmark stronger) */
.tb-sep{width:1px;height:22px;background:var(--line)}
.tb-event{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--ocean-mist)}
.tb-right{display:flex;align-items:center;gap:8px}
.tb-btn{
  font-family:var(--display);font-weight:600;font-size:12.5px;color:var(--ink);
  background:rgba(72,202,228,.10);border:1px solid var(--line);border-radius:9px;
  padding:7px 12px;cursor:pointer;transition:.18s;display:flex;align-items:center;gap:5px;
}
.tb-btn:hover{background:rgba(111,212,36,.18);border-color:var(--lime);transform:translateY(-1px)}
.tb-btn .flag{font-size:13px}
#lang-toggle [id^="lang-label"]{opacity:.55;transition:.18s}
[data-lang="id"] #lang-label{opacity:1;color:var(--lime-glow)}
[data-lang="en"] #lang-label2{opacity:1;color:var(--ocean-foam)}

/* --------------------------------------------------------------- Progress */
#progress{position:fixed;top:56px;left:0;right:0;height:3px;z-index:55;background:rgba(255,255,255,.05)}
#progress-fill{height:100%;width:0;background:var(--grad-brand);box-shadow:0 0 12px var(--ocean-cyan);transition:width .4s cubic-bezier(.4,0,.2,1)}

/* ------------------------------------------------------------------- Deck */
#deck{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
.slide{
  position:absolute;width:min(98.5vw,1800px);height:min(calc(98.5vw*.5625),1012px);
  max-height:95vh;
  padding:42px 58px;
  display:none;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(18px) scale(.99);
  transition:opacity .5s ease,transform .5s ease;
}
.slide.active{display:flex;opacity:1;transform:none}
.slide.leaving{opacity:0;transform:translateY(-12px) scale(.99)}

/* Slide chrome */
.kicker{
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ocean-cyan);display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.kicker::before{content:"";width:30px;height:2px;background:var(--grad-brand)}
.slide h1{font-family:var(--display);font-weight:800;line-height:1.04;letter-spacing:-.02em;font-size:clamp(30px,4.2vw,58px)}
.slide h2{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.015em;font-size:clamp(26px,3.4vw,44px);margin-bottom:8px}
.slide h3{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.5vw,21px)}
.lead{font-size:clamp(16px,1.55vw,22px);line-height:1.55;color:var(--ink-dim);max-width:66ch}
.grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.leaf-text{color:var(--lime-glow)}.ocean-text{color:var(--ocean-foam)}

/* Bullets */
ul.bul{list-style:none;display:flex;flex-direction:column;gap:18px;margin-top:10px;flex:1 1 auto;justify-content:center}
ul.bul li{position:relative;padding-left:34px;font-size:clamp(15.5px,1.5vw,20px);line-height:1.5;color:var(--ink)}
ul.bul li::before{content:"";position:absolute;left:0;top:.4em;width:15px;height:15px;border-radius:4px;background:var(--grad-brand);box-shadow:0 0 10px rgba(0,180,216,.5)}
ul.bul li.ico-li{padding-left:46px}
ul.bul li .bico{position:absolute;left:0;top:-.05em;font-size:26px;line-height:1}
ul.bul li.ico-li::before{display:none}
ul.bul li b{color:#fff;font-weight:700}
ul.bul li span.sub{display:block;color:var(--ink-faint);font-size:.84em;margin-top:3px;font-weight:400;line-height:1.45}

/* Cards / grid */
.grid{display:grid;gap:20px;margin-top:14px;flex:1 1 auto;align-content:stretch}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 24px;
  box-shadow:var(--shadow);backdrop-filter:blur(6px);position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
.card::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad-brand);opacity:.85}
.card .ico{font-size:38px;margin-bottom:14px;display:block;line-height:1;animation:floaty 5.5s ease-in-out infinite}
.card:nth-child(2) .ico{animation-delay:.4s}.card:nth-child(3) .ico{animation-delay:.8s}.card:nth-child(4) .ico{animation-delay:1.2s}
.card h3{margin-bottom:9px;font-size:clamp(18px,1.7vw,23px)}
.card p{font-size:clamp(14px,1.3vw,17px);line-height:1.55;color:var(--ink-dim)}
.card .tag{align-self:flex-start;margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  display:inline-block;border-radius:6px;background:rgba(111,212,36,.14);color:var(--lime-glow);border:1px solid rgba(111,212,36,.3);padding:4px 9px}
.card .tag.blue{background:rgba(0,180,216,.14);color:var(--ocean-foam);border-color:rgba(0,180,216,.3)}
.card .tag.roadmap{background:rgba(244,162,97,.14);color:var(--coral);border-color:rgba(244,162,97,.3)}

/* Stat row */
.stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:6px}
.stat .num{font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,40px);line-height:1;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{font-size:12.5px;color:var(--ink-dim);margin-top:6px;max-width:20ch}

/* Pill row (product chips) */
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.pill{font-family:var(--display);font-weight:600;font-size:12.5px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink-dim)}
.pill.on{border-color:var(--lime);color:#fff;background:rgba(111,212,36,.12)}

/* Two-column split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;flex:1;min-height:0}
.split .visual{height:100%;min-height:0;display:flex;align-items:center;justify-content:center}

/* ------------------------------------------------------- Title slide (1) */
.s-title{justify-content:space-evenly;text-align:left}
.s-title .logo-big{height:56px;width:auto;align-self:flex-start;margin-bottom:4px}
.s-title h1{font-size:clamp(38px,5.8vw,88px);max-width:18ch}
.s-title .sub{margin-top:22px;font-size:clamp(17px,1.85vw,26px);color:var(--ocean-mist);max-width:62ch}
.s-title .meta{margin-top:6px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.s-title .chip{font-family:var(--display);font-weight:600;font-size:13px;padding:9px 15px;border-radius:10px;
  background:var(--card);border:1px solid var(--line);color:var(--ink)}
.s-title .chip b{color:var(--lime-glow)}
.cta-pdf{margin-top:26px}
.cta-pdf button{
  font-family:var(--display);font-weight:700;font-size:14px;color:#022;cursor:pointer;
  background:var(--grad-brand);border:none;border-radius:12px;padding:13px 22px;
  box-shadow:0 14px 30px -10px rgba(0,180,216,.6);transition:.2s;display:inline-flex;gap:8px;align-items:center;
}
.cta-pdf button:hover{transform:translateY(-2px);box-shadow:0 20px 40px -10px rgba(111,212,36,.6)}

/* ----------------------------------------------------- Speaker slide (2) */
.s-speaker .split{grid-template-columns:1fr 1.12fr;gap:48px}
.photo-frame{position:relative;width:100%;max-width:400px;aspect-ratio:3/4;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.photo-frame img{width:100%;height:100%;object-fit:cover}
.photo-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(1,22,39,.55))}
.s-speaker h2{font-size:clamp(30px,3.6vw,46px)}
.s-speaker h3{font-size:clamp(18px,1.8vw,24px)}
.bio-list{list-style:none;display:flex;flex-direction:column;gap:15px;margin-top:18px}
.bio-list li{font-size:clamp(15.5px,1.45vw,19px);line-height:1.5;color:var(--ink-dim);display:flex;gap:12px;align-items:baseline}
.bio-list li b{color:#fff}
.bio-list .em{color:var(--ocean-cyan);font-size:21px;width:24px;flex:none}

/* Architecture / loop diagram */
.loop{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;margin-top:4px;flex:1;min-height:0}
.loop .node{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;position:relative}
.loop .node .ico{font-size:24px}
.loop .node h3{margin:8px 0 4px}
.loop .node p{font-size:12.5px;color:var(--ink-dim);line-height:1.4}
.loop .node .role{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ocean-cyan);margin-bottom:2px}
.loop .arrow{position:absolute;right:-13px;top:50%;transform:translateY(-50%);z-index:3;color:var(--lime-glow);font-size:20px}
.loop .node:nth-child(1){border-top:3px solid var(--ocean-cyan)}
.loop .node:nth-child(2){border-top:3px solid var(--lime)}
.loop .node:nth-child(3){border-top:3px solid var(--sand)}

/* Adaptation map — coast → open ocean */
.adapt{display:flex;flex-direction:column;gap:11px;margin-top:4px;flex:1 1 auto;justify-content:center}
.adapt .row{display:grid;grid-template-columns:1.15fr 24px 1.5fr auto;gap:14px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 18px}
.adapt .now{font-size:15px;color:var(--ink-dim);line-height:1.3}
.adapt .now b{color:#fff;font-weight:600}
.adapt .now .ic{margin-right:7px;font-size:17px}
.adapt .to{color:var(--lime-glow);font-size:20px;text-align:center}
.adapt .ocean{font-size:15px;color:var(--ink);line-height:1.3}
.adapt .ocean b{color:var(--ocean-foam);font-weight:600}
.adapt .feas{font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:5px 10px;border-radius:6px;white-space:nowrap;text-align:center}
.feas.near{background:rgba(111,212,36,.15);color:var(--lime-glow);border:1px solid rgba(111,212,36,.3)}
.feas.mid{background:rgba(0,180,216,.15);color:var(--ocean-foam);border:1px solid rgba(0,180,216,.3)}
.feas.res{background:rgba(244,162,97,.15);color:var(--coral);border:1px solid rgba(244,162,97,.3)}

/* Restoration journey — 5-step horizontal timeline */
.journey{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:8px;flex:1;min-height:0;align-items:stretch}
.journey .step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 13px;display:flex;flex-direction:column;overflow:hidden}
.journey .step::before{content:"";position:absolute;inset:0 0 auto 0;height:3px}
.journey .step:nth-child(1)::before{background:var(--ocean-cyan)}
.journey .step:nth-child(2)::before{background:var(--ocean-foam)}
.journey .step:nth-child(3)::before{background:var(--leaf-bright)}
.journey .step:nth-child(4)::before{background:var(--lime)}
.journey .step:nth-child(5)::before{background:var(--sand)}
.journey .step .ph{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.journey .step .ico{font-size:23px;margin:6px 0 4px}
.journey .step h3{font-size:15px;line-height:1.12;margin-bottom:5px}
.journey .step p{font-size:11.5px;line-height:1.36;color:var(--ink-dim)}
.journey .step .arr{position:absolute;right:-8px;top:50%;transform:translateY(-50%);z-index:4;color:var(--lime-glow);font-size:16px;background:var(--ocean-deep);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.journey .step:last-child .arr{display:none}

/* Architecture diagram (layered) */
.arch{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.arch .band-row{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:10px 14px;text-align:center}
.arch .band-row .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px}
.arch .band-row .items{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.arch .chip{font-family:var(--display);font-size:12px;font-weight:600;padding:5px 11px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink)}
.arch .gw{background:linear-gradient(100deg,rgba(0,150,199,.16),rgba(111,212,36,.12));color:var(--ocean-foam);font-family:var(--mono);font-size:11.5px;padding:7px 0;border-radius:9px;border:1px solid var(--line);text-align:center}
.arch .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.arch .col{border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:var(--card-2)}
.arch .col h4{font-family:var(--display);font-size:13.5px;margin-bottom:5px}
.arch .col:nth-child(1){border-top:3px solid var(--ocean-cyan)} .arch .col:nth-child(1) h4{color:var(--ocean-foam)}
.arch .col:nth-child(2){border-top:3px solid var(--lime)} .arch .col:nth-child(2) h4{color:var(--lime-glow)}
.arch .col:nth-child(3){border-top:3px solid var(--sand)} .arch .col:nth-child(3) h4{color:var(--sand)}
.arch .col p{font-size:10.8px;line-height:1.4;color:var(--ink-dim);font-family:var(--mono)}
.arch .conn{text-align:center;color:var(--lime-glow);font-size:26px;line-height:1;margin:1px 0;
  text-shadow:0 0 14px rgba(143,224,42,.5);animation:floaty 3.2s ease-in-out infinite}
.conn{text-align:center;color:var(--lime-glow);font-size:17px;font-family:var(--mono);letter-spacing:.05em}

/* Compliance / standards grid */
.std{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:10px;flex:1 1 auto;align-content:center}
.std .box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.std .box h4{font-family:var(--display);font-size:16.5px;margin-bottom:11px;display:flex;align-items:center;gap:8px}
.std .box ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.std .box li{font-family:var(--mono);font-size:12.5px;padding:6px 11px;border-radius:7px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink-dim)}
.std .box li b{color:var(--lime-glow);font-weight:600}

/* Stack chips (under the hood) */
.stack{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.stack .s{font-family:var(--mono);font-size:12px;padding:8px 12px;border-radius:9px;background:rgba(4,18,32,.7);
  border:1px solid var(--line);color:var(--ocean-mist)}
.stack .s b{color:var(--lime-glow)}

/* Quote / highlight band */
.band{background:linear-gradient(100deg,rgba(0,150,199,.16),rgba(111,212,36,.12));border:1px solid var(--line);
  border-left:3px solid var(--lime);border-radius:14px;padding:18px 22px;margin-top:14px}
.band p{font-size:clamp(15px,1.35vw,18px);line-height:1.55;color:var(--ink)}
.band .src{font-size:11.5px;color:var(--ink-faint);margin-top:8px;font-family:var(--mono)}

/* Closing */
.s-close{justify-content:center;text-align:center;align-items:center}
.s-close h1{font-size:clamp(36px,5vw,68px)}
.s-close .contact{margin-top:24px;display:flex;gap:22px;flex-wrap:wrap;justify-content:center;font-size:14.5px;color:var(--ink-dim)}
.s-close .contact a{color:var(--ocean-foam);text-decoration:none}
.s-close .logo-big{height:34px;width:auto;align-self:center;margin-bottom:24px}

/* slide footer number watermark */
.snum{position:absolute;bottom:26px;right:34px;font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.sbrand{position:absolute;bottom:26px;left:72px;font-family:var(--display);font-size:12px;color:var(--ink-faint);letter-spacing:.04em}

/* decorative wave bg layer */
.wave-bg{position:fixed;inset:0;z-index:-1;opacity:.5;pointer-events:none;overflow:hidden}
.wave-bg svg{position:absolute;bottom:-10%;left:0;width:200%;height:60%}

/* --------------------------------------------------------------- Controls */
#controls{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:14px;background:rgba(1,22,39,.7);border:1px solid var(--line);
  border-radius:999px;padding:7px 9px;backdrop-filter:blur(6px)}
.ctrl-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:rgba(72,202,228,.08);
  color:var(--ink);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s;line-height:1}
.ctrl-btn:hover{background:var(--lime);color:#022;border-color:var(--lime)}
#counter{font-family:var(--mono);font-size:12.5px;color:var(--ink-dim);min-width:54px;text-align:center}

/* --------------------------------------------------------------- Overview */
#overview{position:fixed;inset:0;z-index:80;background:rgba(1,12,22,.95);overflow:auto;padding:80px 40px 40px}
#overview.hidden{display:none}
#overview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;max-width:1200px;margin:0 auto}
.ov-card{aspect-ratio:16/9;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;
  padding:14px;display:flex;flex-direction:column;justify-content:space-between;transition:.18s;overflow:hidden}
.ov-card:hover{border-color:var(--lime);transform:translateY(-3px)}
.ov-card .ov-n{font-family:var(--mono);font-size:11px;color:var(--ocean-cyan)}
.ov-card .ov-t{font-family:var(--display);font-weight:600;font-size:14px;line-height:1.2}

.hidden{display:none!important}

/* ----------------------------------------------------------- Responsive */
@media (max-width:820px){
  .slide{padding:40px 30px}
  .split,.s-speaker .split{grid-template-columns:1fr;gap:20px}
  .g3,.loop{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .photo-frame{max-width:200px;margin:0 auto}
  .sbrand{left:30px}
}

/* =========================================================================
   PRINT / PDF EXPORT — every slide on its own landscape page
   ========================================================================= */
@media print{
  @page{size:1280px 720px;margin:0}
  html,body{overflow:visible;height:auto;background:var(--grad-deep)}
  #toolbar,#controls,#progress,#overview,.cta-pdf,#overview-btn{display:none!important}
  #deck{position:static;display:block}
  .slide{
    position:relative!important;display:flex!important;opacity:1!important;transform:none!important;
    width:1280px;height:720px;max-height:none;page-break-after:always;break-after:page;
    box-shadow:none;
  }
  .slide.leaving{display:flex!important}
  .slide:last-child{page-break-after:auto;break-after:auto}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* animated reveals must be fully visible in PDF (no staggered opacity:0) */
  .fnode,.farrow,.fbranch,.fnote,.turn,.loop .node,.journey .step,.card,.card .ico,.s-story .big,.s-story .three .t{opacity:1!important;animation:none!important;transform:none!important}
  .flow-rail::after{display:none!important}
}

/* Carbon Space live demo (screenshots) */
.demo-flow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--ink-dim);margin:4px 0 14px}
.demo-flow b{color:#fff}
.demo-flow .ar{color:var(--lime-glow);font-size:14px}
.phones{display:flex;gap:26px;justify-content:center;flex:1;min-height:0;align-items:center}
.phone{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:32%}
.phone img{height:min(62vh,600px);width:auto;border-radius:16px;border:1px solid var(--line);box-shadow:0 18px 50px -18px rgba(0,0,0,.78)}
.phone .cap{font-size:11.5px;color:var(--ink-dim);text-align:center;line-height:1.35;max-width:24ch}
.phone .cap b{color:var(--ocean-foam)}

/* =========================================================================
   End-to-end ANIMATED workflow diagram (.flow)
   ========================================================================= */
@keyframes fIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes dotRun{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(111,212,36,0)}50%{box-shadow:0 0 22px -2px rgba(111,212,36,.45)}}
.flow{display:flex;flex-direction:column;gap:16px;flex:1;min-height:0;justify-content:center;margin-top:6px}
.flow-rail{position:relative;display:flex;align-items:stretch;justify-content:center;gap:0}
.flow-rail::before{content:"";position:absolute;left:5%;right:5%;top:50%;height:2px;
  background:linear-gradient(90deg,var(--ocean-cyan),var(--lime));opacity:.35;transform:translateY(-50%)}
.flow-rail::after{content:"";position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  background:var(--lime-glow);box-shadow:0 0 16px var(--lime-glow);transform:translateY(-50%);
  animation:dotRun 5.5s linear infinite;animation-delay:2.4s}
.fnode{flex:1;max-width:215px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 13px;position:relative;z-index:2;display:flex;flex-direction:column;
  opacity:0;animation:fIn .55s forwards;animation-delay:calc(var(--i,0)*.14s)}
.fnode .role{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ocean-cyan);margin-bottom:3px}
.fnode .ic{font-size:23px;line-height:1;margin-bottom:5px}
.fnode h4{font-family:var(--display);font-weight:700;font-size:14.5px;margin-bottom:3px}
.fnode p{font-size:11px;line-height:1.34;color:var(--ink-dim)}
.fnode:nth-child(odd){border-top:3px solid var(--ocean-cyan)}
.fnode.green{border-top:3px solid var(--lime)} .fnode.green h4{color:var(--lime-glow)}
.fnode.sand{border-top:3px solid var(--sand)} .fnode.sand h4{color:var(--sand)}
.farrow{display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;
  color:var(--lime-glow);font-size:19px;padding:0 5px;min-width:54px;
  opacity:0;animation:fIn .4s forwards;animation-delay:calc(var(--i,0)*.14s)}
.farrow span{font-family:var(--mono);font-size:8.5px;letter-spacing:.02em;color:var(--ink-faint);text-align:center;line-height:1.2;margin-bottom:2px}
.fbranch{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  opacity:0;animation:fIn .55s forwards;animation-delay:calc(var(--i,0)*.14s)}
.bcard{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:11px 14px;border-left:3px solid var(--sand);font-size:12px;line-height:1.4;color:var(--ink-dim)}
.bcard b{color:#fff;font-weight:600}.bcard .h{display:block;font-family:var(--display);font-weight:700;font-size:12.5px;color:var(--sand);margin-bottom:3px}
.fnote{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--ink-dim);justify-content:center;flex-wrap:wrap;
  opacity:0;animation:fIn .55s forwards;animation-delay:calc(var(--i,0)*.14s)}
.fnote b{color:var(--lime-glow)}
.fnote .soc{background:rgba(244,162,97,.14);border:1px solid rgba(244,162,97,.3);color:var(--coral);border-radius:8px;padding:4px 10px;font-family:var(--mono);font-size:10.5px}

/* =========================================================================
   Product screenshot grids (.shots / .shot)
   ========================================================================= */
.shots{display:grid;gap:14px;flex:1;min-height:0;margin-top:8px;align-content:center}
.shots.s3{grid-template-columns:repeat(3,1fr)}
.shots.s2{grid-template-columns:repeat(2,1fr)}
.shot{display:flex;flex-direction:column;gap:7px;min-height:0}
/* landscape screenshot frame — show the whole app screen (no vertical crop) */
.shot .frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 16px 40px -18px rgba(0,0,0,.75);flex:none;aspect-ratio:16/10;display:flex}
.shot .frame img{width:100%;height:100%;object-fit:contain;background:#fff}
.shot.cover .frame img{object-fit:cover;object-position:top center}
.shot .cap{font-size:11.8px;color:var(--ink-dim);line-height:1.34}
.shot .cap b{color:var(--ocean-foam);font-weight:600}
.shot .cap .t{font-family:var(--display);font-weight:700;color:#fff;font-size:13px}

/* =========================================================================
   Real-world proof — mangrove planting photo wall (.proof)
   ========================================================================= */
.proof{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;flex:1;min-height:0;margin-top:10px}
.pimg{position:relative;border-radius:15px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 46px -20px rgba(0,0,0,.75)}
.pimg img{width:100%;height:100%;object-fit:cover;display:block}
.pimg.hero{grid-row:span 2}
.pimg .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 14px 11px;font-size:11.5px;line-height:1.34;color:#fff;
  background:linear-gradient(transparent,rgba(1,16,28,.9))}
.pimg .cap b{color:var(--lime-glow)}

/* =========================================================================
   Story bookend (.s-story) — metaphor open / recall close
   ========================================================================= */
.s-story{justify-content:space-evenly}
.s-story .big{font-family:var(--display);font-weight:800;line-height:1.14;letter-spacing:-.015em;
  font-size:clamp(32px,4.4vw,60px);max-width:21ch}
.s-story .big .grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.s-story .sub{margin-top:4px;font-size:clamp(18px,1.85vw,27px);color:var(--ocean-mist);max-width:64ch;line-height:1.55}
.s-story .three{display:flex;gap:16px;flex-wrap:wrap;margin-top:2px}
.s-story .three .t{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);
  border-radius:13px;padding:15px 22px;font-family:var(--display);font-weight:600;font-size:clamp(15px,1.4vw,19px)}
.s-story .three .t .e{font-size:24px}
.s-story .three .t.eco{border-left:3px solid var(--lime)}
.s-story .three .t.env{border-left:3px solid var(--ocean-cyan)}
.s-story .three .t.soc{border-left:3px solid var(--coral)}

/* =========================================================================
   Carbon Space — app legend + per-phone app tag
   ========================================================================= */
.apps-legend{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 2px}
.apps-legend .app{font-family:var(--display);font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--line)}
.apps-legend .app b{font-weight:700}
.apps-legend .app.jj{background:rgba(111,212,36,.12);color:var(--lime-glow);border-color:rgba(111,212,36,.32)}
.apps-legend .app.pt{background:rgba(0,180,216,.10);color:var(--ocean-foam);border-color:rgba(0,180,216,.28)}
.ptag{position:absolute;top:7px;left:50%;transform:translateX(-50%);z-index:3;font-family:var(--display);font-weight:700;
  font-size:10px;letter-spacing:.02em;padding:3px 11px;border-radius:999px;white-space:nowrap;box-shadow:0 5px 14px rgba(0,0,0,.45)}
.ptag.livin{background:#15356b;color:#cfe4ff;border:1px solid #2f5fa0}
.ptag.gojek{background:#0a7d2c;color:#d8ffe1;border:1px solid #1aa345}

/* =========================================================================
   Fill + animate the loop / journey cards (no more empty stretch)
   ========================================================================= */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-3deg)}}
.loop,.journey{align-content:center}                 /* compact rows, vertically centred */
.loop{position:relative}
.loop::before{content:"";position:absolute;left:7%;right:7%;top:50%;height:2px;z-index:0;
  background:linear-gradient(90deg,var(--ocean-cyan),var(--lime));opacity:.22;transform:translateY(-50%)}
.loop::after{content:"";position:absolute;top:50%;width:10px;height:10px;border-radius:50%;z-index:0;
  background:var(--lime-glow);box-shadow:0 0 14px var(--lime-glow);transform:translateY(-50%);
  animation:dotRun 5s linear infinite;animation-delay:1.4s}
.loop .node{z-index:1}
/* turn each card icon into a big animated illustration (fills sparse cards, no HTML edits) */
.loop .node,.journey .step{justify-content:flex-start}
.loop .node .ico,.journey .step .ico{font-size:42px;display:inline-block;margin:2px 0 6px;
  filter:drop-shadow(0 6px 16px rgba(0,180,216,.35));animation:floaty 5.5s ease-in-out infinite}
.loop .node:nth-child(2) .ico{animation-delay:.4s}.loop .node:nth-child(3) .ico{animation-delay:.8s}
.journey .step:nth-child(even) .ico{animation-delay:.5s}
/* faint giant echo of the icon area to fill empty space */
.loop .node::after,.journey .step::after{content:"";position:absolute;right:-20px;bottom:-30px;width:120px;height:120px;z-index:0;
  border-radius:50%;background:radial-gradient(circle,rgba(0,180,216,.10),transparent 70%);pointer-events:none;animation:floaty 7s ease-in-out infinite}
.journey .step>*,.loop .node>*{position:relative;z-index:1}
/* staggered entrance */
.loop .node,.journey .step{opacity:0;animation:fIn .55s ease forwards}
.loop .node:nth-child(1){animation-delay:.10s}.loop .node:nth-child(2){animation-delay:.30s}.loop .node:nth-child(3){animation-delay:.50s}
.journey .step:nth-child(1){animation-delay:.06s}.journey .step:nth-child(2){animation-delay:.20s}
.journey .step:nth-child(3){animation-delay:.34s}.journey .step:nth-child(4){animation-delay:.48s}.journey .step:nth-child(5){animation-delay:.62s}

/* compact 7-step lifecycle flow + region label */
.lc-label{display:inline-block;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.03em;
  padding:3px 11px;border-radius:999px;background:rgba(255,209,102,.14);color:var(--sand);border:1px solid rgba(255,209,102,.32)}
.flow.lc{gap:12px}
.flow.lc .fnode{max-width:none;padding:16px 13px}
.flow.lc .fnode .role{font-size:10px;margin-bottom:5px}
.flow.lc .fnode .ic{font-size:32px;margin-bottom:9px;animation:floaty 5s ease-in-out infinite}
.flow.lc .fnode:nth-child(odd) .ic{animation-delay:.5s}
.flow.lc .fnode h4{font-size:15px;margin-bottom:5px}
.flow.lc .fnode p{font-size:12.5px;line-height:1.42}
.flow.lc .farrow{min-width:30px;font-size:20px;padding:0 2px}
.flow.lc .fnote{font-size:12.5px;gap:12px;margin-top:4px}
/* 2-row serpentine lifecycle — bigger boxes, bends from row 1 down into row 2 */
.flow.lc2{gap:12px}
.flow.lc2 .flow-rail.rev{flex-direction:row-reverse}
.flow.lc2 .turn{align-self:flex-end;margin-right:11%;color:var(--lime-glow);font-size:30px;line-height:.7;
  text-shadow:0 0 14px rgba(143,224,42,.55);opacity:0;animation:fIn .4s forwards;animation-delay:calc(var(--i,0)*.14s)}

/* =========================================================================
   Image lightbox (click any deck image to enlarge)
   ========================================================================= */
.slide .phone img,.slide .shot .frame img,.slide .pimg img,.slide .photo-frame img{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(1,10,18,.93);backdrop-filter:blur(7px);padding:36px 76px;animation:fIn .2s ease}
.lightbox.hidden{display:none}
.lb-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:13px;max-width:90vw;max-height:90vh}
.lb-stage img{max-width:90vw;max-height:82vh;width:auto;height:auto;border-radius:12px;border:1px solid var(--line);
  box-shadow:0 30px 90px -20px rgba(0,0,0,.85);background:#fff}
.lb-stage figcaption{font-size:14px;color:var(--ink-dim);text-align:center;max-width:74ch;line-height:1.45}
.lb-stage figcaption:empty{display:none}
.lb-close{position:absolute;top:18px;right:24px;width:46px;height:46px;border-radius:50%;cursor:pointer;z-index:2;
  background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff;font-size:27px;line-height:1;transition:.16s}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;cursor:pointer;z-index:2;
  background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff;font-size:32px;line-height:1;transition:.16s}
.lb-prev{left:22px}.lb-next{right:22px}
.lb-close:hover,.lb-nav:hover{background:var(--lime);color:#022;border-color:var(--lime);transform:translateY(-1px)}
.lb-nav:hover{transform:translateY(-50%) scale(1.06)}
.lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:13px;color:var(--ink-dim)}
@media print{.lightbox{display:none!important}}

/* Carbon Space gallery — compact phone grid (click to enlarge) */
.phone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 26px;flex:1;min-height:0;
  align-content:center;justify-items:center;margin-top:6px}
.phone-grid .phone{max-width:100%;gap:7px}
.phone-grid .phone img{height:min(33vh,330px);cursor:zoom-in}
.phone-grid .phone .cap{font-size:11px;max-width:30ch}

/* Carbon IQ public-case — big landscape dashboard fills the slide */
.iqpub{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:14px;margin-top:12px}
.iqpub img{flex:1 1 auto;min-height:0;width:100%;object-fit:contain;object-position:center;border-radius:14px;
  border:1px solid var(--line);background:#fff;box-shadow:0 18px 50px -20px rgba(0,0,0,.78);cursor:zoom-in}

/* official product logos (Carbon IQ / Atlas / Space) on a light chip for the dark deck */
.plogo{height:40px;width:auto;background:#fff;padding:8px 14px;border-radius:11px;align-self:flex-start;
  box-shadow:0 5px 16px rgba(0,0,0,.28);display:block}
.card .plogo{margin-bottom:14px;height:38px}
.plogo-inline{height:46px;width:auto;background:#fff;padding:9px 15px;border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.3);vertical-align:middle}

/* ============================================================================
   Presenter / clicker mode — fullscreen, blank screen, 2-window console
   ============================================================================ */
/* clean fullscreen on this (audience) window: hide chrome */
body.is-fullscreen #toolbar,
body.is-fullscreen #controls,
body.role-audience #toolbar,
body.role-audience #controls,
body.role-audience #progress{display:none!important}
body.role-audience{cursor:default}

/* blank / black screen (clicker "B") */
.black-screen{position:fixed;inset:0;z-index:1200;background:#000;cursor:pointer}
.black-screen.hidden{display:none}

/* fullscreen prompt shown on the projector window */
#fs-hint{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;
  background:rgba(2,12,22,.92);cursor:pointer;backdrop-filter:blur(3px)}
#fs-hint .fsh-box{text-align:center;font-family:var(--display);color:#fff;font-size:64px;line-height:1.1}
#fs-hint .fsh-box b{display:block;font-size:22px;margin-top:14px}
#fs-hint .fsh-box span{display:block;font-size:14px;color:var(--ink-dim);font-weight:400;margin-top:6px}

/* presenter console: dock the deck up and show a control panel below it */
body.role-console #deck{transform:scale(.66);transform-origin:top center}
#presenter-panel{position:fixed;left:0;right:0;bottom:0;z-index:1000;
  background:linear-gradient(180deg,rgba(4,18,32,.92),rgba(4,18,32,.99));
  border-top:1px solid rgba(111,212,36,.35);box-shadow:0 -16px 40px -12px rgba(0,0,0,.6);
  padding:12px 22px 16px;color:#fff;font-family:var(--body)}
#presenter-panel.hidden{display:none}
.pp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.pp-tag{font-family:var(--display);font-weight:700;letter-spacing:.12em;font-size:11px;color:var(--lime)}
.pp-timer{font-family:var(--mono,monospace);font-size:20px;font-weight:600;color:#fff}
.pp-now{font-size:15px;margin:2px 0}
.pp-now b{font-family:var(--mono,monospace);color:var(--ocean-2,#48cae4)}
.pp-next{font-size:14px;color:var(--ink-dim);margin:2px 0 6px}
.pp-lbl{display:inline-block;font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.1em;
  color:var(--ink-faint);min-width:42px}
.pp-notes{font-size:13px;color:var(--ink-dim);line-height:1.4;max-height:54px;overflow:auto;margin-bottom:8px}
.pp-ctrls{display:flex;gap:10px;align-items:center}
.pp-b{font-family:var(--display);font-weight:600;font-size:14px;padding:9px 16px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff}
.pp-b:hover{background:rgba(111,212,36,.18);border-color:var(--lime)}
.pp-b-main{background:var(--lime);color:#04121d;border-color:var(--lime);flex:1;font-size:16px}
.pp-b-main:hover{filter:brightness(1.05)}
.pp-b-end{margin-left:auto;background:rgba(255,90,90,.14);border-color:rgba(255,90,90,.4)}

/* keep all of this out of the printed PDF */
@media print{#presenter-panel,#fs-hint,.black-screen,#present-btn,#presenter-btn{display:none!important}
  body.role-console #deck{transform:none!important}}

/* ============================================================================
   LIGHT THEME — Jejakin (jejakin.com) · white background + leaf-green accents
   Appended override: redefines the :root palette (keeping every var NAME so all
   components keep working) and patches the few hard-coded dark surfaces / white
   texts that assumed a dark deck. Later rules win — this overrides the block above.
   ============================================================================ */
:root{
  /* "ocean" family → repurposed as a teal accent + dark inks for text on white */
  --ocean-abyss:#06281a; --ocean-deep:#0a3a24; --ocean-navy:#0b6e8f;
  --ocean-blue:#0883b0; --ocean-teal:#0096c7; --ocean-cyan:#0496ad;
  --ocean-foam:#0481a6; --ocean-mist:#3a7d63;
  /* Mangrove / Jejakin green (darkened where used as text on white) */
  --leaf-deep:#04471c; --leaf:#00893f; --leaf-bright:#13a544;
  --lime:#46b800; --lime-glow:#3a9e00;
  /* Secondary accents (readable on white) */
  --sand:#c4880f; --coral:#e2674a;
  /* Ink — dark text on light paper */
  --ink:#0e2a1c; --ink-dim:#445b50; --ink-faint:#849a8e;
  --line:rgba(10,60,36,.13);
  --card:#ffffff; --card-2:#f5faf6;
  --shadow:0 18px 44px -22px rgba(8,40,24,.28);
  --grad-brand:linear-gradient(100deg,#00893f,#0096c7);
  --grad-deep:linear-gradient(160deg,#ffffff 0%,#f1f8f3 55%,#eaf4ee 100%);
}

/* surfaces that were hard-coded dark */
#toolbar{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,0));
  border-bottom:1px solid var(--line)}
.tb-event{color:var(--leaf)}
.tb-btn{background:rgba(0,137,63,.07);color:var(--ink)}
.tb-btn:hover{background:rgba(0,137,63,.14);border-color:var(--leaf)}
#progress{background:rgba(10,60,36,.07)}
#controls{background:rgba(255,255,255,.9);border-color:var(--line);
  box-shadow:0 10px 26px -14px rgba(8,40,24,.3)}
.ctrl-btn{background:#fff;color:var(--ink)}
.ctrl-btn:hover{background:var(--leaf);color:#fff;border-color:var(--leaf)}
#counter{color:var(--ink-dim)}
#overview{background:rgba(244,248,244,.97)}
.pill,.arch .chip{background:#f1f6f2}
.stack .s{background:#eef5f0;color:#2c5a42;border-color:var(--line)}
.stack .s b{color:var(--leaf)}

/* white-on-dark texts that now sit on light surfaces */
ul.bul li b{color:#08331e}
.bcard b,.demo-flow b,.shot .cap .t{color:var(--ink)}
.journey .step .arr{background:#fff;color:var(--leaf)}

/* accent text helpers */
.leaf-text{color:var(--leaf)} .ocean-text{color:var(--ocean-foam)}

/* highlight band on light */
.band{background:linear-gradient(100deg,rgba(0,150,199,.10),rgba(0,137,63,.10));
  border-left-color:var(--leaf)}
.band p{color:var(--ink)} .band .src{color:var(--ink-faint)}

/* title / closing tweaks */
.s-title .chip{background:#fff} .s-title .sub{color:var(--ink-dim)}
.cta-pdf button{color:#fff}
.s-close .contact a{color:var(--ocean-foam)}

/* product logo on a deep-green chip so the colored mark + light wordmark read on white */
.plogo,.plogo-inline{background:#0c2418;box-shadow:0 8px 20px -10px rgba(8,40,24,.5)}

/* presenter console → light */
#presenter-panel{background:linear-gradient(180deg,#ffffff,#f4f8f4);
  border-top:1px solid var(--line);color:var(--ink)}
.pp-timer,.pp-now b,.pp-tag{color:var(--leaf)}
.pp-next,.pp-notes{color:var(--ink-dim)}
.pp-b{background:#eef5f0;border-color:var(--line);color:var(--ink)}
.pp-b:hover{background:rgba(0,137,63,.14);border-color:var(--leaf)}
.pp-b-main{background:var(--leaf);color:#fff;border-color:var(--leaf)}

/* softer decorative wave on white */
.wave-bg{opacity:.7}

/* card-grid slides (products / internal AI): size cards to content and centre the
   row vertically, so a 3-card row doesn't stretch into a tall empty void on white */
.grid.g3{align-content:center}
.grid.g3 .card{min-height:340px;justify-content:flex-start}
.grid.g3 .card .tag{margin-top:18px}
.grid.g3 .card .ico{margin-bottom:10px}

/* official jejakin.com product icon (Carbon IQ / Atlas / Space) — colour mark on white */
.card .picon{height:56px;width:auto;display:block;margin-bottom:14px;
  filter:drop-shadow(0 8px 16px rgba(8,40,24,.18));animation:floaty 5.5s ease-in-out infinite}
.card:nth-child(2) .picon{animation-delay:.4s}
.card:nth-child(3) .picon{animation-delay:.8s}
.grid.g3 .card h3{margin-bottom:9px;font-size:clamp(18px,1.7vw,23px)}

/* ============================================================================
   MOTION LAYER — gentle, purposeful build-in per slide (helps the explanation).
   Slides are display:none until active, so each animation replays on slide-enter.
   The @media print reset at the very bottom forces everything visible in the PDF.
   ============================================================================ */
@keyframes revealX{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes revealUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* headings settle in */
.slide .kicker{opacity:0;animation:revealX .5s ease forwards}
.slide h1,.slide h2{opacity:0;animation:revealUp .55s ease forwards;animation-delay:.06s}

/* bullets walk in one by one */
ul.bul li{opacity:0;animation:revealX .5s ease forwards}
ul.bul li:nth-child(1){animation-delay:.20s} ul.bul li:nth-child(2){animation-delay:.34s}
ul.bul li:nth-child(3){animation-delay:.48s} ul.bul li:nth-child(4){animation-delay:.62s}
ul.bul li:nth-child(5){animation-delay:.76s}

/* product / concept cards fade-up, staggered */
.grid.g3 .card{opacity:0;animation:revealUp .55s ease forwards}
.grid.g3 .card:nth-child(1){animation-delay:.16s}
.grid.g3 .card:nth-child(2){animation-delay:.30s}
.grid.g3 .card:nth-child(3){animation-delay:.44s}

/* screenshots fade-up, staggered */
.shots .shot{opacity:0;animation:revealUp .55s ease forwards}
.shots.s2 .shot:nth-child(1),.shots.s3 .shot:nth-child(1){animation-delay:.18s}
.shots.s2 .shot:nth-child(2),.shots.s3 .shot:nth-child(2){animation-delay:.34s}
.shots.s3 .shot:nth-child(3){animation-delay:.50s}
/* the framed screenshot inside a .split reveals from the right */
.split .shot{opacity:0;animation:revealUp .6s ease forwards;animation-delay:.5s}

/* stats, band and the little process line build in last */
.stats .stat{opacity:0;animation:revealUp .5s ease forwards}
.stats .stat:nth-child(1){animation-delay:.3s} .stats .stat:nth-child(2){animation-delay:.44s}
.split .band,.demo-flow{opacity:0;animation:revealUp .6s ease forwards;animation-delay:.6s}
/* animate the → arrows in the process line */
@keyframes arrowNudge{0%,100%{transform:translateX(0);opacity:.6}50%{transform:translateX(4px);opacity:1}}
.demo-flow .ar{display:inline-block;animation:arrowNudge 1.6s ease-in-out infinite}

/* keep ALL of the above out of the printed PDF (every slide fully visible) */
@media print{
  .slide .kicker,.slide h1,.slide h2,ul.bul li,.grid .card,.shots .shot,.split .shot,
  .stats .stat,.split .band,.demo-flow,.card .picon{
    opacity:1!important;transform:none!important;animation:none!important}
  /* Chrome's print viewport is ~816px wide, which trips the max-width:820 mobile
     stack and collapses the grids to one column. Re-assert the deck layout. */
  .grid.g3{grid-template-columns:repeat(3,1fr)!important}
  .grid.g2,.std{grid-template-columns:repeat(2,1fr)!important}
  .split{grid-template-columns:1.05fr .95fr!important;gap:40px!important}
  .loop{grid-template-columns:repeat(3,1fr)!important}
  /* single merged slide must keep its 2 product columns in print (Chrome's ~816px
     print viewport otherwise trips the mobile 1-column fallback) */
  .msingle{grid-template-columns:1.6fr 1fr!important}
  .mitems.two{grid-template-columns:1fr 1fr!important}
}

/* =========================================================================
   APPENDIX — per-feature AI detail. Screenshot + AI-feature callout labels
   (.callshot / .cs-tag) and an appendix divider (.apdx).
   ========================================================================= */
.callshot{position:relative;align-self:center;width:100%}
.callshot .frame{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 18px 48px -18px rgba(0,0,0,.8);aspect-ratio:16/10;display:flex;width:100%}
.callshot .frame img{width:100%;height:100%;object-fit:contain;background:#fff;cursor:zoom-in}
/* a floating "this is the AI doing X" label pinned over the screenshot */
.cs-tag{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:7px;max-width:62%;
  font-family:var(--display);font-weight:700;font-size:11.5px;line-height:1.18;
  padding:6px 11px;border-radius:999px;
  background:rgba(3,20,34,.92);border:1px solid rgba(0,180,216,.5);color:var(--ocean-foam);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.75);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cs-tag .e{font-size:14px;line-height:1}
.cs-tag .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;opacity:.8;margin-right:1px}
.cs-tag.green{border-color:rgba(111,212,36,.55);color:var(--lime-glow)}
.cs-tag.sand{border-color:rgba(244,162,97,.55);color:var(--coral)}
/* leader dot that "points" into the screenshot */
.cs-tag::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;
  background:var(--lime-glow);box-shadow:0 0 12px var(--lime-glow)}
.cs-tag.green::after{background:var(--lime-glow)}
.cs-tag.sand::after{background:var(--coral);box-shadow:0 0 12px var(--coral)}
.cs-tag.tl{top:11px;left:11px}.cs-tag.tr{top:11px;right:11px}
.cs-tag.bl{bottom:11px;left:11px}.cs-tag.br{bottom:11px;right:11px}
.cs-tag.tl::after,.cs-tag.bl::after{right:-15px;top:50%;transform:translateY(-50%)}
.cs-tag.tr::after,.cs-tag.br::after{left:-15px;top:50%;transform:translateY(-50%)}
/* in/out one-liner under the title (reuses the .demo-flow look) */
.iostrip{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--ink-dim);margin:2px 0 12px}
.iostrip .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ocean-cyan)}
.iostrip b{color:#fff;font-weight:600}.iostrip .ar{color:var(--lime-glow);font-size:14px}
.iostrip .mdl{background:rgba(111,212,36,.12);border:1px solid rgba(111,212,36,.3);color:var(--lime-glow);
  border-radius:8px;padding:3px 9px;font-family:var(--mono);font-size:10px}
/* subtle technical-credibility chips (model / method / infra names) */
.techrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:-2px 0 12px}
.techrow .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.tchip{font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;padding:3px 9px;border-radius:6px;
  background:rgba(255,255,255,.045);border:1px solid var(--line);color:var(--ink-dim);white-space:nowrap}
.tchip.live{border-color:rgba(111,212,36,.4);color:var(--lime-glow)}
.tchip.dev{border-color:rgba(0,180,216,.4);color:var(--ocean-foam)}
.tchip.rnd{border-color:rgba(244,162,97,.4);color:var(--coral)}

/* compact per-product AI-feature grid (.fgrid / .fcard) */
.fgrid{display:grid;gap:13px;flex:1;min-height:0;align-content:center;margin-top:12px}
.fgrid.c3{grid-template-columns:repeat(3,1fr)}
.fgrid.c2{grid-template-columns:repeat(2,1fr)}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:0;
  display:flex;flex-direction:row;position:relative;overflow:hidden;min-height:0}
.fcard::after{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--grad-brand);opacity:.9;z-index:2}
.fcard .fthumb{flex:none;width:106px;background:#fff;border-right:1px solid var(--line);overflow:hidden}
.fcard .fthumb img{width:100%;height:100%;object-fit:cover;display:block}
.fcard .fbody{display:flex;flex-direction:column;gap:5px;padding:11px 13px;min-width:0;flex:1}
.fcard .fh{display:flex;align-items:center;gap:9px}
.fcard .fe{font-size:23px;line-height:1}
.fcard h4{font-family:var(--display);font-weight:700;font-size:14.5px;line-height:1.16}
.fcard p{font-size:11.8px;line-height:1.42;color:var(--ink-dim);flex:1}
.fcard p b{color:#0f2a2a;font-weight:700}
.fcard .ctags{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.fcard .ctags .tchip{font-size:9px;padding:2px 7px}
.fcard .pp{font-size:11px;line-height:1.35;color:var(--ink-faint);margin-top:1px}
.fcard .pp b{color:var(--ocean-cyan);font-weight:700}

/* prominent product header for per-product slides (.phead) */
.phead{display:flex;align-items:center;gap:16px;margin:2px 0 6px;padding-bottom:13px;
  border-bottom:2px solid var(--line);position:relative}
.phead::after{content:"";position:absolute;left:0;bottom:-2px;width:118px;height:4px;border-radius:3px;background:var(--grad-brand)}
.phead .plogo-img{height:42px;width:auto;flex:none}
.phead .pname{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,44px);line-height:1;letter-spacing:-.015em;color:#0f2a2a}
.phead .psub{font-size:13.5px;color:var(--ink-dim);margin-top:6px;line-height:1.3}
.phead .pbadge{margin-left:auto;align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;padding:7px 13px;border-radius:999px;border:1px solid var(--line);
  color:var(--ink-faint);white-space:nowrap}
.phead.space .pbadge{border-color:rgba(244,162,97,.45);color:var(--coral)}
.phead.atlas .pbadge{border-color:rgba(111,212,36,.5);color:#5a9b16}
.phead.iq .pbadge{border-color:rgba(0,180,216,.45);color:var(--ocean-cyan)}
@media print{.fgrid,.fcard,.phead{opacity:1!important;transform:none!important;animation:none!important}}

/* single merged slide — all AI features of two products on one slide (.msingle) */
.msingle{display:grid;grid-template-columns:1.6fr 1fr;gap:30px;flex:1;min-height:0;align-content:center;margin-top:4px}
.mcol{display:flex;flex-direction:column;min-height:0;justify-content:flex-start}
.mhead{display:flex;align-items:center;gap:12px;padding-bottom:9px;margin-bottom:13px;border-bottom:2px solid var(--line);position:relative}
.mhead::after{content:"";position:absolute;left:0;bottom:-2px;width:90px;height:3px;border-radius:3px;background:var(--grad-brand)}
.mhead img{height:32px;width:auto}
.mhead .mn{font-family:var(--display);font-weight:800;font-size:23px;line-height:1;color:#0f2a2a}
.mhead .ms{font-size:11.5px;color:var(--ink-dim);margin-top:4px}
.mitems{display:grid;gap:11px 20px;align-content:start}
.mitems.two{grid-template-columns:1fr 1fr}
.mi{display:flex;gap:9px;align-items:flex-start}
.mi .e{font-size:17px;line-height:1.05;flex:none}
.mi b{color:#0f2a2a;font-weight:700;font-size:12.8px;display:block;margin-bottom:2px;line-height:1.12}
.mi .d{color:var(--ink-dim);font-size:11px;line-height:1.28}
@media print{.slide{overflow:hidden}.msingle,.mcol,.mhead,.mi{opacity:1!important;transform:none!important;animation:none!important}}
@media (max-width:820px){.msingle{grid-template-columns:1fr;gap:16px}.mitems.two{grid-template-columns:1fr}}

/* appendix divider + section dot */
.apdx{display:flex;flex-direction:column;gap:14px;flex:1;justify-content:center;max-width:none}
.apdx .grp{display:grid;grid-template-columns:auto 1fr;gap:14px 18px;align-items:start}
.apdx .pn{font-family:var(--display);font-weight:800;font-size:15px;padding:7px 14px;border-radius:11px;
  background:var(--card);border:1px solid var(--line);white-space:nowrap;align-self:start}
.apdx .pn.iq{border-left:3px solid var(--ocean-cyan);color:var(--ocean-foam)}
.apdx .pn.atlas{border-left:3px solid var(--lime);color:var(--lime-glow)}
.apdx .pn.space{border-left:3px solid var(--sand);color:var(--sand)}
.apdx .items{display:flex;gap:8px;flex-wrap:wrap;padding-top:5px}
.apdx .items span{font-size:12.5px;color:var(--ink-dim);background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.apdx .mrv{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink-faint);margin-left:6px}

@media print{
  .cs-tag,.callshot .frame img,.callshot,.iostrip,.apdx,.apdx .pn,.apdx .items span{
    opacity:1!important;transform:none!important;animation:none!important}
  .cs-tag.tl::after,.cs-tag.tr::after,.cs-tag.bl::after,.cs-tag.br::after{transform:translateY(-50%)!important}
}

/* ============================================================================
   JAGA BUMI THEME — Telkomsel Jaga Bumi × Jejakin (light eco-tech)
   Appended LAST so it wins. Warms the paper toward sage, keeps forest-green
   structure, and introduces the Telkomsel-red accent as the 10% "pop".
   Everything reuses the existing light-theme var NAMES so components keep working.
   ============================================================================ */
:root{
  --tel-red:#e11b2a;            /* Telkomsel red */
  --forest:#0a5c2e;             /* poster forest green */
  /* warmer sage paper + a brighter Jejakin-green brand gradient */
  --grad-deep:linear-gradient(160deg,#fbfdfb 0%,#eef6ef 52%,#e6f1e8 100%);
  --grad-brand:linear-gradient(100deg,#0a7a37,#13a24a);
}

/* accent helpers */
.red-text{color:var(--tel-red)}
.forest-text{color:var(--forest)}
.kicker.red{color:var(--tel-red)}

/* cover brand pills (Telkomsel Jaga Bumi × Jejakin) */
.brandpills{display:flex;gap:10px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}
.bpill{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;padding:7px 16px;border-radius:999px}
.bpill.tel{background:rgba(225,27,42,.09);color:var(--tel-red);border:1px solid rgba(225,27,42,.30)}
.bpill.jjk{background:rgba(0,137,63,.10);color:var(--leaf);border:1px solid rgba(0,137,63,.32)}

/* the big red accuracy stat (100%) — Telkomsel-red pop on a white card */
.bigstat{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
  padding:34px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
.bigstat .n{font-family:var(--display);font-weight:800;font-size:clamp(58px,8vw,104px);line-height:.9;
  color:var(--tel-red);letter-spacing:-.02em}
.bigstat .l{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--forest);margin-top:14px;text-align:center}

/* impact number tiles (movement achievements) */
.impact{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;flex:1;min-height:0;align-content:center;margin-top:6px}
.itile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 20px;
  box-shadow:var(--shadow);border-top:3px solid var(--leaf)}
.itile:nth-child(3n+2){border-top-color:var(--tel-red)}
.itile:nth-child(3n){border-top-color:var(--ocean-foam)}
.itile .n{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,44px);line-height:1;color:var(--forest)}
.itile:nth-child(3n+2) .n{color:var(--tel-red)}
.itile .l{font-size:12.5px;color:var(--ink-dim);margin-top:9px;line-height:1.35}
.impact .itile{opacity:0;animation:revealUp .5s ease forwards}
.impact .itile:nth-child(1){animation-delay:.10s}.impact .itile:nth-child(2){animation-delay:.20s}
.impact .itile:nth-child(3){animation-delay:.30s}.impact .itile:nth-child(4){animation-delay:.40s}
.impact .itile:nth-child(5){animation-delay:.50s}.impact .itile:nth-child(6){animation-delay:.60s}
@media (max-width:820px){.impact{grid-template-columns:1fr 1fr}}
@media print{.impact{grid-template-columns:repeat(3,1fr)!important}.impact .itile{opacity:1!important;animation:none!important}}

/* ---- Jaga Bumi: co-brand logo lockup (cover + closing) ---- */
.cobrand{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:22px;flex-wrap:wrap}
.cobrand img{height:44px;width:auto;display:block}
.cobrand .div{width:1px;height:34px;background:var(--line)}
.s-close .cobrand{margin:0 0 18px}
/* speaker bio list (self-intro slide) */
.bio-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.bio-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--ink-dim)}
.bio-list li b{color:var(--ink)}
.bio-list .em{font-size:19px;line-height:1.2;flex:none}
.bio-contact{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:20px}
.bio-contact a,.bio-contact span{font-family:var(--mono);font-size:12.5px;padding:6px 13px;border-radius:999px;
  background:var(--card-2);border:1px solid var(--line);color:var(--forest);text-decoration:none}
.bio-contact a:hover{border-color:var(--leaf);color:var(--leaf)}
/* framed illustrative image inside a split (transparency slide) */
.illus{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow);
  width:100%;max-height:74vh;display:flex;align-items:center;justify-content:center}
.illus img{width:100%;height:100%;object-fit:cover;display:block}

/* Jaga Bumi: caption product-name lead-in on its own line */
.shot .cap .t{display:block;margin-bottom:3px}

/* ============================================================================
   AI-101 education slides — inline-SVG illustrations (self-contained)
   ============================================================================ */
.svgbox{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:18px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  width:100%;height:100%;min-height:0}
.svgbox svg{width:100%;height:auto;max-height:58vh;display:block}
.svgcap{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);text-align:center}
/* brain ↔ neural-net comparison */
.brain-cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;width:100%}
.brain-cmp figure{display:flex;flex-direction:column;align-items:center;gap:9px;margin:0}
.brain-cmp figure svg{max-height:34vh}
.brain-cmp figcaption{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--forest);text-align:center}
.brain-cmp .mim{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tel-red);text-align:center;line-height:1.35}
.brain-cmp .mim .ar{font-size:26px;color:var(--leaf);display:block;line-height:1}
/* neural network */
svg.nn .edges line{stroke:#c3e2d1;stroke-width:1}
svg.nn circle{stroke:#fff;stroke-width:1.5}
svg.nn .nin{fill:var(--ocean-foam)} svg.nn .nhid{fill:var(--leaf)} svg.nn .nout{fill:var(--tel-red)}
/* human neuron */
svg.neuron path{stroke:var(--forest);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
svg.neuron circle.soma{fill:var(--leaf);stroke:none}
svg.neuron circle.nuc{fill:var(--forest);opacity:.4;stroke:none}
svg.neuron rect.myelin{fill:#c9ead6;stroke:none}
/* AI ⊃ ML ⊃ LLM nested badge */
.nest{display:inline-grid;place-items:center;padding:14px;border:2px solid var(--ocean-foam);border-radius:16px;position:relative}
.nest .l1{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;position:absolute;top:5px;left:12px;color:var(--ocean-foam)}
.nest2{display:inline-grid;place-items:center;padding:14px;border:2px solid var(--leaf);border-radius:13px;position:relative;margin-top:10px}
.nest2 .l2{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;position:absolute;top:5px;left:11px;color:var(--leaf)}
.nest3{padding:11px 18px;border:2px solid var(--tel-red);border-radius:11px;font-family:var(--display);font-weight:800;color:var(--tel-red);font-size:15px}
/* traditional use-case chips */
.ucases{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.ucases span{font-size:12px;color:var(--ink-dim);background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.ucases span b{color:var(--forest);font-weight:600}
@media print{svg.nn .edges line{stroke:#c3e2d1!important}}

/* ---- Jaga Bumi fixes: g2 cards fit content (no empty stretch); timeline centered + visible arrows ---- */
.grid.g2{align-content:center}
.grid.g2 .card{min-height:0;justify-content:flex-start}
/* timeline: 4 phases → 4 columns so it's centred (no empty 5th column) */
.journey{grid-template-columns:repeat(4,1fr)}
/* bigger, clearly-visible arrows between phases */
.journey .step .arr{right:-14px;width:30px;height:30px;font-size:24px;background:var(--leaf);color:#fff;
  box-shadow:0 4px 12px -3px rgba(8,40,24,.5);font-weight:700}
@media print{.journey{grid-template-columns:repeat(4,1fr)!important}}

/* ---- 3D illustration box (contain, on white) ---- */
.illus3d{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;padding:16px;width:100%;height:100%;min-height:0}
.illus3d img{width:100%;height:100%;max-height:52vh;object-fit:contain;display:block}
/* data-source caption */
.datasrc{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--ink-faint);text-align:center;margin-top:16px}
/* ---- timeline arrow fix: not clipped, centred in a wider gap ---- */
.journey{gap:40px}
.journey .step{overflow:visible}
.journey .step .arr{right:-35px;width:30px;height:30px;font-size:21px;z-index:8}
@media print{.journey .step{overflow:visible!important}}