.packages-hero { position: relative; overflow: hidden; padding: 185px 0 72px; background: radial-gradient(circle at 78% 8%, rgba(167,123,246,.25), transparent 28%), #141318; }
.package-orbit { position: absolute; width: 630px; height: 630px; right: -270px; top: -210px; border: 1px solid rgba(167,123,246,.17); border-radius: 50%; box-shadow: 0 0 0 100px rgba(167,123,246,.025), 0 0 0 200px rgba(167,123,246,.018); }
.packages-hero-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 95px; align-items: end; position: relative; z-index: 2; }
.packages-hero h1 { margin: 0; max-width: 920px; font-size: clamp(3.4rem, 6.2vw, 6.6rem); }
.packages-hero-side { padding-bottom: 7px; }
.packages-hero-side p { margin: 0 0 25px; color: #bcb6c2; }
.package-facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 80px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.package-facts span { padding: 18px 20px; border-right: 1px solid var(--line); color: #c8c3cc; font-size: .7rem; text-align: center; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.package-facts span::before { content: "✓"; color: var(--lime); margin-right: 8px; }
.package-facts span:last-child { border-right: 0; }

.pricing { padding-top: 105px; background: var(--paper); color: #18171b; }
.pricing-intro { display: grid; grid-template-columns: .7fr 1.2fr .7fr; gap: 50px; align-items: end; margin-bottom: 55px; }
.pricing-intro .eyebrow { color: #7550b4; align-self: start; margin-top: 11px; }
.pricing-intro h2 { margin: 0; font-size: clamp(2.5rem, 4.2vw, 4.5rem); }
.pricing-intro > p:last-child { margin: 0; color: #625e66; font-size: .9rem; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); align-items: stretch; border: 1px solid #c9c2ba; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 36px 31px 34px; background: var(--paper); border-right: 1px solid #aaa69f; }
.price-card:last-child { border-right: 0; }
.price-card-featured { color: white; background: #1a191e; transform: translateY(-16px); margin-bottom: -32px; box-shadow: 0 25px 55px rgba(37,29,44,.18); border: 0; }
.popular { position: absolute; top: -15px; right: 22px; padding: 7px 12px; border-radius: 999px; color: #17131c; background: var(--lime); font-size: .61rem; line-height: 1; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
.price-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 45px; }
.plan-number { color: #7550b4; font-family: "Sora"; font-size: .68rem; font-weight: 800; }
.plan-label { color: #77717a; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.price-card-featured .plan-label { color: #aaa4af; }
.price-card h3 { min-height: 58px; margin: 0 0 12px; font-size: 1.52rem; }
.plan-for { min-height: 78px; margin: 0; color: #69656d; font-size: .83rem; }
.price-card-featured .plan-for { color: #aaa5af; }
.price { display: flex; align-items: flex-start; margin: 28px 0 0; font-family: "Sora"; font-size: 4rem; line-height: 1; font-weight: 700; letter-spacing: -.07em; }
.price sup { padding-top: 6px; margin-right: 4px; font-size: 1.05rem; letter-spacing: 0; }
.price small { align-self: flex-start; padding-top: 7px; font-size: 1.3rem; }
.price-note { margin: 8px 0 25px; color: #7b757d; font-size: .69rem; }
.plan-button { width: 100%; margin-bottom: 28px; color: #18151c; background: var(--purple); }
.plan-button:hover { background: var(--purple-bright); }
.feature-list { list-style: none; padding: 25px 0 0; margin: auto 0 0; border-top: 1px solid #d0c9c1; }
.price-card-featured .feature-list { border-color: var(--line); }
.feature-list li { position: relative; padding: 6px 0 6px 21px; color: #555159; font-size: .78rem; }
.price-card-featured .feature-list li { color: #c3bdc7; }
.feature-list li::before { content: "↗"; position: absolute; left: 0; color: #8258ca; font-weight: 800; }
.pricing-small { margin: 57px 0 0; text-align: center; color: #706a72; font-size: .8rem; }
.pricing-small a { color: #6e43b1; border-bottom: 1px solid #8b6dbb; font-weight: 800; }

.included-strip { padding: 80px 0; background: var(--paper-deep); color: #18171b; }
.included-strip .shell { display: grid; grid-template-columns: .68fr 1.32fr; gap: 90px; }
.included-title .eyebrow { color: #7550b4; }
.included-title h2 { margin: 0; font-size: clamp(2.1rem,3.5vw,3.5rem); }
.included-grid { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid #aaa39b; }
.included-grid span { display: flex; align-items: center; gap: 17px; padding: 20px 6px; border-bottom: 1px solid #aaa39b; font-family: "Sora"; font-size: .82rem; font-weight: 600; }
.included-grid span:nth-child(odd) { border-right: 1px solid #aaa39b; }
.included-grid b { color: #7550b4; font-size: .62rem; }

.hosting { background: #121115; }
.hosting-heading { display: grid; grid-template-columns: .65fr 1.25fr .65fr; gap: 50px; align-items: end; margin-bottom: 62px; }
.hosting-heading .eyebrow { align-self: start; margin-top: 12px; }
.hosting-heading h2 { margin: 0; font-size: clamp(2.5rem,4.5vw,4.7rem); }
.hosting-heading > p { margin: 0; color: var(--muted); font-size: .9rem; }
.hosting-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.hosting-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; min-height: 560px; border: 1px solid var(--line); border-radius: 24px; background: #1b1a20; }
.hosting-card-plus { border-color: rgba(167,123,246,.5); background: linear-gradient(145deg,#211c29,#19181d 60%); }
.recommended { position: absolute; z-index: 3; top: 20px; right: 20px; padding: 7px 11px; border-radius: 999px; color: #17131c; background: var(--purple-bright); font-size: .59rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.hosting-card-copy { padding: 45px 34px; }
.hosting-kicker { color: var(--purple-bright); font-size: .65rem; text-transform: uppercase; letter-spacing: .11em; font-weight: 800; }
.hosting-card h3 { min-height: 56px; margin: 15px 0 10px; font-size: 1.48rem; }
.hosting-price { display: flex; align-items: flex-start; margin: 22px 0 17px; font-family: "Sora"; font-size: 3.4rem; line-height: 1; letter-spacing: -.06em; font-weight: 700; }
.hosting-price sup { padding-top: 4px; margin-right: 3px; font-size: .95rem; }
.hosting-price small { padding-top: 4px; font-size: 1.1rem; }
.hosting-price span { align-self: flex-end; margin: 0 0 7px 7px; color: #908a95; font-family: "Manrope"; font-size: .7rem; letter-spacing: 0; font-weight: 600; }
.hosting-card-copy > p:not(.hosting-price) { color: #aaa5af; font-size: .82rem; }
.hosting-card ul { list-style: none; padding: 20px 0 0; margin: 24px 0 0; border-top: 1px solid var(--line); }
.hosting-card li { padding: 5px 0; color: #c7c1cb; font-size: .75rem; }
.hosting-card li::before { content: "✓"; color: var(--lime); margin-right: 8px; }
.payment-zone { display: flex; flex-direction: column; justify-content: center; padding: 35px 28px; background: rgba(255,255,255,.035); border-left: 1px solid var(--line); }
.payment-zone > p { margin: 0 0 18px; color: white; font-family: "Sora"; font-size: .8rem; text-align: center; font-weight: 600; }
.payment-zone small { display: block; margin-top: 14px; color: #89838e; text-align: center; font-size: .6rem; line-height: 1.5; }

.decision { color: #17131d; background: var(--purple); }
.decision-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 90px; align-items: end; }
.decision .eyebrow { color: #382544; }
.decision h2 { margin: 0; font-size: clamp(2.6rem,4.8vw,5rem); }
.decision h2 em { color: white; }
.decision-copy > p { margin: 0 0 30px; color: #3c3046; }
.decision-copy > div { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.decision-phone { color: #2d2036; font-size: .8rem; font-weight: 800; border-bottom: 1px solid rgba(30,20,37,.35); }

@media (max-width: 1080px) {
  .pricing-intro, .hosting-heading { grid-template-columns: .75fr 1.25fr; }
  .pricing-intro > p:last-child, .hosting-heading > p { grid-column: 2; }
  .hosting-card { grid-template-columns: 1fr; }
  .payment-zone { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .packages-hero-grid { grid-template-columns: 1fr; gap: 35px; }
  .packages-hero-side { max-width: 620px; }
  .package-facts { grid-template-columns: repeat(2,1fr); }
  .package-facts span:nth-child(2) { border-right: 0; }
  .package-facts span:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .pricing-intro, .hosting-heading { grid-template-columns: 1fr; gap: 20px; }
  .pricing-intro > p:last-child, .hosting-heading > p { grid-column: auto; }
  .pricing-grid { grid-template-columns: 1fr; border: 0; gap: 18px; }
  .price-card { border: 1px solid #c9c2ba !important; }
  .price-card-featured { transform: none; margin: 0; }
  .price-card h3, .plan-for { min-height: 0; }
  .included-strip .shell, .decision-grid { grid-template-columns: 1fr; gap: 45px; }
  .hosting-grid { grid-template-columns: 1fr; }
  .hosting-card { grid-template-columns: 1.1fr .9fr; }
  .payment-zone { border-top: 0; border-left: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .packages-hero { padding-top: 130px; }
  .packages-hero h1 { font-size: clamp(2.8rem,12vw,4.4rem); }
  .package-facts { grid-template-columns: 1fr; margin-top: 50px; }
  .package-facts span { border-right: 0; border-bottom: 1px solid var(--line); }
  .package-facts span:last-child { border-bottom: 0; }
  .pricing { padding-top: 80px; }
  .price-card { padding: 31px 24px; }
  .included-grid { grid-template-columns: 1fr; }
  .included-grid span:nth-child(odd) { border-right: 0; }
  .hosting-card { grid-template-columns: 1fr; }
  .hosting-card-copy { padding: 38px 25px; }
  .payment-zone { border-left: 0; border-top: 1px solid var(--line); }
}
