/* ---- block 0 ---- */
/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-cyrillic.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/fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-cyrillic.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/fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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;
}
/* ---- block 1 ---- */
/* ============================================================
   WAPCASH — Webfonts
   Substitution note: the brand has no licensed UI typeface
   specified. These Google Fonts are chosen to match the
   premium, calm-confident grotesque character of the brand
   (Stripe × Linear × Apple). Swap for licensed files when
   available — see readme.md › VISUAL FOUNDATIONS.
   ------------------------------------------------------------
   Display  → Schibsted Grotesk  (headlines, large editorial type)
   Sans/UI  → Hanken Grotesk     (body, interface, tabular figures)
   Mono     → JetBrains Mono     (references, codes, technical)
   ============================================================ */

/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-cyrillic.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/fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-cyrillic.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/fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-cyrillic.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/fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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;
}
/* ---- block 2 ---- */
/* ============================================================
   WAPCASH — Color System
   "Invisible infrastructure made visible."
   Source of truth: WAPCASH Design System (brand PDF).
   Brand greens carry energy & motion; charcoal carries trust;
   soft grey (never stark white) is the default canvas.
   ============================================================ */

:root {
  /* ---- Brand greens (raw) ---------------------------------- */
  --green-bright:   #52E33A;   /* Brand Green   — primary, "money in motion" */
  --green-emerald:  #18C85A;   /* Emerald       — secondary, WhatsApp-adjacent */
  --green-deep:     #006B3C;   /* Deep Infrastructure Green — accent, grounding */

  /* Green scale (derived, harmonised in oklch) */
  --green-50:   #ecfdf0;
  --green-100:  #d2f9da;
  --green-200:  #a6f0b6;
  --green-300:  #6fe888;
  --green-400:  #52e33a;   /* = brand bright */
  --green-500:  #18c85a;   /* = emerald */
  --green-600:  #0ea54b;
  --green-700:  #0a803c;
  --green-800:  #006b3c;   /* = deep infra */
  --green-900:  #064a2c;
  --green-950:  #032a1a;

  /* ---- Trust charcoal / ink -------------------------------- */
  --charcoal:   #0B1220;   /* Trust Charcoal — primary dark */
  --ink-950:    #060a14;
  --ink-900:    #0b1220;   /* = charcoal */
  --ink-800:    #131c2e;
  --ink-700:    #1d293f;
  --ink-600:    #2c3a54;
  --ink-500:    #43536f;
  --ink-400:    #677890;
  --ink-300:    #93a1b5;
  --ink-200:    #c3ccd8;
  --ink-100:    #e2e7ee;

  /* ---- Soft greys / surfaces ------------------------------- */
  --grey-bg:    #F5F7F8;   /* Default Surface — primary site background */
  --grey-0:     #ffffff;   /* used inside cards only, never as page bg */
  --grey-25:    #fafbfc;
  --grey-50:    #f5f7f8;   /* = grey-bg */
  --grey-100:   #eef1f4;
  --grey-150:   #e6eaef;
  --grey-200:   #dde2e9;
  --grey-300:   #c7cfd9;

  /* ---- Glass (glassmorphism layer) ------------------------- */
  --glass-fill:        rgba(255,255,255,0.08);
  --glass-fill-strong: rgba(255,255,255,0.14);
  --glass-border:      rgba(255,255,255,0.18);
  --glass-border-lit:  rgba(255,255,255,0.24);
  --glass-fill-dark:   rgba(11,18,32,0.55);   /* glass over light photography */
  --glass-border-dark: rgba(11,18,32,0.10);

  /* ---- Semantic: status ------------------------------------ */
  --success:    #18c85a;
  --success-bg: #e7faef;
  --warning:    #f5a524;
  --warning-bg: #fdf3e0;
  --danger:     #e5484d;
  --danger-bg:  #fdeaea;
  --info:       #2a6fdb;
  --info-bg:    #e9f1fc;

  /* ---- WhatsApp surface (product context only) ------------- */
  --wa-green:      #25d366;   /* WhatsApp brand — chat mockups only */
  --wa-bubble-out: #dcf8c6;   /* outgoing message bubble */
  --wa-bubble-in:  #ffffff;   /* incoming message bubble */
  --wa-chat-bg:    #0b141a;   /* dark chat canvas */
  --wa-header:     #1f2c34;   /* chat header / composer bar */

  /* ============================================================
     SEMANTIC ALIASES — reference these in product code
     ============================================================ */

  /* Brand */
  --brand:            var(--green-emerald);   /* default brand action green */
  --brand-bright:     var(--green-bright);
  --brand-deep:       var(--green-deep);
  --brand-gradient:   linear-gradient(135deg, var(--green-bright) 0%, var(--green-emerald) 45%, var(--green-deep) 100%);
  --brand-glow:       0 0 40px rgba(24,200,90,0.45);

  /* Backgrounds */
  --surface-page:     var(--grey-bg);     /* the canvas — soft grey, never white */
  --surface-card:     var(--grey-0);      /* raised card on the page */
  --surface-sunken:   var(--grey-100);
  --surface-inverse:  var(--charcoal);    /* dark sections / footers */
  --surface-inverse-2:var(--ink-800);

  /* Text on light */
  --text-strong:      var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-400);
  --text-subtle:      var(--ink-300);
  --text-brand:       var(--green-deep);
  --text-on-brand:    #ffffff;

  /* Text on dark / glass */
  --text-strong-inv:  #ffffff;
  --text-body-inv:    rgba(255,255,255,0.78);
  --text-muted-inv:   rgba(255,255,255,0.55);

  /* Borders & lines */
  --border-subtle:    var(--grey-200);
  --border-default:   var(--grey-300);
  --border-strong:    var(--ink-200);
  --hairline:         rgba(11,18,32,0.08);

  /* Focus */
  --focus-ring:       0 0 0 3px rgba(24,200,90,0.40);
}
/* ---- block 3 ---- */
/* ============================================================
   WAPCASH — Typography
   Large, calm, confident. Editorial scale for headlines;
   humanist grotesque for body & UI; mono for references.
   ============================================================ */

:root {
  /* ---- Families -------------------------------------------- */
  --font-display: "Schibsted Grotesk", "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-sans:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Weights --------------------------------------------- */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extra:     800; /* @kind font */
  --fw-black:     900; /* @kind font */

  /* ---- Type scale (fluid where it matters) ----------------- */
  --text-display:  clamp(3rem, 6vw, 5.5rem);   /* hero — Money in Motion */
  --text-h1:       clamp(2.25rem, 4vw, 3.5rem);
  --text-h2:       clamp(1.75rem, 3vw, 2.5rem);
  --text-h3:       1.5rem;     /* 24 */
  --text-h4:       1.25rem;    /* 20 */
  --text-lead:     1.25rem;    /* 20 — intro paragraphs */
  --text-body-lg:  1.0625rem;  /* 17 */
  --text-body:     1rem;       /* 16 */
  --text-sm:       0.875rem;   /* 14 */
  --text-xs:       0.75rem;    /* 12 */
  --text-2xs:      0.6875rem;  /* 11 — eyebrows / labels */

  /* ---- Line heights ---------------------------------------- */
  --lh-tight:      1.04; /* @kind font */
  --lh-snug:       1.18; /* @kind font */
  --lh-normal:     1.5; /* @kind font */
  --lh-relaxed:    1.65; /* @kind font */

  /* ---- Letter spacing -------------------------------------- */
  --ls-tight:      -0.03em; /* @kind font */
  --ls-snug:       -0.015em; /* @kind font */
  --ls-normal:     0; /* @kind font */
  --ls-wide:       0.02em; /* @kind font */
  --ls-eyebrow:    0.16em; /* @kind font */

  /* ---- Semantic aliases ------------------------------------ */
  --heading-font:  var(--font-display);
  --heading-weight: var(--fw-bold);
  --body-font:     var(--font-sans);
  --eyebrow-transform: uppercase; /* @kind other */
}
/* ---- block 4 ---- */
/* ============================================================
   WAPCASH — Spacing, Radii, Shadows, Blur, Layout
   Soft depth. Soft shadows only — never heavy.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---- Radii ----------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);
  --radius-glass: var(--radius-xl);

  /* ---- Shadows (soft, layered — never heavy) --------------- */
  --shadow-xs:   0 1px 2px rgba(11,18,32,0.05);
  --shadow-sm:   0 2px 6px rgba(11,18,32,0.06);
  --shadow-md:   0 8px 24px rgba(11,18,32,0.08);
  --shadow-lg:   0 18px 48px rgba(11,18,32,0.10);
  --shadow-xl:   0 32px 80px rgba(11,18,32,0.12);
  /* glass card shadow — diffuse, low-contrast */
  --shadow-glass: 0 20px 60px rgba(11,18,32,0.18), inset 0 1px 0 rgba(255,255,255,0.22);
  /* green action glow */
  --shadow-brand: 0 10px 30px rgba(24,200,90,0.28);

  /* ---- Blur (glassmorphism) -------------------------------- */
  --blur-glass:    blur(24px) saturate(135%); /* @kind other */
  --blur-glass-sm: blur(14px) saturate(125%); /* @kind other */
  --blur-glass-lg: blur(40px) saturate(140%); /* @kind other */

  /* ---- Layout --------------------------------------------- */
  --container:      1200px; /* @kind spacing */
  --container-wide: 1360px; /* @kind spacing */
  --container-text: 720px; /* @kind spacing */
  --gutter:         clamp(20px, 5vw, 64px); /* @kind spacing */
  --section-y:      clamp(64px, 10vw, 140px); /* @kind spacing */

  /* ---- Z-index -------------------------------------------- */
  --z-base:    0; /* @kind other */
  --z-raised:  10; /* @kind other */
  --z-sticky:  100; /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-modal:   1100; /* @kind other */
  --z-toast:   1200; /* @kind other */
}
/* ---- block 5 ---- */
/* ============================================================
   WAPCASH — Motion
   "Everything should feel alive. Subtle. Premium. Never
   distracting." Money moves; pages breathe; nothing snaps.
   ============================================================ */

:root {
  /* ---- Durations ------------------------------------------- */
  --dur-instant: 90ms; /* @kind other */
  --dur-fast:    160ms; /* @kind other */
  --dur-base:    260ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */
  --dur-slower:  680ms; /* @kind other */
  --dur-reveal:  1100ms; /* @kind other */

  /* ---- Easing (no harsh easing, no snapping) --------------- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-glide:    cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-breathe:  cubic-bezier(0.45, 0, 0.55, 1); /* @kind other */

  /* ---- Semantic -------------------------------------------- */
  --motion-hover:  var(--dur-fast) var(--ease-out); /* @kind other */
  --motion-press:  var(--dur-instant) var(--ease-standard); /* @kind other */
  --motion-enter:  var(--dur-base) var(--ease-out); /* @kind other */
  --motion-reveal: var(--dur-reveal) var(--ease-glide); /* @kind other */

  /* interaction feedback */
  --press-scale:   0.97; /* @kind other */
  --hover-lift:    -2px; /* @kind other */
}

/* Living infrastructure — slow symbol spin & breathing glow.
   Decorative loops only; gate on reduced-motion in product. */
@keyframes wap-spin-slow   { to   { transform: rotate(360deg); } }
@keyframes wap-breathe     { 0%,100% { opacity: 0.55; transform: scale(1); }
                             50%     { opacity: 1;    transform: scale(1.04); } }
@keyframes wap-pulse-bars  { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes wap-flow        { to { background-position: 200% 0; } }
@keyframes wap-rise        { from { opacity: 0; transform: translateY(16px); }
                             to   { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-reveal: 1ms; /* @kind other */ --dur-slow: 1ms; /* @kind other */ --dur-slower: 1ms; /* @kind other */ }
}
/* ---- block 6 ---- */
/* ============================================================
   WAPCASH — Base element styling & utility primitives.
   Light touch: sets the canvas, type defaults, and a few
   brand helpers. Product code should lean on tokens, not this.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);            /* soft grey — never stark white */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01";
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-brand); text-decoration: none; }
a:hover { color: var(--green-600); }

::selection { background: rgba(82,227,58,0.28); color: var(--ink-900); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

/* ---- Brand text helpers ---------------------------------- */
.wap-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
}
.wap-gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wap-mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.wap-amount { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---- Glass surface helper -------------------------------- */
.wap-glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  box-shadow: var(--shadow-glass);
}
/* ---- block 7 ---- */
/* ============================================================
   WAPCASH Design System — global entry point.
   Consumers link THIS file only. Import lines only — no rules.
   ============================================================ */

/* ============================================================
   WAPCASH — Webfonts
   Substitution note: the brand has no licensed UI typeface
   specified. These Google Fonts are chosen to match the
   premium, calm-confident grotesque character of the brand
   (Stripe × Linear × Apple). Swap for licensed files when
   available — see readme.md › VISUAL FOUNDATIONS.
   ------------------------------------------------------------
   Display  → Schibsted Grotesk  (headlines, large editorial type)
   Sans/UI  → Hanken Grotesk     (body, interface, tabular figures)
   Mono     → JetBrains Mono     (references, codes, technical)
   ============================================================ */

/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-cyrillic.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/fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-cyrillic.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/fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-cyrillic.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/fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-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;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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;
}
/* latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/fonts/schibsted-grotesk-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;
}


/* ============================================================
   WAPCASH — Color System
   "Invisible infrastructure made visible."
   Source of truth: WAPCASH Design System (brand PDF).
   Brand greens carry energy & motion; charcoal carries trust;
   soft grey (never stark white) is the default canvas.
   ============================================================ */

:root {
  /* ---- Brand greens (raw) ---------------------------------- */
  --green-bright:   #52E33A;   /* Brand Green   — primary, "money in motion" */
  --green-emerald:  #18C85A;   /* Emerald       — secondary, WhatsApp-adjacent */
  --green-deep:     #006B3C;   /* Deep Infrastructure Green — accent, grounding */

  /* Green scale (derived, harmonised in oklch) */
  --green-50:   #ecfdf0;
  --green-100:  #d2f9da;
  --green-200:  #a6f0b6;
  --green-300:  #6fe888;
  --green-400:  #52e33a;   /* = brand bright */
  --green-500:  #18c85a;   /* = emerald */
  --green-600:  #0ea54b;
  --green-700:  #0a803c;
  --green-800:  #006b3c;   /* = deep infra */
  --green-900:  #064a2c;
  --green-950:  #032a1a;

  /* ---- Trust charcoal / ink -------------------------------- */
  --charcoal:   #0B1220;   /* Trust Charcoal — primary dark */
  --ink-950:    #060a14;
  --ink-900:    #0b1220;   /* = charcoal */
  --ink-800:    #131c2e;
  --ink-700:    #1d293f;
  --ink-600:    #2c3a54;
  --ink-500:    #43536f;
  --ink-400:    #677890;
  --ink-300:    #93a1b5;
  --ink-200:    #c3ccd8;
  --ink-100:    #e2e7ee;

  /* ---- Soft greys / surfaces ------------------------------- */
  --grey-bg:    #F5F7F8;   /* Default Surface — primary site background */
  --grey-0:     #ffffff;   /* used inside cards only, never as page bg */
  --grey-25:    #fafbfc;
  --grey-50:    #f5f7f8;   /* = grey-bg */
  --grey-100:   #eef1f4;
  --grey-150:   #e6eaef;
  --grey-200:   #dde2e9;
  --grey-300:   #c7cfd9;

  /* ---- Glass (glassmorphism layer) ------------------------- */
  --glass-fill:        rgba(255,255,255,0.08);
  --glass-fill-strong: rgba(255,255,255,0.14);
  --glass-border:      rgba(255,255,255,0.18);
  --glass-border-lit:  rgba(255,255,255,0.24);
  --glass-fill-dark:   rgba(11,18,32,0.55);   /* glass over light photography */
  --glass-border-dark: rgba(11,18,32,0.10);

  /* ---- Semantic: status ------------------------------------ */
  --success:    #18c85a;
  --success-bg: #e7faef;
  --warning:    #f5a524;
  --warning-bg: #fdf3e0;
  --danger:     #e5484d;
  --danger-bg:  #fdeaea;
  --info:       #2a6fdb;
  --info-bg:    #e9f1fc;

  /* ---- WhatsApp surface (product context only) ------------- */
  --wa-green:      #25d366;   /* WhatsApp brand — chat mockups only */
  --wa-bubble-out: #dcf8c6;   /* outgoing message bubble */
  --wa-bubble-in:  #ffffff;   /* incoming message bubble */
  --wa-chat-bg:    #0b141a;   /* dark chat canvas */
  --wa-header:     #1f2c34;   /* chat header / composer bar */

  /* ============================================================
     SEMANTIC ALIASES — reference these in product code
     ============================================================ */

  /* Brand */
  --brand:            var(--green-emerald);   /* default brand action green */
  --brand-bright:     var(--green-bright);
  --brand-deep:       var(--green-deep);
  --brand-gradient:   linear-gradient(135deg, var(--green-bright) 0%, var(--green-emerald) 45%, var(--green-deep) 100%);
  --brand-glow:       0 0 40px rgba(24,200,90,0.45);

  /* Backgrounds */
  --surface-page:     var(--grey-bg);     /* the canvas — soft grey, never white */
  --surface-card:     var(--grey-0);      /* raised card on the page */
  --surface-sunken:   var(--grey-100);
  --surface-inverse:  var(--charcoal);    /* dark sections / footers */
  --surface-inverse-2:var(--ink-800);

  /* Text on light */
  --text-strong:      var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-400);
  --text-subtle:      var(--ink-300);
  --text-brand:       var(--green-deep);
  --text-on-brand:    #ffffff;

  /* Text on dark / glass */
  --text-strong-inv:  #ffffff;
  --text-body-inv:    rgba(255,255,255,0.78);
  --text-muted-inv:   rgba(255,255,255,0.55);

  /* Borders & lines */
  --border-subtle:    var(--grey-200);
  --border-default:   var(--grey-300);
  --border-strong:    var(--ink-200);
  --hairline:         rgba(11,18,32,0.08);

  /* Focus */
  --focus-ring:       0 0 0 3px rgba(24,200,90,0.40);
}

/* ============================================================
   WAPCASH — Typography
   Large, calm, confident. Editorial scale for headlines;
   humanist grotesque for body & UI; mono for references.
   ============================================================ */

:root {
  /* ---- Families -------------------------------------------- */
  --font-display: "Schibsted Grotesk", "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-sans:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Weights --------------------------------------------- */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extra:     800; /* @kind font */
  --fw-black:     900; /* @kind font */

  /* ---- Type scale (fluid where it matters) ----------------- */
  --text-display:  clamp(3rem, 6vw, 5.5rem);   /* hero — Money in Motion */
  --text-h1:       clamp(2.25rem, 4vw, 3.5rem);
  --text-h2:       clamp(1.75rem, 3vw, 2.5rem);
  --text-h3:       1.5rem;     /* 24 */
  --text-h4:       1.25rem;    /* 20 */
  --text-lead:     1.25rem;    /* 20 — intro paragraphs */
  --text-body-lg:  1.0625rem;  /* 17 */
  --text-body:     1rem;       /* 16 */
  --text-sm:       0.875rem;   /* 14 */
  --text-xs:       0.75rem;    /* 12 */
  --text-2xs:      0.6875rem;  /* 11 — eyebrows / labels */

  /* ---- Line heights ---------------------------------------- */
  --lh-tight:      1.04; /* @kind font */
  --lh-snug:       1.18; /* @kind font */
  --lh-normal:     1.5; /* @kind font */
  --lh-relaxed:    1.65; /* @kind font */

  /* ---- Letter spacing -------------------------------------- */
  --ls-tight:      -0.03em; /* @kind font */
  --ls-snug:       -0.015em; /* @kind font */
  --ls-normal:     0; /* @kind font */
  --ls-wide:       0.02em; /* @kind font */
  --ls-eyebrow:    0.16em; /* @kind font */

  /* ---- Semantic aliases ------------------------------------ */
  --heading-font:  var(--font-display);
  --heading-weight: var(--fw-bold);
  --body-font:     var(--font-sans);
  --eyebrow-transform: uppercase; /* @kind other */
}

/* ============================================================
   WAPCASH — Spacing, Radii, Shadows, Blur, Layout
   Soft depth. Soft shadows only — never heavy.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---- Radii ----------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);
  --radius-glass: var(--radius-xl);

  /* ---- Shadows (soft, layered — never heavy) --------------- */
  --shadow-xs:   0 1px 2px rgba(11,18,32,0.05);
  --shadow-sm:   0 2px 6px rgba(11,18,32,0.06);
  --shadow-md:   0 8px 24px rgba(11,18,32,0.08);
  --shadow-lg:   0 18px 48px rgba(11,18,32,0.10);
  --shadow-xl:   0 32px 80px rgba(11,18,32,0.12);
  /* glass card shadow — diffuse, low-contrast */
  --shadow-glass: 0 20px 60px rgba(11,18,32,0.18), inset 0 1px 0 rgba(255,255,255,0.22);
  /* green action glow */
  --shadow-brand: 0 10px 30px rgba(24,200,90,0.28);

  /* ---- Blur (glassmorphism) -------------------------------- */
  --blur-glass:    blur(24px) saturate(135%); /* @kind other */
  --blur-glass-sm: blur(14px) saturate(125%); /* @kind other */
  --blur-glass-lg: blur(40px) saturate(140%); /* @kind other */

  /* ---- Layout --------------------------------------------- */
  --container:      1200px; /* @kind spacing */
  --container-wide: 1360px; /* @kind spacing */
  --container-text: 720px; /* @kind spacing */
  --gutter:         clamp(20px, 5vw, 64px); /* @kind spacing */
  --section-y:      clamp(64px, 10vw, 140px); /* @kind spacing */

  /* ---- Z-index -------------------------------------------- */
  --z-base:    0; /* @kind other */
  --z-raised:  10; /* @kind other */
  --z-sticky:  100; /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-modal:   1100; /* @kind other */
  --z-toast:   1200; /* @kind other */
}

/* ============================================================
   WAPCASH — Motion
   "Everything should feel alive. Subtle. Premium. Never
   distracting." Money moves; pages breathe; nothing snaps.
   ============================================================ */

:root {
  /* ---- Durations ------------------------------------------- */
  --dur-instant: 90ms; /* @kind other */
  --dur-fast:    160ms; /* @kind other */
  --dur-base:    260ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */
  --dur-slower:  680ms; /* @kind other */
  --dur-reveal:  1100ms; /* @kind other */

  /* ---- Easing (no harsh easing, no snapping) --------------- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-glide:    cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-breathe:  cubic-bezier(0.45, 0, 0.55, 1); /* @kind other */

  /* ---- Semantic -------------------------------------------- */
  --motion-hover:  var(--dur-fast) var(--ease-out); /* @kind other */
  --motion-press:  var(--dur-instant) var(--ease-standard); /* @kind other */
  --motion-enter:  var(--dur-base) var(--ease-out); /* @kind other */
  --motion-reveal: var(--dur-reveal) var(--ease-glide); /* @kind other */

  /* interaction feedback */
  --press-scale:   0.97; /* @kind other */
  --hover-lift:    -2px; /* @kind other */
}

/* Living infrastructure — slow symbol spin & breathing glow.
   Decorative loops only; gate on reduced-motion in product. */
@keyframes wap-spin-slow   { to   { transform: rotate(360deg); } }
@keyframes wap-breathe     { 0%,100% { opacity: 0.55; transform: scale(1); }
                             50%     { opacity: 1;    transform: scale(1.04); } }
@keyframes wap-pulse-bars  { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes wap-flow        { to { background-position: 200% 0; } }
@keyframes wap-rise        { from { opacity: 0; transform: translateY(16px); }
                             to   { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-reveal: 1ms; /* @kind other */ --dur-slow: 1ms; /* @kind other */ --dur-slower: 1ms; /* @kind other */ }
}

/* ============================================================
   WAPCASH — Base element styling & utility primitives.
   Light touch: sets the canvas, type defaults, and a few
   brand helpers. Product code should lean on tokens, not this.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);            /* soft grey — never stark white */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01";
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-brand); text-decoration: none; }
a:hover { color: var(--green-600); }

::selection { background: rgba(82,227,58,0.28); color: var(--ink-900); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

/* ---- Brand text helpers ---------------------------------- */
.wap-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-brand);
}
.wap-gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wap-mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.wap-amount { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---- Glass surface helper -------------------------------- */
.wap-glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  box-shadow: var(--shadow-glass);
}
/* ---- block 8 ---- */
html { scroll-behavior: smooth; }
  body { margin: 0; background: #e9edef; color: #0B1220; font-family: var(--font-sans); overflow-x: hidden; }
  ::selection { background: rgba(82,227,58,0.3); color: #fff; }
  .world-layer { position: fixed; inset: 0; pointer-events: none; }

  /* ===== environments ===== */
  #bg-stack { z-index: 0; }
  .bg { position: fixed; inset: 0; opacity: 0; transform: scale(1.06);
    transition: opacity 1.3s cubic-bezier(.4,0,.2,1), transform 9s ease-out; will-change: opacity, transform; }
  .bg.on { opacity: 1; transform: scale(1); }
  /* Spatial UI: the photographed world recedes opposite the pointer (JS sets the transform inline). */
  body[data-spatial="on"] .bg img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
  .bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .bg .scrim { position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(233,237,239,0.32) 0%, rgba(233,237,239,0) 13%, rgba(233,237,239,0) 80%, rgba(11,18,32,0.06) 100%); }
  @media (max-width: 1100px) {
    .bg .scrim { background: linear-gradient(180deg, rgba(233,237,239,0.42) 0%, rgba(233,237,239,0) 18%, rgba(233,237,239,0) 68%, rgba(11,18,32,0.05) 100%); }
  }
  /* void environments — deep gradient canvas */
  body[data-bg="void"]::before, body[data-bg="void-warm"]::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(120% 95% at 72% 8%, #ffffff, #e9eef0 52%, #dce3e6 100%); }
  body[data-bg="void-warm"]::before { background: radial-gradient(120% 95% at 28% 10%, #f4fbf4, #e8efe9 56%, #dce7df 100%); }

  /* ambient */
  #ambient { z-index: 1; overflow: hidden; }
  .glow { position: absolute; border-radius: 50%; filter: blur(60px); animation: breathe 11s ease-in-out infinite; }
  .glow.a { top: -16vh; left: -8vw; width: 52vw; height: 52vw; background: radial-gradient(circle, rgba(82,227,58,0.16), transparent 65%); }
  .glow.b { bottom: -20vh; right: -10vw; width: 50vw; height: 50vw; background: radial-gradient(circle, rgba(24,200,90,0.15), transparent 65%); animation-delay: 2s; }
  @keyframes breathe { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:.85;transform:scale(1.12)} }
  .particle { position: absolute; bottom: -2vh; width: 4px; height: 4px; border-radius: 50%; background: #6fe888;
    box-shadow: 0 0 10px 2px rgba(82,227,58,0.55); animation: drift linear infinite; opacity: .4; }
  @keyframes drift { from{transform:translateY(8vh);opacity:0} 12%{opacity:.55} 88%{opacity:.55} to{transform:translateY(-92vh) translateX(26px);opacity:0} }

  /* logo as architecture */
  #architecture { z-index: 1; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 1.4s ease; perspective: 1600px; }
  body[data-phase="deep"] #architecture { opacity: 1; }
  body[data-phase="mid"] #architecture { opacity: .4; }
  .arch-mark { width: min(56vw, 600px); height: min(56vw, 600px); opacity: .16;
    transform-style: preserve-3d; will-change: transform, filter;
    animation: archSpin 22s ease-in-out infinite; }
  /* Glass-sculpture rotation about the vertical Y-axis — the W turns edge-on, refracts light, glows green. */
  @keyframes archSpin {
    0%   { transform: rotateY(0deg);   filter: drop-shadow(0 0 60px rgba(82,227,58,0.25)) brightness(1); }
    24%  { filter: drop-shadow(0 0 110px rgba(120,255,120,0.6)) brightness(1.7); }
    25%  { transform: rotateY(90deg); }
    50%  { transform: rotateY(180deg); filter: drop-shadow(0 0 60px rgba(82,227,58,0.25)) brightness(1); }
    74%  { filter: drop-shadow(0 0 110px rgba(120,255,120,0.6)) brightness(1.7); }
    75%  { transform: rotateY(270deg); }
    100% { transform: rotateY(360deg); filter: drop-shadow(0 0 60px rgba(82,227,58,0.25)) brightness(1); }
  }
  .arch-ring { position: absolute; border: 1px solid rgba(82,227,58,0.16); border-radius: 50%; animation: ringPulse 7s ease-in-out infinite; }
  @keyframes ringPulse { 0%,100%{transform:scale(1);opacity:.4} 50%{transform:scale(1.07);opacity:.14} }

  /* signals */
  #signals { z-index: 2; opacity: .22; transition: opacity 1.2s ease; }
  body[data-phase="mid"] #signals { opacity: .55; }
  body[data-phase="deep"] #signals { opacity: .9; }
  .sig-path { fill: none; stroke: url(#sigGrad); stroke-width: 1.4; stroke-dasharray: 5 14; animation: sigFlow 2.4s linear infinite; }
  @keyframes sigFlow { to { stroke-dashoffset: -38; } }
  .packet circle { fill: #52E33A; filter: drop-shadow(0 0 6px rgba(82,227,58,0.9)); }
  @keyframes travel0 { from{offset-distance:0%} to{offset-distance:100%} }
  @keyframes pgPulse { 0%,100%{opacity:.35;transform:translateY(0)} 50%{opacity:1;transform:translateY(-3px)} }
  .licon { display: inline-flex; align-items: center; justify-content: center; }
  .licon svg { width: 100%; height: 100%; display: block; }

  /* ===== hero portal (landing) ===== */
  #hero { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(14px, 2.2vh, 26px); padding: clamp(92px,11vh,128px) max(5vw,24px) clamp(26px,4vh,48px); box-sizing: border-box; overflow-y: auto;
    background: radial-gradient(120% 95% at 50% -6%, #0e1828 0%, #070c16 58%, #04060d 100%); }
  body[data-stage="world"] #hero { display: none; }
  body[data-stage="hero"] #wos-main, body[data-stage="hero"] footer { display: none; }
  .hero-glow { position: absolute; top: -12%; left: 50%; transform: translateX(-50%); width: 70vw; height: 56vh; border-radius: 50%;
    background: radial-gradient(circle, rgba(82,227,58,0.20), transparent 64%); filter: blur(76px); pointer-events: none; }
  .hero-glow.b { top: auto; bottom: -24%; left: 50%; width: 52vw; height: 44vh; background: radial-gradient(circle, rgba(24,200,90,0.13), transparent 66%); }
  .hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  .hero-watermark { position: absolute; top: 50%; left: 50%; width: min(118vh, 1180px); height: auto; transform: translate(-50%,-52%); opacity: 0.045; filter: grayscale(1) brightness(2.4); }
  .hero-lines { position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: screen;
    background:
      radial-gradient(1.4px 1.4px at 18% 30%, rgba(82,227,58,0.5), transparent 60%),
      radial-gradient(1.4px 1.4px at 72% 22%, rgba(111,232,136,0.45), transparent 60%),
      radial-gradient(1.2px 1.2px at 40% 72%, rgba(82,227,58,0.4), transparent 60%),
      radial-gradient(1.6px 1.6px at 86% 64%, rgba(24,200,90,0.4), transparent 60%),
      radial-gradient(1.2px 1.2px at 58% 44%, rgba(111,232,136,0.35), transparent 60%),
      radial-gradient(1.3px 1.3px at 28% 84%, rgba(82,227,58,0.3), transparent 60%);
    background-repeat: no-repeat; animation: heroDrift 14s ease-in-out infinite alternate; }
  @keyframes heroDrift { from { transform: translateY(-8px); } to { transform: translateY(8px); } }
  @media (prefers-reduced-motion: reduce) { .hero-lines { animation: none; } }
  .hero-inner { position: relative; z-index: 1; width: 100%; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(16px,2.4vh,26px); }
  .hero-head { display: flex; flex-direction: column; align-items: center; gap: 13px; text-align: center; }
  .hero-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    color: #d6f7dd; background: rgba(82,227,58,0.10); border: 1px solid rgba(82,227,58,0.32); font-family: var(--font-sans); }
  .hero-status .pulse { width: 8px; height: 8px; border-radius: 50%; background: #52E33A; box-shadow: 0 0 9px #52E33A; animation: evBlink 1.6s ease-in-out infinite; }
  .hero-logo { display: flex; align-items: center; gap: 11px; }
  .hero-logo img { width: 40px; height: 40px; }
  .hero-logo span { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; color: #fff; }
  .hero-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02;
    font-size: clamp(2.1rem, 5.2vw, 4rem); color: #fff; margin: 0; text-wrap: balance; max-width: 16ch; }
  .hero-title .wa { color: #52E33A; }
  .hero-sub { font-size: clamp(0.95rem, 1.3vw, 1.15rem); line-height: 1.55; color: rgba(233,237,239,0.66); margin: 0; max-width: 50ch; }
  .hero-vision { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(111,232,136,0.85); margin: 4px 0 0; display: inline-flex; align-items: center; gap: 9px; }
  .hero-vision::before, .hero-vision::after { content: ""; width: 22px; height: 1px; background: rgba(111,232,136,0.4); }
  .hero-actions { display: flex; gap: 12px; margin-top: 6px; }
  .hero-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-gradient); color: #06210f; font-family: var(--font-sans); font-weight: 700; font-size: 15px; padding: 13px 22px; border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 10px 28px rgba(82,227,58,0.34); transition: transform .2s var(--ease-out,cubic-bezier(.16,1,.3,1)), box-shadow .2s ease; }
  .hero-cta i { width: 17px; height: 17px; }
  .hero-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(82,227,58,0.46); }
  .hero-cta:active { transform: scale(0.97); }
  /* ===== capture forms (waitlist / early access / contact) ===== */
  .capture-wrap { margin-top: 10px; }
  .capture { display: block; border-radius: 20px; padding: 20px; background: #fff; border: 1px solid rgba(11,18,32,0.08); box-shadow: 0 10px 30px rgba(11,18,32,0.08); }
  .cap-head { margin-bottom: 14px; }
  .cap-e { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #0a7d43; }
  .cap-t { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; color: #0B1220; margin-top: 6px; line-height: 1.1; }
  .cap-s { font-size: 14px; color: rgba(11,18,32,0.62); margin-top: 6px; line-height: 1.45; }
  .cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .cap-field { display: flex; flex-direction: column; gap: 6px; }
  .cap-field.cap-full { grid-column: 1 / -1; }
  .cap-field > span { font-size: 12.5px; font-weight: 600; color: #0B1220; }
  .cap-field > span i { color: #34a853; font-style: normal; }
  .cap-field input, .cap-field textarea { font-family: var(--font-sans); font-size: 14.5px; color: #0B1220; background: #f5f7f8; border: 1px solid rgba(11,18,32,0.12); border-radius: 12px; padding: 11px 13px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; width: 100%; box-sizing: border-box; }
  .cap-field textarea { resize: vertical; min-height: 74px; }
  .cap-field input:focus, .cap-field textarea:focus { border-color: #52E33A; box-shadow: 0 0 0 3px rgba(82,227,58,0.18); }
  .cap-consent { font-size: 11.5px; color: rgba(11,18,32,0.5); line-height: 1.45; margin: 14px 0 0; }
  .cap-consent a { color: #0a7d43; font-weight: 600; text-decoration: none; }
  .cap-consent a:hover { text-decoration: underline; }
  .cap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
  .cap-wa { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: #0a7d43; text-decoration: none; }
  .cap-wa i { width: 16px; height: 16px; }
  .cap-wa:hover { text-decoration: underline; }
  .cap-success { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; border-radius: 20px; padding: 24px; background: #fff; border: 1px solid rgba(82,227,58,0.4); box-shadow: 0 10px 30px rgba(11,18,32,0.08); }
  .cap-tick { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-gradient); color: #fff; margin-bottom: 4px; }
  .cap-tick i { width: 22px; height: 22px; }
  @media (max-width: 560px) { .cap-grid { grid-template-columns: 1fr; } }
  /* phone is a permanently-fixed centrepiece (see #phone-dock) — the hero text sits beside it, never on top of it */
  @media (min-width: 1101px) {
    #hero { align-items: flex-start; justify-content: flex-start; padding-left: calc(50vw + 22px); padding-right: max(5vw, 56px); }
    .hero-inner { margin: 0; align-items: flex-start; }
    .hero-head { align-items: flex-start; text-align: left; }
    .hero-title { max-width: 18ch; }
    .hero-sub { max-width: 46ch; }
  }
  @media (max-width: 1100px) {
    #hero { justify-content: flex-start; padding-bottom: clamp(220px, 38vh, 360px); }
  }
  @media (max-width: 540px) {
    .hero-title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  }

  /* ===== nav ===== */
  nav { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 60; width: min(1280px, calc(100% - 32px));
    display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 9px 9px 9px 16px;
    background: rgba(255,255,255,0.62); backdrop-filter: blur(22px) saturate(135%); -webkit-backdrop-filter: blur(22px) saturate(135%);
    border: 1px solid rgba(255,255,255,0.7); border-radius: 999px; box-shadow: 0 18px 44px rgba(11,18,32,0.12), inset 0 1px 0 rgba(255,255,255,0.9); }
  .nav-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 8px; border-radius: 999px; transition: background .2s ease; position: relative; }
  .nav-logo:hover { background: rgba(11,18,32,0.05); }
  .nav-logo .mk { position: relative; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; perspective: 200px; }
  .nav-logo .mk img { width: 30px; height: 30px; display: block; transform-style: preserve-3d; transition: transform .7s var(--ease-out,cubic-bezier(.16,1,.3,1)); }
  .nav-logo:hover .mk img { transform: rotateY(180deg); }
  .nav-logo .mk::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid rgba(82,227,58,0); transition: border-color .3s ease, box-shadow .3s ease; }
  .nav-logo:hover .mk::after { border-color: rgba(82,227,58,0.6); box-shadow: 0 0 16px rgba(82,227,58,0.4); }
  .nav-logo b { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: #0B1220; }
  .wmk .g { color: #52E33A; }
  /* pulsing world choices inside the phone (landing) */
  @keyframes choicePulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(11,18,32,0.10), 0 0 0 0 rgba(82,227,58,0); border-color: rgba(82,227,58,0.28); }
    50% { box-shadow: 0 9px 24px rgba(82,227,58,0.32), 0 0 0 4px rgba(82,227,58,0.20); border-color: rgba(82,227,58,0.7); }
  }
  @keyframes choiceGo {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
  }
  .wos-choice { animation: choicePulse 2.4s ease-in-out infinite; transition: transform .18s var(--ease-out,cubic-bezier(.16,1,.3,1)); }
  .wos-choice:hover { transform: translateY(-2px); }
  .wos-choice:active { transform: scale(0.98); }
  .wos-choice .wos-choice-go { animation: choiceGo 2.4s ease-in-out infinite; animation-delay: inherit; }
  @media (prefers-reduced-motion: reduce) { .wos-choice, .wos-choice .wos-choice-go { animation: none; } }
  .nav-logo .tag { font-size: 11px; font-family: var(--font-mono); color: rgba(11,18,32,0.5); letter-spacing: 0.04em; }
  .nav-worlds { display: flex; align-items: center; gap: 2px; }
  .nav-worlds a { font-size: 13.5px; font-weight: 600; color: rgba(11,18,32,0.66); padding: 8px 13px; border-radius: 999px; cursor: pointer; transition: all .2s ease; white-space: nowrap; }
  .nav-worlds a:hover { background: rgba(11,18,32,0.06); color: #0B1220; }
  .nav-worlds a.on { color: #0a0d12; background: #6fe888; }
  .nav-portal { margin-left: 4px; display: inline-flex; align-items: center; gap: 8px; background: var(--brand-gradient); color: #fff; font-weight: 700; font-size: 13.5px; padding: 10px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; border: none; font-family: var(--font-sans); box-shadow: 0 10px 26px rgba(24,200,90,0.3); transition: transform .2s ease; }
  .nav-portal:hover { transform: translateY(-1px); }
  .nav-portal i { width: 16px; height: 16px; }

  #progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 61; background: var(--brand-gradient); box-shadow: 0 0 14px rgba(82,227,58,0.7); transition: width .15s linear; }

  /* ===== phone ===== */
  body[data-spatial="on"] #phone-dock { transition: transform .5s cubic-bezier(.16,1,.3,1); }
  /* --phone-s drives BOTH the base transform and the JS parallax, so the device scales down
     on shorter viewports without ever jumping. It guarantees the full 800px screen — header,
     welcome line and all three pills — stays within the fold on a typical laptop. */
  #phone-dock { --phone-s: 0.86; position: fixed; top: clamp(92px,11vh,128px); left: max(4vw, 40px); right: auto; transform: scale(var(--phone-s)); z-index: 40; transform-origin: top left; filter: drop-shadow(0 44px 88px rgba(4,8,16,0.6)); }
  #phone-dock.phone-fade { opacity: 0; transition: opacity .22s ease; }
  /* Desktop: anchor the phone so its RIGHT edge sits at the viewport centre (50%), a small gap before the
     hero text. Placed AFTER the base rule so it wins over the base `left`. Applies in every state (hero +
     world) so the phone never jumps. Scaled width = 392 * 0.86 ≈ 337px, so left = 50vw - 337px. */
  @media (min-width: 1101px) { #phone-dock { left: calc(50vw - 337px); right: auto; } }
  /* WORLD pages only: the phone sits in its own column on the LEFT (left edge ~10% in), clear of the
     content panel on the right. Landing/hero keeps the centre anchor above. Higher specificity
     (body[...] + #id) so this wins for the in-world state; it holds steady across worlds + back. */
  @media (min-width: 1101px) { body[data-stage="world"] #phone-dock { left: 10%; right: auto; } }

  /* ===== scenes ===== */
  #wos-main { position: relative; z-index: 5; }
  .scene { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 15vh max(5vw, 40px) 15vh; box-sizing: border-box; perspective: 1500px; perspective-origin: 50% 40%; }
  .col { position: relative; max-width: 600px; border-radius: 30px; padding: 38px 40px; }
  .col::before { content: ""; position: absolute; inset: 0; border-radius: 30px; z-index: 0;
    background: rgba(252,253,253,0.74); backdrop-filter: blur(30px) saturate(145%); -webkit-backdrop-filter: blur(28px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 44px 96px rgba(11,18,32,0.2), inset 0 1px 0 rgba(255,255,255,0.9); }
  .col > * { position: relative; z-index: 1; }
  /* Spatial UI: the glass content plane tilts toward the pointer like a panel suspended in space.
     (backdrop-filter lives on ::before so this element is free to hold a real 3D transform; JS sets it inline.) */
  body[data-spatial="on"] .col { transition: transform .4s cubic-bezier(.16,1,.3,1); will-change: transform; }
  @media (min-width: 1101px) {
    .scene { align-items: center; padding-left: calc(50vw + 22px); padding-right: max(5vw, 56px); }
    .col { margin: 0; max-width: 560px; width: 100%; }
  }

  .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #0a7d43; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
  .eyebrow::before { content: ""; width: 26px; height: 1px; background: #0a7d43; opacity: .6; }
  h1.disp { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.0; font-size: clamp(2.8rem, 6.2vw, 5.4rem); margin: 22px 0 0; color: #0B1220; text-wrap: balance; }
  h2.disp { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; font-size: clamp(2.1rem, 4.4vw, 3.7rem); margin: 20px 0 0; color: #0B1220; text-wrap: balance; }
  .lead { font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.62; color: rgba(11,18,32,0.66); max-width: 54ch; margin: 22px 0 0; }
  .zulu { font-family: var(--font-display); font-style: italic; font-weight: 600; color: #0a7d43; font-size: 1.15rem; margin-top: 20px; letter-spacing: -0.01em; }
  .extra { margin-top: 30px; }

  .scroll-cue { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(11,18,32,0.5); font-family: var(--font-mono); }
  .scroll-cue .dot { width: 22px; height: 36px; border: 1.5px solid rgba(11,18,32,0.3); border-radius: 999px; position: relative; }
  .scroll-cue .dot::after { content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:4px; height:7px; border-radius:999px; background:#18C85A; animation: cueDrop 1.8s ease-in-out infinite; }
  @keyframes cueDrop { 0%{opacity:0;top:7px} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0;top:20px} }
  /* Spatial UI: framed photos drift inside their frames — parallax through a glass window (JS sets transform inline). */
  body[data-spatial="on"] .showcase img, body[data-spatial="on"] .photofloat img { transition: transform .5s cubic-bezier(.16,1,.3,1); }

  .glasscard { background: rgba(255,255,255,0.55); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); border: 1px solid rgba(255,255,255,0.7); border-radius: 24px; box-shadow: 0 22px 55px rgba(11,18,32,0.13), inset 0 1px 0 rgba(255,255,255,0.85); }

  .stat-row { display: flex; flex-wrap: wrap; gap: 14px; }
  .stat { padding: 18px 22px; min-width: 150px; }
  .stat .n { font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; color: #0B1220; font-variant-numeric: tabular-nums; }
  .stat .n small { font-size: 1.1rem; color: #0a7d43; }
  .stat .l { font-size: 13px; color: rgba(11,18,32,0.6); margin-top: 4px; }
  .stat-row.big .stat .n { font-size: 2.7rem; }
  .stat-row.big .stat { padding: 22px 26px; }

  .chips { display: flex; flex-direction: column; gap: 10px; }
  .chip { display: flex; align-items: center; gap: 12px; padding: 13px 18px; font-size: 14.5px; color: rgba(11,18,32,0.85); font-weight: 500; }
  .chip i { color: #18C85A; flex: 0 0 auto; width: 19px; height: 19px; }

  .photo-inset { width: min(100%, 460px); border-radius: 22px; overflow: hidden; position: relative; padding: 0; }
  .photo-inset img { width: 100%; height: 250px; object-fit: cover; display: block; }
  .photo-inset .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; background: linear-gradient(180deg, transparent, rgba(6,10,20,0.85)); font-size: 13px; color: rgba(255,255,255,0.88); display: flex; align-items: center; gap: 8px; }
  .photo-inset .cap i { color: #6fe888; width: 17px; height: 17px; flex: 0 0 auto; }

  /* code panel */
  .code-panel { width: min(100%, 480px); overflow: hidden; padding: 0; background: rgba(8,14,28,0.72); }
  .code-head { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-bottom: 1px solid rgba(82,227,58,0.18); background: rgba(82,227,58,0.07); }
  .code-method { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: #0a0d12; background: #52E33A; padding: 2px 8px; border-radius: 5px; letter-spacing: 0.04em; }
  .code-title { font-family: var(--font-mono); font-size: 13px; color: #a6f0b6; font-weight: 500; flex: 1; }
  .code-dots { display: flex; gap: 5px; } .code-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); display: block; }
  .code-body { margin: 0; padding: 16px 18px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.75; color: #d2f9da; white-space: pre-wrap; word-break: break-word; }
  .code-body .c-k { color: #6fe888; } .code-body .c-s { color: #fff; } .code-body .c-n { color: #ffd479; } .code-body .c-p { color: #52E33A; font-weight: 600; } .code-body .c-c { color: rgba(166,240,182,0.5); font-style: italic; }

  /* routing diagram */
  .diagram { width: min(100%, 520px); padding: 18px; background: rgba(255,255,255,0.58); border: 1px solid rgba(255,255,255,0.7); }
  .diagram svg { width: 100%; height: auto; display: block; }
  .dg-line { fill: none; stroke: rgba(24,200,90,0.5); stroke-width: 1.5; stroke-dasharray: 4 8; animation: sigFlow 2.6s linear infinite; }
  .dg-node circle, .dg-psp circle { fill: rgba(11,18,32,0.04); stroke: rgba(11,18,32,0.28); stroke-width: 1.2; }
  .dg-hub circle { fill: rgba(82,227,58,0.14); stroke: #18C85A; stroke-width: 1.5; }
  .diagram text { fill: rgba(11,18,32,0.7); font-family: var(--font-mono); font-size: 11px; text-anchor: middle; }
  .dg-packet { fill: #18C85A; filter: drop-shadow(0 0 5px rgba(82,227,58,0.7)); }

  /* event stream */
  .evstream { width: min(100%, 480px); padding: 16px 18px; background: rgba(255,255,255,0.58); border: 1px solid rgba(255,255,255,0.7); }
  .ev-head { font-family: var(--font-mono); font-size: 12px; color: #0a7d43; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; letter-spacing: 0.04em; }
  .ev-live { width: 8px; height: 8px; border-radius: 50%; background: #18C85A; box-shadow: 0 0 8px #18C85A; animation: evBlink 1.4s ease-in-out infinite; }
  @keyframes evBlink { 0%,100%{opacity:1} 50%{opacity:.3} }
  .ev-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(11,18,32,0.08); font-family: var(--font-mono); font-size: 12.5px; opacity: 0; animation: evIn .6s ease forwards; }
  @keyframes evIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:none} }
  .ev-name { color: #0B1220; font-weight: 600; flex: 0 0 auto; }
  .ev-meta { color: rgba(11,18,32,0.55); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ev-tag { font-size: 10.5px; padding: 2px 8px; border-radius: 5px; font-weight: 600; flex: 0 0 auto; }
  .ev-ok { background: rgba(24,200,90,0.16); color: #0a7d43; } .ev-live { } .ev-tag.ev-live { background: rgba(52,183,241,0.18); color: #1c79a8; }

  /* bars */
  .bars { width: min(100%, 480px); padding: 20px 22px; background: rgba(255,255,255,0.58); border: 1px solid rgba(255,255,255,0.7); }
  .bars-title { font-family: var(--font-mono); font-size: 12px; color: #0a7d43; letter-spacing: 0.04em; margin-bottom: 16px; }
  .bar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 13px; }
  .bar-l { width: 96px; flex: 0 0 auto; font-size: 13px; color: rgba(11,18,32,0.72); }
  .bar-track { flex: 1; height: 8px; border-radius: 999px; background: rgba(11,18,32,0.08); overflow: hidden; }
  .bar-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #52E33A, #18C85A); transition: width 1.3s cubic-bezier(.16,1,.3,1); }
  .in .bar-fill { width: var(--w); }
  .bar-v { width: 70px; flex: 0 0 auto; text-align: right; font-family: var(--font-mono); font-size: 13px; color: #0B1220; font-variant-numeric: tabular-nums; }

  .mega { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: clamp(3.2rem, 10vw, 8rem); line-height: 0.92; margin: 0;
    background: linear-gradient(135deg, #6fe888 0%, #52E33A 40%, #18C85A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--brand-gradient); color: #fff; font-weight: 700; font-size: 16px; padding: 15px 28px; border-radius: 999px; border: none; cursor: pointer; box-shadow: 0 16px 40px rgba(24,200,90,0.35); transition: transform .2s ease, box-shadow .2s ease; font-family: var(--font-sans); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 54px rgba(24,200,90,0.5); }
  .btn-primary i { width: 18px; height: 18px; }

  .portal-hint { display: inline-flex; align-items: center; gap: 11px; padding: 11px 12px 11px 18px; border-radius: 999px; cursor: pointer; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: #0B1220;
    background: rgba(255,255,255,0.6); border: 1px solid rgba(11,18,32,0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: all .25s ease; }
  .portal-hint:hover { background: rgba(82,227,58,0.14); border-color: rgba(82,227,58,0.5); }
  .portal-hint i { width: 18px; height: 18px; color: #18C85A; }
  .portal-hint b { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: #0a0d12; background: #6fe888; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }

  /* ===== rich media extras ===== */
  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(100%, 560px); }
  .gtile { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 20px 44px rgba(6,10,20,0.42); }
  .gtile img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.05); transition: transform 1.3s var(--ease-out,cubic-bezier(.16,1,.3,1)); }
  .gtile:hover img { transform: scale(1.15); }
  .gtile-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(6,10,20,0.84)); }
  .gtile-label { position: absolute; left: 12px; right: 12px; bottom: 11px; font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.3; }
  @media (max-width: 560px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

  .photofloat { position: relative; width: min(100%, 560px); border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 34px 80px rgba(6,10,20,0.5); }
  .photofloat img { width: 100%; height: 360px; object-fit: cover; display: block; }
  .pf-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,10,20,0.06), rgba(6,10,20,0.5)); }
  .pf-signal { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(82,227,58,0.07) 8px, transparent 11px);
    -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000); }
  .pf-card { position: absolute; display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 15px;
    background: rgba(14,20,32,0.52); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 18px 40px rgba(6,10,20,0.45); animation: pfBob 5.5s ease-in-out infinite; }
  .pf-tl { top: 16px; left: 16px; } .pf-tr { top: 16px; right: 16px; animation-delay: .6s; }
  .pf-bl { bottom: 16px; left: 16px; animation-delay: 1s; } .pf-br { bottom: 16px; right: 16px; animation-delay: 1.4s; }
  @keyframes pfBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  .pf-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .pf-ic i { width: 18px; height: 18px; color: #fff; }
  .pf-t { font-size: 11.5px; color: rgba(255,255,255,0.72); }
  .pf-v { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #fff; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
  .pf-s { font-size: 11px; color: #6fe888; margin-top: 1px; }
  .pf-cap { position: absolute; left: 16px; bottom: 14px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,0.92); text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
  .pf-cap i { width: 16px; height: 16px; color: #6fe888; flex: 0 0 auto; }

  .trust { display: flex; flex-wrap: wrap; gap: 10px; width: min(100%, 560px); }
  .tpill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: rgba(11,18,32,0.85);
    background: rgba(255,255,255,0.55); border: 1px solid rgba(11,18,32,0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .tpill i { width: 16px; height: 16px; color: #18C85A; }

  .showcase { position: relative; width: min(100%, 560px); border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 30px 70px rgba(6,10,20,0.5); }
  .showcase img { width: 100%; height: 300px; object-fit: cover; display: block; transform: scale(1.04); }
  .sc-grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, rgba(6,10,20,0.9)); }
  .sc-tx { position: absolute; left: 20px; right: 20px; bottom: 18px; }
  .sc-e { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #6fe888; }
  .sc-t { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; color: #fff; margin-top: 5px; text-wrap: balance; }
  .sc-s { font-size: 13.5px; color: rgba(255,255,255,0.72); margin-top: 5px; }

  .livemetrics { width: min(100%, 560px); padding: 18px 20px; background: rgba(255,255,255,0.58); border: 1px solid rgba(255,255,255,0.7); }
  .lm-head { font-family: var(--font-mono); font-size: 12px; color: #0a7d43; display: flex; align-items: center; gap: 8px; letter-spacing: 0.04em; margin-bottom: 14px; }
  .lm-dot { width: 8px; height: 8px; border-radius: 50%; background: #18C85A; box-shadow: 0 0 8px #18C85A; animation: evBlink 1.4s ease-in-out infinite; }
  .lm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 16px; }
  .lm-v { font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; letter-spacing: -0.02em; color: #0B1220; font-variant-numeric: tabular-nums; }
  .lm-l { font-size: 12px; color: rgba(11,18,32,0.6); margin-top: 2px; }

  [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
  [data-reveal].in { opacity: 1; transform: translateY(0); }
  [data-reveal][data-d="1"] { transition-delay: .04s; } [data-reveal][data-d="2"] { transition-delay: .09s; } [data-reveal][data-d="3"] { transition-delay: .14s; }

  /* ===== footer ===== */
  footer { position: relative; z-index: 5; background: #e3e8ea; border-top: 1px solid rgba(11,18,32,0.1); padding: 64px max(5vw, 40px) 46px; }
  footer .frow { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-start; }
  footer .fb { display: flex; align-items: center; gap: 12px; } footer .fb img { width: 34px; height: 34px; } footer .fb b { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #0B1220; }
  footer .reg { max-width: 640px; font-size: 13px; line-height: 1.7; color: rgba(11,18,32,0.58); }
  footer .reg strong { color: #0B1220; font-weight: 600; }
  footer .copy { max-width: 1280px; margin: 38px auto 0; padding-top: 24px; border-top: 1px solid rgba(11,18,32,0.1); font-size: 12px; color: rgba(11,18,32,0.45); font-family: var(--font-mono); letter-spacing: 0.04em; }

  /* ===== switcher ===== */
  #switcher { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(233,237,239,0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; pointer-events: none; transition: opacity .4s ease; }
  #switcher.open { opacity: 1; pointer-events: auto; }
  .switcher-panel { width: min(960px, 100%); }
  .switcher-head { text-align: center; margin-bottom: 26px; transform: translateY(14px); transition: transform .5s var(--ease-out,cubic-bezier(.16,1,.3,1)); }
  #switcher.open .switcher-head { transform: none; }
  .switcher-head .e { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #0a7d43; }
  .switcher-head h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem,4vw,2.8rem); letter-spacing: -0.02em; color: #0B1220; margin: 10px 0 0; }
  .switcher-head p { color: rgba(11,18,32,0.6); margin: 8px 0 0; font-size: 15px; }
  #switcher-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 860px) { #switcher-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { #switcher-grid { grid-template-columns: 1fr; } }
  .wcard { text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 22px 20px 18px; border-radius: 22px; color: #0B1220; font-family: var(--font-sans);
    background: rgba(255,255,255,0.62); border: 1px solid rgba(255,255,255,0.7); backdrop-filter: blur(20px) saturate(135%); -webkit-backdrop-filter: blur(20px) saturate(135%);
    box-shadow: 0 24px 60px rgba(11,18,32,0.14), inset 0 1px 0 rgba(255,255,255,0.85); opacity: 0; transform: translateY(22px); transition: transform .55s var(--ease-out,cubic-bezier(.16,1,.3,1)), opacity .55s ease, border-color .25s ease, background .25s ease; }
  #switcher.open .wcard { opacity: 1; transform: none; }
  #switcher.open .wcard:nth-child(2) { transition-delay: .06s; } #switcher.open .wcard:nth-child(3) { transition-delay: .12s; } #switcher.open .wcard:nth-child(4) { transition-delay: .18s; }
  .wcard:hover { background: rgba(82,227,58,0.12); border-color: rgba(82,227,58,0.5); transform: translateY(-3px); }
  .wcard.active { border-color: rgba(82,227,58,0.7); box-shadow: 0 24px 60px rgba(11,18,32,0.14), 0 0 0 1px rgba(82,227,58,0.4), inset 0 1px 0 rgba(255,255,255,0.85); }
  .wcard-i { width: 44px; height: 44px; border-radius: 13px; background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
  .wcard-i i { width: 22px; height: 22px; color: #fff; }
  .wcard-x { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #0a7d43; }
  .wcard b { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; }
  .wcard-b { font-size: 13px; color: rgba(11,18,32,0.6); line-height: 1.4; }
  .wcard-go { margin-top: 12px; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: #0a7d43; }
  .wcard-go i { width: 16px; height: 16px; }

  /* ===== portal transition ===== */
  #portal { position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0; }
  #portal.run { opacity: 1; }
  /* a sheet of architectural glass — the world behind it blurs and refracts, then clears as the next world settles */
  .portal-veil { position: absolute; inset: 0; opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
    background: linear-gradient(120deg, rgba(255,255,255,0.05), rgba(82,227,58,0.03) 45%, rgba(255,255,255,0.04)); }
  #portal.run .portal-veil { animation: glassPane 1.5s cubic-bezier(.4,0,.2,1) forwards; }
  @keyframes glassPane {
    0%   { opacity: 0; backdrop-filter: blur(0px) saturate(100%); -webkit-backdrop-filter: blur(0px) saturate(100%); }
    34%  { opacity: 1; backdrop-filter: blur(17px) saturate(125%); -webkit-backdrop-filter: blur(17px) saturate(125%); }
    66%  { opacity: 1; backdrop-filter: blur(13px) saturate(120%); -webkit-backdrop-filter: blur(13px) saturate(120%); }
    100% { opacity: 0; backdrop-filter: blur(0px) saturate(100%); -webkit-backdrop-filter: blur(0px) saturate(100%); }
  }
  /* a soft reflection sweeping across the glass */
  .portal-flash { position: absolute; inset: 0; opacity: 0; transform: translateX(-25%);
    background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,0.10) 48%, rgba(174,255,150,0.06) 53%, transparent 68%); }
  #portal.run .portal-flash { animation: glassSheen 1.5s ease-in-out forwards; }
  @keyframes glassSheen { 0%{opacity:0;transform:translateX(-25%)} 32%{opacity:1} 70%{opacity:1} 100%{opacity:0;transform:translateX(25%)} }
  .portal-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; perspective: 1200px; }
  .portal-ring { position: absolute; inset: -22px; border-radius: 50%; border: 1.5px solid rgba(82,227,58,0); }
  #portal.run .portal-ring { animation: ringSoft 1.5s ease forwards; }
  @keyframes ringSoft { 0%{opacity:0;transform:scale(.82);border-color:rgba(82,227,58,0)} 42%{opacity:.5;border-color:rgba(82,227,58,0.42);box-shadow:0 0 44px rgba(82,227,58,0.22)} 100%{opacity:0;transform:scale(1.5);border-color:rgba(82,227,58,0)} }
  .portal-mark { width: 118px; height: 118px; opacity: 0; transform-style: preserve-3d; will-change: transform, filter; }
  #portal.run .portal-mark { animation: markGlass 1.5s cubic-bezier(.4,0,.2,1) forwards; }
  /* the W turns slowly on its vertical axis like a glass sculpture — no scaling, no fly-through */
  @keyframes markGlass {
    0%   { opacity: 0;   transform: rotateY(0deg) scale(.96);   filter: drop-shadow(0 0 22px rgba(82,227,58,0.3)) brightness(1); }
    28%  { opacity: .85; transform: rotateY(78deg) scale(1);    filter: drop-shadow(0 0 46px rgba(120,255,120,0.5)) brightness(1.45); }
    55%  { opacity: .9;  transform: rotateY(180deg) scale(1);   filter: drop-shadow(0 0 34px rgba(82,227,58,0.4)) brightness(1.1); }
    100% { opacity: 0;   transform: rotateY(264deg) scale(1.02); filter: drop-shadow(0 0 26px rgba(82,227,58,0.3)) brightness(1); }
  }
  .portal-shard { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .bg, [data-reveal] { transition: opacity .4s ease !important; transform: none !important; }
    body[data-spatial="on"] .col, body[data-spatial="on"] .bg img, body[data-spatial="on"] #phone-dock,
    body[data-spatial="on"] .showcase img, body[data-spatial="on"] .photofloat img, body[data-spatial="on"] .gtile img { transform: none !important; }
    .glow, .particle, .arch-mark, .arch-ring, .sig-path, .packet, .scroll-cue .dot::after, .ev-row, .ev-live, .dg-line, .dg-packet, .pf-card, .lm-dot { animation: none !important; }
    #portal { display: none !important; }
  }

  /* ===== responsive ===== */
  @media (max-width: 1100px) {
    #phone-dock { transform: scale(0.6); top: auto; bottom: -40px; left: auto; right: 4px; transform-origin: bottom right; }
    .scene { padding-bottom: 20vh; } .col { max-width: 640px; }
    .nav-worlds { display: none; }
  }
  @media (max-width: 680px) {
    #phone-dock { transform: scale(0.48); bottom: -70px; left: auto; right: -30px; }
    nav { padding-left: 12px; } .nav-logo .tag { display: none; }
    .scene { padding-left: 22px; padding-right: 22px; }
  }

  /* ===== PART B — scroll performance on touch / low-end devices =====
     backdrop-filter: blur() is the most expensive thing to paint per scroll frame. On touch
     devices we drop live blur on the (moving) glass and use a denser translucent fill that still
     reads as glass, and we stop the always-looping ambient animations to cut per-frame work. */
  @media (max-width: 1100px) {
    nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.93); }
    .col::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(252,253,253,0.95); }
    .glasscard { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.9); }
    .tpill { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.86); }
    .portal-hint { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.9); }
    .pf-card { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(14,20,32,0.86); }
    .wcard { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.93); }
    #switcher { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(233,237,239,0.93); }
    /* halt continuous decorative motion (one-shot reveals via transform/opacity still run) */
    .arch-mark, .hero-lines, .glow, .particle, .sig-path, .pf-card, .lm-dot, .packet, .scroll-cue .dot::after { animation: none !important; }
  }

  /* ===== PART A — true mobile stacking (single column) ===== */
  @media (max-width: 768px) {
    /* HERO: one centred column; phone flows in below the text (no fixed overlap) */
    #hero { position: static; min-height: 100vh; overflow: visible; justify-content: flex-start; align-items: stretch; padding: 88px 18px 48px; gap: 0; }
    .hero-inner { max-width: 100%; align-items: center; gap: 24px; }
    .hero-head { align-items: center; text-align: center; }
    .hero-title { font-size: clamp(1.85rem, 8.5vw, 2.5rem); max-width: 18ch; }
    .hero-sub { font-size: 1rem; max-width: 60ch; }
    .hero-vision { text-align: center; }

    /* the phone joins normal flow, scaled to fit and centred (zoom resizes the layout box too) */
    #phone-dock.inflow { position: static; left: auto; right: auto; top: auto; bottom: auto; transform: none;
      zoom: 0.72; width: 392px; max-width: 100%; margin: 4px auto 0; transform-origin: top center;
      filter: drop-shadow(0 22px 46px rgba(4,8,16,0.5)); }

    /* WORLD pages: phone (injected at top of #wos-main) + scenes stack into one full-width column */
    #wos-main { padding-top: 80px; }
    .scene { min-height: auto; padding: 26px 18px 38px; align-items: stretch; }
    .col { max-width: 100%; width: 100%; padding: 26px 20px; border-radius: 22px; margin: 0; }

    /* NAV: compact, all three links visible, wraps tidily */
    nav { top: 10px; width: calc(100% - 20px); padding: 8px 9px; gap: 8px; }
    .nav-logo { padding: 4px 6px; gap: 8px; }
    .nav-logo .tag { display: none; }
    .nav-worlds { display: flex; gap: 2px; }
    .nav-worlds a { font-size: 12px; padding: 7px 9px; }
  }
  @media (max-width: 380px) {
    .nav-logo b { display: none; }
    .nav-worlds a { font-size: 11px; padding: 6px 7px; }
  }