/* ============================================================
   TechYugAi — present.css
   Native, on-theme KDMC presentation (extends style.css).
   ============================================================ */

/* ---- Gate ---- */
.gate-wrap{ min-height:100vh; display:grid; place-items:center; padding:100px 22px 60px; }
.gate{
  width:100%; max-width:440px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:34px; box-shadow:var(--shadow); backdrop-filter:blur(10px);
}
.gate .ico{ width:56px; height:56px; border-radius:15px; background:var(--grad-soft); border:1px solid var(--border-2); display:grid; place-items:center; margin-bottom:18px; }
.gate .ico svg{ width:26px; height:26px; stroke:var(--brand-3); }
.gate h1{ font-size:24px; margin-bottom:8px; }
.gate p{ color:var(--muted); font-size:14px; margin-bottom:22px; }
.gate .err{ color:#ff6b6b; font-size:13px; min-height:18px; margin-top:8px; }
.gate .hint{ color:var(--faint); font-size:12px; margin-top:16px; text-align:center; }

/* ---- Top bar additions ---- */
.topbar-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.who{ color:var(--muted); font-size:13px; } .who b{ color:var(--text); }
.deck-tabs{ display:flex; gap:8px; }
.deck-tab{
  font-size:13px; font-weight:600; padding:8px 15px; border-radius:999px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border-2); color:var(--muted); transition:.2s;
}
.deck-tab:hover{ color:var(--text); }
.deck-tab.active{ background:var(--grad); color:#fff; border-color:transparent; }
.dl-link{ font-size:13px; color:var(--muted); padding:8px 12px; border:1px solid var(--border-2); border-radius:999px; transition:.2s; }
.dl-link:hover{ color:var(--brand-3); border-color:var(--brand); }
.logout{ font-size:13px; color:var(--faint); cursor:pointer; background:none; border:0; }
.logout:hover{ color:var(--brand-3); }

/* ---- Presentation shell ---- */
.present{ padding-top:0; }
.deck{ display:none; }
.deck.active{ display:block; }

.pslide{
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 30px) 0 70px;
  scroll-margin-top:0;
  position:relative;
}
.pslide + .pslide{ border-top:1px solid var(--border); }
.pslide-inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
body.presenting{ scroll-snap-type:y proximity; }
.pslide{ scroll-snap-align:start; }

.ptitle{ font-size:clamp(26px,4vw,46px); letter-spacing:-.02em; margin:14px 0 6px; line-height:1.1; }
.muted-inline{ font-size:.5em; color:var(--muted); font-weight:500; letter-spacing:0; }
.note-line{ color:var(--faint); font-size:12.5px; font-style:italic; margin-top:12px; }
.accent-line{ color:var(--brand-3); font-style:italic; font-size:14px; margin:4px 0 10px; }

/* hero slide */
.pslide-hero .phero-title{ font-size:clamp(40px,7vw,82px); letter-spacing:-.03em; margin:18px auto 10px; line-height:1.05; }
.phero-sub{ font-size:clamp(18px,2.4vw,26px); color:var(--brand-3); font-weight:600; }
.phero-foot{ color:var(--faint); font-size:12.5px; margin-top:34px; }
.pslide-cta .ptitle{ max-width:18ch; margin-inline:auto; }

/* card variants */
.card .ico{ font-size:24px; line-height:1; }
.card .ico.violet{ background:var(--violet-soft, rgba(122,92,255,.16)); }
.card.sm{ padding:20px; }
.card.sm h3{ font-size:16px; }
.card.sm p{ font-size:13px; }
.ptag{ font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--brand-3); font-weight:600; margin-bottom:6px; }
.ptag.violet{ color:#b9a3ff; }
.card.iconrow{ display:flex; gap:16px; align-items:flex-start; }
.iconrow .ir-ico{ flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:22px; background:var(--grad-soft); border:1px solid var(--border-2); }
.iconrow .ir-ico.violet{ background:rgba(122,92,255,.16); }
.iconrow h3{ font-size:17px; margin-bottom:5px; }
.iconrow p{ color:var(--muted); font-size:14px; }

/* row cards (gaps) */
.rowcards{ display:grid; gap:16px; }
.rowcard{ display:flex; gap:16px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px; }
.rowcard .rc-ico{ flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:22px; background:var(--grad-soft); border:1px solid var(--border-2); }
.rowcard .rc-ico.warn{ background:rgba(217,119,6,.16); border-color:rgba(217,119,6,.4); }
.rowcard h4{ font-size:16.5px; margin-bottom:5px; }
.rowcard p{ color:var(--muted); font-size:14px; }

/* tables */
.ptable{ width:100%; border-collapse:collapse; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.ptable th{ background:var(--surface-2); text-align:left; font-size:12.5px; padding:11px 14px; color:var(--text); font-weight:600; border-bottom:1px solid var(--border); }
.ptable td{ padding:9px 14px; font-size:13px; color:var(--muted); border-bottom:1px solid var(--border); }
.ptable tr:last-child td{ border-bottom:0; }
.ptable td b{ color:var(--text); font-weight:600; }

/* architecture boxes */
.stack-col{ display:flex; flex-direction:column; gap:0; }
.arch-box{ border-radius:16px; padding:22px; border:1px solid var(--border-2); }
.arch-box.arch-primary{ background:var(--grad-soft); }
.arch-box.arch-dr{ background:var(--surface); }
.arch-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.arch-ico{ font-size:22px; }
.arch-label{ font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); font-weight:600; }
.arch-box h4{ font-size:18px; margin-bottom:4px; }
.arch-box p{ color:var(--muted); font-size:13.5px; }
.arch-box.big h4{ font-size:16px; }
.arch-rel{ text-align:center; color:var(--faint); font-size:12px; font-style:italic; padding:10px 0; }
.reverse-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center; }
.reverse-arrow{ font-size:34px; color:var(--brand); text-align:center; }
.ptick{ margin-top:12px; display:grid; gap:7px; }
.ptick li{ position:relative; padding-left:20px; color:var(--muted); font-size:13.5px; }
.ptick li::before{ content:"\2713"; position:absolute; left:0; color:var(--brand-3); font-weight:700; }

/* phases */
.phaserows{ display:grid; gap:14px; }
.phaserow{ display:flex; align-items:center; gap:18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 22px; }
.phaserow .pnum{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-weight:700; font-size:16px; }
.phaserow .pbody{ flex:1; }
.phaserow h4{ font-size:16px; margin-bottom:3px; }
.phaserow p{ color:var(--muted); font-size:13px; }
.phaserow .ppill{ flex:0 0 auto; font-size:12.5px; font-weight:600; color:var(--brand-3); background:var(--grad-soft); border:1px solid var(--border-2); border-radius:999px; padding:7px 14px; }

/* uptime card */
.uptime-card{ margin-top:18px; background:var(--grad-soft); border:1px solid var(--border-2); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; }
.ut-label{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); font-weight:600; }
.ut-num{ font-size:40px; font-weight:700; line-height:1.1; }
.ut-sub{ font-size:12px; color:var(--faint); font-style:italic; }

/* KPIs + flow */
.kpis{ display:flex; gap:14px; flex-wrap:wrap; }
.kpi{ flex:1; min-width:110px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; text-align:center; }
.kp-num{ font-size:24px; font-weight:700; }
.kp-lbl{ font-size:11.5px; color:var(--muted); margin-top:4px; }
.flow{ display:grid; gap:10px; }
.flow-step{ background:var(--surface); border:1px solid var(--border-2); border-radius:12px; padding:13px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.flow-step b{ font-size:13.5px; } .flow-step span{ font-size:12px; color:var(--muted); font-style:italic; text-align:right; }
.impact{ margin-top:14px; background:var(--grad-soft); border:1px solid var(--border-2); border-radius:12px; padding:12px 14px; font-size:13px; font-weight:600; color:var(--brand-3); }

/* AI platform layers */
.layers{ display:grid; gap:10px; }
.layer{ display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:15px 18px; flex-wrap:wrap; }
.layer b{ font-size:15px; min-width:200px; }
.layer .lsub{ color:var(--muted); font-size:13px; }
.ldot{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.ldot.v{ background:var(--brand-2); } .ldot.g{ background:var(--brand); }

/* roadmap */
.roadcol{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.road-head{ padding:16px 18px; font-size:20px; font-weight:700; color:#fff; display:flex; flex-direction:column; }
.road-head span{ font-size:13px; font-weight:500; opacity:.9; margin-top:2px; }
.road-head.v{ background:linear-gradient(135deg,#6D28D9,#7C3AED); }
.road-head.v2{ background:linear-gradient(135deg,#7C3AED,#9333EA); }
.road-head.g{ background:linear-gradient(135deg,#0F6837,#15803D); }
.roadcol .ptick{ padding:16px 18px; margin-top:0; }

/* step cards */
.stepcard{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px 22px; text-align:center; }
.stepcard .stepnum{ width:46px; height:46px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-weight:700; font-size:18px; margin:0 auto 14px; }
.stepcard h3{ font-size:17px; margin-bottom:7px; }
.stepcard p{ color:var(--muted); font-size:13.5px; }

/* floating nav */
.pnav{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:80;
  display:flex; align-items:center; gap:6px; background:var(--nav-bg);
  border:1px solid var(--border-2); border-radius:999px; padding:7px 9px; backdrop-filter:blur(14px); box-shadow:var(--shadow); }
.pnav button{ width:38px; height:38px; border-radius:50%; border:0; background:var(--surface-2); color:var(--text); font-size:20px; cursor:pointer; transition:.2s; display:grid; place-items:center; }
.pnav button:hover{ background:var(--grad); color:#fff; }
.pnav .count{ font-size:13px; color:var(--muted); min-width:62px; text-align:center; }

/* side dots */
.pdots{ position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:75; display:flex; flex-direction:column; gap:9px; }
.pdots button{ width:9px; height:9px; border-radius:50%; background:var(--border-2); border:0; cursor:pointer; padding:0; transition:.2s; }
.pdots button:hover{ background:var(--muted); }
.pdots button.active{ background:var(--brand-3); transform:scale(1.4); box-shadow:0 0 8px var(--brand-3); }

/* responsive */
@media (max-width:940px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .reverse-grid{ grid-template-columns:1fr; }
  .reverse-arrow{ transform:rotate(90deg); }
}
@media (max-width:720px){
  body.presenting{ scroll-snap-type:none; }
  .pslide{ min-height:auto; padding:calc(var(--nav-h) + 24px) 0 48px; }
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .topbar-right{ gap:8px; }
  .who, .dl-link{ display:none; }       /* keep top bar compact on mobile */
  .deck-tab{ padding:7px 11px; font-size:12px; }
  .pdots{ display:none !important; }
  .phaserow{ flex-wrap:wrap; }
  .phaserow .ppill{ margin-left:64px; }
  .layer b{ min-width:auto; }
  .flow-step span{ text-align:left; }
}