/* ═══ Self-hosted fonts (moved off fonts.googleapis.com) ═══════════════════
   woff2 files live next to this stylesheet in fonts/ — same subsets and
   unicode-ranges Google served (latin, latin-ext, cyrillic, vietnamese), so
   glyph coverage is unchanged. font-display: swap everywhere. The two
   *-Fallback faces below are metric-compatible system-font stand-ins
   (size-adjust computed from the real font tables) so the swap does not
   shift the layout. */
@font-face {
  font-family: 'Geist Fallback';
  src: local('Arial'), local('Helvetica');
  size-adjust: 105.88%;
  ascent-override: 94.91%;
  descent-override: 27.86%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Instrument Serif Fallback';
  src: local('Times New Roman'), local('Georgia');
  size-adjust: 84.6%;
  ascent-override: 117.02%;
  descent-override: 36.64%;
  line-gap-override: 0%;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/geist-300-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/geist-300-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/geist-300-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/geist-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/geist-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/geist-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/geist-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/geist-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/geist-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/geist-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/geist-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/geist-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/geist-500-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/geist-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/geist-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/geist-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/geist-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/geist-600-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/geist-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/geist-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/geist-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/geist-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/geist-700-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/geist-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/geist-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/geist-mono-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/geist-mono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/geist-mono-symbols2.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/geist-mono-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/geist-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/geist-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/geist-mono-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/geist-mono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/geist-mono-symbols2.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/geist-mono-500-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/geist-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/geist-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/instrument-serif-400-italic-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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/instrument-serif-400-italic-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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/instrument-serif-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/instrument-serif-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Voxgard — Design tokens + base */

/* Visual site editor: reorderable section blocks live in a flex column so
   site-content.js can set `order` / hide them without breaking layout. */
.vox-sections { display: flex; flex-direction: column; }

:root {
  --bg: #050811;
  --bg-2: #08101f;
  --bg-3: #0d1530;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.14);
  --text: #f3f4f8;
  --text-2: #b8bdcc;
  --text-3: #7a8195;
  --text-4: #4e556a;

  /* Glass surface: transparent unified tint used by ALL cards site-wide.
     Lighter dark base + stronger white frost = consistent look regardless of
     what scrolls behind (globe, stars, nebula, plain dark cosmos). */
  --glass-overlay: linear-gradient(155deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.14) 100%);
  --glass-tint:    linear-gradient(180deg, rgba(30, 45, 80, 0.28), rgba(14, 24, 48, 0.38));
  --glass-tint-strong: linear-gradient(180deg, rgba(35, 50, 90, 0.36), rgba(18, 28, 55, 0.46));
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-border-hover: rgba(255, 255, 255, 0.30);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.22);

  --accent: #7BD3F7;
  --accent-2: #A5E2FB;
  --accent-dark: #3FA8D8;
  --accent-glow: rgba(123, 211, 247, 0.45);
  --accent-soft: rgba(123, 211, 247, 0.12);

  --cool: #7BD3F7;
  --cool-soft: rgba(123, 211, 247, 0.16);

  --good: #6FE7B0;

  --serif: "Instrument Serif", "Instrument Serif Fallback", "Times New Roman", Georgia, serif;
  --sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;

  --container: 1240px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Horizontal-overflow clipping lives ONLY on the root (html), and uses `clip`
   not `hidden`. Why this exact shape matters on mobile:
   - `overflow-x: hidden` on the root scroller makes it a scroll container that
     breaks the browser's native address-bar hide/show — the page "jitters up
     and down" when you stop mid-scroll to read (the reported bug).
   - Putting overflow-x on <body> too, or mixing `clip` with a `visible` y-axis,
     turns that element into a NESTED scroll container (double scrollers = iOS
     wobble). So body keeps its default `visible`.
   - `overflow: clip` hides the horizontal overflow (marquees) WITHOUT creating
     a scroll container, so the address bar behaves natively. `hidden` is kept as
     a first-declaration fallback for engines without `clip`. */
html {
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

body {
  /* Deep cosmic ambient background — canvas overlays this with stars */
  background:
    radial-gradient(ellipse 80% 60% at 70% -10%, rgba(123, 211, 247, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 30%, rgba(67, 96, 200, 0.10), transparent 60%),
    radial-gradient(ellipse 70% 55% at 50% 120%, rgba(186, 99, 255, 0.08), transparent 60%),
    linear-gradient(180deg, #030611 0%, #050a18 30%, #060a14 70%, #04060e 100%);
  /* svh = smallest viewport (mobile URL bar visible) — the page always covers
     it, and the value doesn't change when the bar collapses on scroll. */
  min-height: 100vh;
  min-height: 100svh;
}

#cosmos {
  position: fixed;
  inset: 0;
  width: 100vw;
  /* lvh = largest viewport: sized for the collapsed-URL-bar state up front,
     so the fixed backdrop never resizes (and jumps) mid-scroll. */
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
}

#brand-bg {
  position: fixed;
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: clamp(140px, 22vw, 360px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--text);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 1;
  mix-blend-mode: screen;
}

/* Shield watermark — ghosted behind the Earth */
#brand-shield {
  position: fixed;
  top: 50%;
  left: 28%;
  transform: translate(-50%, -50%);
  width: 62vh;
  height: 62vh;
  max-width: 720px;
  max-height: 720px;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  opacity: 0.07;
  filter: blur(0.3px) drop-shadow(0 0 24px rgba(123, 211, 247, 0.18));
  mix-blend-mode: screen;
  animation: shield-breathe 14s ease-in-out infinite;
}
@keyframes shield-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.06; }
  50%      { transform: translate(-50%, -50%) scale(1.025); opacity: 0.09; }
}
#brand-shield svg { width: 100%; height: 100%; display: block; }
@media (max-width: 720px) {
  #brand-shield { opacity: 0.04; }
}

#globe {
  position: fixed;
  top: 50%;
  right: -10%;
  width: 980px;
  height: 980px;
  max-width: 130vw;
  max-height: 130vh;
  max-height: 130lvh;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  opacity: 0.95;
  filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.4));
}
@media (max-width: 1100px) {
  #globe {
    right: auto;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    width: 720px;
    height: 720px;
    opacity: 0.7;
  }
}
@media (max-width: 600px) {
  #globe {
    width: 480px;
    height: 480px;
    top: 30%;
    opacity: 0.55;
  }
}

#root {
  position: relative;
  z-index: 3;
  padding-top: 78px;  /* compensate for fixed nav */
}
section { scroll-margin-top: 90px; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Typography helpers */
.serif { font-family: var(--serif); font-weight: 400; }
.mono { font-family: var(--mono); }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* "Live AI" call chip — FLOATS in the free space at the top-right of the hero
   (position:absolute so it never pushes the headline down), gently pulsing. A
   tel: link → taps to dial on mobile. */
.hero-call {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-overlay), var(--glass-tint);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  box-shadow: var(--glass-inset), 0 10px 30px -16px rgba(0, 0, 0, 0.7);
  animation: hero-call-glow 3.4s ease-in-out infinite;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
/* Ambient, unobtrusive pulse — a soft green halo breathing in and out. */
@keyframes hero-call-glow {
  0%, 100% { box-shadow: var(--glass-inset), 0 8px 26px -16px rgba(0,0,0,0.7), 0 0 0 0 rgba(111,231,176,0); }
  50%      { box-shadow: var(--glass-inset), 0 8px 26px -16px rgba(0,0,0,0.7), 0 0 18px 2px rgba(111,231,176,0.20); }
}
.hero-call:hover { border-color: var(--glass-border-hover); transform: translateY(-1px); }
.hero-call svg { color: var(--accent); flex-shrink: 0; }
.hero-call-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 10px var(--good);
  animation: pulse-dot 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.hero-call-label { color: var(--text); font-weight: 600; letter-spacing: 0.02em; }
.hero-call-num {
  font-family: var(--mono);
  color: var(--accent-2);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.eyebrow .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  margin-right: 10px;
  vertical-align: middle;
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.3); }
}

/* Container */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}

/* ─── Navigation ─────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 18px 0;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  background: rgba(5, 8, 17, 0.42);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease, padding 0.3s ease;
}
.nav.scrolled {
  padding: 12px 0;
  border-bottom-color: rgba(255, 255, 255, 0.06);
  background: rgba(5, 8, 17, 0.62);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.01em;
}
.brand-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  position: relative;
}
.brand-mark svg { width: 100%; height: 100%; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 13.5px;
  color: var(--text-2);
}
.nav-links a {
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--text); }

/* Language picker (dropdown) */
.lang-picker { position: relative; }
.lang-trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s ease;
}
.lang-trigger:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}
.lang-trigger-flag { font-size: 14px; line-height: 1; }
.lang-trigger-code { letter-spacing: 0.06em; }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  width: 240px;
  max-height: 360px;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(22, 30, 55, 0.95), rgba(10, 16, 32, 0.97));
  -webkit-backdrop-filter: blur(24px) saturate(160%);
          backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.7);
  animation: panel-rise 0.22s cubic-bezier(.2, .7, .2, 1);
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
.lang-menu::-webkit-scrollbar { width: 6px; }
.lang-menu::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.lang-opt {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.lang-opt:hover { background: var(--surface-2); }
.lang-opt.active { background: var(--accent-soft); color: var(--accent); }
.lang-opt-flag { font-size: 16px; line-height: 1; flex-shrink: 0; }
.lang-opt-name { flex: 1; }
.lang-opt-code {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-4);
}
.lang-opt.active .lang-opt-code { color: var(--accent); }


.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: #1a0d04;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 8px 30px -8px var(--accent-glow);
}
.btn-primary:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 14px 40px -8px var(--accent-glow);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-2);
}
.btn-ghost:hover {
  background: var(--surface-2);
  border-color: rgba(255,255,255,0.25);
}
.btn-lg {
  padding: 14px 24px;
  font-size: 14.5px;
  border-radius: 999px;
}

/* ─── Section scaffolding ────────────────────────────────────── */
section {
  position: relative;
  padding: 120px 0;
}
section.tight { padding: 80px 0; }

.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  color: var(--text-3);
}
.section-eyebrow .line {
  width: 32px;
  height: 1px;
  background: var(--text-4);
}

/* Section intro: title left / lead right on desktop. Class (not inline) so the
   mobile media query can stack it to one column. */
.sec-intro {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: end;
}

h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.02em; }
h1 {
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
h1 .italic, h2 .italic {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

p { margin: 0; color: var(--text-2); }
.lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 620px;
}

/* ─── Hero ─────────────────────────────────────────────────── */
.hero {
  padding: 80px 0 100px;
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero-headline {
  margin-bottom: 32px;
}
.hero-sub {
  font-size: 19px;
  color: var(--text-2);
  max-width: 520px;
  margin-bottom: 36px;
  line-height: 1.55;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.hero-meta {
  display: flex;
  gap: 40px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.hero-meta .v {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--text);
  display: block;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

/* ─── Call demo (hero) ─────────────────────────────────────── */
.call-stage {
  position: relative;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
.call-stage-inner {
  position: relative;
  transform: rotateY(-26deg) rotateX(8deg);
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(.2, .7, .2, 1);
}
.call-stage:hover .call-stage-inner {
  transform: rotateY(0deg) rotateX(0deg);
}
.call-card {
  background: linear-gradient(180deg, rgba(20, 25, 45, 0.85), rgba(10, 14, 28, 0.85));
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 18px;
  /* Reserve the transcript's FULL height up-front. The hero demo types call
     lines in one by one and then resets in a loop — without a reserved height
     the card (and the whole page) grows/shrinks ~380px every cycle, which on
     iOS Safari drives the address bar in/out and makes the page jump up & down
     while you read. A fixed min-height keeps the document height constant. */
  min-height: 470px;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 30px 80px -20px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.04);
}
.call-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.call-status .live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--good);
}
.call-status .live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 10px var(--good);
  animation: pulse-dot 1.6s ease-in-out infinite;
}

.call-track {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  margin-bottom: 8px;
  transition: background 0.3s ease, opacity 0.3s ease;
  align-items: flex-start;
  border: 1px solid transparent;
  position: relative;
}
.call-track.active {
  background: rgba(123, 211, 247, 0.06);
  border-color: rgba(123, 211, 247, 0.18);
}
.call-track.caller.active {
  background: rgba(123, 211, 247, 0.07);
  border-color: rgba(123, 211, 247, 0.22);
}
.track-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  min-width: 60px;
  padding-top: 4px;
}
.call-track.caller .track-tag { color: var(--cool); }
.call-track.ai .track-tag { color: var(--accent); }
.track-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.track-text {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text);
  min-height: 21px;
}
.track-text .caret {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: var(--accent);
  vertical-align: middle;
  margin-left: 2px;
  animation: caret 1s steps(2) infinite;
}
.call-track.caller .track-text .caret { background: var(--cool); }
@keyframes caret { 50% { opacity: 0; } }

/* Tiny waveform under speakers */
.wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 14px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.call-track.active .wave { opacity: 1; }
.wave span {
  display: inline-block;
  width: 2px;
  background: currentColor;
  border-radius: 1px;
  animation: wave-bar 1.1s ease-in-out infinite;
}
.call-track.caller .wave { color: var(--cool); }
.call-track.ai .wave { color: var(--accent); }
.wave span:nth-child(1) { animation-delay: 0.0s; }
.wave span:nth-child(2) { animation-delay: 0.08s; }
.wave span:nth-child(3) { animation-delay: 0.16s; }
.wave span:nth-child(4) { animation-delay: 0.24s; }
.wave span:nth-child(5) { animation-delay: 0.32s; }
.wave span:nth-child(6) { animation-delay: 0.4s; }
.wave span:nth-child(7) { animation-delay: 0.18s; }
.wave span:nth-child(8) { animation-delay: 0.06s; }
.wave span:nth-child(9) { animation-delay: 0.22s; }
.wave span:nth-child(10) { animation-delay: 0.3s; }
.wave span:nth-child(11) { animation-delay: 0.14s; }
.wave span:nth-child(12) { animation-delay: 0.05s; }
@keyframes wave-bar {
  0%, 100% { height: 3px; }
  50% { height: 14px; }
}

/* CRM card (right) */
.crm-card {
  margin-top: 16px;
  background: linear-gradient(180deg, rgba(20, 25, 45, 0.85), rgba(10, 14, 28, 0.85));
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 20px 60px -20px rgba(0,0,0,0.6);
  transform: translateZ(40px);
  /* Same reason as .call-card — CRM fields fill in progressively; reserve the
     full height so the card (and page) height stays constant across the loop. */
  min-height: 300px;
}
.crm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.crm-title {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.crm-pill {
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(111, 231, 176, 0.12);
  color: var(--good);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(111, 231, 176, 0.25);
}
.crm-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.crm-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  border: 1px solid var(--border);
  min-height: 56px;
}
.crm-field .lbl {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.crm-field .val {
  font-size: 13.5px;
  color: var(--text);
  min-height: 18px;
}
.crm-field .val.empty {
  color: var(--text-4);
  font-family: var(--mono);
}
.crm-field.filling {
  border-color: rgba(123, 211, 247, 0.4);
  background: rgba(123, 211, 247, 0.04);
}

/* ─── Big stats section ──────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat {
  padding: 56px 36px;
  border-right: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.stat:last-child { border-right: 0; }
.stat-n {
  font-family: var(--serif);
  font-size: clamp(64px, 8vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 14px;
  background: linear-gradient(180deg, var(--text) 0%, var(--text-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-n .unit {
  font-family: var(--sans);
  font-size: 0.35em;
  color: var(--accent);
  letter-spacing: -0.02em;
  margin-left: 6px;
  vertical-align: top;
  position: relative;
  top: 0.5em;
}
.stat-label {
  font-size: 14.5px;
  color: var(--text-2);
  max-width: 280px;
  line-height: 1.45;
}
.stat-src {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-top: 18px;
}

/* ─── 3D Glass stat cards (clickable, tilt-on-hover) ─────── */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  perspective: 1400px;
}
.stat-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --shine-x: 50%;
  --shine-y: 50%;
  --shine-op: 0;

  position: relative;
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 22px;
  transform-style: preserve-3d;
  transform: perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 0.35s cubic-bezier(.2, .7, .2, 1);
  isolation: isolate;
  overflow: hidden;
}
.stat-card:hover { transition: transform 0.08s linear; }
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: var(--glass-overlay), var(--glass-tint);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--glass-inset),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 20px 60px -22px rgba(0, 0, 0, 0.6);
  z-index: 0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.stat-card:hover::before {
  border-color: var(--glass-border-hover);
  box-shadow:
    var(--glass-inset),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 30px 70px -22px rgba(0, 0, 0, 0.65),
    0 0 0 1px var(--accent-soft),
    0 0 60px -10px var(--accent-glow);
}
.stat-card-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: 22px;
  background: radial-gradient(
    420px circle at var(--shine-x) var(--shine-y),
    rgba(255, 255, 255, 0.13),
    rgba(255, 255, 255, 0.04) 30%,
    transparent 60%
  );
  opacity: var(--shine-op);
  transition: opacity 0.25s ease;
  mix-blend-mode: screen;
}
.stat-card-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 30px 24px;
  transform: translateZ(40px);
  min-height: 280px;
}
.stat-card-num {
  font-family: var(--serif);
  font-size: clamp(72px, 8vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  background: linear-gradient(180deg, #ffffff 0%, #c4cad8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(255, 255, 255, 0.08));
}
.stat-card-num .unit {
  font-family: var(--sans);
  font-size: 0.32em;
  font-weight: 400;
  -webkit-text-fill-color: var(--accent);
  color: var(--accent);
  letter-spacing: -0.02em;
  margin-left: 4px;
  vertical-align: top;
  position: relative;
  top: 0.6em;
  filter: drop-shadow(0 0 12px var(--accent-glow));
}
.stat-card-label {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.5;
  max-width: 320px;
  flex: 1;
}
.stat-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.stat-card-src {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
}
.stat-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  transition: gap 0.2s ease, transform 0.2s ease;
}
.stat-card:hover .stat-card-cta {
  gap: 10px;
  transform: translateX(2px);
}
@media (max-width: 960px) {
  .stat-cards { grid-template-columns: 1fr; }
  .stat-card-inner { min-height: 240px; }
}

/* ─── Stat modal ────────────────────────────────── */
.stat-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 6, 14, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 32px;
  animation: modal-fade 0.25s ease;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.stat-modal {
  position: relative;
  width: 100%;
  max-width: 580px;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 35%, rgba(255,255,255,0.06) 100%),
    linear-gradient(180deg, rgba(22, 30, 55, 0.9), rgba(10, 16, 32, 0.92));
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  padding: 36px 36px 30px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 40px 100px -20px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: modal-rise 0.32s cubic-bezier(.2, .7, .2, 1);
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.stat-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}
.stat-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.3);
}
.stat-modal-big {
  font-family: var(--serif);
  font-size: clamp(64px, 8vw, 100px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #b8c0d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-modal-big .unit {
  font-family: var(--sans);
  font-size: 0.32em;
  font-weight: 400;
  -webkit-text-fill-color: var(--accent);
  color: var(--accent);
  margin-left: 4px;
  vertical-align: top;
  position: relative;
  top: 0.6em;
}
.stat-modal-headline {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 14px;
}
.stat-modal-desc {
  font-size: 15.5px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 22px;
}
.stat-modal-bullets {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stat-modal-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  color: var(--text);
}
.bullet-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  margin-top: 8px;
}
.stat-modal-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.stat-modal-src {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
@media (max-width: 600px) {
  .stat-modal { padding: 28px 22px 22px; }
  .stat-modal-headline { font-size: 22px; }
}

/* ─── Capabilities grid ──────────────────────────────────── */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 56px;
}
.cap {
  position: relative;
  border-radius: 22px;
  padding: 28px 26px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
.cap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: var(--glass-overlay), var(--glass-tint);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--glass-inset),
    0 18px 52px -22px rgba(0, 0, 0, 0.55);
  z-index: -1;
  transition: all 0.3s ease;
}
.cap:hover { transform: translateY(-4px); }
.cap:hover::before {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 26px 64px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px var(--accent-soft),
    0 0 60px -10px var(--accent-glow);
}
.cap-glyph {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(123, 211, 247, 0.08);
  border: 1px solid rgba(123, 211, 247, 0.18);
  color: var(--accent);
}
.cap h3 { margin-bottom: 8px; }
.cap p { font-size: 14px; color: var(--text-3); line-height: 1.5; }
.cap-tall {
  grid-row: span 2;
  min-height: auto;
}

/* ─── Languages strip ───────────────────────────────────── */
.lang-strip {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lang-chip {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
  font-family: var(--mono);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lang-chip .flag {
  font-size: 14px;
}

/* ─── Integrations ─────────────────────────────────────── */
.integrations {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.intg {
  background: var(--bg-2);
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 110px;
  text-align: center;
  transition: background 0.2s ease;
}
.intg:hover { background: var(--bg-3); }
.intg-name {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-2);
}
.intg-mark {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ─── How it works ─────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 32px 28px;
  border-radius: 22px;
  counter-increment: step;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(.2, .7, .2, 1), border-color 0.3s ease;
}
.step::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: var(--glass-overlay), var(--glass-tint);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--glass-inset),
    0 18px 52px -22px rgba(0, 0, 0, 0.55);
  z-index: -1;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.step:hover {
  transform: translateY(-4px);
}
.step:hover::after {
  border-color: var(--glass-border-hover);
  box-shadow:
    var(--glass-inset),
    0 30px 70px -22px rgba(0, 0, 0, 0.6),
    0 0 0 1px var(--accent-soft),
    0 0 60px -10px var(--accent-glow);
}
.step::before {
  content: "0" counter(step);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
  display: block;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.step h3 {
  font-family: var(--serif);
  font-size: 24px;
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}
.step p { font-size: 14.5px; color: var(--text-3); }
.step-time {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
}

/* ─── Industries ───────────────────────────────────────── */
.industries {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 56px;
}
.industry {
  position: relative;
  border-radius: 18px;
  padding: 22px;
  min-height: 180px;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
}
.industry::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: var(--glass-overlay), var(--glass-tint);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--glass-inset),
    0 14px 44px -22px rgba(0, 0, 0, 0.5);
  z-index: -1;
  transition: all 0.3s ease;
}
.industry:hover {
  transform: translateY(-3px);
}
.industry:hover::before {
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 24px 60px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px var(--accent-soft);
}
.industry-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(123, 211, 247, 0.1);
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: 14px;
}
.industry h3 {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.industry p {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}
.industry-stat {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: uppercase;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* ─── Live demo ───────────────────────────────────────── */
.live-demo {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  margin-top: 56px;
  align-items: start;
}
.live-panel {
  background: linear-gradient(180deg, rgba(20, 25, 45, 0.7), rgba(10, 14, 28, 0.85));
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7);
}
.scenario-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.scenario {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  width: 100%;
  appearance: none;
  font-family: inherit;
  color: var(--text);
  transition: all 0.2s ease;
}
.scenario:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}
.scenario.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.scenario-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.06em;
  min-width: 28px;
}
.scenario-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scenario-body .ttl {
  font-size: 14.5px;
  color: var(--text);
}
.scenario-body .desc {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.45;
}

.dial {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(123, 211, 247, 0.06);
  border: 1px solid rgba(123, 211, 247, 0.2);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dial:hover {
  background: rgba(123, 211, 247, 0.12);
  border-color: rgba(123, 211, 247, 0.4);
}
.dial-pulse {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #1a0d04;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 0 rgba(123, 211, 247, 0.6);
  animation: dial-pulse 2s ease-in-out infinite;
}
@keyframes dial-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123, 211, 247, 0.55), 0 8px 24px -8px var(--accent-glow); }
  50% { box-shadow: 0 0 0 14px rgba(123, 211, 247, 0), 0 8px 24px -8px var(--accent-glow); }
}
.dial-info { flex: 1; }
.dial-info .n {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--text);
  letter-spacing: 0.04em;
}
.dial-info .l {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Transcript */
.transcript {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 6px;
  max-height: 540px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
.transcript::-webkit-scrollbar { width: 6px; }
.transcript::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }

.bubble {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  position: relative;
  animation: bubble-in 0.35s ease;
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.bubble.caller {
  align-self: flex-end;
  background: rgba(123, 211, 247, 0.08);
  border: 1px solid rgba(123, 211, 247, 0.22);
  color: var(--text);
}
.bubble.ai {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--text);
}
.bubble .who {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 5px;
  display: block;
}
.bubble.caller .who { color: var(--cool); }
.bubble.ai .who { color: var(--accent); }
.bubble .typing {
  display: inline-flex;
  gap: 3px;
  padding: 4px 0;
}
.bubble .typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-3);
  animation: typing 1.1s ease-in-out infinite;
}
.bubble .typing span:nth-child(2) { animation-delay: 0.15s; }
.bubble .typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-3px); opacity: 1; }
}

/* ─── Security ─────────────────────────────────────────── */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 56px;
}
.trust {
  position: relative;
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s ease;
}
.trust::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: var(--glass-overlay), var(--glass-tint);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--glass-inset),
    0 12px 36px -18px rgba(0, 0, 0, 0.5);
  z-index: -1;
  transition: all 0.3s ease;
}
.trust:hover { transform: translateY(-2px); }
.trust:hover::before {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 20px 50px -16px rgba(0, 0, 0, 0.65),
    0 0 0 1px var(--accent-soft);
}
.trust .badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: 8px;
}
.trust .t {
  font-size: 14.5px;
  color: var(--text);
  font-weight: 500;
}
.trust .d {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
}

/* ─── Final CTA ────────────────────────────────────────── */
.final-cta {
  position: relative;
  padding: 120px 0 80px;
  text-align: center;
}
.final-cta h2 {
  font-size: clamp(48px, 7vw, 88px);
  max-width: 900px;
  margin: 0 auto 28px;
}
.final-cta .lead {
  margin: 0 auto 40px;
  font-size: 18px;
}
.final-cta-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-card {
  margin: 64px auto 0;
  max-width: 540px;
  background: linear-gradient(180deg, rgba(20, 25, 45, 0.8), rgba(10, 14, 28, 0.85));
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 28px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.cta-card:hover {
  border-color: rgba(123, 211, 247, 0.45);
  transform: translateY(-2px);
}
.cta-call-num {
  font-family: var(--serif);
  font-size: 32px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.cta-call-lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}

/* Contact block: phone + email cards side by side under a heading */
.cta-contact { margin-top: 56px; }
.cta-contact-h {
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 28px;
}
.cta-cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-cards .cta-card {
  margin: 0;
  flex: 1 1 360px;
  max-width: 420px;
}
.cta-cards .cta-call-num { font-size: 24px; }

/* ─── Footer ──────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 56px 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
.footer-brand-blurb {
  font-size: 13.5px;
  color: var(--text-3);
  max-width: 320px;
  line-height: 1.55;
  margin-top: 16px;
}
.footer-col h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 16px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a {
  color: var(--text-2);
  font-size: 13.5px;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-4);
  letter-spacing: 0.04em;
}
/* Legal line + the re-open "Cookies" link (lets a visitor change their mind —
   a consent requirement). The link inherits the footer's mono/size/spacing. */
.footer-legal { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--border); }
  .stat:last-child { border-bottom: 0; }
  .cap-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .industries { grid-template-columns: 1fr 1fr; }
  .integrations { grid-template-columns: repeat(3, 1fr); }
  .live-demo { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 360px) {
  .container { padding: 0 16px; }
  h1 { font-size: 36px; }
  h2 { font-size: 30px; }
  .vs-avatars { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .container { padding: 0 20px; }
  section { padding: 80px 0; }
  .nav-links { display: none; }
  .brand { font-size: 18px; gap: 8px; }
  .brand .brand-mark { width: 22px; height: 22px; }
  footer { padding-bottom: max(40px, env(safe-area-inset-bottom, 40px)); }
  /* On mobile remove the dark nav band — logo + menu float over the hero */
  .nav,
  .nav.scrolled {
    background: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-bottom: 0;
    padding: 14px 0;
  }
  #root { padding-top: 64px; }
  .industries {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 4px 20px;
    margin: 0 -20px;
    scrollbar-width: none;
  }
  .industries::-webkit-scrollbar { display: none; }
  .industry { flex: 0 0 78%; scroll-snap-align: center; min-height: 200px; }
  .trust-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .trust { padding: 16px 14px; }
  .integrations { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-meta { gap: 24px; }
  .plans {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 16px 20px 24px;
    margin: 0 -20px;
    scrollbar-width: none;
    perspective: none;
  }
  .plans::-webkit-scrollbar { display: none; }
  .plan { flex: 0 0 86%; scroll-snap-align: center; transform: none !important; }
  .plan-inner { min-height: auto; }
  .cap-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cap { min-height: 200px; padding: 20px 18px; }
  .cap h3 { font-size: 16px; }
  .cap p { font-size: 12.5px; }
  .cap-glyph { width: 36px; height: 36px; margin-bottom: 14px; }
}

/* ═══ Performance & accessibility ═════════════════ */
/* Mobile keeps ALL animations — only OS-level reduced-motion turns them off. */

/* Respect user motion preferences — disables most animations site-wide. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .lang-marquee-track,
  .intg-marquee-track { animation: none !important; transform: none !important; }
  .assist-launch { animation: none !important; }
  .live-metric-pulse span,
  .wave span,
  .assist-launch-wave span { animation: none !important; }
}

/* GPU-accelerate the elements that animate constantly */
.lang-marquee-track,
.intg-marquee-track,
.call-stage-inner,
.assist-launch,
.assist-voice-orb {
  will-change: transform;
}

/* ═══ NEW SECTIONS ═══════════════════════════ */

/* Live Stats counters */
.live-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.live-metric {
  padding: 36px 28px;
  border-right: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.live-metric:last-child { border-right: 0; }
.live-metric-n {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.live-metric-suffix {
  font-family: var(--sans);
  font-size: 0.4em;
  color: var(--accent);
  margin-left: 4px;
}
.live-metric-label { font-size: 13.5px; color: var(--text-3); line-height: 1.4; max-width: 220px; }
.live-metric-pulse {
  position: absolute;
  top: 18px;
  right: 22px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  opacity: 0.6;
}
.live-metric-pulse span {
  display: inline-block;
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
  animation: wave-bar 1.4s ease-in-out infinite;
}
.live-metric-pulse span:nth-child(1) { animation-delay: 0s; height: 4px; }
.live-metric-pulse span:nth-child(2) { animation-delay: 0.1s; height: 8px; }
.live-metric-pulse span:nth-child(3) { animation-delay: 0.2s; height: 12px; }
.live-metric-pulse span:nth-child(4) { animation-delay: 0.15s; height: 8px; }
.live-metric-pulse span:nth-child(5) { animation-delay: 0.05s; height: 4px; }

/* Pricing */
.billing-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 999px;
  margin-bottom: 40px;
  font-size: 13px;
}
.billing-toggle button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-3);
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: all 0.2s ease;
}
.billing-toggle button.active { background: var(--text); color: var(--bg); }
.billing-toggle button:hover:not(.active) { color: var(--text); }
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  perspective: 1600px;
}
.plan {
  --rx: 0deg; --ry: 0deg; --shine-x: 50%; --shine-y: 50%; --shine-op: 0;
  position: relative;
  border-radius: 24px;
  transform-style: preserve-3d;
  transform: perspective(1600px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.4s cubic-bezier(.2, .7, .2, 1);
  isolation: isolate;
  overflow: hidden;
}
.plan:hover { transition: transform 0.1s linear; }
.plan::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: var(--glass-overlay), var(--glass-tint-strong);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-inset), 0 24px 70px -22px rgba(0,0,0,0.6);
  z-index: 0;
}
.plan-popular { z-index: 2; }
.plan-billed-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  margin: 4px 0 0;
  letter-spacing: 0.02em;
}
.plan-popular::before {
  border-color: rgba(123, 211, 247, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 0 0 1px var(--accent-soft),
    0 0 80px -10px var(--accent-glow),
    0 30px 80px -20px rgba(0,0,0,0.8);
}
.plan-shine {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(520px circle at var(--shine-x) var(--shine-y), rgba(255,255,255,0.12), transparent 50%);
  opacity: var(--shine-op);
  transition: opacity 0.3s ease;
  mix-blend-mode: screen;
}
.plan-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent);
  color: #1a0d04;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 8px 24px -6px var(--accent-glow);
}
.plan-inner {
  position: relative;
  z-index: 2;
  padding: 32px 28px 28px;
  transform: translateZ(30px);
  display: flex;
  flex-direction: column;
  min-height: 620px;
}
.plan-name {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--serif);
  margin-bottom: 14px;
  min-height: 78px;
}
.plan-price-currency {
  font-size: 32px;
  color: var(--text-2);
  align-self: flex-start;
  margin-top: 14px;
}
.plan-price-n {
  font-size: clamp(56px, 6vw, 76px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.plan-price-unit {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text-3);
  margin-left: 4px;
}
.plan-price-custom {
  font-size: 36px;
  color: var(--text);
  margin-top: 8px;
}
.plan-desc {
  font-size: 13.5px;
  color: var(--text-3);
  line-height: 1.5;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.plan-features li.off { color: var(--text-4); }
.plan-features li.off span:last-child { text-decoration: line-through; opacity: 0.7; }
.plan-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.plan-check.ok {
  background: rgba(111, 231, 176, 0.14);
  color: var(--good);
  border: 1px solid rgba(111, 231, 176, 0.3);
}
.plan-check.off {
  background: rgba(255,255,255,0.04);
  color: var(--text-4);
  border: 1px solid var(--border);
}
.plan-cta { justify-content: center; width: 100%; }
.pricing-footer {
  text-align: center;
  margin-top: 40px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

/* FAQ */
.faq-list { display: flex; flex-direction: column; max-width: 880px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  color: var(--text);
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.faq-q:hover { color: var(--accent-2); }
.faq-chev {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text-2);
  transition: transform 0.3s ease, background 0.2s ease;
}
.faq-item.open .faq-chev {
  transform: rotate(180deg);
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(123, 211, 247, 0.3);
}
.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(.2, .7, .2, 1);
}
.faq-item.open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a { overflow: hidden; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.faq-item.open .faq-a { padding-bottom: 24px; padding-right: 48px; }

/* Voice Studio */
.vs-controls {
  display: flex;
  gap: 16px;
  margin: 8px 0 28px;
  flex-wrap: wrap;
  align-items: center;
}
.vs-phrase {
  flex: 1;
  min-width: 280px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: all 0.2s ease;
}
.vs-phrase:focus {
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.vs-phrase::placeholder { color: var(--text-4); }

/* Head row (title + lead) */
.vs-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 28px;
}
@media (max-width: 760px) {
  .vs-head { grid-template-columns: 1fr; gap: 16px; }
}

/* Input + char counter */
.vs-input-wrap { position: relative; flex: 1; min-width: 280px; display: flex; }
.vs-input-wrap .vs-phrase { flex: 1; min-width: 0; padding-right: 64px; }
.vs-counter {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-4);
  pointer-events: none;
  letter-spacing: 0.03em;
}
.vs-counter.max { color: var(--accent); }

/* Hint + error lines */
.vs-hint {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 0 0 16px;
}
.vs-error {
  font-size: 13.5px;
  color: #ffb4a0;
  background: rgba(255, 90, 60, 0.08);
  border: 1px solid rgba(255, 90, 60, 0.28);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 16px;
}

.vs-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vs-select {
  appearance: none;
  padding: 12px 38px 12px 16px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23b8bdcc' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.vs-segment {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border-2);
  padding: 3px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
}
.vs-segment button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-3);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vs-segment button.active { background: var(--text); color: var(--bg); }
.vs-segment button:hover:not(.active) { color: var(--text); }
.vs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.vs-card {
  appearance: none;
  background: linear-gradient(180deg, rgba(20,28,50,0.55), rgba(8,14,28,0.7));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 18px 14px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(.2, .7, .2, 1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vs-card:hover {
  border-color: var(--border-2);
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(28,36,60,0.7), rgba(12,18,34,0.8));
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.6);
}
.vs-card.playing {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(40,28,24,0.7), rgba(20,14,10,0.85));
  box-shadow: 0 0 0 1px var(--accent-soft), 0 16px 48px -12px var(--accent-glow);
}
.vs-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.vs-flag { font-size: 22px; line-height: 1; }
.vs-gender {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.vs-gender-F { background: rgba(244,114,182,0.16); color: #F472B6; border: 1px solid rgba(244,114,182,0.3); }
.vs-gender-M { background: rgba(123,211,247,0.16); color: var(--cool); border: 1px solid rgba(123,211,247,0.3); }
.vs-name { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; line-height: 1.1; }
.vs-lang { font-size: 12.5px; color: var(--text-3); }
.vs-tags {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}
.vs-tone { color: var(--accent); }
.vs-wave {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.vs-card.playing .vs-wave { opacity: 1; }
.vs-wave span {
  display: inline-block;
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
  height: 4px;
}
.vs-card.playing .vs-wave span { animation: wave-bar 0.9s ease-in-out infinite; }
.vs-status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-top: 4px;
}
.vs-card.playing .vs-status { color: var(--accent); }
.vs-card:hover .vs-status { color: var(--text-2); }
.vs-notice {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-4);
  text-align: center;
}

/* Floating AI Assistant Widget */
.assist-launch {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #1a0d04;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.3s cubic-bezier(.2, .7, .2, 1);
  animation: assist-pulse 2.6s ease-in-out infinite;
}
.assist-launch:hover { transform: scale(1.06); }
.assist-launch.open { animation: none; transform: rotate(90deg); }
@keyframes assist-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(123,211,247,0.18), 0 14px 36px -10px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.3); }
  50%      { box-shadow: 0 0 0 8px rgba(123,211,247,0.05), 0 18px 44px -10px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.3); }
}
.assist-launch-wave { display: flex; align-items: center; gap: 2.5px; height: 22px; }
.assist-launch-wave span {
  width: 2.5px;
  background: #1a0d04;
  border-radius: 1px;
  animation: wave-bar 1.1s ease-in-out infinite;
}
.assist-launch-wave span:nth-child(1) { height: 7px;  animation-delay: 0s; }
.assist-launch-wave span:nth-child(2) { height: 14px; animation-delay: 0.1s; }
.assist-launch-wave span:nth-child(3) { height: 20px; animation-delay: 0.2s; }
.assist-launch-wave span:nth-child(4) { height: 14px; animation-delay: 0.1s; }
.assist-launch-wave span:nth-child(5) { height: 7px;  animation-delay: 0s; }
.assist-tooltip {
  position: fixed;
  right: 92px;
  bottom: 30px;
  z-index: 998;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  color: var(--text);
  font-size: 13px;
  padding: 12px 38px 12px 16px;
  border-radius: 14px;
  cursor: pointer;
  max-width: 280px;
  box-shadow: 0 14px 40px -10px rgba(0,0,0,0.55);
  animation: tooltip-in 0.4s cubic-bezier(.2, .7, .2, 1);
}
@keyframes tooltip-in {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}
.assist-tooltip::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--bg-2);
  border-right: 1px solid var(--border-2);
  border-top: 1px solid var(--border-2);
}
.assist-tooltip-close {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 0;
  color: var(--text-3);
  cursor: pointer;
  font-size: 16px;
}
.assist-tooltip-close:hover { color: var(--text); }
.assist-panel {
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 999;
  width: 400px;
  max-width: calc(100vw - 36px);
  height: 640px;
  max-height: calc(100vh - 130px);
  max-height: calc(100dvh - 130px);
  background: linear-gradient(180deg, rgba(22,30,55,0.92), rgba(10,16,32,0.95));
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--border-2);
  border-radius: 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 30px 80px -20px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: panel-rise 0.32s cubic-bezier(.2, .7, .2, 1);
}
@keyframes panel-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.assist-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.assist-head-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 3px rgba(123,211,247,0.18);
}
.assist-head-wave { display: flex; gap: 1.5px; height: 14px; align-items: center; }
.assist-head-wave span {
  width: 2px;
  background: #1a0d04;
  border-radius: 1px;
  animation: wave-bar 1s ease-in-out infinite;
}
.assist-head-wave span:nth-child(1) { height: 4px; animation-delay: 0s; }
.assist-head-wave span:nth-child(2) { height: 8px; animation-delay: 0.1s; }
.assist-head-wave span:nth-child(3) { height: 12px; animation-delay: 0.2s; }
.assist-head-wave span:nth-child(4) { height: 8px; animation-delay: 0.1s; }
.assist-head-wave span:nth-child(5) { height: 4px; animation-delay: 0s; }
.assist-head-meta { flex: 1; }
.assist-head-name { font-size: 16px; font-weight: 600; color: var(--text); }
.assist-head-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--good);
  display: flex;
  align-items: center;
  gap: 6px;
}
.assist-head-sub::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 8px var(--good);
}
.assist-head-x {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-2);
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.assist-head-x:hover { background: var(--surface-2); color: var(--text); }
.assist-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 18px;
  gap: 4px;
}
.assist-tabs button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}
.assist-tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.assist-thread {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
.assist-thread::-webkit-scrollbar { width: 5px; }
.assist-thread::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.assist-msg {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  animation: msg-in 0.3s ease;
}
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.assist-msg-assistant {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--text);
}
.assist-msg-user {
  align-self: flex-end;
  background: var(--accent-soft);
  border: 1px solid rgba(123, 211, 247, 0.3);
  color: var(--text);
}
.assist-caret {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: var(--accent);
  vertical-align: middle;
  margin-left: 2px;
  animation: caret 1s steps(2) infinite;
}
.assist-typing { display: inline-flex; gap: 3px; padding: 4px 0; }
.assist-typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-3);
  animation: typing 1.1s ease-in-out infinite;
}
.assist-typing span:nth-child(2) { animation-delay: 0.15s; }
.assist-typing span:nth-child(3) { animation-delay: 0.3s; }
.assist-quicks { padding: 0 18px 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.assist-quick {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}
.assist-quick:hover {
  background: var(--accent-soft);
  border-color: rgba(123,211,247,0.3);
  color: var(--text);
}
.assist-input {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}
.assist-input input {
  flex: 1;
  min-width: 0; /* let the input shrink inside the flex row (no overflow) */
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--text);
  font-family: inherit;
  /* 16px, NOT smaller: iOS Safari auto-zooms into any input with font-size < 16px
     on focus, which shoved the chat panel off-screen and forced finger-dragging
     to get back. 16px keeps the zoom from ever triggering. */
  font-size: 16px;
  outline: none;
}
.assist-input input:focus { border-color: var(--accent); }
.assist-input button {
  appearance: none;
  background: var(--accent);
  color: #1a0d04;
  border: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}
.assist-input button:hover:not(:disabled) { background: var(--accent-2); transform: scale(1.06); }
.assist-input button:disabled { opacity: 0.45; cursor: not-allowed; }
.assist-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-4);
}
.assist-clear {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.assist-clear:hover { color: var(--text); }
.assist-voice {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 32px;
  text-align: center;
}
.assist-voice-orb {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent) 50%, var(--accent-dark) 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 0 60px -10px var(--accent-glow);
  animation: orb-pulse 3.5s ease-in-out infinite;
  border: 0;
  cursor: pointer;
  color: #1a0d04;
  appearance: none;
  font-family: inherit;
  transition: all 0.3s ease;
}
.assist-voice-orb:hover { transform: scale(1.04); }
.voice-orb-listening {
  animation: orb-listening 0.9s ease-in-out infinite;
  box-shadow: 0 0 80px -10px var(--accent-glow);
}
.voice-orb-thinking {
  animation: orb-thinking 1.4s linear infinite;
}
.voice-orb-speaking {
  animation: orb-speaking 0.55s ease-in-out infinite;
}
@keyframes orb-listening {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.10); }
}
@keyframes orb-thinking {
  0%   { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1) rotate(360deg); }
}
@keyframes orb-speaking {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.assist-voice-status {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-top: 6px;
}
.assist-voice-interim {
  font-size: 14.5px;
  color: var(--text-3);
  font-style: italic;
  text-align: center;
  max-width: 300px;
  line-height: 1.4;
}
.assist-voice-error {
  font-size: 12px;
  color: #F472B6;
  text-align: center;
  max-width: 280px;
  padding: 8px 12px;
  background: rgba(244, 114, 182, 0.10);
  border: 1px solid rgba(244, 114, 182, 0.30);
  border-radius: 8px;
  line-height: 1.4;
}
.assist-voice-transcript {
  width: 100%;
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 6px 0;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.assist-voice-line {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
}
.assist-voice-line.voice-user { color: var(--text); }
.voice-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-right: 6px;
}
.voice-user .voice-tag { color: var(--accent); }
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.assist-voice-orb span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(123, 211, 247, 0.25);
  animation: orb-ring 3.5s ease-out infinite;
}
.assist-voice-orb span:nth-child(2) { animation-delay: 0.9s; }
.assist-voice-orb span:nth-child(3) { animation-delay: 1.8s; }
.assist-voice-orb span:nth-child(4) { animation-delay: 2.7s; }
@keyframes orb-ring {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}
.assist-voice-note { font-size: 14px; color: var(--text-2); line-height: 1.55; max-width: 280px; }

/* Responsive for new sections */
@media (max-width: 1100px) { .vs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) {
  .live-metrics { grid-template-columns: 1fr 1fr; }
  .live-metric:nth-child(2) { border-right: 0; }
  .live-metric:nth-child(1), .live-metric:nth-child(2) { border-bottom: 1px solid var(--border); }
  .plans { grid-template-columns: 1fr; }
  .plan-inner { min-height: auto; }
}
@media (max-width: 720px) { .vs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .faq-q { font-size: 18px; padding: 20px 0; }
  .faq-a { font-size: 14.5px; }
  .vs-grid { grid-template-columns: 1fr; }
  .assist-panel { right: 12px; left: 12px; bottom: 86px; width: auto; max-width: none; height: calc(100vh - 110px); height: calc(100dvh - 110px); }
  .assist-launch { right: 16px; bottom: 16px; }
  .assist-tooltip { right: 86px; bottom: 24px; max-width: 220px; }
}

/* ═══ Voice Studio compact (avatar mode) ═══════════════ */
.voice-studio-compact .vs-grid,
.voice-studio-compact .vs-card { /* hide legacy card grid in compact mode */ }

.vs-avatars {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 18px;
  margin: 8px 0 24px;
}
@media (max-width: 1100px) { .vs-avatars { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 760px)  { .vs-avatars { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
@media (max-width: 480px)  { .vs-avatars { grid-template-columns: repeat(4, 1fr); gap: 10px; } }

@media (max-width: 600px) {
  .vs-avatar { gap: 6px; }
  .vs-avatar-disc { width: 56px; height: 56px; }
  .vs-avatar-flag { font-size: 26px; }
  .vs-avatar-name { font-size: 13px; }
  .vs-avatar-gender { width: 16px; height: 16px; font-size: 8px; box-shadow: 0 0 0 1.5px var(--bg); }
  .voice-studio-compact { padding: 64px 0 56px; }
  .vs-controls { gap: 10px; margin: 4px 0 18px; }
  .vs-phrase { min-width: 0; padding: 12px 14px; font-size: 13.5px; }
  .vs-filters { gap: 8px; width: 100%; }
  .vs-select { padding: 10px 30px 10px 12px; font-size: 12px; flex: 1; min-width: 0; }
  .vs-segment { font-size: 10px; }
  .vs-segment button { padding: 6px 10px; }
}

.vs-avatar {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform 0.25s cubic-bezier(.2, .7, .2, 1);
}
.vs-avatar:hover { transform: translateY(-3px); }

.vs-avatar-disc {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.15), transparent 60%),
    linear-gradient(160deg, rgba(28, 38, 70, 0.85), rgba(10, 16, 32, 0.95));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 28px -10px rgba(0, 0, 0, 0.6);
  transition: all 0.25s ease;
}
.vs-avatar:hover .vs-avatar-disc {
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px var(--accent-soft),
    0 16px 36px -8px var(--accent-glow);
}
.vs-avatar.playing .vs-avatar-disc {
  border-color: var(--accent);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 174, 122, 0.4), transparent 60%),
    linear-gradient(160deg, rgba(50, 28, 18, 0.9), rgba(20, 12, 8, 0.95));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 2px var(--accent-soft),
    0 0 40px -4px var(--accent-glow);
  animation: avatar-pulse 1.4s ease-in-out infinite;
}
@keyframes avatar-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.vs-avatar.generating .vs-avatar-disc {
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 2px var(--accent-soft),
    0 0 40px -4px var(--accent-glow);
}
.vs-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--accent-soft);
  border-top-color: var(--accent);
  animation: vs-spin 0.7s linear infinite;
}
@keyframes vs-spin { to { transform: rotate(360deg); } }

.vs-avatar-flag {
  font-size: 36px;
  line-height: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.vs-avatar:hover .vs-avatar-flag { opacity: 0.45; transform: scale(0.92); }
.vs-avatar.playing .vs-avatar-flag { opacity: 0.3; transform: scale(0.85); }

.vs-avatar-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.vs-avatar:hover .vs-avatar-play,
.vs-avatar.playing .vs-avatar-play {
  opacity: 1;
}

.vs-avatar-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 22px;
}
.vs-avatar-wave span {
  display: inline-block;
  width: 2.5px;
  background: var(--accent);
  border-radius: 1px;
  animation: wave-bar 0.9s ease-in-out infinite;
}
.vs-avatar-wave span:nth-child(1) { height: 8px;  animation-delay: 0s; }
.vs-avatar-wave span:nth-child(2) { height: 14px; animation-delay: 0.1s; }
.vs-avatar-wave span:nth-child(3) { height: 22px; animation-delay: 0.2s; }
.vs-avatar-wave span:nth-child(4) { height: 14px; animation-delay: 0.1s; }
.vs-avatar-wave span:nth-child(5) { height: 8px;  animation-delay: 0s; }

.vs-avatar-ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid transparent;
  pointer-events: none;
}
.vs-avatar.playing .vs-avatar-ring {
  border-color: var(--accent);
  animation: avatar-ring 2s ease-out infinite;
}
@keyframes avatar-ring {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}

.vs-avatar-gender {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  background: var(--bg-2);
  box-shadow: 0 0 0 2px var(--bg);
}
.vs-avatar-gender.vs-gender-F { color: #F472B6; }
.vs-avatar-gender.vs-gender-M { color: var(--cool); }

.vs-avatar-name {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
  text-align: center;
  line-height: 1.1;
}

.vs-more-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 0;
}
.vs-more {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
}
.vs-more:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.vs-more.vs-less { font-size: 12px; opacity: 0.8; }

/* Nav Sign in link */
.nav-signin {
  font-size: 13px;
  color: var(--text-2);
  padding: 8px 14px;
  border-radius: 999px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.nav-signin:hover {
  color: var(--text);
  background: var(--surface-2);
}

/* Nav call-AI pill */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-hamburger {
  display: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  padding: 9px 8px;
  flex-direction: column;
  justify-content: space-between;
}
.nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav.mobile-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.mobile-open .nav-hamburger span:nth-child(2) { opacity: 0; }
.nav.mobile-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(5, 8, 17, 0.92);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
          backdrop-filter: blur(22px) saturate(160%);
  border-top: 1px solid var(--border);
  padding: 18px 24px 22px;
  flex-direction: column;
  gap: 14px;
}
.nav.mobile-open .nav-mobile { display: flex; }
.nav-mobile-links { display: flex; flex-direction: column; gap: 4px; }
.nav-mobile-links a {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--text);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  letter-spacing: -0.01em;
}
.nav-mobile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  flex-wrap: wrap;
}
.nav-mobile-cta {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.nav-mobile-cta a { flex: 1; justify-content: center; }

@media (max-width: 960px) {
  .nav-actions { display: none; }
  .nav-hamburger { display: flex; }
  .nav-links { display: none; }
}

.nav-call {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(123, 211, 247, 0.22);
  white-space: nowrap;
  transition: all 0.2s ease;
}
.nav-call:hover {
  background: rgba(123, 211, 247, 0.22);
  border-color: rgba(123, 211, 247, 0.4);
  color: var(--accent-2);
  transform: translateY(-1px);
}
.nav-call-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@media (max-width: 1080px) {
  .nav-call-num { display: none; }
  .nav-call { padding: 8px 10px; }
}

/* ═══ Auth modal (Sign in / Sign up) ════════════════ */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(3, 6, 14, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  display: grid;
  place-items: center;
  padding: 28px;
  animation: modal-fade 0.25s ease;
}
.auth-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 35%, rgba(255,255,255,0.06) 100%),
    linear-gradient(180deg, rgba(22, 30, 55, 0.92), rgba(10, 16, 32, 0.95));
  -webkit-backdrop-filter: blur(28px) saturate(160%);
          backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--border-2);
  border-radius: 22px;
  padding: 36px 32px 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 40px 100px -20px rgba(0, 0, 0, 0.8);
  animation: modal-rise 0.32s cubic-bezier(.2, .7, .2, 1);
}
.auth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
}
.auth-close:hover { background: var(--surface-2); color: var(--text); }
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 22px;
}
.auth-title {
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--text);
  font-weight: 400;
}
.auth-sub {
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.5;
  margin: 0 0 24px;
}
.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #fff;
  color: #1a1a1a;
  border: 0;
  padding: 12px 16px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.auth-google:hover:not(:disabled) {
  background: #f3f4f8;
  transform: translateY(-1px);
}
.auth-google:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-label {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  letter-spacing: 0.02em;
}
.auth-forgot {
  color: var(--accent);
  font-size: 11.5px;
  text-decoration: none;
  cursor: pointer;
}
.auth-forgot:hover { text-decoration: underline; }
.auth-field input {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: all 0.18s ease;
  width: 100%;
}
.auth-field input::placeholder { color: var(--text-4); }
.auth-field input:focus {
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-password-wrap { position: relative; }
.auth-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--text-3);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.auth-eye:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.auth-submit {
  background: var(--accent);
  color: #1a0d04;
  border: 0;
  padding: 13px 16px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
  transition: all 0.2s ease;
  box-shadow: 0 8px 24px -8px var(--accent-glow);
}
.auth-submit:hover:not(:disabled) {
  background: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -8px var(--accent-glow);
}
.auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-terms {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--text-4);
  line-height: 1.5;
}
.auth-error {
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(244, 114, 182, 0.10);
  border: 1px solid rgba(244, 114, 182, 0.30);
  color: #F472B6;
  font-size: 12.5px;
  line-height: 1.45;
  animation: msg-in 0.25s ease;
}

/* ═══ Checkout modal ═══════════════════════════ */
.checkout-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(3, 6, 14, 0.84);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  display: grid;
  place-items: center;
  padding: 28px;
  animation: modal-fade 0.25s ease;
}
.checkout-modal {
  position: relative;
  width: 100%;
  max-width: 880px;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 35%, rgba(255,255,255,0.06) 100%),
    linear-gradient(180deg, rgba(22, 30, 55, 0.94), rgba(10, 16, 32, 0.97));
  -webkit-backdrop-filter: blur(28px) saturate(160%);
          backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--border-2);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 40px 100px -20px rgba(0, 0, 0, 0.8);
  animation: modal-rise 0.32s cubic-bezier(.2, .7, .2, 1);
  overflow: hidden;
  max-height: 92vh;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
}
.checkout-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 64px 14px 28px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 14px;
}
.checkout-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-4);
}
.checkout-steps .active { color: var(--accent); }
.checkout-step-sep {
  width: 20px;
  height: 1px;
  background: var(--border-2);
}
.checkout-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.checkout-plan-name {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.checkout-plan-price {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.checkout-plan-price span {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-3);
  margin-left: 2px;
}
.checkout-plan-billed { font-size: 11px; color: var(--text-3); }

.checkout-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  gap: 0;
  overflow-y: auto;
  flex: 1;
}
.checkout-form-col { padding: 24px 28px; }
.checkout-form { display: flex; flex-direction: column; gap: 12px; }
.checkout-h3 {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0 0 4px;
  color: var(--text);
  letter-spacing: -0.01em;
  font-weight: 400;
}
.checkout-sub {
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 8px;
  line-height: 1.5;
}
.checkout-providers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px 0 8px;
}
.checkout-provider {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  transition: all 0.2s ease;
}
.checkout-provider svg { background: #fff; border-radius: 4px; padding: 4px 6px; }
.checkout-provider.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.checkout-provider:hover:not(.active) { background: var(--surface-2); }
.checkout-card-input {
  position: relative;
}
.checkout-card-input input { padding-right: 56px; }
.checkout-card-brand {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-2);
  background: rgba(255,255,255,0.06);
  padding: 3px 7px;
  border-radius: 4px;
}
.checkout-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.checkout-select {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.checkout-paypal {
  padding: 20px;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: var(--surface);
  text-align: center;
}
.checkout-paypal-note {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.checkout-secure {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-top: 4px;
}
.checkout-pay-btn { margin-top: 4px; }
.checkout-back {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  align-self: flex-start;
  padding: 4px 0;
  margin-top: 4px;
}
.checkout-back:hover { color: var(--text); }

/* Right sidebar — order summary */
.checkout-summary {
  padding: 24px 28px;
  background: rgba(255,255,255,0.02);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.checkout-summary-h {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.checkout-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--text);
}
.checkout-summary-row b { font-weight: 500; }
.checkout-summary-discount { font-size: 12px; color: var(--good); }
.checkout-summary-trial {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(123, 211, 247, 0.25);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text);
}
.checkout-summary-trial b { color: var(--accent); }
.checkout-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 4px;
}
.checkout-summary-total b {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--text);
  letter-spacing: -0.01em;
  font-weight: 400;
}
.checkout-summary-features {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-2);
}
.checkout-summary-features li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.checkout-summary-features svg { color: var(--good); flex-shrink: 0; }
.checkout-summary-cancel {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-4);
  margin-top: 6px;
}

/* Success state */
.checkout-success {
  padding: 56px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.checkout-success-h {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--text);
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 8px 0 0;
}
.checkout-success-sub {
  font-size: 14.5px;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 460px;
  margin: 0;
}
.checkout-success-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 540px;
  margin: 14px 0 6px;
  padding: 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: left;
}
.checkout-success-meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mkt-l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.checkout-success-meta b {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 760px) {
  .checkout-body { grid-template-columns: 1fr; }
  .checkout-summary { border-left: 0; border-top: 1px solid var(--border); }
  .checkout-modal { max-width: none; }
  .checkout-head { padding: 18px 60px 12px 20px; }
  .checkout-form-col { padding: 20px; }
  .checkout-summary { padding: 20px; }
}

/* ═══ Cookie consent (original full-screen frosted-glass modal) ═════════ */
.cookie-overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;
  background: rgba(3, 6, 14, 0.18);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
          backdrop-filter: blur(4px) saturate(120%);
  display: grid;
  place-items: center;
  padding: 24px;
  animation: cookie-overlay-fade 0.4s cubic-bezier(.2,.7,.2,1);
}
@keyframes cookie-overlay-fade {
  from { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
  to { opacity: 1; }
}
.cookie-card {
  width: 100%;
  max-width: 520px;
  position: relative;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 35%, rgba(255,255,255,0.07) 100%),
    linear-gradient(180deg, rgba(40, 56, 95, 0.18), rgba(18, 28, 55, 0.26));
  -webkit-backdrop-filter: blur(32px) saturate(180%);
          backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  padding: 28px 28px 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 30px 70px -20px rgba(0, 0, 0, 0.55);
  animation: cookie-rise 0.45s cubic-bezier(.2, .7, .2, 1);
}
@keyframes cookie-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.cookie-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(123, 211, 247, 0.3);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.cookie-head { margin-bottom: 18px; }
.cookie-title {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 8px;
}
.cookie-body {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}
.cookie-cats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.cookie-cat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
}
.cookie-cat input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.cookie-cat-name { color: var(--text); font-weight: 500; }
.cookie-cat-desc { color: var(--text-3); font-size: 12px; margin-top: 1px; }
.cookie-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cookie-btn {
  appearance: none;
  border-radius: 999px;
  padding: 11px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}
.cookie-btn-primary {
  background: var(--accent);
  color: #1a0d04;
  box-shadow: 0 8px 22px -6px var(--accent-glow);
}
.cookie-btn-primary:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -6px var(--accent-glow);
}
.cookie-btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.18);
}
.cookie-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}
.cookie-privacy {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-privacy:hover { color: var(--text); }

/* Footer row: subtle, equally-easy Decline link (EU symmetric refusal) + policy.
   Deliberately low-emphasis text — not a competing button — so one tap on the
   primary "Accept all" stays the obvious path while refusal is one tap too. */

/* ═══ Language confirmation toast (5s auto-revert) ══════════ */
.lang-confirm-toast {
  position: fixed;
  top: 86px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1900;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 12px;
  width: min(440px, calc(100vw - 28px));
  background:
    linear-gradient(155deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 35%, rgba(255,255,255,0.10) 100%),
    linear-gradient(180deg, rgba(22, 30, 55, 0.92), rgba(10, 16, 32, 0.95));
  -webkit-backdrop-filter: blur(24px) saturate(160%);
          backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 20px 50px -16px rgba(0, 0, 0, 0.6);
  animation: lang-toast-in 0.32s cubic-bezier(.2, .7, .2, 1);
  overflow: hidden;
}
@keyframes lang-toast-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.lang-confirm-flag {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.lang-confirm-line {
  font-size: 14px;
  color: var(--text);
  font-family: var(--sans);
  font-weight: 500;
}
.lang-confirm-line b {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.lang-confirm-sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 1px;
}
.lang-confirm-actions {
  display: flex;
  gap: 6px;
}
.lang-confirm-revert, .lang-confirm-keep {
  appearance: none;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.lang-confirm-revert:hover {
  background: var(--surface-2);
  border-color: rgba(255, 255, 255, 0.28);
}
.lang-confirm-keep {
  background: var(--accent);
  color: #1a0d04;
  border-color: var(--accent);
  font-weight: 600;
}
.lang-confirm-keep:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.lang-confirm-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
}
.lang-confirm-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.25s linear;
}
@media (max-width: 600px) {
  .lang-confirm-toast {
    top: auto;
    bottom: 16px;
    grid-template-columns: 32px 1fr;
    grid-template-rows: auto auto;
    gap: 8px 12px;
    padding: 12px 14px 10px;
  }
  .lang-confirm-flag { font-size: 22px; }
  .lang-confirm-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 520px) {
  .cookie-overlay { padding: 16px; }
  .cookie-card { padding: 22px 20px 18px; border-radius: 18px; }
  .cookie-title { font-size: 21px; }
  .cookie-actions { flex-direction: column-reverse; }
  .cookie-actions .cookie-btn { width: 100%; text-align: center; }
}

/* Legacy bottom-banner styles kept off when overlay is on */
.auth-switch {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}
.auth-switch button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}
.auth-switch button:hover { color: var(--accent-2); text-decoration: underline; }
.auth-success {
  text-align: center;
  padding: 32px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.auth-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(111, 231, 176, 0.14);
  border: 1px solid rgba(111, 231, 176, 0.3);
  color: var(--good);
  display: grid;
  place-items: center;
  animation: success-pop 0.5s cubic-bezier(.2, .7, .2, 1);
}
@keyframes success-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.auth-success-title {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.auth-success-sub {
  font-size: 14px;
  color: var(--text-3);
}
@media (max-width: 480px) {
  .auth-modal { padding: 28px 22px 22px; }
  .auth-title { font-size: 26px; }
}

/* Hide legacy card grid in compact mode (we use avatars instead) */
.voice-studio-compact > .container > .vs-grid { display: none; }

/* Compact section padding */
.voice-studio-compact { padding: 100px 0 80px; }

/* ═══ Languages marquee (running ticker) ══════════════ */
.lang-marquee {
  margin-top: 36px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
.lang-marquee-track {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  animation: lang-marquee 60s linear infinite;
}
.lang-marquee:hover .lang-marquee-track {
  animation-play-state: paused;
}
@keyframes lang-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.lang-chip-more { color: var(--accent); border-color: rgba(123, 211, 247, 0.3); background: var(--accent-soft); }

/* ═══ Integrations marquee ═══════════════════════ */
.intg-marquee {
  margin-top: 36px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
.intg-marquee-track {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  animation: intg-marquee 50s linear infinite;
}
.intg-marquee:hover .intg-marquee-track { animation-play-state: paused; }
/* Scrolls the OPPOSITE way to the languages marquee (right vs left): starts
   shifted and returns to 0. The track content is duplicated, so this loops
   seamlessly just like the forward direction. */
@keyframes intg-marquee {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.intg-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.intg-pill:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
  transform: translateY(-2px);
}
.intg-pill svg {
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.04));
}
.intg-pill .intg-name {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
}

/* ─── Mobile fixes (≤820px) — desktop is untouched ──────────────────────
   Placed last so these win over earlier same-specificity responsive rules. */
@media (max-width: 820px) {
  /* Bug 1 — two-column section intros stack to one column, left-aligned. */
  .sec-intro,
  .vs-head {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: left;
  }
  .sec-intro > h2,
  .sec-intro > .lead,
  .vs-head > h2,
  .vs-head > .lead { max-width: 100%; }

  /* Bug 2 — decorative brand watermark overlaps text on narrow screens. */
  #brand-bg,
  #brand-shield { display: none !important; }

  /* Bug 3 — chat-widget "Got questions?" tooltip covers content; hide the
     text bubble on mobile, keep the compact launch circle. */
  .assist-tooltip { display: none !important; }

  /* Bug 4 — caption / label minimum 12px on mobile. */
  .eyebrow,
  .hero-meta,
  .call-status,
  .track-tag,
  .crm-title,
  .crm-pill,
  .crm-field .lbl,
  .scenario-num,
  .dial-info .l,
  .bubble .who { font-size: 12px; }

  /* Bug 5 — tap targets ≥44px. */
  .vs-segment button,
  .billing-toggle button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav-mobile-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ═══ Mobile performance (≤820px) — approved visible change ══════════════════
   backdrop-filter blur on dozens of glass cards is the main scroll cost on
   mobile GPUs. Below 820px blur is disabled everywhere and the translucent
   glass tints are replaced with a near-opaque dark panel so cards stay
   readable without the frosted effect. Desktop is untouched. */
@media (max-width: 820px) {
  :root {
    --glass-tint: linear-gradient(180deg, rgba(18, 26, 48, 0.88), rgba(12, 18, 36, 0.90));
    --glass-tint-strong: linear-gradient(180deg, rgba(20, 28, 52, 0.92), rgba(12, 18, 36, 0.94));
  }
  * {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  /* Prevent iOS Safari's focus-zoom on EVERY text field (chat, lead forms,
     checkout, Voice Studio search): any font-size < 16px makes Safari zoom in
     on tap, which shifts the layout sideways and forces the user to pinch/drag
     back. Force 16px site-wide on mobile. */
  input, textarea, select {
    font-size: 16px !important;
  }
  /* The hero demo cards wrap taller on the narrow mobile layout, so reserve
     more than the desktop min-heights — otherwise the transcript still outgrows
     the reserve and the page height (and Safari address bar) keeps bouncing. */
  /* On mobile the hero content sits high, so float the Live-AI chip UP into the
     free strip above the eyebrow (between the nav and the eyebrow) — it must not
     overlap the eyebrow and must not push any text down. Negative top lifts it
     out of the hero's top padding into that gap. */
  .hero-call { top: -46px; right: 12px; padding: 7px 12px; font-size: 12px; gap: 7px; }

  .call-card { min-height: 540px; }
  .crm-card { min-height: 320px; }
  /* These glass surfaces are too translucent to stay readable without blur —
     give them the opaque panel treatment. */
  .nav { background: rgba(5, 8, 17, 0.88); }
  .nav.scrolled { background: rgba(5, 8, 17, 0.94); }
  .cookie-card {
    background:
      linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 35%, rgba(255,255,255,0.07) 100%),
      linear-gradient(180deg, rgba(24, 34, 62, 0.96), rgba(12, 18, 36, 0.97));
  }
  /* Kill BOTH fixed, full-screen animated background layers on phones. A
     position:fixed layer that repaints (the #cosmos starfield canvas) visibly
     bounces up/down when the mobile URL bar nudges — the "картинка дёргается
     когда стою на месте" report. With these gone, the mobile backdrop is the
     static CSS gradient on <body> (painted with the scrolling page, not a fixed
     layer) → nothing can detach or bounce. */
  #cosmos { display: none !important; }

  /* Persistent Earth backdrop — matches the desktop treatment. A static WebP
     (no WebGL, no rotation) but position:FIXED so it stays put as a background
     while the page scrolls, exactly like desktop. Capped BELOW 100vw and
     centred so it can never make the page wider than the screen (a wider globe
     previously let the page be dragged sideways). Sits behind all content
     (#root is z-index 3) and above the ghost shield (z-index 1).
     NOTE: this is a fixed layer again, but a STATIC image (no repaint/WebGL),
     which is far safer than the old animated star canvas. The real page-jump
     bug was the hero cards resizing (fixed with min-heights), not this. */
  /* Earth sits in the UPPER area; the shield logo lives BELOW it as a separate
     element (not overlapping), so the logo can never read as "on the Earth". */
  /* Earth (upper) and the shield logo (lower) are the SAME SIZE and stacked
     symmetrically — planet on top, emblem of equal size directly below. Both fit
     the 844-tall viewport without overlap. */
  #globe {
    display: block !important;
    position: fixed;
    top: 30%;
    left: 50%;
    right: auto;
    width: min(460px, 90vw);
    height: min(460px, 90vw);
    max-width: 90vw;
    max-height: none;
    transform: translate(-50%, -50%);
    background: url('/textures/globe-static.webp') center / contain no-repeat;
    opacity: 0.6;
    filter: none;
    z-index: 2;
  }
  #globe canvas { display: none !important; }

  /* Shield logo BELOW the Earth, SAME SIZE for a symmetric look. Separate from
     the planet (no overlap) so it never reads as "on the Earth". Faint glowing
     ghost on the dark backdrop. */
  #brand-shield {
    display: block !important;
    position: fixed;
    top: 76%;
    left: 50%;
    right: auto;
    width: min(460px, 90vw);
    height: min(460px, 90vw);
    max-width: 90vw;
    max-height: none;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    opacity: 0.13;
    animation: none !important;
    filter: blur(0.3px) drop-shadow(0 0 22px rgba(123, 211, 247, 0.26));
    z-index: 1;
  }

  /* The languages + integrations marquees keep scrolling on mobile too (same as
     desktop) — they are GPU transform animations, no layout reflow, so they do
     not affect scroll stability. (The real jitter was the hero cards changing
     the page height, fixed separately with min-height reservations.) */
}