@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 900;
  font-display: optional;
  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: optional;
  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: optional;
  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: optional;
  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 — секція інтеграцій
   Три подачі перемикаються класом на секції:
     .rm--mono   монохромні марки (рекомендовано)
     .rm--color  кольорові іконки
     .rm--text   лише назви, без марок
   Мобільна версія: та сама доріжка з горизонтальною прокруткою,
   прилипанням і затуханням по краях.
   ============================================================ */[data-site-refresh-content] .rm { position: relative; padding: var(--sp-12) 0 var(--sp-25); }[data-site-refresh-content] .rm-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }/* ---------- заголовок ---------- */[data-site-refresh-content] .rm-head { text-align: center; margin-bottom: var(--sp-16); }[data-site-refresh-content] .rm-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] .rm-eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-bright); display: block; }[data-site-refresh-content] .rm-head p {
  margin: var(--sp-3) auto 0; max-width: 460px;
  font-size: var(--fs-15); line-height: 1.6; color: var(--text-muted);
}/* ---------- доріжка ---------- */[data-site-refresh-content] .rm-track { position: relative; }/* затухання по краях — натяк, що ряд прокручується */[data-site-refresh-content] .rm-track::before, [data-site-refresh-content] .rm-track::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 48px;
  pointer-events: none; z-index: 3; opacity: 0; transition: opacity .2s;
}[data-site-refresh-content] .rm-track::before { left: 0;  background: linear-gradient(90deg, var(--surface-base), transparent); }[data-site-refresh-content] .rm-track::after  { right: 0; background: linear-gradient(270deg, var(--surface-base), transparent); }[data-site-refresh-content] .rm-track.scrollable::before, [data-site-refresh-content] .rm-track.scrollable::after { opacity: 1; }[data-site-refresh-content] .rm-scroll {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}[data-site-refresh-content] .rm-scroll::-webkit-scrollbar { height: 0; }[data-site-refresh-content] .rm-row {
  display: flex; align-items: flex-start;
  width: max-content; margin: 0 auto;
  padding: var(--sp-8) var(--sp-2) 0;
  position: relative;
}/* ---------- станція ---------- */[data-site-refresh-content] .rm-stop {
  position: relative; z-index: 1;
  width: 116px; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  scroll-snap-align: center;
}/* лінія під логотипами */[data-site-refresh-content] .rm-stop::before {
  content: ""; position: absolute; z-index: 0;
  top: 82px; left: -50%; width: 100%; height: 1px;
}[data-site-refresh-content] .rm-stop:first-of-type::before { display: none; }[data-site-refresh-content] .rm-stop.live::before { background: linear-gradient(90deg, rgba(45,105,76,.3), rgba(45,105,76,.75)); }[data-site-refresh-content] .rm-stop.soon::before {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 3px, transparent 3px 9px);
}/* ---------- марка ---------- */[data-site-refresh-content] .rm-logo {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .22s ease, opacity .22s ease;
}[data-site-refresh-content] .rm-logo img { max-width: 100%; max-height: 100%; display: block; }[data-site-refresh-content] .rm-stop:hover .rm-logo { transform: none; }/* — монохром — */[data-site-refresh-content] .rm--mono .rm-logo img { opacity: .9; }[data-site-refresh-content] .rm--mono .rm-stop.soon .rm-logo img { opacity: .34; }[data-site-refresh-content] .rm--mono .rm-stop:hover .rm-logo img { opacity: 1; }/* — кольорові плитки — */[data-site-refresh-content] .rm--color .rm-logo { border-radius: var(--r-16); overflow: hidden; box-shadow: var(--public-shadow); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .rm--color .rm-logo { box-shadow: 0 8px 20px rgba(0,0,0,.55); }[data-site-refresh-content] .rm--color .rm-logo img { width: 100%; height: 100%; object-fit: cover; max-width: none; max-height: none; }[data-site-refresh-content] .rm--color .rm-logo--mt4 { background: #fff; }[data-site-refresh-content] .rm--color .rm-logo--mt4 img {
  width: 54px; height: auto; object-fit: contain;
}[data-site-refresh-content] .rm--color .rm-logo--ctrader { background: #16181D; }[data-site-refresh-content] .rm--color .rm-logo--ctrader img {
  width: 40px; height: 40px; object-fit: contain;
}[data-site-refresh-content] .rm--color .rm-stop.soon .rm-logo,
[data-site-refresh-content] .rm--color .rm-stop.soon:hover .rm-logo {
  opacity: 1;
  filter: none;
}/* — лише назви — */[data-site-refresh-content] .rm--text .rm-logo { display: none; }[data-site-refresh-content] .rm--text .rm-stop::before { top: 22px; }[data-site-refresh-content] .rm--text .rm-node { margin-top: 18px; }[data-site-refresh-content] .rm--text .rm-name { font-size: var(--fs-15); font-weight: 600; }/* ---------- вузол на лінії ---------- */[data-site-refresh-content] .rm-node {
  position: relative; z-index: 1;
  width: 9px; height: 9px; border-radius: 50%;
  margin-top: 18px; transition: transform .22s ease;
}[data-site-refresh-content] .rm-stop.live .rm-node {
  background: var(--accent-bright);
  box-shadow: 0 0 0 4px rgba(60,217,122,.14), 0 0 0 7px var(--surface-base);
}[data-site-refresh-content] .rm-stop.soon .rm-node {
  width: 6px; height: 6px; margin-top: 19.5px;
  background: var(--border-light);
  box-shadow: 0 0 0 4px var(--surface-base);
}[data-site-refresh-content] .rm-stop:hover .rm-node { transform: scale(1.25); }[data-site-refresh-content] .rm-name {
  margin-top: var(--sp-4);
  font-size: var(--fs-13); font-weight: 500; color: var(--text-secondary);
  white-space: nowrap;
}[data-site-refresh-content] .rm-stop.soon .rm-name { color: var(--text-muted); }@media (min-width: 761px) {
  [data-site-refresh-content] .rm:not(.is-mobile) .rm-row {
    width: 100%;
    box-sizing: border-box;
  }
  [data-site-refresh-content] .rm:not(.is-mobile) .rm-stop {
    flex: 1 1 0;
    min-width: 88px;
    max-width: 116px;
  }
}html[data-marketing-theme='light'] [data-site-refresh-content] .rm-stop.soon .rm-name {
  color: var(--public-text-muted);
}/* ---------- позначка «зараз» ---------- */[data-site-refresh-content] .rm-now {
  position: relative; z-index: 2;
  width: 72px; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
}[data-site-refresh-content] .rm-now::before, [data-site-refresh-content] .rm-now::after {
  content: ""; position: absolute; z-index: 0; top: 82px; height: 1px; width: 94px;
}[data-site-refresh-content] .rm-now::before { left: -58px; background: linear-gradient(90deg, rgba(45,105,76,.75), rgba(45,105,76,.35)); }[data-site-refresh-content] .rm-now::after  { left: 36px;  background: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 3px, transparent 3px 9px); }[data-site-refresh-content] .rm--text .rm-now::before, [data-site-refresh-content] .rm--text .rm-now::after { top: 22px; }[data-site-refresh-content] .rm-now-tick {
  width: 1px; height: 22px; margin-top: 60px;
  background: linear-gradient(to bottom, transparent, var(--accent-bright));
}[data-site-refresh-content] .rm--text .rm-now-tick { margin-top: 0; }[data-site-refresh-content] .rm-now-lbl {
  margin-top: var(--sp-3);
  font-size: var(--fs-11); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}/* ---------- поява ---------- */[data-site-refresh-content] .rm-track.ready .rm-stop, [data-site-refresh-content] .rm-track.ready .rm-now { opacity: 0; transform: translateY(10px); }[data-site-refresh-content] .rm-track.ready.in .rm-stop, [data-site-refresh-content] .rm-track.ready.in .rm-now {
  animation: rmIn .55s cubic-bezier(.22,.65,.3,1) forwards;
  animation-delay: var(--d, 0s);
}@keyframes rmIn { to { opacity: 1; transform: translateY(0); } }@media (prefers-reduced-motion: reduce) {
  [data-site-refresh-content] .rm-track .rm-stop, [data-site-refresh-content] .rm-track .rm-now { animation: none !important; opacity: 1 !important; transform: none !important; }
}/* ============================================================
   Мобільна версія
   Клас .is-mobile дублює медіазапит — щоб можна було показати
   телефонну ширину всередині десктопної сторінки.
   ============================================================ */[data-site-refresh-content] .rm.is-mobile { padding: var(--sp-20) 0; }[data-site-refresh-content] .rm.is-mobile .rm-wrap { padding: 0 var(--sp-5); }[data-site-refresh-content] .rm.is-mobile .rm-head { margin-bottom: var(--sp-12); }[data-site-refresh-content] .rm.is-mobile .rm-head p { font-size: var(--fs-14); }[data-site-refresh-content] .rm.is-mobile .rm-scroll { margin: 0 calc(var(--sp-5) * -1); padding: 0 var(--sp-5); }[data-site-refresh-content] .rm.is-mobile .rm-row { margin: 0; padding-top: var(--sp-6); }[data-site-refresh-content] .rm.is-mobile .rm-stop { width: 84px; }[data-site-refresh-content] .rm.is-mobile .rm-logo { width: 44px; height: 44px; }[data-site-refresh-content] .rm.is-mobile .rm-stop::before { top: 62px; }[data-site-refresh-content] .rm.is-mobile .rm-node { margin-top: 14px; }[data-site-refresh-content] .rm.is-mobile .rm-stop.soon .rm-node { margin-top: 15.5px; }[data-site-refresh-content] .rm.is-mobile .rm-logo--mt4 img { width: 36px; }[data-site-refresh-content] .rm.is-mobile .rm-logo--ctrader img { width: 32px; height: 32px; }[data-site-refresh-content] .rm.is-mobile .rm-name { font-size: var(--fs-11); margin-top: var(--sp-3); }[data-site-refresh-content] .rm.is-mobile .rm-now { width: 54px; }[data-site-refresh-content] .rm.is-mobile .rm-now::before, [data-site-refresh-content] .rm.is-mobile .rm-now::after { top: 62px; width: 69px; }[data-site-refresh-content] .rm.is-mobile .rm-now::before { left: -42px; }[data-site-refresh-content] .rm.is-mobile .rm-now::after  { left: 27px; }[data-site-refresh-content] .rm.is-mobile .rm-now-tick { margin-top: 44px; height: 18px; }[data-site-refresh-content] .rm.is-mobile .rm-now-lbl { font-size: 10px; }@media (max-width: 760px) {
  [data-site-refresh-content] .rm { padding: var(--sp-14) 0; }
  [data-site-refresh-content] .rm-wrap { padding: 0 var(--sp-5); }
  [data-site-refresh-content] .rm-head { margin-bottom: var(--sp-8); }
  [data-site-refresh-content] .rm-head p { font-size: var(--fs-14); }
  [data-site-refresh-content] .rm-scroll { margin: 0 calc(var(--sp-5) * -1); padding: 0 var(--sp-5); }
  [data-site-refresh-content] .rm-row { margin: 0; padding-top: var(--sp-6); }
  [data-site-refresh-content] .rm-stop { width: 84px; }
  [data-site-refresh-content] .rm-logo { width: 44px; height: 44px; }
  [data-site-refresh-content] .rm-stop::before { top: 62px; }
  [data-site-refresh-content] .rm-node { margin-top: 14px; }
  [data-site-refresh-content] .rm-stop.soon .rm-node { margin-top: 15.5px; }
  [data-site-refresh-content] .rm--color .rm-logo--mt4 img { width: 36px; }
  [data-site-refresh-content] .rm--color .rm-logo--ctrader img { width: 32px; height: 32px; }
  [data-site-refresh-content] .rm-name { font-size: var(--fs-11); margin-top: var(--sp-3); }
  [data-site-refresh-content] .rm-now { width: 54px; }
  [data-site-refresh-content] .rm-now::before, [data-site-refresh-content] .rm-now::after { top: 62px; width: 69px; }
  [data-site-refresh-content] .rm-now::before { left: -42px; }
  [data-site-refresh-content] .rm-now::after  { left: 27px; }
  [data-site-refresh-content] .rm-now-tick { margin-top: 44px; height: 18px; }
  [data-site-refresh-content] .rm-now-lbl { font-size: 10px; }
}/* ============================================================
   BitStat — блок болю
   Три названі проблеми. Кожна картка: проблема, як вона
   виглядає в житті, і одним рядком — що з нею робить продукт.
   Усе на змінних із tokens.css.
   ============================================================ */[data-site-refresh-content] .pain { position: relative; padding: var(--sp-12) 0 var(--sp-25); }[data-site-refresh-content] .pain-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}[data-site-refresh-content] .pain-head { max-width: 680px; margin: 0 0 var(--sp-14); }[data-site-refresh-content] .pain-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] .pain-eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: var(--status-negative); display: block; }[data-site-refresh-content] .pain-head h2 {
  margin: var(--sp-4) 0 0;
  font-size: clamp(30px, 2.6vw, 42px);
  font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
  color: var(--text-primary);
}[data-site-refresh-content] .pain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}[data-site-refresh-content] .pain-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--sp-6);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  transition: border-color .22s ease, transform .22s ease;
}[data-site-refresh-content] .pain-card:hover { border-color: var(--border-light); transform: translateY(-2px); }[data-site-refresh-content] .pain-card h3 {
  margin: 0;
  font-size: var(--fs-18);
  font-weight: 700; line-height: 1.3;
  color: var(--text-primary);
}[data-site-refresh-content] .pain-card p {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--text-muted);
}/* рядок «що з цим робить продукт»
   .pain-card .pain-fix, а не просто .pain-fix — інакше правило
   .pain-card p перебиває колір за специфічністю */[data-site-refresh-content] .pain-card .pain-fix {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--accent-bright);
}[data-site-refresh-content] .pain-card .pain-fix svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 3px; }@media (max-width: 900px) {
  [data-site-refresh-content] .pain { padding: var(--sp-14) 0; }
  [data-site-refresh-content] .pain-wrap { padding: 0 var(--sp-5); }
  [data-site-refresh-content] .pain-head { margin-bottom: var(--sp-8); }
  [data-site-refresh-content] .pain-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  [data-site-refresh-content] .pain-card { padding: var(--sp-5); }
}/* ============================================================
   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 — секція «Як це працює»
   ------------------------------------------------------------
   Три кроки, але замість голого тексту в кожній картці —
   маленький фрагмент справжнього інтерфейсу. Крок «Connect»
   показує форму ключа, «Trade» — рядки угод, які додаються самі,
   «Review» — криву капіталу. Показуємо продукт, а не переказуємо
   його словами.

   Анімація влаштована так само, як у сітці віджетів: приховані
   стани вмикаються лише класом .ready, який ставить JS і тільки
   коли сторінка справді видима. Якщо JS не спрацює або вкладка
   у фоні — вміст просто видно. Анімація ніколи не є причиною
   порожнього блоку.
   ============================================================ */[data-site-refresh-content] .hows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  counter-reset: hw;
}[data-site-refresh-content] .hw {
  position: relative;
  counter-increment: hw;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-20);
  transition: border-color .22s ease, transform .22s ease;
}[data-site-refresh-content] .hw:hover { border-color: var(--border-light); transform: translateY(-2px); }/* стрілка у проміжку між картками */[data-site-refresh-content] .hw + .hw::before {
  content: "";
  position: absolute;
  top: 46px; left: calc(var(--sp-6) * -1 - 5px);
  width: 10px; height: 10px;
  border-top: 1.5px solid var(--border-light);
  border-right: 1.5px solid var(--border-light);
  transform: rotate(45deg);
}/* ---------- шапка картки ---------- */[data-site-refresh-content] .hw-hd { display: flex; align-items: center; gap: var(--sp-3); }[data-site-refresh-content] .hw-n {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-bg); color: var(--accent-bright);
  font-size: var(--fs-13); font-weight: 700;
}[data-site-refresh-content] .hw-n::before { content: counter(hw); }[data-site-refresh-content] .hw h3 { margin: 0; font-size: var(--fs-17); font-weight: 700; color: var(--text-primary); }[data-site-refresh-content] .hw > p {
  margin: var(--sp-3) 0 var(--sp-6);
  font-size: var(--fs-14); line-height: 1.6; color: var(--text-muted);
}/* ---------- панель з фрагментом інтерфейсу ---------- */[data-site-refresh-content] .hw-vis {
  margin-top: auto;
  min-height: 224px;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-4);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  overflow: hidden;
}/* — крок 1: підключення ключа — */[data-site-refresh-content] .hw-field {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-10);
}[data-site-refresh-content] .hw-field + .hw-field { margin-top: var(--sp-2); }/* маленька плашка з фірмовим знаком; словесну назву лишаємо поруч —
   самі знаки на 22 пікселях не читаються без підпису */[data-site-refresh-content] .hw-logo {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 6px;
  object-fit: cover;   /* логотипи вже квадратні іконки-плитки */
}[data-site-refresh-content] .hw-ex {
  flex: 0 0 auto;
  font-size: var(--fs-12); font-weight: 600; color: var(--text-secondary);
}[data-site-refresh-content] .hw-key {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-12); color: var(--text-muted);
  letter-spacing: .08em;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}[data-site-refresh-content] .hw-check {
  flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-bg); color: var(--accent-bright);
}[data-site-refresh-content] .hw-check svg { width: 10px; height: 10px; }[data-site-refresh-content] .hw-tag {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;   /* панель — flex-колонка, інакше плашка розтягнеться */
  margin-top: var(--sp-3);
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--green-bg); color: var(--accent-bright);
  font-size: var(--fs-11); font-weight: 600;
}[data-site-refresh-content] .hw-tag svg { width: 11px; height: 11px; }/* — крок 2: угоди, що додаються самі — */[data-site-refresh-content] .hw-trade {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-13);
}[data-site-refresh-content] .hw-trade:last-child { border-bottom: 0; padding-bottom: 0; }[data-site-refresh-content] .hw-trade:first-child { padding-top: 0; }[data-site-refresh-content] .hw-side {
  flex: 0 0 auto;
  width: 6px; height: 6px; border-radius: 50%;
}[data-site-refresh-content] .hw-side.long  { background: var(--accent-bright); }[data-site-refresh-content] .hw-side.short { background: var(--status-negative); }[data-site-refresh-content] .hw-sym { flex: 1 1 auto; min-width: 0; color: var(--text-secondary); font-weight: 500; }[data-site-refresh-content] .hw-pnl { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }[data-site-refresh-content] .hw-pnl.pos { color: var(--accent-bright); }[data-site-refresh-content] .hw-pnl.neg { color: var(--status-negative); }/* — крок 3: підсумок тижня, зібраний як віджет дашборда — */[data-site-refresh-content] .hw-hero {
  padding: 9px 12px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--r-12);
}[data-site-refresh-content] .hw-hero-label {
  display: block;
  font-size: var(--fs-11); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}[data-site-refresh-content] .hw-hero-row {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  margin-top: 3px;
}[data-site-refresh-content] .hw-hero-amount {
  font-size: var(--fs-20); font-weight: 700; color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}[data-site-refresh-content] .hw-hero-badge {
  padding: 2px 7px; border-radius: 6px;
  font-size: var(--fs-11); font-weight: 600; color: var(--accent-bright);
  background: var(--public-accent-soft); border: 1px solid var(--public-border);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .hw-hero-badge {
  background: var(--green-bg);
  border-color: rgba(60,217,122,.22);
}[data-site-refresh-content] .hw-curve { display: block; width: 100%; height: 68px; margin-top: var(--sp-3); }[data-site-refresh-content] .hw-grid { stroke: color-mix(in srgb, var(--public-border) 70%, transparent); stroke-width: 1; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .hw-grid { stroke: rgba(255,255,255,.05); }[data-site-refresh-content] .hw-curve-fill { fill: url(#hwFill); }[data-site-refresh-content] .hw-curve-line {
  fill: none; stroke: var(--accent-bright); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}/* підпис під кривою — дві метрики, як у віджеті P&L Analysis */[data-site-refresh-content] .hw-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-11); color: var(--text-muted);
}[data-site-refresh-content] .hw-foot b { font-weight: 600; color: var(--text-secondary); }/* ---------- телефон ----------
   Три колонки по ~100px перетворювали опис кроку на стовпчик
   з одного слова в рядок. Розкладаємо кроки один під одним,
   а стрілку між картками повертаємо згори вниз. */@media (max-width: 860px) {
  /* minmax(0,1fr), не 1fr: інакше min-content кривої капіталу
     роздуває колонку до 310px і картки вилазять на 320px екрані */
  [data-site-refresh-content] .hows { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  [data-site-refresh-content] .hw { padding: var(--sp-5); }
  [data-site-refresh-content] .hw + .hw::before {
    top: calc(var(--sp-5) * -1 + 4px);
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
}/* крок 3 (12–13.08.2026): справжня крива балансу з канонічного
   віджета замість намальованої – цифри картки тепер сходяться
   з рештою сайту ($102,812.40, +3.80%, вінрейт 53.33%) */[data-site-refresh-content] .hw-balance { margin: var(--sp-2) 0; }[data-site-refresh-content] .hw-balance .chart { display: block; width: 100%; height: auto; }/* ==========================================================
   BitStat — віджети продукту, відтворені для лендінга
   ----------------------------------------------------------
   Не скріншот і не стилізація «на око»: розмітка й значення
   зняті з живого дашборда (bit-stat.com/dashboard) через
   getComputedStyle. Усе всередині .pw — щоб класи продукту
   не перетиналися з класами лендінга.
   ========================================================== */[data-site-refresh-content] .pw {
  --pw-surface: #101010;
  --pw-surface-2: #101011;
  --pw-border: #1f2225;
  --pw-border-card: rgba(255, 255, 255, .05);
  --pw-text: #ffffff;
  --pw-text-2: #a0a0a0;
  --pw-text-3: #8a8a8a;
  --pw-pos: #2f8058;
  --pw-neg: #a74846;
  --pw-warn: #f59e0b;
  --pw-pos-soft: color-mix(in srgb, var(--pw-pos) 12%, var(--pw-surface));
  --pw-neg-soft: color-mix(in srgb, var(--pw-neg) 12%, var(--pw-surface));
  --pw-warn-soft: color-mix(in srgb, var(--pw-warn) 12%, var(--pw-surface));
  --pw-font: -apple-system, system-ui, Inter, "Segoe UI", sans-serif;

  font-family: var(--pw-font);
  color: var(--pw-text);
}html[data-marketing-theme='light'] [data-site-refresh-content] .pw {
  --pw-surface: var(--public-surface);
  --pw-surface-2: var(--public-elevated);
  --pw-border: var(--public-border);
  --pw-border-card: var(--public-border);
  --pw-text: var(--public-text-primary);
  --pw-text-2: var(--public-text-secondary);
  --pw-text-3: var(--public-text-muted);
  --pw-pos: var(--public-success);
  --pw-neg: var(--public-danger);
  --pw-warn: var(--public-warning);
}/* ---------- каркас віджета ---------- */[data-site-refresh-content] .pw .dashboard-widget {
  display: flex; flex-direction: column;
  background: var(--pw-surface);
  border: 1px solid var(--pw-border-card);
  border-radius: 24px;
  font-size: 14px; line-height: 1.5;
  /* Preserve the original five-layer product-widget elevation. */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 1px 2px rgba(0,0,0,.1),
    0 2px 4px rgba(0,0,0,.1),
    0 4px 8px rgba(0,0,0,.1),
    0 8px 16px rgba(0,0,0,.1);
}html[data-marketing-theme='light'] [data-site-refresh-content] .pw .dashboard-widget {
  box-shadow: var(--public-shadow);
}[data-site-refresh-content] .pw .widget-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 56px;
  padding: 16px 56px 16px 16px;   /* правий відступ — під кнопки віджета */
}/* Раніше це був <h3>. У колажі й у секціях таких «заголовків»
   33 штуки, і всі вони йшли в структуру сторінки поперед справжніх
   H2 — для пошуковика виходило H1 → 28×H3 → H2. Це підпис віджета,
   а не заголовок розділу, тож тепер span. */[data-site-refresh-content] .pw .widget-title .widget-title-text {
  display: block;
  margin: 0; font-size: 16px; font-weight: 600; color: var(--pw-text);
}[data-site-refresh-content] .pw .widget-content { display: flex; flex-direction: column; gap: 8px; padding: 16px; }/* ---------- P&L Analysis ---------- */[data-site-refresh-content] .pw .pnl-hero {
  padding: 14px 12px; text-align: center;
  border: 1px solid var(--pw-border); border-radius: 12px;
}[data-site-refresh-content] .pw .pnl-hero-label {
  display: block;
  font-size: 10px; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; color: var(--pw-text-3);
}[data-site-refresh-content] .pw .pnl-hero-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 6px;
}[data-site-refresh-content] .pw .pnl-hero-amount { font-size: 24px; font-weight: 700; }[data-site-refresh-content] .pw .pnl-hero-badge {
  padding: 3px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 600;
}[data-site-refresh-content] .pw .pnl-hero-amount.positive, [data-site-refresh-content] .pw .pnl-metric-value.positive { color: var(--pw-pos); }[data-site-refresh-content] .pw .pnl-hero-amount.negative, [data-site-refresh-content] .pw .pnl-metric-value.negative { color: var(--pw-neg); }[data-site-refresh-content] .pw .pnl-hero-badge.positive {
  color: var(--pw-pos);
  background: var(--pw-pos-soft);
  border: 1px solid color-mix(in srgb, var(--pw-pos) 35%, var(--pw-border));
}[data-site-refresh-content] .pw .pnl-hero-badge.negative {
  color: var(--pw-neg);
  background: var(--pw-neg-soft);
  border: 1px solid color-mix(in srgb, var(--pw-neg) 35%, var(--pw-border));
}[data-site-refresh-content] .pw .pnl-sections { display: flex; flex-direction: column; gap: 8px; }[data-site-refresh-content] .pw .pnl-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }[data-site-refresh-content] .pw .pnl-metric {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 9px 10px;
  background: var(--pw-surface-2); border-radius: 20px;
}[data-site-refresh-content] .pw .pnl-metric-label {
  font-size: 10px; font-weight: 500; letter-spacing: .2px; color: var(--pw-text-3);
}[data-site-refresh-content] .pw .pnl-metric-value { font-size: 14px; font-weight: 700; color: var(--pw-text); }[data-site-refresh-content] .pw .pnl-inline-rows {
  display: flex; flex-direction: column; gap: 3px;
  padding-top: 8px; border-top: 1px solid var(--pw-border);
}[data-site-refresh-content] .pw .pnl-inline-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  padding: 7px 12px;
  background: var(--pw-surface-2); border-radius: 20px;
}/* ---------- смуга метрик над віджетами ---------- */[data-site-refresh-content] .pw .metrics-panel {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px 12px;
  background: var(--pw-surface);
  border: 1px solid var(--pw-border-card);
  border-radius: 24px;
}[data-site-refresh-content] .pw .metric-card {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px;
  background: var(--pw-surface-2);
  border: 1px solid var(--pw-border-card);
  border-radius: 20px;
}[data-site-refresh-content] .pw .metric-label { font-size: 13px; font-weight: 500; color: var(--pw-text-2); }[data-site-refresh-content] .pw .metric-value { font-size: 13px; font-weight: 600; color: var(--pw-text); }[data-site-refresh-content] .pw .metric-value.negative { color: var(--pw-neg); }[data-site-refresh-content] .pw .metric-value.positive { color: var(--pw-pos); }/* ---------- рядок журналу ---------- */[data-site-refresh-content] .pw .journal { width: 100%; border-collapse: collapse; }[data-site-refresh-content] .pw .journal th {
  padding: 4px 12px; text-align: left;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  color: var(--pw-text-3);
  background: var(--pw-surface);
  border-bottom: 1px solid var(--pw-border);
}[data-site-refresh-content] .pw .journal td {
  height: 48px; padding: 4px 12px;
  font-size: 13px; font-weight: 400; color: var(--pw-text);
  border-bottom: 1px solid var(--pw-border);
}[data-site-refresh-content] .pw .result-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 16px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
}[data-site-refresh-content] .pw .result-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }[data-site-refresh-content] .pw .result-badge.win  { color: var(--pw-pos);  background: var(--pw-pos-soft); }[data-site-refresh-content] .pw .result-badge.lose { color: var(--pw-neg);  background: var(--pw-neg-soft); }[data-site-refresh-content] .pw .result-badge.be   { color: var(--pw-warn); background: var(--pw-warn-soft); }[data-site-refresh-content] .pw .direction-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 20px;
  font-size: 14px; font-weight: 500; color: var(--pw-text);
}[data-site-refresh-content] .pw .direction-badge svg { width: 16px; height: 16px; }[data-site-refresh-content] .pw .direction-long  svg { color: var(--pw-pos); }[data-site-refresh-content] .pw .direction-short svg { color: var(--pw-neg); }/* ==========================================================
   ЧАСТИНА 2 — решта віджетів дашборда
   Значення так само зняті з живого застосунку.
   ========================================================== *//* ---------- спільні контроли в шапці віджета ---------- */[data-site-refresh-content] .pw .widget-controls { display: flex; align-items: center; gap: 8px; }[data-site-refresh-content] .pw .capital-toggle {
  display: flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--pw-surface-2);
  border: 1px solid var(--pw-border); border-radius: 10px;
}[data-site-refresh-content] .pw .capital-toggle-btn {
  padding: 5px 12px; border: 0; border-radius: 8px;
  background: none; color: var(--pw-text-2);
  font: 600 12px var(--pw-font); cursor: pointer;
}[data-site-refresh-content] .pw .capital-toggle-btn.active { background: var(--pw-surface); color: var(--pw-text); }[data-site-refresh-content] .pw .icon-toggle-group { display: flex; align-items: center; gap: 2px; }[data-site-refresh-content] .pw .icon-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 4px; border: 0; border-radius: 6px;
  background: none; color: var(--pw-text-3); cursor: pointer;
}[data-site-refresh-content] .pw .icon-toggle-btn.active { color: var(--pw-text); }[data-site-refresh-content] .pw .icon-toggle-btn svg { width: 15px; height: 15px; }[data-site-refresh-content] .pw .cal-month-label { font-size: 12px; font-weight: 600; color: var(--pw-text-2); }/* ---------- Capital Overview ---------- */[data-site-refresh-content] .pw .capital-overview-total {
  padding: 10px 12px; background: var(--pw-surface-2); border-radius: 20px;
}[data-site-refresh-content] .pw .capital-overview-label {
  font-size: 9px; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; color: var(--pw-text-2);
}[data-site-refresh-content] .pw .capital-overview-amount { font-size: 22px; font-weight: 700; }[data-site-refresh-content] .pw .capital-overview-breakdown { display: flex; flex-direction: column; gap: 8px; }[data-site-refresh-content] .pw .capital-overview-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; background: var(--pw-surface-2); border-radius: 20px;
}[data-site-refresh-content] .pw .capital-overview-item-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; color: var(--pw-text-2);
}[data-site-refresh-content] .pw .account-platform-icon { width: 18px; height: 18px; border-radius: 6px; }[data-site-refresh-content] .pw .capital-overview-item-value { font-size: 13px; font-weight: 600; }/* ---------- Calendar (теплова карта) ---------- */[data-site-refresh-content] .pw .cal-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0 16px;
}[data-site-refresh-content] .pw .cal-top-label { font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--pw-text-3); }[data-site-refresh-content] .pw .cal-top-day { font-size: 13px; font-weight: 600; color: var(--pw-text); }[data-site-refresh-content] .pw .cal-top-sum { font-size: 20px; font-weight: 700; }[data-site-refresh-content] .pw .cal-grid, [data-site-refresh-content] .pw .cal-week {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}[data-site-refresh-content] .pw .cal-week span {
  font-size: 9px; color: var(--pw-text-2); text-align: center;
}[data-site-refresh-content] .pw .cal-day {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: 8px;
  font-size: 12px; font-weight: 500; color: var(--pw-text-2);
  background: var(--pw-surface-2);
}[data-site-refresh-content] .pw .cal-day.out { background: var(--pw-surface); color: var(--pw-text-3); }[data-site-refresh-content] .pw .cal-day.win,
[data-site-refresh-content] .pw .cal-day.win.soft  { background: var(--pw-pos-soft); color: var(--pw-pos); }[data-site-refresh-content] .pw .cal-day.lose,
[data-site-refresh-content] .pw .cal-day.lose.soft { background: var(--pw-neg-soft); color: var(--pw-neg); }html[data-marketing-theme='light'] [data-site-refresh-content='home'] #calendar .split-frame--live.pw .cal-day.win.soft,
html[data-marketing-theme='light'] [data-site-refresh-content='home'] .hero-drift.pw .cal-day.win.soft {
  color: var(--public-on-success);
}html[data-marketing-theme='light'] [data-site-refresh-content='home'] #calendar .split-frame--live.pw .cal-day.lose.soft,
html[data-marketing-theme='light'] [data-site-refresh-content='home'] .hero-drift.pw .cal-day.lose.soft {
  color: var(--public-on-danger);
}/* ---------- Strategies / Setups ---------- */[data-site-refresh-content] .pw .strategy-bar-list { display: flex; flex-direction: column; gap: 6px; }[data-site-refresh-content] .pw .strategy-bar-row { position: relative; border-radius: 8px; }[data-site-refresh-content] .pw .strategy-bar-bg {
  position: absolute; inset: 0;
  background: var(--pw-surface-2);
  border: 1px solid var(--pw-border);
  border-radius: 8px;
}/* заливка показує частку — ширина задається інлайн */[data-site-refresh-content] .pw .strategy-bar-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--pw-pos-soft);
  border-radius: 8px;
}[data-site-refresh-content] .pw .strategy-bar-content {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 42px; padding: 0 14px;
}[data-site-refresh-content] .pw .strategy-bar-left, [data-site-refresh-content] .pw .strategy-bar-right { display: flex; align-items: center; }[data-site-refresh-content] .pw .strategy-bar-left  { gap: 6px; }[data-site-refresh-content] .pw .strategy-bar-right { gap: 10px; }[data-site-refresh-content] .pw .strategy-bar-name  { font-size: 13px; font-weight: 600; color: var(--pw-text-2); }[data-site-refresh-content] .pw .strategy-bar-count { font-size: 11px; color: var(--pw-text-3); }[data-site-refresh-content] .pw .strategy-bar-pnl   { font-size: 13px; font-weight: 700; color: var(--pw-text-2); }[data-site-refresh-content] .pw .strategy-bar-pnl.positive { color: var(--pw-pos); }[data-site-refresh-content] .pw .strategy-bar-pnl.negative { color: var(--pw-neg); }[data-site-refresh-content] .pw .strategy-bar-meta  { font-size: 11px; color: var(--pw-text-3); }/* ---------- Results by Instruments ---------- */[data-site-refresh-content] .pw .instruments-list { display: flex; flex-direction: column; gap: 8px; }[data-site-refresh-content] .pw .instrument-item {
  display: flex; flex-direction: column; gap: 6px; padding: 12px;
  background: var(--pw-surface-2);
  border: 1px solid var(--pw-border-card); border-radius: 20px;
}[data-site-refresh-content] .pw .item-header { display: flex; align-items: center; justify-content: space-between; }[data-site-refresh-content] .pw .item-symbol { font-size: 14px; font-weight: 600; }[data-site-refresh-content] .pw .item-trades { font-size: 10px; letter-spacing: .3px; text-transform: uppercase; color: var(--pw-text-3); }[data-site-refresh-content] .pw .item-metrics-grid { display: flex; justify-content: space-between; gap: 12px; }[data-site-refresh-content] .pw .item-stat { display: flex; flex-direction: column; gap: 4px; flex: 1; }[data-site-refresh-content] .pw .stat-label { font-size: 10px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--pw-text-3); }[data-site-refresh-content] .pw .stat-value { font-size: 14px; font-weight: 600; }[data-site-refresh-content] .pw .stat-value.positive { color: var(--pw-pos); }[data-site-refresh-content] .pw .stat-value.negative { color: var(--pw-neg); }/* ---------- ряд статистик над графіком ---------- */[data-site-refresh-content] .pw .chart-stats-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 0 4px 12px; border-bottom: 1px solid var(--pw-border);
}[data-site-refresh-content] .pw .chart-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }[data-site-refresh-content] .pw .stat-num { font-size: 18px; font-weight: 700; }[data-site-refresh-content] .pw .stat-num.positive { color: var(--pw-pos); }[data-site-refresh-content] .pw .stat-num.negative { color: var(--pw-neg); }/* ---------- графіки (перемальовані як SVG) ---------- */[data-site-refresh-content] .pw .chart { display: block; width: 100%; }[data-site-refresh-content] .pw .chart .axis    { font-size: 9px; fill: var(--pw-text-3); }[data-site-refresh-content] .pw .chart .grid    { stroke: color-mix(in srgb, var(--pw-border) 70%, transparent); stroke-width: 1; }[data-site-refresh-content] .pw .chart .line    { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }[data-site-refresh-content] .pw .chart .line.up { stroke: var(--pw-pos); }[data-site-refresh-content] .pw .chart .line.dn { stroke: var(--pw-neg); }[data-site-refresh-content] .pw .chart .bar.up  { fill: var(--pw-pos); }[data-site-refresh-content] .pw .chart .bar.dn  { fill: var(--pw-neg); }[data-site-refresh-content] .pw .chart .dash    { stroke: var(--pw-text-3); stroke-width: 1; stroke-dasharray: 3 4; }/* ---------- Trading Sessions ---------- */[data-site-refresh-content] .pw .sessions-chart-view { display: flex; flex-direction: column; gap: 16px; }[data-site-refresh-content] .pw .session-best {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  background: var(--pw-surface-2);
  border: 1px solid var(--pw-border); border-radius: 10px;
}[data-site-refresh-content] .pw .session-best-label { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--pw-text-2); }[data-site-refresh-content] .pw .session-best-value { display: flex; align-items: center; gap: 8px; }[data-site-refresh-content] .pw .session-best-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pw-pos); }[data-site-refresh-content] .pw .session-best-name { font-size: 13px; font-weight: 600; color: var(--pw-text); }[data-site-refresh-content] .pw .session-best-pnl  { font-size: 13px; font-weight: 700; color: var(--pw-pos); }[data-site-refresh-content] .pw .session-bars-container { display: flex; align-items: flex-end; justify-content: center; gap: 24px; }[data-site-refresh-content] .pw .session-bar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }[data-site-refresh-content] .pw .session-bar-track { display: flex; align-items: flex-end; justify-content: center; height: 140px; width: 100%; }[data-site-refresh-content] .pw .session-bar-fill {
  width: 50%; border-radius: 8px;
  background: var(--pw-pos-soft);
  border: 1px solid var(--pw-border);
}[data-site-refresh-content] .pw .session-bar-best .session-bar-fill { background: var(--pw-pos); }[data-site-refresh-content] .pw .session-bar-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--pw-text-2); }[data-site-refresh-content] .pw .session-bar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pw-pos); }/* ---------- P&L by Weekdays ---------- */[data-site-refresh-content] .pw .weekdays-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }[data-site-refresh-content] .pw .weekday-col { display: flex; flex-direction: column; align-items: center; }[data-site-refresh-content] .pw .weekday-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 10px; background: var(--pw-surface-2); border-radius: 6px;
}[data-site-refresh-content] .pw .weekday-sum { font-size: 11px; font-weight: 800; }[data-site-refresh-content] .pw .weekday-sum.positive { color: var(--pw-pos); }[data-site-refresh-content] .pw .weekday-sum.negative { color: var(--pw-neg); }[data-site-refresh-content] .pw .weekday-trades { font-size: 9px; color: var(--pw-text-2); }[data-site-refresh-content] .pw .weekday-bars { position: relative; width: 100%; height: 100px; }[data-site-refresh-content] .pw .weekday-zero { position: absolute; left: 0; right: 0; top: 50px; height: 1px; background: var(--pw-border); }[data-site-refresh-content] .pw .weekday-bar { position: absolute; left: 25%; width: 50%; border-radius: 4px; }[data-site-refresh-content] .pw .weekday-bar.up { bottom: 50px; background: var(--pw-pos); }[data-site-refresh-content] .pw .weekday-bar.dn { top: 50px; background: var(--pw-neg); }[data-site-refresh-content] .pw .weekday-name { font-size: 10px; font-weight: 600; color: var(--pw-text-2); }/* ---------- порожній стан ---------- */[data-site-refresh-content] .pw .widget-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 160px; color: var(--pw-text-3); font-size: 13px;
}[data-site-refresh-content] .pw .widget-empty svg { width: 40px; height: 40px; opacity: .5; }/* ==========================================================
   ЧАСТИНА 3 — оновлені віджети (звірено після правок у продукті)
   ========================================================== *//* ---------- Risk/Reward, вкладка Analysis ---------- */[data-site-refresh-content] .pw .rr-analysis-body { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }[data-site-refresh-content] .pw .rr-analysis-bar-wrap { display: flex; flex-direction: column; gap: 6px; }[data-site-refresh-content] .pw .rr-analysis-gradient-bar {
  position: relative; height: 14px; border-radius: 999px;
  background: linear-gradient(90deg,
    var(--pw-neg) 0,
    var(--pw-warn) 40%,
    var(--pw-pos) 100%);
}/* позначка фактичного RR — ставиться інлайн через left */[data-site-refresh-content] .pw .rr-analysis-marker {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 4px; height: 22px; border-radius: 2px;
  background: var(--pw-text); border: 1px solid var(--pw-border);
}[data-site-refresh-content] .pw .rr-analysis-bar-labels { display: flex; justify-content: space-between; font-size: 10px; }[data-site-refresh-content] .pw .rr-analysis-bar-labels .lo { color: var(--pw-neg); }[data-site-refresh-content] .pw .rr-analysis-bar-labels .mid { color: var(--pw-text-3); }[data-site-refresh-content] .pw .rr-analysis-bar-labels .hi { color: var(--pw-pos); }[data-site-refresh-content] .pw .rr-analysis-details { display: flex; flex-direction: column; gap: 8px; }[data-site-refresh-content] .pw .rr-analysis-detail-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-top: 1px solid var(--pw-border);
}[data-site-refresh-content] .pw .rr-analysis-detail-row span:first-child { font-size: 12px; color: var(--pw-text-2); }[data-site-refresh-content] .pw .rr-analysis-detail-row span:last-child  { font-size: 12px; font-weight: 600; }[data-site-refresh-content] .pw .rr-analysis-detail-row .positive { color: var(--pw-pos); }[data-site-refresh-content] .pw .rr-analysis-detail-row .negative { color: var(--pw-neg); }/* ---------- Results by Instruments, вигляд «бублик» ---------- */[data-site-refresh-content] .pw .instruments-donut-layout {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 8px 4px 12px;
}[data-site-refresh-content] .pw .instruments-donut-canvas { position: relative; width: 157px; height: 157px; flex: 0 0 auto; }[data-site-refresh-content] .pw .instruments-donut-canvas svg { width: 100%; height: 100%; transform: rotate(-90deg); }[data-site-refresh-content] .pw .instruments-donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}[data-site-refresh-content] .pw .instruments-donut-center strong { font-size: 20px; font-weight: 700; }[data-site-refresh-content] .pw .instruments-donut-center span {
  font-size: 10px; font-weight: 600; letter-spacing: 1.4px; color: var(--pw-text-3);
}[data-site-refresh-content] .pw .instruments-donut-legend { display: flex; flex-direction: column; gap: 8px; }[data-site-refresh-content] .pw .instruments-donut-legend-item { display: flex; align-items: center; gap: 8px; }[data-site-refresh-content] .pw .instruments-donut-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }[data-site-refresh-content] .pw .instruments-donut-legend-item b { display: block; font-size: 12px; font-weight: 600; }[data-site-refresh-content] .pw .instruments-donut-legend-item small { display: block; font-size: 10px; color: var(--pw-text-3); }/* ---------- шапка: кнопка розгортання і дропдаун періоду ---------- */[data-site-refresh-content] .pw .widget-controls-stack { display: flex; align-items: center; gap: 8px; }[data-site-refresh-content] .pw .chart-expand-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 4px; border: 0; border-radius: 6px;
  background: var(--pw-surface-2); color: var(--pw-text-2); cursor: pointer;
}[data-site-refresh-content] .pw .chart-expand-btn svg { width: 15px; height: 15px; }[data-site-refresh-content] .pw .agg-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 8px;
  background: var(--pw-surface-2); border: 1px solid var(--pw-border);
  color: var(--pw-text-2); font: 500 12px var(--pw-font); cursor: pointer;
}/* ---------- Payouts: підсумки й помісячні стовпчики ----------
   Раніше ці правила жили в split-live.css, але вони описують сам
   віджет, а не секцію лендінга, — тож переїхали сюди, інакше
   на сторінках без split-live.css плашки розсипалися. */[data-site-refresh-content] .pw .payout-totals {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--pw-border); border: 1px solid var(--pw-border);
  border-radius: 12px; overflow: hidden;
}[data-site-refresh-content] .pw .payout-totals div { background: var(--pw-surface-2); padding: 8px 10px; text-align: center; }[data-site-refresh-content] .pw .payout-totals i {
  font-style: normal; display: block;
  font-size: 9px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--pw-text-3);
}[data-site-refresh-content] .pw .payout-totals b { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; }[data-site-refresh-content] .pw .chart .bar.amber { fill: var(--pw-warn); }/* The original dark widgets use distinct native shades for charts and chips. */html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .pnl-hero-badge.positive {
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.25);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .pnl-hero-badge.negative {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.25);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .result-badge.win { background: rgba(16,185,129,.1); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .result-badge.lose { background: rgba(239,68,68,.1); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .result-badge.be { background: rgba(245,158,11,.15); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .capital-toggle { background: rgba(255,255,255,.06); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .capital-toggle-btn.active { background: rgba(255,255,255,.1); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .cal-top-day { color: rgba(255,255,255,.85); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .cal-week span { color: var(--pw-text-3); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .cal-day {
  color: rgba(255,255,255,.7);
  background: #1f2126;
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .cal-day.out {
  background: rgba(30,41,59,.25);
  color: var(--pw-text-3);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .cal-day.win,
html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .cal-day.win.soft {
  background: var(--pw-pos);
  color: rgba(255,255,255,.95);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .cal-day.lose,
html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .cal-day.lose.soft {
  background: var(--pw-neg);
  color: rgba(255,255,255,.95);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .strategy-bar-bg {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.12);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .strategy-bar-fill { background: rgba(47,128,88,.28); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .strategy-bar-name { color: rgba(255,255,255,.58); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .strategy-bar-count,
html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .strategy-bar-meta { color: rgba(255,255,255,.32); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .chart-stats-row { border-bottom-color: rgba(255,255,255,.04); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .chart .grid { stroke: rgba(255,255,255,.05); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .chart .dash { stroke: rgba(255,255,255,.18); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .session-best {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .session-best-label { color: rgba(255,255,255,.35); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .session-best-dot,
html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .session-bar-dot { background: #2d694c; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .session-best-name { color: rgba(255,255,255,.85); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .session-bar-fill {
  background: rgba(45,105,76,.3);
  border-color: rgba(255,255,255,.06);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .session-bar-best .session-bar-fill { background: rgba(45,105,76,.55); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .session-bar-label { color: rgba(255,255,255,.65); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .weekday-card { background: #1a1a1b; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .weekday-trades { color: #cbd5e1; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .weekday-zero { background: rgba(255,255,255,.15); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .weekday-name { color: rgba(255,255,255,.4); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .rr-analysis-gradient-bar {
  background: linear-gradient(90deg,
    rgba(190,82,73,.92) 0,
    rgba(232,140,61,.90) 24%,
    rgba(217,160,55,.88) 40%,
    rgba(45,105,76,.88) 68%,
    rgb(45,105,76) 100%);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .rr-analysis-marker {
  background: #fff;
  border: 0;
  box-shadow: 0 0 6px rgba(0,0,0,.5);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .rr-analysis-detail-row { border-top-color: rgba(255,255,255,.04); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .chart-expand-btn {
  background: rgba(255,255,255,.04);
  color: var(--pw-text-3);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .chart .bar.amber { fill: #d9a037; }/* ==========================================================
   Перший екран — колонки віджетів, що пливуть
   ----------------------------------------------------------
   Замість скріншота дашборда: три колонки живих віджетів,
   які повільно їдуть у різні боки. Колаж навмисно виходить
   за правий край — обрізаний кадр читається як «застосунок
   продовжується далі», акуратний прямокутник — як «це все».
   ========================================================== *//* .hero-right — це вікно, крізь яке видно колаж. Він більший
   за вікно і зменшений трансформом, тому віджети лишаються
   у своїх справжніх пропорціях і нічого не переноситься. */[data-site-refresh-content] .hero--split2 .hero-right {
  position: relative;
  overflow: hidden;
  /* висоту вікна тримаємо у змінній: колаж рахує з неї свою
     висоту до масштабування, тож брейкпоінт міняє одне число */
  --hero-h: 620px;
  height: var(--hero-h);
}/* згасання — на вікні, а не на колажі: інакше воно теж масштабується */[data-site-refresh-content] .hero--split2 .hero-right::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom,
    var(--surface-base) 0, transparent 90px,
    transparent 64%, var(--surface-base) 100%);
}/* Герой вирівнюємо по тому самому контейнеру, що й решта сторінки.
   Раніше він розтягувався до min(1360px, 92vw) під широкий скріншот —
   із колажем це виглядало ширшим за все інше на сторінці. */[data-site-refresh-content] .hero--split2 .hero-split-inner {
  max-width: var(--container);
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  gap: var(--sp-8);
}/* заголовок ліз по одному слову в рядок — на 470 px «journal»
   і «actually» не вміщалися поруч із сусідами */[data-site-refresh-content] .hero--split2 .hero-left h1 {
  font-size: clamp(var(--fs-32), 3.1vw, var(--fs-40));
  line-height: 1.1;
  /* інакше останній рядок лишався з одним словом «goes» */
  text-wrap: balance;
}[data-site-refresh-content] .hero--split2 .hero-left .hero-description { max-width: 42ch; }[data-site-refresh-content] .hero-drift {
  /* Малюємо у «великих» пікселях, а вміщаємо трансформом:
     --hero-k рахує скрипт як ширина вікна / 912. */
  position: absolute; inset: 0 auto 0 0;
  width: 912px;
  height: calc(var(--hero-h, 620px) / var(--hero-k, .65));
  transform: scale(var(--hero-k, .65));
  transform-origin: 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}[data-site-refresh-content] .hero-drift .col { overflow: hidden; }[data-site-refresh-content] .hero-drift .track {
  display: flex; flex-direction: column; gap: 14px;
  animation: heroSlide var(--dur, 56s) linear infinite;
  will-change: transform;
}[data-site-refresh-content] .hero-drift .cell { flex: 0 0 auto; }@keyframes heroSlide { to { transform: translateY(-50%); } }/* згасання по краях — накладкою, а не маскою:
   у Safari й Firefox правила композиції масок розходяться *//* курсор зупиняє рух — щоб можна було роздивитися віджет */[data-site-refresh-content] .hero-drift:hover .track { animation-play-state: paused; }/* дрібніший масштаб віджетів, ніж у секціях */[data-site-refresh-content] .hero-drift .dashboard-widget { border-radius: 16px; }[data-site-refresh-content] .hero-drift .widget-header { padding: 12px 14px 6px; min-height: 0; }[data-site-refresh-content] .hero-drift .widget-title .widget-title-text { font-size: 13px; }[data-site-refresh-content] .hero-drift .widget-content { padding: 0 14px 14px; gap: 6px; }/* max-height тут розплющував стовпчики: svg тягнеться по viewBox,
   тож висоту лишаємо графіку, а стримуємо ширину колонки */[data-site-refresh-content] .hero-drift .chart { height: auto; }[data-site-refresh-content] .hero-drift .metrics-panel { border-radius: 16px; }@media (prefers-reduced-motion: reduce) {
  [data-site-refresh-content] .hero-drift .track { animation: none; }
}@media (max-width: 1100px) {
  [data-site-refresh-content] .hero--split2 .hero-right { --hero-h: 520px; }
}/* ----- телефон -----
   Три колонки на 350 px дали б масштаб 0.38 — підписи по 5 px,
   тобто рівно та сама нечитабельність, через яку ми викинули
   скріншоти. Тому лишаємо одну колонку в її справжній ширині
   (293 px) і розтягуємо під екран: текст стає навіть більшим
   за десктопний колаж. У кадрі 400px лишаємо перші дві картки
   як статичний фрагмент; на ширині 412px видно лише P&L. */@media (max-width: 900px) {
  [data-site-refresh-content] .hero--split2 .hero-split-inner { grid-template-columns: 1fr; }
  [data-site-refresh-content] .hero--split2 .hero-right {
    display: block;
    --hero-h: 400px;
    margin-top: var(--sp-4);
    /* без стелі колонка на планшеті розтягнулась би до 700px,
       тобто масштаб 2.4 — віджет із підписами по 30px.
       justify-self, а не margin: auto: авто-поля знімають зі
       grid-елемента розтягування, і він схлопується до 32px,
       бо єдина його дитина позиціонована абсолютно. */
    width: 100%;
    max-width: 430px;
    justify-self: center;
  }
  [data-site-refresh-content] .hero-drift {
    display: grid;
    grid-template-columns: 1fr;
    width: 293px;
  }
  [data-site-refresh-content] .hero-drift .col + .col { display: none; }
  /* Це обрізаний декоративний колаж: залишаємо перші картки для кадру,
     а повтори поза ним не беремо в мобільне компонування. */
  [data-site-refresh-content] .hero-drift .track {
    animation: none;
    transform: none;
    will-change: auto;
  }
  [data-site-refresh-content] .hero-drift > .col:first-child > .track > .cell:nth-child(n + 3) {
    display: none;
  }
  /* верхнє згасання під навбар на телефоні не потрібне —
     колаж і так починається нижче кнопок */
  [data-site-refresh-content] .hero--split2 .hero-right::after {
    background: linear-gradient(to bottom,
      var(--surface-base) 0, transparent 40px,
      transparent 70%, var(--surface-base) 100%);
  }
}/* Trading Sessions у вузькій колонці
   ----------------------------------------------------------
   Віджет розрахований на 366 px. На 264 px чотири стовпчики
   перетворювалися на голки, а підписи ламалися на два рядки
   («New York») і збивали крапки з лінії. Тому в колажі —
   нижчий трек, ширші стовпчики й тісніший проміжок. */[data-site-refresh-content] .hero-drift .session-bars-container { gap: 10px; }[data-site-refresh-content] .hero-drift .session-bar-track { height: 104px; }[data-site-refresh-content] .hero-drift .session-bar-fill { width: 76%; }[data-site-refresh-content] .hero-drift .session-bar-label {
  gap: 4px; font-size: 11px;
  white-space: nowrap;
}[data-site-refresh-content] .hero-drift .session-bar-dot { width: 6px; height: 6px; }[data-site-refresh-content] .hero-drift .session-best { padding: 8px 10px; }[data-site-refresh-content] .hero-drift .session-best-label { font-size: 10px; }/* ==========================================================
   Живі віджети замість скріншотів у секціях фіч
   ----------------------------------------------------------
   .split-frame лишається рамкою секції, всередину замість
   <img> кладемо розмітку віджета з product-widgets.css.
   Власну рамку й тінь віджета гасимо — інакше рамка в рамці.
   ========================================================== */[data-site-refresh-content] .split-frame--live {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 357px;
  padding: var(--sp-4);
  background: var(--public-surface);
}[data-site-refresh-content] .split-frame--live .dashboard-widget {
  border: 0; box-shadow: none; background: transparent;
}[data-site-refresh-content] .split-frame--live .widget-header { padding: 0 0 var(--sp-4); min-height: 0; }[data-site-refresh-content] .split-frame--live .widget-content { padding: 0; }/* журнал у секції показує п'ять колонок замість тринадцяти —
   на 535 px решта все одно нечитабельна */[data-site-refresh-content] .split-frame--live .journal th:first-child,
[data-site-refresh-content] .split-frame--live .journal td:first-child { padding-left: 0; }[data-site-refresh-content] .split-frame--live .journal th:last-child,
[data-site-refresh-content] .split-frame--live .journal td:last-child { padding-right: 0; text-align: right; }[data-site-refresh-content] .split-frame--live .journal td { height: 44px; }[data-site-refresh-content] .split-frame--live .journal .num { font-weight: 700; font-variant-numeric: tabular-nums; }[data-site-refresh-content] .split-frame--live .journal .num.pos { color: var(--pw-pos); }[data-site-refresh-content] .split-frame--live .journal .num.neg { color: var(--pw-neg); }/* стилі виплат переїхали в product-widgets.css — вони про віджет, не про секцію */@media (max-width: 900px) {
  [data-site-refresh-content] .split-frame--live { min-height: 0; }
}/* Account Balance у продукті малюється не зеленим, а світло-сірим,
   із крапками на точках даних і ледь помітною сірою заливкою */[data-site-refresh-content] .pw .chart .line.neutral { stroke: var(--pw-text-2); stroke-width: 2; }[data-site-refresh-content] .pw .chart .dot { fill: var(--pw-text-2); }[data-site-refresh-content] .pw .agg-caret { width: 8px; height: 8px; }/* ==========================================================
   Секція журналу на всю ширину — таблиця з усіма колонками
   ========================================================== */[data-site-refresh-content] .jrn { padding: var(--sp-30) 0; }[data-site-refresh-content] .jrn-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-6); }[data-site-refresh-content] .jrn-head { max-width: 720px; margin: 0 auto var(--sp-10); text-align: center; }[data-site-refresh-content] .jrn-head h2 { margin: var(--sp-3) 0 0; }[data-site-refresh-content] .jrn-head p {
  margin: var(--sp-4) 0 0; font-size: var(--fs-16);
  line-height: 1.65; color: var(--text-muted);
}/* картка таблиці; праворуч — згасання, бо колонок більше, ніж влазить */[data-site-refresh-content] .jrn-card {
  position: relative;
  border: 1px solid var(--border); border-radius: var(--r-16);
  background: var(--public-surface);
  box-shadow: var(--public-shadow);
  overflow: hidden;
}[data-site-refresh-content] .jrn-card::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 10px; width: 64px;
  background: linear-gradient(90deg, transparent, var(--public-surface));
  pointer-events: none;
}/* таблиця ширша за екран — гортається вбік, як у застосунку */[data-site-refresh-content] .jrn-scroll {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: var(--public-border) transparent;
  overscroll-behavior-x: contain;
}[data-site-refresh-content] .jrn-scroll::-webkit-scrollbar { height: 8px; }[data-site-refresh-content] .jrn-scroll::-webkit-scrollbar-track { background: transparent; }[data-site-refresh-content] .jrn-scroll::-webkit-scrollbar-thumb { background: var(--public-border); border-radius: 100px; }[data-site-refresh-content] .jrn-scroll::-webkit-scrollbar-thumb:hover { background: var(--public-text-muted); }/* смуга метрик над таблицею — теж гортається */[data-site-refresh-content] .jrn-metrics {
  display: flex; gap: 8px; padding: 8px 12px;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}[data-site-refresh-content] .jrn-metrics::-webkit-scrollbar { display: none; }[data-site-refresh-content] .jrn-metrics .metric-card { flex: 0 0 auto; }/* підказка про горизонтальний скрол */[data-site-refresh-content] .jrn-hint {
  display: flex; align-items: center; gap: 6px;
  margin-top: var(--sp-3);
  font-size: var(--fs-12); color: var(--text-muted);
}[data-site-refresh-content] .jrn-hint svg { width: 14px; height: 14px; }/* шапка місяця з плашками підсумків */[data-site-refresh-content] .pw .month-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: 12px 16px;
}[data-site-refresh-content] .pw .month-title { font-size: 14px; font-weight: 600; }[data-site-refresh-content] .pw .month-stats { display: flex; align-items: center; gap: 8px; }[data-site-refresh-content] .pw .month-stats .cnt { font-size: 12px; font-weight: 500; color: var(--pw-text-2); }[data-site-refresh-content] .pw .month-stats b {
  padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500;
}[data-site-refresh-content] .pw .m-pos { color: var(--pw-pos); background: var(--pw-pos-soft); }[data-site-refresh-content] .pw .m-neg { color: var(--pw-neg); background: var(--pw-neg-soft); }[data-site-refresh-content] .pw .m-rr  { color: var(--pw-warn); background: var(--pw-warn-soft); }[data-site-refresh-content] .pw .m-wr  { color: var(--pw-text-2); background: var(--pw-surface-2); }/* повна таблиця */[data-site-refresh-content] .pw .journal--full { width: max-content; min-width: 100%; border-collapse: collapse; }[data-site-refresh-content] .pw .journal--full th:first-child,
[data-site-refresh-content] .pw .journal--full td:first-child { padding-left: 16px; }[data-site-refresh-content] .pw .journal--full th, [data-site-refresh-content] .pw .journal--full td { white-space: nowrap; }[data-site-refresh-content] .pw .journal--full td { height: 48px; }[data-site-refresh-content] .pw .journal--full th:last-child, [data-site-refresh-content] .pw .journal--full td:last-child { padding-right: 16px; }[data-site-refresh-content] .pw .journal--full .date span { display: block; font-size: 11px; color: var(--pw-text-3); }[data-site-refresh-content] .pw .journal--full .num { font-weight: 600; font-variant-numeric: tabular-nums; }[data-site-refresh-content] .pw .journal--full .num.pos { color: var(--pw-pos); }[data-site-refresh-content] .pw .journal--full .num.neg { color: var(--pw-neg); }[data-site-refresh-content] .pw .pill {
  display: inline-block; padding: 4px 10px; border-radius: 20px;
  font-size: 13px; font-weight: 500;
}[data-site-refresh-content] .pw .pill-strategy {
  color: var(--pw-text-2);
  background: color-mix(in srgb, #a855f7 9%, var(--pw-surface));
  border: 1px solid color-mix(in srgb, #a855f7 30%, var(--pw-border));
}[data-site-refresh-content] .pw .pill-setup {
  color: var(--pw-text-2); background: var(--pw-warn-soft);
  border: 1px solid color-mix(in srgb, var(--pw-warn) 30%, var(--pw-border));
}[data-site-refresh-content] .pw .pill-account {
  color: var(--pw-text-2); background: var(--pw-surface-2);
  border: 1px solid var(--pw-border);
}/* три тези під таблицею */[data-site-refresh-content] .jrn-notes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6);
  margin-top: var(--sp-8);
}[data-site-refresh-content] .jrn-note { display: flex; gap: var(--sp-3); }[data-site-refresh-content] .jrn-note svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--accent-bright); }[data-site-refresh-content] .jrn-note span { font-size: var(--fs-14); line-height: 1.6; color: var(--text-secondary); }@media (max-width: 860px) {
  [data-site-refresh-content] .jrn-notes { grid-template-columns: 1fr; gap: var(--sp-4); }
  [data-site-refresh-content] .jrn-card::after { width: 48px; }
}/* дрібниці повної таблиці */[data-site-refresh-content] .pw .journal--full .tid { color: var(--pw-text-2); }[data-site-refresh-content] .pw .journal--full .muted { color: var(--pw-text-3); }[data-site-refresh-content] .pw .journal--full .pill { font-size: 12px; }/* ==========================================================
   Поява віджетів у секціях
   ----------------------------------------------------------
   Той самий підхід, що й у howsGrid: приховані стани вмикає
   клас .ready, рух запускає .in. Без них верстка статична —
   тому нічого не «моргає» до першого показу і при вимкненій
   анімації в системі.
   ========================================================== *//* --- лінійні графіки: лінія малюється, заливка проявляється --- */[data-site-refresh-content] .wg.ready .chart .line {
  stroke-dasharray: var(--len, 1400); stroke-dashoffset: var(--len, 1400);
}[data-site-refresh-content] .wg.ready.in .chart .line { animation: wgDraw 1.5s cubic-bezier(.4,0,.2,1) .1s forwards; }@keyframes wgDraw { to { stroke-dashoffset: 0; } }[data-site-refresh-content] .wg.ready .chart path[fill^="url"] { opacity: 0; }[data-site-refresh-content] .wg.ready.in .chart path[fill^="url"] { animation: wgFade .7s ease .9s forwards; }/* крапки на точках даних сідають одна за одною, коли лінія їх дійшла */[data-site-refresh-content] .wg.ready .chart .dot { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }[data-site-refresh-content] .wg.ready.in .chart .dot {
  animation: wgPop .45s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: calc(.35s + var(--d, 0s));
}@keyframes wgPop { to { opacity: 1; transform: scale(1); } }/* сітка й підписи осей — тихо проступають першими */[data-site-refresh-content] .wg.ready .chart .grid, [data-site-refresh-content] .wg.ready .chart .axis { opacity: 0; }[data-site-refresh-content] .wg.ready.in .chart .grid { animation: wgFade .5s ease forwards; }[data-site-refresh-content] .wg.ready.in .chart .axis { animation: wgFade .5s ease .12s forwards; }@keyframes wgFade { to { opacity: 1; } }/* --- стовпчики ростуть від осі --- */[data-site-refresh-content] .wg.ready .chart .bar { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; }[data-site-refresh-content] .wg.ready.in .chart .bar {
  animation: wgGrow .6s cubic-bezier(.22,.65,.3,1) forwards;
  animation-delay: var(--d, 0s);
}@keyframes wgGrow { to { transform: scaleY(1); } }/* --- рядки таблиці приїжджають знизу --- */[data-site-refresh-content] .wg.ready tbody tr { opacity: 0; transform: translateY(8px); }[data-site-refresh-content] .wg.ready.in tbody tr {
  animation: wgRow .5s cubic-bezier(.22,.65,.3,1) forwards;
  animation-delay: var(--d, 0s);
}@keyframes wgRow { to { opacity: 1; transform: none; } }/* --- смуга метрик і рахунки --- */[data-site-refresh-content] .wg.ready .metric-card, [data-site-refresh-content] .wg.ready .capital-overview-item, [data-site-refresh-content] .wg.ready .capital-overview-total {
  opacity: 0; transform: translateY(6px);
}[data-site-refresh-content] .wg.ready.in .metric-card,
[data-site-refresh-content] .wg.ready.in .capital-overview-item,
[data-site-refresh-content] .wg.ready.in .capital-overview-total {
  animation: wgRow .45s ease forwards; animation-delay: var(--d, 0s);
}/* --- смужки стратегій розгортаються вбік --- */[data-site-refresh-content] .wg.ready .strategy-bar-fill { transform: scaleX(0); transform-origin: left; }[data-site-refresh-content] .wg.ready.in .strategy-bar-fill {
  animation: wgWide .7s cubic-bezier(.22,.65,.3,1) forwards;
  animation-delay: var(--d, 0s);
}@keyframes wgWide { to { transform: scaleX(1); } }/* --- клітинки календаря спалахують хвилею --- */[data-site-refresh-content] .wg.ready .cal-day { opacity: 0; transform: scale(.86); }[data-site-refresh-content] .wg.ready.in .cal-day {
  animation: wgCell .4s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: var(--d, 0s);
}@keyframes wgCell { to { opacity: 1; transform: none; } }@media (prefers-reduced-motion: reduce) {
  [data-site-refresh-content] .wg.ready *, [data-site-refresh-content] .wg.ready.in * { animation: none !important; opacity: 1 !important; transform: none !important; }
  [data-site-refresh-content] .wg.ready .chart .line { stroke-dashoffset: 0 !important; }
}/* ==========================================================
   Відео замість скріншота в секції «Every trade logged»
   ----------------------------------------------------------
   Запис вертикальний (720×824 після обрізання), тож рамка
   тут вужча за сусідні й тримає пропорцію відео — інакше
   довелося б або різати кадр, або лишати чорні поля з боків.
   ========================================================== */[data-site-refresh-content] .split-frame--video {
  width: 100%; max-width: 470px;
  margin-inline: auto;
  aspect-ratio: 720 / 824;
  padding: 0;
  background: #0d0d0e;
}[data-site-refresh-content] .split-frame--video video {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}/* якщо людина просила менше руху — показуємо постер, відео не крутиться */@media (prefers-reduced-motion: reduce) {
  [data-site-refresh-content] .split-frame--video video { display: none; }
  [data-site-refresh-content] .split-frame--video {
    background: #0d0d0e url("/site-refresh-20260820/landing/video/trade-note-poster-c08dab6f.webp") center / cover no-repeat;
  }
}/* ==========================================================
   Theme-aware tooltip on calendar days
   ========================================================== *//* рамка секції ріже все, що виходить за межі, — для тултіпа знімаємо */[data-site-refresh-content] .split-frame--live { overflow: visible; }[data-site-refresh-content] .pw .cal-day { position: relative; transition: transform .15s ease, outline-color .15s ease; }[data-site-refresh-content] .pw .cal-day[data-tip] { cursor: pointer; }[data-site-refresh-content] .pw .cal-day[data-tip]:hover {
  outline: 2px solid var(--public-focus-ring);
  outline-offset: 0;
  transform: scale(1.05);
  z-index: 5;
}[data-site-refresh-content] .pw .cal-tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--pw-surface); border: 1px solid var(--pw-border);
  box-shadow: var(--public-shadow);
  white-space: nowrap; text-align: left;
  opacity: 0; pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 20;
}[data-site-refresh-content] .pw .cal-day:hover .cal-tip { opacity: 1; transform: translateX(-50%) translateY(0); }[data-site-refresh-content] .pw .cal-tip .d { font-size: 11px; font-weight: 600; color: var(--pw-text-2); }[data-site-refresh-content] .pw .cal-tip .v { display: flex; align-items: baseline; gap: 6px; }[data-site-refresh-content] .pw .cal-tip .sum { font-size: 14px; font-weight: 700; }[data-site-refresh-content] .pw .cal-tip .sum.pos { color: var(--pw-pos); }[data-site-refresh-content] .pw .cal-tip .sum.neg { color: var(--pw-neg); }[data-site-refresh-content] .pw .cal-tip .sep { font-size: 12px; color: var(--pw-text-3); }[data-site-refresh-content] .pw .cal-tip .cnt { font-size: 12px; color: var(--pw-text-2); }/* перші два ряди — тултіп знизу, інакше його зріже верх картки */[data-site-refresh-content] .pw .cal-day.tip-below .cal-tip {
  bottom: auto; top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}[data-site-refresh-content] .pw .cal-day.tip-below:hover .cal-tip { transform: translateX(-50%) translateY(0); }/* крайні колонки — притискаємо тултіп до краю клітинки */[data-site-refresh-content] .pw .cal-day.tip-start .cal-tip { left: 0; transform: translateX(0) translateY(4px); }[data-site-refresh-content] .pw .cal-day.tip-start:hover .cal-tip { transform: translateX(0) translateY(0); }[data-site-refresh-content] .pw .cal-day.tip-end .cal-tip { left: auto; right: 0; transform: translateX(0) translateY(4px); }[data-site-refresh-content] .pw .cal-day.tip-end:hover .cal-tip { transform: translateX(0) translateY(0); }/* ---------- телефон ----------
   Секція журналу малювалась із розрахунку на широкий екран:
   120px згори й знизу плюс 40px під заголовком. На 390px це
   майже пів екрана порожнечі перед таблицею. */@media (max-width: 900px) {
  [data-site-refresh-content] .jrn { padding: var(--sp-14) 0; }
  [data-site-refresh-content] .jrn-wrap { padding: 0 var(--sp-5); }
  [data-site-refresh-content] .jrn-head { margin-bottom: var(--sp-8); }

  /* Шапка місяця живе поза горизонтальним скролом, тож на 360px
     чотири плашки підсумків просто вилазили за край картки.
     Дозволяємо їм перенестись під назву місяця. */
  [data-site-refresh-content] .pw .month-head { flex-wrap: wrap; gap: var(--sp-2); padding: 12px; }
  [data-site-refresh-content] .pw .month-stats { flex-wrap: wrap; row-gap: 6px; }
}/* ── вузькі екрани (13.08.2026) ──
   Колонку одноколонкової сітки .split-wrap розпирав не текст, а
   віджет: шапка з контролками і смуга підсумків виплат не
   переносились, min-content колонки ставав ширшим за екран, і
   текст секції різало на 320px. */[data-site-refresh-content] .split-media { min-width: 0; }[data-site-refresh-content] .split-frame--live .widget-header { flex-wrap: wrap; }[data-site-refresh-content] .split-frame--live .widget-controls { flex-wrap: wrap; justify-content: flex-end; }@media (max-width: 400px) {
  [data-site-refresh-content] .split-frame--live .payout-totals { grid-template-columns: repeat(2, 1fr); }
}/* Preserve the original Dark live-widget surfaces and chart shades. */html:not([data-marketing-theme='light']) [data-site-refresh-content] .split-frame--live { background: var(--pw-surface, #101010); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .chart .line.neutral { stroke: rgba(255,255,255,.82); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .chart .dot { fill: #d4d4d4; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .jrn-card {
  background: var(--pw-surface, #101010);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 26px 60px rgba(0,0,0,.55);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .jrn-card::after {
  background: linear-gradient(90deg, transparent, #101010);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .jrn-scroll { scrollbar-color: #333338 transparent; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .jrn-scroll::-webkit-scrollbar-thumb { background: #2b2b31; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .jrn-scroll::-webkit-scrollbar-thumb:hover { background: #3a3a42; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .month-stats .cnt { color: #888; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .m-pos { color: #2f8058; background: rgba(47,128,88,.10); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .m-neg { color: #ef4444; background: rgba(239,68,68,.10); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .m-rr { color: #f59e0b; background: rgba(245,158,11,.10); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .m-wr { color: #3b82f6; background: rgba(59,130,246,.10); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .pill-strategy { color: #a855f7; background: rgba(168,85,247,.1); border: 0; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .pill-setup { color: #f59e0b; background: rgba(245,158,11,.1); border: 0; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .pill-account { color: #3b82f6; background: rgba(59,130,246,.1); border: 0; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .cal-day[data-tip]:hover { outline-color: rgba(255,255,255,.3); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .cal-tip {
  background: #1a1a1b;
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 10px 25px rgba(0,0,0,.6);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .cal-tip .d { color: #94a3b8; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .cal-tip .sep { color: #475569; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .pw .cal-tip .cnt { color: #cbd5e1; }/* Homepage-only offscreen rendering policy. Fallbacks are inner block sizes. */[data-site-refresh-content="home"] > #journal {
  --home-journal-intrinsic-block-reserve: 54rem;
}@media (min-width: 861px) and (max-width: 900px) {
  [data-site-refresh-content="home"] > #journal {
    --home-journal-intrinsic-block-reserve: 56rem;
  }
}@media (max-width: 860px) {
  [data-site-refresh-content="home"] > #journal {
    --home-journal-intrinsic-block-reserve: 74rem;
  }
}[data-site-refresh-content="home"] > #calendar {
  --home-calendar-intrinsic-block-reserve: 46rem;
}@media (max-width: 900px) {
  [data-site-refresh-content="home"] > #calendar {
    /* At 320px this is about 63rem: copy + stack gap + six square rows,
       widget chrome + mobile stat + the two-column thumbnail row. */
    --home-calendar-intrinsic-block-reserve: calc(
      clamp(16rem, calc(37.5rem - 38vw), 29rem)
      + 2rem
      + 85.714286vw - 5.892857rem
      + 3.21875rem
      + 8rem
      + 5rem
      + 22.2376vw - .723rem
      + .75rem
    );
  }
}[data-site-refresh-content="home"] > #vs-spreadsheet {
  --home-vs-spreadsheet-intrinsic-block-reserve: 63rem;
}@media (min-width: 561px) and (max-width: 900px) {
  [data-site-refresh-content="home"] > #vs-spreadsheet {
    --home-vs-spreadsheet-intrinsic-block-reserve: 137rem;
  }
}@media (max-width: 560px) {
  [data-site-refresh-content="home"] > #vs-spreadsheet {
    --home-vs-spreadsheet-intrinsic-block-reserve: 156rem;
  }
}@supports (content-visibility: auto) and (contain-intrinsic-block-size: auto 1px) {
  [data-site-refresh-content="home"] > #journal,
  [data-site-refresh-content="home"] > #calendar,
  [data-site-refresh-content="home"] > #vs-spreadsheet {
    content-visibility: auto;
  }

  [data-site-refresh-content="home"] > #journal {
    contain-intrinsic-block-size: auto var(--home-journal-intrinsic-block-reserve);
  }

  [data-site-refresh-content="home"] > #calendar {
    contain-intrinsic-block-size: auto var(--home-calendar-intrinsic-block-reserve);
  }

  [data-site-refresh-content="home"] > #vs-spreadsheet {
    contain-intrinsic-block-size: auto var(--home-vs-spreadsheet-intrinsic-block-reserve);
  }

  @supports selector(:has(:target)) {
    @media (max-width: 900px) {
      [data-site-refresh-content="home"] > #markets,
      [data-site-refresh-content="home"] > #dashboard,
      [data-site-refresh-content="home"] > #problem,
      [data-site-refresh-content="home"] > #trade-journal,
      [data-site-refresh-content="home"] > #accounts,
      [data-site-refresh-content="home"] > #strategies,
      [data-site-refresh-content="home"] > #payouts,
      [data-site-refresh-content="home"] > #more,
      [data-site-refresh-content="home"] > #how,
      [data-site-refresh-content="home"] > #faq,
      [data-site-refresh-content="home"] > #get-started {
        content-visibility: auto;
      }

      [data-site-refresh-content="home"] > #markets {
        contain-intrinsic-block-size: auto 18rem;
      }

      [data-site-refresh-content="home"] > #dashboard {
        contain-intrinsic-block-size: auto 53rem;
      }

      [data-site-refresh-content="home"] > #problem {
        contain-intrinsic-block-size: auto 59rem;
      }

      [data-site-refresh-content="home"] > #trade-journal {
        contain-intrinsic-block-size: auto 73rem;
      }

      [data-site-refresh-content="home"] > #accounts {
        contain-intrinsic-block-size: auto 71rem;
      }

      [data-site-refresh-content="home"] > #strategies {
        contain-intrinsic-block-size: auto 66rem;
      }

      [data-site-refresh-content="home"] > #payouts {
        contain-intrinsic-block-size: auto 84rem;
      }

      [data-site-refresh-content="home"] > #more {
        contain-intrinsic-block-size: auto 48rem;
      }

      [data-site-refresh-content="home"] > #how {
        contain-intrinsic-block-size: auto 46rem;
      }

      [data-site-refresh-content="home"] > #faq {
        contain-intrinsic-block-size: auto 51rem;
      }

      [data-site-refresh-content="home"] > #get-started {
        contain-intrinsic-block-size: auto 31rem;
      }
    }

    @media (max-width: 560px) {
      [data-site-refresh-content="home"] > #more {
        contain-intrinsic-block-size: auto 93rem;
      }
    }

    /* Native hash navigation needs real section heights; !important clears ID-scoped containment. */
    html:has(:target) [data-site-refresh-content="home"] > section {
      content-visibility: visible !important;
    }
  }
}/* Measured zh native glyph bounds varied by CJK fallback; limit this order to the zh homepage. */html:lang(zh-CN) body:has([data-site-refresh-content="home"]) {
  font-family: Inter, "Hiragino Sans GB", -apple-system, "system-ui", sans-serif;
}html:lang(zh-CN) [data-site-refresh-content="home"] {
  font-family: "Inter", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, sans-serif;
}html:lang(zh-CN) [data-site-refresh-content="home"] .pw {
  --pw-font: -apple-system, "Hiragino Sans GB", system-ui, Inter, "Segoe UI", sans-serif;
}