@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{background:#f4f1ec;color:#2d2b2e}

/* MORPH PRELOADER */
#morph-overlay{position:fixed;inset:0;z-index:9999;background:#f4f1ec;display:flex;align-items:center;justify-content:center;transition:opacity .8s}
#morph-overlay canvas{display:block}
#morph-overlay.hide{opacity:0;pointer-events:none}
.morph-loader{display:flex;gap:6px}.morph-dot{width:5px;height:5px;border-radius:50%;background:rgba(0,0,0,.15);animation:mp 1s ease infinite alternate}
.morph-dot:nth-child(2){animation-delay:.15s}.morph-dot:nth-child(3){animation-delay:.3s}
@keyframes mp{from{opacity:.2;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}

/* PROGRESS & COUNTER */
#progress{position:fixed;top:0;left:0;height:3px;border-radius:0 2px 2px 0;z-index:999;transition:width .35s}
#counter{position:fixed;bottom:18px;right:24px;font:500 .7rem 'JetBrains Mono',monospace;color:rgba(0,0,0,.18);z-index:99}
#navHint{position:fixed;bottom:18px;left:24px;font:.55rem 'Inter';color:rgba(0,0,0,.12);letter-spacing:.1em;z-index:99;transition:opacity 3s}

/* SLIDE CONTAINER */
#deck{position:relative;width:100vw;height:100vh;overflow:hidden}
.slide{position:absolute;inset:0;display:none;flex-direction:column;justify-content:flex-start;padding:clamp(32px,6vh,72px) 5vw clamp(24px,5vh,64px);opacity:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.slide::-webkit-scrollbar{display:none}
.slide>*{max-width:100%;flex-shrink:0}
.slide.active{display:flex;opacity:1;animation:fadeSlideIn .5s ease both}
@keyframes fadeSlideIn{from{opacity:0;transform:translateX(3%)}to{opacity:1;transform:translateX(0)}}

/* BG BLOBS */
.slide::before,.slide::after{content:'';position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;pointer-events:none;z-index:0}
.slide::before{width:40vw;height:40vw;top:-10vw;right:-10vw}
.slide::after{width:30vw;height:30vw;bottom:-8vw;left:-5vw}
.slide>*{position:relative;z-index:1}

/* ACCENT COLORS */
.accent-indigo #progress,.accent-indigo .s-badge,.accent-indigo .pill.active{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.accent-indigo .slide::before{background:rgba(99,102,241,.12)}.accent-indigo .slide::after{background:rgba(139,92,246,.08)}
.accent-teal #progress,.accent-teal .s-badge{background:linear-gradient(135deg,#14b8a6,#06b6d4)}
.accent-teal .slide::before{background:rgba(20,184,166,.12)}.accent-teal .slide::after{background:rgba(6,182,212,.08)}
.accent-purple #progress,.accent-purple .s-badge{background:linear-gradient(135deg,#8b5cf6,#a855f7)}
.accent-purple .slide::before{background:rgba(139,92,246,.12)}.accent-purple .slide::after{background:rgba(168,85,247,.08)}
.accent-blue #progress,.accent-blue .s-badge{background:linear-gradient(135deg,#3b82f6,#6366f1)}
.accent-blue .slide::before{background:rgba(59,130,246,.12)}.accent-blue .slide::after{background:rgba(99,102,241,.08)}
.accent-amber #progress,.accent-amber .s-badge{background:linear-gradient(135deg,#f59e0b,#f97316)}
.accent-amber .slide::before{background:rgba(245,158,11,.1)}.accent-amber .slide::after{background:rgba(249,115,22,.07)}
.accent-green #progress,.accent-green .s-badge{background:linear-gradient(135deg,#10b981,#14b8a6)}
.accent-green .slide::before{background:rgba(16,185,129,.12)}.accent-green .slide::after{background:rgba(20,184,166,.08)}
.accent-cyan #progress,.accent-cyan .s-badge{background:linear-gradient(135deg,#06b6d4,#0ea5e9)}
.accent-cyan .slide::before{background:rgba(6,182,212,.12)}.accent-cyan .slide::after{background:rgba(14,165,233,.08)}

/* FRAGMENTS */
.frag{opacity:0;transform:translateY(24px);transition:all .6s cubic-bezier(.16,1,.3,1)}
.frag.vis{opacity:1;transform:none;filter:none}
.frag.a-left{transform:translateX(-30px)}.frag.a-right{transform:translateX(30px)}
.frag.a-scale{transform:scale(.88)}.frag.a-pop{transform:scale(.7)}
.frag.a-blur{filter:blur(8px);transform:translateY(12px)}

/* TYPOGRAPHY */
.s-badge{display:inline-block;padding:5px 16px;border-radius:20px;font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.s-h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:800;line-height:1.12;letter-spacing:-.02em;margin-bottom:14px;color:#111118}
.s-sub{font-size:clamp(.95rem,1.6vw,1.15rem);color:rgba(0,0,0,.65);font-weight:400;line-height:1.7;max-width:720px;margin-bottom:22px}
.s-quote{font-size:clamp(.95rem,1.4vw,1.1rem);color:rgba(60,50,120,.75);font-style:italic;font-weight:400;line-height:1.65;border-left:3px solid rgba(99,102,241,.35);padding:14px 0 14px 22px;margin-bottom:20px;max-width:720px}
.s-note{font-size:.8rem;color:rgba(0,0,0,.45);margin-top:auto;padding-top:16px;line-height:1.6}
.s-divider{width:60px;height:2px;background:linear-gradient(90deg,rgba(99,102,241,.4),rgba(168,85,247,.2));margin:10px 0 14px;border-radius:2px}

/* GLASS CARD */
.glass{background:rgba(255,255,255,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.7);border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.04);padding:22px;transition:transform .3s,box-shadow .3s}
.glass:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.07)}

/* PILL ROW */
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.pill{padding:8px 18px;border-radius:8px;font-size:.65rem;font-weight:600;letter-spacing:.12em;background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.06);backdrop-filter:blur(8px);color:rgba(0,0,0,.45)}
.pill:nth-child(1){color:#6366f1;border-color:rgba(99,102,241,.2)}
.pill:nth-child(2){color:#14b8a6;border-color:rgba(20,184,166,.2)}
.pill:nth-child(3){color:#f59e0b;border-color:rgba(245,158,11,.2)}
.pill:nth-child(4){color:#ec4899;border-color:rgba(236,72,153,.2)}

/* COLUMNS */
.col-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:14px}
@media(max-width:700px){.col-wrap,.cards-grid,.split-wrap{grid-template-columns:1fr!important}}
.col-box h3{font-size:.6rem;font-weight:700;letter-spacing:.18em;margin-bottom:12px;text-transform:uppercase}
.col-box.muted h3{color:rgba(0,0,0,.3)}.col-box.accent h3{color:#14b8a6}
.col-box ul{list-style:none;font-size:.88rem;line-height:2.1;color:rgba(0,0,0,.7)}
.col-box ul li::before{content:'→ ';font-weight:600;color:rgba(0,0,0,.25)}
.col-box.accent ul li::before{color:rgba(20,184,166,.5)}

/* CARDS GRID */
.cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.cards-grid .glass .c-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;font-size:1.1rem}
.cards-grid .glass h3{font-size:1rem;font-weight:700;margin-bottom:8px;color:#111118}
.cards-grid .glass p{font-size:.85rem;color:rgba(0,0,0,.6);line-height:1.65}

/* LIST */
.s-list{list-style:none;margin-bottom:14px}
.s-list li{font-size:.92rem;color:rgba(0,0,0,.7);line-height:1.55;padding:6px 0 6px 20px;position:relative}
.s-list li::before{content:'';position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:rgba(99,102,241,.5)}

/* CALLOUT */
.s-callout{border-radius:14px;background:rgba(251,146,60,.06);border:1px solid rgba(251,146,60,.15);padding:18px;margin-bottom:14px}
.s-callout h4{font-size:.8rem;font-weight:700;color:rgba(234,88,12,.8);margin-bottom:6px}
.s-callout p{font-size:.85rem;color:rgba(0,0,0,.6);line-height:1.6}
.s-callout .co-fix{margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:.78rem;color:rgba(10,140,90,.85);background:rgba(16,185,129,.08);padding:10px 14px;border-radius:8px}

/* METRICS */
.met-row{display:flex;gap:10px;flex-wrap:wrap}
.met-pill{padding:8px 16px;border-radius:6px;font:500 .78rem 'JetBrains Mono',monospace;background:rgba(99,102,241,.07);border:1px solid rgba(99,102,241,.15);color:rgba(70,70,180,.75)}

/* STATS */
.stat-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.stat-box{flex:1;min-width:100px;text-align:center}
.stat-box .sv{font-size:clamp(1.6rem,3vw,2.5rem);font-weight:900;background:linear-gradient(135deg,#6366f1,#14b8a6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-box .sl{font-size:.72rem;color:rgba(0,0,0,.5);margin-top:4px;font-weight:500}

/* TABLE */
.s-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.7rem;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.5);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7)}
.s-table th{text-align:left;padding:10px 14px;font-weight:700;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(99,102,241,.7);background:rgba(99,102,241,.04);border-bottom:1px solid rgba(0,0,0,.05)}
.s-table td{padding:10px 14px;border-bottom:1px solid rgba(0,0,0,.04);color:rgba(0,0,0,.65);line-height:1.45;font-size:.8rem}
.s-table td:nth-child(2){color:rgba(10,140,90,.85);font-weight:600}
.s-table td:nth-child(3){color:rgba(200,70,10,.65)}
.s-table tr:last-child td{border-bottom:none}

/* HIGHLIGHT */
.s-hl{padding:16px 22px;border-radius:12px;font-size:.9rem;font-weight:500;line-height:1.55;background:linear-gradient(135deg,rgba(16,185,129,.07),rgba(99,102,241,.07));border:1px solid rgba(16,185,129,.18);color:rgba(10,120,80,.85)}

/* SPLIT */
.split-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.split-wrap .glass h3{font-size:1rem;font-weight:700;margin-bottom:10px;color:#111118}
.split-wrap .glass ul{list-style:none;font-size:.85rem;color:rgba(0,0,0,.65);line-height:2}
.split-wrap .glass ul li::before{content:'• ';color:rgba(99,102,241,.35)}
.s-anti{margin-top:10px;padding:10px 14px;border-radius:8px;font-size:.78rem;color:rgba(200,70,10,.7);background:rgba(251,146,60,.06);border:1px solid rgba(251,146,60,.15)}
.s-anti::before{content:'⚠ Anti-pattern: ';font-weight:700}

/* PRESENTER BLOCK */
.presenter-block{margin:12px 0}
.presenter-block .p-name{font-size:1.3rem;font-weight:700;color:#111118}
.presenter-block .p-roll{font-size:.85rem;color:rgba(80,70,180,.8);font-weight:600;margin:2px 0 8px}
.presenter-block .p-dept{font-size:.85rem;color:rgba(0,0,0,.55);line-height:1.6}

/* ICON BLOCK */
.s-icon-block{margin-bottom:10px}
.s-icon-block svg{width:40px;height:40px;opacity:.2}

/* MBM LOGO */
.mbm-logo{width:80px;height:80px;border-radius:16px;margin-bottom:16px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.mbm-logo img{width:100%;height:100%;object-fit:contain}

/* ═══ DIAGRAMS ═══ */
.dia{margin:18px 0;display:flex;justify-content:center;align-items:center}
.dia .dia-diamond,.dia .dia-tree,.dia .dia-flow{background:rgba(255,255,255,.65);border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 28px rgba(0,0,0,.06);border-radius:18px;padding:18px 20px}

/* DIAMOND DIAGRAM */
.dia-diamond{position:relative;width:min(520px,90vw);height:min(340px,70vw)}
.dia-diamond .d-node{position:absolute;padding:14px 22px;border-radius:14px;font-size:.86rem;font-weight:700;text-align:center;color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:0 6px 22px rgba(0,0,0,.12);z-index:2}
.dia-diamond .d-n1{top:0;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#6366f1,#818cf8)}
.dia-diamond .d-n2{top:50%;right:0;transform:translateY(-50%);background:linear-gradient(135deg,#14b8a6,#2dd4bf)}
.dia-diamond .d-n3{bottom:0;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#f59e0b,#fbbf24)}
.dia-diamond .d-n4{top:50%;left:0;transform:translateY(-50%);background:linear-gradient(135deg,#ec4899,#f472b6)}
.dia-diamond .d-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border:2px solid rgba(99,102,241,.3);display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:800;color:#4f46e5;z-index:3;text-align:center;line-height:1.2}
.dia-diamond .d-line{position:absolute;background:rgba(40,48,90,.25);z-index:1}
.dia-diamond .d-lh{height:2.5px;top:50%;left:10%;width:80%}
.dia-diamond .d-lv{width:2.5px;left:50%;top:8%;height:84%}
.dia-diamond .d-ld1,.dia-diamond .d-ld2{height:2px;width:45%;top:50%;transform-origin:left center}
.dia-diamond .d-ld1{left:50%;transform:rotate(-38deg)}
.dia-diamond .d-ld2{left:50%;transform:rotate(38deg)}
.dia-diamond .d-ld3,.dia-diamond .d-ld4{height:2px;width:45%;top:50%;transform-origin:right center}
.dia-diamond .d-ld3{right:50%;transform:rotate(38deg)}
.dia-diamond .d-ld4{right:50%;transform:rotate(-38deg)}

/* FLOW DIAGRAM */
.dia-flow{display:flex;align-items:center;gap:0;flex-wrap:wrap;justify-content:center}
.dia-flow .f-box{padding:14px 22px;border-radius:12px;font-size:.86rem;font-weight:600;color:#fff;text-align:center;min-width:120px;box-shadow:0 6px 18px rgba(0,0,0,.1)}
.dia-flow .f-arrow{font-size:1.6rem;color:rgba(40,48,90,.35);padding:0 12px;line-height:1}
.dia-flow .f-b1{background:linear-gradient(135deg,#6366f1,#818cf8)}
.dia-flow .f-b2{background:linear-gradient(135deg,#14b8a6,#2dd4bf)}
.dia-flow .f-b3{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
.dia-flow .f-b4{background:linear-gradient(135deg,#10b981,#34d399)}
.dia-flow .f-b5{background:linear-gradient(135deg,#ec4899,#f472b6)}
.dia-flow .f-label{font-size:.62rem;color:rgba(0,0,0,.45);text-align:center;display:block;margin-top:5px;font-weight:500}

/* SUPERVISION TREE */
.dia-tree{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 18px;min-width:min(620px,92vw)}
.dia-tree .t-row{display:flex;gap:26px;align-items:center;position:relative;padding-top:14px}
.dia-tree .t-row:not(:first-child)::before{content:'';position:absolute;top:0;left:8%;right:8%;height:2px;background:rgba(40,48,90,.28)}
.dia-tree .t-node{position:relative;padding:12px 22px;border-radius:12px;font-size:.8rem;font-weight:600;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.08);min-width:110px}
.dia-tree .t-row:not(:first-child) .t-node::before{content:'';position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:2px;height:14px;background:rgba(40,48,90,.28)}
.dia-tree .t-root{background:linear-gradient(135deg,#6366f1,#818cf8);color:#fff;padding:14px 30px;font-size:.86rem}
.dia-tree .t-sup{background:linear-gradient(135deg,#14b8a6,#2dd4bf);color:#fff}
.dia-tree .t-act{background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border:1.5px solid rgba(0,0,0,.1);color:#222}
.dia-tree .t-fail{background:rgba(243,70,70,.12);border:1.5px solid rgba(243,70,70,.3);color:#dc2626;font-weight:700}
.dia-tree .t-conn{width:2px;height:16px;background:rgba(40,48,90,.28);margin:0 auto}
.dia-tree .t-hconn{display:none}
.dia-tree .t-label{font-size:.6rem;color:rgba(0,0,0,.35);margin-top:3px;text-align:center}

/* SCALE DIAGRAM */
.dia-scale{display:flex;align-items:flex-end;gap:10px;padding:18px 24px;background:rgba(255,255,255,.5);backdrop-filter:blur(10px);border-radius:14px;border:1px solid rgba(255,255,255,.7)}
.dia-scale .bar{width:44px;border-radius:8px 8px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:8px;font-size:.65rem;font-weight:700;color:#fff}
.dia-scale .bar.b1{height:50px;background:linear-gradient(180deg,#818cf8,#6366f1)}
.dia-scale .bar.b2{height:85px;background:linear-gradient(180deg,#6ee7b7,#10b981)}
.dia-scale .bar.b3{height:120px;background:linear-gradient(180deg,#fbbf24,#f59e0b)}
.dia-scale .bar.b4{height:160px;background:linear-gradient(180deg,#f472b6,#ec4899)}
.dia-scale .bar.b5{height:100px;background:linear-gradient(180deg,#67e8f9,#06b6d4)}
.dia-scale .bar-label{font-size:.6rem;color:rgba(0,0,0,.4);margin-top:5px;text-align:center;font-weight:500}

/* TYPEWRITER */
.tw-wrap{display:flex;align-items:center;justify-content:center;min-height:40vh}
.tw-text{font-size:clamp(3rem,8vw,6rem);font-weight:900;color:#111118;letter-spacing:-.03em;border-right:3px solid #6366f1;white-space:nowrap;overflow:hidden;width:0;animation:twType 1.8s steps(11) .5s forwards,twBlink .6s step-end infinite}
@keyframes twType{from{width:0}to{width:11ch}}
@keyframes twBlink{50%{border-color:transparent}}

/* DOWNLOAD BUTTON */
#dlBtn{position:fixed;top:12px;right:14px;z-index:1000;background:rgba(255,255,255,.7);backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:7px 12px;cursor:pointer;display:flex;align-items:center;gap:5px;font:500 .6rem 'Inter',sans-serif;color:rgba(0,0,0,.4);transition:all .3s;text-decoration:none}
#dlBtn:hover{background:rgba(99,102,241,.1);color:#6366f1;border-color:rgba(99,102,241,.2)}
#dlBtn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

/* RESPONSIVE */
@media(max-width:900px){.slide{padding:clamp(28px,5vh,60px) 4vw clamp(22px,4vh,50px)}.dia-diamond{width:min(420px,88vw);height:min(300px,70vw)}.dia-tree{min-width:min(520px,94vw)}}
@media(max-width:600px){.slide{padding:clamp(24px,5vh,52px) 3vw clamp(18px,4vh,44px)}.s-h1{font-size:1.6rem}.stat-row{gap:8px}.dia-flow{flex-direction:column}.dia-flow .f-arrow{transform:rotate(90deg)}.dia-diamond{width:min(320px,90vw);height:min(240px,70vw)}.dia-tree{min-width:unset;width:92vw}.dia-tree .t-row{gap:14px}.dia-tree .t-node{min-width:96px;padding:10px 14px;font-size:.72rem}}