/* Inboundy Design System — Foundations
 * Colors and typography tokens, plus semantic element styles.
 * Import this once at the document level.
 */

/* ---------- Webfont ---------- */
/* Inboundy uses a clean geometric sans. We standardize on Inter for product
 * UI and a slightly tighter weight for marketing display. If a closer match
 * is requested, swap the @font-face / --font-sans declarations in this file. */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-400-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-400-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-400-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-400-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-400-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-400-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-400-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-400-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-400-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/inter-400-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/inter-400-greek-ext.woff2") format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/inter-400-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/inter-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;
}


:root {
  /* ============================================================
   * BRAND COLORS
   * ============================================================ */

  /* Primary — Mint Teal (logo icon).
   * Used sparingly: logo, accent dots, hover halos, marketing flourishes.
   * It is NOT the call-to-action color — primary buttons use --slate. */
  --mint-50:  #F1F8F8;
  --mint-100: #DEEEEE;
  --mint-200: #C6E3E3;
  --mint-300: #A8D5D5;  /* base brand mint */
  --mint-400: #8AC6C6;
  --mint-500: #6FB6B6;
  --mint-600: #559F9F;

  /* Primary action — Slate Teal (the dark button color used in product) */
  --slate-50:  #EEF3F3;
  --slate-100: #D8E2E2;
  --slate-200: #A9BDBD;
  --slate-300: #6F8A8B;
  --slate-400: #486568;
  --slate-500: #2C4F4F;  /* base — used for primary buttons */
  --slate-600: #234040;
  --slate-700: #1A3030;
  --slate-800: #112020;

  /* Wordmark Navy — deep ink used for headings and the wordmark */
  --navy-50:  #EEF1F6;
  --navy-100: #D5DCE7;
  --navy-200: #A6B4C6;
  --navy-300: #6F82A0;
  --navy-400: #3F5478;
  --navy-500: #243B5E;
  --navy-600: #1B2F4A;  /* base — wordmark */
  --navy-700: #14233A;
  --navy-800: #0D1827;

  /* ============================================================
   * NEUTRALS — App chrome, borders, surfaces
   * ============================================================ */
  --white:    #FFFFFF;
  --gray-25:  #FBFCFC;
  --gray-50:  #F6F8F8;   /* app background */
  --gray-100: #EEF1F2;   /* subtle surface, hover */
  --gray-200: #E3E7E9;   /* borders */
  --gray-300: #CBD2D5;   /* dividers, disabled */
  --gray-400: #9AA3A8;   /* muted icon */
  --gray-500: #6B7479;   /* secondary text */
  --gray-600: #4A5258;   /* body text on light */
  --gray-700: #2F3539;   /* strong body */
  --gray-800: #1A1F22;   /* near-black */
  --gray-900: #0E1214;

  /* ============================================================
   * SEMANTIC — Status & feedback
   * ============================================================ */
  /* Success (acceptances, "Active" pills, positive deltas) */
  --success-50:  #E8F6EE;
  --success-100: #CFEAD9;
  --success-500: #1F9A4F;
  --success-600: #167A3E;

  /* Info (selected nav, primary stat numbers, info banners) */
  --info-50:  #E8F1FB;
  --info-100: #CFE2F7;
  --info-500: #1F6FD6;
  --info-600: #1758AB;

  /* Warning (capacity bars near limit, amber progress) */
  --warning-50:  #FFF6DC;
  --warning-100: #FCE9A8;
  --warning-500: #E0A21A;
  --warning-600: #B07F0E;

  /* Danger (limits hit, disconnect actions) */
  --danger-50:  #FBE9E9;
  --danger-100: #F4C9C9;
  --danger-500: #C8312E;
  --danger-600: #9F2422;

  /* AI accent (very soft mint-blue, used on AI-generated chips/banners) */
  --ai-50:  #EAF6F4;
  --ai-100: #D2EBE7;
  --ai-500: #4FA89C;

  /* ============================================================
   * SEMANTIC TOKENS — use these in components
   * ============================================================ */
  --bg-app:        var(--gray-50);
  --bg-surface:    var(--white);
  --bg-surface-2:  var(--gray-25);
  --bg-sidebar:    #1F3A3B;          /* dark teal sidebar — see screens */
  --bg-info-soft:  #E5F2FB;          /* "Active Settings" banner tint */
  --bg-mint-soft:  var(--mint-100);

  --fg-primary:    var(--navy-600);  /* H1/H2 — wordmark navy */
  --fg-body:       var(--gray-700);  /* default body */
  --fg-muted:      var(--gray-500);  /* helper, secondary */
  --fg-subtle:     var(--gray-400);  /* placeholder */
  --fg-on-dark:    var(--white);
  --fg-link:       var(--info-500);

  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-focus:   var(--mint-400);

  --action-primary-bg:        var(--slate-500);
  --action-primary-bg-hover:  var(--slate-600);
  --action-primary-fg:        var(--white);
  --action-secondary-bg:      var(--white);
  --action-secondary-border:  var(--gray-300);

  /* ============================================================
   * TYPOGRAPHY
   * ============================================================ */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Type scale — 1.125 ratio, rounded. Product UI is conservative. */
  --fs-12: 12px;  --lh-12: 16px;
  --fs-13: 13px;  --lh-13: 18px;
  --fs-14: 14px;  --lh-14: 20px;
  --fs-15: 15px;  --lh-15: 22px;
  --fs-16: 16px;  --lh-16: 24px;
  --fs-18: 18px;  --lh-18: 26px;
  --fs-20: 20px;  --lh-20: 28px;
  --fs-24: 24px;  --lh-24: 32px;
  --fs-28: 28px;  --lh-28: 36px;
  --fs-32: 32px;  --lh-32: 40px;
  --fs-40: 40px;  --lh-40: 48px;
  --fs-56: 56px;  --lh-56: 60px;
  --fs-72: 72px;  --lh-72: 76px;

  /* ============================================================
   * SPACING — 4px grid
   * ============================================================ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ============================================================
   * RADII — small/medium, never pill on cards
   * ============================================================ */
  --r-xs: 4px;
  --r-sm: 6px;       /* inputs, small buttons */
  --r-md: 8px;       /* cards, panels */
  --r-lg: 12px;      /* large surfaces */
  --r-xl: 16px;
  --r-pill: 999px;   /* status badges only */

  /* ============================================================
   * SHADOWS — restrained. App relies on borders, not float.
   * ============================================================ */
  --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05);
  --shadow-focus: 0 0 0 3px rgba(168, 213, 213, 0.45);

  /* ============================================================
   * MOTION
   * ============================================================ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.15, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
}

/* ============================================================
 * SEMANTIC ELEMENT STYLES
 * Layered onto base elements where users want defaults.
 * Components in UI kits typically opt in via classnames instead.
 * ============================================================ */
html, body { font-family: var(--font-sans); color: var(--fg-body); background: var(--bg-app); }
body { font-size: var(--fs-15); line-height: var(--lh-15); -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6 { color: var(--fg-primary); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: var(--fs-32); line-height: var(--lh-32); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-24); line-height: var(--lh-24); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-20); line-height: var(--lh-20); }
h4 { font-size: var(--fs-18); line-height: var(--lh-18); font-weight: 600; }
h5 { font-size: var(--fs-16); line-height: var(--lh-16); font-weight: 600; }
h6 { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); }

p  { margin: 0; }
small { font-size: var(--fs-13); line-height: var(--lh-13); color: var(--fg-muted); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
a  { color: var(--fg-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Display sizes for marketing — opt-in via class */
.display-xl { font-size: var(--fs-72); line-height: var(--lh-72); letter-spacing: -0.03em; font-weight: 700; color: var(--fg-primary); }
.display-lg { font-size: var(--fs-56); line-height: var(--lh-56); letter-spacing: -0.025em; font-weight: 700; color: var(--fg-primary); }
.display-md { font-size: var(--fs-40); line-height: var(--lh-40); letter-spacing: -0.02em; font-weight: 700; color: var(--fg-primary); }


/* Inboundy Landing Page styles */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--fg-body);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}

/* ============ Theme switching ============ */
body.dark {
  --bg-app: #0E1F20;
  --bg-surface: #14292A;
  --bg-surface-2: #1A3030;
  --fg-primary: #F1F8F8;
  --fg-body: #C8D6D7;
  --fg-muted: #8AA4A6;
  --fg-subtle: #5C7374;
  --border-default: #1F3A3B;
  --border-strong: #2A4748;
  --bg-info-soft: #15334A;
}

/* ============ Container ============ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }

/* ============ Header ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border-default);
}
body.dark .site-header { background: rgba(20,41,42,0.85); }
.site-header .row { display: flex; align-items: center; justify-content: flex-start; height: 68px; }
.site-header .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.site-header .brand img { height: 28px; }
body.dark .site-header .brand img { filter: brightness(0) invert(1); }
.site-header .brand .name { font: 700 18px/1 var(--font-sans); color: var(--fg-primary); letter-spacing: -0.01em; }
.site-header nav { display: flex; gap: 28px; margin-left: 40px; flex-shrink: 0; }
.site-header nav a { font: 500 14px/1 var(--font-sans); color: var(--fg-body); }
.site-header nav a:hover { color: var(--fg-primary); text-decoration: none; }
.site-header .cta-row { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.site-header .login { font: 500 14px/1 var(--font-sans); color: var(--fg-body); padding: 8px 14px; border-radius: 6px; }
.site-header .login:hover { color: var(--fg-primary); text-decoration: none; }

/* ============ Language switcher (pill) ============ */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  flex-shrink: 0;
}
.lang-switch button,
.lang-switch a {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px/1 var(--font-sans); letter-spacing: 0.04em;
  padding: 6px 10px;
  min-width: 30px;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-muted);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.lang-switch button:hover,
.lang-switch a:hover { color: var(--fg-primary); text-decoration: none; }
.lang-switch .is-active,
.lang-switch [aria-current="true"] {
  background: var(--slate-500);
  color: #fff;
}
body.dark .lang-switch .is-active,
body.dark .lang-switch [aria-current="true"] {
  background: var(--mint-300);
  color: var(--navy-700);
}

/* ============ Theme toggle ============ */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--fg-body);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.theme-toggle:hover {
  background: var(--bg-surface);
  color: var(--fg-primary);
  border-color: var(--border-strong);
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .theme-toggle-icon {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0;
}
.theme-toggle .theme-toggle-icon-sun { display: none; }
body.dark .theme-toggle .theme-toggle-icon-moon { display: none; }
body.dark .theme-toggle .theme-toggle-icon-sun { display: inline-flex; }

/* ============ Buttons ============ */
.btn {
  font: 600 14px/1 var(--font-sans);
  padding: 11px 18px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  white-space: nowrap;
  font-family: inherit;
  appearance: none;
  background: none;
}
.btn-primary { background: var(--slate-500); color: #fff; }
.btn-primary:hover { background: var(--slate-600); text-decoration: none; }
body.dark .btn-primary { background: var(--mint-300); color: var(--navy-700); }
body.dark .btn-primary:hover { background: var(--mint-400); }
.btn-secondary { background: transparent; color: var(--fg-primary); border-color: var(--border-strong); }
.btn-secondary:hover { background: rgba(0,0,0,0.04); text-decoration: none; }
body.dark .btn-secondary:hover { background: rgba(255,255,255,0.06); }
.btn-lg { padding: 14px 22px; font-size: 15px; }
.btn-ghost { background: transparent; color: var(--fg-body); padding: 11px 8px; }
.btn-ghost:hover { color: var(--fg-primary); text-decoration: none; }

/* ============ Hero ============ */
.hero {
  position: relative; overflow: hidden;
  padding: 88px 0 64px;
}
.hero-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 480px at 80% 0%, rgba(168,213,213,0.28), transparent 60%),
    radial-gradient(700px 380px at 12% 30%, rgba(31,111,214,0.10), transparent 60%);
}
body.dark .hero-bg {
  background:
    radial-gradient(900px 480px at 80% 0%, rgba(168,213,213,0.10), transparent 60%),
    radial-gradient(700px 380px at 12% 30%, rgba(31,111,214,0.10), transparent 60%);
}
.hero .inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--mint-100); color: var(--slate-600);
  font: 600 12px/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--mint-200);
}
body.dark .eyebrow { background: rgba(168,213,213,0.10); color: var(--mint-300); border-color: rgba(168,213,213,0.22); }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--success-500); box-shadow: 0 0 0 4px rgba(31,154,79,0.18); }
.hero h1 {
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--fg-primary);
  margin: 22px 0 20px;
  font-weight: 700;
  text-wrap: balance;
}
.hero h1 .accent { color: var(--mint-600); }
body.dark .hero h1 .accent { color: var(--mint-300); }
.hero .lede {
  font-size: 18px; line-height: 28px;
  color: var(--fg-body);
  max-width: 540px;
  text-wrap: pretty;
}
.hero-cta { display: flex; gap: 12px; margin-top: 28px; align-items: center; flex-wrap: wrap; }
.hero .reassurance { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; color: var(--fg-muted); font-size: 13px; }
.cta-trial-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--fg-muted);
}
.cta-trial-note--light { color: rgba(255,255,255,0.65); margin-top: 16px; position: relative; }
.hero .reassurance span { display: inline-flex; align-items: center; gap: 6px; }
.hero .reassurance svg { width: 14px; height: 14px; stroke: var(--success-500); }

/* ============ Hero visual — animated outreach card ============ */
.hero-visual {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(160deg, #F1F8F8 0%, #E8F1FB 100%);
  border: 1px solid var(--border-default);
  padding: 28px;
  box-shadow: var(--shadow-lg);
  min-height: 460px;
}
body.dark .hero-visual { background: linear-gradient(160deg, #142C2D 0%, #102031 100%); }

.hv-stack { display: flex; flex-direction: column; gap: 10px; position: relative; padding-top: 8px; }

/* Mock app chrome + queue title */
.hv-header {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 10px 12px 12px;
  backdrop-filter: blur(6px);
}
body.dark .hv-header { background: rgba(27, 49, 50, 0.85); }
.hv-chrome { display: flex; gap: 5px; margin-bottom: 8px; }
.hv-chrome-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--border-strong); opacity: 0.55;
}
.hv-chrome-dot:nth-child(1) { background: #F87171; opacity: 0.85; }
.hv-chrome-dot:nth-child(2) { background: #FBBF24; opacity: 0.85; }
.hv-chrome-dot:nth-child(3) { background: #34D399; opacity: 0.85; }
.hv-header-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hv-queue-title {
  font: 600 12px/1.2 var(--font-sans);
  color: var(--fg-primary);
  letter-spacing: 0.01em;
}

/* Daily progress */
.hv-progress {
  display: flex; align-items: center; gap: 10px;
  padding: 0 2px 4px;
}
.hv-progress-track {
  flex: 1; height: 4px; border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
body.dark .hv-progress-track { background: rgba(255, 255, 255, 0.1); }
.hv-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--mint-500), var(--mint-300));
  transition: width 0.5s ease;
}
.hv-progress-label {
  font: 500 11px/1 var(--font-sans);
  color: var(--fg-muted);
  white-space: nowrap;
}

.hv-card {
  background: #fff; border-radius: 12px; padding: 16px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-default);
  display: flex; gap: 12px; align-items: flex-start;
  transition: transform 0.45s ease, opacity 0.45s ease, filter 0.45s ease, box-shadow 0.45s ease;
}
body.dark .hv-card { background: #1B3132; }
.hv-card-main { flex: 1; min-width: 0; }
.hv-avatar {
  width: 40px; height: 40px; border-radius: 999px; flex: 0 0 40px;
  background: linear-gradient(135deg, var(--mint-300), var(--info-500));
  object-fit: cover; object-position: center top;
  display: block;
  border: 1px solid var(--border-default);
}
.hv-name { font: 600 14px/1 var(--font-sans); color: var(--fg-primary); }
.hv-role { font: 400 12px/1 var(--font-sans); color: var(--fg-muted); margin-top: 4px; }
.hv-body {
  font: 400 13px/19px var(--font-sans); color: var(--fg-body); margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  animation: hv-fade-in 0.4s ease;
}
.hv-meta { margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.hv-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--ai-50); color: var(--ai-500);
  border: 1px solid var(--ai-100);
  font: 600 10px/1 var(--font-sans);
  padding: 3px 8px; border-radius: 999px;
}
.hv-pill svg { width: 12px; height: 12px; }

.hv-actions {
  display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
.hv-btn {
  font: 600 11px/1 var(--font-sans);
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: default;
  pointer-events: none;
}
.hv-btn-primary {
  background: var(--mint-600);
  color: #fff;
  border-color: var(--mint-600);
}
body.dark .hv-btn-primary { background: var(--mint-300); color: var(--navy-700); border-color: var(--mint-300); }
.hv-btn-ghost {
  background: transparent;
  color: var(--fg-body);
  border-color: var(--border-strong);
}
body.dark .hv-btn-ghost { color: var(--fg-muted); }

.hv-stack .hv-card.preview {
  transform: translateY(0) scale(1.02);
  opacity: 1;
  filter: none;
  z-index: 2;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
  animation: hv-rise 6s ease-in-out infinite;
}
.hv-stack .hv-card.queued1 {
  transform: translateX(12px) scale(0.98);
  opacity: 0.72;
  filter: blur(0.4px);
}
.hv-stack .hv-card.queued2 {
  transform: translateX(22px) scale(0.96);
  opacity: 0.48;
  filter: blur(0.8px);
}

.hv-flow {
  position: absolute; right: -8px; top: 16px; bottom: 16px; width: 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-around;
  pointer-events: none;
}
.hv-step {
  background: #fff; border: 1px solid var(--border-default); border-radius: 10px;
  padding: 8px 10px; font: 600 11px/1 var(--font-sans); color: var(--fg-primary);
  box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
body.dark .hv-step { background: #1B3132; }
.hv-step .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--success-500); }

@keyframes hv-rise {
  0%, 100% { transform: translateY(0) scale(1.02); }
  50% { transform: translateY(-4px) scale(1.02); }
}
@keyframes hv-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Savings badge — top-right of stack */
.hv-callout {
  position: absolute; top: -16px; right: -12px;
  background: var(--navy-600); color: #fff;
  border-radius: 999px;
  padding: 12px 18px;
  font: 600 14px/1.25 var(--font-sans);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px;
  min-width: 220px;
  z-index: 3;
  white-space: nowrap;
}
body.dark .hv-callout { background: var(--mint-300); color: var(--navy-700); }
.hv-callout .num { font-size: 22px; line-height: 1; }

@media (max-width: 960px) {
  .hero-visual { min-height: auto; padding: 22px 20px 24px; }
  .hv-stack .hv-card.queued1,
  .hv-stack .hv-card.queued2 { display: none; }
  .hv-stack .hv-card.preview {
    transform: none; animation: none;
    box-shadow: var(--shadow-md);
  }
  .hv-callout {
    top: auto; bottom: -16px; right: 12px; left: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hv-stack .hv-card.preview { animation: none; }
  .hv-body { animation: none; }
  .hv-card { transition: none; }
}

/* ============ Logo marquee ============ */
.logos { padding: 48px 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.logos .label { text-align: center; color: var(--fg-muted); font: 500 12px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 24px; }
.logos .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logos .marquee-track { display: flex; width: max-content; animation: logos-scroll 36s linear infinite; will-change: transform; }
.logos .marquee-group { display: flex; align-items: center; gap: clamp(32px, 5vw, 64px); flex-shrink: 0; padding-right: clamp(32px, 5vw, 64px); }
.logos .logo { flex-shrink: 0; display: flex; align-items: center; opacity: 0.75; transition: opacity var(--dur-base); }
.logos .logo:hover { opacity: 1; }
.logos .logo img { height: 28px; width: auto; max-width: 160px; object-fit: contain; display: block; }
body.dark .logos .logo img { filter: brightness(0) invert(1); }
body.dark .logos .logo img.logo-img--native-dark { filter: none; }
body.dark .logos .logo { opacity: 0.88; }
body.dark .logos .logo:hover { opacity: 1; }
@keyframes logos-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logos .marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .logos .marquee-track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; gap: 32px; }
  .logos .marquee-group[aria-hidden="true"] { display: none; }
  .logos .marquee-group { padding-right: 0; justify-content: center; flex-wrap: wrap; gap: 32px; }
}

/* ============ Section heads ============ */
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.sec-head .kicker { color: var(--mint-600); font: 600 13px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; }
body.dark .sec-head .kicker { color: var(--mint-300); }
.sec-head h2 {
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.1; letter-spacing: -0.02em;
  margin: 12px 0 14px;
  color: var(--fg-primary);
  text-wrap: balance;
}
.sec-head p { font-size: 17px; line-height: 26px; color: var(--fg-body); text-wrap: pretty; }

/* ============ Features grid ============ */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 28px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--mint-300); }
.feature .icon-wrap {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--mint-100); color: var(--slate-500);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
body.dark .feature .icon-wrap { background: rgba(168,213,213,0.12); color: var(--mint-300); }
.feature h3 { font-size: 18px; line-height: 24px; margin-bottom: 10px; }
.feature p { font-size: 15px; line-height: 22px; color: var(--fg-body); }

/* ============ How it works (3 steps) ============ */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.how-step {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 28px;
  position: relative;
  min-height: 100%;
}
.how-num {
  position: absolute; top: -20px; left: 24px;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--slate-500); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 16px/1 var(--font-sans);
  box-shadow: var(--shadow-md);
}
body.dark .how-num { background: var(--mint-300); color: var(--navy-700); }
.how-step h3 {
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 19px;
  line-height: 1.25;
  min-height: 2.5em;
}
.how-step p {
  flex: 1 1 auto;
  margin: 0;
  color: var(--fg-body);
  font-size: 15px;
  line-height: 22px;
}
.how-step .visual {
  flex-shrink: 0;
  margin-top: 20px;
  height: 112px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--mint-50, #f4faf9), var(--info-50, #eef5fc));
  border: 1px solid var(--border-default);
  padding: 10px 12px;
  position: relative;
  overflow: hidden;
}
.how-step .visual svg {
  display: block;
  width: 100%;
  height: 100%;
}
.how-step .visual .hv-text { fill: #1B2F4A; }
.how-step .visual .hv-sub { fill: #64748B; }
body.dark .how-step .visual { background: linear-gradient(145deg, rgba(168,213,213,0.10), rgba(31,111,214,0.08)); }
body.dark .how-step .visual .hv-panel { fill: rgba(15, 28, 45, 0.92); stroke: rgba(168, 213, 213, 0.18); }
body.dark .how-step .visual .hv-muted { fill: rgba(168, 213, 213, 0.35); }
body.dark .how-step .visual .hv-line { fill: rgba(168, 213, 213, 0.22); }
body.dark .how-step .visual .hv-text { fill: #e8f4f4; }
body.dark .how-step .visual .hv-sub { fill: rgba(168, 213, 213, 0.65); }

/* Time-saved callout */
.time-saved {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  overflow: hidden;
}
.ts-side { padding: 36px 40px; }
.ts-side h3 { font-size: 28px; line-height: 34px; letter-spacing: -0.02em; margin-bottom: 8px; }
.ts-side .stat { font: 700 56px/1 var(--font-sans); color: var(--mint-600); letter-spacing: -0.03em; }
body.dark .ts-side .stat { color: var(--mint-300); }
.ts-side .stat-lbl { font: 500 14px/1 var(--font-sans); color: var(--fg-muted); margin-top: 8px; }
.ts-side.right { background: linear-gradient(160deg, #F1F8F8, #E8F1FB); border-left: 1px solid var(--border-default); }
body.dark .ts-side.right { background: linear-gradient(160deg, #142C2D, #102031); }
.ts-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--border-default); font-size: 14px; }
.ts-row:last-child { border-bottom: none; }
.ts-row .label { flex: 1; color: var(--fg-body); }
.ts-row .before { color: var(--fg-muted); text-decoration: line-through; }
.ts-row .after { color: var(--success-600); font-weight: 600; }

/* ============ Pricing ============ */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1080px; margin: 0 auto; }
.plan {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.plan.featured { border-color: var(--slate-500); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
body.dark .plan.featured { border-color: var(--mint-300); }
.plan .ribbon {
  position: absolute; top: -12px; right: 24px;
  background: var(--slate-500); color: #fff;
  font: 600 11px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
body.dark .plan.featured .ribbon { background: var(--mint-300); color: var(--navy-700); }
.plan h3 { font-size: 18px; margin-bottom: 6px; }
.plan .pdesc { font-size: 13px; color: var(--fg-muted); margin-bottom: 18px; min-height: 36px; }
.plan .price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.plan .price .num { font: 700 44px/1 var(--font-sans); color: var(--fg-primary); letter-spacing: -0.02em; }
.plan .price .per { color: var(--fg-muted); font-size: 14px; }
.plan .price-daily { font-size: 13px; color: var(--fg-muted); margin-bottom: 18px; }
.plan ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 22px; color: var(--fg-body); }
.plan li svg { width: 16px; height: 16px; stroke: var(--success-500); flex: 0 0 16px; margin-top: 3px; }
.plan .btn { width: 100%; justify-content: center; }

/* ============ FAQ ============ */
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 18px 22px;
  cursor: pointer;
  transition: background var(--dur-base);
}
.faq-item:hover { background: var(--mint-50); }
body.dark .faq-item:hover { background: rgba(168,213,213,0.06); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 600 16px/1.4 var(--font-sans); color: var(--fg-primary); }
.faq-q .chev { transition: transform 0.4s var(--ease-out); flex: 0 0 16px; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-out);
}
.faq-item.open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a {
  overflow: hidden;
  min-height: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--fg-body);
  padding-top: 0;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out), padding-top 0.4s var(--ease-out);
}
.faq-item.open .faq-a { padding-top: 12px; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .faq-a-wrap,
  .faq-a,
  .faq-q .chev { transition: none; }
  .faq-item.open .faq-a { opacity: 1; }
}

/* ============ Final CTA ============ */
.final-cta {
  background: var(--navy-600);
  color: #fff;
  border-radius: 24px;
  padding: 64px;
  text-align: center;
  position: relative; overflow: hidden;
}
body.dark .final-cta { background: linear-gradient(135deg, #142C2D, #1F3A3B); border: 1px solid var(--mint-600); }
.final-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(600px 320px at 80% 20%, rgba(168,213,213,0.18), transparent 60%);
  pointer-events: none;
}
.final-cta h2 { font-size: clamp(32px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin-bottom: 14px; position: relative; }
.final-cta p { color: rgba(255,255,255,0.7); font-size: 18px; max-width: 560px; margin: 0 auto 28px; position: relative; }
.final-cta .btn-primary { background: var(--mint-300); color: var(--navy-700); }
.final-cta .btn-primary:hover { background: var(--mint-400); }
.final-cta .btn-row { display: inline-flex; gap: 12px; position: relative; flex-wrap: wrap; justify-content: center; }
.final-cta .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.3); }
.final-cta .btn-secondary:hover { background: rgba(255,255,255,0.08); }

/* ============ Video modal ============ */
.video-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
}
.video-modal-panel {
  position: relative;
  width: min(920px, 100%);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-lg);
}
.video-modal-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--fg-primary);
  cursor: pointer;
}
.video-modal-close svg { width: 18px; height: 18px; }
.video-modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.video-modal-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* ============ Footer ============ */
.site-footer { padding: 56px 0 40px; border-top: 1px solid var(--border-default); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; align-items: start; }
.foot-about { grid-column: 1; grid-row: 1 / span 2; }
.foot-funding {
  grid-column: 2 / -1;
  grid-row: 2;
  justify-self: end;
  align-self: end;
  display: inline-flex;
  padding: 16px 22px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.foot-funding:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.foot-funding img { display: block; width: 340px; max-width: 100%; height: auto; }
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.foot-brand img { height: 26px; }
body.dark .foot-brand img { filter: brightness(0) invert(1); }
.foot-brand .name { font: 700 17px/1 var(--font-sans); color: var(--fg-primary); }
.foot-tag { font-size: 14px; color: var(--fg-muted); max-width: 320px; line-height: 22px; }
.foot-col h5 { font: 600 13px/1 var(--font-sans); color: var(--fg-primary); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
.foot-col a { display: block; font: 400 14px/1 var(--font-sans); color: var(--fg-muted); padding: 6px 0; }
.foot-col a:hover { color: var(--fg-primary); text-decoration: none; }
.foot-bottom {
  border-top: 1px solid var(--border-default);
  margin-top: 40px; padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--fg-muted);
}

/* ============ Tabs / Demo ============ */
.demo-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-lg);
}
.demo-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-app); border-radius: 999px; margin-bottom: 20px; border: 1px solid var(--border-default); }
.demo-tab { padding: 8px 16px; font: 600 13px/1 var(--font-sans); color: var(--fg-muted); border-radius: 999px; cursor: pointer; transition: all var(--dur-base); }
.demo-tab.active { background: var(--slate-500); color: #fff; }
body.dark .demo-tab.active { background: var(--mint-300); color: var(--navy-700); }
.demo-frame {
  background: linear-gradient(180deg, #F6F8F8, #FFF);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 28px;
  min-height: 360px;
}
body.dark .demo-frame { background: linear-gradient(180deg, #102021, #142C2D); }

/* ============ Comparison block ============ */
.compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  max-width: 940px; margin: 0 auto;
}
.compare-col {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: 14px; padding: 28px;
}
.compare-col.bad { background: linear-gradient(180deg, #FBF1F1, transparent 60%); }
body.dark .compare-col.bad { background: linear-gradient(180deg, rgba(200,49,46,0.08), transparent 60%); }
.compare-col.good { background: linear-gradient(180deg, #F1F8F8, transparent 60%); border-color: var(--mint-300); }
body.dark .compare-col.good { background: linear-gradient(180deg, rgba(168,213,213,0.10), transparent 60%); border-color: var(--mint-600); }
.compare h4 { font-size: 17px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.compare ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.compare li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 22px; }
.compare li svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px; }
.compare .bad svg { stroke: var(--danger-500); }
.compare .good svg { stroke: var(--success-500); }

/* ============ Animations ============ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fadeInUp 0.6s var(--ease-out) backwards; }
.reveal.d1 { animation-delay: 0.05s; }
.reveal.d2 { animation-delay: 0.12s; }
.reveal.d3 { animation-delay: 0.18s; }
.reveal.d4 { animation-delay: 0.26s; }

/* Scroll reveal — sections below hero */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: var(--sr-delay, 0s);
}
.scroll-reveal.sr-left { transform: translateX(-36px); }
.scroll-reveal.sr-right { transform: translateX(36px); }
.scroll-reveal.sr-scale { transform: translateY(20px) scale(0.97); }
.scroll-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============ Responsive ============ */
@media (max-width: 960px) {
  .hero .inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { margin-bottom: 20px; }
  .feature-grid { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr; }
  .time-saved { grid-template-columns: 1fr; }
  .ts-side.right { border-left: none; border-top: 1px solid var(--border-default); }
  .compare { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot-about { grid-column: 1 / -1; grid-row: auto; }
  .foot-funding { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  .site-header nav { display: none; }
  .final-cta { padding: 40px 24px; }
  .section { padding: 64px 0; }
}

@media (max-width: 640px) {
  .site-header .cta-row { gap: 8px; }
  .site-header .login { display: none; }
  .lang-switch button,
  .lang-switch a { padding: 6px 8px; min-width: 26px; }
}

@media (max-width: 380px) {
  .site-header .brand img { height: 24px; }
  .site-header .btn { padding: 9px 12px; font-size: 13px; }
}

/* ============ Legal / subpages ============ */
.legal-page { padding: 56px 0 96px; }

.legal-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-default);
}
.legal-back {
  color: var(--fg-muted);
  font-size: 14px;
  text-decoration: none;
}
.legal-back:hover { color: var(--fg-primary); text-decoration: none; }

.prose {
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.7;
  color: var(--fg-body);
}
.prose h1 {
  font-size: 36px;
  margin: 0 0 24px;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
}
.prose h2 {
  font-size: 20px;
  margin: 40px 0 12px;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
}
.prose h3 {
  font-size: 16px;
  margin: 24px 0 8px;
  letter-spacing: -0.005em;
  color: var(--fg-primary);
}
.prose p,
.prose ul,
.prose ol {
  margin: 0 0 16px;
}
.prose ul,
.prose ol {
  padding-left: 24px;
}
.prose li { margin: 6px 0; }
.prose a {
  color: var(--slate-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.dark .prose a { color: var(--mint-300); }
.prose a.btn { text-decoration: none; }
.prose a.btn-primary { color: #fff; }
body.dark .prose a.btn-primary { color: var(--navy-700); }
.prose strong { color: var(--fg-primary); }
.prose-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin-bottom: 24px;
}
.prose-notice,
.prose-note {
  font-size: 14px;
  color: var(--fg-muted);
  padding: 12px 16px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: 10px;
}
.prose-stamp {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--border-default);
  color: var(--fg-muted);
  font-size: 13px;
}

/* Blog prose: section accents + callouts */
.blog-body h2 {
  border-left: 3px solid var(--mint-300);
  padding-left: 12px;
}
.prose-table-wrap {
  margin: 0 0 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
body.dark .prose-table-wrap {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.prose-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
}
.prose-table th,
.prose-table td {
  border-bottom: 1px solid var(--border-strong);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
.prose-table th {
  background: var(--bg-surface-2);
  font-weight: 600;
  color: var(--fg-primary);
  border-bottom: 2px solid var(--mint-300);
  white-space: nowrap;
}
.prose-table tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.02);
}
body.dark .prose-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}
.prose-table tbody tr:last-child td {
  border-bottom: 0;
}
.prose-callout {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-body);
  padding: 14px 16px 14px 44px;
  margin: 0 0 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  position: relative;
}
.prose-callout::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 16px;
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.85;
}
.prose-callout-tip::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314b8a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}
.prose-callout-disclosure::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}
body.dark .prose-callout-disclosure::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8D5D5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}
.prose-callout strong { color: var(--fg-primary); }

/* Legacy prose tables (legal pages) */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 14px;
}
.prose th,
.prose td {
  border: 1px solid var(--border-default);
  padding: 10px 12px;
  text-align: left;
}
.prose th { background: var(--bg-surface-2); font-weight: 600; }

/* ============ Blog ============ */
.blog-page {
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.7;
  color: var(--fg-body);
}
.blog-page > h1 {
  font-size: 36px;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
}
.blog-index-header {
  margin-bottom: 8px;
}
.blog-index-header p {
  font-size: 16px;
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.6;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.blog-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.blog-card:hover { border-color: var(--slate-400); transform: translateY(-2px); }
.blog-card a {
  display: block;
  padding: 22px;
  text-decoration: none;
  color: inherit;
}
.blog-card-meta {
  display: block;
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.blog-card h2 {
  font-size: 18px;
  margin: 0 0 10px;
  color: var(--fg-primary);
  letter-spacing: -0.01em;
}
.blog-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.blog-card-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-surface-2);
  color: var(--slate-600);
  border: 1px solid var(--border-default);
}
body.dark .blog-card-icon {
  color: var(--mint-300);
  background: rgba(168, 213, 213, 0.1);
}
.blog-card p {
  font-size: 14px;
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.5;
}
.blog-meta {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0 0 8px;
}
.blog-body h1:first-child { display: none; }

.blog-hero {
  position: relative;
  margin: 0 0 28px;
  padding: 24px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.blog-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 280px at 90% 0%, rgba(168, 213, 213, 0.22), transparent 55%),
    radial-gradient(400px 200px at 0% 100%, rgba(99, 102, 241, 0.08), transparent 50%);
}
body.dark .blog-hero-bg {
  background:
    radial-gradient(600px 280px at 90% 0%, rgba(168, 213, 213, 0.14), transparent 55%),
    radial-gradient(400px 200px at 0% 100%, rgba(168, 213, 213, 0.06), transparent 50%);
}
.blog-hero-inner {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.blog-hero-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(168, 213, 213, 0.15);
  color: var(--slate-600);
  border: 1px solid rgba(168, 213, 213, 0.3);
}
body.dark .blog-hero-icon {
  color: var(--mint-300);
  background: rgba(168, 213, 213, 0.12);
}
.blog-hero-text { min-width: 0; }
.blog-hero-text h1 {
  font-size: 32px;
  margin: 8px 0 0;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
  line-height: 1.2;
}
.blog-hero-safety .blog-hero-icon { color: var(--slate-600); }
.blog-hero-outreach .blog-hero-icon { color: #14b8a6; }
.blog-hero-tools .blog-hero-icon { color: #6366f1; }
.blog-hero-dach .blog-hero-icon { color: #0ea5e9; }
.blog-hero-features .blog-hero-icon { color: #f59e0b; }
body.dark .blog-hero-safety .blog-hero-icon { color: var(--mint-300); }

.blog-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0 0 16px;
}
.blog-breadcrumb a {
  color: var(--fg-muted);
  text-decoration: none;
}
.blog-breadcrumb a:hover { color: var(--fg-primary); text-decoration: none; }
.blog-breadcrumb-sep { opacity: 0.5; }
.blog-breadcrumb-current {
  color: var(--fg-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.blog-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  margin-right: 8px;
  background: var(--bg-surface-2);
  color: var(--fg-muted);
  border: 1px solid var(--border-default);
}
.blog-chip-safety { color: var(--slate-600); border-color: rgba(100,116,139,0.3); }
.blog-chip-outreach { color: var(--mint-500, #14b8a6); border-color: rgba(20,184,166,0.3); }
.blog-chip-tools { color: #6366f1; border-color: rgba(99,102,241,0.3); }
.blog-chip-dach { color: #0ea5e9; border-color: rgba(14,165,233,0.3); }
.blog-chip-features { color: #f59e0b; border-color: rgba(245,158,11,0.3); }
body.dark .blog-chip-safety { color: var(--mint-300); }

.blog-toc {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 28px;
  max-width: 720px;
}
.blog-toc-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-primary);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.blog-toc ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
}
.blog-toc li { margin: 4px 0; }
.blog-toc a {
  color: var(--fg-body);
  text-decoration: none;
}
.blog-toc a:hover { color: var(--slate-600); text-decoration: underline; }
body.dark .blog-toc a:hover { color: var(--mint-300); }

.blog-cta-box {
  max-width: 720px;
  margin: 48px auto 0;
  padding: 28px 32px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  border-left: 3px solid var(--mint-300);
}
.blog-cta-box h2 {
  font-size: 20px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
}
.blog-cta-box p {
  font-size: 15px;
  color: var(--fg-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}
.blog-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.blog-cta-box .btn {
  text-decoration: none;
}
.blog-cta-box .btn-primary {
  background: var(--slate-500);
  color: #fff;
}
.blog-cta-box .btn-primary:hover {
  background: var(--slate-600);
  text-decoration: none;
}
.blog-cta-box .btn-secondary {
  background: transparent;
  color: var(--fg-primary);
  border-color: var(--border-strong);
  text-decoration: none;
}
.blog-cta-box .btn-secondary:hover {
  background: rgba(0, 0, 0, 0.04);
  text-decoration: none;
}
body.dark .blog-cta-box .btn-primary {
  background: var(--mint-300);
  color: var(--navy-700);
}
body.dark .blog-cta-box .btn-primary:hover {
  background: var(--mint-400);
  color: var(--navy-700);
}
body.dark .blog-cta-box .btn-secondary {
  color: var(--fg-primary);
  border-color: var(--border-strong);
}
body.dark .blog-cta-box .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
}

.blog-related {
  max-width: 720px;
  margin: 48px auto 0;
}
.blog-related > h2 {
  font-size: 18px;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
}
.blog-grid-compact { margin-top: 0; }
.blog-grid-compact .blog-card h3 {
  font-size: 16px;
  margin: 0 0 8px;
  color: var(--fg-primary);
}

.blog-featured {
  margin-top: 32px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.blog-featured-visual {
  position: relative;
  height: 80px;
  overflow: hidden;
}
.blog-featured-visual-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(168, 213, 213, 0.35), rgba(99, 102, 241, 0.12));
}
body.dark .blog-featured-visual-bg {
  background: linear-gradient(135deg, rgba(168, 213, 213, 0.2), rgba(20, 41, 42, 0.8));
}
.blog-featured-visual-icon {
  position: absolute;
  right: 24px;
  bottom: -16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--bg-surface);
  color: var(--mint-500, #14b8a6);
  border: 1px solid var(--border-default);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
body.dark .blog-featured-visual-icon {
  color: var(--mint-300);
  background: var(--bg-surface-2);
}
.blog-featured-safety .blog-featured-visual-bg {
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.2), rgba(168, 213, 213, 0.25));
}
.blog-featured-outreach .blog-featured-visual-bg {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.25), rgba(168, 213, 213, 0.15));
}
.blog-featured-tools .blog-featured-visual-bg {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 213, 213, 0.12));
}
.blog-featured:hover {
  border-color: var(--slate-400);
  transform: translateY(-2px);
}
.blog-featured a {
  display: block;
  padding: 32px;
  text-decoration: none;
  color: inherit;
}
.blog-featured-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mint-500, #14b8a6);
  margin-bottom: 10px;
}
body.dark .blog-featured-label { color: var(--mint-300); }
.blog-featured h2 {
  font-size: 26px;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
}
.blog-featured p {
  font-size: 16px;
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.6;
  max-width: 640px;
}
.blog-card .blog-chip { margin-bottom: 10px; }

.foot-legal-note {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.5;
  margin: 8px 0 0;
  max-width: 720px;
}

.contact-card,
.contact-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 24px;
  margin: 24px 0;
}
.contact-card h2,
.contact-panel > h2 {
  font-size: 16px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
}
.contact-card h2:not(:first-child) { margin-top: 20px; }
.prose .contact-panel > h2 {
  font-size: 20px;
  margin: 0 0 20px;
}

.contact-form {
  display: grid;
  gap: 16px;
}
.contact-form label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-primary);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--fg-primary);
  background: var(--bg-app);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  box-sizing: border-box;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--border-focus);
}
.contact-form-actions {
  display: flex;
  justify-content: flex-start;
  padding-top: 4px;
}
.contact-form-actions .btn {
  min-width: 140px;
  justify-content: center;
}

.contact-success {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--slate-500);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-primary);
}
body.dark .contact-success {
  border-left-color: var(--mint-300);
}

.contact-panel-note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-default);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-muted);
}
.contact-panel-note a {
  color: var(--slate-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.dark .contact-panel-note a { color: var(--mint-300); }

.loviz-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}
@media (max-width: 640px) {
  .loviz-card-grid { grid-template-columns: 1fr; }
}
.loviz-card {
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.loviz-card:hover {
  border-color: var(--mint-400);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  text-decoration: none;
}
body.dark .loviz-card:hover {
  border-color: var(--mint-600);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.loviz-card h3 {
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--fg-primary);
}
.loviz-card-tag {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  margin: 0 0 12px;
}
.loviz-card p:last-of-type {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-body);
  margin: 0 0 16px;
}
.loviz-card-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-600);
}
body.dark .loviz-card-link { color: var(--mint-300); }

/* ============ Stats dashboard (/stats/) ============ */
.stats-page-wrap {
  padding: 32px 0 80px;
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(168,213,213,0.22), transparent 55%),
    radial-gradient(700px 360px at 0% 20%, rgba(31,111,214,0.08), transparent 60%),
    var(--bg-app);
}
body.dark .stats-page-wrap {
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(168,213,213,0.08), transparent 55%),
    radial-gradient(700px 360px at 0% 20%, rgba(31,111,214,0.06), transparent 60%),
    var(--bg-app);
}
.stats-page { max-width: 1080px; margin: 0 auto; }

.stats-hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  margin-bottom: 28px; flex-wrap: wrap;
}
.stats-eyebrow {
  font: 600 11px/1 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mint-600); margin: 0 0 10px;
}
body.dark .stats-eyebrow { color: var(--mint-300); }
.stats-hero h1 {
  font: 700 36px/1.1 var(--font-sans); letter-spacing: -0.03em; color: var(--fg-primary); margin: 0 0 8px;
}
.stats-lede { font-size: 16px; line-height: 1.55; color: var(--fg-muted); margin: 0; max-width: 520px; }
.stats-back {
  font: 500 14px/1 var(--font-sans); color: var(--fg-muted); text-decoration: none;
  padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--bg-surface);
  white-space: nowrap; align-self: flex-start;
}
.stats-back:hover { color: var(--fg-primary); border-color: var(--mint-300); text-decoration: none; }

.stats-error {
  font-size: 14px; color: var(--danger-600); padding: 12px 16px;
  background: var(--danger-50); border: 1px solid var(--danger-100); border-radius: 12px; margin-bottom: 20px;
}
body.dark .stats-error { background: rgba(200,49,46,0.12); border-color: rgba(200,49,46,0.25); color: #f4a9a8; }

.stats-gate-card {
  max-width: 420px; margin: 0 auto 32px;
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 20px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.stats-gate-inner { padding: 32px 28px; }
.stats-gate-inner h2 { font: 700 22px/1.2 var(--font-sans); color: var(--fg-primary); margin: 0 0 6px; }
.stats-gate-inner > p { font-size: 14px; color: var(--fg-muted); margin: 0 0 20px; }
.stats-gate-form { display: grid; gap: 14px; }
.stats-gate-form label { font-size: 13px; font-weight: 600; color: var(--fg-primary); }
.stats-gate-form input {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--fg-primary);
  background: var(--bg-app); border: 1px solid var(--border-default); border-radius: 12px; box-sizing: border-box;
}
.stats-gate-form input:focus { outline: none; border-color: var(--mint-400); box-shadow: var(--shadow-focus); }
.stats-gate-form .btn { width: 100%; justify-content: center; margin-top: 4px; }

.stats-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 20px;
}
.stats-toolbar-label { font-size: 14px; color: var(--fg-muted); margin: 0; }
.stats-toolbar-label strong { color: var(--fg-primary); font-weight: 600; }
.stats-period {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 999px;
  box-shadow: var(--shadow-xs);
}
.stats-period-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: 600 13px/1 var(--font-sans); color: var(--fg-muted); padding: 9px 16px; border-radius: 999px;
  transition: background var(--dur-base), color var(--dur-base);
}
.stats-period-btn:hover { color: var(--fg-primary); }
.stats-period-btn.is-active { background: var(--slate-500); color: #fff; }
body.dark .stats-period-btn.is-active { background: var(--mint-300); color: var(--navy-700); }

.stats-loading {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--fg-muted); font-size: 15px; padding: 48px 0;
}
.stats-spinner {
  width: 22px; height: 22px; border-radius: 999px;
  border: 2px solid var(--border-default); border-top-color: var(--slate-500);
  animation: stats-spin 0.7s linear infinite;
}
body.dark .stats-spinner { border-top-color: var(--mint-300); }
@keyframes stats-spin { to { transform: rotate(360deg); } }

.stats-kpi-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px;
}
.stats-kpi-delta {
  font-size: 11px; font-weight: 600; margin-top: 6px; color: var(--fg-muted);
}
.stats-kpi-delta.is-up { color: var(--mint-600); }
.stats-kpi-delta.is-down { color: var(--danger-600); }
body.dark .stats-kpi-delta.is-up { color: var(--mint-300); }
body.dark .stats-kpi-delta.is-down { color: #f4a9a8; }
.stats-kpi {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 16px;
  padding: 20px; box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.stats-kpi:hover { border-color: var(--mint-300); box-shadow: var(--shadow-md); }
.stats-kpi-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px;
  background: var(--mint-100); color: var(--slate-600);
  display: flex; align-items: center; justify-content: center;
  font: 600 16px/1 var(--font-sans);
}
body.dark .stats-kpi-icon { background: rgba(168,213,213,0.12); color: var(--mint-300); }
.stats-kpi-body { min-width: 0; flex: 1; }
.stats-kpi-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--fg-muted); margin-bottom: 6px;
}
.stats-kpi-value {
  font: 700 28px/1.1 var(--font-sans); color: var(--fg-primary); letter-spacing: -0.03em;
}
.stats-kpi-sub { font-size: 12px; color: var(--fg-muted); margin-top: 6px; }

.stats-panels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.stats-panel {
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 16px;
  padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.stats-panel-wide { grid-column: 1 / -1; }
.stats-panel h2 {
  font: 600 15px/1.3 var(--font-sans); margin: 0 0 18px; color: var(--fg-primary);
  letter-spacing: -0.01em;
}

.stats-bars { display: flex; flex-direction: column; gap: 14px; }
.stats-bar-row { display: flex; flex-direction: column; gap: 6px; }
.stats-bar-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13px;
}
.stats-bar-label { color: var(--fg-body); font-weight: 500; }
.stats-bar-sub {
  display: block; font-size: 11px; font-weight: 500; color: var(--fg-muted); margin-top: 2px;
}
.stats-bar-value { color: var(--fg-muted); font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.stats-bar-track {
  height: 8px; border-radius: 999px; background: var(--gray-100); overflow: hidden;
}
body.dark .stats-bar-track { background: rgba(255,255,255,0.08); }
.stats-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--slate-500), var(--mint-400));
  min-width: 4px; transition: width 0.4s var(--ease-out);
}
body.dark .stats-bar-fill { background: linear-gradient(90deg, var(--mint-500), var(--mint-300)); }

.stats-empty {
  font-size: 14px; color: var(--fg-muted); margin: 0; padding: 8px 0;
  font-style: italic;
}

.stats-settings {
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 16px;
  padding: 18px 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.stats-optout-label {
  display: flex; align-items: center; gap: 10px;
  font: 600 14px/1.3 var(--font-sans); color: var(--fg-primary); cursor: pointer;
}
.stats-optout-label input {
  width: 16px; height: 16px; margin: 0; accent-color: var(--slate-500); cursor: pointer;
}
body.dark .stats-optout-label input { accent-color: var(--mint-300); }
.stats-optout-hint {
  font-size: 13px; color: var(--fg-muted); margin: 8px 0 14px 26px; line-height: 1.45;
}
.stats-optout-hint code {
  font: 600 12px/1 var(--font-mono, ui-monospace, monospace);
  padding: 2px 6px; border-radius: 6px; background: var(--gray-100); color: var(--fg-body);
}
body.dark .stats-optout-hint code { background: rgba(255,255,255,0.08); }
.stats-settings-actions { margin-left: 26px; }
.stats-purge-msg {
  font-size: 13px; color: var(--mint-600); margin: 10px 0 0 26px; line-height: 1.4;
}
body.dark .stats-purge-msg { color: var(--mint-300); }
.stats-purge-msg.is-error { color: var(--danger-600); }
body.dark .stats-purge-msg.is-error { color: #f4a9a8; }

.stats-utm-builder {
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 16px;
  padding: 22px 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.stats-utm-header h2 {
  font: 600 15px/1.3 var(--font-sans); margin: 0 0 6px; color: var(--fg-primary);
}
.stats-utm-header p { font-size: 13px; color: var(--fg-muted); margin: 0 0 18px; line-height: 1.45; }
.stats-utm-templates {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
}
.stats-utm-templates-label {
  font-size: 12px; font-weight: 600; color: var(--fg-muted); margin-right: 4px;
}
.stats-utm-template-btn,
.stats-utm-preset-btn {
  appearance: none; border: 1px solid var(--border-default); background: var(--bg-app);
  color: var(--fg-body); font: 600 12px/1 var(--font-sans); padding: 8px 14px; border-radius: 999px;
  cursor: pointer; transition: border-color var(--dur-base), background var(--dur-base), color var(--dur-base);
}
.stats-utm-template-btn:hover,
.stats-utm-preset-btn:hover { border-color: var(--mint-300); color: var(--fg-primary); background: var(--mint-100); }
body.dark .stats-utm-template-btn:hover,
body.dark .stats-utm-preset-btn:hover { background: rgba(168,213,213,0.12); }
.stats-utm-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 18px;
}
.stats-utm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stats-utm-field-wide { grid-column: 1 / -1; }
.stats-utm-field label,
.stats-utm-preview-block > label {
  font-size: 12px; font-weight: 600; color: var(--fg-primary); line-height: 1.3;
}
.stats-utm-param {
  font-weight: 500; color: var(--fg-muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px;
}
.stats-utm-field input,
.stats-utm-field select,
.stats-utm-save input,
.stats-utm-preview {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--fg-primary);
  background: var(--bg-app); border: 1px solid var(--border-default); border-radius: 10px; box-sizing: border-box;
}
.stats-utm-field input:focus,
.stats-utm-field select:focus,
.stats-utm-save input:focus,
.stats-utm-preview:focus { outline: none; border-color: var(--mint-400); box-shadow: var(--shadow-focus); }
.stats-utm-optional { font-weight: 500; color: var(--fg-muted); font-size: 11px; }
.stats-utm-preview-block { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.stats-utm-preview-row { display: flex; gap: 10px; align-items: stretch; }
.stats-utm-preview {
  flex: 1; min-width: 0; font-size: 12px; font-family: var(--font-mono, ui-monospace, monospace);
  background: var(--gray-100);
}
body.dark .stats-utm-preview { background: rgba(255,255,255,0.06); }
.stats-utm-preview-row .btn { flex-shrink: 0; align-self: stretch; white-space: nowrap; }
.stats-utm-save {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.stats-utm-save input { flex: 1; min-width: 180px; }
.stats-utm-presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stats-utm-presets .stats-empty { margin: 0; width: 100%; }

.stats-line-chart { width: 100%; min-height: 200px; }
.stats-line-svg { display: block; width: 100%; height: auto; overflow: visible; }
.stats-line-grid { stroke: var(--border-default); stroke-width: 1; stroke-dasharray: 4 4; }
body.dark .stats-line-grid { stroke: rgba(255,255,255,0.12); }
.stats-line-area {
  fill: url(#statsLineGrad);
  fill: rgba(168, 213, 213, 0.22);
}
body.dark .stats-line-area { fill: rgba(168, 213, 213, 0.14); }
.stats-line-path {
  fill: none; stroke: var(--slate-500); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
body.dark .stats-line-path { stroke: var(--mint-300); }
.stats-line-dot { fill: var(--slate-500); stroke: var(--bg-surface); stroke-width: 2; }
body.dark .stats-line-dot { fill: var(--mint-300); stroke: var(--bg-surface); }
.stats-line-axis-x,
.stats-line-axis-y { fill: var(--fg-muted); font-size: 11px; font-family: var(--font-sans); font-weight: 600; }
.stats-line-axis-y { font-size: 10px; font-variant-numeric: tabular-nums; }

@media (max-width: 960px) {
  .stats-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-utm-form { grid-template-columns: 1fr; }
  .stats-utm-field-wide { grid-column: auto; }
  .stats-panels { grid-template-columns: 1fr; }
  .stats-panel-wide { grid-column: auto; }
}
@media (max-width: 560px) {
  .stats-hero h1 { font-size: 28px; }
  .stats-kpi-grid { grid-template-columns: 1fr; }
  .stats-toolbar { flex-direction: column; align-items: stretch; }
  .stats-period { justify-content: center; }
  .stats-utm-preview-row { flex-direction: column; }
  .stats-utm-preview-row .btn { width: 100%; justify-content: center; }
}