@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/onest-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/onest-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/onest-400-math.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/onest-400-symbols.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/onest-400-vietnamese.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;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/onest-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/onest-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/onest-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/onest-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/onest-500-math.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/onest-500-symbols.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/onest-500-vietnamese.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;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/onest-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/onest-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/onest-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/onest-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/onest-600-math.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/onest-600-symbols.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/onest-600-vietnamese.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;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/onest-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/onest-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/onest-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/onest-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/onest-700-math.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/onest-700-symbols.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/onest-700-vietnamese.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;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/onest-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/onest-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/onest-800-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/onest-800-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/onest-800-math.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/onest-800-symbols.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/onest-800-vietnamese.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;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/onest-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/onest-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Oranienbaum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/oranienbaum-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Oranienbaum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/oranienbaum-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Oranienbaum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/oranienbaum-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Oranienbaum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/oranienbaum-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --page:#ffffff;
  --card:#ffffff;
  --tile:#f5f5f3;
  --ink:#0e0e0e;
  --dim:#6f7075;
  --mute:#a9aaad;
  --line:#e9e9e6;
  --soft:#efefec;
  --dark:#111113;
  --accent:#5f4fd6;       /* индиго с логотипа: 5,4 на плитках, 5,9 под белым текстом */
  --accent-soft:#c96ccb;  /* пурпур с логотипа, для градиентов */
  --accent-lite:#a98cf0;  /* светлый индиго - для акцентов на темном фоне */
  --gold:#c9a86a;
  --r:26px;
  --sp:clamp(46px,6vw,86px);
  --shotH:clamp(360px,60svh,660px);
  --h1fs:clamp(34px,4.4vw,58px);
  --display:"Oranienbaum",Georgia,"Times New Roman",serif;
  /* заливка звездочек - тот же переход, что у объемных значков блока «для кого»:
     светлый лавандовый сверху слева, индиго снизу справа */
  --star-fill:linear-gradient(145deg,#cfc9f7 0%,#a98cf0 42%,#5f4fd6 100%);
  --star-fill-lite:linear-gradient(145deg,#ffffff 0%,#cfc9f7 42%,#a98cf0 100%);
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.5 6.5 5.5 11.5 12 12-6.5.5-11.5 5.5-12 12-.5-6.5-5.5-11.5-12-12C6.5 11.5 11.5 6.5 12 0Z'/%3E%3C/svg%3E");
  /* восьмая нота - значок капсулы на первом экране */
  --note:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='7.5' cy='17.8' rx='5' ry='3.8' transform='rotate(-18 7.5 17.8)'/%3E%3Crect x='11' y='2.6' width='2.2' height='15.6' rx='1.1'/%3E%3Cpath d='M13.2 2.6c3.9 1.1 6.6 3.3 6.6 6.3 0 1.8-.9 3.3-2.5 4.4.5-1.1.6-2.1.3-3-.5-1.9-2.2-3-4.4-3.6V2.6z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--dark);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1!important;transform:none!important}
}

.page{max-width:1240px;margin:0 auto;padding:clamp(12px,2.4vw,34px) clamp(12px,2.4vw,34px) 0}
.block{background:var(--card);border-radius:var(--r);margin-bottom:clamp(12px,1.6vw,20px);
  padding:var(--sp) clamp(20px,3vw,46px);position:relative;overflow:hidden}
.block.tight{padding-top:clamp(30px,3.4vw,46px);padding-bottom:clamp(30px,3.4vw,46px)}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:18px}
.eyebrow::before{content:"";width:13px;height:13px;background:var(--star-fill);flex:none;
  filter:drop-shadow(0 1px 1.5px rgba(95,79,214,.32));-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.h2{font-family:var(--display);font-size:clamp(29px,3.9vw,52px);line-height:1.03;letter-spacing:-.005em;font-weight:400}
/* На телефоне ручной перенос в заголовке рвет строку не там, где нужно,
   и последним словом остается «нами» или «нас». Убираем перенос и выравниваем
   длину строк - браузер ломает по смыслу сам. */
@media(max-width:719px){
  .h2{text-wrap:balance}
  .h2 br{display:none}
}
.lede{color:var(--dim);font-size:clamp(14.5px,1.15vw,16px);line-height:1.7;max-width:60ch;margin-top:18px}
/* Кнопка «подробнее» стоит не под блоком слева, а в шапке блока справа,
   на одной линии с описанием. На узких экранах уходит под текст шапки. */
.bhead{display:grid;gap:14px}
@media(min-width:900px){
  .bhead{grid-template-columns:minmax(0,1fr) auto;align-items:end;
    column-gap:clamp(20px,3vw,44px)}
  .bhead-b{justify-self:end;padding-bottom:3px}
}
.micro{font-size:11.5px;line-height:1.62;letter-spacing:.045em;text-transform:uppercase;font-weight:500}
.marks{display:flex;justify-content:space-between;color:var(--mute);font-size:15px;letter-spacing:.2em}

.btn{position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:10px;color:#fff;
  background:rgba(17,17,19,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font-size:14.5px;font-weight:600;padding:15px 24px;border-radius:999px;border:0;cursor:pointer;
  box-shadow:0 10px 30px -12px rgba(14,14,16,.6);
  transition:transform .2s ease,box-shadow .25s ease}
/* бегущий блик по краю: конический градиент под кнопкой, поверх - ее же фон с отступом в 1px */
.btn::before{content:"";position:absolute;left:-60%;top:-160%;width:220%;height:420%;z-index:-2;
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(255,255,255,.9) 76%,transparent 88%);
  animation:btnspin 5.5s linear infinite}
.btn::after{content:"";position:absolute;inset:1px;z-index:-1;border-radius:inherit;
  background:rgba(20,20,23,.94)}
@keyframes btnspin{to{transform:rotate(1turn)}}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 38px -14px rgba(14,14,16,.75)}
.btn .spark{font-style:normal;display:grid;place-items:center;width:26px;height:26px;flex:none;
  border-radius:50%;background:rgba(255,255,255,.14);font-size:12px;margin:-4px -8px -4px 2px}
.btn:hover .spark{background:rgba(255,255,255,.22)}
/* Светлые кнопки: та же механика, что у темных, только блик фирменный -
   индиго с пурпуром бежит по краю, а белая заливка с отступом в 1px
   оставляет от градиента тонкую обводку. */
.btn.light{background:#fff;color:var(--ink);border:0;box-shadow:none}
.btn.light:hover{box-shadow:none}
.btn.ghost::before{display:none}
.btn.light::before{background:conic-gradient(from 0deg,
  rgba(95,79,214,.14) 0 44%,var(--accent) 60%,var(--accent-soft) 70%,rgba(95,79,214,.14) 84%)}
.btn.light::after{background:#fff}
.btn.light:hover::after{background:var(--soft)}
.btn.ghost::after{background:transparent}

.count{display:flex;align-items:center;justify-content:space-between;gap:16px}
.count b{font-size:26px;font-weight:600;letter-spacing:-.02em}
.count b i{font-style:normal;font-size:15px;color:var(--dim)}
.arrows{display:flex;gap:14px;font-size:19px;color:var(--dim)}
.arrows button{background:none;border:0;color:inherit;cursor:pointer;padding:4px;line-height:1;
  transition:color .2s,transform .2s}
.arrows button:hover{color:var(--ink);transform:translateX(2px)}

.rv{opacity:0;transform:translateY(20px);transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
/* первый экран виден сразу: ждать скрипт для главного текста - потеря LCP */
.heroB .rv,.phero .rv{opacity:1;transform:none;transition:none}

/* ── плавающая шапка ── */
.topbar{position:fixed;left:50%;transform:translate(-50%,-160%);top:14px;z-index:80;
  isolation:isolate;overflow:hidden;
  display:flex;align-items:center;gap:4px;background:transparent;
  border:0;border-radius:999px;padding:5px;transition:transform .42s cubic-bezier(.2,.7,.3,1)}
/* обводка как у светлых кнопок: тот же бегущий блик под капсулой,
   поверх - ее фон с отступом в 1px, от градиента остается тонкий контур */
.topbar::before{content:"";position:absolute;left:-60%;top:-160%;width:220%;height:420%;z-index:-2;
  background:conic-gradient(from 0deg,
    rgba(95,79,214,.14) 0 44%,var(--accent) 60%,var(--accent-soft) 70%,rgba(95,79,214,.14) 84%);
  animation:btnspin 5.5s linear infinite}
.topbar::after{content:"";position:absolute;inset:1px;z-index:-1;border-radius:inherit;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.topbar.on{transform:translate(-50%,0)}
.topbar a{font-size:13px;font-weight:500;padding:10px 15px;border-radius:999px;white-space:nowrap;transition:background .2s}
.topbar a:hover{background:rgba(14,14,14,.13)}
/* пункт, ведущий на открытую страницу: та же черная плашка, что в шапке */
.topbar a.on{background:var(--dark);color:#fff;font-weight:600}
.topbar a.on:hover{background:var(--dark)}
.topbar a.cta{background:var(--dark);color:#fff;font-weight:600}
.topbar a.cta:hover{background:#2b2b30}
/* компактная кнопка возврата наверх */
.topbar a.up{width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:50%;
  background:var(--dark);color:#fff;font-size:15px;line-height:1;transition:background .2s,transform .2s}
.topbar a.up:hover{background:#2b2b30;transform:translateY(-2px)}
/* кнопка меню в плавающей шапке - только на узких экранах */
.topbar .tbmenu{display:none;width:44px;height:44px;border-radius:50%;padding:0;
  background:#fff;border:1px solid var(--line);cursor:pointer;
  align-items:center;justify-content:center;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.5)}
/* Правка заказчика 2026-09-01: меню переехало наверх направо, а стрелка
   «наверх» - вниз, на его место в липкой панели. Порог тот же, что у самой
   панели (940 px): ниже него плавающая шапка держит одну кнопку меню, все
   ссылки приходят из всплывающего списка, поэтому пункты здесь скрыты. */
@media(max-width:939px){
  .topbar{left:auto;right:12px;transform:translate(0,-160%);padding:0}
  .topbar.on{transform:none}
  .topbar::before,.topbar::after{display:none}
  /* .up повторен отдельно: у правила выше есть свой display:grid,
     и по весу селектора оно перебило бы общее .topbar a */
  .topbar a,.topbar a.up{display:none}
  .topbar .tbmenu{display:flex}
}

/* ══ ПЕРВЫЙ ЭКРАН ══ */
.hero{background:var(--card);border-radius:var(--r);overflow:hidden;position:relative;
  margin-bottom:clamp(12px,1.6vw,20px)}
.hero-grid{display:grid;grid-template-columns:1fr}
@media(min-width:1000px){.hero-grid{grid-template-columns:.86fr 1.14fr}}
.hero-left{padding:clamp(20px,2.6vw,34px);display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px)}
.nav{display:inline-flex;align-items:center;gap:4px;background:var(--soft);border-radius:999px;padding:5px;align-self:flex-start;flex-wrap:wrap}
.nav a{font-size:13.5px;font-weight:500;padding:11px 17px;border-radius:999px;white-space:nowrap;transition:background .2s,color .2s}
/* Отклик на курсор был rgba(0,0,0,.06) - на светло-сером поле капсулы это
   почти не читалось, заказчик сказал «плохо видно» (правка 2026-08-31).
   Тень вдвое плотнее: пункт под курсором видно, но до черной плашки
   выбранного пункта ему далеко, и два состояния не путаются. */
.nav a:hover{background:rgba(14,14,14,.13)}
/* .on - для внутренних страниц: на главной ничего не подсвечиваем */
.nav a.on{background:var(--dark);color:#fff;font-weight:600}
.nav a.on:hover{background:var(--dark)}

h1{font-family:var(--display);font-size:var(--h1fs);line-height:1.02;letter-spacing:-.005em;font-weight:400}
h1 .nb{white-space:nowrap}
h1 .w{display:inline-block;opacity:0;transform:translateY(.42em);animation:wrise .75s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes wrise{to{opacity:1;transform:none}}

.hdiv{display:flex;align-items:center;gap:16px}
.hdash{flex:1;min-width:24px;height:1px;
  background:repeating-linear-gradient(90deg,var(--mute) 0 5px,transparent 5px 12px);opacity:.75}
.hdiv .hero-btn{flex:none;align-self:auto}

.about{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;max-width:340px}
.hero-btn{align-self:flex-start}
.about .sq{width:14px;height:14px;background:var(--star-fill);margin-top:2px;flex:none;
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}

.picker{width:100%;max-width:430px;align-self:center}
@media(min-width:1000px){
  /* полка смещена вправо и заходит на снимок - как в референсе заказчика */
  .picker{position:absolute;z-index:6;left:23%;bottom:40px;width:min(590px,44%);max-width:none;
    background:var(--card);border-radius:22px;padding:14px 14px 16px}
  /* на широком экране помещаются все четыре направления, листать нечего */
  .cards3{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);grid-auto-columns:auto;
    overflow-x:visible;scroll-snap-type:none;gap:9px}
  #top .pnav{display:none}
  .hero-left{padding-bottom:26px}
  /* описание - узкой колонкой слева от полки, как в референсе */
  .hero-left .about{max-width:212px;margin-top:auto}
}
.cards3{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 20px)/3);gap:10px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cards3::-webkit-scrollbar{display:none}
.mini{scroll-snap-align:start}
/* счетчик и стрелки под полкой - как в референсе */
.pnav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}
.pcount{font-size:13px;color:var(--dim);letter-spacing:.02em}
.pcount b{font-family:var(--display);font-size:25px;font-weight:400;color:var(--ink);letter-spacing:-.01em}
.parr{display:flex;gap:16px}
.parr .dnav-b{width:auto;height:auto;border:0;background:none;font-size:19px;color:var(--dim);
  padding:2px 4px;border-radius:8px}
.parr .dnav-b:hover{color:var(--ink);background:rgba(0,0,0,.05)}
.allink{font-size:12.5px;font-weight:600;color:var(--dim);white-space:nowrap;transition:color .2s}
/* переход на внутреннюю страницу: тише основного призыва «записаться» */
.btn.light.more{font-size:13.5px;padding:13px 20px;background:var(--tile);border-color:transparent}
.btn.light.more::after{background:var(--tile)}
.btn.light.more:hover{background:var(--soft)}
.btn.light.more:hover::after{background:var(--soft)}
.btn.light.more .spark{background:rgba(0,0,0,.06);color:var(--dim)}
.allink:hover{color:var(--ink)}
.mini{position:relative;border-radius:16px;overflow:hidden;background:var(--soft);
  border:2px solid transparent;transition:border-color .25s;display:block}
.mini:hover,.mini.on{border-color:var(--gold)}
.mini .im{aspect-ratio:1/1;overflow:hidden;background:#e4e4df}
.mini .im img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.mini:hover .im img{transform:scale(1.08)}
/* подпись - маленькой кнопкой: капсула по ширине слова, снимок под ней виден */
.mini .cap{position:absolute;left:0;right:0;bottom:8px;width:max-content;max-width:calc(100% - 10px);
  margin:0 auto;background:#fff;border-radius:999px;
  text-align:center;font-size:11.5px;font-weight:600;padding:6px 15px;white-space:nowrap}
.mini .go{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:10px}
@media(min-width:1000px){
  .mini .cap{bottom:6px;font-size:11px;padding:5px 13px;letter-spacing:-.015em}
  .mini .go{width:20px;height:20px;top:6px;right:6px;font-size:9px}
}

.shot{position:relative;min-height:var(--shotH);border-radius:var(--r);overflow:hidden;background:#1a1614}
@media(max-width:999px){.shot{order:-1;border-radius:0}}
.shot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  transform:scale(1.04);
  animation:drift 26s ease-in-out infinite alternate}
/* слой с погасшей вывеской: наезжает вместе с кадром, проступает в момент сбоя */
.shot>img.neon{animation:drift 26s ease-in-out infinite alternate, neonoff 5s steps(1,end) infinite}
@keyframes drift{to{transform:scale(1.11) translateY(-1.6%)}}
.vlabel{position:absolute;left:14px;top:14px;background:#fff;border-radius:999px;padding:18px 9px;
  writing-mode:vertical-rl;font-size:10.5px;letter-spacing:.24em;font-weight:600;text-transform:uppercase;z-index:3}
.varrow{position:absolute;left:16px;top:132px;width:30px;height:30px;border-radius:50%;background:var(--dark);
  color:#fff;display:grid;place-items:center;font-size:13px;z-index:3;transition:transform .25s}
.varrow:hover{transform:translate(2px,-2px)}
.brandpill{position:absolute;right:14px;top:14px;display:flex;align-items:center;gap:10px;
  background:#fff;border-radius:999px;padding:6px 6px 6px 7px;z-index:3;max-width:calc(100% - 28px)}
.brandpill .blogo{width:38px;height:38px;object-fit:contain;flex:none}
.brandpill .nm{padding-right:14px;line-height:1.15;min-width:0}
.brandpill .nm b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.brandpill .nm span{display:block;font-size:10.5px;color:var(--dim);white-space:nowrap}

/* ══ ПЕРВЫЙ ЭКРАН - вариант 2: коллаж снимков ══════════════════════════
   Семь колонок одной ширины. Высота каждой задана пропорцией самой плитки,
   отступ сверху - процентом от ширины колонки, поэтому дуга живет в любом
   размере окна и ни одного числа в пикселях в ней нет.

   Текст стоит во второй строке под тремя средними колонками. Высоту первой
   строки задают только эти три плитки, а крайние четыре пущены через обе
   строки - поэтому они спускаются ниже верха текста сами, без подгонки.

   Прежний вариант - полка с плитками направлений - лежит целиком
   в variants/landing.hero-01.src.html, его стили ниже по файлу оставлены. */
.heroB{background:var(--card);border-radius:var(--r);position:relative;
  margin-bottom:clamp(12px,1.6vw,20px);
  padding:clamp(12px,1.4vw,18px) clamp(14px,1.8vw,26px) clamp(28px,3.2vw,44px)}

/* нижний отступ - это и есть воздух между меню и коллажем */
.h2bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:4px 2px clamp(46px,6.2vw,88px)}
/* Знак в шапке был вдвое меньше, чем кажется: в квадрате 38×38 сам логотип
   занимал около 27 px, остальное - пустые поля исходника. Поля срезаны
   (build/img/logo_tight.png), знак показан вдвое крупнее, подпись под
   названием переведена из светло-серого в читаемый серый. */
.h2brand{display:flex;align-items:center;gap:13px;flex:none}
.h2brand img{width:76px;height:auto}
/* Цвет названию задан явно: правило для подписи ниже метит любой span внутри
   .h2brand, в том числе обертку вокруг <b>, и название наследовало от нее серый. */
.h2brand b{display:block;font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.2;
  color:var(--ink)}
.h2brand>span>span{display:block;font-size:11px;color:#4b4c52;margin-top:3px}
.h2act{display:flex;align-items:center;gap:12px;flex:none}
.h2tel{font-size:14px;font-weight:600;white-space:nowrap;transition:color .2s}
.h2tel:hover{color:var(--dim)}
.h2act .btn{font-size:13.5px;padding:13px 20px}
/* бургер здесь свой: у .burger из первого варианта абсолютное положение на снимке */
.h2burger{display:none;width:44px;height:44px;border-radius:50%;background:var(--tile);border:0;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.h2burger span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px}

.collage{display:grid;grid-template-columns:repeat(8,1fr);--g:clamp(5px,1.75vw,23px);
  column-gap:var(--g);row-gap:calc(var(--g)*.35);align-items:start}
.ct{position:relative;display:block;border-radius:clamp(8px,1vw,15px);overflow:hidden;
  background:var(--tile);transition:transform .55s cubic-bezier(.2,1.1,.4,1)}
.ct img{width:100%;height:100%;object-fit:cover}
/* второй слой под обмен снимками: лежит поверх и проступает, чуть съезжая к месту.
   Слой создает скрипт, без него коллаж остается неподвижным. */
.ct img.alt{position:absolute;inset:0;opacity:0;transform:scale(1.07);
  transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.3,1)}
.ct img.alt.on{opacity:1;transform:none}
/* Столбики по краям идут через обе строки сетки и спускаются вдоль текста.
   Отступы сверху заданы процентом от ширины колонки - те же доли, что в
   референсе: 0,37 у первой и третьей пары колонок, 0,18 у вторых, 0 в середине. */
.cs{display:grid;gap:calc(var(--g)*.62);grid-row:1/span 2}
.cs-a{margin-top:36.8%}
.cs-b{margin-top:17.9%}
.cs-a .ct{aspect-ratio:1/1.42}
/* Правка заказчика 2026-09-24: крайние столбики опускаются ниже, как высокие
   плитки в середине. Только на широком экране: на планшете и телефоне у
   столбиков своя раскладка. */
@media(min-width:900px){.cs-a .ct{aspect-ratio:1/1.9}}
.cs-b .ct{aspect-ratio:1/1.03}
/* середина: по одной высокой плитке в колонке, высоту первой строки задают только они */
.ct-t{aspect-ratio:1/2.23;grid-row:1}
.ct-lo{margin-top:36.8%}
@media(hover:hover) and (pointer:fine){.ct:hover{transform:translateY(-7px)}}

.h2mid{grid-column:3/span 4;grid-row:2;align-self:start;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:15px;
  padding:clamp(18px,2.2vw,30px) 0 0}
.h2mid h1{font-size:clamp(27px,3.3vw,45px);line-height:1.06}
/* вторая строка заголовка ничем не отличается от первой: тот же шрифт,
   тот же цвет, без обводки - по правке заказчика */
.h2mid .lede{margin-top:0;font-size:14px;line-height:1.62;max-width:38ch}
/* Правка заказчика 2026-09-28: описание в две строки - по строке на
   предложение. Колонка текста уже 480px до ширины экрана 1100px, там и на
   телефоне первое предложение в строку не влезает - перенос обычный. */
@media(min-width:900px){.h2mid .lede{max-width:none}}
@media(min-width:1100px){.h2mid .lede{white-space:nowrap}}
@media(max-width:899px){.h2mid .lede .br2{display:none}}
/* Отступ от описания до кнопок больше на 70% по правке заказчика:
   было 19px (gap 15 + 4), стало 32,3px. */
.h2btns{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:17.3px}
.h2btns .btn{font-size:14px;padding:14px 22px}
/* Оффер над кнопкой записи (правка заказчика 2026-09-28): главное -
   бесплатный урок - отдельной строкой, под ним срок и число мест через точку. */
.offer{display:flex;flex-wrap:wrap;justify-content:center;gap:3px 0;margin-top:6px;
  font-size:13px;line-height:1.4;color:var(--dim)}
.offer b{flex-basis:100%;font-size:14.5px;font-weight:600;color:var(--accent)}
.offer span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:currentColor;opacity:.5;vertical-align:middle;margin:-2px 9px 0}
.offer+.h2btns{margin-top:0}

/* Планшет: восьми колонок не хватит ширины. Остаются четыре столбика - те же,
   что по краям на широком экране, с теми же пропорциями и ступенькой сверху.
   Уходят четыре высокие плитки середины: под них нужна отдельная колонка.
   Текст встает под коллажем во всю ширину, поэтому столбики держатся в первой
   строке, а не идут через обе. */
@media(max-width:899px){
  .collage{grid-template-columns:repeat(4,1fr);--g:clamp(11px,3.2vw,20px);
    row-gap:calc(var(--g)*.6)}
  /* снимки уходят под заголовок и кнопки: на телефоне сначала о чем речь,
     потом атмосфера. На широком экране порядок прежний - текст в дуге. */
  .cs{grid-row:2}
  .ct-t{display:none}
  .h2mid{grid-column:1/-1;grid-row:1;padding:0 0 clamp(20px,3.6vw,30px)}
  .h2bar .nav{display:none}
  .h2burger{display:flex}
  .h2act .btn.hide{display:none}
}
/* Телефон: три столбика и семь снимков - два крупных по краям, три помельче
   в середине. Размеры остаются разными, ровной сетки квадратов нет. */
@media(max-width:559px){
  .collage{grid-template-columns:repeat(3,1fr)}
  .cs-x{display:none}
  .h2brand>span>span{display:none}
  .h2brand img{width:56px}
  .h2brand b{font-size:16px}
  .h2tel{display:none}
}

/* ── счетчики ── */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
@media(min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--tile);border-radius:18px;padding:26px 20px;transition:transform .3s}
.stat:hover{transform:translateY(-5px)}
.stat b{display:block;font-family:var(--display);font-size:clamp(33px,4.4vw,50px);font-weight:400;letter-spacing:-.01em;line-height:1}
.stat span{display:block;margin-top:10px;font-size:12px;color:var(--dim);line-height:1.45}

/* ── тарифы: бенто-сетка по референсу ── */
/* телефон: крупные карточки во всю ширину, две мелкие - парой в один ряд */
.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:32px}
.b-main,.b-wide{grid-column:1 / -1}
@media(min-width:760px){.b-main,.b-wide{grid-column:auto}}
/* широкий экран: прежняя раскладка - пробное занятие во всю высоту слева,
   абонементы широкой карточкой сверху, две мелкие под ней вторым рядом */
@media(min-width:1040px){
  /* колонки равные: при 1,2fr слева карточка была заметно шире правых,
     и правая пара выглядела сжатой */
  .bento{grid-template-columns:repeat(3,1fr)}
  .b-main{grid-row:1 / span 2}
  .b-wide{grid-column:2 / span 2}
}
.b-card{background:var(--tile);border-radius:22px;padding:24px}
.b-main{position:relative;overflow:hidden;background:var(--dark);color:#fff;padding:28px;
  display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:230px}
.b-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;z-index:0}
.b-bg.neon{animation:neonoff 9s steps(1,end) infinite}
/* неон изредка сбоит: почти все время ровный свет, пара срывов за цикл.
   Гасим только трубки и ореол - сам кадр остается неподвижным */
@keyframes neonoff{
  0%,54%{opacity:0}
  55%{opacity:.94}
  56%{opacity:.1}
  57%{opacity:.72}
  58%,86%{opacity:0}
  87%{opacity:.9}
  88%{opacity:.12}
  89%{opacity:.62}
  90%,100%{opacity:0}
}
/* затемнение снизу: белая цифра и текст лежат поверх неона */
.b-main::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,12,.42) 0%,rgba(10,10,12,.72) 55%,rgba(10,10,12,.9) 100%)}
.b-main>*:not(.b-bg){position:relative;z-index:2}
.b-tag{align-self:flex-start;background:rgba(255,255,255,.13);border-radius:999px;padding:7px 13px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.b-num{font-family:var(--display);font-size:clamp(46px,6vw,76px);line-height:1;letter-spacing:-.02em}
.b-main p:not(.b-num){margin-top:14px;font-size:13px;line-height:1.55;color:rgba(255,255,255,.75);max-width:36ch}
.b-wide{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px}
/* тонкая диагональная штриховка из правого верхнего угла, тает к середине */
.b-wide::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(118deg,rgba(14,14,16,.11) 0 1px,transparent 1px 9px);
  -webkit-mask:linear-gradient(230deg,#000 0%,rgba(0,0,0,.55) 38%,transparent 68%);
  mask:linear-gradient(230deg,#000 0%,rgba(0,0,0,.55) 38%,transparent 68%)}
.b-wide>*{position:relative;z-index:1}
.b-lbl{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.b-val{font-family:var(--display);font-size:clamp(25px,3vw,36px);line-height:1.05;margin-top:9px;letter-spacing:-.01em}
.b-sub{margin-top:9px;font-size:12.5px;line-height:1.5;color:var(--dim);max-width:40ch}

/* ── тарифная сетка (созвон с руководителем 2026-09-21) ──
   Сайт работает на холодный трафик из Директа: человек должен увидеть цены
   до записи, а продажа и скидка остаются за менеджером в клубе. Поэтому
   в сетке цены без скидки, а пробный урок стоит карточкой сбоку, а не
   главным числом блока. Слева темная карточка первого занятия (прежняя
   .b-main с неоном), справа три основных абонемента и строка остальных. */
.prgrid{display:grid;gap:12px;margin-top:32px}
/* grid-row сброшен: правило бенто выше растягивает .b-main на две строки
   с 1040px, и в этой сетке под карточкой появлялась пустая строка */
.prgrid .b-main{grid-column:auto;grid-row:auto;min-height:0}
.prgrid .b-main .b-num{font-size:clamp(34px,4vw,50px)}
@media(min-width:1000px){.prgrid{grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr);align-items:stretch}}
.tplans{display:grid;gap:12px;align-content:start}
.tpl3{display:grid;gap:12px}
@media(min-width:620px){.tpl3{grid-template-columns:repeat(3,1fr)}}
.tplan{position:relative;background:var(--tile);border-radius:22px;padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:6px;transition:transform .3s}
.tplan:hover{transform:translateY(-4px)}
.tp-h{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px;margin-bottom:4px}
.tp-n{font-size:15px;font-weight:600;letter-spacing:-.01em}
.tp-price{font-family:var(--display);font-size:clamp(26px,2.5vw,34px);line-height:1.05;letter-spacing:-.01em;margin-top:6px;white-space:nowrap}
.tp-per{font-size:13px;color:var(--dim)}
.tp-per b{color:var(--ink);font-weight:600}
/* самый крупный из трех - с самым дешевым уроком: обводка фирменным цветом */
.tplan.best{background:#fff;box-shadow:inset 0 0 0 1.5px var(--accent)}
.tp-flag{font-size:10.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  color:#fff;background:var(--accent);border-radius:999px;padding:4px 10px}
/* телефон: карточка абонемента строкой - название слева, цена справа */
@media(max-width:619px){
  .tplan{display:grid;grid-template-columns:1fr auto;column-gap:14px;row-gap:2px;align-items:baseline}
  .tp-h{grid-column:1/-1}
  .tp-price{grid-column:2;grid-row:2 / span 2;margin-top:0;align-self:center}
}
.tmore{background:var(--tile);border-radius:22px;padding:18px 22px;display:flex;flex-wrap:wrap;
  gap:8px 22px;align-items:baseline;font-size:13.5px}
.tmore .b-lbl{flex-basis:100%}
.tmore span{white-space:nowrap}
.tmore b{font-weight:600}
/* скидка относится ко всей сетке, поэтому отдельной строкой под ней,
   а не внутри «Других абонементов» (правка 2026-09-24) */
/* скидка - главный оффер блока цен, яркая карточка (правка 2026-09-29) */
.tdisc{border-radius:22px;padding:22px 24px;display:grid;gap:14px 22px;align-items:center;
  background:linear-gradient(120deg,#5f4fd6,#8a5ce6 60%,#c26ad8);color:#fff;
  box-shadow:0 14px 36px -14px rgba(95,79,214,.65)}
.td-num{font-size:clamp(46px,6vw,64px);font-weight:600;line-height:.9;letter-spacing:-.03em}
.td-h{font-size:18px;font-weight:600;line-height:1.3;margin-bottom:4px}
.td-txt p:last-child{font-size:14px;line-height:1.5;opacity:.9}
.tdisc .td-btn{justify-self:start}
@media(max-width:719px){.tdisc .td-btn{justify-self:stretch;justify-content:center}}
@media(min-width:720px){.tdisc{grid-template-columns:auto 1fr auto}}
.tnote{margin-top:16px;font-size:12.5px;line-height:1.6;color:var(--dim);max-width:92ch}

/* ── подарочный сертификат ──
   Отдельного трафика на сертификаты не будет, блок просто есть на странице
   для тех, кто ищет подарок. Справа - сам сертификат, нарисованный стилями. */
.gift{display:grid;gap:clamp(20px,3vw,40px);align-items:center}
@media(min-width:900px){.gift{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}}
.gift-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.gift-list li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:14.5px;line-height:1.55}
.gift-list li::before{content:"";width:11px;height:11px;margin-top:.45em;background:var(--star-fill);
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.gift-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.gcard{position:relative;overflow:hidden;border-radius:24px;aspect-ratio:1.62/1;color:#fff;
  padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;justify-content:space-between;
  background:
    radial-gradient(90% 70% at 85% 10%,rgba(201,108,203,.55) 0%,rgba(201,108,203,0) 60%),
    radial-gradient(110% 80% at 15% 100%,rgba(95,79,214,.9) 0%,rgba(95,79,214,0) 65%),
    linear-gradient(135deg,#17142c 0%,#221c46 55%,#141227 100%);
  box-shadow:0 30px 60px -30px rgba(40,30,110,.7);transform:rotate(-2.5deg);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.gcard:hover{transform:rotate(0)}
/* Звезда на сертификате (правка 2026-09-24: «интереснее, фактурнее»).
   Вместо плоской белой звезды - как на ценной бумаге: в центре звезда
   с переливом фольги, вокруг нее гравировка из тонких концентрических
   контуров, поверх всей карточки легкое зерно. Перелив медленно плывет по
   оттенку, на наведении звезда чуть проворачивается. При уменьшенной
   анимации все стоит на месте - это закрывает общее правило в начале. */
.gcard::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.22;
  mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.gc-star{position:absolute;right:-6%;bottom:-22%;width:50%;aspect-ratio:1;z-index:0;
  pointer-events:none;overflow:visible;transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.gcard:hover .gc-star{transform:rotate(12deg) scale(1.03)}
.gc-star .rings use{fill:none;stroke:rgba(255,255,255,.2)}
.gc-star .rings use:nth-child(3n){stroke:rgba(207,201,247,.34)}
.gc-star .foil{animation:gcfoil 9s ease-in-out infinite alternate}
@keyframes gcfoil{to{filter:hue-rotate(-38deg) brightness(1.08)}}
.gc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1}
.gc-top img{width:54px;height:auto;filter:brightness(0) invert(1)}
.gc-top span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.gc-mid{position:relative;z-index:1}
.gc-mid b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,42px);line-height:1.02}
.gc-mid span{display:block;margin-top:8px;font-size:12.5px;color:rgba(255,255,255,.75)}
/* адрес под названием клуба слева, а не справа поверх звезды (правка 2026-09-24) */
.gc-bot{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  font-size:11.5px;color:rgba(255,255,255,.7);border-top:1px dashed rgba(255,255,255,.3);padding-top:12px}
.b-ico{width:34px;height:34px;flex:none;background:var(--star-fill);
  filter:drop-shadow(0 2px 3px rgba(95,79,214,.35));
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}

/* ── направления ── */
/* Кнопки свисают с нижнего края снимков и съедают нижнее поле секции, поэтому
   до следующего блока оставалось меньше воздуха, чем между остальными. Добавлен
   запас именно этой секции - общие отступы блоков не тронуты. */
#dirs{padding-bottom:calc(var(--sp) + 34px)}
.dirgrid{display:grid;grid-template-columns:1fr;gap:34px 14px;margin-top:42px;align-items:start}
@media(min-width:560px){.dirgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.dirgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1140px){.dirgrid{grid-template-columns:repeat(4,1fr)}}
.dnav{display:none}
.dnav-b{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--tile);
  color:var(--ink);font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:opacity .2s,background .2s,transform .2s}
.dnav-b:active{transform:scale(.94)}
.dnav-b.off{opacity:.35;pointer-events:none}
@media(max-width:559px){
  .dnav{display:flex;gap:12px;justify-content:flex-end;margin-top:4px}
  .dirgrid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:80%;
    /* та же ловушка, что у ленты педагогов: кнопка свисает на 19px и ее тень
       уходит ниже еще примерно на 34 - при 30px лента срезала бы тень */
    overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 0 56px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .dirgrid::-webkit-scrollbar{display:none}
  .dcard{scroll-snap-align:start}
  .dcard-in{aspect-ratio:4/5}
}
.dcard{position:relative}
.dphoto{position:relative}
/* состав педагогов под карточкой направления (правка заказчика 2026-10-01):
   отступ сверху перекрывает кнопку, которая свисает со снимка на 19px */
.dtea{margin:34px 4px 0;font-size:13.5px;line-height:1.5;color:var(--ink)}
.dtea em{display:block;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#7c7d84;margin-bottom:3px}
.ddesc{margin:11px 0 0;font-size:clamp(12.5px,1.05vw,14px);line-height:1.5;color:var(--ink)}
.dcard-in{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:3/4;background:#f0f0ee}
.dcard-in img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.3,1)}
.dcard:hover .dcard-in img{transform:scale(1.05)}
.dtop{position:absolute;left:15px;right:15px;top:14px;display:flex;align-items:center;
  justify-content:space-between;gap:8px;z-index:2}
.dnum{font-size:12px;color:var(--ink);letter-spacing:.03em}
.dtext{position:absolute;left:15px;top:46px;z-index:2;max-width:60%}
.dttl{font-family:var(--display);font-size:clamp(21px,2vw,29px);font-weight:400;letter-spacing:-.005em;line-height:1.1;color:var(--ink)}
.dttl span{display:block}

/* Кнопка внутри карточки: белая капсула с темным кружком-стрелкой.
   У направлений она свисает с нижнего края снимка, у педагогов стоит в потоке
   под данными - оформление у обеих общее, поэтому и правила общие. */
.dcta,.pcta{position:relative;isolation:isolate;overflow:hidden;z-index:4;
  display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border-radius:999px;
  padding:9px 12px 9px 9px;font-size:11.5px;font-weight:600;letter-spacing:-.015em;
  box-shadow:0 12px 28px -14px rgba(0,0,0,.55);transition:transform .25s ease,box-shadow .25s ease}
.dcta{position:absolute;left:12px;right:12px;bottom:-19px}
/* Как у направлений: половина кнопки лежит на карточке, половина - снаружи.
   z-index выше подсветки .hx, иначе пятно света легло бы на верхнюю половину. */
.pcta{position:absolute;left:14px;right:14px;bottom:-19px;z-index:6}
/* Обводка как у светлой кнопки первого экрана: фирменный блик бежит по краю,
   а белая заливка с отступом в 1px оставляет от градиента тонкий контур. */
.dcta::before,.pcta::before{content:"";position:absolute;left:-60%;top:-160%;
  width:220%;height:420%;z-index:-2;
  background:conic-gradient(from 0deg,
    rgba(95,79,214,.14) 0 44%,var(--accent) 60%,var(--accent-soft) 70%,rgba(95,79,214,.14) 84%);
  animation:btnspin 5.5s linear infinite}
.dcta::after,.pcta::after{content:"";position:absolute;inset:1px;z-index:-1;
  border-radius:inherit;background:#fff}
.dcta i,.pcta i{width:25px;height:25px;border-radius:50%;background:var(--dark);color:#fff;flex:none;
  display:grid;place-items:center;font-style:normal;font-size:11px;transition:transform .25s ease}
.dcard:hover .dcta,.pcard:hover .pcta{transform:translateY(-3px);
  box-shadow:0 16px 32px -14px rgba(0,0,0,.6)}
/* Отклик у самой кнопки. Подъем по наведению на карточку был и раньше, но он
   срабатывает, едва курсор коснулся карточки, и переход на кнопку ничем не
   отзывался. Теперь кнопка отвечает на себе: поднимается заметнее, заливка
   уходит в тон темнее - как у светлых кнопок на странице, - а стрелка
   подается вверх-вправо, в сторону перехода. */
.dcta:hover,.pcta:hover{transform:translateY(-5px);
  box-shadow:0 20px 38px -14px rgba(20,16,54,.55)}
.dcta:hover::after,.pcta:hover::after{background:var(--soft)}
.dcta:hover i,.pcta:hover i{transform:translate(1.5px,-1.5px)}

/* ── франшиза: снимок фоном, слева затемнение под белый текст ── */
#fr{position:relative;overflow:hidden;background:var(--dark);color:#fff}
.fr-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 55%;z-index:0}
#fr::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#0d0d0f 0%,rgba(11,11,13,.93) 32%,rgba(10,10,12,.8) 62%,rgba(10,10,12,.72) 100%)}
#fr>.fr{position:relative;z-index:2}
.fr{display:grid;gap:30px}
@media(min-width:960px){
  .fr{grid-template-columns:minmax(0,50%) minmax(0,44%);gap:clamp(28px,4vw,58px);align-items:center}
  .fr-acc{margin-top:0}
}
#fr .eyebrow{color:rgba(255,255,255,.78)}
#fr .h2{color:#fff}
#fr .lede{color:rgba(255,255,255,.86)}
.fr-num{font-family:var(--display);font-size:clamp(56px,9.5vw,118px);font-weight:400;letter-spacing:-.02em;line-height:.9}
.fr-num em{font-style:normal;color:var(--accent-lite)}
/* раскрывающиеся пункты франшизы: коротко в заголовке, подробно внутри */
.fr-acc{display:grid;gap:10px;margin-top:26px}
.fr-acc details{background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);border-radius:16px;transition:background .22s}
.fr-acc details[open]{background:rgba(255,255,255,.14)}
.fr-acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;
  gap:14px;align-items:center;padding:16px 18px;font-size:15.5px;font-weight:600;color:#fff}
.fr-acc summary::-webkit-details-marker{display:none}
.fr-acc summary em{font-style:normal;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.55)}
.fr-acc summary::after{content:"+";font-size:21px;font-weight:400;line-height:1;
  color:rgba(255,255,255,.6);transition:transform .3s}
.fr-acc details[open] summary::after{transform:rotate(45deg)}
.fr-acc .ans{padding:0 18px 18px;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.85);max-width:52ch}

.fr-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px}
.fr-list li{display:grid;grid-template-columns:auto 1fr;gap:14px;
  background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);border-radius:16px;color:#fff;
  padding:18px;font-size:14.5px;line-height:1.55;transition:transform .28s}
.fr-list li:hover{transform:translateX(6px)}
.fr-list em{font-style:normal;color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.1em;padding-top:3px}

/* ── второе касание франшизы: панель по референсу заказчика ──
   Заголовок слева, каждая строка подчеркнута; текст и пункты справа.
   Фон блока - тот же #f0f0ee, что лежит под снимками в карточках направлений.

   Прежняя верстка была сломана: пункты брали стили .fr-list от темного блока
   франшизы выше - белый текст на полупрозрачном белом. На белом блоке они
   не читались вовсе, на их месте была пустота. */
#fr2{background:var(--dark);color:#fff}
.fr2-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;z-index:0}
/* затемнение сильнее слева, где стоит крупный заголовок, и мягче справа,
   чтобы клавиши на снимке остались видны */
#fr2::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(11,10,14,.9) 0%,rgba(11,10,14,.76) 44%,rgba(11,10,14,.55) 100%)}
#fr2>.fr2{position:relative;z-index:2}
#fr2 .eyebrow{color:rgba(255,255,255,.78)}
#fr2 .eyebrow::before{background:var(--star-fill-lite)}
.fr2{display:grid;gap:clamp(20px,3vw,46px)}
@media(min-width:900px){
  .fr2{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:start;row-gap:0}
  /* надзаголовок занимает свою строку, поэтому пункты справа начинаются
     ровно от верха заголовка, а не от верха всего блока */
  .fr2-e{grid-column:1;grid-row:1}
  .fr2-l{grid-column:1;grid-row:2}
  .fr2-r{grid-column:2;grid-row:2}
}
.fr2-h{font-family:var(--display);font-weight:400;font-size:clamp(29px,3.8vw,50px);
  line-height:1.16;letter-spacing:-.005em;color:#fff;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.19em;
  text-decoration-color:rgba(255,255,255,.38)}
.fr2-lede{margin-top:20px;font-size:clamp(14.5px,1.15vw,16px);line-height:1.7;
  color:rgba(255,255,255,.86);max-width:52ch}
.fr2-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.fr2-list li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:16px 18px;color:#fff;
  font-size:14.5px;line-height:1.55;transition:transform .28s,background .22s}
.fr2-list li:hover{background:rgba(255,255,255,.15)}
.fr2-list li::before{content:"";width:10px;height:10px;margin-top:.42em;flex:none;background:var(--star-fill-lite);
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.fr2-list li:hover{transform:translateX(6px)}

/* ── пространство: мозаика по референсу заказчика ── */
/* шапка блока выровнена влево - как у всех остальных блоков страницы */
.mid{max-width:640px}
.mid .lede{max-width:52ch}
.mid .pill{margin-bottom:20px}

/* ── пространство: редакционная сетка по референсу заказчика 54083a8d ──
   Три колонки. Слева заголовок с кнопкой и снимком, в середине снимок и темная
   панель с крупным номером, справа лента снимков со стрелками и второй снимок.
   По краям вертикальные подписи. На телефоне все складывается в один столбец. */
.sp3{display:grid;gap:12px;margin-top:32px}
.sp-col{display:grid;gap:12px;align-content:start;min-width:0}
.sp-l-in{padding:clamp(4px,1vw,14px) clamp(2px,1vw,10px) clamp(8px,1.2vw,16px)}
.sp-l-in .lede{max-width:34ch}
/* кнопка из референса: контур капсулой, стрелка в кружке слева */
.sp-more{display:inline-flex;align-items:center;gap:11px;margin-top:24px;
  border:1px solid var(--line);border-radius:999px;padding:7px 20px 7px 7px;
  font-size:13.5px;font-weight:600;transition:border-color .2s,transform .2s}
.sp-more i{width:30px;height:30px;border-radius:50%;background:var(--tile);color:var(--ink);
  display:grid;place-items:center;font-style:normal;font-size:12px}
.sp-more:hover{border-color:var(--accent);transform:translateY(-2px)}
/* снимок с подписью поверх */
.sp-card{position:relative;display:block;border-radius:22px;overflow:hidden;background:var(--tile);
  aspect-ratio:4/3;min-height:165px}
.sp-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.sp-card:hover img{transform:scale(1.05)}
.sp-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,12,0) 42%,rgba(10,10,12,.8) 100%)}
.sp-tall{aspect-ratio:3/4}
.sp-cap{position:absolute;left:18px;right:16px;bottom:16px;z-index:2;color:#fff}
.sp-cap b{display:block;font-family:var(--display);font-size:clamp(19px,1.9vw,25px);font-weight:400;
  letter-spacing:-.01em;line-height:1.1}
.sp-cap span{display:block;margin-top:5px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.82)}
.sp-play{position:absolute;left:16px;top:16px;z-index:3;width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;font-size:11px}
/* темная панель с крупным номером - как черный блок в середине референса */
/* Тот же фон, что у карточки «Первое занятие бесплатное» в блоке про возраст:
   фиолетовое свечение сверху по центру поверх темной вертикальной подложки. */
.sp-dark{position:relative;color:#fff;border-radius:22px;overflow:hidden;
  background:
    radial-gradient(115% 52% at 50% 24%,rgba(186,160,250,.95) 0%,rgba(95,79,214,.72) 44%,rgba(20,18,40,0) 74%),
    linear-gradient(180deg,#17142c 0%,#1b1836 42%,#141227 100%);
  padding:clamp(20px,2.2vw,28px);padding-bottom:clamp(72px,6.5vw,82px);
  display:grid;gap:11px;align-content:start;
  min-height:clamp(230px,25vw,320px)}
/* текст стал светлее: под ним теперь не черная плашка, а фиолетовое свечение */
.sp-dark h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.88);font-weight:600}
.sp-dark p{font-size:13px;line-height:1.62;color:rgba(255,255,255,.94);max-width:34ch}
/* Низ панели: строка про аренду. Место занимали по очереди декоративные
   цифры из референса, полка значков и капсулы с названиями - заказчик
   забраковал все три (2026-09-01). Перечисление инструментов вернулось в
   текст, а низ отдан строке про аренду инструмента домой.
   2026-09-23: аренды у школы нет (ответы от 2026-09-22). Оформление то же,
   строка теперь говорит, что на первый урок ничего брать не нужно, и ведет
   к блоку «Как пройдет первый урок».
   Место под строку держит padding-bottom панели, иначе текст на неe ляжет. */
.sp-rent{position:absolute;left:clamp(18px,2.2vw,28px);right:clamp(18px,2.2vw,28px);
  bottom:clamp(16px,1.8vw,24px);display:flex;align-items:center;gap:11px;
  justify-content:space-between;padding:13px 15px;border-radius:14px;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.16);
  font-size:12px;line-height:1.4;color:rgba(255,255,255,.92);
  transition:background .2s,border-color .2s,transform .2s}
.sp-rent i{font-style:normal;font-size:12px;color:#cfc9f7}
.sp-rent:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.3);
  transform:translateY(-2px)}
/* лента снимков со стрелками в углу */
.spx-wrap{position:relative}
.spx{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.spx::-webkit-scrollbar{display:none}
.spx .sp-card{scroll-snap-align:start}
/* место под стрелки в углу, иначе подпись уходит под них */
.spx .sp-cap{right:92px}
.spxnav{position:absolute;right:15px;bottom:16px;z-index:4;display:flex;gap:8px}
.spxnav .dnav-b{width:31px;height:31px;font-size:12px;background:rgba(255,255,255,.94);
  border-color:transparent;color:var(--ink)}
/* строка в углу - на месте меню из референса: адрес и часы работы */
.sp-menu{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,1.5vw,20px);
  padding:4px 2px 2px;font-size:13px;color:var(--dim)}
.sp-menu i{font-style:normal;margin-left:auto;color:var(--accent);font-size:16px;line-height:1}
@media(min-width:1000px){
  .sp3{grid-template-columns:minmax(0,1.24fr) minmax(0,.94fr) minmax(0,1fr);gap:14px;
    align-items:stretch}
  /* вертикальные подписи по краям убраны по правке заказчика - вместе с ними
     ушли и колонки, которые были заведены под них */
  /* Все три колонки одной высоты, а нижний элемент каждой добирает остаток:
     иначе средняя колонка кончалась выше соседних и внизу зияла дыра. */
  .sp-l,.sp-r,.sp-l>.sp-col,.sp-r>.sp-col,.sp-m{align-content:stretch}
  .sp-l>.sp-col{grid-template-rows:auto minmax(0,1fr)}
  .sp-m{grid-template-rows:auto minmax(0,1fr)}
  .sp-r>.sp-col{grid-template-rows:minmax(0,1fr) auto}
  /* лента заняла место убранной строки: карточки тянутся по высоте ряда,
     а не держат свои 3:4 */
  .sp-r .spx{height:100%}
  .sp-r .spx .sp-card{aspect-ratio:auto;height:100%}
  .sp-grow{aspect-ratio:auto;height:100%;min-height:190px}
}

/* чипы: на лендинге не используются, на странице обучения - стили внутри направления */
.perks{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.perk{font-size:13px;padding:10px 16px;border-radius:999px;background:var(--tile);color:var(--dim);
  transition:color .2s,transform .2s}
.perk:hover{color:var(--ink);transform:translateY(-2px)}

/* ── видео ── */
.vids{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;margin-top:34px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vids::-webkit-scrollbar{display:none}
.vid{position:relative;display:block;border-radius:26px;overflow:hidden;background:var(--soft);
  aspect-ratio:4/5;scroll-snap-align:start}
/* лента только на телефоне: с планшета - обычная сетка, все ролики видны сразу */
@media(min-width:620px){
  .vids{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,1fr);
    overflow-x:visible;scroll-snap-type:none}
  /* селектор с #concerts: ниже по файлу .tnav,.vnav задают display:flex */
  #concerts .vnav{display:none}
}
@media(min-width:1020px){.vids{grid-template-columns:repeat(4,1fr)}}
.vid img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.vid:hover img{transform:scale(1.06)}
.vid::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,12,.3) 0%,rgba(10,10,12,0) 32%,rgba(10,10,12,.5) 68%,rgba(10,10,12,.82) 100%)}
.vplay{position:absolute;top:14px;right:14px;z-index:3;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:12px;color:var(--ink);
  padding-left:2px;transition:transform .25s ease,background .25s ease}
.vid:hover .vplay{transform:scale(1.09);background:#fff}
.vtext{position:absolute;left:17px;right:17px;bottom:17px;z-index:3;color:#fff}
.vcat{display:block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.vttl{display:block;margin-top:6px;font-family:var(--display);font-size:clamp(19px,1.7vw,24px);font-weight:400;letter-spacing:0;line-height:1.12}
/* Ролик играет прямо в карточке: по клику обложка меняется на плеер YouTube.
   Ссылка на YouTube остается настоящей - без скрипта и по средней кнопке мыши
   она работает как раньше. .vnote - подпись на случай, когда плеер не открылся:
   в макете внешние кадры заблокированы, на сайте этого не будет. */
.vid.play{background:#000}
.vid.play::after,.vid.play .vplay,.vid.play .vtext{display:none}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}
/* ── видео школы (2026-09-24): фрагменты отчетного концерта, промо, видеоотзыв ──
   Ролики лежат рядом со страницей (v/*.mp4) и играют в окне поверх страницы.
   В концертах девять роликов: с 1020px сетка в три колонки, кадр 4:3. */
@media(min-width:1020px){.vids9{grid-template-columns:repeat(3,1fr)}}
@media(min-width:620px){.vids9 .vid{aspect-ratio:4/3}}
.sp-card video.sp-vbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* в ленте отзывов карточка с видео: селектор двойной, иначе поля .tcard ниже по
   файлу перебивают; высота задана явно - в ленте с max-height карточка
   с overflow:hidden иначе сжимается до полоски */
.tcard.tcv{padding:0;overflow:hidden;position:relative;background:#111;min-height:clamp(240px,26vw,330px)}
.tcv-in{position:absolute;inset:0;display:block;color:#fff}
.tcv-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.tcv-in:hover img{transform:scale(1.05)}
.tcv-in::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,12,.2) 0%,rgba(10,10,12,0) 35%,rgba(10,10,12,.82) 100%)}
.vwide{aspect-ratio:16/9;margin-top:clamp(24px,3vw,36px)}
@media(min-width:900px){.vwide{aspect-ratio:21/9}}
.vwide .vttl{font-size:clamp(22px,2.4vw,32px)}
.vmodal{position:fixed;inset:0;z-index:200;background:rgba(8,8,10,.9);display:grid;place-items:center;
  padding:clamp(12px,3vw,40px);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vmodal video{max-width:min(1200px,100%);max-height:calc(100svh - 110px);width:auto;height:auto;border-radius:16px;background:#000}
.vmodal .vm-x{position:absolute;top:14px;right:14px;width:46px;height:46px;border-radius:50%;border:0;
  background:#fff;color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
.vnote{position:absolute;left:14px;right:14px;bottom:14px;z-index:5;
  border-radius:16px;padding:11px 14px;background:rgba(10,10,12,.82);color:#fff;
  font-size:12.5px;line-height:1.4;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ── для кого: список и карточка по референсу заказчика ──
   Слева строки со «стеклянными» значками, справа высокая карточка
   с подсветкой сверху и полем-капсулой внизу. */
.whogrid{display:grid;gap:clamp(18px,2.4vw,34px);margin-top:36px}
@media(min-width:1000px){.whogrid{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);align-items:stretch}}
.wlist{display:grid;gap:clamp(28px,3.4vw,40px);align-content:space-between}
.witem{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,26px);align-items:start}
.wi{width:clamp(74px,7.4vw,98px);aspect-ratio:1;flex:none;border-radius:26%;
  background:linear-gradient(155deg,#f2f2fc 0%,#e9e9f8 48%,#f8f8fc 100%);
  display:grid;place-items:center;
  box-shadow:inset 0 2px 6px rgba(255,255,255,.9),inset 0 -6px 14px rgba(95,79,214,.09),
    0 14px 30px -20px rgba(40,30,110,.5)}
.wi svg{width:56%;height:56%}
.wtx h3{font-size:clamp(17px,1.5vw,20px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.wtx p{margin-top:9px;font-size:13.5px;line-height:1.6;color:var(--dim);max-width:46ch;text-wrap:balance}
.wmeta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:13px;
  font-size:11.5px;color:var(--dim);letter-spacing:.03em}
.wmeta b{font-weight:600;color:var(--accent)}
.wmeta i{width:1px;height:11px;background:var(--line);font-style:normal}

.wcard{position:relative;overflow:hidden;border-radius:26px;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(330px,40vw,480px);padding:clamp(24px,2.6vw,34px);
  background:
    radial-gradient(115% 52% at 50% 24%,rgba(186,160,250,.95) 0%,rgba(95,79,214,.72) 44%,rgba(20,18,40,0) 74%),
    linear-gradient(180deg,#17142c 0%,#1b1836 42%,#141227 100%)}
.wc-lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.wc-h{margin-top:12px;font-family:var(--display);font-weight:400;
  font-size:clamp(26px,2.9vw,38px);line-height:1.08;letter-spacing:-.005em}
.wc-p{margin-top:13px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.75);max-width:34ch}
/* Правка заказчика 2026-09-07: вместо одного поля с телефоном в карточке
   стоит полная заявка. Оформление берется у заявки в подвале (.ffm) - она уже
   рассчитана на темный фон, поэтому своих стилей у формы здесь нет и разойтись
   с подвалом ей не с чего. */
.wcard .ffm{margin-top:22px;max-width:none}
/* якорь #form: карточка не уезжает под плавающую шапку */
.wcard{scroll-margin-top:88px}
/* С 1000px карточка становится узкой колонкой рядом со списком, и имя с
   телефоном в строку встали бы по 200px. Держим их в столбик. */
@media(min-width:1000px){.wcard .ffm-row{grid-template-columns:minmax(0,1fr)}}
@media(max-width:519px){
  .witem{grid-template-columns:1fr;gap:12px}
  .wi{width:66px}
}

/* ── шаги первого урока: дорожка со сменой сторон (референс заказчика) ──
   Три колонки: левая половина, линия, правая половина. Нечетные шаги ставят
   значок с номером слева и текст справа, четные - наоборот. Порядок внутри
   пары задается order, чтобы номер всегда стоял ближе к линии. */
/* дорожка уже блока и стоит по центру: в референсе она занимает около трех
   четвертей карточки, во всю ширину половины строк остаются пустыми */
.road{--ric:clamp(44px,4.6vw,54px);max-width:940px;
  list-style:none;margin:38px auto 0;padding:0;position:relative}
.road::before{content:"";position:absolute;left:50%;top:12px;bottom:12px;width:1px;
  margin-left:-.5px;background:var(--line)}
/* По линии сверху вниз бежит светящийся отрезок и начинает заново.
   Двигаем не сам блок, а положение картинки внутри него: доли считаются
   от высоты дорожки, поэтому ход одинаков и на широком экране, и на телефоне,
   где линия короче. Ни одного числа в пикселях - подстраивать под экраны нечего. */
.road::after{content:"";position:absolute;left:50%;top:12px;bottom:12px;width:2px;
  margin-left:-1px;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--accent) 32%,var(--accent-soft) 68%,transparent);
  background-size:100% 22%;background-repeat:no-repeat;
  animation:roadrun 4.6s linear infinite}
@keyframes roadrun{from{background-position:0 -40%}to{background-position:0 140%}}
.road li>*{grid-row:1}
/* z-index: бегущая полоса рисуется псевдоэлементом дорожки и по порядку
   отрисовки лежит поверх строк - поднимаем строки над ней */
.road li{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  column-gap:clamp(12px,2.2vw,28px);padding:clamp(16px,2.1vw,25px) clamp(8px,1.8vw,24px);
  border-radius:22px}
.road-side{display:flex;align-items:center;gap:12px;
  transition:transform .35s cubic-bezier(.2,1.1,.4,1)}
/* Значки - тем же приемом, что и в блоке «для кого» выше: объемная фигура
   с бликом на светлой стеклянной плитке, градиент от белого к индиго.
   Перелив из индиго в пурпур остался, но анимируется не цвет контура,
   а нижний стоп градиента: у каждого значка свой сдвиг по времени, поэтому
   перелив идет волной сверху вниз вслед за бегущей полосой. */
.road-ic{width:var(--ric);height:var(--ric);flex:none;border-radius:27%;
  background:linear-gradient(155deg,#f2f2fc 0%,#e9e9f8 48%,#f8f8fc 100%);
  display:grid;place-items:center;
  box-shadow:inset 0 2px 5px rgba(255,255,255,.9),inset 0 -5px 11px rgba(95,79,214,.09),
    0 10px 22px -16px rgba(40,30,110,.5);
  animation:roadpop 4.6s ease-in-out infinite}
/* Полоса за 4,6 с проходит дорожку сверху вниз, шаг между строками - 0,55 с.
   Значок вырастает ровно в тот момент, когда она поравнялась с его строкой,
   и сразу возвращается к обычному размеру. */
@keyframes roadpop{0%,12%{transform:scale(1)}20%{transform:scale(1.13)}34%,100%{transform:scale(1)}}
.road li:nth-child(2) .road-ic{animation-delay:.55s}
.road li:nth-child(3) .road-ic{animation-delay:1.1s}
.road li:nth-child(4) .road-ic{animation-delay:1.65s}
.road li:nth-child(5) .road-ic{animation-delay:2.2s}
.road li:nth-child(6) .road-ic{animation-delay:2.75s}
@keyframes icoflow{0%,100%{stop-color:#8878df}50%{stop-color:#c96ccb}}
.road-ic .gd{animation:icoflow 4.6s ease-in-out infinite}
.road li:nth-child(2) .road-ic .gd{animation-delay:-.55s}
.road li:nth-child(3) .road-ic .gd{animation-delay:-1.1s}
.road li:nth-child(4) .road-ic .gd{animation-delay:-1.65s}
.road li:nth-child(5) .road-ic .gd{animation-delay:-2.2s}
.road li:nth-child(6) .road-ic .gd{animation-delay:-2.75s}
.road-ic svg{width:60%;height:60%;display:block}
.road li:hover .road-side{transform:translateY(-3px)}
.road-n{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--dim)}
.road-dot{grid-column:2;width:11px;height:11px;border-radius:50%;background:var(--card);
  border:1.5px solid var(--line);z-index:1}
.road li.on .road-dot{border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(95,79,214,.14)}
.road-tx b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.015em}
/* строки описания делятся поровну, а не «длинная и огрызок»:
   браузер сам подбирает перенос под ширину колонки */
.road-tx span{display:block;margin-top:6px;font-size:13px;line-height:1.55;color:var(--dim);
  max-width:42ch;text-wrap:balance}
/* нечетные: значок слева, текст справа */
.road li:nth-child(odd) .road-side{grid-column:1;justify-content:flex-end}
.road li:nth-child(odd) .road-tx{grid-column:3}
/* четные: текст слева и по правому краю, значок справа */
.road li:nth-child(even) .road-side{grid-column:3;justify-content:flex-start}
.road li:nth-child(even) .road-ic{order:2}
.road li:nth-child(even) .road-n{order:1}
.road li:nth-child(even) .road-tx{grid-column:1;text-align:right}
.road li:nth-child(even) .road-tx span{margin-left:auto}
@media(max-width:719px){
  /* на телефоне шесть колонок не помещаются - полоса встает вертикально */
  /* дорожка складывается влево: линия идет через середину значков */
  .road::before,.road::after{left:calc(var(--ric) / 2)}
  .road li{grid-template-columns:auto 1fr;column-gap:14px;padding:15px 0;border-radius:16px}
  .road-dot{display:none}
  .road li .road-side{grid-column:1!important;justify-content:flex-start!important}
  .road li .road-tx{grid-column:2!important;text-align:left!important}
  .road li .road-tx span{margin-left:0!important;max-width:none}
  .road li .road-ic{order:0!important}
  .road-n{display:none}   /* порядок и так виден, место нужно тексту */
}

/* ── отзывы (композиция по референсу testimonial-card) ── */
.tgrid{display:grid;grid-template-columns:1fr;gap:28px;margin-top:30px}
@media(min-width:960px){.tgrid{grid-template-columns:.92fr 1.08fr;gap:44px;align-items:start}}
/* Правка заказчика 2026-09-24: левая карточка тянется до низа ленты отзывов,
   нижние края обеих колонок на одном уровне. Содержимое внутри по центру. */
@media(min-width:960px){#revs .tside{align-self:stretch;display:flex;flex-direction:column;justify-content:center}}
/* снимок фоном колонки: сверху вниз уходит в почти черное, текст лежит поверх */
.tside{position:relative;overflow:hidden;border-radius:22px;background:var(--dark);color:#fff;
  align-self:start;
  padding:clamp(24px,3vw,36px) clamp(20px,2.6vw,32px)}
.tside-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;z-index:0}
.tside::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,10,22,.36) 0%,rgba(12,10,22,.66) 46%,rgba(11,10,18,.9) 100%)}
.tside-in{position:relative;z-index:2}
.tside .pill{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.8)}
.tside .pill::before{background:var(--accent-lite)}
.tside .h2{color:#fff}
.tside .lede{color:rgba(255,255,255,.86)}
.tside .tstat{background:rgba(255,255,255,.1)}
.tside .tstat b{color:#fff}
.tside .tstat span{color:rgba(255,255,255,.66)}
.tside .btn.ghost{border-color:rgba(255,255,255,.34)}
.tside .btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--tile);border:1px solid var(--line);
  border-radius:999px;padding:8px 15px;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
/* В капсуле первого экрана вместо точки - нота, набранная так же, как звездочка
   в надзаголовках: маска по форме знака и заливка фирменным градиентом. */
.h2mid .pill::before{width:15px;height:15px;border-radius:0;background:var(--star-fill);
  filter:drop-shadow(0 1px 1.5px rgba(95,79,214,.32));
  -webkit-mask:var(--note) center/contain no-repeat;mask:var(--note) center/contain no-repeat}
.tside .h2{margin-top:20px}
.tside .lede{margin-top:16px;max-width:44ch}
.tstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}
.tstat{background:var(--tile);border-radius:16px;padding:18px 15px}
.tstat b{display:block;font-family:var(--display);font-size:clamp(25px,3.2vw,34px);font-weight:400;letter-spacing:-.01em;line-height:1}
.tstat span{display:block;margin-top:9px;font-size:11px;color:var(--dim);line-height:1.4}
/* Кнопки отзывов (правка 2026-09-24): в первой строке два источника отзывов
   поровну, во второй «Записаться на урок» во всю ширину. Больше двух строк
   на широком экране не бывает. На телефоне запись убрана: там внизу экрана
   и так висит липкая кнопка «Записаться на урок», а двух ссылок на отзывы
   хватает. */
.tbtns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
.tbtns .btn{font-size:clamp(12px,1.05vw,13px);padding:14px 8px;justify-content:center;text-align:center;white-space:nowrap}
.tbtns .tb-cta{grid-column:1/-1}
@media(max-width:719px){.tbtns .tb-cta{display:none}}
@media(max-width:459px){.tbtns{grid-template-columns:1fr}}

/* ── кнопки на телефоне ──
   На узком экране призывы прижаты к левому краю и смотрятся обрубленными:
   ставим их посередине. Стрелки листалок, ссылка «смотреть полностью» внутри
   отзыва и кнопка поверх карты остаются на своих местах - это не призывы. */
@media(max-width:719px){
  .tbtns{justify-content:center}
  /* кнопки сертификата тоже по центру (правка 2026-09-24) */
  .gift-btns{justify-content:center}
  .bhead-b,p:has(>.btn),p:has(>.sp-more){text-align:center}
}

/* телефон: карусель, край следующей карточки видно - как в лентах направлений и концертов */
.tlist{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tlist::-webkit-scrollbar{display:none}
/* широкий экран: обычный список, листается вниз внутри блока */
@media(min-width:960px){
  .tlist{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible;scroll-snap-type:none;
    max-height:min(560px,70svh);overflow-y:auto;padding-right:10px;
    scrollbar-width:thin;scrollbar-color:var(--mute) transparent;
    -webkit-mask:linear-gradient(180deg,#000 calc(100% - 54px),transparent);
    mask:linear-gradient(180deg,#000 calc(100% - 54px),transparent)}
  .tlist::-webkit-scrollbar{display:block;width:5px}
  .tlist::-webkit-scrollbar-thumb{background:var(--mute);border-radius:99px}
  /* селектор с #revs: ниже по файлу .tnav,.vnav задают display:flex и перебили бы обычный */
  #revs .tnav{display:none}
}
.tnav,.vnav,.teanav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.tnav-i{font-size:13px;color:var(--dim);letter-spacing:.06em}
.tnav-i b{color:var(--ink);font-weight:600;font-size:15px}
.tnav-b{display:flex;gap:10px}
.tcard{background:var(--tile);border-radius:20px;padding:clamp(21px,2.2vw,28px);scroll-snap-align:start}
.tc-top{display:flex;align-items:center;gap:12px}
.tc-av{width:44px;height:44px;border-radius:13px;background:var(--soft);color:var(--ink);flex:none;
  display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:.02em}
.tc-id{min-width:0}
.tc-id b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em}
.tc-id span{display:block;margin-top:3px;font-size:11.5px;color:var(--dim)}
.tc-rate{display:flex;align-items:center;gap:9px;margin-top:15px}
.tc-rate b{font-size:14px;font-weight:600}
.stars{color:var(--gold);letter-spacing:2px;font-size:14px}
.tc-q{margin-top:11px;font-size:14px;line-height:1.62;color:var(--dim)}
.tc-more{display:none;align-items:center;gap:7px;margin-top:12px;padding:0;background:none;border:0;
  cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--ink);transition:color .2s}
.tc-more.on{display:inline-flex}
.tc-more:hover{color:var(--dim)}
.tc-more::after{content:"↓";font-size:12px;transition:transform .25s}
.tcard.open .tc-more::after{transform:rotate(180deg)}


/* ── форма ── */
@media(max-width:899px){
  /* на телефоне колонки складываются - затемняем сверху вниз */
  .fr-bg{object-position:58% 50%}
  #fr::after{background:linear-gradient(180deg,rgba(11,11,13,.86) 0%,rgba(11,11,13,.93) 55%,#0d0d0f 100%)}
}
form{display:grid;gap:9px}
.row{display:grid;gap:9px}
@media(min-width:520px){.row{grid-template-columns:1fr 1fr}}
label{font-size:12.5px;letter-spacing:0;color:var(--dim);display:block;margin-bottom:5px;font-weight:400}
input,select{width:100%;background:var(--tile);border:1px solid var(--line);color:var(--ink);
  padding:13px 14px;border-radius:12px;font:inherit;font-size:14.5px;transition:border-color .2s}
input:focus,select:focus{border-color:var(--dark);outline:none}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;color:var(--dim);line-height:1.5;margin-top:2px}
.consent input{width:auto;margin-top:2px}

/* ── FAQ (композиция по референсу faq-tabbed-explorer) ── */
.faqx{display:grid;grid-template-columns:1fr;gap:22px;margin-top:32px;background:var(--tile);
  border-radius:24px;padding:clamp(16px,2vw,24px)}
@media(min-width:900px){.faqx{grid-template-columns:236px 1fr;gap:30px}}
.faqx-lbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  font-weight:600;margin-bottom:14px}
.faqx-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.faqx-tabs::-webkit-scrollbar{display:none}
@media(min-width:900px){.faqx-tabs{flex-direction:column;overflow:visible;gap:3px}}
/* Свой серый, темнее общего: подписи вкладок лежат на плитке, а не на белом,
   и на ней --dim не дотягивал до нормы читаемости. */
.faqx-tab{display:inline-flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
  border-radius:13px;padding:12px 15px;font-size:14px;font-weight:500;color:#5d5e63;
  white-space:nowrap;text-align:left;transition:background .2s,color .2s}
.faqx-tab i{width:15px;height:15px;flex:none;background:var(--mute);
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;
  transition:background .2s}
.faqx-tab:hover{background:var(--card);color:var(--ink)}
.faqx-tab.on{background:var(--soft);color:var(--ink);font-weight:600}
.faqx-tab.on i{background:var(--star-fill)}
.faqx-pane{display:none}
.faqx-pane.on{display:block;animation:paneIn .32s cubic-bezier(.2,.7,.3,1)}
@keyframes paneIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.faq{display:grid;gap:8px}
/* Раскрытый вопрос раньше уходил в серый на сером фоне панели и терялся среди
   белых закрытых. Теперь наоборот: он остается белым, берет контур акцентного
   цвета и мягкую тень, а ответ отделяется от вопроса тонкой линией. */
.faq details{background:var(--card);border:1px solid transparent;border-radius:15px;
  transition:background .22s,border-color .22s,box-shadow .22s}
.faq details[open]{border-color:var(--accent);
  box-shadow:0 16px 34px -22px rgba(95,79,214,.65)}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq details[open] summary::after{color:var(--accent)}
.faq details[open] .ans{padding-top:15px}
.faq summary{list-style:none;cursor:pointer;padding:16px 46px 16px 18px;position:relative;
  font-size:clamp(14.5px,1.5vw,16px);font-weight:600;letter-spacing:-.01em;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--dim)}
.faq summary::after{content:"+";position:absolute;right:19px;top:50%;transform:translateY(-50%);
  font-size:21px;font-weight:400;color:var(--dim);transition:transform .3s;line-height:1}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .ans{padding:0 18px 18px;color:#5d5e63;font-size:15px;line-height:1.72;max-width:74ch}

/* ── подвал ── */
.foot{background:var(--dark);color:#f2f2f0;border-radius:var(--r);padding:var(--sp) clamp(20px,3vw,46px) 40px;
  margin-bottom:clamp(90px,12vw,110px)}
@media(min-width:940px){.foot{margin-bottom:clamp(12px,1.6vw,20px)}}
.foot-grid{display:grid;gap:28px}
.foot-grid{align-items:start}
.foot-info{display:grid;gap:26px}
/* Правка заказчика 2026-09-02: в левой колонке подвала стоит только заявка,
   весь текст - контакты и оба списка ссылок - ушел вправо.
   С 820 px контакты идут строкой над списками, а списки парой столбцов:
   втроем в ряд они помещаются только на широком экране, иначе телефон
   в контактах ломается пополам. */
@media(min-width:820px){
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(30px,4vw,64px)}
  .foot-info{grid-template-columns:1fr 1fr;gap:26px clamp(22px,2.6vw,40px)}
  .foot-con{grid-column:1/-1}
}
/* С 1180 px текста хватает на три столбца в ряд, а форме довольно 380 px. */
@media(min-width:1180px){
  .foot-grid{grid-template-columns:minmax(0,380px) 1fr}
  .foot-info{grid-template-columns:1.35fr 1fr 1fr;gap:clamp(24px,2.2vw,30px)}
  /* 13px строка снятого заголовка плюс 14px отступ под ним */
  .foot-con{grid-column:auto;padding-top:27px}
}
.foot h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8b8c92;margin-bottom:14px}
.foot a{color:#c9cad0;font-size:14.5px;display:block;padding:5px 0;transition:color .18s}
.foot a:hover{color:#fff}
/* Адрес в подвале - обычная строка: кликается не он, а слова действия под ним.
   Вид у строки тот же, что у ссылок рядом, чтобы столбец не рассыпался. */
.foot-adr{color:#c9cad0;font-size:14.5px;padding:5px 0;margin:0}
.foot-route{text-decoration:underline;text-underline-offset:3px}
/* Кнопка в подвале: .foot a задавала ей display:block и растягивала на всю
   колонку - получалось поле ввода, а не кнопка. Возвращаем вид кнопок сайта. */
.foot .btn{display:inline-flex;align-items:center;gap:10px;width:auto;
  margin-top:20px;padding:15px 24px;font-size:14px;color:var(--ink)}
.foot .btn:hover{color:var(--ink)}
.foot .big{color:#fff;font-family:var(--display);font-size:24px;font-weight:400;letter-spacing:0}
/* Колонки ссылок сворачиваются на телефоне: раскрытые, они тянули подвал
   на несколько экранов. С планшета раскрыты всегда, плюсик не показывается. */
.foot-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:12px}
.foot-acc summary::-webkit-details-marker{display:none}
.foot-acc summary h4{margin-bottom:0}
.foot-acc summary::after{content:"+";color:#8b8c92;font-size:21px;line-height:1;
  transition:transform .3s}
.foot-acc[open] summary::after{transform:rotate(45deg)}
.foot-acc[open] summary{margin-bottom:12px}
@media(max-width:819px){
  .foot-acc{border-top:1px solid rgba(255,255,255,.12);padding-top:15px}
}
@media(min-width:820px){
  .foot-acc summary{pointer-events:none;margin-bottom:14px}
  .foot-acc summary::after{display:none}
}
.foot .req{color:#7c7d84;font-size:12px;line-height:1.7;margin-top:18px}
/* Знак ушел из первой колонки в нижнюю строку подвала: наверху он сбивал
   начало колонок - заголовки разделов стояли на одной линии, а контакты
   начинались на 80 px ниже (правка заказчика 2026-08-31). Внизу он держит
   строку с реквизитами и ничего не сдвигает. */
.foot-bot{display:flex;align-items:center;gap:clamp(16px,2vw,26px);flex-wrap:wrap;
  margin-top:clamp(30px,3.4vw,44px);padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12)}
.foot .logo{height:44px;width:auto;flex:none;opacity:.92}
.foot-bot .req{margin-top:0}
/* Подпись студии прижата вправо, на телефоне встает под реквизиты по центру. */
.foot .dev{margin-left:auto;display:flex;flex-direction:column;gap:7px;color:#e9e9ee;
  text-decoration:none;opacity:.85;transition:opacity .2s}
.foot .dev:hover,.foot .dev:focus-visible{opacity:1}
.foot .dev svg{width:clamp(120px,10vw,150px);height:auto}
.foot .dev span{color:#9a9ba2;font-size:13px;line-height:1}
/* На телефоне подвал идет одним столбцом, и по левому краю он смотрелся
   обрубленным: ставим содержимое по центру. Знак «+» у раздела остается
   рядом с названием, а не улетает к правому краю. */
@media(max-width:719px){
  .foot{text-align:center}
  .foot-bot{justify-content:center;flex-direction:column;gap:16px}
  .foot .dev{margin-left:0;align-items:center;margin-top:6px}
  .foot-acc summary{justify-content:center;gap:11px}
}

/* ── короткая заявка в подвале ── */
/* Правка заказчика 2026-09-01: форма стоит в подвале на всех пяти страницах.
   Полей три - имя, телефон, способ связи. Поля те же, что в большой форме,
   но на темном: прозрачная заливка и белый текст. Проверка номера общая
   с окном заявки, отправки пока нет, как и у остальных форм макета. */
/* Отступ сверху был зазором под снятым заголовком. Без него форма
   начинается вровень с заголовками соседних столбцов подвала. */
.ffm{display:grid;gap:9px;text-align:left;max-width:420px}
/* Имя и телефон стоят в строку: колонка формы уже целой половины подвала,
   в столбик три поля растягивали ее вниз мимо соседнего текста. */
.ffm-row{display:grid;gap:9px}
@media(min-width:420px){.ffm-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.ffm label{color:rgba(255,255,255,.72)}
.ffm input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.ffm input::placeholder{color:rgba(255,255,255,.5)}
.ffm input:focus{border-color:#fff}
.ffm .bad input{border-color:rgba(255,138,138,.8)}
.ffm .bad label{color:#ff9a9a}
.ffm .ways{display:flex;flex-wrap:wrap;gap:7px;margin-top:3px}
.ffm .ways legend{width:100%;color:rgba(255,255,255,.72);margin-bottom:7px}
.ffm .ways label{margin-bottom:0;background:rgba(255,255,255,.1);color:rgba(255,255,255,.82)}
.ffm .ways label:hover{background:rgba(255,255,255,.16);color:#fff}
.ffm .ways label.on,.ffm .ways label:has(input:checked){background:#fff;color:var(--ink)}
/* .foot .btn отодвигал кнопку от прежнего списка контактов на 20px: здесь
   расстояние держит сетка формы. Подпись по центру, как в форме внизу. */
.ffm .btn{margin-top:5px;width:100%;justify-content:center}
.ffm .consent{color:rgba(255,255,255,.72)}
/* .foot a делает ссылки блоками и красит серым: в строке согласия ссылка
   должна идти внутри текста и читаться на темном. */
.ffm .consent a{display:inline;padding:0;color:#fff;text-decoration:underline}
.ffm-ok{display:none;color:rgba(255,255,255,.72);font-size:13px;line-height:1.6}
.ffm-ok b{display:block;color:#fff;font-family:var(--display);font-weight:400;
  font-size:22px;margin-bottom:6px}
/* после отправки на месте формы остается только ответ */
.ffm.done>*{display:none}
.ffm.done .ffm-ok{display:block}
/* Центрирование - только у заявки в подвале: та же разметка стоит теперь в
   карточке блока «Возраст и уровень», а там заголовок по левому краю и
   форма по центру спорила бы с ним. */
@media(max-width:719px){
  .foot .ffm{margin-left:auto;margin-right:auto;text-align:center}
  .foot .ffm .ways{justify-content:center}
  .foot .ffm .consent{text-align:left}
}

/* ── ленты не тянутся по вертикали ── */
/* Правка заказчика 2026-09-02: пальцем можно было утащить карточки ленты
   вверх внутри нее самой - лента оставалась на месте, а содержимое уезжало.
   Причина в правиле CSS: если задана только одна ось overflow, вторая
   становится auto, а не visible. У всех лент стояло overflow-x:auto, значит
   и по вертикали они прокручивались. Запас по высоте давало появление по
   прокрутке: карточка ждет своей очереди на 20px ниже своего места, и ровно
   эти 20px палец и тянул (на телефоне - с инерцией, поэтому казалось сильно).
   Замка два. Первый: вертикальная прокрутка лентам запрещена. Второй: внутри
   лент карточки появляются без сдвига, только проявлением, так что запаса по
   высоте не возникает вовсе и обрезать нечего. */
/* Правка 2026-09-07: замок вешается только там, где элемент правда лента.
   Раньше правило стояло на всех восьми списках без разбора ширины экрана, и на
   широком экране, где лента разворачивается в обычную сетку, эта сетка начинала
   резать по своему нижнему краю. Кнопка «Записаться на урок» свисает с карточки
   направления на 19px - ее нижнюю половину и тень срезало ровной чертой, а на
   наведении кнопка приподнималась и будто проваливалась обратно. Тем же
   правилом ломалась вертикальная прокрутка списка отзывов на широком экране:
   ему задан overflow-y:auto, а это правило стоит ниже по файлу и перебивало.
   Ленты, которые остаются лентами на любой ширине, замок сохраняют. */
.spx,.teagrid{overflow-y:hidden}
@media(max-width:999px){.cards3{overflow-y:hidden}}
@media(max-width:959px){.tlist{overflow-y:hidden}}
@media(max-width:899px){.faqx-tabs{overflow-y:hidden}}
@media(max-width:719px){#adv .advgrid{overflow-y:hidden}}
@media(max-width:619px){.vids{overflow-y:hidden}}
@media(max-width:559px){.dirgrid{overflow-y:hidden}}
.cards3 .rv,.dirgrid .rv,.spx .rv,.vids .rv,.tlist .rv,.teagrid .rv,#adv .advgrid .rv{transform:none}

/* ── преподаватели ── */
/* Лента карточек: карточки такой же ширины, как на странице педагогов, поэтому
   в ряд помещаются три, остальные листаются стрелками под лентой по центру. */
.teagrid{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;margin-top:34px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  /* Лента режет все по своему нижнему краю. Кнопка свисает на 19px, и ее тень
     уходит вниз еще примерно на 34 - при 26px запаса тень обрубало ровной
     чертой. Нужно 19 + 34, берем с небольшим запасом. */
  padding-bottom:56px}
/* Запас под кнопку только на лендинге: на странице «Преподаватели» ее нет.
   32px оставляли от строки до кнопки всего 8 px - по правке заказчика поднято
   до 48, зазор стал 24 px. */
.teagrid .pcard-tx{padding-bottom:48px}
.teagrid::-webkit-scrollbar{display:none}
.teagrid .pcard{scroll-snap-align:start}
@media(min-width:760px){.teagrid{grid-auto-columns:calc((100% - 12px)/2)}}
.teanav{justify-content:center;gap:20px}
/* ── карточка педагога на странице «Преподаватели» ── */
/* Обрезка с карточки снята: кнопка свисает с нижнего края, и при overflow:hidden
   ее нижняя половина срезалась бы. Скругление верхних углов ушло на сам снимок. */
.pcard{background:var(--tile);border-radius:20px;display:flex;flex-direction:column;
  position:relative;scroll-margin-top:88px}
/* квадрат: у части педагогов фото в карточке снято вплотную, и в кадре 4:3
   голова занимала почти всю высоту. В квадрате кадр у всех 13 одинаковый (2026-09-24) */
.pcard-ph{position:relative;aspect-ratio:1/1;background:var(--soft);display:grid;place-items:center;
  border-radius:20px 20px 0 0;overflow:hidden}
.pcard-ph span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  text-align:center;line-height:1.6}
.pcard-sp{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.92);border-radius:999px;
  padding:6px 13px;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.pcard-tx{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard-tx h3{font-size:19px;font-weight:600;letter-spacing:-.02em}
.pcard-q{font-size:13.5px;line-height:1.6;color:var(--dim);flex:1}
.pcard-meta{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.pcard-meta div{display:grid;grid-template-columns:88px 1fr;gap:10px;font-size:12.5px;line-height:1.45}
.pcard-meta em{font-style:normal;color:var(--dim)}
@media(min-width:1080px){.teagrid{grid-auto-columns:calc((100% - 24px)/3)}}

/* ── сквозная заявка ── */
.btn.ghost{background:transparent;color:#fff;border:1px solid #3a3a41}
.btn.ghost:hover{background:#26262b}

/* ── преимущества ── */
.advgrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:34px}
@media(min-width:720px){.advgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.advgrid{grid-template-columns:repeat(4,1fr)}}
/* Восемь карточек в один столбик - длинная прокрутка, поэтому на телефоне
   блок листается лентой со стрелками, как направления и педагоги. Селектор
   с #adv: такие же карточки стоят на трех внутренних страницах, там их
   по четыре и лента им не нужна. */
.anav{display:none}
@media(max-width:719px){
  #adv .advgrid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:84%;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    /* запас снизу: иначе лента срежет мягкую тень карточки ровной чертой */
    padding-bottom:22px}
  #adv .advgrid::-webkit-scrollbar{display:none}
  #adv .adv{scroll-snap-align:start}
  .anav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:6px}
}
/* Карточка по присланному образцу: значок в углу, под ним заголовок и текст,
   все по левому краю. Волосяных линий и обводки нет, фон - плитка, как у
   остальных карточек сайта. */
.adv{position:relative;isolation:isolate;border-radius:20px}
.adv-in{position:relative;height:100%;overflow:hidden;border-radius:20px;
  display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;padding:30px 22px 32px;background:#fdfdfc;
  /* карточка светлее страницы почти неразличимо, поэтому край держит тень:
     мягкая снизу и совсем короткая по контуру, иначе плитки «поплывут» */
  box-shadow:0 14px 30px -20px rgba(22,18,54,.45),0 2px 6px -4px rgba(22,18,54,.22)}
/* Значок: та же стеклянная плитка, что у блока «возраст и уровень», только
   меньше. Фигура залита тем же градиентом, сверху белый блик. */
.adv-ico{width:46px;height:46px;flex:none;border-radius:26%;margin-bottom:20px;
  background:linear-gradient(155deg,#f2f2fc 0%,#e9e9f8 48%,#f8f8fc 100%);
  display:grid;place-items:center;
  box-shadow:inset 0 2px 5px rgba(255,255,255,.9),inset 0 -4px 10px rgba(95,79,214,.09),
    0 10px 22px -16px rgba(40,30,110,.5)}
.adv-ico svg{width:58%;height:58%}
.adv h3{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
/* свой серый, темнее общего: на плитке --dim держится на самой границе нормы */
.adv p{margin-top:12px;font-size:14px;line-height:1.65;color:#5d5e63}

/* ── способ связи в форме ── */
.ways{border:0;padding:0;margin:0}
.ways legend{font-size:12.5px;letter-spacing:0;color:var(--dim);font-weight:400;margin-bottom:6px;padding:0}
/* кегль и начертание - как у обычного текста на странице, не как у кнопок */
.ways label{position:relative;display:inline-flex;align-items:center;gap:6px;background:var(--soft);
  border-radius:999px;padding:7px 12px 7px 10px;margin:0 6px 6px 0;font-size:12px;font-weight:400;
  color:var(--dim);cursor:pointer;transition:background .2s,color .2s}
.ways label:hover{background:#e6e6e2;color:var(--ink)}
.ways label.on,.ways label:has(input:checked){background:var(--dark);color:#fff;font-weight:500}
.ways label:has(input:focus-visible){outline:2px solid var(--dark);outline-offset:3px}
.ways svg{width:12px;height:12px;flex:none;fill:currentColor}
.ways input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}


/* ── «где нас найти» по референсу заказчика 175518 ──
   Карта во всю ширину, поверх нее слева темная
   карточка с адресом и контактами: она заходит на карту и выступает за ее
   верх и низ. На телефоне все складывается в столбик, наложения нет.
   Этот же блок стоит на странице «о клубе»: 2026-08-31 заказчик попросил
   карту как на главной, прежние классы .where* удалены. */
.wmap{position:relative;margin-top:34px}
.wmap-ph{position:relative;border-radius:22px;overflow:hidden;background:var(--soft);
  aspect-ratio:4/3;min-height:280px}
.wmap-ph img{width:100%;height:100%;object-fit:cover}
/* Живая карта Яндекса встает поверх снимка. Снимок остается в разметке: он
   держит место, пока карта грузится, и остается насовсем там, где внешние
   окна запрещены, - например в предпросмотре макета. */
.wmap-f{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.wmap-ph.is-live img,.wmap-ph.is-live .wmap-open,.wmap-ph.is-live .wmap-note{display:none}
.wmap-open{position:absolute;right:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:999px;
  background:rgba(255,255,255,.95);color:var(--ink);font-size:13px;font-weight:600;
  box-shadow:0 12px 28px -16px rgba(20,18,40,.75);transition:transform .2s,color .2s}
.wmap-open i{font-style:normal;color:var(--accent)}
.wmap-open:hover{color:var(--accent);transform:translateY(-2px)}
/* Подпись держится правого края и стоит над кнопкой: слева на карту заходит
   темная карточка с контактами, и по левому краю подпись легла бы на нее. */
.wmap-note{position:absolute;right:14px;bottom:66px;z-index:2;max-width:min(62%,430px);
  padding:10px 14px;border-radius:14px;background:rgba(20,18,40,.84);
  color:rgba(255,255,255,.92);font-size:11px;line-height:1.45}
.wfind{border-radius:22px;color:#fff;margin-top:12px;padding:clamp(24px,2.6vw,34px);
  display:grid;gap:20px;align-content:start;text-align:center;justify-items:center;
  background:
    radial-gradient(125% 62% at 50% 0%,rgba(186,160,250,.58) 0%,rgba(95,79,214,.5) 46%,rgba(20,18,40,0) 76%),
    linear-gradient(180deg,#17142c 0%,#1b1836 44%,#141227 100%);
  box-shadow:0 34px 64px -34px rgba(20,18,40,.8)}
.wfind .eyebrow{color:#fff;margin-bottom:0}
.wfind .eyebrow::before{background:var(--star-fill-lite);filter:none}
.wfind h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.3vw,33px);
  line-height:1.07;letter-spacing:-.01em;margin-top:-8px}
.wgrp{display:grid;gap:5px}
.wlbl{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:5px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.74)}
.wlbl svg{width:15px;height:15px;flex:none;fill:var(--accent-lite)}
.wval{font-size:14.5px;line-height:1.62;color:rgba(255,255,255,.93)}
.wval a{border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .2s,color .2s}
.wval a:hover{color:var(--accent-lite);border-color:var(--accent-lite)}
.wfind .btn{justify-self:center}
/* На телефоне карта не помещается так, чтобы по ней было что-то видно,
   и остается картинкой ради картинки: показываем только карточку, маршрут
   строится кнопкой внутри нее. */
@media(max-width:719px){
  .wmap-ph{display:none}
  .wfind{margin-top:0}
}
@media(min-width:900px){
  /* воздух сверху и снизу - под ту часть карточки, что выступает за карту */
  .wmap{padding:34px 0}
  .wmap-ph{width:80%;margin-left:auto;aspect-ratio:auto;height:clamp(400px,32vw,470px);min-height:0}
  .wfind{position:absolute;left:0;top:50%;transform:translateY(-50%);
    margin-top:0;width:min(430px,42%)}
}

/* ── единый отклик карточек на курсор ─────────────────────────────────
   Одна механика на весь сайт: карточка приподнимается с легким перелетом,
   контур подсвечивается, а под курсором идет мягкое пятно света.
   Пятно наложено умножением - темный текст под ним не выцветает;
   на темных карточках оно, наоборот, подсвечивает. Тач-экранов не касается. */
.hx{position:relative;isolation:isolate;
  transition:transform .5s cubic-bezier(.2,1.25,.4,1),box-shadow .4s ease}
.hx::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  opacity:0;transition:opacity .4s ease;mix-blend-mode:multiply;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    rgba(169,140,240,.24),rgba(169,140,240,.08) 45%,transparent 72%)}
/* на темных снимках умножение не видно - там пятно, наоборот, подсвечивает */
.b-main::before,.vid::before,.sp-card::before,.tside .tstat::before{
  mix-blend-mode:screen;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
    rgba(201,108,203,.36),rgba(169,140,240,.12) 48%,transparent 74%)}
/* у плиток первого экрана своя анимация свойства - дописываем, а не затираем */
.mini.hx{transition:border-color .25s,
  transform .5s cubic-bezier(.2,1.25,.4,1),box-shadow .4s ease}
@media(hover:hover) and (pointer:fine){
  .hx:hover{transform:translateY(-6px);
    box-shadow:0 26px 44px -30px rgba(24,18,64,.55),0 0 0 1px rgba(95,79,214,.24)}
  /* карточки со своей хореографией - фото направлений, плитка пространства,
     ролики концертов - только подсвечиваются, не разъезжаются */
  .hx.flat:hover{transform:none;box-shadow:0 0 0 1px rgba(95,79,214,.28)}
  .hx:hover::before{opacity:1}
}

/* ── всплывающая заявка ─────────────────────────────────────────────
   Открывается со всех кнопок «Записаться». Стекло на темном по референсу
   заказчика: полупрозрачная панель с размытием, тонкий светлый контур
   и отсвет из левого верхнего угла - у нас в цветах логотипа.
   Поля те же, что в большой форме внизу страницы. */
.mask{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:14px;
  background:rgba(8,8,12,.64);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.mask.on{opacity:1;visibility:visible}
/* без скриптов окно открывается по якорю: ссылка ведет на #qmask.
   Со скриптами переход отменяется, и адрес страницы не меняется. */
.mask:target{opacity:1;visibility:visible}
.modal{position:relative;width:min(540px,100%);max-height:92svh;overflow:auto;
  background:rgba(19,19,25,.86);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.13);border-radius:28px;color:#fff;
  padding:clamp(24px,3.2vw,38px);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent;
  box-shadow:0 44px 90px -44px rgba(0,0,0,.95);
  transform:translateY(16px) scale(.985);transition:transform .36s cubic-bezier(.2,.8,.3,1)}
.mask.on .modal{transform:none}
.modal::before{content:"";position:absolute;left:0;top:0;right:20%;bottom:52%;pointer-events:none;
  border-radius:28px 0 0 0;
  background:radial-gradient(120% 130% at 0 0,rgba(201,108,203,.44),rgba(95,79,214,.2) 46%,transparent 74%)}
.modal>*{position:relative;z-index:1}
.mclose{position:absolute;right:14px;top:14px;z-index:2;width:36px;height:36px;border-radius:50%;
  border:0;background:rgba(255,255,255,.1);color:#fff;font-size:20px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .2s}
.mclose:hover{background:rgba(255,255,255,.2)}
.mttl{font-family:var(--display);font-weight:400;font-size:clamp(25px,3vw,33px);line-height:1.1;
  text-align:center;letter-spacing:-.005em}
/* Описание без ручного переноса: окно уже 540 px не бывает, а на телефоне
   сужается вместе с экраном, и жесткий <br> оставлял одно слово в строке
   («вопросы», «ответит»). Длину строк равняет браузер - тот же прием,
   что у заголовков блоков. */
.msub{margin-top:9px;text-align:center;font-size:13.5px;line-height:1.5;
  color:rgba(255,255,255,.6);text-wrap:balance}
.mform{display:grid;gap:9px;margin-top:24px}
.mrow{display:grid;gap:9px}
@media(min-width:560px){.mrow{grid-template-columns:1fr 1fr}}
/* поле-капсула с подписью внутри - как в референсе */
.mf{display:block;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  border-radius:999px;padding:9px 20px;transition:border-color .2s,background .2s}
.mf:focus-within{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.11)}
.mf>span{display:block;font-size:11px;color:rgba(255,255,255,.5)}
.mf input,.mf select,.mf textarea{width:100%;background:none;border:0;outline:none;color:#fff;
  font:inherit;font-size:15px;padding:2px 0 1px}
.mf input::placeholder,.mf textarea::placeholder{color:rgba(255,255,255,.52)}
/* вопрос в несколько строк: капсула-таблетка для него слишком узкая */
.mf-q{border-radius:20px}
.mf-q textarea{min-height:74px;line-height:1.45;resize:vertical;display:block}
.mf select option{color:var(--ink)}
.modal .ways{border:0;padding:0;margin:4px 0 0;display:flex;flex-wrap:wrap;gap:8px;
  justify-content:center}
/* подпись сама по себе ужимается по тексту - растягиваем, иначе центрировать нечего */
.modal .ways legend{width:100%;padding:0;margin-bottom:9px;text-align:center;
  font-size:11.5px;color:rgba(255,255,255,.5)}
.modal .ways label{background:rgba(255,255,255,.09);color:rgba(255,255,255,.82)}
.modal .ways label:hover{background:rgba(255,255,255,.16);color:#fff}
.modal .ways label.on{background:#fff;color:var(--ink)}
.msend{margin-top:6px;width:100%;justify-content:center;border:0;cursor:pointer;
  background:linear-gradient(120deg,var(--accent),var(--accent-soft));
  color:#fff;font-size:15px;font-weight:600;padding:16px 22px;border-radius:999px;
  display:inline-flex;align-items:center;gap:10px;transition:transform .2s,box-shadow .25s}
.msend:hover{transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(95,79,214,.9)}
/* кому уходит заявка: строка появляется, только если окно открыли
   кнопкой из карточки педагога */
.mtea{margin:10px 0 0;text-align:center;font-size:12.5px;color:rgba(255,255,255,.6)}
.mtea b{font-weight:500;color:#fff}
.mnote{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:6px;
  font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.55)}
.mnote a{color:rgba(255,255,255,.85);text-decoration:underline}
/* обязательное поле: звездочка в подписи, при ошибке подпись и рамка краснеют */
.mf i{font-style:normal;margin-left:3px;color:var(--accent-lite)}
.mf.bad{border-color:rgba(255,138,138,.75);background:rgba(255,90,90,.09)}
.mf.bad>span{color:#ff9a9a}
.mf.bad i{color:#ff9a9a}
.mnote input[type=checkbox],.consent input[type=checkbox]{
  /* общее правило для полей ниже добавляет отступы и рамку - гасим их,
     иначе кружок раздувается до 30 px вместо шестнадцати */
  appearance:none;-webkit-appearance:none;margin:0;padding:0;flex:none;
  min-width:0;min-height:0;position:relative;top:2px;
  width:16px;height:16px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.36);background:rgba(255,255,255,.08);
  display:grid;place-items:center;transition:background .2s,border-color .2s}
.mnote input[type=checkbox]:hover,.consent input[type=checkbox]:hover{border-color:rgba(255,255,255,.6)}
.mnote input[type=checkbox]:checked,.consent input[type=checkbox]:checked{
  background:var(--accent);border-color:var(--accent)}
.mnote input[type=checkbox]:checked::after,.consent input[type=checkbox]:checked::after{
  content:"";width:7px;height:4px;margin-top:-2px;
  border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg)}
.mok{display:none;text-align:center;padding:26px 0 6px}
/* ── окно заявки помещается целиком ──
   Прокрутка внутри окна - это вторая полоса на экране и уехавшая за край
   кнопка отправки. Разметку не трогаем, ужимаем вертикальный ритм по высоте
   окна браузера. Ниже 560 px прокрутка все же остается: это уже не окно
   ноутбука, а телефон в положении лежа, и там честнее прокрутить. */
@media(max-height:820px){
  .modal{padding-top:24px;padding-bottom:24px}
  .mttl{font-size:27px}
  .msub{margin-top:6px;font-size:12.5px}
  .mform{margin-top:14px;gap:7px}
  .mf{padding:7px 18px}
  .modal .ways legend{margin-bottom:6px}
  .mok{padding:16px 0 4px}
}
@media(max-height:700px){
  .modal{padding-top:18px;padding-bottom:18px}
  .mttl{font-size:24px}
  .msub{margin-top:5px;font-size:12px}
  .mform{margin-top:11px;gap:6px}
  .mf{padding:5px 16px}
  .mf-q textarea{min-height:56px}
  .msend{padding:13px 22px}
}
/* совсем низкое окно: отдаем окну заявки почти весь экран, отступ вокруг
   до 8 px. Дальше ужимать нечего - остается прокрутка. */
@media(max-height:560px){
  .mask{padding:8px}
  .modal{max-height:96svh}
  .mform{gap:5px}
  .msend{padding:11px 22px}
}
.mok b{display:block;font-family:var(--display);font-weight:400;font-size:26px}
.mok span{display:block;margin-top:10px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.65)}
.modal.done .mform,.modal.done .msub{display:none}
.modal.done .mok{display:block}

/* ── свой выпадающий список ────────────────────────────────────────
   Раскрытый системный список рисует операционная система: белый прямоугольник
   системным шрифтом, ни цвет, ни скругление ему не задать. На темной стеклянной
   форме он выглядел чужеродно. Здесь список свой, в той же гамме, что и поля.
   Нативный select остается в разметке и хранит значение - без скриптов форма
   работает как раньше, системным списком. */
.sel{position:relative}
.sel select{display:none}
.sel-btn{display:block;width:100%;padding:2px 22px 1px 0;text-align:left;cursor:pointer;
  background:none;border:0;outline:none;color:#fff;font:inherit;font-size:15px}
.sel::after{content:"";position:absolute;right:2px;top:50%;width:7px;height:7px;margin-top:-6px;
  border-right:1.6px solid rgba(255,255,255,.55);border-bottom:1.6px solid rgba(255,255,255,.55);
  transform:rotate(45deg);pointer-events:none;transition:transform .25s,margin-top .25s}
.sel.on::after{transform:rotate(-135deg);margin-top:-2px}
.sel-list{position:absolute;left:-16px;right:-16px;top:calc(100% + 14px);z-index:6;
  background:rgba(28,28,36,.98);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:6px;
  box-shadow:0 26px 54px -24px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  /* Закрытый список висит абсолютом ниже поля и все равно считается в
     области прокрутки окна: у окна заявки из-за него появлялась полоса
     прокрутки на пустом месте. Схлопываем в ноль, пока список закрыт. */
  height:0;padding:0;border-width:0;overflow:hidden}
.sel.on .sel-list{opacity:1;visibility:visible;transform:none;
  height:auto;padding:6px;border-width:1px;overflow:visible}
/* у нижних полей список раскрывается вверх - см. open() в скрипте */
.sel.up .sel-list{top:auto;bottom:calc(100% + 14px)}
.sel-opt{display:block;width:100%;padding:11px 14px;text-align:left;cursor:pointer;
  background:none;border:0;border-radius:12px;font:inherit;font-size:14.5px;
  color:rgba(255,255,255,.82);transition:background .18s,color .18s}
.sel-opt:hover{background:rgba(255,255,255,.1);color:#fff}
.sel-opt.on{background:var(--accent);color:#fff}

/* ── уведомление о куки ── */
/* Правка заказчика 2026-09-02: на телефоне плашка лежит на самом нижнем краю,
   без зазора. Место под липкую кнопку больше не резервируем: пока плашка
   видна, кнопка сама поднимается на ее высоту (--ckh ставит скрипт). */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:88;display:flex;
  gap:14px;align-items:center;background:var(--tile);border:1px solid var(--line);border-bottom:0;
  border-radius:20px 20px 0 0;
  padding:16px 18px calc(16px + env(safe-area-inset-bottom,0px));
  box-shadow:0 22px 50px -28px rgba(0,0,0,.6)}
/* видна сразу с первой отрисовкой: появись она скриптом позже, Google засчитал бы ее
   как последний крупный элемент экрана (LCP). Кто уже принял, получает ck-ok из <head> */
.ck-ok .cookie{display:none}
.cookie p{font-size:12.5px;line-height:1.55;color:var(--dim)}
.cookie a{text-decoration:underline}
.cookie .btn{flex:none;padding:12px 20px;font-size:13.5px}
@media(min-width:940px){.cookie{left:auto;right:16px;bottom:16px;max-width:470px;
  border-bottom:1px solid var(--line);border-radius:20px;padding:16px 18px}}
@media(max-width:520px){.cookie{flex-direction:column;align-items:stretch;text-align:left}
  .cookie .btn{justify-content:center}}

/* ── липкая кнопка ── */
.sticky{position:fixed;left:12px;right:12px;bottom:calc(12px + var(--ckh,0px));z-index:70;
  display:flex;gap:8px;justify-content:center;transform:translateY(150%);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),bottom .3s ease}
.sticky.on{transform:none}
/* кнопки по ширине текста и по центру экрана, а не во всю строку */
.sticky .btn{flex:0 0 auto;justify-content:center;padding:12px 18px;font-size:13.5px;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.7)}
.sticky .tel{flex:none;padding:12px 16px}
/* стрелка «наверх» встала на место кнопки меню - тем же светлым кружком */
.sticky .up{width:44px;height:44px;padding:0;border-radius:50%;
  justify-content:center;font-size:15px;line-height:1}
.sticky .spark{width:22px;height:22px;font-size:11px;margin:-3px -6px -3px 1px}
.sticky .bars span{width:16px}
.bars{display:flex;flex-direction:column;gap:4px;align-items:center}
.bars span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
@media(min-width:940px){.sticky{display:none}}

.burger{display:none}
/* список выпадает из-под кнопки меню в правом верхнем углу.
   max-height - на случай низкого экрана: список длиннее его высоты
   прокручивается внутри себя, а не уходит под нижний край. */
.menu{position:fixed;right:12px;top:66px;z-index:95;width:min(258px,78vw);
  max-height:calc(100svh - 78px);overflow-y:auto;
  display:flex;flex-direction:column;gap:1px;padding:8px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.97);transform-origin:100% 0;
  transition:opacity .24s cubic-bezier(.2,.7,.3,1),transform .24s cubic-bezier(.2,.7,.3,1),visibility .24s}
.menu.on{opacity:1;visibility:visible;transform:none}
.menu a{font-size:13.5px;font-weight:500;letter-spacing:0;padding:9px 11px;border-radius:11px;line-height:1.2}
.menu a:active{background:var(--soft)}
.menu a.on{background:var(--dark);color:#fff;font-weight:600}
.menu .m-sep{height:1px;background:var(--line);margin:6px 4px}
.menu .m-info{padding:2px 11px 8px;font-size:11.5px;line-height:1.45;color:var(--dim)}
.menu .cta{margin-top:4px;justify-content:center;font-size:13px;padding:11px 14px}
.menu .close{display:none}
.note{margin-top:18px;font-size:12.5px;color:var(--dim);line-height:1.65;border-left:2px solid var(--accent);padding-left:12px}

/* отзыв длиннее шести строк прячем только на телефоне: на широком экране он виден целиком */
@media(max-width:959px){
  .tc-q{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
  .tcard.open .tc-q{display:block;-webkit-line-clamp:none}
}

/* ── FAQ и новые блоки на телефоне (в конце: перебивает правила выше) ── */
@media(max-width:899px){
  /* белая карточка внутри блока-карточки съедала ширину - на телефоне убираем */
  .faqx{background:none;border-radius:0;padding:0;gap:14px;margin-top:24px}
  .faqx-lbl{display:none}
  /* разделы сеткой 2x2: видны все сразу, ничего не прячется за горизонтальной прокруткой */
  .faqx-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;overflow:visible;padding:0}
  .faqx-tab{min-height:48px;padding:12px 13px;font-size:13px;line-height:1.25;white-space:normal;
    background:var(--tile);border-radius:14px;align-items:center}
  .faqx-tab i{width:13px;height:13px}
  .faqx-tab.on{background:var(--dark);color:#fff}
  .faqx-tab.on i{background:var(--star-fill-lite)}
  .faq{gap:7px}
  .faq details{background:var(--tile)}
  .faq details[open]{background:var(--soft)}
  .faq summary{padding:15px 44px 15px 16px;font-size:14.5px;line-height:1.35}
  .faq summary::after{right:16px}
  .faq .ans{padding:0 16px 16px;font-size:14px}


  /* педагоги: лента карточек - как направления и отзывы */
  .teagrid{grid-auto-columns:86%;gap:11px;margin-top:28px}
  .pcard-tx{padding:16px 17px 18px}
  .pcard-tx h3{font-size:17px}
}

/* ── мобильная раскладка первого экрана (в конце: перебивает правила выше) ── */
@media(max-width:999px){
  .shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,12,16,0),rgba(10,12,16,.14) 32%,rgba(10,12,16,.62) 74%,rgba(10,12,16,.8))}
  .hero{position:relative}
  .hero h1{position:absolute;z-index:6;left:20px;right:20px;top:calc(var(--shotH) - 22px);
    transform:translateY(-100%);color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.4)}
  .hero-left{padding-top:calc(var(--shotH) * 0 + 20px)}
  .varrow{display:none}
  .vlabel{writing-mode:horizontal-tb;top:auto;left:20px;right:auto;
    bottom:calc(22px + var(--h1fs) * 4.16 + 14px);
    padding:8px 15px;font-size:10px;letter-spacing:.2em}
  .nav{display:none}
  .burger{position:absolute;left:14px;top:14px;z-index:8;width:46px;height:46px;border-radius:50%;
    background:#fff;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:4px;padding:0;box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
  .burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
  .hero-left{gap:22px}
  .about{order:-1;max-width:none}
  .hdiv{order:-1}
  .hdash{display:none}
  .hero-btn{width:100%;justify-content:center}
  .brandpill{padding:6px 15px 6px 6px;gap:9px}
  .brandpill .blogo{width:34px;height:34px}
  .brandpill .nm{padding-right:0}
  .brandpill .nm b{font-size:13px}
  .brandpill .nm span{font-size:10.5px}
}

/* ── листание пространства на телефоне (в конце: перебивает правила выше) ── */
@media(max-width:559px){
}
/* ══════════ Оформление внутренних страниц ══════════
   Подставляется вместо токена PAGECSS сразу после общих стилей лендинга,
   (сам токен здесь не пишем: сборка ищет его по тексту и считает незакрытым),
   поэтому здесь только то, чего на лендинге нет, и точечные перебивки.
   Правки - в build/parts/pages.css, потом python build/inject.py */

/* ── шапка внутренней страницы ── */
/* Логотип, разделы, телефон и «Записаться» - тот же кусок, что на первом экране
   лендинга. Нижний отступ там рассчитан на воздух перед коллажем,
   здесь под шапкой сразу текст, поэтому он меньше. */
.phero .h2bar{padding:4px 2px clamp(16px,2.2vw,26px)}
/* .phero .nav ниже показывает ленту разделов страницы и на телефоне; до ссылок
   шапки это правило доходить не должно - там их прячет бургер, как на лендинге. */
@media(max-width:899px){.phero .h2bar .nav{display:none}}
.phero{background:var(--card);border-radius:var(--r);overflow:hidden;position:relative;
  margin-bottom:clamp(12px,1.6vw,20px);padding:clamp(14px,1.8vw,22px)}
.phero-grid{display:grid;gap:clamp(18px,2.2vw,26px)}
/* Колонка иначе не дает себя сузить: у элемента сетки минимальная ширина равна
   содержимому, а лента ссылок в одну строку шире телефона - и весь первый экран
   вылезал за край окна. */
.phero-grid>*{min-width:0}
@media(min-width:1000px){.phero-grid{grid-template-columns:1.08fr .92fr;align-items:stretch}}
.phero-left{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);
  padding:clamp(8px,1.4vw,20px) clamp(6px,1.2vw,16px) clamp(8px,1.4vw,16px)}
/* на лендинге навигация спрятана на телефоне - здесь она нужна везде */
.phero .nav{display:flex;flex-wrap:wrap}
.snav{position:relative;align-self:flex-start;max-width:100%}
.snav-t{display:none}
/* На телефоне лента разделов не помещается в строку: раньше она либо ложилась
   в два ряда, либо обрезалась у края. Здесь это кнопка со списком. */
@media(max-width:719px){
  .snav{align-self:stretch}
  /* Правка заказчика 2026-09-02: на телефоне подпись стоит по центру кнопки,
     стрелка идет сразу за ней, а не прижимается к правому краю. */
  .snav-t{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
    background:var(--soft);border:0;border-radius:999px;padding:14px 20px;cursor:pointer;
    font-size:13.5px;font-weight:600;color:var(--ink);text-align:center}
  .snav-t i{font-style:normal;font-size:10px;color:var(--dim);transition:transform .22s}
  .snav.on .snav-t i{transform:rotate(180deg)}
  .snav .nav{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--card);border:1px solid var(--line);border-radius:20px;padding:8px;
    box-shadow:0 22px 44px -24px rgba(20,18,40,.55)}
  .snav.on .nav{display:flex}
  /* Правка заказчика 2026-09-02: пункты списка стоят по центру, как подпись кнопки */
  .snav .nav a{padding:12px 15px;text-align:center}
}
.crumb{font-size:11.5px;letter-spacing:.04em;color:var(--dim)}
.crumb a{color:var(--dim)}
.crumb a:hover{color:var(--ink)}
.crumb i{font-style:normal;margin:0 7px;color:var(--dim)}
.phero h1{font-size:clamp(31px,3.9vw,50px)}
/* вторая строка заголовка идет тем же черным: серую подачу убрали по правке заказчика */
.phero .lede{margin-top:0}
.phero-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.phero-shot{position:relative;border-radius:20px;overflow:hidden;min-height:clamp(230px,32svh,400px)}
.phero-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero-shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,16,0) 45%,rgba(10,12,16,.72))}
.phero-cap{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;color:#fff;
  font-size:12.5px;line-height:1.5;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.phero-cap b{display:block;font-size:15px;font-weight:600;margin-bottom:4px}

/* ── направление целиком: снимок слева, разбор справа ── */
/* фон карточки = фон снимков направлений (d_*_t.jpg, края ~#f0f0f0),
   иначе на стыке фото и карточки видна граница (правка 2026-09-24) */
.dfull{display:grid;gap:clamp(18px,2.2vw,30px);background:#f0f0f0;border-radius:22px;
  padding:clamp(16px,1.8vw,22px);margin-top:clamp(14px,1.6vw,18px);scroll-margin-top:88px}
@media(min-width:900px){.dfull{grid-template-columns:.82fr 1.18fr;align-items:start}}
.dfull-ph{position:relative;border-radius:16px;overflow:hidden;background:var(--soft);
  aspect-ratio:4/5;min-height:240px}
.dfull-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dfull-n{position:absolute;left:14px;top:12px;z-index:2;font-size:12px;font-weight:600;
  letter-spacing:.08em;color:#fff;background:rgba(17,17,19,.74);backdrop-filter:blur(8px);
  border-radius:999px;padding:6px 12px}
.dfull-tx{display:flex;flex-direction:column;gap:14px;padding:clamp(2px,1vw,10px) 0}
.dfull-tx h3{font-family:var(--display);font-size:clamp(26px,3vw,38px);font-weight:400;line-height:1.05}
.dfull-lead{font-size:15px;line-height:1.65;color:var(--dim);max-width:56ch}
.dfull-cols{display:grid;gap:14px}
@media(min-width:560px){.dfull-cols{grid-template-columns:1fr 1fr;gap:18px}}
.dfull-cols h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  font-weight:600;margin:0 0 9px}
.dfull-cols ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.dfull-cols li{position:relative;padding-left:17px;font-size:13.5px;line-height:1.5}
.dfull-cols li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;
  background:var(--star-fill);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.dfull-lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
.dfull .perks{margin-top:-4px}
/* у чипа фон плитки, а сама карточка направления тоже плитка: капсулы
   пропадали, и стили читались как строчка серых слов. Здесь фон белый. */
.dfull .perk{background:var(--card);color:var(--ink)}
.dfull .perk:hover{background:var(--soft)}
.dfull-btns{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.dfull-btns .btn{font-size:13.5px;padding:13px 20px}
/* Кнопка «подробнее» залита цветом плитки, а карточка направления - той же
   плиткой: на ней кнопка пропадала. Внутри карточки она белая, с контуром. */
.dfull-btns .btn.light.more,
.dfull-btns .btn.light.more::after{background:var(--card)}
.dfull-btns .btn.light.more:hover,
.dfull-btns .btn.light.more:hover::after{background:var(--soft)}

/* кнопки первого экрана и направлений - по центру, как остальные на телефоне */
@media(max-width:719px){
  .phero-btns,.dfull-btns{justify-content:center}
}

/* Правка заказчика 2026-09-01: на телефоне «Задать вопрос» стоит под снимком,
   а не в одном ряду с «Записаться». В разметке кнопка есть дважды: копия под
   снимком и исходная в левой колонке. Показана всегда одна из двух. */
.pb-under{display:none}
@media(max-width:719px){
  .pb-under{display:flex}
  .phero-btns:not(.pb-under) .btn.light{display:none}
}

/* фишки педагогов направления */
.tchips{display:flex;flex-wrap:wrap;gap:8px}
.tchip{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:6px 15px 6px 6px;font-size:13px;font-weight:500;transition:border-color .2s,transform .2s}
.tchip:hover{border-color:var(--accent);transform:translateY(-2px)}
.tchip span{width:28px;height:28px;border-radius:50%;background:var(--soft);color:var(--ink);
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
/* у названного педагога в кружке стоит его снимок - тот же файл, что
   в карточке на странице «Преподаватели»; у неизвестных остается знак вопроса */
.tchip span.ph{background-size:cover;background-position:center}

/* ── тарифы: сравнительная таблица по референсу bbcc8f88 ──
   Слева признак, справа колонки форматов. Никаких карточек - только тонкие
   линии между строками. На узком экране таблица прокручивается вбок:
   сравнение теряет смысл, если колонки не видно рядом. */
/* overflow-y:hidden - по той же причине, что у лент лендинга: одна
   заданная ось делает вторую прокручиваемой, и таблицу можно было
   утащить пальцем вверх (правка заказчика 2026-09-02). */
.pmx{margin-top:26px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.pmx::-webkit-scrollbar{display:none}
.pmx-in{min-width:640px}
.pmx-r{display:grid;grid-template-columns:1.15fr repeat(3,1fr);gap:clamp(12px,2vw,26px);
  align-items:center;padding:14px 2px;border-bottom:1px solid var(--line)}
.pmx-r:last-child{border-bottom:0}
.pmx-lbl{font-size:13px;line-height:1.45;color:var(--ink)}
.pmx-r>span:not(.pmx-lbl){font-size:14px;line-height:1.45}
/* шапка: названия форматов крупно, как в референсе */
.pmx-head{padding-top:0;align-items:end}
.pmx-head span:not(.pmx-lbl){font-size:clamp(15px,1.35vw,17px);font-weight:600;letter-spacing:-.015em}
.pmx-head .pmx-lbl{font-size:clamp(14px,1.25vw,16px);color:var(--ink);font-weight:600}
/* строка цены: крупная сумма акцентом и две строки мелким */
.pmx-price{align-items:start}
.pmx-price b{display:block;font-size:clamp(21px,2.2vw,27px);font-weight:600;letter-spacing:-.02em;
  color:var(--accent)}
.pmx-price b.mute{color:var(--ink);font-size:clamp(16px,1.6vw,19px)}
.pmx-price small{display:block;margin-top:6px;font-size:11.5px;line-height:1.5;color:var(--dim)}
/* галочка и прочерк */
.pmx-y{font-size:19px;line-height:1;color:var(--ink)}
.pmx-n{color:var(--ink)}   /* тем же черным, что галочки: серый прочерк не читался */
/* нижняя строка с кнопками */
.pmx-btns{border-bottom:0;padding-top:22px}
.pmx-btns .btn{font-size:13.5px;padding:13px 20px;width:100%;justify-content:center}
/* На телефоне колонки рядом не помещаются. Раскладываем не по признакам, а по
   форматам: три блока подряд, в каждом свой формат и все его строки. Порядок
   ячеек задается order - строки таблицы становятся display:contents, поэтому
   ячейки попадают прямо в сетку и выстраиваются по колонкам, а не по рядам.
   Подпись строки берется из data-l, название формата - из data-f. */
@media(max-width:719px){
  .pmx{overflow:visible}
  .pmx-in{min-width:0;display:grid;grid-template-columns:minmax(0,1fr)}
  .pmx-r{display:contents}
  .pmx-r>span.pmx-lbl{display:none}
  .pmx-r>span:nth-child(2){order:1}
  .pmx-r>span:nth-child(3){order:2}
  .pmx-r>span:nth-child(4){order:3}
  /* строка формата: слева признак, справа значение */
  .pmx-r>span:not(.pmx-lbl){display:flex;align-items:baseline;justify-content:space-between;
    gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
  .pmx-r>span:not(.pmx-lbl)::before{content:attr(data-l);flex:none;font-size:13px;color:var(--dim)}
  /* заголовок блока - название формата из шапки таблицы */
  .pmx-head>span:not(.pmx-lbl){display:block;font-family:var(--display);font-weight:400;
    font-size:26px;line-height:1.1;letter-spacing:-.01em;
    margin:26px 0 2px;padding-top:20px;border-top:1px solid var(--line)}
  .pmx-in>.pmx-head:first-child>span:nth-child(2){margin-top:6px;padding-top:0;border-top:0}
  /* цена: признак строкой выше, под ним сумма и пояснение */
  .pmx-price>span:not(.pmx-lbl){display:block;padding:11px 0}
  .pmx-price>span:not(.pmx-lbl)::before{display:block;margin-bottom:3px}
  .pmx-price small{margin-top:3px}
  /* кнопка одна и в самом низу: все три вели на одну и ту же форму записи */
  .pmx-r.pmx-btns>span{order:4}
  .pmx-btns>span:not(.pmx-lbl){display:block;padding:22px 0 0;border-bottom:0}
  .pmx-btns>span:not(.pmx-lbl)::before{display:none}
  .pmx-btns>span:nth-child(3),.pmx-btns>span:nth-child(4){display:none}
}

/* ── таблица абонементов под сравнением форматов (цены школы от 2026-09-22) ──
   Те же тонкие линии между строками, что у .pmx. Шесть колонок рядом не
   помещаются уже на планшете, поэтому до 720px таблица прокручивается вбок,
   а на телефоне каждая строка становится карточкой: название абонемента
   крупно, под ним признаки с подписью из data-l. */
.abn-h{margin-top:clamp(40px,5vw,64px);font-family:var(--display);font-weight:400;
  font-size:clamp(25px,2.7vw,34px);line-height:1.1;letter-spacing:-.005em}
.abn-wrap{margin-top:18px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.abn-wrap::-webkit-scrollbar{display:none}
.abn{width:100%;min-width:520px;border-collapse:collapse;font-size:14px;line-height:1.45}
.abn th,.abn td{text-align:left;font-weight:400;padding:14px 14px 14px 0;
  border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.abn thead th{padding-top:0;font-size:12.5px;color:var(--dim)}
.abn tbody th{font-size:15px;font-weight:600;letter-spacing:-.015em}
.abn tbody th small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--dim)}
.abn b{font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--accent)}
.abn tbody tr:last-child>*{border-bottom:0}
/* кнопка записи в строке абонемента */
.abn td.abn-go{text-align:right;padding-right:0;vertical-align:middle}
.abn-go .btn{font-size:13px;padding:11px 18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:719px){
  .abn td.abn-go{text-align:left;padding-top:10px}
}
.abn-note{margin-top:20px;font-size:13px;line-height:1.65;color:var(--dim);max-width:78ch}
@media(max-width:719px){
  .abn-wrap{overflow:visible}
  .abn{min-width:0}
  .abn thead{display:none}
  .abn,.abn tbody,.abn tr,.abn th,.abn td{display:block}
  .abn tr{padding:16px 0 10px;border-bottom:1px solid var(--line)}
  .abn tbody tr:last-child{border-bottom:0}
  .abn th,.abn td{border:0;padding:5px 0;white-space:normal}
  .abn tbody th{font-family:var(--display);font-size:24px;font-weight:400;line-height:1.1;
    letter-spacing:-.01em;margin-bottom:4px}
  .abn tbody th small{font-family:"Onest",system-ui,sans-serif;font-size:12px}
  .abn td{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
  .abn td::before{content:attr(data-l);flex:none;font-size:13px;color:var(--dim)}
}

/* ── сетка карточек педагогов; сама карточка описана в общей таблице ── */
/* Кнопка «Записаться к преподавателю» свисает с нижнего края карточки на
   19px, и ее тень уходит вниз еще примерно на 34. При зазоре 12px она легла
   бы на карточку следующего ряда, поэтому между рядами свой запас; по
   горизонтали зазор прежний. Нижний ряд помещается в отступ секции. */
.pgrid{display:grid;column-gap:12px;row-gap:62px;margin-top:30px}
/* тот же запас снизу, что у карточек на главной (.teagrid): без него кнопка
   ложится на строку «Стили» */
.pgrid .pcard-tx{padding-bottom:48px}
@media(min-width:700px){.pgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.pgrid{grid-template-columns:repeat(3,1fr)}}

/* ── фильтр педагогов по направлению ──
   На широком экране это лента капсул, как навигация по разделам. На телефоне
   в строку они не помещаются, поэтому там кнопка со списком - как у разделов
   страницы, чтобы поведение на сайте было одно и то же. */
.pfil{position:relative;margin-top:26px;align-self:flex-start}
.pfil-t{display:none}
.pfil-list{display:inline-flex;flex-wrap:wrap}
.pfil-list button{font-size:13.5px;font-weight:500;padding:11px 17px;border-radius:999px;
  white-space:nowrap;border:0;background:none;color:inherit;cursor:pointer;
  transition:background .2s,color .2s}
.pfil-list button:hover{background:rgba(0,0,0,.06)}
.pfil-list button.on{background:var(--dark);color:#fff;font-weight:600}
.pcard[hidden]{display:none}
@media(max-width:719px){
  .pfil-t{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
    background:var(--soft);border:0;border-radius:999px;padding:14px 20px;cursor:pointer;
    font-size:13.5px;font-weight:600;color:var(--ink);text-align:left}
  .pfil-t i{font-style:normal;font-size:10px;color:var(--dim);transition:transform .22s}
  .pfil.open .pfil-t i{transform:rotate(180deg)}
  .pfil-list{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--card);border:1px solid var(--line);border-radius:20px;padding:8px;
    box-shadow:0 22px 44px -24px rgba(20,18,40,.55)}
  .pfil.open .pfil-list{display:flex}
  .pfil-list button{text-align:left;padding:12px 15px}
}


/* ── как добраться ── */
.route{display:grid;gap:10px;margin-top:26px}
@media(min-width:760px){.route{grid-template-columns:repeat(3,1fr)}}
.rcard{background:var(--tile);border-radius:18px;padding:20px 21px;display:flex;flex-direction:column;gap:9px}
/* вместо номеров - объемные значки лендинга, только отступ под карточку меньше */
.rcard .adv-ico{margin-bottom:3px}
.rcard h3{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.rcard p{font-size:13.5px;line-height:1.6;color:var(--dim)}