/* ============================================================
   pricing.css — Pricing page only
   ============================================================ */

/* ── Pricing ────────────────────────────────────────────────── */

.section--plans {
  background: transparent !important;
  padding-top: var(--space-xl);
}


/* ── Hero rail chips ─────────────────────────────────────── */
.hero-rail {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px auto 0;
}

.hero-chip {
  padding: 10px 14px;
  border-radius: 999px;
  color: #e4ebff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  text-decoration: none !important;
}

/* ── Billing toggle ──────────────────────────────────────── */
.pricing-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.toggle {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 22px rgba(255, 102, 0, 0.12);
}

.toggle button {
  border: 0;
  background: transparent;
  color: rgba(232, 239, 255, 0.72);
  padding: 12px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s cubic-bezier(0.22, 0.9, 0.25, 1);
  font-family: inherit;
}

.toggle button.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 102, 0, 0.22), rgba(255, 102, 0, 0.10));
  box-shadow: 0 0 26px rgba(255, 102, 0, 0.18) inset, 0 0 22px rgba(255, 102, 0, 0.16);
}

.save {
  margin-left: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  color: #ffd0af;
  border: 1px solid rgba(255, 102, 0, 0.24);
  background: rgba(255, 102, 0, 0.09);
}

/* ── Plan carousel shell ─────────────────────────────────── */
.shell-wrap {
  display: grid;
  grid-template-columns: 76px 1fr 76px;
  gap: 18px;
  align-items: center;
}

.nav-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: radial-gradient(circle at 35% 30%,
    rgba(255, 255, 255, 0.10),
    rgba(255, 255, 255, 0.04) 45%,
    rgba(255, 255, 255, 0.03) 100%);
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  backdrop-filter: blur(14px);
  transition: 0.35s cubic-bezier(0.22, 0.9, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.nav-btn:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(255, 102, 0, 0.32);
  box-shadow: 0 0 34px rgba(255, 102, 0, 0.18), 0 0 26px rgba(99, 169, 255, 0.08);
}

.nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.shell {
  position: relative;
  padding: 30px;
  border-radius: 36px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.055),
    rgba(255, 255, 255, 0.024));
  overflow: hidden;
  backdrop-filter: blur(18px);
  box-shadow: 0 0 55px rgba(255, 102, 0, 0.12), 0 0 65px rgba(99, 169, 255, 0.08);
}

.shell::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 36px;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 102, 0, 0.42),
    rgba(255, 255, 255, 0.09),
    rgba(99, 169, 255, 0.20));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.shell-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.shell-label {
  color: #cbd9ff;
  text-transform: uppercase;
}

.shell-status {
  color: rgba(232, 239, 255, 0.72);
}

/* ── Cards viewport + track ──────────────────────────────── */
.cards-viewport {
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.cards-track {
  display: flex;
  gap: 18px;
  transition: transform 0.72s cubic-bezier(0.18, 0.84, 0.18, 1);
  will-change: transform;
}

/* ── Individual plan card ────────────────────────────────── */
.plan-card {
  position: relative;
  flex: 0 0 calc((100% - 36px) / 3);
  min-height: 610px;
  border-radius: 32px;
  padding: 26px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.028));
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    transform 0.22s linear,
    opacity 0.45s cubic-bezier(0.22, 0.9, 0.25, 1),
    filter 0.45s cubic-bezier(0.22, 0.9, 0.25, 1),
    box-shadow 0.45s cubic-bezier(0.22, 0.9, 0.25, 1),
    border-color 0.45s cubic-bezier(0.22, 0.9, 0.25, 1),
    background 0.45s cubic-bezier(0.22, 0.9, 0.25, 1);
  transform-style: preserve-3d;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.24);
  will-change: transform;
}

.plan-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.11), transparent 16%),
    radial-gradient(circle at 84% 100%, rgba(255, 102, 0, 0.16), transparent 18%);
  opacity: 0.6;
  pointer-events: none;
}

.plan-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(240px circle at var(--local-x, 50%) var(--local-y, 50%),
      rgba(255, 255, 255, 0.16), transparent 40%),
    radial-gradient(220px circle at calc(var(--local-x, 50%) + 6%) calc(var(--local-y, 50%) - 6%),
      rgba(255, 102, 0, 0.10), transparent 42%);
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.22, 0.9, 0.25, 1);
  pointer-events: none;
}

.plan-card.side {
  opacity: 0.58;
  transform: scale(0.955);
  filter: blur(0.9px) saturate(0.85);
}

.plan-card.center {
  border-color: rgba(255, 102, 0, 0.22);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.078),
    rgba(255, 255, 255, 0.036));
  box-shadow:
    0 34px 82px rgba(0, 0, 0, 0.30),
    0 0 68px rgba(255, 102, 0, 0.16),
    0 0 42px rgba(99, 169, 255, 0.09);
}

.plan-card.center .energy-ring {
  opacity: 1;
}

.plan-card.interacting::after {
  opacity: 1;
}

/* ── Energy ring ─────────────────────────────────────────── */
.energy-ring {
  position: absolute;
  inset: -35%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 102, 0, 0.18), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(99, 169, 255, 0.07), transparent 26%);
  filter: blur(24px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.22, 0.9, 0.25, 1);
  pointer-events: none;
}

/* ── Plan card internals ─────────────────────────────────── */
.plan-name {
  font-weight: 700;
  margin-bottom: 12px;
}

.price-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}

.currency {
  color: #ffd3b6;
  transform: translateY(-10px);
}

.price {
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 28px rgba(255, 102, 0, 0.10);
}

.per {
  padding-bottom: 10px;
  color: rgba(232, 239, 255, 0.72);
}

.year-note {
  height: 20px;
  color: #ffbe90;
  margin-bottom: 18px;
}

.capacity {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.capacity strong {
  display: block;
  margin-bottom: 6px;
}

.capacity span {
  color: rgba(232, 239, 255, 0.72);
}

.stack-line {
  padding: 12px 0 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
}

/* ── Feature chips ───────────────────────────────────────── */
.features {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}

.feature-chip {
  min-height: 56px;
  padding: 8px 6px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.035);
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(232, 239, 255, 0.72);
  transition: 0.3s cubic-bezier(0.22, 0.9, 0.25, 1);
}

.feature-chip span:last-child {
  white-space: normal; /* Allows text to drop to a new line */
  word-break: break-word; /* Prevents long words from breaking the layout */
  font-size: 13px; /* Slightly scales down the text to fit */
  line-height: 1.2;
}

.feature-chip:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 102, 0, 0.14);
  transform: translateY(-1px);
}

.feature-chip:hover .ic {
  transform: scale(1.08) rotate(-3deg);
  filter: drop-shadow(0 0 14px rgba(255, 102, 0, 0.18));
}

.ic {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffb27a;
  transition: 0.28s cubic-bezier(0.22, 0.9, 0.25, 1);
}

.feature-chip:nth-child(2n) .ic { color: #9cc3ff; }
.feature-chip:nth-child(3n) .ic { color: #d7c8ff; }

.ic svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ic .fill {
  fill: currentColor;
  stroke: none;
}

/* ── Dots + labels ───────────────────────────────────────── */
.plan-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  position: relative;
  z-index: 2;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.22, 0.9, 0.25, 1);
}

.dot.active {
  background: #ff6600;
  box-shadow: 0 0 16px rgba(255, 102, 0, 0.55), 0 0 24px rgba(99, 169, 255, 0.18);
  transform: scale(1.2);
}

.plan-labels {
  margin-top: 10px;
  text-align: center;
  color: rgba(255, 255, 255, 0.52);
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}

/* ── AI strip ────────────────────────────────────────────── */
.ai-strip {
  position: relative;
  padding: 38px;
  border-radius: 36px;
  border: 1px solid rgba(141, 99, 255, 0.20);
  background:
    radial-gradient(circle at 82% 20%, rgba(141, 99, 255, 0.28), transparent 18%),
    radial-gradient(circle at 18% 80%, rgba(255, 102, 0, 0.16), transparent 20%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  overflow: hidden;
  backdrop-filter: blur(18px);
  box-shadow: 0 0 58px rgba(141, 99, 255, 0.14), 0 0 45px rgba(255, 102, 0, 0.10);
}

.ai-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.07), transparent 14%),
    radial-gradient(circle at 66% 56%, rgba(255, 255, 255, 0.05), transparent 13%);
  animation: aiField 10s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes aiField {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1.04); }
}

.ai-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 26px;
  align-items: center;
}

.ai-copy-row {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.ai-logo {
  width: 120px;
  height: 120px;
  flex: 0 0 120px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffc194;
  background: radial-gradient(circle at 40% 30%,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.05) 45%,
    rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 0 36px rgba(141, 99, 255, 0.24),
    0 0 30px rgba(255, 102, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: aiPulse 4.2s ease-in-out infinite;
  position: relative;
}

.ai-logo::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(141, 99, 255, 0.18), transparent 35%);
  filter: blur(20px);
  animation: aiHalo 4.2s ease-in-out infinite;
}

@keyframes aiHalo {
  0%, 100% { transform: scale(0.95); opacity: 0.45; }
  50%       { transform: scale(1.08); opacity: 0.7; }
}

@keyframes aiPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%       { transform: scale(1.03) rotate(1.4deg); }
}

.ai-logo svg {
  width: 80px;
  height: 80px;
  position: relative;
  z-index: 1;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-title {
  margin: 10px 0;
}

.ai-copy {
  color: rgba(232, 239, 255, 0.72);
  max-width: 760px;
}

.ai-price-box {
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
}

.ai-price-box .small {
  color: #d1c4ff;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ai-price-box .big {
  font-weight: 800;
  margin-bottom: 10px;
}

.ai-price-box p {
  color: rgba(232, 239, 255, 0.72);
  margin: 0 0 18px;
}

/* ── Value section ───────────────────────────────────────── */
.value-sub {
  max-width: 800px;
  color: rgba(232, 239, 255, 0.72);
  margin: 0;
}

.value-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 30px;
  align-items: start;
  margin-top: 28px;
}

.stack { display: grid; gap: 18px; }

.bullets { display: grid; gap: 12px; margin-top: 12px; }

.bullet {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.035);
  transition: 0.3s cubic-bezier(0.22, 0.9, 0.25, 1);
}

.bullet:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 102, 0, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

.bullet-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffb27a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  box-shadow: 0 0 18px rgba(255, 102, 0, 0.10);
}

.bullet.blue .bullet-icon  { color: #9cc3ff; box-shadow: 0 0 18px rgba(99, 169, 255, 0.10); }
.bullet.purple .bullet-icon { color: #d7c8ff; box-shadow: 0 0 18px rgba(141, 99, 255, 0.10); }

.bullet-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bullet-body {
  color: rgba(232, 239, 255, 0.72);
}

.bullet-body strong {
  display: block;
  color: #fff;
  margin-bottom: 2px;
}

.compare { position: sticky; top: 24px; }

.compare-list { display: grid; gap: 12px; margin-top: 12px; }

.compare-item {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(232, 239, 255, 0.72);
}

.compare-item strong { color: #fff; }

/* ── CTA box ─────────────────────────────────────────────── */
.cta-box {
  text-align: center;
  padding: 50px 30px;
  border-radius: 36px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 102, 0, 0.16), transparent 28%),
    radial-gradient(circle at 50% 35%, rgba(99, 169, 255, 0.06), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.03));
  box-shadow:
    0 0 55px rgba(255, 102, 0, 0.12),
    0 0 48px rgba(99, 169, 255, 0.08);
  backdrop-filter: blur(16px);
}

.cta-box p {
  max-width: 760px;
  margin: 0 auto 20px;
  color: rgba(232, 239, 255, 0.72);
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1180px) {
  .shell-wrap { grid-template-columns: 58px 1fr 58px; }
  .nav-btn    { width: 58px; height: 58px; font-size: 24px; }
}

@media (max-width: 1080px) {
  .shell-wrap  { grid-template-columns: 1fr; }
  .nav-side    { display: none; }
  .plan-card   { flex: 0 0 100%; }
  .ai-grid,
  .value-grid  { grid-template-columns: 1fr; }
  .compare     { position: static; }
}

@media (max-width: 680px) {
  .features       { grid-template-columns: 1fr; }
  .ai-copy-row    { flex-direction: column; }
  .bullet         { grid-template-columns: 1fr; }
}

/* ── Viral Offer Bridge ───────────────────────────────────── */
.wg-offers-bridge{
      position:relative;
      overflow:hidden;
      padding:46px 24px 82px;
      
      isolation:isolate;
    }

    .wg-offers-bridge:before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
      background-size:34px 34px;
      mask-image:radial-gradient(circle at center,#000 0%,transparent 78%);
      z-index:-2;
    }

    .wg-offers-bridge:after{
      content:"";
      position:absolute;
      left:50%;
      top:45%;
      width:980px;
      height:430px;
      transform:translate(-50%,-50%);
      background:linear-gradient(90deg,rgba(255,102,0,.20),rgba(56,216,255,.12),rgba(139,92,246,.20));
      filter:blur(58px);
      opacity:.88;
      z-index:-3;
    }

    .wg-offers-wrap{
      max-width:1240px;
      margin:0 auto;
    }

    .wg-offers-box{
      position:relative;
      overflow:hidden;
      border-radius:34px;
      border:1px solid rgba(255,255,255,.14);
      background:
        radial-gradient(circle at 8% 0%,rgba(255,102,0,.28),transparent 31%),
        radial-gradient(circle at 94% 10%,rgba(56,216,255,.17),transparent 28%),
        linear-gradient(135deg,rgba(16,29,53,.40),rgba(8,14,26,.40));
      box-shadow:
        0 34px 110px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.10),
        0 0 70px rgba(255,102,0,.14);
      padding:34px;
      margin-bottom: 46px;
    }

    .wg-offers-box:before{
      content:"";
      position:absolute;
      inset:-2px;
      background:linear-gradient(110deg,transparent,rgba(255,255,255,.10),transparent);
      transform:translateX(-74%);
      animation:wgShine 6s ease-in-out infinite;
      pointer-events:none;
    }

    @keyframes wgShine{
      0%,55%{transform:translateX(-82%)}
      100%{transform:translateX(92%)}
    }

    .wg-offers-head{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:34px;
      align-items:end;
      margin-bottom:26px;
    }

    .wg-eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      width:max-content;
      border-radius:999px;
      padding:9px 13px;
      background:rgba(255,102,0,.13);
      border:1px solid rgba(255,102,0,.34);
      color:#FFD3B8;
      font-size:12px;
      font-weight:900;
      letter-spacing:.12em;
      text-transform:uppercase;
      margin-bottom:18px;
    }

    .wg-live-dot{
      width:9px;
      height:9px;
      border-radius:50%;
      background:var(--wg-orange);
      box-shadow:0 0 18px var(--wg-orange);
      animation:wgPulse 1.35s ease-in-out infinite;
    }

    @keyframes wgPulse{
      0%,100%{transform:scale(1);opacity:1}
      50%{transform:scale(1.65);opacity:.55}
    }

    .wg-offers-copy h2{
      margin:0;
      max-width:760px;
      font-size:clamp(32px,4.3vw,58px);
      line-height:.96;
      letter-spacing:-.065em;
      font-weight:900;
    }

    .wg-offers-copy h2 span{
      background:linear-gradient(90deg,#fff,#FFB17A,#38D8FF,#fff);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .wg-offers-copy p{
      max-width:720px;
      margin:18px 0 0;
      color:var(--wg-muted);
      font-size:16px;
      line-height:1.72;
    }

    .wg-offers-copy p strong{color:#fff}

    .wg-campaign-strip{
      position:relative;
      border-radius:26px;
      padding:22px;
      border:1px solid rgba(255,255,255,.15);
      background:
        radial-gradient(circle at 88% 0%,rgba(255,102,0,.24),transparent 44%),
        linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045));
      box-shadow:0 22px 70px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.11);
      overflow:hidden;
    }

    .wg-campaign-strip:before{
      content:"";
      position:absolute;
      left:-40px;
      top:-44px;
      width:130px;
      height:130px;
      border-radius:999px;
      background:rgba(255,102,0,.18);
      filter:blur(4px);
    }

    .wg-strip-label{
      display:block;
      color:#D7C8FF;
      font-size:12px;
      font-weight:900;
      letter-spacing:.10em;
      text-transform:uppercase;
      margin-bottom:8px;
    }

    .wg-strip-title{
      font-size:24px;
      line-height:1.05;
      letter-spacing:-.04em;
      font-weight:900;
      margin:0 0 12px;
    }

    .wg-mini-points{
      display:flex;
      flex-wrap:wrap;
      gap:9px;
      margin-top:16px;
    }

    .wg-point{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      padding:9px 12px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.12);
      color:#E7EEFF;
      font-size:13px;
      font-weight:800;
    }

    .wg-point:before{
      content:"✓";
      width:19px;
      height:19px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:#08101E;
      background:linear-gradient(135deg,var(--wg-green),#A7FFD9);
      font-size:11px;
      font-weight:900;
      flex:0 0 auto;
    }

    .wg-offer-grid{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
    }

    .wg-offer-card{
      position:relative;
      min-height:100%;
      overflow:hidden;
      border-radius:28px;
      padding:22px;
      border:1px solid rgba(255,255,255,.15);
      background:
        radial-gradient(circle at 84% 0%,var(--offer-glow),transparent 42%),
        linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.040));
      box-shadow:0 22px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12);
      transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
    }

    .wg-offer-card:hover{
      transform:translateY(-5px);
      border-color:rgba(255,255,255,.28);
      box-shadow:0 28px 80px rgba(0,0,0,.36),0 0 42px var(--offer-shadow),inset 0 1px 0 rgba(255,255,255,.12);
    }

    .wg-offer-card.featured{
      border-color:rgba(255,102,0,.36);
      box-shadow:0 24px 82px rgba(0,0,0,.34),0 0 46px rgba(255,102,0,.16),inset 0 1px 0 rgba(255,255,255,.14);
    }

    .wg-offer-card.featured:before{
      content:"Most Wanted";
      position:absolute;
      top:16px;
      right:-36px;
      transform:rotate(35deg);
      width:148px;
      text-align:center;
      padding:7px 0;
      background:linear-gradient(135deg,var(--wg-orange),var(--wg-orange2));
      color:#fff;
      font-size:10px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      box-shadow:0 12px 30px rgba(255,102,0,.28);
    }

    .wg-card-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      margin-bottom:18px;
      padding-right:4px;
    }

    .wg-offer-kicker{
      display:block;
      color:var(--offer-text);
      font-size:11px;
      font-weight:900;
      letter-spacing:.10em;
      text-transform:uppercase;
      margin-bottom:8px;
    }

    .wg-offer-title{
      margin:0;
      font-size:24px;
      line-height:1.05;
      letter-spacing:-.045em;
      font-weight:900;
    }

    .wg-save-badge{
      width:78px;
      height:78px;
      border-radius:24px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      text-align:center;
      transform:rotate(4deg);
      background:linear-gradient(135deg,#fff,#FFE5D6);
      color:#101827;
      box-shadow:0 18px 44px var(--offer-shadow);
    }

    .wg-save-badge strong{
      display:block;
      font-size:24px;
      line-height:.9;
      letter-spacing:-.06em;
      font-weight:900;
    }

    .wg-save-badge span{
      display:block;
      font-size:9px;
      font-weight:900;
      text-transform:uppercase;
      margin-top:4px;
      color:#C2410C;
    }

    .wg-price-row{
      display:flex;
      align-items:flex-end;
      gap:10px;
      margin:14px 0 16px;
      min-height:50px;
    }

    .wg-old{
      color:#8390AA;
      text-decoration:line-through;
      font-size:16px;
      font-weight:900;
      margin-bottom:6px;
    }

    .wg-new{
      font-size:42px;
      line-height:.9;
      letter-spacing:-.07em;
      font-weight:900;
    }

    .wg-term{
      color:#A8B4CF;
      font-size:12px;
      font-weight:800;
      margin-bottom:3px;
      line-height:1.2;
    }

    .wg-offer-desc{
      color:#A8B4CF;
      font-size:13px;
      line-height:1.6;
      margin:0 0 16px;
      min-height:62px;
    }

    .wg-offer-list{
      display:grid;
      gap:9px;
      margin:0;
      padding:0;
      list-style:none;
    }

    .wg-offer-list li{
      display:flex;
      gap:8px;
      color:#E7EEFF;
      font-size:13px;
      line-height:1.35;
      font-weight:700;
    }

    .wg-offer-list li:before{
      content:"";
      width:8px;
      height:8px;
      margin-top:5px;
      border-radius:50%;
      background:var(--offer-text);
      box-shadow:0 0 16px var(--offer-text);
      flex:0 0 auto;
    }

    .wg-cta-row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:20px;
    }

    .wg-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding:0 16px;
      border-radius:15px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.08);
      color:#fff;
      text-decoration:none;
      font-size:13px;
      font-weight:900;
      transition:.2s ease;
    }

    .wg-btn.primary{
      background:linear-gradient(135deg,var(--wg-orange),var(--wg-orange2));
      border-color:rgba(255,102,0,.38);
      box-shadow:0 16px 36px rgba(255,102,0,.26);
    }

    .wg-btn:hover{
      transform:translateY(-2px);
      border-color:rgba(255,255,255,.28);
    }

    .wg-offer-foot{
      position:relative;
      z-index:2;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:18px;
      flex-wrap:wrap;
      margin-top:20px;
      padding:16px 18px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.11);
      background:rgba(255,255,255,.055);
    }

    .wg-foot-note{
      color:#A8B4CF;
      font-size:12px;
      line-height:1.55;
      max-width:780px;
    }

    .wg-foot-note strong{color:#fff}

    .wg-divider-title{
      display:flex;
      align-items:center;
      gap:16px;
      margin:38px 0 0;
      color:#fff;
      font-size:34px;
      line-height:1;
      letter-spacing:-.055em;
      font-weight:900;
    }

    .wg-divider-icon{
      width:54px;
      height:54px;
      border-radius:18px;
      display:grid;
      place-items:center;
      color:#FFC08C;
      border:1px solid rgba(255,102,0,.28);
      background:rgba(255,102,0,.10);
      box-shadow:0 0 34px rgba(255,102,0,.16);
      flex:0 0 auto;
    }

    @media(max-width:1080px){
      .wg-offers-head{grid-template-columns:1fr}
      .wg-offer-grid{grid-template-columns:1fr 1fr}
      .wg-offer-card.featured{grid-column:1 / -1}
    }

    @media(max-width:760px){
      .wg-offers-box{padding:24px}
      .wg-offer-grid{grid-template-columns:1fr}
      .wg-offer-card.featured{grid-column:auto}
      .wg-divider-title{font-size:28px}
    }

    @media(max-width:560px){
      .wg-offers-bridge{padding:32px 16px 62px}
      .wg-card-top{flex-direction:column}
      .wg-save-badge{width:76px;height:76px}
      .wg-offers-copy h2{font-size:34px}
      .wg-offer-title{font-size:22px}
      .wg-new{font-size:38px}
    }

@media (max-width: 900px) {
    .wg-offers-bridge {
        background: transparent !important; /* Flat solid fallback */
        padding-top: 24px !important;
        padding-bottom: 48px !important;
    }
    .wg-offers-bridge:before,
    .wg-offers-bridge:after {
        display: none !important; /* Kill both background mesh grid and heavy 980px blurred gradient blob */
    }
    .wg-offers-box {
        background: rgba(13, 24, 45, .82) !important;
        box-shadow: none !important; /* Kill expensive composite glow filters */
    }
    .wg-offers-box:before {
        animation: none !important; /* Immediately halt the wgShine loop animation on mobile */
    }
}