/* ============================================================
   Loftia landing — single stylesheet.
   Sections: fonts → design tokens → semantic classes → reset →
   animations/global → nav. Styles were moved verbatim from the
   original design bundle; do not tweak values casually.
   ============================================================ */

/* ============================================================
   Loftia Design Tokens
   Brand: warm magenta primary on white surfaces
   Source: libs/loftia-ui/src/styles/globals.css (HSL channels)
   ============================================================ */

/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-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: 'Geist Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-symbols2.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-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: 'Geist Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-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: 'Geist Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-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: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-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: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-symbols2.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-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: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-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: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-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: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-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: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-symbols2.woff2") format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-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: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-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: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/inter-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/inter-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/inter-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
  font-family: 'Geist';
  src: url("/assets/fonts/geist-variable.ttf") format('truetype-variations'),
       url("/assets/fonts/geist-variable.ttf") format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- shadcn HSL channels (raw) ---------- */
  --background: 0 0% 100%; /* @kind color */
  --foreground: 222.2 84% 4.9%; /* @kind color */
  --card: 0 0% 100%; /* @kind color */
  --card-foreground: 222.2 84% 4.9%; /* @kind color */
  --popover: 0 0% 100%; /* @kind color */
  --popover-foreground: 222.2 84% 4.9%; /* @kind color */
  --primary: 314 51% 54%; /* @kind color */
  --primary-foreground: 210 40% 98%; /* @kind color */
  --secondary: 327 85% 95%; /* @kind color */
  --secondary-foreground: 314 51% 54%; /* @kind color */
  --muted: 210 40% 96%; /* @kind color */
  --muted-foreground: 215.4 16.3% 46.9%; /* @kind color */
  --accent: 210 40% 96%; /* @kind color */
  --accent-foreground: 222.2 47.4% 11.2%; /* @kind color */
  --destructive: 0 84.2% 60.2%; /* @kind color */
  --destructive-foreground: 210 40% 98%; /* @kind color */
  --border: 214.3 31.8% 91.4%; /* @kind color */
  --input: 214.3 31.8% 91.4%; /* @kind color */
  --ring: 222.2 84% 4.9%; /* @kind color */
  --radius: 0.5rem; /* @kind radius */
  --sidebar-background: 314 51% 54%; /* @kind color */
  --sidebar-foreground: 240 5.3% 26.1%; /* @kind color */

  /* ---------- Resolved color tokens (use these in HTML) ---------- */
  --color-bg: hsl(0 0% 100%);
  --color-bg-muted: hsl(210 40% 96%);
  --color-fg: hsl(222.2 84% 4.9%);
  --color-fg-muted: hsl(215.4 16.3% 46.9%);
  --color-card: hsl(0 0% 100%);
  --color-border: hsl(214.3 31.8% 91.4%);
  --color-input: hsl(214.3 31.8% 91.4%);
  --color-ring: hsl(222.2 84% 4.9%);

  /* Brand */
  --color-primary:        hsl(314 51% 54%); /* #BE55A3 magenta */
  --color-primary-fg:     hsl(210 40% 98%);
  --color-primary-hover:  hsl(314 51% 49%);
  --color-secondary:      hsl(327 85% 95%); /* #FDE7F3 soft pink */
  --color-secondary-fg:   hsl(314 51% 54%);

  /* Semantic state */
  --color-destructive:    hsl(0 84.2% 60.2%);
  --color-destructive-fg: hsl(210 40% 98%);
  --color-success:        hsl(142 71% 39%);
  --color-warning:        hsl(38 92% 50%);
  --color-info:           hsl(217 91% 60%);

  /* Neutrals (figma top-30 confirms these) */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Type scale (12 / 14 / 16 / 20 / 24 / 30 / 36) */
  --text-xs: 0.75rem;     /* 12 — metadata, table labels */
  --text-sm: 0.875rem;    /* 14 — body, helper, nav labels */
  --text-base: 1rem;      /* 16 — card titles */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: 1.25rem;     /* 20 — section titles */
  --text-2xl: 1.5rem;     /* 24 — page titles */
  --text-3xl: 1.875rem;   /* 30 */
  --text-4xl: 2.25rem;    /* 36 */

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line height */
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---------- Spacing (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Radii ---------- */
  --radius-sm: calc(var(--radius) - 4px);  /* 4 */
  --radius-md: calc(var(--radius) - 2px);  /* 6 */
  --radius-lg: var(--radius);              /* 8 */
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ---------- Shadows (subtle only) ---------- */
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.05), 0 1px 2px -1px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);

  /* ---------- Motion ---------- */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 300ms; /* @kind other */
  --easing-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
}

/* ============================================================
   Semantic typography classes — match DESIGN.md scale
   ============================================================ */
.lf-display,
.lf-h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  color: var(--color-fg);
}

.lf-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-fg);
}

.lf-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-fg);
}

.lf-body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-fg);
}

.lf-helper {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  line-height: var(--leading-normal);
}

.lf-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
}

.lf-table-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-fg-muted);
  text-transform: none;
  letter-spacing: 0.01em;
}

.lf-nav-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.lf-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* Reset basics for HTML usage outside Tailwind */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


    @keyframes lf-fade-up { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
    @keyframes lf-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
    @keyframes lf-pulse { 0%{transform:scale(1);opacity:.28} 100%{transform:scale(2.4);opacity:0} }
    @keyframes lf-ping { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(2.6);opacity:0} }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{overflow-x:hidden}
    input::placeholder{color:rgba(255,255,255,.35)}
    html.js [data-reveal]{opacity:0;transform:translateY(36px);transition:opacity .75s cubic-bezier(.2,0,0,1),transform .75s cubic-bezier(.2,0,0,1)}
    html.js [data-reveal].is-in{opacity:1;transform:none}
    @media (prefers-reduced-motion:reduce){html.js [data-reveal]{opacity:1;transform:none;transition:none}}
  @media (max-width: 768px) { .nav-links { display: none !important; } }
  

/* ============================================================
   NAV — scroll-reactive state.
   Values are the exact pairs the old runtime computed from
   `scrolled` (transparent at top, frosted after 60px).
   ============================================================ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 14px clamp(20px,5vw,48px);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 300ms cubic-bezier(.2,0,0,1), border-color 300ms;
}
.site-nav.is-scrolled {
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(15,23,42,.07);
}

.nav-logo-white { opacity: 1; }
.nav-logo-color { opacity: 0; }
.site-nav.is-scrolled .nav-logo-white { opacity: 0; }
.site-nav.is-scrolled .nav-logo-color { opacity: 1; }

.nav-link {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  text-decoration: none; white-space: nowrap; padding: 8px 14px; border-radius: 999px;
  color: rgba(255,255,255,.82);
  transition: color 250ms cubic-bezier(.2,0,0,1);
}
.site-nav.is-scrolled .nav-link { color: #334155; }
.nav-link:hover { opacity: .6; }

.nav-cta {
  background: #BE55A3; color: white; border: none; padding: 10px 22px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  text-decoration: none; display: inline-block;
  box-shadow: none;
  transition: opacity 200ms, box-shadow 300ms;
}
.site-nav.is-scrolled .nav-cta { box-shadow: 0 4px 14px rgba(190,85,163,.3); }
.nav-cta:hover { opacity: .88; }

/* Language toggle (ES/EN links; the active segment is baked per page) */
.lang-track {
  display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(255,255,255,.1);
  transition: background 300ms;
}
.site-nav.is-scrolled .lang-track { background: rgba(15,23,42,.05); }

.lang-seg {
  border: none; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  font-family: var(--font-sans); cursor: pointer; letter-spacing: .04em; line-height: 1;
  text-decoration: none; display: inline-block;
  /* explicit list (not 'all') so the :focus-visible outline snaps instantly */
  transition: background 220ms cubic-bezier(.2,0,0,1), color 220ms cubic-bezier(.2,0,0,1), box-shadow 220ms cubic-bezier(.2,0,0,1);
}
.lang-seg--active {
  background: #BE55A3; color: #fff;
  box-shadow: 0 2px 8px rgba(190,85,163,.4);
}
.lang-seg--inactive { background: transparent; color: rgba(255,255,255,.55); }
.site-nav.is-scrolled .lang-seg--inactive { color: #94A3B8; }

/* ============================================================
   NAV — structural pieces
   ============================================================ */
.nav-inner { max-width:1280px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px; }
.nav-logo-link { display:flex;align-items:center;text-decoration:none;flex-shrink:0;position:relative;height:30px; }
.nav-logo-white { height:30px;width:auto;display:block;transition:opacity 300ms; }
.nav-logo-color { height:30px;width:auto;display:block;position:absolute;left:0;top:0;transition:opacity 300ms; }
.nav-links { display:flex;align-items:center;gap:6px;flex:1;justify-content:center; }
.nav-actions { display:flex;align-items:center;gap:14px;flex-shrink:0; }

/* ============================================================
   HERO (incl. dashboard mockup)
   ============================================================ */
.hero { min-height:100vh;background:#0D0812;display:flex;align-items:center;justify-content:center;padding:clamp(104px,13vh,140px) clamp(8px,1.5vw,16px) 80px;gap:clamp(40px,6vw,96px);overflow:hidden;position:relative;flex-wrap:wrap; }
.hero-glow { position:absolute;right:-5%;top:50%;transform:translateY(-50%);width:60vw;height:85vh;background:radial-gradient(ellipse at center,rgba(190,85,163,.12) 0%,transparent 68%);pointer-events:none; }
.hero-grid-overlay { position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:60px 60px;pointer-events:none; }
.hero-copy { flex:0 1 auto;min-width:min(100%,300px);max-width:580px;position:relative;z-index:1; }
.hero-badge-wrap { animation:lf-fade-up .6s cubic-bezier(.2,0,0,1) .05s both; }
.hero-badge { display:inline-flex;align-items:center;gap:8px;margin-bottom:30px; }
.hero-dot { position:relative;width:7px;height:7px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; }
.hero-dot-ping { position:absolute;inset:0;border-radius:50%;background:#BE55A3;animation:lf-ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
.hero-dot-core { position:relative;width:7px;height:7px;border-radius:50%;background:#BE55A3;display:block; }
.hero-badge-text { font-family:var(--font-sans);font-size:15px;font-weight:600;color:rgba(255,255,255,.75);letter-spacing:.02em; }
.hero-title { font-family:var(--font-display);font-size:clamp(46px,6.2vw,80px);font-weight:700;line-height:1.04;letter-spacing:-.03em;color:white;margin-bottom:24px;animation:lf-fade-up .8s cubic-bezier(.2,0,0,1) .15s both; }
.hero-sub { font-family:var(--font-sans);font-size:clamp(15px,1.4vw,18px);line-height:1.65;color:rgba(255,255,255,.56);margin-bottom:40px;max-width:460px;animation:lf-fade-up .8s cubic-bezier(.2,0,0,1) .28s both; }
.hero-sub-strong { color:white;font-weight:600; }
.hero-ctas { display:flex;gap:14px;flex-wrap:wrap;animation:lf-fade-up .8s cubic-bezier(.2,0,0,1) .4s both; }
.hero-cta-primary { background:#BE55A3;color:white;border:none;padding:16px 32px;border-radius:999px;font-family:var(--font-sans);font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;box-shadow:0 10px 30px rgba(190,85,163,.4);transition:transform 200ms cubic-bezier(.2,0,0,1),box-shadow 200ms; }
.hero-cta-primary:hover { transform:translateY(-2px);box-shadow:0 16px 40px rgba(190,85,163,.5) }
.hero-cta-secondary { background:rgba(255,255,255,.06);color:white;border:1px solid rgba(255,255,255,.16);padding:16px 32px;border-radius:999px;font-family:var(--font-sans);font-size:15px;font-weight:500;cursor:pointer;text-decoration:none;display:inline-block;transition:background 200ms,border-color 200ms; }
.hero-cta-secondary:hover { background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32) }
.hm-wrap { flex:0 0 auto;position:relative;z-index:1;animation:lf-fade-up .9s cubic-bezier(.2,0,0,1) .5s both; }
.hm-tilt { transform:rotate(-2deg); }
.hm-float { animation:lf-float 4s ease-in-out infinite; }
.hm-frame { width:clamp(320px,44vw,560px);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 48px 96px rgba(0,0,0,.55),0 0 64px rgba(190,85,163,.12); }
.hm-topbar { height:44px;background:#BE55A3;padding:0 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0; }
.hm-topbar-logo { height:18px;width:auto; }
.hm-topbar-right { display:flex;align-items:center;gap:10px; }
.hm-topbar-icon { width:13px;height:13px;color:rgba(255,255,255,.7); }
.hm-avatar { width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center; }
.hm-avatar-text { font-size:8px;font-weight:700;color:white; }
.hm-body { display:flex;background:#fff;min-height:clamp(180px,26vw,310px); }
.hm-rail { width:46px;flex-shrink:0;background:#F6EEF4;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:3px; }
.hm-rail-active { width:30px;height:30px;border-radius:8px;background:#BE55A3;display:flex;align-items:center;justify-content:center;margin-bottom:6px; }
.ic-13-white { width:13px;height:13px;color:white; }
.hm-rail-item { width:30px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center; }
.ic-13-mauve { width:13px;height:13px;color:#BE9CB4; }
.hm-main { flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0; }
.hm-header { padding:12px 14px 10px;flex-shrink:0; }
.hm-header-title { font-family:var(--font-display);font-size:13px;font-weight:600;color:#0F172A; }
.hm-stats { padding:0 14px;display:flex;gap:8px;flex-shrink:0; }
.hm-stat { flex:1;background:#F8F9FC;border-radius:10px;padding:9px 11px; }
.hm-stat-label { font-size:7px;font-weight:600;color:#94A3B8;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px; }
.hm-stat-value { font-family:var(--font-display);font-size:17px;font-weight:700;color:#0F172A;line-height:1.1; }
.stat-up { font-size:7px;color:#16a34a;font-weight:600;margin-top:2px; }
.hm-stat-sub-warn { font-size:7px;color:#EA580C;font-weight:500;margin-top:2px; }
.hm-stat-sub-muted { font-size:7px;color:#94A3B8;margin-top:2px; }
.hm-panels { display:flex;flex:1;overflow:hidden;min-height:0;padding:10px 14px 14px;gap:8px; }
.chart-card { flex:1;background:#F8F9FC;border-radius:10px;padding:10px 11px;display:flex;flex-direction:column; }
.chart-title { font-size:9px;font-weight:600;color:#0F172A;margin-bottom:8px; }
.chart-bars { flex:1;display:flex;align-items:flex-end;gap:4px;min-height:36px; }
.bar-55 { flex:1;background:#F1D6E8;border-radius:3px 3px 0 0;height:55%; }
.bar-70 { flex:1;background:#F1D6E8;border-radius:3px 3px 0 0;height:70%; }
.bar-62 { flex:1;background:#F1D6E8;border-radius:3px 3px 0 0;height:62%; }
.bar-80 { flex:1;background:#F1D6E8;border-radius:3px 3px 0 0;height:80%; }
.bar-74 { flex:1;background:#F1D6E8;border-radius:3px 3px 0 0;height:74%; }
.bar-accent { flex:1;background:#BE55A3;border-radius:3px 3px 0 0;height:98%; }
.hm-activity { width:128px;flex-shrink:0;display:flex;flex-direction:column;gap:5px; }
.hm-activity-title { font-size:9px;font-weight:600;color:#0F172A;margin-bottom:2px; }
.activity-row { display:flex;align-items:center;gap:6px; }
.dot-6-green { width:6px;height:6px;border-radius:50%;background:#22c55e;flex-shrink:0; }
.activity-text { font-size:8px;color:#475569;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.dot-6-amber { width:6px;height:6px;border-radius:50%;background:#F59E0B;flex-shrink:0; }
.dot-6-magenta { width:6px;height:6px;border-radius:50%;background:#BE55A3;flex-shrink:0; }
.dot-6-blue { width:6px;height:6px;border-radius:50%;background:#3B82F6;flex-shrink:0; }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto { padding:clamp(80px,10vw,140px) clamp(24px,6vw,80px);background:#fff;max-width:1100px;margin:0 auto; }
.manifesto-line { font-family:var(--font-display);font-size:clamp(26px,3.6vw,50px);font-weight:700;line-height:1.12;color:#0F172A;margin-bottom:clamp(24px,4vw,48px);text-wrap:pretty; }
.manifesto-line-accent { font-family:var(--font-display);font-size:clamp(26px,3.6vw,50px);font-weight:700;line-height:1.12;color:#BE55A3;text-wrap:pretty; }

/* ============================================================
   PRODUCTS — HUB / Security / Chatbot (incl. mockups)
   ============================================================ */
.section-light { padding:clamp(60px,8vw,100px) clamp(24px,6vw,80px);background:#F8F8FB; }
.products-intro { text-align:center;margin-bottom:clamp(56px,8vw,100px);max-width:760px;margin-left:auto;margin-right:auto; }
.products-label { font-family:var(--font-sans);font-size:13px;font-weight:700;color:#BE55A3;letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px; }
.products-title { font-family:var(--font-display);font-size:clamp(32px,4.2vw,56px);font-weight:700;line-height:1.08;letter-spacing:-.025em;color:#0F172A;text-wrap:pretty; }
.product-row { max-width:1200px;margin:0 auto clamp(64px,8vw,110px);display:flex;align-items:center;justify-content:center;gap:clamp(32px,5vw,80px);flex-wrap:wrap; }
.product-copy { flex:1;min-width:280px;max-width:460px; }
.hub-audience { font-family:var(--font-sans);font-size:12px;font-weight:700;color:#BE55A3;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px; }
.hub-title { font-family:var(--font-display);font-size:clamp(34px,4vw,52px);font-weight:700;line-height:1;letter-spacing:-.025em;color:#BE55A3;margin-bottom:14px; }
.product-tagline { font-family:var(--font-display);font-size:clamp(19px,1.9vw,24px);font-weight:600;line-height:1.25;letter-spacing:-.01em;color:#0F172A;margin-bottom:16px; }
.product-desc { font-family:var(--font-sans);font-size:16px;line-height:1.7;color:#475569; }
.mock-wrap { flex:0 0 auto; }
.tilt-left { transform:rotate(-1.5deg); }
/* Product mockups float like the hero dashboard; staggered starts so the
   three don't bob in unison. Lives on the frame (not .mock-wrap) so it
   composes with the tilt rotation and the scroll-reveal transform. */
.hub-frame, .sec-frame, .wa-phone { animation: lf-float 4s ease-in-out infinite; }
.sec-frame { animation-delay: 1.3s; }
.wa-phone { animation-delay: 2.6s; }
.hub-frame { width:clamp(300px,42vw,510px);border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(15,23,42,.13),0 8px 20px rgba(15,23,42,.06); }
.hub-topbar { height:38px;background:#BE55A3;padding:0 14px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0; }
.hub-topbar-logo { height:16px;width:auto; }
.hub-topbar-name { font-size:10px;color:rgba(255,255,255,.6); }
.hub-body { display:flex;min-height:clamp(190px,28vw,320px); }
.hub-side { width:132px;flex-shrink:0;background:#F6EEF4;padding:10px 0; }
.hub-side-active { padding:7px 11px;margin:0 6px;border-radius:8px;background:#BE55A3;display:flex;align-items:center;gap:7px;margin-bottom:3px; }
.ic-12-white { width:12px;height:12px;color:white;flex-shrink:0; }
.hub-side-active-text { font-size:10px;font-weight:600;color:white; }
.hub-side-item { padding:7px 11px;margin:0 6px;display:flex;align-items:center;gap:7px;margin-bottom:1px; }
.ic-12-mauve { width:12px;height:12px;color:#A98AA0;flex-shrink:0; }
.hub-side-text { font-size:10px;color:#86627C; }
.hub-side-item-last { padding:7px 11px;margin:0 6px;display:flex;align-items:center;gap:7px; }
.hub-main { flex:1;background:#fff;display:flex;flex-direction:column;overflow:hidden;min-width:0; }
.hub-stats { padding:12px 14px 10px;display:flex;gap:8px;flex-shrink:0; }
.hub-stat { flex:1;background:#F8F9FC;border-radius:10px;padding:8px 10px; }
.hub-stat-label { font-size:7px;font-weight:600;color:#94A3B8;margin-bottom:2px; }
.hub-stat-value { font-family:var(--font-display);font-size:16px;font-weight:700;color:#0F172A;line-height:1.1; }
.hub-stat-sub-warn { font-size:7px;color:#EA580C;margin-top:2px; }
.hub-panels { padding:0 14px 14px;flex:1;display:flex;flex-direction:column;gap:8px; }
.bar-63 { flex:1;background:#F1D6E8;border-radius:3px 3px 0 0;height:63%; }
.hub-activity-card { background:#F8F9FC;border-radius:10px;padding:9px 11px; }
.hub-activity-title { font-size:9px;font-weight:600;color:#0F172A;margin-bottom:6px; }
.hub-activity-list { display:flex;flex-direction:column;gap:5px; }
.dot-5-green { width:5px;height:5px;border-radius:50%;background:#22c55e;flex-shrink:0; }
.hub-activity-time { font-size:7px;color:#94A3B8; }
.dot-5-blue { width:5px;height:5px;border-radius:50%;background:#3B82F6;flex-shrink:0; }
.sec-row { max-width:1200px;margin:0 auto clamp(64px,8vw,110px);display:flex;align-items:center;justify-content:center;gap:clamp(32px,5vw,80px);flex-wrap:wrap-reverse; }
.tilt-right { transform:rotate(2deg); }
.sec-frame { width:234px;border-radius:26px;overflow:hidden;box-shadow:0 30px 70px rgba(15,23,42,.18),0 8px 20px rgba(15,23,42,.08); }
.sec-topbar { background:#1E3A8A;padding:14px 16px 12px;display:flex;align-items:center;justify-content:space-between; }
.sec-topbar-label { font-family:var(--font-display);font-size:10px;font-weight:700;color:rgba(255,255,255,.65);letter-spacing:.05em; }
.sec-topbar-time { font-family:var(--font-mono);font-size:16px;font-weight:700;color:white;margin-top:2px; }
.sec-topbar-right { text-align:right; }
.sec-station { font-size:9px;color:rgba(255,255,255,.5); }
.sec-online-row { display:flex;align-items:center;justify-content:flex-end;gap:3px;margin-top:2px; }
.sec-online-dot { width:5px;height:5px;border-radius:50%;background:#60A5FA;display:inline-block; }
.sec-online-text { font-size:9px;color:#60A5FA;font-weight:500; }
.sec-request { background:#EFF6FF;padding:14px; }
.sec-request-label { font-size:10px;font-weight:600;color:#1D4ED8;margin-bottom:10px;text-transform:uppercase;letter-spacing:.05em; }
.sec-visitor-card { background:white;border-radius:12px;padding:13px;box-shadow:0 4px 14px rgba(37,99,235,.1);margin-bottom:10px; }
.sec-visitor-head { display:flex;align-items:center;gap:9px;margin-bottom:9px; }
.sec-visitor-avatar { width:34px;height:34px;border-radius:50%;background:#DBEAFE;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.sec-visitor-initials { font-size:12px;font-weight:700;color:#1D4ED8; }
.sec-visitor-name { font-size:12px;font-weight:600;color:#0F172A; }
.sec-visitor-unit { font-size:10px;color:#64748B; }
.sec-visitor-meta { display:flex;gap:6px; }
.sec-meta-chip { flex:1;background:#F1F5F9;border-radius:7px;padding:5px 8px;display:flex;align-items:center;gap:4px; }
.sec-chip-icon { width:10px;height:10px;color:#64748B;flex-shrink:0; }
.sec-plate { font-size:9px;font-weight:600;color:#0F172A;font-family:var(--font-mono); }
.sec-meta-text { font-size:9px;color:#64748B; }
.sec-approve { width:100%;background:#1D4ED8;color:white;border:none;padding:12px;border-radius:999px;font-family:var(--font-sans);font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:8px;box-shadow:0 6px 16px rgba(29,78,216,.3); }
.sec-reject { width:100%;background:transparent;color:#64748B;border:none;padding:8px;border-radius:999px;font-family:var(--font-sans);font-size:12px;font-weight:600;cursor:pointer; }
.sec-log { background:white;padding:11px 14px; }
.sec-log-label { font-size:9px;font-weight:600;color:#94A3B8;margin-bottom:7px;letter-spacing:.04em; }
.sec-log-row-entry { display:flex;align-items:center;gap:7px;margin-bottom:6px; }
.sec-log-icon-entry { width:20px;height:20px;border-radius:50%;background:#DBEAFE;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.ic-10-blue { width:10px;height:10px;color:#1D4ED8; }
.cell-grow { flex:1;min-width:0; }
.sec-log-name { font-size:9px;font-weight:500;color:#0F172A; }
.sec-log-time { font-size:8px;color:#94A3B8; }
.sec-log-tag-entry { font-size:8px;color:#1D4ED8;font-weight:600; }
.sec-log-row-exit { display:flex;align-items:center;gap:7px; }
.sec-log-icon-exit { width:20px;height:20px;border-radius:50%;background:#F1F5F9;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.ic-10-slate { width:10px;height:10px;color:#64748B; }
.sec-log-tag-exit { font-size:8px;color:#64748B;font-weight:600; }
.sec-audience { font-family:var(--font-sans);font-size:12px;font-weight:700;color:#1D4ED8;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px; }
.sec-title { font-family:var(--font-display);font-size:clamp(34px,4vw,52px);font-weight:700;line-height:1;letter-spacing:-.025em;color:#1D4ED8;margin-bottom:14px; }
.chat-row { max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:clamp(32px,5vw,80px);flex-wrap:wrap; }
.chat-audience { font-family:var(--font-sans);font-size:12px;font-weight:700;color:#15803D;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px; }
.chat-title { font-family:var(--font-display);font-size:clamp(34px,4vw,52px);font-weight:700;line-height:1;letter-spacing:-.025em;color:#15803D;margin-bottom:14px; }
.wa-phone { width:256px;border-radius:30px;overflow:hidden;background:#000;padding:8px;box-shadow:0 30px 70px rgba(15,23,42,.2),0 8px 20px rgba(15,23,42,.1); }
.wa-screen { border-radius:23px;overflow:hidden;background:#EBE6E0; }
.wa-statusbar { background:#F6F6F6;padding:7px 18px 2px;display:flex;align-items:center;justify-content:space-between; }
.wa-time { font-family:var(--font-sans);font-size:11px;font-weight:700;color:#000; }
.wa-status-icons { display:flex;align-items:center;gap:4px; }
.ic-13-black { width:13px;height:13px;color:#000; }
.ic-16-black { width:16px;height:16px;color:#000; }
.wa-header { background:#F6F6F6;padding:4px 12px 9px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #D8D6D2; }
.ic-20-blue { width:20px;height:20px;color:#007AFF;flex-shrink:0; }
.wa-avatar { width:32px;height:32px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.ic-15-white { width:15px;height:15px;color:white; }
.wa-contact-name { font-size:13px;font-weight:600;color:#000;line-height:1.2; }
.wa-contact-status { font-size:10px;color:#8E8E93; }
.ic-19-blue { width:19px;height:19px;color:#007AFF;flex-shrink:0; }
.ic-17-blue { width:17px;height:17px;color:#007AFF;flex-shrink:0; }
.wa-chat { background:#EBE6E0;padding:12px 12px;display:flex;flex-direction:column;gap:8px;min-height:260px; }
.wa-day-wrap { text-align:center; }
.wa-day { background:#D6E3F0;color:#5A6B7B;font-size:9px;font-weight:600;padding:3px 10px;border-radius:8px; }
.wa-bubble-in { align-self:flex-start;max-width:80%;background:#fff;border-radius:14px 14px 14px 4px;padding:8px 11px;box-shadow:0 1px 1px rgba(0,0,0,.08); }
.wa-msg { font-size:11.5px;color:#0B0B0B;line-height:1.45; }
.wa-time-in { font-size:8.5px;color:#9AA0A6;text-align:right;margin-top:2px; }
.wa-bubble-out { align-self:flex-end;max-width:75%;background:#E1FFC7;border-radius:14px 14px 4px 14px;padding:8px 11px;box-shadow:0 1px 1px rgba(0,0,0,.06); }
.wa-out-meta { display:flex;align-items:center;justify-content:flex-end;gap:2px;margin-top:2px; }
.wa-time-out { font-size:8.5px;color:#7A9A6E; }
.ic-12-check { width:12px;height:12px;color:#34B7F1; }
.wa-inputbar { background:#F6F6F6;padding:8px 12px 12px;display:flex;align-items:center;gap:9px;border-top:1px solid #D8D6D2; }
.wa-input { flex:1;background:#fff;border:1px solid #D8D6D2;border-radius:999px;padding:6px 12px;font-size:11px;color:#9AA0A6; }
.ic-18-blue { width:18px;height:18px;color:#007AFF;flex-shrink:0; }

/* ============================================================
   MODULAR — module chips
   ============================================================ */
.modular { padding:clamp(60px,8vw,100px) clamp(24px,6vw,80px);background:#fff; }
.container-1100 { max-width:1100px;margin:0 auto; }
.modular-intro { text-align:center;margin-bottom:clamp(40px,5vw,56px);max-width:600px;margin-left:auto;margin-right:auto; }
.section-label { font-family:var(--font-sans);font-size:13px;font-weight:700;color:#BE55A3;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px; }
.section-title { font-family:var(--font-display);font-size:clamp(28px,4vw,50px);font-weight:700;line-height:1.1;letter-spacing:-.025em;color:#0F172A;margin-bottom:14px;text-wrap:pretty; }
.section-sub { font-family:var(--font-sans);font-size:clamp(15px,1.3vw,17px);line-height:1.7;color:#64748B; }
.modular-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px; }
.module-chip { display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 4px 20px rgba(15,23,42,.06); }
.chip-icon-on { width:38px;height:38px;border-radius:10px;background:#FDE7F3;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.ic-18-magenta { width:18px;height:18px;color:#BE55A3; }
.chip-name-on { flex:1;font-family:var(--font-sans);font-size:14px;font-weight:600;color:#0F172A; }
.chip-toggle-on { width:34px;height:20px;border-radius:999px;background:#BE55A3;position:relative;flex-shrink:0; }
.chip-knob-on { position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:#fff; }
.chip-icon-off { width:38px;height:38px;border-radius:10px;background:#F1F5F9;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.ic-18-gray { width:18px;height:18px;color:#94A3B8; }
.chip-name-off { flex:1;font-family:var(--font-sans);font-size:14px;font-weight:600;color:#64748B; }
.chip-toggle-off { width:34px;height:20px;border-radius:999px;background:#E2E8F0;position:relative;flex-shrink:0; }
.chip-knob-off { position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff; }

/* ============================================================
   FLOW — how it works
   ============================================================ */
.flow { padding:clamp(60px,8vw,100px) clamp(24px,6vw,80px);background:#0D0812;overflow:hidden;position:relative; }
.flow-grid-overlay { position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px;pointer-events:none; }
.flow-inner { max-width:1180px;margin:0 auto;position:relative;z-index:1; }
/* 720px (was 560) so "Tres productos en sincronía" fits on one line at 1440 */
.flow-intro { text-align:center;margin-bottom:clamp(40px,5vw,64px);max-width:720px;margin-left:auto;margin-right:auto; }
.flow-label { font-family:var(--font-sans);font-size:13px;font-weight:700;color:#E879C0;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px; }
.flow-title { font-family:var(--font-display);font-size:clamp(28px,4vw,50px);font-weight:700;line-height:1.1;letter-spacing:-.025em;color:white;margin-bottom:14px;text-wrap:pretty; }
.flow-sub { font-family:var(--font-sans);font-size:16px;line-height:1.7;color:rgba(255,255,255,.42); }
.flow-cards { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(16px,2.5vw,28px); }
.flow-card-wrap { position:relative; }
.flow-card { background:rgba(255,255,255,.04);border-radius:18px;padding:26px 24px;height:100%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.flow-card-head { display:flex;align-items:center;gap:10px;margin-bottom:18px; }
.flow-icon-chat { width:44px;height:44px;border-radius:13px;background:rgba(37,211,102,.14);display:flex;align-items:center;justify-content:center; }
.ic-20-green { width:20px;height:20px;color:#4ADE80; }
.flow-num { font-family:var(--font-display);font-size:30px;font-weight:800;color:rgba(255,255,255,.38);line-height:1; }
.flow-role-chat { font-family:var(--font-sans);font-size:11px;font-weight:700;color:#4ADE80;letter-spacing:.06em;margin-bottom:8px; }
.flow-step-title { font-family:var(--font-display);font-size:18px;font-weight:700;color:#fff;margin-bottom:8px;line-height:1.2; }
.flow-step-desc { font-family:var(--font-sans);font-size:13px;line-height:1.6;color:rgba(255,255,255,.5); }
.flow-icon-sec { width:44px;height:44px;border-radius:13px;background:rgba(59,130,246,.14);display:flex;align-items:center;justify-content:center; }
.ic-20-lightblue { width:20px;height:20px;color:#60A5FA; }
.flow-role-sec { font-family:var(--font-sans);font-size:11px;font-weight:700;color:#60A5FA;letter-spacing:.06em;margin-bottom:8px; }
.flow-card-accent { background:rgba(190,85,163,.1);border-radius:18px;padding:26px 24px;height:100%;box-shadow:inset 0 0 0 1px rgba(190,85,163,.25); }
.flow-icon-hub { width:44px;height:44px;border-radius:13px;background:rgba(190,85,163,.2);display:flex;align-items:center;justify-content:center; }
.ic-20-pink { width:20px;height:20px;color:#E879C0; }
.flow-role-hub { font-family:var(--font-sans);font-size:11px;font-weight:700;color:#E879C0;letter-spacing:.06em;margin-bottom:8px; }
.flow-step-desc-bright { font-family:var(--font-sans);font-size:13px;line-height:1.6;color:rgba(255,255,255,.6); }

/* ============================================================
   FOUNDERS program
   ============================================================ */
/* 900px (was 520) so "Trato preferencial para los primeros" fits on one line
   at desktop widths; wraps naturally on smaller screens */
.founders-intro { text-align:center;margin-bottom:clamp(40px,5vw,60px);max-width:900px;margin-left:auto;margin-right:auto; }
.founders-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px; }
.founders-card { border-radius:18px;padding:32px;background:white;box-shadow:0 10px 40px rgba(15,23,42,.07); }
.founders-icon { width:48px;height:48px;border-radius:13px;background:#FDE7F3;display:flex;align-items:center;justify-content:center;margin-bottom:20px; }
.ic-22-magenta { width:22px;height:22px;color:#BE55A3; }
.founders-card-title { font-family:var(--font-display);font-size:19px;font-weight:700;color:#0F172A;margin-bottom:10px; }
.founders-asterisk { font-weight:100;margin-left:3px }
.founders-card-desc { font-family:var(--font-sans);font-size:14px;line-height:1.65;color:#475569; }
.founders-note { font-family:var(--font-sans);font-size:11px;color:#94A3B8;margin-top:24px; }

/* ============================================================
   WAITLIST / contact form
   ============================================================ */
.waitlist { padding:clamp(80px,10vw,130px) clamp(24px,6vw,80px);background:#0A0712;text-align:center;position:relative;overflow:hidden; }
.waitlist-ring-lg { position:absolute;top:50%;left:50%;width:500px;height:500px;margin:-250px 0 0 -250px;border-radius:50%;border:1px solid rgba(190,85,163,.12);animation:lf-pulse 4.5s ease-out infinite;pointer-events:none; }
.waitlist-ring-sm { position:absolute;top:50%;left:50%;width:320px;height:320px;margin:-160px 0 0 -160px;border-radius:50%;border:1px solid rgba(190,85,163,.18);animation:lf-pulse 4.5s ease-out 1.5s infinite;pointer-events:none; }
.waitlist-inner { max-width:640px;margin:0 auto;position:relative;z-index:1; }
.waitlist-label { font-family:var(--font-sans);font-size:13px;font-weight:700;color:#E879C0;letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px; }
.waitlist-title { font-family:var(--font-display);font-size:clamp(34px,5vw,60px);font-weight:700;line-height:1.08;letter-spacing:-.03em;color:white;margin-bottom:20px; }
.waitlist-sub { font-family:var(--font-sans);font-size:clamp(15px,1.4vw,17px);line-height:1.7;color:rgba(255,255,255,.48);margin-bottom:40px;max-width:520px;margin-left:auto;margin-right:auto; }
.waitlist-form { display:flex;gap:10px;flex-wrap:wrap;justify-content:center; }
.honeypot { position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none; }
.waitlist-email { flex:1;min-width:220px;max-width:320px;padding:15px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:white;font-family:var(--font-sans);font-size:15px;outline:none; }
.waitlist-submit { background:#BE55A3;color:white;border:none;padding:15px 28px;border-radius:999px;font-family:var(--font-sans);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;box-shadow:0 10px 30px rgba(190,85,163,.4);transition:transform 200ms,box-shadow 200ms; }
.waitlist-submit:hover { transform:translateY(-2px);box-shadow:0 16px 40px rgba(190,85,163,.5) }
.waitlist-disclaimer { font-family:var(--font-sans);font-size:12px;color:rgba(255,255,255,.28);margin-top:16px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:#080610;border-top:1px solid rgba(255,255,255,.06);padding:clamp(40px,5vw,64px) clamp(24px,6vw,80px); }
.footer-top { max-width:1200px;margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap; }
.footer-brand { flex:1;min-width:220px; }
.footer-logo { height:28px;width:auto;display:block;margin-bottom:16px; }
.footer-tagline { font-family:var(--font-sans);font-size:13px;color:rgba(255,255,255,.32);line-height:1.6;max-width:240px; }
.footer-mx { font-family:var(--font-sans);font-size:12px;color:rgba(255,255,255,.48);margin-top:16px; }
.footer-cols { display:flex;gap:48px;flex-wrap:wrap; }
.footer-col-title { font-family:var(--font-sans);font-size:11px;font-weight:700;color:rgba(255,255,255,.3);letter-spacing:.08em;margin-bottom:14px; }
.footer-col-links { display:flex;flex-direction:column;gap:10px; }
.footer-link { font-family:var(--font-sans);font-size:13px;color:rgba(255,255,255,.42);text-decoration:none; }
.footer-link:hover { color:rgba(255,255,255,.8) }
.footer-bottom { max-width:1200px;margin:32px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px; }
.footer-fineprint { font-family:var(--font-sans);font-size:12px;color:rgba(255,255,255,.2); }
.footer-social-wrap { display:flex;align-items:center;gap:16px; }
.footer-social { color:rgba(255,255,255,.35);text-decoration:none;display:flex;align-items:center;transition:color 200ms; }
.footer-social:hover { color:rgba(255,255,255,.8); }

/* ============================================================
   ACCESSIBILITY & MOBILE NAV
   (visual output unchanged for mouse users at desktop widths)
   ============================================================ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link: hidden until focused with the keyboard */
.skip-link {
  position: fixed; left: -9999px; top: 0; z-index: 2000;
  background: #BE55A3; color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; text-decoration: none;
}
.skip-link:focus-visible { left: 0; }

/* Keyboard focus indicator (mouse clicks do not trigger :focus-visible) */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #BE55A3;
  outline-offset: 2px;
}

/* The Security mockup "buttons" are decorative spans (mockup is aria-hidden);
   these keep them rendering exactly like the buttons they replaced */
.sec-reject { display: inline-block; text-align: center; }

/* Honor reduced-motion for every animation, not just [data-reveal] */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Mobile menu (<=768px the nav links are otherwise hidden) */
.nav-menu-btn {
  display: none;
  background: none; border: none; cursor: pointer; padding: 6px; border-radius: 8px;
  color: rgba(255,255,255,.82);
  transition: color 250ms cubic-bezier(.2,0,0,1);
}
.site-nav.is-scrolled .nav-menu-btn { color: #334155; }
.nav-mobile-panel { display: none; }
@media (max-width: 768px) {
  .nav-menu-btn { display: flex; align-items: center; }
  .site-nav.menu-open .nav-mobile-panel {
    display: flex; flex-direction: column;
    padding: 10px 4px 14px;
  }
  .nav-mobile-link {
    font-family: var(--font-sans); font-size: 15px; font-weight: 500;
    color: #334155; text-decoration: none;
    padding: 12px 10px; border-radius: 10px;
  }
  .nav-mobile-link:hover { background: rgba(15,23,42,.05); }
  .nav-mobile-cta {
    background: #BE55A3; color: #fff; text-decoration: none; text-align: center;
    font-family: var(--font-sans); font-size: 14px; font-weight: 600;
    padding: 12px 22px; border-radius: 999px;
    margin: 8px 10px 4px;
    box-shadow: 0 4px 14px rgba(190,85,163,.3);
  }
  .nav-mobile-cta:hover { opacity: .88; }
}

/* The pill CTA no longer fits beside logo + language toggle + hamburger on
   small phones (copy: "Comunidad Fundadora"); it lives in the menu instead */
@media (max-width: 480px) {
  .site-nav .nav-cta { display: none; }
}