/* ==================================================================
   LANDING — public home page for the bento template.

   Standalone on purpose: the investor area's bento.css is the app
   shell and this page is not inside it, and the stock frontend's
   bootstrap would collide on .card, .btn and .container. The tokens
   are restated so both halves of the product stay one colour.

   Every piece of artwork on this page is inline SVG or CSS gradient.
   There is not a single image file.
   ================================================================== */
:root {
    --bg: #05070F;
    --surface: #0C1322;
    --surface-2: #0A1224;
    --raise: linear-gradient(180deg, #0D1425 0%, #0A101E 100%);
    --hairline: #16203A;
    --line-2: #22345B;
    --t1: #F5F8FF;
    --t2: #A9B4CB;
    --t3: #8792AB;
    --t4: #6B7691;
    --blue: #3B82F6;
    --blue-2: #2F6BF0;
    --blue-deep: #1E40AF;
    --green: #4ADE80;
    --amber: #E9B872;
    --red: #F07377;
    --shell: 1200px;
    /* Space Grotesk has a face — wide M, single-storey g, flat-topped t.
       Inter runs the paragraphs; a display face at 15px is just noise.
       JetBrains Mono owns every figure so numbers read as data. */
    --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--t2);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }

/* section rhythm */
.sec { padding: 96px 0; position: relative; }
.sec-head { max-width: 620px; margin: 0 auto 48px; text-align: center; }
.sec-head.left { margin-left: 0; text-align: left; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px;
    border-radius: 999px; background: rgba(59, 130, 246, .1); border: 1px solid #1E3364;
    font-size: .719rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9FBBEE;
}
.eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); display: block; }
h2.sec-title {
    font-size: 2.25rem; font-weight: 800; color: var(--t1); letter-spacing: -.03em;
    line-height: 1.15; margin: 16px 0 0;
}
.sec-head p { font-size: .938rem; color: var(--t3); margin: 14px 0 0; }

.card {
    background: var(--raise); border: 1px solid var(--hairline); border-radius: 20px;
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 48px; padding: 0 24px; border-radius: 13px; border: 1px solid transparent;
    font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: filter .15s, border-color .15s, background .15s;
}
.btn-primary { background: var(--blue-2); color: #fff; box-shadow: 0 14px 30px -14px rgba(47, 107, 240, .95); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { background: var(--surface-2); border-color: var(--line-2); color: var(--t1); }
.btn-ghost:hover { border-color: #37507F; background: #0E1830; }
.btn-sm { height: 40px; padding: 0 18px; font-size: .813rem; border-radius: 11px; }

/* ── glow field behind the top of the page ─────────────────────── */
.aura { position: absolute; pointer-events: none; filter: blur(90px); opacity: .55; }
.aura-1 { top: -180px; left: 50%; transform: translateX(-58%); width: 900px; height: 560px;
    background: radial-gradient(closest-side, rgba(47, 107, 240, .55), transparent); }
.aura-2 { bottom: -140px; right: -180px; width: 620px; height: 520px;
    background: radial-gradient(closest-side, rgba(74, 222, 128, .16), transparent); }

/* ══ TOP BAR ══ */
.topbar {
    border-bottom: 1px solid var(--hairline); background: #070B16;
    font-size: .75rem; color: var(--t3); position: relative; z-index: 20;
}
.topbar .shell { display: flex; align-items: center; gap: 22px; height: 42px; flex-wrap: wrap; }
.topbar a { display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: var(--t1); }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.topbar .clock { color: var(--t2); }
.topbar .clock b { color: var(--green); font-weight: 600; }

/* ══ HEADER ══ */
.head {
    position: sticky; top: 0; z-index: 30;
    background: rgba(5, 7, 15, .78); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hairline);
}
.head .shell { display: flex; align-items: center; gap: 14px; height: 72px; }
.brand { display: flex; align-items: center; gap: 11px; margin-right: 18px; }
.brand-mark {
    width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0;
    background: linear-gradient(155deg, var(--blue-2), var(--blue-deep));
    box-shadow: 0 10px 22px -12px rgba(47, 107, 240, .95);
}
.brand-name { display: block; font-size: 1.063rem; font-weight: 800; color: var(--t1); letter-spacing: -.02em; line-height: 1; }
.brand-sub { display: block; font-size: .656rem; color: var(--t4); letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
    padding: 9px 14px; border-radius: 10px; font-size: .875rem; font-weight: 600; color: var(--t3);
}
.nav a:hover, .nav a.on { color: var(--t1); background: rgba(255, 255, 255, .045); }
.head .acts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.burger { display: none; }

/* ══ HERO ══ */
.hero { position: relative; z-index: 1; padding: 76px 0 84px; }
.hero .shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero h1 {
    font-size: 3.375rem; font-weight: 800; color: var(--t1); letter-spacing: -.035em;
    line-height: 1.06; margin: 20px 0 0;
}
.hero h1 span {
    background: linear-gradient(100deg, #6BA1FF, #4ADE80 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lede { font-size: 1.031rem; color: var(--t3); margin: 20px 0 0; max-width: 480px; }
.hero .cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

.facts { display: flex; gap: 26px; margin-top: 38px; flex-wrap: wrap; }
.fact b { display: block; font-family: var(--mono); font-size: 1.375rem; font-weight: 600; color: var(--t1); letter-spacing: -.02em; }
.fact span { display: block; font-size: .719rem; color: var(--t4); margin-top: 4px; }
.fact + .fact { padding-left: 26px; border-left: 1px solid var(--hairline); }

/* ── hero artwork: one hand-drawn SVG, no image files ───────────── */
.art { position: relative; margin: 8px 0; }
.bot { position: relative; z-index: 2; display: block; width: 100%; max-width: 430px; margin: 0 auto; height: auto; overflow: visible; }
.bot-float { animation: hover 6s ease-in-out infinite; transform-origin: 230px 300px; }
.bot-coin { animation: hover 5s ease-in-out infinite .6s; transform-origin: 386px 200px; }
.bot-eyes { animation: blink 6.5s steps(1, end) infinite; transform-origin: 230px 178px; }
@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
.chip {
    position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 14px 0 8px; border-radius: 999px;
    background: rgba(13, 20, 37, .92); border: 1px solid var(--line-2);
    backdrop-filter: blur(8px);
    box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .95);
    font-size: .781rem; font-weight: 700; color: var(--t1); white-space: nowrap;
}
.chip small { font-family: var(--mono); font-size: .688rem; font-weight: 500; color: var(--green); }
.coin { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.chip-1 { bottom: 12%; right: -2%; animation: bob 7s ease-in-out infinite; }
.chip-2 { top: 12%; left: -6%; animation: bob 8s ease-in-out infinite .8s; }
.chip-3 { bottom: 1%; left: 2%; animation: bob 6.5s ease-in-out infinite 1.6s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@media (prefers-reduced-motion: reduce) { .chip, .bot-float, .bot-coin, .bot-eyes { animation: none !important; } }

/* ══ TRUST STRIP ══ */
.strip { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: #070C17; }
.strip .shell { display: flex; align-items: center; gap: 18px; padding-top: 20px; padding-bottom: 20px; flex-wrap: wrap; }
.strip .lbl { font-size: .719rem; letter-spacing: .12em; text-transform: uppercase; color: var(--t4); font-weight: 700; }
.strip .coins { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.pay {
    display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px 0 8px;
    border-radius: 11px; background: var(--surface-2); border: 1px solid var(--hairline);
    font-size: .781rem; font-weight: 600; color: var(--t2);
}
.pay small { font-size: .656rem; color: var(--t4); font-family: var(--mono); }

/* ══ FEATURES ══ */
.feats { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 16px; }
.feat { padding: 26px 22px; position: relative; overflow: hidden; }
.feat-ic {
    width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center;
    background: var(--surface-2); border: 1px solid var(--hairline); color: #6BA1FF; margin-bottom: 18px;
    overflow: hidden;
}
.feat h3 { font-size: 1.031rem; font-weight: 700; color: var(--t1); margin: 0; letter-spacing: -.01em; }
.feat p { font-size: .844rem; color: var(--t3); margin: 10px 0 0; }
.feat.lead {
    background: radial-gradient(120% 140% at 0% 0%, rgba(47, 107, 240, .28), transparent 58%), var(--raise);
    border-color: var(--line-2);
}
.feat.lead .feat-ic { background: linear-gradient(155deg, var(--blue-2), var(--blue-deep)); border-color: transparent; color: #fff; }

/* ══ STEPS ══ */
.steps { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 16px; position: relative; }
.steps::before { content: none; }
.step { text-align: center; position: relative; z-index: 1; }
.step h3 { font-size: 1rem; font-weight: 700; color: var(--t1); margin: 0; }
.step p { font-size: .844rem; color: var(--t3); margin: 9px auto 0; max-width: 240px; }

/* ══ PLANS ══ */
.plans { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 18px; align-items: start; }
.plan { padding: 26px 24px 24px; position: relative; overflow: hidden; }
.plan.best {
    border-color: var(--line-2);
    background: radial-gradient(120% 110% at 50% -10%, rgba(47, 107, 240, .3), transparent 60%), var(--raise);
}
.plan-tag {
    position: absolute; top: 18px; right: 18px; height: 24px; padding: 0 10px; border-radius: 7px;
    display: inline-flex; align-items: center; font-size: .625rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    background: rgba(74, 222, 128, .12); border: 1px solid #17462C; color: var(--green);
}
.plan-head { display: flex; align-items: center; gap: 10px; }
.plan-name { font-size: .719rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t4); }
.plan-rate { display: flex; align-items: baseline; gap: 9px; margin-top: 12px; }
.plan-rate b { font-family: var(--mono); font-size: 3rem; font-weight: 600; color: var(--t1); letter-spacing: -.04em; line-height: 1; }
.plan.best .plan-rate b { color: #8FB8FF; }
.plan-rate span { font-size: .875rem; color: var(--t3); font-weight: 600; }
.plan-sub { font-size: .813rem; color: var(--t3); margin-top: 10px; }

.plan-rows { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.plan-rows li {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 0; border-bottom: 1px solid var(--hairline); font-size: .813rem; color: var(--t3);
}
.plan-rows b { font-family: var(--mono); font-size: .844rem; font-weight: 600; color: var(--t1); }
.plan-rows b.up { color: var(--green); }
.plan .btn { width: 100%; margin-top: 22px; }

/* ══ CALCULATOR ══ */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0; overflow: hidden; }
.calc-in { padding: 30px 32px; }
.calc-out {
    padding: 30px 32px;
    background: radial-gradient(120% 130% at 100% 0%, rgba(47, 107, 240, .26), transparent 62%), #0A1120;
    border-left: 1px solid var(--hairline);
}
.calc h3 { font-size: 1.188rem; font-weight: 700; color: var(--t1); margin: 0 0 6px; letter-spacing: -.02em; }
.calc .hint { font-size: .813rem; color: var(--t3); margin: 0 0 22px; }
.seg { display: flex; padding: 4px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--hairline); gap: 3px; }
.seg button {
    flex: 1 1 0; min-width: 0; appearance: none; border: 0; background: transparent; color: var(--t3);
    font: inherit; font-size: .813rem; font-weight: 600; padding: 9px 8px; border-radius: 10px; cursor: pointer;
}
.seg button:hover { color: var(--t1); }
.seg button.on { background: var(--blue-2); color: #fff; box-shadow: 0 8px 18px -10px rgba(47, 107, 240, .9); }

.amt {
    display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 0 16px; height: 62px;
    border-radius: 14px; background: var(--surface-2); border: 1px solid var(--hairline);
}
.amt:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, .16); }
.amt i { font-style: normal; font-family: var(--mono); font-size: 1.375rem; color: var(--t3); }
.amt input {
    flex: 1 1 auto; min-width: 0; width: 100%; background: transparent; border: 0; outline: 0; padding: 0;
    color: var(--t1); font-family: var(--mono); font-size: 1.75rem; font-weight: 600;
    letter-spacing: -.02em;
}
.amt input::-webkit-outer-spin-button, .amt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amt input { -moz-appearance: textfield; }
.range {
    -webkit-appearance: none; appearance: none; width: 100%; margin-top: 20px; height: 6px;
    border-radius: 999px; background: var(--surface-2); border: 1px solid var(--hairline); outline: none; cursor: pointer;
}
.range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--blue-2); border: 3px solid #0A1224; cursor: pointer;
    box-shadow: 0 6px 16px -6px rgba(47, 107, 240, .95);
}
.range::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%; background: var(--blue-2); border: 3px solid #0A1224;
    cursor: pointer; box-shadow: 0 6px 16px -6px rgba(47, 107, 240, .95);
}
.range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--surface-2); }
.limits { display: flex; justify-content: space-between; font-size: .688rem; color: var(--t4); margin-top: 8px; font-family: var(--mono); }

.calc-out .kicker { font-size: .656rem; letter-spacing: .13em; text-transform: uppercase; color: var(--t4); font-weight: 700; }
.calc-fig { font-family: var(--mono); font-size: 2.25rem; font-weight: 600; color: var(--green); letter-spacing: -.03em; margin-top: 10px; line-height: 1; }
.calc-rows { list-style: none; margin: 22px 0 0; padding: 0; }
.calc-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hairline); font-size: .813rem; color: var(--t3); }
.calc-rows b { font-family: var(--mono); font-weight: 600; color: var(--t1); }
.calc-note { font-size: .688rem; color: var(--t4); margin-top: 16px; line-height: 1.55; }

/* ══ AFFILIATE ══ */
.aff { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.levels { display: grid; gap: 12px; }
.lvl {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px; align-items: center;
    padding: 18px 20px; border-radius: 18px; background: var(--raise); border: 1px solid var(--hairline);
}
.lvl.one { border-color: var(--line-2); background: radial-gradient(120% 200% at 0% 50%, rgba(47, 107, 240, .26), transparent 60%), var(--raise); }
.lvl-n {
    width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
    background: var(--surface-2); border: 1px solid var(--hairline);
    font-family: var(--mono); font-size: .719rem; font-weight: 600; color: var(--t3);
    line-height: 1.1; text-align: center;
}
.lvl.one .lvl-n { background: linear-gradient(155deg, var(--blue-2), var(--blue-deep)); border-color: transparent; color: #fff; }
.lvl b { display: block; font-size: .938rem; font-weight: 700; color: var(--t1); }
.lvl span { display: block; font-size: .781rem; color: var(--t3); margin-top: 3px; }
.lvl .pct { font-family: var(--mono); font-size: 1.75rem; font-weight: 600; color: var(--t1); letter-spacing: -.03em; }
.lvl.one .pct { color: #8FB8FF; }

/* ══ FAQ ══ */
.faq { max-width: 800px; margin: 0 auto; display: grid; gap: 12px; }
.qa { border-radius: 16px; background: var(--surface); border: 1px solid var(--hairline); overflow: hidden; }
.qa summary {
    list-style: none; cursor: pointer; padding: 20px 22px; display: flex; align-items: center; gap: 16px;
    font-size: .969rem; font-weight: 600; color: var(--t1);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .pm {
    margin-left: auto; width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center;
    background: var(--surface-2); border: 1px solid var(--hairline); color: var(--t3); transition: transform .18s;
}
.qa[open] summary .pm { transform: rotate(45deg); color: #6BA1FF; }
.qa[open] { border-color: var(--line-2); }
.qa p { margin: 0; padding: 0 22px 22px 62px; font-size: .875rem; color: var(--t3); }

/* ══ CTA ══ */
.cta-box {
    position: relative; overflow: hidden; border-radius: 26px; padding: 52px 48px;
    background: radial-gradient(110% 160% at 0% 0%, rgba(47, 107, 240, .38), transparent 58%),
                radial-gradient(90% 150% at 100% 100%, rgba(74, 222, 128, .16), transparent 60%),
                var(--raise);
    border: 1px solid var(--line-2);
    display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
}
.cta-box h2 { font-size: 2rem; font-weight: 800; color: var(--t1); letter-spacing: -.03em; margin: 0; line-height: 1.15; }
.cta-box p { font-size: .938rem; color: var(--t2); margin: 12px 0 0; max-width: 440px; }
.cta-b { flex: 1 1 340px; min-width: 0; position: relative; z-index: 1; }
.cta-form { flex: 0 1 380px; min-width: 0; position: relative; z-index: 1; }
.cta-form label { display: block; font-size: .719rem; color: var(--t3); margin-bottom: 9px; }
.mail { display: flex; gap: 9px; }
.mail input {
    flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 16px; border-radius: 13px;
    background: rgba(5, 7, 15, .6); border: 1px solid var(--line-2); color: var(--t1);
    font: inherit; font-size: .875rem; outline: none;
}
.mail input::placeholder { color: var(--t4); }
.mail input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); }
.mail .btn { height: 50px; flex-shrink: 0; }

/* ══ FOOTER ══ */
.foot { border-top: 1px solid var(--hairline); background: #070B16; padding: 64px 0 0; position: relative; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.foot p { font-size: .844rem; color: var(--t3); margin: 18px 0 0; max-width: 300px; }
.foot h4 { font-size: .719rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t4); margin: 0 0 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot ul a { font-size: .875rem; color: var(--t3); }
.foot ul a:hover { color: var(--t1); }
.socials { display: flex; gap: 9px; margin-top: 22px; }
.socials a {
    width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    background: var(--surface-2); border: 1px solid var(--hairline); color: var(--t3);
}
.socials a:hover { color: var(--t1); border-color: var(--line-2); }
.foot-base {
    margin-top: 52px; border-top: 1px solid var(--hairline); padding: 22px 0;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: .781rem; color: var(--t4);
}
.foot-base .right { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
/* The risk line sits in the footer base row, in the same quiet type as the
   copyright: still on every page, no longer a box shouting in amber. */
.risk { flex: 1 1 340px; min-width: 0; font-size: .75rem; line-height: 1.6; color: var(--t4); }
.risk b { font-weight: 600; color: var(--t3); }

/* ══════════════════════════════════════════════════════════════════
   DEPTH LAYER
   A flat dark page reads as a wireframe. Everything below is drawn
   geometry — a page-wide grid, per-section artwork, and light that
   sits on the cards rather than under them.
   ══════════════════════════════════════════════════════════════════ */

/* page-wide grid + dots, fixed so it does not scroll with content */
.bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-fx svg { width: 100%; height: 100%; }
.topbar, .hero, .strip, .sec, .foot { position: relative; z-index: 1; }

/* per-section artwork sits under the content of its own section */
.deco { position: absolute; pointer-events: none; z-index: 0; }
.sec > .shell, .foot > .shell, .cta-box > *:not(.deco) { position: relative; z-index: 1; }

.deco-arcs { top: -60px; right: -120px; width: 520px; opacity: .5; }
.deco-candles { left: 0; right: 0; bottom: 0; height: 340px; opacity: .55; }
.deco-net { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 620px; opacity: .3; }
.deco-blob { top: 40px; left: -180px; width: 460px; opacity: .5; }
.deco-wave { top: -1px; left: 0; right: 0; height: 90px; }

/* light on top of the cards, not under them */
.card {
    position: relative;
    box-shadow: 0 26px 50px -32px rgba(0, 0, 0, .95);
}
.card::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 1px; border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13) 22%, rgba(255, 255, 255, .13) 78%, transparent);
    pointer-events: none;
}

.feat, .plan, .qa, .lvl { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.feat:hover, .plan:hover, .lvl:hover {
    transform: translateY(-4px);
    border-color: var(--line-2);
    box-shadow: 0 34px 60px -34px rgba(0, 0, 0, 1), 0 0 0 1px rgba(59, 130, 246, .12);
}
.qa:hover { border-color: var(--line-2); }

/* a soft under-glow for the two panels that carry the money numbers */
.plan.best::after, .calc-out::after {
    content: ""; position: absolute; inset: auto 12% -18px; height: 40px; border-radius: 50%;
    background: rgba(47, 107, 240, .5); filter: blur(28px); z-index: -1; pointer-events: none;
}
.plan.best { overflow: visible; }
.calc-out { position: relative; }

/* section headings get a hairline flourish instead of sitting in space */
.sec-head::after {
    content: ""; display: block; width: 92px; height: 1px; margin: 26px auto 0;
    background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.sec-head.left::after { margin-left: 0; }
/* ══════════════════════════════════════════════════════════════════
   TYPE
   Loaded weights stop at 700 — every 800 below would have been
   faked by the browser, which is what made the old headings look
   soft. Anything that speaks gets the display face; anything that
   counts gets the mono; paragraphs stay on Inter.
   ══════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4,
.brand-name, .btn, .nav a, .qa summary, .lvl b, .calc h3, .plan-tag,
.cta-form label { font-family: var(--display); }

/* small caps labels are the page's second voice — mono, wide, quiet */
.eyebrow, .plan-name, .strip .lbl, .foot h4, .calc-out .kicker, .limits,
.fact span, .topbar, .foot-base {
    font-family: var(--mono); font-weight: 500;
}
.eyebrow { font-size: .688rem; letter-spacing: .13em; font-weight: 500; }
.plan-name, .strip .lbl, .foot h4 { font-weight: 500; letter-spacing: .16em; }
.fact span { letter-spacing: .04em; }

.hero h1 {
    font-size: clamp(2.25rem, 3.6vw, 2.875rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.06;
    /* The copy comes from the admin panel, so where it wraps is not ours to
       choose. balance splits "Fixed terms, daily returns," 174/189px instead
       of leaving a 249/113 rag on a phone. */
    text-wrap: balance;
}
h2.sec-title { font-weight: 700; letter-spacing: -.038em; }
.cta-box h2 { font-weight: 700; letter-spacing: -.038em; }
.brand-name { font-weight: 700; letter-spacing: -.03em; font-size: 1.125rem; }
.brand-sub { font-family: var(--mono); font-weight: 500; letter-spacing: .14em; font-size: .625rem; }
.btn { letter-spacing: -.005em; font-weight: 600; }
.nav a { font-weight: 500; letter-spacing: -.01em; }
.feat h3, .step h3 { font-weight: 600; letter-spacing: -.02em; }
.qa summary { font-weight: 600; letter-spacing: -.015em; }
.lvl b { font-weight: 600; letter-spacing: -.02em; }

/* the headline's second line is underscored by hand, not by a border */
.hero h1 .hl { position: relative; display: inline-block; }
.squig {
    position: absolute; left: -2%; right: -2%; bottom: -.36em; width: 104%; height: .3em;
    overflow: visible; pointer-events: none;
}
/* Revealed with a clip, not a dash. A dash length has to match the
   rendered path length, and that changes every time the headline
   does -- at 46px the line is ~460px and a 340 dash left the tail
   of "in full" permanently undrawn. */
.squig { clip-path: inset(0 100% 0 0); animation: draw 1.1s .35s ease-out forwards; }
@keyframes draw { to { clip-path: inset(0 -2% 0 0); } }
@media (prefers-reduced-motion: reduce) { .squig { animation: none; clip-path: none; } }

/* ==================================================================
   MASCOTS
   One <defs> at the top of the document holds the shell, visor and
   coin gradients. Every drawing below points at it, so the whole
   family stays one robot rather than five unrelated ones.
   ================================================================== */
.art-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mb { display: block; width: 100%; height: auto; overflow: visible; }
.mb-float { animation: bobsm 6s ease-in-out infinite; }
.mb-eyes { transform-box: fill-box; transform-origin: center; animation: blink 7s steps(1, end) infinite; }
.mb-spin { transform-box: fill-box; transform-origin: center; animation: spin 9s linear infinite; }
@keyframes bobsm { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mb-float, .mb-eyes, .mb-spin { animation: none !important; } }

/* four bots, four jobs - they blink out of step so the row feels alive */
.step:nth-child(2) .mb-float { animation-delay: -1.4s; }
.step:nth-child(3) .mb-float { animation-delay: -2.8s; }
.step:nth-child(4) .mb-float { animation-delay: -4.2s; }
.step:nth-child(2) .mb-eyes { animation-delay: -1.9s; }
.step:nth-child(3) .mb-eyes { animation-delay: -3.7s; }
.step:nth-child(4) .mb-eyes { animation-delay: -5.1s; }

.step-art { position: relative; width: 116px; height: 116px; margin: 0 auto 14px;
    display: grid; place-items: center;
    background: radial-gradient(closest-side, rgba(47, 107, 240, .17), transparent 72%); }
.step-art b {
    position: absolute; top: 0; right: 2px; width: 26px; height: 26px; border-radius: 9px;
    background: var(--blue-2); color: #fff; font-family: var(--mono); font-size: .688rem; font-weight: 600;
    display: grid; place-items: center; box-shadow: 0 0 0 5px var(--bg); z-index: 2;
}
.steps-line { position: absolute; left: 8%; right: 8%; top: 46px; height: 46px; z-index: 0; }

/* a mascot leans over the plan we actually recommend */
.plan-bot { position: absolute; top: -52px; left: 16px; width: 94px; z-index: 2; pointer-events: none; }
.coin > svg { width: 100%; height: 100%; }
.tier { flex-shrink: 0; }

.calc-bot { position: absolute; top: 24px; right: 18px; width: 62px; z-index: 1; pointer-events: none; }
.aff-chain { width: 100%; max-width: 420px; margin: 26px 0 0; height: auto; overflow: visible; }
.faq-bot { position: absolute; left: calc(50% - 618px); bottom: 56px; width: 176px; z-index: 0; pointer-events: none; }
.cta-box > .cta-bot { position: absolute; right: 26px; bottom: -46px; width: 134px; z-index: 0; opacity: .85; pointer-events: none; }
.foot-bot { position: absolute; right: 6%; top: 14px; width: 86px; opacity: .55; z-index: 0; pointer-events: none; }

@media (max-width: 1320px) { .faq-bot { display: none; } }
@media (max-width: 1080px) {
    .steps-line, .cta-box > .cta-bot, .foot-bot { display: none; }
    .plan-bot { top: -46px; left: 18px; width: 84px; }
}
@media (max-width: 720px) {
    .calc-bot { display: none; }
    .step-art { width: 104px; height: 104px; }
}

/* the flourish under a section heading, drawn rather than ruled */
.sec-head::after {
    width: 116px; height: 12px; background: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 12' fill='none'%3E%3Cpath d='M2 8c14-7 26 3 38-1s20-8 32-3 22 6 42 1' stroke='%2322345B' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='58' cy='3.6' r='2.4' fill='%234ADE80'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
}

/* ══════════ TABLET ══════════ */
@media (max-width: 1080px) {
    .hero .shell { grid-template-columns: 1fr; gap: 56px; }
    .hero h1 { font-size: 2.75rem; }
    .art { max-width: 520px; margin: 0 auto; }
    .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; }
    .steps::before { display: none; }
    .plans { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .plans .plan.best { margin-top: 44px; }
    .calc { grid-template-columns: 1fr; }
    .calc-out { border-left: 0; border-top: 1px solid var(--hairline); }
    .aff { grid-template-columns: 1fr; gap: 40px; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

/* ══════════ PHONE ══════════ */
@media (max-width: 720px) {
    .shell { padding: 0 18px; }
    .sec { padding: 66px 0; }
    .topbar .shell { height: auto; padding-top: 9px; padding-bottom: 9px; gap: 14px; font-size: .688rem; }
    .topbar .hide-sm { display: none; }
    .nav, .head .acts .btn-ghost { display: none; }
    .burger {
        display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
        background: var(--surface-2); border: 1px solid var(--hairline); color: var(--t2); margin-left: auto;
    }
    /* two lines of tagline next to a 38px mark is more brand than a
       390px header can carry */
    .head .brand-sub { display: none; }
    /* The shell's 14px gap is the only space between the brand and the
       buttons; the brand margin and a fixed acts margin on top of it added
       28px and kept the buttons off the right edge. */
    .head .brand { margin-right: 0; }
    .head .acts { margin-left: auto; gap: 8px; }
    .hero { padding: 20px 0 52px; }
    .hero .shell { grid-template-columns: 1fr; gap: 0; }
    .hero h1 { font-size: clamp(1.5rem, 8.2vw, 2rem); margin-top: 18px; }
    .hero .lede { font-size: .938rem; margin-top: 15px; }
    .hero .cta { margin-top: 22px; }
    .hero .cta .btn { flex: 1 1 100%; }
    .facts { margin-top: 28px; }
    .hero-copy { display: contents; }
    .hero-copy > .eyebrow { order: 1; justify-self: start; }
    .hero-copy > h1 { order: 2; }
    .hero-copy > .lede { order: 4; }
    .hero-copy > .cta { order: 5; }
    .hero-copy > .facts { order: 6; }
    /* the box hugs the robot so the floating chips land on it
       instead of drifting out into the margin */
    .art { order: 3; margin: 18px auto 2px; max-width: 288px; }
    .bot { max-width: 214px; }
    /* Four stats across a phone wrap 3 + 1 and leave the divider of the
       orphan hanging off the left edge. Two by two, one rule down the
       middle. */
    .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 0; }
    .fact + .fact { padding-left: 0; border-left: 0; }
    .fact:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--hairline); }
    .fact b { font-size: 1.125rem; }
    h2.sec-title { font-size: 1.75rem; }
    .feats, .steps { grid-template-columns: 1fr; }
    .steps { gap: 28px; }
    .strip .shell { flex-direction: column; align-items: flex-start; gap: 12px; }
    .strip .coins { margin-left: 0; }
    .calc-in, .calc-out { padding: 24px 20px; }
    .lvl { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 13px; padding: 15px 16px; }
    .lvl-n { width: 44px; height: 44px; border-radius: 13px; }
    .lvl .pct { font-size: 1.375rem; }
    .cta-box { padding: 32px 22px; gap: 26px; }
    .cta-box h2 { font-size: 1.625rem; }
    .mail { flex-direction: column; }
    .mail .btn { width: 100%; }
    .qa summary { padding: 16px 18px; font-size: .906rem; gap: 12px; }
    .qa p { padding: 0 18px 18px 18px; }
    .foot-grid { grid-template-columns: 1fr; gap: 30px; }
    /* Centred with `translate`, not `transform`: the bob animation owns
       transform, so a translateX there was dropped and the chip hung off
       the right edge, widening the whole page. right: auto undoes the
       desktop right: -2%, which otherwise squeezed the box narrower than
       its text. */
    .chip-1 { bottom: 6%; left: 50%; right: auto; translate: -50% 0; }
    .chip-2 { top: 6%; left: -2%; }
    .chip-3 { display: none; }
    .chip { height: 34px; font-size: .688rem; padding: 0 11px 0 6px; }
    .coin { width: 22px; height: 22px; }
    .deco-arcs, .deco-net, .deco-blob { display: none; }
    .deco-candles { height: 200px; opacity: .4; }
}

/* The guest header (mark + a 9-letter name + Create account + burger)
   needs about 375px. Below that the name goes and the mark carries the
   brand; the link keeps the name through its aria-label, and the drawer
   and hero still show it. */
@media (max-width: 380px) {
    .head .brand-name { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   PLATFORM
   Pieces the mockup did not have to answer for: a burger that opens
   something, the language switcher, and the GDPR card. The stock
   markup for those lives in main.css, which this page does not load.
   ══════════════════════════════════════════════════════════════════ */

/* ── mobile drawer ─────────────────────────────────────────────── */
.lp-drawer { position: fixed; inset: 0; z-index: 60; display: block; }
.lp-drawer[hidden] { display: none; }
.lp-scrim {
    position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
    border: 0; background: rgba(3, 5, 11, .72); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .22s ease; cursor: pointer;
}
.lp-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw);
    background: #080D1A; border-left: 1px solid var(--line-2);
    padding: 18px 20px 28px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 6px;
    transform: translateX(100%); transition: transform .26s cubic-bezier(.22, 1, .36, 1);
    box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 1);
}
.lp-drawer.on .lp-scrim { opacity: 1; }
.lp-drawer.on .lp-panel { transform: none; }
.lp-panel-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lp-close {
    margin-left: auto; width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
    display: grid; place-items: center; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--hairline); color: var(--t2);
}
.lp-close:hover { color: var(--t1); border-color: var(--line-2); }
.lp-panel nav { display: grid; gap: 2px; }
.lp-panel nav a {
    padding: 12px 14px; border-radius: 12px; font-size: .938rem; font-weight: 600;
    font-family: var(--display); color: var(--t2);
}
.lp-panel nav a:hover, .lp-panel nav a.on { color: var(--t1); background: rgba(255, 255, 255, .05); }
.lp-panel .lp-panel-acts { display: grid; gap: 10px; margin-top: 18px; }
.lp-panel .lp-panel-acts .btn { width: 100%; }
.lp-panel .lang { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) {
    .lp-scrim, .lp-panel { transition: none; }
}

/* ── language switcher ─────────────────────────────────────────── */
.lang { position: relative; }
.lang > button {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px;
    border-radius: 9px; background: transparent; border: 1px solid transparent;
    color: inherit; font: inherit; font-size: inherit; cursor: pointer;
}
.lang > button:hover { color: var(--t1); border-color: var(--hairline); }
.lang-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 150px;
    padding: 6px; border-radius: 12px; background: #0A1120; border: 1px solid var(--line-2);
    box-shadow: 0 24px 44px -24px rgba(0, 0, 0, 1); display: grid; gap: 2px;
}
.lang-menu[hidden] { display: none; }
.lang-menu a { padding: 8px 11px; border-radius: 8px; font-size: .813rem; color: var(--t2); }
.lang-menu a:hover, .lang-menu a.on { background: rgba(255, 255, 255, .05); color: var(--t1); }
.lp-panel .lang-menu { position: static; margin-top: 8px; }

/* ── cookie consent ────────────────────────────────────────────── */
.lp-cookie {
    position: fixed; z-index: 55; left: 18px; bottom: 18px; width: min(360px, calc(100vw - 36px));
    padding: 20px; border-radius: 18px; background: var(--raise); border: 1px solid var(--line-2);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 1);
    transform: translateY(140%); transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.lp-cookie.on { transform: none; }
.lp-cookie-ic {
    width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
    background: linear-gradient(155deg, var(--blue-2), var(--blue-deep)); color: #fff;
}
.lp-cookie p { font-size: .844rem; color: var(--t3); margin: 14px 0 16px; }
.lp-cookie a { color: #6BA1FF; }
@media (prefers-reduced-motion: reduce) { .lp-cookie { transition: none; } }

/* ── toast icons ───────────────────────────────────────────────────
   partials/notify hands iziToast Font Awesome class names, and this page
   loads no icon font. Same four glyphs, drawn.

   The specificity is deliberate. iziToast_custom.css loads after this
   file (partials/notify injects it at the end of the body) and paints
   .iziToast.iziToast-color-red .iziToast-icon with the `background`
   shorthand, which resets background-image to none. That is three
   classes; these are four, so the tinted tile from that file survives
   and the glyph lands on top of it. */
.iziToast .iziToast-body .iziToast-icon.fa-check-circle,
.iziToast .iziToast-body .iziToast-icon.fa-times-circle,
.iziToast .iziToast-body .iziToast-icon.fa-exclamation-triangle,
.iziToast .iziToast-body .iziToast-icon.fa-exclamation-circle {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}
.iziToast .iziToast-body .iziToast-icon.fa-check-circle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328c76f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}
.iziToast .iziToast-body .iziToast-icon.fa-times-circle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eb2222' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E");
}
.iziToast .iziToast-body .iziToast-icon.fa-exclamation-triangle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9f43' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
.iziToast .iziToast-body .iziToast-icon.fa-exclamation-circle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e9ff2' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M12 11.5v5'/%3E%3C/svg%3E");
}

/* ── section modifiers ─────────────────────────────────────────────
   These were inline styles in the mockup; a stylesheet is a better
   place for them than every section blade. */
.sec.clip { overflow: hidden; }
.sec.tight { padding-top: 0; }
.foot { overflow: hidden; }

/* ── section bits that were inline styles in the mockup ───────────── */
.calc { margin-top: 22px; }
.aff-lede { font-size: .938rem; color: var(--t3); margin: 16px 0 0; max-width: 440px; }
.aff-note {
    margin: 34px 0 0; font-size: .781rem; color: var(--t4); text-align: center;
    padding-top: 22px; border-top: 1px solid var(--hairline);
}

/* ── anchor landings ───────────────────────────────────────────────
   The header is sticky, so #plans and friends would otherwise drop the
   section heading underneath it. Padded sections already carry most of
   the offset; the ones that start flush need all of it. */
.sec[id] { scroll-margin-top: 20px; }
.sec.tight[id] { scroll-margin-top: 88px; }

/* The looping drawings are already guarded where they are defined. These are
   the last of the movement: the card lift and the plus that spins into a
   cross. Small, but transform is transform. */
@media (prefers-reduced-motion: reduce) {
    .feat, .plan, .qa, .lvl, .qa summary .pm { transition: none; }
    .feat:hover, .plan:hover, .lvl:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   LIVE LEDGER — sections/statistics.blade.php
   Every figure is read from the database on the visit, so this is the
   one section allowed to look live: the eyebrow dot breathes and
   today's bar glows. Nothing else moves.
   ══════════════════════════════════════════════════════════════════ */
.eyebrow.live { color: #9FE8BC; background: rgba(74, 222, 128, .08); border-color: #1D4A33; }
.eyebrow.live i { background: var(--green); animation: lgBreathe 2.4s ease-out infinite; }
@keyframes lgBreathe {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
}

.lg-kick {
    font-family: var(--mono); font-size: .656rem; font-weight: 500; letter-spacing: .16em;
    text-transform: uppercase; color: var(--t4);
}

.lg-pulse { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: hidden; }

/* left: how long the books have been open, drawn like a status page */
.lg-up { padding: 30px 32px 28px; border-right: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 22px; }
.lg-up-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lg-days { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.lg-days b { font-family: var(--mono); font-size: 4rem; font-weight: 600; line-height: .9; color: var(--t1); letter-spacing: -.05em; }
.lg-days span { font-family: var(--display); font-size: 1.125rem; font-weight: 600; color: var(--t2); }
.lg-since { margin: 0; font-family: var(--mono); font-size: .75rem; color: var(--t3); text-align: right; line-height: 1.5; }
.lg-since em { font-style: normal; color: var(--green); display: inline-flex; align-items: center; gap: 6px; }
.lg-since em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* one bar per day; the height is set inline from that day's money */
.lg-ticks { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 4px; align-items: end; height: 64px; }
.lg-tick { height: 6px; min-height: 6px; border-radius: 3px; background: linear-gradient(180deg, #4C8CF8, #1E40AF); opacity: .9; }
.lg-tick.zero { background: #1B2A4A; opacity: 1; }
.lg-tick.off { background: none; border: 1px dashed var(--line-2); opacity: 1; }
.lg-tick.today { background: linear-gradient(180deg, #8CF0BC, #14804A); box-shadow: 0 0 14px rgba(74, 222, 128, .45); opacity: 1; }
.lg-scale { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: .656rem; color: var(--t4); margin-top: -12px; }

/* right: the three totals, one per row so a long money figure never squeezes */
.lg-totals { display: grid; grid-template-rows: repeat(3, 1fr); }
.lg-total { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 28px; }
.lg-total + .lg-total { border-top: 1px solid var(--hairline); }
.lg-ic {
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    background: #0F1A30; border: 1px solid #1E3364; color: #8FB8FF;
}
.lg-ic.g { background: #0C1F18; border-color: #1D4A33; color: var(--green); }
.lg-total .lg-kick { display: block; }
.lg-total b {
    display: block; font-family: var(--mono); font-size: 1.625rem; font-weight: 600; color: var(--t1);
    letter-spacing: -.03em; line-height: 1.2; margin-top: 2px; overflow-wrap: anywhere;
}
.lg-delta { font-family: var(--mono); font-size: .719rem; color: var(--t3); text-align: right; white-space: nowrap; }
.lg-delta.up { color: var(--green); }

/* the two lanes: money going in, money coming back out */
.lg-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.lg-lane { padding: 8px 8px 10px; }
.lg-lane-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; }
.lg-lane-head h3 { font-size: 1.063rem; font-weight: 600; color: var(--t1); margin: 0; letter-spacing: -.01em; }
.lg-lane-head small { margin-left: auto; font-family: var(--mono); font-size: .656rem; letter-spacing: .12em; text-transform: uppercase; color: var(--t4); }
.lg-dir { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(59, 130, 246, .12); color: #8FB8FF; }
.lg-lane.out .lg-dir { background: rgba(74, 222, 128, .1); color: var(--green); }

.lg-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lg-row {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 14px; background: #0A1120; border: 1px solid #111A2E;
    transition: border-color .2s ease, background-color .2s ease;
}
.lg-row:hover { border-color: var(--line-2); background-color: #0C1426; }
.lg-row.fresh { border-color: #1E3364; background: linear-gradient(90deg, rgba(47, 107, 240, .12), #0A1120 60%); }
.lg-lane.out .lg-row.fresh { border-color: #1D4A33; background: linear-gradient(90deg, rgba(74, 222, 128, .09), #0A1120 60%); }

.lg-face { width: 34px; height: 30px; }
.lg-who { min-width: 0; }
.lg-who b { display: block; font-family: var(--mono); font-size: .813rem; font-weight: 500; color: var(--t1); letter-spacing: .01em; }
.lg-what { display: flex; align-items: center; gap: 6px; min-height: 20px; font-size: .75rem; color: var(--t3); margin-top: 1px; white-space: nowrap; overflow: hidden; }
.lg-what .coin { width: 20px; height: 20px; }
.lg-what small { font-family: var(--mono); font-size: .625rem; color: var(--t4); }
.lg-plan {
    font-family: var(--mono); font-size: .656rem; letter-spacing: .08em; text-transform: uppercase; color: #9FBBEE;
    padding: 1px 7px; border-radius: 6px; background: rgba(59, 130, 246, .1); border: 1px solid #1E3364;
}
.lg-amt { text-align: right; }
.lg-amt b { display: block; font-size: .938rem; font-weight: 600; color: var(--t1); }
.lg-lane.out .lg-amt b { color: #8CF0BC; }
.lg-amt time { display: block; font-family: var(--mono); font-size: .656rem; color: var(--t4); margin-top: 1px; white-space: nowrap; }

.lg-empty {
    display: grid; place-items: center; min-height: 180px; padding: 20px;
    border: 1px dashed #1B2740; border-radius: 14px; text-align: center; font-size: .813rem; color: var(--t4);
}
.lg-foot { margin: 22px 0 0; text-align: center; font-family: var(--mono); font-size: .688rem; color: var(--t4); }

@media (max-width: 1080px) {
    .lg-pulse { grid-template-columns: minmax(0, 1fr); }
    .lg-up { border-right: 0; border-bottom: 1px solid var(--hairline); }
    .lg-totals { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg-total { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px 22px; }
    .lg-total + .lg-total { border-top: 0; border-left: 1px solid var(--hairline); }
    .lg-delta { text-align: left; }
}
@media (max-width: 720px) {
    .lg-up { padding: 24px 20px 22px; }
    .lg-up-top { flex-direction: column; align-items: flex-start; gap: 10px; }
    .lg-since { text-align: left; }
    .lg-days b { font-size: 3.25rem; }
    .lg-ticks { gap: 3px; height: 52px; }
    .lg-scale span:nth-child(2) { display: none; }
    .lg-totals { grid-template-columns: minmax(0, 1fr); }
    .lg-total { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; padding: 16px 20px; }
    .lg-total + .lg-total { border-left: 0; border-top: 1px solid var(--hairline); }
    .lg-total b { font-size: 1.375rem; }
    .lg-delta { text-align: right; }
    .lg-lanes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .eyebrow.live i { animation: none; }
    .lg-row { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   FLOATING TELEGRAM — the group link, always one tap away.
   Bottom right, clear of the cookie card on the left. Telegram's own
   blue so it reads as Telegram at a glance; the label keeps the page's
   type. On a phone it shrinks to the round icon alone.
   ══════════════════════════════════════════════════════════════════ */
.tg-float {
    position: fixed; z-index: 50; right: 18px; bottom: 18px;
    display: flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px;
    border-radius: 999px; background: rgba(12, 19, 34, .92); border: 1px solid var(--line-2);
    backdrop-filter: blur(10px); box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 1);
    transition: transform .2s ease, border-color .2s ease;
}
.tg-float:hover { transform: translateY(-2px); border-color: #2AABEE; }
.tg-float:focus-visible { outline: 2px solid #2AABEE; outline-offset: 3px; }
.tg-float-ic {
    position: relative; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(160deg, #37BBFE, #1E96D1);
    box-shadow: 0 10px 22px -10px rgba(42, 171, 238, .9);
}
.tg-float-ic svg { margin-left: -2px; }
/* one slow ring is the only motion */
.tg-float-ic::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid rgba(42, 171, 238, .55); animation: tgRing 2.6s ease-out infinite;
}
@keyframes tgRing { 0% { transform: scale(.92); opacity: 1; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
.tg-float-txt { display: grid; line-height: 1.25; font-family: var(--display); font-size: .875rem; font-weight: 600; color: var(--t1); }
.tg-float-txt small { font-family: var(--mono); font-size: .625rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #7CCBF5; }
@media (max-width: 720px) {
    .tg-float { right: 14px; bottom: 14px; padding: 5px; }
    .tg-float-txt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tg-float { transition: none; }
    .tg-float-ic::after { animation: none; opacity: 0; }
}

/* ── contact: the form leads, the other ways to reach us sit beside it ── */
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ct-form { padding: 28px; display: grid; gap: 16px; }
.ct-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-field { display: grid; gap: 8px; }
.ct-field > span { font-size: .719rem; font-weight: 600; letter-spacing: .04em; color: var(--t3); }
.ct-field input, .ct-field textarea {
    width: 100%; padding: 13px 15px; border-radius: 12px; background: #080D1A;
    border: 1px solid var(--line-2); color: var(--t1); font: inherit; font-size: .875rem;
    transition: border-color .15s, box-shadow .15s;
}
.ct-field textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: var(--t4); }
.ct-field input:focus, .ct-field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); }
.ct-field input[readonly] { color: var(--t3); background: #070B15; }
.ct-send { width: 100%; margin-top: 2px; }
.ct-note { font-size: .75rem; color: var(--t4); margin: 0; }

.ct-side { display: grid; gap: 14px; }
.ct-card { padding: 22px; }
.ct-ic {
    width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    background: rgba(59, 130, 246, .1); border: 1px solid #1E3364; color: #9FBBEE; margin-bottom: 14px;
}
.ct-card h3 { font-family: var(--display); font-size: 1rem; font-weight: 700; color: var(--t1); margin: 0 0 8px; letter-spacing: -.01em; }
.ct-card p { font-size: .813rem; color: var(--t3); margin: 0; line-height: 1.65; }
.ct-go {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
    font-size: .813rem; font-weight: 600; color: #9FBBEE; transition: gap .15s, color .15s;
}
.ct-go:hover { gap: 11px; color: var(--t1); }

@media (max-width: 920px) {
    .ct-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .ct-two { grid-template-columns: 1fr; }
    .ct-form { padding: 20px; }
    .ct-card { padding: 18px; }
}