/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/7d525f78-45b6-4151-8721-38cd5cc55873.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/33773564-27f2-46d2-ac02-79bf94b6fef0.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/a0dda66d-fa15-4a64-88c3-a84119914d4a.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/a0368765-8b7a-47cf-abe1-8f0c10786e99.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/d216de63-ce4d-42bb-b8f4-de39a5acc627.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;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/53fd3a00-3b4b-4d49-b9ed-c6ea33373774.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/7d525f78-45b6-4151-8721-38cd5cc55873.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/33773564-27f2-46d2-ac02-79bf94b6fef0.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/a0dda66d-fa15-4a64-88c3-a84119914d4a.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/a0368765-8b7a-47cf-abe1-8f0c10786e99.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/d216de63-ce4d-42bb-b8f4-de39a5acc627.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;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/53fd3a00-3b4b-4d49-b9ed-c6ea33373774.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/7d525f78-45b6-4151-8721-38cd5cc55873.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/33773564-27f2-46d2-ac02-79bf94b6fef0.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/a0dda66d-fa15-4a64-88c3-a84119914d4a.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/a0368765-8b7a-47cf-abe1-8f0c10786e99.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/d216de63-ce4d-42bb-b8f4-de39a5acc627.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;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/53fd3a00-3b4b-4d49-b9ed-c6ea33373774.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;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/aaf7471b-4a10-45ea-9744-6856aff43ccb.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/447b1b85-316c-4622-937e-bc30ddf2b51e.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;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dd70dbce-d1fb-442c-b562-ff28ec5b200f.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;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/aaf7471b-4a10-45ea-9744-6856aff43ccb.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/447b1b85-316c-4622-937e-bc30ddf2b51e.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;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/dd70dbce-d1fb-442c-b562-ff28ec5b200f.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;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/aaf7471b-4a10-45ea-9744-6856aff43ccb.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/447b1b85-316c-4622-937e-bc30ddf2b51e.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;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/dd70dbce-d1fb-442c-b562-ff28ec5b200f.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;
}
/* cyrillic */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/aaf7471b-4a10-45ea-9744-6856aff43ccb.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/447b1b85-316c-4622-937e-bc30ddf2b51e.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;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/dd70dbce-d1fb-442c-b562-ff28ec5b200f.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;
}

  /* ---------- tokens ---------- */
  :root{
    --desk:        rgb(78,121,161);
    --desk-2:      rgb(63,103,140);
    --desk-deep:   rgb(45,80,115);
    --paper:       rgb(248,247,242);
    --paper-2:     rgb(241,241,231);
    --ink:         rgb(38,38,38);
    --ink-soft:    rgb(95,95,95);
    --line:        rgb(214,214,210);
    --line-2:      rgb(228,228,224);
    --bar:         rgb(231,231,228);
    --bar-2:       rgb(214,214,210);
    --accent:      rgb(162,45,62);   /* burgundy */
    --accent-deep: rgb(133,37,51);
    --highlight:   rgb(255,210,84);  /* warm yellow */
    --green:       rgb(128,180,90);
    --orange:      rgb(245,170,55);
    --red:         rgb(225,90,80);
    --blue-link:   rgb(45,115,180);
    --shadow-win:  0 1px 0 rgba(255,255,255,.4) inset, 0 18px 40px -16px rgba(0,0,0,.45), 0 2px 0 rgba(0,0,0,.06);
    --shadow-sm:   0 6px 18px -10px rgba(0,0,0,.5);
    --r-win:       10px;
    --r-card:      14px;
    --mono:        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --sans:        "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  }

  *{ box-sizing: border-box; }
  html, body{ margin:0; padding:0; }
  html{ background: var(--desk); }
  body{
    font-family: var(--sans);
    color: var(--ink);
    background:
      /* зерно поверх заливки: окна непрозрачные, поэтому шум виден только на «столе» */
      url("assets/noise.svg") 0 0 / 160px 160px repeat,
      radial-gradient(1200px 700px at 10% 0%, rgba(255,255,255,.08), transparent 60%),
      radial-gradient(900px 600px at 110% 30%, rgba(0,0,0,.18), transparent 60%),
      var(--desk);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    padding-bottom: 96px; /* room for sticky CTA */
  }

  ::selection{ background: var(--highlight); color: var(--ink); }

  /* ---------- top menubar (decorative) ---------- */
  .menubar{
    position: sticky; top: 0; z-index: 50;
    background: rgba(238,238,232,.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,.12);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 13px;
    display: flex; align-items: center; gap: 22px;
    padding: 8px 18px;
  }
  .menubar a{ color: inherit; text-decoration: none; }
  .menubar .logo{
    font-weight: 700;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .menubar .logo:hover{ opacity: .8; }
  .logo-mark{
    width: 17px; height: 17px;
    flex-shrink: 0;
    fill: var(--ink-soft);
  }
  .menubar .item{
    opacity: .78;
    padding: 4px 2px;
    transition: opacity .15s ease, color .15s ease;
  }
  .menubar .item:hover{ opacity: 1; color: var(--accent); }
  .menubar .spacer{ flex: 1; }
  .menubar .clock{ font-variant-numeric: tabular-nums; opacity: .9; }
  .menubar .item.hide-sm{ display: none; }
  @media (min-width: 720px){
    .menubar{ font-size: 14px; gap: 22px; padding: 8px 24px; }
    .menubar .item.hide-sm{ display: inline; }
  }
  @media (min-width: 1080px){
    .menubar{ gap: 26px; }
  }
  html{ scroll-behavior: smooth; }
  .section, .hero{ scroll-margin-top: 60px; }

  /* ---------- shell ---------- */
  .desk{
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 16px 60px;
  }
  @media (min-width: 720px){ .desk{ padding: 56px 32px 80px; } }

  /* ---------- generic window ---------- */
  .win{
    position: relative;
    background: var(--paper);
    border-radius: var(--r-win);
    box-shadow: var(--shadow-win);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.18);
  }
  .win-bar{
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    background: linear-gradient(180deg, var(--bar), var(--bar-2));
    border-bottom: 1px solid rgba(0,0,0,.14);
    font-family: var(--mono);
    font-size: 12px;
    color: rgba(0,0,0,.72);
  }
  .dots{ display: flex; gap: 6px; flex-shrink: 0; }
  .dot{ width: 12px; height: 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
  .dot.r{ background: var(--red); }
  .dot.y{ background: var(--orange); }
  .dot.g{ background: var(--green); }
  .win-title{
    flex: 1;
    text-align: center;
    font-family: var(--mono);
    font-size: 12px;
    color: rgba(0,0,0,.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
  }
  .win-meta{ font-family: var(--mono); font-size: 11px; color: rgba(0,0,0,.5); flex-shrink: 0; }
  .win-body{ padding: 20px; }
  @media (min-width: 720px){ .win-body{ padding: 32px; } }

  /* ---------- buttons ---------- */
  .btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    padding: 18px 26px;
    border-radius: 12px;
    border: 1px solid var(--accent-deep);
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 0 var(--accent-deep), 0 12px 26px -10px rgba(162,45,62,.55);
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
    min-height: 56px;
    white-space: nowrap;
  }
  .btn:hover{ background: rgb(178,55,72); }
  .btn:active{ transform: translateY(1px); box-shadow: 0 1px 0 var(--accent-deep), 0 6px 14px -8px rgba(162,45,62,.5); }
  .btn .arrow{ width: 18px; height: 18px; flex-shrink: 0; transition: transform .15s ease; }
  .btn:hover .arrow{ transform: translateX(3px); }
  .btn.ghost{
    background: var(--bar);
    color: var(--ink);
    border-color: rgba(0,0,0,.2);
    box-shadow: 0 2px 0 rgba(0,0,0,.1);
  }
  .btn.ghost:hover{ background: rgb(220,220,214); }

  /* ---------- typography ---------- */
  h1,h2,h3{ margin: 0; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
  .display{
    font-family: var(--sans);
    font-weight: 600;
    font-size: clamp(38px, 10vw, 96px);
    line-height: .95;
    letter-spacing: -.025em;
    color: var(--accent);
    white-space: nowrap;
    max-width: 100%;
    /* keep height stable while text mutates */
    min-height: 1em;
    display: inline-flex;
    align-items: baseline;
  }
  /* reserve one line of height even when typed span is empty */
  .display::before{
    content: "\00a0";
    display: inline-block;
    width: 0;
    visibility: hidden;
  }
  .typed{ display: inline; }
  .caret{
    display: inline-block;
    width: .07em;
    height: .92em;
    background: var(--accent);
    margin-left: .06em;
    transform: translateY(.06em);
    animation: caret-blink 1s steps(2) infinite;
    border-radius: 1px;
    flex-shrink: 0;
  }
  @keyframes caret-blink{
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .caret{ animation: none; opacity: 1; }
  }
  .h-mono{ font-family: var(--mono); }
  .h-section{
    font-family: var(--sans);
    font-weight: 600;
    font-size: clamp(34px, 6.5vw, 72px);
    line-height: .95;
    letter-spacing: -.02em;
    color: var(--accent);
  }
  .h-card{
    font-family: var(--sans);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .lead{
    font-size: 18px; line-height: 1.45; color: var(--ink-soft);
    text-wrap: pretty;
    max-width: 620px;
  }
  @media (min-width: 720px){ .lead{ font-size: 22px; } }
  .body{ font-size: 16px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
  .label-mono{
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--ink-soft);
    text-transform: lowercase;
  }
  .kbd{
    font-family: var(--mono);
    font-size: 11px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--ink);
  }

  /* ---------- HERO ---------- */
  .hero{ position: relative; }
  .hero-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: stretch;
  }
  @media (min-width: 980px){
    .hero-grid{ grid-template-columns: 1.4fr 1fr; gap: 36px; }
  }
  .hero-win .win-body{
    display: flex; flex-direction: column; gap: 28px;
    padding-top: 28px; padding-bottom: 28px;
  }
  @media (min-width: 720px){
    .hero-win .win-body{ padding-top: 56px; padding-bottom: 56px; padding-left: 44px; padding-right: 44px; gap: 36px; }
  }
  /* tighter space between title and lead paragraph */
  .hero-win .win-body .display + .lead{ margin-top: -16px; }
  /* tighter space between lead and byline */
  .hero-win .win-body .lead + .hero-byline{ margin-top: -16px; }
  .hero-eyebrow{
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
    letter-spacing: .06em;
  }
  .hero-eyebrow .pulse{ width: 8px; height: 8px; border-radius: 999px; background: var(--green);
    box-shadow: 0 0 0 4px rgba(128,180,90,.22); animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ box-shadow: 0 0 0 4px rgba(128,180,90,.22);} 50%{ box-shadow: 0 0 0 7px rgba(128,180,90,.08);} }
  .hero-cta-row{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
  .hero-meta{
    display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center;
    border-top: 1px dashed var(--line);
    padding-top: 22px;
  }
  .hero-meta div{ font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
  .hero-meta strong{ color: var(--ink); font-weight: 700; }
  .hero-price{ display: inline-flex; align-items: baseline; gap: 10px; }
  .hero-price-new{
    font-family: var(--sans);
    font-weight: 700;
    font-size: 26px;
    color: var(--accent);
    letter-spacing: -.01em;
  }
  .hero-price-old{
    font-family: var(--mono);
    font-size: 15px;
    color: var(--ink-soft);
    text-decoration: line-through;
  }

  /* sticky-note */
  .sticky{
    position: relative;
    background: var(--highlight);
    color: var(--ink);
    padding: 24px 22px 26px;
    border-radius: 4px;
    box-shadow: 0 14px 30px -12px rgba(0,0,0,.45), 0 1px 0 rgba(0,0,0,.05);
    transform: rotate(-2.2deg);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.55;
  }
  .sticky::before{
    content: "";
    position: absolute; left: 50%; top: -10px; transform: translateX(-50%) rotate(2deg);
    width: 80px; height: 22px;
    background: rgba(255,255,255,.55);
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
  }
  .sticky h3{ font-family: var(--sans); font-weight: 600; font-size: 17px; margin-bottom: 8px; }

  .desktop-side{ display: none; flex-direction: column; gap: 22px; align-items: stretch; }
  @media (min-width: 980px){
    .desktop-side{ display: flex; }
    .hero-photo{ aspect-ratio: auto; height: 100%; }
    .hero-photo .win-body{ height: calc(100% - 36px); }
  }
  /* mobile byline: avatar + name + role — shown inside hero-win instead of portrait card */
  .hero-byline{ display: flex; align-items: center; gap: 12px; }
  @media (min-width: 980px){ .hero-byline{ display: none; } }
  .hero-byline-avatar{
    width: 56px; height: 56px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
  }
  .hero-byline-text{ display: flex; flex-direction: column; gap: 2px; }
  .hero-byline-name{
    font-family: var(--sans); font-weight: 600; font-size: 15px;
    color: var(--ink); letter-spacing: -.01em;
  }
  .hero-byline-role{
    font-family: var(--mono); font-size: 11px;
    color: var(--ink-soft); letter-spacing: .04em;
  }
  .folder-stack{ display: flex; gap: 14px; flex-wrap: wrap; }
  .folder{
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 88px;
    cursor: default;
  }
  .folder svg{ filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
  .folder-label{
    font-family: var(--mono); font-size: 11px; color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    text-align: center;
    padding: 1px 6px;
    border-radius: 3px;
  }
  .folder.selected .folder-label{ background: rgba(255,255,255,.22); }

  /* meme image card */
  .meme{
    background: #fff;
    border-radius: 6px;
    padding: 10px 10px 38px;
    box-shadow: 0 18px 30px -16px rgba(0,0,0,.5);
    transform: rotate(2deg);
    position: relative;
  }
  .meme-img{
    aspect-ratio: 4 / 3;
    background:
      repeating-linear-gradient(135deg, rgba(0,0,0,.04) 0 8px, transparent 8px 16px),
      linear-gradient(180deg, rgb(232,228,218), rgb(214,209,196));
    border-radius: 3px;
    position: relative;
    overflow: hidden;
  }
  .meme-img::after{
    content: "[ мем-картинка про SMM ]";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 11px; color: rgba(0,0,0,.45);
    text-align: center;
  }
  .meme-cap{ position: absolute; bottom: 8px; left: 14px; right: 14px;
    font-family: var(--mono); font-size: 11px; color: var(--ink-soft); text-align: center; }

  /* ---------- section header ---------- */
  .section{
    margin-top: 80px;
  }
  .section-head{
    display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: 8px;
    margin-bottom: 34px;
    color: #fff;
  }
  .section-head .num{
    font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,.7);
    letter-spacing: .1em;
  }
  .section-head h2{ color: #fff; }
  .section-head .h-section{ color: #fff; }
  .section-path{
    font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.9);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  @media (max-width: 640px){ .section-path{ display: none; } }

  /* ---------- Ticker: тема месяца ---------- */
  /* лента живёт внутри окна hero: без наклона, полосой от края до края.
     отрицательные поля гасят падинги .win-body (20px, с 720px — 44px) */
  .ticker{
    /* синий стола, а не акцент: акцент занят кнопкой, и полоса перетягивала её */
    background: var(--desk);
    color: #fff;
    overflow: hidden;
    padding: 11px 0;
    margin-left: -20px;
    margin-right: -20px;
    border-top: 1px solid rgba(0,0,0,.18);
    border-bottom: 1px solid rgba(0,0,0,.18);
  }
  @media (min-width: 720px){
    .ticker{ margin-left: -44px; margin-right: -44px; }
  }
  .ticker-track{
    display: flex;
    gap: 48px;
    width: max-content;
    animation: ticker-scroll 28s linear infinite;
  }
  .ticker-item{
    font-family: var(--mono);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0,0,0,.15);
  }
  .ticker-item::after{
    content: "★";
    display: inline-block;
    margin-left: 48px;
    opacity: .8;
  }
  @keyframes ticker-scroll{
    from{ transform: translateX(0); }
    to  { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .ticker-track{ animation-duration: 90s; }
  }
  @media (max-width: 640px){
    .ticker{ padding: 9px 0; }
    .ticker-item{ font-size: 13px; }
    .ticker-track{ gap: 32px; animation-duration: 22s; }
    .ticker-item::after{ margin-left: 32px; }
  }

  /* ---------- 02 big folders ---------- */
  .folders-wrap{ position: relative; margin-bottom: 0; }

  .marker-note-mobile{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    padding: 14px 20px;
    border: 2px dashed rgba(255,255,255,.7);
    border-radius: 14px;
    color: #fff;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
    letter-spacing: .02em;
  }
  @media (min-width: 720px){
    .marker-note-mobile{ font-size: 14px; padding: 16px 22px; margin-top: 22px; }
  }

  .big-folders{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
    padding: 18px 14px 14px;
    border: 2px dashed rgba(255,255,255,.5);
    border-radius: 14px;
    position: relative;
    margin-top: 18px;
  }
  .big-folders::before{
    content: "[ кликни на любую папку ]";
    position: absolute;
    top: -10px;
    left: 18px;
    background: var(--desk);
    padding: 0 10px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
  }
  @media (min-width: 720px){
    .big-folders{ grid-template-columns: repeat(3, 1fr); gap: 32px 20px; padding: 30px 18px 22px; }
    .big-folders--two{ grid-template-columns: repeat(2, 1fr); max-width: 640px; margin-left: auto; margin-right: auto; }
  }
  @media (min-width: 1080px){
    .big-folders{ grid-template-columns: repeat(5, 1fr); gap: 28px 16px; }
    .big-folders--two{ grid-template-columns: repeat(2, 1fr); max-width: 720px; }
  }
  .big-folder{
    appearance: none;
    background: transparent;
    border: 0;
    padding: 10px 8px 10px;
    border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    cursor: pointer;
    color: #fff;
    font-family: var(--sans);
    transition: transform .18s ease, background .18s ease;
    text-align: center;
  }
  .big-folder:hover{ background: rgba(255,255,255,.1); transform: translateY(-3px); }
  .big-folder:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
  .big-folder:active{ transform: translateY(0) scale(.98); }

  /* motion: reveal folders on scroll ("листание офиса") */
  html.js-reveal .big-folder{
    opacity: 0;
    transform: translateY(28px) rotate(-3deg);
    transform-origin: center bottom;
    transition:
      opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  html.js-reveal .big-folder.revealed{
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
  html.js-reveal .big-folder.reveal-done{
    transition: transform .18s ease, background .18s ease;
    transition-delay: 0s;
  }
  @media (prefers-reduced-motion: reduce){
    html.js-reveal .big-folder{
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
  .bf-icon{
    width: 100%;
    max-width: 168px;
    height: auto;
    aspect-ratio: 200 / 160;
    filter: drop-shadow(0 14px 18px rgba(0,0,0,.35));
  }
  .bf-label{
    font-family: var(--mono); font-weight: 600; font-size: 22px;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    letter-spacing: -.01em;
    margin-top: 8px;
  }
  .bf-meta{
    font-family: var(--mono); font-size: 11px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
  }

  /* ---------- modal ---------- */
  .modal-overlay{
    position: fixed; inset: 0;
    z-index: 80;
    background: rgba(20, 35, 55, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px 60px;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease, visibility 0s linear .24s;
  }
  @media (min-width: 720px){
    .modal-overlay{ padding: 80px 24px; align-items: center; }
    .modal{ max-height: calc(100dvh - 160px); }
  }
  .modal-overlay.open{
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .24s ease, visibility 0s linear 0s;
  }
  .modal{
    background: var(--paper);
    width: 100%;
    max-width: 720px;
    max-height: calc(100dvh - 100px);
    display: flex;
    flex-direction: column;
    border-radius: var(--r-win);
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.4) inset;
    border: 1px solid rgba(0,0,0,.18);
    overflow: hidden;
    transform: translate(var(--from-dx, 0), var(--from-dy, 0)) scale(0.06);
    transform-origin: center;
    opacity: 0;
    transition:
      transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 240ms ease-out;
    margin: auto;
    will-change: transform, opacity;
  }
  .modal-overlay.open .modal{
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce){
    .modal{
      transform: none;
      opacity: 0;
      transition: opacity 120ms ease;
    }
    .modal-overlay.open .modal{ opacity: 1; transform: none; }
  }
  .modal-bar{
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    background: linear-gradient(180deg, var(--bar), var(--bar-2));
    border-bottom: 1px solid rgba(0,0,0,.14);
    font-family: var(--mono); font-size: 12px;
    color: rgba(0,0,0,.72);
    flex: 0 0 auto;
  }
  .modal-close{
    appearance: none;
    background: var(--red);
    border: 1px solid rgba(0,0,0,.25);
    width: 14px; height: 14px;
    border-radius: 999px;
    padding: 0;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
    transition: background .15s ease;
  }
  .modal-close:hover{ background: rgb(240, 100, 90); }
  .modal-close:hover::before,
  .modal-close:hover::after{ opacity: 1; }
  .modal-close::before, .modal-close::after{
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 7px; height: 1.5px;
    background: rgba(0,0,0,.7);
    border-radius: 1px;
    opacity: 0;
    transition: opacity .12s ease;
  }
  .modal-close::before{ transform: translate(-50%,-50%) rotate(45deg); }
  .modal-close::after{ transform: translate(-50%,-50%) rotate(-45deg); }
  .modal-close-dots{ display: flex; gap: 6px; flex-shrink: 0; }
  .modal-close-dots .dot{ width: 12px; height: 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); opacity: .55; }
  .modal-close-dots .dot.y{ background: var(--orange); }
  .modal-close-dots .dot.g{ background: var(--green); }
  .modal-title{
    flex: 1; text-align: center;
    font-family: var(--mono); font-size: 12px;
    color: rgba(0,0,0,.72);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0 8px;
  }
  .modal-body{
    padding: 22px 22px 24px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .modal-intro{
    font-size: 15px; line-height: 1.5; color: var(--ink);
    margin: 0 0 18px;
    text-wrap: pretty;
  }
  .modal-list{ display: flex; flex-direction: column; }
  .modal-list .file-row{ font-size: 15px; }
  .modal-group{ display: flex; flex-direction: column; margin-top: 18px; }
  .modal-group:first-child{ margin-top: 0; }
  .modal-group-name{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 0 8px 8px;
    border-bottom: 1px dashed var(--line);
    margin-bottom: 6px;
  }
  .modal-group .file-row + .file-row{ border-top: 1px solid var(--line-2); }
  /* метка «скоро» у уроков, которых ещё нет в клубе */
  .file-row .soon{
    display: inline-block;
    margin-left: 8px;
    vertical-align: 2px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(162,45,62,.09);
    border: 1px solid rgba(162,45,62,.28);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent-deep);
    white-space: nowrap;
  }
  /* fixed footer with the CTA — pinned while the body scrolls */
  .modal-foot{
    flex: 0 0 auto;
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
    padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px dashed var(--line);
    background: var(--paper);
  }
  .modal-foot:empty{ display: none; }
  .modal-foot .btn{ flex: 1 1 auto; justify-content: center; }
  @media (min-width: 720px){
    .modal-foot .btn{ flex: 0 0 auto; }
  }
  body.modal-locked{ overflow: hidden; }

  /* ---------- 02 cards (legacy, retained for safety) ---------- */
  .four-cards{
    display: grid; grid-template-columns: 1fr; gap: 18px;
  }
  @media (min-width: 720px){ .four-cards{ grid-template-columns: repeat(2, 1fr); gap: 22px; } }
  .feature-card .win-body{ display: flex; flex-direction: column; gap: 14px; min-height: 240px; }
  .feature-card .icon-row{ display: flex; align-items: center; gap: 12px; }
  .feature-card .ic-folder{ flex-shrink: 0; }
  .feature-card p{ margin: 0; }
  .feature-card.tinted-1 .win-bar{ background: linear-gradient(180deg, #f0e7d4, #e6dcc7); }
  .feature-card.tinted-2 .win-bar{ background: linear-gradient(180deg, #dfe7ee, #cfd9e3); }
  .feature-card.tinted-3 .win-bar{ background: linear-gradient(180deg, #efddd8, #e3cdc6); }
  .feature-card.tinted-4 .win-bar{ background: linear-gradient(180deg, #dde7d8, #cad8c4); }

  /* ---------- 02 about-note window ---------- */
  .about-note{ margin-top: 14px; }
  @media (min-width: 720px){ .about-note{ margin-top: 28px; } }
  .about-note-body{
    display: flex; flex-direction: column; gap: 14px;
  }
  .about-note-body .body{
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
  }
  @media (min-width: 720px){ .about-note-body .body{ font-size: 17px; } }
  .about-note-body .about-note-foot{
    color: var(--ink-soft);
    border-top: 1px dashed var(--line);
    padding-top: 14px;
    font-size: 15px;
  }

  /* ---------- 03 finder list ---------- */
  .finder-cols{
    display: grid; grid-template-columns: 1fr; gap: 0;
  }
  @media (min-width: 880px){ .finder-cols{ grid-template-columns: 1fr 1fr; } }
  .finder-col{ padding: 24px 22px; }
  .finder-col + .finder-col{ border-top: 1px solid var(--line); }
  @media (min-width: 880px){
    .finder-col + .finder-col{ border-top: none; border-left: 1px solid var(--line); }
  }
  .finder-col h3{
    font-family: var(--mono); font-weight: 700; font-size: 12px; color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
  }
  .file-row{
    display: flex; align-items: center; gap: 12px;
    padding: 9px 8px;
    border-radius: 6px;
    font-size: 15px; color: var(--ink);
    line-height: 1.3;
  }
  .file-row + .file-row{ border-top: 1px solid var(--line-2); }
  .file-row:hover{ background: rgba(78,121,161,.08); }
  .file-row .ic{ flex-shrink: 0; width: 16px; height: 16px; display: inline-flex; align-items: center; color: var(--folder-color, var(--ink-soft)); }
  .file-row .ic svg{ width: 100%; height: 100%; }
  .modal[data-folder="lessons"]  { --folder-color: #5E94C9; }
  .modal[data-folder="podcasts"] { --folder-color: #6DA84F; }
  .modal[data-folder="lives"]    { --folder-color: #C95A60; }
  .modal[data-folder="chat"]     { --folder-color: #D49B2C; }
  .modal[data-folder="digest"]   { --folder-color: #8E67A8; }
  .modal[data-folder="reviews"]  { --folder-color: #5E94C9; }
  .modal[data-folder="myblog"]   { --folder-color: #5E94C9; }
  .file-row .ext{ font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin-left: auto; flex-shrink: 0; }

  /* ---------- 04 live formats ---------- */
  .live-grid{
    display: grid; grid-template-columns: 1fr; gap: 20px;
  }
  @media (min-width: 980px){ .live-grid{ grid-template-columns: repeat(3, 1fr); } }
  .live-card .win-body{ padding: 24px; }
  .live-card h3{ margin-bottom: 10px; }
  .live-card .tag{
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 11px;
    background: var(--paper-2); border: 1px solid var(--line);
    padding: 4px 8px; border-radius: 4px; margin-bottom: 14px;
    color: var(--ink-soft);
  }
  .live-card .tag .live-dot{ width: 6px; height: 6px; border-radius: 999px; background: var(--red); animation: pulse 1.6s infinite; }

  /* ---------- 05 author ---------- */
  .author-grid{
    display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch;
  }
  @media (min-width: 880px){ .author-grid{ grid-template-columns: 380px 1fr; gap: 32px; } }
  .photo-card{ aspect-ratio: 3/4; }
  .photo-card .win-body{ padding: 0; height: calc(100% - 36px); overflow: hidden; }
  .photo-fill{
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .author-text{ display: flex; flex-direction: column; gap: 18px; }
  .author-text p{ font-size: 18px; line-height: 1.55; margin: 0; color: var(--ink); }
  .signature{
    font-family: var(--sans); font-style: italic; font-weight: 500; font-size: 22px;
    color: var(--accent);
  }

  /* ---------- 06 fit / not fit ---------- */
  .fit-grid{
    display: grid; grid-template-columns: 1fr; gap: 18px;
  }
  @media (min-width: 880px){ .fit-grid{ grid-template-columns: 1fr 1fr; gap: 22px; } }
  /* both checklists inside a single window */
  .fit-body{ display: grid; grid-template-columns: 1fr; }
  .fit-col--no{
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px dashed var(--line);
  }
  @media (min-width: 720px){
    .fit-body{ grid-template-columns: 1fr 1fr; column-gap: 0; }
    .fit-col{ padding-right: 32px; }
    .fit-col--no{
      margin-top: 0; padding-top: 0; border-top: none;
      padding-left: 32px;
      border-left: 1px dashed var(--line);
    }
  }
  .checklist{ list-style: none; margin: 0; padding: 0; }
  .checklist li{
    display: flex; gap: 12px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 16px; line-height: 1.45;
  }
  .checklist li:last-child{ border-bottom: none; }
  .check{ flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .check svg{ width: 14px; height: 14px; }
  .check.ok{ background: var(--green); color: #fff; }
  .check.no{ background: var(--accent); color: #fff; }

  /* ---------- 07 reviews ---------- */
  .cases-empty{
    max-width: 640px;
    margin: 0 auto;
  }
  .cases-empty .win-body p{
    font-size: 16px; line-height: 1.55; color: var(--ink);
    margin: 0;
    text-wrap: pretty;
  }
  .review-grid{
    display: grid; grid-template-columns: 1fr; gap: 20px;
  }
  @media (min-width: 720px){ .review-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1020px){ .review-grid{ grid-template-columns: repeat(3, 1fr); } }
  .review{
    background: var(--paper);
    border-radius: var(--r-card);
    padding: 22px 22px 18px;
    box-shadow: var(--shadow-sm);
    position: relative;
    transform: rotate(-.6deg);
  }
  .review:nth-child(2){ transform: rotate(.5deg); background: rgb(252, 244, 222); }
  .review:nth-child(3){ transform: rotate(-.3deg); }
  .review:nth-child(4){ transform: rotate(.7deg); background: rgb(238, 244, 232); }
  .review:nth-child(5){ transform: rotate(-.7deg); }
  .review .quote{
    font-size: 15px; line-height: 1.5; color: var(--ink); margin: 0 0 14px;
  }
  .review .who{
    font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
    border-top: 1px dashed var(--line);
    padding-top: 10px;
    display: flex; justify-content: space-between; gap: 10px;
  }
  .review .who b{ color: var(--ink); font-weight: 700; }
  .review .placeholder{
    font-family: var(--mono); font-size: 11px; color: var(--accent);
    border: 1px dashed var(--accent);
    padding: 3px 6px; border-radius: 4px;
    display: inline-block; margin-bottom: 12px;
    text-transform: lowercase;
  }

  /* ---------- 08 price ---------- */
  .price-win .win-body{ padding: 36px 28px; }
  @media (min-width: 720px){ .price-win .win-body{ padding: 56px 56px 48px; } }
  .price-row{
    display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
  }
  @media (min-width: 880px){ .price-row{ grid-template-columns: 1fr 1fr; gap: 48px; } }
  .price-tag{
    font-family: var(--sans); font-weight: 600;
    /* на узком экране цифра должна встать в одну строку со стикером */
    font-size: clamp(32px, 8.5vw, 88px);
    line-height: .85;
    letter-spacing: -.04em;
    color: var(--accent);
    white-space: nowrap;
  }
  .price-tag .cur{ font-size: 1em; vertical-align: baseline; margin-left: .1em; }
  .price-tag-row{
    display: flex; align-items: baseline;
    gap: clamp(8px, 2.5vw, 14px);
    flex-wrap: nowrap;
  }
  .price-tag-old{
    font-family: var(--mono);
    font-size: clamp(15px, 3.6vw, 28px);
    color: var(--ink-soft);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    white-space: nowrap;
  }
  .price-meta{ font-family: var(--mono); font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
  .price-tag-sub{ margin-top: 4px; }
  .price-cta{ width: 100%; }
  .price-invite{
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 18px 0 0;
    max-width: 40ch;
    text-wrap: pretty;
  }
  .price-list{ list-style: none; margin: 0 0 24px; padding: 0; }
  .price-list li{ display: flex; gap: 10px; padding: 8px 0; font-size: 16px; line-height: 1.45; }
  .price-list .ic{ flex-shrink: 0; color: var(--accent); }

  /* ---------- 09 FAQ ---------- */
  .faq-list{ display: flex; flex-direction: column; }
  details.faq{
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
  }
  details.faq:first-child{ border-top: 1px solid var(--line); }
  details.faq[open] summary .plus{ transform: rotate(45deg); }
  details.faq summary{
    list-style: none;
    cursor: pointer;
    display: flex; align-items: flex-start; gap: 18px;
    font-size: 18px; line-height: 1.35; font-weight: 500;
    color: var(--ink);
  }
  details.faq summary::-webkit-details-marker{ display: none; }
  .faq .num{ font-family: var(--mono); font-size: 12px; color: var(--ink-soft); flex-shrink: 0; padding-top: 4px; min-width: 28px; }
  .faq .q{ flex: 1; text-wrap: pretty; }
  .faq .plus{
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 6px;
    font-family: var(--mono); font-size: 16px; line-height: 1; color: var(--ink-soft);
    background: var(--paper-2);
    transition: transform .2s ease;
    margin-top: 2px;
  }
  .faq .a{
    padding: 14px 0 4px 46px;
    font-size: 16px; line-height: 1.55; color: var(--ink-soft);
    text-wrap: pretty;
  }

  /* FAQ без окна-подложки — прямо на синем фоне */
  .faq-plain details.faq{ border-bottom-color: rgba(255,255,255,.22); }
  .faq-plain details.faq:first-child{ border-top-color: rgba(255,255,255,.22); }
  .faq-plain details.faq summary{ color: #fff; }
  .faq-plain .num{ color: rgba(255,255,255,.6); }
  .faq-plain .plus{
    color: #fff;
    border-color: rgba(255,255,255,.4);
    background: rgba(255,255,255,.12);
  }
  .faq-plain .a{ color: rgba(255,255,255,.82); }
  .faq-plain .a a{ color: #fff; text-decoration: underline; text-underline-offset: 2px; }

  /* ---------- 10 final ---------- */
  .final-card .win-body{
    text-align: center;
    padding: 56px 24px;
    display: flex; flex-direction: column; gap: 28px; align-items: center;
  }
  @media (min-width: 720px){ .final-card .win-body{ padding: 96px 24px 88px; } }
  .final-title{
    font-family: var(--sans); font-weight: 600;
    font-size: clamp(38px, 8vw, 88px);
    line-height: .98;
    letter-spacing: -.02em;
    color: var(--accent);
    text-wrap: balance;
  }
  .final-card .sub{ font-family: var(--mono); color: var(--ink-soft); font-size: 13px; }

  /* ---------- footer ---------- */
  html{ scroll-behavior: smooth; }
  .footer{
    margin-top: 96px;
    color: #fff;
    font-family: var(--mono);
    font-size: 12px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 4px 0;
    border-top: 1px dashed rgba(255,255,255,.35);
    line-height: 1.55;
  }
  @media (min-width: 720px){
    .footer{
      grid-template-columns: 1.1fr 1fr 1fr auto;
      gap: 36px;
      align-items: start;
    }
  }
  .footer .f-col{ display: flex; flex-direction: column; gap: 8px; }
  .footer .f-col strong{ color: #fff; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
  .footer .f-col span{ color: #fff; }
  .footer .f-col a{
    color: #fff;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255,255,255,.6);
    width: max-content;
    padding-bottom: 1px;
  }
  .footer .f-col a:hover{ border-bottom-color: #fff; }
  .footer .f-tag{ color: rgba(255,255,255,.88); font-size: 11px; }

  /* back-to-top button (right column) */
  .footer .f-top{
    justify-self: end;
    align-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border: 1.5px solid rgba(255,255,255,.55);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
  }
  .footer .f-top:hover{
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.85);
    transform: translateY(-2px);
  }
  .footer .f-top .icon-arrow-up-circle{
    width: 18px; height: 18px;
    flex-shrink: 0;
  }
  @media (max-width: 719px){
    .footer .f-top{ justify-self: stretch; justify-content: center; }
  }

  /* ---------- sticky CTA ---------- */
  .stickycta{
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: rgba(238,238,232,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,0,0,.16);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    transform: translateY(110%);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .stickycta.show{ transform: translateY(0); }
  .stickycta .price{ font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
  .stickycta .price b{ color: var(--ink); font-weight: 700; font-size: 14px; }
  .stickycta .btn{ padding: 14px 18px; font-size: 15px; min-height: 48px; }
  @media (max-width: 480px){
    .stickycta .price{ display: none; }
    .stickycta{ justify-content: center; }
    .stickycta .btn{ width: 100%; }
  }

  /* ---------- decorative arrow ---------- */
  .scribble{ position: absolute; pointer-events: none; opacity: .9; }
  .scribble.s1{ right: -20px; top: -40px; width: 140px; transform: rotate(-12deg); }
  .scribble.s2{ left: -30px; bottom: -30px; width: 110px; }

  /* tiny utility */
  .row{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .stack-sm{ display: flex; flex-direction: column; gap: 6px; }
  .stack-md{ display: flex; flex-direction: column; gap: 14px; }
  .stack-lg{ display: flex; flex-direction: column; gap: 22px; }
  .muted{ color: var(--ink-soft); }

  /* ---------- cookie banner ---------- */
  .cookiebar{
    position: fixed; z-index: 70;
    left: 12px; right: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    max-width: 460px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 10px;
    box-shadow: 0 8px 24px -12px rgba(0,0,0,.35);
    padding: 10px 10px 10px 14px;
    display: flex; align-items: center; gap: 12px;
    transform: translateY(180%);
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .cookiebar.show{ transform: translateY(0); }
  .cookiebar-text{
    flex: 1;
    margin: 0;
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.45;
    color: var(--ink-soft);
  }
  .cookiebar-text a{ color: var(--blue-link); text-decoration: underline; text-underline-offset: 2px; }
  .cookiebar-ok{
    flex-shrink: 0;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent-deep);
    border-radius: 7px;
    padding: 7px 16px;
    transition: background .15s ease;
  }
  .cookiebar-ok:hover{ background: rgb(178,55,72); }

  /* ---------- document pages (privacy / offer / consent) ---------- */
  .doc-wrap{
    max-width: 860px;
    margin: 0 auto;
    padding: 28px 16px 40px;
  }
  @media (min-width: 720px){ .doc-wrap{ padding: 48px 32px 60px; } }
  .doc-back{
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 13px;
    color: #fff; text-decoration: none;
    opacity: .85; margin-bottom: 20px;
    border-bottom: 1px dashed rgba(255,255,255,.5);
    padding-bottom: 2px;
  }
  .doc-back:hover{ opacity: 1; }
  .doc-win .win-body{ line-height: 1.7; }
  .doc-title{
    font-family: var(--mono);
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--ink);
  }
  .doc-updated{
    font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
    margin: 0 0 24px;
  }
  .doc-note{
    font-family: var(--mono); font-size: 12px; line-height: 1.6;
    color: var(--accent-deep);
    background: rgba(162,45,62,.06);
    border: 1px dashed rgba(162,45,62,.4);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 24px;
  }
  .doc-prose h2{
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 700;
    margin: 28px 0 10px;
    color: var(--ink);
  }
  .doc-prose h2:first-child{ margin-top: 0; }
  .doc-prose p{ margin: 0 0 12px; color: var(--ink); }
  .doc-prose ul{ margin: 0 0 14px; padding-left: 20px; }
  .doc-prose li{ margin: 0 0 6px; }
  .doc-prose a{ color: var(--blue-link); text-decoration: underline; text-underline-offset: 2px; }
  .doc-prose .fill{
    background: rgba(255,210,84,.35);
    border-radius: 3px;
    padding: 0 3px;
    font-style: normal;
  }
  /* подзаголовок документа (вторая строка шапки) */
  .doc-subtitle{
    font-family: var(--mono);
    font-size: clamp(13px, 2vw, 15px);
    color: var(--ink);
    margin: 0 0 10px;
  }
  /* вложенные пункты: «a. …», «– …» */
  .doc-prose p.i1{ margin-left: 22px; }
  /* жирные подзаголовки внутри пункта («4.8. Особенности оказания…») */
  .doc-prose p.doc-sub{
    font-weight: 700;
    margin: 22px 0 10px;
  }
  .doc-footlinks{ margin-top: 28px; }

  /* таблицы внутри документов */
  .doc-table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 18px;
  }
  .doc-table-wrap:focus-visible{ outline: 2px solid var(--blue-link); outline-offset: 2px; }
  .doc-table{
    border-collapse: collapse;
    width: 100%;
    min-width: 880px;
    font-size: 13px;
    line-height: 1.55;
  }
  .doc-table th,
  .doc-table td{
    border: 1px solid rgba(0,0,0,.18);
    padding: 9px 11px;
    text-align: left;
    vertical-align: top;
    color: var(--ink);
  }
  .doc-table th{
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    background: rgba(0,0,0,.045);
  }
  /* на узких экранах таблица распадается на карточки — текст остаётся полным */
  @media (max-width: 719px){
    .doc-table{ min-width: 0; }
    .doc-table thead{
      position: absolute;
      width: 1px; height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }
    .doc-table tr{
      display: block;
      border: 1px solid rgba(0,0,0,.18);
      border-radius: 8px;
      padding: 4px 10px;
      margin: 0 0 12px;
    }
    .doc-table td{
      display: block;
      border: 0;
      border-bottom: 1px dashed rgba(0,0,0,.14);
      padding: 10px 0;
    }
    .doc-table tr td:last-child{ border-bottom: 0; }
    .doc-table td::before{
      content: attr(data-label);
      display: block;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--ink-soft);
      margin-bottom: 5px;
    }
  }

  /* ---------- 03 trial lesson (пробный урок + цена) ---------- */
  /* весь блок — одно окно на бумажном фоне, поэтому текст тут тёмный */
  .trial-card{
    max-width: 760px;
    margin: 0 auto;
  }
  .trial-body{
    display: flex; flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 22px 18px 28px;
  }
  @media (min-width: 720px){ .trial-body{ padding: 30px 34px 36px; } }
  /* кадр урока целиком — ссылка в бота (своя шапка не нужна, она у внешнего окна) */
  .trial-win{
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: var(--r-win);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.18);
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .trial-win:hover, .trial-win:focus-visible{
    box-shadow: 0 16px 34px -16px rgba(0,0,0,.55);
  }
  .trial-frame{
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 42%, rgba(255,255,255,.07), transparent 62%),
      #0f141b;
  }
  /* сюда ложится кадр, гифка или видео — заполняет фрейм */
  .trial-media{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    /* окно целиком — ссылка в бота, поэтому медиа не должно перехватывать клик */
    pointer-events: none;
  }
  .trial-cta{ font-size: 16px; padding: 15px 26px; min-height: 52px; }

  /* ссылка в бота — прозрачный слой на весь кадр */
  .trial-link{
    position: absolute; inset: 0;
    z-index: 2;
    cursor: pointer;
  }
  .trial-link:focus-visible{ outline: 2px solid #fff; outline-offset: -4px; }

  /* пауза — левый нижний угол, поверх ссылки */
  .trial-toggle{
    position: absolute; left: 12px; bottom: 12px;
    z-index: 3;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.32);
    background: rgba(15,20,27,.68);
    color: #fff;
    cursor: pointer;
    padding: 0;
    backdrop-filter: blur(2px);
    transition: background .2s ease, border-color .2s ease;
  }
  .trial-toggle svg{ width: 17px; height: 17px; }
  .trial-toggle .ic-play{ display: none; margin-left: 2px; }
  .trial-toggle[data-paused="true"] .ic-pause{ display: none; }
  .trial-toggle[data-paused="true"] .ic-play{ display: block; }
  .trial-toggle:hover, .trial-toggle:focus-visible{
    background: var(--accent);
    border-color: var(--accent);
  }

  /* ярлычок «бесплатно» — правый нижний угол */
  .trial-free{
    position: absolute; right: 12px; bottom: 12px;
    z-index: 3;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .08em; text-transform: uppercase;
    color: #fff;
    background: rgba(15,20,27,.72);
    border: 1px solid rgba(255,255,255,.28);
    padding: 5px 10px;
  }

  /* блок цены под окном урока */
  .trial-offer{
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    gap: 14px;
    width: 100%;
    color: var(--ink);
  }
  .trial-offer-head{
    font-family: var(--mono); font-size: 13px;
    letter-spacing: .04em;
    color: var(--ink-soft);
  }

  /* цена + приклеенный к ней стикер «24 часа» */
  .trial-price{
    display: flex; align-items: center; justify-content: center;
    gap: clamp(12px, 4vw, 26px);
    flex-wrap: nowrap;
  }
  .trial-price .price-tag-row{ justify-content: center; gap: 16px; }

  /* стикер-ценник: сидит вплотную к цифре, поэтому 24 часа = условие цены */
  .trial-badge{
    width: clamp(72px, 19vw, 106px);
    height: clamp(72px, 19vw, 106px);
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 8px;
    transform: rotate(-11deg);
    box-shadow: 0 8px 20px -6px rgba(0,0,0,.45);
  }
  .tb-num{
    font-family: var(--sans); font-weight: 600;
    font-size: clamp(15px, 4vw, 22px); line-height: 1;
    letter-spacing: -.02em;
  }
  .tb-sub{
    font-family: var(--mono);
    font-size: clamp(8px, 2vw, 10px); line-height: 1.25;
    margin-top: clamp(3px, 1vw, 6px);
    opacity: .92;
    max-width: 12ch;
  }

  .trial-offer-desc{
    margin: 0;
    font-size: 16px; line-height: 1.55;
    max-width: 46ch;
    text-wrap: pretty;
  }
  .trial-offer-desc b{ font-weight: 700; }
  .price-alt{
    margin: 0;
    font-family: var(--mono); font-size: 13px; line-height: 1.5;
    color: var(--ink-soft);
    max-width: 42ch;
    text-wrap: pretty;
  }
  .trial-offer .trial-cta{ margin-top: 6px; }

  @media (max-width: 560px){
    .trial-toggle{ left: 8px; bottom: 8px; width: 30px; height: 30px; }
    .trial-toggle svg{ width: 15px; height: 15px; }
    .trial-free{ right: 8px; bottom: 8px; font-size: 10px; padding: 4px 8px; }
  }

  /* ---------- 04 результаты коллег ---------- */

  /* общий вид кликабельного скрина */
  .shot{
    display: block; width: 100%;
    padding: 0; margin: 0;
    border: 0; background: none;
    border-radius: 12px;
    overflow: hidden;
    cursor: zoom-in;
    line-height: 0;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .shot img{ display: block; width: 100%; height: auto; }
  .shot:hover, .shot:focus-visible{
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -14px rgba(0,0,0,.6);
  }

  /* --- два кейса --- */
  .cases{
    display: grid; grid-template-columns: 1fr;
    gap: 26px;
    margin: 18px 0 56px;
  }
  @media (min-width: 760px){ .cases{ grid-template-columns: 1fr 1fr; gap: 30px; } }
  /* рамка и подпись — как у контейнера папок */
  .case{
    position: relative;
    border: 2px dashed rgba(255,255,255,.5);
    border-radius: 14px;
    padding: 26px 14px 18px;
  }
  @media (min-width: 720px){ .case{ padding: 30px 18px 22px; } }
  .case-title{
    position: absolute;
    top: -10px; left: 18px;
    margin: 0;
    background: var(--desk);
    padding: 0 10px;
    font-family: var(--mono); font-weight: 400;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
  }
  .case-shots{ display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .case-shot{ margin: 0; width: 100%; }
  .case-step{
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .08em;
    color: rgba(255,255,255,.6);
    margin-bottom: 6px;
  }
  .case-arrow{ color: rgba(255,255,255,.75); line-height: 0; }
  .case-arrow svg{ width: 22px; height: 22px; }

  /* --- сетка отзывов --- */
  .reviews-title{
    margin: 0 0 22px;
    font-family: var(--mono); font-size: 13px;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.8);
    text-align: center;
  }
  /* колонки-кладка: карточки разной высоты складываются без дыр */
  .reviews-grid{
    column-count: 2;
    column-gap: 14px;
  }
  @media (min-width: 700px){ .reviews-grid{ column-count: 3; column-gap: 18px; } }
  @media (min-width: 1040px){ .reviews-grid{ column-count: 4; } }
  .reviews-grid .rev{
    break-inside: avoid;
    margin-bottom: 14px;
  }
  @media (min-width: 700px){ .reviews-grid .rev{ margin-bottom: 18px; } }

  /* кат: пока не раскрыто — сетка обрезана и уходит в градиент */
  .reviews-grid.is-cut{
    max-height: 420px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }
  @media (min-width: 700px){ .reviews-grid.is-cut{ max-height: 560px; } }

  .reviews-cut{ display: flex; justify-content: center; margin-top: 20px; }
  .reviews-more .rm-close{ display: none; }
  .reviews-more[aria-expanded="true"] .rm-open{ display: none; }
  .reviews-more[aria-expanded="true"] .rm-close{ display: inline; }

  /* ---------- документы в попапе ---------- */
  .doc-modal{
    position: fixed; inset: 0;
    z-index: 92;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 16px 12px;
    background: rgba(12, 22, 36, .78);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity .2s ease;
  }
  .doc-modal[hidden]{ display: none; }
  .doc-modal.open{ opacity: 1; }
  @media (min-width: 720px){ .doc-modal{ padding: 48px 24px; align-items: center; } }

  .doc-modal-box{
    position: relative;
    width: 100%;
    max-width: 820px;
    max-height: 100%;
    display: flex;
  }
  .doc-modal-scroll{
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-win);
  }
  /* окно документа приходит из отдельной страницы уже свёрстанным */
  .doc-modal-body .doc-win{ margin: 0; }
  .doc-modal-body .doc-back{ display: none; }

  .doc-modal-loading{
    background: var(--paper);
    border-radius: var(--r-win);
    padding: 40px 24px;
    text-align: center;
    font-family: var(--mono); font-size: 13px;
    color: var(--ink-soft);
  }

  /* ---------- галерея скринов ---------- */
  .gallery{
    position: fixed; inset: 0;
    z-index: 90;
    display: flex; flex-direction: column;
    background: rgba(12, 22, 36, .88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .2s ease;
  }
  .gallery[hidden]{ display: none; }
  .gallery.open{ opacity: 1; }

  /* сцена скроллится, если скрин длинный */
  .g-stage{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 16px 12px;
    -webkit-overflow-scrolling: touch;
  }
  @media (min-width: 760px){ .g-stage{ padding: 72px 88px 16px; } }

  .g-img{
    display: block;
    width: min(92vw, 620px);
    height: auto;
    border-radius: 14px;
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.75);
    opacity: 0;
    transition: opacity .18s ease;
  }
  .g-img.ready{ opacity: 1; }

  /* закрыть */
  .g-close{
    position: absolute; top: 12px; right: 12px;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.10);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
  }
  .g-close svg{ width: 22px; height: 22px; }
  .g-close:hover, .g-close:focus-visible{ background: var(--accent); border-color: var(--accent); }

  /* листалка */
  .g-nav{
    position: absolute; top: 50%;
    transform: translateY(-50%);
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.24);
    background: rgba(12,22,36,.72);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease;
  }
  .g-nav svg{ width: 24px; height: 24px; }
  .g-nav:hover, .g-nav:focus-visible{ background: var(--accent); border-color: var(--accent); }
  .g-prev{ left: 10px; }
  .g-next{ right: 10px; }
  @media (min-width: 760px){
    .g-nav{ width: 54px; height: 54px; }
    .g-prev{ left: 20px; }
    .g-next{ right: 20px; }
  }

  /* подпись и счётчик */
  .g-bar{
    flex: 0 0 auto;
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    text-align: center;
  }
  .g-caption{
    margin: 0;
    font-size: 14px; line-height: 1.45;
    color: rgba(255,255,255,.9);
    max-width: 60ch;
    text-wrap: pretty;
  }
  .g-count{
    font-family: var(--mono); font-size: 12px;
    color: rgba(255,255,255,.55);
  }

  @media (prefers-reduced-motion: reduce){
    .gallery, .g-img{ transition: none; }
  }