@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/marketing-assets/inter-cyrillic-ext.ca157063339ac4ad418f214f3abfed119b0798ab4d377386ce5c9e5a7a435ebd.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/marketing-assets/inter-cyrillic.71d5ee93cc1e9f1d520a3a8b66456de18c7879d8df09d57fcd2eaff75fef0075.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/marketing-assets/inter-latin-ext.34b9c504cab7a73e37b746343a449132e56cf7b5481af2cb81dc74dcff25c956.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/marketing-assets/inter-latin.3100e775e8616cd2611beecfa23a4263d7037586789b43f035236a2e6fbd4c62.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;
}/* ==========================================================
   BitStat — ЄДИНЕ ДЖЕРЕЛО ПРАВДИ
   ----------------------------------------------------------
   Згенеровано автоматично. Правити тут — і ніде більше.
   Псевдоніми, позначені «→», тримають дубльовані значення.
   Розкоментувати злиття = звести дубль до канонічного токена.
   ========================================================== */[data-site-refresh-content] {

  /* --- Поверхні --- — фони сторінки й карток */
  --surface-base:          #09090b;  /* фон сторінки */
  --surface-base-alt:      #0a0a0a;  /* → --surface-base, той самий чорний, інша нотація */
  --surface-black:         #080808;  /* → --surface-base, ще темніший чорний */
  --surface-tint:          #080c0a;  /* → --surface-base, чорний із зеленим підтоном */
  --surface-raised:        #111113;  /* секція-підкладка */
  --surface-raised-alt:    #101010;  /* → --surface-raised, дубль */
  --surface-raised-alt2:   #101011;  /* → --surface-raised, дубль */
  --surface-raised-alt3:   #111111;  /* → --surface-raised, дубль */
  --surface-card:          #18181b;  /* картка */
  --surface-card-alt:      #1a1a1f;  /* → --surface-card, дубль */
  --surface-card-alt2:     #1f2225;  /* → --surface-card, дубль, ужито 9 разів */
  --surface-card-hover:    #222228;  /* картка під курсором */

  /* --- Рамки --- — суцільні та прозорі */
  --border:                #27272a;  /* основна межа */
  --border-light:          #333338;  /* світліша межа */
  --border-gray:           #333333;  /* → --border-light, дубль із чистої сірої шкали */
  --border-a05:            rgba(255,255,255,.05);  /* → --border-a08, майже невидима */
  --border-a08:            rgba(255,255,255,.08);  /* ледь помітна */
  --border-a09:            rgba(255,255,255,.09);  /* → --border-a08, дубль */
  --border-a10:            rgba(255,255,255,.10);  /* → --border-a08, дубль */
  --border-a12:            rgba(255,255,255,.12);  /* → --border-a08, дубль */

  /* --- Текст --- — три рівні + чиста сіра шкала, що дублює їх */
  --text-primary:          #fafafa;  /* заголовки */
  --text-on-accent:        #ffffff;  /* текст на кольоровому тлі */
  --text-secondary:        #e4e4e7;  /* основний текст */
  --text-secondary-alt:    #e4e4e7;  /* → --text-secondary, дубль */
  --text-muted:            #c7c7cc;  /* підписи */
  --text-muted-alt:        #c7c7cc;  /* → --text-muted, дубль */
  --gray-cc:               #e4e4e7;  /* → --text-secondary, паралельна сіра шкала */
  --gray-aa:               #e4e4e7;  /* → --text-secondary, паралельна сіра шкала */
  --gray-88:               #c7c7cc;  /* → --text-muted, паралельна сіра шкала */
  --gray-55:               #c7c7cc;  /* → --text-muted, паралельна сіра шкала */
  --gray-44:               #444444;  /* → --border-light, паралельна сіра шкала */
  --gray-22:               #222222;  /* → --surface-card, паралельна сіра шкала */

  /* --- Акцент --- — одинадцять зелених на одній сторінці */
  --accent:                #2d694c;  /* бренд */
  --accent-deep:           #245a3f;  /* темний край градієнта */
  --accent-mid:            #3a8a63;  /* світлий край градієнта */
  --accent-bright:         #3cd97a;  /* підсвітка, живі дані */
  --accent-stray:          #2ecc71;  /* → --accent-bright, з неоголошеної --accent-green */
  --accent-neon:           #00ff41;  /* → --accent-bright, неоновий, випадає з палітри */
  --accent-pale:           #9fe4c0;  /* світла заливка */
  --accent-pale2:          #a9dfc6;  /* → --accent-pale, дубль */

  /* --- Статуси --- — прибуток, збиток, попередження */
  --status-positive:       #2c8056;  /* прибуток */
  --status-positive-alt:   #2f8058;  /* → --status-positive, відрізняється на 3 цифри */
  --status-negative:       #a74846;  /* збиток */
  --status-negative-alt:   #ff4757;  /* → --status-negative, яскравіший дубль */
  --status-warning:        #f59e0b;  /* попередження */
  --status-info:           #3b82f6;  /* інформація */
  --status-info-alt:       #2563eb;  /* → --status-info, дубль */

  /* --- Декоративні --- — вживаються поодиноко */
  --accent-purple:         #a855f7;
  --accent-teal:           #14b8a6;
  --accent-rose:           #f43f5e;
  --tint-blue:             #b8c9e8;
  --tint-amber:            #e5c98c;
  --tint-rose:             #e8a2ae;

  /* --- Радіуси --- дев'ять значень, з них 14/15/16 нерозрізнимі */
  --r-8:                   8px;
  --r-10:                  10px;  /* → --r-12 */
  --r-12:                  12px;
  --r-14:                  14px;  /* → --r-16 */
  --r-15:                  15px;  /* → --r-16 */
  --r-16:                  16px;
  --r-20:                  20px;  /* → --r-24 */
  --r-24:                  24px;
  --r-full:                100px;
  --r-circle:              50%;

  /* --- Кеглі --- дрейф 11/13/15/17 підганявся на око */
  --fs-11:                 11px;  /* → --fs-12 */
  --fs-12:                 12px;
  --fs-13:                 13px;  /* → --fs-14 */
  --fs-14:                 14px;
  --fs-15:                 15px;  /* → --fs-16 */
  --fs-16:                 16px;
  --fs-17:                 17px;  /* → --fs-18 */
  --fs-18:                 18px;
  --fs-20:                 20px;
  --fs-24:                 24px;
  --fs-32:                 32px;
  --fs-40:                 40px;
  --fs-48:                 48px;
  --fs-72:                 72px;

  /* --- Відступи --- шкала 4px; раніше в проєкті була відсутня */
  --sp-1:                  4px;
  --sp-2:                  8px;
  --sp-3:                  12px;
  --sp-4:                  16px;
  --sp-5:                  20px;
  --sp-6:                  24px;
  --sp-7:                  28px;
  --sp-8:                  32px;
  --sp-10:                 40px;
  --sp-12:                 48px;
  --sp-14:                 56px;
  --sp-15:                 60px;
  --sp-16:                 64px;
  --sp-20:                 80px;
  --sp-25:                 100px;
  --sp-30:                 120px;

  /* --- Каркас --- */
  --container:            1120px;
  --nav-height:           72px;
  --font-sans:            Inter, -apple-system, system-ui, sans-serif;
}html[data-marketing-theme='light'] [data-marketing-shell] [data-site-refresh-content],
html[data-marketing-theme='light'] [data-marketing-shell][data-site-refresh-content] {
  --surface-base: var(--public-page-bg);
  --surface-base-alt: var(--public-page-bg);
  --surface-black: var(--public-page-bg);
  --surface-tint: var(--public-page-bg);
  --surface-raised: var(--public-elevated);
  --surface-raised-alt: var(--public-elevated);
  --surface-raised-alt2: var(--public-elevated);
  --surface-raised-alt3: var(--public-elevated);
  --surface-card: var(--public-surface);
  --surface-card-alt: var(--public-surface);
  --surface-card-alt2: var(--public-surface);
  --surface-card-hover: var(--public-elevated);

  --border: var(--public-border);
  --border-light: var(--public-border);
  --border-gray: var(--public-border);
  --border-a05: color-mix(in srgb, var(--public-border) 25%, transparent);
  --border-a08: color-mix(in srgb, var(--public-border) 40%, transparent);
  --border-a09: color-mix(in srgb, var(--public-border) 45%, transparent);
  --border-a10: color-mix(in srgb, var(--public-border) 50%, transparent);
  --border-a12: color-mix(in srgb, var(--public-border) 60%, transparent);

  --text-primary: var(--public-text-primary);
  --text-on-accent: var(--public-on-accent);
  --text-secondary: var(--public-text-secondary);
  --text-secondary-alt: var(--public-text-secondary);
  --text-muted: var(--public-text-muted);
  --text-muted-alt: var(--public-text-muted);
  --gray-cc: var(--public-text-secondary);
  --gray-aa: var(--public-text-secondary);
  --gray-88: var(--public-text-muted);
  --gray-55: var(--public-text-muted);
  --gray-44: var(--public-border);
  --gray-22: var(--public-elevated);

  --accent: var(--public-accent);
  --accent-deep: var(--public-accent-hover);
  --accent-mid: var(--public-accent);
  --accent-bright: var(--public-accent);
  --accent-stray: var(--public-accent);
  --accent-neon: var(--public-accent);
  --accent-pale: color-mix(in srgb, var(--public-accent) 16%, var(--public-surface));
  --accent-pale2: color-mix(in srgb, var(--public-accent) 16%, var(--public-surface));

  --status-positive: var(--public-success);
  --status-positive-alt: var(--public-success);
  --status-negative: var(--public-danger);
  --status-negative-alt: var(--public-danger);
  --status-warning: var(--public-warning);
  --status-info: var(--public-text-secondary);
  --status-info-alt: var(--public-text-secondary);

  --accent-purple: var(--public-accent);
  --accent-teal: var(--public-accent);
  --accent-rose: var(--public-danger);
  --tint-blue: var(--public-text-secondary);
  --tint-amber: var(--public-text-secondary);
  --tint-rose: var(--public-danger);
}/* ============================================================
   BitStat — місток між старими іменами та новими токенами
   ------------------------------------------------------------
   Тут дві колишні системи — маркетингова (--bg-*, --text-*)
   і застосункова (--app-*) — сходяться в одну.
   Жодне значення не задається напряму: усе через tokens.css.

   Цей файл має з часом танути: коли компонент переведено
   на нові імена, відповідний рядок звідси прибирається.
   ============================================================ */[data-site-refresh-content] {
  /* --- маркетингова система --------------------------------- */
  --bg-primary:      var(--surface-base);
  --bg-secondary:    var(--surface-raised);
  --bg-tertiary:     var(--surface-card);
  --bg-card:         var(--surface-card-alt);
  --bg-card-hover:   var(--surface-card-hover);

  --green:           var(--accent);
  --green-light:     var(--accent-bright);
  --green-bg:        rgba(45, 105, 76, .15);
  --gradient-1:      linear-gradient(135deg, var(--accent-mid), var(--accent));
  --gradient-2:      linear-gradient(135deg, var(--accent-mid), var(--accent-deep));

  --amber:           var(--status-warning);
  --amber-bg:        rgba(245, 158, 11, .1);
  --blue:            var(--status-info);
  --blue-bg:         rgba(59, 130, 246, .1);
  --purple:          var(--accent-purple);
  --purple-bg:       rgba(168, 85, 247, .1);
  --rose:            var(--accent-rose);
  --rose-bg:         rgba(244, 63, 94, .1);
  --teal:            var(--accent-teal);
  --teal-bg:         rgba(20, 184, 166, .1);

  /* --- система застосунку: більше не окрема ----------------- */
  --app-bg:          var(--surface-base-alt);
  --app-surface:     var(--surface-raised-alt);
  --app-border:      var(--border-a05);
  --app-text:        var(--text-on-accent);
  --app-text2:       var(--text-secondary-alt);
  --app-text3:       var(--text-muted-alt);
  --app-success:     var(--status-positive);
  --app-danger:      var(--status-negative);
  --app-radius:      var(--r-20);
  --app-radius-lg:   var(--r-24);

  /* --- полагоджені «привиди» -------------------------------- */
  /* Використовувались, але ніде не були оголошені.
     --accent-green підставляла запасний #2ecc71 — сторонній
     зелений на активній крапці слайдера дашборда.            */
  --accent-green:    var(--accent-bright);
  --landing-radius:  var(--r-20);

  /* Затримки сходинкової анімації. Були в коді, але ніколи
     не задавались, тому ефект каскаду мовчки не працював
     у таблиці, картках акаунтів, стратегіях і виплатах.      */
  --tr-delay: 0s;
  --ac: 0s;
  --si: 0s;
  --py: 0s;
}@property --marketing-cta-border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}[data-site-refresh-content] .navbar[data-marketing-header] {
    --marketing-bg-primary: #09090b;
    --marketing-bg-tertiary: #18181b;
    --marketing-border: #27272a;
    --marketing-text-primary: #fafafa;
    --marketing-text-secondary: #a1a1aa;
    --marketing-text-muted: #71717a;
    --marketing-green: #2d694c;
    --marketing-gradient: linear-gradient(135deg, #3a8a63, #2d694c);
    --border: var(--marketing-border);
    --text-primary: var(--marketing-text-primary);
    --text-secondary: var(--marketing-text-secondary);
    --text-muted: var(--marketing-text-muted);
    --bg-tertiary: var(--marketing-bg-tertiary);
    --green: var(--marketing-green);
    --gradient-1: var(--marketing-gradient);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 16px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: all 0.3s ease;
    background: transparent;
}[data-site-refresh-content] .navbar[data-marketing-header][data-marketing-surface="solid"],
[data-site-refresh-content] .navbar[data-marketing-header].scrolled,
[data-site-refresh-content] .navbar[data-marketing-header].menu-open {
    background: rgba(9, 9, 11, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}[data-site-refresh-content] .navbar[data-marketing-header].scrolled,
[data-site-refresh-content] .navbar[data-marketing-header].menu-open {
    padding: 10px 0;
}[data-site-refresh-content] [data-marketing-header] .nav-container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}[data-site-refresh-content] [data-marketing-header] .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
}[data-site-refresh-content] [data-marketing-header] .logo-full {
    width: auto;
    height: 32px;
    object-fit: contain;
}[data-site-refresh-content] [data-marketing-header] .logo-full.small {
    height: 24px;
}[data-site-refresh-content] [data-marketing-header] .nav-links {
    display: flex;
    gap: 32px;
}[data-site-refresh-content] [data-marketing-header] .nav-links a {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}[data-site-refresh-content] [data-marketing-header] .nav-links a:hover {
    color: var(--text-primary);
}[data-site-refresh-content] [data-marketing-header] .nav-links a[aria-current="page"],
[data-site-refresh-content] [data-marketing-header] .mobile-menu a[aria-current="page"] {
    color: #59d68c;
}[data-site-refresh-content] [data-marketing-header] .nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}[data-site-refresh-content] [data-marketing-header] .lang-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s;
}[data-site-refresh-content] [data-marketing-header] .lang-toggle:hover {
    border-color: rgba(255, 255, 255, 0.2);
}[data-site-refresh-content] [data-marketing-header] .lang-opt {
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}[data-site-refresh-content] [data-marketing-header] .lang-opt.active {
    color: #fff;
}[data-site-refresh-content] [data-marketing-header] .lang-sep {
    color: rgba(255, 255, 255, 0.18);
    font-size: 11px;
}[data-site-refresh-content] [data-marketing-header] .nav-login {
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}[data-site-refresh-content] [data-marketing-header] .nav-login:hover {
    color: var(--text-primary);
}[data-site-refresh-content] [data-marketing-header] .nav-cta,
[data-site-refresh-content] [data-marketing-header] .nav-cta-mobile {
    --marketing-cta-border-angle: 0deg;
    --marketing-cta-surface: #111111;
    --marketing-cta-hover-surface: #111111;
    --marketing-cta-border-gradient:
        conic-gradient(
            from var(--marketing-cta-border-angle),
            rgba(48, 192, 109, 0.22) 0deg,
            #30c06d 54deg,
            #9aefbb 96deg,
            rgba(48, 192, 109, 0.2) 154deg,
            rgba(45, 105, 76, 0.34) 235deg,
            #4ade80 302deg,
            rgba(48, 192, 109, 0.22) 360deg
        );
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    background:
        linear-gradient(var(--marketing-cta-surface), var(--marketing-cta-surface)) padding-box,
        var(--marketing-cta-border-gradient) border-box;
    box-shadow:
        0 0 16px rgba(48, 192, 109, 0.12),
        inset 0 0 14px rgba(48, 192, 109, 0.05);
    color: white;
    font-weight: 600;
    text-decoration: none;
    animation: marketingCtaBorderOrbit 3s linear infinite;
    transition: box-shadow 0.2s ease;
}[data-site-refresh-content] [data-marketing-header] .nav-cta {
    min-height: 36px;
    padding: 8px 18px;
    font-size: 14px;
}[data-site-refresh-content] [data-marketing-header] .nav-cta-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    filter: drop-shadow(0 0 5px rgba(48, 192, 109, 0.28));
    transition: transform 0.2s ease;
}[data-site-refresh-content] [data-marketing-header] .nav-cta:hover,
[data-site-refresh-content] [data-marketing-header] .nav-cta-mobile:hover {
    background:
        linear-gradient(var(--marketing-cta-hover-surface), var(--marketing-cta-hover-surface)) padding-box,
        var(--marketing-cta-border-gradient) border-box;
}[data-site-refresh-content] [data-marketing-header] .nav-cta:hover {
    color: white;
}[data-site-refresh-content] [data-marketing-header] .nav-cta:hover .nav-cta-icon,
[data-site-refresh-content] [data-marketing-header] .nav-cta-mobile:hover .nav-cta-icon {
    transform: translateX(2px);
}[data-site-refresh-content] [data-marketing-header] .nav-cta:focus-visible,
[data-site-refresh-content] [data-marketing-header] .nav-cta-mobile:focus-visible {
    outline: 2px solid #9aefbb;
    outline-offset: 3px;
}@keyframes marketingCtaBorderOrbit {
    to {
        --marketing-cta-border-angle: 360deg;
    }
}[data-site-refresh-content] [data-marketing-header] .nav-dropdown {
    position: relative;
}[data-site-refresh-content] [data-marketing-header] .nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}[data-site-refresh-content] [data-marketing-header] .nav-dropdown-trigger svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
}[data-site-refresh-content] [data-marketing-header] .nav-dropdown:hover .nav-dropdown-trigger svg {
    transform: rotate(180deg);
}[data-site-refresh-content] [data-marketing-header] .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    min-width: 280px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-tertiary);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}[data-site-refresh-content] [data-marketing-header] .nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}[data-site-refresh-content] [data-marketing-header] .nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text-secondary) !important;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}[data-site-refresh-content] [data-marketing-header] .nav-dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary) !important;
}[data-site-refresh-content] [data-marketing-header] .nav-dropdown-menu a > svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--green);
}[data-site-refresh-content] [data-marketing-header] .dd-title {
    display: block;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}[data-site-refresh-content] [data-marketing-header] .dd-desc {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
}[data-site-refresh-content] [data-marketing-header] .mobile-menu-label {
    padding: 4px 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}[data-site-refresh-content] [data-marketing-header] .mobile-menu-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--border);
}[data-site-refresh-content] [data-marketing-header] .mobile-menu-btn {
    display: none;
    padding: 8px;
    border: none;
    background: none;
    color: var(--text-primary);
    cursor: pointer;
}[data-site-refresh-content] [data-marketing-header] .mobile-menu-btn svg {
    width: 24px;
    height: 24px;
}[data-site-refresh-content] [data-marketing-header] .mobile-menu {
    display: none;
    flex-direction: column;
    gap: 12px;
    max-width: 1200px;
    max-height: calc(100dvh - 64px);
    margin: 0 auto;
    padding: 16px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(82, 164, 120, 0.48) transparent;
    scrollbar-width: thin;
}[data-site-refresh-content] [data-marketing-header] .mobile-menu::-webkit-scrollbar {
    width: 6px;
}[data-site-refresh-content] [data-marketing-header] .mobile-menu::-webkit-scrollbar-track {
    background: transparent;
}[data-site-refresh-content] [data-marketing-header] .mobile-menu::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(82, 164, 120, 0.48);
}[data-site-refresh-content] [data-marketing-header] .mobile-menu a {
    padding: 8px 0;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}[data-site-refresh-content] [data-marketing-header] .mobile-menu > a {
    display: flex;
    min-height: 44px;
    align-items: center;
}[data-site-refresh-content] [data-marketing-header] .mobile-menu-meta {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}[data-site-refresh-content] [data-marketing-header] .mobile-menu-meta a {
    min-height: 44px;
}[data-site-refresh-content] [data-marketing-header] .mobile-menu-language {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}[data-site-refresh-content] [data-marketing-header] .mobile-menu-login {
    display: inline-flex;
    align-items: center;
}@media (max-width: 1100px) {
    [data-site-refresh-content] [data-marketing-header] .nav-container {
        padding: 0 28px;
    }

    [data-site-refresh-content] [data-marketing-header] .nav-links {
        gap: 18px;
    }

    [data-site-refresh-content] [data-marketing-header] .nav-right {
        gap: 10px;
    }
}[data-site-refresh-content] [data-marketing-header] .nav-cta-mobile {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: 10px 20px !important;
    color: white !important;
    font-weight: 600 !important;
    text-align: center;
}@media (prefers-reduced-motion: reduce) {
    [data-site-refresh-content] [data-marketing-header] .nav-cta,
    [data-site-refresh-content] [data-marketing-header] .nav-cta-mobile {
        animation: none;
        transition: none;
    }

    [data-site-refresh-content] [data-marketing-header] .nav-cta-icon {
        transition: none;
    }
}@media (max-width: 960px) {
    [data-site-refresh-content] [data-marketing-header] .nav-links,
    [data-site-refresh-content] [data-marketing-header] .nav-right {
        display: none;
    }

    [data-site-refresh-content] [data-marketing-header] .mobile-menu-btn {
        display: flex;
    }

    [data-site-refresh-content] [data-marketing-header] .mobile-menu.open {
        display: flex;
    }
}@media (max-width: 640px) {
    [data-site-refresh-content] [data-marketing-header] .nav-container {
        padding: 0 20px;
    }
}[data-site-refresh-content] * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}[data-site-refresh-content] {
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: hidden;
}[data-site-refresh-content] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}[data-site-refresh-content] section[id] {
    scroll-margin-top: 88px;
}[data-site-refresh-content] .container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 48px;
}[data-site-refresh-content] .gradient-text {
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px color-mix(in srgb, var(--public-accent) 30%, transparent));
}[data-site-refresh-content] .green-text { color: var(--green); }[data-site-refresh-content] .blue-text { color: var(--blue); }[data-site-refresh-content] .purple-text { color: var(--purple); }[data-site-refresh-content] .red-text { color: var(--rose); }[data-site-refresh-content] .animate-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}[data-site-refresh-content] .animate-in.visible {
    opacity: 1;
    transform: translateY(0);
}[data-site-refresh-content] .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 0 80px;
    overflow: hidden;
}/* ── Hero split layout ── */[data-site-refresh-content] .hero--split {
    min-height: 100vh;
    padding: 0;
    overflow: hidden;
    align-items: stretch;
}[data-site-refresh-content] .hero-split-inner {
    display: grid;
    grid-template-columns: 42% 58%;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    position: relative;
    z-index: 2;
}[data-site-refresh-content] .hero-left {
    padding: 60px 40px 60px 64px;
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: center;
}[data-site-refresh-content] .hero-left h1 {
    font-size: clamp(42px, 4.2vw, 76px);
    line-height: 1.08;
    margin-bottom: 24px;
    text-align: left;
}[data-site-refresh-content] .hero-left .hero-description {
    font-size: var(--fs-16);
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 36px;
    text-align: left;
    max-width: 460px;
}[data-site-refresh-content] .hero-left .hero-buttons {
    justify-content: flex-start;
}/* Right: screenshot */[data-site-refresh-content] .hero-right {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 60px 0 60px 0;
}[data-site-refresh-content] .hero-screenshot-frame {
    position: relative;
    border-radius: var(--r-14) 0 0 var(--r-14);
    overflow: hidden;
    border: 1px solid var(--border-a12);
    border-right: none;
    box-shadow: var(--public-shadow);
    width: 100%;
}[data-site-refresh-content] .hero-screenshot-frame picture,
[data-site-refresh-content] .screen-frame picture {
    display: block;
    width: 100%;
    height: auto;
    line-height: 0;
}[data-site-refresh-content] .hero-screenshot-frame img {
    display: block;
    width: 100%;
    height: auto;
}[data-site-refresh-content] .screen-frame img {
    display: block;
    width: 100%;
    height: auto;
}/* Ambient green glow behind screenshot */[data-site-refresh-content] .hero-right::before {
    content: '';
    position: absolute;
    inset: 10% -20% 10% 0;
    background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--public-accent) 18%, transparent) 0%, transparent 65%);
    pointer-events: none;
    z-index: -1;
}/* Mobile: stack vertically */@media (max-width: 900px) {
    [data-site-refresh-content] .hero-split-inner {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    [data-site-refresh-content] .hero-left {
        padding: 100px 32px 40px;
        align-items: center;
        text-align: center;
    }
    [data-site-refresh-content] .hero-left h1 { text-align: center; }
    [data-site-refresh-content] .hero-left .hero-description { text-align: center; max-width: 100%; }
    [data-site-refresh-content] .hero-left .hero-buttons { justify-content: center; }
    [data-site-refresh-content] .hero-right {
        min-height: auto;
        padding: 0 16px 60px;
    }
    [data-site-refresh-content] .hero-screenshot-frame {
        border-radius: var(--r-14);
        border-right: 1px solid var(--border-a12);
    }
}@media (max-width: 1180px) and (min-width: 901px) {
    [data-site-refresh-content] .hero-split-inner {
        grid-template-columns: minmax(360px, 45%) minmax(0, 55%);
    }

    [data-site-refresh-content] .hero-left {
        padding-left: 40px;
        padding-right: 24px;
    }

    [data-site-refresh-content] .hero-left h1 {
        font-size: clamp(40px, 5.3vw, 58px);
    }

    [data-site-refresh-content] .hero-left .hero-description {
        max-width: 410px;
        font-size: var(--fs-15);
    }

    [data-site-refresh-content] .hero-left .hero-buttons {
        gap: 12px;
    }

    [data-site-refresh-content] .hero-left .btn-primary,
    [data-site-refresh-content] .hero-left .btn-secondary {
        padding: 13px 20px;
        white-space: nowrap;
    }
}[data-site-refresh-content] .hero-bg {
    position: absolute;
    inset: 0;
    background: url('/site-refresh-20260820/landing/img/hero-bg.png') right center / auto 100% no-repeat;
    opacity: 0.85;
    pointer-events: none;
    mask-image: linear-gradient(to right, transparent 0%, transparent 25%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.6) 45%, black 55%, black 90%, rgba(0,0,0,0.6) 95%, transparent 100%),
                linear-gradient(to bottom, transparent 0%, transparent 10%, rgba(0,0,0,0.3) 16%, black 25%, black 75%, rgba(0,0,0,0.5) 88%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 25%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.6) 45%, black 55%, black 90%, rgba(0,0,0,0.6) 95%, transparent 100%),
                        linear-gradient(to bottom, transparent 0%, transparent 10%, rgba(0,0,0,0.3) 16%, black 25%, black 75%, rgba(0,0,0,0.5) 88%, transparent 100%);
    -webkit-mask-composite: source-in;
}[data-site-refresh-content] .hero-glow {
    position: absolute;
    top: -100px;
    right: 10%;
    width: min(800px, 100vw);
    height: 600px;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--public-accent) 15%, transparent) 0%, transparent 60%);
    pointer-events: none;
}[data-site-refresh-content] .hero-content {
    position: relative;
    z-index: 2;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 48px;
    width: 100%;
}[data-site-refresh-content] .hero h1 {
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
}[data-site-refresh-content] .hero-description {
    font-size: var(--fs-18);
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 0 40px;
    line-height: 1.7;
}[data-site-refresh-content] .hero-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
}[data-site-refresh-content] .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--r-12);
    background: var(--gradient-1);
    color: var(--public-on-accent);
    font-size: var(--fs-15);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}[data-site-refresh-content] .btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--public-accent) 20%, transparent);
}[data-site-refresh-content] .btn-primary.large {
    padding: 16px 36px;
    font-size: var(--fs-16);
    border-radius: var(--r-14);
}[data-site-refresh-content] .btn-primary svg {
    width: 18px;
    height: 18px;
}[data-site-refresh-content] .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--r-12);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: var(--fs-15);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}[data-site-refresh-content] .btn-secondary:hover {
    background: var(--bg-card);
    border-color: var(--border-light);
}[data-site-refresh-content] .btn-secondary svg {
    width: 18px;
    height: 18px;
}[data-site-refresh-content] .hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}[data-site-refresh-content] .hero-stat {
    text-align: center;
}[data-site-refresh-content] .stat-number {
    display: block;
    font-size: 28px;
    font-weight: 800;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}[data-site-refresh-content] .stat-label {
    font-size: var(--fs-13);
    color: var(--text-muted);
    font-weight: 500;
}[data-site-refresh-content] .stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border);
}[data-site-refresh-content] .hero-preview {
    position: relative;
    width: 100%;
    max-width: 1800px;
    margin: 60px auto 0;
    padding: 0 24px;
}[data-site-refresh-content] .hero-preview-glow {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 300px;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--public-accent) 20%, transparent) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}[data-site-refresh-content] .hero-preview-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-16) var(--r-16) 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    box-shadow: var(--public-shadow);
}[data-site-refresh-content] .hero-visual {
    position: relative;
    margin-top: 60px;
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}[data-site-refresh-content] .mockup-window {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--r-16);
    overflow: hidden;
    box-shadow: var(--public-shadow);
}[data-site-refresh-content] .mockup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
}[data-site-refresh-content] .mockup-dots {
    display: flex;
    gap: 6px;
}[data-site-refresh-content] .mockup-dots span {
    width: 10px;
    height: 10px;
    border-radius: var(--r-circle);
    background: var(--border-light);
}[data-site-refresh-content] .mockup-dots span:first-child { background: var(--accent-rose); }[data-site-refresh-content] .mockup-dots span:nth-child(2) { background: var(--status-warning); }[data-site-refresh-content] .mockup-dots span:last-child { background: var(--accent); }[data-site-refresh-content] .mockup-title {
    font-size: var(--fs-12);
    color: var(--text-muted);
    font-weight: 500;
}[data-site-refresh-content] .mockup-body {
    position: relative;
    min-height: 400px;
    overflow: hidden;
}[data-site-refresh-content] .hero-iframe {
    width: 100%;
    height: 400px;
    border: none;
    pointer-events: none;
    transform: scale(1);
    transform-origin: top left;
}[data-site-refresh-content] .showcase-section {
    padding: 120px 0;
    position: relative;
}[data-site-refresh-content] .showcase-section:nth-child(even) {
    background: var(--bg-secondary);
}[data-site-refresh-content] .showcase-screenshot {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-12);
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
    box-shadow: var(--public-shadow);
}[data-site-refresh-content] .showcase-screenshot:hover {
    border-color: var(--public-accent);
    box-shadow: var(--public-shadow);
    transform: translateY(-4px);
}[data-site-refresh-content] .showcase-img {
    width: 100%;
    height: auto;
    display: block;
}[data-site-refresh-content] .showcase-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}[data-site-refresh-content] .showcase-features {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 48px;
    flex-wrap: wrap;
}[data-site-refresh-content] .sf-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: var(--r-full);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    font-size: var(--fs-14);
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}[data-site-refresh-content] .sf-item:hover {
    border-color: var(--border-light);
    color: var(--text-primary);
}[data-site-refresh-content] .sf-item svg {
    width: 16px;
    height: 16px;
    color: var(--green);
}[data-site-refresh-content] .trusted-by {
    padding: 60px 0;
    border-bottom: 1px solid var(--border);
    position: relative;
}[data-site-refresh-content] .trusted-label {
    text-align: center;
    font-size: var(--fs-13);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 40px;
}[data-site-refresh-content] .trusted-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}[data-site-refresh-content] .trusted-logo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}[data-site-refresh-content] .logo-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border-a05);
    border: 1px solid var(--border-a08);
    border-radius: var(--r-16);
    overflow: hidden;
    transition: border-color 0.3s, background 0.3s;
}[data-site-refresh-content] .logo-icon svg {
    width: 32px;
    height: 32px;
}[data-site-refresh-content] .trusted-logo-box:hover .logo-icon {
    border-color: rgba(255, 255, 255, 0.15);
    background: var(--border-a08);
}[data-site-refresh-content] .trusted-logo-box span {
    font-size: var(--fs-13);
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}[data-site-refresh-content] .section-header {
    text-align: center;
    margin-bottom: 64px;
}[data-site-refresh-content] .section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--r-full);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    font-size: var(--fs-13);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 20px;
    box-shadow: none;
}[data-site-refresh-content] .section-badge svg {
    width: 14px;
    height: 14px;
    color: var(--green);
}[data-site-refresh-content] .section-header h2,
[data-site-refresh-content] .showcase-text h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}[data-site-refresh-content] .section-header p {
    font-size: var(--fs-17);
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto;
}[data-site-refresh-content] .showcase-row {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 48px;
}[data-site-refresh-content] .showcase-row.reverse {
    grid-template-columns: 1.6fr 1fr;
}[data-site-refresh-content] .showcase-row.reverse .showcase-media {
    order: -1;
}[data-site-refresh-content] .showcase-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}[data-site-refresh-content] .showcase-text h2 {
    text-align: left;
}[data-site-refresh-content] .showcase-text p {
    font-size: var(--fs-17);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 24px;
}[data-site-refresh-content] .showcase-text .showcase-features {
    margin-top: 8px;
}[data-site-refresh-content] .showcase-media {
    position: relative;
}[data-site-refresh-content] .showcase-media::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--public-accent) 10%, transparent) 0%, transparent 65%);
    pointer-events: none;
    z-index: -1;
}[data-site-refresh-content] .showcase-alt {
    background: var(--bg-secondary);
}[data-site-refresh-content] .faq-section {
    padding: 120px 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
}[data-site-refresh-content] .faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 1120px;
    margin: 0 auto;
}[data-site-refresh-content] .faq-item {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--r-16);
    padding: 0 24px;
    transition: border-color 0.2s ease, background 0.2s ease;
}[data-site-refresh-content] .faq-item:hover,
[data-site-refresh-content] .faq-item[open] {
    border-color: var(--border-light);
}[data-site-refresh-content] .faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 0;
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--fs-16);
    font-weight: 600;
    list-style: none;
}[data-site-refresh-content] .faq-item summary::-webkit-details-marker {
    display: none;
}[data-site-refresh-content] .faq-item summary::after {
    content: '+';
    color: var(--green-light);
    font-size: var(--fs-24);
    font-weight: 400;
    line-height: 1;
}[data-site-refresh-content] .faq-item[open] summary::after {
    content: '−';
}[data-site-refresh-content] .faq-item p {
    padding: 0 0 22px;
    color: var(--text-secondary);
    font-size: var(--fs-15);
    line-height: 1.65;
}[data-site-refresh-content] .guide-page {
    padding: 118px 0 96px;
    min-height: 70vh;
}[data-site-refresh-content] .guide-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 48px;
}[data-site-refresh-content] .guide-hero {
    padding-bottom: 44px;
    border-bottom: 1px solid var(--border);
}[data-site-refresh-content] .guide-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--public-border);
    border-radius: 999px;
    background: var(--public-accent-soft);
    color: var(--public-accent);
    font-size: var(--fs-13);
    font-weight: 700;
    margin-bottom: 20px;
}[data-site-refresh-content] .guide-eyebrow svg {
    width: 15px;
    height: 15px;
}[data-site-refresh-content] .guide-hero h1 {
    font-size: clamp(34px, 5vw, 58px);
    font-weight: 850;
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}[data-site-refresh-content] .guide-hero p {
    max-width: 720px;
    color: var(--text-secondary);
    font-size: var(--fs-18);
    line-height: 1.7;
}[data-site-refresh-content] .guide-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}[data-site-refresh-content] .guide-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--fs-13);
    font-weight: 650;
}[data-site-refresh-content] .guide-tag svg {
    width: 14px;
    height: 14px;
    color: var(--green);
}[data-site-refresh-content] .guide-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}[data-site-refresh-content] .guide-switcher a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-8);
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--fs-13);
    font-weight: 700;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}[data-site-refresh-content] .guide-switcher a:hover,
[data-site-refresh-content] .guide-switcher a.active {
    color: var(--public-accent);
    border-color: var(--public-accent);
    background: var(--public-accent-soft);
}[data-site-refresh-content] .guide-content {
    display: grid;
    gap: 30px;
    padding-top: 44px;
}[data-site-refresh-content] .guide-note,
[data-site-refresh-content] .guide-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: var(--r-12);
    background: rgba(59, 130, 246, 0.08);
    padding: 16px 18px;
    color: var(--tint-blue);
    font-size: var(--fs-15);
    line-height: 1.65;
}[data-site-refresh-content] .guide-callout--success {
    border-color: color-mix(in srgb, var(--public-success) 30%, var(--public-border));
    background: color-mix(in srgb, var(--public-success) 10%, var(--public-surface));
    color: var(--public-success);
}[data-site-refresh-content] .guide-callout--warning {
    border-color: color-mix(in srgb, var(--public-warning) 30%, var(--public-border));
    background: color-mix(in srgb, var(--public-warning) 10%, var(--public-surface));
    color: var(--public-warning);
}[data-site-refresh-content] .guide-note svg,
[data-site-refresh-content] .guide-callout svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 3px;
}[data-site-refresh-content] .guide-step {
    display: grid;
    gap: 18px;
    padding: 30px;
    border: 1px solid var(--public-border);
    border-radius: var(--r-14);
    background: var(--public-surface);
}[data-site-refresh-content] .blog-page {
    padding: 118px 0 96px;
    min-height: 70vh;
}[data-site-refresh-content] .blog-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 48px;
}[data-site-refresh-content] .blog-hero {
    padding-bottom: 44px;
    border-bottom: 1px solid var(--border);
}[data-site-refresh-content] .blog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--public-border);
    border-radius: 999px;
    background: var(--public-accent-soft);
    color: var(--public-accent);
    font-size: var(--fs-13);
    font-weight: 700;
    margin-bottom: 20px;
}[data-site-refresh-content] .blog-eyebrow svg {
    width: 15px;
    height: 15px;
}[data-site-refresh-content] .blog-hero h1 {
    font-size: 56px;
    font-weight: 850;
    line-height: 1.05;
    margin-bottom: 18px;
}[data-site-refresh-content] .blog-hero p {
    max-width: 680px;
    color: var(--text-secondary);
    font-size: var(--fs-18);
    line-height: 1.7;
}[data-site-refresh-content] .blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding-top: 44px;
}[data-site-refresh-content] .blog-card {
    display: flex;
    flex-direction: column;
    min-height: 310px;
    padding: 24px;
    border: 1px solid var(--public-border);
    border-radius: var(--r-8);
    background: var(--public-surface);
}[data-site-refresh-content] .blog-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--public-border);
    border-radius: var(--r-8);
    background: var(--public-accent-soft);
    color: var(--public-accent);
    margin-bottom: 24px;
}[data-site-refresh-content] .blog-card-icon svg {
    width: 22px;
    height: 22px;
}[data-site-refresh-content] .blog-card-body {
    display: grid;
    gap: 10px;
}[data-site-refresh-content] .blog-card-meta {
    color: var(--text-muted);
    font-size: var(--fs-12);
    font-weight: 700;
    text-transform: uppercase;
}[data-site-refresh-content] .blog-card h2 {
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1.25;
}[data-site-refresh-content] .blog-card p {
    color: var(--text-secondary);
    font-size: var(--fs-15);
    line-height: 1.65;
}[data-site-refresh-content] .blog-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-top: auto;
    padding: 0 14px;
    border: 1px solid var(--public-border);
    border-radius: var(--r-8);
    background: var(--public-accent-soft);
    color: var(--text-primary);
    font-size: var(--fs-14);
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}[data-site-refresh-content] .blog-card-link:hover {
    border-color: var(--public-accent);
    background: var(--public-accent-soft);
}[data-site-refresh-content] .guide-step-header {
    display: flex;
    align-items: center;
    gap: 14px;
}[data-site-refresh-content] .guide-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--public-border);
    border-radius: var(--r-circle);
    background: var(--public-accent-soft);
    color: var(--public-accent);
    font-size: var(--fs-14);
    font-weight: 850;
    flex: 0 0 auto;
}[data-site-refresh-content] .guide-step h2 {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 780;
    line-height: 1.2;
}[data-site-refresh-content] .guide-step p {
    color: var(--text-secondary);
    font-size: var(--fs-16);
    line-height: 1.75;
    max-width: 860px;
}[data-site-refresh-content] .guide-link {
    color: var(--accent-bright);
    text-decoration: none;
}[data-site-refresh-content] .guide-link:hover {
    text-decoration: underline;
}[data-site-refresh-content] .guide-permissions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}[data-site-refresh-content] .guide-permission {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--r-8);
    font-size: var(--fs-13);
    font-weight: 760;
}[data-site-refresh-content] .guide-permission.allowed {
    border: 1px solid color-mix(in srgb, var(--public-success) 30%, var(--public-border));
    background: color-mix(in srgb, var(--public-success) 10%, var(--public-surface));
    color: var(--public-success);
}[data-site-refresh-content] .guide-permission.blocked {
    border: 1px solid color-mix(in srgb, var(--public-danger) 30%, var(--public-border));
    background: color-mix(in srgb, var(--public-danger) 10%, var(--public-surface));
    color: var(--public-danger);
}[data-site-refresh-content] .guide-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}[data-site-refresh-content] .guide-list li {
    color: var(--text-secondary);
    line-height: 1.65;
    font-size: var(--fs-16);
}[data-site-refresh-content] .guide-list strong {
    color: var(--text-primary);
}[data-site-refresh-content] .guide-figures {
    display: grid;
    gap: 16px;
}[data-site-refresh-content] .guide-figures.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}[data-site-refresh-content] .guide-figure {
    margin: 0;
}[data-site-refresh-content] .guide-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border-a08);
    border-radius: var(--r-10);
    background: var(--surface-black);
    box-shadow: var(--public-shadow);
}[data-site-refresh-content] .guide-figure figcaption {
    margin-top: 9px;
    color: var(--text-muted);
    font-size: var(--fs-13);
    line-height: 1.45;
}[data-site-refresh-content] .cta-section {
    padding: 120px 0;
}[data-site-refresh-content] .cta-card {
    position: relative;
    text-align: center;
    padding: 80px 40px;
    border-radius: var(--r-24);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    overflow: hidden;
}[data-site-refresh-content] .cta-glow {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: min(500px, calc(100vw - 32px));
    height: 300px;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--public-accent) 10%, transparent) 0%, transparent 60%);
    pointer-events: none;
}[data-site-refresh-content] .cta-card h2 {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 800;
    margin-bottom: 16px;
    position: relative;
}[data-site-refresh-content] .cta-card p {
    font-size: var(--fs-16);
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto 36px;
    position: relative;
}[data-site-refresh-content] .cta-card .btn-primary {
    position: relative;
}[data-site-refresh-content] .footer {
    padding: 64px 0 32px;
    border-top: 1px solid var(--border);
}[data-site-refresh-content] .footer-content {
    display: grid;
    grid-template-columns: minmax(180px, 1.5fr) repeat(auto-fit, minmax(128px, 1fr));
    gap: 40px;
    margin-bottom: 48px;
}[data-site-refresh-content] .footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: var(--fs-16);
    margin-bottom: 12px;
}[data-site-refresh-content] .footer-logo .logo-full {
    width: auto;
    height: 24px;
    object-fit: contain;
}[data-site-refresh-content] .footer-brand .footer-risk-disclaimer {
    max-width: 320px;
    margin: 16px 0 0;
    color: var(--text-muted);
    font-size: var(--fs-13);
    line-height: 1.55;
}[data-site-refresh-content] .footer-links-group h5 {
    font-size: var(--fs-13);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}[data-site-refresh-content] .footer-links-group a:not(.footer-social-link) {
    display: block;
    font-size: var(--fs-14);
    color: var(--text-muted);
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.2s;
}[data-site-refresh-content] .footer-links-group a:hover {
    color: var(--text-primary);
}[data-site-refresh-content] .footer-social-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
}[data-site-refresh-content] .footer-social-link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    color: var(--text-muted);
    font-size: var(--fs-14);
    text-decoration: none;
    transition: color 0.2s;
}[data-site-refresh-content] .footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--green-light);
    flex-shrink: 0;
}[data-site-refresh-content] .footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 24px;
    font-size: var(--fs-13);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    /* без переносу рядок юридичних посилань вилазив за екран на
       320-360px - футер спільний, тож правка системна (19.08.2026) */
    flex-wrap: wrap;
    gap: 8px 16px;
}[data-site-refresh-content] .footer-bottom > span { display: flex; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }@media (max-width: 1024px) {
    [data-site-refresh-content] .showcase-row,
    [data-site-refresh-content] .showcase-row.reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    [data-site-refresh-content] .hero-content {
        text-align: center;
    }

    [data-site-refresh-content] .hero-description {
        margin: 0 auto 40px;
    }

    [data-site-refresh-content] .hero-buttons {
        justify-content: center;
    }

    [data-site-refresh-content] .showcase-row.reverse .showcase-media {
        order: 0;
    }

    [data-site-refresh-content] .showcase-text {
        align-items: center;
        text-align: center;
    }

    [data-site-refresh-content] .showcase-text h2 {
        text-align: center;
    }

    [data-site-refresh-content] .showcase-split {
        gap: 16px;
    }

    [data-site-refresh-content] .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}@media (max-width: 768px) {
    [data-site-refresh-content] .hero {
        padding: 100px 20px 60px;
    }

    [data-site-refresh-content] .hero-content {
        padding: 0 20px;
        text-align: center;
    }

    [data-site-refresh-content] .hero-description {
        margin: 0 auto 40px;
    }

    [data-site-refresh-content] .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
    }

    [data-site-refresh-content] .btn-primary, [data-site-refresh-content] .btn-secondary {
        justify-content: center;
    }

    [data-site-refresh-content] .showcase-section {
        padding: 80px 0;
    }

    [data-site-refresh-content] .showcase-split {
        grid-template-columns: 1fr;
    }

    [data-site-refresh-content] .showcase-features {
        gap: 12px;
    }

    [data-site-refresh-content] .sf-item {
        padding: 8px 16px;
        font-size: var(--fs-13);
    }

    [data-site-refresh-content] .trusted-logos {
        gap: 24px;
    }

    [data-site-refresh-content] .footer-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    [data-site-refresh-content] .cta-card {
        padding: 60px 24px;
    }

    [data-site-refresh-content] .faq-section {
        padding: 80px 0;
    }

    [data-site-refresh-content] .faq-list {
        grid-template-columns: 1fr;
    }

    [data-site-refresh-content] .faq-item {
        padding: 0 20px;
    }

    [data-site-refresh-content] .guide-page {
        padding: 96px 0 72px;
    }

    [data-site-refresh-content] .guide-shell {
        padding: 0 20px;
    }

    [data-site-refresh-content] .blog-page {
        padding: 96px 0 72px;
    }

    [data-site-refresh-content] .blog-shell {
        padding: 0 20px;
    }

    [data-site-refresh-content] .blog-hero {
        padding-bottom: 34px;
    }

    [data-site-refresh-content] .blog-hero h1 {
        font-size: var(--fs-40);
    }

    [data-site-refresh-content] .blog-hero p {
        font-size: var(--fs-15);
    }

    [data-site-refresh-content] .blog-grid {
        grid-template-columns: 1fr;
        padding-top: 34px;
    }

    [data-site-refresh-content] .guide-hero {
        padding-bottom: 34px;
    }

    [data-site-refresh-content] .guide-hero p,
    [data-site-refresh-content] .guide-step p,
    [data-site-refresh-content] .guide-list li {
        font-size: var(--fs-15);
    }

    [data-site-refresh-content] .guide-step {
        padding: 22px;
    }

    [data-site-refresh-content] .guide-step-header {
        align-items: flex-start;
    }

    [data-site-refresh-content] .guide-figures.two-col {
        grid-template-columns: 1fr;
    }

    [data-site-refresh-content] .guide-switcher a,
    [data-site-refresh-content] .guide-tag,
    [data-site-refresh-content] .guide-permission {
        max-width: 100%;
    }
}/* ---------- футер на телефоні ----------
   Посилання були 30px заввишки (14px тексту + 4px padding).
   На дотик це промах через один. Доводимо до 44px. */@media (max-width: 900px) {
  [data-site-refresh-content] .footer-links-group a:not(.footer-social-link) { padding: 11px 0; }
  /* іконки соцмереж — 28px квадратики поруч одна з одною */
  [data-site-refresh-content] .footer-social-link { min-height: 44px; min-width: 44px; justify-content: center; }
  [data-site-refresh-content] .footer-social-links { gap: var(--sp-2); }
}/* Dark retains the page's native surfaces and elevations; the rules above
   remain the public Light palette. */html:not([data-marketing-theme='light']) [data-site-refresh-content] .hero-screenshot-frame {
    box-shadow:
        inset 0 1px 0 var(--border-a08),
        -8px 0 40px rgba(0,0,0,0.6),
        -24px 0 80px rgba(0,0,0,0.5),
        0 0 120px rgba(44,128,86,0.12),
        0 40px 100px rgba(0,0,0,0.5);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .hero-right::before {
    background: radial-gradient(ellipse at 30% 50%, rgba(44,128,86,0.18) 0%, transparent 65%);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .hero-glow {
    background: radial-gradient(ellipse, rgba(45, 105, 76, 0.15) 0%, transparent 60%);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .btn-primary { color: white; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .btn-primary:hover {
    box-shadow: 0 8px 30px rgba(45, 105, 76, 0.3);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .hero-preview-glow {
    background: radial-gradient(ellipse, rgba(45, 105, 76, 0.2) 0%, transparent 65%);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .hero-preview-img {
    box-shadow: 0 -4px 60px rgba(45, 105, 76, 0.1), 0 20px 80px rgba(0, 0, 0, 0.5);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .mockup-window {
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.03),
        0 20px 60px rgba(0,0,0,0.4),
        0 0 120px rgba(45, 105, 76, 0.08);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .showcase-screenshot {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .showcase-screenshot:hover {
    border-color: rgba(45, 105, 76, 0.4);
    box-shadow: 0 0 60px rgba(45, 105, 76, 0.12), 0 12px 48px rgba(0,0,0,0.4);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .section-badge {
    box-shadow: 0 0 20px rgba(45, 105, 76, 0.15);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .showcase-media::before {
    background: radial-gradient(ellipse, rgba(45, 105, 76, 0.1) 0%, transparent 65%);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .guide-eyebrow {
    border-color: rgba(45, 105, 76, 0.26);
    background: rgba(45, 105, 76, 0.12);
    color: var(--accent-bright);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .guide-switcher a:hover,
html:not([data-marketing-theme='light']) [data-site-refresh-content] .guide-switcher a.active {
    color: var(--text-primary);
    border-color: rgba(45, 105, 76, 0.48);
    background: rgba(45, 105, 76, 0.12);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .guide-callout--success {
    border-color: rgba(45, 105, 76, 0.34);
    background: rgba(45, 105, 76, 0.12);
    color: var(--accent-pale2);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .guide-callout--warning {
    border-color: rgba(245, 158, 11, 0.26);
    background: rgba(245, 158, 11, 0.09);
    color: var(--tint-amber);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .guide-step {
    border-color: var(--border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.006));
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .blog-eyebrow {
    border-color: rgba(45, 105, 76, 0.26);
    background: rgba(45, 105, 76, 0.12);
    color: var(--accent-bright);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .blog-card {
    border-color: var(--border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.008));
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .blog-card-icon {
    border-color: rgba(45, 105, 76, 0.25);
    background: rgba(45, 105, 76, 0.12);
    color: var(--accent-bright);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .blog-card-link {
    border-color: rgba(45, 105, 76, 0.34);
    background: rgba(45, 105, 76, 0.12);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .blog-card-link:hover {
    border-color: rgba(45, 105, 76, 0.62);
    background: rgba(45, 105, 76, 0.2);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .guide-step-number {
    border-color: rgba(45, 105, 76, 0.38);
    background: rgba(45, 105, 76, 0.14);
    color: var(--accent-bright);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .guide-permission.allowed {
    border: 1px solid rgba(45, 105, 76, 0.38);
    background: rgba(45, 105, 76, 0.13);
    color: var(--accent-pale);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .guide-permission.blocked {
    border: 1px solid rgba(244, 63, 94, 0.28);
    background: rgba(244, 63, 94, 0.08);
    color: var(--tint-rose);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .guide-figure img {
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.28);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .cta-glow {
    background: radial-gradient(ellipse, rgba(34, 197, 94, 0.1) 0%, transparent 60%);
}/* ============================================================
   BitStat — перший екран, спліт
   Текст ліворуч, продукт праворуч. Обидва потрапляють у видиму
   частину екрана без зменшення заголовка.
   ============================================================ */[data-site-refresh-content] .hero.hero--split2 {
  position: relative;
  min-height: 0;
  display: block;
  padding: calc(var(--nav-height) + var(--sp-16)) 0 var(--sp-8);
  overflow: hidden;
}[data-site-refresh-content] .hero--split2 .hero-glow {
  position: absolute;
  top: -140px; left: 62%;
  transform: translateX(-50%);
  width: 720px; height: 460px;
  background: radial-gradient(ellipse, var(--green-bg), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}[data-site-refresh-content] .hero--split2 .hero-split-inner {
  position: relative;
  z-index: 1;
  /* Зі старих стилів сюди приходив min-height у висоту екрана —
     через нього блок роздувався до 1657px при 421px контенту. */
  min-height: 0;
  /* На широких моніторах 1120px губиться, тому герой ширший за решту сторінки */
  max-width: min(1360px, 92vw);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  gap: var(--sp-14);
  align-items: center;
}/* Зі старих стилів .hero-left приходить як flex-колонка з
   align-items:flex-start — через це дочірні блоки стискаються
   до вмісту, і кнопки перескакували у стовпчик. */[data-site-refresh-content] .hero--split2 .hero-left {
  display: block;
  padding: 0;      /* зі старих стилів приходило 60px 40px 60px 64px */
}/* --- ліва колонка --- */[data-site-refresh-content] .hero--split2 .hero-left h1 {
  margin: 0;
  font-size: clamp(40px, 3.4vw, 60px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--text-primary);
}[data-site-refresh-content] .hero--split2 .hero-description {
  margin: var(--sp-4) 0 0;
  max-width: 520px;
  font-size: var(--fs-17);
  line-height: 1.6;
  color: var(--text-secondary);
}[data-site-refresh-content] .hero--split2 .hero-buttons {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  flex-wrap: wrap;
  width: 100%;
  max-width: none;
}/* --- права колонка --- */[data-site-refresh-content] .hero--split2 .hero-right { position: relative; }[data-site-refresh-content] .hero--split2 .hero-screenshot-frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  overflow: hidden;
  background: var(--surface-raised);
  box-shadow: var(--public-shadow);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .hero--split2 .hero-screenshot-frame {
  box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 30px 70px rgba(0,0,0,.6);
}[data-site-refresh-content] .hero--split2 .hero-screenshot-frame picture,
[data-site-refresh-content] .hero--split2 .hero-screenshot-frame img {
  display: block;
  width: 100%;
  height: auto;            /* у розмітці стоїть height="2680" */
}@media (max-width: 1100px) {
  [data-site-refresh-content] .hero--split2 .hero-split-inner { gap: var(--sp-8); }
  [data-site-refresh-content] .hero--split2 .hero-left h1 { font-size: var(--fs-40); }
}@media (max-width: 900px) {
  [data-site-refresh-content] .hero.hero--split2 { padding-top: calc(var(--nav-height) + var(--sp-10)); }
  [data-site-refresh-content] .hero--split2 .hero-split-inner { grid-template-columns: 1fr; gap: var(--sp-10); }
  [data-site-refresh-content] .hero--split2 .hero-left h1 { font-size: var(--fs-40); }
  [data-site-refresh-content] .hero--split2 .hero-description { max-width: none; }
  [data-site-refresh-content] .hero--split2 .hero-glow { left: 50%; width: 100%; }
}@media (max-width: 600px) {
  [data-site-refresh-content] .hero--split2 .hero-left h1 { font-size: var(--fs-32); }
}/* ============================================================
   BitStat — секція «текст + зображення»
   Базовий блок сайту: за прототипом трапляється 168 разів.
   .split        текст ліворуч, зображення праворуч
   .split--rev   навпаки
   Усе на змінних із tokens.css.
   ============================================================ */[data-site-refresh-content] .split { position: relative; padding: var(--sp-25) 0; }[data-site-refresh-content] .split-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: var(--sp-14);
  align-items: center;
}[data-site-refresh-content] .split--rev .split-wrap { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }[data-site-refresh-content] .split--rev .split-text { order: 2; }[data-site-refresh-content] .split--rev .split-media { order: 1; }/* ---------- текст ---------- */[data-site-refresh-content] .split-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-12); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}[data-site-refresh-content] .split-eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-bright); display: block; }[data-site-refresh-content] .split-text h2 {
  margin: var(--sp-4) 0 0;
  font-size: clamp(28px, 2.4vw, 40px);
  font-weight: 800; line-height: 1.18; letter-spacing: -.02em;
  color: var(--text-primary);
}[data-site-refresh-content] .split-text > p {
  margin: var(--sp-4) 0 0;
  max-width: 520px;
  font-size: var(--fs-16);
  line-height: 1.65;
  color: var(--text-secondary);
}[data-site-refresh-content] .split-list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-3); }[data-site-refresh-content] .split-list li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-15); line-height: 1.55; color: var(--text-secondary);
}[data-site-refresh-content] .split-list svg {
  width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px;
  color: var(--accent-bright);
}[data-site-refresh-content] .split-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-6);
  font-size: var(--fs-15); font-weight: 600;
  color: var(--text-primary); text-decoration: none;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 3px;
  transition: color .18s ease, border-color .18s ease;
}[data-site-refresh-content] .split-link:hover { color: var(--accent-bright); border-color: var(--accent); }[data-site-refresh-content] .split-link svg { width: 15px; height: 15px; transition: transform .18s ease; }[data-site-refresh-content] .split-link:hover svg { transform: translateX(3px); }/* ---------- зображення ---------- */[data-site-refresh-content] .split-media { position: relative; }[data-site-refresh-content] .split-frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  overflow: hidden;
  background: var(--surface-raised);
  box-shadow: var(--public-shadow);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .split-frame {
  box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 26px 60px rgba(0,0,0,.55);
}[data-site-refresh-content] .split-frame img { display: block; width: 100%; height: auto; }/* підпис-цифра поверх зображення */[data-site-refresh-content] .split-stat {
  position: absolute;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--public-surface);
  border: 1px solid var(--public-border);
  border-radius: var(--r-12);
  box-shadow: var(--public-shadow);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .split-stat {
  background: rgba(24,24,27,.92);
  border: 1px solid var(--border-light);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}[data-site-refresh-content] .split-stat b { font-size: var(--fs-18); font-weight: 700; color: var(--public-text-primary); line-height: 1.1; }[data-site-refresh-content] .split-stat span { font-size: var(--fs-11); color: var(--public-text-secondary); letter-spacing: .06em; text-transform: uppercase; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .split-stat b { color: var(--accent-bright); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .split-stat span { color: var(--text-muted); }[data-site-refresh-content] .split-stat--br { right: -14px; bottom: -16px; }[data-site-refresh-content] .split-stat--tl { left: -14px; top: -16px; }@media (max-width: 900px) {
  /* 80px згори й знизу на телефоні читаються як «сторінка закінчилась»:
     між секціями лишалося по 160px порожнечі. 56px тримають поділ,
     але не розтягують сторінку на зайві пару тисяч пікселів. */
  [data-site-refresh-content] .split { padding: var(--sp-14) 0; }
  [data-site-refresh-content] .split-wrap,
  [data-site-refresh-content] .split--rev .split-wrap { grid-template-columns: 1fr; gap: var(--sp-8); padding: 0 var(--sp-5); }
  [data-site-refresh-content] .split--rev .split-text { order: 1; }
  [data-site-refresh-content] .split--rev .split-media { order: 2; }
  [data-site-refresh-content] .split-text > p { max-width: none; }
  [data-site-refresh-content] .split-stat { position: static; margin-top: var(--sp-3); align-self: flex-start; display: inline-flex; }

  /* 28px заввишки — це менше за подушечку пальця. Додаємо зону
     згори й компенсуємо відступом, щоб підкреслення лишилось
     там само, де було. */
  [data-site-refresh-content] .split-link {
    padding-top: 12px; padding-bottom: 8px;
    margin-top: calc(var(--sp-6) - 12px);
  }
}/* ============================================================
   BitStat — базові блоки сторінок
   .fgrid  сітка другорядних можливостей
   .cmp    таблиця порівняння
   .steps  нумеровані кроки
   .cta    фінальний заклик
   Усе на змінних із tokens.css.
   ============================================================ */[data-site-refresh-content] .blk { position: relative; padding: var(--sp-25) 0; }[data-site-refresh-content] .blk-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }[data-site-refresh-content] .blk-head { max-width: 640px; margin: 0 0 var(--sp-14); }[data-site-refresh-content] .blk-head.center { margin-left: auto; margin-right: auto; text-align: center; }[data-site-refresh-content] .blk-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-12); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}[data-site-refresh-content] .blk-eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-bright); display: block; }[data-site-refresh-content] .blk-head h2 {
  margin: var(--sp-4) 0 0;
  font-size: clamp(28px, 2.4vw, 40px);
  font-weight: 800; line-height: 1.18; letter-spacing: -.02em;
  color: var(--text-primary);
}[data-site-refresh-content] .blk-head p {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-16); line-height: 1.65; color: var(--text-secondary);
}[data-site-refresh-content] .blk-head.center p { margin-left: auto; margin-right: auto; max-width: 560px; }/* ---------- сітка можливостей ---------- */[data-site-refresh-content] .fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }[data-site-refresh-content] .fgrid-item {
  padding: var(--sp-5);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-14);
  transition: border-color .2s ease, transform .2s ease;
}[data-site-refresh-content] .fgrid-item:hover { border-color: var(--border-light); transform: translateY(-2px); }[data-site-refresh-content] .fgrid-item svg { width: 20px; height: 20px; color: var(--accent-bright); }[data-site-refresh-content] .fgrid-item h3 { margin: var(--sp-3) 0 0; font-size: var(--fs-15); font-weight: 600; color: var(--text-primary); }[data-site-refresh-content] .fgrid-item p { margin: var(--sp-2) 0 0; font-size: var(--fs-13); line-height: 1.55; color: var(--text-muted); }/* ---------- таблиця порівняння ---------- */[data-site-refresh-content] .cmp {
  width: 100%; border-collapse: collapse;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  overflow: hidden;
}[data-site-refresh-content] .cmp th, [data-site-refresh-content] .cmp td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left; font-size: var(--fs-15);
  border-bottom: 1px solid var(--border);
}[data-site-refresh-content] .cmp thead th {
  font-size: var(--fs-12); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); background: var(--surface-raised);
}[data-site-refresh-content] .cmp tbody tr:last-child th, [data-site-refresh-content] .cmp tbody tr:last-child td { border-bottom: 0; }[data-site-refresh-content] .cmp tbody th { font-weight: 500; color: var(--text-secondary); width: 44%; }[data-site-refresh-content] .cmp .col-us { color: var(--public-text-primary); font-weight: 500; background: color-mix(in srgb, var(--public-accent) 6%, var(--public-surface)); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .cmp .col-us { color: var(--text-primary); background: rgba(45,105,76,.06); }[data-site-refresh-content] .cmp .col-them { color: var(--text-muted); }[data-site-refresh-content] .cmp thead .col-us { color: var(--accent-bright); }[data-site-refresh-content] .cmp-mark { display: inline-flex; align-items: center; gap: var(--sp-2); }[data-site-refresh-content] .cmp-mark svg { width: 15px; height: 15px; flex: 0 0 auto; }[data-site-refresh-content] .cmp-mark.yes svg { color: var(--accent-bright); }[data-site-refresh-content] .cmp-mark.no  svg { color: var(--text-muted); }/* ---------- кроки ---------- */[data-site-refresh-content] .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); counter-reset: s; }[data-site-refresh-content] .step {
  position: relative; counter-increment: s;
  padding: var(--sp-6);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-16);
}[data-site-refresh-content] .step::before {
  content: counter(s);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--green-bg); color: var(--accent-bright);
  font-size: var(--fs-14); font-weight: 700;
}[data-site-refresh-content] .step h3 { margin: var(--sp-4) 0 0; font-size: var(--fs-17); font-weight: 700; color: var(--text-primary); }[data-site-refresh-content] .step p { margin: var(--sp-2) 0 0; font-size: var(--fs-14); line-height: 1.6; color: var(--text-muted); }/* ---------- фінальний CTA ---------- */[data-site-refresh-content] .cta-box {
  position: relative; overflow: hidden;
  padding: var(--sp-20) var(--sp-8);
  text-align: center;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-24);
}[data-site-refresh-content] .cta-box::before {
  content: ""; position: absolute; top: -160px; left: 50%;
  transform: translateX(-50%);
  width: 620px; height: 420px;
  background: radial-gradient(ellipse, var(--green-bg), transparent 70%);
  filter: blur(50px); pointer-events: none;
}[data-site-refresh-content] .cta-box > * { position: relative; }[data-site-refresh-content] .cta-box h2 {
  margin: 0 auto; max-width: 640px;
  font-size: clamp(28px, 2.6vw, 42px);
  font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
  color: var(--text-primary);
}[data-site-refresh-content] .cta-box p { margin: var(--sp-4) auto 0; max-width: 520px; font-size: var(--fs-16); line-height: 1.6; color: var(--text-secondary); }[data-site-refresh-content] .cta-actions { display: flex; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-8); flex-wrap: wrap; }[data-site-refresh-content] .cta-note { margin-top: var(--sp-5); font-size: var(--fs-13); color: var(--text-muted); }@media (max-width: 1000px) { [data-site-refresh-content] .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }@media (max-width: 900px) {
  [data-site-refresh-content] .blk { padding: var(--sp-14) 0; }
  [data-site-refresh-content] .blk-wrap { padding: 0 var(--sp-5); }
  [data-site-refresh-content] .blk-head { margin-bottom: var(--sp-8); }
  [data-site-refresh-content] .steps { grid-template-columns: 1fr; }
  [data-site-refresh-content] .cmp th, [data-site-refresh-content] .cmp td { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-14); }
  [data-site-refresh-content] .cta-box { padding: var(--sp-14) var(--sp-5); }
}@media (max-width: 560px) { [data-site-refresh-content] .fgrid { grid-template-columns: 1fr; } }/* ---------- FAQ ---------- *//* одна колонка: у дві розкриття одного питання зсуває сусіднє.
   grid-template-columns явно — зі старих стилів приходили дві. */[data-site-refresh-content] .faq-list { max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }[data-site-refresh-content] .faq-item {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-14);
  overflow: hidden;
  transition: border-color .2s ease;
}[data-site-refresh-content] .faq-item[open] { border-color: var(--border-light); }[data-site-refresh-content] .faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5);
  font-size: var(--fs-16); font-weight: 600; color: var(--text-primary);
  cursor: pointer; list-style: none;
}[data-site-refresh-content] .faq-item summary::-webkit-details-marker { display: none; }[data-site-refresh-content] .faq-item summary::after {
  content: ""; flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .2s ease, border-color .2s ease;
}/* content: "" тут обовʼязковий: у landing.css живе старий акордеон з
   content '−' на [open], і його специфічність перебиває наше базове "" */[data-site-refresh-content] .faq-item[open] summary::after { content: ""; transform: rotate(-135deg) translate(-3px,-3px); border-color: var(--accent-bright); }[data-site-refresh-content] .faq-item summary:hover { color: var(--accent-bright); }[data-site-refresh-content] .faq-answer { padding: 0 var(--sp-5) var(--sp-5); font-size: var(--fs-15); line-height: 1.65; color: var(--text-secondary); }/* ---------- порівняння на три колонки ----------
   Таблиця → Notion → BitStat. Середня колонка не нейтральна:
   у Notion є речі, які він справді робить добре (нотатки,
   скриншоти), і замовчувати їх — гірше для довіри, ніж визнати. */[data-site-refresh-content] .cmp--three tbody th { width: 28%; }[data-site-refresh-content] .cmp--three .col-mid,
[data-site-refresh-content] .cmp--three .col-them,
[data-site-refresh-content] .cmp--three .col-us { width: 24%; }[data-site-refresh-content] .cmp--three .col-mid { color: var(--text-secondary); }[data-site-refresh-content] .cmp--three thead .col-mid { color: var(--text-secondary); }[data-site-refresh-content] .cmp-mark.part svg { color: var(--status-warning); }[data-site-refresh-content] .cmp-mark.mid svg { color: var(--text-secondary); }/* логотипи в шапці колонок */[data-site-refresh-content] .cmp-col-head { display: inline-flex; align-items: center; gap: 7px; }[data-site-refresh-content] .cmp-col-head svg { width: 14px; height: 14px; }@media (max-width: 860px) {
  /* На телефоні три колонки не читаються — розгортаємо в картки.
     Селектори навмисно з table попереду: інакше .cmp--three tbody th
     { width: 28% } вище має більшу специфічність за width: auto тут,
     і клітинки лишаються 80–90px, а текст ламається по одному слову. */
  [data-site-refresh-content] table.cmp--three,
  [data-site-refresh-content] table.cmp--three tbody,
  [data-site-refresh-content] table.cmp--three tbody tr,
  [data-site-refresh-content] table.cmp--three tbody th,
  [data-site-refresh-content] table.cmp--three tbody td { display: block; width: auto; }
  [data-site-refresh-content] table.cmp--three thead { display: none; }

  /* .cmp--three .col-us { width: 24% } — це два класи, тож воно
     сильніше за width: auto вище. Перебиваємо явно. */
  [data-site-refresh-content] table.cmp--three tbody td.col-them,
  [data-site-refresh-content] table.cmp--three tbody td.col-mid,
  [data-site-refresh-content] table.cmp--three tbody td.col-us { width: auto; }

  [data-site-refresh-content] table.cmp--three tbody tr {
    padding: var(--sp-4) 0; border-bottom: 1px solid var(--border);
  }
  [data-site-refresh-content] table.cmp--three tbody tr:last-child { border-bottom: 0; }

  [data-site-refresh-content] table.cmp--three tbody th {
    padding: 0 var(--sp-5) var(--sp-2);
    font-size: var(--fs-13); color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em; border: 0;
  }

  /* рядок картки: підпис колонки зліва, значення справа —
     удвічі компактніше, ніж підпис окремим рядком над значенням */
  [data-site-refresh-content] table.cmp--three tbody td {
    padding: 3px var(--sp-5); border: 0;
    display: grid; grid-template-columns: 76px minmax(0, 1fr);
    gap: var(--sp-3); align-items: start;
  }
  [data-site-refresh-content] table.cmp--three tbody td::before {
    content: attr(data-col);
    font-size: var(--fs-12); color: var(--text-muted);
    line-height: 1.5; margin: 0;
  }
  [data-site-refresh-content] .cmp--three .col-us { background: none; }
  [data-site-refresh-content] .cmp--three .cmp-mark { align-items: start; line-height: 1.5; }
  [data-site-refresh-content] .cmp--three .cmp-mark svg { margin-top: 3px; }
}/* іконки в шапці колонок */[data-site-refresh-content] .cmp--three thead .cmp-col-head svg { width: 15px; height: 15px; flex: 0 0 auto; }[data-site-refresh-content] .cmp--three thead .col-them svg { color: var(--accent); }/* зелений таблиць */[data-site-refresh-content] .cmp--three thead .col-mid  svg { color: var(--text-muted); }/* Notion — нейтральний сірий */html:not([data-marketing-theme='light']) [data-site-refresh-content] .cmp--three thead .col-them svg { color: #217346; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .cmp--three thead .col-mid svg { color: #d4d4d8; }[data-site-refresh-content] .cmp--three thead .col-us   svg { color: var(--accent-bright); }/* формулювання короткі саме щоб не переносились — тримаємо в один рядок */[data-site-refresh-content] .cmp--three tbody td { font-size: var(--fs-14); }[data-site-refresh-content] .cmp--three .cmp-mark { white-space: nowrap; }[data-site-refresh-content] .cmp--three tbody th { font-size: var(--fs-14); }/* легенда: без неї половина кола нічого не означає */[data-site-refresh-content] .cmp-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  margin-top: var(--sp-4); padding-left: var(--sp-1);
  font-size: var(--fs-12); color: var(--text-muted);
}[data-site-refresh-content] .cmp-legend .cmp-mark svg { width: 13px; height: 13px; }@media (max-width: 1080px) {
  /* на середніх екранах перенос неминучий — краще дозволити, ніж обрізати */
  [data-site-refresh-content] .cmp--three .cmp-mark { white-space: normal; }
}@media (max-width: 860px) {
  [data-site-refresh-content] .cmp-legend { gap: var(--sp-3); flex-direction: column; }
}/* CTA під таблицею порівняння веде на реєстрацію, тож це кнопка,
   а не текстове посилання «читати далі» */[data-site-refresh-content] .cmp-cta { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-7); }[data-site-refresh-content] .cmp-cta svg { width: 16px; height: 16px; }/* ---------- перемикач мови в шапці ----------
   Переїхав сюди з live-demo.css: із 196 селекторів того файлу
   на сторінці лишались живими рівно ці чотири, тобто 28 КБ
   стилів вантажилось заради п'ятнадцяти рядків. */[data-site-refresh-content] .lang-toggle {
  display: flex; align-items: center; gap: 4px;
  background: var(--border-a05);
  border: 1px solid var(--border-a10);
  border-radius: var(--r-20); padding: 4px 10px;
  cursor: pointer; font-family: inherit;
  color: inherit; text-decoration: none;
}[data-site-refresh-content] .lang-toggle:hover { border-color: var(--public-border); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .lang-toggle:hover { border-color: rgba(255,255,255,0.2); }[data-site-refresh-content] .lang-opt {
  font-size: var(--fs-12); font-weight: 600; color: var(--text-muted);
  transition: color 0.2s; letter-spacing: 0.5px;
}[data-site-refresh-content] .lang-opt.active { color: var(--text-on-accent); }[data-site-refresh-content] .lang-sep { font-size: var(--fs-11); color: var(--border); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .lang-opt { color: rgba(255,255,255,0.35); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .lang-sep { color: rgba(255,255,255,0.18); }/* ============================================================
   BitStat – сторінка /features
   ------------------------------------------------------------
   Перший екран – як на проді: дві колонки, одна кнопка, рамка
   зі скриншотом.

   Шість інструментів – таби, а не шість секцій одна під одною.
   Секціями сторінка виходила 8900px: людина мусила прогорнути
   шість повноекранних блоків, щоб дійти до FAQ. Табами видно
   один інструмент за раз, а решта за один клік.

   Порядок правил – спершу телефон, далі ширші екрани. Так
   мобільна версія не лишається «на потім».
   ============================================================ *//* ============================================================
   1. ПЕРШИЙ ЕКРАН
   ============================================================ *//* .hero має min-height: 100vh зі старих стилів. Тут контент
   займає 373px, тож у вікні на 745px згори й знизу лишалось по
   186px порожнечі – саме це й було видно. */[data-site-refresh-content] .hero--fx {
  min-height: 0;
  overflow: hidden;   /* світлова пляма не має створювати прокрутку */
  padding: calc(var(--nav-height) + var(--sp-10)) 0 var(--sp-12);
  position: relative;
}[data-site-refresh-content] .fx-hero-inner {
  position: relative; z-index: 1;
  max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5);
  display: grid; gap: var(--sp-8);
}[data-site-refresh-content] .fx-hero-eyebrow {
  display: inline-block; padding: 6px 14px; border-radius: 20px;
  background: var(--green-bg); border: 1px solid rgba(60,217,122,.22);
  font-size: var(--fs-12); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-bright);
}[data-site-refresh-content] .fx-hero-copy h1 {
  margin: var(--sp-5) 0 0;
  font-size: clamp(30px, 5.4vw, 52px); font-weight: 800;
  line-height: 1.08; letter-spacing: -.02em; color: var(--text-primary);
  text-wrap: balance;
}[data-site-refresh-content] .fx-hero-copy > p {
  margin: var(--sp-4) 0 0; max-width: 46ch;
  font-size: var(--fs-16); line-height: 1.65; color: var(--text-secondary);
}[data-site-refresh-content] .fx-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }[data-site-refresh-content] .fx-hero-actions .btn-primary { margin-top: 0; }[data-site-refresh-content] .fx-hero-actions .btn-secondary { display: inline-flex; align-items: center; gap: var(--sp-2); }[data-site-refresh-content] .fx-hero-actions .btn-secondary svg { width: 18px; height: 18px; }/* Живий герой: два канонічні віджети зі зсувом і чип P&L.
   Рамку-скриншот із трьома крапками прибрано: картинка казала
   «це знімок», живі картки кажуть «це продукт». */[data-site-refresh-content] .fx-hero-live { position: relative; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .fx-hero-live .dashboard-widget {
  box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 26px 60px rgba(0,0,0,.55);
}[data-site-refresh-content] .fxh-main { width: min(560px, 92%); margin-left: auto; }/* у віджетах клітинки календаря квадратні (aspect-ratio: 1);
   на ширині героя це роздуває сітку до 640px – обмежуємо висоту */[data-site-refresh-content] .fx-hero-live .cal-day { aspect-ratio: auto; height: 38px; }[data-site-refresh-content] .fxh-side {
  position: absolute; left: 0; bottom: -18px; z-index: 2;
  width: min(330px, 58%);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .fxh-side { filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }/* чип у нижньому правому куті: верхній зайняв би підпис місяця.
   Позиціюється завжди, і на телефоні теж: перебиваємо мобільне
   правило .split-stat { position: static } із split.css */[data-site-refresh-content] .fx-hero-live .fxh-chip {
  position: absolute; right: -14px; bottom: 40px; top: auto; z-index: 3; margin: 0;
}@media (max-width: 1080px) {
  /* одна колонка: віджети стають під текстом, основний на всю ширину */
  [data-site-refresh-content] .fxh-main { width: 100%; }
  [data-site-refresh-content] .fx-hero-live { margin-top: var(--sp-2); }
  [data-site-refresh-content] .fx-hero-live .fxh-chip { right: 0; }
}@media (max-width: 640px) {
  /* вузький екран: бічній картці треба більше ширини, інакше рядки
     стратегій переносяться; чип іде нагору, щоб не товктись унизу */
  [data-site-refresh-content] .fxh-side { width: 96%; bottom: -26px; }
  [data-site-refresh-content] .fx-hero-live { padding-bottom: var(--sp-8); }
  [data-site-refresh-content] .fx-hero-live .fxh-chip { bottom: auto; top: -12px; }
}/* ============================================================
   1a. СМУГА ІНТЕГРАЦІЙ
   ------------------------------------------------------------
   Тонка смуга під героєм. .blk дає 100px згори й знизу – тут це
   забагато: смуга має читатись як продовження першого екрана,
   а не як окрема секція.
   ============================================================ */[data-site-refresh-content] .blk--slim { padding: 0 0 var(--sp-16); }[data-site-refresh-content] .intg {
  border: 1px solid var(--border); border-radius: var(--r-20);
  background: var(--surface-card);
  padding: var(--sp-5) var(--sp-4);
}[data-site-refresh-content] .intg-title {
  margin: 0 0 var(--sp-4); text-align: center;
  font-size: var(--fs-12); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}/* Телефон: сітка два на два з плиток. Стовпчиком з чотирьох рядків
   це займало 353px і читалось як випадковий список — іконки стояли
   на різних відступах, бо кожен рядок центрувався окремо. */[data-site-refresh-content] .intg-row {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}[data-site-refresh-content] .intg-item {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 92px; padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-12);
  background: var(--border-a05); border: 1px solid var(--border-a10);
  font-size: var(--fs-13); font-weight: 600; color: var(--text-primary);
  text-align: center; text-wrap: balance;
}[data-site-refresh-content] .intg-logo { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }[data-site-refresh-content] .intg-ico { display: inline-flex; color: var(--accent-bright); flex: 0 0 auto; }[data-site-refresh-content] .intg-ico svg { width: 24px; height: 24px; }/* Від планшета плитки вже не потрібні – вистачає рядка з роздільниками */@media (min-width: 641px) {
  [data-site-refresh-content] .intg-row { gap: var(--sp-3); }
  [data-site-refresh-content] .intg-item {
    flex-direction: row; gap: var(--sp-3);
    min-height: 44px; padding: 0 var(--sp-3);
    border: 0; border-radius: 0; background: none;
    font-size: var(--fs-15);
  }
  /* роздільник малюємо бордюром сусіда, щоб не було зайвих елементів */
  [data-site-refresh-content] .intg-item + .intg-item { border-left: 1px solid var(--border); }
  [data-site-refresh-content] .intg-row > :nth-child(odd) { border-left: 0; }
}/* --- жива смуга інтеграцій: копія + поля підключень --- */[data-site-refresh-content] .intg--live { display: grid; gap: var(--sp-5); }[data-site-refresh-content] .intg--live .intg-title { text-align: left; margin: 0; }[data-site-refresh-content] .intg-note {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-13); line-height: 1.6; color: var(--text-secondary);
  max-width: 44ch;
}[data-site-refresh-content] .intg-fields { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; }[data-site-refresh-content] .intg-fields .hw-field { margin: 0; }[data-site-refresh-content] .intg-fields .intg-ico svg { width: 22px; height: 22px; }[data-site-refresh-content] .intg-add { flex: 0 0 auto; margin-left: auto; text-align: right; letter-spacing: 0; overflow: visible; }[data-site-refresh-content] .hw-check--plus { background: var(--border-a10); color: var(--text-secondary); }/* на найвужчих екранах довга назва ручних рахунків виштовхує галочку:
   назві дозволяємо стискатись, підпис «додайте свій» ховаємо */[data-site-refresh-content] .intg-fields .hw-ex { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }@media (max-width: 420px) {
  [data-site-refresh-content] .intg-add { display: none; }
}@media (min-width: 641px) {
  [data-site-refresh-content] .intg-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}@media (min-width: 981px) {
  [data-site-refresh-content] .intg--live { grid-template-columns: minmax(260px, 1fr) minmax(0, 1.5fr); align-items: center; gap: var(--sp-8); }
}@media (min-width: 981px) {
  [data-site-refresh-content] .intg { padding: var(--sp-5) var(--sp-6); }
  [data-site-refresh-content] .intg-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* «Manual Portfolio accounts» — найдовший підпис; на чверті ширини
     він переносився на два рядки й ламав рівну лінію з логотипами */
  [data-site-refresh-content] .intg-item { font-size: var(--fs-14); padding: 0 var(--sp-2); gap: var(--sp-2); }
  [data-site-refresh-content] .intg-row > :nth-child(odd) { border-left: 1px solid var(--border); }
  [data-site-refresh-content] .intg-row > :first-child { border-left: 0; }
}/* ============================================================
   2. ТАБИ
   ============================================================ *//* Без JS клас .js не зʼявляється: панелі лишаються видимими,
   ряд вкладок ховається. Сторінка деградує в звичайний список. */[data-site-refresh-content] .fxt:not(.js) .fxt-barwrap { display: none; }[data-site-refresh-content] .fxt:not(.js) .fxt-panel + .fxt-panel { margin-top: var(--sp-8); }/* body у landing.css має overflow-x: hidden. Це створює контекст
   прокрутки на body, і будь-який position: sticky всередині
   перестає прилипати. overflow-x: clip обрізає так само, але
   контексту не створює. Старі браузери правило проігнорують і
   лишаться з hidden – тобто з поточною поведінкою, без поломки. */[data-site-refresh-content] { overflow-x: clip; }/* --- ряд вкладок --- *//* Прилипає саме .fxt-barwrap, і на ньому не має бути overflow:
   overflow-x: auto створює контекст прокрутки і position: sticky
   всередині нього перестає працювати. Тому гортається .fxt-bar. */[data-site-refresh-content] .fxt-barwrap {
  position: sticky;
  top: calc(var(--nav-height) + 6px);
  z-index: 20;
  margin: 0 0 var(--sp-6);
}/* Перехід за якорем ставив початок секції під верх вікна, а зверху
   стоять шапка і липкий ряд вкладок: заголовок етапу опинявся під
   ними, перекриття 74px. Відступ якоря = шапка + ряд + повітря. *//* landing.css має section[id] { scroll-margin-top: 88px } — це
   специфічніше за один клас, тому селектор із тегом. *//* Браузер сам стрибає на елемент із id з хеша, а це панель, не секція.
   Тож відступ якоря потрібен обом. landing.css має section[id] з 88px,
   що специфічніше за один клас, тому селектор із тегом. */[data-site-refresh-content] section[id].fxt,
[data-site-refresh-content] .fxt-panel[id] { scroll-margin-top: calc(var(--nav-height) + 116px); }[data-site-refresh-content] .fxt-bar {
  display: flex; gap: 4px; padding: 5px;
  max-width: 100%;
  border-radius: 999px;
  background: var(--public-surface);
  border: 1px solid var(--public-border);
  box-shadow: var(--public-shadow);
  /* на телефоні шість вкладок не вміщаються – гортаємо пальцем */
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .fxt-bar {
  background: rgba(16,16,17,.86);
  border-color: var(--border);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}[data-site-refresh-content] .fxt-bar::-webkit-scrollbar { display: none; }/* натяк, що ряд гортається: край останньої видимої вкладки тане */@supports (mask-image: linear-gradient(#000, #000)) {
  [data-site-refresh-content] .fxt-bar {
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
}[data-site-refresh-content] .fxt-tab {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
  min-height: 44px;                 /* палець, а не курсор */
  padding: 0 16px; border: 1px solid transparent; border-radius: 999px;
  background: none; cursor: pointer;
  font: 600 var(--fs-14)/1 Inter, system-ui, sans-serif;
  color: var(--text-muted);
  scroll-snap-align: center;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}[data-site-refresh-content] .fxt-tab svg { width: 16px; height: 16px; flex: 0 0 auto; }[data-site-refresh-content] .fxt-tab:hover { color: var(--text-primary); }[data-site-refresh-content] .fxt-tab.is-on {
  color: var(--text-primary);
  background: rgba(60,217,122,.10);
  border-color: rgba(60,217,122,.30);
}[data-site-refresh-content] .fxt-tab.is-on svg { color: var(--accent-bright); }[data-site-refresh-content] .fxt-tab:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }/* --- панель --- */[data-site-refresh-content] .fxt-panel {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-20);
  overflow: hidden;
}[data-site-refresh-content] .fxt-panel[hidden] { display: none; }[data-site-refresh-content] .fxt.js .fxt-panel.is-on { animation: fxtIn .28s ease both; }@keyframes fxtIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }@media (prefers-reduced-motion: reduce) {
  [data-site-refresh-content] .fxt.js .fxt-panel.is-on { animation: none; }
  [data-site-refresh-content] .fxt-barwrap { scroll-behavior: auto; }
}[data-site-refresh-content] .fx-copy { display: grid; gap: var(--sp-4); padding: var(--sp-5); }[data-site-refresh-content] .fx-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-12);
  background: var(--green-bg); color: var(--accent-bright);
}[data-site-refresh-content] .fx-ico svg { width: 20px; height: 20px; }/* На вузькому екрані надпис над заголовком переноситься на два рядки, і
   крапка з align-items: center зʼїжджала між рядками. Прибиваємо її до
   першого рядка. */[data-site-refresh-content] .fx-text .blk-eyebrow { align-items: flex-start; }[data-site-refresh-content] .fx-text .blk-eyebrow i { margin-top: .45em; flex: 0 0 auto; }[data-site-refresh-content] .fx-text h3 {
  margin: var(--sp-2) 0 0;
  font-size: clamp(22px, 4.4vw, 30px); font-weight: 800;
  letter-spacing: -.02em; color: var(--text-primary);
}[data-site-refresh-content] .fx-text p {
  margin: var(--sp-3) 0 0; max-width: 62ch;
  font-size: var(--fs-15); line-height: 1.65; color: var(--text-secondary);
}[data-site-refresh-content] .fx-side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }[data-site-refresh-content] .fx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }[data-site-refresh-content] .fx-chips li {
  padding: 5px 11px; border-radius: 20px;
  background: var(--border-a05); border: 1px solid var(--border-a10);
  font-size: var(--fs-12); color: var(--text-secondary);
}[data-site-refresh-content] .fx-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px;
  font-size: var(--fs-14); font-weight: 600;
  color: var(--accent-bright); text-decoration: none;
}[data-site-refresh-content] .fx-link svg { width: 15px; height: 15px; transition: transform .18s ease; }[data-site-refresh-content] .fx-link:hover svg { transform: translateX(3px); }/* ============================================================
   2a. ПАНЕЛІ-КОМПОЗИЦІЇ (/features, секція .fxt--live)
   ------------------------------------------------------------
   Панель – «вікно продукту» за мовою героя: текст ліворуч, жива
   композиція праворуч. Ряд плиток зі стелею висоти різав віджети
   посеред рядка; тут композиції підібрані збіркою так, що влазять
   цілком, і механіка обрізання не потрібна взагалі.
   Правила скоуплені під .fxt--live: .fx-stage і старий .fx-copy
   лишаються як були – ними користується /solutions.
   ============================================================ */[data-site-refresh-content] .fxt--live .fxt-panel { padding: var(--sp-5); }[data-site-refresh-content] .fxt--live .fx-copy {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0; padding: 0;
}[data-site-refresh-content] .fxt--live .fx-copy .blk-eyebrow { margin-top: var(--sp-4); align-items: flex-start; }[data-site-refresh-content] .fxt--live .fx-copy .blk-eyebrow i { margin-top: .45em; flex: 0 0 auto; }[data-site-refresh-content] .fxt--live .fx-copy h3 {
  margin: var(--sp-2) 0 0;
  font-size: clamp(22px, 4.4vw, 30px); font-weight: 800;
  letter-spacing: -.02em; color: var(--text-primary);
}[data-site-refresh-content] .fxt--live .fx-copy p {
  margin: var(--sp-3) 0 0; max-width: 62ch;
  font-size: var(--fs-15); line-height: 1.65; color: var(--text-secondary);
}[data-site-refresh-content] .fx-checks {
  list-style: none; margin: var(--sp-4) 0 0; padding: 0;
  display: grid; gap: var(--sp-2);
}[data-site-refresh-content] .fx-checks li {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  font-size: var(--fs-14); line-height: 1.5; color: var(--text-secondary);
}[data-site-refresh-content] .fx-checks svg { width: 15px; height: 15px; margin-top: 3px; color: var(--accent-bright); flex: 0 0 auto; }[data-site-refresh-content] .fxt--live .fx-link { margin-top: var(--sp-3); }[data-site-refresh-content] .fx-live { position: relative; margin-top: var(--sp-5); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .fx-live .dashboard-widget,
html:not([data-marketing-theme='light']) [data-site-refresh-content] .fx-live .jrn-card {
  box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 18px 44px rgba(0,0,0,.45);
}/* клітинки календаря лишаються квадратними, як у продукті
   (aspect-ratio: 1 з product-widgets.css); висоту панелі тримає
   обмеження ширини календаря нижче */[data-site-refresh-content] .fxl-side { margin-top: var(--sp-3); }[data-site-refresh-content] .fx-live .fxl-chip { position: absolute; top: -10px; right: 0; z-index: 3; margin: 0; }/* компактний журнал: шапка місяця впритул до таблиці */[data-site-refresh-content] .journal--slim th { white-space: nowrap; }[data-site-refresh-content] .fx-live .jrn-scroll { overflow-x: auto; }/* смуги стратегій і сетапів у вузьких картках: рядок не переноситься,
   довга назва обрізається трикрапкою, цифри лишаються цілими */[data-site-refresh-content] .fx-live .strategy-bar-content,
[data-site-refresh-content] .fx-hero-live .strategy-bar-content { gap: 10px; padding: 0 12px; }[data-site-refresh-content] .fx-live .strategy-bar-left,
[data-site-refresh-content] .fx-hero-live .strategy-bar-left { min-width: 0; }[data-site-refresh-content] .fx-live .strategy-bar-name,
[data-site-refresh-content] .fx-hero-live .strategy-bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }[data-site-refresh-content] .fx-live .strategy-bar-count,
[data-site-refresh-content] .fx-live .strategy-bar-right,
[data-site-refresh-content] .fx-hero-live .strategy-bar-count,
[data-site-refresh-content] .fx-hero-live .strategy-bar-right { white-space: nowrap; }/* скріншот цілого дашборда: єдина панель з картинкою замість живих
   віджетів. Це кнопка: клік відкриває лайтбокс на весь екран */[data-site-refresh-content] .fx-shot {
  display: block; width: 100%; margin: 0; padding: 0;
  border: 0; background: none; cursor: zoom-in;
}[data-site-refresh-content] .fx-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border-color); border-radius: 14px;
  box-shadow: var(--public-shadow);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .fx-shot img {
  box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 18px 44px rgba(0,0,0,.45);
}[data-site-refresh-content] .has-shotbox { overflow: hidden; }[data-site-refresh-content] .fx-shotbox {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  background: rgba(4, 6, 9, .98); cursor: zoom-out;
}[data-site-refresh-content] .fx-shotbox img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border: 1px solid var(--border-color); border-radius: 10px;
}[data-site-refresh-content] .fx-shotbox-x {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--border-color); border-radius: 50%;
  background: rgba(255, 255, 255, .06); color: var(--text-primary);
  font-size: 17px; line-height: 1; cursor: pointer;
}[data-site-refresh-content] .fx-shotbox-x:hover { background: rgba(255, 255, 255, .12); }/* контролки в шапках віджетів (Day/Week, Distribution/Analysis) на
   вузькому екрані не влазять у рядок – переносимо, як у старої сцени */[data-site-refresh-content] .fx-live .widget-header { flex-wrap: wrap; }[data-site-refresh-content] .fx-live .widget-controls,
[data-site-refresh-content] .fx-live .widget-controls-stack { flex-wrap: wrap; justify-content: flex-end; }[data-site-refresh-content] .fx-live .widget-header > .widget-controls { margin-left: auto; }/* --- десктоп: текст ліворуч, композиція праворуч --- */@media (min-width: 1081px) {
  [data-site-refresh-content] .fxt--live .fxt-panel {
    display: grid;
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
    align-items: center; gap: var(--sp-9);
    padding: var(--sp-7) var(--sp-8);
  }
  [data-site-refresh-content] .fxt--live .fxt-panel[hidden] { display: none; }
  [data-site-refresh-content] .fx-live { margin-top: 0; }
  [data-site-refresh-content] .fxt--live .fxl-main { width: min(600px, 100%); margin-left: auto; }
  /* бічний віджет з накладанням: на /features його більше немає
     (календар стоїть сам, з тултіпами), але степер /solutions досі
     кладе бічний віджет поверх календаря цим правилом */
  [data-site-refresh-content] .fxt--live .fxl-side {
    position: absolute; left: 0; bottom: -14px; margin: 0; z-index: 2;
    width: min(320px, 55%);
  }
  html:not([data-marketing-theme='light']) [data-site-refresh-content] .fxt--live .fxl-side {
    filter: drop-shadow(0 16px 36px rgba(0,0,0,.45));
  }
  [data-site-refresh-content] .fx-live .fxl-chip { top: -12px; right: -6px; }

  /* журнал і виплати – одна широка картка без бічного */
  [data-site-refresh-content] .fxt-panel--journal .fxl-main,
  [data-site-refresh-content] .fxt-panel--payouts .fxl-main { width: 100%; }

  /* --- дашборд: скріншот цілого екрана під компактною шапкою --- */
  /* Дошка з шести живих віджетів давала неповну картину продукту,
     тому тут стоїть скріншот усього дашборда. Текст стає компактною
     шапкою: чек-лист розгортається в рядок, велика іконка зайва
     (та сама стоїть у вкладці над панеллю). */
  [data-site-refresh-content] .fxt--live .fxt-panel--dashboard { display: block; padding: var(--sp-6) var(--sp-7); }
  [data-site-refresh-content] .fxt-panel--dashboard .fx-ico { display: none; }
  [data-site-refresh-content] .fxt-panel--dashboard .fx-copy .blk-eyebrow { margin-top: 0; }
  [data-site-refresh-content] .fxt-panel--dashboard .fx-checks {
    display: flex; flex-wrap: wrap;
    margin-top: var(--sp-3); gap: var(--sp-2) var(--sp-6);
  }
  [data-site-refresh-content] .fxt-panel--dashboard .fx-link { margin-top: var(--sp-1); min-height: 28px; }
  [data-site-refresh-content] .fxt-panel--dashboard .fx-copy p { margin-top: var(--sp-2); }
  [data-site-refresh-content] .fxt-panel--dashboard .fx-checks { margin-top: var(--sp-2); }
  [data-site-refresh-content] .fxt-panel--dashboard .fx-live { margin-top: var(--sp-3); width: 100%; }
  /* опис без стелі ширини (був 74ch): один рядок замість двох
     звільняє висоту для ширшого скріншота */
  [data-site-refresh-content] .fxt-panel--dashboard .fx-copy p { max-width: none; }
  /* ширина скріншота гранична: панель має лишатись до 720px, щоб
     разом із рядом вкладок влазити у вікно 1440x800 */
  [data-site-refresh-content] .fxt-panel--dashboard .fxl-main { width: min(900px, 100%); margin: 0 auto; }
  /* календар з квадратними клітинками: ширина обмежена так, щоб
     сітка з шести рядів тримала панель у межах 720px */
  [data-site-refresh-content] .fxt-panel--calendar .fxl-main { width: min(560px, 100%); }

  /* --- дует: два віджети поруч, без накладання --- */
  /* графік балансу і смуги стратегій затуляти не можна, тож ці
     панелі кладуть віджети поруч; накладання немає більше ніде */
  [data-site-refresh-content] .fx-live--duo { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--sp-3); align-items: start; }
  [data-site-refresh-content] .fx-live--duo .fxl-main { width: auto; margin: 0; }
  [data-site-refresh-content] .fx-live--duo .fxl-side { position: static; width: auto; margin: 0; filter: none; }
  [data-site-refresh-content] .fxt-panel--accounts .fx-live--duo { grid-template-columns: 1fr 1.45fr; }
  [data-site-refresh-content] .fxt-panel--strategies .fx-live--duo { grid-template-columns: 1.05fr 1fr; }
  /* смугам стратегій і сетапів тісно: рядок «назва · n +$x  y% WR»
     потребує близько 260px тексту, тож копія-колонка тут вужча,
     а дует забирає звільнене */
  [data-site-refresh-content] .fxt--live .fxt-panel--strategies { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); }
  /* чип у дуеті – нижній правий кут композиції */
  [data-site-refresh-content] .fx-live--duo .fxl-chip { top: auto; bottom: -10px; right: -6px; }
}/* --- сцена з віджетами --- *//* Телефон: карусель, а не стовпчик. Пʼять віджетів один під одним
   давали пʼять екранів однакових карток – гортати їх ніхто не буде.
   Горизонтальний ряд із прилипанням показує все за один екран і
   поводиться як застосунок, а не як довгий список. */[data-site-refresh-content] .fx-stage {
  display: flex; gap: var(--sp-3);
  /* без цього всі картки тягнуться до найвищої: у «Account Balance»
     контенту на 140px, а плитка ставала 511px через сусідній
     «P&L Analysis» – усередині картки зяяла порожнеча */
  align-items: flex-start;
  padding: var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--surface-base);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}[data-site-refresh-content] .fx-stage::-webkit-scrollbar { display: none; }/* Однакова висота карток – інакше під низькою карткою лишалась порожня
   смуга у висоту найвищої сусідки. Але 320px були замалі: у календаря
   вмісту на 594px, тобто дві третини віджета ховалось. Тепер висота
   йде від екрана, і видно рівно стільки, скільки той дозволяє. */[data-site-refresh-content] .fx-stage > .fx-tile {
  flex: 0 0 86%; height: clamp(320px, 62vh, 560px);
  scroll-snap-align: center;
}[data-site-refresh-content] .fx-stage > .fx-tile > * { height: 100%; overflow: hidden; }/* Картки однакової висоти, а вміст у них різного розміру: у графіка
   балансу лише 140px, і під ним лишалась пустка. Даємо тілу віджета
   й самому графіку рости – svg із viewBox масштабується сам. */[data-site-refresh-content] .fx-stage .widget-content { flex: 1 1 auto; min-height: 0; }[data-site-refresh-content] .fx-stage .chart { flex: 1 1 auto; min-height: 0; height: auto; }/* Тултіпи днів календаря – на дотику вони або не викликаються, або
   вилазять за обрізану картку каруселі. Показуємо лише там, де є курсор. */@media (hover: none) {
  [data-site-refresh-content] .fx-stage .cal-tip { display: none; }
}/* у журналі плитка одна – каруселі нема чого показувати */[data-site-refresh-content] .fx-stage > .fx-tile:only-child { flex-basis: 100%; }/* Згасання вмикає скрипт і тільки там, де вміст справді не влазить:
   інакше низ невисокого віджета блякнув би без причини. */@supports (mask-image: linear-gradient(#000, #000)) {
  [data-site-refresh-content] .fx-stage > .fx-tile.is-clipped > * {
    mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
  }
}/* --- точки каруселі --- */[data-site-refresh-content] .fx-dots {
  display: flex; justify-content: center; gap: 6px;
  padding: 0 0 var(--sp-4);
  background: var(--surface-base);
}[data-site-refresh-content] .fx-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border-light);
  transition: background .18s ease, transform .18s ease;
}[data-site-refresh-content] .fx-dots i.is-on { background: var(--accent-bright); transform: scale(1.25); }/* натяк, що ряд гортається – той самий прийом, що й на вкладках */@supports (mask-image: linear-gradient(#000, #000)) {
  [data-site-refresh-content] .fx-stage:not(:has(> .fx-tile:only-child)) {
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
}/* Ширину тайла задає розмітка через data-c (колонки) і data-r (рядки).
   Раніше це були інлайнові grid-column, і щоб перебити їх на телефоні,
   доводилось писати !important. Далі кожне правило мусило бути теж
   !important, а відновлювали ширину за підрядком у style: селектор
   [style*="span 2"] тайла на три колонки просто не бачив – журнал
   лишався на третину сцени. З атрибутами нічого перебивати не треба. */[data-site-refresh-content] .fx-stage .fx-tile { grid-column: 1 / -1; grid-row: auto; min-width: 0; }[data-site-refresh-content] .fx-stage .dashboard-widget { height: 100%; }/* Віджети малювались для широких секцій, а тут стоять у плитці на 330px.
   Два місця через це вилазили за плитку, і .fxt-panel їх обрізав. *//* П’ять днів тижня: підпис «+$2,220.00» тримав колонку на 91px, тож
   п’ять колонок просили 435px замість наявних 296. minmax(0, 1fr)
   дозволяє колонці стиснутись, картка тягнеться за нею. */[data-site-refresh-content] .fx-stage .weekdays-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }[data-site-refresh-content] .fx-stage .weekday-col { min-width: 0; width: 100%; }[data-site-refresh-content] .fx-stage .weekday-card { width: 100%; padding: 6px 4px; }[data-site-refresh-content] .fx-stage .weekday-sum { font-size: 10px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }/* Журнальна таблиця має 21 колонку і рядок метрик такий самий широкий:
   у будь-яку плитку вони не влазять і гортаються вбік. Різаний по
   половині слова край читався як поламана верстка, тому гасимо його —
   тим самим прийомом, що й ряд вкладок вище. */@supports (mask-image: linear-gradient(#000, #000)) {
  [data-site-refresh-content] .fx-stage .jrn-scroll,
  [data-site-refresh-content] .fx-stage .jrn-metrics {
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
  }
}/* Шапка віджета: заголовок і перемикачі в один ряд не вміщаються на
   телефоні. Дозволяємо перенос – на ширших екранах ряд і так цілий. */[data-site-refresh-content] .fx-stage .widget-header { flex-wrap: wrap; }[data-site-refresh-content] .fx-stage .widget-controls,
[data-site-refresh-content] .fx-stage .widget-controls-stack { flex-wrap: wrap; justify-content: flex-end; }/* коли контроли зʼїхали на другий рядок, space-between лишає їх ліворуч
   під заголовком – auto-відступ повертає їх до правого краю */[data-site-refresh-content] .fx-stage .widget-header > .widget-controls { margin-left: auto; }/* ============================================================
   3. ПЛАНШЕТ
   ============================================================ */@media (min-width: 701px) {
  /* від планшета місця вистачає – повертаємось до сітки */
  [data-site-refresh-content] .fx-stage {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--sp-5); gap: var(--sp-4);
    overflow: visible; scroll-snap-type: none;
  }
  @supports (mask-image: linear-gradient(#000, #000)) {
    [data-site-refresh-content] .fx-stage:not(:has(> .fx-tile:only-child)) { mask-image: none; }
  }
  /* Стеля висоти плитки. Без неї панель виростала до 1263px при вікні
     на 800px: етап не вміщався в екран ноутбука, а деякі займали два.
     Що не влізло, гасне донизу — згасання вмикає скрипт. */
  [data-site-refresh-content] .fx-stage > .fx-tile { height: auto; max-height: 420px; }
  [data-site-refresh-content] .fx-stage .widget-content, [data-site-refresh-content] .fx-stage .chart { flex: 0 1 auto; min-height: auto; }
  [data-site-refresh-content] .fx-stage > .fx-tile > * { height: 100%; overflow: hidden; }
  [data-site-refresh-content] .fx-dots { display: none; }
  [data-site-refresh-content] .fx-stage .fx-tile { grid-column: auto; }
  /* колонок лише дві, тож і «на дві», і «на три» – це вся ширина */
  [data-site-refresh-content] .fx-stage .fx-tile[data-c="2"],
  [data-site-refresh-content] .fx-stage .fx-tile[data-c="3"] { grid-column: 1 / -1; }
  [data-site-refresh-content] .fx-copy { grid-template-columns: 44px minmax(0, 1fr); padding: var(--sp-6); }
  [data-site-refresh-content] .fx-side { grid-column: 2; }
}/* ============================================================
   4. ДЕСКТОП
   ============================================================ */@media (min-width: 1081px) {
  [data-site-refresh-content] .hero--fx { padding: calc(var(--nav-height) + var(--sp-12)) 0 var(--sp-16); }
  [data-site-refresh-content] .fx-hero-inner {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
    gap: var(--sp-10); align-items: center; padding: 0 var(--sp-6);
  }
  [data-site-refresh-content] .fxt-barwrap { text-align: center; }
  /* на десктопі шість вкладок вміщаються – пігулка стискається по вмісту
     й стоїть по центру, а не тягнеться на всю ширину */
  [data-site-refresh-content] .fxt-bar { display: inline-flex; overflow: visible; }
  /* на десктопі гортати нічого не треба – згасання прибираємо */
  @supports (mask-image: linear-gradient(#000, #000)) { [data-site-refresh-content] .fxt-bar { mask-image: none; } }
  [data-site-refresh-content] .fx-copy { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 340px); padding: var(--sp-7); }
  [data-site-refresh-content] .fx-side { grid-column: 3; }
  [data-site-refresh-content] .fx-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--sp-6); }
  [data-site-refresh-content] .fx-stage--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-site-refresh-content] .fx-stage--3 .fx-tile[data-c="2"] { grid-column: span 2; }
  [data-site-refresh-content] .fx-stage--3 .fx-tile[data-c="3"] { grid-column: 1 / -1; }
  [data-site-refresh-content] .fx-stage .fx-tile[data-r="2"] { grid-row: span 2; }
}/* ============================================================
   5. БЛОК ПЕРЕВАГ: цифри доказів + три наслідки (концепт B)
   ============================================================ *//* смуга цифр - компонент trust-line з головної v2, дослівно:
   підпис праворуч від числа, яскравий вертикальний перелив */[data-site-refresh-content] .trust-line {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 20px 0;
  padding: 0 24px 10px;
}[data-site-refresh-content] .trust-line > span {
  display: flex; align-items: center; gap: 14px; padding: 0 46px;
}[data-site-refresh-content] .trust-line b {
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--accent-mid) 0%, var(--accent) 38%, var(--accent-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .trust-line b {
  background: linear-gradient(180deg, #52e392 0%, #3cd97a 38%, #2d8a55 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #3cd97a;
}[data-site-refresh-content] .trust-line em {
  font-style: normal; font-size: 14px; line-height: 1.3;
  color: var(--text-muted); max-width: 11ch;
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .trust-line em { color: rgba(255, 255, 255, .50); }[data-site-refresh-content] .trust-line i { width: 1px; height: 44px; background: var(--border); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .trust-line i { background: rgba(255, 255, 255, .10); }[data-site-refresh-content] .trust-line + .db-grid { margin-top: var(--sp-7); }@media (max-width: 720px) {
  [data-site-refresh-content] .trust-line { gap: 18px 0; }
  [data-site-refresh-content] .trust-line > span { padding: 0 20px; }
  [data-site-refresh-content] .trust-line i { display: none; }
}[data-site-refresh-content] .db-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }[data-site-refresh-content] .db-card {
  border: 1px solid var(--border); border-radius: var(--r-16);
  background: var(--surface-card); padding: var(--sp-5);
}[data-site-refresh-content] .db-card b { display: block; font-size: var(--fs-16); font-weight: 700; color: var(--text-primary); margin: 0 0 8px; }[data-site-refresh-content] .db-card span { font-size: var(--fs-14); line-height: 1.6; color: var(--text-muted); }@media (max-width: 767px) {
  [data-site-refresh-content] .db-grid { grid-template-columns: 1fr; }
}/* ============================================================
   BitStat – сторінка /contact-us
   ------------------------------------------------------------
   Стилі поверх дизайн-системи: ілюстрація в герої з чипом,
   клікабельні картки каналів. Спершу телефон, далі ширше.
   ============================================================ *//* ── герой ── */[data-site-refresh-content] .cn-hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }[data-site-refresh-content] .cn-hero-actions .btn-primary { margin-top: 0; display: inline-flex; align-items: center; gap: var(--sp-2); }[data-site-refresh-content] .cn-hero-actions .btn-primary svg { width: 17px; height: 17px; }[data-site-refresh-content] .cn-hero-actions .btn-secondary {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-5); min-height: 48px;
  border: 1px solid var(--border-light); border-radius: var(--r-12);
  font-size: var(--fs-14); font-weight: 600; color: var(--text-primary);
  text-decoration: none; background: var(--surface-card);
}[data-site-refresh-content] .cn-hero-actions .btn-secondary:hover { border-color: var(--text-muted); }[data-site-refresh-content] .cn-hero-art { position: relative; margin-top: var(--sp-4); }[data-site-refresh-content] .cn-hero-art img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-20);
  border: 1px solid var(--border);
  box-shadow: var(--public-shadow);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .cn-hero-art img {
  box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 26px 60px rgba(0,0,0,.55);
}/* чип позиціюється завжди: перебиваємо мобільний static зі split.css */[data-site-refresh-content] .cn-hero-art .cn-chip { position: absolute; top: -14px; right: 0; z-index: 2; margin: 0; }@media (min-width: 1201px) { [data-site-refresh-content] .cn-hero-art .cn-chip { right: -10px; } }@media (min-width: 1081px) { [data-site-refresh-content] .cn-hero-art { margin-top: 0; } }/* ── канали: три клікабельні картки ── */[data-site-refresh-content] .cn-channels { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }/* Картки каналів - головна дія сторінки, тож секція виділена
   (20.08.2026): сірої заливки більше немає (як на /pricing і
   /partners), натомість тонке зелене світіння з-під картки і
   зелений кант, який наливається при наведенні. */[data-site-refresh-content] .cn-ch {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-6);
  border: 1px solid var(--public-border); border-radius: var(--r-16);
  background: var(--public-surface);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .cn-ch {
  border-color: rgba(60, 217, 122, .18);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(60, 217, 122, .07), transparent 62%),
    linear-gradient(rgba(255, 255, 255, .012), transparent 40%);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, .03) inset;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}[data-site-refresh-content] .cn-ch:hover, [data-site-refresh-content] .cn-ch:focus-visible {
  border-color: var(--public-accent);
  transform: translateY(-3px);
  background: var(--public-accent-soft);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .cn-ch:hover,
html:not([data-marketing-theme='light']) [data-site-refresh-content] .cn-ch:focus-visible {
  border-color: rgba(60, 217, 122, .45);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, .04) inset, 0 18px 40px rgba(11, 58, 33, .35);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(60, 217, 122, .12), transparent 62%),
    linear-gradient(rgba(255, 255, 255, .02), transparent 40%);
}[data-site-refresh-content] .cn-ch-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--r-12);
  background: var(--public-accent-soft); color: var(--public-accent);
  border: 1px solid color-mix(in srgb, var(--public-accent) 22%, var(--public-border));
  transition: background .18s ease;
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .cn-ch-ico {
  background: var(--green-bg);
  color: var(--accent-bright);
  border-color: rgba(60, 217, 122, .22);
}[data-site-refresh-content] .cn-ch:hover .cn-ch-ico { background: var(--public-accent-soft); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .cn-ch:hover .cn-ch-ico { background: rgba(60, 217, 122, .16); }[data-site-refresh-content] .cn-ch-ico svg, [data-site-refresh-content] .cn-ch-ico img { width: 20px; height: 20px; }[data-site-refresh-content] .cn-ch-n {
  position: absolute; top: var(--sp-4); right: var(--sp-5);
  font-size: var(--fs-13); font-weight: 700; color: var(--text-muted);
  letter-spacing: .06em;
}[data-site-refresh-content] .cn-ch h3 { margin: var(--sp-2) 0 0; font-size: var(--fs-16); font-weight: 700; color: var(--text-primary); }[data-site-refresh-content] .cn-ch p { margin: 0; font-size: var(--fs-13); line-height: 1.6; color: var(--text-secondary); }[data-site-refresh-content] .cn-ch-go {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2); min-height: 24px;
  font-size: var(--fs-13); font-weight: 600; color: var(--accent-bright);
}[data-site-refresh-content] .cn-ch-go svg { width: 14px; height: 14px; transition: transform .18s ease; }[data-site-refresh-content] .cn-ch:hover .cn-ch-go svg { transform: translateX(3px); }@media (min-width: 861px) {
  [data-site-refresh-content] .cn-channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}/* обіцянки йдуть одразу після каналів: без подвійного повітря */[data-site-refresh-content] #promise { padding-top: 0; }/* пошта в CTA */[data-site-refresh-content] .cn-mail { color: var(--accent-bright); font-weight: 600; text-decoration: none; }[data-site-refresh-content] .cn-mail:hover { text-decoration: underline; }/* Проміжки між секціями були 200px (100 знизу + 100 зверху) і читались
   як провал — той самий ритм, що на решті сторінок (20.08.2026). */[data-site-refresh-content] #channels, [data-site-refresh-content] #faq, [data-site-refresh-content] #write-us { padding-top: var(--sp-16); }[data-site-refresh-content] #channels, [data-site-refresh-content] #promise, [data-site-refresh-content] #faq, [data-site-refresh-content] #write-us { padding-bottom: var(--sp-16); }/* Базова .fgrid має чотири колонки, а обіцянок три - четверта
   колонка лишалась порожньою і ряд висів притиснутим ліворуч.
   Явні три колонки на всю ширину, як у ряду каналів вище. */@media (min-width: 1001px) {
  [data-site-refresh-content] #promise .fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}/* Обіцянки: сіра заливка робила їх важчими за картки каналів і
   ламала ієрархію - головна дія має домінувати. Тепер це тихий
   ряд без фону, лише іконка, текст і тонка лінія зверху. */[data-site-refresh-content] #promise .fgrid-item {
  background: none; border: 0; border-top: 1px solid var(--border-a10);
  border-radius: 0; padding: var(--sp-5) 0 0;
}[data-site-refresh-content] #promise .fgrid-item:hover { border-color: var(--public-accent); transform: none; }html:not([data-marketing-theme='light']) [data-site-refresh-content] #promise .fgrid-item:hover { border-color: rgba(60, 217, 122, .3); }.navbar[data-marketing-header] {
    --marketing-header-height: 65px;
    --marketing-page-bg: var(--public-page-bg, #f7f8fa);
    --marketing-surface: var(--public-surface, #fff);
    --marketing-surface-muted: var(--public-elevated, #f0f2f5);
    --marketing-bg-primary: var(--public-page-bg, #f7f8fa);
    --marketing-bg-tertiary: var(--public-elevated, #f0f2f5);
    --marketing-border: var(--public-border, #d9dfe7);
    --marketing-text: var(--public-text-primary, #171a1f);
    --marketing-text-primary: var(--public-text-primary, #171a1f);
    --marketing-text-secondary: var(--public-text-secondary, #3f454d);
    --marketing-text-muted: var(--public-text-muted, #5d6570);
    --marketing-accent: var(--public-accent, #0f7650);
    --marketing-accent-hover: var(--public-accent-hover, #0b5f40);
    --marketing-accent-soft: var(--public-accent-soft, rgba(15, 118, 80, 0.12));
    --marketing-green: var(--public-accent, #0f7650);
    --marketing-positive: var(--public-success, #11734f);
    --marketing-negative: var(--public-danger, #b42318);
    --marketing-gradient: linear-gradient(135deg, var(--public-accent, #0f7650), var(--public-accent-hover, #0b5f40));
    --marketing-shadow: var(--public-shadow, 0 18px 42px rgba(23, 26, 31, 0.1), 0 3px 10px rgba(23, 26, 31, 0.04));
    --marketing-focus-ring: var(--public-focus-ring, rgba(15, 118, 80, 0.42));
    --marketing-dropdown-surface: var(--public-surface, #fff);
    --marketing-dropdown-border: var(--public-border, #d9dfe7);
    --marketing-dropdown-text-primary: var(--public-text-primary, #171a1f);
    --marketing-dropdown-text-secondary: var(--public-text-secondary, #3f454d);
    --marketing-dropdown-text-muted: var(--public-text-muted, #5d6570);
    --marketing-dropdown-shadow: var(--public-shadow, 0 18px 42px rgba(23, 26, 31, 0.1), 0 3px 10px rgba(23, 26, 31, 0.04));
    color-scheme: inherit;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 16px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--marketing-text-primary);
    background: var(--marketing-surface);
    border-bottom: 1px solid var(--marketing-border);
}html:not([data-marketing-theme='light']) .navbar[data-marketing-header] {
    --marketing-page-bg: #09090b;
    --marketing-surface: #09090b;
    --marketing-surface-muted: #18181b;
    --marketing-bg-primary: #09090b;
    --marketing-bg-tertiary: #18181b;
    --marketing-border: #27272a;
    --marketing-text: #fafafa;
    --marketing-text-primary: #fafafa;
    --marketing-text-secondary: #e4e4e7;
    --marketing-text-muted: #c7c7cc;
    --marketing-accent: #3cd97a;
    --marketing-accent-hover: #59d68c;
    --marketing-accent-soft: rgba(60, 217, 122, 0.12);
    --marketing-green: #2d694c;
    --marketing-positive: #3cd97a;
    --marketing-negative: #f43f5e;
    --marketing-gradient: linear-gradient(135deg, #3a8a63, #2d694c);
    --marketing-shadow: 0 18px 42px rgba(0, 0, 0, 0.35), 0 3px 10px rgba(0, 0, 0, 0.2);
    --marketing-focus-ring: rgba(60, 217, 122, 0.42);
    --marketing-dropdown-surface: #18181b;
    --marketing-dropdown-border: #27272a;
    --marketing-dropdown-text-primary: #fafafa;
    --marketing-dropdown-text-secondary: #e4e4e7;
    --marketing-dropdown-text-muted: #c7c7cc;
    --marketing-dropdown-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
    color: #fafafa;
    background: #09090b;
}[data-marketing-header] .nav-container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}[data-marketing-header] .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--marketing-text-primary);
    font-size: 18px;
    font-weight: 700;
}[data-marketing-header] .bitstat-brand-lockup {
    gap: 10px;
    flex: 0 0 auto;
}[data-marketing-header] .bitstat-brand-mark {
    display: block;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    object-fit: contain;
}[data-marketing-header] .bitstat-brand-wordmark {
    color: var(--marketing-text-primary);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}[data-marketing-header] .logo-full {
    width: auto;
    height: 32px;
    object-fit: contain;
}[data-marketing-header] .logo-full.small {
    height: 24px;
}[data-marketing-header] .nav-links {
    display: flex;
    gap: 32px;
    flex-shrink: 0;
}[data-marketing-header] .nav-links > a,
[data-marketing-header] .nav-dropdown-trigger,
[data-marketing-header] .nav-login,
[data-marketing-header] .nav-cta {
    white-space: nowrap;
}[data-marketing-header] .nav-links a {
    color: var(--marketing-text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}[data-marketing-header] .nav-links a:hover {
    color: var(--marketing-text-primary);
}[data-marketing-header] .nav-links a[aria-current="page"],
[data-marketing-header] .mobile-menu a[aria-current="page"] {
    color: var(--marketing-accent);
}html:not([data-marketing-theme='light']) [data-marketing-header] .nav-links a[aria-current="page"],
html:not([data-marketing-theme='light']) [data-marketing-header] .mobile-menu a[aria-current="page"] {
    color: #59d68c;
}[data-marketing-header] .nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle {
    position: relative;
    display: inline-flex;
    flex: 0 0 64px;
    width: 64px;
    height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--marketing-border);
    border-radius: 999px;
    color: var(--marketing-text-primary);
    background: var(--marketing-surface-muted);
    cursor: pointer;
    appearance: none;
    transition: border-color 160ms ease, background-color 160ms ease;
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle[aria-checked="true"] {
    border-color: color-mix(in srgb, var(--marketing-accent) 30%, var(--marketing-border));
    background: var(--marketing-accent-soft);
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle:hover {
    border-color: var(--marketing-accent-hover);
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle:focus-visible {
    outline: 3px solid var(--marketing-focus-ring);
    outline-offset: 2px;
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-icon,
[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-icon svg {
    display: block;
    width: 14px;
    height: 14px;
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-icon {
    position: absolute;
    top: 50%;
    z-index: 2;
    pointer-events: none;
    transform: translateY(-50%);
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-icon--moon {
    left: 8px;
    color: var(--public-theme-moon, #4f6f9f);
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-icon--sun {
    right: 8px;
    color: var(--public-theme-sun, #9a6500);
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-thumb {
    position: absolute;
    top: 50%;
    left: 3px;
    z-index: 1;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--marketing-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    transform: translateY(-50%);
    transition: transform 180ms ease;
}html[data-marketing-theme="dark"] [data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-thumb {
    transform: translateY(-50%);
}html[data-marketing-theme="light"] [data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-thumb {
    transform: translate(32px, -50%);
}[data-marketing-header][data-marketing-theme-switcher="true"] .mobile-menu-theme-row {
    display: flex;
    align-items: center;
    min-height: 52px;
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle--mobile {
    height: 44px;
}@media (prefers-reduced-motion: reduce) {
    [data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle,
    [data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-thumb {
        transition: none;
    }
}[data-marketing-header] .lang-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--marketing-border);
    border-radius: 10px;
    background: var(--marketing-surface-muted);
    color: var(--marketing-text-primary);
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s;
}[data-marketing-header] .lang-toggle:hover {
    border-color: var(--marketing-accent);
}[data-marketing-header] .marketing-language-switcher {
    position: relative;
}[data-marketing-header] .lang-toggle {
    list-style: none;
}[data-marketing-header] .lang-toggle::-webkit-details-marker {
    display: none;
}[data-marketing-header] .lang-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}[data-marketing-header] .marketing-language-switcher[open] .lang-toggle svg {
    transform: rotate(180deg);
}[data-marketing-header] .lang-current {
    color: var(--marketing-text-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}[data-marketing-header] .marketing-language-options {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 2;
    display: grid;
    min-width: 152px;
    padding: 6px;
    border: 1px solid var(--marketing-dropdown-border);
    border-radius: 10px;
    background: var(--marketing-dropdown-surface);
    box-shadow: var(--marketing-dropdown-shadow);
}[data-marketing-header] .marketing-language-option {
    display: block;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--marketing-dropdown-text-secondary);
    font-size: 14px;
    font-weight: 500;
    overflow-wrap: anywhere;
    text-decoration: none;
}[data-marketing-header] .marketing-language-option:hover,
[data-marketing-header] .marketing-language-option:focus-visible,
[data-marketing-header] .marketing-language-option[aria-current="page"] {
    color: var(--marketing-dropdown-text-primary);
    background: var(--marketing-surface-muted);
}[data-marketing-header] .nav-login {
    color: var(--marketing-text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}[data-marketing-header] .nav-login:hover {
    color: var(--marketing-text-primary);
}[data-marketing-header] .nav-cta,
[data-marketing-header] .nav-cta-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--marketing-accent);
    border-radius: 8px;
    background: var(--marketing-accent);
    box-shadow: 0 4px 14px rgba(15, 118, 80, 0.18);
    color: var(--public-on-accent, var(--on-accent, #fff));
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}[data-marketing-header] .nav-cta {
    min-height: 36px;
    padding: 8px 18px;
    font-size: 14px;
}[data-marketing-header] .nav-cta-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}[data-marketing-header] .nav-cta:hover,
[data-marketing-header] .nav-cta-mobile:hover {
    border-color: var(--marketing-accent-hover);
    background: var(--marketing-accent-hover);
    box-shadow: 0 5px 16px rgba(11, 95, 64, 0.2);
}[data-marketing-header] .nav-cta:hover .nav-cta-icon,
[data-marketing-header] .nav-cta-mobile:hover .nav-cta-icon {
    transform: translateX(2px);
}[data-marketing-header] .nav-cta:focus-visible,
[data-marketing-header] .nav-cta-mobile:focus-visible {
    outline: 2px solid var(--marketing-focus-ring);
    outline-offset: 3px;
}[data-marketing-header] .nav-dropdown {
    position: relative;
}[data-marketing-header] .nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}[data-marketing-header] .nav-dropdown-trigger svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
}[data-marketing-header] .nav-dropdown:hover .nav-dropdown-trigger svg {
    transform: rotate(180deg);
}[data-marketing-header] .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    min-width: 280px;
    padding: 8px;
    z-index: 2;
    border: 1px solid var(--marketing-dropdown-border);
    border-radius: 12px;
    background: var(--marketing-dropdown-surface);
    box-shadow: var(--marketing-dropdown-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}[data-marketing-header] .nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}[data-marketing-header] .nav-dropdown--resources[open] .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}[data-marketing-header] .nav-dropdown--resources::after {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 1;
    width: min(580px, calc(100vw - 32px));
    height: 12px;
    content: "";
    transform: translateX(-50%);
}[data-marketing-header] .nav-resources-summary {
    list-style: none;
}[data-marketing-header] .nav-resources-summary::-webkit-details-marker {
    display: none;
}[data-marketing-header] .nav-resources-summary::marker {
    content: "";
}[data-marketing-header] .nav-dropdown--resources[open] .nav-resources-summary svg {
    transform: rotate(180deg);
}[data-marketing-header] .nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--marketing-dropdown-text-secondary) !important;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}[data-marketing-header] .nav-dropdown-menu a:hover {
    background: var(--marketing-surface-muted);
    color: var(--marketing-dropdown-text-primary) !important;
}[data-marketing-header] .nav-dropdown-menu a > svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--marketing-accent);
}[data-marketing-header] .dd-title {
    display: block;
    color: var(--marketing-dropdown-text-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}[data-marketing-header] .dd-desc {
    display: block;
    color: var(--marketing-dropdown-text-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
}[data-marketing-header] .nav-dropdown-menu--resources {
    display: grid;
    width: min(580px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 12px;
}[data-marketing-header] .nav-dropdown-menu--resources .nav-resource-link {
    min-height: 76px;
    align-items: flex-start;
    padding: 12px;
}[data-marketing-header] .nav-resource-link > div {
    min-width: 0;
}[data-marketing-header] details[data-marketing-mobile-disclosure] {
    margin: 0;
}[data-marketing-header] .mobile-menu-disclosure-summary {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px;
    border-radius: 10px;
    cursor: pointer;
    list-style: none;
}[data-marketing-header] .mobile-menu-disclosure-summary::-webkit-details-marker {
    display: none;
}[data-marketing-header] .mobile-menu-disclosure-summary::marker {
    content: "";
}[data-marketing-header] .mobile-menu-disclosure-summary svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}[data-marketing-header] details[data-marketing-mobile-disclosure][open] .mobile-menu-disclosure-summary svg {
    transform: rotate(180deg);
}[data-marketing-header] .mobile-menu-disclosure-label {
    color: var(--marketing-text-primary);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}[data-marketing-header] .mobile-menu-disclosure-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0 8px;
}[data-marketing-header] .mobile-menu-disclosure-panel a {
    display: flex;
    min-height: 48px;
    align-items: center;
}[data-marketing-header] .mobile-menu-feature-links a,
[data-marketing-header] .mobile-menu-resource-links a {
    padding: 0 12px;
    border-radius: 10px;
    color: var(--marketing-text-secondary);
}[data-marketing-header] .mobile-menu-resource-links a {
    min-height: 64px;
}[data-marketing-header] .mobile-menu-divider {
    height: 1px;
    margin: 8px 0;
    background: var(--marketing-border);
}[data-marketing-header] .mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 9px;
    border: 1px solid var(--marketing-border);
    border-radius: 10px;
    background: var(--marketing-surface-muted);
    color: var(--marketing-text-primary);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}[data-marketing-header] .mobile-menu-btn:hover {
    border-color: var(--marketing-accent);
    background: var(--marketing-accent-soft);
}[data-marketing-header] .mobile-menu-button-icon {
    display: flex;
}[data-marketing-header] .mobile-menu-button-icon--close,
.navbar[data-marketing-header].menu-open .mobile-menu-button-icon--open {
    display: none;
}.navbar[data-marketing-header].menu-open .mobile-menu-button-icon--close {
    display: flex;
}[data-marketing-header] .mobile-menu-btn svg {
    width: 22px;
    height: 22px;
}[data-marketing-header] .mobile-menu {
    position: fixed;
    inset: var(--marketing-header-height) 0 0;
    display: none;
    flex-direction: column;
    height: calc(100dvh - var(--marketing-header-height));
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--marketing-text-primary);
    background: var(--marketing-surface);
    box-shadow: var(--marketing-shadow);
}[data-marketing-header] .mobile-menu-scroll {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 12px 24px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--marketing-accent) transparent;
    scrollbar-width: thin;
}[data-marketing-header] .mobile-menu-scroll::-webkit-scrollbar {
    width: 6px;
}[data-marketing-header] .mobile-menu-scroll::-webkit-scrollbar-track {
    background: transparent;
}[data-marketing-header] .mobile-menu-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--marketing-accent);
}[data-marketing-header] .mobile-menu a {
    color: var(--marketing-text-secondary);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
}[data-marketing-header] .mobile-menu .nav-cta-mobile {
    color: var(--public-on-accent, var(--on-accent, #fff));
}[data-marketing-header] .mobile-menu-scroll > a {
    display: flex;
    min-height: 52px;
    align-items: center;
    padding: 0 2px;
    border-radius: 10px;
}[data-marketing-header] .mobile-menu-scroll > a:hover,
[data-marketing-header] .mobile-menu-feature-links a:hover,
[data-marketing-header] .mobile-menu-resource-links a:hover {
    color: var(--marketing-text-primary);
    background: var(--marketing-surface-muted);
}[data-marketing-header] .mobile-menu-footer {
    flex: 0 0 auto;
    padding: 0 24px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--marketing-border);
    background: var(--marketing-surface);
    box-shadow: 0 -10px 24px rgba(23, 26, 31, 0.06);
}[data-marketing-header] .mobile-menu-footer .mobile-menu-divider {
    margin: 0 0 8px;
}[data-marketing-header] .mobile-menu-language {
    margin: 0;
}[data-marketing-header] .mobile-menu-language-summary {
    display: inline-flex;
    width: fit-content;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid var(--marketing-border);
    border-radius: 10px;
    color: var(--marketing-text-primary);
    background: var(--marketing-surface-muted);
    cursor: pointer;
    list-style: none;
}[data-marketing-header] .mobile-menu-language-summary::-webkit-details-marker {
    display: none;
}[data-marketing-header] .mobile-menu-language-summary::marker {
    content: "";
}[data-marketing-header] .mobile-menu-language-summary svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}[data-marketing-header] .mobile-menu-language[open] .mobile-menu-language-summary {
    border-color: var(--marketing-accent);
    background: var(--marketing-accent-soft);
}[data-marketing-header] .mobile-menu-language[open] .mobile-menu-language-summary svg {
    transform: rotate(180deg);
}[data-marketing-header] .mobile-menu-language-current {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
}[data-marketing-header] .mobile-menu-language-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
    gap: 8px;
    padding: 8px 0 4px;
}[data-marketing-header] .mobile-menu-language-option {
    display: flex;
    width: 100%;
    min-height: 44px !important;
    min-width: 44px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 10px !important;
    border: 1px solid var(--marketing-border);
    border-radius: 8px;
    color: var(--marketing-text-secondary);
    background: var(--marketing-surface);
    font-size: 14px !important;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-align: left;
}[data-marketing-header] .mobile-menu-language-option[aria-current="page"] {
    color: var(--marketing-text-primary);
    border-color: var(--marketing-accent);
    background: var(--marketing-accent-soft);
}[data-marketing-header] .mobile-menu-login-row {
    display: flex;
    min-height: 48px;
    align-items: center;
}[data-marketing-header] .mobile-menu-login {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: flex-end;
    padding: 0 2px;
}[data-marketing-header] .mobile-menu-btn:focus-visible,
[data-marketing-header] .mobile-menu-disclosure-summary:focus-visible,
[data-marketing-header] .mobile-menu-language-summary:focus-visible,
[data-marketing-header] .mobile-menu a:focus-visible {
    outline: 2px solid var(--marketing-focus-ring);
    outline-offset: 2px;
}@media (max-width: 1100px) {
    [data-marketing-header] .nav-container {
        padding: 0 28px;
    }

    [data-marketing-header] .nav-links {
        gap: 18px;
    }

    [data-marketing-header] .nav-right {
        gap: 10px;
    }
}[data-marketing-header] .nav-cta-mobile {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    margin: 8px 0 0;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    text-align: center;
}@media (prefers-reduced-motion: reduce) {
    [data-marketing-header] .nav-cta,
    [data-marketing-header] .nav-cta-mobile {
        animation: none;
        transition: none;
    }

    [data-marketing-header] .nav-cta-icon {
        transition: none;
    }
}@media (max-width: 1280px) {
    .navbar[data-marketing-header] {
        --marketing-header-height: 77px;
    }

    html[data-marketing-mobile-menu-open],
    html[data-marketing-mobile-menu-open] body {
        overflow: hidden;
        overscroll-behavior: none;
    }

    [data-marketing-header] .nav-links,
    [data-marketing-header] .nav-right {
        display: none;
    }

    [data-marketing-header] .mobile-menu-btn {
        display: flex;
    }

    [data-marketing-header] .mobile-menu.open {
        display: flex;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
}/* Dark-mode CTA border rotates a compositor layer instead of a registered angle. */html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta,
html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile {
    --marketing-cta-surface: #111111;
    --marketing-cta-hover-surface: #111111;
    --marketing-cta-border-gradient:
        conic-gradient(
            from 0deg,
            rgba(48, 192, 109, 0.22) 0deg,
            #30c06d 54deg,
            #9aefbb 96deg,
            rgba(48, 192, 109, 0.2) 154deg,
            rgba(45, 105, 76, 0.34) 235deg,
            #4ade80 302deg,
            rgba(48, 192, 109, 0.22) 360deg
        );
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    box-shadow:
        0 0 16px rgba(48, 192, 109, 0.12),
        inset 0 0 14px rgba(48, 192, 109, 0.05);
    color: #fff;
    transition: box-shadow 0.2s ease;
}html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta::before,
html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile::before,
html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta::after,
html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile::after {
    position: absolute;
    content: "";
    pointer-events: none;
}html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta::before,
html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile::before {
    z-index: -2;
    top: 50%;
    left: 50%;
    width: 300%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--marketing-cta-border-gradient);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: marketingCtaBorderSpin 3s linear infinite;
}html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta::after,
html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile::after {
    z-index: -1;
    inset: 1px;
    border-radius: 9px;
    background: var(--marketing-cta-surface);
}/* The original theme-switcher header uses its raised surface for the CTA. */html:not([data-marketing-theme='light']) .navbar[data-marketing-header][data-marketing-theme-switcher="true"] {
    --marketing-surface: #111113;
}html:not([data-marketing-theme='light']) .navbar[data-marketing-header][data-marketing-theme-switcher="true"] .nav-cta,
html:not([data-marketing-theme='light']) .navbar[data-marketing-header][data-marketing-theme-switcher="true"] .nav-cta-mobile {
    --marketing-cta-surface: var(--marketing-surface);
    --marketing-cta-hover-surface: var(--marketing-surface-muted);
}html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-icon {
    filter: drop-shadow(0 0 5px rgba(48, 192, 109, 0.28));
}html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta:hover,
html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile:hover {
    --marketing-cta-surface: var(--marketing-cta-hover-surface);
    background: none;
}html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta:focus-visible,
html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile:focus-visible {
    outline: 2px solid #9aefbb;
    outline-offset: 3px;
}@keyframes marketingCtaBorderSpin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}@media (prefers-reduced-motion: reduce) {
    html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta,
    html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile,
    html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-icon {
        transition: none;
    }

    html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta::before,
    html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile::before {
        animation: none;
    }
}@media (max-width: 640px) {
    [data-marketing-header] .nav-container {
        padding: 0 20px;
    }

    [data-marketing-header] .mobile-menu-scroll {
        padding-right: 20px;
        padding-left: 20px;
    }

    [data-marketing-header] .mobile-menu-footer {
        padding-right: 20px;
        padding-left: 20px;
    }
}/* Public header variants share the fixed light palette defined above. */* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}:root {
    --bg-primary: #09090b;
    --bg-secondary: #111113;
    --bg-tertiary: #18181b;
    --bg-card: #1a1a1f;
    --bg-card-hover: #222228;
    --border: #27272a;
    --border-light: #333338;
    --text-primary: #fafafa;
    --text-secondary: #e4e4e7;
    --text-muted: #c7c7cc;
    --green: #2D694C;
    --green-light: #3cd97a;
    --green-bg: rgba(45, 105, 76, 0.15);
    --blue: #3b82f6;
    --blue-bg: rgba(59, 130, 246, 0.1);
    --purple: #a855f7;
    --purple-bg: rgba(168, 85, 247, 0.1);
    --amber: #f59e0b;
    --amber-bg: rgba(245, 158, 11, 0.1);
    --rose: #f43f5e;
    --rose-bg: rgba(244, 63, 94, 0.1);
    --teal: #14b8a6;
    --teal-bg: rgba(20, 184, 166, 0.1);
    --gradient-1: linear-gradient(135deg, #3a8a63, #2D694C);
    --gradient-2: linear-gradient(135deg, #3a8a63, #245a3f);
}html[data-marketing-theme='light'] [data-marketing-shell] {
    --amber: var(--public-text-secondary);
    --amber-bg: var(--public-elevated);
    --blue-bg: var(--public-accent-soft);
    --purple-bg: var(--public-accent-soft);
    --rose-bg: color-mix(in srgb, var(--public-danger) 8%, transparent);
    --teal: var(--public-accent);
    --teal-bg: var(--public-accent-soft);
}html {
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: hidden;
}body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}html[lang='hi'] body,
html[lang='hi'] .navbar {
    font-family: 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Devanagari Sangam MN', 'Nirmala UI', sans-serif;
}section[id] {
    scroll-margin-top: 88px;
}.container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 48px;
}.gradient-text {
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(45, 105, 76, 0.3));
}.green-text { color: var(--green); }.blue-text { color: var(--blue); }.purple-text { color: var(--purple); }.red-text { color: var(--rose); }.animate-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}.animate-in.visible {
    opacity: 1;
    transform: translateY(0);
}.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 0 80px;
    overflow: hidden;
}/* ── Hero split layout ── */.hero--split {
    min-height: 100vh;
    padding: 0;
    overflow: hidden;
    align-items: stretch;
}.hero-split-inner {
    display: grid;
    grid-template-columns: 42% 58%;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    position: relative;
    z-index: 2;
}.hero-left {
    padding: 60px 40px 60px 64px;
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: center;
}.hero-left h1 {
    font-size: clamp(42px, 4.2vw, 76px);
    line-height: 1.08;
    margin-bottom: 24px;
    text-align: left;
}.hero-left .hero-description {
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 36px;
    text-align: left;
    max-width: 460px;
}.hero-left .hero-buttons {
    justify-content: flex-start;
}/* Right: screenshot */.hero-right {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 60px 0 60px 0;
}.hero-screenshot-frame {
    position: relative;
    border-radius: 14px 0 0 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    border-right: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        -8px 0 40px rgba(0,0,0,0.6),
        -24px 0 80px rgba(0,0,0,0.5),
        0 0 120px rgba(44,128,86,0.12),
        0 40px 100px rgba(0,0,0,0.5);
    width: 100%;
}.hero-screenshot-frame picture,
.screen-frame picture {
    display: block;
    width: 100%;
    height: auto;
    line-height: 0;
}.hero-screenshot-frame img {
    display: block;
    width: 100%;
    height: auto;
}.screen-frame img {
    display: block;
    width: 100%;
    height: auto;
}/* Ambient green glow behind screenshot */.hero-right::before {
    content: '';
    position: absolute;
    inset: 10% -20% 10% 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(44,128,86,0.18) 0%, transparent 65%);
    pointer-events: none;
    z-index: -1;
}/* Mobile: stack vertically */@media (max-width: 900px) {
    .hero-split-inner {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .hero-left {
        padding: 100px 32px 40px;
        align-items: center;
        text-align: center;
    }
    .hero-left h1 { text-align: center; }
    .hero-left .hero-description { text-align: center; max-width: 100%; }
    .hero-left .hero-buttons { justify-content: center; }
    .hero-right {
        min-height: auto;
        padding: 0 16px 60px;
    }
    .hero-screenshot-frame {
        border-radius: 14px;
        border-right: 1px solid rgba(255,255,255,0.12);
    }
}@media (max-width: 1180px) and (min-width: 901px) {
    .hero-split-inner {
        grid-template-columns: minmax(360px, 45%) minmax(0, 55%);
    }

    .hero-left {
        padding-left: 40px;
        padding-right: 24px;
    }

    .hero-left h1 {
        font-size: clamp(40px, 5.3vw, 58px);
    }

    .hero-left .hero-description {
        max-width: 410px;
        font-size: 15px;
    }

    .hero-left .hero-buttons {
        gap: 12px;
    }

    .hero-left .btn-primary,
    .hero-left .btn-secondary {
        padding: 13px 20px;
        white-space: nowrap;
    }
}.hero-bg {
    position: absolute;
    inset: 0;
    background: url('/landing/img/hero-bg.png') right center / auto 100% no-repeat;
    opacity: 0.85;
    pointer-events: none;
    mask-image: linear-gradient(to right, transparent 0%, transparent 25%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.6) 45%, black 55%, black 90%, rgba(0,0,0,0.6) 95%, transparent 100%),
                linear-gradient(to bottom, transparent 0%, transparent 10%, rgba(0,0,0,0.3) 16%, black 25%, black 75%, rgba(0,0,0,0.5) 88%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 25%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.6) 45%, black 55%, black 90%, rgba(0,0,0,0.6) 95%, transparent 100%),
                        linear-gradient(to bottom, transparent 0%, transparent 10%, rgba(0,0,0,0.3) 16%, black 25%, black 75%, rgba(0,0,0,0.5) 88%, transparent 100%);
    -webkit-mask-composite: source-in;
}.hero-glow {
    position: absolute;
    top: -100px;
    right: 10%;
    width: min(800px, 100vw);
    height: 600px;
    background: radial-gradient(ellipse, rgba(45, 105, 76, 0.15) 0%, transparent 60%);
    pointer-events: none;
}.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 48px;
    width: 100%;
}.hero h1 {
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
}.hero-description {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 0 40px;
    line-height: 1.7;
}.hero-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
}.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    background: var(--gradient-1);
    color: white;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 8px 30px rgba(45, 105, 76, 0.3);
}.btn-primary.large {
    padding: 16px 36px;
    font-size: 16px;
    border-radius: 14px;
}.btn-primary svg {
    width: 18px;
    height: 18px;
}.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}.btn-secondary:hover {
    background: var(--bg-card);
    border-color: var(--border-light);
}.btn-secondary svg {
    width: 18px;
    height: 18px;
}.hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}.hero-stat {
    text-align: center;
}.stat-number {
    display: block;
    font-size: 28px;
    font-weight: 800;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}.stat-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border);
}.hero-preview {
    position: relative;
    width: 100%;
    max-width: 1800px;
    margin: 60px auto 0;
    padding: 0 24px;
}.hero-preview-glow {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 300px;
    background: radial-gradient(ellipse, rgba(45, 105, 76, 0.2) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}.hero-preview-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    box-shadow: 0 -4px 60px rgba(45, 105, 76, 0.1), 0 20px 80px rgba(0, 0, 0, 0.5);
}.hero-visual {
    position: relative;
    margin-top: 60px;
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}.mockup-window {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.03),
        0 20px 60px rgba(0,0,0,0.4),
        0 0 120px rgba(45, 105, 76, 0.08);
}.mockup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
}.mockup-dots {
    display: flex;
    gap: 6px;
}.mockup-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-light);
}.mockup-dots span:first-child { background: #f43f5e; }.mockup-dots span:nth-child(2) { background: #f59e0b; }.mockup-dots span:last-child { background: #2D694C; }.mockup-title {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}.mockup-body {
    position: relative;
    min-height: 400px;
    overflow: hidden;
}.hero-iframe {
    width: 100%;
    height: 400px;
    border: none;
    pointer-events: none;
    transform: scale(1);
    transform-origin: top left;
}.showcase-section {
    padding: 120px 0;
    position: relative;
}.showcase-section:nth-child(even) {
    background: var(--bg-secondary);
}.showcase-screenshot {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}.showcase-screenshot:hover {
    border-color: rgba(45, 105, 76, 0.4);
    box-shadow: 0 0 60px rgba(45, 105, 76, 0.12), 0 12px 48px rgba(0,0,0,0.4);
    transform: translateY(-4px);
}.showcase-img {
    width: 100%;
    height: auto;
    display: block;
}.showcase-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}.showcase-features {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 48px;
    flex-wrap: wrap;
}.sf-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 100px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}.sf-item:hover {
    border-color: var(--border-light);
    color: var(--text-primary);
}.sf-item svg {
    width: 16px;
    height: 16px;
    color: var(--green);
}.trusted-by {
    padding: 60px 0;
    border-bottom: 1px solid var(--border);
    position: relative;
}.trusted-label {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 40px;
}.trusted-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}.trusted-logo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}.logo-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.3s, background 0.3s;
}.logo-icon svg {
    width: 32px;
    height: 32px;
}.trusted-logo-box:hover .logo-icon {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
}.trusted-logo-box span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}.section-header {
    text-align: center;
    margin-bottom: 64px;
}.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 100px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(45, 105, 76, 0.15);
}.section-badge svg {
    width: 14px;
    height: 14px;
    color: var(--green);
}.section-header h2,
.showcase-text h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}.section-header p {
    font-size: 17px;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto;
}.showcase-row {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 48px;
}.showcase-row.reverse {
    grid-template-columns: 1.6fr 1fr;
}.showcase-row.reverse .showcase-media {
    order: -1;
}.showcase-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}.showcase-text h2 {
    text-align: left;
}.showcase-text p {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 24px;
}.showcase-text .showcase-features {
    margin-top: 8px;
}.showcase-media {
    position: relative;
}.showcase-media::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(45, 105, 76, 0.1) 0%, transparent 65%);
    pointer-events: none;
    z-index: -1;
}.showcase-alt {
    background: var(--bg-secondary);
}.faq-section {
    padding: 120px 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
}.faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 1120px;
    margin: 0 auto;
}.faq-item {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0 24px;
    transition: border-color 0.2s ease, background 0.2s ease;
}.faq-item:hover,
.faq-item[open] {
    border-color: var(--border-light);
}.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 0;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    list-style: none;
}.faq-item summary::-webkit-details-marker {
    display: none;
}.faq-item summary::after {
    content: '+';
    color: var(--green-light);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}.faq-item[open] summary::after {
    content: '−';
}.faq-item p {
    padding: 0 0 22px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.65;
}.guide-page {
    padding: 118px 0 96px;
    min-height: 70vh;
}.guide-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 48px;
}.guide-hero {
    padding-bottom: 44px;
    border-bottom: 1px solid var(--border);
}.guide-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(45, 105, 76, 0.26);
    border-radius: 999px;
    background: rgba(45, 105, 76, 0.12);
    color: #3cd97a;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
}.guide-eyebrow svg {
    width: 15px;
    height: 15px;
}.guide-hero h1 {
    font-size: clamp(34px, 5vw, 58px);
    font-weight: 850;
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}.guide-hero p {
    max-width: 720px;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.7;
}.guide-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}.guide-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 650;
}.guide-tag svg {
    width: 14px;
    height: 14px;
    color: var(--green);
}.guide-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}.guide-switcher a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}.guide-switcher a:hover,
.guide-switcher a.active {
    color: var(--text-primary);
    border-color: rgba(45, 105, 76, 0.48);
    background: rgba(45, 105, 76, 0.12);
}.guide-content {
    display: grid;
    gap: 30px;
    padding-top: 44px;
}.guide-note,
.guide-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.08);
    padding: 16px 18px;
    color: #b8c9e8;
    font-size: 15px;
    line-height: 1.65;
}.guide-callout--success {
    border-color: rgba(45, 105, 76, 0.34);
    background: rgba(45, 105, 76, 0.12);
    color: #a9dfc6;
}.guide-callout--warning {
    border-color: rgba(245, 158, 11, 0.26);
    background: rgba(245, 158, 11, 0.09);
    color: #e5c98c;
}html[data-marketing-theme='light'] [data-marketing-shell] .guide-note,
html[data-marketing-theme='light'] [data-marketing-shell] .guide-callout {
    border-color: var(--public-border);
    background: color-mix(in srgb, var(--public-accent) 8%, var(--public-surface));
    color: var(--public-text-secondary);
}html[data-marketing-theme='light'] [data-marketing-shell] .guide-callout--success {
    border-color: color-mix(in srgb, var(--public-success) 30%, var(--public-border));
    background: color-mix(in srgb, var(--public-success) 8%, var(--public-surface));
    color: var(--public-success);
}html[data-marketing-theme='light'] [data-marketing-shell] .guide-callout--warning {
    border-color: color-mix(in srgb, var(--public-warning) 30%, var(--public-border));
    background: color-mix(in srgb, var(--public-warning) 8%, var(--public-surface));
    color: var(--public-warning);
}html[data-marketing-theme='light'] [data-marketing-shell] .guide-callout--danger {
    border-color: color-mix(in srgb, var(--public-danger) 30%, var(--public-border));
    background: color-mix(in srgb, var(--public-danger) 8%, var(--public-surface));
    color: var(--public-danger);
}.guide-note svg,
.guide-callout svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 3px;
}html[data-marketing-theme='light'] [data-marketing-shell] .guide-note svg,
html[data-marketing-theme='light'] [data-marketing-shell] .guide-callout svg {
    color: var(--public-accent);
}html[data-marketing-theme='light'] [data-marketing-shell] .guide-callout--success svg {
    color: var(--public-success);
}html[data-marketing-theme='light'] [data-marketing-shell] .guide-callout--warning svg {
    color: var(--public-warning);
}html[data-marketing-theme='light'] [data-marketing-shell] .guide-callout--danger svg {
    color: var(--public-danger);
}.guide-step {
    display: grid;
    gap: 18px;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.006));
}.blog-page {
    padding: 118px 0 96px;
    min-height: 70vh;
}.blog-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 48px;
}.blog-hero {
    padding-bottom: 44px;
    border-bottom: 1px solid var(--border);
}.blog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(45, 105, 76, 0.26);
    border-radius: 999px;
    background: rgba(45, 105, 76, 0.12);
    color: #3cd97a;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
}.blog-eyebrow svg {
    width: 15px;
    height: 15px;
}.blog-hero h1 {
    font-size: 56px;
    font-weight: 850;
    line-height: 1.05;
    margin-bottom: 18px;
}.blog-hero p {
    max-width: 680px;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.7;
}.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding-top: 44px;
}.blog-card {
    display: flex;
    flex-direction: column;
    min-height: 310px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.008));
}.blog-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(45, 105, 76, 0.25);
    border-radius: 8px;
    background: rgba(45, 105, 76, 0.12);
    color: #3cd97a;
    margin-bottom: 24px;
}.blog-card-icon svg {
    width: 22px;
    height: 22px;
}.blog-card-body {
    display: grid;
    gap: 10px;
}.blog-card-meta {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}.blog-card h2 {
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1.25;
}.blog-card p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.65;
}.blog-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-top: auto;
    padding: 0 14px;
    border: 1px solid rgba(45, 105, 76, 0.34);
    border-radius: 8px;
    background: rgba(45, 105, 76, 0.12);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}.blog-card-link:hover {
    border-color: rgba(45, 105, 76, 0.62);
    background: rgba(45, 105, 76, 0.2);
}.guide-step-header {
    display: flex;
    align-items: center;
    gap: 14px;
}.guide-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(45, 105, 76, 0.38);
    border-radius: 50%;
    background: rgba(45, 105, 76, 0.14);
    color: #3cd97a;
    font-size: 14px;
    font-weight: 850;
    flex: 0 0 auto;
}.guide-step h2 {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 780;
    line-height: 1.2;
}.guide-step p {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.75;
    max-width: 860px;
}.guide-link {
    color: #3cd97a;
    text-decoration: none;
}.guide-link:hover {
    text-decoration: underline;
}.guide-permissions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}.guide-permission {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 760;
}.guide-permission.allowed {
    border: 1px solid rgba(45, 105, 76, 0.38);
    background: rgba(45, 105, 76, 0.13);
    color: #9fe4c0;
}.guide-permission.blocked {
    border: 1px solid rgba(244, 63, 94, 0.28);
    background: rgba(244, 63, 94, 0.08);
    color: #e8a2ae;
}html[data-marketing-theme='light'] [data-marketing-shell] .guide-permission.blocked {
    border-color: var(--public-border);
    background: var(--public-elevated);
    color: var(--public-danger);
}.guide-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}.guide-list li {
    color: var(--text-secondary);
    line-height: 1.65;
    font-size: 16px;
}.guide-list strong {
    color: var(--text-primary);
}.guide-figures {
    display: grid;
    gap: 16px;
}.guide-figures.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}.guide-figure {
    margin: 0;
}.guide-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: #080808;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.28);
}.guide-figure figcaption {
    margin-top: 9px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}.cta-section {
    padding: 120px 0;
}.cta-card {
    position: relative;
    text-align: center;
    padding: 80px 40px;
    border-radius: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    overflow: hidden;
}.cta-glow {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: min(500px, calc(100vw - 32px));
    height: 300px;
    background: radial-gradient(ellipse, rgba(34, 197, 94, 0.1) 0%, transparent 60%);
    pointer-events: none;
}.cta-card h2 {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 800;
    margin-bottom: 16px;
    position: relative;
}.cta-card p {
    font-size: 16px;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto 36px;
    position: relative;
}.cta-card .btn-primary {
    position: relative;
}.footer {
    padding: 64px 0 32px;
    border-top: 1px solid var(--border);
}.footer-content {
    display: grid;
    grid-template-columns: minmax(180px, 1.5fr) repeat(auto-fit, minmax(128px, 1fr));
    gap: 40px;
    margin-bottom: 48px;
}.footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 12px;
}.footer-logo .logo-full {
    width: auto;
    height: 24px;
    object-fit: contain;
}.footer-brand .footer-risk-disclaimer {
    max-width: 320px;
    margin: 16px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
}.footer-links-group h2,
.footer-links-group h5 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 1.67em;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}.footer-links-group a:not(.footer-social-link) {
    display: block;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.2s;
}.footer-links-group a:hover {
    color: var(--text-primary);
}.footer-social-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
}.footer-social-link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    color: var(--text-muted);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
}.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--green-light);
    flex-shrink: 0;
}.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 24px;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}.footer-bottom > span:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px !important;
    min-width: 0;
    max-width: 100%;
}@media (max-width: 1024px) {
    .showcase-row,
    .showcase-row.reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-content {
        text-align: center;
    }

    .hero-description {
        margin: 0 auto 40px;
    }

    .hero-buttons {
        justify-content: center;
    }

    .showcase-row.reverse .showcase-media {
        order: 0;
    }

    .showcase-text {
        align-items: center;
        text-align: center;
    }

    .showcase-text h2 {
        text-align: center;
    }

    .showcase-split {
        gap: 16px;
    }

    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}@media (max-width: 768px) {
    .footer-bottom {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .footer-bottom > span:last-child {
        margin-left: 0 !important;
    }

    .hero {
        padding: 100px 20px 60px;
    }

    .hero-content {
        padding: 0 20px;
        text-align: center;
    }

    .hero-description {
        margin: 0 auto 40px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
    }

    .btn-primary, .btn-secondary {
        justify-content: center;
    }

    .showcase-section {
        padding: 80px 0;
    }

    .showcase-split {
        grid-template-columns: 1fr;
    }

    .showcase-features {
        gap: 12px;
    }

    .sf-item {
        padding: 8px 16px;
        font-size: 13px;
    }

    .trusted-logos {
        gap: 24px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .cta-card {
        padding: 60px 24px;
    }

    .faq-section {
        padding: 80px 0;
    }

    .faq-list {
        grid-template-columns: 1fr;
    }

    .faq-item {
        padding: 0 20px;
    }

    .guide-page {
        padding: 96px 0 72px;
    }

    .guide-shell {
        padding: 0 20px;
    }

    .blog-page {
        padding: 96px 0 72px;
    }

    .blog-shell {
        padding: 0 20px;
    }

    .blog-hero {
        padding-bottom: 34px;
    }

    .blog-hero h1 {
        font-size: 40px;
    }

    .blog-hero p {
        font-size: 15px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        padding-top: 34px;
    }

    .guide-hero {
        padding-bottom: 34px;
    }

    .guide-hero p,
    .guide-step p,
    .guide-list li {
        font-size: 15px;
    }

    .guide-step {
        padding: 22px;
    }

    .guide-step-header {
        align-items: flex-start;
    }

    .guide-figures.two-col {
        grid-template-columns: 1fr;
    }

    .guide-switcher a,
    .guide-tag,
    .guide-permission {
        max-width: 100%;
    }
}.bitstat-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--public-text-primary);
    text-decoration: none;
}.bitstat-brand-mark {
    width: clamp(24px, 2vw, 28px);
    height: clamp(24px, 2vw, 28px);
    flex: 0 0 auto;
    object-fit: contain;
}.bitstat-brand-wordmark {
    color: var(--public-text-primary);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}html[data-marketing-theme='light'] [data-marketing-shell] .legal-badge {
    background: color-mix(in srgb, var(--public-accent) 8%, var(--public-surface));
    border: 1px solid var(--public-border);
    color: var(--public-accent);
}html[data-marketing-theme='light'] [data-marketing-shell] .lang-switcher {
    background: var(--public-elevated);
    border-color: var(--public-border);
}html[data-marketing-theme='light'] [data-marketing-shell] .lang-btn {
    color: var(--public-text-secondary);
}html[data-marketing-theme='light'] [data-marketing-shell] .lang-btn.active {
    background: color-mix(in srgb, var(--public-accent) 10%, var(--public-surface));
    color: var(--public-accent);
}html[data-marketing-theme='light'] [data-marketing-shell] .lang-btn:hover:not(.active) {
    color: var(--public-text-primary);
}html[data-marketing-theme='light'] [data-marketing-shell] .legal-header h1,
html[data-marketing-theme='light'] [data-marketing-shell] .legal-section h2 {
    color: var(--public-text-primary);
}html[data-marketing-theme='light'] [data-marketing-shell] .legal-header .legal-meta,
html[data-marketing-theme='light'] [data-marketing-shell] .legal-section h3,
html[data-marketing-theme='light'] [data-marketing-shell] .legal-section p,
html[data-marketing-theme='light'] [data-marketing-shell] .legal-section ul li,
html[data-marketing-theme='light'] [data-marketing-shell] .legal-section ul li::before,
html[data-marketing-theme='light'] [data-marketing-shell] .legal-highlight-block p,
html[data-marketing-theme='light'] [data-marketing-shell] .legal-contact-block p {
    color: var(--public-text-secondary);
}html[data-marketing-theme='light'] [data-marketing-shell] .legal-section h2 {
    border-bottom-color: var(--public-border);
}html[data-marketing-theme='light'] [data-marketing-shell] .legal-highlight-block {
    background: color-mix(in srgb, var(--public-accent) 5%, var(--public-surface));
    border-color: var(--public-border);
}html[data-marketing-theme='light'] [data-marketing-shell] .legal-highlight-block strong,
html[data-marketing-theme='light'] [data-marketing-shell] .legal-contact-block a,
html[data-marketing-theme='light'] [data-marketing-shell] .legal-step-num {
    color: var(--public-accent);
}html[data-marketing-theme='light'] [data-marketing-shell] .legal-contact-block {
    background: var(--public-surface);
    border-color: var(--public-border);
}html[data-marketing-theme='light'] [data-marketing-shell] .legal-step-num {
    background: color-mix(in srgb, var(--public-accent) 8%, var(--public-surface));
    border-color: var(--public-border);
}html[data-marketing-theme='light'] [data-marketing-shell] .footer-bottom a[style*='color'] {
    color: var(--public-text-secondary) !important;
}html[data-marketing-theme='light'] [data-site-refresh-content='home'] .wa-t {
    color: var(--public-text-primary);
}html[data-marketing-theme='light'] [data-site-refresh-content='home'] .wa-d {
    color: var(--public-text-secondary);
}html[data-marketing-theme='light'] [data-site-refresh-content='home'] .va-card {
    border-color: var(--public-border);
    background: var(--public-surface);
    box-shadow: var(--public-shadow);
}html[data-marketing-theme='light'] [data-site-refresh-content='home'] .va-hd {
    border-bottom-color: var(--public-border);
    color: var(--public-text-primary);
}html[data-marketing-theme='light'] [data-site-refresh-content='home'] .va-row {
    border-bottom-color: var(--public-border);
    color: var(--public-text-secondary);
}html[data-marketing-theme='light'] [data-site-refresh-content='home'] .va-row b {
    color: var(--public-text-primary);
}html[data-marketing-theme='light'] [data-site-refresh-content='home'] .va-ic.no {
    color: var(--public-text-muted);
}html[data-marketing-theme='light'] [data-site-refresh-content='home'] .va-ic.part {
    color: var(--public-warning);
}html[data-marketing-theme='light'] [data-site-refresh-content='home'] .va-ic.yes {
    color: var(--public-success);
}html[data-marketing-theme='light'] [data-site-refresh-content='home'] .va-card--us {
    border-color: transparent;
    background: linear-gradient(180deg, var(--public-surface), color-mix(in srgb, var(--public-accent) 6%, var(--public-surface)));
    box-shadow: var(--public-shadow);
}html[data-marketing-theme='light'] [data-site-refresh-content='home'] .va-card--us::before {
    background: conic-gradient(from 0deg,
        var(--public-accent) 0deg,
        var(--public-accent-hover) 180deg,
        var(--public-accent) 360deg);
}html[data-marketing-theme='light'] [data-site-refresh-content='home'] .va-card--us::after {
    background: linear-gradient(180deg, var(--public-surface), color-mix(in srgb, var(--public-accent) 6%, var(--public-surface)));
}html[data-marketing-theme='light'] [data-site-refresh-content='home'] .va-card--us .va-hd {
    border-bottom-color: color-mix(in srgb, var(--public-accent) 24%, var(--public-border));
    color: var(--public-accent);
}html[data-marketing-theme='light'] [data-site-refresh-content='home'] .va-card--us .va-row {
    color: var(--public-text-secondary);
}.navbar[data-marketing-header] {
    --marketing-header-height: 65px;
    --marketing-page-bg: var(--public-page-bg, #f7f8fa);
    --marketing-surface: var(--public-surface, #fff);
    --marketing-surface-muted: var(--public-elevated, #f0f2f5);
    --marketing-bg-primary: var(--public-page-bg, #f7f8fa);
    --marketing-bg-tertiary: var(--public-elevated, #f0f2f5);
    --marketing-border: var(--public-border, #d9dfe7);
    --marketing-text: var(--public-text-primary, #171a1f);
    --marketing-text-primary: var(--public-text-primary, #171a1f);
    --marketing-text-secondary: var(--public-text-secondary, #3f454d);
    --marketing-text-muted: var(--public-text-muted, #5d6570);
    --marketing-accent: var(--public-accent, #0f7650);
    --marketing-accent-hover: var(--public-accent-hover, #0b5f40);
    --marketing-accent-soft: var(--public-accent-soft, rgba(15, 118, 80, 0.12));
    --marketing-green: var(--public-accent, #0f7650);
    --marketing-positive: var(--public-success, #11734f);
    --marketing-negative: var(--public-danger, #b42318);
    --marketing-gradient: linear-gradient(135deg, var(--public-accent, #0f7650), var(--public-accent-hover, #0b5f40));
    --marketing-shadow: var(--public-shadow, 0 18px 42px rgba(23, 26, 31, 0.1), 0 3px 10px rgba(23, 26, 31, 0.04));
    --marketing-focus-ring: var(--public-focus-ring, rgba(15, 118, 80, 0.42));
    --marketing-dropdown-surface: var(--public-surface, #fff);
    --marketing-dropdown-border: var(--public-border, #d9dfe7);
    --marketing-dropdown-text-primary: var(--public-text-primary, #171a1f);
    --marketing-dropdown-text-secondary: var(--public-text-secondary, #3f454d);
    --marketing-dropdown-text-muted: var(--public-text-muted, #5d6570);
    --marketing-dropdown-shadow: var(--public-shadow, 0 18px 42px rgba(23, 26, 31, 0.1), 0 3px 10px rgba(23, 26, 31, 0.04));
    color-scheme: inherit;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 16px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--marketing-text-primary);
    background: var(--marketing-surface);
    border-bottom: 1px solid var(--marketing-border);
}html:not([data-marketing-theme='light']) .navbar[data-marketing-header] {
    --marketing-page-bg: #09090b;
    --marketing-surface: #09090b;
    --marketing-surface-muted: #18181b;
    --marketing-bg-primary: #09090b;
    --marketing-bg-tertiary: #18181b;
    --marketing-border: #27272a;
    --marketing-text: #fafafa;
    --marketing-text-primary: #fafafa;
    --marketing-text-secondary: #e4e4e7;
    --marketing-text-muted: #c7c7cc;
    --marketing-accent: #3cd97a;
    --marketing-accent-hover: #59d68c;
    --marketing-accent-soft: rgba(60, 217, 122, 0.12);
    --marketing-green: #2d694c;
    --marketing-positive: #3cd97a;
    --marketing-negative: #f43f5e;
    --marketing-gradient: linear-gradient(135deg, #3a8a63, #2d694c);
    --marketing-shadow: 0 18px 42px rgba(0, 0, 0, 0.35), 0 3px 10px rgba(0, 0, 0, 0.2);
    --marketing-focus-ring: rgba(60, 217, 122, 0.42);
    --marketing-dropdown-surface: #18181b;
    --marketing-dropdown-border: #27272a;
    --marketing-dropdown-text-primary: #fafafa;
    --marketing-dropdown-text-secondary: #e4e4e7;
    --marketing-dropdown-text-muted: #c7c7cc;
    --marketing-dropdown-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
    color: #fafafa;
    background: #09090b;
}[data-marketing-header] .nav-container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}[data-marketing-header] .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--marketing-text-primary);
    font-size: 18px;
    font-weight: 700;
}[data-marketing-header] .bitstat-brand-lockup {
    gap: 10px;
    flex: 0 0 auto;
}[data-marketing-header] .bitstat-brand-mark {
    display: block;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    object-fit: contain;
}[data-marketing-header] .bitstat-brand-wordmark {
    color: var(--marketing-text-primary);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}[data-marketing-header] .logo-full {
    width: auto;
    height: 32px;
    object-fit: contain;
}[data-marketing-header] .logo-full.small {
    height: 24px;
}[data-marketing-header] .nav-links {
    display: flex;
    gap: 32px;
    flex-shrink: 0;
}[data-marketing-header] .nav-links > a,
[data-marketing-header] .nav-dropdown-trigger,
[data-marketing-header] .nav-login,
[data-marketing-header] .nav-cta {
    white-space: nowrap;
}[data-marketing-header] .nav-links a {
    color: var(--marketing-text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}[data-marketing-header] .nav-links a:hover {
    color: var(--marketing-text-primary);
}[data-marketing-header] .nav-links a[aria-current="page"],
[data-marketing-header] .mobile-menu a[aria-current="page"] {
    color: var(--marketing-accent);
}html:not([data-marketing-theme='light']) [data-marketing-header] .nav-links a[aria-current="page"],
html:not([data-marketing-theme='light']) [data-marketing-header] .mobile-menu a[aria-current="page"] {
    color: #59d68c;
}[data-marketing-header] .nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle {
    position: relative;
    display: inline-flex;
    flex: 0 0 64px;
    width: 64px;
    height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--marketing-border);
    border-radius: 999px;
    color: var(--marketing-text-primary);
    background: var(--marketing-surface-muted);
    cursor: pointer;
    appearance: none;
    transition: border-color 160ms ease, background-color 160ms ease;
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle[aria-checked="true"] {
    border-color: color-mix(in srgb, var(--marketing-accent) 30%, var(--marketing-border));
    background: var(--marketing-accent-soft);
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle:hover {
    border-color: var(--marketing-accent-hover);
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle:focus-visible {
    outline: 3px solid var(--marketing-focus-ring);
    outline-offset: 2px;
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-icon,
[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-icon svg {
    display: block;
    width: 14px;
    height: 14px;
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-icon {
    position: absolute;
    top: 50%;
    z-index: 2;
    pointer-events: none;
    transform: translateY(-50%);
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-icon--moon {
    left: 8px;
    color: var(--public-theme-moon, #4f6f9f);
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-icon--sun {
    right: 8px;
    color: var(--public-theme-sun, #9a6500);
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-thumb {
    position: absolute;
    top: 50%;
    left: 3px;
    z-index: 1;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--marketing-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    transform: translateY(-50%);
    transition: transform 180ms ease;
}html[data-marketing-theme="dark"] [data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-thumb {
    transform: translateY(-50%);
}html[data-marketing-theme="light"] [data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-thumb {
    transform: translate(32px, -50%);
}[data-marketing-header][data-marketing-theme-switcher="true"] .mobile-menu-theme-row {
    display: flex;
    align-items: center;
    min-height: 52px;
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle--mobile {
    height: 44px;
}@media (prefers-reduced-motion: reduce) {
    [data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle,
    [data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-thumb {
        transition: none;
    }
}[data-marketing-header] .lang-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--marketing-border);
    border-radius: 10px;
    background: var(--marketing-surface-muted);
    color: var(--marketing-text-primary);
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s;
}[data-marketing-header] .lang-toggle:hover {
    border-color: var(--marketing-accent);
}[data-marketing-header] .marketing-language-switcher {
    position: relative;
}[data-marketing-header] .lang-toggle {
    list-style: none;
}[data-marketing-header] .lang-toggle::-webkit-details-marker {
    display: none;
}[data-marketing-header] .lang-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}[data-marketing-header] .marketing-language-switcher[open] .lang-toggle svg {
    transform: rotate(180deg);
}[data-marketing-header] .lang-current {
    color: var(--marketing-text-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}[data-marketing-header] .marketing-language-options {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 2;
    display: grid;
    min-width: 152px;
    padding: 6px;
    border: 1px solid var(--marketing-dropdown-border);
    border-radius: 10px;
    background: var(--marketing-dropdown-surface);
    box-shadow: var(--marketing-dropdown-shadow);
}[data-marketing-header] .marketing-language-option {
    display: block;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--marketing-dropdown-text-secondary);
    font-size: 14px;
    font-weight: 500;
    overflow-wrap: anywhere;
    text-decoration: none;
}[data-marketing-header] .marketing-language-option:hover,
[data-marketing-header] .marketing-language-option:focus-visible,
[data-marketing-header] .marketing-language-option[aria-current="page"] {
    color: var(--marketing-dropdown-text-primary);
    background: var(--marketing-surface-muted);
}[data-marketing-header] .nav-login {
    color: var(--marketing-text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}[data-marketing-header] .nav-login:hover {
    color: var(--marketing-text-primary);
}[data-marketing-header] .nav-cta,
[data-marketing-header] .nav-cta-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--marketing-accent);
    border-radius: 8px;
    background: var(--marketing-accent);
    box-shadow: 0 4px 14px rgba(15, 118, 80, 0.18);
    color: var(--public-on-accent, var(--on-accent, #fff));
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}[data-marketing-header] .nav-cta {
    min-height: 36px;
    padding: 8px 18px;
    font-size: 14px;
}[data-marketing-header] .nav-cta-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}[data-marketing-header] .nav-cta:hover,
[data-marketing-header] .nav-cta-mobile:hover {
    border-color: var(--marketing-accent-hover);
    background: var(--marketing-accent-hover);
    box-shadow: 0 5px 16px rgba(11, 95, 64, 0.2);
}[data-marketing-header] .nav-cta:hover .nav-cta-icon,
[data-marketing-header] .nav-cta-mobile:hover .nav-cta-icon {
    transform: translateX(2px);
}[data-marketing-header] .nav-cta:focus-visible,
[data-marketing-header] .nav-cta-mobile:focus-visible {
    outline: 2px solid var(--marketing-focus-ring);
    outline-offset: 3px;
}[data-marketing-header] .nav-dropdown {
    position: relative;
}[data-marketing-header] .nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}[data-marketing-header] .nav-dropdown-trigger svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
}[data-marketing-header] .nav-dropdown:hover .nav-dropdown-trigger svg {
    transform: rotate(180deg);
}[data-marketing-header] .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    min-width: 280px;
    padding: 8px;
    z-index: 2;
    border: 1px solid var(--marketing-dropdown-border);
    border-radius: 12px;
    background: var(--marketing-dropdown-surface);
    box-shadow: var(--marketing-dropdown-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}[data-marketing-header] .nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}[data-marketing-header] .nav-dropdown--resources[open] .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}[data-marketing-header] .nav-dropdown--resources::after {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 1;
    width: min(580px, calc(100vw - 32px));
    height: 12px;
    content: "";
    transform: translateX(-50%);
}[data-marketing-header] .nav-resources-summary {
    list-style: none;
}[data-marketing-header] .nav-resources-summary::-webkit-details-marker {
    display: none;
}[data-marketing-header] .nav-resources-summary::marker {
    content: "";
}[data-marketing-header] .nav-dropdown--resources[open] .nav-resources-summary svg {
    transform: rotate(180deg);
}[data-marketing-header] .nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--marketing-dropdown-text-secondary) !important;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}[data-marketing-header] .nav-dropdown-menu a:hover {
    background: var(--marketing-surface-muted);
    color: var(--marketing-dropdown-text-primary) !important;
}[data-marketing-header] .nav-dropdown-menu a > svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--marketing-accent);
}[data-marketing-header] .dd-title {
    display: block;
    color: var(--marketing-dropdown-text-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}[data-marketing-header] .dd-desc {
    display: block;
    color: var(--marketing-dropdown-text-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
}[data-marketing-header] .nav-dropdown-menu--resources {
    display: grid;
    width: min(580px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 12px;
}[data-marketing-header] .nav-dropdown-menu--resources .nav-resource-link {
    min-height: 76px;
    align-items: flex-start;
    padding: 12px;
}[data-marketing-header] .nav-resource-link > div {
    min-width: 0;
}[data-marketing-header] details[data-marketing-mobile-disclosure] {
    margin: 0;
}[data-marketing-header] .mobile-menu-disclosure-summary {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px;
    border-radius: 10px;
    cursor: pointer;
    list-style: none;
}[data-marketing-header] .mobile-menu-disclosure-summary::-webkit-details-marker {
    display: none;
}[data-marketing-header] .mobile-menu-disclosure-summary::marker {
    content: "";
}[data-marketing-header] .mobile-menu-disclosure-summary svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}[data-marketing-header] details[data-marketing-mobile-disclosure][open] .mobile-menu-disclosure-summary svg {
    transform: rotate(180deg);
}[data-marketing-header] .mobile-menu-disclosure-label {
    color: var(--marketing-text-primary);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}[data-marketing-header] .mobile-menu-disclosure-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0 8px;
}[data-marketing-header] .mobile-menu-disclosure-panel a {
    display: flex;
    min-height: 48px;
    align-items: center;
}[data-marketing-header] .mobile-menu-feature-links a,
[data-marketing-header] .mobile-menu-resource-links a {
    padding: 0 12px;
    border-radius: 10px;
    color: var(--marketing-text-secondary);
}[data-marketing-header] .mobile-menu-resource-links a {
    min-height: 64px;
}[data-marketing-header] .mobile-menu-divider {
    height: 1px;
    margin: 8px 0;
    background: var(--marketing-border);
}[data-marketing-header] .mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 9px;
    border: 1px solid var(--marketing-border);
    border-radius: 10px;
    background: var(--marketing-surface-muted);
    color: var(--marketing-text-primary);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}[data-marketing-header] .mobile-menu-btn:hover {
    border-color: var(--marketing-accent);
    background: var(--marketing-accent-soft);
}[data-marketing-header] .mobile-menu-button-icon {
    display: flex;
}[data-marketing-header] .mobile-menu-button-icon--close,
.navbar[data-marketing-header].menu-open .mobile-menu-button-icon--open {
    display: none;
}.navbar[data-marketing-header].menu-open .mobile-menu-button-icon--close {
    display: flex;
}[data-marketing-header] .mobile-menu-btn svg {
    width: 22px;
    height: 22px;
}[data-marketing-header] .mobile-menu {
    position: fixed;
    inset: var(--marketing-header-height) 0 0;
    display: none;
    flex-direction: column;
    height: calc(100dvh - var(--marketing-header-height));
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--marketing-text-primary);
    background: var(--marketing-surface);
    box-shadow: var(--marketing-shadow);
}[data-marketing-header] .mobile-menu-scroll {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 12px 24px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--marketing-accent) transparent;
    scrollbar-width: thin;
}[data-marketing-header] .mobile-menu-scroll::-webkit-scrollbar {
    width: 6px;
}[data-marketing-header] .mobile-menu-scroll::-webkit-scrollbar-track {
    background: transparent;
}[data-marketing-header] .mobile-menu-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--marketing-accent);
}[data-marketing-header] .mobile-menu a {
    color: var(--marketing-text-secondary);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
}[data-marketing-header] .mobile-menu .nav-cta-mobile {
    color: var(--public-on-accent, var(--on-accent, #fff));
}[data-marketing-header] .mobile-menu-scroll > a {
    display: flex;
    min-height: 52px;
    align-items: center;
    padding: 0 2px;
    border-radius: 10px;
}[data-marketing-header] .mobile-menu-scroll > a:hover,
[data-marketing-header] .mobile-menu-feature-links a:hover,
[data-marketing-header] .mobile-menu-resource-links a:hover {
    color: var(--marketing-text-primary);
    background: var(--marketing-surface-muted);
}[data-marketing-header] .mobile-menu-footer {
    flex: 0 0 auto;
    padding: 0 24px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--marketing-border);
    background: var(--marketing-surface);
    box-shadow: 0 -10px 24px rgba(23, 26, 31, 0.06);
}[data-marketing-header] .mobile-menu-footer .mobile-menu-divider {
    margin: 0 0 8px;
}[data-marketing-header] .mobile-menu-language {
    margin: 0;
}[data-marketing-header] .mobile-menu-language-summary {
    display: inline-flex;
    width: fit-content;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid var(--marketing-border);
    border-radius: 10px;
    color: var(--marketing-text-primary);
    background: var(--marketing-surface-muted);
    cursor: pointer;
    list-style: none;
}[data-marketing-header] .mobile-menu-language-summary::-webkit-details-marker {
    display: none;
}[data-marketing-header] .mobile-menu-language-summary::marker {
    content: "";
}[data-marketing-header] .mobile-menu-language-summary svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}[data-marketing-header] .mobile-menu-language[open] .mobile-menu-language-summary {
    border-color: var(--marketing-accent);
    background: var(--marketing-accent-soft);
}[data-marketing-header] .mobile-menu-language[open] .mobile-menu-language-summary svg {
    transform: rotate(180deg);
}[data-marketing-header] .mobile-menu-language-current {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
}[data-marketing-header] .mobile-menu-language-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
    gap: 8px;
    padding: 8px 0 4px;
}[data-marketing-header] .mobile-menu-language-option {
    display: flex;
    width: 100%;
    min-height: 44px !important;
    min-width: 44px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 10px !important;
    border: 1px solid var(--marketing-border);
    border-radius: 8px;
    color: var(--marketing-text-secondary);
    background: var(--marketing-surface);
    font-size: 14px !important;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-align: left;
}[data-marketing-header] .mobile-menu-language-option[aria-current="page"] {
    color: var(--marketing-text-primary);
    border-color: var(--marketing-accent);
    background: var(--marketing-accent-soft);
}[data-marketing-header] .mobile-menu-login-row {
    display: flex;
    min-height: 48px;
    align-items: center;
}[data-marketing-header] .mobile-menu-login {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: flex-end;
    padding: 0 2px;
}[data-marketing-header] .mobile-menu-btn:focus-visible,
[data-marketing-header] .mobile-menu-disclosure-summary:focus-visible,
[data-marketing-header] .mobile-menu-language-summary:focus-visible,
[data-marketing-header] .mobile-menu a:focus-visible {
    outline: 2px solid var(--marketing-focus-ring);
    outline-offset: 2px;
}@media (max-width: 1100px) {
    [data-marketing-header] .nav-container {
        padding: 0 28px;
    }

    [data-marketing-header] .nav-links {
        gap: 18px;
    }

    [data-marketing-header] .nav-right {
        gap: 10px;
    }
}[data-marketing-header] .nav-cta-mobile {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    margin: 8px 0 0;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    text-align: center;
}@media (prefers-reduced-motion: reduce) {
    [data-marketing-header] .nav-cta,
    [data-marketing-header] .nav-cta-mobile {
        animation: none;
        transition: none;
    }

    [data-marketing-header] .nav-cta-icon {
        transition: none;
    }
}@media (max-width: 1280px) {
    .navbar[data-marketing-header] {
        --marketing-header-height: 77px;
    }

    html[data-marketing-mobile-menu-open],
    html[data-marketing-mobile-menu-open] body {
        overflow: hidden;
        overscroll-behavior: none;
    }

    [data-marketing-header] .nav-links,
    [data-marketing-header] .nav-right {
        display: none;
    }

    [data-marketing-header] .mobile-menu-btn {
        display: flex;
    }

    [data-marketing-header] .mobile-menu.open {
        display: flex;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
}/* Dark-mode CTA border rotates a compositor layer instead of a registered angle. */html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta,
html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile {
    --marketing-cta-surface: #111111;
    --marketing-cta-hover-surface: #111111;
    --marketing-cta-border-gradient:
        conic-gradient(
            from 0deg,
            rgba(48, 192, 109, 0.22) 0deg,
            #30c06d 54deg,
            #9aefbb 96deg,
            rgba(48, 192, 109, 0.2) 154deg,
            rgba(45, 105, 76, 0.34) 235deg,
            #4ade80 302deg,
            rgba(48, 192, 109, 0.22) 360deg
        );
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    box-shadow:
        0 0 16px rgba(48, 192, 109, 0.12),
        inset 0 0 14px rgba(48, 192, 109, 0.05);
    color: #fff;
    transition: box-shadow 0.2s ease;
}html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta::before,
html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile::before,
html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta::after,
html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile::after {
    position: absolute;
    content: "";
    pointer-events: none;
}html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta::before,
html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile::before {
    z-index: -2;
    top: 50%;
    left: 50%;
    width: 300%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--marketing-cta-border-gradient);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: marketingCtaBorderSpin 3s linear infinite;
}html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta::after,
html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile::after {
    z-index: -1;
    inset: 1px;
    border-radius: 9px;
    background: var(--marketing-cta-surface);
}/* The original theme-switcher header uses its raised surface for the CTA. */html:not([data-marketing-theme='light']) .navbar[data-marketing-header][data-marketing-theme-switcher="true"] {
    --marketing-surface: #111113;
}html:not([data-marketing-theme='light']) .navbar[data-marketing-header][data-marketing-theme-switcher="true"] .nav-cta,
html:not([data-marketing-theme='light']) .navbar[data-marketing-header][data-marketing-theme-switcher="true"] .nav-cta-mobile {
    --marketing-cta-surface: var(--marketing-surface);
    --marketing-cta-hover-surface: var(--marketing-surface-muted);
}html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-icon {
    filter: drop-shadow(0 0 5px rgba(48, 192, 109, 0.28));
}html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta:hover,
html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile:hover {
    --marketing-cta-surface: var(--marketing-cta-hover-surface);
    background: none;
}html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta:focus-visible,
html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile:focus-visible {
    outline: 2px solid #9aefbb;
    outline-offset: 3px;
}@keyframes marketingCtaBorderSpin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}@media (prefers-reduced-motion: reduce) {
    html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta,
    html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile,
    html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-icon {
        transition: none;
    }

    html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta::before,
    html:not([data-marketing-theme='light']) [data-marketing-header] .nav-cta-mobile::before {
        animation: none;
    }
}@media (max-width: 640px) {
    [data-marketing-header] .nav-container {
        padding: 0 20px;
    }

    [data-marketing-header] .mobile-menu-scroll {
        padding-right: 20px;
        padding-left: 20px;
    }

    [data-marketing-header] .mobile-menu-footer {
        padding-right: 20px;
        padding-left: 20px;
    }
}/* Public header variants share the fixed light palette defined above. */