/* ==========================================================================
   Home Pricing — built on the supplied 1950px-wide mockup.
   Sizes are mockup pixels (u) scaled to the container width.
   ========================================================================== */

.hpr {
	--hpr-accent: #12c8ee;
	--hpr-btn: #02ddff;
	--hpr-bg: #020e15;
	--u: min(calc(100cqi / 1950), 1px);
	position: relative;
	overflow: hidden;
	container-type: inline-size;
	background: radial-gradient(55% 45% at 50% 0, rgba(0, 110, 150, .16), transparent 70%), var(--hpr-bg);
	color: #fff;
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}
.hpr *, .hpr *::before, .hpr *::after { box-sizing: border-box; }
.hpr h2, .hpr h3, .hpr p, .hpr ul { margin: 0; padding: 0; }
.hpr ul { list-style: none; }
.hpr img { border: 0; box-shadow: none; max-width: none; }

.hpr .hpr__swoosh { position: absolute; pointer-events: none; fill: none; stroke-linecap: round; overflow: visible; }
.hpr .hpr__swoosh path { stroke: #36d9f7; stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(0, 222, 245, .9)); }
.hpr .hpr__swoosh path + path { stroke: rgba(54, 217, 247, .35); stroke-width: 1; }
.hpr .hpr__swoosh--l { left: 0; top: 0; width: calc(420 * var(--u)); height: calc(200 * var(--u)); }
.hpr .hpr__swoosh--r { right: 0; top: calc(95 * var(--u)); width: calc(390 * var(--u)); height: calc(110 * var(--u)); }

.hpr .hpr__in { position: relative; width: calc(1950 * var(--u)); margin: 0 auto; padding: calc(20 * var(--u)) calc(53 * var(--u)) calc(29 * var(--u)) calc(56 * var(--u)); }

.hpr .hpr__head { text-align: center; }
.hpr .hpr__pill { display: inline-flex; align-items: center; height: calc(33 * var(--u)); padding: 0 calc(21 * var(--u)); border: 1px solid rgba(60, 210, 240, .55); border-radius: 99px; background: rgba(2, 30, 40, .6); font-size: calc(15 * var(--u)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #3fd6f2; box-shadow: 0 0 calc(14 * var(--u)) rgba(0, 200, 240, .18); }
.hpr .hpr__h2 { margin-top: calc(7 * var(--u)); font-size: calc(53 * var(--u)); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: #fff; }
.hpr .hpr__h2 span { color: var(--hpr-accent); }
.hpr .hpr__sub { margin-top: calc(15 * var(--u)); font-size: calc(17.5 * var(--u)); line-height: calc(25 * var(--u)); color: #d2dade; }

.hpr .hpr__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(18 * var(--u)); margin-top: calc(25.5 * var(--u)); }

.hpr .hpr__card {
	position: relative; display: flex; flex-direction: column;
	height: calc(565 * var(--u)); padding: calc(3 * var(--u)) calc(3 * var(--u)) 0;
	border: 1px solid rgba(80, 205, 235, .34); border-radius: calc(16 * var(--u));
	background: linear-gradient(180deg, rgba(5, 26, 36, .9), rgba(2, 13, 20, .96) 45%);
	box-shadow: 0 0 calc(28 * var(--u)) rgba(0, 190, 230, .1), inset 0 1px 0 rgba(170, 245, 255, .1);
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
.hpr .hpr__card:hover { transform: translateY(calc(-8 * var(--u))); border-color: rgba(90, 230, 255, .7); box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(0, 190, 230, .22), 0 0 calc(30 * var(--u)) rgba(0, 222, 245, .18), inset 0 1px 0 rgba(170, 245, 255, .16); }

.hpr .hpr__art { position: relative; height: calc(198 * var(--u)); overflow: hidden; border-radius: calc(13 * var(--u)) calc(13 * var(--u)) 0 0; }
.hpr .hpr__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.hpr .hpr__card:hover .hpr__art img { transform: scale(1.04); }

.hpr .hpr__body { display: flex; flex: 1; flex-direction: column; padding: 0 calc(19 * var(--u)) calc(20 * var(--u)) calc(21 * var(--u)); }
.hpr .hpr__title { margin-top: calc(2 * var(--u)); font-size: calc(28.5 * var(--u)); font-weight: 700; line-height: calc(34 * var(--u)); letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.hpr .hpr__price { display: flex; align-items: baseline; gap: calc(8 * var(--u)); height: calc(44 * var(--u)); margin-top: calc(3 * var(--u)); color: var(--hpr-accent); white-space: nowrap; }
.hpr .hpr__price small { font-size: calc(20 * var(--u)); font-weight: 500; }
.hpr .hpr__price b { font-size: calc(39 * var(--u)); font-weight: 800; line-height: calc(44 * var(--u)); letter-spacing: -.02em; text-shadow: 0 0 calc(14 * var(--u)) rgba(0, 210, 245, .35); }
.hpr .hpr__price em { margin-left: calc(-5 * var(--u)); font-size: calc(20 * var(--u)); font-style: normal; font-weight: 500; }
.hpr .hpr__note { display: flex; align-items: center; height: calc(44 * var(--u)); margin-top: calc(3 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 600; color: var(--hpr-accent); }
.hpr .hpr__text { margin-top: calc(7 * var(--u)); padding-bottom: calc(20 * var(--u)); border-bottom: 1px solid rgba(120, 200, 225, .16); font-size: calc(17.6 * var(--u)); line-height: calc(24 * var(--u)); color: #e8eef1; }
.hpr .hpr__note + .hpr__text { margin-top: calc(1 * var(--u)); padding-bottom: calc(10 * var(--u)); font-size: calc(16.8 * var(--u)); line-height: calc(22.5 * var(--u)); }
.hpr .hpr__list { margin-top: calc(10.5 * var(--u)); padding-left: calc(4 * var(--u)); }
.hpr .hpr__list li { display: flex; align-items: center; gap: calc(16 * var(--u)); height: calc(24.7 * var(--u)); font-size: calc(15.6 * var(--u)); color: #dfe6ea; white-space: nowrap; }
.hpr .hpr__tick { flex: none; width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.hpr .hpr__tick circle { fill: #1fb9e6; }
.hpr .hpr__tick path { fill: none; stroke: #03202a; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

.hpr .hpr__btn {
	display: flex; align-items: center; justify-content: space-between;
	height: calc(54 * var(--u)); margin: auto calc(-1 * var(--u)) 0 0; padding: 0 calc(38 * var(--u)) 0 calc(47 * var(--u));
	border: 1.5px solid rgba(80, 215, 245, .7); border-radius: 99px;
	background: rgba(2, 18, 26, .6); color: #fff;
	font-size: calc(17 * var(--u)); font-weight: 700; text-decoration: none; white-space: nowrap;
	transition: background-color .3s ease, box-shadow .3s ease, color .3s ease, border-color .3s ease;
}
.hpr .hpr__btn svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); fill: none; stroke: #3fd6f2; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.hpr .hpr__btn:hover { color: #fff; border-color: var(--hpr-btn); box-shadow: 0 0 calc(22 * var(--u)) rgba(2, 221, 255, .35); }
.hpr .hpr__btn:hover svg { transform: translateX(4px); }
.hpr .hpr__btn--solid { border-color: transparent; background: linear-gradient(90deg, #06e3ff, #20c9f0); color: #03181e; box-shadow: 0 0 calc(26 * var(--u)) rgba(2, 221, 255, .4); }
.hpr .hpr__btn--solid svg { stroke: #03181e; }
.hpr .hpr__btn--solid:hover { color: #03181e; box-shadow: 0 0 calc(40 * var(--u)) rgba(2, 221, 255, .65); }

/* ---------------------------------------------------------------- motion */
@keyframes hpr-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.hpr--motion.hpr--js .hpr__head > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.hpr--motion.hpr--js .hpr__head > :nth-child(2) { transition-delay: .1s; }
.hpr--motion.hpr--js .hpr__head > :nth-child(3) { transition-delay: .2s; }
.hpr--motion.hpr--js .hpr__card { opacity: 0; transform: translate3d(0, calc(70 * var(--u)), 0) scale(.96); transition: opacity .8s ease calc(.3s + var(--i) * .11s), transform .9s cubic-bezier(.2, .7, .2, 1) calc(.3s + var(--i) * .11s), box-shadow .35s ease, border-color .35s ease; }
.hpr--motion.hpr--js .hpr__swoosh path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hpr--motion.hpr--js.is-on .hpr__head > * { opacity: 1; transform: none; }
.hpr--motion.hpr--js.is-on .hpr__card { opacity: 1; transform: none; }
.hpr--motion.hpr--js.is-on .hpr__card:hover { transform: translateY(calc(-8 * var(--u))); transition-delay: 0s; }
.hpr--motion.hpr--js.is-on .hpr__swoosh path { animation: hpr-draw 1.6s cubic-bezier(.6, 0, .2, 1) .2s both; }
@media (prefers-reduced-motion: reduce) {
	.hpr--motion.hpr--js .hpr__head > *, .hpr--motion.hpr--js .hpr__card { opacity: 1; transform: none; transition: none; }
	.hpr--motion.hpr--js .hpr__swoosh path { stroke-dashoffset: 0; animation: none; }
}

/* ---------------------------------------------------------------- narrower screens */
@container (max-width: 1280px) {
	.hpr > * { --u: .84px; }
	.hpr .hpr__in { width: auto; padding: 40px 24px 36px; }
	.hpr .hpr__h2 { font-size: clamp(30px, 5.2cqi, 46px); }
	.hpr .hpr__grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
	.hpr .hpr__card { height: auto; min-height: 560px; }
	.hpr .hpr__art { height: auto; aspect-ratio: 346 / 198; }
}
@container (max-width: 700px) {
	.hpr > * { --u: 1px; }
	.hpr .hpr__in { padding: 44px 16px 36px; }
	.hpr .hpr__pill { font-size: 13px; height: 30px; }
	.hpr .hpr__h2 { font-size: clamp(28px, 8.4cqi, 38px); }
	.hpr .hpr__sub { font-size: 15.5px; line-height: 1.6; }
	.hpr .hpr__sub br, .hpr .hpr__text br { display: none; }
	.hpr .hpr__grid { grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
	.hpr .hpr__card { min-height: 0; }
	.hpr .hpr__title { font-size: 25px; white-space: normal; }
	.hpr .hpr__text, .hpr .hpr__note + .hpr__text { font-size: 16px; line-height: 1.55; }
	.hpr .hpr__list li { height: auto; min-height: 30px; font-size: 15px; white-space: normal; }
	.hpr .hpr__btn { margin-top: 20px; }
	.hpr .hpr__swoosh--l { width: 220px; height: 110px; }
	.hpr .hpr__swoosh--r { top: 60px; width: 180px; height: 60px; }
}