/* Motivus presentation — tokens from the Motivus Brand Manual.
   Layout: a 1600x900 stage scaled to fit the window (desktop/tablet); a stacked reading layout under 760px. */
:root {
  --surface-page:#f3f5f8; --surface-card:#ffffff; --surface-sunken:#e9eef3; --surface-deep:#0f3b35;
  --line:#dde3ea; --line-strong:#7b8a99;
  --ink:#1a2433; --ink-body:#2c3e50; --ink-muted:#5a6a7a; --ink-faint:#8a9aaa;
  --on-deep:#ffffff; --on-deep-accent:#7fd6c8; --on-deep-muted:rgba(255,255,255,.72);
  --teal:#2e8b7a; --teal-strong:#2d7d72; --teal-ink:#1f6e62; --teal-soft:#e6f5f5; --on-teal:#ffffff;
  --purple:#5c3d8f; --purple-light:#7b52ab; --purple-soft:#ede4fa;
  --good:#1f9d5b; --good-ink:#157a46; --good-soft:#d1fae5;
  --warn:#d98a1f; --warn-ink:#92400e; --warn-soft:#fef3c7;
  --critical:#d1495b; --critical-ink:#b23245; --critical-soft:#fee2e2;
  --info:#1f7ec4; --info-soft:#eef4fb;
  --bezel:#1a2433;
  --viz-1:#0f8a7a; --viz-2:#e0761f; --viz-3:#6a4fc4; --viz-4:#6d9a1f; --viz-5:#2b8fd6; --viz-6:#b8890c; --viz-7:#d9506a; --viz-8:#8f3f8f;
  --shadow-card:0 2px 12px rgba(14,125,128,.08); --shadow-hover:0 6px 20px rgba(14,125,128,.14); --shadow-float:0 24px 48px -12px rgba(15,23,42,.22);
  --display:"Outfit", Roboto, system-ui, sans-serif; --sans:Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.2,0,0,1); --reveal:480ms;
  color-scheme:light;
}
* { box-sizing:border-box; }
html, body { height:100%; margin:0; }
body { background:var(--surface-page); color:var(--ink-body); font:15px/24px var(--sans); overflow:hidden; -webkit-font-smoothing:antialiased; }
button { font:inherit; color:inherit; cursor:pointer; }
:focus-visible { outline:2px solid var(--purple); outline-offset:3px; border-radius:12px; }
.num { font-variant-numeric:tabular-nums; }

/* ---------- chrome ---------- */
.chrome-top { position:fixed; inset:0 0 auto; height:60px; z-index:30; display:flex; align-items:center; gap:16px;
  padding:0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); transition:background .3s, color .3s; }
body.deep .chrome-top { color:var(--on-deep); }
.vmark { display:flex; align-items:center; gap:10px; background:none; border:0; padding:6px 8px; border-radius:10px; }
.vmark img { height:26px; display:block; }
.vmark .logo-color { display:block; } .vmark .logo-white { display:none; }
body.deep .vmark .logo-color { display:none; } body.deep .vmark .logo-white { display:block; }
.vmark:hover { background:rgba(127,214,200,.14); }
.chap-label { font:600 12px/16px var(--sans); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-muted); white-space:nowrap; min-width:150px; }
body.deep .chap-label { color:var(--on-deep-muted); }
.ribbon { flex:1; display:flex; gap:6px; height:24px; align-items:center; min-width:0; }
.rseg { flex:var(--n) 1 0; display:flex; gap:3px; height:24px; align-items:center; position:relative; }
.rtick { flex:1; height:4px; border-radius:2px; background:var(--line); border:0; padding:0; position:relative; transition:height .2s, background .2s; }
body.deep .rtick { background:rgba(255,255,255,.18); }
.rtick:hover { height:10px; }
.rtick.done { background:var(--teal); } body.deep .rtick.done { background:var(--on-deep-accent); }
.rtick.cur { background:var(--purple); height:8px; box-shadow:0 0 0 3px rgba(123,82,171,.22); }
body.deep .rtick.cur { background:#fff; }
.rtip { position:fixed; z-index:60; pointer-events:none; background:var(--ink); color:var(--surface-card); font:500 12px/16px var(--sans);
  padding:6px 10px; border-radius:8px; opacity:0; transform:translateY(4px); transition:opacity .15s, transform .15s; white-space:nowrap; }
.rtip.on { opacity:1; transform:none; }
.tools { display:flex; gap:4px; }
.tool { width:36px; height:36px; display:grid; place-items:center; border:0; background:none; border-radius:10px; color:inherit; }
.tool:hover { background:rgba(127,214,200,.16); }
.tool svg, .ic { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

.chrome-bot { position:fixed; inset:auto 0 0; height:56px; z-index:30; display:flex; align-items:center; gap:16px;
  padding:0 max(20px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(20px, env(safe-area-inset-left)); }
body.deep .chrome-bot { color:var(--on-deep); }
.navbtn { height:36px; padding:0 14px; display:flex; gap:6px; align-items:center; border-radius:999px; border:1px solid var(--line); background:var(--surface-card);
  font:600 14px/20px var(--sans); color:var(--ink); }
body.deep .navbtn { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); color:#fff; }
.navbtn:hover { box-shadow:var(--shadow-hover); }
.navbtn:disabled { opacity:.35; cursor:default; box-shadow:none; }
.navbtn.primary { background:var(--teal-strong); border-color:var(--teal-strong); color:var(--on-teal); }
.counter { font:500 13px/20px var(--sans); color:var(--ink-muted); }
body.deep .counter { color:var(--on-deep-muted); }
.stepdots { display:flex; gap:6px; margin-left:auto; }
.stepdots button { width:8px; height:8px; padding:0; border-radius:50%; border:0; background:var(--line-strong); opacity:.45; }
.stepdots button.on { opacity:1; background:var(--purple); width:22px; border-radius:4px; }
body.deep .stepdots button { background:#fff; }
.hint { font:500 12px/16px var(--sans); color:var(--ink-faint); background:none; border:0; }
body.deep .hint { color:var(--on-deep-muted); }
.credit { font:500 12px/16px var(--sans); color:var(--ink-faint); }
body.deep .credit { color:var(--on-deep-muted); }

/* ---------- stage ---------- */
.viewport { position:fixed; inset:0; display:grid; place-items:center; }
.deck-bg { position:fixed; inset:0; background:var(--surface-page); transition:background .5s var(--ease); }
body.deep .deck-bg { background:var(--surface-deep); }
.stage { width:1600px; height:900px; position:relative; transform-origin:center center; flex:none; }
.screen { position:absolute; inset:0; padding:92px 96px 84px; opacity:0; visibility:hidden; transform:translateX(40px);
  transition:opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease), visibility 0s linear var(--reveal); }
.screen.back { transform:translateX(-40px); }
.screen.live { opacity:1; visibility:visible; transform:none; transition:opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease); }
.screen.deep { color:var(--on-deep-muted); }
[data-step] { opacity:0; transform:translateY(14px); transition:opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease); }
[data-step].in { opacity:1; transform:none; }

/* type */
.eyebrow { font:600 13px/16px var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--teal-ink); margin:0 0 14px; }
.screen.deep .eyebrow { color:var(--on-deep-accent); }
h1, h2, h3 { font-family:var(--display); font-weight:600; color:var(--ink); margin:0; text-wrap:balance; }
.screen.deep h1, .screen.deep h2, .screen.deep h3 { color:var(--on-deep); }
.d-xl { font-size:76px; line-height:80px; letter-spacing:-.025em; }
.d-l { font-size:56px; line-height:60px; letter-spacing:-.02em; }
.d-m { font-size:44px; line-height:50px; letter-spacing:-.015em; }
.h-l { font-size:30px; line-height:36px; letter-spacing:-.01em; }
.h-m { font-size:22px; line-height:28px; }
.lead { font-size:20px; line-height:30px; color:var(--ink-muted); max-width:640px; margin:18px 0 0; }
.screen.deep .lead { color:var(--on-deep-muted); }
.body { font-size:16px; line-height:25px; color:var(--ink-body); }
.muted { color:var(--ink-muted); }
.badge { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:999px; font:600 13px/16px var(--sans); }
.badge.test { background:var(--purple-soft); color:var(--purple); }
.badge.dev { background:var(--surface-sunken); color:var(--ink-muted); border:1px dashed var(--line-strong); }
.badge.live { background:var(--good-soft); color:var(--good-ink); }
.chip { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface-card); font:500 14px/20px var(--sans); color:var(--ink-body); }
.screen.deep .chip { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); color:#fff; }
.card { background:var(--surface-card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-card); }
.btn { height:48px; padding:0 22px; border-radius:12px; display:inline-flex; align-items:center; gap:10px; font:600 16px/20px var(--sans); border:1px solid transparent; }
.btn.primary { background:var(--teal-strong); color:var(--on-teal); }
.screen.deep .btn.primary { background:#fff; color:var(--surface-deep); }
.btn.ghost { background:transparent; border-color:var(--line-strong); color:var(--ink); }
.screen.deep .btn.ghost { border-color:rgba(255,255,255,.4); color:#fff; }
.btn:hover { filter:brightness(1.06); box-shadow:var(--shadow-hover); }
.kbd { display:inline-block; min-width:22px; padding:1px 6px; border-radius:6px; border:1px solid currentColor; font:600 12px/18px var(--sans); text-align:center; opacity:.8; }
.tick-list { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.tick-list li { display:flex; gap:12px; align-items:flex-start; font-size:17px; line-height:24px; color:var(--ink-body); }
.tick-list li::before { content:""; flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%; background:var(--good-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23157a46' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat; }
.split { display:grid; grid-template-columns:520px 1fr; gap:64px; height:100%; align-items:center; }
.split.wide-left { grid-template-columns:600px 1fr; }
.icon-tile { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--teal-soft); color:var(--teal-ink); flex:none; }
.icon-tile .ic { width:28px; height:28px; }
.icon-tile.purple { background:var(--purple-soft); color:var(--purple); }

/* devices */
.device { position:relative; background:var(--bezel); box-shadow:var(--shadow-float); }
.device img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.device.tablet { border-radius:36px; padding:16px; }
.device.tablet img { border-radius:22px; }
.device.phone { border-radius:44px; padding:11px; }
.device.phone img { border-radius:34px; }
.device.browser { border-radius:14px; padding:0; background:var(--surface-card); border:1px solid var(--line); overflow:hidden; }
.device.browser .bar { height:36px; display:flex; align-items:center; gap:7px; padding:0 14px; background:var(--surface-sunken); border-bottom:1px solid var(--line); }
.device.browser .bar i { width:11px; height:11px; border-radius:50%; background:var(--line-strong); opacity:.5; }
.device.browser .bar .tabs { display:flex; gap:6px; margin-left:16px; }
.device.browser .bar .tabs button { height:24px; padding:0 12px; border-radius:7px; border:0; background:transparent; font:500 12px/16px var(--sans); color:var(--ink-muted); }
.device.browser .bar .tabs button.on { background:var(--surface-card); color:var(--ink); box-shadow:var(--shadow-card); }
.device.browser .view { position:relative; overflow:hidden; background:#fff; }
.device.browser .view img { width:100%; height:auto; transition:opacity .4s; }
.hotspot { position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; border:0; background:var(--purple); color:#fff; font:700 13px/30px var(--sans); text-align:center; padding:0; box-shadow:0 0 0 6px rgba(123,82,171,.25); animation:pulse 2.2s infinite; z-index:3; }
.hotspot:hover, .hotspot:focus-visible { animation:none; }
.hotspot .tipbox { position:absolute; left:40px; top:-6px; width:240px; text-align:left; background:var(--ink); color:var(--surface-card); font:500 13px/18px var(--sans); padding:10px 12px; border-radius:10px; opacity:0; pointer-events:none; transition:opacity .15s; }
.hotspot.flip .tipbox { left:auto; right:40px; }
.hotspot:hover .tipbox, .hotspot:focus-visible .tipbox { opacity:1; }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 4px rgba(123,82,171,.3); } 50% { box-shadow:0 0 0 11px rgba(123,82,171,0); } }

/* ---------- overlays ---------- */
.overlay { position:fixed; inset:0; z-index:50; opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility 0s linear .3s; }
.overlay.on { opacity:1; visibility:visible; transition:opacity .3s var(--ease); }
.scrim { position:absolute; inset:0; background:rgba(10,20,24,.55); backdrop-filter:blur(6px); }
/* hub */
#hub { background:radial-gradient(1200px 700px at 50% 45%, #145249 0%, #0f3b35 55%, #0a2925 100%); color:#fff; display:grid; place-items:center; }
.hub-inner { position:relative; width:min(92vmin, 860px); aspect-ratio:1; }
.hub-ring { position:absolute; inset:0; }
.hub-ring circle.orbit { fill:none; stroke:rgba(127,214,200,.25); stroke-width:1.2; stroke-dasharray:2 6; }
#hub.on .hub-ring .sweep { animation:sweep 1s var(--ease) both; }
@keyframes sweep { from { stroke-dashoffset:2400; } to { stroke-dashoffset:0; } }
.hub-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; width:280px; }
.hub-center img { width:200px; }
.hub-center p { margin:10px 0 0; font:500 13px/18px var(--sans); color:rgba(255,255,255,.7); }
.hub-node { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:8px; background:none; border:0; color:#fff; width:170px;
  opacity:0; transition:opacity .4s var(--ease), transform .4s var(--ease); }
#hub.on .hub-node { opacity:1; }
.hub-node .dot { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.07); border:1px solid rgba(127,214,200,.45); transition:background .2s, transform .2s; }
.hub-node .dot .ic { width:28px; height:28px; }
.hub-node small { font:600 11px/14px var(--sans); letter-spacing:.08em; color:var(--on-deep-accent); }
.hub-node span { font:600 16px/20px var(--display); text-align:center; }
.hub-node:hover .dot, .hub-node.cur .dot, .hub-node:focus-visible .dot { background:var(--on-deep-accent); color:var(--surface-deep); transform:scale(1.08); }
.hub-read { position:absolute; left:50%; bottom:-8px; transform:translate(-50%,100%); width:min(90vw,760px); display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.hub-read button { height:34px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#fff; font:500 14px/20px var(--sans); }
.hub-read button:hover { background:#fff; color:var(--surface-deep); }
.hub-close { position:absolute; top:16px; right:20px; }
.hub-title { position:absolute; top:22px; left:24px; font:600 13px/16px var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--on-deep-accent); }
/* palette */
.palette { position:absolute; left:50%; top:14vh; transform:translateX(-50%); width:min(640px, 92vw); background:var(--surface-card); border-radius:16px; box-shadow:var(--shadow-float); overflow:hidden; border:1px solid var(--line); }
.palette input { width:100%; height:60px; border:0; border-bottom:1px solid var(--line); padding:0 20px 0 52px; font:400 18px/24px var(--sans); background:transparent; color:var(--ink); outline:none; }
.palette .pi { position:absolute; left:18px; top:20px; color:var(--ink-muted); }
.palette ul { list-style:none; margin:0; padding:8px; max-height:52vh; overflow:auto; }
.palette li button { width:100%; display:flex; gap:12px; align-items:center; text-align:left; padding:10px 12px; border:0; background:none; border-radius:10px; color:var(--ink); }
.palette li button small { margin-left:auto; color:var(--ink-faint); font:500 12px/16px var(--sans); }
.palette li button.sel, .palette li button:hover { background:var(--teal-soft); }
.palette .empty { padding:18px; color:var(--ink-muted); }
/* grid overview */
.overview { position:absolute; inset:5vh 4vw; background:var(--surface-page); border-radius:20px; padding:28px; overflow:auto; box-shadow:var(--shadow-float); }
.overview h3 { font-size:22px; margin:6px 0 16px; }
.ov-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px; margin-bottom:22px; }
.ov-grid button { text-align:left; padding:16px; border-radius:14px; border:1px solid var(--line); background:var(--surface-card); min-height:96px; }
.ov-grid button:hover { box-shadow:var(--shadow-hover); border-color:var(--teal); }
.ov-grid button small { display:block; color:var(--teal-ink); font:600 12px/16px var(--sans); margin-bottom:6px; }
.ov-grid button span { font:600 16px/22px var(--display); color:var(--ink); }
/* shortcuts */
.sheet { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px,92vw); background:var(--surface-card); border-radius:16px; padding:28px; box-shadow:var(--shadow-float); }
.sheet table { width:100%; border-collapse:collapse; margin-top:12px; }
.sheet td { padding:8px 0; border-bottom:1px solid var(--line); color:var(--ink-body); }
.sheet td:last-child { text-align:right; }
.x-btn { position:absolute; top:16px; right:20px; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center; }
/* drawer */
.drawer { position:absolute; top:0; right:0; bottom:0; width:min(520px, 94vw); background:var(--surface-card); box-shadow:var(--shadow-float); padding:32px; overflow:auto; transform:translateX(100%); transition:transform .4s var(--ease); }
#drawer.on .drawer { transform:none; }
.drawer h3 { font-size:30px; line-height:36px; margin:14px 0 8px; }
.drawer .fam { font:600 12px/16px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--teal-ink); }
.drawer img { width:100%; border-radius:12px; border:1px solid var(--line); margin-top:20px; }
.drawer .links { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
/* resume toast */
.toast { position:fixed; left:50%; bottom:72px; transform:translate(-50%, 20px); z-index:40; background:var(--ink); color:var(--surface-card); border-radius:14px; padding:12px 12px 12px 18px; display:flex; gap:12px; align-items:center; opacity:0; pointer-events:none; transition:all .3s var(--ease); font:500 14px/20px var(--sans); }
.toast.on { opacity:1; pointer-events:auto; transform:translate(-50%,0); }
.toast button { height:32px; padding:0 12px; border-radius:8px; border:0; background:var(--teal-strong); color:#fff; font:600 13px/16px var(--sans); }
.toast button.alt { background:transparent; color:var(--surface-card); border:1px solid rgba(255,255,255,.3); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* ---------- phone / narrow: stacked reading layout ---------- */
@media (max-width: 760px) {
  body { overflow:auto; }
  .viewport { position:static; display:block; }
  .deck-bg { display:none; }
  .stage { width:auto; height:auto; transform:none !important; }
  .screen { position:relative; inset:auto; opacity:1; visibility:visible; transform:none; padding:96px max(16px, env(safe-area-inset-left)) 40px; min-height:auto; border-bottom:1px solid var(--line); background:var(--surface-page); }
  .screen.deep { background:var(--surface-deep); }
  [data-step] { opacity:1; transform:none; }
  .chrome-top { background:var(--surface-card); color:var(--ink); border-bottom:1px solid var(--line); height:56px; }
  body.deep .chrome-top { color:var(--ink); }
  body.deep .vmark .logo-color { display:block; } body.deep .vmark .logo-white { display:none; }
  .chap-label, .ribbon, .chrome-bot, #t-grid, #t-full { display:none !important; }
  .split, .split.wide-left { grid-template-columns:1fr; gap:28px; height:auto; }
  .d-xl { font-size:42px; line-height:46px; } .d-l, .d-m { font-size:32px; line-height:38px; } .h-l { font-size:24px; line-height:30px; }
  .lead { font-size:17px; line-height:26px; }
  .m-stack { display:flex !important; flex-direction:column !important; gap:16px !important; position:static !important; width:auto !important; height:auto !important; }
  .m-hide { display:none !important; }
  .m-full { width:100% !important; max-width:100% !important; height:auto !important; position:static !important; transform:none !important; }
  .hub-node span { font-size:13px; } .hub-node { width:110px; } .hub-node .dot { width:48px; height:48px; }
}