/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/golos-text-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/golos-text-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/golos-text-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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/golos-text-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/golos-text-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/golos-text-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/golos-text-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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/golos-text-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/golos-text-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/golos-text-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/golos-text-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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/golos-text-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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/golos-text-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/golos-text-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/golos-text-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;
}
/* latin */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/golos-text-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;
}
/* adlam */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-adlam.woff2") format('woff2');
  unicode-range: U+061F, U+0640, U+2015, U+201B, U+2020-2021, U+2030, U+204F, U+25CC, U+2E28-2E29, U+2E41, U+1E900-1E95F;
}
/* canadian-aboriginal */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-canadian-aboriginal.woff2") format('woff2');
  unicode-range: U+02C7, U+02D8-02D9, U+02DB, U+0307, U+1400-167F, U+18B0-18F5, U+25CC, U+11AB0-11ABF;
}
/* cherokee */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-cherokee.woff2") format('woff2');
  unicode-range: U+0300-0302, U+0304, U+030B-030C, U+0323-0324, U+0330-0331, U+13A0-13FF, U+AB70-ABBF;
}
/* math */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-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;
}
/* old-permic */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-old-permic.woff2") format('woff2');
  unicode-range: U+0300, U+0306-0308, U+0313, U+0483, U+20DB, U+25CC, U+10350-1037A;
}
/* symbols */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-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;
}
/* symbols2 */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-symbols2.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* syriac */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-syriac.woff2") format('woff2');
  unicode-range: U+0303-0304, U+0307-0308, U+030A, U+0320, U+0323-0325, U+032D-032E, U+0330-0331, U+060C, U+061B-061C, U+061F, U+0621, U+0640, U+064B-0655, U+0660-066C, U+0670, U+0700-074F, U+0860-086A, U+1DF8, U+1DFA, U+200C-200F, U+25CC, U+2670-2671;
}
/* vietnamese */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-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;
}
/* latin-ext */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-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;
}
/* latin */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-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;
}
/* adlam */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-adlam.woff2") format('woff2');
  unicode-range: U+061F, U+0640, U+2015, U+201B, U+2020-2021, U+2030, U+204F, U+25CC, U+2E28-2E29, U+2E41, U+1E900-1E95F;
}
/* canadian-aboriginal */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-canadian-aboriginal.woff2") format('woff2');
  unicode-range: U+02C7, U+02D8-02D9, U+02DB, U+0307, U+1400-167F, U+18B0-18F5, U+25CC, U+11AB0-11ABF;
}
/* cherokee */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-cherokee.woff2") format('woff2');
  unicode-range: U+0300-0302, U+0304, U+030B-030C, U+0323-0324, U+0330-0331, U+13A0-13FF, U+AB70-ABBF;
}
/* math */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-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;
}
/* old-permic */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-old-permic.woff2") format('woff2');
  unicode-range: U+0300, U+0306-0308, U+0313, U+0483, U+20DB, U+25CC, U+10350-1037A;
}
/* symbols */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-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;
}
/* symbols2 */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-symbols2.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* syriac */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-syriac.woff2") format('woff2');
  unicode-range: U+0303-0304, U+0307-0308, U+030A, U+0320, U+0323-0325, U+032D-032E, U+0330-0331, U+060C, U+061B-061C, U+061F, U+0621, U+0640, U+064B-0655, U+0660-066C, U+0670, U+0700-074F, U+0860-086A, U+1DF8, U+1DFA, U+200C-200F, U+25CC, U+2670-2671;
}
/* vietnamese */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-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;
}
/* latin-ext */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-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;
}
/* latin */
@font-face {
  font-family: 'Google Sans Code';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/google-sans-code-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;
}

/* ============================================================
   COMU — comu.media
   Shared design system. Monochrome, airy, technological.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Light theme (default) — warm paper, antigravity-like */
  --bg:        oklch(0.974 0.006 83);
  --bg-2:      oklch(0.962 0.007 83);
  --surface:   oklch(0.992 0.004 83);
  --ink:       oklch(0.235 0.012 75);
  --ink-soft:  oklch(0.40 0.012 75);
  --muted:     oklch(0.555 0.012 75);
  --faint:     oklch(0.70 0.010 75);
  --line:      oklch(0.905 0.008 83);
  --line-2:    oklch(0.845 0.010 83);
  --accent:    oklch(0.255 0.014 75);
  --on-accent: oklch(0.98 0.006 83);
  --code-bg:   oklch(0.945 0.008 83);
  --tint:      oklch(0.62 0.13 38);

  /* Strategic-draft accents — warm amber (growth) + cool teal (savings) */
  --amber:     #c97b13;
  --amber-ink: #b06d0f;
  --teal:      #2f7d63;
  --teal-ink:  #2a6f58;

  --radius:    14px;
  --radius-sm: 9px;
  --maxw:      1240px;
  --gutter:    clamp(24px, 5vw, 72px);

  /* Spacing scale — 4px base, modular. Use these for all rhythm. */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 160px;
  /* Fluid section rhythm */
  --section-y: clamp(80px, 10vw, 168px);
  --head-gap:  clamp(56px, 7vw, 96px);

  --sans: "Golos Text", system-ui, -apple-system, sans-serif;
  --mono: "Google Sans Code", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  /* «Strategic draft» board — warm near-black, marker on slate */
  --bg:        #0e0e0d;
  --bg-2:      #161614;
  --surface:   #1a1a17;
  --ink:       #f0ebe0;
  --ink-soft:  #e8dcc8;
  --muted:     #8a8070;
  --faint:     #6a6258;
  --line:      #2a2825;
  --line-2:    #3a3833;
  --accent:    #f0ebe0;
  --on-accent: #0e0e0d;
  --code-bg:   #1c1b18;
  --tint:      #EF9F27;

  --amber:     #EF9F27;
  --amber-ink: #f0b658;
  --teal:      #5DCAA5;
  --teal-ink:  #7ad6b8;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  font-size: 17px;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
  overflow-x: hidden;
}

/* fixed background layer — robust against host overrides, enables soft hero glow */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(80% 50% at 78% -8%, color-mix(in oklab, var(--tint) 9%, transparent), transparent 60%),
    var(--bg);
  transition: background 0.5s var(--ease);
}
/* grain / noise — tactile draft surface, kills the flat-template feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::after { opacity: 0.06; }
@media (prefers-reduced-motion: no-preference) {}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--ink); color: var(--bg); }

/* ---------- Language visibility ---------- */
[data-lang="ru"] [data-l="kk"] { display: none !important; }
[data-lang="kk"] [data-l="ru"] { display: none !important; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(56px, 7vw, 104px); }
.divider { height: 1px; background: var(--line); border: 0; }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--line-2);
  flex: none;
}
.eyebrow--plain::before { display: none; }

h1, h2, h3 { font-weight: 500; letter-spacing: -0.028em; line-height: 1.02; }
.display {
  font-size: clamp(2.9rem, 7.2vw, 6.3rem);
  font-weight: 400;
  letter-spacing: -0.038em;
  line-height: 0.99;
  text-wrap: balance;
}
.h-xl { font-size: clamp(2.1rem, 4.6vw, 3.9rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.h-lg { font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -0.026em; line-height: 1.08; }
.h-md { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.15; }
.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  max-width: 56ch;
}
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.body { color: var(--ink-soft); text-wrap: pretty; }
.body p + p { margin-top: 1em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 12px 22px;
  border-radius: 100px;
  border: 1px solid transparent;
  transition: all 0.35s var(--ease);
  white-space: nowrap;
  line-height: 1;
}
.btn .arw { transition: transform 0.35s var(--ease); display: inline-block; }
.btn:hover .arw { transform: translateX(4px); }
.btn--solid { background: var(--accent); color: var(--on-accent); }
.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px color-mix(in oklab, var(--ink) 55%, transparent); }
.btn--ghost { border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--lg { padding: 15px 28px; font-size: 16px; }

.link-arw {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 3px;
  transition: gap 0.3s var(--ease), border-color 0.3s var(--ease);
}
.link-arw:hover { gap: 13px; border-color: var(--ink); }

/* ---------- Header ---------- */
.hd {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding-top: clamp(12px, 1.6vw, 20px);
  transition: padding 0.4s var(--ease);
}
.hd__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(1140px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  height: 64px;
  padding: 0 10px 0 24px;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--line);
  border-radius: 100px;
  box-shadow: 0 10px 34px -22px color-mix(in oklab, var(--ink) 45%, transparent);
  transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.hd.scrolled .hd__in {
  box-shadow: 0 16px 44px -22px color-mix(in oklab, var(--ink) 55%, transparent);
  border-color: var(--line-2);
}
.brand {
  justify-self: start;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.03em;
  display: inline-flex; align-items: baseline; gap: 3px;
}
.brand__mk { font-size: 12.5px; font-weight: 400; color: var(--muted); letter-spacing: -0.01em; }
.brand__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); display: inline-block; }

.nav { display: flex; align-items: center; gap: 2px; justify-self: center; }
.nav a {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 450;
  letter-spacing: -0.006em;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.25s;
}
.nav a:hover { color: var(--ink); background: none; }
.nav a.active { color: var(--ink); }

.hd__tools { display: flex; align-items: center; gap: 14px; justify-self: end; }
.langsw {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12.5px; color: var(--muted);
}
.langsw__sep { opacity: 0.5; }
.langsw button { color: var(--muted); letter-spacing: 0.02em; transition: color 0.2s; padding: 2px; }
.langsw button.on { color: var(--ink); font-weight: 500; }
.langsw button:hover { color: var(--ink); }
.hd__cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -0.006em;
  color: var(--ink);
  padding: 9px 18px; border-radius: 100px;
  border: 1px solid var(--line-2);
  transition: background 0.3s var(--ease), color 0.3s, border-color 0.3s;
}
.hd__cta:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.hd__cta .arw { transition: transform 0.35s var(--ease); }
.hd__cta:hover .arw { transform: translateX(3px); }
.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--ink);
  transition: background 0.25s, border-color 0.25s, transform 0.4s var(--ease);
}
.icon-btn:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn .sun { display: none; }
[data-theme="dark"] .icon-btn .sun { display: block; }
[data-theme="dark"] .icon-btn .moon { display: none; }

.burger { display: none; }

.hd__cta { }
@media (max-width: 980px) {
  .nav, .hd__cta { display: none; }
  .burger { display: grid; }
}

/* Mobile menu */
.mmenu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg);
  padding: 96px var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 6px;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}
.mmenu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mmenu a {
  font-family: var(--sans);
  font-size: 2rem;
  font-weight: 450;
  letter-spacing: -0.02em;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.mmenu a .n { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.mmenu__foot { margin-top: auto; display: flex; gap: 12px; align-items: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative; text-align: center; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-height: min(94vh, 940px);
  padding-top: clamp(150px, 20vh, 220px);
  padding-bottom: clamp(80px, 12vh, 150px);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(248,245,239,0) 50%, rgba(248,245,239,0.7) 84%, var(--bg) 100%);
}
.hero__wash {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  z-index: 0; pointer-events: none; user-select: none;
}
.hero > .wrap { position: relative; z-index: 1; }
.hero__eyebrow { margin-bottom: var(--s-6); display: flex; justify-content: center; }
.hero .display { margin-inline: auto; max-width: 18ch; }
.hero__sub { margin: var(--s-6) auto 0; }
.hero .lead { margin-inline: auto; }
.hero__cta { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: center; }
.hero__visual { margin-top: clamp(56px, 8vw, 104px); }
.hero__visual .vband {
  aspect-ratio: 16 / 7;
  border-radius: clamp(16px, 2vw, 26px);
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 120% at 28% 0%, color-mix(in oklab, var(--tint) 20%, transparent), transparent 56%),
    radial-gradient(70% 120% at 100% 100%, color-mix(in oklab, var(--ink) 9%, transparent), transparent 56%),
    var(--bg-2);
  position: relative; overflow: hidden;
  box-shadow: 0 50px 100px -60px color-mix(in oklab, var(--ink) 65%, transparent);
}
.vband__tag {
  position: absolute; left: 18px; bottom: 16px;
  font-size: 13px; color: var(--muted);
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  border: 1px solid var(--line); padding: 6px 13px; border-radius: 100px; backdrop-filter: blur(8px);
}

/* ---------- Manifesto / statement ---------- */
.statement { padding-block: clamp(90px, 16vw, 220px); text-align: center; }
.statement__h {
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.0;
  text-wrap: balance;
  margin-inline: auto;
}
.statement__p {
  margin: clamp(30px, 4vw, 52px) auto 0;
  max-width: 58ch;
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------- Closer ---------- */
.closer { padding-block: clamp(80px, 13vw, 180px); }
.closer__row { margin-top: clamp(34px, 5vw, 52px); display: flex; justify-content: center; }
.hero__meta {
  margin-top: 64px;
  display: flex; flex-wrap: wrap; gap: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.hero__meta .mi { display: flex; flex-direction: column; gap: 5px; }
.hero__meta .mi b { font-size: 1.7rem; font-weight: 500; letter-spacing: -0.02em; }
.hero__meta .mi span { font-family: var(--sans); font-size: 13.5px; color: var(--muted); letter-spacing: -0.006em; text-transform: none; }

/* abstract hero canvas placeholder */
.canvas-ph {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 18% 12%, color-mix(in oklab, var(--tint) 16%, transparent), transparent 52%),
    radial-gradient(130% 120% at 88% 90%, color-mix(in oklab, var(--ink) 8%, transparent), transparent 55%),
    var(--bg-2);
  overflow: hidden;
}
.canvas-ph__tag {
  position: absolute; left: 16px; bottom: 14px;
  font-family: var(--sans); font-size: 13px; letter-spacing: -0.005em;
  color: var(--muted); text-transform: none;
  background: color-mix(in oklab, var(--surface) 80%, transparent); border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 100px; backdrop-filter: blur(8px);
}

/* ---------- Video frame (team video) ---------- */
.vframe {
  position: relative;
  border-radius: clamp(16px, 2vw, 24px);
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 120% at 20% 0%, color-mix(in oklab, var(--tint) 18%, transparent), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, color-mix(in oklab, var(--ink) 10%, transparent), transparent 58%),
    var(--bg-2);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 40px 90px -50px color-mix(in oklab, var(--ink) 60%, transparent);
}
.vframe__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.vframe__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 22px;
  transition: opacity 0.5s var(--ease);
}
.vframe.playing .vframe__overlay { opacity: 0; pointer-events: none; }
.vframe__play {
  width: clamp(64px, 7vw, 92px);
  height: clamp(64px, 7vw, 92px);
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: grid; place-items: center;
  transition: transform 0.4s var(--ease), background 0.3s;
  box-shadow: 0 18px 50px -18px color-mix(in oklab, var(--ink) 70%, transparent);
}
.vframe__play svg { width: 34%; height: 34%; margin-left: 8%; }
.vframe:hover .vframe__play { transform: scale(1.06); }
.vframe__cap {
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  border: 1px solid var(--line);
  padding: 9px 18px; border-radius: 100px;
  backdrop-filter: blur(10px);
}
.vframe__corner {
  position: absolute; left: 18px; top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  border: 1px solid var(--line);
  padding: 6px 13px; border-radius: 100px; backdrop-filter: blur(10px);
}
.vframe__corner .rec { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.6 0.2 25); animation: rec-pulse 2s var(--ease) infinite; }
@keyframes rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .vframe__corner .rec { animation: none; } }
.vhint {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--muted);
  margin-top: 18px;
}
.vhint svg { width: 16px; height: 16px; flex: none; }

/* ---------- Marquee / logos ---------- */
.logos { display: flex; align-items: center; gap: clamp(28px, 5vw, 72px); flex-wrap: wrap; }
.logo-ph {
  font-family: var(--sans);
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--faint);
  font-weight: 600;
  transition: color 0.3s;
}
.logo-ph:hover { color: var(--ink); }

.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: clamp(36px, 6vw, 88px); width: max-content; animation: scroll-x 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes scroll-x { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Section header ---------- */
.sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(20px, 2vw, 28px); margin-bottom: var(--head-gap); }
.sec-head__l { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 1.5vw, 24px); max-width: 42ch; }
.sec-head h2 { margin-top: 0 !important; }
.sec-head__r { max-width: 48ch; color: var(--muted); }
.sec-head .eyebrow { margin-bottom: 0; justify-content: center; }
.sec-head .link-arw { margin-top: var(--s-1); }

/* ---------- Services list ---------- */
.svc { border-top: 1px solid var(--line); }
.svc__row {
  display: grid;
  grid-template-columns: 80px 1.1fr 1.4fr auto;
  gap: 28px;
  align-items: start;
  padding: clamp(28px, 4vw, 48px) 4px;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.4s var(--ease), background 0.4s var(--ease);
  position: relative;
}
.svc__row:hover { padding-left: 18px; background: color-mix(in oklab, var(--ink) 3%, transparent); }
.svc__num { font-family: var(--mono); font-size: 14px; color: var(--muted); padding-top: 10px; }
.svc__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500; letter-spacing: -0.028em; line-height: 1.05; }
.svc__desc { color: var(--ink-soft); max-width: 46ch; padding-top: 4px; }
.svc__tags { display: flex; flex-direction: column; gap: 7px; align-items: flex-end; padding-top: 6px; }
.svc__tags span { font-family: var(--sans); font-size: 13.5px; color: var(--muted); letter-spacing: -0.005em; }
@media (max-width: 860px) {
  .svc__row { grid-template-columns: 40px 1fr; gap: 8px 18px; }
  .svc__desc { grid-column: 2; }
  .svc__tags { grid-column: 2; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; padding-top: 2px; }
}

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--bg); padding: clamp(28px, 3.5vw, 48px) clamp(20px, 2.5vw, 34px); display: flex; flex-direction: column; gap: 12px; min-height: 200px; }
.stat__num { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 400; letter-spacing: -0.04em; line-height: 0.95; }
.stat__num .u { font-size: 0.45em; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.stat__lbl { font-family: var(--sans); font-size: 14px; color: var(--muted); letter-spacing: -0.006em; margin-top: auto; line-height: 1.45; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr; } }

/* ---------- Cards (cases) ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.5vw, 32px); }
.card { display: flex; flex-direction: column; gap: 18px; }
.card__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 130% at 22% 18%, color-mix(in oklab, var(--tint) 14%, transparent), transparent 50%),
    radial-gradient(120% 120% at 85% 88%, color-mix(in oklab, var(--ink) 7%, transparent), transparent 52%),
    var(--bg-2);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease);
}
.card:hover .card__media { transform: translateY(-6px); }
.card__media .tag {
  position: absolute; left: 14px; top: 14px;
  font-family: var(--sans); font-size: 13px; letter-spacing: -0.005em; text-transform: none; font-weight: 500;
  color: var(--ink-soft); background: color-mix(in oklab, var(--surface) 82%, transparent); border: 1px solid var(--line);
  padding: 5px 12px; border-radius: 100px; backdrop-filter: blur(8px);
}
.card__media .res {
  position: absolute; right: 14px; bottom: 14px;
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  background: color-mix(in oklab, var(--surface) 82%, transparent); border: 1px solid var(--line);
  padding: 6px 13px; border-radius: 100px; font-weight: 500; backdrop-filter: blur(8px);
}
.card__title { font-size: 1.4rem; font-weight: 500; letter-spacing: -0.024em; }
.card__meta { display: flex; gap: 12px; font-family: var(--sans); font-size: 13.5px; color: var(--muted); }
@media (max-width: 720px) { .cards { grid-template-columns: 1fr; } }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.step { padding-top: 26px; border-top: 1px solid var(--ink); display: flex; flex-direction: column; gap: 14px; padding-right: 18px; }
.step__n { font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: 0; }
.step__t { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; }
.step__d { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.5vw, 28px); }
.quote { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 26px; background: var(--bg-2); }
.quote__txt { font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.4; letter-spacing: -0.018em; font-weight: 450; text-wrap: pretty; }
.quote__by { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.quote__av { width: 42px; height: 42px; border-radius: 50%; background: var(--code-bg); border: 1px solid var(--line); flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.quote__by b { font-weight: 500; font-size: 15px; display: block; }
.quote__by span { font-family: var(--sans); font-size: 13.5px; color: var(--muted); letter-spacing: -0.006em; }
@media (max-width: 720px) { .quotes { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); padding: clamp(44px, 7vw, 96px) var(--gutter); text-align: center; position: relative; overflow: hidden; }
.cta-band .display { margin-bottom: 30px; }
.cta-band .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.ft { border-top: 1px solid var(--line); padding-block: clamp(64px, 8vw, 120px) 36px; margin-top: clamp(40px, 6vw, 80px); }
.ft__grid { display: grid; grid-template-columns: 1.3fr 1.7fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.ft__word { font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 500; letter-spacing: -0.05em; line-height: 0.85; display: inline-block; color: var(--ink); }
.ft__tag { color: var(--muted); max-width: 30ch; font-size: 16px; margin-top: 22px; text-wrap: pretty; }
.ft__cta { margin-top: 26px; }
.ft__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.ft__col h4 { font-size: 13.5px; letter-spacing: -0.005em; color: var(--muted); margin-bottom: 14px; font-weight: 500; }
.ft__col a { display: block; padding: 6px 0; color: var(--ink-soft); font-size: 15px; transition: color 0.2s; }
.ft__col a:hover { color: var(--ink); }
.ft__bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: clamp(56px, 8vw, 100px); padding-top: 26px; border-top: 1px solid var(--line); }
.ft__fine { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.langsw--ft { border: 1px solid var(--line-2); border-radius: 100px; padding: 6px 14px; }
@media (max-width: 760px) { .ft__grid { grid-template-columns: 1fr; gap: 44px; } .ft__cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .ft__cols { grid-template-columns: 1fr 1fr; } .ft__bot { flex-direction: column; align-items: flex-start; gap: 18px; } }

/* ---------- Page hero (inner pages) ---------- */
.phero { padding-top: clamp(150px, 20vh, 210px); padding-bottom: clamp(40px, 6vw, 80px); text-align: center; }
.phero .eyebrow { margin-bottom: 26px; justify-content: center; }
.phero .display { margin-inline: auto; }
.phero .lead { margin: 28px auto 0; }

/* ---------- Benefits (selling trio) ---------- */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.benefit {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: clamp(28px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 0.5s var(--ease), border-color 0.4s;
}
.benefit:hover { transform: translateY(-5px); border-color: var(--line-2); }
.benefit__ic {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--bg);
  margin-bottom: 6px;
}
.benefit__ic svg { width: 22px; height: 22px; }
.benefit__t { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.022em; }
.benefit__d { color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
@media (max-width: 820px) { .benefits { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ---------- Forms ---------- */
.form { display: grid; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field label { font-family: var(--sans); font-size: 13.5px; letter-spacing: -0.005em; text-transform: none; color: var(--muted); font-weight: 500; }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 14px 16px; transition: border-color 0.25s, background 0.25s;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); background: var(--surface); }
.field.err input, .field.err textarea { border-color: oklch(0.55 0.18 25); }
.field .msg { font-family: var(--sans); font-size: 13px; color: oklch(0.55 0.18 25); display: none; }
.field.err .msg { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-family: var(--sans); font-size: 14px; padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 100px; color: var(--ink-soft); transition: all 0.25s; user-select: none; }
.chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.form__ok { display: none; }
.form.sent .form__ok { display: flex; }
.form.sent .form__body { display: none; }

/* ---------- Reveal animation ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: 0.07s; }
.rv[data-d="2"] { transition-delay: 0.14s; }
.rv[data-d="3"] { transition-delay: 0.21s; }
.rv[data-d="4"] { transition-delay: 0.28s; }
.rv[data-d="5"] { transition-delay: 0.35s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ---------- Misc ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.grid-2--hero { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
@media (max-width: 900px) { .grid-2, .grid-2--hero { grid-template-columns: 1fr; } }
.pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13.5px; color: var(--muted); border: 1px solid var(--line); padding: 6px 14px; border-radius: 100px; }
.stack-lg > * + * { margin-top: clamp(16px, 2vw, 24px); }
.center { text-align: center; }
.mt-s { margin-top: var(--s-5); } .mt-m { margin-top: var(--s-6); } .mt-l { margin-top: var(--s-8); }

/* ---------- Density tweak ---------- */
.section { padding-block: calc(clamp(80px, 12vw, 180px) * var(--pad-mult, 1)); }
.section--tight { padding-block: calc(clamp(48px, 7vw, 96px) * var(--pad-mult, 1)); }

/* accent applied to brand dot + eyebrow marker when set */
.brand__dot { background: var(--brand-accent, var(--ink)); }
.eyebrow::before { background: var(--brand-accent, var(--line-2)); }

/* ---------- Tweaks panel ---------- */
.tw-panel {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px color-mix(in oklab, var(--ink) 45%, transparent);
  font-family: var(--sans);
  transform: translateY(16px) scale(0.98);
  opacity: 0; pointer-events: none;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.tw-panel.open { transform: none; opacity: 1; pointer-events: auto; }
.tw-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  font-size: 14px; letter-spacing: -0.005em; text-transform: none; font-weight: 600; color: var(--ink);
}
.tw-x { font-size: 13px; color: var(--muted); width: 22px; height: 22px; border-radius: 50%; }
.tw-x:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 8%, transparent); }
.tw-body { padding: 16px; display: flex; flex-direction: column; gap: 20px; }
.tw-sec { display: flex; flex-direction: column; gap: 10px; }
.tw-sec > label { font-size: 12.5px; letter-spacing: -0.003em; text-transform: none; color: var(--muted); }
.tw-segs { display: flex; border: 1px solid var(--line-2); border-radius: 100px; overflow: hidden; }
.tw-seg { flex: 1; padding: 8px 6px; font-size: 13px; color: var(--muted); transition: color 0.2s, background 0.2s; }
.tw-seg.on { color: var(--on-accent); background: var(--accent); }
.tw-sws { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tw-sw {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; font-size: 13px; color: var(--ink-soft);
  border: 1px solid var(--line-2); border-radius: 9px; transition: border-color 0.2s, background 0.2s;
}
.tw-sw.on { border-color: var(--ink); background: color-mix(in oklab, var(--ink) 5%, transparent); color: var(--ink); }
.tw-sw i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); flex: none; }
@media (max-width: 520px) { .tw-panel { right: 12px; left: 12px; width: auto; } }

/* ============================================================
   STRATEGIC-DRAFT SYSTEM
   Marker rings, wavy underlines, hand-drawn arrows, dashed
   sketch cards & sticker tags. An analyst marking up a board.
   ============================================================ */

/* ---- accent helpers ---- */
.amber { color: var(--amber); }
.teal  { color: var(--teal); }

/* ---- marker ring around a key number ---- */
.mark { position: relative; display: inline-block; isolation: isolate; }
.mark > .ring {
  position: absolute; left: 50%; top: 50%;
  width: 132%; height: 150%;
  transform: translate(-50%, -50%) rotate(-4deg);
  overflow: visible; pointer-events: none; z-index: -1;
  color: var(--amber);
}
.mark.is-teal > .ring { color: var(--teal); }
.mark > .ring ellipse {
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}
/* draw-in on reveal */
.mark > .ring ellipse { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .rv:not(.in) .mark > .ring ellipse { opacity: 0; }
  .rv.in .mark > .ring ellipse {
    animation: ring-draw 0.7s var(--ease-out) 0.45s both;
  }
}
@keyframes ring-draw {
  from { opacity: 0; stroke-dashoffset: 60; transform: scale(0.85); transform-origin: center; }
  to   { opacity: 1; stroke-dashoffset: 0;  transform: scale(1); }
}

/* ---- wavy underline beneath a phrase / metric ---- */
.wavy { position: relative; display: inline-block; }
.wavy > .wave {
  position: absolute; left: -2%; right: -2%; bottom: -0.42em;
  width: 104%; height: 0.42em; overflow: visible; pointer-events: none;
  color: var(--amber); opacity: 0.55;
}
.wavy.is-teal > .wave { color: var(--teal); }
.wavy > .wave path {
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 240; stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .rv:not(.in) .wavy > .wave path { stroke-dashoffset: 240; }
  .rv.in .wavy > .wave path { transition: stroke-dashoffset 0.9s var(--ease-out) 0.5s; stroke-dashoffset: 0; }
}

/* ---- hand-drawn annotation label (marker note) ---- */
.note {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: -0.01em; line-height: 1.2;
  color: var(--amber); opacity: 0.92;
}
.note.is-teal { color: var(--teal); }
.note.is-mut { color: var(--muted); }

/* ---- sketch arrow (svg, rounded caps) ---- */
.sk-arrow { color: var(--line-2); pointer-events: none; }
.sk-arrow path { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.sk-arrow.is-amber { color: var(--amber); opacity: 0.7; }
.sk-arrow.is-teal { color: var(--teal); opacity: 0.7; }

/* ---- dashed sketch card / sticker ---- */
.sketch-card {
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  background: color-mix(in oklab, var(--bg-2) 60%, transparent);
}
.sticker {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--ink-soft); letter-spacing: -0.005em;
  border: 1px dashed var(--line-2); border-radius: 7px;
  padding: 5px 11px; display: inline-flex; align-items: center;
  background: color-mix(in oklab, var(--bg-2) 50%, transparent);
}
.sticker:nth-child(2n) { transform: rotate(-1.4deg); }
.sticker:nth-child(3n) { transform: rotate(1.6deg); }

/* ============================================================
   HERO BOARD — analyst's marked-up growth dashboard
   Always a dark board, regardless of theme (chalkboard feel)
   ============================================================ */
.board {
  --b-ink: #f0ebe0; --b-soft: #d4cbb8; --b-mut: #8f8472; --b-line: #34322c;
  position: relative;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(22px, 3vw, 40px);
  border-radius: clamp(16px, 2vw, 24px);
  border: 1px dashed #3a382f;
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(239,159,39,0.10), transparent 52%),
    radial-gradient(110% 130% at 100% 100%, rgba(93,202,165,0.08), transparent 55%),
    #131210;
  box-shadow: 0 50px 100px -55px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.015);
  text-align: left;
  overflow: hidden;
}
.board::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.5;
  background-image: 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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.board__chart { position: relative; }
.board__chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.board__cards { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 16px); justify-content: center; }
.board__cap {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: -0.01em;
  color: var(--b-mut); margin-top: 4px;
}

/* chart strokes */
.chart-grid { stroke: var(--b-line); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-axis { stroke: #46443c; stroke-width: 1; }
.chart-lbl  { fill: var(--b-mut); font-family: var(--mono); font-size: 11px; }
.chart-curve { fill: none; stroke: var(--amber); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot  { fill: #131210; stroke: var(--amber); stroke-width: 2; }
.chart-dot--end { fill: var(--amber); }
.chart-end-lbl { fill: var(--amber); font-family: var(--sans); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.chart-ann { fill: var(--b-soft); font-family: var(--mono); font-size: 10.5px; }
.chart-ann--teal { fill: var(--teal); }

@media (prefers-reduced-motion: no-preference) {
  .chart-curve { stroke-dasharray: 620; stroke-dashoffset: 0; }
  .hero__visual:not(.in) .chart-curve { stroke-dashoffset: 620; }
  .hero__visual.in .chart-curve { transition: stroke-dashoffset 1.7s var(--ease-out) 0.25s; stroke-dashoffset: 0; }
  .hero__visual:not(.in) .chart-dot,
  .hero__visual:not(.in) .chart-end-lbl,
  .hero__visual:not(.in) .chart-ann,
  .hero__visual:not(.in) .chart-ann-mark { opacity: 0; }
  .hero__visual.in .chart-dot { animation: pop 0.4s var(--ease-out) both; }
  .hero__visual.in .chart-dot:nth-of-type(1) { animation-delay: 0.5s; }
  .hero__visual.in .chart-dot:nth-of-type(2) { animation-delay: 0.85s; }
  .hero__visual.in .chart-dot:nth-of-type(3) { animation-delay: 1.2s; }
  .hero__visual.in .chart-dot:nth-of-type(4) { animation-delay: 1.6s; }
  .hero__visual.in .chart-end-lbl,
  .hero__visual.in .chart-ann-mark { animation: fade-in 0.6s var(--ease-out) 1.8s both; }
  .hero__visual.in .chart-ann { animation: fade-in 0.6s var(--ease-out) 1s both; }
}
@keyframes pop { from { opacity: 0; transform: scale(0); } 60% { transform: scale(1.25); } to { opacity: 1; transform: scale(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* transform-origin fix for SVG circles */
.chart-dot { transform-box: fill-box; transform-origin: center; }

/* mini stat cards on the board */
.bstat {
  border: 1px dashed #3a382f; border-radius: 10px;
  padding: clamp(13px, 1.5vw, 18px) clamp(14px, 1.6vw, 18px);
  background: rgba(255,255,255,0.018);
  display: flex; flex-direction: column; gap: 5px;
}
.bstat__n {
  font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 500; letter-spacing: -0.03em;
  line-height: 1; color: var(--b-ink);
}
.bstat--amber .bstat__n { color: var(--amber); }
.bstat--teal .bstat__n { color: var(--teal); }
.bstat__l { font-size: 12.5px; color: var(--b-soft); line-height: 1.35; letter-spacing: -0.005em; }
.bstat--mut .bstat__n { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--b-soft); }
@media (prefers-reduced-motion: no-preference) {
  .hero__visual:not(.in) .bstat { opacity: 0; transform: translateY(10px); }
  .hero__visual.in .bstat { transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
  .hero__visual.in .bstat:nth-child(1) { transition-delay: 0.6s; }
  .hero__visual.in .bstat:nth-child(2) { transition-delay: 0.8s; }
  .hero__visual.in .bstat:nth-child(3) { transition-delay: 1.0s; }
}
@media (max-width: 720px) {
  .board { grid-template-columns: 1fr; }
}

/* ============================================================
   Section-level draft touches
   ============================================================ */
/* market context stat stickers */
.mkt-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.mkt-stat {
  flex: 1 1 140px; min-width: 130px;
  border: 1px dashed var(--line-2); border-radius: 10px;
  padding: 18px 18px 14px;
  background: color-mix(in oklab, var(--bg-2) 55%, transparent);
}
.mkt-stat:nth-child(2) { transform: rotate(-0.8deg); }
.mkt-stat:nth-child(3) { transform: rotate(0.7deg); }
.mkt-stat__n { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1; }
.mkt-stat__l { font-size: 13px; color: var(--ink-soft); margin-top: 8px; line-height: 1.4; text-wrap: pretty; }
.mkt-stat__src { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-top: 10px; display: block; }
.mkt-stat__src a { border-bottom: 1px solid var(--line-2); }

/* sketched quote */
.quote--sketch { border-style: dashed; position: relative; }
.quote--sketch .quote__mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 64px; line-height: 0.6; color: var(--amber);
  opacity: 0.6; display: block; height: 28px; margin-bottom: 4px;
}

/* benefit sketch icon */
.benefit__ic--sk {
  background: none; color: var(--amber); border: 1px dashed var(--line-2);
  border-radius: 12px; width: 50px; height: 50px;
}
.benefit__ic--sk svg { width: 26px; height: 26px; }
.benefit__ic--sk svg * { stroke-linecap: round; stroke-linejoin: round; }
.benefit__ic--sk.is-teal { color: var(--teal); }
.benefit { position: relative; }
.benefit__metric { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 2px; }

/* services sticker tags + connector */
.svc__tags span { font-family: var(--sans); }
.svc__tags--sk { gap: 8px !important; align-items: flex-end; }
.svc__tags--sk span {
  font-size: 12.5px; color: var(--muted);
  border: 1px dashed var(--line-2); border-radius: 6px; padding: 4px 10px;
  background: color-mix(in oklab, var(--bg-2) 50%, transparent);
}
.svc__tags--sk span:nth-child(2) { transform: rotate(-1.5deg); }
.svc__tags--sk span:nth-child(3) { transform: rotate(1.3deg); }

/* stats marker rings + connectors */
.stats--draft .stat { position: relative; }
.stat__num .mark { letter-spacing: inherit; }

/* cases media result mark */
.card__media .res--mark { border-style: dashed; }
.card__res-line { font-size: 14px; color: var(--ink-soft); line-height: 1.45; text-wrap: pretty; margin-top: -4px; }
.case-amber { color: var(--amber); font-weight: 500; }
.case-teal { color: var(--teal); font-weight: 500; }

/* testimonials interim */
.tmonial-soon {
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  padding: clamp(36px, 6vw, 72px) clamp(28px, 5vw, 64px);
  background: color-mix(in oklab, var(--bg-2) 45%, transparent);
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
}
.tmonial-soon__h { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.1; max-width: 22ch; text-wrap: balance; }
.tmonial-soon__p { color: var(--muted); max-width: 46ch; text-wrap: pretty; }

/* faq heading underline holder */
.faq-h-wrap { display: inline-block; }

/* ============================================================
   PLEEP-STRUCTURE SECTIONS — in COMU's strategic-draft language
   ============================================================ */

/* ---- trust strip (client / channel logos as sketch stickers) ---- */
.trust { padding: clamp(28px, 4vw, 44px) 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.trust__lbl {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--faint); text-align: center; margin-bottom: 22px;
}
.trust__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; }
.trust__chip {
  font-family: var(--mono); font-size: 13.5px; color: var(--muted);
  border: 1px dashed var(--line-2); border-radius: 8px; padding: 9px 16px;
  background: color-mix(in oklab, var(--bg-2) 45%, transparent);
  display: inline-flex; align-items: center; gap: 8px;
}
.trust__chip:nth-child(3n) { transform: rotate(-1.2deg); }
.trust__chip:nth-child(3n+2) { transform: rotate(1deg); }
.trust__chip b { color: var(--ink-soft); font-family: var(--sans); font-weight: 600; }
.trust__chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; font-style: normal; }
.trust__chip:nth-child(2n) i { background: var(--teal); }

/* ---- process steps (01–04) ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: clamp(28px, 4vw, 44px); position: relative; }
.step {
  border: 1px dashed var(--line-2); border-radius: 12px;
  padding: clamp(20px, 2vw, 26px);
  background: color-mix(in oklab, var(--bg-2) 40%, transparent);
  display: flex; flex-direction: column; gap: 12px; position: relative;
}
.step:nth-child(2) { transform: rotate(-0.5deg); }
.step:nth-child(4) { transform: rotate(0.5deg); }
.step__n {
  font-family: var(--mono); font-size: 13px; color: var(--amber);
  letter-spacing: 0.02em;
}
.step:nth-child(2) .step__n, .step:nth-child(4) .step__n { color: var(--teal); }
.step__t { font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.step__d { font-size: 14px; color: var(--muted); line-height: 1.5; text-wrap: pretty; }
/* hand-drawn connector arrows between steps */
.step__arw { position: absolute; right: -16px; top: 38px; width: 22px; height: 14px; z-index: 2; color: var(--line-2); }
.step:last-child .step__arw { display: none; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } .step__arw { display: none; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---- comparison table ---- */
.cmp { margin-top: clamp(28px, 4vw, 44px); border: 1px dashed var(--line-2); border-radius: 14px; overflow: hidden; }
.cmp__grid { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cmp__grid th, .cmp__grid td { padding: 16px 18px; text-align: left; border-bottom: 1px dashed var(--line); }
.cmp__grid thead th { font-weight: 500; color: var(--muted); font-size: 13px; letter-spacing: -0.005em; vertical-align: bottom; }
.cmp__grid thead th.is-us { color: var(--ink); font-size: 15px; }
.cmp__grid .col-us { background: color-mix(in oklab, var(--amber) 9%, transparent); }
.cmp__grid tbody th { font-weight: 400; color: var(--ink-soft); }
.cmp__grid tbody tr:last-child th, .cmp__grid tbody tr:last-child td { border-bottom: none; }
.cmp__yes { color: var(--teal); font-weight: 600; }
.cmp__no { color: var(--faint); }
.cmp__grid td { text-align: center; color: var(--muted); }
.cmp__grid thead th:not(:first-child) { text-align: center; }
.cmp__cap { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-top: 14px; }
@media (max-width: 680px) { .cmp { overflow-x: auto; } .cmp__grid { min-width: 560px; } }

/* ---- trust & security / honesty grid ---- */
.honesty { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: clamp(28px, 4vw, 44px); }
.hcard {
  border: 1px dashed var(--line-2); border-radius: 12px;
  padding: clamp(22px, 2.4vw, 30px);
  background: color-mix(in oklab, var(--bg-2) 40%, transparent);
  display: flex; flex-direction: column; gap: 10px;
}
.hcard__t { font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 500; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
.hcard__t i { width: 9px; height: 9px; border-radius: 2px; background: var(--amber); flex: none; transform: rotate(45deg); font-style: normal; }
.hcard:nth-child(2n) .hcard__t i { background: var(--teal); }
.hcard__d { font-size: 14.5px; color: var(--muted); line-height: 1.55; text-wrap: pretty; }
@media (max-width: 680px) { .honesty { grid-template-columns: 1fr; } }

/* ============================================================
   DASHBOARD SHOWCASE — client's live lead funnel (kanban)
   Echoes a CRM board, but in COMU's marker-on-board language
   ============================================================ */
.dash-sec { position: relative; }
.dashboard {
  --d-line: #34322c;
  position: relative;
  border: 1px dashed #3a382f; border-radius: clamp(16px, 2vw, 22px);
  background:
    radial-gradient(120% 120% at 8% 0%, rgba(239,159,39,0.07), transparent 50%),
    radial-gradient(110% 130% at 100% 100%, rgba(93,202,165,0.06), transparent 55%),
    #131210;
  box-shadow: 0 50px 100px -55px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.015);
  padding: clamp(18px, 2.2vw, 26px);
  overflow: hidden;
  margin-top: clamp(8px, 1vw, 16px);
}
.dashboard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: 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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.dashboard__bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px dashed var(--d-line);
  position: relative; z-index: 1;
}
.dashboard__title { font-family: var(--sans); font-weight: 600; font-size: 15px; color: #f0ebe0; letter-spacing: -0.01em; margin-right: 4px; }
.dashboard__live {
  font-family: var(--mono); font-size: 11px; color: var(--teal); letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto; white-space: nowrap;
}
.dashboard__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(93,202,165,0.5); }
@media (prefers-reduced-motion: no-preference) { .dashboard__live::before { animation: live-pulse 2s ease-out infinite; } }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(93,202,165,0.5); } 70% { box-shadow: 0 0 0 7px rgba(93,202,165,0); } 100% { box-shadow: 0 0 0 0 rgba(93,202,165,0); } }
.dashboard__chip {
  font-family: var(--mono); font-size: 11.5px; color: #b9af9c; white-space: nowrap;
  border: 1px dashed var(--d-line); border-radius: 6px; padding: 4px 9px;
}

/* kanban columns */
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; z-index: 1; }
.kcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kcol__head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 4px; }
.kcol__name { white-space: nowrap; }
.kcol__dot { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); flex: none; }
.kcol--1 .kcol__dot { background: var(--amber); }
.kcol--2 .kcol__dot { background: #c9a24a; }
.kcol--3 .kcol__dot { background: #7fb98f; }
.kcol--4 .kcol__dot { background: var(--teal); }
.kcol__name { font-family: var(--sans); font-weight: 500; font-size: 13px; color: #d4cbb8; letter-spacing: -0.005em; }
.kcol__count { font-family: var(--mono); font-size: 11px; color: #8f8472; margin-left: auto; }
.kcard {
  display: flex; flex-direction: column; gap: 7px;
  border: 1px dashed var(--d-line); border-radius: 9px; padding: 13px 14px;
  background: rgba(255,255,255,0.02);
  display: flex; flex-direction: column; gap: 7px;
  transition: transform 0.18s var(--ease-out), border-color 0.18s var(--ease-out), background 0.18s var(--ease-out);
}
.kcard:hover { transform: translateY(-2px); border-color: #4a473e; background: rgba(255,255,255,0.04); }
.kcard__top { display: flex; align-items: baseline; gap: 8px; }
.kcard__name { font-family: var(--sans); font-weight: 500; font-size: 13.5px; color: #f0ebe0; letter-spacing: -0.01em; white-space: nowrap; min-width: 0; }
.kcard__time { font-family: var(--mono); font-size: 10.5px; color: #6a6258; margin-left: auto; flex: none; white-space: nowrap; }
.kcard__note { font-size: 12.5px; color: #b9af9c; line-height: 1.4; text-wrap: pretty; }
.kcard__src { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: #8f8472; }
.kcard__src i { width: 6px; height: 6px; border-radius: 50%; flex: none; font-style: normal; }
.src-google i { background: #e8b84a; }
.src-meta i { background: #6aa6e8; }
.src-insta i { background: #d873a8; }
.src-tiktok i { background: #6ad0d0; }
.src-yandex i { background: #e87a5a; }
.src-site i { background: #b9af9c; }
.kcard__val { font-family: var(--mono); font-size: 11px; color: var(--teal); }
.kcard__val.is-amber { color: var(--amber-ink); }
/* the "won" cards get a subtle marker tint */
.kcol--4 .kcard { background: rgba(93,202,165,0.05); }
@media (prefers-reduced-motion: no-preference) {
  .rv:not(.in) .kcard { opacity: 0; transform: translateY(8px); }
  .rv.in .kcard { transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
  .rv.in .kcol--1 .kcard { transition-delay: 0.05s; }
  .rv.in .kcol--2 .kcard { transition-delay: 0.18s; }
  .rv.in .kcol--3 .kcard { transition-delay: 0.31s; }
  .rv.in .kcol--4 .kcard { transition-delay: 0.44s; }
}
@media (max-width: 760px) {
  .kanban { grid-template-columns: 1fr 1fr; }
  .dashboard__chip { display: none; }
}
@media (max-width: 440px) { .kanban { grid-template-columns: 1fr; } }

/* feature grid under the board (4-up) */
.feat4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: clamp(28px, 4vw, 44px); }
.feat4__i {
  display: flex; flex-direction: column; gap: 9px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.feat4__t { font-size: clamp(1rem, 1.4vw, 1.12rem); font-weight: 500; letter-spacing: -0.015em; display: flex; align-items: center; gap: 9px; }
.feat4__t i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; font-style: normal; }
.feat4__i:nth-child(2n) .feat4__t i { background: var(--teal); }
.feat4__d { font-size: 13.5px; color: var(--muted); line-height: 1.5; text-wrap: pretty; }
@media (max-width: 860px) { .feat4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .feat4 { grid-template-columns: 1fr; } }

/* ============================================================
   Multi-page additions — services dropdown in header nav.
   Additive only; reuses existing design tokens. The original
   `.nav a` rules still apply to plain nav links.
   ============================================================ */
.nav__link {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 450;
  letter-spacing: -0.006em;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: 0;
  line-height: 1;
}
.nav__link:hover { color: var(--ink); }
.nav__link.active { color: var(--ink); }
.nav__caret { font-size: 9px; opacity: 0.7; transition: transform 0.25s var(--ease); }

.nav__drop { position: relative; display: inline-flex; }
.nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 230px;
  padding: 8px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px -22px color-mix(in oklab, var(--ink) 55%, transparent);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  z-index: 50;
}
.nav__drop:hover .nav__menu,
.nav__drop.open .nav__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__drop:hover .nav__caret,
.nav__drop.open .nav__caret { transform: rotate(180deg); }
.nav__menu a {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 450;
  color: var(--muted);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.nav__menu a:hover {
  color: var(--ink);
  background: color-mix(in oklab, var(--ink) 5%, transparent);
}

/* Process steps reused on inner pages need the same grid as home.
   (.steps already defined above — no override needed.) */

/* Simple two-column info layout for service "what's included" blocks. */
.svc-feature { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 820px) { .svc-feature { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* Contact info list */
.contact-info { display: grid; gap: 18px; }
.contact-info a, .contact-info span { color: var(--ink-soft); }
.contact-info dt { font-size: 13.5px; color: var(--muted); margin-bottom: 4px; }
.contact-info dd { font-size: 17px; color: var(--ink); margin: 0; }
.contact-map { margin-top: clamp(40px, 6vw, 72px); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.contact-map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ============================================================
   Blog / article (CMS) — additive, reuses existing tokens.
   ============================================================ */
.card__cover { aspect-ratio: 16/10; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 16px; background: var(--bg-2); }
.card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.card:hover .card__cover img { transform: scale(1.04); }

.post-cover { margin: 0 0 clamp(28px,4vw,44px); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.post-cover img { width: 100%; height: auto; display: block; }

.post-tldr {
  display: block; margin: 0 0 28px; padding: 18px 22px;
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm); color: var(--ink-soft); font-size: 16px; line-height: 1.6;
}

.post-body { font-size: 18px; line-height: 1.72; color: var(--ink-soft); }
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 { font-size: clamp(1.5rem,3vw,2rem); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin-top: 1.8em; line-height: 1.15; }
.post-body h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); margin-top: 1.5em; }
.post-body h4 { font-size: 1.1rem; font-weight: 600; color: var(--ink); margin-top: 1.4em; }
.post-body p { text-wrap: pretty; }
.post-body a { color: var(--ink); border-bottom: 1px solid var(--line-2); transition: border-color .2s; }
.post-body a:hover { border-color: var(--ink); }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body li + li { margin-top: 0.4em; }
.post-body ul.checklist { list-style: none; padding-left: 0; }
.post-body blockquote { border-left: 3px solid var(--amber); padding: 6px 0 6px 22px; margin-left: 0; font-size: 1.15em; color: var(--ink); }
.post-body blockquote cite { display: block; margin-top: 10px; font-size: 0.78em; color: var(--muted); font-style: normal; }
.post-body figure.post-img { margin: 1.6em 0; }
.post-body figure.post-img img { width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.post-body figcaption { margin-top: 10px; font-size: 13.5px; color: var(--muted); text-align: center; }
.post-body pre.code { background: var(--ink); color: var(--bg); padding: 18px 20px; border-radius: var(--radius-sm); overflow-x: auto; font-family: var(--mono); font-size: 14px; line-height: 1.55; }
.post-body .table-wrap { overflow-x: auto; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.post-body table td { border: 1px solid var(--line); padding: 10px 14px; }
.post-body .post-embed iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius-sm); }