.pricing-page { overflow-x: hidden; background: #05070b; }
.pricing-header { max-width: 1260px; }
.pricing-header .top-nav a[aria-current="page"] { color: #fff; border-bottom: 1px solid var(--blue); }
.pricing-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 320px; padding: 46px 24px 58px; text-align: center; }
.pricing-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at -2% 73%, #641508 0, transparent 34%), radial-gradient(ellipse at 102% 70%, #063d88 0, transparent 38%), #05070b; }
.pricing-energy { position: absolute; z-index: -1; top: 60px; width: 48%; height: 205px; opacity: .7; pointer-events: none; }
.pricing-energy::before, .pricing-energy::after { content: ""; position: absolute; inset: 0; border-radius: 50%; filter: blur(1px); transform: rotate(-17deg); }
.pricing-energy-red { left: -11%; }
.pricing-energy-blue { right: -11%; transform: scaleX(-1); }
.pricing-energy-red::before { border-top: 2px solid #e13816; box-shadow: 0 -7px 14px #ee3b14, 0 -19px 25px #8a1c0e; }
.pricing-energy-red::after { top: 37px; border-top: 1px solid #fa5e21; box-shadow: 0 -5px 10px #ef471d; }
.pricing-energy-blue::before { border-top: 2px solid #117eee; box-shadow: 0 -7px 14px #1689ff, 0 -19px 25px #084988; }
.pricing-energy-blue::after { top: 37px; border-top: 1px solid #1ebdff; box-shadow: 0 -5px 10px #008dff; }
.pricing-hero h1 { margin: 12px auto 4px; font-size: clamp(34px, 4.3vw, 56px); line-height: 1.13; letter-spacing: -.045em; }
.pricing-hero h1 span { background: linear-gradient(100deg, #ff4c39 3%, #bb62e8 51%, #1f9fff 98%); background-clip: text; -webkit-background-clip: text; color: transparent; }
.pricing-hero > p:not(.eyebrow) { max-width: 590px; margin: 9px auto 22px; color: #b2bfcc; font-size: 13px; }
.billing-toggle { display: inline-flex; gap: 2px; margin: 0; padding: 4px; border: 1px solid #334151; border-radius: 100px; background: #090d13; box-shadow: 0 0 22px #0008; }
.billing-toggle label { cursor: pointer; }
.billing-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.billing-toggle label span { display: block; min-width: 110px; padding: 8px 15px; border: 1px solid transparent; border-radius: 100px; color: #a8b5c3; font-size: 11px; font-weight: 800; }
.billing-toggle input:checked + span { border-color: #2d7cd0; color: #fff; background: linear-gradient(105deg, #721c11, #081830 70%, #114f8d); box-shadow: 0 0 11px #097dd346; }
.billing-toggle input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 3px; }
.billing-toggle small { margin-left: 5px; color: #46bdff; font-size: 9px; }
.pricing-hero .billing-note { margin: 8px 0 0; color: #8092a4; font-size: 10px; }
.pricing-main { position: relative; width: min(100%, 1110px); margin: -40px auto 0; padding: 0 26px 65px; }
.pricing-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; align-items: stretch; }
.pricing-card { position: relative; display: flex; flex-direction: column; min-height: 405px; padding: 25px 24px; border: 1px solid #34404b; border-radius: 11px; background: linear-gradient(155deg, #11151a, #0a0d12 80%); box-shadow: 0 16px 28px #0008; }
.pricing-card-pro { border-color: #1d88e3; background: radial-gradient(circle at 84% 4%, #112646, transparent 44%), linear-gradient(155deg, #15151c, #0c1119 79%); box-shadow: -4px 0 17px #e12a1b55, 4px 0 18px #168cff77, 0 0 0 1px #ff4d222a inset; }
.pricing-card-pro::before { content: ""; position: absolute; inset: -1px auto -1px -1px; width: 5px; border-radius: 11px 0 0 11px; background: linear-gradient(#ff4d28, #d32c19 55%, transparent); box-shadow: 0 0 17px #ff3c24; }
.popular-badge { position: absolute; top: -13px; left: 50%; min-width: 130px; padding: 5px 14px; transform: translateX(-50%); border: 1px solid #477cc5; border-radius: 100px; background: linear-gradient(100deg, #5b1435, #153b83); color: #fff; font-size: 10px; font-weight: 900; text-align: center; white-space: nowrap; box-shadow: 0 0 15px #2274dd66; }
.pricing-tier { margin: 0 0 4px; color: #fff; font-size: 15px; font-weight: 900; letter-spacing: .035em; }
.pricing-card-head h2 { min-height: 38px; margin: 0; color: #b5c0cc; font-size: 12px; font-weight: 500; line-height: 1.4; }
.pricing-price { display: flex; align-items: baseline; gap: 3px; margin: 12px 0 0; line-height: 1; }
.pricing-price strong { font-size: 39px; font-weight: 700; letter-spacing: -.045em; }
.pricing-price span { color: #c5cbd3; font-size: 13px; }
.pricing-billing { margin: 4px 0 15px; color: #94a2af; font-size: 10px; }
.pricing-action { display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 41px; padding: 9px; border: 1px solid #ee492e; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 800; text-align: center; transition: box-shadow .2s, transform .2s; }
.pricing-action:hover { transform: translateY(-2px); box-shadow: 0 0 16px #fd402e66; }
.pricing-action-pro { border-color: #168eff; background: linear-gradient(100deg, #bc2113, #341122 48%, #0758a7); box-shadow: -4px 0 13px #fa37284d, 4px 0 15px #117bdc70; }
.pricing-features { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.pricing-features li { position: relative; padding-left: 22px; color: #bdc7d2; font-size: 11px; line-height: 1.3; }
.pricing-features li::before { content: ""; position: absolute; left: 0; top: -1px; width: 14px; height: 14px; border: 1px solid #71818e; border-radius: 50%; }
.pricing-features li::after { content: ""; position: absolute; left: 4px; top: 3px; width: 6px; height: 4px; border-left: 1px solid #e1ecf6; border-bottom: 1px solid #e1ecf6; transform: rotate(-45deg); }
.pricing-scope { max-width: 760px; margin: 17px auto 0; color: #8fa0b0; font-size: 11px; line-height: 1.6; text-align: center; }
.pricing-scope a { color: #62bdff; text-decoration: underline; text-underline-offset: 3px; }
.compare-section, .plan-fit, .pricing-faq { margin-top: 44px; }
.pricing-section-title { display: flex; align-items: center; gap: 16px; margin-bottom: 19px; }
.pricing-section-title > span { flex: 1; height: 1px; background: #2b3642; }
.pricing-section-title h2 { margin: 0; font-size: 17px; font-weight: 600; text-align: center; white-space: nowrap; }
.compare-wrap { overflow-x: auto; border: 1px solid #303a45; border-radius: 10px; background: #0c1015; }
.compare-table { min-width: 650px; font-size: 11px; }
.compare-table th, .compare-table td { padding: 10px 13px; border: 1px solid #27313b; }
.compare-table tr:first-child th { border-top: 0; }
.compare-table tr > *:first-child { border-left: 0; }
.compare-table tr > *:last-child { border-right: 0; }
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table th { color: #d6e1ec; font-weight: 700; text-align: left; }
.compare-table thead th { color: #c3d1df; font-size: 10px; text-align: center; }
.compare-table thead th:first-child { text-align: left; }
.compare-table td { color: #b5c2cf; text-align: center; }
.compare-table .compare-pro { background: #101d2c; border-left-color: #185f9d; border-right-color: #185f9d; }
.compare-table thead .compare-pro { color: #75c6ff; border-top: 2px solid #1a8aeb; }
.plan-fit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.plan-fit-grid article { display: flex; gap: 12px; align-items: start; }
.fit-symbol { display: grid; place-items: center; flex: none; width: 45px; height: 45px; border: 1px solid currentColor; border-radius: 50%; font-size: 21px; }
.fit-symbol.free { color: #ff5b32; background: #ff4a2014; }.fit-symbol.pro { color: #23a5ff; background: #159cff16; }.fit-symbol.agency { color: #b46dff; background: #a45eff16; }
.plan-fit-grid h3 { margin: 0 0 4px; font-size: 13px; }.plan-fit-grid p { margin: 0; color: #9eabba; font-size: 11px; line-height: 1.45; }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 12px; }
.faq-grid details { padding: 0; border: 1px solid #303b46; border-radius: 7px; background: linear-gradient(135deg, #15191f, #0e1218); }
.faq-grid summary { position: relative; padding: 11px 36px 11px 15px; color: #e6edf4; font-size: 11px; cursor: pointer; list-style: none; }
.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary::after { content: "+"; position: absolute; right: 15px; color: #9cbbd5; font-size: 16px; line-height: 1; }
.faq-grid details[open] summary::after { content: "−"; }
.faq-grid details p { margin: 0; padding: 0 15px 13px; color: #aab8c6; font-size: 11px; line-height: 1.55; }
.pricing-cta { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-top: 45px; padding: 24px 30px; border: 1px solid #464351; border-radius: 10px; background: radial-gradient(circle at 0 100%, #551510 0, transparent 29%), radial-gradient(circle at 100% 0, #0b386b 0, transparent 35%), #0c0e14; }
.pricing-cta h2 { margin: 4px 0; font-size: 22px; }.pricing-cta p:last-child { margin: 0; color: #abb8c5; font-size: 11px; }
.pricing-cta > div:last-child { display: flex; flex: none; gap: 10px; }
.pricing-cta .button { min-height: 40px; }
.pricing-page .site-footer { width: min(100%, 1110px); }

@media (max-width: 860px) {
  .pricing-main { margin-top: -32px; padding: 0 18px 45px; }
  .pricing-card { padding: 23px 17px; }
  .pricing-price strong { font-size: 34px; }
  .pricing-cta { display: grid; }
}
@media (max-width: 650px) {
  .pricing-hero { min-height: 300px; padding: 45px 18px 60px; }
  .pricing-hero h1 { max-width: 450px; font-size: 36px; }
  .pricing-energy { opacity: .32; width: 75%; }
  .pricing-main { margin-top: -27px; padding: 0 16px 42px; }
  .pricing-cards { grid-template-columns: 1fr; gap: 24px; }
  .pricing-card { min-height: 0; padding: 23px; }
  .pricing-card-head h2 { min-height: 0; }
  .pricing-features { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
  .plan-fit-grid, .faq-grid { grid-template-columns: 1fr; }
  .pricing-cta { padding: 22px; }
  .pricing-cta > div:last-child { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .billing-toggle label span { min-width: 0; padding: 8px 12px; }
  .pricing-features { grid-template-columns: 1fr; }
  .pricing-cta > div:last-child .button { width: 100%; }
}