.dcx-hosting-packages {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    font-family: "Plus Jakarta Sans", sans-serif;
  }

  .dcx-hosting-packages__head {
    max-width: 860px;
    margin: 0 auto 32px;
    text-align: center;
  }

  .dcx-hosting-packages__eyebrow {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 36px;
    padding: 0 20px;
    border-radius: 34px;
    background: rgba(237, 26, 59, 0.1);
    color: #e71939;
    font-size: 16px;
    font-weight: 500;
    line-height: 34px;
    white-space: nowrap;
  }

  .dcx-hosting-packages__title {
    margin: 0;
    color: #0f172b;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.4px;
  }

  .dcx-hosting-packages__desc {
    margin: 14px auto 0;
    max-width: 760px;
    color: #45556c;
    font-size: 18px;
    line-height: 1.65;
    font-weight: 500;
  }

  .dcx-hosting-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
    padding-top: 48px;
  }

  .dcx-hosting-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 36px 34px 36px;
    border-radius: 26px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 3px solid #e2e8f0;
    box-shadow: 0 14px 40px rgba(15, 23, 43, 0.06);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    overflow: visible;
  }

  .dcx-hosting-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 46px rgba(15, 23, 43, 0.1);
    border-color: #d7deea;
  }
  .dcx-hosting-card--featured:hover {
    border-color: #2f2f31;
  }

  .dcx-hosting-card--featured {
    border-color: #2f2f31;
    box-shadow: 0 20px 54px rgba(47, 47, 49, 0.12);
    background: linear-gradient(180deg, rgba(237, 26, 59, 0.045) 0%, #ffffff 28%, #f8fafc 100%);
  }

  .dcx-hosting-card__topbar {
    position: absolute;
    bottom: 100%;
    left: -3px;
    right: -3px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2f2f31;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-radius: 26px 26px 0 0;
  }

  .dcx-hosting-card--has-topbar {
    overflow: visible;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .dcx-hosting-card__name {
    margin: 0 0 8px;
    color: #0f172b;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.3px;
  }

  .dcx-hosting-card__sub {
    margin: 0 0 18px;
    color: #62748e;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 500;
    min-height: 46px;
  }

  .dcx-hosting-card__price-wrap {
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 6px;
  }

  .dcx-hosting-card__price {
    color: #0f172b;
    font-size: clamp(36px, 3.5vw, 48px);
    line-height: 0.95;
    font-weight: 800;
    letter-spacing: -1.4px;
  }

  .dcx-hosting-card__currency {
    color: #0f172b;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 800;
    padding-bottom: 4px;
  }

  .dcx-hosting-card__period {
    color: #7b8ba3;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 22px;
  }

  .dcx-hosting-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 58px;
    padding: 14px 20px;
    border-radius: 999px;
    border: 3px solid transparent;
    background: linear-gradient(88deg, #b10d28 0.47%, #ff1744 98.23%) border-box;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    text-decoration: none;
    font-size: 17px;
    line-height: 17px;
    font-weight: 800;
    letter-spacing: 0.2px;
    box-shadow: 0 14px 30px rgba(237, 26, 59, 0.18);
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      border-color 0.2s ease,
      background 0.2s ease,
      color 0.2s ease,
      -webkit-text-fill-color 0.2s ease;
  }

  .dcx-hosting-card__cta:hover,
  .dcx-hosting-card__cta:focus-visible {
    transform: translateY(-1px);
    background: #ffffff;
    border-color: #111111;
    color: #ed1a3b;
    -webkit-text-fill-color: #ed1a3b;
    box-shadow: 0 16px 34px rgba(15, 23, 43, 0.10);
  }

  .dcx-hosting-card__cta:visited,
  .dcx-hosting-card__cta:active {
    text-decoration: none;
  }

  .dcx-hosting-card__promo {
    margin: 12px 0 24px;
    color: #7b8ba3;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
  }

  .dcx-hosting-card__section-title {
    margin: 0 0 14px;
    color: #0f172b;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 800;
  }

  .dcx-hosting-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    flex-grow: 1;
  }

  .dcx-hosting-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #62748e;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 500;
  }

  .dcx-hosting-card__list li::before {
    content: "";
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 1px;
    border-radius: 999px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Ccircle cx='11' cy='11' r='11' fill='%23E31837'/%3E%3Cpath d='M7 11.2L9.5 13.7L15 8.2' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / contain no-repeat;
  }

  @media (max-width: 1180px) {
    .dcx-hosting-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 36px;
      padding-top: 0;
    }
    .dcx-hosting-card--has-topbar {
      margin-top: 0;
      padding-top: 0;
      border-top-left-radius: 26px;
      border-top-right-radius: 26px;
    }
    .dcx-hosting-card__topbar {
      position: relative;
      bottom: auto;
      left: auto;
      right: auto;
      width: auto;
      margin: 0 -34px 30px;
      border-radius: 23px 23px 0 0;
    }
  }

  @media (max-width: 767px) {
    .dcx-hosting-packages {
      margin-top: 0;
    }

    .dcx-hosting-packages__desc {
      font-size: 16px;
      line-height: 1.6;
    }

    .dcx-hosting-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .dcx-hosting-card {
      padding: 24px 20px 24px;
      border-radius: 22px;
    }

    .dcx-hosting-card--has-topbar {
      overflow: visible;
      margin-top: 0;
      padding-top: 0;
      border-top-left-radius: 22px;
      border-top-right-radius: 22px;
    }

    .dcx-hosting-card__topbar {
      margin: 0 -20px 24px;
      border-radius: 19px 19px 0 0;
    }

    .dcx-hosting-card__sub {
      min-height: auto;
    }
  }