feat: presentation arch v2 — CRM брендбук, экраны, раздел БД/безопасности (16 слайдов)

docs/presentation_architecture.html

@@ -6,19 +6,21 @@
 <title>Архитектура платформы @wasrusgen1 CRM</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Montserrat:wght@700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
 <style>
   :root{
     --bg:#0F0F1A;
-    --accent:#3B82F6;
+    --accent:#003E7E;
-    --accent2:#60A5FA;
+    --accent2:#4338CA;
-    --success:#10B981;
+    --success:#76BD22;
     --warn:#F59E0B;
+    --danger:#EF4444;
     --text:#F8FAFC;
     --card:#1A1A2E;
     --muted:#94A3B8;
     --border:rgba(148,163,184,.16);
     --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
+    --display:'Montserrat',sans-serif;
   }
   *{margin:0;padding:0;box-sizing:border-box}
   html,body{height:100%}
@@ -46,15 +48,21 @@
     max-width:1920px;max-height:1080px;margin:auto;
   }
 
+  /* per-slide brand watermark (top-right) */
+  .slide-brand{
+    position:absolute;top:0;right:0;z-index:5;display:flex;align-items:center;
+    pointer-events:none;
+  }
+
   /* background glows */
   .slide::before{
     content:"";position:absolute;width:760px;height:760px;border-radius:50%;
-    background:radial-gradient(circle,rgba(59,130,246,.16),transparent 62%);
+    background:radial-gradient(circle,rgba(67,56,202,.16),transparent 62%);
     top:-300px;right:-200px;pointer-events:none;
   }
   .slide::after{
     content:"";position:absolute;width:620px;height:620px;border-radius:50%;
-    background:radial-gradient(circle,rgba(16,185,129,.08),transparent 65%);
+    background:radial-gradient(circle,rgba(118,189,34,.08),transparent 65%);
     bottom:-280px;left:-160px;pointer-events:none;
   }
 
@@ -64,8 +72,8 @@
     color:var(--accent2);margin-bottom:18px;display:flex;align-items:center;gap:12px;
   }
   .kicker::before{content:"";width:30px;height:2px;background:var(--accent);display:inline-block}
-  h1{font-size:64px;font-weight:900;line-height:1.04;letter-spacing:-.02em}
+  h1{font-family:var(--display);font-size:64px;font-weight:900;line-height:1.04;letter-spacing:-.02em}
-  h2{font-size:44px;font-weight:800;line-height:1.08;letter-spacing:-.015em;margin-bottom:10px}
+  h2{font-family:var(--display);font-size:44px;font-weight:800;line-height:1.08;letter-spacing:-.015em;margin-bottom:10px}
   .sub{color:var(--muted);font-size:20px;font-weight:400;line-height:1.5;max-width:980px}
   .slide-body{flex:1;min-height:0;margin-top:34px;display:flex;flex-direction:column}
 
@@ -98,28 +106,29 @@
   }
   .card .ic{
     width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
-    font-size:22px;margin-bottom:16px;background:rgba(59,130,246,.14);border:1px solid rgba(59,130,246,.3);
+    font-size:22px;margin-bottom:16px;background:rgba(0,62,126,.18);border:1px solid rgba(0,62,126,.4);
   }
   .card h3{font-size:21px;font-weight:700;margin-bottom:8px}
   .card p{color:var(--muted);font-size:16px;line-height:1.55}
-  .card.accent{border-color:rgba(59,130,246,.45)}
+  .card.accent{border-color:rgba(67,56,202,.5)}
-  .card.success .ic{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.35)}
+  .card.accent .ic{background:rgba(67,56,202,.16);border-color:rgba(67,56,202,.4)}
+  .card.success .ic{background:rgba(118,189,34,.16);border-color:rgba(118,189,34,.4)}
   .card.warn .ic{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.35)}
   .tag{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2);font-weight:600}
   .pill{display:inline-block;font-family:var(--mono);font-size:13px;padding:4px 12px;border-radius:100px;border:1px solid var(--border);color:var(--muted)}
-  .pill.rec{color:var(--success);border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.08)}
+  .pill.rec{color:var(--success);border-color:rgba(118,189,34,.4);background:rgba(118,189,34,.1)}
 
   /* ===== CODE / DIAGRAM BLOCK ===== */
   .codeblock{
     font-family:var(--mono);background:#0A0A12;border:1px solid var(--border);
     border-radius:16px;padding:30px 34px;font-size:18px;line-height:1.85;color:#CBD5E1;
-    box-shadow:inset 0 0 0 1px rgba(59,130,246,.05);position:relative;
+    box-shadow:inset 0 0 0 1px rgba(0,62,126,.08);position:relative;
   }
   .codeblock .winbar{position:absolute;top:14px;left:18px;display:flex;gap:7px}
   .codeblock .winbar i{width:11px;height:11px;border-radius:50%;display:inline-block}
   .codeblock pre{margin-top:14px;white-space:pre;overflow:auto}
   .c-key{color:var(--accent2)} .c-ok{color:var(--success)} .c-warn{color:var(--warn)}
-  .c-mut{color:var(--muted)} .c-acc{color:var(--accent);font-weight:700}
+  .c-mut{color:var(--muted)} .c-acc{color:#5B8BD0;font-weight:700} .c-file{color:#F8FAFC}
 
   /* ===== ARCH MAP ===== */
   .archmap{display:flex;flex-direction:column;align-items:center;gap:0;font-family:var(--mono)}
@@ -129,15 +138,15 @@
   }
   .node strong{display:block;font-size:20px;font-family:'Inter';font-weight:700}
   .node span{font-size:13px;color:var(--muted)}
-  .node.master{border-color:var(--accent);box-shadow:0 0 32px rgba(59,130,246,.25);background:rgba(59,130,246,.08)}
+  .node.master{border-color:var(--accent2);box-shadow:0 0 32px rgba(67,56,202,.28);background:rgba(67,56,202,.1)}
-  .node.git{border-color:rgba(96,165,250,.4)}
+  .node.git{border-color:rgba(0,62,126,.5)}
-  .node.vps{border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.05)}
+  .node.vps{border-color:rgba(118,189,34,.4);background:rgba(118,189,34,.05)}
   .arrow{color:var(--accent2);font-size:22px;padding:8px 0;font-family:var(--mono)}
   .arrow small{display:block;font-size:11px;color:var(--muted);letter-spacing:.1em}
   .tenants{display:flex;gap:18px;margin-top:6px}
   .tenant{
-    border:1px dashed rgba(16,185,129,.4);border-radius:12px;padding:14px 20px;
+    border:1px dashed rgba(118,189,34,.4);border-radius:12px;padding:14px 20px;
-    font-family:var(--mono);font-size:14px;text-align:center;background:rgba(16,185,129,.04);
+    font-family:var(--mono);font-size:14px;text-align:center;background:rgba(118,189,34,.04);
   }
   .tenant b{color:var(--success)} .tenant span{display:block;color:var(--muted);font-size:12px;margin-top:4px}
 
@@ -150,7 +159,7 @@
   td .mono{font-family:var(--mono)}
   .num{font-family:var(--mono);font-weight:700;color:var(--accent2);text-align:right}
   .num.ok{color:var(--success)}
-  tbody tr:hover{background:rgba(59,130,246,.05)}
+  tbody tr:hover{background:rgba(0,62,126,.07)}
 
   /* ===== CHECKLIST ===== */
   .checklist{display:grid;grid-template-columns:1fr 1fr;gap:16px 38px;align-self:stretch}
@@ -159,12 +168,12 @@
     background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px 24px;
     transition:.25s;
   }
-  .check:hover{border-color:rgba(59,130,246,.4);transform:translateX(3px)}
+  .check:hover{border-color:rgba(0,62,126,.5);transform:translateX(3px)}
   .box{
     width:30px;height:30px;border-radius:8px;border:2px solid var(--muted);flex:0 0 auto;
     display:flex;align-items:center;justify-content:center;transition:.2s;font-weight:900;color:transparent;
   }
-  .check.done .box{background:var(--success);border-color:var(--success);color:#06281c}
+  .check.done .box{background:var(--success);border-color:var(--success);color:#0c2b06}
   .check.done .box::after{content:"✓"}
   .check .label{font-size:19px;font-weight:500;transition:.2s}
   .check.done .label{color:var(--muted);text-decoration:line-through}
@@ -187,7 +196,7 @@
   .phase-card{
     background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px 22px;text-align:center;height:100%;
   }
-  .phase.now .phase-card{border-color:var(--accent);background:rgba(59,130,246,.08)}
+  .phase.now .phase-card{border-color:var(--accent);background:rgba(0,62,126,.1)}
   .phase .ph-tag{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent2);margin-bottom:8px}
   .phase h3{font-size:22px;font-weight:700;margin-bottom:10px}
   .phase p{font-size:15px;color:var(--muted);line-height:1.5}
@@ -198,39 +207,116 @@
   /* generic list */
   .blist{list-style:none;display:flex;flex-direction:column;gap:14px}
   .blist li{display:flex;gap:14px;font-size:19px;line-height:1.5;align-items:flex-start}
-  .blist li::before{content:"▸";color:var(--accent);font-weight:900;margin-top:2px}
+  .blist li::before{content:"▸";color:var(--accent2);font-weight:900;margin-top:2px}
   .blist li b{color:var(--text)}
   .blist li span{color:var(--muted)}
 
   /* steps for lifecycle */
   .steps{display:flex;flex-direction:column;gap:14px}
   .step{display:flex;gap:22px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px 26px}
-  .step .no{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--accent);width:46px;flex:0 0 auto}
+  .step .no{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--accent2);width:46px;flex:0 0 auto}
   .step .txt{flex:1}
   .step .txt b{font-size:20px;font-weight:700;display:block}
   .step .txt span{color:var(--muted);font-size:16px}
-  .step .time{font-family:var(--mono);font-size:15px;color:var(--success);background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);border-radius:100px;padding:7px 16px;white-space:nowrap}
+  .step .time{font-family:var(--mono);font-size:15px;color:var(--success);background:rgba(118,189,34,.12);border:1px solid rgba(118,189,34,.3);border-radius:100px;padding:7px 16px;white-space:nowrap}
 
   /* P&L econ */
   .pl{display:grid;grid-template-columns:1fr 1fr;gap:26px}
   .pl .block{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:30px}
-  .pl .block.rev{border-color:rgba(16,185,129,.35)}
+  .pl .block.rev{border-color:rgba(118,189,34,.35)}
   .pl .block.cost{border-color:rgba(245,158,11,.35)}
   .pl .row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px dashed var(--border);font-size:18px}
   .pl .row:last-child{border:none}
   .pl .row b{font-family:var(--mono)}
   .be{margin-top:24px;display:flex;gap:24px}
-  .be .stat{flex:1;background:linear-gradient(160deg,rgba(59,130,246,.12),rgba(26,26,46,.6));border:1px solid rgba(59,130,246,.35);border-radius:16px;padding:24px 28px}
+  .be .stat{flex:1;background:linear-gradient(160deg,rgba(0,62,126,.14),rgba(26,26,46,.6));border:1px solid rgba(0,62,126,.4);border-radius:16px;padding:24px 28px}
   .be .stat span{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
   .be .stat strong{display:block;font-size:38px;font-weight:800;color:var(--accent2);margin-top:6px}
 
+  /* ===== PHONE FRAMES (new slides) ===== */
+  .screens{display:flex;gap:40px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
+  .phone{
+    width:330px;border-radius:30px;background:#000;padding:8px;
+    box-shadow:0 20px 60px rgba(0,0,0,.5);flex:0 0 auto;
+  }
+  .phone.sm{width:300px}
+  .phscreen{
+    border-radius:24px;background:#F5F6F8;overflow:hidden;color:#1A1A2E;
+    font-family:'Inter',sans-serif;
+  }
+  .statusbar{
+    background:#003E7E;color:#fff;height:30px;display:flex;align-items:center;
+    justify-content:space-between;padding:0 16px;font-size:12px;font-weight:600;font-family:var(--mono);
+  }
+  .statusbar .sb-r{display:flex;gap:5px;align-items:center;letter-spacing:1px}
+  .ph-head{
+    background:#003E7E;color:#fff;padding:10px 16px 14px;display:flex;align-items:center;
+    justify-content:space-between;
+  }
+  .ph-head .ph-title{font-size:15px;font-weight:800;font-family:var(--display)}
+  .ph-head .ph-sub{font-size:11px;color:rgba(255,255,255,.7);margin-top:2px}
+  .ph-head .ph-badge{font-size:11px;font-weight:600;background:rgba(255,255,255,.15);padding:4px 10px;border-radius:100px}
+  .ph-body{padding:12px;display:flex;flex-direction:column;gap:10px;min-height:330px}
+  .scard{
+    background:#fff;border-radius:14px;padding:12px 14px;border:1px solid #E5E7EB;
+    box-shadow:0 1px 4px rgba(0,0,0,.05);
+  }
+  .scard .sc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
+  .scard .sc-name{font-size:13px;font-weight:700;color:#1A1A2E}
+  .scard .sc-sub{font-size:11px;color:#8A94A6;margin-bottom:6px}
+  .scard .sc-money{font-size:13px;font-weight:700;color:#003E7E;font-variant-numeric:tabular-nums}
+  .scard .sc-warn{font-size:11px;color:#D97706;font-weight:600;margin-top:4px;display:flex;align-items:center;gap:4px}
+  .sbar{height:7px;background:#E5E7EB;border-radius:100px;overflow:hidden;margin-top:8px}
+  .sbar i{display:block;height:100%;background:#76BD22;border-radius:100px}
+  .sbar.warnbar i{background:#003E7E}
+  .sbadge{font-size:9px;font-weight:700;padding:2px 8px;border-radius:100px}
+  .sbadge.done{background:#DCFCE7;color:#15803D}
+  .sbadge.wait{background:#FEF3C7;color:#D97706}
+  .sbadge.act{background:#DBEAFE;color:#1D4ED8}
+
+  /* schedule grid (chess) */
+  .chess{width:100%;border-collapse:collapse;font-size:11px;background:#fff;border-radius:12px;overflow:hidden}
+  .chess th,.chess td{border:1px solid #E5E7EB;padding:7px 8px;text-align:left;color:#1A1A2E}
+  .chess th{background:#003E7E;color:#fff;font-size:10px;font-weight:700}
+  .chess td.time{font-family:var(--mono);color:#8A94A6;font-weight:600;background:#F9FAFB}
+  .cell-done{color:#15803D;font-weight:600}
+  .cell-act{color:#003E7E;font-weight:700}
+  .cell-free{color:#9CA3AF}
+
+  /* day schedule */
+  .daysched{display:flex;flex-direction:column;gap:2px;font-size:12px}
+  .ds-row{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
+  .ds-time{font-family:var(--mono);font-size:11px;color:#003E7E;font-weight:700;width:46px;flex:0 0 auto}
+  .ds-block{background:#fff;border:1px solid #E5E7EB;border-left:3px solid #003E7E;border-radius:8px;padding:7px 10px;flex:1}
+  .ds-block.green{border-left-color:#76BD22}
+  .ds-block b{font-size:12px;font-weight:700;color:#1A1A2E;display:block}
+  .ds-block span{font-size:10px;color:#8A94A6}
+  .ds-marker{font-size:11px;color:#8A94A6;font-weight:600;padding:5px 0}
+  .ds-btn{margin-top:8px;background:#003E7E;color:#fff;text-align:center;padding:9px;border-radius:10px;font-size:12px;font-weight:700}
+
+  .scaption{text-align:center;color:var(--muted);font-size:17px;margin-top:24px;font-family:var(--mono);letter-spacing:.02em}
+
+  /* security 2-col */
+  .seccols{display:grid;grid-template-columns:0.95fr 1.05fr;gap:34px;height:100%;align-items:stretch}
+  .sec-arch{display:flex;flex-direction:column}
+  .sec-arch .codeblock{flex:1;font-size:15px;line-height:1.7}
+  .secgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start}
+  .seccard{
+    background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 18px;
+  }
+  .seccard .si{font-size:22px;margin-bottom:8px;display:block}
+  .seccard h4{font-size:16px;font-weight:700;margin-bottom:5px}
+  .seccard p{color:var(--muted);font-size:12.5px;line-height:1.5}
+  .seccard.b1{border-color:rgba(118,189,34,.35)}
+  .seccard.b2{border-color:rgba(0,62,126,.4)}
+
   /* ===== NAV ===== */
   .nav{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;z-index:50}
   .nav button{
     width:46px;height:46px;border-radius:12px;border:1px solid var(--border);background:rgba(26,26,46,.85);
     color:var(--text);font-size:20px;cursor:pointer;transition:.2s;backdrop-filter:blur(8px);
   }
-  .nav button:hover{border-color:var(--accent);color:var(--accent2)}
+  .nav button:hover{border-color:var(--accent2);color:var(--accent2)}
   .nav .counter{font-family:var(--mono);font-size:15px;color:var(--muted);min-width:64px;text-align:center}
   .nav .counter b{color:var(--text)}
   .progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--success));z-index:60;transition:width .5s ease;box-shadow:0 0 10px var(--accent)}
@@ -246,6 +332,7 @@
     .g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}
     .checklist{grid-template-columns:1fr}.timeline{flex-direction:column;gap:14px}
     .phase::before{display:none}.twocol{grid-template-columns:1fr;gap:24px}
+    .seccols{grid-template-columns:1fr;gap:20px}
   }
 </style>
 </head>
@@ -255,6 +342,7 @@
 
   <!-- 1 TITLE -->
   <section class="slide title-slide active">
+    <div class="slide-brand"><span style="font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;color:rgba(255,255,255,.45)">@wasrusgen1</span><span style="display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.2);margin:0 8px;vertical-align:middle"></span><span style="font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;letter-spacing:1px">CRM</span></div>
     <div class="stage" style="display:flex;flex-direction:column;justify-content:center">
       <div class="brandtag"><span class="dot"></span> @wasrusgen1 CRM · PLATFORM ARCHITECTURE</div>
       <h1>Архитектура платформы<br><span style="color:var(--accent2)">@wasrusgen1 CRM</span></h1>
@@ -269,6 +357,7 @@
 
   <!-- 2 SYSTEM MAP -->
   <section class="slide">
+    <div class="slide-brand"><span style="font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;color:rgba(255,255,255,.45)">@wasrusgen1</span><span style="display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.2);margin:0 8px;vertical-align:middle"></span><span style="font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;letter-spacing:1px">CRM</span></div>
     <div class="stage">
       <div class="kicker">Слайд 02 · Big picture</div>
       <h2>Карта системы</h2>
@@ -293,6 +382,7 @@
 
   <!-- 3 THREE MODELS -->
   <section class="slide">
+    <div class="slide-brand"><span style="font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;color:rgba(255,255,255,.45)">@wasrusgen1</span><span style="display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.2);margin:0 8px;vertical-align:middle"></span><span style="font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;letter-spacing:1px">CRM</span></div>
     <div class="stage">
       <div class="kicker">Слайд 03 · Стратегия</div>
       <h2>Три модели управления</h2>
@@ -325,6 +415,7 @@
 
   <!-- 4 LIFECYCLE -->
   <section class="slide">
+    <div class="slide-brand"><span style="font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;color:rgba(255,255,255,.45)">@wasrusgen1</span><span style="display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.2);margin:0 8px;vertical-align:middle"></span><span style="font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;letter-spacing:1px">CRM</span></div>
     <div class="stage">
       <div class="kicker">Слайд 04 · Процесс</div>
       <h2>Жизненный цикл нового проекта</h2>
@@ -343,6 +434,7 @@
 
   <!-- 5 STACK -->
   <section class="slide">
+    <div class="slide-brand"><span style="font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;color:rgba(255,255,255,.45)">@wasrusgen1</span><span style="display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.2);margin:0 8px;vertical-align:middle"></span><span style="font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;letter-spacing:1px">CRM</span></div>
     <div class="stage">
       <div class="kicker">Слайд 05 · Технологии</div>
       <h2>Стек технологий</h2>
@@ -364,6 +456,7 @@
 
   <!-- 6 ER DIAGRAM -->
   <section class="slide er">
+    <div class="slide-brand"><span style="font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;color:rgba(255,255,255,.45)">@wasrusgen1</span><span style="display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.2);margin:0 8px;vertical-align:middle"></span><span style="font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;letter-spacing:1px">CRM</span></div>
     <div class="stage">
       <div class="kicker">Слайд 06 · Данные</div>
       <h2>Схема базы данных</h2>
@@ -400,6 +493,7 @@
 
   <!-- 7 MASTER PANEL -->
   <section class="slide">
+    <div class="slide-brand"><span style="font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;color:rgba(255,255,255,.45)">@wasrusgen1</span><span style="display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.2);margin:0 8px;vertical-align:middle"></span><span style="font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;letter-spacing:1px">CRM</span></div>
     <div class="stage">
       <div class="kicker">Слайд 07 · Инструмент владельца</div>
       <h2>Мастер-панель Руслана</h2>
@@ -415,10 +509,150 @@
     </div>
   </section>
 
-  <!-- 8 CHECKLIST -->
+  <!-- 8 [NEW] WHAT EACH ROLE SEES -->
   <section class="slide">
+    <div class="slide-brand"><span style="font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;color:rgba(255,255,255,.45)">@wasrusgen1</span><span style="display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.2);margin:0 8px;vertical-align:middle"></span><span style="font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;letter-spacing:1px">CRM</span></div>
     <div class="stage">
-      <div class="kicker">Слайд 08 · Onboarding</div>
+      <div class="kicker">Слайд 08 · Интерфейсы по ролям</div>
+      <h2>Что видит каждая роль</h2>
+      <p class="sub">Один продукт — разные кабинеты. У каждой роли свой экран и свой набор данных.</p>
+      <div class="slide-body" style="justify-content:center">
+        <div class="screens">
+
+          <!-- Screen 1: КД дашборд -->
+          <div class="phone">
+            <div class="phscreen">
+              <div class="statusbar"><span>9:41</span><span class="sb-r">⣾ ▌</span></div>
+              <div class="ph-head">
+                <div><div class="ph-title">📊 КД Дашборд</div><div class="ph-sub">вся сеть · реальное время</div></div>
+                <div class="ph-badge">май 2026</div>
+              </div>
+              <div class="ph-body">
+                <div class="scard">
+                  <div class="sc-top"><span class="sc-name">🏪 Салон Ленина</span><span class="sbadge done">27/30</span></div>
+                  <div class="sc-sub">заказов выполнено</div>
+                  <div class="sc-money">₽ 1 537 000 / 1 700 000</div>
+                  <div class="sc-warn">⚠ 1 просрочен</div>
+                  <div class="sbar"><i style="width:90%"></i></div>
+                </div>
+                <div class="scard">
+                  <div class="sc-top"><span class="sc-name">🏪 Салон Победы</span><span class="sbadge done">20/22</span></div>
+                  <div class="sc-sub">заказов выполнено</div>
+                  <div class="sc-money">₽ 1 310 000 / 1 500 000</div>
+                  <div class="sc-warn">⚠ 1 просрочен</div>
+                  <div class="sbar"><i style="width:87%"></i></div>
+                </div>
+                <div class="scard">
+                  <div class="sc-top"><span class="sc-name">🏪 Салон Садовая</span><span class="sbadge act">15/19</span></div>
+                  <div class="sc-sub">заказов выполнено</div>
+                  <div class="sc-money">₽ 980 000 / 1 250 000</div>
+                  <div class="sbar"><i style="width:78%"></i></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Screen 2: Администратор шахматка -->
+          <div class="phone">
+            <div class="phscreen">
+              <div class="statusbar"><span>9:41</span><span class="sb-r">⣾ ▌</span></div>
+              <div class="ph-head">
+                <div><div class="ph-title">Салон Ленина</div><div class="ph-sub">Шахматка · сегодня, 22 мая</div></div>
+                <div class="ph-badge">Админ</div>
+              </div>
+              <div class="ph-body">
+                <table class="chess">
+                  <thead><tr><th>Время</th><th>Анна К.</th><th>Мария С.</th></tr></thead>
+                  <tbody>
+                    <tr><td class="time">10:00</td><td class="cell-done">✅ Орлова</td><td class="cell-free">—</td></tr>
+                    <tr><td class="time">11:00</td><td class="cell-done">✅ Соколова</td><td class="cell-free">—</td></tr>
+                    <tr><td class="time">12:00</td><td class="cell-free">○ Свободно</td><td class="cell-done">✅ Лебедев</td></tr>
+                    <tr><td class="time">14:00</td><td class="cell-act">🔵 Ким Л.</td><td class="cell-act">🔵 Петрова</td></tr>
+                    <tr><td class="time">15:00</td><td class="cell-act">🔵 Ким Л.</td><td class="cell-act">🔵 Петрова</td></tr>
+                    <tr><td class="time">16:00</td><td class="cell-act">🔵 Захарова</td><td class="cell-free">—</td></tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div class="scaption">КД — вся сеть в реальном времени · Администратор — управление командой</div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 9 [NEW] MANAGER MOBILE -->
+  <section class="slide">
+    <div class="slide-brand"><span style="font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;color:rgba(255,255,255,.45)">@wasrusgen1</span><span style="display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.2);margin:0 8px;vertical-align:middle"></span><span style="font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;letter-spacing:1px">CRM</span></div>
+    <div class="stage">
+      <div class="kicker">Слайд 09 · Мобильный кабинет</div>
+      <h2>Менеджер: работа из телефона</h2>
+      <p class="sub">Весь рабочий день — в кармане. Заказы, расписание, чек-ин на объекте.</p>
+      <div class="slide-body" style="justify-content:center">
+        <div class="screens">
+
+          <!-- Screen 1: orders -->
+          <div class="phone sm">
+            <div class="phscreen">
+              <div class="statusbar"><span>9:41</span><span class="sb-r">⣾ ▌</span></div>
+              <div class="ph-head">
+                <div><div class="ph-title">Мои заказы</div><div class="ph-sub">3 активных + 3 лида</div></div>
+                <div class="ph-badge">Менеджер</div>
+              </div>
+              <div class="ph-body">
+                <div class="scard">
+                  <div class="sc-top"><span class="sc-name">МБ-2025-041 · Иванова А.С.</span></div>
+                  <div class="sc-sub">Кухня · Ленина 34</div>
+                  <div class="sc-warn">⚠ Техника — ждём 2 позиции</div>
+                  <div class="sc-money" style="margin-top:6px">₽ 186 000 · аванс ✓</div>
+                </div>
+                <div class="scard">
+                  <div class="sc-top"><span class="sc-name">МБ-2025-038 · Петров К.Н.</span><span class="sbadge done">готов</span></div>
+                  <div class="sc-sub">Шкаф-купе · Победы 12</div>
+                  <div class="sc-money" style="margin-top:6px">₽ 94 000 · оплачен ✓</div>
+                </div>
+                <div class="scard">
+                  <div class="sc-top"><span class="sc-name">МБ-2025-044 · Сидоров</span><span class="sbadge wait">замер</span></div>
+                  <div class="sc-sub">Гардероб · Садовая 5</div>
+                  <div class="sc-money" style="margin-top:6px">оценка ₽ 120 000</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Screen 2: day schedule -->
+          <div class="phone sm">
+            <div class="phscreen">
+              <div class="statusbar"><span>9:41</span><span class="sb-r">⣾ ▌</span></div>
+              <div class="ph-head">
+                <div><div class="ph-title">Расписание дня</div><div class="ph-sub">22 мая · 4 встречи</div></div>
+                <div class="ph-badge">Сегодня</div>
+              </div>
+              <div class="ph-body">
+                <div class="daysched">
+                  <div class="ds-marker">━● 10:00 — Начало смены</div>
+                  <div class="ds-row"><span class="ds-time">12:00</span><div class="ds-block"><b>Ким Л. — Консультация</b><span>Кухня · 2 ч</span></div></div>
+                  <div class="ds-row"><span class="ds-time">15:30</span><div class="ds-block green"><b>Захаров П. — Замер</b><span>Садовая 5 · GPS-чекин</span></div></div>
+                  <div class="ds-row"><span class="ds-time">17:00</span><div class="ds-block"><b>Лебедева — Договор</b><span>офис · подпись</span></div></div>
+                  <div class="ds-marker">━○ 19:00 — Конец смены</div>
+                  <div class="ds-btn">+ Добавить встречу</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div class="scaption">Заказы · Расписание · GPS-чекин · База знаний</div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 10 CHECKLIST -->
+  <section class="slide">
+    <div class="slide-brand"><span style="font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;color:rgba(255,255,255,.45)">@wasrusgen1</span><span style="display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.2);margin:0 8px;vertical-align:middle"></span><span style="font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;letter-spacing:1px">CRM</span></div>
+    <div class="stage">
+      <div class="kicker">Слайд 10 · Onboarding</div>
       <h2>Как подключить нового клиента</h2>
       <p class="sub">Интерактивный чеклист — кликните по пунктам. <span style="color:var(--accent2)">Прогресс сохраняется в сессии.</span></p>
       <div class="slide-body" style="justify-content:center">
@@ -435,10 +669,59 @@
     </div>
   </section>
 
-  <!-- 9 INFRA COST -->
+  <!-- 11 [EXPANDED] DATABASE & SECURITY -->
   <section class="slide">
+    <div class="slide-brand"><span style="font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;color:rgba(255,255,255,.45)">@wasrusgen1</span><span style="display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.2);margin:0 8px;vertical-align:middle"></span><span style="font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;letter-spacing:1px">CRM</span></div>
     <div class="stage">
-      <div class="kicker">Слайд 09 · Инфраструктура</div>
+      <div class="kicker">Слайд 11 · Архитектура и защита</div>
+      <h2>База данных и безопасность</h2>
+      <p class="sub">Данные каждого клиента физически отделены — утечка одного не затрагивает других.</p>
+      <div class="slide-body">
+        <div class="seccols">
+
+          <!-- Section A: DB architecture -->
+          <div class="sec-arch">
+            <div class="tag" style="margin-bottom:12px">A · Архитектура базы данных</div>
+            <div class="codeblock">
+              <div class="winbar"><i style="background:#ff5f57"></i><i style="background:#febc2e"></i><i style="background:#28c840"></i></div>
+<pre><span class="c-acc">PostgreSQL</span> <span class="c-mut">per-tenant</span>
+<span class="c-ok">├── crm_client1/</span>
+<span class="c-ok">│   ├── </span><span class="c-file">salons · users · clients</span>
+<span class="c-ok">│   ├── </span><span class="c-file">orders · appointments</span>
+<span class="c-ok">│   ├── </span><span class="c-file">requests · ratings</span>
+<span class="c-ok">│   └── </span><span class="c-file">shift_requests</span>
+<span class="c-ok">├── crm_client2/</span>
+<span class="c-ok">└── crm_clientN/</span>
+
+<span class="c-acc">Redis</span>      <span class="c-mut"># сессии + KPI-кеш</span>
+<span class="c-acc">MinIO/S3</span>   <span class="c-mut"># документы, фото</span>
+<span class="c-acc">Nginx</span>      <span class="c-mut"># routing + TLS termination</span></pre>
+            </div>
+          </div>
+
+          <!-- Section B: Security grid -->
+          <div>
+            <div class="tag" style="margin-bottom:12px">B · Безопасность</div>
+            <div class="secgrid">
+              <div class="seccard b1"><span class="si">🔐</span><h4>Физическая изоляция</h4><p>Каждый клиент — отдельная PostgreSQL БД. Код одного клиента физически не может достать данные другого.</p></div>
+              <div class="seccard b2"><span class="si">🔑</span><h4>Авторизация JWT</h4><p>Access (15 мин) + Refresh (30 дней). Роль и salonId в payload. Проверка на каждом запросе.</p></div>
+              <div class="seccard b2"><span class="si">🔒</span><h4>HTTPS / TLS</h4><p>Let's Encrypt, автообновление. HTTP → 301 redirect. HSTS включён.</p></div>
+              <div class="seccard b1"><span class="si">💾</span><h4>Резервные копии</h4><p>Ежедневный pg_dump в S3. Хранение 30 дней. RTO &lt; 1 ч, RPO &lt; 24 ч.</p></div>
+              <div class="seccard b2"><span class="si">👁</span><h4>Аудит-лог</h4><p>Каждое изменение заказа/клиента — с userId + timestamp. Просмотр только admin/owner.</p></div>
+              <div class="seccard b1"><span class="si">🛡</span><h4>RBAC</h4><p>5 ролей (owner, admin, manager, measurer, assembler). Матрица прав в SCHEMA.md.</p></div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 12 INFRA COST -->
+  <section class="slide">
+    <div class="slide-brand"><span style="font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;color:rgba(255,255,255,.45)">@wasrusgen1</span><span style="display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.2);margin:0 8px;vertical-align:middle"></span><span style="font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;letter-spacing:1px">CRM</span></div>
+    <div class="stage">
+      <div class="kicker">Слайд 12 · Инфраструктура</div>
       <h2>Инфраструктура и стоимость</h2>
       <p class="sub">Расходы растут вместе с числом клиентов — на старте почти нулевые.</p>
       <div class="slide-body" style="justify-content:center">
@@ -458,11 +741,12 @@
     </div>
   </section>
 
-  <!-- 10 ECONOMICS -->
+  <!-- 13 ECONOMICS -->
   <section class="slide">
+    <div class="slide-brand"><span style="font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;color:rgba(255,255,255,.45)">@wasrusgen1</span><span style="display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.2);margin:0 8px;vertical-align:middle"></span><span style="font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;letter-spacing:1px">CRM</span></div>
     <div class="stage">
-      <div class="kicker">Слайд 10 · Экономика</div>
+      <div class="kicker">Слайд 13 · Экономика</div>
-      <h2>Экономика продукта · P&L</h2>
+      <h2>Экономика продукта · P&amp;L</h2>
       <p class="sub">Точка безубыточности — первый же клиент. Маржа растёт с каждым следующим.</p>
       <div class="slide-body" style="justify-content:center">
         <div class="pl">
@@ -490,10 +774,11 @@
     </div>
   </section>
 
-  <!-- 11 ROADMAP -->
+  <!-- 14 ROADMAP -->
   <section class="slide">
+    <div class="slide-brand"><span style="font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;color:rgba(255,255,255,.45)">@wasrusgen1</span><span style="display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.2);margin:0 8px;vertical-align:middle"></span><span style="font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;letter-spacing:1px">CRM</span></div>
     <div class="stage">
-      <div class="kicker">Слайд 11 · Roadmap</div>
+      <div class="kicker">Слайд 14 · Roadmap</div>
       <h2>Roadmap продукта</h2>
       <p class="sub">Четыре фазы — от прототипа до AI-функций.</p>
       <div class="slide-body" style="justify-content:center">
@@ -519,29 +804,11 @@
     </div>
   </section>
 
-  <!-- 12 SECURITY -->
+  <!-- 15 SLA -->
   <section class="slide">
+    <div class="slide-brand"><span style="font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;color:rgba(255,255,255,.45)">@wasrusgen1</span><span style="display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.2);margin:0 8px;vertical-align:middle"></span><span style="font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;letter-spacing:1px">CRM</span></div>
     <div class="stage">
-      <div class="kicker">Слайд 12 · Безопасность</div>
+      <div class="kicker">Слайд 15 · Обязательства</div>
-      <h2>Безопасность и изоляция данных</h2>
-      <p class="sub">Данные каждого клиента физически отделены — утечка одного не затрагивает других.</p>
-      <div class="slide-body">
-        <div class="grid g3" style="flex:1;align-content:center">
-          <div class="card success"><div class="ic">🧱</div><h3>Физическая изоляция</h3><p>Каждый клиент — отдельная БД. Данные не пересекаются на уровне хранилища.</p></div>
-          <div class="card"><div class="ic">🔑</div><h3>JWT авторизация</h3><p>Токены доступа, роли и права на уровне API.</p></div>
-          <div class="card"><div class="ic">🔐</div><h3>HTTPS везде</h3><p>Let's Encrypt, авто-обновление сертификатов на всех поддоменах.</p></div>
-          <div class="card"><div class="ic">💾</div><h3>Бэкапы ежедневно</h3><p>Автоматический бэкап каждой БД, хранение и восстановление.</p></div>
-          <div class="card accent"><div class="ic">📤</div><h3>Экспорт данных</h3><p>Клиент может запросить выгрузку своих данных в любой момент.</p></div>
-          <div class="card"><div class="ic">📜</div><h3>Соответствие ПДн</h3><p>Хранение в РФ, разграничение доступа, журналирование.</p></div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <!-- 13 SLA -->
-  <section class="slide">
-    <div class="stage">
-      <div class="kicker">Слайд 13 · Обязательства</div>
       <h2>SLA и поддержка</h2>
       <p class="sub">Понятные обязательства перед клиентом — основа доверия и удержания.</p>
       <div class="slide-body">
@@ -555,10 +822,11 @@
     </div>
   </section>
 
-  <!-- 14 NEXT STEPS -->
+  <!-- 16 NEXT STEPS -->
   <section class="slide">
+    <div class="slide-brand"><span style="font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;color:rgba(255,255,255,.45)">@wasrusgen1</span><span style="display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.2);margin:0 8px;vertical-align:middle"></span><span style="font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;letter-spacing:1px">CRM</span></div>
     <div class="stage">
-      <div class="kicker">Слайд 14 · План действий</div>
+      <div class="kicker">Слайд 16 · План действий</div>
       <h2>Следующие шаги</h2>
       <p class="sub">Конкретный план на 4 недели — от выбора клиента до запуска пилота.</p>
       <div class="slide-body">
@@ -576,11 +844,11 @@
 </div>
 
 <div class="brandmark">@wasrusgen1 · CRM PLATFORM</div>
-<div class="pagenum" id="pagenum">01 / 14</div>
+<div class="pagenum" id="pagenum">01 / 16</div>
 
 <nav class="nav">
   <button id="prev" aria-label="Назад">‹</button>
-  <div class="counter"><b id="cur">1</b> / 14</div>
+  <div class="counter"><b id="cur">1</b> / 16</div>
   <button id="next" aria-label="Вперёд">›</button>
 </nav>