/* Display face of the design: TT Bluescreens (variable: weight 100-900, width 50-150%).
   Condensed (~60%) for big uppercase titles, extended (~150%) for section headings, normal/wide for copy. */
@font-face {
    font-family: "TT Bluescreens";
    src: url("../fonts/tt-bluescreens-vf.woff2") format("woff2"), url("../fonts/tt-bluescreens-vf.woff") format("woff");
    font-weight: 100 900;
    font-stretch: 50% 150%;
    font-display: swap;
}
/* Home landing — standalone styles, independent of light/dark theme.
   Desktop layout follows the Figma export 1:1 at a 1280px viewport (960px container, 2x assets). */
html:has(.lp-body), .lp-body { background: #000; }
.lp {
    background: #000;
    color: #fff;
    font-family: "Space Grotesk", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp img { max-width: 100%; }
.lp a { color: inherit; }

/* Shared: buttons */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    background:
        radial-gradient(90% 95% at 50% -12%, #ffd9a4 0%, rgba(255, 217, 164, 0) 62%),
        linear-gradient(180deg, #ff6a50 0%, #ff4c3b 55%, #e43a1f 100%);
    box-shadow: 0 0 14px 1px rgba(255, 110, 30, 0.55), 0 10px 30px 2px rgba(255, 80, 0, 0.38);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lp-btn:hover, .lp-btn:focus {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 0 40px 10px rgba(255, 120, 40, 0.55), 0 0 110px 32px rgba(255, 90, 0, 0.35);
}
.lp-btn .lp-key { display: block; flex: none; }
.lp-btn-sm { width: 220px; height: 48px; gap: 8px; font-size: 17.3px; }
.lp-btn-sm .lp-key { width: 17px; height: 14px; }
.lp-btn-lg {
    width: 400px;
    height: 88px;
    font-size: 30px;
    gap: 14px;
    border-color: transparent;
    background: radial-gradient(50% 75% at 50% 0%, #ffd199 0%, #ff4433 100%);
    box-shadow:
        0 8px 120px rgba(255, 128, 0, 0.5),
        inset 2px 0 0 #ff4433, inset -2px 0 0 #ff4433, inset 0 2px 0 #ff4433, inset 0 -2px 0 #ff4433,
        inset 0 4px 0 rgba(255, 255, 255, 0.2), inset 0 -4px 0 rgba(255, 255, 255, 0.1);
}
.lp-btn-lg:hover, .lp-btn-lg:focus { transform: scale(1.05); transition-duration: 0.6s; transition-timing-function: var(--lp-spring); box-shadow: 0 8px 120px rgba(255, 128, 0, 0.5), inset 2px 0 0 #ff4433, inset -2px 0 0 #ff4433, inset 0 2px 0 #ff4433, inset 0 -2px 0 #ff4433, inset 0 4px 0 rgba(255, 255, 255, 0.2), inset 0 -4px 0 rgba(255, 255, 255, 0.1); }
.lp-btn-lg:active { transform: scale(0.98); transition-duration: var(--dur-fast); transition-timing-function: var(--ease-out); }
.lp-btn-lg .lp-key { width: 34px; height: 28px; }

/* Top: header + hero share the dark-green glow */
.lp-top {
    position: relative;
    overflow-x: clip;
    background:
        radial-gradient(70% 55% at 50% 10%, rgba(18, 48, 34, 0.55) 0%, rgba(18, 48, 34, 0) 100%),
        radial-gradient(40% 40% at 92% 60%, rgba(30, 90, 60, 0.35) 0%, rgba(30, 90, 60, 0) 100%),
        linear-gradient(180deg, #06100b 0%, #050907 70%, #000 100%);
}
.lp-header { position: relative; z-index: 5; padding: 0 24px; }
.lp-header-inner {
    position: relative;
    max-width: 960px;
    height: 117px;
    margin: 0 auto;
}
.lp-logo { display: inline-block; line-height: 0; }
.lp-logo img { height: 36px; width: auto; }
.lp-header-inner .lp-logo { position: absolute; left: 3px; top: 57px; }
.lp-nav {
    position: absolute;
    left: 300px;
    top: 67px;
    display: flex;
    gap: 20px;
    font-size: 19px;
    line-height: 24px;
    font-weight: 500;
}
.lp-nav a {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}
.lp-nav a:hover { color: #00ff80; }
.lp-header-inner .lp-btn-sm { position: absolute; right: 0; top: 58px; }
.lp-signin {
    position: absolute;
    right: 246px;
    top: 67px;
    font-size: 19px;
    line-height: 24px;
    font-weight: 500;
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    white-space: nowrap;
}
.lp-signin:hover { color: #00ff80; }

.lp-hero { padding: 0 24px; }
.lp-hero-inner {
    position: relative;
    max-width: 960px;
    height: 583px;
    margin: 0 auto;
}
.lp .lp-hero-art {
    position: absolute;
    left: -20px;
    top: 5px;
    width: 1140px;
    max-width: none;
    height: auto;
    z-index: 3;
    pointer-events: none;
}
.lp-hero-copy {
    position: absolute;
    left: 0;
    top: 205px;
    width: 420px;
    z-index: 2;
}
.lp-statement {
    margin: 0;
    font-weight: 700;
    font-size: 38px;
    line-height: 38px;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.lp-robot { display: inline-block; width: 40px; height: 40px; vertical-align: -9px; margin-right: 4px; }
.lp-bullets {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 19px 30px;
    list-style: none;
    margin: 32px 0 0 2px;
    padding: 0;
    font-family: "TT Bluescreens", "Space Grotesk", sans-serif;
    font-stretch: 82%;
    font-weight: 600;
    font-size: 24.5px;
    line-height: 24px;
    white-space: nowrap;
}
.lp-bullets li { display: flex; align-items: center; gap: 8px; }
.lp-bullets svg { flex: none; width: 24px; height: 24px; fill: #00ff80; }
.lp-hero-copy .lp-btn-lg { margin: 42px 0 0 -8px; }
.lp-note {
    width: 400px;
    margin: 12px 0 0 -8px;
    font-size: 13px;
    line-height: 16px;
    color: #7a7a7a;
    text-align: center;
}
.lp .lp-shot-wrap {
    position: absolute;
    left: 440px;
    top: 165px;
    width: 780px;
    z-index: 1;
    container-type: inline-size;
    border-radius: 24px 24px 0 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 25%, transparent 100%);
    animation: lp-shot-in 500ms var(--ease-out) 150ms both;
}
.lp .lp-shot {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}
/* overlays are placed in container units, so they follow the screenshot at any width (780px = 100cqw) */
.lp .lp-shot-num {
    position: absolute;
    top: 23.3cqw;
    font: 700 2.25cqw/1 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #c2c6c5;
    text-align: right;
}
.lp .lp-shot-num-visitors { right: 42.2cqw; }
.lp .lp-shot-num-pageviews { right: 3.2cqw; }
.lp .lp-shot-wipe {
    position: absolute;
    left: 21.2cqw;
    top: 29.2cqw;
    width: 77.8cqw;
    height: 19.3cqw;
    background: #151a18;
    transform-origin: right center;
    animation: lp-wipe 1400ms var(--ease-in-out) 700ms both;
    pointer-events: none;
}
.lp .lp-shot-ai {
    position: absolute;
    left: 900px;
    top: 440px;
    z-index: 2;
    display: flex;
    gap: 10px;
    width: 300px;
    padding: 10px 12px 11px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #171a1a;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    color: #e8e8e8;
    font: 400 11.5px/1.35 'Space Grotesk', sans-serif;
    animation: lp-ai-in 450ms var(--ease-out) 2300ms both;
}
.lp .lp-shot-ai img { width: 28px; height: 28px; flex: none; }
.lp .lp-shot-ai b { display: block; margin-bottom: 2px; font-size: 12px; color: #00ff80; }
@keyframes lp-shot-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes lp-wipe { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes lp-ai-in { from { opacity: 0; transform: translateY(10px); } }

.lp-platforms { background: #00ff80; }
.lp-platforms img { display: block; width: 1280px; max-width: 100%; height: auto; margin: 0 auto; }

/* Section: Google Analytics problem + Anltcs vs GA4 */
.lp-problem { padding: 70px 24px 0; }
.lp-problem-inner {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
}
.lp-label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #f3e6d8;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.lp-label img { width: 16px; height: auto; }
.lp-problem-title { display: block; width: 710px; height: auto; margin: 29px auto 0; }
.lp-problem-text {
    max-width: 930px;
    margin: 11px 0 0;
    font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 150%;
    font-weight: 400;
    font-size: 20.5px;
    line-height: 26px;
}
.lp-starts {
    margin: 34px 0 0;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
}
.lp-next { margin-top: 6px; }
.lp-steps {
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 13px 0 0;
    padding: 0;
}
.lp-steps li {
    height: 46px;
    padding: 0 26px;
    border-radius: 23px;
    background: linear-gradient(180deg, #262626 0%, #1c1c1c 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    font-size: 20px;
    line-height: 46px;
    white-space: nowrap;
}
.lp-vs {
    position: relative;
    margin-top: -80px;
    padding-top: 202px;
}
.lp .lp-vs-title {
    position: absolute;
    left: 204px;
    top: 109px;
    width: 550px;
    max-width: none;
    height: auto;
    z-index: 1;
    pointer-events: none;
}
.lp-vs-pie {
    position: absolute;
    left: 365px;
    top: 63px;
    width: 693px;
    height: auto;
    z-index: 0;
    pointer-events: none;
}
.lp-vs-table {
    position: relative;
    z-index: 2;
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    margin: 0 -2px;
    table-layout: fixed;
    font-size: 16px;
}
.lp-vs-table th, .lp-vs-table td {
    height: 55px;
    padding: 0 20px;
    text-align: left;
    vertical-align: middle;
    border-radius: 3px;
}
.lp-vs-table th { background: #00ff80; color: #0a0a0a; font-weight: 500; }
.lp-vs-table td {
    background: rgba(24, 24, 24, 0.66);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    color: #f2f2f2;
}
.lp-vs-table td.lp-vs-yes { color: #00ff80; font-weight: 700; }
.lp-vs-table thead th:first-child { border-top-left-radius: 12px; }
.lp-vs-table thead th:last-child { border-top-right-radius: 12px; }
.lp-vs-table tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.lp-vs-table tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; }

/* Section: Follow the money */
.lp-money { padding: 0 24px; }
.lp-money-inner {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
}
.lp .lp-money-title {
    display: block;
    width: 1050px;
    max-width: none;
    height: auto;
    margin: 44px 0 0 -40px;
    pointer-events: none;
}
.lp-money-sub {
    position: relative;
    z-index: 2;
    margin: -5px 0 0;
    font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 150%;
    font-weight: 700;
    font-size: 32.5px;
    line-height: 38px;
}
.lp-money-desc {
    position: relative;
    z-index: 2;
    max-width: 930px;
    margin: 1px 0 0;
    font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 150%;
    font-size: 20.5px;
    line-height: 25.5px;
}
.lp-chips-wrap { position: relative; margin-top: 33px; }
.lp-bill { position: absolute; z-index: 0; height: auto; pointer-events: none; }
.lp-bill-1 { left: -40px; top: 50px; width: 183px; }
.lp-bill-2 { left: 390px; top: 30px; width: 231px; }
.lp-bill-3 { left: 850px; top: 60px; width: 183px; transform: scaleX(-1) rotate(-20deg); }
.lp-chips {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 120px;
    border-radius: 60px;
    background: rgba(30, 30, 30, 0.82);
    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(28px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.01em;
}
.lp-chip img { width: auto; }
.lp-chip svg { width: 32px; height: 32px; }

/* Section: The kit */
.lp-kit { padding: 0 24px; }
.lp-kit-inner {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
}
.lp .lp-kit-head {
    display: block;
    width: 1070px;
    max-width: none;
    height: auto;
    margin: 148px 0 0 -60px;
    pointer-events: none;
}
.lp-kit-list {
    list-style: none;
    margin: 22px 0 0;
    padding: 0 0 0 57px;
}
.lp-kit-item {
    position: relative;
    padding-bottom: 89px;
    margin-bottom: 88px;
    background: url("../img/landing/kit-line.webp") no-repeat left bottom / 838px 2px;
}
.lp-kit-item:last-child { padding-bottom: 0; margin-bottom: 0; background: none; }
.lp-kit-title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 150%;
    font-weight: 800;
    font-size: 69px;
    line-height: 66px;
    text-transform: uppercase;
    color: #fff;
}
.lp-kit-item p {
    position: relative;
    z-index: 1;
    max-width: 875px;
    margin: 20px 0 0;
    font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 150%;
    font-size: 24.5px;
    line-height: 29px;
    color: #fff;
}
.lp-kit-ico { position: absolute; z-index: 2; height: auto; pointer-events: none; }
.lp-kit-ico-molecule { left: 638px; top: -61px; width: 203px; }
.lp-kit-ico-telegram { left: -79px; top: -31px; width: 110px; }
.lp-kit-ico-db { left: 580px; top: -20px; width: 94px; }
.lp-kit-item-mcp .lp-kit-title { padding-left: 15px; }
.lp-kit-dot {
    position: absolute;
    z-index: 3;
    left: 0;
    top: -53px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ff1a1a;
    box-shadow: 0 0 14px rgba(255, 26, 26, 0.6);
}
.lp-kit-ico-dashboard { left: 5px; top: -32px; width: 220px; }
.lp-kit-item-telegram .lp-kit-title { padding-left: 30px; }
.lp-kit-item-dashboard .lp-kit-title { padding-left: 238px; }
.lp-kit-badge {
    position: absolute;
    z-index: 2;
    left: 502px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 18px;
    background: #0e0e0e;
    box-shadow: 0 0 34px 6px rgba(255, 140, 140, 0.22);
}
.lp-kit-badge img { width: 56px; height: auto; }

/* Section: FAQ */
.lp-faq { padding: 0 24px; }
.lp-faq-inner {
    position: relative;
    max-width: 960px;
    min-height: 623px;
    margin: 113px auto 0;
    padding: 125px 0 0 320px;
}
.lp-faq-inner > img { position: absolute; height: auto; pointer-events: none; }
.lp-faq-3d { left: 110px; top: 0; width: 906px; z-index: 0; }
.lp-faq-title { left: 4px; top: 119px; width: 286px; z-index: 1; }
.lp-faq-sub { left: 5px; top: 420px; width: 146px; z-index: 1; }
.lp-faq-list {
    position: relative;
    z-index: 2;
    width: 640px;
    max-width: 100%;
}
.lp-faq-item {
    margin-bottom: 8px;
    border-radius: 16px;
    background: rgba(26, 26, 26, 0.85);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    color: #fff;
}
.lp-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 80px;
    padding: 0 30px;
    font-weight: 500;
    font-size: 17.5px;
    list-style: none;
    cursor: pointer;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary svg {
    flex: none;
    width: 15px;
    height: 10px;
    color: #8a8a8a;
    transition: transform 0.2s ease;
}
.lp-faq-item[open] summary svg { transform: rotate(180deg); }
.lp-faq-item p {
    margin: 0;
    padding: 0 30px 22px;
    font-size: 16px;
    line-height: 1.45;
    color: #b8b8b8;
}

/* Section: Pricing */
.lp-pricing { padding: 97px 24px 0; }
.lp-pricing-inner {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
}
.lp-pricing-title {
    display: block;
    width: 850px;
    max-width: 100%;
    height: auto;
    margin-left: 60px;
}
.lp-plans {
    display: flex;
    gap: 20px;
    margin: 1px 0 0 -40px;
}
.lp-plan {
    position: relative;
    flex: none;
    width: 510px;
    height: 619px;
    padding: 8px 8px 30px;
    border-radius: 24px;
    background: #181818;
    color: #fff;
}
.lp-plan-head {
    position: relative;
    height: 128px;
    padding: 24px 26px 0;
    border-radius: 20px;
    background: #202020;
    overflow: hidden;
}
.lp-plan-premium .lp-plan-head {
    background: radial-gradient(60% 120% at 88% 50%, rgba(255, 120, 60, 0.22) 0%, rgba(255, 120, 60, 0) 100%), #212120;
}
.lp-plan-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e3e3e3;
}
.lp-plan-premium .lp-plan-label { color: #ff9500; }
.lp-plan-label svg { width: 13px; height: 13px; fill: currentColor; }
.lp-plan-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    position: relative;
    z-index: 1;
    margin-top: 4px;
    font-size: 35px;
    line-height: 46px;
    font-weight: 600;
}
.lp-plan-price s { font-size: 21px; font-weight: 500; color: #7d7d7e; }
.lp-plan-price strong { font-size: 36px; font-weight: 700; }
.lp-plan-price span { font-size: 31px; font-weight: 600; }
.lp-plan-save {
    align-self: center;
    margin-left: -50px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #74f2ab;
    color: #0d3d24;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    position: relative;
    top: -22px;
}
.lp-plan-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.lp-plan-note svg { width: 14px; height: 14px; }
.lp-plan-crown {
    position: absolute;
    right: 25px;
    top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fd8a60 0%, #fc6744 100%);
    box-shadow: 0 0 40px 8px rgba(252, 110, 70, 0.45);
}
.lp-plan-crown svg { width: 64px; height: 48px; fill: #fff; }
.lp-plan-ai {
    position: relative;
    height: 100px;
    margin: 13px 12px 0;
    border-radius: 40px;
    background: #262626;
}
.lp-plan-ai-off {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #e8e8e8;
}
.lp-plan-ai-on {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 22px 0;
    border: 2px solid transparent;
    background:
        linear-gradient(#262626, #262626) padding-box,
        conic-gradient(from var(--glow-angle), #5ca5f6 0%, #fbc38c 25%, #a862b9 75%, #5ca5f6 100%) border-box;
    animation: lp-glow-spin 2s linear infinite;
}
.lp-plan-ai-on:hover { animation-play-state: paused; }
.lp-plan-ai-on img { width: 34px; height: 34px; margin-top: 2px; }
.lp-plan-ai-title { font-size: 29px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.lp-plan-ai-text { margin-top: 2px; font-size: 13px; line-height: 16px; color: #9a9a9a; }
.lp-plan-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0 0 0 42px;
}
.lp-plan-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    font-size: 20px;
}
.lp-plan-list img { flex: none; width: 20px; height: 20px; }
.lp-plan-btn {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding: 0 26px;
    border-radius: 16px;
    background: #202020;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.lp-plan-btn:hover { color: #fff; text-decoration: none; filter: brightness(1.12); transform: translateY(-1px); }
.lp-plan-btn svg { width: 24px; height: 24px; }
.lp-plan-btn-primary {
    background:
        radial-gradient(90% 95% at 50% -12%, #ffd9a4 0%, rgba(255, 217, 164, 0) 62%),
        linear-gradient(180deg, #ff6a50 0%, #ff4c3b 55%, #e43a1f 100%);
    box-shadow: 0 0 38px 6px rgba(252, 110, 60, 0.35);
}

/* Footer */
.lp-footer {
    margin-top: 113px;
    padding: 59px 24px 110px;
    background:
        radial-gradient(45% 100% at 8% 0%, rgba(20, 60, 40, 0.5) 0%, rgba(20, 60, 40, 0) 100%),
        linear-gradient(180deg, #0f1f17 0%, #081810 30%, #060c0a 70%, #000 100%);
}
.lp-footer-inner {
    position: relative;
    max-width: 960px;
    height: 62px;
    margin: 0 auto;
}
.lp-footer-inner .lp-logo { position: absolute; left: 3px; top: 0; }
.lp-footer-links {
    position: absolute;
    left: 184px;
    top: 10px;
    display: grid;
    grid-template-columns: 192px auto;
    row-gap: 10px;
    font-size: 18.5px;
    line-height: 22px;
    font-weight: 600;
}
.lp-footer-links a {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}
.lp-footer-links a:nth-child(3) { grid-column: 1; }
.lp-footer-links a:hover { color: #00ff80; }
.lp-footer-social {
    position: absolute;
    left: 561px;
    top: 12px;
    display: flex;
    gap: 23px;
}
.lp-footer-social a { display: block; line-height: 0; color: #fff; }
.lp-footer-social a:hover { color: #00ff80; }
.lp-footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.lp-footer-copy {
    position: absolute;
    left: 666px;
    top: 9px;
    font-size: 18px;
    line-height: 22px;
    color: #7f8a85;
}

/* ---- Responsive: below the design width the absolute desktop layout falls back to normal flow ---- */
@media (max-width: 1199.98px) {
    .lp-header-inner { height: auto; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .lp-header-inner .lp-logo, .lp-nav, .lp-header-inner .lp-btn-sm, .lp-signin { position: static; }
    .lp-signin { margin-left: auto; font-size: 17px; }
    .lp-nav { font-size: 17px; gap: 18px; }

    .lp-hero-inner { height: auto; }
    .lp .lp-hero-art { position: static; display: block; width: 100%; margin: 0 auto; }
    .lp-hero-copy { position: static; width: auto; margin-top: 24px; }
    .lp .lp-shot-wrap { position: relative; left: auto; top: auto; width: 100%; margin-top: 24px; }
    .lp .lp-shot-ai { display: none; }
    .lp .lp-shot { border-radius: 12px; }

    .lp-problem-title { width: 100%; max-width: 710px; }
    .lp-steps { flex-wrap: wrap; }
    .lp-vs { margin-top: 40px; padding-top: 0; }
    .lp .lp-vs-title { position: static; display: block; width: 100%; max-width: 550px; margin: 0 auto 16px; }
    .lp-vs-pie { left: 38%; top: 30%; width: 62%; }
    .lp-vs-table { font-size: 14px; }
    .lp-vs-table th, .lp-vs-table td { padding: 0 12px; }

    .lp .lp-money-title { width: 100%; margin: 48px 0 0; }
    .lp-money-sub { margin-top: 0; }
    .lp-bill { display: none; }
    .lp-chip { height: 96px; font-size: 22px; }

    .lp .lp-kit-head { width: 100%; margin: 96px 0 0; }
    .lp-kit-list { padding-left: 0; }
    .lp-kit-title { font-size: 40px; line-height: 1.05; }
    .lp-kit-item { padding-bottom: 48px; margin-bottom: 56px; background-size: 100% 2px; }
    .lp-kit-item p { font-size: 18px; line-height: 1.4; }
    .lp-kit-ico, .lp-kit-badge, .lp-kit-dot { display: none; }
    .lp-kit-item-telegram .lp-kit-title, .lp-kit-item-dashboard .lp-kit-title, .lp-kit-item-mcp .lp-kit-title { padding-left: 0; }

    .lp-faq-inner { min-height: 0; margin-top: 64px; padding: 0; }
    .lp-faq-inner > img { position: static; display: block; }
    .lp-faq-3d { display: none; }
    .lp-faq-title { width: 180px; }
    .lp-faq-sub { width: 120px; margin: 12px 0 32px; }
    .lp-faq-list { width: 100%; }

    .lp-pricing { padding-top: 64px; }
    .lp-pricing-title { margin: 0 auto; }
    .lp-plans { flex-wrap: wrap; justify-content: center; margin: 40px 0 0; }
    .lp-plan { width: 100%; max-width: 510px; }

    .lp-footer { margin-top: 64px; padding: 40px 24px 60px; }
    .lp-footer-inner { height: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
    .lp-footer-inner .lp-logo, .lp-footer-links, .lp-footer-social, .lp-footer-copy { position: static; }
    .lp-footer-copy { width: 100%; }
}

@media (max-width: 767.98px) {
    .lp-nav { display: none; }
    .lp-statement { font-size: 28px; line-height: 32px; white-space: normal; }
    .lp-robot { width: 32px; height: 32px; vertical-align: -7px; }
    .lp-bullets { grid-template-columns: 1fr; font-size: 22px; }
    .lp-btn-lg, .lp-note { width: 100%; margin-left: 0; }
    .lp-btn-lg { height: 72px; font-size: 24px; }
    .lp-btn-lg .lp-key { width: 28px; height: 23px; }
    .lp-platforms img { width: 900px; max-width: none; margin-left: calc(50% - 450px); }
    .lp-problem-text, .lp-money-desc { font-size: 17px; line-height: 1.4; }
    .lp-starts, .lp-steps li { font-size: 19px; }
    .lp-steps li { height: 40px; line-height: 40px; padding: 0 18px; }
    .lp-vs-pie { display: none; }
    .lp .lp-vs-title { margin-bottom: -40px; }
    .lp-vs { overflow-x: auto; }
    .lp-vs-table { min-width: 560px; }
    .lp-money-sub { font-size: 24px; line-height: 1.2; }
    .lp-chips { grid-template-columns: repeat(2, 1fr); }
    .lp-chip { height: 72px; font-size: 18px; }
    .lp-chip img { height: 26px !important; }
    .lp-kit-title { font-size: 30px; }
    .lp-faq-item summary { height: auto; min-height: 64px; padding: 14px 20px; font-size: 16px; }
    .lp-plan { height: auto; padding-bottom: 122px; }
    .lp-plan-ai-title { font-size: 22px; line-height: 26px; }
    .lp-plan-list { padding-left: 24px; }
    .lp-plan-list li { font-size: 17px; }
    .lp-plan-btn { left: 20px; right: 20px; font-size: 19px; padding: 0 18px; }
}

/* =====================================================================
   Inner pages (legal documents, documentation) — share the landing shell
   ===================================================================== */
.lp-inner-page {
    background:
        radial-gradient(60% 420px at 50% 0, rgba(18, 48, 34, 0.6) 0%, rgba(18, 48, 34, 0) 100%),
        #000;
}
.lp-inner-page .lp-top-inner { background: none; }
.lp-nav a.is-active { color: #00ff80; }
.lp-page {
    width: 100%;
    max-width: 1008px;
    margin: 0 auto;
    padding: 0 24px;
}
.lp-label-left { justify-content: flex-start; }
.lp-label svg { width: 16px; height: 16px; }

/* Page hero (shared by legal + docs) */
.lg-hero { padding-top: 48px; }
.lg-title {
    margin: 22px 0 0;
    font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 60%;
    font-weight: 900;
    font-size: 96px;
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}
.lg-title span, .lg-title em { display: block; font-style: normal; }
.lg-title em { color: #00ff80; }
.lg-intro {
    max-width: 780px;
    margin: 26px 0 0;
    font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 150%;
    font-size: 20.5px;
    line-height: 1.45;
    color: #d8d8d8;
}
.lg-intro a { color: #00ff80; }
.lg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 48px;
    margin: 36px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.lg-meta dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #8a8a8a;
}
.lg-meta dd { margin: 6px 0 0; font-size: 18px; font-weight: 600; color: #fff; }

/* TL;DR card */
.lg-tldr {
    position: relative;
    margin-top: 48px;
    padding: 30px 36px 26px;
    border-radius: 24px;
    border: 2px solid transparent;
    background:
        linear-gradient(#161616, #161616) padding-box,
        linear-gradient(90deg, #b877e0 0%, #5b8cff 45%, #f7c58a 100%) border-box;
}
.lg-tldr-head { display: flex; align-items: center; gap: 14px; font-size: 16px; color: #d0d0d0; }
.lg-tldr-tag {
    padding: 6px 12px;
    border-radius: 999px;
    background: #00ff80;
    color: #0a0a0a;
    font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 120%;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.04em;
}
.lg-tldr-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 32px;
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}
.lg-tldr-list li { display: flex; gap: 12px; font-size: 17px; line-height: 1.45; color: #fff; }
.lg-tldr-list svg { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: #00ff80; }
.lg-tldr-note { margin: 22px 0 0; font-size: 13px; color: #8a8a8a; }

/* Legal body: sticky contents + numbered sections */
.lg-body {
    display: grid;
    grid-template-columns: 236px 1fr;
    gap: 64px;
    margin-top: 72px;
}
.lg-toc { position: sticky; top: 28px; align-self: start; }
.lg-toc-title, .dc-nav-title {
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #8a8a8a;
}
.lg-toc ol { list-style: none; margin: 0; padding: 0; }
.lg-toc li + li { margin-top: 10px; }
.lg-toc a {
    display: flex;
    gap: 10px;
    font-size: 15px;
    line-height: 1.3;
    color: #b8b8b8;
    text-decoration: none;
}
.lg-toc a span {
    flex: none;
    width: 22px;
    font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 120%;
    font-size: 11px;
    line-height: 1.7;
    color: #00ff80;
}
.lg-toc a:hover { color: #fff; }
.lg-section {
    position: relative;
    padding-bottom: 44px;
    margin-bottom: 44px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    scroll-margin-top: 32px;
}
.lg-num {
    font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 60%;
    font-weight: 900;
    font-size: 56px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px #00ff80;
    opacity: 0.85;
}
.lg-section h2 {
    margin: 12px 0 0;
    font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 150%;
    font-weight: 800;
    font-size: 26px;
    line-height: 1.2;
    color: #fff;
}
.lg-prose { margin-top: 18px; }
.lg-prose p, .lg-prose li, .lg-prose td, .lg-prose th { font-size: 17px; line-height: 1.6; color: #d6d6d6; }
.lg-prose p { margin: 0 0 16px; }
.lg-prose p:last-child { margin-bottom: 0; }
.lg-prose strong { color: #fff; font-weight: 600; }
.lg-prose a { color: #00ff80; text-decoration: underline; text-underline-offset: 3px; }
.lg-prose a:hover { color: #fff; }
.lg-prose ul { margin: 0 0 16px; padding-left: 22px; }
.lg-prose li { margin-bottom: 8px; }
.lg-prose li::marker { color: #00ff80; }
.lg-prose code, .dc-param code, .dc-endpoint-head code {
    padding: 2px 7px;
    border-radius: 6px;
    background: #1e1e1e;
    font-family: "JetBrains Mono", Menlo, monospace;
    font-size: 0.85em;
    color: #fff;
}
.lg-prose table { width: 100%; margin: 4px 0 16px; border-collapse: collapse; }
.lg-prose th { text-align: left; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a8a; padding: 0 12px 10px 0; }
.lg-prose td { padding: 12px 12px 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); vertical-align: top; font-size: 15px; }
.lg-outro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    border-radius: 24px;
    background: #141414;
}
.lg-outro-title { font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 150%; font-weight: 700; font-size: 20px; }
.lg-outro p { margin: 8px 0 0; font-size: 15px; color: #9a9a9a; }
.lg-outro .lp-btn-sm { width: auto; padding: 0 28px; flex: none; }
.lg-related { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.lg-related span { margin-right: 6px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #8a8a8a; }
.lg-related a, .dc-chips code {
    padding: 8px 14px;
    border-radius: 999px;
    background: #1a1a1a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    font-size: 14px;
    color: #fff;
    text-decoration: none;
}
.lg-related a:hover { background: #00ff80; color: #0a0a0a; }

/* Documentation */
.dc-hero { padding-top: 48px; }
.dc-title { font-size: 64px; }
.dc-body {
    display: grid;
    grid-template-columns: 236px 1fr;
    gap: 56px;
    margin-top: 56px;
}
.dc-nav { position: sticky; top: 28px; align-self: start; }
.dc-nav-group + .dc-nav-group { margin-top: 20px; }
.dc-nav-head { display: block; font-size: 16px; font-weight: 600; color: #fff; text-decoration: none; }
.dc-nav-group.is-active .dc-nav-head { color: #00ff80; }
.dc-nav ul { list-style: none; margin: 8px 0 0; padding: 0 0 0 12px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.dc-nav li + li { margin-top: 6px; }
.dc-nav li a { font-family: "JetBrains Mono", Menlo, monospace; font-size: 12.5px; color: #9a9a9a; text-decoration: none; }
.dc-nav li a:hover { color: #fff; }
.dc-nav-foot { margin-top: 28px; padding: 16px; border-radius: 14px; background: #141414; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #8a8a8a; }
.dc-nav-foot code { display: block; margin-top: 8px; font-family: "JetBrains Mono", Menlo, monospace; font-size: 12px; letter-spacing: 0; text-transform: none; color: #fff; word-break: break-all; }
.dc-nav-key { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #00ff80; text-decoration: none; }
.dc-content { min-width: 0; }

.dc-steps, .dc-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dc-step, .dc-next-card {
    display: block;
    padding: 24px;
    border-radius: 20px;
    background: #141414;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    color: #fff;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dc-step:hover, .dc-next-card:hover { color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(0, 255, 128, 0.6); }
.dc-step-num, .dc-next-label { display: block; font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 120%; font-weight: 800; font-size: 28px; color: #00ff80; }
.dc-next-label { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #8a8a8a; font-family: "Space Grotesk", sans-serif; }
.dc-step-title, .dc-next-title { display: block; margin-top: 12px; font-size: 18px; font-weight: 600; }
.dc-next-title { font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 150%; font-weight: 800; font-size: 22px; margin-top: 8px; }
.dc-step-text, .dc-next-text { display: block; margin-top: 8px; font-size: 14px; line-height: 1.45; color: #9a9a9a; }
.dc-next { margin-top: 56px; }

.dc-endpoint { margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.08); scroll-margin-top: 32px; }
.dc-steps + .dc-endpoint { margin-top: 56px; }
.dc-content > .dc-endpoint:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dc-endpoint-head h2 { margin: 0; font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 150%; font-weight: 800; font-size: 28px; line-height: 1.2; }
.dc-endpoint-head p { max-width: 760px; margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: #b8b8b8; }
.dc-endpoint-head a { color: #00ff80; }
.dc-url {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #141414;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    overflow-x: auto;
}
.dc-url code { font-family: "JetBrains Mono", Menlo, monospace; font-size: 14px; color: #fff; white-space: nowrap; }
.dc-method {
    flex: none;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #0a0a0a;
    background: #b8b8b8;
}
.dc-method-get { background: #00ff80; }
.dc-method-post { background: #ff9500; }
.dc-method-put, .dc-method-patch { background: #5b8cff; color: #fff; }
.dc-method-delete { background: #ff4c3b; color: #fff; }
.dc-method-base { background: #2a2a2a; color: #fff; }
.dc-var { color: #00ff80; }
.dc-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.dc-grid-2 { grid-template-columns: 1fr 1fr; }
.dc-col { min-width: 0; }
.dc-block {
    margin-top: 12px;
    border-radius: 16px;
    background: #0f0f0f;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.dc-grid .dc-block { margin-top: 0; }
.dc-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 16px;
    background: #161616;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8a8a8a;
}
.dc-block pre {
    margin: 0;
    padding: 16px;
    font-family: "JetBrains Mono", Menlo, monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #e8e8e8;
    white-space: pre;
    overflow-x: auto;
}
.dc-copy {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #b8b8b8;
    cursor: pointer;
}
.dc-copy:hover { color: #fff; }
.dc-copy-done { display: none; color: #00ff80; }
.dc-copy.is-copied .dc-copy-label { display: none; }
.dc-copy.is-copied .dc-copy-done { display: inline; }
.dc-status { font-family: "JetBrains Mono", Menlo, monospace; letter-spacing: 0; text-transform: none; color: #00ff80; }
.dc-status-err { color: #ff6a50; }
.dc-params { margin-top: 20px; }
.dc-params-head, .dc-param { display: grid; grid-template-columns: 190px 190px 1fr; gap: 16px; align-items: start; }
.dc-params-head { padding-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #8a8a8a; }
.dc-param { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 15px; line-height: 1.5; color: #d0d0d0; }
.dc-param > div:first-child code { color: #00ff80; background: none; padding: 0; font-size: 14px; }
.dc-param .font-weight-medium { color: #fff; }
.dc-tag {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: #1e1e1e;
    font-size: 11px;
    font-weight: 600;
    color: #b8b8b8;
}
.dc-tag-required { background: rgba(255, 76, 59, 0.18); color: #ff8a70; }
.dc-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.dc-note { padding: 16px; border-radius: 14px; background: #141414; font-size: 13px; line-height: 1.45; color: #9a9a9a; }
.dc-note strong { display: block; margin-bottom: 6px; font-size: 14px; color: #fff; }
.dc-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-top: 20px; }
.dc-codes > div { display: flex; gap: 14px; align-items: baseline; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 15px; color: #d0d0d0; }
.dc-codes code { font-family: "JetBrains Mono", Menlo, monospace; font-size: 14px; font-weight: 600; color: #00ff80; }
.dc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.dc-chips code { font-family: "JetBrains Mono", Menlo, monospace; font-size: 13px; }

/* Footer with five links needs three rows */
.lp-footer-inner { height: 96px; }

@media (max-width: 991.98px) {
    .lg-title { font-size: 44px; }
    .dc-title { font-size: 40px; }
    .lg-intro { font-size: 17px; }
    .lg-tldr { padding: 22px 22px 20px; }
    .lg-tldr-list { grid-template-columns: 1fr; }
    .lg-body, .dc-body { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
    .lg-toc, .dc-nav { position: static; }
    .lg-toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
    .lg-toc li + li { margin-top: 0; }
    .lg-num { font-size: 40px; }
    .lg-section h2 { font-size: 22px; }
    .lg-outro { flex-direction: column; align-items: flex-start; }
    .dc-steps, .dc-next, .dc-notes, .dc-grid-2, .dc-codes { grid-template-columns: 1fr; }
    .dc-params-head { display: none; }
    .dc-param { grid-template-columns: 1fr; gap: 6px; }
    .dc-endpoint-head h2 { font-size: 22px; }
}

/* Error pages */
.er {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 400px;
    align-items: center;
    gap: 48px;
    min-height: 560px;
    padding-top: 40px;
    padding-bottom: 40px;
}
.er-copy { position: relative; z-index: 1; }
.er-code {
    margin-top: 18px;
    font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 60%;
    font-weight: 900;
    font-size: 180px;
    line-height: 0.9;
    letter-spacing: -0.03em;
    background: linear-gradient(180deg, #00ff80 0%, #16c46d 55%, #0a3d24 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.er-title {
    margin: 22px 0 0;
    font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 60%;
    font-weight: 900;
    font-size: 46px;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
}
.er-text { max-width: 540px; margin: 16px 0 0; font-size: 19px; line-height: 1.5; color: #d0d0d0; }
.er-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 32px; }
.er-actions .lp-btn-sm { width: auto; padding: 0 28px; }
.er-link { font-size: 17px; font-weight: 600; color: #fff; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.er-link:hover { color: #00ff80; text-decoration: none; }
.er-ask {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 560px;
    margin-top: 40px;
    padding: 14px 18px;
    border-radius: 16px;
    background: #141414;
    font-size: 14px;
    line-height: 1.45;
    color: #9a9a9a;
}
.er-ask img { flex: none; width: 36px; height: 36px; }
.er-art { position: relative; display: flex; justify-content: center; pointer-events: none; }
.er-art img { width: 100%; max-width: 420px; height: auto; filter: drop-shadow(0 0 60px rgba(0, 255, 128, 0.18)); }
.er-art-faq-3d img { max-width: 480px; }
.er-art-problem-pie img { max-width: 380px; filter: drop-shadow(0 0 60px rgba(255, 90, 40, 0.25)); }
.er-art-kit-molecule img { max-width: 340px; filter: drop-shadow(0 0 60px rgba(255, 60, 40, 0.25)); }

@media (max-width: 991.98px) {
    .er { grid-template-columns: 1fr; min-height: 0; }
    .er-art { order: -1; }
    .er-art img { max-width: 240px !important; }
    .er-code { font-size: 104px; }
    .er-title { font-size: 26px; }
}

/* Contact page */
.ct {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
    margin-top: 48px;
}
.ct-form {
    padding: 36px 40px;
    border-radius: 24px;
    background: #111313;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px rgba(0, 0, 0, 0.45);
}
.ct-form .form-control.ct-textarea { height: auto; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.ct-form .btn-primary { margin-top: 6px; }
.ct-form .alert {
    margin-bottom: 20px;
    padding: 14px 18px;
    border: 0;
    border-radius: 12px;
    background: rgba(0, 255, 128, 0.12);
    color: #bdf7d8;
    font-size: 15px;
}
.ct-form .alert-danger { background: rgba(255, 92, 92, 0.14); color: #ffb3b3; }
.ct-form .alert .close { color: inherit; opacity: 0.7; }
.ct-fineprint { margin: 16px 0 0; font-size: 13px; color: #8a8a8a; }
.ct-fineprint a { color: #00ff80; }
.ct-empty { text-align: center; padding: 24px 0 8px; }
.ct-empty img { width: 64px; height: 64px; }
.ct-empty-title { margin-top: 18px; font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 150%; font-weight: 700; font-size: 20px; }
.ct-empty p { max-width: 380px; margin: 10px auto 0; font-size: 15px; line-height: 1.5; color: #9a9a9a; }
.ct-side-title { margin-bottom: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #8a8a8a; }
.ct-channels { display: grid; gap: 8px; }
.ct-channel {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #141414;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    color: #fff;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
a.ct-channel:hover { color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(0, 255, 128, 0.6); }
.ct-channel-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(0, 255, 128, 0.12);
    color: #00ff80;
}
.ct-channel-icon svg { width: 20px; height: 20px; }
.ct-channel-body { display: flex; flex-direction: column; min-width: 0; }
.ct-channel-title { font-size: 15px; font-weight: 600; }
.ct-channel-text { font-size: 13px; color: #9a9a9a; overflow-wrap: anywhere; }
.ct-expect { margin-top: 32px; }
.ct-expect ul { list-style: none; margin: 0; padding: 0; }
.ct-expect li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 14px; line-height: 1.45; color: #d0d0d0; }
.ct-expect li span { flex: none; font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 120%; font-size: 11px; line-height: 1.8; color: #00ff80; }

@media (max-width: 991.98px) {
    .ct { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
    .ct-form { padding: 24px 20px; }
}

/* Pricing page (plans from the database) */
.pr { margin-top: 44px; }
.pr .alert { margin-bottom: 20px; padding: 14px 18px; border: 0; border-radius: 12px; background: rgba(0, 255, 128, 0.12); color: #bdf7d8; }
.pr .alert-danger { background: rgba(255, 92, 92, 0.14); color: #ffb3b3; }
.pr-toggle {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: #141414;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.pr-toggle-btn {
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: #b8b8b8;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.pr-toggle-btn.is-active { background: #00ff80; color: #0a0a0a; }
.pr-plans { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 1040px; max-width: none; margin: 28px 0 0 -40px; }
.pr-plans .lp-plan { height: auto; padding-bottom: 122px; }
.pr-plans .lp-plan-price.plan-month, .pr-plans .lp-plan-price.plan-year { display: none; }
.pr-plans .lp-plan-price.d-block { display: flex !important; }
.pr-plans .lp-plan-btn.plan-month, .pr-plans .lp-plan-btn.plan-year { display: none; }
.pr-plans .lp-plan-btn.d-block { display: flex !important; }
.lp-plan-btn.is-disabled { color: #8a8a8a; cursor: default; justify-content: center; }
.pr-guarantee {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 720px;
    margin: 28px auto 0;
    padding: 16px 20px;
    border-radius: 16px;
    background: #141414;
    font-size: 14px;
    line-height: 1.45;
    color: #9a9a9a;
}
.pr-guarantee strong { display: block; margin-bottom: 2px; font-size: 15px; color: #fff; }
.pr-guarantee a { color: #00ff80; }
.pr-faq { margin-top: 80px; }
.pr-h2 {
    margin: 0 0 24px;
    font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 60%;
    font-weight: 900;
    font-size: 56px;
    line-height: 1.1;
    text-transform: uppercase;
}
.pr-faq-list { width: 100%; max-width: 760px; }
.pr-outro { max-width: 760px; margin-top: 40px; }

/* CMS pages */
.pg-body { margin-top: 40px; }
.pg-prose { max-width: 760px; }
.pg-prose h2, .pg-prose h3 { margin: 32px 0 12px; font-family: "TT Bluescreens", "Space Grotesk", sans-serif; font-stretch: 150%; font-weight: 800; color: #fff; }
.pg-prose h2 { font-size: 26px; }
.pg-prose h3 { font-size: 20px; }
.pg-prose img { max-width: 100%; height: auto; border-radius: 16px; }

@media (max-width: 1199.98px) {
    .pr-plans { width: 100%; margin-left: 0; }
}
@media (max-width: 991.98px) {
    .pr-plans .lp-plan { width: 100%; max-width: 510px; }
    .pr-h2 { font-size: 24px; }
}


/* =========================================================
   Motion layer (animations audit, Oct 2026): native CSS + a 2 KB observer script.
   Only transform/opacity are animated; everything respects prefers-reduced-motion.
   ========================================================= */
:root {
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 450ms;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --lp-spring: linear(0, .255, .4449, .6018, .7355, .8513, .9525, 1.0413, 1.1195, 1.1881, 1.2484, 1.3011, 1.3468, 1.3862, 1.4198, 1.4479, 1.4709, 1.4892, 1.503, 1.5126, 1.5182, 1.52, 1.5189, 1.5156, 1.5101, 1.5025, 1.4929, 1.4817, 1.469, 1.4552, 1.4406, 1.4254, 1.4099, 1.3943, 1.3787, 1.3633, 1.3481, 1.3333, 1.3188, 1.3048, 1.2912, 1.278, 1.2653, 1.253, 1.2412, 1.2298, 1.2188, 1.2083, 1.1981, 1.1883, 1.1789, 1.1698, 1.1611, 1.1528, 1.1447, 1.137, 1.1296, 1.1225, 1.1156, 1.1091, 1.1028, 1.0967, 1.0909, 1.0854, 1.0801, 1.075, 1.0701, 1.0654, 1.061, 1.0567, 1.0526, 1.0488, 1.0451, 1.0415, 1.0382, 1.035, 1.032, 1.0292, 1.0265, 1.0239, 1.0215, 1.0193, 1.0172, 1.0152, 1.0134, 1.0117, 1.0101, 1.0086, 1.0073, 1.0061, 1.005, 1.004, 1.0032, 1.0024, 1.0018, 1.0012, 1.0008, 1.0004, 1.0002, 1, 1);
}
@property --glow-angle { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@keyframes lp-glow-spin { from { --glow-angle: 0deg; } to { --glow-angle: 360deg; } }

/* reveal on scroll: hidden only when the script is there to show it again */
.js .lp-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js .lp-reveal.is-visible { opacity: 1; transform: none; }

/* buttons: lift on hover, press on click */
.lp-btn, .lp-plan-btn { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.lp-btn-sm:hover, .lp-btn-sm:focus { transform: translateY(-1px); }
.lp-btn-sm:active, .lp-plan-btn:active { transform: scale(0.98); transition-duration: 100ms; }
.lp-plan-btn:hover { transform: translateY(-1px); }

/* spotlight that follows the pointer (Kit rows and plan cards) */
.lp-spot { position: relative; isolation: isolate; }
.lp-spot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(360px circle at var(--x, 50%) var(--y, 50%), rgba(0, 255, 128, 0.10), transparent 60%);
    opacity: 0;
    transition: opacity 300ms var(--ease-out);
}
.lp-spot:hover::before { opacity: 1; }
.lp-plan.lp-spot { transition: transform var(--dur-fast) var(--ease-out); }
.lp-plan.lp-spot:hover { transform: translateY(-2px); }

/* premium plan: slowly rotating gradient rim; the discount badge shimmers once */
.lp-plan-premium {
    border: 1px solid transparent;
    background:
        linear-gradient(#181818, #181818) padding-box,
        conic-gradient(from var(--glow-angle), rgba(92, 165, 246, .9), rgba(251, 195, 140, .9), rgba(168, 98, 185, .9), rgba(92, 165, 246, .9)) border-box;
    animation: lp-glow-spin 6s linear infinite;
}
.lp-plan-premium:hover { animation-play-state: paused; }
.lp-plan-save { position: relative; overflow: hidden; }
.lp-plan-save::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
    animation: lp-shimmer 1.2s var(--ease-out) 1.2s 1 both;
}
@keyframes lp-shimmer { to { transform: translateX(120%); } }

/* FAQ: answers unfold instead of jumping */
.lp-faq-item::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip;
    transition: content-visibility var(--dur-base) allow-discrete, opacity var(--dur-base) var(--ease-out), block-size var(--dur-base) var(--ease-out);
}
.lp-faq-item[open]::details-content { opacity: 1; block-size: auto; }
@supports (interpolate-size: allow-keywords) { .lp-faq-item { interpolate-size: allow-keywords; } }

/* cross-fade between landing pages; the header stays put */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
    .lp-header { view-transition-name: lp-header; }
}

@media (prefers-reduced-motion: reduce) {
    .lp *, .lp *::before, .lp *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .lp-plan-ai-on, .lp-plan-premium { animation: none; }
    .lp .lp-shot-wipe { display: none; }
}