.pricing-page { background: radial-gradient(ellipse at 0 0, #4a071225, transparent 25%), radial-gradient(ellipse at 100% 40%, #4a071220, transparent 25%), #050505; padding: 45px 0 65px; }
.pricing-content { max-width: 1150px; }
.pricing-intro { text-align: center; max-width: 720px; margin: 0 auto 25px; }
.pricing-eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 14px; color: #c1c1c7; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pricing-eyebrow::before { content: ''; width: 30px; height: 2px; background: #e90020; }
.pricing-intro h1 { font-size: clamp(36px, 4.4vw, 58px); line-height: 1.06; margin-bottom: 12px; }
.pricing-intro > p:last-child { margin: 0 auto; color: #c2c2c9; max-width: 650px; font-size: 15px; line-height: 1.5; }
.pricing-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px 0 34px; }
.pricing-features > div { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border: 1px solid #29292f; border-radius: 30px; background: #0e0e11; }
.pricing-features .icon { width: 24px; height: 24px; flex: none; color: #ff2940; }
.pricing-features strong, .pricing-features small { display: block; }
.pricing-features strong { font-size: 12px; line-height: 1.3; }
.pricing-features small { color: #bcbcc4; font-size: 11px; line-height: 1.4; }
.pricing-step { margin-top: 34px; }
.step-title { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.step-title > span { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 8px; color: #fff; background: #c30920; font-size: 17px; font-weight: 700; box-shadow: 0 0 15px #d1001b30; }
.step-title h2 { margin: 0 0 4px; font-size: clamp(20px, 2vw, 25px); line-height: 1.15; }
.step-title p { margin: 0; color: #bcbcc4; font-size: 13px; line-height: 1.4; }
.package-grid, .hosting-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pricing-card, .hosting-card { min-width: 0; border: 1px solid #8e1421; border-radius: 15px; background: linear-gradient(145deg, #130b0d, #0b0b0d 70%); }
.pricing-card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 24px 22px 20px; text-align: center; }
.pricing-card.selected, .hosting-card.selected { border-color: #ff344b; box-shadow: 0 0 17px #f0001c65, inset 0 0 12px #f0001c18; }
.pricing-card h3 { font-size: 21px; margin: 0 0 8px; }
.package-price { font-size: clamp(34px, 3.4vw, 45px); font-weight: 800; line-height: 1; letter-spacing: -.05em; margin: 0 0 6px; }
.period { margin: 0; color: #c1c1c8; font-size: 12px; line-height: 1.4; min-height: 34px; }
.package-description { color: #c1c1c8; font-size: 13px; line-height: 1.45; min-height: 40px; margin: 18px 0; }
.popular { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 6px 15px; border-radius: 16px; white-space: nowrap; background: #f10a26; color: white; font-size: 11px; font-weight: 800; text-transform: uppercase; box-shadow: 0 0 14px #e5001c66; }
.check-list, .hosting-list { width: 100%; padding: 0; margin: 0 0 20px; list-style: none; text-align: left; display: grid; gap: 10px; font-size: 13px; line-height: 1.45; }
.check-list li, .hosting-list [role="listitem"] { display: flex; align-items: flex-start; gap: 9px; }
.check-list li::before { content: '✓'; display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: #e50020; font-size: 11px; font-weight: 800; }
.package-button { width: 100%; margin-top: auto; min-height: 42px; border: 1px solid #b91c1c; border-radius: 10px; color: white; background: #09090b; cursor: pointer; }
.package-button:hover { background: #310a10; }
.package-button[aria-pressed="true"] { background: #e90020; border-color: #e90020; color: white; }
.pricing-note { margin: 16px 0 0; color: #bdbdc5; font-size: 12px; line-height: 1.6; }
.hosting-grid { margin: 0; padding: 0; border: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.hosting-card { position: relative; display: flex; flex-direction: column; padding: 20px; cursor: pointer; }
.hosting-card input { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer; }
.radio-indicator { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border: 1px solid #8a8a92; border-radius: 50%; pointer-events: none; }
.hosting-card input:checked + .radio-indicator { border: 6px solid #f20d2d; background: #fff; }
.hosting-card input:focus-visible + .radio-indicator { outline: 3px solid #fff; outline-offset: 4px; }
.hosting-heading { display: flex; gap: 12px; align-items: flex-start; padding-right: 22px; }
.hosting-heading > .icon { width: 27px; height: 27px; color: #ff2d42; }
.hosting-heading strong, .hosting-heading b { display: block; }
.hosting-heading strong { font-size: 16px; line-height: 1.3; }
.hosting-heading b { font-size: 22px; margin-top: 8px; }
.hosting-heading small { font-size: 12px; color: #bbb; font-weight: 400; }
.hosting-description, .hosting-note { display: block; color: #c3c3c9; font-size: 13px; line-height: 1.5; margin: 15px 0; }
.hosting-list { margin: 0; }
.hosting-list [role="listitem"]::before { content: '✓'; color: #ff3045; font-weight: 700; }
.hosting-note { margin: 14px 0 0; font-size: 12px; }
.selection-panel { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #a41627; border-radius: 14px; background: #130c0e; padding: 20px; gap: 20px; }
.selection-panel > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.selection-panel > div + div { border-left: 1px solid #5d3438; padding-left: 22px; }
.selection-panel .icon { width: 28px; height: 28px; color: #f4263c; }
.selection-panel span { flex: 1; min-width: 0; }
.selection-panel strong, .selection-panel small { display: block; }
.selection-panel strong { font-size: 15px; }
.selection-panel small { color: #bdbdc5; font-size: 12px; line-height: 1.4; margin-top: 4px; }
.selection-panel b { white-space: nowrap; font-size: 18px; }
.selection-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.selection-actions .button { min-width: 180px; color: #fff; }
.faq-section { margin-top: 38px; }
.faq-section h2 { font-size: 24px; margin-bottom: 18px; }
.faq-section h2::before { content: ''; display: inline-block; vertical-align: middle; width: 35px; height: 2px; background: #db0b24; margin-right: 15px; }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.faq-grid details { border: 1px solid #383239; border-radius: 9px; background: #0e0e11; }
.faq-grid summary { position: relative; cursor: pointer; padding: 15px 40px 15px 16px; font-size: 14px; font-weight: 700; list-style: none; }
.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary::after { content: '+'; position: absolute; right: 16px; font-size: 20px; top: 10px; color: #d7d7da; }
.faq-grid details[open] summary::after { content: '−'; }
.faq-grid summary:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.faq-grid p { padding: 0 16px 16px; margin: 0; color: #c2c2ca; font-size: 13px; line-height: 1.6; }
@media (max-width: 960px) { .pricing-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } .package-grid, .hosting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } }
@media (max-width: 600px) { .pricing-page { padding: 40px 0 55px; } .pricing-features { gap: 9px; } .pricing-features > div { padding: 10px; border-radius: 14px; } .package-grid, .hosting-grid, .selection-panel, .faq-grid { grid-template-columns: 1fr; } .package-grid, .hosting-grid { gap: 25px; } .selection-panel > div + div { border-left: 0; border-top: 1px solid #5d3438; padding: 18px 0 0; } .selection-actions .button { flex: 1 1 190px; } }
@media (max-width: 350px) { .pricing-features { grid-template-columns: 1fr; } .selection-panel > div { flex-wrap: wrap; } }