/* ============================================================
   Smart Transportation & Smart Energy Workshop — slide deck
   ============================================================ */
:root{
  --bg:#040b18;
  --teal:#19e3c6; --green:#7dff7a; --blue:#4d8dff; --amber:#ffb84d; --pink:#ff5e9c; --violet:#9b7bff;
  --accent:var(--teal); --accent2:var(--blue);
  --text:#eef4ff; --muted:#a3b4d1;
  --glass:rgba(255,255,255,.055); --glass-b:rgba(255,255,255,.14);
  --mx:0; --my:0;
  --ease:cubic-bezier(.2,.8,.2,1);
  --pad:clamp(18px,4vw,64px);
}
/* accent per slide */
body[data-sid="s2"]{--accent:#19e3c6;--accent2:#9b7bff}
body[data-sid="s3"]{--accent:#7dff7a;--accent2:#19e3c6}
body[data-sid="s4"]{--accent:#4d8dff;--accent2:#19e3c6}
body[data-sid="s4q"]{--accent:#19e3c6;--accent2:#7dff7a}
body[data-sid="s1-doa"]{--accent:#7dff7a;--accent2:#19e3c6}
body[data-sid="s1-cert"]{--accent:#ffb84d;--accent2:#19e3c6}
body[data-sid="s4w"]{--accent:#19e3c6;--accent2:#7dff7a}
body[data-sid="s5"]{--accent:#7dff7a;--accent2:#ffb84d}
body[data-sid="s6"]{--accent:#4d8dff;--accent2:#19e3c6}
body[data-sid="s6p"]{--accent:#4d8dff;--accent2:#19e3c6}
body[data-sid="s7"]{--accent:#ffb84d;--accent2:#7dff7a}
body[data-sid="s7p"]{--accent:#ffb84d;--accent2:#7dff7a}
body[data-sid="s8"]{--accent:#ff5e9c;--accent2:#9b7bff}
body[data-sid="s8p"]{--accent:#ff5e9c;--accent2:#9b7bff}
body[data-sid="s9"]{--accent:#ffb84d;--accent2:#ff5e9c}
body[data-sid="s10"]{--accent:#19e3c6;--accent2:#7dff7a}
body[data-sid="s11"]{--accent:#19e3c6;--accent2:#4d8dff}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--text);
  overflow:hidden;-webkit-font-smoothing:antialiased;
  transition:--accent .6s;
}
h1,h2,h3{font-family:"Sora","Inter",sans-serif;letter-spacing:-.02em;line-height:1.08}
svg{display:inline-block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;flex:none}
b{font-weight:600}
kbd{font:600 .8em "Inter",sans-serif;padding:.15em .5em;border:1px solid var(--glass-b);border-bottom-width:2px;border-radius:6px;background:rgba(255,255,255,.08)}

/* ---------- ambient background ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(70px);opacity:.42;mix-blend-mode:screen;will-change:transform}
.b1{background:radial-gradient(circle,var(--accent),transparent 62%);top:-20vmax;left:-15vmax;animation:drift1 22s ease-in-out infinite}
.b2{background:radial-gradient(circle,var(--accent2),transparent 62%);bottom:-25vmax;right:-15vmax;animation:drift2 26s ease-in-out infinite}
.b3{background:radial-gradient(circle,#2a3f8f,transparent 62%);top:30%;left:35%;width:40vmax;height:40vmax;animation:drift3 30s ease-in-out infinite;opacity:.35}
.blob{transition:background 1.2s ease}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vmax,6vmax) scale(1.15)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-9vmax,-7vmax) scale(.95)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}33%{transform:translate(-6vmax,4vmax)}66%{transform:translate(5vmax,-5vmax)}}

.grid-floor{
  position:absolute;left:-20%;right:-20%;bottom:-10%;height:50%;
  background-image:linear-gradient(to right,rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:70px 70px;
  transform:perspective(500px) rotateX(62deg);transform-origin:50% 0;
  animation:floor 3s linear infinite;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 80%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 80%,transparent);
}
@keyframes floor{to{background-position:0 70px}}
#net{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55))}

/* ---------- progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:50;background:rgba(255,255,255,.06)}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 12px var(--accent);transition:width .7s var(--ease)}

/* ---------- parallax ---------- */
.px{transform:translate3d(calc(var(--mx)*var(--depth,10)*1px),calc(var(--my)*var(--depth,10)*1px),0);transition:transform .25s ease-out;will-change:transform}
.px[data-depth="-14"]{--depth:-14}.px[data-depth="-9"]{--depth:-9}.px[data-depth="-20"]{--depth:-20}
.px[data-depth="12"]{--depth:12}.px[data-depth="16"]{--depth:16}.px[data-depth="18"]{--depth:18}.px[data-depth="20"]{--depth:20}.px[data-depth="22"]{--depth:22}.px[data-depth="26"]{--depth:26}

/* ---------- slides ---------- */
#deck{position:relative;z-index:1;height:100%;height:100dvh}
.slide{
  position:absolute;inset:0;display:grid;place-items:center;padding:var(--pad);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(7%) scale(.96);filter:blur(8px);
  transition:opacity .75s ease,transform .8s var(--ease),filter .75s ease,visibility 0s linear .8s;
}
.slide.enter-l{transform:translateX(-7%) scale(.96)}
.slide.active{opacity:1;visibility:visible;pointer-events:auto;transform:none;filter:none;transition-delay:0s}
.slide.exit-l{transform:translateX(-7%) scale(.96)}
.slide.exit-r{transform:translateX(7%) scale(.96)}
.inner{position:relative;width:min(1240px,100%);max-height:100%;overflow:auto;scrollbar-width:none;padding:4px}
.inner::-webkit-scrollbar{display:none}
.inner.center{text-align:center;display:flex;flex-direction:column;align-items:center}

/* entrance animations (triggered when .slide becomes .active) */
.a{opacity:0}
.slide.active .a{animation:rise .9s var(--ease) both;animation-delay:var(--d,0s)}
.slide.active .a.zoom{animation-name:zoom}
.slide.active .a.fromL{animation-name:fromL}
.slide.active .a.fromR{animation-name:fromR}
@keyframes rise{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}
@keyframes zoom{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes fromL{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:none}}
@keyframes fromR{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:none}}

/* floating loop */
.float{animation:float 6s ease-in-out infinite;animation-delay:var(--fd,0s)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- typography ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:clamp(.78rem,1.3vw,1rem);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.9em}
.eyebrow .dot{width:.6em;height:.6em;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.hero{font-size:clamp(2rem,6.2vw,5.4rem);font-weight:800;text-shadow:0 10px 50px rgba(0,0,0,.5)}
h2{font-size:clamp(1.5rem,3.6vw,3rem);font-weight:700;max-width:22ch;margin-bottom:.5em}
.inner.center h2{margin-inline:auto}
.g1{background:linear-gradient(90deg,var(--accent),#fff 140%);-webkit-background-clip:text;background-clip:text;color:transparent}
.g2{background:linear-gradient(90deg,var(--accent2),#fff 140%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(1rem,1.6vw,1.3rem);color:var(--muted);max-width:60ch;line-height:1.6}
.lead b{color:var(--text)}
.theme{font-size:clamp(1rem,1.9vw,1.5rem);color:var(--muted);max-width:40ch;line-height:1.55;margin-top:.4em}
.theme strong{color:var(--accent);font-weight:600}
.rule{height:3px;width:120px;margin:1.2em auto;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 18px var(--accent)}
.hint{color:var(--muted);font-size:.85rem;margin-top:2em;animation:blink 2.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.5}50%{opacity:1}}
.slide.active .hint.a{animation:rise .9s var(--ease) both,blink 2.4s ease-in-out infinite;animation-delay:var(--d,0s),calc(var(--d,0s) + .9s)}

/* glass */
.glass,.card,.chip,.speaker,.tl-body,.hub-card,.hub-node,.step,.pill,.help-box,.orbit-core{
  background:var(--glass);border:1px solid var(--glass-b);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);
}

/* SDG badges */
.sdg-row{display:flex;flex-wrap:wrap;gap:.6em;justify-content:center;margin-top:1.6em}
.sdg{display:inline-block;padding:.3em .8em;border-radius:8px;font-weight:700;font-size:.8em;color:#111;letter-spacing:.03em;white-space:nowrap;box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.sdg7{background:#FCC30B}.sdg9{background:#FD6925}.sdg11{background:#FD9D24}
.topics .sdg{font-size:.78em;padding:.15em .55em;margin:0 .15em;vertical-align:.05em}

.pill{display:inline-flex;align-items:center;gap:.6em;padding:.7em 1.3em;border-radius:999px;font-weight:500;font-size:clamp(.85rem,1.3vw,1.05rem);margin-top:1.6em;color:var(--text)}
.pill svg{color:var(--accent);font-size:1.25em}

/* logo */
.logo-slot{height:clamp(64px,10vh,110px);margin-bottom:1.4em;display:flex;align-items:center;justify-content:center}
.logo-slot img{height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 10px 25px rgba(0,0,0,.5))}
.logo-slot .logo-ph{display:none}
.logo-slot.missing img{display:none}
.logo-slot.missing .logo-ph{display:grid;place-items:center;height:100%;aspect-ratio:2.4;border:2px dashed var(--glass-b);border-radius:14px;color:var(--muted);font-weight:700;letter-spacing:.3em;font-size:.8rem}

/* ---------- floating deco icons ---------- */
.deco{position:absolute;inset:0;pointer-events:none;z-index:0}
.fi{position:absolute;left:var(--x);top:var(--y);font-size:calc(clamp(34px,5vw,74px)*var(--s,1));color:var(--accent);opacity:.35;filter:drop-shadow(0 18px 24px rgba(0,0,0,.5)) drop-shadow(0 0 12px color-mix(in srgb,var(--accent) 50%,transparent));transition:color 1s}
.fi.star{color:var(--amber);animation:float 6s ease-in-out infinite,twinkle 3s ease-in-out infinite;animation-delay:var(--fd,0s),var(--fd,0s)}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.7}}
.slide .inner{z-index:1}

/* ---------- slide 2 : orbit ---------- */
.s-approach .inner{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,60px);align-items:center}
.s-approach .inner>.eyebrow{grid-column:1}
.s-approach h2{grid-column:1}
.s-approach .lead{grid-column:1}
.s-approach .pill{grid-column:1;justify-self:start}
.orbit{grid-column:2;grid-row:1/span 4;position:relative;aspect-ratio:1;max-height:70vh;width:100%;display:grid;place-items:center}
.orbit::before{content:"";position:absolute;inset:12%;border:1px dashed rgba(255,255,255,.18);border-radius:50%;animation:spin 60s linear infinite}
.orbit::after{content:"";position:absolute;inset:28%;border:1px solid rgba(255,255,255,.1);border-radius:50%;animation:spin 40s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit-core{position:relative;z-index:2;width:38%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--accent) 35%,transparent),var(--glass) 70%);box-shadow:0 0 60px -10px var(--accent),0 20px 50px -20px #000}
.orbit-core .float{display:flex;flex-direction:column;align-items:center;gap:.3em;text-align:center;font-family:"Sora";font-weight:700;font-size:clamp(.7rem,1.2vw,1rem);line-height:1.2}
.orbit-core svg{font-size:2.6em;color:var(--accent)}
.chip{position:absolute;left:calc(50% + var(--ox)*31%);top:calc(50% + var(--oy)*31%);translate:-50% -50%;border-radius:16px;font-size:clamp(.72rem,1.1vw,.95rem);font-weight:500;white-space:nowrap}
.chip .float{display:flex;align-items:center;gap:.6em;padding:.8em 1.1em}
.chip svg{color:var(--accent);font-size:1.4em}

/* ---------- slide 3 : cards ---------- */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px);margin-top:1.2em}
.card{border-radius:22px;transition:transform .4s var(--ease),border-color .4s}
.card:hover{border-color:var(--accent)}
.card .float{padding:clamp(16px,2vw,28px);display:flex;flex-direction:column;gap:.9em;height:100%}
.card .num{font-family:"Sora";font-weight:800;font-size:clamp(1.6rem,3vw,2.6rem);background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.card .ic{font-size:2.2em;color:var(--accent)}
.card p{color:var(--muted);line-height:1.55;font-size:clamp(.82rem,1.15vw,1.02rem)}
.card p b{color:var(--text)}

/* ---------- slide 4 : timeline ---------- */
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:1em;flex-wrap:wrap}
.head-row .hint{margin:0 0 .8em}
.timeline{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(16px,3vw,40px);margin-top:.6em}
.tl-col{position:relative;display:flex;flex-direction:column;gap:clamp(8px,1.1vh,14px);padding-left:14px}
.tl-col::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:linear-gradient(to bottom,var(--accent),var(--accent2));opacity:.5;border-radius:2px}
.tl{display:grid;grid-template-columns:auto 1fr;gap:.9em;align-items:center}
.tl .time{font-family:"Sora";font-weight:700;font-size:clamp(.7rem,1vw,.85rem);color:var(--accent);min-width:7ch;position:relative}
.tl .time::before{content:"";position:absolute;left:-19px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--accent);transform:translateY(-50%);box-shadow:0 0 10px var(--accent)}
.tl-body{display:flex;gap:.8em;align-items:flex-start;padding:.7em 1em;border-radius:14px;font-size:clamp(.78rem,1.1vw,.98rem);line-height:1.35;transition:transform .3s var(--ease)}
.tl-body:hover{transform:translateX(4px)}
.tl-body.hi{border-color:color-mix(in srgb,var(--accent) 35%,var(--glass-b))}
.tl-body svg{color:var(--accent);font-size:1.4em;margin-top:.05em}
.tl-body small{display:block;color:var(--muted);font-size:.84em;margin-top:.25em;line-height:1.4}

/* ---------- session slides ---------- */
.session-grid{display:grid;gap:clamp(14px,2vw,30px);margin-top:.8em;align-items:start}
.session-grid.one{grid-template-columns:minmax(260px,.9fr) 1.4fr}
.session-grid.two{grid-template-columns:1fr 1fr 1.25fr}
.speaker{border-radius:26px;text-align:center;transition:border-color .4s}
.speaker:hover{border-color:var(--accent)}
.speaker .float{padding:clamp(16px,2vw,26px)}
.photo{position:relative;width:clamp(110px,14vw,190px);aspect-ratio:1;margin:0 auto 1em;border-radius:50%;padding:5px;background:conic-gradient(from 0deg,var(--accent),var(--accent2),var(--accent));animation:spin 10s linear infinite;box-shadow:0 0 40px -8px var(--accent)}
.photo img,.photo .initials{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 20%;animation:spin 10s linear infinite reverse;display:block}
.photo .initials{display:none;place-items:center;background:linear-gradient(135deg,#1c2b4a,#0c1628);font-family:"Sora";font-weight:800;font-size:2.4em;color:var(--accent)}
.photo.missing img{display:none}.photo.missing .initials{display:grid}
.photo .badge-online{position:absolute;bottom:2px;left:50%;translate:-50% 30%;display:inline-flex;align-items:center;gap:.4em;padding:.3em .7em;border-radius:999px;background:var(--accent);color:#111;font-size:.68rem;font-weight:700;white-space:nowrap;box-shadow:0 6px 16px -4px #000}
.speaker h3{font-size:clamp(.95rem,1.4vw,1.25rem);margin-bottom:.4em}
.speaker p{color:var(--muted);font-size:clamp(.72rem,1vw,.9rem);line-height:1.45}
.topics .label{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.8em}
.topics ul{list-style:none;display:flex;flex-direction:column;gap:.55em}
.topics li{display:flex;gap:.8em;align-items:flex-start;padding:.75em 1em;border-radius:14px;background:var(--glass);border:1px solid var(--glass-b);font-size:clamp(.8rem,1.15vw,1rem);line-height:1.4;transition:transform .3s var(--ease),border-color .3s}
.topics li:hover{transform:translateX(5px);border-color:var(--accent)}
.topics li svg{color:var(--accent);font-size:1.35em;margin-top:.05em}
.topics ul.compact li{padding:.55em .9em;font-size:clamp(.74rem,1.05vw,.92rem)}

/* SDG wheel (slide 5) */
.sdg-wheel{position:absolute;right:-6vw;top:50%;translate:0 -50%;width:clamp(260px,38vw,620px);aspect-ratio:1;border-radius:50%;opacity:.28;
  background:conic-gradient(#E5243B 0 5.88%,#DDA63A 0 11.76%,#4C9F38 0 17.64%,#C5192D 0 23.52%,#FF3A21 0 29.4%,#26BDE2 0 35.28%,#FCC30B 0 41.16%,#A21942 0 47.04%,#FD6925 0 52.92%,#DD1367 0 58.8%,#FD9D24 0 64.68%,#BF8B2E 0 70.56%,#3F7E44 0 76.44%,#0A97D9 0 82.32%,#56C02B 0 88.2%,#00689D 0 94.08%,#19486A 0 100%);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 59%);mask:radial-gradient(circle,transparent 58%,#000 59%);
  animation:spin 80s linear infinite,float 6s ease-in-out infinite}

/* road (slide 6) */
.road{position:absolute;left:0;right:0;bottom:0;height:16vh;pointer-events:none;overflow:hidden;opacity:.55}
.road .lane{position:absolute;left:0;right:0;bottom:36%;height:2px;background:repeating-linear-gradient(90deg,var(--accent) 0 40px,transparent 40px 70px);animation:lane 1.2s linear infinite;opacity:.6}
@keyframes lane{to{background-position:-70px 0}}
.road .drive{position:absolute;bottom:40%;left:-10%;font-size:clamp(34px,5vw,64px);color:var(--accent);filter:drop-shadow(0 0 12px var(--accent));animation:drive 14s linear infinite}
.road .drive.bus{animation-duration:20s;animation-delay:-8s;bottom:38%}
.road .drive.bike{animation-duration:26s;animation-delay:-15s;bottom:42%;font-size:clamp(26px,3.6vw,46px)}
@keyframes drive{from{left:-10%}to{left:105%}}

/* energy (slide 7) */
.energy{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sunburst{position:absolute;right:-12vw;top:-16vh;width:clamp(260px,40vw,640px);aspect-ratio:1;border-radius:50%;opacity:.5;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 60%,transparent) 0 18%,transparent 19%),repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--accent) 30%,transparent) 0 6deg,transparent 6deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 70%);mask:radial-gradient(circle,#000 20%,transparent 70%);
  animation:spin 90s linear infinite}
.turbine{position:absolute;bottom:0;width:4px;height:clamp(120px,24vh,260px);opacity:.5}
.turbine.t1{left:6vw}.turbine.t2{left:16vw;height:clamp(90px,17vh,180px);opacity:.35}
.turbine .pole{position:absolute;left:50%;bottom:0;width:4px;height:100%;translate:-50% 0;background:linear-gradient(to top,transparent,var(--accent2))}
.turbine .blades{position:absolute;left:50%;top:0;width:clamp(80px,14vh,150px);aspect-ratio:1;translate:-50% -50%;animation:spin 5s linear infinite}
.turbine .blades::before,.turbine .blades::after,.turbine .blades{background:none}
.turbine .blades::before{content:"";position:absolute;inset:0;background:
  linear-gradient(var(--accent2),var(--accent2)) 50% 0/4px 50% no-repeat,
  linear-gradient(var(--accent2),var(--accent2)) 50% 0/4px 50% no-repeat,
  linear-gradient(var(--accent2),var(--accent2)) 50% 0/4px 50% no-repeat;
  border-radius:50%}
.turbine .blades::after{content:"";position:absolute;inset:0;border-radius:50%;background:
  conic-gradient(from 0deg,transparent 0 118deg,var(--accent2) 119deg 121deg,transparent 122deg 238deg,var(--accent2) 239deg 241deg,transparent 242deg 358deg,var(--accent2) 359deg);
  -webkit-mask:radial-gradient(circle,#000 0 50%,transparent 51%);mask:radial-gradient(circle,#000 0 50%,transparent 51%)}

/* ---------- slide 8 : hub ---------- */
.hub{position:relative;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;gap:clamp(12px,2vw,28px) clamp(12px,3vw,50px);align-items:center;margin-top:1.6em;padding:1.2em 0}
.hub-node{grid-column:2;grid-row:1/span 2;border-radius:50%;width:clamp(150px,19vw,250px);aspect-ratio:1;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--accent) 35%,transparent),var(--glass) 70%);box-shadow:0 0 70px -12px var(--accent);position:relative;z-index:2}
.hub-node .float{display:flex;flex-direction:column;align-items:center;gap:.25em;font-family:"Sora";font-size:clamp(.75rem,1.2vw,1.05rem);line-height:1.2}
.hub-node svg{font-size:2.4em;color:var(--accent);margin-bottom:.2em}
.hub-node small{font-family:"Inter";font-weight:400;color:var(--muted);font-size:.75em}
.hub-card{border-radius:20px;position:relative;z-index:2}
.hub-card:nth-of-type(2){grid-column:1;grid-row:1;justify-self:end}
.hub-card:nth-of-type(3){grid-column:3;grid-row:1;justify-self:start}
.hub-card:nth-of-type(4){grid-column:1;grid-row:2;justify-self:end}
.hub-card:nth-of-type(5){grid-column:3;grid-row:2;justify-self:start}
.hub-card .float{display:flex;align-items:center;gap:.8em;padding:clamp(12px,1.5vw,22px) clamp(16px,2vw,28px);font-size:clamp(.8rem,1.2vw,1.05rem);max-width:30ch}
.hub-card svg{font-size:1.8em;color:var(--accent)}
.ring{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:ring 4s ease-out infinite;width:clamp(150px,19vw,250px);aspect-ratio:1;pointer-events:none}
.ring.r2{animation-delay:1.3s}.ring.r3{animation-delay:2.6s}
@keyframes ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.2);opacity:0}}

/* ---------- slide 9 : steps ---------- */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,18px);margin-top:1.4em;position:relative}
.steps::before{content:"";position:absolute;left:4%;right:4%;top:36px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:.35;z-index:0}
.step{border-radius:20px;position:relative;z-index:1;transition:border-color .3s}
.step:hover{border-color:var(--accent)}
.step .float{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5em;padding:clamp(14px,1.6vw,24px) clamp(10px,1.2vw,18px)}
.step svg{font-size:clamp(1.6rem,2.4vw,2.2rem);color:var(--accent);padding:.35em;border-radius:50%;background:rgba(255,255,255,.06);width:1.9em;height:1.9em}
.step b{font-family:"Sora";font-size:clamp(.8rem,1.15vw,1rem)}
.step span{color:var(--muted);font-size:clamp(.68rem,.95vw,.85rem);line-height:1.4}
.step.gold{border-color:color-mix(in srgb,var(--amber) 55%,transparent);box-shadow:0 0 40px -12px var(--amber)}
.step.gold svg{color:var(--amber)}

/* ---------- slide 11 : photo frame ---------- */
.s-photo .inner{justify-content:center}
.s-photo .hero{font-size:clamp(2.2rem,7vw,6.2rem)}
.s-photo .cam{font-size:1.5em;color:var(--accent)}
.frame{position:absolute;width:clamp(50px,8vw,110px);aspect-ratio:1;border:3px solid var(--accent);opacity:.7;box-shadow:0 0 20px -4px var(--accent);animation:framepulse 3s ease-in-out infinite}
.frame.tl{top:var(--pad);left:var(--pad);border-right:0;border-bottom:0;border-radius:14px 0 0 0}
.frame.tr{top:var(--pad);right:var(--pad);border-left:0;border-bottom:0;border-radius:0 14px 0 0}
.frame.bl{bottom:var(--pad);left:var(--pad);border-right:0;border-top:0;border-radius:0 0 0 14px}
.frame.br{bottom:var(--pad);right:var(--pad);border-left:0;border-top:0;border-radius:0 0 14px 0}
@keyframes framepulse{0%,100%{opacity:.45}50%{opacity:.95}}

/* ---------- shared smart-city scene (slides 1 → 2) ---------- */
.scene{position:fixed;left:0;right:0;bottom:0;height:min(50vh,37.5vw);z-index:0;pointer-events:none;
  transform-origin:50% 100%;opacity:0;transform:translateY(26%) scale(1.35);
  transition:transform 1.4s var(--ease),opacity 1s ease,filter 1s ease}
.scene>.px{width:100%;height:100%;display:flex;justify-content:center;overflow:visible}
.scene svg{display:block;height:100%;width:auto;flex:none;overflow:visible}
body[data-kind="title"] .scene{opacity:1;transform:none}
body[data-sid="s2"] .scene{opacity:.5;transform:translateY(16%) scale(1.22);filter:blur(1.5px)}
body[data-kind="title"] .grid-floor,body[data-sid="s2"] .grid-floor{opacity:0}
.grid-floor{transition:opacity 1s ease}

.scene .sun{animation:sunpulse 7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes sunpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.scene .cloud{animation:cloud 60s linear infinite;animation-delay:var(--cd,0s)}
@keyframes cloud{from{transform:translateX(-200px)}to{transform:translateX(1900px)}}
.scene .blades{animation:spin 4.5s linear infinite;animation-delay:var(--sd,0s);transform-box:fill-box;transform-origin:center}
.scene .pline{fill:none;stroke:var(--teal);stroke-width:2;stroke-dasharray:6 12;opacity:.45;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-18}}
.scene .pulse{fill:#bffff5;filter:drop-shadow(0 0 6px var(--teal))}
.scene .lane{stroke:#ffd98a;stroke-width:3;stroke-dasharray:46 34;opacity:.45}
.scene .halo{opacity:.08;animation:halo 4s ease-in-out infinite}
@keyframes halo{50%{opacity:.16}}
.scene .w{animation:win 9s steps(1) infinite;animation-delay:var(--wd,0s)}
@keyframes win{0%,55%{opacity:.85}60%,100%{opacity:.14}}
.scene .screen{animation:halo 1.6s ease-in-out infinite;opacity:.9}

/* car choreography */
.scene .ev{transform:translateX(-520px);will-change:transform}
.scene .glow{filter:blur(6px);opacity:.45}
.scene .beam{opacity:.35}
.scene .wheel{transform-box:fill-box;transform-origin:center}
.scene .charge,.scene .cable{opacity:0}
body[data-kind="title"] .ev{animation:evIn 2.8s cubic-bezier(.15,.7,.2,1) forwards}
body[data-kind="title"] .wheel{animation:spin .45s linear 6}
body[data-kind="title"] .cable{animation:fadein .5s ease 2.9s forwards}
body[data-kind="title"] .charge{animation:chargePulse 1.1s ease-in-out 3.1s infinite}
body[data-sid="s2"] .ev{animation:evOut 2.4s cubic-bezier(.6,0,.9,.4) forwards}
body[data-sid="s2"] .wheel{animation:spin .35s linear infinite}
@keyframes evIn{from{transform:translateX(-520px)}to{transform:translateX(942px)}}
@keyframes evOut{from{transform:translateX(942px)}to{transform:translateX(2100px)}}
@keyframes fadein{to{opacity:1}}
@keyframes chargePulse{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
.scene .charge{transform-box:fill-box;transform-origin:center}

/* slide 1 ⇄ 2 : vertical "camera" move instead of a horizontal slide */
.s-title{place-items:start center;padding-top:clamp(18px,5vh,64px)}
.s-title .hero{font-size:clamp(1.8rem,5vw,4.3rem)}
.s-title .logo-slot{height:clamp(56px,9vh,96px);margin-bottom:1em}
.s-title .sdg-row{margin-top:1.1em}
.s-title .hint{margin-top:1.3em}
.s-title.exit-l,.s-title.enter-l{transform:translateY(-12%) scale(1.08)}
.s-approach:not(.active){transform:translateY(12%) scale(.96)}
.s-approach.exit-l{transform:translateX(-7%) scale(.96)}

/* ---------- UI ---------- */
.ui{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:clamp(10px,1.6vw,20px) clamp(14px,2.5vw,32px);pointer-events:none}
.ui>*{pointer-events:auto}
.counter{font-family:"Sora";font-weight:700;font-size:.85rem;color:var(--muted);display:flex;gap:.35em;align-items:baseline}
.counter #cur{color:var(--text);font-size:1.25em}
.counter i{opacity:.4;font-style:normal}
.nav{display:flex;gap:6px}
.nav button,.nav a{width:40px;height:40px;border-radius:12px;border:1px solid var(--glass-b);background:rgba(10,20,40,.55);backdrop-filter:blur(12px);color:var(--text);font-size:1.15rem;display:grid;place-items:center;cursor:pointer;transition:background .25s,border-color .25s,transform .2s}
.nav button:hover,.nav a:hover{background:rgba(255,255,255,.12);border-color:var(--accent);transform:translateY(-2px)}
.nav button.on{background:var(--accent);color:#111;border-color:var(--accent)}
.nav button svg,.nav a svg{stroke-width:2}

.help{position:fixed;inset:0;z-index:60;background:rgba(2,8,20,.7);backdrop-filter:blur(8px);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;padding:20px}
.help.show{opacity:1;visibility:visible;transition-delay:0s}
.help-box{border-radius:22px;padding:clamp(20px,3vw,36px);width:min(520px,100%);transform:scale(.95);transition:transform .3s var(--ease)}
.help.show .help-box{transform:none}
.help-box h3{font-size:1.3rem;margin-bottom:.8em;color:var(--accent)}
.help-box table{width:100%;border-collapse:collapse;font-size:.9rem}
.help-box td{padding:.45em .4em;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top}
.help-box td:first-child{white-space:nowrap;color:var(--muted);width:40%}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .cards4{grid-template-columns:repeat(2,1fr)}
  .session-grid.two{grid-template-columns:1fr 1fr}
  .session-grid.two .topics{grid-column:1/-1}
  .steps{grid-template-columns:repeat(3,1fr)}
  .steps::before{display:none}
}
@media (max-width:760px){
  :root{--pad:18px}
  .inner{padding-bottom:64px}
  .hero{font-size:clamp(1.9rem,9vw,3rem)}
  h2{font-size:clamp(1.35rem,6vw,2rem);max-width:none}
  .s-approach .inner{display:flex;flex-direction:column;align-items:flex-start}
  .orbit{width:100%;max-width:360px;align-self:center;max-height:none}
  .chip{font-size:.7rem}
  .cards4{grid-template-columns:1fr;gap:10px}
  .card .float{flex-direction:row;align-items:center;gap:.9em}
  .card .num{font-size:1.4rem}.card .ic{font-size:1.6em}
  .timeline{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr;gap:.3em}
  .tl .time::before{display:none}
  .session-grid,.session-grid.one,.session-grid.two{grid-template-columns:1fr}
  .speaker .float{display:grid;grid-template-columns:auto 1fr;gap:.2em 1em;text-align:left;align-items:center}
  .photo{width:84px;margin:0;grid-row:1/span 2}
  .hub{grid-template-columns:1fr;grid-template-rows:auto;gap:10px}
  .hub-node{grid-column:1;grid-row:auto;justify-self:center;width:150px}
  .hub-card:nth-of-type(n){grid-column:1;grid-row:auto;justify-self:stretch}
  .hub-card .float{max-width:none}
  .ring{display:none}
  .steps{grid-template-columns:repeat(2,1fr)}
  .deco .fi{opacity:.18}
  .road{height:10vh}
  .sdg-wheel{opacity:.14}
  .frame{width:40px}
  .hint{display:none}
  /* portrait: taller scene, panned so the EV + charging station sit centre-screen */
  .scene{height:38vh}
  body[data-kind="title"] .scene{transform:translateX(-36%)}
  body[data-sid="s2"] .scene{transform:translateX(-36%) translateY(16%) scale(1.22)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.2s!important}
  .a{opacity:1}
}

/* ============================================================
   PRESENTATION SCALE — large, projector-friendly type.
   --u = 1% of a 16:9 stage, so every screen keeps the same
   proportions (1080p → 19.2px, 4K → 38.4px). Floors keep it
   readable on small laptops / 4:3 projectors.
   ============================================================ */
@media (min-width:761px){
  :root{--u:min(1vw,1.778vh);--pad:calc(var(--u)*3.2)}
  .slide{padding:calc(var(--u)*3.4) calc(var(--u)*4.5) calc(var(--u)*4.2)}
  .inner{width:min(100%,calc(var(--u)*92))}

  .eyebrow{font-size:max(13px,calc(var(--u)*1.2))}
  .hero{font-size:max(34px,calc(var(--u)*5.6))}
  .s-title .hero{font-size:max(30px,calc(var(--u)*4.7))}
  .s-photo .hero{font-size:max(36px,calc(var(--u)*6.2))}
  h2{font-size:max(26px,calc(var(--u)*3.4));max-width:28ch}
  .lead{font-size:max(17px,calc(var(--u)*1.6));max-width:none}
  .theme{font-size:max(17px,calc(var(--u)*1.75));max-width:46ch}
  .sdg-row .sdg{font-size:max(13px,calc(var(--u)*1.05))}
  .pill{font-size:max(15px,calc(var(--u)*1.35))}
  .hint{font-size:max(12px,calc(var(--u)*1))}
  .logo-slot,.s-title .logo-slot{height:max(54px,calc(var(--u)*5.6))}

  /* slide 2 */
  .s-approach .inner{grid-template-columns:1.05fr 1fr}
  .orbit-core .float{font-size:max(13px,calc(var(--u)*1.3))}
  .chip{font-size:max(13px,calc(var(--u)*1.15));white-space:normal;width:max-content;max-width:calc(var(--u)*16)}
  .chip .float{padding:.7em 1em}

  /* slide 3 */
  .cards4{gap:calc(var(--u)*1.6)}
  .card .float{padding:calc(var(--u)*2)}
  .card .num{font-size:max(28px,calc(var(--u)*3.4))}
  .card .ic{font-size:max(28px,calc(var(--u)*3))}
  .card p{font-size:max(15px,calc(var(--u)*1.42))}

  /* slide 4 */
  .tl .time{font-size:max(13px,calc(var(--u)*1.2))}
  .tl-body{font-size:max(14px,calc(var(--u)*1.3));padding:.6em .9em}
  .tl-body small{font-size:.82em}
  .tl-col{gap:calc(var(--u)*1)}

  /* session slides */
  .photo{width:max(110px,calc(var(--u)*11.5))}
  .photo .badge-online{font-size:max(11px,calc(var(--u)*.9))}
  .speaker .float{padding:calc(var(--u)*1.8)}
  .speaker h3{font-size:max(16px,calc(var(--u)*1.5))}
  .speaker p{font-size:max(13px,calc(var(--u)*1.12))}
  .topics .label{font-size:max(12px,calc(var(--u)*1))}
  .topics li{font-size:max(15px,calc(var(--u)*1.4))}
  .topics ul.compact li{font-size:max(14px,calc(var(--u)*1.25));padding:.5em .85em}
  .session-grid.two{grid-template-columns:.95fr .95fr 1.5fr}

  /* slide 8 */
  .hub-node{width:max(150px,calc(var(--u)*17))}
  .ring{width:max(150px,calc(var(--u)*17))}
  .hub-node .float{font-size:max(14px,calc(var(--u)*1.4))}
  .hub-card .float{font-size:max(15px,calc(var(--u)*1.45));max-width:calc(var(--u)*30)}

  /* slide 9 */
  .step svg{font-size:max(24px,calc(var(--u)*2.6))}
  .step b{font-size:max(14px,calc(var(--u)*1.4))}
  .step span{font-size:max(13px,calc(var(--u)*1.12))}
  .steps::before{top:calc(var(--u)*3.6)}

  /* controls */
  .counter{font-size:max(13px,calc(var(--u)*.95))}
  .nav button,.nav a{width:max(38px,calc(var(--u)*2.6));height:max(38px,calc(var(--u)*2.6));font-size:max(17px,calc(var(--u)*1.2))}
}
@media (min-width:761px){
  .inner{overflow:visible}
  .timeline{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tl{grid-template-columns:auto minmax(0,1fr)}
  body[data-sid="s2"] .scene{opacity:.32;transform:translateY(34%) scale(1.15)}
}
@media (min-width:761px){
  .orbit{max-height:62vh;max-width:62vh;justify-self:center}
}
@media (min-width:761px){
  .hub-card{width:calc(var(--u)*27)}
  .hub-card .float{max-width:none}
}
.s-title .hint{display:none}


/* Jalur logo penganjur & rakan (PBU, SOHO, EU, USM, APEX, CEMACS) atas panel putih supaya jelas pada latar gelap */
.logo-slot,.s-title .logo-slot{height:clamp(72px,13vh,140px)}
.logo-slot img{box-sizing:border-box;max-width:min(92vw,1100px);background:#fff;padding:.6em 1.4em;border-radius:16px;filter:drop-shadow(0 12px 28px rgba(0,0,0,.45))}

/* Tarikh & masa pada slaid tajuk (ganti baris SDG) */
.when{display:flex;flex-wrap:wrap;gap:.7em;justify-content:center;margin-top:1.1em}
.when span{display:inline-flex;align-items:center;gap:.55em;padding:.6em 1.2em;border-radius:999px;background:rgba(10,20,40,.72);border:1px solid var(--glass-b);backdrop-filter:blur(8px);color:var(--text);font-weight:600;font-size:clamp(.95rem,1.4vw,1.2rem)}
.when svg{color:var(--accent);font-size:1.2em}
.when span{background:rgba(13,148,136,.5);border-color:rgba(94,234,212,.55);box-shadow:0 8px 24px -10px rgba(0,0,0,.6)}
.when span+span{background:rgba(59,111,216,.5);border-color:rgba(147,180,255,.55)}
.when svg{color:#fff}

/* Kad tentatif (slaid 4): warna ikut jenis slot, 50% lutsinar */
.s-tentative .tl-body{--c:217,119,6;--b:252,211,77;background:rgba(var(--c),.5);border:1px solid rgba(var(--b),.55);box-shadow:0 8px 24px -12px rgba(0,0,0,.6)}
.s-tentative .tl-col:first-child .tl:nth-child(2) .tl-body{--c:22,163,74;--b:134,239,172}   /* Sesi 1: SDG */
.s-tentative .tl-col:first-child .tl:nth-child(3) .tl-body{--c:13,148,136;--b:94,234,212}   /* Sesi 2: mobiliti */
.s-tentative .tl-col:first-child .tl:nth-child(4) .tl-body{--c:59,111,216;--b:147,180,255}  /* Sesi 3: tenaga */
.s-tentative .tl-col:last-child .tl:nth-child(2) .tl-body{--c:124,58,237;--b:196,181,253}   /* Aktiviti kumpulan */
.s-tentative .tl-col:last-child .tl:nth-child(3) .tl-body{--c:219,39,119;--b:249,168,212}   /* Pembentangan */
.s-tentative .tl-body svg{color:#fff}
.s-tentative .tl-body small{color:rgba(255,255,255,.85)}

/* Label sesi / masa di atas tajuk (slaid 2–10) dalam kad berwarna, 50% lutsinar — ikut warna aksen slaid */
.slide .eyebrow{--c:13,148,136;--b:94,234,212;width:fit-content;justify-self:start;padding:.55em 1.1em;border-radius:999px;background:rgba(var(--c),.5);border:1px solid rgba(var(--b),.6);color:#fff;box-shadow:0 8px 24px -12px rgba(0,0,0,.6)}
.slide .eyebrow .dot{background:#fff;box-shadow:0 0 0 0 #fff}
#s3 .eyebrow,#s5 .eyebrow{--c:22,163,74;--b:134,239,172}   /* hijau */
#s4 .eyebrow,#s6 .eyebrow{--c:59,111,216;--b:147,180,255}  /* biru */
#s7 .eyebrow,#s9 .eyebrow{--c:217,119,6;--b:252,211,77}    /* amber */
#s8 .eyebrow{--c:219,39,119;--b:249,168,212}               /* merah jambu */

/* ===== Kursor tema Smart Energy (js/cursor.js) ===== */
html.has-cursor,html.has-cursor *{cursor:none!important}
.cursor-dot,.cursor-ring,.cursor-spark,.cursor-pulse{position:fixed;left:0;top:0;pointer-events:none;z-index:9999}
.cursor-dot,.cursor-ring{opacity:0;transition:opacity .25s}
html.cursor-visible .cursor-dot,html.cursor-visible .cursor-ring{opacity:1}
.cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--accent),0 0 14px 3px var(--accent)}
.cursor-ring{width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;color:var(--accent);transition:opacity .25s,width .25s,height .25s,margin .25s}
.cursor-ring .cursor-orbit{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--accent) 0 12%,transparent 12% 25%,var(--accent) 25% 37%,transparent 37% 50%,var(--accent) 50% 62%,transparent 62% 75%,var(--accent) 75% 87%,transparent 87%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));opacity:.85;animation:cursorSpin 3.2s linear infinite}
.cursor-ring svg{width:15px;height:15px;fill:currentColor;stroke:none;filter:drop-shadow(0 0 6px currentColor);animation:cursorBolt 1.6s ease-in-out infinite;transform:translate(9px,9px);transition:transform .25s}
html.cursor-hot .cursor-ring{width:64px;height:64px;margin:-32px 0 0 -32px}
html.cursor-hot .cursor-ring .cursor-orbit{animation-duration:1.2s}
html.cursor-hot .cursor-ring svg{transform:translate(0,0) scale(1.25)}
html.cursor-press .cursor-ring{width:36px;height:36px;margin:-18px 0 0 -18px}
.cursor-spark{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:cursorSpark .7s ease-out forwards}
.cursor-pulse{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid var(--accent);box-shadow:0 0 18px var(--accent),inset 0 0 12px var(--accent);animation:cursorPulse .6s ease-out forwards}
@keyframes cursorSpin{to{transform:rotate(360deg)}}
@keyframes cursorBolt{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes cursorSpark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@keyframes cursorPulse{to{transform:scale(5);opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor-ring .cursor-orbit,.cursor-ring svg{animation:none}}
.center .eyebrow{justify-self:center;margin-left:auto;margin-right:auto}

/* ===== Slaid 5: QR kehadiran (js/attendance.js) ===== */
.attend-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,4vw,64px);align-items:center}
.attend-steps{list-style:none;margin:1.4em 0 0;padding:0;display:flex;flex-direction:column;gap:.8em}
.attend-steps li{display:flex;gap:1em;align-items:center;padding:.85em 1.1em;border-radius:16px;background:rgba(13,148,136,.5);border:1px solid rgba(94,234,212,.55);box-shadow:0 8px 24px -12px rgba(0,0,0,.6)}
.attend-steps li:nth-child(2){background:rgba(59,111,216,.5);border-color:rgba(147,180,255,.55)}
.attend-steps li:nth-child(3){background:rgba(22,163,74,.5);border-color:rgba(134,239,172,.55)}
.attend-steps li>span{flex:none;width:2.2em;height:2.2em;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0b3d22;font-family:"Sora";font-weight:800}
.attend-steps b{display:block;font-size:clamp(.9rem,1.3vw,1.15rem)}.attend-steps small{display:block;color:rgba(255,255,255,.85);font-size:.85em;margin-top:.15em}
.attend-qr{display:flex;flex-direction:column;align-items:center;gap:1em}
.qr-card{position:relative;width:min(100%,clamp(240px,30vw,400px));aspect-ratio:1;padding:clamp(14px,1.6vw,22px);border-radius:26px;background:#fff;box-shadow:0 0 0 6px rgba(25,227,198,.35),0 0 60px -10px var(--accent),0 24px 50px -20px rgba(0,0,0,.7)}
.qr-card::after{content:"";position:absolute;inset:-14px;border-radius:34px;border:2px solid var(--accent);opacity:.6;animation:qrPulse 2.4s ease-out infinite;pointer-events:none}
.qr-code,.qr-code img,.qr-code canvas{width:100%!important;height:100%!important;display:block;image-rendering:pixelated}
.qr-closed{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:.4em;text-align:center;padding:1.5em;border-radius:inherit;background:#f1f5f9;color:#0f172a}
.qr-closed svg{font-size:2.6em;color:#0d9488}.qr-closed small{color:#475569}
.qr-card.is-closed .qr-code{visibility:hidden}.qr-card.is-closed .qr-closed{display:flex}.qr-card.is-closed::after{animation:none;opacity:0}
.qr-caption{display:flex;gap:.5em;align-items:center;color:var(--muted);font-size:.9rem;margin:0}.qr-caption svg{color:var(--accent)}
@keyframes qrPulse{0%{transform:scale(.96);opacity:.7}100%{transform:scale(1.08);opacity:0}}
@media (max-width:760px){.attend-grid{grid-template-columns:1fr}.attend-qr{order:-1}}

/* ===== Slaid pembentangan PowerPoint (paparan penuh) — js/app.js ===== */
.slide.s-pres{padding:0;place-items:stretch}
.pres-stage{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(44px,6vh,72px) clamp(10px,2vw,28px) clamp(54px,8vh,84px);cursor:pointer}
.pres-img{max-width:100%;max-height:100%;width:auto;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 70px -20px rgba(0,0,0,.75);transition:opacity .25s ease}
.pres-img.loading{opacity:.35}
.pres-top{position:absolute;top:clamp(8px,1.4vh,16px);left:clamp(10px,2vw,28px);right:clamp(10px,2vw,28px);display:flex;justify-content:space-between;align-items:center;gap:1em;z-index:2;pointer-events:none}
.pres-chip{display:inline-flex;align-items:center;gap:.6em;padding:.45em 1em;border-radius:999px;font-size:clamp(.7rem,1vw,.9rem);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:color-mix(in srgb,var(--accent) 45%,rgba(10,20,40,.6));border:1px solid color-mix(in srgb,var(--accent) 60%,transparent)}
.pres-chip .dot{width:.55em;height:.55em;border-radius:50%;background:#fff}
.pres-count{font-family:"Sora";font-weight:700;font-size:clamp(.8rem,1.1vw,1rem);color:#fff;background:rgba(10,20,40,.65);border:1px solid var(--glass-b);padding:.35em .9em;border-radius:999px}
.pres-progress{position:absolute;left:clamp(10px,2vw,28px);right:clamp(10px,2vw,28px);bottom:clamp(40px,6vh,64px);height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;z-index:2}
.pres-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .3s ease}
.pres-link{display:inline-flex;align-items:center;gap:.6em;margin-top:1.1em;padding:.7em 1.3em;border-radius:999px;font-weight:700;color:#fff;text-decoration:none;background:color-mix(in srgb,var(--accent) 55%,rgba(10,20,40,.5));border:1px solid color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 10px 26px -12px rgba(0,0,0,.7);transition:transform .2s ease,background .2s ease}
.pres-link:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--accent) 75%,rgba(10,20,40,.4))}
.pres-link svg{fill:currentColor;stroke:none}.pres-link small{font-weight:500;opacity:.85}
.pres-link-row{display:flex;justify-content:center;margin-top:.4em}

/* Slaid 6: Welcoming Remarks (kata aluan) */
.s-welcome .welcome-speaker{width:min(460px,90vw);margin:1.4em auto 0}
.s-welcome .welcome-speaker .photo{width:clamp(150px,17vw,230px)}
.s-welcome .welcome-speaker h3{font-size:clamp(1.15rem,1.9vw,1.6rem)}
.s-welcome .welcome-speaker p{font-size:clamp(.85rem,1.2vw,1.05rem)}

/* Slaid 8: Welcoming Remarks — gambar penuh + nama & jawatan di sebelah */
.s-welcome .welcome-grid{display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;gap:clamp(20px,4vw,72px);align-items:center;max-width:1100px;margin:0 auto}
.s-welcome .welcome-photo{position:relative;justify-self:center;height:min(76vh,720px);aspect-ratio:760/1353;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 70px -18px var(--accent),0 30px 60px -24px rgba(0,0,0,.75)}
.s-welcome .welcome-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.s-welcome .welcome-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;background:linear-gradient(to top,rgba(10,20,40,.35),transparent)}
.s-welcome .welcome-text h2{margin:.25em 0 .4em}
.s-welcome .welcome-text .rule{margin:0 0 1.1em}
.s-welcome .welcome-name{font-family:"Sora";font-weight:800;font-size:clamp(1.4rem,2.6vw,2.3rem);margin:0 0 .7em;color:#fff}
.s-welcome .welcome-roles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6em}
.s-welcome .welcome-roles li{display:flex;align-items:center;gap:.75em;padding:.7em 1.1em;border-radius:14px;font-size:clamp(.95rem,1.4vw,1.2rem);font-weight:600;color:#fff;background:rgba(13,148,136,.5);border:1px solid rgba(94,234,212,.55)}
.s-welcome .welcome-roles li:nth-child(2){background:rgba(22,163,74,.5);border-color:rgba(134,239,172,.55)}
.s-welcome .welcome-roles li:nth-child(3){background:rgba(59,111,216,.5);border-color:rgba(147,180,255,.55)}
.s-welcome .welcome-roles svg{font-size:1.25em;color:#fff;flex:none}
@media (max-width:760px){.s-welcome .welcome-grid{grid-template-columns:1fr}.s-welcome .welcome-photo{height:42vh}}

/* Slaid 9: Certificate & Souvenir Presentation */
.cert-banner{display:inline-flex;align-items:center;gap:.8em;margin-top:1.3em;padding:.8em 1.6em;border-radius:999px;font-family:"Sora";font-weight:800;font-size:clamp(1.1rem,2.2vw,1.9rem);color:#fff;background:rgba(217,119,6,.5);border:1px solid rgba(252,211,77,.6);box-shadow:0 0 50px -14px rgba(255,184,77,.8),0 14px 34px -14px rgba(0,0,0,.7)}
.cert-banner svg{font-size:1.15em;color:#ffd27a}

/* Slaid 7: Doa Recitation */
.s-doa .welcome-speaker{width:min(460px,90vw);margin:1.4em auto 0}
.s-doa .welcome-speaker .photo{width:clamp(150px,17vw,230px)}
.s-doa .welcome-speaker h3{font-size:clamp(1.15rem,1.9vw,1.6rem)}
.s-doa .welcome-speaker p{font-size:clamp(.85rem,1.2vw,1.05rem)}

body[data-sid="s5p"]{--accent:#7dff7a;--accent2:#ffb84d}

/* ===== Muat-ke-skrin (js/app.js: measureUi + fitSlide) =====
   --ui-safe = ruang di bawah yang diduduki butang navigasi & nombor slaid (diukur oleh JS).
   Kandungan setiap slaid dihadkan di atas ruang ini dan dikecilkan (--fit) jika perlu. */
:root{--ui-safe:76px}
.slide{padding-bottom:calc(var(--ui-safe) + 4px)!important}
.slide > .inner{transform:translate(var(--fit-x,0px),var(--fit-y,0px)) scale(var(--fit,1));transform-origin:0 0}
.slide > .inner.fit-measure{max-height:none!important;overflow:visible!important}
.slide > .inner:not(.fit-scroll){max-height:none;overflow:visible}
.slide > .inner.fit-scroll{max-height:100%;overflow:auto;align-self:stretch}
/* Slaid pembentangan: imej dihadkan antara label atas dan butang bawah */
.pres-stage{inset:0;padding:clamp(44px,6.5vh,70px) clamp(10px,2vw,28px) calc(var(--ui-safe) + 14px)}
.pres-img{max-width:100%;max-height:calc(100vh - clamp(44px,6.5vh,70px) - var(--ui-safe) - 14px);max-height:calc(100dvh - clamp(44px,6.5vh,70px) - var(--ui-safe) - 14px);width:auto;height:auto}
.pres-progress{bottom:calc(var(--ui-safe) + 2px)}
@media (max-width:760px){.inner{padding-bottom:4px}}
/* Slaid 8 responsif: gambar tidak melebihi lajur; skrin menegak → satu lajur */
.s-welcome .welcome-photo{max-width:100%}
@media (orientation:portrait) and (max-width:1100px){
  .s-welcome .welcome-grid{grid-template-columns:1fr;gap:1.2em;text-align:center}
  .s-welcome .welcome-photo{height:min(40vh,460px)}
  .s-welcome .welcome-text .eyebrow{margin-inline:auto}
  .s-welcome .welcome-text .rule{margin:0 auto 1em}
  .s-welcome .welcome-roles{align-items:center}
  .s-welcome .welcome-roles li{width:100%;max-width:520px;justify-content:center}
}

/* ===== Slaid penceramah (1 penceramah = 1 slaid) & slaid kandungan sesi ===== */
body[data-sid="s5-a"]{--accent:#7dff7a;--accent2:#ffb84d}
body[data-sid="s6-a"],body[data-sid="s6-b"]{--accent:#4d8dff;--accent2:#19e3c6}
body[data-sid="s7-a"],body[data-sid="s7-b"]{--accent:#ffb84d;--accent2:#7dff7a}
#s5-a .eyebrow{--c:22,163,74;--b:134,239,172}
#s6-a .eyebrow,#s6-b .eyebrow{--c:59,111,216;--b:147,180,255}
#s7-a .eyebrow,#s7-b .eyebrow{--c:217,119,6;--b:252,211,77}
.s-speaker .welcome-photo{aspect-ratio:4/5;height:min(70vh,640px)}
.s-speaker .welcome-photo .badge-online{position:absolute;left:50%;bottom:14px;translate:-50% 0;z-index:2;font-size:clamp(.75rem,1.1vw,.95rem)}
.speaker-session{font-family:"Sora";font-weight:700;font-size:clamp(1.05rem,1.8vw,1.6rem);line-height:1.3;color:#e8eefc;margin:.5em 0 .6em;max-width:30ch}
.s-speaker .welcome-roles li{font-size:clamp(.9rem,1.25vw,1.1rem)}
/* Slaid kandungan: topik lebar penuh, lebih besar */
.session-grid.topics-only{grid-template-columns:1fr;max-width:1100px}
.session-grid.topics-only .topics .label{font-size:clamp(.8rem,1.1vw,1rem)}
.session-grid.topics-only .topics li,.session-grid.topics-only .topics ul.compact li{font-size:clamp(1rem,1.65vw,1.4rem);padding:.65em 1em}
.session-grid.topics-only .topics ul{gap:.6em}
@media (orientation:portrait) and (max-width:1100px){.s-speaker .welcome-photo{height:min(38vh,440px)}}
.s-speaker .welcome-grid{max-width:1280px}
.s-speaker .welcome-photo{height:min(72vh,680px)}
.s-speaker .welcome-photo .badge-online{display:inline-flex;align-items:center;gap:.45em;padding:.45em 1em;border-radius:999px;background:var(--accent);color:#111;font-weight:800;box-shadow:0 8px 20px -6px rgba(0,0,0,.7)}
.s-speaker .welcome-photo .badge-online svg{color:#111}
.session-grid.topics-only{max-width:1250px}
.session-grid.topics-only .topics li,.session-grid.topics-only .topics ul.compact li{font-size:clamp(1.05rem,1.95vw,1.75rem)}
.session-grid.topics-only .pres-link{font-size:clamp(.95rem,1.3vw,1.2rem)}
.session-grid.topics-only .topics li,.session-grid.topics-only .topics ul.compact li{font-size:clamp(1rem,min(1.95vw,3.1vh),1.75rem);padding:.6em 1em}

/* Venue pada slaid tajuk / foto */
.when span.when-venue{background:rgba(124,58,237,.5);border-color:rgba(196,181,253,.55)}

/* Butang "Mula Program" (= kekunci N) dalam baris navigasi */
.nav .nav-start{width:auto!important;padding:0 1.05em;display:inline-flex;align-items:center;gap:.5em;font-family:"Sora";font-weight:700;font-size:max(13px,calc(var(--u,10px)*.95))!important;white-space:nowrap}
.nav .nav-start svg{font-size:1.15em;fill:currentColor}
.nav .nav-start.is-start{background:var(--accent);color:#06121f;border-color:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:startPulse 2.2s ease-out infinite}
.nav .nav-start.is-start:hover{background:var(--accent);filter:brightness(1.1)}
.nav .nav-start[hidden]{display:none!important}
@keyframes startPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
@media (max-width:760px){.nav .nav-start{padding:0;width:40px!important;justify-content:center}.nav .nav-start span{display:none}.nav{gap:4px}.nav button,.nav a{width:36px;height:36px}}
/* Butang Mula Program: ikon sahaja, di hujung baris butang */
.nav .nav-start{width:max(38px,calc(var(--u,10px)*2.6))!important;padding:0;justify-content:center;display:grid;place-items:center}
@media (max-width:760px){.nav .nav-start{width:36px!important}}
/* Slaid QR borang maklum balas */
a.qr-card{display:block;text-decoration:none;color:inherit}
.s-feedback .qr-caption{font-family:"Sora";font-weight:600;color:var(--text,#e2e8f0);font-size:clamp(.85rem,1.1vw,1.1rem)}
/* ---------- Bar slot penceramah (bawah, semua slaid) ---------- */
.ui{flex-wrap:wrap;column-gap:14px;row-gap:8px}
.slots{display:flex;gap:6px;justify-content:center;flex:0 1 auto;min-width:0}
.slots .slot{display:inline-flex;align-items:center;gap:.45em;height:40px;padding:0 .95em;border-radius:12px;border:1px solid var(--glass-b);background:rgba(10,20,40,.55);backdrop-filter:blur(12px);color:var(--muted);text-decoration:none;font-family:"Sora";font-weight:600;font-size:.82rem;white-space:nowrap;transition:background .25s,border-color .25s,color .25s,transform .2s}
.slots .slot svg{width:1.15em;height:1.15em;color:var(--accent);stroke-width:2;flex:none}
.slots .slot:hover{color:var(--text);border-color:var(--accent);background:rgba(255,255,255,.1);transform:translateY(-2px)}
.slots .slot.is-current{color:#06121f;background:var(--accent);border-color:var(--accent)}
.slots .slot.is-current svg{color:#06121f}
@media (max-width:1000px){.slots{order:-1;flex:1 1 100%}}
@media (max-width:760px){.slots{gap:4px}.slots .slot{height:34px;padding:0 .7em;font-size:.74rem}}
@media (max-width:480px){.slots .slot svg{display:none}.slots .slot{padding:0 .6em;flex:1 1 0;justify-content:center}}
.slots .slot b{font-weight:inherit}
@media (max-width:1280px){.slots .slot-long{display:none}}
@media (max-width:1000px) and (max-height:500px){.slots{order:0;flex:0 1 auto}.slots .slot{height:34px;padding:0 .6em;font-size:.72rem}.slots .slot svg{display:none}}
@media (max-width:480px){.slots{gap:3px}.slots .slot{padding:0 .3em;font-size:.68rem}}
@media (max-width:1000px) and (max-height:500px){.ui{column-gap:8px}.slots{gap:3px}.slots .slot{padding:0 .45em;font-size:.68rem;height:32px}.nav{gap:3px}.nav button,.nav a{width:32px!important;height:32px}}