/* ========== RESET & BASE ========== */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     background: #f8fafc;
 }

 a {
     text-decoration: none;
     color: inherit;
 }

 button {
     cursor: pointer;
     font-family: inherit;
     border: none;
 }

 /* ========== PREMIUM SECTION WRAPPER ========== */
 .premium-section {
     padding: 80px 16px;
 }

 .premium-section-inner {
     max-width: 1200px;
     margin: 0 auto;
 }

 /* ========== MAIN CARD ========== */
 .premium-card {
     background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #064e3b 100%);
     border-radius: 28px;
     padding: 48px;
     position: relative;
     overflow: hidden;
 }

 /* decorative blobs */
 .premium-card__blob {
     position: absolute;
     border-radius: 50%;
     filter: blur(60px);
     pointer-events: none;
 }

 .premium-card__blob--tr {
     top: -48px;
     right: -48px;
     width: 320px;
     height: 320px;
     background: rgba(16, 185, 129, 0.15);
 }

 .premium-card__blob--bl {
     bottom: -48px;
     left: -48px;
     width: 220px;
     height: 220px;
     background: rgba(255, 255, 255, 0.06);
 }

 /* ========== INNER CONTENT (above blobs) ========== */
 .premium-content {
     position: relative;
     z-index: 1;
 }

 /* ========== HEADER ========== */
 .premium-header {
     text-align: center;
     margin-bottom: 48px;
 }

 .premium-header__badge {
     display: inline-block;
     padding: 6px 16px;
     background: rgba(16, 185, 129, 0.2);
     color: #6ee7b7;
     font-size: 14px;
     font-weight: 500;
     border-radius: 999px;
     margin-bottom: 16px;
 }

 .premium-header__title {
     font-size: 36px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 8px;
     line-height: 1.2;
 }

 .premium-header__sub {
     font-size: 16px;
     color: #94a3b8;
 }

 /* ========== BENEFITS GRID ========== */
 .benefits-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 16px;
     margin-bottom: 48px;
 }

 .benefit-card {
     background: rgba(255, 255, 255, 0.08);
     border-radius: 16px;
     padding: 20px 16px;
     text-align: center;
     cursor: pointer;
     transition: background 0.2s;
 }

 .benefit-card:hover {
     background: rgba(255, 255, 255, 0.14);
 }

 .benefit-card__icon-wrap {
     width: 40px;
     height: 40px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 12px;
 }

 .benefit-card__badge {
     display: inline-block;
     padding: 2px 10px;
     background: #10b981;
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     border-radius: 999px;
     margin-bottom: 8px;
 }

 .benefit-card__title {
     font-size: 13px;
     font-weight: 600;
     color: #fff;
     margin-bottom: 4px;
 }

 .benefit-card__desc {
     font-size: 12px;
     color: #94a3b8;
     line-height: 1.4;
 }

 /* ========== CTA BANNER ========== */
 .cta-banner {
     position: relative;
     border-radius: 18px;
     overflow: hidden;
     margin-bottom: 40px;
 }

 .cta-banner__bg {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(16, 185, 129, 0.25) 0%, rgba(20, 184, 166, 0.15) 50%, rgba(16, 185, 129, 0.25) 100%);
     border-radius: 18px;
 }

 .cta-banner__border {
     position: absolute;
     inset: 0;
     border: 1px solid rgba(110, 231, 183, 0.3);
     border-radius: 18px;
     pointer-events: none;
 }

 .cta-banner__glow-tl {
     position: absolute;
     top: -24px;
     left: -24px;
     width: 120px;
     height: 120px;
     background: rgba(52, 211, 153, 0.2);
     border-radius: 50%;
     filter: blur(24px);
     pointer-events: none;
 }

 .cta-banner__glow-br {
     position: absolute;
     bottom: -24px;
     right: -24px;
     width: 120px;
     height: 120px;
     background: rgba(45, 212, 191, 0.2);
     border-radius: 50%;
     filter: blur(24px);
     pointer-events: none;
 }

 .cta-banner__inner {
     position: relative;
     z-index: 1;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
     padding: 28px 32px;
 }

 .cta-banner__text {
     flex: 1;
 }

 .cta-banner__label {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 8px;
 }

 .cta-banner__label-emoji {
     font-size: 18px;
 }

 .cta-banner__label-text {
     color: #6ee7b7;
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.1em;
 }

 .cta-banner__title {
     font-size: 20px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 6px;
     line-height: 1.3;
 }

 .cta-banner__desc {
     font-size: 14px;
     color: #cbd5e1;
     line-height: 1.6;
 }

 .cta-banner__desc-highlight {
     color: #6ee7b7;
     font-weight: 600;
 }

 .cta-banner__actions {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     flex-shrink: 0;
 }

 .cta-banner__btn-primary {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: #10b981;
     color: #fff;
     font-size: 14px;
     font-weight: 700;
     border-radius: 999px;
     padding: 12px 28px;
     box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
     transition: background 0.2s, transform 0.15s;
     white-space: nowrap;
 }

 .cta-banner__btn-primary:hover {
     background: #34d399;
     transform: translateY(-1px);
 }

 .cta-banner__chevron {
     transition: transform 0.2s;
 }

 .cta-banner__btn-primary:hover .cta-banner__chevron {
     transform: translateX(3px);
 }

 .cta-banner__note {
     font-size: 12px;
     color: #64748b;
     text-align: center;
     white-space: nowrap;
 }

 /* ========== BOTTOM CTA BUTTON ========== */
 .premium-footer {
     display: flex;
     justify-content: center;
 }

 .premium-footer__btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: #10b981;
     color: #fff;
     font-size: 17px;
     font-weight: 600;
     border-radius: 999px;
     padding: 16px 36px;
     box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
     transition: background 0.2s, transform 0.15s;
 }

 .premium-footer__btn:hover {
     background: #059669;
     transform: translateY(-2px);
 }

 /* ========== RESPONSIVE ========== */
 @media (max-width: 1024px) {
     .benefits-grid {
         grid-template-columns: repeat(3, 1fr);
     }

     .premium-card {
         padding: 32px 24px;
     }
 }

 @media (max-width: 767px) {
     .benefits-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .premium-header__title {
         font-size: 26px;
     }

     .cta-banner__inner {
         flex-direction: column;
         text-align: center;
         padding: 24px 20px;
     }

     .cta-banner__label {
         justify-content: center;
     }

     .premium-footer__btn {
         font-size: 15px;
         padding: 14px 24px;
     }

     .premium-section {
         padding: 48px 12px;
     }
 }

 @media (max-width: 480px) {
     .benefits-grid {
         grid-template-columns: 1fr 1fr;
     }

     .premium-card {
         padding: 24px 16px;
     }

     .premium-header__title {
         font-size: 22px;
     }
 }