.pg:has(.pt-hero) { padding-top: 0; }
.pt-hero { position: relative; display: grid; place-items: center; min-height: min(800px, calc(100vh - 96px)); min-height: min(800px, calc(100svh - 96px)); margin: 80px 16px 0; padding: 80px 24px;
  overflow: hidden; border-radius: 12px; background: #0b1226; isolation: isolate; text-align: center; }
.pt-hero-media { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pt-hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 52%, rgb(4 8 20 / 34%), transparent 72%), linear-gradient(180deg, rgb(4 8 20 / 40%), rgb(4 8 20 / 40%) 60%, rgb(4 8 20 / 72%)); }
.pt-hero-copy { display: flex; flex-direction: column; align-items: center; max-width: 1040px; }
.pt-hero h1 { margin: 0; color: #fff; font: 700 64px/72px var(--dw-display); letter-spacing: -0.04em; text-wrap: balance; text-shadow: 0 2px 30px rgb(4 8 20 / 45%); }
.pt-hero h1 .pg-accent { text-shadow: 0 0 44px rgb(22 187 250 / 38%); }
.pt-lede { max-width: 768px; margin: 12px 0 32px; color: #fff; font: 400 18px/28px var(--dw-body); letter-spacing: -0.01em; text-wrap: pretty; text-shadow: 0 1px 18px rgb(4 8 20 / 60%); }

.pt-section { max-width: 1328px; margin: 0 auto; padding: 80px 24px 0; }
.pt-head { max-width: 820px; margin: 0 auto 40px; text-align: center; }
.pt-head h2 { margin: 0; color: #fff; font: 700 48px/56px var(--dw-display); letter-spacing: -0.04em; text-wrap: balance; }
.pt-head p { max-width: 640px; margin: 12px auto 0; color: var(--dw-subtle); font: 400 14px/20px var(--dw-body); }

.pt-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.pt-steps li { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--dw-surface-2); }
.pt-step-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #0b1630; }
.pt-step-video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.pt-steps li:hover .pt-step-video { transform: scale(1.06); }
.pt-step-media::after { content: ""; position: absolute; top: auto; right: 0; bottom: 0; left: 0; inset: auto 0 0; height: 40%; background: linear-gradient(180deg, transparent, var(--dw-surface-2)); pointer-events: none; }
.pt-step-n { position: absolute; top: 16px; left: 16px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 50%; background: rgb(4 8 20 / 45%); color: #fff; font: 600 14px/1 var(--dw-display); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pt-step-copy { padding: 4px 24px 24px; }
.pt-steps h3 { margin: 0 0 12px; color: #fff; font: 600 18px/28px var(--dw-display); letter-spacing: -0.01em; }
.pt-steps p { margin: 0; color: var(--dw-subtle); font: 400 14px/20px var(--dw-body); }

.pt-calc { display: grid; grid-template-columns: 434px minmax(0, 1fr); gap: 12px; }
.pt-calc-side { display: flex; flex-direction: column; gap: 12px; }
.pt-panel { padding: 4px; border: 1px solid rgb(255 255 255 / 6%); border-radius: 16px; }
.pt-panel-in { display: flex; flex-direction: column; gap: 28px; padding: 20px; border-radius: 12px; background: var(--dw-surface-2); }
.pt-field { display: flex; flex-direction: column; gap: 10px; }
.pt-field > label { color: var(--dw-subtle); font: 400 14px/20px var(--dw-body); }
.pt-field strong { color: #fff; font: 600 24px/30px var(--dw-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pt-field strong em { color: var(--dw-subtle); font-style: normal; }
.pt-field input[type="range"] { --fill: 50%; width: 100%; height: 28px; margin: 4px 0 0; border-radius: 6px; cursor: pointer; -moz-appearance: none; appearance: none; -webkit-appearance: none;
  background:
    linear-gradient(90deg, rgb(43 106 254 / 0%), rgb(43 106 254 / 70%) calc(var(--fill) - 2%), #16bbfa var(--fill), transparent var(--fill)) no-repeat,
    radial-gradient(circle, rgb(255 255 255 / 22%) 1.2px, transparent 1.6px) 12px 50% / 24px 100% repeat-x,
    #0d0e12;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%), inset 0 0 12px rgb(43 106 254 / 12%); }
.pt-field input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgb(43 106 254 / 30%), 0 4px 12px rgb(0 0 0 / 40%);
  -webkit-appearance: none; -webkit-transition: box-shadow .2s; transition: box-shadow .2s; }
.pt-field input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgb(43 106 254 / 30%), 0 4px 12px rgb(0 0 0 / 40%); }
.pt-field input[type="range"]:hover::-webkit-slider-thumb, .pt-field input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 7px rgb(43 106 254 / 35%), 0 4px 12px rgb(0 0 0 / 40%); }
.pt-field input[type="range"]:focus-visible { outline: 2px solid #16bbfa; outline-offset: 3px; }
.pt-total { padding: 6px; border: 1px solid rgb(255 255 255 / 20%); border-radius: 16px; }
.pt-total-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; border-radius: 12px;
  background: radial-gradient(120% 140% at 0% 0%, rgb(43 106 254 / 30%), transparent 60%), radial-gradient(90% 120% at 100% 100%, rgb(22 187 250 / 16%), transparent 60%), var(--dw-surface-3); }
.pt-total-in > div { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.pt-total-in span { color: var(--dw-muted); font: 400 14px/20px var(--dw-body); }
.pt-total-in strong { color: #fff; font: 700 32px/38px var(--dw-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pt-total .btn { flex: none; }
.pt-chart { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 425px; padding: 48px 32px 16px; overflow: hidden;
  border-radius: 12px; background: radial-gradient(80% 70% at 100% 0%, rgb(43 106 254 / 12%), transparent 70%), var(--dw-surface-2); }
.pt-bars, .pt-months { display: grid; grid-template-columns: repeat(12, minmax(0, 46px)); justify-content: end; gap: 12px; margin: 0; padding: 0 12px 0 0; list-style: none; }
.pt-bars { align-items: end; height: 320px; }
.pt-bars li { position: relative; display: flex; align-items: flex-end; height: 100%; outline: 0; }
.pt-bars i { display: block; width: 100%; height: max(4px, var(--h)); border-radius: 4px 4px 0 0; transform-origin: bottom;
  background: linear-gradient(180deg, #16bbfa, #2b6afe 55%, rgb(43 106 254 / 50%)); opacity: calc(.25 + var(--i) * .068);
  transition: height .55s cubic-bezier(.16, 1, .3, 1), opacity .3s, filter .3s; }
.pt-bars li.is-last i { opacity: 1; box-shadow: 0 0 28px rgb(22 187 250 / 45%); }
.pt-bars li:hover i { opacity: 1; filter: brightness(1.15); }
.pt-bar-label { position: absolute; bottom: calc(max(4px, var(--h)) + 8px); left: 50%; z-index: 1; padding: 4px 8px; border-radius: 6px; background: #23262a; color: #fff;
  font: 500 12px/16px var(--dw-body); white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; transform: translate(-50%, 4px); pointer-events: none;
  transition: opacity .15s, transform .2s, bottom .55s cubic-bezier(.16, 1, .3, 1); }
.pt-bars li.is-last .pt-bar-label, .pt-bars li:hover .pt-bar-label { opacity: 1; transform: translate(-50%, 0); }
.pt-bars li.is-last .pt-bar-label { left: auto; right: 0; transform: none; }
.pt-chart[data-unseen] .pt-bars i { height: 4px; }
.pt-chart[data-unseen] .pt-bar-label { opacity: 0; }
.pt-chart:not([data-unseen]) .pt-bars i { transition-delay: calc(var(--i) * var(--stagger, 0ms)); }
.pt-months li { color: var(--dw-subtle); font: 400 12px/16px var(--dw-body); text-align: center; }
.pt-fine { max-width: 768px; margin: 20px auto 0; color: var(--dw-subtle); font: 400 14px/20px var(--dw-body); text-align: center; }

.pt-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pt-more li { display: flex; flex-direction: column; gap: 56px; min-height: 240px; padding: 24px; border-radius: 16px; background: var(--dw-surface-2);
  transition: background .3s, transform .3s cubic-bezier(.16, 1, .3, 1); }
.pt-more li:hover { background: var(--dw-surface-3); transform: translateY(-2px); }
.pt-ring { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid rgb(105 170 255 / 45%); border-radius: 50%; color: #8cc4ff;
  background: radial-gradient(circle at 50% 30%, rgb(43 106 254 / 35%), rgb(255 255 255 / 4%) 70%); box-shadow: 0 0 22px rgb(43 106 254 / 22%); }
.pt-more li:hover .pt-ring svg { animation: pt-nudge .6s cubic-bezier(.16, 1, .3, 1); }
@keyframes pt-nudge { 40% { transform: translateY(-3px) rotate(-6deg); } }
.pt-more h3 { margin: 0 0 12px; color: #fff; font: 600 18px/28px var(--dw-display); letter-spacing: -0.01em; }
.pt-more p { margin: 0; color: var(--dw-subtle); font: 400 14px/20px var(--dw-body); }

.pt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.pt-stats > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 384px; padding: 40px 20px; text-align: center; }
.pt-stats > div + div { border-left: 1px solid rgb(255 255 255 / 6%); }
.pt-stats dt { font: 700 120px/1 var(--dw-display); letter-spacing: -0.05em; background: linear-gradient(180deg, #fff 10%, #16bbfa 55%, #2b6afe); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pt-stats dd { max-width: 260px; margin: 0; color: #fff; font: 600 16px/24px var(--dw-body); }
.pt-stats-cta { display: flex; justify-content: center; margin-top: 40px; }

.pt-faq { max-width: 884px; padding-top: 80px; }
.pt-faq h2 { text-align: center; }
.pt-close-line { max-width: 560px; margin: -8px auto 26px; }

@media (max-width: 1100px) {
  .pt-calc { grid-template-columns: minmax(0, 1fr); }
  .pt-calc-side { order: 2; }
  .pt-steps { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; margin-inline: auto; }
}
@media (max-width: 760px) {
  .pt-hero { min-height: 608px; margin: 72px 16px 0; padding: 64px 16px; }
  .pt-hero-media { object-position: 50% 30%; }
  .pt-hero h1 { font-size: 40px; line-height: 48px; }
  .pt-lede { font-size: 16px; line-height: 24px; }
  .pt-section { padding: 64px 24px 0; }
  .pt-head { margin-bottom: 32px; }
  .pt-head h2 { font-size: 28px; line-height: 36px; }
  .pt-total-in { flex-direction: column; align-items: stretch; }
  .pt-chart { min-height: 0; padding: 40px 12px 10px; }
  .pt-bars { height: 168px; }
  .pt-bars, .pt-months { gap: 8px; padding: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pt-bars li:not(.is-last):hover .pt-bar-label { opacity: 0; }
  .pt-months li { font-size: 10px; }
  .pt-more { grid-template-columns: minmax(0, 1fr); }
  .pt-more li { gap: 32px; min-height: 0; }
  .pt-stats { grid-template-columns: minmax(0, 1fr); }
  .pt-stats > div { min-height: 288px; }
  .pt-stats > div + div { border-left: 0; }
  .pt-stats dt { font-size: 80px; }
  .pt-faq { padding-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-bars i, .pt-bar-label, .pt-step-video, .pt-more li { transition: none; }
  .pt-chart[data-unseen] .pt-bars i { height: max(4px, var(--h)); }
  .pt-more li:hover .pt-ring svg { animation: none; }
}

.pt-hero-cards { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 0; pointer-events: none; }
.pt-card { position: absolute; display: grid; gap: 4px; padding: 14px 18px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 16px;
  background: rgb(12 16 32 / 46%); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 50px rgb(0 0 0 / 35%), inset 0 1px 0 rgb(255 255 255 / 10%); color: #fff; text-align: left; }
.pt-card-k { color: rgb(255 255 255 / 70%); font: 500 12.5px/1.3 var(--dw-body); }
.pt-card-k em { font-style: normal; color: rgb(255 255 255 / 92%); }
.pt-card strong { font: 700 26px/1.1 var(--dw-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pt-card-earn { left: 5%; bottom: 13%; min-width: 210px; animation: pt-float 7s ease-in-out infinite; }
.pt-spark { width: 120px; height: 32px; margin-top: 4px; }
.pt-spark path { fill: none; stroke: #16bbfa; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgb(22 187 250 / 70%));
  stroke-dasharray: 160; stroke-dashoffset: 160; animation: pt-draw 2.6s cubic-bezier(.16, 1, .3, 1) .4s forwards; }
.pt-card-ping { right: 5%; top: 15%; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; min-width: 230px;
  animation: pt-float 8s ease-in-out -2s infinite; transition: opacity .35s, transform .35s cubic-bezier(.16, 1, .3, 1); }
.pt-card-ping .pt-card-k, .pt-card-ping strong { grid-column: 2; }
.pt-card-ping strong { color: #4ade80; font-size: 22px; }
.pt-ping-dot { grid-row: 1 / span 2; width: 10px; height: 10px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgb(74 222 128 / 60%); animation: pt-pulse 1.8s ease-out infinite; }
.pt-card-ping.is-out { opacity: 0; transform: translateY(-10px) scale(.97); }
@keyframes pt-float { 50% { translate: 0 -8px; } }
@keyframes pt-draw { to { stroke-dashoffset: 0; } }
@keyframes pt-pulse { 70% { box-shadow: 0 0 0 10px rgb(74 222 128 / 0%); } 100% { box-shadow: 0 0 0 0 rgb(74 222 128 / 0%); } }
@media (max-width: 900px) {
  .pt-card-earn { display: none; }
  .pt-card-ping { position: relative; top: auto; right: auto; bottom: auto; left: auto; inset: auto; margin: 22px auto 0; min-width: 0; width: -webkit-max-content; width: max-content; }
  .pt-hero-cards { position: static; order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-card, .pt-ping-dot { animation: none; }
  .pt-spark path { animation: none; stroke-dashoffset: 0; }
}