@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/marketing-assets/inter-cyrillic-ext.ca157063339ac4ad418f214f3abfed119b0798ab4d377386ce5c9e5a7a435ebd.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/marketing-assets/inter-cyrillic.71d5ee93cc1e9f1d520a3a8b66456de18c7879d8df09d57fcd2eaff75fef0075.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/marketing-assets/inter-latin-ext.34b9c504cab7a73e37b746343a449132e56cf7b5481af2cb81dc74dcff25c956.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/marketing-assets/inter-latin.3100e775e8616cd2611beecfa23a4263d7037586789b43f035236a2e6fbd4c62.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@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] {
    --bg-primary: #09090b;
    --bg-secondary: #111113;
    --bg-tertiary: #18181b;
    --bg-card: #1a1a1f;
    --bg-card-hover: #222228;
    --border: #27272a;
    --border-light: #333338;
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --green: #2D694C;
    --green-light: #3cd97a;
    --green-bg: rgba(45, 105, 76, 0.15);
    --blue: #3b82f6;
    --blue-bg: rgba(59, 130, 246, 0.1);
    --purple: #a855f7;
    --purple-bg: rgba(168, 85, 247, 0.1);
    --amber: #f59e0b;
    --amber-bg: rgba(245, 158, 11, 0.1);
    --rose: #f43f5e;
    --rose-bg: rgba(244, 63, 94, 0.1);
    --teal: #14b8a6;
    --teal-bg: rgba(20, 184, 166, 0.1);
    --gradient-1: linear-gradient(135deg, #3a8a63, #2D694C);
    --gradient-2: linear-gradient(135deg, #3a8a63, #245a3f);
}[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 rgba(45, 105, 76, 0.3));
}[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: 16px;
    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: 14px 0 0 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    border-right: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        -8px 0 40px rgba(0,0,0,0.6),
        -24px 0 80px rgba(0,0,0,0.5),
        0 0 120px rgba(44,128,86,0.12),
        0 40px 100px rgba(0,0,0,0.5);
    width: 100%;
}[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%, rgba(44,128,86,0.18) 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: 14px;
        border-right: 1px solid rgba(255,255,255,0.12);
    }
}@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: 15px;
    }

    [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, rgba(45, 105, 76, 0.15) 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: 18px;
    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: 12px;
    background: var(--gradient-1);
    color: white;
    font-size: 15px;
    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 8px 30px rgba(45, 105, 76, 0.3);
}[data-site-refresh-content] .btn-primary.large {
    padding: 16px 36px;
    font-size: 16px;
    border-radius: 14px;
}[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: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}[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: 13px;
    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, rgba(45, 105, 76, 0.2) 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: 16px 16px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
    box-shadow: 0 -4px 60px rgba(45, 105, 76, 0.1), 0 20px 80px rgba(0, 0, 0, 0.5);
}[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: 16px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.03),
        0 20px 60px rgba(0,0,0,0.4),
        0 0 120px rgba(45, 105, 76, 0.08);
}[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: 50%;
    background: var(--border-light);
}[data-site-refresh-content] .mockup-dots span:first-child { background: #f43f5e; }[data-site-refresh-content] .mockup-dots span:nth-child(2) { background: #f59e0b; }[data-site-refresh-content] .mockup-dots span:last-child { background: #2D694C; }[data-site-refresh-content] .mockup-title {
    font-size: 12px;
    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: 12px;
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}[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);
    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: 100px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}[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: 13px;
    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: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.3s, background 0.3s;
}[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: rgba(255, 255, 255, 0.08);
}[data-site-refresh-content] .trusted-logo-box span {
    font-size: 13px;
    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: 100px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(45, 105, 76, 0.15);
}[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: 17px;
    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: 17px;
    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, rgba(45, 105, 76, 0.1) 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: 16px;
    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: 16px;
    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: 24px;
    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: 15px;
    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 rgba(45, 105, 76, 0.26);
    border-radius: 999px;
    background: rgba(45, 105, 76, 0.12);
    color: #3cd97a;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
}[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: 18px;
    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: 13px;
    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: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}[data-site-refresh-content] .guide-switcher a:hover,
[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);
}[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: 12px;
    background: rgba(59, 130, 246, 0.08);
    padding: 16px 18px;
    color: #b8c9e8;
    font-size: 15px;
    line-height: 1.65;
}[data-site-refresh-content] .guide-callout--success {
    border-color: rgba(45, 105, 76, 0.34);
    background: rgba(45, 105, 76, 0.12);
    color: #a9dfc6;
}[data-site-refresh-content] .guide-callout--warning {
    border-color: rgba(245, 158, 11, 0.26);
    background: rgba(245, 158, 11, 0.09);
    color: #e5c98c;
}[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(--border);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.006));
}[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 rgba(45, 105, 76, 0.26);
    border-radius: 999px;
    background: rgba(45, 105, 76, 0.12);
    color: #3cd97a;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
}[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: 18px;
    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(--border);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.008));
}[data-site-refresh-content] .blog-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(45, 105, 76, 0.25);
    border-radius: 8px;
    background: rgba(45, 105, 76, 0.12);
    color: #3cd97a;
    margin-bottom: 24px;
}[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: 12px;
    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: 15px;
    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 rgba(45, 105, 76, 0.34);
    border-radius: 8px;
    background: rgba(45, 105, 76, 0.12);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}[data-site-refresh-content] .blog-card-link:hover {
    border-color: rgba(45, 105, 76, 0.62);
    background: rgba(45, 105, 76, 0.2);
}[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 rgba(45, 105, 76, 0.38);
    border-radius: 50%;
    background: rgba(45, 105, 76, 0.14);
    color: #3cd97a;
    font-size: 14px;
    font-weight: 850;
    flex: 0 0 auto;
}[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: 16px;
    line-height: 1.75;
    max-width: 860px;
}[data-site-refresh-content] .guide-link {
    color: #3cd97a;
    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: 8px;
    font-size: 13px;
    font-weight: 760;
}[data-site-refresh-content] .guide-permission.allowed {
    border: 1px solid rgba(45, 105, 76, 0.38);
    background: rgba(45, 105, 76, 0.13);
    color: #9fe4c0;
}[data-site-refresh-content] .guide-permission.blocked {
    border: 1px solid rgba(244, 63, 94, 0.28);
    background: rgba(244, 63, 94, 0.08);
    color: #e8a2ae;
}[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: 16px;
}[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 rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: #080808;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.28);
}[data-site-refresh-content] .guide-figure figcaption {
    margin-top: 9px;
    color: var(--text-muted);
    font-size: 13px;
    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: 24px;
    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, rgba(34, 197, 94, 0.1) 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: 16px;
    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: 16px;
    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: 13px;
    line-height: 1.55;
}[data-site-refresh-content] .footer-links-group h5 {
    font-size: 13px;
    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: 14px;
    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: 14px;
    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: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}@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: 13px;
    }

    [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: 40px;
    }

    [data-site-refresh-content] .blog-hero p {
        font-size: 15px;
    }

    [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: 15px;
    }

    [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%;
    }
}/* ==========================================================
   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 — правки ТІЛЬКИ для локального перегляду
   ------------------------------------------------------------
   Цей файл не для прода. Він компенсує те, що локально
   не працює JS, який на живому сайті показує блоки під час
   прокрутки. Без нього сторінка виглядає порожньою:
   19 блоків залишаються з opacity: 0 назавжди.
   ============================================================ *//* Показати все, що чекає на появу через IntersectionObserver */[data-site-refresh-content] .animate-in,
[data-site-refresh-content] .app-screenshot,
[data-site-refresh-content] .screen-frame--perspective {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}/* Слайдер дашборда: без JS активний слайд не призначається */[data-site-refresh-content] .dash-slide { display: block !important; }[data-site-refresh-content] .dash-slide ~ .dash-slide { display: none !important; }/* Живі демо-віджети малюють себе тільки після класу .animated */[data-site-refresh-content] .live-demo .ld-dtable tbody tr,
[data-site-refresh-content] .live-demo .ld-acc-card,
[data-site-refresh-content] .live-demo .ld-str-item,
[data-site-refresh-content] .live-demo .ld-pout-row,
[data-site-refresh-content] .live-demo .ld-cd {
  opacity: 1 !important;
  transform: none !important;
}[data-site-refresh-content] .live-demo .ld-eq-line,
[data-site-refresh-content] .live-demo .ld-eq-fill,
[data-site-refresh-content] .live-demo .ld-eq-dot,
[data-site-refresh-content] .live-demo .ld-eq-lbl {
  opacity: 1 !important;
  stroke-dashoffset: 0 !important;
}/* Відступ під фіксовану шапку, щоб hero не ховався під нею */[data-site-refresh-content] { padding-top: 0; }[data-site-refresh-content] .solutions-page {
    background:
        radial-gradient(circle at 76% 8%, color-mix(in srgb, var(--public-accent) 10%, transparent), transparent 24rem),
        var(--public-page-bg);
}[data-site-refresh-content] .solutions-document [data-marketing-header] .nav-solutions-link[aria-current="page"] {
    color: var(--text-primary);
}[data-site-refresh-content] .solutions-document [data-marketing-header] .nav-solutions-link[aria-current="page"]::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 5px;
    background: var(--green-light);
}[data-site-refresh-content] .solutions-page {
    --solutions-shell: 1320px;
    --solutions-gutter: 48px;
    --solutions-line: var(--public-border);
    position: relative;
    overflow: clip;
}[data-site-refresh-content] .solutions-page a,
[data-site-refresh-content] .solutions-page summary {
    -webkit-tap-highlight-color: transparent;
}[data-site-refresh-content] .solutions-page a:focus-visible,
[data-site-refresh-content] .solutions-page summary:focus-visible {
    outline: 2px solid var(--public-focus-ring);
    outline-offset: 4px;
}[data-site-refresh-content] .solutions-shell {
    width: min(var(--solutions-shell), calc(100% - (var(--solutions-gutter) * 2)));
    margin: 0 auto;
}[data-site-refresh-content] .solutions-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: var(--green-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}[data-site-refresh-content] .solutions-hero {
    position: relative;
    min-height: 690px;
    padding: 150px 0 76px;
    border-bottom: 1px solid var(--solutions-line);
}[data-site-refresh-content] .solutions-hero::before {
    content: "";
    position: absolute;
    top: 48px;
    right: -12%;
    width: min(760px, 70vw);
    height: 420px;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--public-accent) 12%, transparent), transparent 68%);
    filter: blur(28px);
    pointer-events: none;
}[data-site-refresh-content] .solutions-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(340px, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: center;
}[data-site-refresh-content] .solutions-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 540px;
}[data-site-refresh-content] .solutions-hero h1 {
    max-width: 560px;
    margin: 18px 0 20px;
    color: var(--text-primary);
    font-size: clamp(46px, 5vw, 74px);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 0.98;
}[data-site-refresh-content] .solutions-hero-description {
    max-width: 520px;
    color: var(--text-secondary);
    font-size: 17px;
    line-height: 1.7;
}[data-site-refresh-content] .solutions-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}[data-site-refresh-content] .solutions-primary-action,
[data-site-refresh-content] .solutions-secondary-action,
[data-site-refresh-content] .solution-stage-link,
[data-site-refresh-content] .solutions-cta-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    transition:
        color 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}[data-site-refresh-content] .solutions-primary-action,
[data-site-refresh-content] .solutions-cta-action {
    padding: 0 22px;
    background: var(--gradient-1);
    color: var(--on-accent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--public-accent) 18%, transparent);
}[data-site-refresh-content] .solutions-secondary-action {
    padding: 0 20px;
    border: 1px solid var(--border-light);
    background: var(--public-surface);
    color: var(--text-primary);
}[data-site-refresh-content] .solutions-primary-action:hover,
[data-site-refresh-content] .solutions-cta-action:hover,
[data-site-refresh-content] .solutions-secondary-action:hover,
[data-site-refresh-content] .solution-stage-link:hover {
    transform: translateY(-2px);
}[data-site-refresh-content] .solutions-primary-action:hover,
[data-site-refresh-content] .solutions-cta-action:hover {
    background: var(--gradient-2);
}[data-site-refresh-content] .solutions-secondary-action:hover {
    border-color: var(--public-border);
    background: var(--public-elevated);
}[data-site-refresh-content] .solutions-hero-note {
    margin-top: 14px;
    color: var(--text-muted);
    font-size: 12px;
}[data-site-refresh-content] .solutions-hero-visual {
    position: relative;
    z-index: 1;
    width: min(820px, 62vw);
    transform: translateX(26px);
}[data-site-refresh-content] .solutions-screen {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--public-border);
    border-radius: 16px;
    background: #080a09;
    box-shadow: var(--public-shadow);
}[data-site-refresh-content] .solutions-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px color-mix(in srgb, var(--public-surface) 18%, transparent);
    pointer-events: none;
}[data-site-refresh-content] .solutions-hero-image,
[data-site-refresh-content] .solution-stage-image,
[data-site-refresh-content] .solutions-method-image {
    display: block;
    width: 100%;
    height: auto;
}[data-site-refresh-content] .solutions-integrations {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: 0.01em;
    text-align: center;
}[data-site-refresh-content] .solutions-integrations span {
    color: var(--text-secondary);
    font-weight: 600;
}[data-site-refresh-content] .solutions-path {
    padding-top: 96px;
}[data-site-refresh-content] .solutions-section-heading {
    max-width: 710px;
    margin: 0 auto 64px;
    text-align: center;
}[data-site-refresh-content] .solutions-section-heading h2 {
    margin: 14px 0 14px;
    font-size: clamp(32px, 4.1vw, 54px);
    font-weight: 780;
    letter-spacing: -0.045em;
    line-height: 1.05;
}[data-site-refresh-content] .solutions-section-heading p {
    max-width: 620px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.65;
}[data-site-refresh-content] .solutions-path-list {
    list-style: none;
    border-top: 1px solid var(--solutions-line);
}[data-site-refresh-content] .solutions-path-item {
    border-bottom: 1px solid var(--solutions-line);
}[data-site-refresh-content] .solution-stage {
    display: grid;
    grid-template-columns: 72px minmax(260px, 0.78fr) minmax(0, 1.42fr);
    gap: clamp(28px, 4vw, 64px);
    min-height: 420px;
    padding: 64px 0;
    align-items: center;
}[data-site-refresh-content] .solution-stage-rail {
    position: relative;
    align-self: stretch;
    display: flex;
    justify-content: center;
}[data-site-refresh-content] .solution-stage-rail::before {
    content: "";
    position: absolute;
    top: -65px;
    bottom: -65px;
    left: 50%;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent 0,
        color-mix(in srgb, var(--public-accent) 25%, transparent) 12%,
        color-mix(in srgb, var(--public-accent) 25%, transparent) 88%,
        transparent 100%
    );
}[data-site-refresh-content] .solution-stage-number {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-top: 2px;
    border: 1px solid var(--public-accent);
    border-radius: 50%;
    background: var(--public-accent);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.08em;
    box-shadow: none;
}[data-site-refresh-content] .solution-stage-copy h3 {
    max-width: 360px;
    margin: 12px 0 14px;
    font-size: clamp(27px, 2.7vw, 40px);
    font-weight: 760;
    letter-spacing: -0.04em;
    line-height: 1.08;
}[data-site-refresh-content] .solution-stage-copy > p {
    max-width: 390px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.65;
}[data-site-refresh-content] .solution-stage-benefits {
    display: grid;
    gap: 9px;
    margin: 22px 0 24px;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}[data-site-refresh-content] .solution-stage-benefits li::marker {
    color: var(--green-light);
}[data-site-refresh-content] .solution-stage-link {
    min-height: 44px;
    padding: 0;
    color: var(--green-light);
}[data-site-refresh-content] .solution-stage-link:hover {
    color: var(--public-accent-hover);
}[data-site-refresh-content] .solution-stage-media {
    min-width: 0;
}[data-site-refresh-content] .solution-stage-frame {
    aspect-ratio: 16 / 8.8;
}[data-site-refresh-content] .solution-stage-frame .solution-stage-image {
    height: 100%;
    object-fit: cover;
    object-position: left top;
}[data-site-refresh-content] .solution-stage-frame--dashboard {
    aspect-ratio: 2400 / 1200;
}[data-site-refresh-content] .solution-stage-frame--journal {
    aspect-ratio: 3226 / 2140;
}[data-site-refresh-content] .solution-stage-frame--strategies {
    aspect-ratio: 3022 / 1132;
}[data-site-refresh-content] .solution-stage-frame--accounts {
    aspect-ratio: 3018 / 1714;
}[data-site-refresh-content] .solution-stage-frame--portrait {
    width: min(100%, 560px);
    aspect-ratio: 1518 / 1258;
    margin-inline: auto;
    padding: 0;
}[data-site-refresh-content] .solution-stage-frame--portrait .solution-stage-image {
    object-fit: contain;
    object-position: center;
}[data-site-refresh-content] .solutions-method {
    padding: 112px 0;
    border-bottom: 1px solid var(--solutions-line);
}[data-site-refresh-content] .solutions-method-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.96fr) minmax(380px, 1.04fr);
    gap: clamp(42px, 7vw, 96px);
    align-items: center;
}[data-site-refresh-content] .solutions-method-visual {
    position: relative;
}[data-site-refresh-content] .solutions-method-visual::before {
    content: "";
    position: absolute;
    inset: 14% 8% -12%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--public-accent) 18%, transparent), transparent 68%);
    filter: blur(20px);
    pointer-events: none;
}[data-site-refresh-content] .solutions-method-visual .solutions-screen {
    transform: rotate(-1deg);
}[data-site-refresh-content] .solutions-method-copy h2 {
    max-width: 600px;
    margin: 14px 0 18px;
    font-size: clamp(36px, 4.4vw, 58px);
    font-weight: 790;
    letter-spacing: -0.05em;
    line-height: 1.02;
}[data-site-refresh-content] .solutions-method-intro {
    max-width: 560px;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.65;
}[data-site-refresh-content] .solutions-method-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 30px;
}[data-site-refresh-content] .solutions-method-step {
    min-height: 160px;
    padding: 22px 18px;
    border: 1px solid var(--solutions-line);
    border-radius: 14px;
    background: var(--public-surface);
}[data-site-refresh-content] .solutions-method-step small {
    color: var(--green-light);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.12em;
}[data-site-refresh-content] .solutions-method-step h3 {
    margin: 24px 0 8px;
    font-size: 18px;
    line-height: 1.15;
}[data-site-refresh-content] .solutions-method-step p {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}[data-site-refresh-content] .solutions-faq {
    padding: 110px 0 96px;
}[data-site-refresh-content] .solutions-faq .solutions-section-heading {
    margin-bottom: 44px;
}[data-site-refresh-content] .solutions-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 1120px;
    margin: 0 auto;
}[data-site-refresh-content] .solutions-faq-item {
    border: 1px solid var(--solutions-line);
    border-radius: 12px;
    background: var(--public-surface);
    transition: border-color 180ms ease, background 180ms ease;
}[data-site-refresh-content] .solutions-faq-item[open] {
    border-color: var(--public-accent);
    background: var(--public-accent-soft);
}[data-site-refresh-content] .solutions-faq-item summary {
    min-height: 58px;
    padding: 18px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}[data-site-refresh-content] .solutions-faq-item summary::marker {
    color: var(--text-muted);
}[data-site-refresh-content] .solutions-faq-item[open] summary::marker {
    color: var(--green-light);
}[data-site-refresh-content] .solutions-faq-item p {
    padding: 0 18px 18px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.65;
}[data-site-refresh-content] .solutions-cta {
    padding: 0 0 104px;
}[data-site-refresh-content] .solutions-cta-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 172px;
    padding: 40px 46px;
    overflow: hidden;
    border: 1px solid var(--public-border);
    border-radius: 18px;
    background: var(--public-accent-soft);
}[data-site-refresh-content] .solutions-cta-card::before {
    content: "";
    position: absolute;
    top: -160px;
    right: 8%;
    width: 440px;
    height: 340px;
    background: radial-gradient(circle, color-mix(in srgb, var(--public-accent) 12%, transparent), transparent 68%);
    pointer-events: none;
}[data-site-refresh-content] .solutions-cta-copy {
    position: relative;
    z-index: 1;
}[data-site-refresh-content] .solutions-cta-copy h2 {
    margin-bottom: 8px;
    font-size: clamp(25px, 3vw, 36px);
    letter-spacing: -0.035em;
    line-height: 1.1;
}[data-site-refresh-content] .solutions-cta-copy p {
    max-width: 560px;
    color: var(--text-secondary);
    font-size: 14px;
}[data-site-refresh-content] .solutions-cta-action {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    min-width: 150px;
}[data-site-refresh-content] .solutions-document.js-enabled .solutions-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}[data-site-refresh-content] .solutions-document.js-enabled .solutions-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}@media (max-width: 1100px) {
    [data-site-refresh-content] .solutions-page {
        --solutions-gutter: 32px;
    }

    [data-site-refresh-content] .solutions-hero {
        min-height: 620px;
    }

    [data-site-refresh-content] .solutions-hero-grid {
        grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
        gap: 34px;
    }

    [data-site-refresh-content] .solutions-hero-visual {
        width: min(700px, 60vw);
    }

    [data-site-refresh-content] .solution-stage {
        grid-template-columns: 56px minmax(230px, 0.78fr) minmax(0, 1.35fr);
        gap: 28px;
    }

    [data-site-refresh-content] .solution-stage-number {
        width: 42px;
        height: 42px;
    }

    [data-site-refresh-content] .solutions-method-grid {
        gap: 44px;
    }
}@media (max-width: 900px) {
    [data-site-refresh-content] .solutions-page {
        --solutions-gutter: 24px;
    }

    [data-site-refresh-content] .solutions-document [data-marketing-header] .nav-solutions-link[aria-current="page"]::after {
        display: none;
    }

    [data-site-refresh-content] .solutions-hero {
        min-height: auto;
        padding: 126px 0 72px;
    }

    [data-site-refresh-content] .solutions-hero-grid,
    [data-site-refresh-content] .solutions-method-grid {
        grid-template-columns: 1fr;
    }

    [data-site-refresh-content] .solutions-hero-copy {
        max-width: 650px;
    }

    [data-site-refresh-content] .solutions-hero h1 {
        max-width: 680px;
    }

    [data-site-refresh-content] .solutions-hero-visual {
        width: 100%;
        transform: none;
    }

    [data-site-refresh-content] .solutions-integrations {
        justify-content: flex-start;
        text-align: left;
    }

    [data-site-refresh-content] .solutions-path {
        padding-top: 78px;
    }

    [data-site-refresh-content] .solutions-section-heading {
        margin-bottom: 48px;
    }

    [data-site-refresh-content] .solution-stage {
        grid-template-columns: 56px minmax(0, 1fr);
        min-height: 0;
        padding: 54px 0;
    }

    [data-site-refresh-content] .solution-stage-copy {
        grid-column: 2;
    }

    [data-site-refresh-content] .solution-stage-media {
        grid-column: 2;
    }

    [data-site-refresh-content] .solution-stage-rail {
        grid-row: 1 / span 2;
        grid-column: 1;
    }

    [data-site-refresh-content] .solution-stage-rail::before {
        top: -55px;
        bottom: -55px;
    }

    [data-site-refresh-content] .solution-stage-copy h3,
    [data-site-refresh-content] .solution-stage-copy > p {
        max-width: 680px;
    }

    [data-site-refresh-content] .solutions-method {
        padding: 88px 0;
    }

    [data-site-refresh-content] .solutions-method-visual {
        order: 2;
    }

    [data-site-refresh-content] .solutions-method-copy {
        order: 1;
    }
}@media (max-width: 640px) {
    [data-site-refresh-content] .solutions-page {
        --solutions-gutter: 20px;
    }

    [data-site-refresh-content] .solutions-hero {
        padding: 112px 0 58px;
    }

    [data-site-refresh-content] .solutions-hero h1 {
        margin-top: 14px;
        font-size: clamp(40px, 12.6vw, 56px);
    }

    [data-site-refresh-content] .solutions-hero-description {
        font-size: 15px;
    }

    [data-site-refresh-content] .solutions-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 26px;
    }

    [data-site-refresh-content] .solutions-primary-action,
    [data-site-refresh-content] .solutions-secondary-action {
        width: 100%;
        min-height: 48px;
    }

    [data-site-refresh-content] .solutions-integrations {
        display: block;
        margin-top: 24px;
        line-height: 1.65;
    }

    [data-site-refresh-content] .solutions-integrations span {
        display: block;
        margin-bottom: 2px;
    }

    [data-site-refresh-content] .solutions-path {
        padding-top: 68px;
    }

    [data-site-refresh-content] .solutions-section-heading {
        margin-bottom: 40px;
        text-align: left;
    }

    [data-site-refresh-content] .solutions-section-heading h2 {
        font-size: 36px;
    }

    [data-site-refresh-content] .solutions-section-heading p {
        font-size: 14px;
    }

    [data-site-refresh-content] .solution-stage {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 18px;
        padding: 42px 0;
    }

    [data-site-refresh-content] .solution-stage-number {
        width: 36px;
        height: 36px;
        font-size: 10px;
    }

    [data-site-refresh-content] .solution-stage-copy h3 {
        margin-top: 8px;
        font-size: 29px;
    }

    [data-site-refresh-content] .solution-stage-copy > p {
        font-size: 14px;
    }

    [data-site-refresh-content] .solution-stage-benefits {
        font-size: 12px;
    }

    [data-site-refresh-content] .solution-stage-frame {
        aspect-ratio: 16 / 10;
        border-radius: 12px;
    }

    [data-site-refresh-content] .solution-stage-frame--dashboard {
        aspect-ratio: 2400 / 1200;
    }

    [data-site-refresh-content] .solution-stage-frame--journal {
        aspect-ratio: 3226 / 2140;
    }

    [data-site-refresh-content] .solution-stage-frame--strategies {
        aspect-ratio: 3022 / 1132;
    }

    [data-site-refresh-content] .solution-stage-frame--accounts {
        aspect-ratio: 3018 / 1714;
    }

    [data-site-refresh-content] .solution-stage-frame--portrait {
        aspect-ratio: 1518 / 1258;
        padding: 0;
    }

    [data-site-refresh-content] .solutions-method {
        padding: 72px 0;
    }

    [data-site-refresh-content] .solutions-method-copy h2 {
        font-size: 40px;
    }

    [data-site-refresh-content] .solutions-method-steps {
        grid-template-columns: 1fr;
    }

    [data-site-refresh-content] .solutions-method-step {
        min-height: 0;
    }

    [data-site-refresh-content] .solutions-method-step h3 {
        margin-top: 14px;
    }

    [data-site-refresh-content] .solutions-faq {
        padding: 78px 0 72px;
    }

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

    [data-site-refresh-content] .solutions-faq-item summary {
        min-height: 60px;
    }

    [data-site-refresh-content] .solutions-cta {
        padding-bottom: 76px;
    }

    [data-site-refresh-content] .solutions-cta-card {
        display: grid;
        min-height: 0;
        padding: 30px 24px;
    }

    [data-site-refresh-content] .solutions-cta-action {
        width: 100%;
        min-height: 48px;
    }
}@media (prefers-reduced-motion: reduce) {
    [data-site-refresh-content] .solutions-page *,
    [data-site-refresh-content] .solutions-page *::before,
    [data-site-refresh-content] .solutions-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    [data-site-refresh-content] .solutions-document.js-enabled .solutions-reveal {
        opacity: 1;
        transform: none;
    }
}/* Restore the incumbent Dark surface details while keeping the Light
   solution-page palette above. */html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-page {
    background:
        radial-gradient(circle at 76% 8%, rgba(45, 105, 76, 0.12), transparent 24rem),
        var(--bg-primary);
    --solutions-line: rgba(255, 255, 255, 0.08);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-page a:focus-visible,
html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-page summary:focus-visible {
    outline-color: var(--green-light);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-hero::before {
    background: radial-gradient(ellipse, rgba(52, 154, 101, 0.14), transparent 68%);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-primary-action,
html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-cta-action {
    color: #fff;
    box-shadow: 0 12px 30px rgba(45, 105, 76, 0.24);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-secondary-action {
    background: rgba(255, 255, 255, 0.02);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-primary-action:hover,
html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-cta-action:hover {
    background: linear-gradient(135deg, #469a70, #326f52);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-secondary-action:hover {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.05);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-screen {
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow:
        0 28px 88px rgba(0, 0, 0, 0.62),
        0 0 70px rgba(45, 105, 76, 0.12);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-screen::after {
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .solution-stage-rail::before {
    background: linear-gradient(
        to bottom,
        transparent 0,
        rgba(60, 217, 122, 0.25) 12%,
        rgba(60, 217, 122, 0.25) 88%,
        transparent 100%
    );
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .solution-stage-number {
    border: 1px solid rgba(60, 217, 122, 0.35);
    background: #0c110e;
    color: var(--green-light);
    box-shadow: 0 0 32px rgba(45, 105, 76, 0.18);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .solution-stage-link:hover { color: #68e599; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-method-visual::before {
    background: radial-gradient(ellipse, rgba(45, 105, 76, 0.18), transparent 68%);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-method-step {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-faq-item { background: rgba(255, 255, 255, 0.018); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-faq-item[open] {
    border-color: rgba(60, 217, 122, 0.24);
    background: rgba(45, 105, 76, 0.07);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-cta-card {
    border: 1px solid rgba(60, 217, 122, 0.16);
    background:
        linear-gradient(100deg, rgba(45, 105, 76, 0.18), rgba(17, 17, 19, 0.78)),
        var(--bg-secondary);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-cta-card::before {
    background: radial-gradient(circle, rgba(60, 217, 122, 0.14), transparent 68%);
}/* ============================================================
   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 — секція «текст + зображення»
   Базовий блок сайту: за прототипом трапляється 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 — віджети продукту, відтворені для лендінга
   ----------------------------------------------------------
   Не скріншот і не стилізація «на око»: розмітка й значення
   зняті з живого дашборда (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; }/* ==========================================================
   Живі віджети замість скріншотів у секціях фіч
   ----------------------------------------------------------
   .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; }/* ============================================================
   BitStat – сторінка /features
   ------------------------------------------------------------
   Перший екран – як на проді: дві колонки, одна кнопка, рамка
   зі скриншотом.

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

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

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

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

  /* --- дует: два віджети поруч, без накладання --- */
  /* графік балансу і смуги стратегій затуляти не можна, тож ці
     панелі кладуть віджети поруч; накладання немає більше ніде */
  [data-site-refresh-content] .fx-live--duo { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--sp-3); align-items: start; }
  [data-site-refresh-content] .fx-live--duo .fxl-main { width: auto; margin: 0; }
  [data-site-refresh-content] .fx-live--duo .fxl-side { position: static; width: auto; margin: 0; filter: none; }
  [data-site-refresh-content] .fxt-panel--accounts .fx-live--duo { grid-template-columns: 1fr 1.45fr; }
  [data-site-refresh-content] .fxt-panel--strategies .fx-live--duo { grid-template-columns: 1.05fr 1fr; }
  /* смугам стратегій і сетапів тісно: рядок «назва · n +$x  y% WR»
     потребує близько 260px тексту, тож копія-колонка тут вужча,
     а дует забирає звільнене */
  [data-site-refresh-content] .fxt--live .fxt-panel--strategies { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); }
  /* чип у дуеті – нижній правий кут композиції */
  [data-site-refresh-content] .fx-live--duo .fxl-chip { top: auto; bottom: -10px; right: -6px; }
}/* --- сцена з віджетами --- *//* Телефон: карусель, а не стовпчик. Пʼять віджетів один під одним
   давали пʼять екранів однакових карток – гортати їх ніхто не буде.
   Горизонтальний ряд із прилипанням показує все за один екран і
   поводиться як застосунок, а не як довгий список. */[data-site-refresh-content] .fx-stage {
  display: flex; gap: var(--sp-3);
  /* без цього всі картки тягнуться до найвищої: у «Account Balance»
     контенту на 140px, а плитка ставала 511px через сусідній
     «P&L Analysis» – усередині картки зяяла порожнеча */
  align-items: flex-start;
  padding: var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--surface-base);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}[data-site-refresh-content] .fx-stage::-webkit-scrollbar { display: none; }/* Однакова висота карток – інакше під низькою карткою лишалась порожня
   смуга у висоту найвищої сусідки. Але 320px були замалі: у календаря
   вмісту на 594px, тобто дві третини віджета ховалось. Тепер висота
   йде від екрана, і видно рівно стільки, скільки той дозволяє. */[data-site-refresh-content] .fx-stage > .fx-tile {
  flex: 0 0 86%; height: clamp(320px, 62vh, 560px);
  scroll-snap-align: center;
}[data-site-refresh-content] .fx-stage > .fx-tile > * { height: 100%; overflow: hidden; }/* Картки однакової висоти, а вміст у них різного розміру: у графіка
   балансу лише 140px, і під ним лишалась пустка. Даємо тілу віджета
   й самому графіку рости – svg із viewBox масштабується сам. */[data-site-refresh-content] .fx-stage .widget-content { flex: 1 1 auto; min-height: 0; }[data-site-refresh-content] .fx-stage .chart { flex: 1 1 auto; min-height: 0; height: auto; }/* Тултіпи днів календаря – на дотику вони або не викликаються, або
   вилазять за обрізану картку каруселі. Показуємо лише там, де є курсор. */@media (hover: none) {
  [data-site-refresh-content] .fx-stage .cal-tip { display: none; }
}/* у журналі плитка одна – каруселі нема чого показувати */[data-site-refresh-content] .fx-stage > .fx-tile:only-child { flex-basis: 100%; }/* Згасання вмикає скрипт і тільки там, де вміст справді не влазить:
   інакше низ невисокого віджета блякнув би без причини. */@supports (mask-image: linear-gradient(#000, #000)) {
  [data-site-refresh-content] .fx-stage > .fx-tile.is-clipped > * {
    mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent 100%);
  }
}/* --- точки каруселі --- */[data-site-refresh-content] .fx-dots {
  display: flex; justify-content: center; gap: 6px;
  padding: 0 0 var(--sp-4);
  background: var(--surface-base);
}[data-site-refresh-content] .fx-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border-light);
  transition: background .18s ease, transform .18s ease;
}[data-site-refresh-content] .fx-dots i.is-on { background: var(--accent-bright); transform: scale(1.25); }/* натяк, що ряд гортається – той самий прийом, що й на вкладках */@supports (mask-image: linear-gradient(#000, #000)) {
  [data-site-refresh-content] .fx-stage:not(:has(> .fx-tile:only-child)) {
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
}/* Ширину тайла задає розмітка через data-c (колонки) і data-r (рядки).
   Раніше це були інлайнові grid-column, і щоб перебити їх на телефоні,
   доводилось писати !important. Далі кожне правило мусило бути теж
   !important, а відновлювали ширину за підрядком у style: селектор
   [style*="span 2"] тайла на три колонки просто не бачив – журнал
   лишався на третину сцени. З атрибутами нічого перебивати не треба. */[data-site-refresh-content] .fx-stage .fx-tile { grid-column: 1 / -1; grid-row: auto; min-width: 0; }[data-site-refresh-content] .fx-stage .dashboard-widget { height: 100%; }/* Віджети малювались для широких секцій, а тут стоять у плитці на 330px.
   Два місця через це вилазили за плитку, і .fxt-panel їх обрізав. *//* П’ять днів тижня: підпис «+$2,220.00» тримав колонку на 91px, тож
   п’ять колонок просили 435px замість наявних 296. minmax(0, 1fr)
   дозволяє колонці стиснутись, картка тягнеться за нею. */[data-site-refresh-content] .fx-stage .weekdays-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }[data-site-refresh-content] .fx-stage .weekday-col { min-width: 0; width: 100%; }[data-site-refresh-content] .fx-stage .weekday-card { width: 100%; padding: 6px 4px; }[data-site-refresh-content] .fx-stage .weekday-sum { font-size: 10px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }/* Журнальна таблиця має 21 колонку і рядок метрик такий самий широкий:
   у будь-яку плитку вони не влазять і гортаються вбік. Різаний по
   половині слова край читався як поламана верстка, тому гасимо його —
   тим самим прийомом, що й ряд вкладок вище. */@supports (mask-image: linear-gradient(#000, #000)) {
  [data-site-refresh-content] .fx-stage .jrn-scroll,
  [data-site-refresh-content] .fx-stage .jrn-metrics {
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
  }
}/* Шапка віджета: заголовок і перемикачі в один ряд не вміщаються на
   телефоні. Дозволяємо перенос – на ширших екранах ряд і так цілий. */[data-site-refresh-content] .fx-stage .widget-header { flex-wrap: wrap; }[data-site-refresh-content] .fx-stage .widget-controls,
[data-site-refresh-content] .fx-stage .widget-controls-stack { flex-wrap: wrap; justify-content: flex-end; }/* коли контроли зʼїхали на другий рядок, space-between лишає їх ліворуч
   під заголовком – auto-відступ повертає їх до правого краю */[data-site-refresh-content] .fx-stage .widget-header > .widget-controls { margin-left: auto; }/* ============================================================
   3. ПЛАНШЕТ
   ============================================================ */@media (min-width: 701px) {
  /* від планшета місця вистачає – повертаємось до сітки */
  [data-site-refresh-content] .fx-stage {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--sp-5); gap: var(--sp-4);
    overflow: visible; scroll-snap-type: none;
  }
  @supports (mask-image: linear-gradient(#000, #000)) {
    [data-site-refresh-content] .fx-stage:not(:has(> .fx-tile:only-child)) { mask-image: none; }
  }
  /* Стеля висоти плитки. Без неї панель виростала до 1263px при вікні
     на 800px: етап не вміщався в екран ноутбука, а деякі займали два.
     Що не влізло, гасне донизу — згасання вмикає скрипт. */
  [data-site-refresh-content] .fx-stage > .fx-tile { height: auto; max-height: 420px; }
  [data-site-refresh-content] .fx-stage .widget-content, [data-site-refresh-content] .fx-stage .chart { flex: 0 1 auto; min-height: auto; }
  [data-site-refresh-content] .fx-stage > .fx-tile > * { height: 100%; overflow: hidden; }
  [data-site-refresh-content] .fx-dots { display: none; }
  [data-site-refresh-content] .fx-stage .fx-tile { grid-column: auto; }
  /* колонок лише дві, тож і «на дві», і «на три» – це вся ширина */
  [data-site-refresh-content] .fx-stage .fx-tile[data-c="2"],
  [data-site-refresh-content] .fx-stage .fx-tile[data-c="3"] { grid-column: 1 / -1; }
  [data-site-refresh-content] .fx-copy { grid-template-columns: 44px minmax(0, 1fr); padding: var(--sp-6); }
  [data-site-refresh-content] .fx-side { grid-column: 2; }
}/* ============================================================
   4. ДЕСКТОП
   ============================================================ */@media (min-width: 1081px) {
  [data-site-refresh-content] .hero--fx { padding: calc(var(--nav-height) + var(--sp-12)) 0 var(--sp-16); }
  [data-site-refresh-content] .fx-hero-inner {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
    gap: var(--sp-10); align-items: center; padding: 0 var(--sp-6);
  }
  [data-site-refresh-content] .fxt-barwrap { text-align: center; }
  /* на десктопі шість вкладок вміщаються – пігулка стискається по вмісту
     й стоїть по центру, а не тягнеться на всю ширину */
  [data-site-refresh-content] .fxt-bar { display: inline-flex; overflow: visible; }
  /* на десктопі гортати нічого не треба – згасання прибираємо */
  @supports (mask-image: linear-gradient(#000, #000)) { [data-site-refresh-content] .fxt-bar { mask-image: none; } }
  [data-site-refresh-content] .fx-copy { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 340px); padding: var(--sp-7); }
  [data-site-refresh-content] .fx-side { grid-column: 3; }
  [data-site-refresh-content] .fx-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--sp-6); }
  [data-site-refresh-content] .fx-stage--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-site-refresh-content] .fx-stage--3 .fx-tile[data-c="2"] { grid-column: span 2; }
  [data-site-refresh-content] .fx-stage--3 .fx-tile[data-c="3"] { grid-column: 1 / -1; }
  [data-site-refresh-content] .fx-stage .fx-tile[data-r="2"] { grid-row: span 2; }
}/* ============================================================
   5. БЛОК ПЕРЕВАГ: цифри доказів + три наслідки (концепт B)
   ============================================================ *//* смуга цифр - компонент trust-line з головної v2, дослівно:
   підпис праворуч від числа, яскравий вертикальний перелив */[data-site-refresh-content] .trust-line {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 20px 0;
  padding: 0 24px 10px;
}[data-site-refresh-content] .trust-line > span {
  display: flex; align-items: center; gap: 14px; padding: 0 46px;
}[data-site-refresh-content] .trust-line b {
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--accent-mid) 0%, var(--accent) 38%, var(--accent-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .trust-line b {
  background: linear-gradient(180deg, #52e392 0%, #3cd97a 38%, #2d8a55 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #3cd97a;
}[data-site-refresh-content] .trust-line em {
  font-style: normal; font-size: 14px; line-height: 1.3;
  color: var(--text-muted); max-width: 11ch;
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .trust-line em { color: rgba(255, 255, 255, .50); }[data-site-refresh-content] .trust-line i { width: 1px; height: 44px; background: var(--border); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .trust-line i { background: rgba(255, 255, 255, .10); }[data-site-refresh-content] .trust-line + .db-grid { margin-top: var(--sp-7); }@media (max-width: 720px) {
  [data-site-refresh-content] .trust-line { gap: 18px 0; }
  [data-site-refresh-content] .trust-line > span { padding: 0 20px; }
  [data-site-refresh-content] .trust-line i { display: none; }
}[data-site-refresh-content] .db-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }[data-site-refresh-content] .db-card {
  border: 1px solid var(--border); border-radius: var(--r-16);
  background: var(--surface-card); padding: var(--sp-5);
}[data-site-refresh-content] .db-card b { display: block; font-size: var(--fs-16); font-weight: 700; color: var(--text-primary); margin: 0 0 8px; }[data-site-refresh-content] .db-card span { font-size: var(--fs-14); line-height: 1.6; color: var(--text-muted); }@media (max-width: 767px) {
  [data-site-refresh-content] .db-grid { grid-template-columns: 1fr; }
}/* ============================================================
   BitStat – степер на сторінці /solutions
   ------------------------------------------------------------
   Компонент вкладок і сцена з віджетами беруться з
   features-hub.css: обидві сторінки показують одне й те саме
   і мають виглядати однаково. Тут лише те, чим степер
   відрізняється від табів — номер етапу.

   Порядок правил – спершу телефон, далі ширші екрани.
   ============================================================ *//* Секція вже має власні відступи від .solutions-path, тож
   зайвого зверху не додаємо – тільки місце під ряд вкладок. */[data-site-refresh-content] .solutions-path .fxt-barwrap { margin-top: var(--sp-8); }/* --- номер етапу у вкладці --- */[data-site-refresh-content] .stp-tab { gap: 10px; }[data-site-refresh-content] .stp-tab-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 999px;
  background: var(--border-a05); border: 1px solid var(--border-a10);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}[data-site-refresh-content] .stp-tab.is-on .stp-tab-num {
  background: var(--public-accent-soft);
  border-color: var(--public-accent);
  color: var(--accent-bright);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .stp-tab.is-on .stp-tab-num {
  background: rgba(60,217,122,.14);
  border-color: rgba(60,217,122,.34);
}/* --- номер етапу в панелі ---
   Стоїть у тій самій клітинці сітки, де на /features іконка
   інструмента: 44px ліворуч від заголовка. */[data-site-refresh-content] .stp-num {
  font-size: var(--fs-15); font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}/* Заголовок і надпис усередині панелі – як у решти блоків сторінки,
   але без верхнього відступу від .solutions-eyebrow, бо його вже
   задає сітка .fx-copy. */[data-site-refresh-content] .fxt-panel .solutions-eyebrow { margin: 0; }[data-site-refresh-content] .fxt-panel .fx-text h3 {
  margin: var(--sp-2) 0 0;
  font-size: clamp(22px, 4.4vw, 30px); font-weight: 800;
  letter-spacing: -.02em; color: var(--text-primary);
}[data-site-refresh-content] .fxt-panel .fx-text p {
  margin: var(--sp-3) 0 0; max-width: 62ch;
  font-size: var(--fs-15); line-height: 1.65; color: var(--text-secondary);
}/* ============================================================
   ПЕРШИЙ ЕКРАН
   ------------------------------------------------------------
   У картинки героя в атрибутах стоїть 4940px завширшки. Елемент
   сітки за замовчуванням має min-width: auto, тобто не може стати
   вужчим за свій вміст, і колонка розпирала себе за край екрана:
   на 1024 на 76px, на 1280 на 96, на 1440 на 33. Праву частину
   скриншота просто зрізало.
   ============================================================ */[data-site-refresh-content] .solutions-hero-visual {
  min-width: 0;
  /* У вихідних стилях ширина min(820px, 62vw) плюс зсув на 26px праворуч.
     Задум зрозумілий - скриншот трохи виходить за колонку. Але між 1024
     і 1440 колонка вужча за 62vw, і візуал вилазив за екран: на 1280 на
     96px. Права частина дашборда просто зрізалась. Третім аргументом
     додаємо стелю в ширину колонки: блід лишається, обрізання зникає. */
  width: min(820px, 62vw, 100%);
}[data-site-refresh-content] .solutions-hero-image { max-width: 100%; height: auto; }/* Кегль H1 і бейдж – як у героя /features: на контейнері 1120px
   рідні 74px ламали заголовок на пʼять рядків. */[data-site-refresh-content] .solutions-hero h1 {
  font-size: clamp(30px, 5.4vw, 52px);
  letter-spacing: -.02em; line-height: 1.08;
}[data-site-refresh-content] .solutions-hero .solutions-hero-copy > .solutions-eyebrow {
  display: inline-block; padding: 6px 14px; border-radius: 20px;
  background: var(--public-accent-soft); border: 1px solid var(--public-accent);
  font-size: var(--fs-12); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-bright);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .solutions-hero .solutions-hero-copy > .solutions-eyebrow {
  background: var(--green-bg);
  border-color: rgba(60,217,122,.22);
}/* ── герой: скрін дашборда з лупою і чипом P&L ──
   Дует віджетів на мобільному складався криво в будь-якій
   композиції - скрін у рамці надійніший (19.08.2026). */[data-site-refresh-content] .sol-hero-shot { position: relative; }[data-site-refresh-content] .sol-hero-shot .fx-shot { position: relative; display: block; width: 100%; }[data-site-refresh-content] .sol-hero-shot .shl-chip {
  position: absolute; top: -14px; right: 0; z-index: 3; margin: 0;
}@media (min-width: 1201px) {
  [data-site-refresh-content] .sol-hero-shot .shl-chip { right: -8px; }
}@media (max-width: 900px) {
  /* колонка на всю ширину: стеля 62vw лишилась від старої картинки
     і стискала візуал до 242px на 390 */
  [data-site-refresh-content] .solutions-hero-visual { width: 100%; }
}/* Рядок під героєм тягнувся на всі 1320px при кеглі 12px: такий
   довгий рядок дрібним шрифтом не читають. */[data-site-refresh-content] .solutions-integrations {
  max-width: 62ch; margin-left: auto; margin-right: auto;
  font-size: var(--fs-13);
}/* ============================================================
   ЦИКЛ «CAPTURE. UNDERSTAND. ACT.»
   ------------------------------------------------------------
   Раніше секція була скриншотом календаря в перекошеній рамці
   плюс три картки-твердження збоку. Той самий календар степер
   вище показує живим віджетом, тож PNG лише повторював сказане,
   а три картки з текстом не показували нічого.

   Тепер кожен крок несе шматок справжнього продукту: записані
   угоди, криву капіталу, смуги стратегій. І головне — цикл
   замикається: від «Act» пунктир веде назад до «Capture».
   ============================================================ */[data-site-refresh-content] .loop-wrap { position: relative; }[data-site-refresh-content] .loop {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;              /* телефон: у стовпчик */
  counter-reset: loop;
}[data-site-refresh-content] .loop-step {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-16);
  background: var(--surface-card);
}/* Верхня грань спалахує по черзі 01 → 02 → 03 і знову. Це єдиний
   рух у секції, і він каже те саме, що й пунктир унизу: це коло. */[data-site-refresh-content] .loop-step::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
  opacity: 0;
  animation: loopPulse 4.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 1.6s);
}@keyframes loopPulse {
  0%, 62%, 100% { opacity: 0; }
  10%, 40%      { opacity: .85; }
}[data-site-refresh-content] .loop-num {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;          /* інакше чип розтягується на всю картку */
  min-width: 30px; height: 30px; padding: 0 9px; margin: 0 0 var(--sp-4);
  border-radius: 999px;
  background: var(--public-accent-soft); border: 1px solid var(--public-accent);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: .06em; color: var(--accent-bright);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .loop-num {
  background: var(--green-bg);
  border-color: rgba(60,217,122,.24);
}[data-site-refresh-content] .loop-step h3 {
  margin: 0; font-size: var(--fs-20); font-weight: 700;
  letter-spacing: -.01em; color: var(--text-primary);
}[data-site-refresh-content] .loop-step p {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-14); line-height: 1.6; color: var(--text-secondary);
}/* --- шматок продукту всередині кроку --- */[data-site-refresh-content] .loop-vis {
  margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px solid var(--border-a08);
}/* 01 — рядки журналу */[data-site-refresh-content] .loop-rows { display: grid; gap: 6px; }[data-site-refresh-content] .loop-row {
  display: grid; grid-template-columns: auto auto 1fr auto;
  align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 10px;
  background: var(--border-a05); border: 1px solid var(--border-a08);
  font-size: 12px;
}[data-site-refresh-content] .loop-row-date { color: var(--text-muted); font-variant-numeric: tabular-nums; }[data-site-refresh-content] .loop-row-pair { font-weight: 600; color: var(--text-primary); }[data-site-refresh-content] .loop-row .direction-badge { font-size: 11px; }[data-site-refresh-content] .loop-row .direction-badge svg { width: 13px; height: 13px; }[data-site-refresh-content] .loop-row .result-badge { justify-self: start; font-size: 10px; padding: 2px 7px; }[data-site-refresh-content] .loop-row .result-dot { width: 6px; height: 6px; }[data-site-refresh-content] .loop-row-pnl { justify-self: end; font-variant-numeric: tabular-nums; }[data-site-refresh-content] .loop-row-pnl .num.pos { color: var(--pw-pos); font-weight: 700; }html:not([data-marketing-theme='light']) [data-site-refresh-content] .loop-row-pnl .num.pos { color: var(--pw-pos, var(--accent-bright)); }/* 02 — крива капіталу */[data-site-refresh-content] .loop-chart .chart { display: block; width: 100%; height: 132px; }[data-site-refresh-content] .loop-chart-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 6px; font-size: 11px; color: var(--text-muted);
}[data-site-refresh-content] .loop-chart-foot .num.pos { font-size: 13px; font-weight: 700; }/* 03 — смуги стратегій.
   У самому віджеті заливка завжди зелена, бо кодує обсяг, а не знак.
   У вибірці з трьох рядків це збиває: мінус на зеленому тлі. */[data-site-refresh-content] .loop-vis .strategy-bar-list { gap: 6px; }/* на вузькій картці назва стратегії впиралась у суму */[data-site-refresh-content] .loop-vis .strategy-bar-content { gap: 12px; }[data-site-refresh-content] .loop-vis .strategy-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }[data-site-refresh-content] .loop-vis .strategy-bar-row:has(.strategy-bar-pnl.negative) .strategy-bar-fill,
[data-site-refresh-content] .fx-stage .strategy-bar-row:has(.strategy-bar-pnl.negative) .strategy-bar-fill {
  background: color-mix(in srgb, var(--public-danger) 14%, var(--public-surface));
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .loop-vis .strategy-bar-row:has(.strategy-bar-pnl.negative) .strategy-bar-fill,
html:not([data-marketing-theme='light']) [data-site-refresh-content] .fx-stage .strategy-bar-row:has(.strategy-bar-pnl.negative) .strategy-bar-fill {
  background: rgba(167,72,70,.26);
}/* --- пунктир, що замикає коло --- *//* Малюємо рамкою, а не SVG: так лінія тягнеться на будь-яку ширину
   без спотворення заокруглень. */[data-site-refresh-content] .loop-return { display: none; }/* Три в ряд лише з 1000px. На 768 картки виходили по 226px, і в них
   ламався кожен фрагмент: рядки журналу вилазили за картку, назви
   стратегій обрізались, суми виїжджали за екран. */@media (min-width: 1001px) {
  [data-site-refresh-content] .loop { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }

  [data-site-refresh-content] .loop-return {
    display: block; position: relative;
    height: 52px; margin: 0 clamp(40px, 12%, 160px);
    border: 1px dashed var(--border-light); border-top: 0;
    border-radius: 0 0 24px 24px;
  }
  /* вістря на лівому кінці — стрілка вгору, у перший крок */
  [data-site-refresh-content] .loop-return::before {
    content: ""; position: absolute; left: -6px; top: -2px;
    width: 10px; height: 10px;
    border-left: 2px solid var(--accent-bright);
    border-top: 2px solid var(--accent-bright);
    transform: rotate(45deg);
  }
  [data-site-refresh-content] .loop-return span {
    position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
    padding: 0 14px; background: var(--public-page-bg);
    font-size: var(--fs-12); font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
    white-space: nowrap;
  }
}@media (prefers-reduced-motion: reduce) {
  [data-site-refresh-content] .loop-step::before { animation: none; }
}/* --- дотикові цілі ---
   Посилання-етапи вже мають 44px від .fx-link. Тут добираємо ті,
   що лишились дрібними у власних блоках сторінки. */[data-site-refresh-content] .solutions-method a,
[data-site-refresh-content] .solutions-faq a,
[data-site-refresh-content] .solutions-cta a:not(.btn-primary) {
  display: inline-flex; align-items: center; min-height: 44px;
}/* Уся сторінка тримає ту саму ширину вмісту, що решта сайту
   (--container = 1120px): рідний solutions-shell на 1320px робив
   героя і степер помітно ширшими за інші сторінки. */[data-site-refresh-content] .solutions-page .solutions-shell { max-width: var(--container); }/* ── панелі-композиції степера (13.08.2026) ──
   Той самий принцип, що на /features (.fxt--live у features-hub.css):
   тут лише ширини під конкретні етапи. */@media (min-width: 1081px) {
  /* журнал – одна широка картка */
  [data-site-refresh-content] .fxt-panel--repeatable-process .fxl-main { width: 100%; }
  /* аналіз P&L – текстова панель, їй досить третини; просадці більше */
  [data-site-refresh-content] .fxt-panel--find-leaks .fx-live--duo { grid-template-columns: 1fr 1.35fr; }
  [data-site-refresh-content] .fxt-panel--validate-strategies .fx-live--duo { grid-template-columns: 1.05fr 1fr; }
  [data-site-refresh-content] .fxt-panel--manage-accounts .fx-live--duo { grid-template-columns: 1fr 1.45fr; }
  [data-site-refresh-content] .fxt-panel--review-share .fxl-main { width: min(540px, 100%); }
}/* ============================================================
   Сцени етапів: скрін продукту + живий віджет (19.08.2026,
   мова затверджених головної v2 і /features-stacked)
   ============================================================ *//* лупа на куті скріна: видно завжди, бо ховера на дотику немає */[data-site-refresh-content] .fx-zoom {
  position: absolute; right: 12px; bottom: 12px;
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; color: rgba(255, 255, 255, .85);
  background: rgba(10, 12, 16, .65);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  transition: background .2s ease, transform .2s ease;
}[data-site-refresh-content] .fx-zoom svg { width: 17px; height: 17px; }[data-site-refresh-content] .stage-scene { position: relative; }[data-site-refresh-content] .stage-scene .fx-shot { position: relative; display: block; width: 100%; }[data-site-refresh-content] .fx-shot img { transition: filter .2s ease; }[data-site-refresh-content] .fx-shot:hover .fx-zoom,
[data-site-refresh-content] .fx-shot:focus-visible .fx-zoom {
  background: var(--public-accent); color: var(--public-on-accent); transform: scale(1.08);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .fx-shot:hover .fx-zoom,
html:not([data-marketing-theme='light']) [data-site-refresh-content] .fx-shot:focus-visible .fx-zoom {
  background: rgba(60, 217, 122, .25);
}[data-site-refresh-content] .fx-shot:hover img { filter: brightness(1.07); }/* живий віджет на куті рамки скріна вертикального таймлайна */[data-site-refresh-content] .v2-inlay {
  position: absolute; bottom: -18px; z-index: 2;
  width: min(260px, 60%);
}html:not([data-marketing-theme='light']) [data-site-refresh-content] .v2-inlay { filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .55)); }html:not([data-marketing-theme='light']) [data-site-refresh-content] .v2-inlay .dashboard-widget,
html:not([data-marketing-theme='light']) [data-site-refresh-content] .v2-stack .dashboard-widget {
  box-shadow: 0 1px 0 0 rgba(255,255,255,.05) inset, 0 18px 44px rgba(0,0,0,.45);
}/* лівий інлей сидить на куті рамки зсередини: назовні він звисав
   у проміжок колонок і впирався в текст етапу */[data-site-refresh-content] .v2-inlay--left { left: 12px; }[data-site-refresh-content] .v2-inlay--right { right: -16px; }/* перемикач рахунків у вузькій картці-акценті не влазить і в
   декоративному віджеті не потрібен */[data-site-refresh-content] .v2-inlay .widget-controls, [data-site-refresh-content] .v2-inlay .capital-toggle { display: none; }/* рядки смуг у вузькій картці не переносяться */[data-site-refresh-content] .v2-inlay .strategy-bar-content { gap: 10px; padding: 0 12px; }[data-site-refresh-content] .v2-inlay .strategy-bar-left { min-width: 0; }[data-site-refresh-content] .v2-inlay .strategy-bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }[data-site-refresh-content] .v2-inlay .strategy-bar-count,
[data-site-refresh-content] .v2-inlay .strategy-bar-right { white-space: nowrap; }[data-site-refresh-content] .fx-live:has(.v2-inlay) { margin-bottom: 18px; }/* дует без накладання: скрін і картка стосом */[data-site-refresh-content] .v2-stack { margin-top: 14px; }@media (max-width: 980px) {
  [data-site-refresh-content] .v2-inlay { position: static; width: 100%; margin-top: 14px; filter: none; }
  [data-site-refresh-content] .fx-live:has(.v2-inlay) { margin-bottom: 0; }
}.navbar[data-marketing-header] {
    --marketing-header-height: 65px;
    --marketing-page-bg: var(--public-page-bg, #f7f8fa);
    --marketing-surface: var(--public-surface, #fff);
    --marketing-surface-muted: var(--public-elevated, #f0f2f5);
    --marketing-bg-primary: var(--public-page-bg, #f7f8fa);
    --marketing-bg-tertiary: var(--public-elevated, #f0f2f5);
    --marketing-border: var(--public-border, #d9dfe7);
    --marketing-text: var(--public-text-primary, #171a1f);
    --marketing-text-primary: var(--public-text-primary, #171a1f);
    --marketing-text-secondary: var(--public-text-secondary, #3f454d);
    --marketing-text-muted: var(--public-text-muted, #5d6570);
    --marketing-accent: var(--public-accent, #0f7650);
    --marketing-accent-hover: var(--public-accent-hover, #0b5f40);
    --marketing-accent-soft: var(--public-accent-soft, rgba(15, 118, 80, 0.12));
    --marketing-green: var(--public-accent, #0f7650);
    --marketing-positive: var(--public-success, #11734f);
    --marketing-negative: var(--public-danger, #b42318);
    --marketing-gradient: linear-gradient(135deg, var(--public-accent, #0f7650), var(--public-accent-hover, #0b5f40));
    --marketing-shadow: var(--public-shadow, 0 18px 42px rgba(23, 26, 31, 0.1), 0 3px 10px rgba(23, 26, 31, 0.04));
    --marketing-focus-ring: var(--public-focus-ring, rgba(15, 118, 80, 0.42));
    --marketing-dropdown-surface: var(--public-surface, #fff);
    --marketing-dropdown-border: var(--public-border, #d9dfe7);
    --marketing-dropdown-text-primary: var(--public-text-primary, #171a1f);
    --marketing-dropdown-text-secondary: var(--public-text-secondary, #3f454d);
    --marketing-dropdown-text-muted: var(--public-text-muted, #5d6570);
    --marketing-dropdown-shadow: var(--public-shadow, 0 18px 42px rgba(23, 26, 31, 0.1), 0 3px 10px rgba(23, 26, 31, 0.04));
    color-scheme: inherit;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 16px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--marketing-text-primary);
    background: var(--marketing-surface);
    border-bottom: 1px solid var(--marketing-border);
}html:not([data-marketing-theme='light']) .navbar[data-marketing-header] {
    --marketing-page-bg: #09090b;
    --marketing-surface: #09090b;
    --marketing-surface-muted: #18181b;
    --marketing-bg-primary: #09090b;
    --marketing-bg-tertiary: #18181b;
    --marketing-border: #27272a;
    --marketing-text: #fafafa;
    --marketing-text-primary: #fafafa;
    --marketing-text-secondary: #e4e4e7;
    --marketing-text-muted: #c7c7cc;
    --marketing-accent: #3cd97a;
    --marketing-accent-hover: #59d68c;
    --marketing-accent-soft: rgba(60, 217, 122, 0.12);
    --marketing-green: #2d694c;
    --marketing-positive: #3cd97a;
    --marketing-negative: #f43f5e;
    --marketing-gradient: linear-gradient(135deg, #3a8a63, #2d694c);
    --marketing-shadow: 0 18px 42px rgba(0, 0, 0, 0.35), 0 3px 10px rgba(0, 0, 0, 0.2);
    --marketing-focus-ring: rgba(60, 217, 122, 0.42);
    --marketing-dropdown-surface: #18181b;
    --marketing-dropdown-border: #27272a;
    --marketing-dropdown-text-primary: #fafafa;
    --marketing-dropdown-text-secondary: #e4e4e7;
    --marketing-dropdown-text-muted: #c7c7cc;
    --marketing-dropdown-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
    color: #fafafa;
    background: #09090b;
}[data-marketing-header] .nav-container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}[data-marketing-header] .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--marketing-text-primary);
    font-size: 18px;
    font-weight: 700;
}[data-marketing-header] .bitstat-brand-lockup {
    gap: 10px;
    flex: 0 0 auto;
}[data-marketing-header] .bitstat-brand-mark {
    display: block;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    object-fit: contain;
}[data-marketing-header] .bitstat-brand-wordmark {
    color: var(--marketing-text-primary);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}[data-marketing-header] .logo-full {
    width: auto;
    height: 32px;
    object-fit: contain;
}[data-marketing-header] .logo-full.small {
    height: 24px;
}[data-marketing-header] .nav-links {
    display: flex;
    gap: 32px;
    flex-shrink: 0;
}[data-marketing-header] .nav-links > a,
[data-marketing-header] .nav-dropdown-trigger,
[data-marketing-header] .nav-login,
[data-marketing-header] .nav-cta {
    white-space: nowrap;
}[data-marketing-header] .nav-links a {
    color: var(--marketing-text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}[data-marketing-header] .nav-links a:hover {
    color: var(--marketing-text-primary);
}[data-marketing-header] .nav-links a[aria-current="page"],
[data-marketing-header] .mobile-menu a[aria-current="page"] {
    color: var(--marketing-accent);
}html:not([data-marketing-theme='light']) [data-marketing-header] .nav-links a[aria-current="page"],
html:not([data-marketing-theme='light']) [data-marketing-header] .mobile-menu a[aria-current="page"] {
    color: #59d68c;
}[data-marketing-header] .nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle {
    position: relative;
    display: inline-flex;
    flex: 0 0 64px;
    width: 64px;
    height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--marketing-border);
    border-radius: 999px;
    color: var(--marketing-text-primary);
    background: var(--marketing-surface-muted);
    cursor: pointer;
    appearance: none;
    transition: border-color 160ms ease, background-color 160ms ease;
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle[aria-checked="true"] {
    border-color: color-mix(in srgb, var(--marketing-accent) 30%, var(--marketing-border));
    background: var(--marketing-accent-soft);
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle:hover {
    border-color: var(--marketing-accent-hover);
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle:focus-visible {
    outline: 3px solid var(--marketing-focus-ring);
    outline-offset: 2px;
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-icon,
[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-icon svg {
    display: block;
    width: 14px;
    height: 14px;
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-icon {
    position: absolute;
    top: 50%;
    z-index: 2;
    pointer-events: none;
    transform: translateY(-50%);
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-icon--moon {
    left: 8px;
    color: var(--public-theme-moon, #4f6f9f);
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-icon--sun {
    right: 8px;
    color: var(--public-theme-sun, #9a6500);
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-thumb {
    position: absolute;
    top: 50%;
    left: 3px;
    z-index: 1;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--marketing-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    transform: translateY(-50%);
    transition: transform 180ms ease;
}html[data-marketing-theme="dark"] [data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-thumb {
    transform: translateY(-50%);
}html[data-marketing-theme="light"] [data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-thumb {
    transform: translate(32px, -50%);
}[data-marketing-header][data-marketing-theme-switcher="true"] .mobile-menu-theme-row {
    display: flex;
    align-items: center;
    min-height: 52px;
}[data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle--mobile {
    height: 44px;
}@media (prefers-reduced-motion: reduce) {
    [data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-toggle,
    [data-marketing-header][data-marketing-theme-switcher="true"] .marketing-theme-thumb {
        transition: none;
    }
}[data-marketing-header] .lang-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--marketing-border);
    border-radius: 10px;
    background: var(--marketing-surface-muted);
    color: var(--marketing-text-primary);
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s;
}[data-marketing-header] .lang-toggle:hover {
    border-color: var(--marketing-accent);
}[data-marketing-header] .marketing-language-switcher {
    position: relative;
}[data-marketing-header] .lang-toggle {
    list-style: none;
}[data-marketing-header] .lang-toggle::-webkit-details-marker {
    display: none;
}[data-marketing-header] .lang-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}[data-marketing-header] .marketing-language-switcher[open] .lang-toggle svg {
    transform: rotate(180deg);
}[data-marketing-header] .lang-current {
    color: var(--marketing-text-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}[data-marketing-header] .marketing-language-options {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 2;
    display: grid;
    min-width: 152px;
    padding: 6px;
    border: 1px solid var(--marketing-dropdown-border);
    border-radius: 10px;
    background: var(--marketing-dropdown-surface);
    box-shadow: var(--marketing-dropdown-shadow);
}[data-marketing-header] .marketing-language-option {
    display: block;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--marketing-dropdown-text-secondary);
    font-size: 14px;
    font-weight: 500;
    overflow-wrap: anywhere;
    text-decoration: none;
}[data-marketing-header] .marketing-language-option:hover,
[data-marketing-header] .marketing-language-option:focus-visible,
[data-marketing-header] .marketing-language-option[aria-current="page"] {
    color: var(--marketing-dropdown-text-primary);
    background: var(--marketing-surface-muted);
}[data-marketing-header] .nav-login {
    color: var(--marketing-text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}[data-marketing-header] .nav-login:hover {
    color: var(--marketing-text-primary);
}[data-marketing-header] .nav-cta,
[data-marketing-header] .nav-cta-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--marketing-accent);
    border-radius: 8px;
    background: var(--marketing-accent);
    box-shadow: 0 4px 14px rgba(15, 118, 80, 0.18);
    color: var(--public-on-accent, var(--on-accent, #fff));
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}[data-marketing-header] .nav-cta {
    min-height: 36px;
    padding: 8px 18px;
    font-size: 14px;
}[data-marketing-header] .nav-cta-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}[data-marketing-header] .nav-cta:hover,
[data-marketing-header] .nav-cta-mobile:hover {
    border-color: var(--marketing-accent-hover);
    background: var(--marketing-accent-hover);
    box-shadow: 0 5px 16px rgba(11, 95, 64, 0.2);
}[data-marketing-header] .nav-cta:hover .nav-cta-icon,
[data-marketing-header] .nav-cta-mobile:hover .nav-cta-icon {
    transform: translateX(2px);
}[data-marketing-header] .nav-cta:focus-visible,
[data-marketing-header] .nav-cta-mobile:focus-visible {
    outline: 2px solid var(--marketing-focus-ring);
    outline-offset: 3px;
}[data-marketing-header] .nav-dropdown {
    position: relative;
}[data-marketing-header] .nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}[data-marketing-header] .nav-dropdown-trigger svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
}[data-marketing-header] .nav-dropdown:hover .nav-dropdown-trigger svg {
    transform: rotate(180deg);
}[data-marketing-header] .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    min-width: 280px;
    padding: 8px;
    z-index: 2;
    border: 1px solid var(--marketing-dropdown-border);
    border-radius: 12px;
    background: var(--marketing-dropdown-surface);
    box-shadow: var(--marketing-dropdown-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}[data-marketing-header] .nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}[data-marketing-header] .nav-dropdown--resources[open] .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}[data-marketing-header] .nav-dropdown--resources::after {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 1;
    width: min(580px, calc(100vw - 32px));
    height: 12px;
    content: "";
    transform: translateX(-50%);
}[data-marketing-header] .nav-resources-summary {
    list-style: none;
}[data-marketing-header] .nav-resources-summary::-webkit-details-marker {
    display: none;
}[data-marketing-header] .nav-resources-summary::marker {
    content: "";
}[data-marketing-header] .nav-dropdown--resources[open] .nav-resources-summary svg {
    transform: rotate(180deg);
}[data-marketing-header] .nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--marketing-dropdown-text-secondary) !important;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}[data-marketing-header] .nav-dropdown-menu a:hover {
    background: var(--marketing-surface-muted);
    color: var(--marketing-dropdown-text-primary) !important;
}[data-marketing-header] .nav-dropdown-menu a > svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--marketing-accent);
}[data-marketing-header] .dd-title {
    display: block;
    color: var(--marketing-dropdown-text-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}[data-marketing-header] .dd-desc {
    display: block;
    color: var(--marketing-dropdown-text-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
}[data-marketing-header] .nav-dropdown-menu--resources {
    display: grid;
    width: min(580px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 12px;
}[data-marketing-header] .nav-dropdown-menu--resources .nav-resource-link {
    min-height: 76px;
    align-items: flex-start;
    padding: 12px;
}[data-marketing-header] .nav-resource-link > div {
    min-width: 0;
}[data-marketing-header] details[data-marketing-mobile-disclosure] {
    margin: 0;
}[data-marketing-header] .mobile-menu-disclosure-summary {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px;
    border-radius: 10px;
    cursor: pointer;
    list-style: none;
}[data-marketing-header] .mobile-menu-disclosure-summary::-webkit-details-marker {
    display: none;
}[data-marketing-header] .mobile-menu-disclosure-summary::marker {
    content: "";
}[data-marketing-header] .mobile-menu-disclosure-summary svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}[data-marketing-header] details[data-marketing-mobile-disclosure][open] .mobile-menu-disclosure-summary svg {
    transform: rotate(180deg);
}[data-marketing-header] .mobile-menu-disclosure-label {
    color: var(--marketing-text-primary);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}[data-marketing-header] .mobile-menu-disclosure-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0 8px;
}[data-marketing-header] .mobile-menu-disclosure-panel a {
    display: flex;
    min-height: 48px;
    align-items: center;
}[data-marketing-header] .mobile-menu-feature-links a,
[data-marketing-header] .mobile-menu-resource-links a {
    padding: 0 12px;
    border-radius: 10px;
    color: var(--marketing-text-secondary);
}[data-marketing-header] .mobile-menu-resource-links a {
    min-height: 64px;
}[data-marketing-header] .mobile-menu-divider {
    height: 1px;
    margin: 8px 0;
    background: var(--marketing-border);
}[data-marketing-header] .mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 9px;
    border: 1px solid var(--marketing-border);
    border-radius: 10px;
    background: var(--marketing-surface-muted);
    color: var(--marketing-text-primary);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}[data-marketing-header] .mobile-menu-btn:hover {
    border-color: var(--marketing-accent);
    background: var(--marketing-accent-soft);
}[data-marketing-header] .mobile-menu-button-icon {
    display: flex;
}[data-marketing-header] .mobile-menu-button-icon--close,
.navbar[data-marketing-header].menu-open .mobile-menu-button-icon--open {
    display: none;
}.navbar[data-marketing-header].menu-open .mobile-menu-button-icon--close {
    display: flex;
}[data-marketing-header] .mobile-menu-btn svg {
    width: 22px;
    height: 22px;
}[data-marketing-header] .mobile-menu {
    position: fixed;
    inset: var(--marketing-header-height) 0 0;
    display: none;
    flex-direction: column;
    height: calc(100dvh - var(--marketing-header-height));
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--marketing-text-primary);
    background: var(--marketing-surface);
    box-shadow: var(--marketing-shadow);
}[data-marketing-header] .mobile-menu-scroll {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 12px 24px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--marketing-accent) transparent;
    scrollbar-width: thin;
}[data-marketing-header] .mobile-menu-scroll::-webkit-scrollbar {
    width: 6px;
}[data-marketing-header] .mobile-menu-scroll::-webkit-scrollbar-track {
    background: transparent;
}[data-marketing-header] .mobile-menu-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--marketing-accent);
}[data-marketing-header] .mobile-menu a {
    color: var(--marketing-text-secondary);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
}[data-marketing-header] .mobile-menu .nav-cta-mobile {
    color: var(--public-on-accent, var(--on-accent, #fff));
}[data-marketing-header] .mobile-menu-scroll > a {
    display: flex;
    min-height: 52px;
    align-items: center;
    padding: 0 2px;
    border-radius: 10px;
}[data-marketing-header] .mobile-menu-scroll > a:hover,
[data-marketing-header] .mobile-menu-feature-links a:hover,
[data-marketing-header] .mobile-menu-resource-links a:hover {
    color: var(--marketing-text-primary);
    background: var(--marketing-surface-muted);
}[data-marketing-header] .mobile-menu-footer {
    flex: 0 0 auto;
    padding: 0 24px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--marketing-border);
    background: var(--marketing-surface);
    box-shadow: 0 -10px 24px rgba(23, 26, 31, 0.06);
}[data-marketing-header] .mobile-menu-footer .mobile-menu-divider {
    margin: 0 0 8px;
}[data-marketing-header] .mobile-menu-language {
    margin: 0;
}[data-marketing-header] .mobile-menu-language-summary {
    display: inline-flex;
    width: fit-content;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid var(--marketing-border);
    border-radius: 10px;
    color: var(--marketing-text-primary);
    background: var(--marketing-surface-muted);
    cursor: pointer;
    list-style: none;
}[data-marketing-header] .mobile-menu-language-summary::-webkit-details-marker {
    display: none;
}[data-marketing-header] .mobile-menu-language-summary::marker {
    content: "";
}[data-marketing-header] .mobile-menu-language-summary svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}[data-marketing-header] .mobile-menu-language[open] .mobile-menu-language-summary {
    border-color: var(--marketing-accent);
    background: var(--marketing-accent-soft);
}[data-marketing-header] .mobile-menu-language[open] .mobile-menu-language-summary svg {
    transform: rotate(180deg);
}[data-marketing-header] .mobile-menu-language-current {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
}[data-marketing-header] .mobile-menu-language-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
    gap: 8px;
    padding: 8px 0 4px;
}[data-marketing-header] .mobile-menu-language-option {
    display: flex;
    width: 100%;
    min-height: 44px !important;
    min-width: 44px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 10px !important;
    border: 1px solid var(--marketing-border);
    border-radius: 8px;
    color: var(--marketing-text-secondary);
    background: var(--marketing-surface);
    font-size: 14px !important;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-align: left;
}[data-marketing-header] .mobile-menu-language-option[aria-current="page"] {
    color: var(--marketing-text-primary);
    border-color: var(--marketing-accent);
    background: var(--marketing-accent-soft);
}[data-marketing-header] .mobile-menu-login-row {
    display: flex;
    min-height: 48px;
    align-items: center;
}[data-marketing-header] .mobile-menu-login {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: flex-end;
    padding: 0 2px;
}[data-marketing-header] .mobile-menu-btn:focus-visible,
[data-marketing-header] .mobile-menu-disclosure-summary:focus-visible,
[data-marketing-header] .mobile-menu-language-summary:focus-visible,
[data-marketing-header] .mobile-menu a:focus-visible {
    outline: 2px solid var(--marketing-focus-ring);
    outline-offset: 2px;
}@media (max-width: 1100px) {
    [data-marketing-header] .nav-container {
        padding: 0 28px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .showcase-split {
        gap: 16px;
    }

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

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

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

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

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

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

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

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

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

    .showcase-features {
        gap: 12px;
    }

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

    .trusted-logos {
        gap: 24px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .guide-step {
        padding: 22px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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