/* UCHI.UZ — presentation for the Ministry of Preschool and School Education of Uzbekistan.
   16:9 slides drawn at 1920×1080 and scaled to the screen; the same file prints one slide per PDF page. */
@font-face { font-family: "Onest"; font-weight: 100 900; font-display: swap; src: url(assets/onest-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 100 900; font-display: swap; src: url(assets/onest-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-weight: 100 900; font-display: swap; src: url(assets/onest-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #221B45; --ink-2: #57537A; --ink-3: #8C88A8;
  --v: #765FDE; --v-d: #4E35C2; --v-l: #EEEAFF; --v-xl: #F7F5FF;
  --coral: #FF6B57; --coral-l: #FFE9E5; --teal: #12A898; --teal-l: #DDF6F2; --sun: #FFB81F; --sun-l: #FFF3D6;
  --sky: #3D8BFF; --sky-l: #E3EEFF; --green: #24B36B; --green-l: #DFF6E9; --pink: #F2559A;
  --line: #E6E2F4; --paper: #FFFFFF;
  --f: "Onest", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #16122E; font-family: var(--f); color: var(--ink); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
button { font: inherit; }

/* ---------- stage: every slide is 1920×1080, scaled to fit ---------- */
.deck { position: fixed; inset: 0; overflow: hidden; }
/* centred by offsets, not by grid alignment: a box wider than the window must not stick to the left edge */
.stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform: translate(-50%, -50%) scale(var(--s, .5)); transform-origin: center; }
.slide { position: absolute; inset: 0; display: none; overflow: hidden; background: var(--paper); padding: 92px 120px 96px; }
.slide.on { display: block; animation: s-in .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes s-in { from { opacity: 0; transform: translateY(12px); } }

/* slide chrome: brand, section, number, sources */
.chrome { position: absolute; left: 120px; right: 120px; top: 40px; display: flex; align-items: center; gap: 18px; font: 600 17px var(--f); color: var(--ink-3); letter-spacing: .02em; }
.brand { font: 900 22px var(--f); letter-spacing: -.01em; color: var(--ink); }
.brand b { color: var(--v); font-weight: 900; }
.chrome .sec { text-transform: uppercase; letter-spacing: .12em; font-size: 14px; color: var(--v); }
.chrome .sec::before { content: ""; display: inline-block; width: 28px; height: 2px; margin: 0 14px 4px 0; background: var(--v); vertical-align: middle; }
.pn { position: absolute; right: 120px; bottom: 40px; font: 700 16px var(--f); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.src { position: absolute; left: 120px; right: 260px; bottom: 36px; font: 400 13.5px/1.45 var(--f); color: var(--ink-3); }
.src b { font-weight: 700; color: var(--ink-2); }

/* type scale */
.kicker { margin: 0 0 18px; font: 700 18px var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--v); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
.t { font: 800 60px/1.08 var(--f); letter-spacing: -.02em; color: var(--ink); max-width: 1400px; }
.t em { font-style: normal; color: var(--v); }
.lead { margin: 22px 0 0; font: 400 27px/1.45 var(--f); color: var(--ink-2); max-width: 1180px; }
.lead b { color: var(--ink); font-weight: 700; }
p { margin: 0; }
.small { font-size: 18px; color: var(--ink-2); line-height: 1.45; }

/* layout helpers */
.row { display: flex; gap: 32px; }
.grid { display: grid; gap: 28px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mt-s { margin-top: 28px; } .mt { margin-top: 48px; } .mt-l { margin-top: 64px; }
.card { border-radius: 28px; padding: 32px 34px; background: var(--v-xl); border: 1px solid var(--line); }
.card h3 { font: 800 28px/1.2 var(--f); color: var(--ink); }
.card p { margin-top: 12px; font: 400 21px/1.45 var(--f); color: var(--ink-2); }
.card.v { background: var(--v-l); border-color: transparent; } .card.coral { background: var(--coral-l); border-color: transparent; }
.card.teal { background: var(--teal-l); border-color: transparent; } .card.sun { background: var(--sun-l); border-color: transparent; }
.card.sky { background: var(--sky-l); border-color: transparent; } .card.green { background: var(--green-l); border-color: transparent; }
.card.dark { background: var(--ink); color: #fff; border-color: transparent; } .card.dark h3 { color: #fff; } .card.dark p { color: #D2CCF0; }
.ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; background: #fff; font-size: 30px; }

/* big numbers */
.num { font: 900 92px/1 var(--f); letter-spacing: -.03em; color: var(--v); font-variant-numeric: tabular-nums; }
.num small { font-size: .42em; font-weight: 800; letter-spacing: 0; margin-left: 6px; }
.num.coral { color: var(--coral); } .num.teal { color: var(--teal); } .num.sun { color: #E59A00; } .num.sky { color: var(--sky); } .num.ink { color: var(--ink); }
.cap { margin-top: 14px; font: 500 21px/1.4 var(--f); color: var(--ink-2); }
.cap b { color: var(--ink); }
.stat { padding: 30px 32px; border-radius: 28px; background: var(--v-xl); border: 1px solid var(--line); }

/* pills and bullets */
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 100px; background: var(--v-l); color: var(--v-d); font: 700 18px var(--f); }
.ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.ul li { position: relative; padding-left: 38px; font: 400 23px/1.45 var(--f); color: var(--ink-2); }
.ul li::before { content: ""; position: absolute; left: 0; top: .32em; width: 22px; height: 22px; border-radius: 50%; background: var(--v); border: 5px solid var(--v-l); box-sizing: border-box; }
.ul li b { color: var(--ink); }

/* screenshots */
.shot { border-radius: 22px; overflow: hidden; background: #fff; border: 2px solid #E2DDF2; }
.shot img { width: 100%; height: auto; }
.browser { border-radius: 22px; overflow: hidden; background: #fff; border: 2px solid #E2DDF2; }
.browser .bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; background: #F1EFF8; }
.browser .bar i { width: 12px; height: 12px; border-radius: 50%; background: #FF6159; } .browser .bar i:nth-child(2) { background: #FFBD2E; } .browser .bar i:nth-child(3) { background: #28C941; }
.browser .bar span { margin-left: 18px; padding: 4px 16px; border-radius: 8px; background: #fff; font: 500 15px var(--f); color: var(--ink-2); }
.phone { width: 300px; border-radius: 44px; padding: 12px; background: #1D1838; }
.phone img { border-radius: 33px; }

/* tables */
table.tb { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 20px/1.35 var(--f); font-variant-numeric: tabular-nums; }
.tb th { text-align: left; font: 700 15px var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 0 16px 14px; border-bottom: 2px solid var(--line); }
.tb td { padding: 15px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.tb td b { color: var(--ink); }
.tb .r { text-align: right; }
.tb tr.hl td { background: var(--v-xl); }

/* cover and dark slides */
.slide.cover { padding: 0; background: linear-gradient(135deg, #6A50E4 0%, #4B32B8 55%, #2C1C78 100%); color: #fff; }
.slide.dark { background: linear-gradient(135deg, #2A1F6B, #1B1446); color: #fff; }
.slide.dark .t, .slide.dark h3 { color: #fff; } .slide.dark .lead { color: #D9D3F5; } .slide.dark .chrome, .slide.dark .pn, .slide.dark .src { color: #A9A0D6; }
.slide.dark .brand { color: #fff; } .slide.dark .brand b { color: #B9A8FF; } .slide.dark .chrome .sec { color: #C9BCFF; } .slide.dark .chrome .sec::before { background: #C9BCFF; }
.slide.tint { background: linear-gradient(180deg, #F7F5FF 0%, #FFFFFF 70%); }

/* interactive ui (screen only) */
.ui { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 16px; background: rgba(22, 18, 46, .82); backdrop-filter: blur(8px); color: #fff; z-index: 10; opacity: 0; transition: opacity .25s; }
.deck:hover ~ .ui, .ui:hover, .ui:focus-within, body.ui-on .ui { opacity: 1; }
.ui button { height: 38px; min-width: 38px; padding: 0 12px; border: 0; border-radius: 11px; background: transparent; color: #fff; font: 700 15px var(--f); cursor: pointer; }
.ui button:hover, .ui button:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }
.ui .cnt { min-width: 74px; text-align: center; font: 700 15px var(--f); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .8); }
.progress { position: fixed; left: 0; top: 0; height: 4px; background: linear-gradient(90deg, #9C88FF, #FF8A75); z-index: 11; transition: width .3s; }
.ov { position: fixed; inset: 0; z-index: 20; display: none; overflow: auto; padding: 40px; background: rgba(22, 18, 46, .96); }
.ov.on { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; align-content: start; }
.ov button { position: relative; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; overflow: hidden; padding: 0; background: #fff; cursor: pointer; outline: 3px solid transparent; }
.ov button:hover, .ov button:focus-visible, .ov button.cur { outline-color: #9C88FF; }
.ov .mini { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; pointer-events: none; }
.ov .mini .slide { display: block; animation: none; }
.ov b { position: absolute; left: 10px; bottom: 8px; padding: 3px 10px; border-radius: 8px; background: rgba(22, 18, 46, .8); color: #fff; font: 700 13px var(--f); }
.lb { position: fixed; inset: 0; z-index: 30; display: none; place-items: center; padding: 40px; background: rgba(22, 18, 46, .92); cursor: zoom-out; }
.lb.on { display: grid; } .lb img { max-width: 92vw; max-height: 88vh; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
[data-zoom] { cursor: zoom-in; }
.only-print { display: none; }

/* ---------- print: one slide per page, static ---------- */
@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html, body { height: auto; background: #fff; }
  .deck { position: static; display: block; overflow: visible; }
  .stage { position: static; transform: none !important; width: 1920px; height: auto; }
  .slide { position: relative; display: block !important; width: 1920px; height: 1080px; break-after: page; page-break-after: always; animation: none !important; }
  .slide:last-child { break-after: auto; page-break-after: auto; }
  .ui, .progress, .ov, .lb, .only-screen { display: none !important; }
  .only-print { display: block !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- language switcher (screen only) ---------- */
.langs { position: fixed; top: 14px; right: 14px; z-index: 12; display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #221B45; }
.langs a { min-width: 54px; height: 32px; padding: 0 10px; border-radius: 10px; display: grid; place-items: center; font: 800 13px var(--f); letter-spacing: .08em; color: #CFC9EA; text-decoration: none; }
.langs a.on { background: #fff; color: #221B45; }
.langs a:hover:not(.on), .langs a:focus-visible { background: #3A325F; color: #fff; outline: none; }
@media print { .langs { display: none !important; } }

/* slide-specific layouts (appended to deck.css at build time) */

/* 1 · cover */
.cover .cv-l { position: absolute; left: 120px; top: 110px; width: 1000px; }
.cv-brand { display: flex; align-items: center; gap: 22px; font: 900 44px var(--f); letter-spacing: -.01em; color: #fff; }
.cv-brand b { color: #C9BCFF; }
.cv-pill { padding: 10px 20px; border-radius: 100px; background: #7A65E6; font: 700 19px var(--f); letter-spacing: .02em; color: #fff; }
.cv-t { margin-top: 120px; font: 900 92px/1.02 var(--f); letter-spacing: -.035em; color: #fff; }
.cv-s { margin-top: 36px; max-width: 920px; font: 400 30px/1.45 var(--f); color: #E8E3FF; }
.cv-f { position: absolute; left: 120px; bottom: 84px; font: 600 21px/1.5 var(--f); color: #C9BFF5; }
.cv-m { position: absolute; right: 70px; bottom: 130px; width: 680px; }
.cv-qr { position: absolute; right: 120px; top: 100px; display: flex; align-items: center; gap: 22px; padding: 18px 26px 18px 18px; border-radius: 26px; background: #fff; color: var(--ink); }
.cv-qr img { width: 132px; height: 132px; }
.cv-qr span { font: 500 19px/1.4 var(--f); color: var(--ink-2); }
.cv-qr b { display: block; margin-top: 4px; font: 800 24px var(--f); color: var(--ink); }

/* section title band used on content slides */
.head { max-width: 1500px; }

/* 2 · summary */
.sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 46px; }
.sum .card { position: relative; min-height: 300px; padding: 34px 40px 36px 132px; }
.sum .n { position: absolute; left: 36px; top: 34px; width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; font: 900 32px var(--f); color: #fff; background: var(--v); }
.sum .card.coral .n { background: var(--coral); } .sum .card.teal .n { background: var(--teal); } .sum .card.sun .n { background: #E59A00; }
.sum h3 { font-size: 31px; }
.sum p { font-size: 22.5px; }
.sum p b { color: var(--ink); }

/* 3 · context */
.ctx { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; margin-top: 44px; }
.ctx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.ctx-stats .stat { padding: 26px 28px; }
.ctx-stats .num { font-size: 72px; }
.ctx-stats .cap { font-size: 19px; margin-top: 10px; }
.scores h3 { font: 800 26px var(--f); color: var(--ink); margin-bottom: 6px; }
.scores .small { margin-bottom: 18px; }
.sc-row { display: grid; grid-template-columns: 200px 1fr 70px; align-items: center; gap: 18px; margin-top: 16px; }
.sc-row span { font: 600 19px/1.3 var(--f); color: var(--ink-2); }
.sc-row span small { display: block; font-size: 15px; font-weight: 500; color: var(--ink-3); }
.sc-bar { position: relative; height: 34px; border-radius: 10px; background: #F1EFF8; }
.sc-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; background: var(--coral); }
.sc-bar i.ref { background: transparent; border-right: 4px solid var(--ink); border-radius: 0; }
.sc-row b { font: 800 22px var(--f); color: var(--ink); font-variant-numeric: tabular-nums; }
.sc-legend { display: flex; gap: 28px; margin-top: 22px; font: 500 17px var(--f); color: var(--ink-2); }
.sc-legend i { display: inline-block; width: 18px; height: 18px; border-radius: 5px; margin-right: 8px; vertical-align: -3px; background: var(--coral); }
.sc-legend i.ref { background: none; border-right: 4px solid var(--ink); border-radius: 0; width: 10px; }

/* 4 · priorities */
.prio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 48px; }
.prio .card { min-height: 330px; }
.prio .tag { display: inline-block; margin-bottom: 16px; padding: 6px 14px; border-radius: 10px; background: #fff; font: 700 15px var(--f); letter-spacing: .06em; text-transform: uppercase; color: var(--v-d); }
.prio .how { margin-top: 18px; padding-top: 16px; border-top: 2px dashed #D6D0EA; font: 600 19px/1.4 var(--f); color: var(--v-d); }

/* 5 · solution */
.sol { display: grid; grid-template-columns: 820px 1fr; gap: 60px; margin-top: 40px; }
.steps { display: grid; gap: 16px; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start; padding: 18px 24px; border-radius: 24px; background: var(--v-xl); border: 1px solid var(--line); }
.step i { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font: 900 28px var(--f); font-style: normal; color: #fff; background: var(--v); }
.step:nth-child(2) i { background: var(--coral); } .step:nth-child(3) i { background: var(--teal); } .step:nth-child(4) i { background: #E59A00; }
.step h3 { font: 800 25px/1.25 var(--f); }
.step p { margin-top: 6px; font: 400 19.5px/1.45 var(--f); color: var(--ink-2); }
.sol-vis { display: grid; align-content: start; gap: 14px; }
.sol-vis .browser { width: 100%; }
.vis-cap { font: 500 17px/1.4 var(--f); color: var(--ink-3); }
.strip { position: absolute; left: 120px; right: 120px; bottom: 96px; display: flex; justify-content: space-between; padding: 22px 34px; border-radius: 22px; background: var(--ink); color: #fff; }
.strip div { font: 500 18px/1.3 var(--f); color: #C9C3E6; }
.strip b { display: block; font: 900 34px var(--f); color: #fff; letter-spacing: -.01em; }

/* 6 · stakeholders */
.who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 46px; }
.who .card { padding: 0 0 30px; overflow: hidden; min-height: 640px; }
.who .card .pic { height: 210px; display: grid; place-items: end center; }
.who .card .pic img { height: 196px; width: auto; }
.who .card h3 { margin: 22px 30px 0; }
.who .ul { margin: 16px 30px 0; gap: 12px; }
.who .ul li { font-size: 19.5px; padding-left: 30px; }
.who .ul li::before { width: 18px; height: 18px; top: .36em; border: 4px solid #fff; }

/* 7 · demo */
.demo { display: grid; grid-template-columns: 1000px 1fr; gap: 50px; margin-top: 30px; }
.demo .browser { width: 1000px; }
.demo .browser .frame { position: relative; width: 100%; height: 625px; overflow: hidden; background: #fff; }
.demo .browser .frame img { width: 100%; }
.demo .browser iframe { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; border: 0; transform: scale(.6944); transform-origin: 0 0; background: #fff; }
.demo .right { display: grid; align-content: start; gap: 26px; }
.demo .phones { display: flex; gap: 30px; }
.demo .phones .phone { width: 240px; padding: 10px; border-radius: 38px; }
.demo .phones .phone img { border-radius: 29px; }
.demo-side { display: flex; align-items: center; gap: 22px; }
.demo-side img { width: 110px; height: 110px; padding: 8px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.demo-side p { font: 500 19px/1.45 var(--f); color: var(--ink-2); }
.demo-side b { display: block; font: 800 25px var(--f); color: var(--ink); }
.demo-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--v-l); color: var(--v-d); font: 700 17px var(--f); cursor: pointer; text-decoration: none; }
.btn.on, .btn:hover { background: var(--v); color: #fff; }
.demo-lead { margin-top: 16px; font: 400 24px/1.4 var(--f); color: var(--ink-2); max-width: 1500px; }

/* 8 · mechanics gallery */
.mech { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin-top: 30px; }
.mech figure { margin: 0; }
.mech .shot { border-radius: 16px; aspect-ratio: 2.15 / 1; }
.mech .shot img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.mech figcaption { margin-top: 8px; font: 700 17px/1.25 var(--f); color: var(--ink); }
.mech figcaption small { display: block; margin-top: 2px; font: 500 15px var(--f); color: var(--ink-3); }

/* 9 · motivation */
.mot { display: grid; grid-template-columns: 1050px 1fr; gap: 50px; margin-top: 40px; }
.mot .big .shot { border-radius: 22px; }
.mot .side { display: grid; gap: 20px; align-content: start; }
.mot .mini { display: grid; grid-template-columns: 250px 1fr; gap: 20px; align-items: center; }
.mot .mini .shot { border-radius: 14px; }
.mot .mini h3 { font: 800 23px/1.25 var(--f); }
.mot .mini p { margin-top: 6px; font: 400 18px/1.4 var(--f); color: var(--ink-2); }
.mot .cap-o { margin-top: 18px; font: 500 20px/1.45 var(--f); color: var(--ink-2); }
.mot .cap-o b { color: var(--ink); }

/* 10 · programme */
.prog { margin-top: 34px; }
.prog table { width: 100%; border-collapse: separate; border-spacing: 10px; margin: -10px; }
.prog th { font: 700 16px var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 0 10px 4px; }
.prog td { vertical-align: top; padding: 18px 20px; border-radius: 18px; background: var(--v-xl); font: 400 18.5px/1.4 var(--f); color: var(--ink-2); }
.prog td.subj { width: 220px; background: none; padding: 16px 6px; }
.prog td.subj b { display: flex; align-items: center; gap: 12px; font: 800 22px/1.2 var(--f); color: var(--ink); }
.prog td.subj b img { width: 46px; height: 46px; border-radius: 12px; }
.prog td.subj small { display: block; margin-top: 6px; font: 500 15px var(--f); color: var(--ink-3); }
.prog td em { display: inline-block; margin-bottom: 6px; padding: 2px 10px; border-radius: 8px; font: 800 15px var(--f); font-style: normal; color: #fff; background: var(--v); }
.prog tr.uz td:not(.subj) { background: var(--teal-l); } .prog tr.uz td em { background: var(--teal); }
.prog tr.ru td:not(.subj) { background: var(--coral-l); } .prog tr.ru td em { background: var(--coral); }
.prog tr.en td:not(.subj) { background: var(--sky-l); } .prog tr.en td em { background: var(--sky); }

/* 11 · uchi.ru */
.u-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 44px; }
.u-stats .stat { padding: 28px 30px; }
.u-stats .num { font-size: 78px; }
.tl { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin-top: 52px; padding-top: 46px; }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--v-l), var(--v)); }
.tl > div { position: relative; }
.tl > div::before { content: ""; position: absolute; left: 0; top: -40px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 5px solid var(--v); }
.tl b { display: block; font: 900 30px var(--f); color: var(--v); }
.tl p { margin-top: 8px; font: 400 18px/1.42 var(--f); color: var(--ink-2); }

/* 12 · finances */
.fin { display: grid; grid-template-columns: 1060px 1fr; gap: 52px; margin-top: 30px; }
.fin-chart { padding: 26px 30px 12px; border-radius: 28px; background: #fff; border: 1px solid var(--line); }
.fin-top { display: flex; align-items: center; justify-content: space-between; }
.fin-top h3 { font: 800 23px var(--f); }
.fin-top h3 small { font: 500 17px var(--f); color: var(--ink-3); margin-left: 8px; }
.seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--v-xl); border: 1px solid var(--line); }
.seg button { height: 36px; padding: 0 16px; border: 0; border-radius: 9px; background: none; font: 700 16px var(--f); color: var(--ink-2); cursor: pointer; }
.seg button.on { background: var(--v); color: #fff; }
.legend { display: flex; gap: 24px; margin: 8px 0 0; font: 500 17px var(--f); color: var(--ink-2); }
.legend i { display: inline-block; width: 16px; height: 16px; border-radius: 5px; margin-right: 8px; vertical-align: -2px; }
.fin-facts { display: grid; gap: 18px; align-content: start; }
.fin-facts .stat { padding: 22px 26px; }
.fin-facts .num { font-size: 58px; }
.fin-facts .cap { font-size: 18px; margin-top: 8px; }

/* 13 · products */
.prod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.prod .card { padding: 26px 28px; }
.prod .card h3 { font-size: 24px; }
.prod .card p { font-size: 18.5px; margin-top: 8px; }
.ages { display: grid; grid-template-columns: 1fr 1.2fr 1.6fr 1fr; gap: 6px; margin-top: 30px; }
.ages div { padding: 16px 20px; font: 700 19px var(--f); color: #fff; background: var(--v); }
.ages div:first-child { border-radius: 16px 0 0 16px; background: #B4A6F5; } .ages div:nth-child(2) { background: #8F7BEA; } .ages div:nth-child(3) { background: var(--v); } .ages div:last-child { border-radius: 0 16px 16px 0; background: var(--v-d); }
.ages small { display: block; font: 500 15px var(--f); color: #EEEAFF; }
.evid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }

/* 14 · markets */
.mk { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 36px; }
.mk table.tb td, .mk table.tb th { padding-left: 12px; padding-right: 12px; }
.mk table.tb { font-size: 18.5px; }

/* 15 · projection */
.proj { display: grid; grid-template-columns: 1fr 760px; gap: 50px; margin-top: 30px; }
.calc { padding: 30px 34px; border-radius: 28px; background: var(--ink); color: #fff; }
.calc h3 { font: 800 25px var(--f); color: #fff; }
.calc .scen { display: flex; gap: 8px; margin: 18px 0 8px; }
.calc .scen button { flex: 1; height: 44px; border: 1px solid #4C4570; border-radius: 12px; background: transparent; color: #CFC9EA; font: 700 17px var(--f); cursor: pointer; }
.calc .scen button.on { background: #fff; color: var(--ink); border-color: #fff; }
.calc label { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin-top: 18px; font: 500 18px var(--f); color: #CFC9EA; }
.calc label b { font: 800 20px var(--f); color: #fff; font-variant-numeric: tabular-nums; }
.calc input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: #9C88FF; }
.calc .res { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.calc .res div { padding: 16px 18px; border-radius: 16px; background: #322B57; font: 500 16px var(--f); color: #BDB6DE; }
.calc .res b { display: block; margin-top: 4px; font: 900 32px var(--f); color: #fff; font-variant-numeric: tabular-nums; }
.calc .note { margin-top: 16px; font: 400 15px/1.4 var(--f); color: #A49DC9; }

/* 16 · benefits */
.ben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.ben .card { min-height: 300px; }
.ben .ic { width: 72px; height: 72px; border-radius: 20px; }
.ben .ic img { width: 56px; height: 56px; }

/* 17 · roadmap */
.road { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 46px; }
.road > div { position: relative; padding: 30px 30px 30px 34px; min-height: 410px; background: var(--v-xl); border-right: 1px solid #fff; }
.road > div:first-child { border-radius: 28px 0 0 28px; } .road > div:last-child { border-radius: 0 28px 28px 0; border-right: 0; }
.road > div:nth-child(2) { background: var(--v-l); } .road > div:nth-child(3) { background: #DCD4FF; } .road > div:nth-child(4) { background: var(--v); color: #fff; }
.road .when { font: 800 16px var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--v-d); }
.road > div:nth-child(4) .when { color: #E4DDFF; }
.road h3 { margin-top: 10px; font: 800 28px/1.2 var(--f); }
.road > div:nth-child(4) h3 { color: #fff; }
.road .ul { margin-top: 18px; gap: 10px; }
.road .ul li { font-size: 19px; padding-left: 28px; }
.road .ul li::before { width: 11px; height: 11px; box-shadow: none; }
.road > div:nth-child(4) .ul li { color: #EDE9FF; } .road > div:nth-child(4) .ul li::before { background: #fff; }
.kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 26px; }
.kpi div { padding: 20px 24px; border-radius: 20px; border: 2px dashed #CFC6F7; font: 500 18px/1.4 var(--f); color: var(--ink-2); }
.kpi b { display: block; font: 800 21px/1.25 var(--f); color: var(--ink); margin-bottom: 6px; }

/* 18 · safety */
.safe { display: grid; grid-template-columns: 1fr 640px; gap: 54px; margin-top: 40px; }
.safe .ul li { font-size: 22px; }
.safe .shot { border-radius: 20px; }

/* 19 · ask */
.ask { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 36px; }
.ask ol { margin: 0; padding: 0; list-style: none; counter-reset: a; display: grid; gap: 16px; }
.ask ol li { counter-increment: a; position: relative; padding: 17px 24px 17px 88px; border-radius: 22px; background: var(--v-xl); border: 1px solid var(--line); font: 400 22px/1.4 var(--f); color: var(--ink-2); }
.ask ol li::before { content: counter(a); position: absolute; left: 22px; top: 14px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--v); color: #fff; font: 900 23px var(--f); }
.ask ol li b { color: var(--ink); }
.ask .give li::before { background: var(--teal); }
.ask h3 { font: 800 26px var(--f); margin-bottom: 18px; }

/* 20 · thanks */
.thanks { display: grid; grid-template-columns: 1fr 520px; gap: 60px; align-items: center; height: 100%; }
.thanks h2 { font: 900 110px/1 var(--f); letter-spacing: -.04em; color: #fff; }
.thanks p { margin-top: 26px; font: 400 30px/1.45 var(--f); color: #DCD6F7; max-width: 800px; }
.thanks .qrc { justify-self: end; padding: 28px; border-radius: 32px; background: #fff; text-align: center; }
.thanks .qrc img { width: 300px; height: 300px; }
.thanks .qrc b { display: block; margin-top: 14px; font: 800 30px var(--f); color: var(--ink); }
.thanks .qrc span { display: block; margin-top: 4px; font: 500 19px var(--f); color: var(--ink-2); }
.thanks-m { position: absolute; left: 980px; bottom: -30px; width: 440px; }

/* appendix */
.apx { columns: 2; column-gap: 54px; margin-top: 30px; font: 400 15.5px/1.5 var(--f); color: var(--ink-2); }
.apx p { break-inside: avoid; margin: 0 0 10px; }
.apx b { color: var(--ink); }
.apx a { color: var(--v-d); text-decoration: none; word-break: break-all; }
.meth { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 34px; }
.meth .tb { font-size: 18px; }
.formula { padding: 22px 26px; border-radius: 20px; background: var(--v-xl); border: 1px solid var(--line); font: 600 21px/1.6 var(--f); color: var(--ink); }

.tb td.r, .tb th.r { white-space: nowrap; }
.next { position: absolute; left: 120px; right: 120px; bottom: 96px; display: flex; align-items: center; gap: 28px; padding: 22px 34px; border-radius: 26px; background: var(--ink); color: #fff; }
.next img { width: 108px; height: 108px; object-fit: contain; margin: -40px 0 -22px; }
.next p { font: 400 23px/1.4 var(--f); color: #CFC9EA; }
.next b { display: block; font: 800 26px var(--f); color: #fff; }

/* 10 · adaptation */
.adapt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 40px; }
.adapt .card { padding: 30px 32px 34px; }
.adapt .card .ic { width: 64px; height: 64px; border-radius: 18px; }
.adapt .card .ic img { width: 50px; height: 50px; }
.adapt .ul { margin-top: 18px; gap: 14px; }
.adapt .ul li { font-size: 22px; }
.road .ul li::before { width: 14px; height: 14px; top: .45em; border-width: 3px; }
.road > div:nth-child(4) .ul li::before { background: #fff; border-color: #B7A8FF; }

.slide .next.up { bottom: 120px; }

/* phones: loaded after every slide style, so these rules win */
/* ---------- phones and small screens: slides become a readable vertical feed ---------- */
@media (max-width: 820px), (max-height: 520px) {
  html, body { height: auto; background: #E6E2F4; }
  .deck { position: static; display: block; overflow: visible; }
  .stage { position: static; width: auto; height: auto; transform: none !important; }
  .slide, .slide.on { position: relative; display: block !important; width: auto; height: auto; margin: 0 0 10px; padding: 20px 16px 22px; overflow: visible; animation: none; }
  .ui, .progress, .ov { display: none !important; }
  .langs { top: 10px; right: 10px; padding: 3px; border-radius: 12px; }
  .langs a { min-width: 42px; height: 28px; padding: 0 8px; font-size: 11px; border-radius: 9px; }
  .langs { transition: transform .25s ease; }
  .langs.away { transform: translateY(-60px); }

  .chrome { position: static; gap: 10px; margin: 0 0 12px; padding-right: 150px; font-size: 11px; }
  .brand { font-size: 15px; }
  .chrome .sec { font-size: 9.5px; letter-spacing: .1em; }
  .chrome .sec::before { width: 14px; margin-right: 8px; }
  .pn { position: static; margin-top: 10px; text-align: right; font-size: 11px; }
  .src { position: static; margin-top: 12px; font-size: 10.5px; line-height: 1.45; }
  .t { font-size: 25px; line-height: 1.15; }
  .lead, .demo-lead { margin-top: 10px; font-size: 15px; line-height: 1.45; }
  .small { font-size: 12.5px; }
  .mt { margin-top: 14px; } .mt-s { margin-top: 10px; } .mt-l { margin-top: 18px; }
  .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .card { padding: 15px 16px; border-radius: 18px; }
  .card h3 { font-size: 17px; }
  .card p { margin-top: 6px; font-size: 14px; line-height: 1.45; }
  .card .num[style], .stat .num[style] { font-size: 34px !important; }
  .card p[style] { font-size: 14px !important; }
  .stat { padding: 13px 15px; border-radius: 16px; }
  .num { font-size: 38px; }
  .cap { margin-top: 6px; font-size: 13px; }
  .ul { gap: 8px; }
  .ul li { padding-left: 24px; font-size: 14px; }
  .ul li::before { width: 15px; height: 15px; top: .3em; border-width: 4px; }
  .shot, .browser { border-radius: 12px; border-width: 1px; }
  .browser .bar { height: 22px; gap: 5px; padding: 0 9px; }
  .browser .bar i { width: 7px; height: 7px; }
  .browser .bar span { margin-left: 8px; padding: 1px 8px; font-size: 10px; border-radius: 5px; }
  .phone { padding: 6px; border-radius: 22px; }
  .phone img { border-radius: 17px; }
  table.tb { font-size: 12.5px; }
  .tb th { padding: 0 6px 8px; font-size: 9.5px; letter-spacing: .05em; }
  .tb td { padding: 8px 6px; }

  /* 1 · cover */
  .slide.cover { display: flex !important; flex-direction: column; padding: 56px 18px 24px; }
  .cover .cv-l { position: static; width: auto; order: 1; }
  .cv-brand { flex-wrap: wrap; gap: 10px; font-size: 24px; }
  .cv-pill { padding: 5px 10px; font-size: 11px; }
  .cv-t { margin-top: 18px; font-size: 33px; line-height: 1.06; }
  .cv-s { margin-top: 12px; font-size: 15px; }
  .cv-m { position: static; order: 2; width: 100%; max-width: 360px; margin: 18px auto 0; }
  .cv-qr { position: static; order: 3; align-self: flex-start; margin-top: 16px; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; }
  .cv-qr img { width: 72px; height: 72px; }
  .cv-qr span { font-size: 12px; } .cv-qr b { font-size: 15px; }
  .cv-f { position: static; order: 4; margin-top: 16px; font-size: 12px; }

  /* 2 · summary */
  .sum { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
  .sum .card { min-height: 0; padding: 14px 15px 15px 60px; }
  .sum .n { left: 14px; top: 14px; width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
  .sum h3 { font-size: 17px; } .sum p { font-size: 14px; }

  /* 3 · context */
  .ctx { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 14px; }
  .ctx-stats { gap: 10px; }
  .ctx-stats .stat { padding: 12px 13px; }
  .ctx-stats .num { font-size: 32px; }
  .ctx-stats .cap { margin-top: 4px; font-size: 12px; }
  .scores h3 { font-size: 17px; }
  .scores .small { margin-bottom: 4px; }
  .sc-row { grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 8px; margin-top: 10px; }
  .sc-row span { font-size: 13px; } .sc-row span small { font-size: 10.5px; }
  .sc-bar { height: 22px; border-radius: 7px; } .sc-bar i { border-radius: 7px; }
  .sc-row b { font-size: 14px; }
  .sc-legend { flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; }

  /* 4 · priorities */
  .prio { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
  .prio .card { min-height: 0; }
  .prio .tag { margin-bottom: 8px; padding: 4px 9px; font-size: 10px; }
  .prio .how { margin-top: 10px; padding-top: 8px; font-size: 13.5px; }

  /* 5 · solution */
  .sol { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
  .steps { gap: 8px; }
  .step { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: 16px; }
  .step i { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
  .step h3 { font-size: 15.5px; } .step p { font-size: 13.5px; }
  .vis-cap { font-size: 12px; }
  .strip { position: static; flex-wrap: wrap; gap: 12px 0; margin-top: 14px; padding: 12px 14px; border-radius: 16px; }
  .strip div { width: 50%; font-size: 11.5px; }
  .strip b { font-size: 19px; }

  /* 6 · stakeholders */
  .who { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
  .who .card { min-height: 0; padding: 0 0 14px; }
  .who .card .pic { height: 104px; }
  .who .card .pic img { height: 98px; }
  .who .card h3 { margin: 10px 12px 0; font-size: 16px; }
  .who .ul { margin: 8px 12px 0; gap: 6px; }
  .who .ul li { padding-left: 17px; font-size: 12.5px; }
  .who .ul li::before { width: 10px; height: 10px; top: .4em; border-width: 2px; }

  /* 7 · demo */
  .demo { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
  .demo .browser { width: auto; }
  .demo .browser .frame { height: auto; aspect-ratio: 1680 / 1050; }
  .demo .right { gap: 14px; }
  .demo .phones { gap: 10px; }
  .demo .phones .phone { width: calc(50% - 5px); padding: 6px; border-radius: 22px; }
  .demo .phones .phone img { border-radius: 17px; }
  .demo-side { gap: 12px; }
  .demo-side img { width: 72px; height: 72px; padding: 5px; border-radius: 12px; }
  .demo-side p { font-size: 13px; } .demo-side b { font-size: 15px; }
  .demo-btns [data-demo] { display: none; }
  .btn { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 11px; }

  /* 8 · mechanics */
  .mech { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; margin-top: 12px; }
  .mech .shot { aspect-ratio: 1.6 / 1; border-radius: 10px; }
  .mech figcaption { margin-top: 6px; font-size: 12.5px; }
  .mech figcaption small { font-size: 10.5px; }

  /* 9 · motivation */
  .mot { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
  .mot .side { gap: 10px; }
  .mot .mini { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; }
  .mot .mini .shot { border-radius: 9px; }
  .mot .mini h3 { font-size: 15px; } .mot .mini p { margin-top: 3px; font-size: 12.5px; }
  .mot .cap-o { margin-top: 8px; font-size: 13.5px; }

  /* 10 · adaptation */
  .adapt { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
  .adapt .card { padding: 15px 16px; }
  .adapt .card .ic { width: 44px; height: 44px; margin-bottom: 10px; border-radius: 12px; }
  .adapt .card .ic img { width: 34px; height: 34px; }
  .adapt .ul { margin-top: 10px; gap: 7px; }
  .adapt .ul li { font-size: 14px; }
  .next, .slide .next.up { position: static; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; }
  .next img { width: 54px; height: 54px; margin: 0; }
  .next p { font-size: 13.5px; } .next b { font-size: 15px; }

  /* 12 · uchi.ru */
  .u-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
  .u-stats .num { font-size: 34px; }
  .tl { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; padding: 0 0 0 26px; }
  .tl::before { left: 7px; right: auto; top: 6px; bottom: 6px; width: 3px; height: auto; background: var(--v-l); }
  .tl > div::before { left: -26px; top: 3px; width: 17px; height: 17px; border-width: 4px; }
  .tl b { font-size: 18px; } .tl p { margin-top: 2px; font-size: 13.5px; }
  .ages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
  .ages div { padding: 10px 12px; font-size: 13.5px; border-radius: 12px !important; }
  .ages small { font-size: 11px; }

  /* 13 · finances */
  .fin { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
  .fin-chart { padding: 14px 10px 6px; border-radius: 18px; }
  .fin-top { flex-wrap: wrap; gap: 8px; }
  .fin-top h3 { font-size: 14.5px; } .fin-top h3 small { font-size: 11.5px; }
  .seg button { height: 30px; padding: 0 12px; font-size: 13px; }
  .legend { gap: 14px; font-size: 12px; }
  .fin-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fin-facts .stat { padding: 12px 13px; }
  .fin-facts .num { font-size: 28px; }
  .fin-facts .cap { font-size: 12px; }

  /* 14 · markets */
  .mk { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 14px; }
  .mk table.tb { font-size: 12.5px; }
  .mk table.tb td, .mk table.tb th { padding-left: 5px; padding-right: 5px; }

  /* 15 · projection */
  .proj { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 14px; }
  .proj table.tb, .proj .tb tbody { display: block; }
  .proj .tb tr:first-child { display: none; }
  .proj .tb tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .proj .tb tr.hl { padding: 12px 10px; border-radius: 12px; border-bottom: 0; }
  .proj .tb td { padding: 0; border: 0; text-align: left; font-size: 14px; white-space: normal; }
  .proj .tb td:not(:first-child) { display: flex; flex-direction: column; justify-content: space-between; }
  .proj .tb td:first-child { grid-column: 1 / -1; margin-bottom: 4px; font-size: 15px; }
  .proj .tb td:first-child .small { font-size: 12.5px; }
  .proj .tb td:not(:first-child)::before { content: attr(data-l); display: block; margin-bottom: 2px; font: 700 9px/1.2 var(--f); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
  .proj .tb tr.hl td { background: none; }
  .calc { padding: 16px; border-radius: 18px; }
  .calc h3 { font-size: 17px; }
  .calc .scen { margin: 12px 0 4px; gap: 6px; }
  .calc .scen button { height: 36px; font-size: 12.5px; border-radius: 10px; }
  .calc label { margin-top: 12px; font-size: 13.5px; } .calc label b { font-size: 15px; }
  .calc .res { gap: 8px; margin-top: 14px; }
  .calc .res div { padding: 10px 12px; font-size: 12px; border-radius: 12px; }
  .calc .res b { font-size: 19px; }
  .calc .note { font-size: 11.5px; }

  /* 16 · benefits */
  .ben { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; }
  .ben .card { min-height: 0; }
  .ben .ic { width: 46px; height: 46px; margin-bottom: 10px; border-radius: 12px; }
  .ben .ic img { width: 36px; height: 36px; }

  /* 17 · roadmap */
  .road { grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
  .road > div { min-height: 0; padding: 15px 16px; border-right: 0; border-bottom: 2px solid #fff; }
  .road > div:first-child { border-radius: 18px 18px 0 0; } .road > div:last-child { border-radius: 0 0 18px 18px; border-bottom: 0; }
  .road .when { font-size: 10.5px; } .road h3 { margin-top: 4px; font-size: 18px; }
  .road .ul { margin-top: 10px; gap: 6px; } .road .ul li { padding-left: 20px; font-size: 13.5px; }
  .road .ul li::before { width: 11px; height: 11px; top: .42em; }
  .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .kpi div { padding: 10px 12px; font-size: 12px; border-radius: 14px; }
  .kpi b { margin-bottom: 3px; font-size: 13.5px; }

  /* 18 · safety */
  .safe { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
  .safe .ul li { font-size: 14px; }
  .safe .shot { border-radius: 12px; }

  /* 19 · proposal */
  .ask { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 14px; }
  .ask h3 { margin-bottom: 10px; font-size: 17px; }
  .ask ol { gap: 8px; }
  .ask ol li { padding: 10px 12px 10px 52px; font-size: 14px; border-radius: 14px; }
  .ask ol li::before { left: 10px; top: 9px; width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }

  /* 20 · thanks */
  .slide.dark { padding: 28px 18px 24px; }
  .thanks { grid-template-columns: minmax(0, 1fr); gap: 18px; height: auto; }
  .thanks h2 { font-size: 44px; }
  .thanks p { margin-top: 10px; font-size: 15px; }
  .thanks .qrc { justify-self: start; padding: 14px; border-radius: 18px; }
  .thanks .qrc img { width: 150px; height: 150px; }
  .thanks .qrc b { margin-top: 8px; font-size: 17px; } .thanks .qrc span { font-size: 12px; }
  .thanks-m { position: static; display: block; width: 200px; margin: 14px auto 0; }

  /* 21–22 · appendix */
  .meth { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 14px; }
  .formula { padding: 12px 14px; font-size: 14px; border-radius: 14px; }
  .meth .tb { font-size: 12px; } .meth .tb td { padding: 7px 5px; }
  .apx { columns: 1; margin-top: 12px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) { .langs { transition: none; } }