.pt-screen { display: flex; flex-direction: column; gap: 18px; }

.pt-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,420px); column-gap: 24px;
    padding: 34px 34px 0; border-radius: 28px; border: 1px solid rgba(124,180,255,.2);
    background:
        radial-gradient(620px 420px at 82% 38%, rgba(77,141,255,.3), transparent 62%),
        radial-gradient(520px 320px at 0% 0%, rgba(55,215,242,.14), transparent 70%),
        radial-gradient(420px 260px at 60% 110%, rgba(247,201,75,.1), transparent 70%),
        linear-gradient(160deg, #14213a, #0c1220 62%, #0b0f1a);
    box-shadow: 0 40px 80px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
}

.pt-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: .55;
    background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.3px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 75%);
            mask-image: linear-gradient(100deg, transparent 25%, #000 75%);
}

.pt-hero::after {
    content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; z-index: 1;
    background: linear-gradient(90deg, transparent, rgba(138,230,255,.6), transparent);
}
.pt-hero__aura {
    position: absolute; z-index: -1; right: 4%; top: 6%; width: 380px; height: 380px; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(95,204,255,.0), rgba(95,204,255,.22), rgba(247,201,75,.18), rgba(77,141,255,.0) 70%);
    filter: blur(40px); animation: pt-spin 18s linear infinite;
}
@keyframes pt-spin { to { transform: rotate(1turn); } }

.pt-hero-tx { position: relative; align-self: center; padding-bottom: 26px; }
.pt-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 7px 13px 7px 11px;
    border-radius: 999px; color: var(--cyan-2); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    background: rgba(55,215,242,.08); border: 1px solid var(--cyan-line);
    box-shadow: 0 0 24px -8px rgba(95,204,255,.6) inset;
}
.pt-eyebrow i {
    width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
    box-shadow: 0 0 0 3px rgba(95,204,255,.2), 0 0 10px var(--cyan); animation: pt-pulse 2s ease-in-out infinite;
}
@keyframes pt-pulse { 50% { box-shadow: 0 0 0 6px rgba(95,204,255,0), 0 0 10px var(--cyan); } }
.pt-hero h2 { font-size: 34px; line-height: 1.12; letter-spacing: -.04em; margin-bottom: 14px; }
.pt-hero h2 b {
    background: linear-gradient(110deg, #9ff0ff 10%, #5fccff 40%, #4d8dff 70%, #9ff0ff 95%);
    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: pt-shine 6s ease-in-out infinite;
}
@keyframes pt-shine { 50% { background-position: 100% 0; } }
.pt-hero p { max-width: 560px; color: var(--dim); font-size: 13.5px; line-height: 1.6; }
.pt-perks { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.pt-perks li {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 12px;
    color: var(--text); font-size: 12px; font-weight: 800;
    background: rgba(255,255,255,.045); border: 1px solid var(--line-soft);
    backdrop-filter: blur(6px);
}
.pt-perks svg { color: var(--cyan); }

.pt-hero-art { position: relative; align-self: end; display: grid; place-items: end center; min-height: 290px; }
.pt-hero-art img {
    position: relative; z-index: 1; display: block; width: 100%; max-width: 420px; height: auto;
    filter: drop-shadow(0 26px 30px rgba(0,0,0,.55));
    animation: pt-bob 5s ease-in-out infinite;
}
@keyframes pt-bob { 50% { transform: translateY(-6px); } }
.pt-ring {
    position: absolute; left: 50%; bottom: 8%; width: 86%; aspect-ratio: 1; transform: translateX(-50%);
    border-radius: 50%; border: 1px solid rgba(138,230,255,.18);
    background: radial-gradient(circle, rgba(77,141,255,.22), transparent 62%);
    box-shadow: 0 0 0 26px rgba(138,230,255,.035), 0 0 0 54px rgba(138,230,255,.02);
}
.pt-float {
    position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
    border-radius: 14px; font-size: 12px; font-weight: 800; white-space: nowrap;
    background: rgba(10,16,28,.72); border: 1px solid var(--line-2); backdrop-filter: blur(10px);
    box-shadow: 0 16px 30px -16px #000;
    animation: pt-bob 4.2s ease-in-out infinite;
}
.pt-float.f1 { left: -2%; top: 18%; color: var(--mint); border-color: var(--green-line); font-family: var(--f-display); font-size: 15px; }
.pt-float.f1 b { font-weight: 700; }
.pt-float.f2 { right: 0; top: 46%; color: var(--lilac-2); animation-delay: -2s; }
.pt-float.f2 svg { color: var(--acc-2); }

.pt-link {
    position: relative; z-index: 3; grid-column: 1 / -1;
    display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: end;
    margin: 0 -34px; padding: 18px 34px 22px;
    background: linear-gradient(180deg, rgba(8,12,22,.55), rgba(8,12,22,.82));
    border-top: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(14px);
}
.pt-link .cap { display: block; margin-bottom: 8px; }
.pt-link__row { display: flex; gap: 8px; }
.pt-link__box {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 16px;
    border-radius: 14px; background: rgba(0,0,0,.36); border: 1px dashed rgba(138,230,255,.28); color: var(--faint);
}
.pt-link__box svg { flex: none; color: var(--cyan); }
.pt-link__box .link { min-width: 0; color: var(--text); font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
.pt-copy { flex: none; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: 14px; }
.pt-share { display: flex; gap: 8px; }
.pt-sh {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 16px; border-radius: 14px;
    color: var(--text); font-size: 12.5px; font-weight: 800;
    background: color-mix(in srgb, var(--bc) 13%, rgba(0,0,0,.2)); border: 1px solid color-mix(in srgb, var(--bc) 32%, transparent);
    transition: background .15s, transform .15s var(--ease), box-shadow .15s;
}
.pt-sh svg { color: var(--bc); }
.pt-sh:hover { background: color-mix(in srgb, var(--bc) 24%, transparent); transform: translateY(-2px);
    box-shadow: 0 14px 26px -16px var(--bc); }
.pt-sh:active { transform: translateY(0); }
.pt-sh.tg { --bc: #37aee2; }
.pt-sh.wa { --bc: #25d366; }
.pt-sh.vk { --bc: #4c8dff; }

.pt-bonus {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: 150px auto minmax(0,1fr); align-items: center; gap: 22px;
    padding: 20px 24px 20px 12px; border-radius: var(--r-lg); border: 1px solid rgba(247,201,75,.32);
    background:
        radial-gradient(420px 220px at 8% 50%, rgba(247,201,75,.28), transparent 70%),
        radial-gradient(500px 200px at 100% 0, rgba(240,166,44,.12), transparent 70%),
        linear-gradient(120deg, #2a2213, #19171a 45%, #141824);
    box-shadow: 0 30px 60px -40px rgba(247,201,75,.55), inset 0 1px 0 rgba(255,236,170,.12);
}
.pt-bonus::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
    background: linear-gradient(105deg, transparent 40%, rgba(255,230,160,.08) 50%, transparent 60%) no-repeat;
    background-size: 250% 100%; animation: pt-sweep 5s ease-in-out infinite;
}
@keyframes pt-sweep { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
.pt-bonus__art { position: relative; height: 104px; }
.pt-bonus__art img { position: absolute; height: auto; filter: drop-shadow(0 12px 16px rgba(0,0,0,.5)); }
.pt-bonus__art .c1 { width: 92px; left: 34px; top: 4px; transform: rotate(-12deg); animation: pt-bob 4s ease-in-out infinite; }
.pt-bonus__art .c2 { width: 58px; left: 8px; top: 50px; transform: rotate(18deg); animation: pt-bob 4s ease-in-out -1.3s infinite; }
.pt-bonus__art .c3 { width: 46px; left: 104px; top: 58px; transform: rotate(-30deg); animation: pt-bob 4s ease-in-out -2.6s infinite; }
.pt-bonus__tag {
    display: inline-block; padding: 4px 10px; border-radius: 999px; margin-bottom: 6px;
    color: var(--gold-ink); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    background: var(--gold-grad);
}
.pt-bonus__sum b {
    display: block; font-family: var(--f-display); font-size: 44px; font-weight: 800; letter-spacing: -.05em; line-height: 1.05; white-space: nowrap;
    background: linear-gradient(180deg, #fff3c4, #f7c94b 60%, #f0a62c); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 6px 18px rgba(247,201,75,.35));
}
.pt-bonus__sum small { display: block; max-width: 210px; margin-top: 4px; color: var(--gold-warm); font-size: 11.5px; font-weight: 700; line-height: 1.45; }
.pt-bonus__steps { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pt-bonus__steps .st {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 16px;
    background: rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.08);
}
.pt-bonus__steps .ic {
    flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px;
    color: var(--gold-text); background: rgba(247,201,75,.12); border: 1px solid var(--gold-line);
}
.pt-bonus__steps .ic.tg { color: #37aee2; background: rgba(55,174,226,.12); border-color: rgba(55,174,226,.3); }
.pt-bonus__steps .st div { min-width: 0; }
.pt-bonus__steps .st b { display: block; font-size: 12.5px; font-weight: 800; line-height: 1.3; }
.pt-bonus__steps .st small { display: block; margin-top: 2px; color: var(--faint); font-size: 11px; font-weight: 700; }
.pt-bonus__steps .st.win { border-color: var(--green-line); background: rgba(54,216,154,.08); }
.pt-bonus__steps .st.win .ic { color: var(--green-ink); background: var(--green-grad); border: 0; box-shadow: 0 10px 20px -10px var(--green); }
.pt-bonus__steps .st.win b { color: var(--mint); }
.pt-bonus__sum b sup { font-size: .42em; vertical-align: super; margin-left: 2px; }
.pt-bonus__fine { grid-column: 1 / -1; padding: 0 0 0 10px; color: rgba(216,191,124,.62); font-size: 10.5px; font-weight: 600; line-height: 1.45; }
.pt-bonus__steps .plus { flex: none; color: var(--gold-warm); font-family: var(--f-display); font-size: 18px; font-weight: 700; opacity: .7; }

.pt-earn { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.7fr); gap: 18px; align-items: stretch; }
.pt-pots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pt-pot {
    position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; padding: 22px;
    border-radius: var(--r-lg); border: 1px solid var(--gold-line);
    background:
        radial-gradient(320px 220px at 100% 0, rgba(247,201,75,.2), transparent 70%),
        linear-gradient(160deg, #1d1a14, #141824 70%);
}
.pt-pot.is-fs { border-color: var(--acc-line);
    background: radial-gradient(320px 220px at 100% 0, rgba(77,141,255,.2), transparent 70%), var(--panel); }
.pt-pot__coin {
    position: absolute; z-index: -1; right: -30px; top: -30px; width: 110px; height: auto; opacity: .55;
    transform: rotate(-14deg); filter: drop-shadow(0 16px 24px rgba(0,0,0,.5));
}
.pt-pot .cap { color: var(--gold-warm); }
.pt-pot.is-fs .cap { color: var(--lilac); }
.pt-pot b {
    display: block; margin-top: 10px; font-family: var(--f-display); font-size: 40px; font-weight: 700; letter-spacing: -.05em; line-height: 1.05;
    background: linear-gradient(180deg, #fff1bf, #f7c94b 70%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pt-pot.is-fs b { background: none; color: var(--lilac-2); }
.pt-pot small { display: block; max-width: 300px; margin: 8px 0 18px; color: var(--faint); font-size: 11.5px; font-weight: 700; line-height: 1.5; }
.pt-pot .btn { margin-top: auto; gap: 8px; }

.pt-pot .btn:disabled {
    pointer-events: none; color: var(--faint); background: rgba(255,255,255,.05); box-shadow: none;
    border: 1px solid var(--line);
}

.pt-kpis {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; overflow: hidden;
    border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--line-soft);
}
.pt-kpi {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: 112px;
    padding: 18px 20px; background: var(--panel); container-type: inline-size; transition: background .2s;
}
.pt-kpi:hover { background: color-mix(in srgb, var(--tc) 4%, var(--panel)); }
.pt-kpi .ic {
    position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px;
    color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 26%, transparent);
}
.pt-kpi .cap { display: block; margin-bottom: 6px; font-size: 9.5px; }
.pt-kpi b { display: block; font-family: var(--f-display); font-size: min(26px, 13cqw); font-weight: 700; letter-spacing: -.04em; white-space: nowrap; }
.pt-kpi b.gold { color: var(--gold-text); }
.pt-kpi small { display: block; margin-top: 4px; color: var(--faint-2); font-size: 11px; font-weight: 700; }

.pt-own {
    padding: 5px 10px; border-radius: 999px; color: var(--gold-text); font-size: 11.5px; font-weight: 800; white-space: nowrap;
    background: var(--gold-soft-2); border: 1px solid var(--gold-line);
}
.pt-tiers__steps { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; align-items: end; padding-top: 4px; }
.pt-tier {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-width: 0;
    height: calc(88px + var(--i, 0) * 12px); padding: 12px 14px; border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    border: 1px solid var(--line-soft);
}
.pt-tier .lv {
    position: absolute; top: 12px; left: 14px; display: inline-flex; align-items: center; gap: 4px;
    color: var(--faint-2); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.pt-tier b { font-family: var(--f-display); font-size: 24px; font-weight: 700; letter-spacing: -.04em; color: var(--dim); }
.pt-tier small { color: var(--faint); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-tier.done { border-color: rgba(54,216,154,.18); background: linear-gradient(180deg, rgba(54,216,154,.08), rgba(54,216,154,.02)); }
.pt-tier.done .lv { color: var(--mint); }
.pt-tier.done b { color: var(--text); }
.pt-tier.on {
    border-color: rgba(138,230,255,.45);
    background: linear-gradient(180deg, rgba(95,204,255,.22), rgba(59,124,246,.08));
    box-shadow: 0 20px 40px -24px rgba(95,204,255,.9), inset 0 1px 0 rgba(255,255,255,.12);
}
.pt-tier.on .lv { color: var(--cyan-2); }
.pt-tier.on b { color: #fff; }
.pt-tier.on small { color: var(--lilac); }
.pt-tier .tag {
    position: absolute; left: 50%; top: -11px; transform: translateX(-50%);
    padding: 4px 10px; border-radius: 999px; white-space: nowrap;
    color: #06202b; font-size: 10px; font-weight: 800; letter-spacing: .04em;
    background: linear-gradient(135deg, #a8f1ff, #5fccff); box-shadow: 0 8px 18px -8px rgba(95,204,255,.9);
}
.pt-tiers__foot { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.pt-tiers__bar { flex: 0 0 220px; height: 8px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.06); }
.pt-tiers__bar i {
    display: block; height: 100%; min-width: 8px; border-radius: inherit;
    background: linear-gradient(90deg, #5fccff, #3b7cf6); box-shadow: 0 0 12px rgba(95,204,255,.7);
    transition: width .8s var(--ease);
}
.pt-tiers__hint { color: var(--faint); font-size: 11.5px; font-weight: 700; line-height: 1.5; }

.pt-cols { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 18px; align-items: stretch; }
.pt-cols > .pt-card { display: flex; flex-direction: column; min-width: 0; }

.pt-chart {
    position: relative; flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 10px; align-items: end;
    min-height: 190px; padding-top: 6px;
    background: repeating-linear-gradient(0deg, transparent 0 calc(25% - 1px), rgba(255,255,255,.045) calc(25% - 1px) 25%);
    background-size: 100% calc(100% - 22px); background-repeat: no-repeat;
}
.pt-chart .empty { grid-column: 1 / -1; align-self: center; text-align: center; color: var(--faint); font-size: 12px; font-weight: 700; }
.pt-chart .bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.pt-chart .bar i {
    display: block; width: 100%; max-width: 44px; min-height: 3px; border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg, rgba(95,204,255,.7), rgba(59,124,246,.35));
    transition: height .8s var(--ease);
}
.pt-chart .bar.top i { background: linear-gradient(180deg, #8ae6ff, #3b7cf6); box-shadow: 0 10px 26px -8px rgba(95,204,255,.9); }
.pt-chart .bar.zero i { background: var(--surface-4); }
.pt-chart .bar b { font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap; }
.pt-chart .bar.top b { color: var(--cyan-2); }
.pt-chart .bar small { color: var(--faint); font-size: 10px; font-weight: 700; }
.pt-chart .pt-empty { grid-column: 1 / -1; align-self: center; }
.pt-chart:has(.pt-empty) { background: none; }

.pt-list-h, .pt-row { display: grid; grid-template-columns: 40px minmax(0,1fr) 92px 88px; align-items: center; gap: 12px; }
.pt-list-h {
    padding: 0 10px 9px; color: var(--faint-2); font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    border-bottom: 1px solid var(--line-soft);
}
.pt-list-h span:first-child { grid-column: 1 / 3; }
.pt-list-h span:nth-child(n+2) { text-align: right; }
.pt-list { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.pt-list .empty { padding: 20px 8px; text-align: center; color: var(--faint); font-size: 12px; font-weight: 700; }
.pt-row { padding: 10px; border-radius: 14px; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.pt-row:hover { background: var(--surface-2); border-color: var(--line-soft); }
.pt-row .ava {
    width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px;
    font-family: var(--f-display); font-size: 14px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--c1, #4d8dff), var(--c2, #2f6fe8));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 20px -12px var(--c1, #4d8dff);
}
.pt-row .who { min-width: 0; }
.pt-row .who b { display: block; font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-row .who small { display: block; margin-top: 2px; color: var(--faint); font-size: 10.5px; font-weight: 700; }
.pt-row .dep { text-align: right; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-row .dep.zero { color: var(--faint-2); }
.pt-row .earn {
    justify-self: end; padding: 5px 10px; border-radius: 9px; font-size: 11.5px; font-weight: 800; white-space: nowrap;
    color: var(--mint); background: var(--green-soft-2); border: 1px solid var(--green-line);
}
.pt-row .earn.zero { color: var(--faint-2); background: none; border-color: transparent; }

.pt-empty { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 26px 12px; text-align: center; }
.pt-empty .ic {
    width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 16px;
    color: var(--cyan-2); background: radial-gradient(circle at 50% 30%, rgba(95,204,255,.22), rgba(55,215,242,.06));
    border: 1px solid var(--cyan-line); box-shadow: 0 0 0 8px rgba(95,204,255,.04);
}
.pt-empty b { color: var(--dim); font-size: 13.5px; font-weight: 800; }
.pt-empty small { max-width: 300px; color: var(--faint); font-size: 11.5px; font-weight: 700; line-height: 1.5; }

.pt-pager { display: flex; justify-content: center; gap: 6px; margin-top: auto; padding-top: 12px; }
.pt-pager:empty { display: none; }
.pt-pager button {
    min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px; font-size: 12px; font-weight: 800;
    color: var(--dim); background: var(--surface-2); border: 1px solid var(--line-2);
}
.pt-pager button.on { color: #fff; background: var(--acc-soft-2); border-color: var(--acc-line-2); }

.pt-how { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.pt-how .s {
    position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px; border-radius: var(--r-lg);
    background: radial-gradient(260px 160px at 100% 0, color-mix(in srgb, var(--tc) 12%, transparent), transparent 70%), var(--panel);
    border: 1px solid var(--line);
}

.pt-how .s:not(:last-child)::after {
    content: ''; position: absolute; z-index: 1; right: -15px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
    border-top: 2px solid var(--line-3); border-right: 2px solid var(--line-3); transform: rotate(45deg);
}
.pt-how .n {
    position: absolute; top: 14px; right: 18px; font-family: var(--f-display); font-size: 34px; font-weight: 800; letter-spacing: -.05em;
    line-height: 1; color: color-mix(in srgb, var(--tc) 16%, transparent);
}
.pt-how .ic {
    width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 14px;
    color: var(--tc); background: color-mix(in srgb, var(--tc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent);
    box-shadow: 0 12px 26px -16px var(--tc);
}
.pt-how b { display: block; font-size: 14px; font-weight: 800; margin-bottom: 6px; }
.pt-how b span { color: var(--mint); }
.pt-how small { display: block; color: var(--faint); font-size: 12px; font-weight: 700; line-height: 1.55; }

html.is-lite .pt-hero__aura, html.is-lite .pt-hero-art img, html.is-lite .pt-float,
html.is-lite .pt-eyebrow i, html.is-lite .pt-hero h2 b,
html.is-lite .pt-bonus::before, html.is-lite .pt-bonus__art img { animation: none; }
html.is-lite .pt-link, html.is-lite .pt-float, html.is-lite .pt-perks li { backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) {
    .pt-hero__aura, .pt-hero-art img, .pt-float, .pt-eyebrow i, .pt-hero h2 b,
    .pt-bonus::before, .pt-bonus__art img { animation: none; }
}

@media (max-width: 1500px) {
    .pt-bonus { grid-template-columns: 150px minmax(0,1fr); row-gap: 14px; padding: 18px 22px 20px 12px; }
    .pt-bonus__steps { grid-column: 1 / -1; padding-left: 10px; }
}
@media (max-width: 1280px) {
    .pt-hero { grid-template-columns: minmax(0,1fr) minmax(0,340px); }
    .pt-hero h2 { font-size: 30px; }
    .pt-link { grid-template-columns: minmax(0,1fr); gap: 14px; }
}
@media (max-width: 1180px) {
    .pt-earn { grid-template-columns: minmax(0,1fr); }
    .pt-kpis { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 1040px) {
    .pt-cols { grid-template-columns: minmax(0,1fr); }
    .pt-chart { min-height: 170px; }
}
@media (max-width: 860px) {

    .pt-hero { grid-template-columns: minmax(0,1fr); padding: 24px 20px 0; }
    .pt-hero-tx { padding-bottom: 6px; }
    .pt-hero-art { min-height: 0; max-width: 360px; width: 100%; justify-self: center; }
    .pt-link { margin: 0 -20px; padding: 16px 20px 20px; }
    .pt-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .pt-how { grid-template-columns: minmax(0,1fr); gap: 10px; }
    .pt-how .s:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -11px; margin: 0 0 0 -6px; transform: rotate(135deg); }
}
@media (max-width: 760px) {
    .pt-screen { gap: 12px; }
    .pt-bonus { grid-template-columns: 96px minmax(0,1fr); gap: 12px 14px; padding: 16px; }
    .pt-bonus__art { height: 84px; transform: scale(.72); transform-origin: left center; }
    .pt-bonus__sum b { font-size: 34px; }
    .pt-bonus__fine { padding-left: 0; }
    .pt-bonus__steps { padding-left: 0; flex-direction: column; align-items: stretch; gap: 6px; }
    .pt-bonus__steps .plus { align-self: center; font-size: 14px; line-height: 1; }
    .pt-hero { padding: 20px 16px 0; border-radius: 22px; }
    .pt-hero h2 { font-size: 23px; }
    .pt-hero h2 br { display: none; }
    .pt-hero p { font-size: 12.5px; }
    .pt-perks li { padding: 6px 10px; font-size: 11px; }
    .pt-hero-art { max-width: 300px; margin-top: 10px; }
    .pt-float { padding: 6px 10px; font-size: 11px; }
    .pt-float.f1 { font-size: 13px; left: 0; top: 10%; }
    .pt-link { margin: 0 -16px; padding: 14px 16px 16px; }
    .pt-link__row { flex-direction: column; }
    .pt-copy { width: 100%; min-height: 46px; justify-content: center; }
    .pt-share { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
    .pt-sh { min-height: 44px; padding: 0 8px; }
    .pt-sh span { font-size: 11.5px; }
    .pt-pot { padding: 18px; }
    .pt-pot b { font-size: 32px; }
    .pt-pot__coin { width: 90px; }
    .pt-kpi { min-height: 92px; padding: 14px; }
    .pt-kpi .ic { top: 12px; right: 12px; width: 28px; height: 28px; }
    .pt-kpi small { display: none; }
    .pt-chart { min-height: 140px; gap: 4px; }
    .pt-chart .bar b { font-size: 9px; }
    .pt-tiers .card-h { flex-wrap: wrap; row-gap: 6px; }
    .pt-tiers__steps { gap: 5px; padding-top: 16px; }
    .pt-tier { height: calc(70px + var(--i, 0) * 9px); padding: 8px 4px; align-items: center; text-align: center; border-radius: 12px; }
    .pt-tier .lv { display: none; }
    .pt-tier .tag { top: -10px; padding: 3px 7px; font-size: 9px; }
    .pt-tier b { font-size: 16px; }
    .pt-tier small { font-size: 9px; }
    .pt-tiers__foot { flex-direction: column; align-items: stretch; gap: 10px; }
    .pt-tiers__bar { flex: none; }
    .pt-list-h, .pt-row { grid-template-columns: 36px minmax(0,1fr) auto auto; gap: 10px; }
    .pt-row .ava { width: 36px; height: 36px; }
    .pt-list-h { display: none; }
    .pt-how .s { padding: 18px; }
}