.pt-page { --pt-or: var(--brand); --pt-bl: #2f8cff; --pt-gr: #1fbf75; --pt-vi: #8b5cf6; --pt-night: #070b18; }
.pt-tone-or { --tone: var(--pt-or); --tone2: #ffb26b; }
.pt-tone-bl { --tone: var(--pt-bl); --tone2: #7cc0ff; }
.pt-tone-gr { --tone: var(--pt-gr); --tone2: #7be3b0; }
.pt-tone-vi { --tone: var(--pt-vi); --tone2: #c4a6ff; }
.pt-tile { display: inline-flex; flex: none; width: 54px; height: 54px; align-items: center; justify-content: center; border-radius: 16px; color: #fff; background: linear-gradient(140deg, var(--tone2, #ffb26b), var(--tone, var(--brand))); box-shadow: 0 10px 24px -8px var(--tone, var(--brand)), inset 0 1px 0 rgba(255, 255, 255, .35); }
.pt-hero { position: relative; overflow: hidden; color: #f3f5f9; background:
radial-gradient(55% 80% at 12% 85%, color-mix(in srgb, var(--brand) 38%, transparent), transparent 70%),
radial-gradient(50% 75% at 88% 10%, rgba(47, 140, 255, .35), transparent 70%),
linear-gradient(160deg, #0a1022, #070b18 70%); }
.pt-hero::before { content: ''; position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); pointer-events: none; }
.pt-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.pt-hero h1 { margin: 0 0 16px; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.4; font-weight: 900; max-width: 17ch; color: #fff; }
.pt-lead { margin: 0 0 26px; font-size: 17px; line-height: 2; color: #cfd6e4; max-width: 54ch; }
.pt-lead strong, .pt-lead b { color: #ffb26b; }
.pt-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pt-ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .28); }
.pt-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.pt-hero-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; padding: 0; }
.pt-hero-stats li { display: flex; flex-direction: column; gap: 2px; min-width: 130px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.pt-hero-stats li:nth-child(1) { border-color: color-mix(in srgb, var(--brand) 60%, transparent); }
.pt-hero-stats li:nth-child(2) { border-color: rgba(47, 140, 255, .6); }
.pt-hero-stats b { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 900; color: #fff; line-height: 1.4; }
.pt-hero-stats li:nth-child(1) b { color: #ffb26b; }
.pt-hero-stats li:nth-child(2) b { color: #8cc6ff; }
.pt-hero-stats span { font-size: 12.5px; color: #aab3c5; }
.pt-hero-art { position: relative; min-height: 340px; }
.pt-card { position: absolute; width: 74%; height: auto; aspect-ratio: 760 / 479; border-radius: 3.7% / 5.9%; }
.pt-card-back { top: 4%; inset-inline-start: 0; transform: rotate(7deg); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 50px -10px rgba(47, 140, 255, .55); }
.pt-card-front { bottom: 4%; inset-inline-end: 0; transform: rotate(-6deg); box-shadow: 0 34px 70px -20px rgba(0, 0, 0, .85), 0 0 60px -12px color-mix(in srgb, var(--brand) 75%, transparent); animation: pt-float 6s ease-in-out infinite; }
@keyframes pt-float { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-10px); } }
.pt-page h2 { margin: 0 0 16px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; line-height: 1.5; }
.pt-sub { margin: -6px 0 18px; color: var(--tx2); max-width: 70ch; }
.pt-perk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.pt-perk { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border-radius: var(--r-l); border: 1px solid var(--bd); background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 9%, var(--s1)), var(--s1) 60%); overflow: hidden; }
.pt-perk::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--tone), var(--tone2)); }
.pt-perk strong { font-size: 17px; margin-top: 4px; }
.pt-perk span:last-child { color: var(--mt); font-size: 14px; line-height: 1.9; }
.pt-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 16px; }
.pt-tier-card { padding: 22px; border-radius: var(--r-l); border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--bd)); background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--tone) 12%, transparent), transparent 60%), var(--s1); }
.pt-tier-h { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.pt-tier-h h3 { margin: 0 0 2px; font-size: 18px; }
.pt-tier-h p { margin: 0; font-size: 13px; color: var(--mt); }
.pt-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 12px; }
.pt-table th { text-align: start; font-weight: 700; color: var(--mt); font-size: 12.5px; padding: 8px 10px; border-bottom: 1px solid var(--bd); }
.pt-table td { padding: 12px 10px; border-bottom: 1px solid var(--ln); vertical-align: middle; }
.pt-table tr:last-child td { border-bottom: 0; }
.pt-table b { font-size: 17px; font-weight: 900; color: var(--tone); }
.pt-bar { display: block; height: 6px; margin-top: 6px; border-radius: 99px; background: color-mix(in srgb, var(--tx) 8%, transparent); overflow: hidden; max-width: 140px; }
.pt-bar i { display: block; height: 100%; border-radius: inherit; }
.pt-bar.or i { background: linear-gradient(90deg, var(--brand), #ffb26b); }
.pt-bar.bl i { background: linear-gradient(90deg, #2f8cff, #7cc0ff); }
.pt-bar .w1 { width: 10%; } .pt-bar .w2 { width: 20%; } .pt-bar .w3 { width: 30%; } .pt-bar .w4 { width: 40%; } .pt-bar .w5 { width: 50%; }
.pt-bar .w6 { width: 60%; } .pt-bar .w7 { width: 70%; } .pt-bar .w8 { width: 80%; } .pt-bar .w9 { width: 90%; } .pt-bar .w10 { width: 100%; }
.pt-how-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.pt-how-list li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px 18px; border-radius: var(--r-l); background: var(--s1); border: 1px solid var(--bd); }
.pt-step { position: relative; display: inline-flex; width: max-content; }
.pt-step em { position: absolute; top: -8px; inset-inline-end: -10px; display: inline-flex; min-width: 24px; height: 24px; padding: 0 6px; align-items: center; justify-content: center; border-radius: 99px; background: var(--tx); color: var(--bg); font-style: normal; font-size: 12px; font-weight: 800; border: 2px solid var(--s1); }
.pt-how-list strong { font-size: 15.5px; margin-top: 4px; }
.pt-how-list li > span:last-child { color: var(--mt); font-size: 13.5px; line-height: 1.9; }
@media (min-width: 900px) {
.pt-how-list::before { content: ''; position: absolute; top: 47px; inset-inline: 40px; height: 2px; background: linear-gradient(270deg, var(--brand), #2f8cff, #1fbf75, #8b5cf6); opacity: .5; }
}
.pt-apply { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 28px; align-items: center; padding: 28px; border-radius: var(--r-xl); border: 1px solid var(--acc-bd); background: radial-gradient(90% 140% at 0% 100%, rgba(47, 140, 255, .12), transparent 60%), radial-gradient(90% 140% at 100% 0%, var(--acc-bg), transparent 60%), var(--s1); }
.pt-apply h2 { margin-bottom: 6px; }
.pt-apply-card { width: 100%; height: auto; border-radius: 3.7% / 5.9%; transform: rotate(-4deg); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .55), 0 0 40px -14px rgba(47, 140, 255, .6); }
.pt-form { margin-top: 6px; }
.pt-faq-list { display: flex; flex-direction: column; gap: 12px; }
.pt-faq-list details { border-radius: var(--r); border: 1px solid var(--bd); background: var(--s1); text-align: start; }
.pt-faq-list details[open] { border-color: var(--acc-bd); }
.pt-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; cursor: pointer; font-weight: 700; list-style: none; text-align: start; }
.pt-faq-list summary::-webkit-details-marker { display: none; }
.pt-faq-list summary svg { flex: none; transition: transform .2s; color: var(--acc); }
.pt-faq-list details[open] summary svg { transform: rotate(180deg); }
.pt-faq-list p { margin: 0; padding: 0 18px 16px; color: var(--tx2); line-height: 1.9; text-align: start; }
.pt-end { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 28px; align-items: center; padding: 34px 36px; border-radius: var(--r-xl); overflow: hidden; color: #fff; background: radial-gradient(70% 120% at 100% 0%, rgba(47, 140, 255, .55), transparent 60%), linear-gradient(120deg, #0a1022, #13204a 45%, color-mix(in srgb, var(--brand) 80%, #0a1022)); }
.pt-end h2 { color: #fff; margin-bottom: 8px; }
.pt-end p { color: #d6dbe6; margin: 0 0 20px; }
.pt-end p a { color: #ffd2a8; }
.pt-end-btn { background: #fff; color: #0a1022; border-color: #fff; }
.pt-end-btn:hover { background: #ffe8d4; color: #0a1022; }
.pt-end-card { width: 100%; height: auto; border-radius: 3.7% / 5.9%; transform: rotate(5deg); box-shadow: 0 26px 60px -20px rgba(0, 0, 0, .8); }
@media (max-width: 860px) {
.pt-hero-in, .pt-apply, .pt-end { grid-template-columns: 1fr; }
.pt-hero-in { padding-top: 40px; padding-bottom: 40px; gap: 24px; }
.pt-hero-art { min-height: 0; aspect-ratio: 1.45; max-width: 420px; width: 100%; margin: 0 auto; }
.pt-apply-card { max-width: 300px; margin: 0 auto; }
.pt-end { padding: 26px 22px; text-align: center; }
.pt-end-card { max-width: 280px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .pt-card-front { animation: none; } .pt-faq-list summary svg { transition: none; } }
.pt-panel { gap: 16px; }
.pt-count { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; padding: 12px 14px; border-radius: var(--r); background: var(--acc-bg); border: 1px solid var(--acc-bd); color: var(--tx); }
.pt-count svg { color: var(--acc); }
.pt-count b { color: var(--acc); font-size: 18px; }
.pt-count-bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--acc) 18%, transparent); overflow: hidden; }
.pt-count-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--brand); }
.pt-count-bar i.p1 { width: 10%; }
.pt-count-bar i.p2 { width: 20%; }
.pt-count-bar i.p3 { width: 30%; }
.pt-count-bar i.p4 { width: 40%; }
.pt-count-bar i.p5 { width: 50%; }
.pt-count-bar i.p6 { width: 60%; }
.pt-count-bar i.p7 { width: 70%; }
.pt-count-bar i.p8 { width: 80%; }
.pt-count-bar i.p9 { width: 90%; }
.pt-count-bar i.p10 { width: 100%; }
.pt-count.is-done { background: var(--ok-bg); border-color: var(--ok-bd); }
.pt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.pt-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r); background: var(--s2); border: 1px solid var(--bd); }
.pt-stats span, .pt-money span { font-size: 12.5px; color: var(--mt); }
.pt-stats b { font-size: 20px; }
.pt-stats small { font-size: 12px; color: var(--mt); }
.pt-money { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pt-money > div { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--r); border: 1px solid var(--bd); }
.pt-money > div:first-child { border-color: var(--acc-bd); background: var(--acc-bg); }
.pt-money b { font-size: 20px; }
.pt-money small { font-size: 12px; color: var(--mt); font-weight: 400; }
.pt-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px; border-radius: var(--r); border: 1px dashed var(--brand); background: var(--acc-bg); }
.pt-code > span { flex-basis: 100%; font-size: 13.5px; }
.pt-code b { font-size: 22px; letter-spacing: 2px; font-family: ui-monospace, monospace; }
.pt-acts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.pt-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.pt-inline .field { min-width: 140px; margin: 0; }
.pt-h3 { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 16px; }
.pt-h3 svg { color: var(--acc); }
.pt-stores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pt-stores > li { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r); border: 1px solid var(--bd); background: var(--s2); }
.pt-store-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pt-store-n { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--tx2); }
.pt-add > summary, .pt-hist > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; list-style: none; padding: 10px 0; }
.pt-add > summary::-webkit-details-marker, .pt-hist > summary::-webkit-details-marker { display: none; }
.pt-hist > summary svg:last-child { margin-inline-start: auto; transition: transform .2s; }
.pt-hist[open] > summary svg:last-child { transform: rotate(180deg); }
.pt-hist h4 { margin: 16px 0 4px; }
.pt-codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pt-codes li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-s); border: 1px solid var(--bd); background: var(--s2); }
.pt-codes b { font-family: ui-monospace, monospace; letter-spacing: 1px; }
.pt-codes small { color: var(--acc); margin-inline-end: auto; }
.pt-invite { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.pt-invite h2 { margin: 0 0 4px; font-size: 19px; }
.pt-invite p { margin: 0; color: var(--tx2); }
.pt-invite-ico { display: inline-flex; width: 58px; height: 58px; align-items: center; justify-content: center; border-radius: 18px; background: var(--brand); color: var(--brand-ink); }
.pt-foot { text-align: center; }
.pill-mute { background: var(--s3); color: var(--mt); }
.pill-info { background: var(--info-bg); color: var(--info); }
@media (max-width: 860px) {
.pt-invite { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.pt-money { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pt-faq-list summary svg, .pt-hist > summary svg:last-child { transition: none; } }
@media (max-width: 859.98px) {
:is(.pt-hero-stats, .pt-how-list) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
:is(.pt-hero-stats, .pt-how-list) > * { min-width: 0; }
:is(.pt-hero-stats, .pt-how-list, .pt-stats) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.pt-actions > .btn { flex: 1 1 140px; }
}
.ps-map { position: relative; width: 100%; max-width: 440px; justify-self: center; aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); background:
radial-gradient(60% 70% at 50% 40%, rgba(47, 140, 255, .22), transparent 70%),
linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 28px 28px,
linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 28px 28px,
#0b1430; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); }
.ps-map svg { display: block; width: 100%; height: 100%; }
.ps-road { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 7; stroke-linecap: round; }
.ps-road-2 { stroke: rgba(255, 178, 107, .28); stroke-width: 5; }
.ps-pin path { stroke: rgba(255, 255, 255, .9); stroke-width: 2; }
.ps-pin circle { fill: #fff; }
.ps-pin-or path { fill: var(--brand); }
.ps-pin-bl path { fill: var(--pt-bl); }
.ps-pin-gr path { fill: var(--pt-gr); }
.ps-pin-vi path { fill: var(--pt-vi); }
.ps-pin-or { filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--brand) 70%, transparent)); }
.ps-cities { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 20px; }
.ps-cities a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--bd); background: var(--s1); color: var(--tx); font-weight: 700; font-size: 14px; }
.ps-cities a:hover { border-color: var(--acc-bd); color: var(--acc); }
.ps-cities small { color: var(--mt); font-weight: 400; }
.ps-city + .ps-city { margin-top: 28px; }
.ps-city { scroll-margin-top: 90px; }
.ps-city-h { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 17px; }
.ps-city-h svg { color: var(--acc); }
.ps-city-h small { color: var(--mt); font-size: 13px; }
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ps-store { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--r-l); border: 1px solid var(--bd); background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 8%, var(--s1)), var(--s1) 55%); overflow: hidden; }
.ps-store::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--tone), var(--tone2)); }
.ps-store-h { display: flex; align-items: center; gap: 14px; }
.ps-mono { width: 48px; height: 48px; border-radius: 14px; font-size: 22px; font-weight: 900; }
.ps-store h3 { margin: 0; font-size: 17px; line-height: 1.6; }
.ps-where { margin: 0; font-size: 13px; color: var(--mt); }
.ps-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--tx2); }
.ps-facts li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.9; }
.ps-facts svg { flex: none; margin-top: 4px; color: var(--tone); }
.ps-facts a { color: var(--tx); }
.ps-site { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 40px; margin-top: auto; padding: 0 14px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--tone) 45%, var(--bd)); color: var(--tx); font-size: 14px; font-weight: 700; }
.ps-site svg { color: var(--tone); }
.ps-site:hover { background: color-mix(in srgb, var(--tone) 10%, transparent); color: var(--tx); }
.ps-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 24px; border-radius: var(--r-xl); border: 1px dashed var(--bd); background: var(--s1); text-align: center; }
.ps-empty h2 { margin: 6px 0 0; }
.ps-empty p { margin: 0; max-width: 56ch; color: var(--tx2); line-height: 1.9; }
.ps-join-art { display: inline-flex; justify-self: center; align-items: center; justify-content: center; width: 140px; height: 140px; border-radius: 36px; color: #fff; background: linear-gradient(140deg, #ffb26b, var(--brand)); box-shadow: 0 24px 50px -16px color-mix(in srgb, var(--brand) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); transform: rotate(-6deg); }
@media (max-width: 860px) {
.ps-map { display: none; }
.ps-join-art { width: 96px; height: 96px; border-radius: 26px; }
.ps-join-art svg { width: 44px; height: 44px; }
}