:root{
    --purple-deep:#0a0f2e;
    --purple-mid:#161d4f;
    --purple-header:#2f2f7a;
    --purple-header2:#5b4bab;
    --purple-section:#161d4f;
    --purple-best-a:#232a63;
    --purple-best-b:#5b4bab;
    --orange:#f5a623;
    --gold:#e0a020;
    --yellow:#ffd200;
    --yellow-btn-a:#ffd83d;
    --yellow-btn-b:#f6b800;
    --gray-btn-a:#dcdcdc;
    --gray-btn-b:#c4c4c4;
    --ink:#141414;
    --card-border:#6457a0;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  body{
    font-family:"Segoe UI", Roboto, Arial, sans-serif;
    color:#1c1c1c;
    background:#fff;
    -webkit-font-smoothing:antialiased;
  }

  img{display:block;max-width:100%;}

  .wrap{max-width:1175px;margin:0 auto;}

  /* ============ HEADER ============ */
  .top{
    background:
      radial-gradient(120% 140% at 50% 0%, #3d3c92 0%, #1d2358 60%, #0a0f2e 100%);
    padding:25px 20px 42.5px;
    text-align:center;
  }
  .steps{
    display:flex;
    justify-content:center;
    gap:32.5px;
    align-items:center;
    margin-bottom:32.5px;
  }
  .step{
    color:#c9c6e8;
    font-weight:700;
    font-size:18.75px;
    letter-spacing:.35px;
  }
  .step.active{
    color:#fff;
    background:rgba(255,255,255,.10);
    border:1.25px solid rgba(255,255,255,.35);
    padding:7.5px 20px;
    border-radius:7.5px;
  }
  .headline{
    font-size:42.5px;
    font-weight:800;
    letter-spacing:.6px;
    color:#fff;
    text-transform:uppercase;
  }
  .headline .s1{color:var(--orange);}
  .dots{
    margin-top:17.5px;
    color:#7d79b6;
    letter-spacing:10px;
    font-size:16.25px;
  }

  /* ============ PRICING ============ */
  .pricing{
    background:#fff;
    padding:42.5px 20px 55px;
  }
  .cards{
    display:flex;
    justify-content:center;
    align-items:stretch;
    gap:25px;
    flex-wrap:wrap;
  }
  .card{
    position:relative;
    width:327.5px;
    background:#fff;
    border:2.5px solid var(--card-border);
    border-radius:12.5px;
    padding:0 0 22.5px;
    text-align:center;
    box-shadow:0 7.5px 22.5px rgba(18,16,70,.12);
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .card-tag{
    width:100%;
    background:linear-gradient(180deg,var(--purple-header2),var(--purple-header));
    color:#fff;
    font-weight:700;
    font-size:18.75px;
    padding:11.25px 0;
    border-radius:8.75px 8.75px 0 0;
    letter-spacing:.35px;
  }
  .card-body{padding:0 20px;width:100%;}

  .qty{font-size:32.5px;font-weight:800;color:#1a1a1a;margin-top:20px;line-height:1.1;}
  .supply{font-size:16.25px;color:#555;margin-top:2.5px;}

  .bottle{height:187.5px;display:flex;align-items:center;justify-content:center;margin:10px 0 5px;}
  .bottle img{max-height:187.5px;width:auto;}

  .price{display:flex;align-items:flex-start;justify-content:center;gap:5px;margin-top:7.5px;}
  .price .dollar{font-size:32.5px;font-weight:800;margin-top:10px;}
  .price .num{font-size:70px;font-weight:800;line-height:.9;letter-spacing:-1.25px;}
  .price .per{font-size:17.5px;font-weight:700;text-align:left;line-height:1.05;margin-top:12.5px;}

  .benefits{margin:17.5px 0 5px;text-align:left;display:inline-block;}
  .benefit{
    display:flex;align-items:center;gap:8.75px;
    font-size:16.25px;font-weight:700;color:#333;
    padding:6.25px 0;justify-content:center;
  }
  .benefit .ck{
    color:var(--gold);flex:none;
  }
  .benefit.save{color:var(--gold);}
  .divider{border-top:1.25px dashed #d7d2ee;margin:10px 7.5px;}

  .buy{
    width:100%;
    margin-top:7.5px;
    border:none;
    cursor:pointer;
    font-weight:800;
    font-size:20px;
    color:#222;
    padding:17.5px 0;
    border-radius:7.5px;
    display:flex;align-items:center;justify-content:center;gap:10px;
    background:linear-gradient(180deg,var(--gray-btn-a),var(--gray-btn-b));
    box-shadow:0 3.75px 0 rgba(0,0,0,.12);
    transition:transform .05s ease, filter .15s ease;
  }
  .buy:hover{filter:brightness(1.03);}
  .buy:active{transform:translateY(2.5px);box-shadow:0 1.25px 0 rgba(0,0,0,.12);}
  .buy .cart{font-size:18.75px;}

  .pay{margin:17.5px auto 10px;max-width:237.5px;}
  .pay img{width:100%;}

  .total{font-size:20px;font-weight:700;color:#1a1a1a;}
  .total .old{text-decoration:line-through;color:#9a9a9a;font-weight:600;margin-right:5px;}
  .ship{font-size:18.75px;font-weight:800;color:#1a1a1a;margin-top:3.75px;}
  .ship .free{color:#1a1a1a;}

  /* ---- Best offer (center, elevated) ---- */
  .card.best{
    width:350px;
    background:linear-gradient(180deg,var(--purple-best-a),var(--purple-best-b));
    border-color:#7a6bc4;
    transform:translateY(-17.5px);
    padding-bottom:25px;
    box-shadow:0 17.5px 37.5px rgba(18,16,70,.38);
  }
  .card.best .card-tag{
    background:transparent;
    color:#fff;
    font-size:17.5px;
    padding:12.5px 0 5px;
  }
  .card.best .qty,
  .card.best .supply,
  .card.best .price .dollar,
  .card.best .price .num,
  .card.best .price .per,
  .card.best .benefit,
  .card.best .total,
  .card.best .ship{color:#fff;}
  .card.best .total .old{color:#c3bce6;}
  .card.best .benefit{color:#fff;}
  .card.best .benefit.save,
  .card.best .benefit .ck{color:var(--yellow);}
  .card.best .divider{border-color:rgba(255,255,255,.30);}
  .card.best .buy{
    background:linear-gradient(180deg,var(--yellow-btn-a),var(--yellow-btn-b));
    color:#1a1a1a;
  }
  .card.best .ship .free{color:var(--yellow);}

  /* ============ GUARANTEE SECTION ============ */
  .guarantee{
    background:var(--purple-section);
    color:#fff;
    padding:55px 20px;
  }
  .guarantee .inner{
    max-width:1125px;margin:0 auto;
    display:flex;gap:42.5px;align-items:flex-start;flex-wrap:wrap;
  }
  .seal{flex:none;width:225px;margin:7.5px auto 0;}
  .seal img{width:100%;}
  .g-text{flex:1;min-width:350px;}
  .g-intro{font-size:17.5px;line-height:1.6;color:#d5d1ec;margin-bottom:25px;}
  .g-title{font-size:32.5px;font-weight:800;line-height:1.2;}
  .g-title .yl{color:var(--yellow);}
  .g-body{font-size:17.5px;line-height:1.6;color:#d5d1ec;margin-top:15px;}
  .trust{
    display:flex;gap:20px;margin-top:30px;align-items:center;flex-wrap:wrap;
  }
  .trust img{height:107.5px;width:auto;}

  /* ============ LABEL BANNER ============ */
  .label-sec{background:var(--purple-section);padding:0 0 7.5px;}
  .label-sec .inner{max-width:1125px;margin:0 auto;padding:0 10px;}
  .label-sec img{width:100%;border-radius:5px;}

  /* selected state */
  .card.selected{outline:3.75px solid var(--yellow);outline-offset:2.5px;}

  /* ============ RESPONSIVE ============ */
  @media (max-width:880px){
    .card.best{transform:none;}
    .cards{gap:27.5px;}
  }
  @media (max-width:600px){
    .headline{font-size:30px;}
    .steps{gap:20px;}
    .guarantee .inner{flex-direction:column;text-align:center;}
    .trust{justify-content:center;}
    .foot-links{gap:17.5px;font-size:16.25px;}
  }

  /* ===== BuyGoods footer ===== */
  .site-footer{background:#0b0b0b;color:#9a9a9a;padding:40px 20px;text-align:center;}
  .site-footer .container{max-width:1080px;margin:0 auto;}
  .site-footer .footer-links{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:26px;padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid rgba(255,255,255,.12);}
  .site-footer .footer-links li{list-style:none;}
  .site-footer .footer-links a{color:#cfcfcf;text-decoration:none;font-size:16px;font-weight:600;}
  .site-footer .footer-links a:hover{text-decoration:underline;}
  .site-footer .footer-disclaimer{max-width:900px;margin:0 auto;font-size:13.5px;line-height:1.7;color:#9a9a9a;}
  .site-footer .footer-disclaimer b{color:#dcdcdc;}
