.backup-pricing-section { background:#0f0f0f; }
.backup-pricing-heading { width:min(640px,100%); margin:0 auto -20px; text-align:center; }
.backup-pricing-heading > span { color:#ffe500; font:500 14px Inter,sans-serif; text-decoration:underline; text-underline-offset:3px; }
.backup-pricing-heading h2 { margin:8px 0 10px; color:#fff; font:600 30px/1.2 Inter,sans-serif; }
.backup-pricing-heading p { margin:0; color:#fff; font:400 14px/22px 'Inter Tight',Inter,sans-serif; }
.backup-pricing-desktop { display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; padding:2rem; }
.backup-pricing-card { position:relative; flex:1 1 calc(25% - 1rem); max-width:300px; padding:2rem 1.2rem; color:#fff; text-align:center; background:rgba(20,20,20,.7); border:2px solid #222; border-radius:8px; transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; }
.backup-pricing-card:hover { transform:translateY(-10px); border-color:#00ff99; box-shadow:0 0 25px rgba(0,255,150,.2); }
.backup-pricing-card h3 { margin:0 0 .5rem; color:#00ff99; font-size:1.4rem; }
.backup-pricing-card .backup-price { margin:1rem 0; color:#fff; font-size:1.8rem; font-weight:700; }
.backup-pricing-card ul { margin:1rem 0; padding:0; list-style:none; text-align:left; font-size:.95rem; }
.backup-pricing-card li { padding:.4rem 0; border-bottom:1px solid #333; }
.backup-pricing-button { display:inline-block; margin-top:1.2rem; padding:.6rem 1.4rem; color:#000; background:#00ff99; border-radius:8px; font-weight:700; text-decoration:none; transition:background .3s ease; }
.backup-pricing-button:hover { background:#040404; color:#fff; }
.backup-pricing-card.popular { z-index:1; border-color:#00ff99; background:rgba(0,255,150,.08); }
.backup-pricing-ribbon { position:absolute; top:-10px; right:-10px; padding:5px 10px; color:#000; background:#00ff99; border-radius:5px; box-shadow:0 0 10px rgba(0,255,150,.4); font-size:.8rem; font-weight:700; transform:rotate(5deg); }
.backup-pricing-mobile { display:none; }

@media (max-width:1200px) and (min-width:1025px) {
  .backup-pricing-card { flex-basis:calc(50% - 1rem); }
}

@media (max-width:1024px) {
  .backup-pricing-heading,.backup-pricing-desktop { display:none; }
  .backup-pricing-mobile { display:block; padding:22px; color:#fff; background:#0f0f0f; border:2px solid #00ff99; border-radius:4px; }
  .backup-pricing-mobile > h2 { margin:0 0 8px; color:#00ff99; font-size:22px; }
  .backup-pricing-mobile > p { margin:0 0 18px; color:#ddd; font-size:13px; }
  .backup-mobile-features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 18px; margin:0 0 20px; padding:0; list-style:none; color:#f7fafc; font-size:12px; }
  .backup-mobile-features li::before { content:'✓ '; color:#00ff99; }
  .backup-mobile-plans { display:grid; gap:12px; }
  .backup-mobile-plan { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding:15px 18px; background:#131313; border:2px solid #222; border-radius:4px; transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
  .backup-mobile-plan:hover { transform:translateY(-5px); border-color:#00ff99; box-shadow:0 0 25px rgba(0,255,150,.2); }
  .backup-mobile-plan.featured { border-color:#00ff99; box-shadow:inset 0 0 100px rgba(0,255,150,.04); }
  .backup-mobile-plan h3 { margin:0 0 5px; color:#00ff99; font-size:20px; }
  .backup-mobile-plan p { margin:0; color:#aaa; font-size:10px; }
  .backup-mobile-price { display:flex; align-items:center; gap:9px; }
  .backup-mobile-price s { color:#888; font-size:12px; }
  .backup-mobile-price strong { color:#fff; font-size:20px; }
  .backup-mobile-price a { padding:10px; color:#000; background:#00ff99; border-radius:4px; font-size:14px; text-decoration:none; }
}

@media (max-width:600px) {
  .backup-pricing-mobile { padding:16px 12px; }
  .backup-pricing-mobile > h2 { font-size:18px; }
  .backup-mobile-features { grid-template-columns:1fr; font-size:10px; }
  .backup-mobile-plan { gap:8px; padding:12px 10px; }
  .backup-mobile-plan h3,.backup-mobile-price strong { font-size:18px; }
  .backup-mobile-price { gap:5px; }
  .backup-mobile-price s { font-size:10px; }
  .backup-mobile-price a { padding:9px 8px; font-size:12px; }
}
