/* ══════════════════════════════════════════════════════════════════
   LANDING — "BULL & BEAR", dark glassmorphism

   Built from the approved mockup (mockup/landing-alpai-v4, gitignored):
   a crystal bull and bear face off over a candlestick field, and every
   panel below them is frosted glass with something coloured behind it
   (coins, glows, candles) so the blur has something to show.

   Every figure on the page is read from the platform: plans, rates,
   cadence, coins, commission levels and the books. The art never claims
   more than the site does.

   Page
     .topbar / .nav-wrap   server clock strip, sticky glass header, <dialog> sheet
     .hero                 bull & bear, candles, trend line; .facts-band under it
     main.main             the sections, in the order the Page row gives
     .ft                   footer
   Components
     .glass                frosted pane (noise + gradient + backdrop blur)
     .reveal               slides in once scrolled to (gated on html.js)
     .loop.paused          a section scrolled away: its loops stop

   Motion is transform/opacity only (plus one-off stroke draws). Under
   prefers-reduced-motion every loop stops and the page is still.
   ══════════════════════════════════════════════════════════════════ */

:root {
    color-scheme: dark;

    --bg: #050806;
    --bg-2: #08100B;
    --ink: #F1F6F3;
    --ink-2: #C0CCC5;
    --muted: #86948C;
    --green: #3BF07A;
    --green-d: #16B455;
    --lime: #C8FF3D;
    --red: #FF4A57;
    --red-d: #C42536;
    --on-green: #03170A;
    --stroke: rgba(255, 255, 255, .12);
    --stroke-2: rgba(255, 255, 255, .22);
    --wrap: 1200px;
    --f-head: Sora, system-ui, sans-serif;
    --f-body: Manrope, system-ui, sans-serif;
    --f-serif: 'Playfair Display', Georgia, serif;

    /* the names telegram.css and toast.css read */
    --brand: var(--green);
    --on-brand: var(--on-green);
    --brand-wash: color-mix(in srgb, var(--green) 14%, transparent);
    --glow: color-mix(in srgb, var(--green) 40%, transparent);
    --down: var(--red);
    --t3: var(--muted);
    --surface: #0E1511;
    --hairline: var(--stroke);
    --sans: var(--f-body);
    --sh-2: 0 20px 44px -14px rgba(0, 0, 0, .7);
    --scrim: rgba(0, 0, 0, .6);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mark { width: 36px; height: 36px; flex: none; }
.g { background: linear-gradient(90deg, var(--green), var(--lime)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.smp { display: inline-block; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--muted); font: 600 12px var(--f-body); vertical-align: middle; }

/* ══ GLASS ═════════════════════════════════════════════════════════ */
.glass {
    background:
        url(../images/landing/noise.webp),
        linear-gradient(150deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, .05));
    border: 1px solid var(--stroke);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 30px 60px -32px rgba(0, 0, 0, .75);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background-color: rgba(14, 20, 17, .92); }
}

/* ══ BUTTONS ═══════════════════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
    font: 700 15px var(--f-body); color: var(--ink); text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: transform .2s, box-shadow .2s, background-color .2s, color .2s;
}
.btn .ic { width: 18px; height: 18px; }
.btn-green {
    background: linear-gradient(135deg, var(--lime), var(--green) 62%); color: var(--on-green);
    box-shadow: 0 10px 30px -10px rgba(59, 240, 122, .65), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn-green:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(59, 240, 122, .8), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn-glass { background: rgba(255, 255, 255, .06); border-color: var(--stroke-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgba(255, 255, 255, .12); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.btn-white { background: #fff; color: #06140B; }
.btn-white:hover { transform: translateY(-1px); }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 13px; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* ══ TOP BAR + HEADER ══════════════════════════════════════════════ */
.topbar { position: relative; z-index: 51; font-size: 13px; color: var(--muted); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 38px; }
.tb-r { display: flex; align-items: center; gap: 18px; }
.srv { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.srv time { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; text-decoration: none; white-space: nowrap; }
.tb-link:hover { color: var(--green); }
.tb-link .ic { width: 15px; height: 15px; }
.live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: ping 2s ease-out infinite; }

.lang-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; background: none; color: var(--ink-2); font-weight: 700; font-size: 13px; cursor: pointer; }
.lang-btn:hover { color: var(--green); }
.lang-menu {
    position: fixed; inset: 46px 14px auto auto; margin: 0;
    width: min(280px, calc(100vw - 28px)); max-height: calc(100vh - 60px);
    padding: 8px; overflow: auto;
    border: 1px solid var(--stroke); border-radius: 18px;
    background: rgba(10, 16, 12, .94); color: var(--ink); box-shadow: var(--sh-2);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.lang-menu:popover-open { animation: drop .22s cubic-bezier(.2, .7, .2, 1); }
.menu-link { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 12px; color: var(--ink-2); text-decoration: none; font-weight: 600; }
.menu-link:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.flag { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; }
.lang-link[aria-current] { color: var(--green); background: var(--brand-wash); }
@supports not selector(:popover-open) { [popovertarget="langs"], #langs { display: none; } }

.nav-wrap { position: sticky; top: 10px; z-index: 50; margin-top: 10px; }
.nav { display: flex; align-items: center; gap: 20px; height: 64px; padding: 0 10px 0 16px; border-radius: 999px; background-color: rgba(5, 8, 6, .35); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 800 20px var(--f-head); letter-spacing: .05em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.links { display: flex; gap: 2px; margin: 0 auto; padding: 0; list-style: none; }
.links a { display: block; padding: 10px 14px; border-radius: 999px; color: var(--ink-2); font-weight: 600; font-size: 15px; text-decoration: none; transition: color .2s, background-color .2s; }
.links a:hover { color: var(--ink); background: rgba(255, 255, 255, .07); }
.nav-cta { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.burger { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--stroke-2); background: rgba(255, 255, 255, .06); color: var(--ink); cursor: pointer; }
.burger .ic { width: 22px; height: 22px; }

.sheet { margin: auto auto 0; width: 100%; max-width: 520px; max-height: none; padding: 18px 20px 28px; border: 1px solid var(--stroke); border-bottom: 0; border-radius: 26px 26px 0 0;
    color: var(--ink); background: rgba(8, 14, 10, .92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.sheet[open] { animation: sheet-up .32s cubic-bezier(.2, .8, .2, 1); }
.sheet::backdrop { background: rgba(0, 0, 0, .55); }
.sheet-hd { display: flex; justify-content: space-between; align-items: center; }
.sheet .burger { display: grid; }
.sheet ul { list-style: none; margin: 10px 0 22px; padding: 0; }
.sheet li a { display: block; padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); font: 700 17px var(--f-head); text-decoration: none; }
.sheet-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }

/* ══ HERO ══════════════════════════════════════════════════════════ */
.hero { position: relative; isolation: isolate; overflow: hidden; margin-top: -122px; padding: 172px 0 0; min-height: 880px; }
.hero-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 82%, var(--bg)), url(../images/landing/hero-glow.webp) center bottom / cover no-repeat, var(--bg); }
.candles { position: absolute; left: 0; top: 130px; width: 100%; height: 520px; opacity: .5;
    -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 62%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 62%, transparent); }
.cd { transform-box: fill-box; transform-origin: 50% 100%; animation: grow .9s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 28ms); }
.cd line { stroke-width: 1.5; }
.cd.u rect, .cd.u line { fill: var(--green); stroke: var(--green); }
.cd.d rect, .cd.d line { fill: var(--red); stroke: var(--red); }
.cd.u rect { fill-opacity: .55; }
.cd.d rect { fill-opacity: .45; }
.cd.live rect { transform-box: fill-box; transform-origin: 50% 100%; animation: tick 1.8s ease-in-out infinite alternate; }

.floor { position: absolute; left: -20%; right: -20%; bottom: 0; height: 280px; overflow: hidden; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 92%); mask-image: linear-gradient(to top, #000 15%, transparent 92%); }
.floor::before { content: ''; position: absolute; inset: -44px 0 0; animation: floor 3.2s linear infinite;
    background: linear-gradient(rgba(200, 255, 61, .16) 1px, transparent 1px) 0 0 / 64px 44px, linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 64px 44px; }

.trend { position: absolute; left: 27%; right: 23%; bottom: 96px; height: 200px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.trend svg { width: 100%; height: 100%; overflow: visible; }
.tr-line { fill: none; stroke: rgba(255, 255, 255, .38); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; animation: draw 2.4s .5s ease-out backwards; }
.tdot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px var(--lime); animation: pop .4s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(.6s + var(--i) * .16s); }
.tdot.gr { background: var(--green); box-shadow: 0 0 14px var(--green); }
.tdot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: halo 2.6s ease-out infinite; animation-delay: calc(var(--i) * .35s); }

.hero-in { display: flex; flex-direction: column; align-items: center; padding-bottom: 290px; text-align: center; }  /* room for the animals, however long the copy runs */
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 999px; font: italic 700 15px var(--f-serif); color: var(--ink-2); }
.hero h1 { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 22px 0 18px; }
.h1-a { font: italic 700 clamp(34px, 4.6vw, 64px)/1.08 var(--f-serif); letter-spacing: -.005em; text-wrap: balance; }
.h1-a em { background: linear-gradient(90deg, #FF8A4A, var(--red)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.h1-b { font: 800 clamp(44px, 6.2vw, 84px)/1 var(--f-head); text-transform: uppercase; letter-spacing: .01em; }
.h1-b i { font-style: normal; }
.bull-t { color: var(--green); text-shadow: 0 0 42px rgba(59, 240, 122, .5); }
.bear-t { color: var(--red); text-shadow: 0 0 42px rgba(255, 74, 87, .5); }
.lede { max-width: 560px; margin-bottom: 30px; color: var(--ink-2); font-size: 17px; text-wrap: pretty; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.beasts { position: absolute; left: 0; right: 0; bottom: 0; height: 0; margin: 0; pointer-events: none; }
.beast { position: absolute; bottom: 64px; }
.beast.bull { left: max(6px, calc(50% - 760px)); width: clamp(330px, 35vw, 540px); --glow: rgba(59, 240, 122, .2); }
.beast.bear { right: max(10px, calc(50% - 700px)); width: clamp(190px, 19vw, 280px); --glow: rgba(255, 74, 87, .2); }
.art { position: relative; }
.art img { position: relative; width: 100%; height: auto;
    filter: drop-shadow(0 0 10px var(--glow)); -webkit-box-reflect: below 2px linear-gradient(transparent 64%, rgba(255, 255, 255, .2)); }
.aura { position: absolute; inset: 8% 0 -4%; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); animation: aura 4s ease-in-out infinite alternate; }
.sheen { position: absolute; inset: 0; overflow: hidden; mix-blend-mode: plus-lighter;
    -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
.sheen i { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: translateX(-120%) skewX(-14deg); animation: sheen 7s ease-in-out infinite; }
.bear .sheen i { animation-delay: 3.5s; }
.chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; animation: bob 5s ease-in-out infinite; }
.chip b { font: 700 15px var(--f-head); }
.chip .ic { width: 18px; height: 18px; }
.bull .chip { top: -4%; left: 46%; }
.bull .chip b, .bull .chip .ic { color: var(--green); }
.bear .chip { top: -13%; right: 0; animation-delay: -2.5s; }
.bear .chip b, .bear .chip .ic { color: var(--lime); }

/* ══ FACTS BAND ════════════════════════════════════════════════════ */
.facts-band { position: relative; z-index: 2; margin-top: -50px; }
.facts { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); margin: 0; padding: 6px; border-radius: 24px; }
.facts > div { display: flex; align-items: center; gap: 14px; padding: 16px 20px; min-width: 0; }
.facts > div + div { border-left: 1px solid rgba(255, 255, 255, .08); }
.fi { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; color: var(--green); background: rgba(59, 240, 122, .12); border: 1px solid rgba(59, 240, 122, .28); }
.facts dt { color: var(--muted); font-size: 13px; }
.facts dd { margin: 0; font: 700 21px/1.25 var(--f-head); }

/* ══ COINS (we accept) ═════════════════════════════════════════════ */
.coins { padding-top: 36px; }
.coins-in { display: flex; align-items: center; gap: 20px; }
.coins-lbl { flex: none; font: 700 12px var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.marquee { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.track { display: flex; width: max-content; margin: 0; padding: 4px 0; list-style: none; animation: marq 46s linear infinite; }
.track li { display: flex; align-items: center; gap: 10px; margin-right: 12px; padding: 7px 16px 7px 7px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); white-space: nowrap; font-size: 15px; }
.track b { font-weight: 700; }
.track small { color: var(--muted); font-size: 13px; }
.ci { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; overflow: hidden; border-radius: 50%; background: var(--c, #3A4A40); color: #fff; font: normal 700 15px/1 var(--f-head);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 3px color-mix(in srgb, var(--c, #3A4A40) 22%, transparent); }
.ci img { width: 100%; height: 100%; object-fit: cover; }

/* ══ SECTIONS ══════════════════════════════════════════════════════ */
.sec { position: relative; overflow-x: clip; padding: clamp(72px, 8vw, 108px) 0; }
.sec > .wrap, .cards3, .tx2, .faq-l { position: relative; }

/* 3D coins floating behind the glass, so the blur has something to show */
.coin { position: absolute; z-index: 0; width: var(--s, 110px); height: auto; pointer-events: none;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55)); animation: float 9s ease-in-out infinite; }
.cards3 > article, .steps, .calc, .tx, .help { position: relative; z-index: 1; }
.tx2 > .coin { top: 38%; }
.sec h2 { font: 800 clamp(28px, 3.3vw, 44px)/1.1 var(--f-head); text-transform: uppercase; letter-spacing: -.005em; }
.sec-head { max-width: 680px; margin: 0 auto 52px; text-align: center; }
.sec-head h2 { margin-bottom: 14px; }
.sec-head p, .split-head p { color: var(--ink-2); }
.split-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 60px; }

/* features: chamfered glass cards */
.feats-sec { background:
    radial-gradient(520px 300px at 18% 62%, rgba(255, 74, 87, .12), transparent 70%),
    radial-gradient(520px 320px at 50% 58%, rgba(59, 240, 122, .14), transparent 70%),
    radial-gradient(520px 300px at 82% 62%, rgba(255, 74, 87, .12), transparent 70%); }
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.fcard { --ac: var(--red); --ac-a: rgba(255, 74, 87, .16); position: relative; padding: 46px 30px 42px; text-align: center;
    clip-path: polygon(6% 0, 94% 0, 100% 8%, 100% 92%, 94% 100%, 6% 100%, 0 92%, 0 8%);
    background: url(../images/landing/noise.webp), linear-gradient(180deg, var(--ac-a), rgba(255, 255, 255, .02) 65%), rgba(255, 255, 255, .03);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: transform .3s; }
.fcard.green { --ac: var(--green); --ac-a: rgba(59, 240, 122, .18); }
.fcard::before, .fcard::after { content: ''; position: absolute; left: 50%; width: 72px; height: 4px; margin-left: -36px; background: var(--ac); box-shadow: 0 0 18px var(--ac); }
.fcard::before { top: 0; border-radius: 0 0 4px 4px; }
.fcard::after { bottom: 0; border-radius: 4px 4px 0 0; }
.fcard:hover { transform: translateY(-4px); }
.frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.frame path { fill: none; stroke: color-mix(in srgb, var(--ac, var(--red)) 50%, transparent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.frame .tracer { stroke: var(--lime); stroke-dasharray: 10 90; stroke-dashoffset: 0; opacity: 0; transition: opacity .3s; filter: drop-shadow(0 0 4px var(--lime)); }
.fcard.green .tracer, .fcard:hover .tracer { opacity: 1; animation: trace 5s linear infinite; }
.fc-ic { display: inline-grid; place-items: center; width: 60px; height: 60px; margin-bottom: 20px; border-radius: 50%; color: var(--ac);
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .18), transparent 60%), color-mix(in srgb, var(--ac) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ac) 45%, transparent); }
.fc-ic .ic { width: 26px; height: 26px; }
.fcard h3 { margin-bottom: 10px; font: 700 21px var(--f-head); }
.fcard p { color: var(--ink-2); font-size: 15px; }

/* security: checks around a glass orb */
.sec-sec { isolation: isolate; }
.sec-sec::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.5px) 0 0 / 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 70%); }
.orbit { display: grid; grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr); gap: 40px; align-items: center; }
.sp-list { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.sp-list li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 20px; border-radius: 20px; }
.sp-num { position: absolute; top: 10px; right: 16px; font: 800 30px/1 var(--f-head); color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .2); }
.sp-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: var(--on-green); background: linear-gradient(135deg, var(--lime), var(--green)); box-shadow: 0 10px 24px -8px rgba(59, 240, 122, .6); }
.sp-ic .ic { width: 24px; height: 24px; stroke-width: 2; }
.sp-list h3 { margin: 2px 0 4px; padding-right: 36px; font: 700 17px var(--f-head); }
.sp-list p { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.wire { position: absolute; top: 50%; width: 40px; height: 2px; overflow: hidden; }
.sp-list.l .wire { right: -41px; }
.sp-list.r .wire { left: -41px; transform: scaleX(-1); }
.wire::before { content: ''; position: absolute; inset: 0 -16px 0 0; background: repeating-linear-gradient(90deg, var(--lime) 0 6px, transparent 6px 16px); opacity: .7; animation: flow 1s linear infinite; }
.orb { position: relative; display: grid; place-items: center; width: 340px; aspect-ratio: 1; }
.orb-rings { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 36s linear infinite; }
.orb-rings circle { fill: none; }
.orb-rings .r1 { stroke: rgba(200, 255, 61, .45); stroke-width: 1.5; stroke-dasharray: 2 9; }
.orb-rings .r2 { stroke: rgba(255, 255, 255, .12); }
.orb-rings .od { fill: var(--lime); filter: drop-shadow(0 0 6px var(--lime)); }
.orb-rings .od2 { fill: var(--green); }
.orb-core { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 252px; aspect-ratio: 1; padding: 22px; border-radius: 50%; text-align: center;
    background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .38), transparent 38%), radial-gradient(circle at 50% 62%, rgba(59, 240, 122, .55), rgba(16, 110, 54, .4) 62%, rgba(4, 30, 14, .55));
    border: 1px solid rgba(200, 255, 61, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 0 90px -12px rgba(59, 240, 122, .6), inset 0 0 40px rgba(200, 255, 61, .22), inset 0 2px 0 rgba(255, 255, 255, .35); }
.orb-core .mark { width: 44px; height: 44px; margin-bottom: 6px; }
.orb-core small { color: rgba(241, 246, 243, .8); font-size: 12.5px; font-weight: 600; }
.orb-core b { font: 800 20px/1.25 var(--f-head); letter-spacing: .02em; overflow-wrap: anywhere; }
.orb-core .btn { margin-top: 12px; }
.orb-badge { position: absolute; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; color: var(--lime); animation: bob 4.5s ease-in-out infinite; }
.orb-badge .ic { width: 26px; height: 26px; stroke-width: 2.2; }
.orb-badge.b1 { top: 4%; right: 2%; }
.orb-badge.b2 { bottom: 4%; left: 2%; animation-delay: -2.2s; }

/* plans */
.plans-sec { isolation: isolate; overflow: hidden; }
.plans-sec::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--bg), transparent 22%, transparent 78%, var(--bg)), url(../images/landing/candles-bokeh.webp) center / cover no-repeat; }
.tag { position: absolute; z-index: 1; padding: 6px 14px; border-radius: 10px; font: 800 18px/1 var(--f-head); letter-spacing: .04em; color: #fff; animation: bob 5s ease-in-out infinite; }
.tag::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: inherit; }
.tag.sell { top: 150px; left: max(16px, calc(50% - 700px)); rotate: -6deg; background: var(--red-d); border-top-color: var(--red-d); box-shadow: 0 10px 30px -8px rgba(255, 74, 87, .7); }
.tag.buy { bottom: 120px; right: max(16px, calc(50% - 700px)); rotate: 5deg; background: var(--green-d); border-top-color: var(--green-d); box-shadow: 0 10px 30px -8px rgba(59, 240, 122, .7); animation-delay: -2.5s; }
/* any number of plans: three to a row, a short last row centred */
.plans { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 72px 32px; padding: 34px 0 26px; }
/* the card is partials/plan_card, drawn by plan-card.css; here only its place in the row */
.plans > .pl-card { flex: 0 1 calc((100% - 64px) / 3); }

/* calculator */
.calc-sec { background: radial-gradient(700px 380px at 75% 50%, rgba(59, 240, 122, .1), transparent 70%); }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 44px; padding: 44px; border-radius: 32px; }
.calc-l > p { margin-top: 10px; color: var(--ink-2); }
.lbl { display: block; margin: 24px 0 8px; padding: 0; font: 700 12px var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.amt { display: flex; align-items: center; gap: 10px; height: 62px; padding: 0 18px; border-radius: 16px; background: rgba(0, 0, 0, .35); border: 1px solid var(--stroke); transition: border-color .2s, box-shadow .2s; }
.amt:focus-within { border-color: var(--green); box-shadow: 0 0 0 4px rgba(59, 240, 122, .15); }
.amt span { color: var(--muted); font: 700 22px var(--f-head); }
.amt input { flex: 1; align-self: stretch; min-width: 0; padding: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 700 26px var(--f-head); }
.amt em { padding: 4px 9px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: var(--ink-2); font: normal 700 12px var(--f-body); }
.quick { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.quick button { min-height: 40px; border-radius: 12px; border: 1px solid var(--stroke); background: rgba(255, 255, 255, .04); color: var(--ink-2); font: 700 14px var(--f-body); cursor: pointer; transition: background-color .2s, color .2s; }
.quick button:hover { background: rgba(59, 240, 122, .12); color: var(--ink); }
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; min-inline-size: 0; margin: 22px 0 0; padding: 0; border: 0; }
.seg .lbl { margin-top: 0; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; padding: 6px 8px; border-radius: 14px; border: 1px solid var(--stroke); background: rgba(255, 255, 255, .04); font-weight: 700; text-align: center; cursor: pointer; transition: background-color .2s, border-color .2s; }
.seg small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.seg input:checked + span { border-color: var(--green); background: rgba(59, 240, 122, .12); box-shadow: inset 0 0 0 1px var(--green); }
.seg input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }
.calc .hint { margin-top: 12px; color: #FFB36B; font-size: 14px; }
.calc .hint:empty { display: none; }
.calc-r { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 26px; border-radius: 24px; background: rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .08); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kpis span { display: block; color: var(--muted); font-size: 13px; }
.kpis b { font: 700 clamp(18px, 1.9vw, 24px) var(--f-head); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpis .hl b { color: var(--green); }
.bars { flex: 1; display: flex; align-items: flex-end; gap: 6px; min-height: 210px; border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 100% 25%; }
.bars i { flex: 1; height: 100%; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--green), rgba(59, 240, 122, .12)); transform-origin: 50% 100%; transform: scaleY(var(--h, 0));
    transition: transform .55s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 28ms); }
.bars i.cap { background: linear-gradient(180deg, var(--lime), rgba(200, 255, 61, .14)); box-shadow: 0 0 24px -4px rgba(200, 255, 61, .5); }
.bars-ax { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.bars-ax .ax-key { display: inline-flex; align-items: center; gap: 6px; }
.bars-ax .ax-key[hidden] { display: none; }
.key { width: 10px; height: 10px; border-radius: 3px; background: var(--lime); }

/* affiliate + stats */
.aff { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 60px; align-items: center; }
.aff.solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.stats { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; padding: 34px 70px 30px 26px;
    clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%);
    background: url(../images/landing/noise.webp), linear-gradient(135deg, rgba(255, 74, 87, .3), rgba(110, 10, 22, .22) 70%), rgba(255, 255, 255, .03);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.stats .frame path { stroke: rgba(255, 74, 87, .5); }
.stats-t { grid-row: span 2; writing-mode: vertical-rl; rotate: 180deg; text-align: center; font: 800 34px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .2); }
.stats ul { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.stats li { display: flex; align-items: center; gap: 14px; }
.stats li .ic { width: 28px; height: 28px; color: var(--lime); }
.stats b { display: block; font: 700 22px/1.2 var(--f-head); color: var(--lime); font-variant-numeric: tabular-nums; }
.stats li span { color: var(--ink-2); font-size: 13px; }
.stats-note { justify-self: start; margin-top: 18px; color: var(--muted); font-size: 12.5px; }
.aff-r header p { max-width: 560px; margin-top: 14px; color: var(--ink-2); }
.aff.solo .aff-r header { text-align: center; }
.aff.solo .aff-r header p { margin-inline: auto; }
.tree { --n: 3; position: relative; height: 330px; margin-top: 28px; }
.tree::before { content: ''; position: absolute; inset: 40px 12% 0; background: url(../images/landing/hero-bull.webp) center 70% / contain no-repeat; opacity: .16; }
.tree-top { position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: 1; padding: 10px 22px; border-radius: 999px; border-color: rgba(200, 255, 61, .45); color: var(--lime); font: 700 13px var(--f-head); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.tree-lines { position: absolute; left: 0; top: 40px; width: 100%; height: 110px; overflow: visible; }
.tree-lines path { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tree-lines .flow { stroke: var(--lime); stroke-dasharray: 4 14; animation: dash 1.2s linear infinite; }
.blob { --bw: min(168px, calc(100% / var(--n) - 16px)); position: absolute; top: var(--top, 110px); left: var(--x); display: flex; flex-direction: column; align-items: center; justify-content: center; width: var(--bw); aspect-ratio: 1; margin-left: calc(var(--bw) / -2); color: #fff; text-align: center;
    background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .5), transparent 36%), linear-gradient(160deg, rgba(124, 255, 159, .6), rgba(22, 180, 85, .38));
    border: 1px solid rgba(200, 255, 61, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-radius: 46% 54% 58% 42% / 48% 44% 56% 52%; box-shadow: 0 24px 50px -16px rgba(59, 240, 122, .6), inset 0 -12px 30px rgba(0, 70, 25, .35);
    animation: morph 10s ease-in-out infinite, bob 5s ease-in-out infinite; animation-delay: calc(var(--i) * -3s), calc(var(--i) * -1.6s); }
.blob b { font: 800 42px/1 var(--f-head); text-shadow: 0 2px 12px rgba(0, 60, 20, .4); }
.blob small { margin-top: 4px; font-weight: 700; font-size: 13px; opacity: .9; }
.blob .r2 { margin-top: 2px; font: 700 12px/1.2 var(--f-body); opacity: .85; }
.lv { position: absolute; top: -14px; left: 50%; display: grid; place-items: center; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; background: var(--lime); color: var(--on-green); font: 800 13px var(--f-head); box-shadow: 0 0 0 4px var(--bg); }
/* more levels than a tree can hold: the blobs simply wrap */
.tree.many { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 18px; height: auto; padding-top: 70px; }
.tree.many::before { inset: 70px 12% 0; }
.tree.many .blob { --bw: 136px; position: relative; top: auto; left: auto; margin: 0; }
.aff-ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; }
.aff.solo .aff-ft { justify-content: center; text-align: center; }
.aff-ft p { color: var(--ink-2); }
.aff-ft b { color: var(--ink); }
.aff-ft b.up { color: var(--green); }

/* statistics on their own, when the builder places them outside the affiliate section */
.stats-solo { display: flex; justify-content: center; }
.stats-solo .stats { width: min(440px, 100%); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.step { position: relative; padding: 26px 22px; border-radius: 24px; }
.step:not(:last-child)::after { content: ''; position: absolute; top: 64px; right: -22px; width: 22px; height: 2px; background: linear-gradient(90deg, var(--green), transparent); }
.num { font: 800 12px var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.si { display: grid; place-items: center; width: 50px; height: 50px; margin: 14px 0 16px; border-radius: 15px; color: var(--green); background: rgba(59, 240, 122, .12); border: 1px solid rgba(59, 240, 122, .28); }
.si .ic { width: 24px; height: 24px; }
.step h3 { margin-bottom: 6px; font: 700 18px var(--f-head); }
.step p { color: var(--ink-2); font-size: 15px; }

/* transactions */
.tx-sec { background: radial-gradient(500px 300px at 25% 60%, rgba(59, 240, 122, .1), transparent 70%), radial-gradient(500px 300px at 75% 60%, rgba(255, 74, 87, .1), transparent 70%); }
.tx2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tx { padding: 22px 22px 10px; border-radius: 24px; overflow: hidden; }
.tx h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 700 18px var(--f-head); }
.tx h3 .ic { color: var(--green); }
.tx.out h3 .ic { color: var(--red); }
.tx ul { margin: 0; padding: 0; list-style: none; }
.tx li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto 64px; gap: 12px; align-items: center; padding: 12px 2px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 14.5px; }
.tx li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx li.none { display: block; color: var(--muted); }
.cn { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cn .ci { width: 24px; height: 24px; font-size: 12px; }
.tx b { font: 700 15px var(--f-head); color: var(--red); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx b.up { color: var(--green); }
.tx time { color: var(--muted); font-size: 13px; text-align: right; white-space: nowrap; }

/* faq */
.faq { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 60px; align-items: start; }
.faq-l { position: sticky; top: 110px; }
.faq-l > p { margin-top: 14px; color: var(--ink-2); }
.help { display: grid; gap: 10px; margin-top: 26px; padding: 18px; border-radius: 22px; }
.help .btn { justify-content: flex-start; }
.faq-r details { margin-bottom: 12px; border-radius: 20px; transition: border-color .3s; }
.faq-r details[open] { border-color: rgba(59, 240, 122, .4); }
.faq-r summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; list-style: none; cursor: pointer; font: 700 17px var(--f-head); }
.faq-r summary::-webkit-details-marker { display: none; }
.pm { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; color: var(--green); background: rgba(59, 240, 122, .12); transition: transform .3s, background-color .3s, color .3s; }
.pm .ic { width: 18px; height: 18px; stroke-width: 2.2; }
details[open] .pm { transform: rotate(45deg); background: var(--green); color: var(--on-green); }
.faq-r details p { padding: 0 22px 20px; color: var(--ink-2); }

/* cta */
.cta-sec { padding: 20px 0 100px; }
.cta { position: relative; overflow: hidden; padding: 72px 40px; border-radius: 34px; text-align: center;
    background: url(../images/landing/noise.webp), radial-gradient(520px 280px at 0% 100%, rgba(59, 240, 122, .32), transparent 70%), radial-gradient(520px 280px at 100% 100%, rgba(255, 74, 87, .3), transparent 70%), rgba(255, 255, 255, .04); }
.cta-bull, .cta-bear { position: absolute; bottom: -8px; pointer-events: none; }
.cta-bull { left: -30px; width: 340px; }
.cta-bear { right: 24px; width: 160px; }
.cta-c { position: relative; max-width: 560px; margin: 0 auto; }
.cta h2 { margin-bottom: 14px; font: 800 clamp(28px, 3.4vw, 46px)/1.1 var(--f-head); text-transform: uppercase; }
.cta p { margin-bottom: 28px; color: var(--ink-2); }
.cta .fine { margin: 22px 0 0; color: var(--muted); font-size: 13px; }

/* footer */
.ft { position: relative; overflow: hidden; padding: 20px 0 28px; }
body:has(.tg-float) .ft { padding-bottom: 100px; }  /* room for the floating Telegram button */
.ft-bull { position: absolute; left: max(-80px, calc(50% - 820px)); bottom: 40px; width: 430px; opacity: .9; pointer-events: none; }
.ft-top, .ft-panel { margin-left: 300px; }
.ft-top { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.ft-top p { max-width: 620px; color: var(--ink-2); font-size: 14.5px; }
.ft-panel { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr); overflow: hidden; border-radius: 30px; }
.ft-panel.no-social { grid-template-columns: minmax(0, 1fr); }
.ft-social { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; padding: 26px 0; list-style: none; background: linear-gradient(180deg, var(--lime), var(--green)); }
.ft-social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--on-green); background: rgba(0, 0, 0, .1); transition: background-color .2s, color .2s; }
.ft-social a:hover { background: var(--on-green); color: var(--lime); }
.ft-social svg { width: 20px; height: 20px; fill: currentColor; }
.ft-main { padding: 30px 34px 22px; }
.ft-cols { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 28px; }
.ft h4 { margin-bottom: 8px; font: 700 16px var(--f-head); }
.ft-cols ul { margin: 0; padding: 0; list-style: none; }
.ft-cols ul a { display: block; padding: 9px 0; color: var(--ink-2); font-size: 15px; text-decoration: none; }
.ft-cols ul a:hover { color: var(--green); }
.cc { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); text-decoration: none; font-weight: 700; font-size: 15px; }
.cc:hover { border-color: rgba(59, 240, 122, .4); }
.cc > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.cc-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: var(--on-green); background: linear-gradient(135deg, var(--lime), var(--green)); }
.cc small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.risk { margin-top: 22px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 74, 87, .08); border: 1px solid rgba(255, 74, 87, .25); color: var(--ink-2); font-size: 13.5px; }
.risk b { color: var(--ink); }
.ft-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--muted); font-size: 13px; }
.ft-clock { display: inline-flex; align-items: center; gap: 8px; }
.ft-clock b { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ══ TELEGRAM BUTTON  (telegram.css draws it; the colours are ours) ═ */
.tg-float { position: fixed; right: 20px; bottom: 20px; z-index: 50; background: rgba(10, 16, 12, .9); border: 1px solid var(--stroke-2); box-shadow: var(--sh-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tg-float::before { background: linear-gradient(105deg, transparent, var(--brand-wash), transparent); }
.tg-go:focus-visible { outline-color: var(--lime); }
.tg-float-ic { color: var(--on-green); background: linear-gradient(135deg, var(--lime), var(--green)); box-shadow: 0 0 14px var(--glow); }
.tg-float-txt { color: var(--ink); font-family: var(--f-body); font-weight: 700; }
.tg-float-txt small { color: var(--green); }
.tg-float:hover { box-shadow: var(--sh-2); }

/* ══ COOKIE CARD ═══════════════════════════════════════════════════ */
.lp-cookie {
    position: fixed; left: 20px; bottom: 20px; z-index: 55;
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px;
    width: min(360px, calc(100vw - 40px)); padding: 18px; border-radius: 18px;
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .34s, transform .34s cubic-bezier(.2, .7, .2, 1), visibility .34s;
}
.lp-cookie.on { opacity: 1; visibility: visible; transform: none; }
.lp-cookie-ic { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(59, 240, 122, .4); border-radius: 12px; color: var(--green); }
.lp-cookie p { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.lp-cookie .btn { grid-column: 1 / -1; }

/* ══ POLICY PAGES ══════════════════════════════════════════════════ */
.doc-sec { padding-top: 64px; }
.doc-head { max-width: 760px; margin-inline: auto; text-align: center; }
.doc-head .tag-l { display: inline-block; margin-bottom: 14px; padding: 5px 16px; border-radius: 999px; border: 1px solid rgba(200, 255, 61, .6); color: var(--lime); font: 700 12px var(--f-head); letter-spacing: .14em; text-transform: uppercase; }
.doc-note { max-width: 760px; margin: 18px auto 0; padding: 10px 14px; border-left: 2px solid var(--green); color: var(--muted); font-size: 13px; }
.doc { max-width: 760px; margin: 36px auto 0; padding: 40px 44px; border-radius: 26px; color: var(--ink-2); font-size: 15.5px; line-height: 1.75; }
.doc > * + * { margin-top: 16px; }
.doc h2, .doc h3 { margin-top: 36px; color: var(--ink); font-family: var(--f-head); font-weight: 700; line-height: 1.25; text-transform: none; }
.doc h2 { font-size: 22px; }
.doc h3 { font-size: 18px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li + li { margin-top: 8px; }
.doc strong, .doc b { color: var(--ink); }
.doc a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.doc th, .doc td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.doc th { color: var(--muted); font: 700 12px var(--f-head); letter-spacing: .06em; text-transform: uppercase; }
.doc td:first-child { color: var(--ink); font-weight: 700; }

/* ══ REVEAL + PAUSE ════════════════════════════════════════════════ */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d, 0) * 90ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .fcard.reveal.in:hover { transform: translateY(-4px); transition-delay: 0s; }
.paused, .paused * { animation-play-state: paused !important; }

/* ══ KEYFRAMES ═════════════════════════════════════════════════════ */
@keyframes ping { to { transform: scale(3); opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes grow { from { transform: scaleY(0); opacity: 0; } }
@keyframes tick { to { transform: scaleY(.55); } }
@keyframes floor { to { transform: translateY(44px); } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes pop { from { transform: scale(0); } }
@keyframes halo { from { transform: scale(1); opacity: .6; } to { transform: scale(3.2); opacity: 0; } }
@keyframes aura { from { opacity: .35; transform: scale(.96); } to { opacity: .6; transform: scale(1.02); } }
@keyframes sheen { 0%, 58% { transform: translateX(-120%) skewX(-14deg); } 100% { transform: translateX(330%) skewX(-14deg); } }
@keyframes bob { 50% { translate: 0 -8px; } }
@keyframes marq { to { transform: translateX(-50%); } }
@keyframes trace { to { stroke-dashoffset: -100; } }
@keyframes flow { to { transform: translateX(16px); } }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes dash { to { stroke-dashoffset: -18; } }
@keyframes morph {
    0%, 100% { border-radius: 46% 54% 58% 42% / 48% 44% 56% 52%; }
    33% { border-radius: 58% 42% 46% 54% / 56% 50% 50% 44%; }
    66% { border-radius: 42% 58% 54% 46% / 44% 58% 42% 56%; }
}
@keyframes float { 50% { translate: 0 -16px; rotate: 9deg; } }

/* ══ RESPONSIVE ════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
    .ft-top, .ft-panel { margin-left: 0; }
    .ft-bull { display: none; }
    .aff { grid-template-columns: 360px minmax(0, 1fr); gap: 40px; }
    .orbit { grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); gap: 32px; }
    .orb { width: 300px; }
    .orb-core { width: 226px; }
    .sp-list.l .wire { right: -33px; }
    .sp-list.r .wire { left: -33px; }
    .wire { width: 32px; }
}

@media (max-width: 1023px) {
    .links, .nav-cta .btn-ghost { display: none; }
    .burger { display: grid; }
    .nav { gap: 12px; height: 60px; }

    .hero { min-height: 0; padding: 150px 0 74px; }
    .hero-in { padding-bottom: 0; }
    .trend, .floor { display: none; }
    .beasts { position: relative; left: auto; right: auto; bottom: auto; width: 100%; max-width: 560px; height: min(48vw, 290px); margin: 10px 0 20px; }
    .beasts::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: 0; height: 46px; background: radial-gradient(closest-side, rgba(200, 255, 61, .22), transparent); }
    .beast { bottom: 22px; }
    .beast.bull { left: 0; width: 64%; }
    .beast.bear { right: 1%; width: 29%; }
    .art img { -webkit-box-reflect: below 1px linear-gradient(transparent 80%, rgba(255, 255, 255, .18)); }
    .chip { display: none; }

    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .facts > div + div { border-left: 0; }
    .facts > div:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .08); }
    .facts > div:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .08); }

    .split-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
    .cards3 { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
    .orbit { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; gap: 22px; }
    .orb { order: -1; justify-self: center; }
    .wire { display: none; }

    .plans > .pl-card { flex-basis: 100%; max-width: 420px; }
    .plans { gap: 64px; }
    .tag { display: none; }

    .calc { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px; }
    .aff { grid-template-columns: 1fr; gap: 48px; }
    .stats { max-width: 440px; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .step::after { display: none; }
    .tx2 { grid-template-columns: 1fr; }
    .faq { grid-template-columns: 1fr; gap: 32px; }
    .faq-l { position: static; }
    .ft-cols { grid-template-columns: 1fr 1fr; }
    .ft-contact { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    body { font-size: 15px; }
    .coin { width: calc(var(--s, 110px) * .66); }
    .tx2 > .coin { top: calc(50% - 40px); }
    .topbar .wrap { height: 34px; }
    .topbar { font-size: 12px; }
    .tb-r { gap: 12px; }
    .hide-sm { display: none; }
    .tb-link { min-width: 40px; justify-content: center; }
    .tb-link .ic { width: 18px; height: 18px; }
    /* long translations ("Зарегистрироваться") still fit beside the mark and the burger */
    .nav { gap: 8px; padding-left: 12px; }
    .nav .brand { flex: 0 1 auto; min-width: 0; gap: 8px; font-size: 18px; }
    .nav .brand span { overflow: hidden; text-overflow: ellipsis; }
    .nav .mark { width: 32px; height: 32px; }
    .nav-cta { flex: none; }
    .nav-cta .btn-green { padding: 0 14px; font-size: 14px; }
    .hero { margin-top: -118px; padding-top: 140px; }
    .pill { font-size: 13px; padding: 7px 14px; }
    .h1-a em { display: block; }
    .hero h1 { margin: 18px 0 10px; }
    .lede { font-size: 16px; margin-bottom: 24px; }
    .ctas { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .ctas .btn-lg { padding: 0 14px; min-height: 52px; font-size: 15px; }
    .facts-band { margin-top: -40px; }
    .facts > div { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
    .facts dd { font-size: 18px; }
    .fi { width: 40px; height: 40px; border-radius: 12px; }
    .coins-in { flex-direction: column; align-items: stretch; gap: 12px; }
    .sec-head { margin-bottom: 36px; }
    .fcard { padding: 40px 22px 36px; }
    .orb { width: 280px; }
    .orb-core { width: 212px; }
    .sp-list li { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 16px; }
    .sp-ic { width: 46px; height: 46px; border-radius: 14px; }
    .plans .pl-card { padding: 58px 22px 50px; }
    .plans .pl-card.is-featured { padding-block: 70px 58px; }
    .plans .pl-rate b { font-size: 58px; }
    .calc { padding: 20px; border-radius: 26px; }
    .calc-r { padding: 18px; }
    .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .seg { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
    .kpis { grid-template-columns: 1fr; gap: 8px; }
    .kpis > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
    .kpis b { font-size: 19px; }
    .bars { min-height: 160px; gap: 4px; }
    .stats { padding: 26px 60px 24px 18px; column-gap: 14px; }
    .stats-t { font-size: 24px; }
    .stats b { font-size: 19px; }
    .tree { height: 270px; }
    .tree-top { font-size: 12px; padding: 9px 16px; }
    .blob { top: calc(var(--top, 110px) - 10px); }
    .blob b { font-size: 28px; }
    .blob small { font-size: 11.5px; }
    .blob .r2 { font-size: 10.5px; }
    .tree.many .blob { --bw: 104px; }
    .lv { width: 30px; height: 30px; top: -12px; margin-left: -15px; font-size: 12px; }
    .aff-ft .btn { width: 100%; }
    .steps { grid-template-columns: 1fr; }
    .step { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 16px; padding: 20px; }
    .step .num { grid-column: 2; }
    .step .si { grid-row: 1 / span 3; margin: 0; }
    .step h3, .step p { grid-column: 2; }
    .tx { padding: 18px 16px 6px; }
    .tx li { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
    .tx li .cn { display: none; }
    .faq-r summary { padding: 18px; font-size: 16px; }
    .faq-r details p { padding: 0 18px 18px; }
    .cta { padding: 48px 20px 150px; border-radius: 28px; }
    .cta-bull { width: 230px; left: -24px; }
    .cta-bear { width: 100px; right: 10px; }
    .cta .ctas { grid-template-columns: 1fr; }
    .ft-panel { grid-template-columns: 1fr; }
    .ft-social { flex-direction: row; justify-content: center; padding: 14px 0; }
    .ft-main { padding: 24px 20px 18px; }
    .ft-top { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ft-cols { grid-template-columns: 1fr 1fr; }
    .lang-menu { inset: auto 0 0 0; width: 100%; max-height: 84vh; border-width: 1px 0 0; border-radius: 18px 18px 0 0; }
    .lang-menu::backdrop { background: var(--scrim); }
    .lang-menu:popover-open { animation: sheet-up .32s cubic-bezier(.2, .8, .2, 1); }
    .tg-float { right: 14px; bottom: 14px; }
    .doc { padding: 26px 20px; }
    /* a table is a stack of cards here, each figure beside its column's name (data-label) */
    .doc table, .doc tbody, .doc tr, .doc td { display: block; }
    .doc tr:has(th) { display: none; }
    .doc tr { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
    .doc td { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border: 0; text-align: right; }
    .doc td::before { content: attr(data-label); color: var(--muted); text-align: left; }
    .doc td:first-child { padding-bottom: 6px; text-align: left; }
    .doc td:first-child::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .reveal { opacity: 1; transform: none; }
}