.wwb-packages-wrap {
  --wwb-accent: #8b5cf6;
  --wwb-button: #2563eb;
  --wwb-text: #f8fafc;
  --wwb-muted: #a5b4fc;
  --wwb-bg-start: #030712;
  --wwb-bg-end: #070b23;
  --wwb-card: #091226;
  --wwb-border: #1d2b52;
  background: linear-gradient(160deg, var(--wwb-bg-start), var(--wwb-bg-end));
  color: var(--wwb-text);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 26px;
  padding: 34px 22px;
  box-shadow: 0 25px 80px rgba(0,0,0,.35);
}
.wwb-packages-inner { max-width: 1240px; margin: 0 auto; }
.wwb-section-head { text-align: center; max-width: 760px; margin: 0 auto 28px; }
.wwb-section-head h2 { color: var(--wwb-text); font-size: clamp(32px, 4vw, 48px); line-height: 1.1; margin: 0 0 12px; }
.wwb-section-head p { color: var(--wwb-muted); font-size: 17px; margin: 0; }
.wwb-toggle { display: inline-flex; gap: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); padding: 8px; border-radius: 999px; margin: 0 auto 28px; position: relative; left: 50%; transform: translateX(-50%); }
.wwb-toggle-btn { appearance: none; border: 0; background: transparent; color: var(--wwb-muted); padding: 10px 16px; border-radius: 999px; cursor: pointer; font-weight: 700; }
.wwb-toggle-btn.is-active { background: var(--wwb-accent); color: #06131d; }
.wwb-cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.wwb-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--wwb-card);
  border: 1px solid var(--wwb-border);
  border-radius: 24px;
  padding: 26px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.wwb-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 60px rgba(0,0,0,.38);
}
.wwb-card.has-badge { border-color: color-mix(in srgb, var(--wwb-accent) 38%, var(--wwb-border)); }
.wwb-card.is-featured {
  transform: translateY(-6px) scale(1.01);
  border-color: color-mix(in srgb, var(--wwb-accent) 55%, var(--wwb-border));
  box-shadow: 0 22px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(139,92,246,.18), 0 0 34px rgba(139,92,246,.18);
}
.wwb-card.is-featured:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 28px 82px rgba(0,0,0,.5), 0 0 0 1px rgba(139,92,246,.24), 0 0 38px rgba(139,92,246,.22);
}
.wwb-badge {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 18px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--wwb-accent) 92%, white), color-mix(in srgb, var(--wwb-button) 88%, white));
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}
.wwb-card-top { min-height: 110px; }
.wwb-card-top h3 { margin: 0 0 8px; font-size: 28px; color: var(--wwb-text); }
.wwb-desc { margin: 0; color: var(--wwb-muted); min-height: 52px; }
.wwb-price-area { margin: 24px 0 18px; min-height: 70px; }
.wwb-price { display: none; align-items: flex-end; gap: 2px; }
.wwb-price.is-active { display: flex; }
.wwb-currency { font-size: 22px; font-weight: 700; transform: translateY(-10px); }
.wwb-amount { font-size: clamp(40px, 5vw, 54px); line-height: 1; font-weight: 900; letter-spacing: -.04em; }
.wwb-price-label { color: var(--wwb-muted); margin-left: 8px; font-size: 14px; font-weight: 600; }
.wwb-features { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; flex: 1 1 auto; }
.wwb-features li { padding-left: 24px; position: relative; color: var(--wwb-text); }
.wwb-features li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--wwb-accent); font-weight: 800; }
.wwb-button {
  margin-top: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 800;
  padding: 12px 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--wwb-accent) 92%, white), color-mix(in srgb, var(--wwb-button) 90%, white));
  color: white;
  box-shadow: 0 12px 30px rgba(37,99,235,.28);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}
.wwb-button:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(37,99,235,.34); }
.wwb-button.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.wwb-addons { margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); }
.wwb-addons-head { text-align: center; margin-bottom: 18px; }
.wwb-addons-head h3 { margin: 0 0 8px; font-size: 26px; color: var(--wwb-text); }
.wwb-addons-head p { margin: 0; color: var(--wwb-muted); }
.wwb-addon-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.wwb-addon-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.wwb-addon-name { color: var(--wwb-text); font-weight: 700; }
.wwb-addon-price { color: var(--wwb-muted); font-weight: 700; }
@media (max-width: 980px) {
  .wwb-cards-grid, .wwb-addon-grid { grid-template-columns: 1fr; }
  .wwb-card.is-featured, .wwb-card.is-featured:hover { transform: none; }
}