/* Responsive KPI (Finance Use Case) */
.finance-kpi-col {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 auto;
  align-self: stretch;
  box-sizing: border-box;
}
.finance-kpi-col .t-label {
  color: #5B8FF9;
  font-size: 15px;
  margin-bottom: 8px;
  text-align: center;
}
.finance-kpi-col .kpi-card {
  background: rgba(255,255,255,.05);
  border-radius: 14px;
  padding: 16px 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(46,108,246,0.07);
  width: 100%;
  box-sizing: border-box;
  border-top: 3px solid transparent;
}
.finance-kpi-col .kpi-card.kpi-green  { border-top-color: #4ade80; background: rgba(74,222,128,.09); }
.finance-kpi-col .kpi-card.kpi-blue   { border-top-color: #2E6CF6; background: rgba(46,108,246,.12); }
.finance-kpi-col .kpi-card.kpi-orange { border-top-color: #fb923c; background: rgba(251,146,60,.09); }
.kpi-icon     { font-size: 26px; margin-bottom: 4px; }
.kpi-name     { font-size: 12px; color: #A8BFDC; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; font-weight: 700; }
.kpi-value    { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; color: #F5F7FA; line-height: 1.1; margin-bottom: 5px; }
.kpi-val-unit { font-size: 0.5em; font-weight: 400; color: #A8BFDC; }
.kpi-trend    { font-size: 12px; font-weight: 600; }
.trend-good    { color: #4ade80; }
.trend-neutral { color: #60a5fa; }
.trend-warn    { color: #fb923c; }
@media (max-width: 900px) {
  .finance-kpi-col {
    width: 100%;
    max-width: 100%;
    gap: 16px;
    margin: 18px auto 8px auto;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
  }
  .finance-kpi-col .kpi-card {
    font-size: 17px;
    padding: 18px 0;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(46,108,246,0.10);
    width: 100%;
    box-sizing: border-box;
  }
  .finance-kpi-col .t-label {
    font-size: 16px;
    margin-bottom: 10px;
  }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      width: 100%; height: 100%;
      overflow: hidden;
      background: #0B1F3A;
      font-family: 'Prompt', sans-serif;
      color: #F5F7FA;
    }

    /* ── Slide engine ─────────────────── */
    #deck { position: relative; width: 100vw; height: 100vh; overflow: hidden; }

    /* ── Keyframe animations ───────────────── */
    @keyframes enterRight {
      from { opacity: 0; transform: translateX(70px) scale(.98); }
      to   { opacity: 1; transform: translateX(0)    scale(1);   }
    }
    @keyframes enterLeft {
      from { opacity: 0; transform: translateX(-70px) scale(.98); }
      to   { opacity: 1; transform: translateX(0)     scale(1);   }
    }
    @keyframes exitLeft {
      from { opacity: 1; transform: translateX(0)     scale(1);   }
      to   { opacity: 0; transform: translateX(-70px) scale(.98); }
    }
    @keyframes exitRight {
      from { opacity: 1; transform: translateX(0)    scale(1);   }
      to   { opacity: 0; transform: translateX(70px) scale(.98); }
    }

    .slide {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      justify-content: center; align-items: center;
      padding: 60px 80px;
      opacity: 0; pointer-events: none;
      overflow: hidden;
    }
    .slide.active     { opacity: 1; pointer-events: all; }
    .slide.anim-in-r  { animation: enterRight .52s cubic-bezier(.22,.68,0,1.2) forwards; pointer-events: all; }
    .slide.anim-in-l  { animation: enterLeft  .52s cubic-bezier(.22,.68,0,1.2) forwards; pointer-events: all; }
    .slide.anim-out-l { animation: exitLeft   .38s ease forwards; pointer-events: none; }
    .slide.anim-out-r { animation: exitRight  .38s ease forwards; pointer-events: none; }

    .inner { width: 100%; max-width: 1400px; position: relative; z-index: 1; }

    /* ── Typography ──────────────────── */
    .t-hero   { font-size: clamp(42px, 5.2vw, 68px); font-weight: 800; line-height: 1.18; }
    .t-title  { font-size: clamp(34px, 4vw, 54px);   font-weight: 700; line-height: 1.22; }
    .t-sub    { font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; line-height: 1.3;  }
    .t-body   { font-size: clamp(20px, 2vw, 28px);   font-weight: 400; line-height: 1.7;  }
    .t-label  { font-size: clamp(14px, 1.4vw, 20px); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
    .t-kpi    { font-size: clamp(64px, 8vw, 96px);   font-weight: 800; line-height: 1;    }
    .t-small  { font-size: clamp(16px, 1.5vw, 22px); font-weight: 400; }

    /* ── Accent bar ──────────────────── */
    .bar { width: 72px; height: 5px; background: #2E6CF6; border-radius: 4px; margin-bottom: 26px; }
    .bar.center { margin-left: auto; margin-right: auto; }

    /* ── Cards ───────────────────────── */
    .card {
      background: rgba(19,43,80,.85);
      border: 1px solid rgba(46,108,246,.22);
      border-radius: 16px; padding: 32px 36px;
    }
    .card-left { border-left: 5px solid #2E6CF6; }
    .card-success { border-left: 5px solid #22c55e; }
    .card-warn    { border-left: 5px solid #f59e0b; }
    .card-danger  { border-left: 5px solid #ef4444; }

    /* ── Slide backgrounds ────────────── */
    .bg-1 { background: radial-gradient(circle at 30% 70%, #11264B 0%, #08172D 100%); }
    .bg-3  { background: linear-gradient(135deg, #061428 0%, #0B1F3A 45%, #132B50 100%); }
    .bg-2  { background: linear-gradient(160deg, #0B1F3A 0%, #132B50 60%, #1C3A6A 100%); }
    .bg-4  { background: #0B1F3A; }
    .bg-5  { background: linear-gradient(180deg, #0B1F3A 0%, #132B50 100%); }
    .bg-6  { background: #0B1F3A; }
    .bg-7  { background: linear-gradient(135deg, #0B1F3A 0%, #132B50 100%); }
    .bg-8  { background: #0B1F3A; }
    .bg-9  { background: linear-gradient(180deg, #0B1F3A 0%, #0e2540 100%); }
    .bg-10  { background: #0B1F3A; }
    .bg-11 { background: linear-gradient(135deg, #0B1F3A 0%, #132B50 100%); }
    .bg-12 { background: linear-gradient(135deg, #0B1F3A 0%, #132B50 100%); }
    .bg-13 { background: linear-gradient(135deg, #061428 0%, #1C3A6A 100%); }

    /* ── Progress bar ─────────────────── */
    #progress {
      position: fixed; top: 0; left: 0;
      height: 4px; background: #2E6CF6;
      transition: width .45s ease; z-index: 999;
      border-radius: 0 4px 4px 0;
      box-shadow: 0 0 10px rgba(46,108,246,.7);
    }

    /* ── HUD nav ─────────────────────── */
    #hud {
      position: fixed; bottom: 26px; left: 50%;
      transform: translateX(-50%);
      display: flex; align-items: center; gap: 18px; z-index: 999;
    }
    .hbtn {
      width: 16px; height: 16px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(19,43,80,.9); color: #A8BFDC;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; font-size: 18px; transition: all .2s;
      backdrop-filter: blur(10px);
    }
    .hbtn:hover  { background: #2E6CF6; border-color: #2E6CF6; color: #fff; }
    .hbtn:disabled { opacity: .28; cursor: not-allowed; }
    #ctr {
      min-width: 66px; text-align: center; font-size: 12px; color: #A8BFDC;
      background: rgba(19,43,80,.9); padding: 5px 14px;
      border-radius: 99px; border: 1px solid rgba(255,255,255,.1);
      backdrop-filter: blur(10px);
    }

    /* ── Hint top-right ───────────────── */
    #hint {
      position: fixed; top: 18px; right: 26px;
      font-size: 13px; color: rgba(168,191,220,.5); z-index: 999;
      letter-spacing: .05em;
    }

    /* ── Touch tap zones (left/right edges) ─── */
    .touch-zone {
      display: none;
      position: fixed; top: 0; bottom: 80px;
      width: 20%; z-index: 900;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .touch-zone-left  { left: 0; }
    .touch-zone-right { right: 0; }
    .touch-zone:active {
      background: radial-gradient(ellipse at center, rgba(46,108,246,.08) 0%, transparent 70%);
    }

    /* ── Mobile/Tablet responsive ─────────── */
    @media (max-width: 1024px) {
      .slide { padding: 20px 15px; justify-content: flex-start; overflow-y: auto; overflow-x: hidden; }
      .inner { max-width: 100%; padding-bottom: 120px !important; } /* Extended padding for tablets/mobile */
      .touch-zone { display: block; }
      #hint { display: none; }

      /* Larger HUD for touch */
      #hud { bottom: 10px; gap: 10px; }
      .hbtn {
        width: 44px; height: 44px;
        font-size: 20px; border-radius: 50%;
      }
      #ctr {
        font-size: 13px; padding: 8px 16px;
      }

      /* Grid layouts → stack on touch devices */
      .kgrid { grid-template-columns: 1fr; gap: 20px; }
      .arch { flex-direction: column; gap: 4px; }
      .abox { padding: 22px 16px; }
      .aarrow { display: none; }
      
      .profile-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
      .profile-portrait-wrap { max-width: 320px; margin: 0 auto; }
      .profile-grid-sub { grid-template-columns: 1fr !important; }
      
      .qr-container { width: 300px !important; height: 300px !important; margin: 0 auto 30px; }
      
      .r-grid { grid-template-columns: 1fr !important; text-align: center; }
      .r-flex-stack { flex-direction: column !important; }
      .hide-mobile { display: none !important; }
      
      /* Scale down typography on tablets/mobile */
      .t-hero { font-size: clamp(34px, 5vw, 42px) !important; }
      .t-title { font-size: clamp(28px, 4vw, 34px) !important; }
      .t-sub { font-size: clamp(20px, 2.5vw, 24px) !important; }
      .t-body { font-size: clamp(17px, 2vw, 20px) !important; }
      .sys-pill { padding: 8px 16px !important; font-size: clamp(14px, 1.5vw, 16px) !important; }
    }

    @media (max-width: 480px) {
      .slide { padding: 16px 12px; }
      .kgrid { grid-template-columns: 1fr !important; }
      .profile-portrait-wrap { max-width: 240px; }
    }

    @media (pointer: coarse) {
      /* Touch device – always show tap zones */
      .touch-zone { display: block; }
    }

    /* ── Role badge (Remote / Viewer) ──── */
    .role-badge {
      position: fixed; top: 16px; left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      padding: 8px 22px;
      border-radius: 99px;
      font-size: 14px; font-weight: 600;
      letter-spacing: .06em;
      backdrop-filter: blur(12px);
      animation: badgePulse 2s ease infinite;
      pointer-events: none;
    }
    .role-badge.remote {
      background: rgba(46,108,246,.2);
      border: 1px solid rgba(46,108,246,.5);
      color: #5B8FF9;
    }
    .role-badge.viewer {
      background: rgba(34,197,94,.15);
      border: 1px solid rgba(34,197,94,.4);
      color: #4ade80;
    }
    @keyframes badgePulse {
      0%, 100% { opacity: .85; }
      50%      { opacity: 1; }
    }

    /* ── Arch diagram ─────────────────── */
    .arch {
      display: flex; align-items: stretch; gap: 0; width: 100%;
      min-width: 0;
      overflow-x: auto;
    }
    .abox {
      flex: 1 1 0%;
      min-width: 150px;
      border-radius: 14px; padding: 24px 18px; text-align: center;
      border: 1px solid rgba(46,108,246,.28);
      background: rgba(19,43,80,.8);
      box-sizing: border-box;
    }
    .aarrow {
      width: 46px; flex-shrink:0; display:flex; align-items:center;
      justify-content:center; color:#2E6CF6; font-size:26px;
      min-width: 46px;
    }

    /* ── Roadmap phases ───────────────── */
    .phase {
      flex: 1; border-radius: 16px; padding: 28px 26px;
      background: rgba(19,43,80,.8);
      border: 1px solid rgba(255,255,255,.06);
      position: relative; overflow: hidden;
    }
    .phase::before {
      content:''; position:absolute; top:0;left:0;right:0; height:5px;
    }
    .phase.p1::before { background:#6b7280; }
    .phase.p2::before { background:#2E6CF6; }
    .phase.p3::before { background:#22c55e; }

    /* ── KPI grid ─────────────────────── */
    .kgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; width:100%; }
    .kbox {
      border-radius:16px; padding:32px 16px; text-align:center;
      border: 1px solid rgba(46,108,246,.2);
      background: rgba(19,43,80,.85);
    }

    /* ── Dash alerts ──────────────────── */
    .arow {
      display:flex; align-items:flex-start; gap:12px;
      padding:14px 16px; border-radius:10px;
      background: rgba(19,43,80,.55);
      border: 1px solid rgba(255,255,255,.06);
      margin-bottom:11px;
    }
    .adot { width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:7px; }

    /* ── Profile card ─────────────────── */
    .profile-tag {
      display:inline-flex; align-items:center; gap:8px;
      background: rgba(46,108,246,.15);
      border: 1px solid rgba(46,108,246,.35);
      border-radius: 99px; padding: 8px 20px;
      font-size: clamp(17px,1.6vw,22px); font-weight:500; color:#A8BFDC;
    }
    .sys-pill {
      display:inline-block; padding:8px 16px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius:99px;
      font-size: clamp(16px,1.5vw,20px); color:#A8BFDC;
    }

    /* ── Responsive Utilities ─────────── */
    .profile-grid { display: grid; grid-template-columns: 350px 1fr; gap: 80px; align-items: center; }
    .profile-portrait-wrap {
      width: 100%; aspect-ratio: 3/4; border-radius: 18px;
      background: linear-gradient(160deg, #132B50 0%, #1C3A6A 50%, #0B1F3A 100%);
      border: 2px solid rgba(46,108,246,.45);
      box-shadow: 0 0 40px rgba(46,108,246,.18), 0 8px 32px rgba(0,0,0,.45);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 16px; position: relative; overflow: hidden;
    }
    .qr-container {
      width: 520px; height: 520px;
      background: rgba(255,255,255,.03);
      border: 2px solid rgba(46,108,246,.4);
      border-radius: 24px; padding: 20px;
      box-shadow: 0 0 50px rgba(46,108,246,.15);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 30px;
    }
    .r-grid { display: grid; gap: 26px; }
    .r-flex-stack { display: flex; gap: 20px; }

    /* ═══ PER-SLIDE ELEMENT ANIMATIONS ═══ */
    @keyframes s-fadeUp    { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
    @keyframes s-fadeDown  { from{opacity:0;transform:translateY(-22px)} to{opacity:1;transform:none} }
    @keyframes s-fadeLeft  { from{opacity:0;transform:translateX(42px)}  to{opacity:1;transform:none} }
    @keyframes s-fadeRight { from{opacity:0;transform:translateX(-42px)} to{opacity:1;transform:none} }
    @keyframes s-popIn     { from{opacity:0;transform:scale(.78)}        to{opacity:1;transform:scale(1)} }
    @keyframes s-glowPulse { from{opacity:0;filter:blur(8px)}           to{opacity:1;filter:blur(0)} }

    /* Base: elements start invisible when slide has in-slide-anim */
    .in-slide-anim .inner > * { opacity: 0; }

    /* s01: QR Slide */
    #s01.in-slide-anim .inner>*:nth-child(1){animation:s-fadeDown .45s .10s ease forwards}
    #s01.in-slide-anim .inner>*:nth-child(2){animation:s-popIn   .55s .30s cubic-bezier(.22,.68,0,1.3) forwards}
    #s01.in-slide-anim .inner>*:nth-child(3){animation:s-fadeUp   .45s .55s ease forwards}

    /* s02: split left/right */
    #s02.in-slide-anim .inner>*:nth-child(1){animation:s-fadeRight .55s .10s cubic-bezier(.22,.68,0,1.1) forwards}
    #s02.in-slide-anim .inner>*:nth-child(2){animation:s-fadeLeft  .55s .22s cubic-bezier(.22,.68,0,1.1) forwards}

    /* s03: lines cascade up */
    #s03.in-slide-anim .inner>*:nth-child(1){animation:s-fadeUp .45s .00s ease forwards}
    #s03.in-slide-anim .inner>*:nth-child(2){animation:s-fadeUp .45s .10s ease forwards}
    #s03.in-slide-anim .inner>*:nth-child(3){animation:s-fadeUp .55s .20s ease forwards}
    #s03.in-slide-anim .inner>*:nth-child(4){animation:s-fadeUp .50s .38s ease forwards}
    #s03.in-slide-anim .inner>*:nth-child(5){animation:s-fadeUp .45s .52s ease forwards}
    #s03.in-slide-anim .inner>*:nth-child(6){animation:s-fadeUp .50s .65s ease forwards}

    /* s04: header up, cards cascade */
    #s04.in-slide-anim .inner>*:nth-child(1){animation:s-fadeUp .40s .05s ease forwards}
    #s04.in-slide-anim .inner>*:nth-child(2){animation:s-fadeUp .40s .13s ease forwards}
    #s04.in-slide-anim .inner>*:nth-child(3){animation:s-fadeUp .40s .21s ease forwards}
    #s04.in-slide-anim .inner>*:nth-child(4){opacity:1}
    #s04.in-slide-anim .inner>*:nth-child(4)>*{opacity:0}
    #s04.in-slide-anim .inner>*:nth-child(4)>*:nth-child(1){animation:s-fadeUp .45s .33s ease forwards}
    #s04.in-slide-anim .inner>*:nth-child(4)>*:nth-child(2){animation:s-fadeUp .45s .45s ease forwards}
    #s04.in-slide-anim .inner>*:nth-child(4)>*:nth-child(3){animation:s-fadeUp .45s .57s ease forwards}
    #s04.in-slide-anim .inner>*:nth-child(4)>*:nth-child(4){animation:s-fadeUp .45s .69s ease forwards}

    /* s05: header up, cards pop spring (AI for Workforce) */
    #s05.in-slide-anim .inner>*:nth-child(1){animation:s-fadeUp .40s .05s ease forwards}
    #s05.in-slide-anim .inner>*:nth-child(2){animation:s-fadeUp .40s .13s ease forwards}
    #s05.in-slide-anim .inner>*:nth-child(3){animation:s-fadeUp .40s .21s ease forwards}
    #s05.in-slide-anim .inner>*:nth-child(4){opacity:1}
    #s05.in-slide-anim .inner>*:nth-child(4)>*{opacity:0}
    #s05.in-slide-anim .inner>*:nth-child(4)>*:nth-child(1){animation:s-popIn .50s .33s cubic-bezier(.22,.68,0,1.35) forwards}
    #s05.in-slide-anim .inner>*:nth-child(4)>*:nth-child(2){animation:s-popIn .50s .48s cubic-bezier(.22,.68,0,1.35) forwards}
    #s05.in-slide-anim .inner>*:nth-child(4)>*:nth-child(3){animation:s-popIn .50s .63s cubic-bezier(.22,.68,0,1.35) forwards}
    #s05.in-slide-anim .inner>*:nth-child(4)>*:nth-child(4){animation:s-popIn .50s .78s cubic-bezier(.22,.68,0,1.35) forwards}
    #s05.in-slide-anim .inner>*:nth-child(5){animation:s-fadeUp .50s .90s ease forwards}

    /* s06: header up, cards pop spring (Why AI) */
    #s06.in-slide-anim .inner>*:nth-child(1){animation:s-fadeUp .40s .05s ease forwards}
    #s06.in-slide-anim .inner>*:nth-child(2){animation:s-fadeUp .40s .13s ease forwards}
    #s06.in-slide-anim .inner>*:nth-child(3){animation:s-fadeUp .40s .21s ease forwards}
    #s06.in-slide-anim .inner>*:nth-child(4){opacity:1}
    #s06.in-slide-anim .inner>*:nth-child(4)>*{opacity:0}
    #s06.in-slide-anim .inner>*:nth-child(4)>*:nth-child(1){animation:s-popIn .50s .33s cubic-bezier(.22,.68,0,1.35) forwards}
    #s06.in-slide-anim .inner>*:nth-child(4)>*:nth-child(2){animation:s-popIn .50s .50s cubic-bezier(.22,.68,0,1.35) forwards}
    #s06.in-slide-anim .inner>*:nth-child(4)>*:nth-child(3){animation:s-popIn .50s .67s cubic-bezier(.22,.68,0,1.35) forwards}

    /* s07: arch boxes reveal L→R */
    #s07.in-slide-anim .inner>*:nth-child(1){animation:s-fadeUp    .40s .05s ease forwards}
    #s07.in-slide-anim .inner>*:nth-child(2){animation:s-fadeUp    .40s .13s ease forwards}
    #s07.in-slide-anim .inner>*:nth-child(3){animation:s-fadeUp    .40s .21s ease forwards}
    #s07.in-slide-anim .inner>*:nth-child(4){opacity:1}
    #s07.in-slide-anim .arch>*{opacity:0}
    #s07.in-slide-anim .arch>*:nth-child(1){animation:s-fadeRight .42s .30s ease forwards}
    #s07.in-slide-anim .arch>*:nth-child(2){animation:s-fadeRight .30s .50s ease forwards}
    #s07.in-slide-anim .arch>*:nth-child(3){animation:s-fadeRight .42s .57s ease forwards}
    #s07.in-slide-anim .arch>*:nth-child(4){animation:s-fadeRight .30s .76s ease forwards}
    #s07.in-slide-anim .arch>*:nth-child(5){animation:s-fadeRight .42s .83s ease forwards}
    #s07.in-slide-anim .arch>*:nth-child(6){animation:s-fadeRight .30s 1.0s ease forwards}
    #s07.in-slide-anim .arch>*:nth-child(7){animation:s-fadeRight .42s 1.07s ease forwards}

    /* s08: chart from left, KPI stack from right (OPS) */
    #s08.in-slide-anim .inner>*:nth-child(1){animation:s-fadeUp    .40s .05s ease forwards}
    #s08.in-slide-anim .inner>*:nth-child(2){animation:s-fadeUp    .40s .13s ease forwards}
    #s08.in-slide-anim .inner>*:nth-child(3){animation:s-fadeUp    .40s .21s ease forwards}
    #s08.in-slide-anim .inner>*:nth-child(4){opacity:1}
    #s08.in-slide-anim .inner>*:nth-child(4)>*:nth-child(1){opacity:0;animation:s-fadeRight .52s .32s ease forwards}
    #s08.in-slide-anim .inner>*:nth-child(4)>*:nth-child(2){opacity:0;animation:s-fadeLeft  .52s .32s ease forwards}

    /* s09: cards bounce up stagger (Finance) */
    #s09.in-slide-anim .inner>*:nth-child(1){animation:s-fadeUp .40s .05s ease forwards}
    #s09.in-slide-anim .inner>*:nth-child(2){animation:s-fadeUp .40s .13s ease forwards}
    #s09.in-slide-anim .inner>*:nth-child(3){animation:s-fadeUp .40s .21s ease forwards}
    #s09.in-slide-anim .inner>*:nth-child(4){opacity:1}
    #s09.in-slide-anim .inner>*:nth-child(4)>*{opacity:0}
    #s09.in-slide-anim .inner>*:nth-child(4)>*:nth-child(1){animation:s-fadeUp .48s .32s cubic-bezier(.22,.68,0,1.15) forwards}
    #s09.in-slide-anim .inner>*:nth-child(4)>*:nth-child(2){animation:s-fadeUp .48s .50s cubic-bezier(.22,.68,0,1.15) forwards}
    #s09.in-slide-anim .inner>*:nth-child(4)>*:nth-child(3){animation:s-fadeUp .48s .68s cubic-bezier(.22,.68,0,1.15) forwards}

    /* s100: chart from left, alerts ticker from right (Dashboard) */
    #s100.in-slide-anim .inner>*:nth-child(1){animation:s-fadeUp    .40s .05s ease forwards}
    #s100.in-slide-anim .inner>*:nth-child(2){animation:s-fadeUp    .40s .13s ease forwards}
    #s100.in-slide-anim .inner>*:nth-child(3){animation:s-fadeUp    .40s .21s ease forwards}
    #s100.in-slide-anim .inner>*:nth-child(4){opacity:1}
    #s100.in-slide-anim .inner>*:nth-child(4)>*:nth-child(1){opacity:0;animation:s-fadeRight .50s .30s ease forwards}
    #s100.in-slide-anim .inner>*:nth-child(4)>*:nth-child(2){opacity:1}
    #s100.in-slide-anim .inner>*:nth-child(4)>*:nth-child(2)>*{opacity:0}
    #s100.in-slide-anim .inner>*:nth-child(4)>*:nth-child(2)>*:nth-child(1){animation:s-fadeLeft .35s .30s ease forwards}
    #s100.in-slide-anim .inner>*:nth-child(4)>*:nth-child(2)>*:nth-child(2){animation:s-fadeLeft .35s .48s ease forwards}
    #s100.in-slide-anim .inner>*:nth-child(4)>*:nth-child(2)>*:nth-child(3){animation:s-fadeLeft .35s .64s ease forwards}
    #s100.in-slide-anim .inner>*:nth-child(4)>*:nth-child(2)>*:nth-child(4){animation:s-fadeLeft .35s .80s ease forwards}

    /* s10: phases reveal L→R (Roadmap) */
    #s10.in-slide-anim .inner>*:nth-child(1){animation:s-fadeUp    .40s .05s ease forwards}
    #s10.in-slide-anim .inner>*:nth-child(2){animation:s-fadeUp    .40s .13s ease forwards}
    #s10.in-slide-anim .inner>*:nth-child(3){animation:s-fadeUp    .40s .21s ease forwards}
    #s10.in-slide-anim .inner>*:nth-child(4){opacity:1}
    #s10.in-slide-anim .inner>*:nth-child(4)>*{opacity:0}
    #s10.in-slide-anim .inner>*:nth-child(4)>*:nth-child(1){animation:s-fadeRight .50s .32s ease forwards}
    #s10.in-slide-anim .inner>*:nth-child(4)>*:nth-child(2){animation:s-fadeRight .50s .55s ease forwards}
    #s10.in-slide-anim .inner>*:nth-child(4)>*:nth-child(3){animation:s-fadeRight .50s .78s ease forwards}

    /* s11: KPI boxes bounce pop (Business Impact) */
    #s11.in-slide-anim .inner>*:nth-child(1){animation:s-fadeUp .40s .05s ease forwards}
    #s11.in-slide-anim .inner>*:nth-child(2){animation:s-fadeUp .40s .13s ease forwards}
    #s11.in-slide-anim .inner>*:nth-child(3){animation:s-fadeUp .40s .21s ease forwards}
    #s11.in-slide-anim .inner>*:nth-child(4){opacity:1}
    #s11.in-slide-anim .kgrid>*{opacity:0}
    #s11.in-slide-anim .kgrid>*:nth-child(1){animation:s-popIn .52s .30s cubic-bezier(.22,.68,0,1.4) forwards}
    #s11.in-slide-anim .kgrid>*:nth-child(2){animation:s-popIn .52s .46s cubic-bezier(.22,.68,0,1.4) forwards}
    #s11.in-slide-anim .kgrid>*:nth-child(3){animation:s-popIn .52s .62s cubic-bezier(.22,.68,0,1.4) forwards}
    #s11.in-slide-anim .kgrid>*:nth-child(4){animation:s-popIn .52s .78s cubic-bezier(.22,.68,0,1.4) forwards}

    /* s12: glow headline, pop cards (Conclusion) */
    #s12.in-slide-anim .inner>*:nth-child(1){animation:s-fadeDown  .45s .05s ease forwards}
    #s12.in-slide-anim .inner>*:nth-child(2){animation:s-fadeDown  .45s .14s ease forwards}
    #s12.in-slide-anim .inner>*:nth-child(3){animation:s-glowPulse .65s .24s ease forwards}
    #s12.in-slide-anim .inner>*:nth-child(4){animation:s-fadeUp .50s .55s ease forwards}
    #s12.in-slide-anim .inner>*:nth-child(5){animation:s-fadeUp .50s .70s ease forwards}

    @media (max-width: 700px) {
        .slide .inner > div[style*="display:grid"] {
            grid-template-columns: 1fr !important;
            gap: 12px !important;
        }
        .card, .card.card-left {
            padding: 12px 10px !important;
            font-size: 15px !important;
        }
        .t-title, .t-sub, .t-body {
            font-size: 16px !important;
        }
    }

    @media (max-width: 900px) {
    .arch {
        flex-direction: column !important;
        display: flex !important;
        align-items: stretch !important;
        gap: 18px !important;
    }
    .arch .arrow-horizontal { display: none !important; }
    .arch .arrow-vertical { display: block !important; text-align: center; font-size: 2.2em; }
    }
    @media (min-width: 901px) {
    .arch {
        flex-direction: row !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 18px !important;
    }
    .arch .arrow-horizontal { display: block !important; }
    .arch .arrow-vertical { display: none !important; }
    }

    /* Responsive arrow for .arch (AI Layer Architecture) */
    @media (max-width: 1024px) {
      .arch {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 18px !important;
      }
      .arch .arrow-horizontal { display: none !important; }
      .arch .arrow-vertical {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        font-size: 2.2em !important;
        margin: 0 auto !important;
        justify-content: center !important;
        align-items: center !important;
      }
      .arch .arrow-end-mobile {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        font-size: 2.2em !important;
        margin: 0 auto !important;
        justify-content: center !important;
        align-items: center !important;
      }
    }
    @media (min-width: 1025px) {
      .arch {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 18px !important;
      }
      .arch .arrow-horizontal { display: flex !important; }
      .arch .arrow-vertical { display: none !important; }
      .arch .arrow-end-mobile { display: none !important; }
    }

    /* .abox, .aarrow {
      min-width: 160px;
      max-width: 520px;
    } */
    /* .aarrow {
      flex: 0 0 20px;
      text-align: center;
      font-size: 2em;
      align-self: center;
      padding: 0 4px;
    } */

/* ══════════════════════════════════════
   PRESENTER PANEL (?role=remote)
══════════════════════════════════════ */
#presPanel {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  font-family: 'Prompt', sans-serif;
  color: #F5F7FA;
  /* ป้องกัน double-tap zoom บน mobile/iPad */
  touch-action: manipulation;
}

/* ป้องกัน double-tap zoom บนทุกปุ่มใน presenter panel */
#presPanel button,
#presPanel .pres-zoom-btn,
#presPanel .pres-btn,
#presPanel .pres-timer-btn,
#presPanel .pres-timer-reset {
  touch-action: manipulation;
}

.pres-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  background: rgba(19,43,80,.95);
  border-bottom: 1px solid rgba(46,108,246,.3);
  /* ลบ position: sticky; top: 0; z-index: 10; ออก */
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}
.pres-badge {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #5B8FF9;
  background: rgba(46,108,246,.15);
  border: 1px solid rgba(46,108,246,.4);
  border-radius: 99px;
  padding: 5px 14px;
}
.pres-counter {
  font-size: 22px;
  font-weight: 700;
  color: #F5F7FA;
}
.pres-sep {
  color: #A8BFDC;
  margin: 0 4px;
  font-weight: 400;
}

.pres-slide-title {
  font-size: 17px;
  font-weight: 600;
  color: #A8BFDC;
  background: rgba(46,108,246,.1);
  border-left: 4px solid #2E6CF6;
  padding: 12px 22px;
  letter-spacing: .02em;
}

.pres-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pres-section {
  background: rgba(19,43,80,.85);
  border: 1px solid rgba(46,108,246,.18);
  border-radius: 14px;
  padding: 20px 22px;
}
.pres-note-wrap {
  background: rgba(167,139,250,.07);
  border-color: rgba(167,139,250,.25);
}

.pres-section-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5B8FF9;
  margin-bottom: 14px;
}
.pres-note-wrap .pres-section-label {
  color: #a78bfa;
}

.pres-script {
  font-size: 19px;
  line-height: 1.85;
  color: #E2E8F0;
  white-space: pre-line;
}
.pres-note {
  font-size: 16px;
  line-height: 1.7;
  color: #c4b5fd;
  white-space: pre-line;
}

.pres-footer {
  display: flex;
  gap: 14px;
  padding: 16px 22px 80px;
  position: sticky;
  bottom: 0;
  background: rgba(6,13,26,.96);
  border-top: 1px solid rgba(46,108,246,.2);
  backdrop-filter: blur(10px);
}
.pres-btn {
  flex: 1;
  padding: 16px 10px;
  border-radius: 12px;
  border: 1px solid rgba(46,108,246,.4);
  background: rgba(46,108,246,.15);
  color: #5B8FF9;
  font-family: 'Prompt', sans-serif;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.pres-btn:hover:not(:disabled) {
  background: rgba(46,108,246,.35);
  color: #fff;
}
.pres-btn:active:not(:disabled) {
  background: #2E6CF6;
  color: #fff;
}
.pres-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}
.pres-btn-next {
  background: rgba(46,108,246,.3);
  border-color: #2E6CF6;
  color: #fff;
}
.pres-btn-next:hover:not(:disabled) {
  background: #2E6CF6;
}

/* ── Presenter Timer ── */
.pres-timer-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: rgba(11,31,58,.6);
  border-bottom: 1px solid rgba(46,108,246,.15);
  flex-shrink: 0;
}

.pres-timer-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  background: rgba(46,108,246,.06);
  transition: background .2s;
}
.pres-timer-card--qa {
  background: rgba(74,222,128,.06);
}

.pres-timer-card-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5B8FF9;
  opacity: .85;
}
.pres-timer-card--qa .pres-timer-card-label {
  color: #4ade80;
}

.pres-timer-card-btns {
  display: flex;
  gap: 6px;
  width: 100%;
}

.pres-timer-sep {
  width: 1px;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}

.pres-timer-display {
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #F5F7FA;
  letter-spacing: .04em;
  min-width: 96px;
  transition: color .3s;
}
.pres-timer-display.timer-warn {
  color: #f59e0b;
  animation: timerPulse .8s ease-in-out infinite;
}
.pres-timer-display.timer-done {
  color: #ef4444;
  animation: timerPulse .4s ease-in-out infinite;
}
@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}

.pres-timer-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(46,108,246,.5);
  background: rgba(46,108,246,.15);
  color: #5B8FF9;
  font-family: 'Prompt', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.pres-timer-btn--qa {
  border-color: rgba(74,222,128,.5);
  background: rgba(74,222,128,.12);
  color: #4ade80;
}
.pres-timer-btn--qa:hover { background: rgba(74,222,128,.25); color: #fff; }
.pres-timer-btn--qa.running {
  background: rgba(245,158,11,.2);
  border-color: rgba(245,158,11,.6);
  color: #f59e0b;
}
.pres-timer-btn--qa.running:hover { background: rgba(245,158,11,.35); }
.pres-timer-btn.running {
  background: rgba(245,158,11,.2);
  border-color: rgba(245,158,11,.6);
  color: #f59e0b;
}
.pres-timer-btn:hover { background: rgba(46,108,246,.3); color: #fff; }
.pres-timer-btn.running:hover { background: rgba(245,158,11,.35); }

.pres-timer-reset {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: transparent;
  color: #A8BFDC;
  font-family: 'Prompt', sans-serif;
  font-size: 15px;
  cursor: pointer;
  transition: background .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.pres-timer-reset:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ── Timer Elapsed & Total Progress ── */
.pres-timer-elapsed {
  font-size: 11px;
  color: rgba(91,143,249,.8);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  font-weight: 600;
}
.pres-timer-elapsed--qa {
  color: rgba(74,222,128,.8);
}

.pres-timer-total {
  padding: 8px 18px 10px;
  background: rgba(7,20,40,.7);
  border-bottom: 1px solid rgba(46,108,246,.12);
  flex-shrink: 0;
}
.pres-timer-total-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
}
.pres-timer-total-center {
  font-size: 10px;
  color: rgba(168,191,220,.45);
  letter-spacing: .08em;
  text-transform: uppercase;
}
#pres-total-used { color: #5B8FF9; font-weight: 700; }
#pres-total-left { color: #4ade80; font-weight: 700; transition: color .3s; }
#pres-total-left.total-warn { color: #f59e0b !important; animation: timerPulse .8s ease-in-out infinite; }
#pres-total-left.total-done { color: #ef4444 !important; animation: timerPulse .4s ease-in-out infinite; }

.pres-timer-total-track {
  height: 7px;
  background: rgba(255,255,255,.07);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.pres-timer-total-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(46,108,246,.85), rgba(91,143,249,.95));
  border-radius: 4px 0 0 4px;
  transition: width .6s ease;
}
.pres-timer-total-fill--qa {
  background: linear-gradient(90deg, rgba(74,222,128,.85), rgba(134,239,172,.95));
  border-radius: 0 4px 4px 0;
  transition: width .6s ease, left .6s ease;
}

/* ── Presenter Fullscreen Button ── */
.pres-fs-btn {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid rgba(74,222,128,.4);
  background: rgba(74,222,128,.1);
  color: #4ade80;
  font-family: 'Prompt', sans-serif;
  font-size: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  min-height: 40px;
}
.pres-fs-btn:hover:not(:disabled) {
  background: rgba(74,222,128,.25);
  color: #fff;
}
.pres-fs-btn:disabled {
  opacity: .6;
  cursor: default;
}

/* ── Presenter Exit Fullscreen Button ── */
.pres-fs-exit-btn {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid rgba(239,68,68,.4);
  background: rgba(239,68,68,.1);
  color: #f87171;
  font-family: 'Prompt', sans-serif;
  font-size: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  min-height: 40px;
}
.pres-fs-exit-btn:hover:not(:disabled) {
  background: rgba(239,68,68,.25);
  color: #fff;
}
.pres-fs-exit-btn:disabled {
  opacity: .6;
  cursor: default;
}

/* ── Viewer Fullscreen Overlay ── */
#fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(6,13,26,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  animation: fsOverlayIn .3s ease-out;
}
@keyframes fsOverlayIn {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}
.fs-overlay-inner {
  text-align: center;
  color: #F5F7FA;
  pointer-events: none;
}
.fs-overlay-icon {
  font-size: 72px;
  margin-bottom: 20px;
  animation: fsPulse 1.2s ease-in-out infinite;
}
@keyframes fsPulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.fs-overlay-text {
  font-size: 28px;
  font-weight: 700;
  font-family: 'Prompt', sans-serif;
  margin-bottom: 8px;
}
.fs-overlay-sub {
  font-size: 16px;
  color: #A8BFDC;
  font-family: 'Prompt', sans-serif;
}

/* ── Presenter Theme Toggle Button ── */
.pres-theme-btn {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid rgba(245,158,11,.45);
  background: rgba(245,158,11,.1);
  color: #f59e0b;
  font-family: 'Prompt', sans-serif;
  font-size: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  min-height: 40px;
}
.pres-theme-btn:hover { background: rgba(245,158,11,.28); color: #fff; }
.pres-theme-btn.is-light {
  border-color: rgba(91,143,249,.45);
  background: rgba(91,143,249,.1);
  color: #5B8FF9;
}
.pres-theme-btn.is-light:hover { background: rgba(91,143,249,.28); color: #fff; }

/* Zoom control bar */
.pres-zoom-bar {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  padding: 4px 10px;
  min-height: 40px;
}
.pres-zoom-btn {
  width: 50px; height: 50px; border-radius: 8px;
  border: 1px solid rgba(46,108,246,.35);
  background: rgba(46,108,246,.18); color: #A8BFDC;
  font-size: 40px; font-weight: 700; line-height: 1;
  cursor: pointer; transition: background .15s, color .15s, transform .1s;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.pres-zoom-btn:hover  { background: #2E6CF6; color: #fff; border-color: #2E6CF6; }
.pres-zoom-btn:active { transform: scale(.9); }
.pres-zoom-reset-btn  { font-size: 25px; }
.pres-zoom-val {
  min-width: 46px; text-align: center;
  font-size: 14px; font-weight: 700; color: #F5F7FA;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* ══════════════════════════════════════
   LIGHT THEME  (html.theme-light)
══════════════════════════════════════ */
html.theme-light,
html.theme-light body {
  background: #E8F0F8;
  color: #0B1F3A;
}

/* Slide backgrounds */
html.theme-light .bg-1  { background: radial-gradient(circle at 30% 70%, #C5D8F0 0%, #E8F0F8 100%); }
html.theme-light .bg-2  { background: linear-gradient(160deg, #E8F0F8 0%, #D5E5F5 60%, #C5D8F0 100%); }
html.theme-light .bg-3  { background: linear-gradient(135deg, #EEF2F8 0%, #E4EBF5 45%, #D5E5F5 100%); }
html.theme-light .bg-4  { background: #E8F0F8; }
html.theme-light .bg-5  { background: linear-gradient(180deg, #E8F0F8 0%, #E0EAF5 100%); }
html.theme-light .bg-6  { background: #E8F0F8; }
html.theme-light .bg-7  { background: linear-gradient(135deg, #E8F0F8 0%, #E0EAF5 100%); }
html.theme-light .bg-8  { background: #E8F0F8; }
html.theme-light .bg-9  { background: linear-gradient(180deg, #E8F0F8 0%, #DDE8F4 100%); }
html.theme-light .bg-10 { background: #E8F0F8; }
html.theme-light .bg-11 { background: linear-gradient(135deg, #E8F0F8 0%, #E0EAF5 100%); }
html.theme-light .bg-12 { background: linear-gradient(135deg, #E8F0F8 0%, #E0EAF5 100%); }
html.theme-light .bg-13 { background: linear-gradient(135deg, #EEF2F8 0%, #C5D8F0 100%); }

/* Base text on slides */
html.theme-light .slide { color: #0B1F3A; }
html.theme-light .slide .t-hero,
html.theme-light .slide .t-title,
html.theme-light .slide .t-sub,
html.theme-light .slide .t-body,
html.theme-light .slide .t-small { color: #0B1F3A; }

/* Override common inline text colors */
html.theme-light .slide [style*="color:#F5F7FA"]           { color: #0B1F3A !important; }
html.theme-light .slide [style*="color:#E2E8F0"]           { color: #1C3A6A !important; }
html.theme-light .slide [style*="color:#A8BFDC"]           { color: #4A6A8A !important; }
html.theme-light .slide [style*="color:rgba(168,191,220"]  { color: #4A6A8A !important; }
html.theme-light .slide [style*="color:rgba(255,255,255"]  { color: #0B1F3A !important; }

/* Cards */
html.theme-light .slide .card {
  background: rgba(255,255,255,.90);
  border-color: rgba(46,108,246,.18);
  color: #0B1F3A;
}

/* Arch boxes */
html.theme-light .slide .abox {
  background: rgba(255,255,255,.88);
  border-color: rgba(46,108,246,.28) !important;
}

/* Phase boxes */
html.theme-light .slide .phase {
  background: rgba(255,255,255,.88);
  border-color: rgba(46,108,246,.12);
}

/* KPI boxes */
html.theme-light .slide .kbox {
  background: rgba(255,255,255,.88);
  border-color: rgba(46,108,246,.15);
}

/* Dashboard alert rows */
html.theme-light .slide .arow {
  background: rgba(255,255,255,.72);
  border-color: rgba(46,108,246,.1);
}

/* Finance KPI cards */
html.theme-light .slide .finance-kpi-col .kpi-card         { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
html.theme-light .slide .finance-kpi-col .kpi-card.kpi-green  { background: #f0fdf4; }
html.theme-light .slide .finance-kpi-col .kpi-card.kpi-blue   { background: #eff6ff; }
html.theme-light .slide .finance-kpi-col .kpi-card.kpi-orange { background: #fff7ed; }
html.theme-light .slide .finance-kpi-col .kpi-name  { color: #475569; }
html.theme-light .slide .finance-kpi-col .kpi-value { color: #0B1F3A; }
html.theme-light .slide .finance-kpi-col .kpi-val-unit { color: #64748b; }
html.theme-light .slide .finance-kpi-col .t-sub { color: #0B1F3A; }

/* Sys pills */
html.theme-light .slide .sys-pill {
  background: rgba(46,108,246,.08);
  border-color: rgba(46,108,246,.25) !important;
  color: #1C3A6A !important;
}

/* Profile portrait */
html.theme-light .profile-portrait-wrap {
  background: linear-gradient(160deg, #C5D8F0 0%, #B5CDE8 50%, #C5D8F0 100%);
  border-color: rgba(46,108,246,.35);
}

/* QR container */
html.theme-light .qr-container {
  background: rgba(255,255,255,.55);
  border-color: rgba(46,108,246,.35);
}

/* HUD */
html.theme-light #hud .hbtn {
  background: rgba(255,255,255,.92);
  border-color: rgba(46,108,246,.25);
  color: #2E6CF6;
}
html.theme-light #hud .hbtn:hover  { background: #2E6CF6; border-color: #2E6CF6; color: #fff; }
html.theme-light #hud .hbtn:disabled { background: rgba(255,255,255,.92); color: rgba(46,108,246,.3); }
html.theme-light #hud #ctr {
  background: rgba(255,255,255,.92);
  border-color: rgba(46,108,246,.2);
  color: #0B1F3A;
}

/* Hint */
html.theme-light #hint { color: rgba(27,60,110,.5); }

/* Accent colors: darken for readability on light backgrounds */
html.theme-light .slide [style*="color:#4ade80"]  { color: #16a34a !important; } /* green  */
html.theme-light .slide [style*="color:#5B8FF9"]  { color: #1d4ed8 !important; } /* blue   */
html.theme-light .slide [style*="color:#fb923c"]  { color: #c2410c !important; } /* orange */
html.theme-light .slide [style*="color:#a78bfa"]  { color: #7c3aed !important; } /* purple */
html.theme-light .slide [style*="color:#f59e0b"]  { color: #b45309 !important; } /* amber  */
html.theme-light .slide [style*="color:#ef4444"]  { color: #dc2626 !important; } /* red    */

/* Slide 13 – Conclusion card: ล้าง inline background สีเข้ม */
html.theme-light #s12 .card[style*="background:rgba(19,43,80"] {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(22,163,74,.45) !important;
}
/* ข้อความหลักในการ์ด */
html.theme-light #s12 .card .t-body { color: #1C3A6A !important; }
/* "Q&A · ขอบคุณ" เนื้อหาซ่อน – ปรับโทนให้อ่านออกบน light */
html.theme-light #s12 [style*="color:rgba(168,191,220,.4)"] { color: rgba(27,60,110,.3) !important; }

/* ══════════════════════════════════════
   SLIDE 07 – AI Layer Architecture (styled)
══════════════════════════════════════ */

/* ── Shared elements ── */
.s07-icon  { font-size: 36px; margin-bottom: 12px; }
.s07-lbl   {
  font-size: 16px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #A8BFDC; margin-bottom: 14px;
}
.s07-body  { font-size: 20px; line-height: 1.75; color: #E2E8F0; }
.s07-checks { font-weight: 600; }

/* ── System pills ── */
.s07-pills { display: grid; grid-template-columns: 1fr; gap: 7px; }
.s07-pill  {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 8px 10px;
  font-size: 20px; text-align: center; color: #E2E8F0;
}

/* ── Layer accent colors (dark mode) ── */
.s07-l1 {
  background: rgba(46,108,246,.18);
  border: 1px solid rgba(46,108,246,.55);
  border-top: 3px solid #2E6CF6;
}
.s07-l1 .s07-lbl { color: #7EB3FF; }

.s07-l2 {
  background: rgba(6,182,212,.14);
  border: 1px solid rgba(6,182,212,.45);
  border-top: 3px solid #22d3ee;
}
.s07-l2 .s07-lbl { color: #67e8f9; }
.s07-l2 .s07-body { color: #cffafe; }

.s07-l3 {
  background: rgba(124,58,237,.18);
  border: 1px solid rgba(124,58,237,.5);
  border-top: 3px solid #a78bfa;
}
.s07-l3 .s07-lbl { color: #c4b5fd; }
.s07-l3 .s07-body { color: #ede9fe; }

.s07-l4 {
  background: rgba(22,163,74,.14);
  border: 1px solid rgba(22,163,74,.45);
  border-top: 3px solid #4ade80;
}
.s07-l4 .s07-lbl { color: #86efac; }
.s07-l4 .s07-body { color: #dcfce7; }

/* ── Arrows ── */
.s07-arrow   { display: flex; align-items: center; justify-content: center; color: rgba(168,191,220,.5); font-size: 2em; flex-shrink: 0; width: 36px; }
.s07-arrow-v { display: none; text-align: center; width: 100%; font-size: 2em; color: rgba(168,191,220,.5); margin: 2px 0; }
@media (max-width: 1024px) {
  .s07-arrow   { display: none !important; }
  .s07-arrow-v { display: block !important; }
}
@media (min-width: 1025px) {
  .s07-arrow-v { display: none !important; }
  .s07-arrow   { display: flex !important; }
}

/* ══════════════════════════════════════
   SLIDE 07 – LIGHT THEME overrides
══════════════════════════════════════ */
html.theme-light #s07 .s07-lbl   { color: #4A6A8A; }
html.theme-light #s07 .s07-body  { color: #1C3564; }
html.theme-light #s07 .s07-pill  { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); color: #1C3564; }
html.theme-light #s07 .s07-arrow,
html.theme-light #s07 .s07-arrow-v { color: rgba(27,60,110,.35); }

html.theme-light #s07 .s07-l1 {
  background: rgba(46,108,246,.08);
  border-color: rgba(46,108,246,.3);
  border-top-color: #2E6CF6;
}
html.theme-light #s07 .s07-l1 .s07-lbl { color: #1d4ed8; }
html.theme-light #s07 .s07-l1 .s07-body { color: #1C3564; }

html.theme-light #s07 .s07-l2 {
  background: rgba(6,182,212,.07);
  border-color: rgba(6,182,212,.3);
  border-top-color: #0891b2;
}
html.theme-light #s07 .s07-l2 .s07-lbl { color: #0e7490; }
html.theme-light #s07 .s07-l2 .s07-body { color: #164e63; }

html.theme-light #s07 .s07-l3 {
  background: rgba(124,58,237,.07);
  border-color: rgba(124,58,237,.28);
  border-top-color: #7c3aed;
}
html.theme-light #s07 .s07-l3 .s07-lbl { color: #6d28d9; }
html.theme-light #s07 .s07-l3 .s07-body { color: #2e1065; }

html.theme-light #s07 .s07-l4 {
  background: rgba(22,163,74,.07);
  border-color: rgba(22,163,74,.28);
  border-top-color: #16a34a;
}
html.theme-light #s07 .s07-l4 .s07-lbl { color: #15803d; }
html.theme-light #s07 .s07-l4 .s07-body { color: #14532d; }

/* ═══════════════════════════════════════════════
   ANIMATED BACKGROUND SYSTEM
   Orb glow + dot-grid texture via ::before / ::after
═══════════════════════════════════════════════ */

/* Ensure slide content sits above pseudo-elements */
.slide::before,
.slide::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* ── Primary floating orb ────────────────────── */
.slide::before {
  width: 80vmax; height: 80vmax;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(46,108,246,.22) 0%,
    rgba(46,108,246,.07) 45%,
    transparent 68%);
  filter: blur(72px);
  top: -30%; right: -22%;
  animation: orbGlow 22s ease-in-out infinite alternate;
  will-change: transform;
}

/* ── Dot-grid texture ────────────────────────── */
.slide::after {
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.038) 1px, transparent 1px);
  background-size: 36px 36px;
  animation: gridShimmer 10s ease-in-out infinite alternate;
}

/* ── Orb animation ───────────────────────────── */
@keyframes orbGlow {
  0%   { transform: translate(0,    0)     scale(1);    }
  25%  { transform: translate(-6vw, 4vh)   scale(1.06); }
  50%  { transform: translate(-10vw, 9vh)  scale(.97);  }
  75%  { transform: translate(-5vw, 14vh)  scale(1.03); }
  100% { transform: translate(-14vw, 7vh)  scale(.99);  }
}

@keyframes gridShimmer {
  0%   { opacity: .55; }
  100% { opacity: 1;   }
}

/* ── Per-slide orb accent colors ─────────────── */
.bg-1::before  {
  background: radial-gradient(circle at center, rgba(46,108,246,.26) 0%, rgba(14,165,233,.10) 45%, transparent 68%);
}
.bg-2::before  {
  background: radial-gradient(circle at center, rgba(109,40,217,.22) 0%, rgba(46,108,246,.08) 45%, transparent 68%);
  animation-duration: 26s;
}
.bg-3::before {
  background: radial-gradient(circle at center, rgba(46,108,246,.24) 0%, rgba(99,102,241,.10) 45%, transparent 68%);
  animation-duration: 19s;
}
.bg-7::before  {
  background: radial-gradient(circle at center, rgba(6,182,212,.20) 0%, rgba(46,108,246,.10) 45%, transparent 68%);
  animation-duration: 18s; top: -25%; right: -18%;
}
.bg-8::before  { animation-duration: 24s; }
.bg-9::before  {
  background: radial-gradient(circle at center, rgba(46,108,246,.20) 0%, rgba(6,182,212,.08) 45%, transparent 68%);
}
.bg-11::before {
  background: radial-gradient(circle at center, rgba(34,197,94,.16) 0%, rgba(46,108,246,.10) 45%, transparent 68%);
  animation-duration: 20s;
}
.bg-12::before {
  background: radial-gradient(circle at center, rgba(251,146,60,.14) 0%, rgba(167,139,250,.10) 45%, transparent 68%);
  animation-duration: 28s;
}
.bg-13::before {
  background: radial-gradient(circle at center, rgba(46,108,246,.28) 0%, rgba(99,102,241,.12) 45%, transparent 68%);
  animation-duration: 16s;
}

/* Second ambient glow at bottom-left for hero slides */
.bg-1::after,
.bg-3::after,
.bg-13::after {
  background-image:
    radial-gradient(circle, rgba(255,255,255,.038) 1px, transparent 1px),
    radial-gradient(circle at 15% 85%, rgba(99,102,241,.12) 0%, transparent 50%);
  background-size: 36px 36px, 100% 100%;
}

/* ── Light theme: mute effects significantly ─── */
html.theme-light .slide::before { opacity: .22; }
html.theme-light .slide::after  { opacity: .30; }