/* ========================================================== */
/* Fonts + type variables (extracted from Claude Design bundle) */
/* ========================================================== */
/* ============================================================
   КОМБИНАТ ОБЕДОВ — Foundations
   Colors & typography variables + base element styles
   ============================================================ */

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-251d36f2.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-cyrillic-de93fdc8.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-318d4ba5.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-8c7f6aea.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-9df17551.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-1ad231aa.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-260c81a4.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-251d36f2.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-cyrillic-de93fdc8.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-318d4ba5.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-8c7f6aea.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-9df17551.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-1ad231aa.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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-260c81a4.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-251d36f2.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-cyrillic-de93fdc8.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-318d4ba5.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-8c7f6aea.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-9df17551.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-1ad231aa.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-260c81a4.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-251d36f2.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-cyrillic-de93fdc8.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-318d4ba5.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-8c7f6aea.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-9df17551.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-1ad231aa.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Inter-400-normal-latin-260c81a4.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: 400;
  font-display: swap;
  src: url("./fonts/JetBrains-Mono-400-normal-latin-3ae0dad2.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("./fonts/JetBrains-Mono-400-normal-cyrillic-3576e677.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("./fonts/JetBrains-Mono-400-normal-latin-b1b5690e.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("./fonts/JetBrains-Mono-400-normal-latin-ffcfa7a2.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("./fonts/JetBrains-Mono-400-normal-latin-bd4781a3.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("./fonts/JetBrains-Mono-400-normal-latin-b636a65d.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("./fonts/JetBrains-Mono-400-normal-latin-3ae0dad2.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("./fonts/JetBrains-Mono-400-normal-cyrillic-3576e677.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("./fonts/JetBrains-Mono-400-normal-latin-b1b5690e.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("./fonts/JetBrains-Mono-400-normal-latin-ffcfa7a2.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("./fonts/JetBrains-Mono-400-normal-latin-bd4781a3.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("./fonts/JetBrains-Mono-400-normal-latin-b636a65d.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("./fonts/JetBrains-Mono-400-normal-latin-3ae0dad2.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("./fonts/JetBrains-Mono-400-normal-cyrillic-3576e677.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("./fonts/JetBrains-Mono-400-normal-latin-b1b5690e.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("./fonts/JetBrains-Mono-400-normal-latin-ffcfa7a2.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("./fonts/JetBrains-Mono-400-normal-latin-bd4781a3.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("./fonts/JetBrains-Mono-400-normal-latin-b636a65d.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-4cdf0bed.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-cyrillic-e58febde.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-42b71be3.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-8998d15a.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-6d36d5bd.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-938c6e80.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-4cdf0bed.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-cyrillic-e58febde.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-42b71be3.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-8998d15a.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-6d36d5bd.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-938c6e80.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-4cdf0bed.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-cyrillic-e58febde.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-42b71be3.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-8998d15a.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-6d36d5bd.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-938c6e80.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-4cdf0bed.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-cyrillic-e58febde.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-42b71be3.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-8998d15a.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-6d36d5bd.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-938c6e80.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-4cdf0bed.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-cyrillic-e58febde.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-42b71be3.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-8998d15a.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-6d36d5bd.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./fonts/Manrope-400-normal-latin-938c6e80.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 {
  /* ===== Brand colors ===== */
  --ko-anthracite: #2A2A2A;          /* primary dark — text on light, fills */
  --ko-cream:      #F5F0E6;          /* primary light — page background */
  --ko-brick:      #B33A3A;          /* primary accent — CTA, status, dividers */
  --ko-ochre:      #D4A85B;          /* alternative accent — NOT mixed with brick on same screen */

  /* ===== Neutral scale (anthracite ↔ cream) =====
     No pure black, no pure white. Generated via oklch interpolation. */
  --ko-ink-100: #1A1A1A;             /* deepest, headlines on cream */
  --ko-ink-90:  #2A2A2A;             /* = anthracite */
  --ko-ink-70:  #3A3733;             /* потемнее для лучшей читаемости */
  --ko-ink-50:  #555148;             /* secondary text — стало темнее для контраста на cream */
  --ko-ink-30:  #9C968C;             /* tertiary text, captions */
  --ko-ink-15:  #C8C2B6;             /* hairlines, dividers */
  --ko-ink-08:  #DCD6CA;             /* faint backgrounds, table stripes */
  --ko-ink-04:  #ECE6DA;             /* cream-on-cream layering */
  --ko-paper:   #F5F0E6;             /* = cream */
  --ko-paper-hi:#FBF7EE;             /* slightly lighter cream for inset */

  /* ===== Semantic ===== */
  --ko-bg:           var(--ko-paper);
  --ko-bg-inset:     var(--ko-paper-hi);
  --ko-bg-inverse:   var(--ko-anthracite);
  --ko-fg:           var(--ko-ink-100);
  --ko-fg-muted:     var(--ko-ink-50);
  --ko-fg-faint:     var(--ko-ink-30);
  --ko-fg-on-dark:   var(--ko-cream);
  --ko-fg-on-dark-muted: #B9B3A6;
  --ko-line:         var(--ko-ink-90);  /* primary 1–2px border */
  --ko-line-soft:    var(--ko-ink-15);  /* 1px hairline */
  --ko-accent:       var(--ko-brick);
  --ko-accent-press: #8E2D2D;
  --ko-focus:        var(--ko-brick);

  /* status — used sparingly */
  --ko-status-ok:    #3D6B3A;
  --ko-status-warn:  #C97A12;
  --ko-status-err:   var(--ko-brick);

  /* ===== Type families ===== */
  --ko-font-display: "Manrope", "TT Norms Pro", "PT Sans Caption", system-ui, sans-serif;
  --ko-font-body:    "Inter", "Manrope", system-ui, sans-serif;
  --ko-font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ===== Type scale ===== */
  --ko-text-xs:  11px;     /* technical caption, моно-метка */
  --ko-text-sm:  13px;
  --ko-text-md:  15px;     /* base body */
  --ko-text-lg:  18px;
  --ko-text-xl:  22px;
  --ko-text-2xl: 28px;
  --ko-text-3xl: 40px;
  --ko-text-4xl: 56px;
  --ko-text-5xl: 80px;     /* hero display */
  --ko-text-6xl: 120px;    /* numbers-as-spec */

  --ko-leading-tight: 1.05;
  --ko-leading-snug:  1.2;
  --ko-leading-body:  1.5;
  --ko-leading-loose: 1.7;

  --ko-track-tight:  -0.015em;
  --ko-track-normal: 0;
  --ko-track-label:   0.08em;
  --ko-track-meta:    0.14em;

  /* ===== Spacing (8px base) ===== */
  --ko-s-0:  0;
  --ko-s-1:  4px;
  --ko-s-2:  8px;
  --ko-s-3:  12px;
  --ko-s-4:  16px;
  --ko-s-5:  24px;
  --ko-s-6:  32px;
  --ko-s-7:  48px;
  --ko-s-8:  64px;
  --ko-s-9:  96px;
  --ko-s-10: 128px;

  /* ===== Borders / radii ===== */
  --ko-radius: 0;            /* hard rule: no rounding anywhere */
  --ko-border-hair: 1px solid var(--ko-line-soft);
  --ko-border:      1px solid var(--ko-line);
  --ko-border-bold: 2px solid var(--ko-line);

  /* ===== Motion — minimal ===== */
  --ko-dur-fast: 80ms;
  --ko-dur-base: 120ms;
  --ko-ease: linear;

  /* ===== Layout ===== */
  --ko-container: 1200px;
  --ko-gutter-d:  80px;
  --ko-gutter-m:  20px;
  --ko-header-h:  64px;
}

/* ============================================================
   Base elements — semantic typography
   ============================================================ */

html, body {
  background: var(--ko-bg);
  color: var(--ko-fg);
  font-family: var(--ko-font-body);
  font-size: var(--ko-text-md);
  line-height: var(--ko-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ko-font-display);
  color: var(--ko-fg);
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: clamp(40px, 6vw, var(--ko-text-5xl));
  line-height: var(--ko-leading-tight);
  letter-spacing: var(--ko-track-tight);
  font-weight: 800;
  text-transform: uppercase;
}
h2 {
  font-size: var(--ko-text-3xl);
  line-height: var(--ko-leading-snug);
  letter-spacing: var(--ko-track-tight);
  text-transform: uppercase;
}
h3 {
  font-size: var(--ko-text-2xl);
  line-height: var(--ko-leading-snug);
  letter-spacing: var(--ko-track-tight);
}
h4 {
  font-size: var(--ko-text-xl);
  line-height: var(--ko-leading-snug);
}
h5 {
  font-size: var(--ko-text-lg);
  line-height: var(--ko-leading-snug);
}
h6 {
  font-size: var(--ko-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--ko-track-label);
  font-weight: 700;
  color: var(--ko-fg-muted);
}

p {
  margin: 0;
  text-wrap: pretty;
  color: var(--ko-fg);
}

small, .ko-caption {
  font-size: var(--ko-text-xs);
  font-family: var(--ko-font-mono);
  letter-spacing: var(--ko-track-label);
  color: var(--ko-fg-faint);
  text-transform: uppercase;
}

code, kbd, samp, pre, .ko-mono {
  font-family: var(--ko-font-mono);
  font-feature-settings: "tnum" 1;
}

.ko-num {
  font-family: var(--ko-font-mono);
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.01em;
}

a {
  color: var(--ko-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--ko-dur-base) var(--ko-ease);
}
a:hover { color: var(--ko-accent); }

hr {
  border: 0;
  border-top: 2px solid var(--ko-line);
  margin: var(--ko-s-7) 0;
}

::selection {
  background: var(--ko-accent);
  color: var(--ko-cream);
}

/* ============================================================
   Utility helpers used across cards & UI kit
   ============================================================ */

.ko-label {
  font-family: var(--ko-font-mono);
  font-size: var(--ko-text-xs);
  letter-spacing: var(--ko-track-label);
  text-transform: uppercase;
  color: var(--ko-fg-muted);
}
.ko-label-strong {
  font-family: var(--ko-font-mono);
  font-size: var(--ko-text-xs);
  letter-spacing: var(--ko-track-meta);
  text-transform: uppercase;
  color: var(--ko-fg);
  font-weight: 700;
}
.ko-divider { height: 2px; background: var(--ko-line); width: 100%; }
.ko-divider-hair { height: 1px; background: var(--ko-line-soft); width: 100%; }

.ko-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--ko-line);
  font-family: var(--ko-font-mono);
  font-size: 10px;
  letter-spacing: var(--ko-track-meta);
  text-transform: uppercase;
  background: var(--ko-bg);
  color: var(--ko-fg);
}
.ko-tag--accent {
  background: var(--ko-accent);
  border-color: var(--ko-accent);
  color: var(--ko-cream);
}
.ko-tag--inverse {
  background: var(--ko-anthracite);
  border-color: var(--ko-anthracite);
  color: var(--ko-cream);
}


/* ========================================================== */
/* Landing layout base                                         */
/* ========================================================== */
/* Landing layout — sits on top of /colors_and_type.css */

* { box-sizing: border-box; }
body { margin: 0; }

.landing { width: 100%; min-height: 100vh; background: var(--ko-paper); color: var(--ko-fg); }

/* container ----------------------------------------------------------- */
.l-wrap { max-width: 1280px; margin: 0 auto; padding: 0 64px; }
@media (max-width: 900px) { .l-wrap { padding: 0 24px; } }

/* top bar ------------------------------------------------------------ */
.topbar {
  background: var(--ko-brick);
  color: var(--ko-cream);
  font-family: var(--ko-font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.topbar .l-wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 36px;
}
.topbar .left, .topbar .right { display:flex; gap: 28px; align-items:center; }
@media (max-width: 700px) { .topbar .right { display: none; } }

/* header ------------------------------------------------------------- */
.header {
  background: var(--ko-paper);
  border-bottom: 2px solid var(--ko-anthracite);
  position: sticky; top: 0; z-index: 20;
}
.header .l-wrap { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.header .brand { display: flex; align-items: center; gap: 14px; color: var(--ko-anthracite); text-decoration: none; }
.header .brand-mark { width: 52px; height: 52px; display: block; }
.header .brand-name { font-family: var(--ko-font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1; }
.header .brand-sub  { font-family: var(--ko-font-mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--ko-ink-50); margin-top: 4px; }
.header nav { display: flex; gap: 28px; }
.header nav a { font-family: var(--ko-font-display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ko-anthracite); text-decoration: none; font-weight: 600; transition: color 120ms linear; }
.header nav a:hover { color: var(--ko-brick); }
@media (max-width: 900px) { .header nav { display: none; } }

/* buttons ------------------------------------------------------------ */
.btn {
  font-family: var(--ko-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 16px 22px;
  border: 1px solid var(--ko-anthracite);
  background: var(--ko-anthracite);
  color: var(--ko-cream);
  cursor: pointer;
  border-radius: 0;
  transition: background 120ms linear, color 120ms linear, border-color 120ms linear;
  display: inline-flex; align-items: center; gap: 12px;
  white-space: nowrap;
}
.btn:hover { background: var(--ko-brick); border-color: var(--ko-brick); }
.btn:active { background: #8E2D2D; border-color: #8E2D2D; }
.btn--accent { background: var(--ko-brick); border-color: var(--ko-brick); }
.btn--accent:hover { background: #8E2D2D; border-color: #8E2D2D; }
.btn--ghost { background: transparent; color: var(--ko-anthracite); }
.btn--ghost:hover { background: var(--ko-anthracite); color: var(--ko-cream); }
.btn--sm { padding: 10px 14px; font-size: 11px; }
.btn--lg { padding: 20px 28px; font-size: 14px; }
.btn .arr { font-family: var(--ko-font-mono); font-weight: 400; }

/* tags --------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--ko-anthracite);
  font-family: var(--ko-font-mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  background: transparent; color: var(--ko-anthracite);
}
.tag .dot { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.tag--brick { background: var(--ko-brick); border-color: var(--ko-brick); color: var(--ko-cream); }
.tag--dark { background: var(--ko-anthracite); color: var(--ko-cream); }

/* section -------------------------------------------------------------*/
section { padding: 96px 0; border-top: 1px solid var(--ko-line-soft); }
@media (max-width: 900px) { section { padding: 56px 0; } }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
.section-num { font-family: var(--ko-font-mono); font-size: 12px; letter-spacing: .22em; color: var(--ko-ink-70); font-weight: 600; text-transform: uppercase; }
.section-title { font-family: var(--ko-font-display); font-size: 44px; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; margin: 0; flex: 1;}
.section-rule { width: 100%; height: 2px; background: var(--ko-anthracite); margin: -16px 0 48px; }
@media (max-width: 768px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 32px; }
}

/* hero ----------------------------------------------------------------*/
.hero { padding: 80px 0 96px; border-top: 0; position: relative; overflow: hidden; }
.hero .grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: end; }
/* hero-swap: уходим с grid + align-items: center (давал вертикальные дыры
   при центровке текста в строке грида) на flex с top-anchor — оба элемента
   жёстко прижаты к верху, никаких "пустых" вертикалей быть не может. */
.hero .grid.hero-swap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
  /* перебиваем display:grid из родительского .hero .grid */
  grid-template-columns: none;
}
.hero .grid.hero-swap .hero-text {
  flex: 2 1 0;
  min-width: 0;
}
.hero .grid.hero-swap > picture {
  flex: 0 0 38%;             /* фиксированно 38% ширины ряда — не растёт, не сжимается */
  min-width: 0;
  display: block;
  align-self: flex-start;
  /* Высоту картинки фиксируем через aspect — img внутри подгоняется. */
  aspect-ratio: 4 / 5;
  /* Сверху не должно быть «дыр» — высота равна aspect-ratio × ширина (= 1.25 × 38%) */
  height: auto;
}
.hero .grid.hero-swap > picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;  /* по центру, а не "bottom" — иначе пустая полоса сверху */
  display: block;
}
@media (max-width: 900px) { .hero .grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 1000px) {
  /* мобайл: flex-direction column, текст сверху, картинка под ним */
  .hero .grid.hero-swap { flex-direction: column; gap: 24px; }
  .hero .grid.hero-swap .hero-text,
  .hero .grid.hero-swap > picture { flex: 1 1 auto; width: 100%; }
}

/* hero-фото — старое правило, перебивается селектором выше
   (.hero .grid.hero-swap > picture img). Оставлено как fallback для
   возможных других мест использования .hero-photo. */
.hero-photo {
  width: 100%;
  display: block;
}
.hero h1 {
  font-family: var(--ko-font-display); font-weight: 800;
  font-size: clamp(48px, 7vw, 92px); line-height: .94;
  letter-spacing: -0.025em; text-transform: uppercase;
  margin: 24px 0 32px;
}
.hero h1 em { font-style: normal; color: var(--ko-brick); }
.hero .lede { font-family: var(--ko-font-body); font-size: 17px; line-height: 1.5; color: var(--ko-ink-50); max-width: 520px; margin: 0 0 36px; }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-meta { border: 1px solid var(--ko-anthracite); background: var(--ko-paper-hi); display: grid; grid-template-columns: 1fr 1fr; }
.hero-meta > div { padding: 20px 22px; border-right: 1px solid var(--ko-line-soft); border-bottom: 1px solid var(--ko-line-soft); display: flex; flex-direction: column; gap: 6px; }
.hero-meta > div:nth-child(2n) { border-right: 0; }
.hero-meta > div:nth-child(n+3) { border-bottom: 0; }
.hero-meta .k { font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ko-ink-50); }
.hero-meta .v { font-family: var(--ko-font-mono); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ko-fg); }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--ko-font-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ko-ink-70); font-weight: 600; }
.hero-eyebrow .line { width: 36px; height: 2px; background: var(--ko-brick); flex-shrink: 0; }

/* stat strip --------------------------------------------------------- */
.stats { background: var(--ko-anthracite); color: var(--ko-cream); border-top: 0; padding: 80px 0; }
.stats .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--ko-cream); border-bottom: 2px solid var(--ko-cream); }
@media (max-width: 900px) { .stats .row { grid-template-columns: repeat(2, 1fr); } }
.stat { padding: 32px 28px; border-right: 1px solid rgba(245,240,230,.2); display: flex; flex-direction: column; gap: 8px; min-height: 180px; justify-content: space-between; }
.stat:last-child { border-right: 0; }
.stat .k { font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #B9B3A6; }
.stat .v { font-family: var(--ko-font-mono); font-size: 64px; font-weight: 700; letter-spacing: -0.04em; line-height: .95; font-variant-numeric: tabular-nums; color: var(--ko-cream); }
.stat .u { font-family: var(--ko-font-display); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ko-cream); }

/* komplekt table ----------------------------------------------------- */
.komplekt { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ko-anthracite); }
@media (max-width: 900px) { .komplekt { grid-template-columns: 1fr; } }
.kpack { padding: 28px; border-right: 1px solid var(--ko-anthracite); background: var(--ko-paper-hi); display: flex; flex-direction: column; gap: 14px; }
.kpack:last-child { border-right: 0; }
.kpack.is-featured { background: var(--ko-anthracite); color: var(--ko-cream); }
.kpack .letter { font-family: var(--ko-font-display); font-size: 96px; font-weight: 800; line-height: .85; letter-spacing: -0.04em; }
.kpack.is-featured .letter { color: var(--ko-cream); }
.kpack .ttl { font-family: var(--ko-font-display); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ko-ink-50); }
.kpack.is-featured .ttl { color: #B9B3A6; }
.kpack .price { font-family: var(--ko-font-mono); font-size: 36px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.kpack .price small { font-family: var(--ko-font-body); font-size: 12px; color: var(--ko-ink-50); font-weight: 400; letter-spacing: 0; text-transform: none; display:block; margin-top: 2px; }
.kpack.is-featured .price small { color: #B9B3A6; }
.kpack ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--ko-font-body); font-size: 14px; }
.kpack li { display: flex; gap: 10px; align-items: flex-start; }
.kpack li::before { content: "·"; font-weight: 700; color: var(--ko-brick); }
.kpack.is-featured li::before { color: var(--ko-ochre); }
.kpack .specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; border-top: 1px solid var(--ko-line-soft); padding-top: 14px; }
.kpack .specs .k { font-family: var(--ko-font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ko-ink-50); }
.kpack.is-featured .specs .k { color: #B9B3A6; }
.kpack .specs .v { font-family: var(--ko-font-mono); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 6px; }

/* spec dish ---------------------------------------------------------- */
.dish { border: 1px solid var(--ko-anthracite); display: grid; grid-template-columns: 1.2fr 1fr; background: var(--ko-paper-hi); }
@media (max-width: 900px) { .dish { grid-template-columns: 1fr; } }
.dish-img {
  background:
    repeating-linear-gradient(45deg, rgba(245,240,230,.05) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #3a342d, #1f1c18);
  color: var(--ko-cream);
  min-height: 360px;
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px;
}
.dish-img .cap { font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #B9B3A6; }
.dish-img .cap-strong { font-family: var(--ko-font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ko-cream); }
.dish-info { padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.dish-info .name { font-family: var(--ko-font-display); font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; }
.dish-info .row { display: flex; gap: 24px; align-items: baseline; }
.dish-info .price { font-family: var(--ko-font-mono); font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dish-info .grm { font-family: var(--ko-font-mono); font-size: 16px; color: var(--ko-ink-50); }
.dish-info .bju { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ko-line-soft); border-bottom: 1px solid var(--ko-line-soft); }
.dish-info .bju > div { padding: 12px 0; }
.dish-info .bju .k { font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ko-ink-50); display:block; margin-bottom: 4px; }
.dish-info .bju .v { font-family: var(--ko-font-mono); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dish-info .ingr { font-family: var(--ko-font-body); font-size: 13px; line-height: 1.55; color: var(--ko-ink-70); }
.dish-info .ingr strong { color: var(--ko-fg); font-weight: 600; }

/* process ------------------------------------------------------------ */
.steps { display: flex; flex-direction: column; gap: 0; }
.step { display: grid; grid-template-columns: 80px 1fr 140px; align-items: stretch; border: 1px solid var(--ko-anthracite); margin-top: -1px; background: var(--ko-paper-hi); }
.step .num { background: var(--ko-anthracite); color: var(--ko-cream); display: flex; align-items: center; justify-content: center; font-family: var(--ko-font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em;}
.step .body { padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; }
.step h4 { font-family: var(--ko-font-display); font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.01em; text-transform: uppercase; }
.step p { font-family: var(--ko-font-body); font-size: 14px; color: var(--ko-ink-50); margin: 0; max-width: 720px; }
.step .when { display: flex; align-items: center; justify-content: center; font-family: var(--ko-font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ko-cream); background: var(--ko-brick); border-left: 1px solid var(--ko-anthracite); }
.step.is-final .when { background: var(--ko-ochre); color: var(--ko-anthracite); }

/* docs --------------------------------------------------------------- */
.docs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--ko-anthracite); }
@media (max-width: 900px) { .docs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .docs { grid-template-columns: 1fr; } }
.doc { padding: 28px 24px; border-right: 1px solid var(--ko-anthracite); border-bottom: 1px solid var(--ko-anthracite); display: flex; flex-direction: column; gap: 12px; background: var(--ko-paper-hi); min-height: 220px; }
.doc:nth-child(4n) { border-right: 0; }
.doc:nth-last-child(-n+4) { border-bottom: 0; }
@media (max-width: 900px) {
  .doc:nth-child(4n) { border-right: 1px solid var(--ko-anthracite); }
  .doc:nth-child(2n) { border-right: 0; }
  .doc:nth-last-child(-n+4) { border-bottom: 1px solid var(--ko-anthracite); }
  .doc:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 480px) {
  .doc { border-right: 0; border-bottom: 1px solid var(--ko-anthracite); }
  .doc:last-child { border-bottom: 0; }
}
.doc svg { width: 28px; height: 28px; stroke-width: 1.75; color: var(--ko-anthracite); }
.doc .name { font-family: var(--ko-font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.005em; text-transform: uppercase; margin-top: auto; }
.doc .meta { font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ko-ink-50); }
.doc a { font-family: var(--ko-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ko-brick); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }

/* clients ------------------------------------------------------------ */
.clients { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-top: 2px solid var(--ko-anthracite); border-bottom: 2px solid var(--ko-anthracite); }
@media (max-width: 900px) { .clients { grid-template-columns: repeat(3, 1fr); } }
.client { padding: 24px; border-right: 1px solid var(--ko-line-soft); display:flex; align-items:center; justify-content:center; font-family: var(--ko-font-display); font-weight: 800; font-size: 16px; letter-spacing: .02em; text-transform: uppercase; color: var(--ko-ink-50); min-height: 96px; transition: color 120ms linear; }
.client:last-child { border-right: 0; }
.client:hover { color: var(--ko-anthracite); }

/* form --------------------------------------------------------------- */
.form { background: var(--ko-anthracite); color: var(--ko-cream); padding: 80px 0; border-top: 0;}
.form .grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .form .grid { grid-template-columns: 1fr; gap: 32px; } }
.form h2 { color: var(--ko-cream); font-family: var(--ko-font-display); font-size: 44px; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; margin: 0 0 20px; }
.form .lede { font-family: var(--ko-font-body); font-size: 16px; color: #C8C2B6; max-width: 480px; margin: 0 0 24px; }
.form ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.form ul li { display: flex; gap: 12px; font-family: var(--ko-font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; align-items: center;}
.form ul li::before { content: ""; width: 16px; height: 2px; background: var(--ko-ochre); display: block; }
.form .card { background: var(--ko-paper); color: var(--ko-fg); padding: 32px; border: 0; }
.form .card h3 { font-family: var(--ko-font-display); font-size: 22px; text-transform: uppercase; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 24px; }
.form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form label { font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ko-ink-50); font-weight: 700; }
.form input, .form select, .form textarea {
  font-family: var(--ko-font-body); font-size: 15px;
  padding: 12px 14px; border: 1px solid var(--ko-anthracite);
  background: var(--ko-paper-hi); color: var(--ko-fg);
  border-radius: 0; outline: none; width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--ko-brick); outline-offset: 2px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .submit { width: 100%; justify-content: space-between; margin-top: 12px; }
.form .legal { font-family: var(--ko-font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ko-ink-50); margin-top: 12px; line-height: 1.5; }
.form .thanks { padding: 64px 16px; text-align: center; }
.form .thanks h3 { font-size: 28px; margin-bottom: 12px; }
.form .thanks p { color: var(--ko-ink-50); }

/* footer ------------------------------------------------------------- */
.footer { background: var(--ko-paper); border-top: 2px solid var(--ko-anthracite); padding: 56px 0 28px; }
.footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--ko-line-soft); }
@media (max-width: 900px) { .footer .top { grid-template-columns: 1fr 1fr; } }
.footer .col h6 { font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ko-ink-50); font-weight: 700; margin: 0 0 12px; }
.footer .col a, .footer .col span { display: block; font-family: var(--ko-font-body); font-size: 14px; color: var(--ko-fg); text-decoration: none; margin-bottom: 6px; }
.footer .col a:hover { color: var(--ko-brick); }
.footer .brand-block { display: flex; gap: 14px; align-items: flex-start; }
.footer .brand-block img { width: 56px; height: 56px; display: block; }
.footer .brand-block .nm { font-family: var(--ko-font-display); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.1; }
.footer .brand-block .sub { font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .18em; color: var(--ko-ink-50); text-transform: uppercase; margin-top: 6px; }
.footer .bottom { padding-top: 20px; display: flex; justify-content: space-between; font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--ko-ink-50); text-transform: uppercase; gap: 16px; flex-wrap: wrap; }

/* utility ------------------------------------------------------------ */
.muted { color: var(--ko-ink-50); }
.accent { color: var(--ko-brick); }
.kmono { font-family: var(--ko-font-mono); font-variant-numeric: tabular-nums; }


/* ========================================================== */
/* Landing extras                                              */
/* ========================================================== */
/* ============================================================
   Лендинг «Комбинат обедов» — дополнительные стили
   Поверх ds/colors_and_type.css + ds/landing-base.css
   ============================================================ */

/* --- глобальные правки поверх базы ---------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { padding-bottom: 0; }
.has-mobile-bar { padding-bottom: 68px; }

/* --- top bar с городами --------------------------------- */
.topbar .left .dot { width: 6px; height: 6px; background: var(--ko-ochre); border-radius: 50%; display: inline-block; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--ko-ochre); }

/* --- header tweaks -------------------------------------- */
.header .l-wrap { gap: 24px; }
.header .header-cta { display: flex; align-items: center; gap: 12px; }
.header .header-cta .phone { font-family: var(--ko-font-mono); font-size: 14px; font-weight: 600; color: var(--ko-anthracite); text-decoration: none; white-space: nowrap; }
.header .header-cta .phone:hover { color: var(--ko-brick); }
@media (max-width: 760px) { .header .header-cta .phone { display: none; } }
.header nav a { font-size: 11px; letter-spacing: .14em; }
@media (max-width: 1100px) { .header nav { gap: 18px; } }

/* --- hero overhaul -------------------------------------- */
.hero { padding: 32px 0 56px; }
.hero .grid { grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: stretch; }
@media (max-width: 1000px) { .hero .grid { grid-template-columns: 1fr; gap: 32px; } }
.hero h1 { font-size: clamp(40px, 5.4vw, 78px); line-height: .96; margin: 16px 0 24px; }
.hero h1 em { color: var(--ko-brick); }
.hero .micro {
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--ko-line-soft);
  border-bottom: 1px solid var(--ko-line-soft);
  margin: 24px 0 28px;
}
.hero .micro > div {
  flex: 1 1 0;
  padding: 14px 18px;
  border-right: 1px solid var(--ko-line-soft);
  font-family: var(--ko-font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ko-anthracite);
  font-weight: 600;
  display: flex; gap: 10px; align-items: center;
  min-width: 200px;
}
.hero .micro > div:last-child { border-right: 0; }
.hero .micro .ord {
  color: var(--ko-brick);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.hero .actions { flex-wrap: wrap; }
.hero .actions .msgr { display: inline-flex; align-items: center; gap: 8px; padding: 14px 18px; font-family: var(--ko-font-display); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ko-anthracite); text-decoration: none; border: 1px dashed var(--ko-anthracite); transition: background 120ms linear; }
.hero .actions .msgr:hover { background: var(--ko-anthracite); color: var(--ko-cream); }


/* --- segments (block 2) --------------------------------- */
.segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ko-anthracite);
  border-bottom: 0;
}
@media (max-width: 1000px) { .segments { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .segments { grid-template-columns: 1fr; } }
.segment {
  padding: 28px 24px 24px;
  border-right: 1px solid var(--ko-anthracite);
  border-bottom: 1px solid var(--ko-anthracite);
  background: var(--ko-paper-hi);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 200px;
}
.segment:nth-child(3n) { border-right: 0; }
@media (max-width: 1000px) {
  .segment:nth-child(3n) { border-right: 1px solid var(--ko-anthracite); }
  .segment:nth-child(2n) { border-right: 0; }
}
.segment .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.segment .num { font-family: var(--ko-font-mono); font-size: 11px; letter-spacing: .18em; color: var(--ko-brick); font-weight: 700; }
.segment .ico { color: var(--ko-anthracite); width: 28px; height: 28px; flex-shrink: 0; }
/* lucide icons rendered inline */
[data-lucide], .lucide { display: inline-block; vertical-align: middle; }
.segment h3 { font-family: var(--ko-font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.05; margin: 0; }
.segment p { font-family: var(--ko-font-body); font-size: 14px; line-height: 1.5; color: var(--ko-ink-70); margin: 0; }
.segment .badge { font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--ko-ochre); text-transform: uppercase; font-weight: 700; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--ko-line-soft); }

/* --- budget (block 3) ----------------------------------- */
.budget-section { background: var(--ko-paper); }
.budget-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 40px;
}
@media (max-width: 900px) { .budget-intro { grid-template-columns: 1fr; gap: 24px; } }
.budget-intro .lede { font-family: var(--ko-font-display); font-size: clamp(22px, 2.5vw, 32px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; margin: 0; }
.budget-intro .lede em { font-style: normal; color: var(--ko-brick); }
.budget-intro .note { font-family: var(--ko-font-body); font-size: 15px; line-height: 1.55; color: var(--ko-ink-70); margin: 0; }

/* -- variant A: 3 cards --- */
.budget-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ko-anthracite);
}
@media (max-width: 900px) { .budget-cards { grid-template-columns: 1fr; } }
.bcard {
  padding: 32px 28px;
  border-right: 1px solid var(--ko-anthracite);
  display: flex; flex-direction: column; gap: 18px;
  background: var(--ko-paper-hi);
}
.bcard:last-child { border-right: 0; }
.bcard.is-mid { background: var(--ko-anthracite); color: var(--ko-cream); }
.bcard .lvl { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--ko-font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ko-ink-50); }
.bcard.is-mid .lvl { color: #B9B3A6; }
.bcard .lvl strong { color: var(--ko-brick); }
.bcard.is-mid .lvl strong { color: var(--ko-ochre); }
.bcard .price { font-family: var(--ko-font-display); font-size: clamp(48px, 5.5vw, 84px); font-weight: 800; letter-spacing: -0.04em; line-height: .85; font-variant-numeric: tabular-nums; }
.bcard .price small { display: block; font-family: var(--ko-font-mono); font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--ko-ink-50); margin-top: 8px; }
.bcard.is-mid .price small { color: #B9B3A6; }
.bcard h4 { font-family: var(--ko-font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; margin: 0; }
.bcard ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--ko-font-body); font-size: 14px; line-height: 1.45; }
.bcard li { display: flex; gap: 10px; }
.bcard li::before { content: "·"; color: var(--ko-brick); font-weight: 700; }
.bcard.is-mid li::before { color: var(--ko-ochre); }

/* -- variant B: calculator --- */
.budget-calc {
  border: 1px solid var(--ko-anthracite);
  background: var(--ko-paper-hi);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 900px) { .budget-calc { grid-template-columns: 1fr; } }
.calc-note {
  margin: 18px 0 0;
  padding: 16px 22px;
  border-left: 3px solid var(--ko-ochre);
  background: var(--ko-paper-hi);
  font-family: var(--ko-font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--ko-ink-70, var(--ko-anthracite));
}
.calc-note strong { color: var(--ko-anthracite); font-weight: 700; }
@media (max-width: 900px) { .calc-note { padding: 14px 16px; font-size: 11.5px; } }
.budget-calc .ctrl { padding: 36px 32px; border-right: 1px solid var(--ko-anthracite); display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 900px) { .budget-calc .ctrl { border-right: 0; border-bottom: 1px solid var(--ko-anthracite); } }
.budget-calc .ctrl-head { display: flex; justify-content: space-between; align-items: baseline; }
.budget-calc .ctrl-head .lbl { font-family: var(--ko-font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ko-ink-50); }
.budget-calc .ctrl-head .val { font-family: var(--ko-font-display); font-size: clamp(56px, 6vw, 96px); font-weight: 800; letter-spacing: -0.04em; line-height: .85; }
.budget-calc .ctrl-head .val small { display: inline-block; font-family: var(--ko-font-mono); font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ko-ink-50); margin-left: 6px; vertical-align: baseline; }
.budget-calc .scale { display: flex; justify-content: space-between; font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--ko-ink-50); text-transform: uppercase; }
.budget-calc .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--ko-anthracite); outline: none; cursor: pointer; }
.budget-calc .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: var(--ko-brick); border: 2px solid var(--ko-cream); cursor: pointer; box-shadow: 0 0 0 1px var(--ko-anthracite); }
.budget-calc .slider::-moz-range-thumb { width: 18px; height: 18px; background: var(--ko-brick); border: 2px solid var(--ko-cream); cursor: pointer; box-shadow: 0 0 0 1px var(--ko-anthracite); }
.budget-calc .pcs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--ko-line-soft);
}
.budget-calc .pcs button {
  font-family: var(--ko-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--ko-line-soft);
  cursor: pointer;
  color: var(--ko-ink-50);
  transition: background 120ms linear, color 120ms linear;
}
.budget-calc .pcs button:last-child { border-right: 0; }
.budget-calc .pcs button.is-on { background: var(--ko-anthracite); color: var(--ko-cream); }
.budget-calc .pcs button:hover { color: var(--ko-anthracite); }
.budget-calc .pcs button.is-on:hover { color: var(--ko-cream); }
.budget-calc .calc-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.budget-calc .out {
  padding: 36px 32px;
  background: var(--ko-anthracite);
  color: var(--ko-cream);
  display: flex; flex-direction: column; gap: 18px;
}
.budget-calc .out .lvl-tag { font-family: var(--ko-font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ko-ochre); }
.budget-calc .out h3 { font-family: var(--ko-font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.015em; text-transform: uppercase; margin: 0; color: var(--ko-cream); }
.budget-calc .out .menu-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(245,240,230,.15); }
.budget-calc .out .menu-list li {
  display: grid; grid-template-columns: 80px 1fr 60px;
  padding: 10px 0; gap: 14px;
  font-family: var(--ko-font-body); font-size: 14px;
  border-bottom: 1px solid rgba(245,240,230,.15);
  align-items: baseline;
}
.budget-calc .out .menu-list .k { font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #B9B3A6; }
.budget-calc .out .menu-list .g { font-family: var(--ko-font-mono); font-size: 12px; color: var(--ko-ochre); text-align: right; font-variant-numeric: tabular-nums; }
.budget-calc .out .totals { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.budget-calc .out .totals .k { font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #B9B3A6; }
.budget-calc .out .totals .v { font-family: var(--ko-font-mono); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* --- composition (block 4) ------------------------------ */
.composition {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  border: 1px solid var(--ko-anthracite);
  background: var(--ko-paper-hi);
}
@media (max-width: 900px) { .composition { grid-template-columns: 1fr; } }
.composition .vis {
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(245,240,230,.05) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #3a342d, #1d1a16);
  color: var(--ko-cream);
  min-height: 440px;
  padding: 28px;
  border-right: 1px solid var(--ko-anthracite);
}
@media (max-width: 900px) { .composition .vis { border-right: 0; border-bottom: 1px solid var(--ko-anthracite); } }
.composition .vis .tray {
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(245,240,230,.4);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1.2fr 1fr;
  gap: 1px;
  background: rgba(245,240,230,.4);
}
.composition .vis .tray .cell {
  background:
    radial-gradient(80% 80% at 50% 40%, rgba(212,168,91,.18), rgba(29,25,22,.4) 70%);
  position: relative;
  padding: 14px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.composition .vis .tray .cell.first  { grid-row: 1 / 3; }
.composition .vis .tray .cell .cell-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 1;
  pointer-events: none;
}
.composition .vis .tray .cell .num,
.composition .vis .tray .cell > div { position: relative; z-index: 2; }
.composition .vis .tray .cell .num { font-family: var(--ko-font-mono); font-size: 11px; letter-spacing: .18em; color: var(--ko-ochre); text-transform: uppercase; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.composition .vis .tray .cell .nm { font-family: var(--ko-font-display); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ko-cream); text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.composition .vis .tray .cell .g { font-family: var(--ko-font-mono); font-size: 16px; font-weight: 700; color: var(--ko-cream); font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.composition .info { padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.composition .info h3 { font-family: var(--ko-font-display); font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.015em; margin: 0; }
.composition .info .table { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--ko-line-soft); }
.composition .info .table .row {
  display: grid;
  grid-template-columns: 24px 1fr 100px;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ko-line-soft);
  align-items: baseline;
}
.composition .info .table .ix { font-family: var(--ko-font-mono); font-size: 11px; color: var(--ko-brick); font-weight: 700; }
.composition .info .table .nm { font-family: var(--ko-font-display); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0; }
.composition .info .table .g { font-family: var(--ko-font-mono); font-size: 15px; font-weight: 600; color: var(--ko-fg); text-align: right; font-variant-numeric: tabular-nums; }
.composition .info .callout {
  background: var(--ko-anthracite); color: var(--ko-cream);
  padding: 16px 18px;
  font-family: var(--ko-font-mono); font-size: 12px;
  letter-spacing: .04em;
  line-height: 1.5;
  display: flex; gap: 12px; align-items: flex-start;
}
.composition .info .callout strong { color: var(--ko-ochre); font-weight: 700; }

/* --- weekly menu (block 5) ------------------------------ */
.weekly { border: 1px solid var(--ko-anthracite); }
.weekly-filters {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ko-anthracite);
  background: var(--ko-paper-hi);
  flex-wrap: wrap;
}
.weekly-filters button {
  flex: 1 1 auto;
  padding: 14px 16px;
  font-family: var(--ko-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--ko-line-soft);
  cursor: pointer;
  color: var(--ko-ink-50);
  transition: background 120ms linear, color 120ms linear;
}
.weekly-filters button:last-child { border-right: 0; }
.weekly-filters button.is-on { background: var(--ko-anthracite); color: var(--ko-cream); }
.weekly-filters button:hover { color: var(--ko-anthracite); }
.weekly-filters button.is-on:hover { color: var(--ko-cream); }
.weekly-grid { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--ko-paper-hi); }
@media (max-width: 1200px) { .weekly-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .weekly-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .weekly-grid { grid-template-columns: 1fr; } }
.day {
  border-right: 1px solid var(--ko-line-soft);
  display: flex; flex-direction: column;
  min-height: 380px;
}
.day:last-child { border-right: 0; }
@media (max-width: 1200px) {
  .day:nth-child(3n) { border-right: 0; }
  .day { border-bottom: 1px solid var(--ko-line-soft); }
}
@media (max-width: 760px) {
  .day { border-right: 1px solid var(--ko-line-soft); }
  .day:nth-child(3n) { border-right: 1px solid var(--ko-line-soft); }
  .day:nth-child(2n) { border-right: 0; }
}
.day .day-head {
  padding: 14px 14px;
  border-bottom: 2px solid var(--ko-anthracite);
  background: var(--ko-paper-hi);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.day .day-head .dn { font-family: var(--ko-font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.015em; text-transform: uppercase; }
.day .day-head .dt { font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .14em; color: var(--ko-ink-50); text-transform: uppercase; }
.day .dishes { flex: 1; display: flex; flex-direction: column; }
.day .item {
  padding: 10px 13px;
  border-bottom: 1px solid var(--ko-line-soft);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.day .item:last-child { border-bottom: 0; }
.day .item.is-hidden { display: none; }
.day .item .k { font-family: var(--ko-font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ko-brick); font-weight: 700; }
.day .item[data-k="komp"] .k { color: var(--ko-ochre); }
.day .item .n { font-family: var(--ko-font-body); font-size: 12.5px; line-height: 1.3; color: var(--ko-fg); }
.day .item .g { font-family: var(--ko-font-mono); font-size: 10px; color: var(--ko-ink-50); font-variant-numeric: tabular-nums; }
.weekly-foot {
  padding: 14px 18px;
  border-top: 1px solid var(--ko-anthracite);
  background: var(--ko-paper-hi);
  font-family: var(--ko-font-body);
  font-size: 13px;
  color: var(--ko-ink-70);
  line-height: 1.5;
}

/* --- delivery (block 6) --------------------------------- */
.delivery-map {
  position: relative;
  background: var(--ko-paper-hi, #FBF7EE);
  border: 1px solid var(--ko-anthracite);
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 360px;
}
.delivery-map .map-head,
.delivery-map .map-foot {
  font-family: var(--ko-font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ko-ink-50);
  font-weight: 700;
}
.delivery-map .map-foot {
  color: var(--ko-ink-30);
  text-align: right;
  font-weight: 400;
  margin-top: auto;
}
.delivery-map .map-svg {
  width: 100%;
  height: auto;
  display: block;
}

.delivery-cities {
  margin-top: 24px;
  padding: 20px 24px 4px;
  background: var(--ko-paper);
  border: 1px solid var(--ko-anthracite);
}
.delivery-cities h4 {
  font-family: var(--ko-font-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ko-ink-50); margin: 0 0 14px; font-weight: 700;
}
.delivery-cities .city-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ko-anthracite);
}
.delivery-cities .city {
  padding: 16px 18px;
  border-right: 1px solid var(--ko-line-soft);
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start;
}
.delivery-cities .city:last-child { border-right: 0; }
.delivery-cities .city .ix { font-family: var(--ko-font-mono); font-size: 11px; color: var(--ko-brick); font-weight: 700; letter-spacing: .08em; }
.delivery-cities .city .nm { font-family: var(--ko-font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.1; }
.delivery-cities .city .km { font-family: var(--ko-font-mono); font-size: 11px; color: var(--ko-ink-50); font-variant-numeric: tabular-nums; letter-spacing: .12em; }
@media (max-width: 700px) {
  .delivery-cities .city-list { grid-template-columns: repeat(2, 1fr); }
  .delivery-cities .city:nth-child(2) { border-right: 0; }
  .delivery-cities .city:nth-child(-n+2) { border-bottom: 1px solid var(--ko-line-soft); }
}
.delivery-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ko-anthracite);
}
.delivery-meta .cell {
  padding: 22px 24px;
  border-right: 1px solid var(--ko-anthracite);
  display: flex; flex-direction: column; gap: 6px;
  background: var(--ko-paper-hi);
}
.delivery-meta .cell:last-child { border-right: 0; }
@media (max-width: 900px) { .delivery-meta { grid-template-columns: 1fr; } .delivery-meta .cell { border-right: 0; border-bottom: 1px solid var(--ko-anthracite); } .delivery-meta .cell:last-child { border-bottom: 0; } }
.delivery-meta .k { font-family: var(--ko-font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ko-ink-50); font-weight: 700; }
.delivery-meta .v { font-family: var(--ko-font-display); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.25; }
.delivery-honest {
  margin-top: 24px;
  padding: 20px 24px;
  background: var(--ko-anthracite);
  color: var(--ko-cream);
  border-left: 3px solid var(--ko-ochre);
  font-family: var(--ko-font-body);
  font-size: 14px;
  line-height: 1.55;
}
.delivery-honest strong { font-family: var(--ko-font-display); color: var(--ko-ochre); text-transform: uppercase; font-size: 12px; letter-spacing: .14em; display: block; margin-bottom: 6px; }

/* --- special (block 7) ---------------------------------- */
.special-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ko-anthracite); }
@media (max-width: 900px) { .special-grid { grid-template-columns: 1fr; } }
.special-card {
  padding: 36px 32px;
  background: var(--ko-paper-hi);
  border-right: 1px solid var(--ko-anthracite);
  display: flex; flex-direction: column; gap: 20px;
  min-height: 460px;
  position: relative;
}
.special-card:last-child { border-right: 0; }
.special-card.is-dark { background: var(--ko-anthracite); color: var(--ko-cream); }
@media (max-width: 900px) { .special-card { border-right: 0; border-bottom: 1px solid var(--ko-anthracite); } .special-card:last-child { border-bottom: 0; } }
.special-card .ribbon { display: flex; justify-content: space-between; align-items: baseline; }
.special-card .ribbon .num { font-family: var(--ko-font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ko-brick); font-weight: 700; }
.special-card.is-dark .ribbon .num { color: var(--ko-ochre); }
.special-card .ribbon .tag-pill {
  font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid currentColor;
}
.special-card h3 {
  font-family: var(--ko-font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}
.special-card .lede { font-family: var(--ko-font-body); font-size: 16px; line-height: 1.5; color: var(--ko-ink-70); margin: 0; }
.special-card.is-dark .lede { color: #C8C2B6; }
.special-card .bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--ko-line-soft); padding-top: 16px; }
.special-card.is-dark .bullets { border-top-color: rgba(245,240,230,.2); }
.special-card .bullets li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-family: var(--ko-font-body); font-size: 14px; line-height: 1.45; }
.special-card .bullets li::before { content: "→"; font-family: var(--ko-font-mono); color: var(--ko-brick); }
.special-card.is-dark .bullets li::before { color: var(--ko-ochre); }
.special-card .case-stamp {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ko-line-soft);
  font-family: var(--ko-font-mono); font-size: 11px; letter-spacing: .14em; color: var(--ko-ink-50); text-transform: uppercase;
  line-height: 1.5;
}
.special-card.is-dark .case-stamp { border-top-color: rgba(245,240,230,.2); color: #B9B3A6; }
.special-card .case-stamp strong { color: var(--ko-anthracite); font-weight: 700; display: block; margin-bottom: 4px; }
.special-card.is-dark .case-stamp strong { color: var(--ko-cream); }

/* --- compare table (block 10) --------------------------- */
.compare {
  border: 1px solid var(--ko-anthracite);
}
.compare-row {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  border-bottom: 1px solid var(--ko-anthracite);
  align-items: stretch;
}
.compare-row:last-child { border-bottom: 0; }
.compare-row.is-head {
  background: var(--ko-anthracite);
  color: var(--ko-cream);
}
.compare-row.is-head > * { font-family: var(--ko-font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; padding: 18px 24px; font-weight: 700; }
.compare-row.is-head .us { color: var(--ko-ochre); }
.compare-row .topic { padding: 22px 24px; background: var(--ko-paper-hi); border-right: 1px solid var(--ko-anthracite); font-family: var(--ko-font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ko-ink-70); font-weight: 700; display: flex; align-items: center; }
.compare-row .us { padding: 22px 24px; background: var(--ko-paper); border-right: 1px solid var(--ko-anthracite); font-family: var(--ko-font-display); font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.25; display: flex; align-items: center; gap: 10px; }
.compare-row .us::before { content: ""; display:inline-block; width: 14px; height: 14px; background: var(--ko-brick); flex-shrink: 0; }
.compare-row .them { padding: 22px 24px; background: var(--ko-paper-hi); font-family: var(--ko-font-body); font-size: 15px; color: var(--ko-ink-50); display: flex; align-items: center; gap: 10px; }
.compare-row .them::before { content: "×"; display:inline-block; width: 14px; height: 14px; line-height: 14px; text-align: center; color: var(--ko-ink-30); font-family: var(--ko-font-mono); font-weight: 700; flex-shrink: 0; }
@media (max-width: 900px) {
  .compare-row { grid-template-columns: 1fr; }
  .compare-row .topic, .compare-row .us, .compare-row .them { border-right: 0; }
  .compare-row .topic { border-bottom: 1px solid var(--ko-line-soft); padding: 14px 20px; }
  .compare-row .us { padding: 16px 20px; }
  .compare-row .them { padding: 12px 20px 18px; border-bottom: 1px dashed var(--ko-line-soft); }
  .compare-row.is-head { display: none; }
}

/* --- cases (block 11) ----------------------------------- */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ko-anthracite); }
@media (max-width: 1000px) { .cases-grid { grid-template-columns: 1fr; } }
.case-card {
  padding: 28px 26px;
  background: var(--ko-paper-hi);
  border-right: 1px solid var(--ko-anthracite);
  display: flex; flex-direction: column; gap: 18px;
  min-height: 360px;
}
.case-card:last-child { border-right: 0; }
@media (max-width: 1000px) { .case-card { border-right: 0; border-bottom: 1px solid var(--ko-anthracite); } .case-card:last-child { border-bottom: 0; } }
.case-card .case-head { display: flex; justify-content: space-between; align-items: baseline; }
.case-card .case-head .num { font-family: var(--ko-font-display); font-size: 56px; font-weight: 800; letter-spacing: -0.04em; line-height: .8; color: var(--ko-brick); }
.case-card .case-head .meta { font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ko-ink-50); text-align: right; line-height: 1.4; }
.case-card h3 { font-family: var(--ko-font-display); font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.1; margin: 0; }
.case-card p { font-family: var(--ko-font-body); font-size: 14px; line-height: 1.5; color: var(--ko-ink-70); margin: 0; }
.case-card .nums { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--ko-line-soft); margin-top: auto; }
.case-card .nums > div { padding: 12px 0; }
.case-card .nums .k { font-family: var(--ko-font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ko-ink-50); display: block; margin-bottom: 4px; }
.case-card .nums .v { font-family: var(--ko-font-mono); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- FAQ (block 12) ------------------------------------- */
.faq { border: 1px solid var(--ko-anthracite); background: var(--ko-paper-hi); }
.faq-item { border-bottom: 1px solid var(--ko-line-soft); }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 22px 28px;
  text-align: left;
  display: grid;
  grid-template-columns: 40px 1fr 32px;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  font-family: var(--ko-font-display);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--ko-anthracite);
  transition: background 120ms linear;
}
.faq-q:hover { background: var(--ko-ink-04); }
.faq-q .ix { font-family: var(--ko-font-mono); font-size: 11px; letter-spacing: .14em; color: var(--ko-brick); font-weight: 700; }
.faq-q .chev { font-family: var(--ko-font-mono); font-size: 18px; color: var(--ko-ink-50); transition: transform 120ms linear, color 120ms linear; text-align: right; }
.faq-item.is-open .faq-q { background: var(--ko-anthracite); color: var(--ko-cream); }
.faq-item.is-open .faq-q .ix { color: var(--ko-ochre); }
.faq-item.is-open .faq-q .chev { color: var(--ko-ochre); transform: rotate(45deg); }
.faq-a {
  display: none;
  padding: 4px 28px 24px;
  grid-template-columns: 40px 1fr 32px;
  gap: 18px;
}
.faq-item.is-open .faq-a { display: grid; }
.faq-a .gap, .faq-a .gap2 { }
.faq-a p { font-family: var(--ko-font-body); font-size: 15px; line-height: 1.6; color: var(--ko-ink-70); margin: 0; max-width: 720px; }
.faq-a p + p { margin-top: 10px; }
@media (max-width: 700px) {
  .faq-q, .faq-a { grid-template-columns: 28px 1fr 24px; padding: 18px 18px; gap: 12px; }
  .faq-q { font-size: 15px; }
  .faq-a { padding-top: 0; padding-bottom: 18px; }
}

/* --- final form (block 13) ------------------------------ */
.final-form { background: var(--ko-anthracite); color: var(--ko-cream); padding: 96px 0; border-top: 0; }
.final-form .grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; }
@media (max-width: 1000px) { .final-form .grid { grid-template-columns: 1fr; gap: 32px; } }
.final-form .eyebrow { font-family: var(--ko-font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ko-ochre); }
.final-form h2 { color: var(--ko-cream); font-family: var(--ko-font-display); font-size: clamp(36px, 4.5vw, 64px); font-weight: 800; letter-spacing: -0.025em; text-transform: uppercase; line-height: .95; margin: 16px 0 24px; }
.final-form h2 em { font-style: normal; color: var(--ko-ochre); }
.final-form .lede { font-family: var(--ko-font-body); font-size: 17px; line-height: 1.5; color: #C8C2B6; max-width: 480px; margin: 0 0 28px; }
.final-form .trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(245,240,230,.2); border-bottom: 1px solid rgba(245,240,230,.2); margin-top: 24px; }
.final-form .trust-row .cell { padding: 18px 20px; border-right: 1px solid rgba(245,240,230,.2); display: flex; flex-direction: column; gap: 6px; }
.final-form .trust-row .cell:last-child { border-right: 0; }
.final-form .trust-row .v { font-family: var(--ko-font-display); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.2; }
.final-form .messenger-block { margin-top: 28px; padding-top: 24px; border-top: 1px dashed rgba(245,240,230,.3); }
.final-form .messenger-block .lbl { font-family: var(--ko-font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #B9B3A6; margin-bottom: 12px; }
.final-form .messenger-block .row { display: flex; gap: 12px; flex-wrap: wrap; }
.final-form .messenger-block a { display: inline-flex; gap: 8px; align-items: center; padding: 12px 18px; border: 1px solid var(--ko-cream); color: var(--ko-cream); font-family: var(--ko-font-display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; text-decoration: none; transition: background 120ms linear, color 120ms linear; }
.final-form .messenger-block a:hover { background: var(--ko-cream); color: var(--ko-anthracite); }

.final-form .card { background: var(--ko-paper); color: var(--ko-fg); padding: 36px; border: 0; }
.final-form .card h3 { font-family: var(--ko-font-display); font-size: 22px; text-transform: uppercase; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 8px; }
.final-form .card .sub { font-family: var(--ko-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ko-ink-50); margin: 0 0 24px; }
.final-form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.final-form label { font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ko-ink-50); font-weight: 700; }
.final-form input, .final-form select, .final-form textarea { font-family: var(--ko-font-body); font-size: 15px; padding: 12px 14px; border: 1px solid var(--ko-anthracite); background: var(--ko-paper-hi); color: var(--ko-fg); border-radius: 0; outline: none; width: 100%; }
.final-form input:focus, .final-form select:focus { outline: 2px solid var(--ko-brick); outline-offset: 2px; }
.final-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.final-form .three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .final-form .three { grid-template-columns: 1fr; } }
.final-form .check-row { display: flex; gap: 10px; align-items: flex-start; padding: 14px 0; font-family: var(--ko-font-body); font-size: 13.5px; color: var(--ko-fg); line-height: 1.4; cursor: pointer; }
.final-form .check-row input[type=checkbox] { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--ko-brick); }
.final-form .submit { width: 100%; justify-content: space-between; padding: 18px 22px; font-size: 14px; }
.final-form .legal { font-family: var(--ko-font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ko-ink-50); margin-top: 12px; line-height: 1.6; }
.final-form .thanks { padding: 64px 16px; text-align: center; }
.final-form .thanks h3 { font-size: 28px; margin-bottom: 12px; }
.final-form .thanks p { color: var(--ko-ink-50); font-family: var(--ko-font-body); font-size: 14px; }

/* --- 4-step process (block 9, override default .steps) -- */
.proc-4 { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ko-anthracite); }
@media (max-width: 900px) { .proc-4 { grid-template-columns: 1fr; } }
.proc-step {
  padding: 24px 24px 28px;
  background: var(--ko-paper-hi);
  border-right: 1px solid var(--ko-anthracite);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 260px;
  position: relative;
}
.proc-step:last-child { border-right: 0; }
@media (max-width: 900px) { .proc-step { border-right: 0; border-bottom: 1px solid var(--ko-anthracite); } .proc-step:last-child { border-bottom: 0; } }
.proc-step .num { font-family: var(--ko-font-display); font-size: 72px; font-weight: 800; line-height: .8; letter-spacing: -0.04em; color: var(--ko-anthracite); }
.proc-step.is-special .num { color: var(--ko-brick); }
.proc-step h4 { font-family: var(--ko-font-display); font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; margin: 0; line-height: 1.15; }
.proc-step p { font-family: var(--ko-font-body); font-size: 13.5px; line-height: 1.5; color: var(--ko-ink-70); margin: 0; }
.proc-step .when {
  margin-top: auto;
  font-family: var(--ko-font-mono); font-size: 10px; letter-spacing: .18em; color: var(--ko-brick); text-transform: uppercase; font-weight: 700;
  padding-top: 12px;
  border-top: 1px dashed var(--ko-line-soft);
}
.proc-step.is-special .when { color: var(--ko-ochre); }
.proc-step.is-special .when::before { content: "★ "; }

/* --- inline CTA strip ----------------------------------- */
.cta-strip {
  background: var(--ko-anthracite);
  color: var(--ko-cream);
  border: 0;
  margin: 0;
  padding: 0;
}
.cta-strip .l-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 28px 64px;
}
@media (max-width: 900px) { .cta-strip .l-wrap { grid-template-columns: 1fr; padding: 24px; gap: 16px; } }
.cta-strip h3 { font-family: var(--ko-font-display); font-size: clamp(22px, 2.5vw, 32px); font-weight: 800; text-transform: uppercase; letter-spacing: -0.015em; color: var(--ko-cream); margin: 0; }
.cta-strip h3 em { font-style: normal; color: var(--ko-ochre); }
.cta-strip .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-strip .btn--ghost { color: var(--ko-cream); border-color: var(--ko-cream); }
.cta-strip .btn--ghost:hover { background: var(--ko-cream); color: var(--ko-anthracite); }

/* --- mobile bottom sticky ------------------------------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: none;
  background: var(--ko-anthracite);
  border-top: 2px solid var(--ko-brick);
}
.mobile-bar a {
  flex: 1;
  padding: 16px 8px;
  font-family: var(--ko-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ko-cream);
  text-decoration: none;
  text-align: center;
  border-right: 1px solid rgba(245,240,230,.2);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mobile-bar a:last-child { border-right: 0; }
.mobile-bar a.primary { background: var(--ko-brick); }
.mobile-bar a:hover { color: var(--ko-ochre); }
.mobile-bar a.primary:hover { background: #8E2D2D; color: var(--ko-cream); }
@media (max-width: 760px) { .mobile-bar { display: flex; } }

/* --- top bar in mobile narrower ------------------------- */
@media (max-width: 760px) {
  .topbar .l-wrap { height: 32px; }
  .topbar .left { gap: 12px; font-size: 9.5px; }
  .topbar .left span:nth-child(n+2) { display: none; }
}

/* --- section number rail -------------------------------- */
.section-head .section-num { color: var(--ko-ink-70); font-weight: 600; font-size: 12px; }
.section-head h2.section-title { font-family: var(--ko-font-display); font-size: clamp(32px, 4vw, 52px); font-weight: 800; letter-spacing: -0.025em; line-height: .98; text-transform: uppercase; margin: 0; }
.section-head .head-right { font-family: var(--ko-font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ko-ink-70); font-weight: 600; }

/* --- print-friendly hint -------------------------------- */
.menu-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.menu-cta .pdf-link { font-family: var(--ko-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ko-brick); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; padding: 12px 14px; border: 1px dashed var(--ko-brick); }
.menu-cta .pdf-link:hover { background: var(--ko-brick); color: var(--ko-cream); }

/* --- accent override for ochre tweak -------------------- */
body[data-accent="ochre"] {
  --ko-brick: var(--ko-ochre);
  --ko-accent: var(--ko-ochre);
  --ko-accent-press: #B58A3C;
}
body[data-accent="ochre"] .topbar { color: var(--ko-anthracite); background: var(--ko-ochre); }
body[data-accent="ochre"] .topbar a:hover { color: var(--ko-brick); }
body[data-accent="ochre"] .hero h1 em { color: #B33A3A; }

/* --- mobile fixes 2026-05-15 -------------------------------------- */

/* anti-overflow страховка — клиппит любой случайный horizontal scroll */
html, body { overflow-x: clip; }

/* BudgetCalc — calc-totals (день / месяц) — заменён inline grid на класс */
.budget-calc .calc-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 480px) {
  .budget-calc .calc-totals { grid-template-columns: 1fr; gap: 12px; }
}

/* BudgetCalc — крупная цифра бюджета: понижаем минимум clamp на узких экранах */
@media (max-width: 480px) {
  .budget-calc .ctrl-head .val { font-size: clamp(40px, 12vw, 64px); }
  .budget-calc .ctrl { padding: 24px 20px; gap: 18px; }
}

/* Delivery — SVG-карта на узких экранах не помещается, пины слипаются.
   Скрываем карту на ≤600 px, оставляем только список городов */
@media (max-width: 600px) {
  .delivery-map { display: none; }
  .delivery-cities { margin-top: 0; }
}

/* MobileBar — учитываем safe-area-inset для iPhone с челкой */
.mobile-bar { padding-bottom: env(safe-area-inset-bottom, 0px); }
.has-mobile-bar { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

/* ============================================================
   Глобальная защита от горизонтального переполнения и
   узкие mobile-фиксы (≤ 600 px).
   Добавлено 2026-05-19 после первого визуального ревью.
   ============================================================ */

html, body { overflow-x: hidden; }

/* Grid-элементы по умолчанию имеют min-width: auto (= content-min-size),
   из-за чего длинное слово в 1fr-колонке толкает grid шире viewport.
   Лечим точечно для зон, где это сломалось. */
.composition .info .table .row > *,
.delivery-cities .city > *,
.budget-calc .out .menu-list li > *,
.faq-q > *,
.faq-a > *,
.delivery-meta .cell > *,
.final-form .trust-row .cell > *,
.special-card .bullets li > *,
.hero .micro > div,
.hero .micro > div > * { min-width: 0; }

/* Длинные русские слова в заголовках карточек должны иметь возможность
   разорваться на узких экранах, если по-другому не помещаются.
   На десктопе — нормальный overflow-wrap, иначе ломаются красивые слова. */
@media (max-width: 700px) {
  .special-card h3,
  .hero h1,
  .section-title,
  .segment h3,
  .budget-calc .out h3,
  .final-form h2,
  .composition .info h3,
  .delivery-cities .city .nm,
  .final-form .card h3 { overflow-wrap: anywhere; word-break: normal; }
}

/* Не даём grid/flex-элементам разрастаться шире viewport из-за content min-size */
.segments > *,
.segment,
.segment > *,
.segments .segment .head > *,
.segments .segment p,
.composition,
.composition > *,
.weekly-grid > *,
.weekly-grid .day > *,
.special-grid > *,
.special-card > *,
.delivery-grid > *,
.budget-calc > * { min-width: 0; }

@media (max-width: 600px) {
  .l-wrap { padding: 0 16px; }

  /* TopBar: чуть меньше отступы */
  .topbar .l-wrap { gap: 8px; }
  .topbar .left { gap: 8px; }

  /* Header: компактнее и помещаемся в 390 px */
  .header .l-wrap { height: 64px; gap: 8px; }
  .header .brand-mark { width: 40px; height: 40px; }
  .header .brand-name { font-size: 13px; }
  .header .brand-sub  { font-size: 8px; letter-spacing: .16em; margin-top: 2px; }
  .header .header-cta { gap: 8px; }
  .header .header-cta .btn { padding: 10px 12px; font-size: 11px; letter-spacing: .12em; }
  .header .header-cta .btn .arr { display: none; }

  /* Hero */
  .hero { padding: 32px 0 40px; }
  .hero h1 { font-size: clamp(26px, 7.2vw, 36px); line-height: 1.04; margin: 12px 0 20px; }
  /* Сохраняем дизайнерские переносы строк через <br/> */
  .hero .lede { font-size: 15px; max-width: 100%; margin-bottom: 24px; }
  .hero .micro {
    display: grid; grid-template-columns: 1fr; /* в столбец на узком */
    margin: 20px 0 24px;
  }
  .hero .micro > div {
    flex: none; min-width: 0;
    padding: 11px 14px; font-size: 11px; letter-spacing: .08em;
    border-right: 0; border-bottom: 1px solid var(--ko-line-soft);
  }
  .hero .micro > div:last-child { border-bottom: 0; }
  .hero .actions .msgr { padding: 12px 14px; font-size: 11px; }

  /* Заголовки секций — компактнее, чтобы не толкали ширину */
  .section-title { font-size: 30px; }

  /* Composition: компактные отступы и узкая третья колонка */
  .composition .info { padding: 22px 18px; gap: 14px; }
  .composition .info h3 { font-size: 22px; }
  .composition .info .table .row {
    grid-template-columns: 22px 1fr minmax(70px, auto);
    gap: 8px; padding: 10px 0;
  }
  .composition .info .table .nm { font-size: 13px; }
  .composition .info .table .g  { font-size: 12px; }
  .composition .info .callout { padding: 14px; font-size: 11.5px; line-height: 1.45; }
  .composition .vis .tray { min-height: 220px; }
  .composition .vis .tray .cell { padding: 14px 12px; }
  .composition .vis .tray .cell .nm { font-size: 12px; }
  .composition .vis .tray .cell .g  { font-size: 14px; }

  /* Budget calc */
  .budget-calc .ctrl { padding: 22px 18px; gap: 16px; }
  .budget-calc .out  { padding: 24px 18px; }
  .budget-calc .out h3 { font-size: 20px; }
  .budget-calc .out .menu-list li {
    grid-template-columns: 64px 1fr 72px;
    gap: 10px; font-size: 13px; padding: 9px 0;
  }
  .budget-calc .out .menu-list .k { font-size: 9px; }
  .budget-calc .out .menu-list .g { font-size: 11px; }
  .budget-calc .out .totals .v { font-size: 22px; }
  .budget-calc .ctrl-head .val { font-size: clamp(40px, 14vw, 64px); }

  /* Weekly menu: фильтры в две строки 3+2 */
  .weekly-filters { flex-wrap: wrap; }
  .weekly-filters button {
    flex: 1 1 33.333%;
    padding: 10px 4px; font-size: 10px; letter-spacing: .08em;
    border-bottom: 1px solid var(--ko-line-soft);
  }
  .weekly-filters button:nth-child(3) { border-right: 0; }
  .weekly-filters button:nth-last-child(-n+2) { border-bottom: 0; }
  .weekly-foot { padding: 14px 16px; font-size: 12px; }

  /* Delivery cities — горизонтальная лента на узких экранах */
  .delivery-cities { padding: 16px 16px 0; }
  .delivery-cities .city { padding: 14px 12px; }
  .delivery-cities .city .nm { font-size: 14px; }
  .delivery-cities .city .km { font-size: 10px; }
  .delivery-honest { padding: 18px; font-size: 13px; }

  /* Special cases */
  .special-card { padding: 24px 18px; gap: 16px; }
  .special-card h3 { font-size: 22px; line-height: 1.05; }
  .special-card .ribbon { flex-direction: column; gap: 6px; align-items: flex-start; }
  .special-card .ribbon .tag-pill { font-size: 10px; }
  .special-card .lede { font-size: 14px; line-height: 1.45; }
  .special-card .bullets li { font-size: 13px; }

  /* FAQ */
  .faq-q, .faq-a { grid-template-columns: 24px 1fr 20px; gap: 10px; padding: 16px 14px; }
  .faq-q { font-size: 14px; line-height: 1.25; }
  .faq-q .ix { font-size: 10px; }

  /* Final form */
  .final-form { padding: 56px 0; }
  .final-form h2 { font-size: clamp(28px, 8.5vw, 40px); margin: 12px 0 20px; }
  .final-form .lede { font-size: 15px; }
  .final-form .card { padding: 24px 18px; }
  .final-form .trust-row {
    grid-template-columns: 1fr; /* в столбец на узком */
  }
  .final-form .trust-row .cell {
    border-right: 0; border-bottom: 1px solid rgba(245,240,230,.2);
    padding: 14px 18px;
  }
  .final-form .trust-row .cell:last-child { border-bottom: 0; }
  .final-form .messenger-block a { font-size: 11px; padding: 10px 14px; }

  /* Footer */
  .footer .top { grid-template-columns: 1fr; gap: 24px; }
  .footer .bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}

@media (max-width: 520px) {
  /* TopBar: cкрыть центральный span (Ростов · Аксай …),
     чтобы телефон + часы не зажимали друг друга */
  .topbar .left span:nth-child(2) { display: none; }
  /* Шапка: убираем кнопку CTA — на мобиле дублируется в hero и mobile-bar */
  .header .header-cta .btn { display: none; }
  .header .l-wrap { justify-content: flex-start; }
}

@media (max-width: 600px) {
  /* Hero eyebrow: позволить перенос */
  .hero-eyebrow { font-size: 10px; letter-spacing: .14em; flex-wrap: wrap; }
  .hero-eyebrow .line { display: none; }
  /* CTA в шапке: ещё компактнее, чтобы помещался рядом с брендом */
  .header .brand-name { font-size: 14px; }
  .header .header-cta .btn { padding: 9px 10px; font-size: 10px; letter-spacing: .1em; }

  /* Большие кнопки могут переноситься на узком */
  .btn--lg { white-space: normal; padding: 16px 18px; font-size: 13px; line-height: 1.2; }
}

/* Заголовок тёмной карточки on-site должен быть cream (h3 по умолчанию --ko-fg) */
.special-card.is-dark h3 { color: var(--ko-cream); }

/* ============================================================
   Block A правки (после Телемост-ревью 2026-05-19)
   ============================================================ */

/* --- Калькулятор: миниатюры блюд в menu-list ----------------- */
.budget-calc .out .menu-list li {
  display: grid;
  grid-template-columns: 36px 88px 1fr auto;
  align-items: center;
  gap: 14px;
}
.budget-calc .out .menu-list .thumb {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(245, 240, 230, 0.18);
  background: rgba(245, 240, 230, 0.05);
  color: var(--ko-ochre);
  flex-shrink: 0;
}
.budget-calc .out .menu-list .thumb i,
.budget-calc .out .menu-list .thumb svg { width: 20px; height: 20px; }
.budget-calc .out .menu-list .nm {
  font-family: var(--ko-font-body);
  font-size: 14px;
  color: var(--ko-cream);
  line-height: 1.3;
}

/* --- Final form: правая колонка теперь cta-card ------------- */
.final-form .cta-card {
  background: var(--ko-paper);
  color: var(--ko-fg);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.final-form .cta-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.35); }
.final-form .cta-card .eyebrow { color: var(--ko-brick); font-family: var(--ko-font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.final-form .cta-card h3 {
  font-family: var(--ko-font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}
.final-form .cta-card p {
  font-family: var(--ko-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ko-ink-70);
  margin: 0;
}
.final-form .cta-card .cta-bullets {
  list-style: none; padding: 0; margin: 8px 0 12px;
  border-top: 1px solid var(--ko-line-soft);
  border-bottom: 1px solid var(--ko-line-soft);
}
.final-form .cta-card .cta-bullets li {
  padding: 12px 0;
  border-bottom: 1px solid var(--ko-line-soft);
  font-family: var(--ko-font-body);
  font-size: 14px;
  color: var(--ko-fg);
  display: flex;
  align-items: center;
  gap: 12px;
}
.final-form .cta-card .cta-bullets li:last-child { border-bottom: 0; }
.final-form .cta-card .cta-bullets li::before {
  content: '▸';
  color: var(--ko-brick);
  font-family: var(--ko-font-mono);
  font-size: 13px;
  flex-shrink: 0;
}

/* --- Модальное окно с формой -------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 18, 0.78);
  backdrop-filter: blur(2px);
}
.modal-card {
  position: relative;
  background: var(--ko-paper);
  color: var(--ko-fg);
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 48px 48px 40px;
  border: 1px solid var(--ko-anthracite);
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  z-index: 1;
}
@media (max-width: 600px) { .modal-card { padding: 32px 22px 28px; } .modal { padding: 12px; } }
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--ko-line-soft);
  color: var(--ko-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms linear, color 120ms linear;
}
.modal-close:hover { background: var(--ko-anthracite); color: var(--ko-cream); border-color: var(--ko-anthracite); }
.modal-close i, .modal-close svg { width: 18px; height: 18px; }

.modal-form .eyebrow {
  font-family: var(--ko-font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ko-brick);
}
.modal-form h3 {
  font-family: var(--ko-font-display);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 12px 0 6px;
}
.modal-form .sub {
  font-family: var(--ko-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ko-ink-50);
  margin: 0 0 24px;
}
.modal-form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.modal-form label:not(.check-row) {
  font-family: var(--ko-font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ko-ink-50);
  font-weight: 700;
}
.modal-form input, .modal-form select, .modal-form textarea {
  font-family: var(--ko-font-body);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--ko-anthracite);
  background: var(--ko-paper-hi);
  color: var(--ko-fg);
  border-radius: 0;
  outline: none;
  width: 100%;
}
.modal-form input:focus, .modal-form select:focus { outline: 2px solid var(--ko-brick); outline-offset: 2px; }
.modal-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-form .three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 600px) {
  .modal-form .two, .modal-form .three { grid-template-columns: 1fr; }
}
.modal-form .check-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 0;
  font-family: var(--ko-font-body);
  font-size: 13.5px;
  color: var(--ko-fg);
  line-height: 1.4;
  cursor: pointer;
}
.modal-form .check-row input[type=checkbox] {
  margin-top: 2px;
  width: 18px; height: 18px;
  accent-color: var(--ko-brick);
  flex-shrink: 0;
}
.modal-form .check-row.consent {
  border-top: 1px dashed var(--ko-line-soft);
  margin-top: 8px;
  padding-top: 16px;
  font-size: 12.5px;
  color: var(--ko-ink-70);
}
.modal-form .check-row.consent a { color: var(--ko-brick); text-decoration: underline; }
.modal-form .submit {
  width: 100%;
  justify-content: space-between;
  padding: 18px 22px;
  font-size: 14px;
  margin-top: 8px;
}

.modal-thanks {
  text-align: center;
  padding: 32px 8px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.modal-thanks h3 {
  font-family: var(--ko-font-display);
  font-size: 28px;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0;
}
.modal-thanks p {
  font-family: var(--ko-font-body);
  font-size: 14px;
  color: var(--ko-ink-70);
  margin: 0;
  max-width: 360px;
}
.modal-thanks .btn { margin-top: 8px; }

body.is-modal-open { overflow: hidden; }

/* honeypot: off-screen, недоступен глазу и табу, но в DOM (бот заполнит) */
.modal-form .hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Состояния формы при отправке */
.modal-form.is-sending .submit { opacity: 0.6; pointer-events: none; }
.modal-form .form-status {
  margin-top: 12px;
  padding: 12px 16px;
  border-left: 3px solid var(--ko-ochre);
  font-family: var(--ko-font-mono);
  font-size: 12px;
  line-height: 1.5;
  display: none;
}
.modal-form .form-status.is-show { display: block; }
.modal-form.is-error .form-status { border-left-color: #b14242; color: #b14242; }

/* --- Cookie banner ------------------------------------------ */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 220ms ease-out, transform 220ms ease-out;
  pointer-events: none;
  bottom: 16px;
  z-index: 900;
  background: var(--ko-anthracite);
  color: var(--ko-cream);
  border: 1px solid var(--ko-anthracite);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.has-mobile-bar .cookie-banner { bottom: 80px; }
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; transform: none; }
}
.cookie-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
}
.cookie-text {
  font-family: var(--ko-font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ko-cream);
  flex: 1;
  min-width: 200px;
}
.cookie-text a { color: var(--ko-ochre); text-decoration: underline; }
.cookie-banner .btn { flex-shrink: 0; }

/* --- Карта доставки: фон под новый SVG ---------------------- */
.delivery-map .map-svg {
  background: var(--ko-paper);
}

/* --- Старый .legal больше не используется (форма ушла в модалку) */
.final-form .legal { display: none; }

/* --- Packaging block (новый блок «Упаковка» в #dostavka) ---- */
.packaging {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--ko-line-soft);
}
.packaging-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.packaging-head .section-num {
  font-family: var(--ko-font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--ko-ink-70);
  font-weight: 600;
  text-transform: uppercase;
}
.packaging-note {
  font-family: var(--ko-font-body);
  font-size: 14px;
  color: var(--ko-ink-50);
}
.packaging-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ko-anthracite);
  background: var(--ko-paper-hi);
}
@media (max-width: 900px) { .packaging-grid { grid-template-columns: 1fr; } }
.pack-card {
  padding: 28px 26px;
  border-right: 1px solid var(--ko-line-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 280px;
}
.pack-card:last-child { border-right: 0; }
@media (max-width: 900px) {
  .pack-card { border-right: 0; border-bottom: 1px solid var(--ko-line-soft); }
  .pack-card:last-child { border-bottom: 0; }
}
.pack-head { display: flex; align-items: center; justify-content: space-between; }
.pack-head .num {
  font-family: var(--ko-font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--ko-brick);
  font-weight: 700;
}
.pack-ico {
  width: 28px; height: 28px;
  color: var(--ko-anthracite);
  stroke-width: 1.5;
}
.pack-card h4 {
  font-family: var(--ko-font-display);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.15;
}
.pack-card p {
  font-family: var(--ko-font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ko-ink-70);
  margin: 0;
  flex: 1;
}
.pack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pack-tags li {
  padding: 5px 10px;
  border: 1px solid var(--ko-line);
  background: var(--ko-paper);
  font-family: var(--ko-font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ko-ink-70);
}

/* --- Страница политики конфиденциальности ----------------- */
.policy-page { padding: 56px 0 80px; }
.policy-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ko-font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ko-ink-70);
  font-weight: 600;
  margin-bottom: 20px;
}
.policy-eyebrow .line { width: 36px; height: 2px; background: var(--ko-brick); flex-shrink: 0; }
.policy-h1 {
  font-family: var(--ko-font-display);
  font-size: clamp(40px, 5.4vw, 72px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 36px;
}
.policy-meta {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  border: 1px solid var(--ko-anthracite);
  background: var(--ko-paper-hi);
  margin-bottom: 40px;
}
@media (max-width: 720px) { .policy-meta { grid-template-columns: 1fr; } }
.policy-meta > div {
  padding: 18px 22px;
  border-right: 1px solid var(--ko-line-soft);
}
.policy-meta > div:last-child { border-right: 0; }
@media (max-width: 720px) {
  .policy-meta > div { border-right: 0; border-bottom: 1px solid var(--ko-line-soft); }
  .policy-meta > div:last-child { border-bottom: 0; }
}
.policy-meta .k {
  font-family: var(--ko-font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ko-ink-50);
  margin-bottom: 4px;
}
.policy-meta .v {
  font-family: var(--ko-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  line-height: 1.2;
}
.policy-meta .v-sub {
  font-family: var(--ko-font-mono);
  font-size: 11px;
  color: var(--ko-ink-50);
  margin-top: 4px;
  letter-spacing: .04em;
}
.policy-intro {
  font-family: var(--ko-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ko-fg);
  border-left: 2px solid var(--ko-brick);
  padding-left: 22px;
  margin-bottom: 40px;
  max-width: 780px;
}
.policy-intro p { margin: 0 0 14px; }
.policy-intro p:last-child { margin-bottom: 0; }

.policy-section {
  margin-bottom: 36px;
  max-width: 780px;
}
.policy-section h2 {
  font-family: var(--ko-font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ko-line-soft);
}
.policy-section p {
  font-family: var(--ko-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ko-fg);
  margin: 0 0 12px;
}
.policy-section p strong {
  font-family: var(--ko-font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--ko-brick);
  letter-spacing: .04em;
  margin-right: 4px;
}
.policy-section ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 16px;
}
.policy-section ul li {
  padding: 6px 0 6px 22px;
  position: relative;
  font-family: var(--ko-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ko-fg);
}
.policy-section ul li::before {
  content: '·';
  position: absolute;
  left: 6px;
  color: var(--ko-brick);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  top: 9px;
}

.policy-contact {
  padding: 28px 32px;
  background: var(--ko-anthracite);
  color: var(--ko-cream);
  max-width: 780px;
  margin: 48px 0 36px;
}
.policy-contact h3 {
  font-family: var(--ko-font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--ko-ochre);
}
.policy-contact p {
  font-family: var(--ko-font-body);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  color: var(--ko-cream);
}
.policy-contact a { color: var(--ko-ochre); text-decoration: underline; }

.policy-back {
  margin-top: 32px;
}
.policy-back a {
  font-family: var(--ko-font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ko-brick);
  text-decoration: none;
  border-bottom: 1px solid var(--ko-brick);
  padding-bottom: 2px;
}

/* --- Реквизиты в подвале --------------------------------- */
.footer-legal {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ko-line-soft);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--ko-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ko-ink-50);
  line-height: 1.5;
}
.footer .bottom a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer .bottom a:hover { color: var(--ko-brick); }