/* metalmecanica.mx — Shared design system
   Extracted from homepage. Loaded by all sub-pages for consistency. */

/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/795c4e73.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/6663c2f6.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/076f6db2.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/13dddb90.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/cf4002a9.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/2fbaad78.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/795c4e73.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/6663c2f6.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/076f6db2.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/13dddb90.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/cf4002a9.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/2fbaad78.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/795c4e73.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/6663c2f6.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/076f6db2.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/13dddb90.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/cf4002a9.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/2fbaad78.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/847145f4.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fe39e7c9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/edd05026.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/b95215df.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/56caf97e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/b938a9b9.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/847145f4.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fe39e7c9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/edd05026.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/b95215df.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/56caf97e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/b938a9b9.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/847145f4.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fe39e7c9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/edd05026.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/b95215df.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/56caf97e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/b938a9b9.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/847145f4.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fe39e7c9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/edd05026.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/b95215df.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/56caf97e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/b938a9b9.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/847145f4.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fe39e7c9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/edd05026.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/b95215df.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/56caf97e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/b938a9b9.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/847145f4.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fe39e7c9.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/edd05026.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/b95215df.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/56caf97e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/b938a9b9.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ TOKENS ============ */
  :root {
    --ink: #0F172A;
    --ink-2: #1E1B4B;
    --ink-3: #312E81;
    --steel: #1E293B;
    --steel-2: #475569;
    --steel-3: #64748B;
    --line: #E2E8F0;
    --line-2: #CBD5E1;
    --paper: #FFFFFF;
    --paper-2: #F8FAFC;
    --paper-3: #F1F5F9;
    --red: #1E40AF;
    --red-2: #1E3A8A;
    --red-3: #172554;
    --red-glow: rgba(30, 64, 175, 0.22);
    --amber: #F59E0B;
    --green: #15803D;
    --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    --container: 1280px;
    --r: 4px;
    --r-2: 8px;
    --r-3: 14px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
  input, textarea, select { font: inherit; color: inherit; }

  .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
  .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel-2); }
  .eyebrow.red { color: var(--red); }
  .eyebrow.white { color: rgba(255,255,255,0.78); }

  h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; color: var(--ink); }
  h2 { font-size: clamp(28px, 3.4vw, 44px); }
  h3 { font-size: clamp(20px, 1.8vw, 24px); }
  p { color: var(--steel-2); }

  /* ============ HEADER ============ */
  .top-bar {
    background: var(--ink);
    color: rgba(255,255,255,0.78);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .top-bar-inner { display: flex; justify-content: space-between; align-items: center; padding: 8px 24px; max-width: var(--container); margin: 0 auto; }
  .top-bar a { color: inherit; }
  .top-bar a:hover { color: #fff; }
  .top-bar .sep { color: rgba(255,255,255,0.3); margin: 0 12px; }

  header.site {
    position: sticky; top: 0; z-index: 80;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .header-inner { display: flex; align-items: center; gap: 32px; padding: 16px 24px; max-width: var(--container); margin: 0 auto; }
  .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: 0.02em; }
  .logo-mark {
    width: 34px; height: 34px;
    background: var(--ink);
    color: #fff;
    display: grid; place-items: center;
    font-family: var(--font-mono); font-weight: 700; font-size: 14px;
    border-radius: var(--r);
    position: relative;
  }
  .logo-mark::after {
    content: ""; position: absolute; right: -3px; top: -3px;
    width: 10px; height: 10px; background: var(--red); border-radius: 2px;
  }
  .logo-text small { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.16em; color: var(--steel-2); text-transform: uppercase; margin-top: 2px; }

  nav.primary { display: flex; gap: 28px; margin-left: auto; }
  nav.primary a { font-size: 14px; font-weight: 500; color: var(--steel); transition: color 160ms; position: relative; }
  nav.primary a:hover { color: var(--red); }
  nav.primary a.is-active { color: var(--red); }
  nav.primary a.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -10px;
    height: 2px;
    background: var(--red);
    border-radius: 1px;
  }
  .header-cta { display: flex; gap: 10px; }

  /* ============ BUTTONS ============ */
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 20px;
    font-weight: 600; font-size: 14px;
    border-radius: var(--r-2);
    transition: 180ms ease;
    cursor: pointer;
    white-space: nowrap;
  }
  .btn-primary { background: var(--red); color: #fff; }
  .btn-primary:hover { background: var(--red-2); transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(30,64,175,0.6); }
  .btn-dark { background: var(--ink); color: #fff; }
  .btn-dark:hover { background: var(--ink-2); }
  .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.28); }
  .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }
  .btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
  .btn-outline:hover { border-color: var(--ink); }
  .btn-arrow::after { content: "→"; font-weight: 400; transition: transform 200ms; }
  .btn-arrow:hover::after { transform: translateX(3px); }
  .btn-sm { padding: 8px 14px; font-size: 13px; }

  /* ============ HERO ============ */
  section.hero {
    position: relative;
    background: var(--ink);
    color: #fff;
    overflow: hidden;
    padding: 80px 0 100px;
  }
  .hero-bg {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 68%;
    z-index: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 100%);
  }
  .hero-bg-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: heroBgFade 12s ease-in-out infinite both;
    will-change: opacity;
  }
  .hero-bg-slide.bg-1 { background-image: url('assets/photos/hero-2-laser.jpg?v=3'); animation-delay: 0s; }
  .hero-bg-slide.bg-2 { background-image: url('assets/photos/hero-3-plegadora.jpg?v=3'); animation-delay: 6s; }
  @keyframes heroBgFade {
    0%, 100% { opacity: 0; }
    12.5%, 50% { opacity: 1; }
    62.5% { opacity: 0; }
  }
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
      radial-gradient(500px 350px at 95% 25%, rgba(30,64,175,0.12), transparent 70%),
      radial-gradient(circle at 1px 1px, rgba(255,255,255,0.035) 1px, transparent 0) 0 0/24px 24px;
    pointer-events: none;
  }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to bottom, transparent 82%, rgba(15,23,42,0.4));
    pointer-events: none;
  }
  .hero-grid { position: relative; z-index: 2; max-width: 680px; }
  .hero h1 {
    color: #fff;
    font-size: clamp(36px, 4.6vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin: 16px 0 18px;
    font-weight: 700;
  }
  .hero h1 em { font-style: normal; color: var(--red); }
  .hero p.lede { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.78); max-width: 540px; margin-bottom: 28px; }
  .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
  .hero-meta { margin-top: 36px; display: flex; gap: 28px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.12em; text-transform: uppercase; flex-wrap: wrap; }
  .hero-meta span { display: flex; align-items: center; gap: 8px; }
  .hero-meta span::before { content: ""; width: 6px; height: 6px; background: var(--red); border-radius: 50%; }

  /* ============ CREDIBILITY BAR ============ */
  .cred-bar {
    background: var(--ink);
    color: rgba(255,255,255,0.85);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .cred-bar-inner {
    display: flex; flex-wrap: wrap; gap: 12px 32px;
    padding: 22px 24px;
    max-width: var(--container); margin: 0 auto;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    align-items: center;
  }
  .cred-bar-inner b { color: var(--red); font-weight: 600; }
  .cred-bar-inner .dot { width: 4px; height: 4px; background: rgba(255,255,255,0.3); border-radius: 50%; }

  /* ============ SECTIONS ============ */
  section.block { padding: 96px 0; }
  section.block.tight { padding: 72px 0; }
  .section-head { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-bottom: 56px; }
  .section-head h2 { max-width: 720px; }
  .section-head p { max-width: 520px; font-size: 16px; }
  .section-head .right { text-align: right; }

  /* ============ PILLARS ============ */
  section.pillars { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-left: 1px solid var(--line); }
  .pillar {
    padding: 36px 28px;
    border-right: 1px solid var(--line);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    position: relative;
    transition: 200ms;
  }
  .pillar:hover { background: var(--paper-2); }
  .pillar-num { position: absolute; top: 14px; right: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--steel-3); letter-spacing: 0.1em; }
  .pillar-icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--ink); color: #fff; border-radius: var(--r); margin-bottom: 22px; }
  .pillar-icon svg { width: 22px; height: 22px; }
  .pillar h3 { font-size: 17px; line-height: 1.25; margin-bottom: 10px; }
  .pillar p { font-size: 14px; line-height: 1.55; }


  /* ============ CARD PHOTOS ============ */
  .product-image, .sector-image, .blog-cover { overflow: hidden; }
  .card-photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    display: block;
  }
  .product-image .silhouette { display: none; }
  .product-image .placeholder-note,
  .sector-image .placeholder-note,
  .blog-cover .placeholder-note { display: none; }
  .product-image .badge,
  .sector-image .num,
  .blog-cover .topic { z-index: 2; }

  /* ============ PRODUCTS ============ */
  .products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .product-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: 220ms;
  }
  .product-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 16px 40px -20px rgba(15,23,42,0.25); }
  .product-image {
    aspect-ratio: 16 / 10;
    background:
      repeating-linear-gradient(45deg, var(--paper-3), var(--paper-3) 12px, var(--paper-2) 12px, var(--paper-2) 24px);
    border-bottom: 1px solid var(--line);
    position: relative;
    display: grid; place-items: center;
  }
  .product-image .badge {
    position: absolute; top: 14px; left: 14px;
    background: var(--ink); color: #fff;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
    padding: 6px 10px; border-radius: var(--r);
  }
  .product-image .placeholder-note {
    font-family: var(--font-mono); font-size: 11px; color: var(--steel-3);
    background: rgba(255,255,255,0.85); padding: 6px 10px; border-radius: var(--r);
    border: 1px dashed var(--line-2);
    letter-spacing: 0.04em;
  }
  .product-image .silhouette { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0.32; }
  .product-image .silhouette svg { width: 60%; height: auto; color: var(--steel); }
  .product-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
  .product-body .meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--steel-3); text-transform: uppercase; margin-bottom: 10px; }
  .product-body h3 { font-size: 22px; margin-bottom: 12px; }
  .product-body p.desc { font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
  .model-list {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px;
  }
  .model-list span {
    font-family: var(--font-mono); font-size: 11px;
    padding: 4px 8px; background: var(--paper-3);
    color: var(--steel); border-radius: var(--r); letter-spacing: 0.04em;
  }
  .application-line {
    font-size: 13px; color: var(--steel); padding: 12px 14px;
    background: var(--paper-3); border-left: 3px solid var(--red);
    margin-bottom: 22px; line-height: 1.5;
  }
  .application-line strong { color: var(--ink); }
  .product-footer { display: flex; gap: 10px; margin-top: auto; }

  /* ============ SECTORS ============ */
  section.sectors { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
  section.sectors::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(800px 400px at 90% 10%, rgba(30,64,175,0.18), transparent 60%);
    pointer-events: none;
  }
  section.sectors h2 { color: #fff; }
  section.sectors p { color: rgba(255,255,255,0.6); }
  .sectors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; z-index: 1; }
  .sector-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--r-2);
    overflow: hidden;
    transition: 220ms;
  }
  .sector-card:hover { background: rgba(255,255,255,0.07); border-color: var(--red); }
  .sector-image {
    aspect-ratio: 16 / 9;
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.04) 10px, rgba(255,255,255,0.02) 10px, rgba(255,255,255,0.02) 20px);
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: grid; place-items: center;
  }
  .sector-image .placeholder-note {
    font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.55);
    border: 1px dashed rgba(255,255,255,0.18);
    padding: 5px 9px; border-radius: var(--r);
    letter-spacing: 0.04em;
  }
  .sector-image .num {
    position: absolute; top: 12px; left: 14px;
    font-family: var(--font-mono); font-size: 11px; color: var(--red); letter-spacing: 0.14em;
  }
  .sector-body { padding: 22px; }
  .sector-body h3 { color: #fff; font-size: 18px; margin-bottom: 8px; }
  .sector-body p { font-size: 13.5px; line-height: 1.55; margin-bottom: 14px; color: rgba(255,255,255,0.66); }
  .sector-body .machine {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
    color: var(--red); text-transform: uppercase; margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
  }
  .sector-body .machine::before { content: "→"; }
  .sector-body a {
    font-size: 12px; font-weight: 600;
    color: #fff; padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    display: inline-block;
  }
  .sector-body a:hover { border-color: var(--red); color: var(--red); }

  /* ============ CASE STUDY ============ */
  section.case-study { background: var(--paper-2); }
  .case-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
  .case-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--red); text-transform: uppercase; margin-bottom: 16px; }
  .case-text h2 { margin-bottom: 22px; max-width: 520px; }
  .case-text .quote { font-size: 19px; line-height: 1.5; color: var(--steel); border-left: 3px solid var(--red); padding-left: 22px; margin: 24px 0; font-weight: 500; }
  .case-text .quote-by { font-family: var(--font-mono); font-size: 12px; color: var(--steel-2); }
  .case-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    overflow: hidden;
  }
  .case-stat { padding: 32px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .case-stat:nth-child(2n) { border-right: 0; }
  .case-stat:nth-last-child(-n+2) { border-bottom: 0; }
  .case-stat .num { font-size: 38px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
  .case-stat .num small { font-size: 18px; color: var(--red); margin-left: 4px; }
  .case-stat .lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--steel-2); text-transform: uppercase; margin-top: 10px; }

  /* ============ BLOG ============ */
  .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .blog-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; transition: 220ms; display: flex; flex-direction: column; }
  .blog-card:hover { border-color: var(--ink); transform: translateY(-2px); }
  .blog-cover {
    aspect-ratio: 16 / 9;
    background:
      repeating-linear-gradient(45deg, var(--paper-3), var(--paper-3) 10px, var(--paper-2) 10px, var(--paper-2) 20px);
    border-bottom: 1px solid var(--line);
    position: relative;
    display: grid; place-items: center;
  }
  .blog-cover .placeholder-note { font-family: var(--font-mono); font-size: 10px; color: var(--steel-3); border: 1px dashed var(--line-2); padding: 5px 9px; border-radius: var(--r); }
  .blog-cover .topic { position: absolute; top: 14px; left: 14px; background: var(--red); color: #fff; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--r); }
  .blog-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
  .blog-body .date { font-family: var(--font-mono); font-size: 11px; color: var(--steel-3); letter-spacing: 0.06em; margin-bottom: 10px; }
  .blog-body h3 { font-size: 19px; line-height: 1.25; margin-bottom: 12px; }
  .blog-body p { font-size: 14px; line-height: 1.55; margin-bottom: 16px; }
  .blog-body .read { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--red); letter-spacing: 0.06em; margin-top: auto; }
  .blog-body .read::after { content: " →"; }

  /* ============ LEAD MAGNET ============ */
  section.lead {
    background: linear-gradient(120deg, var(--ink) 0%, var(--ink-2) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  section.lead::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0) 0 0/24px 24px,
      radial-gradient(700px 400px at 12% 50%, rgba(30,64,175,0.22), transparent 60%);
  }
  .lead-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
  .lead h2 { color: #fff; font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 18px; max-width: 520px; }
  .lead p.l { color: rgba(255,255,255,0.75); font-size: 17px; line-height: 1.55; max-width: 480px; margin-bottom: 28px; }
  .lead .bullets { display: grid; gap: 10px; margin-bottom: 28px; }
  .lead .bullets li { display: flex; gap: 12px; font-size: 14px; color: rgba(255,255,255,0.85); list-style: none; }
  .lead .bullets li::before { content: "✓"; color: var(--red); font-weight: 700; }
  .lead-form {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--r-3);
    padding: 32px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .lead-form .badge { font-family: var(--font-mono); font-size: 10px; color: var(--red); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 12px; }
  .lead-form h3 { color: #fff; font-size: 22px; margin-bottom: 18px; line-height: 1.2; }
  .form-row { display: grid; gap: 14px; }
  .form-row input, .form-row select, .form-row textarea {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    padding: 13px 14px;
    border-radius: var(--r);
    font-size: 14px;
    width: 100%;
    transition: 160ms;
  }
  .form-row input::placeholder, .form-row textarea::placeholder { color: rgba(255,255,255,0.4); }
  .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--red); background: rgba(255,255,255,0.1); }
  .form-row.two { grid-template-columns: 1fr 1fr; }
  .form-row label.legal { font-size: 12px; color: rgba(255,255,255,0.55); display: flex; gap: 8px; }
  .form-row label.legal input { width: auto; }

  /* ============ SERVICES ============ */
  .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; background: var(--paper); }
  .service-item { padding: 32px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .service-item:nth-child(3n) { border-right: 0; }
  .service-item:nth-last-child(-n+3) { border-bottom: 0; }
  .service-item .num { font-family: var(--font-mono); font-size: 11px; color: var(--red); letter-spacing: 0.1em; margin-bottom: 16px; }
  .service-item h3 { font-size: 17px; margin-bottom: 10px; }
  .service-item p { font-size: 14px; line-height: 1.55; }

  /* ============ CONTACT ============ */
  section.contact { background: var(--paper-2); }
  .contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; }
  .contact-form-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2); padding: 36px; }
  .contact-form-wrap h3 { font-size: 22px; margin-bottom: 8px; }
  .contact-form-wrap > p { font-size: 14px; margin-bottom: 26px; }
  .cf { display: grid; gap: 14px; }
  .cf input, .cf select, .cf textarea {
    background: var(--paper); border: 1px solid var(--line);
    color: var(--ink); padding: 12px 14px;
    border-radius: var(--r); font-size: 14px; width: 100%;
    transition: 160ms;
  }
  .cf input:focus, .cf select:focus, .cf textarea:focus { outline: none; border-color: var(--red); }
  .cf textarea { min-height: 88px; resize: vertical; }
  .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .cf label { font-size: 12px; font-family: var(--font-mono); color: var(--steel-2); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: -8px; }

  .contact-info { display: grid; gap: 22px; align-content: start; }
  .ci-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2); padding: 26px; }
  .ci-card .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; }
  .ci-card .val { font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 6px; line-height: 1.3; }
  .ci-card .sub { font-size: 13px; color: var(--steel-2); line-height: 1.5; }
  .ci-card a.link { color: var(--red); font-weight: 600; font-size: 14px; display: inline-block; margin-top: 8px; }
  .ci-card a.link::after { content: " →"; }

  .map-block {
    aspect-ratio: 16 / 9;
    background:
      repeating-linear-gradient(0deg, var(--paper-3), var(--paper-3) 1px, transparent 1px, transparent 24px),
      repeating-linear-gradient(90deg, var(--paper-3), var(--paper-3) 1px, transparent 1px, transparent 24px),
      var(--paper);
    border: 1px solid var(--line); border-radius: var(--r-2);
    position: relative; overflow: hidden;
  }
  .map-block .pin { position: absolute; top: 48%; left: 52%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .map-block .pin .dot { width: 14px; height: 14px; background: var(--red); border-radius: 50%; box-shadow: 0 0 0 6px rgba(30,64,175,0.2); }
  .map-block .pin .lbl { font-family: var(--font-mono); font-size: 10px; background: var(--ink); color: #fff; padding: 5px 9px; border-radius: var(--r); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
  .map-block .roads { position: absolute; inset: 0; }

  /* ============ FAQ ============ */
  section.faq { background: var(--paper); border-top: 1px solid var(--line); }
  .faq-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; }
  .faq-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
  details.faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; }
  details.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; font-weight: 600; font-size: 16px; color: var(--ink); }
  details.faq-item summary::-webkit-details-marker { display: none; }
  details.faq-item summary::after { content: "+"; color: var(--red); font-size: 22px; font-weight: 300; transition: transform 200ms; line-height: 1; }
  details.faq-item[open] summary::after { transform: rotate(45deg); }
  details.faq-item p { margin-top: 12px; font-size: 14.5px; line-height: 1.6; }

  /* ============ FOOTER ============ */
  footer.site {
    background: var(--ink);
    color: rgba(255,255,255,0.7);
    padding: 72px 0 28px;
    border-top: 4px solid var(--red);
  }
  .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; margin-bottom: 56px; }
  .footer-brand .logo { color: #fff; margin-bottom: 16px; }
  .footer-brand .logo small { color: rgba(255,255,255,0.5); }
  .footer-brand p { color: rgba(255,255,255,0.55); font-size: 13px; line-height: 1.6; max-width: 320px; margin-bottom: 18px; }
  .footer-brand .razon { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.45); letter-spacing: 0.04em; line-height: 1.7; }
  .footer-col h4 { color: #fff; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-mono); font-weight: 500; margin-bottom: 18px; }
  .footer-col ul { list-style: none; display: grid; gap: 10px; }
  .footer-col ul a { color: rgba(255,255,255,0.65); font-size: 14px; transition: 160ms; }
  .footer-col ul a:hover { color: #fff; padding-left: 4px; }
  .footer-newsletter input { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); color: #fff; padding: 11px 12px; border-radius: var(--r); font-size: 13px; margin-bottom: 10px; }
  .footer-newsletter input::placeholder { color: rgba(255,255,255,0.4); }
  .footer-newsletter button { width: 100%; }
  .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; }
  .footer-bottom .tagline { font-style: italic; color: rgba(255,255,255,0.55); font-size: 13px; }
  .footer-bottom .legal { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.45); letter-spacing: 0.04em; }
  .footer-social { display: flex; gap: 10px; }
  .footer-social a {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: rgba(255,255,255,0.06);
    border-radius: var(--r);
    color: rgba(255,255,255,0.7);
    transition: 160ms;
  }
  .footer-social a:hover { background: var(--red); color: #fff; }
  .footer-social svg { width: 16px; height: 16px; }

  /* ============ FLOATING WHATSAPP ============ */
  .wa-float {
    position: fixed; right: 24px; bottom: 24px; z-index: 70;
    background: #25D366; color: #fff;
    padding: 12px 18px;
    border-radius: 100px;
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: 14px;
    box-shadow: 0 12px 32px -8px rgba(37,211,102,0.5);
    transition: 200ms;
  }
  .wa-float:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(37,211,102,0.65); }
  .wa-float svg { width: 20px; height: 20px; }

  /* ============ POPUP ============ */
  .popup-mask {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(15,23,42,0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center; justify-content: center;
    padding: 24px;
  }
  .popup-mask.show { display: flex; animation: fadeIn 240ms ease; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .popup {
    background: #fff; border-radius: var(--r-3);
    max-width: 480px; width: 100%;
    overflow: hidden;
    position: relative;
    border-top: 4px solid var(--red);
  }
  .popup-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    color: var(--steel-2);
    border-radius: 50%;
    z-index: 2;
    transition: 160ms;
  }
  .popup-close:hover { background: var(--paper-2); color: var(--ink); }
  .popup-body { padding: 36px; }
  .popup-body .badge { font-family: var(--font-mono); font-size: 10px; color: var(--red); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 12px; }
  .popup-body h3 { font-size: 24px; line-height: 1.2; margin-bottom: 12px; }
  .popup-body p { font-size: 14px; margin-bottom: 22px; line-height: 1.55; }
  .popup-form { display: grid; gap: 12px; }
  .popup-form input { background: var(--paper-2); border: 1px solid var(--line); padding: 12px 14px; border-radius: var(--r); font-size: 14px; }
  .popup-form input:focus { outline: none; border-color: var(--red); }
  .popup-fine { font-size: 11px; color: var(--steel-3); margin-top: 10px; }

  /* ============ SUCCESS TOASTS ============ */
  .toast {
    position: fixed; top: 24px; right: 24px; z-index: 100;
    background: var(--green); color: #fff;
    padding: 14px 20px; border-radius: var(--r);
    font-size: 14px; font-weight: 600;
    box-shadow: 0 12px 32px -8px rgba(0,0,0,0.3);
    display: none;
  }
  .toast.show { display: flex; animation: slideIn 240ms ease; }
  @keyframes slideIn { from { transform: translateX(120%); } to { transform: translateX(0); } }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 980px) {
    .case-grid, .lead-grid, .contact-grid, .faq-grid { grid-template-columns: 1fr; }
    .hero-bg {
      width: 100%; left: 0;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
      mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
    }
    .pillars-grid { grid-template-columns: repeat(2, 1fr); }
    .products-grid { grid-template-columns: 1fr; }
    .sectors-grid, .blog-grid, .services-grid { grid-template-columns: repeat(2, 1fr); }
    .service-item:nth-child(3n) { border-right: 1px solid var(--line); }
    .service-item:nth-child(2n) { border-right: 0; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    nav.primary { display: none; }
    section.block { padding: 64px 0; }
    .section-head { grid-template-columns: 1fr; }
    .section-head .right { text-align: left; }
  }
  @media (max-width: 600px) {
    .pillars-grid, .sectors-grid, .blog-grid, .services-grid { grid-template-columns: 1fr; }
    .service-item:nth-child(3n), .service-item:nth-child(2n) { border-right: 0; }
    .case-stats { grid-template-columns: 1fr; }
    .case-stat { border-right: 0 !important; }
    .footer-top { grid-template-columns: 1fr; }
    .form-row.two, .cf-row { grid-template-columns: 1fr; }
    .header-cta .btn:not(.btn-primary) { display: none; }
    .top-bar-inner { font-size: 10px; }
    .top-bar .top-mid { display: none; }
    .hero { padding: 48px 0 64px; }
    .wa-float span { display: none; }
    .wa-float { padding: 14px; }
  }

  /* ============ SUB-PAGE CHROME ============ */
  /* Breadcrumbs */
  .breadcrumbs {
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
  }
  .breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0 24px;
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--steel-3);
  }
  .breadcrumbs li { display: flex; align-items: center; gap: 8px; }
  .breadcrumbs li + li::before {
    content: "›";
    color: var(--line-2);
    margin-right: 4px;
  }
  .breadcrumbs a { color: var(--steel-2); text-decoration: none; }
  .breadcrumbs a:hover { color: var(--red); }
  .breadcrumbs [aria-current="page"] { color: var(--ink); }

  /* Sub-page hero — lighter than homepage hero */
  section.subpage-hero {
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    padding: 64px 0 56px;
    position: relative;
  }
  section.subpage-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(600px 280px at 90% 20%, rgba(30,64,175,0.08), transparent 60%),
      radial-gradient(circle at 1px 1px, rgba(15,23,42,0.04) 1px, transparent 0) 0 0/24px 24px;
    pointer-events: none;
  }
  .subpage-hero-grid { position: relative; z-index: 1; max-width: 760px; }
  .subpage-hero h1 {
    color: var(--ink);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin: 14px 0 18px;
    font-weight: 700;
  }
  .subpage-hero p.lede {
    font-size: 18px;
    line-height: 1.55;
    color: var(--steel);
    max-width: 620px;
  }
  .subpage-hero .meta {
    margin-top: 28px;
    display: flex;
    gap: 8px 28px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--steel-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-wrap: wrap;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  .subpage-hero .meta span { display: flex; align-items: center; gap: 8px; }
  .subpage-hero .meta strong { color: var(--steel); font-weight: 600; }
  .subpage-hero .meta a { color: var(--red); font-weight: 600; }

  /* Long-form article body */
  .article-body {
    max-width: 720px;
    margin: 0 auto;
    padding: 64px 24px;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--steel);
  }
  .article-body h2 {
    color: var(--ink);
    font-size: clamp(24px, 2.5vw, 32px);
    margin: 48px 0 16px;
    letter-spacing: -0.02em;
    font-weight: 700;
  }
  .article-body h2:first-child { margin-top: 0; }
  .article-body h3 {
    color: var(--ink);
    font-size: 20px;
    margin: 32px 0 12px;
    font-weight: 600;
  }
  .article-body p { margin: 0 0 18px; color: var(--steel); }
  .article-body p strong, .article-body strong { color: var(--ink); font-weight: 600; }
  .article-body a {
    color: var(--red);
    text-decoration: underline;
    text-decoration-color: rgba(30,64,175,0.4);
    text-underline-offset: 3px;
  }
  .article-body a:hover { color: var(--red-2); text-decoration-color: currentColor; }
  .article-body ul, .article-body ol {
    margin: 0 0 18px;
    padding-left: 24px;
  }
  .article-body li { margin-bottom: 8px; }
  .article-body hr {
    border: 0;
    height: 1px;
    background: var(--line);
    margin: 48px 0;
  }
  .article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 14px;
  }
  .article-body th, .article-body td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
  }
  .article-body th {
    font-weight: 600;
    color: var(--ink);
    background: var(--paper-2);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* Table of contents */
  .toc {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: 22px 26px;
    margin: 32px 0;
  }
  .toc__title {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--steel-2);
    font-weight: 500;
    margin: 0 0 14px;
  }
  .toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    counter-reset: toc;
  }
  .toc__list li {
    margin: 0;
    counter-increment: toc;
    position: relative;
    padding-left: 32px;
    font-size: 14.5px;
  }
  .toc__list li::before {
    content: counter(toc, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--steel-3);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
  }
  .toc__list a {
    color: var(--steel);
    text-decoration: none;
  }
  .toc__list a:hover { color: var(--red); text-decoration: underline; }

  /* Callout boxes */
  .callout {
    margin: 32px 0;
    padding: 18px 22px;
    border-left: 3px solid var(--red);
    background: rgba(30,64,175,0.06);
    border-radius: 0 var(--r-2) var(--r-2) 0;
    font-size: 14.5px;
    line-height: 1.55;
  }
  .callout__label {
    display: block;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--red);
    margin-bottom: 6px;
  }
  .callout--data { border-left-color: var(--amber); background: rgba(245,158,11,0.07); }
  .callout--data .callout__label { color: var(--amber); }
  .callout p { margin: 0; }
  .callout p + p { margin-top: 10px; }

  /* Author byline */
  .byline {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin: 32px 0;
  }
  .byline__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.02em;
    flex-shrink: 0;
  }
  .byline__info { font-size: 14px; line-height: 1.4; }
  .byline__name {
    font-weight: 600;
    color: var(--ink);
    display: block;
    margin-bottom: 2px;
  }
  .byline__meta {
    color: var(--steel-3);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  /* Author card */
  .author-card {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: 32px;
    margin: 0 0 32px;
  }
  .author-card__header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
  }
  .author-card__avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.04em;
    flex-shrink: 0;
  }
  .author-card__name {
    font-size: 22px;
    margin: 0 0 4px;
    color: var(--ink);
    font-weight: 700;
  }
  .author-card__role {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--steel-2);
  }
  .author-card__credentials {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px 24px;
    font-size: 14px;
    margin: 0;
  }
  .author-card__credentials dt {
    color: var(--steel-3);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-top: 2px;
    margin: 0;
  }
  .author-card__credentials dd { margin: 0; color: var(--steel); }

  /* Glossary */
  .glossary-index {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 24px 0 40px;
  }
  .glossary-index a {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--steel);
    text-decoration: none;
  }
  .glossary-index a:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
  }
  .glossary-letter {
    font-size: 32px;
    color: var(--red);
    margin: 48px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--red);
    display: inline-block;
    min-width: 60px;
    font-weight: 700;
  }
  .glossary-term {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }
  .glossary-term dt {
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    margin: 0 0 6px;
  }
  .glossary-term dt small {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--steel-3);
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .glossary-term dd {
    margin: 0;
    color: var(--steel);
    font-size: 14.5px;
    line-height: 1.6;
  }

  @media (max-width: 600px) {
    .article-body { padding: 40px 20px; }
    section.subpage-hero { padding: 48px 0 40px; }
    .author-card { padding: 24px; }
    .author-card__credentials { grid-template-columns: 1fr; gap: 6px 0; }
    .author-card__credentials dd { margin-bottom: 8px; }
  }