.billing-page { --billing-navy: #10105d; --billing-blue: #0877f6; --billing-copy: #405486; overflow: hidden; color: var(--billing-navy); background: #fff; font-family: "Poppins", Arial, sans-serif; }
.billing-page *, .billing-page *::before, .billing-page *::after { box-sizing: border-box; }
.billing-shell { width: min(calc(100% - 40px), 1120px); margin: 0 auto; }
.billing-hero { position: relative; background: radial-gradient(circle at 72% 50%, rgba(75, 165, 255, .19), transparent 36%), linear-gradient(112deg, #fff 0%, #f5faff 46%, #eaf6ff 100%); }
.billing-hero::before { position: absolute; top: -120px; right: 15%; width: 390px; height: 390px; border: 58px solid rgba(22, 129, 240, .045); border-radius: 50%; content: ""; }
.billing-hero__grid { position: relative; display: grid; grid-template-columns: minmax(440px, 1fr) minmax(480px, 1.05fr); gap: 35px; min-height: 350px; align-items: center; }
.billing-breadcrumb { display: flex; gap: 10px; align-items: center; margin-bottom: 24px; color: #3c4f80; font-size: 14px; }
.billing-breadcrumb a { color: #086eef; text-decoration: none; }
.billing-breadcrumb strong { font-weight: 500; }
.billing-hero__copy h1 { margin: 0 0 22px; color: var(--billing-navy); font-size: clamp(42px, 4.4vw, 55px); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; }
.billing-hero__copy h1 span { color: var(--billing-blue); }
.billing-hero__copy > p { max-width: 560px; margin: 0; color: var(--billing-copy); font-size: 15px; line-height: 1.6; }
.billing-hero__visual { position: relative; min-height: 330px; }
.billing-receipt { position: absolute; top: 38px; left: 70px; width: 205px; height: 240px; padding: 27px 25px; background: #fff; border-radius: 18px; box-shadow: 0 16px 35px rgba(29, 75, 124, .15); transform: rotate(-9deg); }
.billing-receipt img { display: block; width: 105px; height: auto; margin-bottom: 25px; }
.billing-receipt span { display: block; height: 12px; margin-top: 12px; background: #dbe4f2; border-radius: 8px; }
.billing-receipt span:first-of-type { width: 75%; height: 17px; background: #bdcbe0; }
.billing-receipt span:nth-of-type(3) { width: 68%; }
.billing-receipt span:nth-of-type(4) { width: 52%; }
.billing-card { position: absolute; top: 194px; left: 44px; z-index: 2; width: 140px; height: 82px; padding: 17px 18px; color: #fff; background: linear-gradient(140deg, #0c83ff, #075bd4); border-radius: 10px; box-shadow: 0 14px 25px rgba(8, 88, 206, .24); transform: rotate(-7deg); }
.billing-card > i { display: block; margin-bottom: 10px; font-size: 29px; }
.billing-card > b { display: inline-block; width: 38px; height: 7px; margin-right: 8px; background: rgba(255, 255, 255, .55); border-radius: 4px; }
.billing-check { position: absolute; top: 204px; left: 245px; z-index: 3; display: grid; place-items: center; width: 62px; height: 62px; color: #fff; background: linear-gradient(145deg, #35d99b, #09af7d); border-radius: 50%; box-shadow: 0 13px 24px rgba(2, 141, 99, .24); font-size: 30px; }
.billing-hero__visual aside { position: absolute; top: 91px; right: 0; width: 205px; padding: 22px 22px 19px; background: rgba(255, 255, 255, .96); border-radius: 14px; box-shadow: 0 13px 30px rgba(29, 75, 124, .1); }
.billing-hero__visual aside::before { position: absolute; top: -29px; right: 18px; color: #0877f6; content: "!"; font-size: 43px; font-weight: 700; transform: rotate(-4deg); }
.billing-hero__visual aside strong { display: block; color: var(--billing-navy); font-size: 19px; line-height: 1.25; }
.billing-hero__visual aside p { margin: 13px 0 0; color: var(--billing-copy); font-size: 14px; line-height: 1.45; }
.billing-section-nav { border-top: 1px solid #e0e9f3; border-bottom: 1px solid #dfe7f1; background: #fff; }
.billing-section-nav .billing-shell { display: grid; grid-template-columns: repeat(6, 1fr); }
.billing-section-nav a { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 7px; min-height: 86px; padding: 10px; color: #435789; font-size: 14px; line-height: 1.25; text-align: center; text-decoration: none; }
.billing-section-nav a i { font-size: 20px; }
.billing-section-nav a:hover, .billing-section-nav a:focus, .billing-section-nav a.active { color: #0672ef; background: #eaf5ff; text-decoration: none; }
.billing-summary { padding: 35px 0 20px; }
.billing-summary header { max-width: 850px; margin-bottom: 24px; }
.billing-summary h2, .billing-faq h2 { margin: 0 0 4px; color: var(--billing-navy); font-size: 28px; font-weight: 700; }
.billing-summary header p, .billing-faq header p { margin: 0; color: var(--billing-copy); font-size: 15px; line-height: 1.5; }
.billing-summary__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.billing-summary article { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 15px; align-items: start; min-height: 138px; padding: 23px 20px; background: #fff; border: 1px solid #d7e4f2; border-radius: 8px; box-shadow: 0 7px 20px rgba(28, 76, 125, .045); }
.billing-summary article > span { display: grid; place-items: center; width: 48px; height: 48px; color: #0877f6; background: #eaf5ff; border-radius: 8px; font-size: 26px; }
.billing-summary article h3 { margin: 4px 0 7px; color: var(--billing-navy); font-size: 15px; font-weight: 700; line-height: 1.3; }
.billing-summary article p { margin: 0; color: var(--billing-copy); font-size: 14px; line-height: 1.5; }
.billing-faq { padding: 15px 0 24px; }
.billing-faq__panel { padding: 24px 22px 20px; background: linear-gradient(125deg, #edf7ff, #f4faff); border-radius: 9px; }
.billing-faq header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.billing-faq header a { padding-top: 7px; color: #0671ef; font-size: 14px; text-decoration: none; white-space: nowrap; }
.billing-faq header a i { margin-left: 10px; }
.billing-faq details { margin-top: 8px; background: #fff; border-radius: 7px; }
.billing-faq summary { position: relative; padding: 13px 42px 13px 18px; color: var(--billing-navy); cursor: pointer; font-size: 14px; font-weight: 500; list-style: none; }
.billing-faq summary::-webkit-details-marker { display: none; }
.billing-faq summary::after { position: absolute; top: 50%; right: 20px; width: 8px; height: 8px; border-right: 2px solid #425783; border-bottom: 2px solid #425783; content: ""; transform: translateY(-65%) rotate(45deg); }
.billing-faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.billing-faq details p { margin: 0; padding: 0 18px 14px; color: var(--billing-copy); font-size: 14px; line-height: 1.5; }
.billing-help { padding: 0 0 32px; }
.billing-help__panel { display: grid; grid-template-columns: 72px minmax(0, 1fr) 210px; gap: 20px; align-items: center; min-height: 118px; padding: 20px 25px; background: linear-gradient(105deg, #effcf7, #f7fffb); border-radius: 8px; }
.billing-help__panel > span { display: grid; place-items: center; width: 64px; height: 64px; color: #11b57e; background: #cff6e7; border-radius: 12px; font-size: 31px; }
.billing-help h2 { margin: 0 0 3px; color: var(--billing-navy); font-size: 20px; font-weight: 700; }
.billing-help p { margin: 0; color: var(--billing-copy); font-size: 14px; line-height: 1.5; }
.billing-help a { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; color: #0671ef; background: #fff; border: 1px solid #0877f6; border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none; }
.billing-cta { position: relative; min-height: 196px; overflow: hidden; color: #fff; background: linear-gradient(105deg, #0751b6, #0879fb); }
.billing-cta__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 45px; min-height: 196px; padding: 28px 92px; }
.billing-cta h2 { margin: 0 0 7px; color: #fff; font-size: 27px; font-weight: 600; line-height: 1.3; }
.billing-cta p { margin: 0; color: #fff; font-size: 14px; }
.billing-cta__action { flex: 0 0 320px; text-align: center; }
.billing-cta__action a { display: flex; align-items: center; justify-content: center; gap: 28px; min-height: 50px; padding: 10px 22px; color: #10105d; background: #ffd018; border-radius: 6px; box-shadow: 0 9px 20px rgba(4, 32, 100, .22); font-size: 15px; font-weight: 700; text-decoration: none; }
.billing-cta__action small { display: block; margin-top: 9px; color: #fff; font-size: 14px; }
.billing-cta__circle { position: absolute; border-radius: 50%; }
.billing-cta__circle--left { bottom: -80px; left: -90px; width: 205px; height: 205px; border: 38px solid rgba(31, 144, 255, .72); }
.billing-cta__circle--right { right: -55px; bottom: -75px; width: 180px; height: 180px; border: 34px solid #ffd018; }
@media (max-width: 991.98px) {
  .billing-hero__grid { grid-template-columns: 1fr; padding-top: 30px; }
  .billing-hero__visual { width: min(100%, 560px); margin: 0 auto; }
  .billing-section-nav .billing-shell { grid-template-columns: repeat(3, 1fr); }
  .billing-summary__grid { grid-template-columns: repeat(2, 1fr); }
  .billing-cta__inner { padding-right: 30px; padding-left: 30px; }
}
@media (max-width: 767.98px) {
  .billing-shell { width: min(calc(100% - 28px), 1120px); }
  .billing-hero__copy h1 { font-size: 40px; }
  .billing-hero__visual { min-height: 350px; transform: scale(.9); transform-origin: center top; }
  .billing-section-nav .billing-shell { grid-template-columns: repeat(2, 1fr); }
  .billing-summary__grid { grid-template-columns: 1fr; }
  .billing-faq header { flex-direction: column; gap: 6px; }
  .billing-help__panel { grid-template-columns: 64px minmax(0, 1fr); }
  .billing-help a { grid-column: 1 / -1; }
  .billing-cta__inner { align-items: stretch; flex-direction: column; gap: 22px; padding-top: 38px; padding-bottom: 38px; text-align: center; }
  .billing-cta__action { flex-basis: auto; width: min(100%, 380px); margin: 0 auto; }
}
@media (max-width: 520px) {
  .billing-hero__visual { width: 520px; margin-left: 50%; transform: translateX(-50%) scale(.68); transform-origin: center top; margin-bottom: -90px; }
  .billing-section-nav a { min-height: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .billing-page *, .billing-page *::before, .billing-page *::after { scroll-behavior: auto !important; transition: none !important; }
}