/* ============================================================
   offers.css — Viral Offers landing page only
   ============================================================ */

.wg-viral-offers{position:relative;overflow:hidden;padding:110px 24px;background:
      radial-gradient(circle at 12% 10%, rgba(255,102,0,.30), transparent 28%),
      radial-gradient(circle at 88% 20%, rgba(57,216,255,.22), transparent 30%),
      radial-gradient(circle at 52% 100%, rgba(139,92,246,.26), transparent 34%);isolation:isolate}
    .wg-viral-offers:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle at center,#000 0%,transparent 78%);z-index:-2}
    .wg-viral-offers:after{content:"";position:absolute;width:900px;height:900px;left:50%;top:50%;transform:translate(-50%,-50%);background:conic-gradient(from 120deg,rgba(255,102,0,.16),rgba(57,216,255,.12),rgba(139,92,246,.14),rgba(255,61,138,.12),rgba(255,102,0,.16));filter:blur(42px);opacity:.75;z-index:-3;animation:spinGlow 22s linear infinite}
    @keyframes spinGlow{to{transform:translate(-50%,-50%) rotate(360deg)}}
    .wg-offers-wrap {
        max-width: 100%;
        position: relative;
    }
    .wg-offers-head {
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        gap: 32px;
        align-items: end;
        margin-bottom: 34px;
    }
    .wg-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        width: max-content;
        padding: 9px 13px;
        border: 1px solid rgba(255,102,0,.35);
        border-radius: 999px;
        color: #FFD7C2;
        background: rgba(255,102,0,.12);
        box-shadow: 0 0 28px rgba(255,102,0,.16);
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .12em;
        margin-bottom: 18px;
    }
    .pulse-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--orange);
        box-shadow: 0 0 18px var(--orange);
        animation: pulse 1.4s ease-in-out infinite;
    }
    @keyframes pulse {
        0%,100% { transform: scale(1); opacity: 1 }
        50% { transform: scale(1.6); opacity: .55 }
    }
    .wg-offers-head h2 {
        margin: 0;
        max-width: 760px;
        font-size: clamp(36px,5vw,72px);
        line-height: .94;
        letter-spacing: -.07em;
        font-weight: 900;
    }
    .wg-offers-head h2 span {
        background: linear-gradient(90deg,#fff,var(--orange2),var(--blue),#fff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        padding-right: 0.1em;
    }
    .wg-offers-copy {
        color: var(--muted);
        font-size: 16px;
        line-height: 1.75;
        max-width: 540px;
        margin-left: auto;
    }
    .wg-offers-copy strong {
        color: #fff;
    }
    .wg-master-strip {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 20px;
        align-items: center;
        margin: 0 0 28px;
        padding: 20px;
        border: 1px solid rgba(255,102,0,.24);
        border-radius: 28px;
        background: linear-gradient(90deg,rgba(255,102,0,.14),rgba(57,216,255,.07),rgba(139,92,246,.10));
        box-shadow: inset 0 0 34px rgba(255,255,255,.035), 0 20px 70px rgba(0,0,0,.25);
    }
    .wg-master-strip h3 {
        margin: 0 0 6px;
        font-size: 22px;
        letter-spacing: -.04em;
    }
    .wg-master-strip p {
        margin: 0;
        color: #B9C7E2;
        font-size: 14px;
        line-height: 1.55;
    }
    .wg-master-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        border-radius: 999px;
        padding: 12px 16px;
        background: linear-gradient(135deg,var(--orange),var(--orange2));
        color: #fff;
        font-weight: 900;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .09em;
        box-shadow: 0 16px 35px rgba(255,102,0,.26);
    }
    .wg-ticker {
        display: flex;
        gap: 12px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.12);
        background: rgba(255,255,255,.045);
        border-radius: 999px;
        padding: 10px;
        margin: 28px 0 34px;
        box-shadow: inset 0 0 26px rgba(255,255,255,.04);
    }
    .wg-ticker-track {
        display: flex;
        gap: 12px;
        min-width: max-content;
        animation: marquee 28s linear infinite;
    }
    @keyframes marquee {
        to { transform: translateX(-50%) }
    }
    .wg-ticker-item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 14px;
        border-radius: 999px;
        background: rgba(8,14,26,.72);
        border: 1px solid rgba(255,255,255,.10);
        color: #DCE8FF;
        font-weight: 800;
        font-size: 13px;
        white-space: nowrap;
    }
    .wg-ticker-item b {
        color: var(--orange2);
    }

    .wg-offers-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .wg-offer-card {
        position: relative;
        border-radius: 30px;
        padding: 26px;
        border: 1px solid rgba(255,255,255,.14);
        background: rgba(13,24,45,.42);
        backdrop-filter: blur(18px);
        box-shadow: 0 28px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12);
        overflow: hidden;
        transition: .25s ease;
        display: flex;
        flex-direction: column;
    }
    .wg-offer-card:before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        background: linear-gradient(135deg,rgba(255,102,0,.70),rgba(57,216,255,.35),rgba(139,92,246,.55),rgba(255,61,138,.40));
        opacity: 0;
        z-index: -1;
        transition: .25s ease;
    }
    .wg-offer-card:hover:before {
        opacity: .95;
    }
    .wg-offer-card:hover {
        transform: translateY(-6px);
    }
    .wg-offer-card.featured {
        background: radial-gradient(circle at 80% 10%,rgba(255,209,102,.25),transparent 28%), radial-gradient(circle at 15% 0%,rgba(255,102,0,.30),transparent 32%), linear-gradient(145deg,rgba(255,102,0,.26),rgba(13,24,45,.80) 45%,rgba(139,92,246,.18));
        border-color: rgba(255,102,0,.38);
    }
    .wg-featured-badge {
        position: absolute;
        top: 16px;
        right: -36px;
        transform: rotate(35deg);
        width: 148px;
        text-align: center;
        padding: 7px 0;
        background: linear-gradient(135deg, var(--orange), var(--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);
        z-index: 10;
        transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.25, 1);
    }
    .wg-offer-card:hover .wg-featured-badge {
        transform: rotate(35deg) scale(1.05);
    }
    .wg-card-glow {
        position: absolute;
        width: 300px;
        height: 300px;
        right: -100px;
        top: -100px;
        border-radius: 50%;
        filter: blur(6px);
        opacity: .65;
        z-index: 1;
    }
    .featured .wg-card-glow { background: radial-gradient(circle,var(--orange),transparent 64%) }
    .cyan .wg-card-glow { background: radial-gradient(circle,var(--blue),transparent 64%) }
    .green .wg-card-glow {
        width: 380px;
        height: 380px;
        right: -120px;
        top: -120px;
        background: radial-gradient(circle,var(--green),transparent 64%);
    }

    .wg-offer-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        position: relative;
        z-index: 2;
        margin-bottom: 24px;
    }
    .wg-offer-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border-radius: 999px;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .09em;
        color: #fff;
        background: rgba(255,255,255,.10);
        border: 1px solid rgba(255,255,255,.16);
    }
    .wg-offer-badge .wg-flag {
        font-size: 20px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
    }
    .wg-offer-badge svg.wg-flag {
        width: 22px;
        height: 16px;
    }
    .wg-discount {
        width: 90px;
        height: 90px;
        border-radius: 26px;
        display: grid;
        place-items: center;
        text-align: center;
        background: linear-gradient(135deg,#fff,#FFE5D6);
        color: #101827;
        box-shadow: 0 16px 40px rgba(255,102,0,.25);
        transform: rotate(4deg);
        flex: 0 0 auto;
    }
    .wg-discount strong {
        display: block;
        font-size: 26px;
        line-height: .9;
        letter-spacing: -.06em;
        font-weight: 900;
    }
    .wg-discount span {
        display: block;
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
        margin-top: 4px;
        color: #C2410C;
    }
    .wg-offer-card h3 {
        position: relative;
        z-index: 2;
        margin: 0 0 10px;
        font-size: clamp(24px,2.3vw,38px);
        line-height: 1;
        letter-spacing: -.05em;
        font-weight: 900;
    }
    .wg-offer-card p {
        position: relative;
        z-index: 2;
        color: #B9C7E2;
        line-height: 1.65;
        margin: 0 0 22px;
        font-size: 14px;
    }
    .wg-price-row {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: flex-end;
        gap: 10px;
        margin-bottom: 22px;
    }
    .wg-old-price {
        color: #7E8AA6;
        text-decoration: line-through;
        font-weight: 800;
        font-size: 18px;
        margin-bottom: 6px;
    }
    .wg-new-price {
        color: #fff;
        font-size: 44px;
        line-height: .9;
        font-weight: 900;
        letter-spacing: -.06em;
    }
    .wg-term {
        color: #9BA8C4;
        font-size: 13px;
        font-weight: 800;
        margin-bottom: 5px;
    }
    .wg-offer-list {
        position: relative;
        z-index: 2;
        display: grid;
        gap: 10px;
        margin: 0 0 22px;
        padding: 0;
        list-style: none;
    }
    .wg-offer-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: #E5EDFF;
        font-size: 13px;
        line-height: 1.4;
    }
    .wg-offer-list li:before {
        content: "✓";
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: #08101E;
        background: linear-gradient(135deg,var(--green),#9BFFD8);
        font-size: 12px;
        font-weight: 900;
        margin-top: 0;
    }
    .wg-card-countdown {
        position: relative;
        z-index: 2;
        margin-top: auto;
        margin-bottom: 16px;
        padding: 14px;
        border-radius: 20px;
        background: rgba(8,14,26,.54);
        border: 1px solid rgba(255,255,255,.12);
    }
    .wg-card-countdown strong {
        display: block;
        font-size: 13px;
        margin-bottom: 10px;
    }
    .wg-timeboxes {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    .wg-timebox {
        padding: 9px 6px;
        border-radius: 14px;
        text-align: center;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.10);
    }
    .wg-timebox b {
        display: block;
        font-size: 18px;
        font-weight: 900;
        color: #fff;
    }
    .wg-timebox small {
        display: block;
        margin-top: 2px;
        color: #9BA8C4;
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .08em;
    }
    .wg-offer-actions {
        position: relative;
        z-index: 2;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .wg-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 46px;
        padding: 0 17px;
        border-radius: 15px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 900;
        color: #fff;
        border: 1px solid rgba(255,255,255,.14);
        background: rgba(255,255,255,.08);
        transition: .2s ease;
    }
    .wg-btn.primary {
        background: linear-gradient(135deg,var(--orange),var(--orange2));
        box-shadow: 0 16px 35px rgba(255,102,0,.26);
        border-color: rgba(255,102,0,.35);
    }
    .wg-btn:hover {
        transform: translateY(-2px);
        border-color: rgba(255,255,255,.28);
    }

    .wg-cta-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 22px;
        margin-top: 26px;
    }
    .wg-mini-card {
        min-height: 220px;
        border-radius: 28px;
        padding: 24px;
        border: 1px solid rgba(255,255,255,.14);
        background: rgba(13,24,45,.40);
        backdrop-filter: blur(18px);
        box-shadow: 0 22px 70px rgba(0,0,0,.28);
        position: relative;
        overflow: hidden;
        transition: .22s ease;
        display: flex;
        flex-direction: column;
    }
    .wg-mini-card:hover {
        transform: translateY(-5px);
        border-color: rgba(255,255,255,.26);
    }
    .wg-mini-card:before {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        right: -130px;
        top: -130px;
        border-radius: 50%;
        background: radial-gradient(circle,var(--mini-glow),transparent 65%);
        opacity: .58;
    }
    .wg-mini-card h3 {
        position: relative;
        margin: 0 0 10px;
        font-size: 28px;
        line-height: 1.05;
        letter-spacing: -.045em;
        font-weight: 900;
    }
    .wg-mini-card p {
        position: relative;
        color: #B9C7E2;
        font-size: 14px;
        line-height: 1.6;
        margin: 0 0 20px;
        max-width: 680px;
    }
    .wg-mini-row {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: auto;
    }
    .wg-mini-price {
        font-size: 30px;
        font-weight: 900;
        letter-spacing: -.05em;
        color: var(--green);
    }
    .wg-viral-offers .btn {
        font-size: 13px !important;
        font-weight: 900 !important;
        padding: 0 17px !important;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 15px !important;
        white-space: nowrap;
    }
    .wg-viral-offers .btn.btn-primary:not(.wg-migration-form .btn) {
        width: 215px !important;
        justify-content: center !important;
    }
    .wg-viral-offers .btn.btn-secondary {
        width: 130px !important;
        justify-content: center !important;
    }


    /* --- CONSOLIDATED RESPONSIVE MEDIA QUERIES --- */

    @media (max-width: 1100px) {
        .wg-offers-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .wg-offer-card.featured {
            grid-column: span 2;
        }
        .wg-offers-head {
            grid-template-columns: 1fr;
            text-align: center;
            gap: 20px;
        }
        .wg-offers-copy {
            margin-left: auto;
            margin-right: auto;
            max-width: 600px;
            text-align: center;
        }
        .wg-eyebrow {
            margin-left: auto;
            margin-right: auto;
            display: inline-flex;
        }
        .wg-master-strip {
            grid-template-columns: 1fr;
            text-align: center;
        }
        .wg-master-pill {
            margin: 10px auto 0;
            display: inline-flex;
        }
    }

    @media (max-width: 768px) {
        .wg-offers-grid {
            grid-template-columns: 1fr;
        }
        .wg-offer-card.featured {
            grid-column: span 1;
        }
        .wg-cta-grid {
            grid-template-columns: 1fr;
        }
        .wg-viral-offers {
            background: transparent !important;
            padding-top: 48px !important;
            padding-bottom: 48px !important;
            padding-left: 16px;
            padding-right: 16px;
        }
        .wg-viral-offers:before,
        .wg-viral-offers:after {
            display: none !important;
            animation: none !important;
        }
        .wg-offer-card {
            backdrop-filter: none !important;
            background: rgba(13, 24, 45, .72) !important;
            box-shadow: none !important;
            border-radius: 22px;
            padding: 20px;
        }
        .wg-offer-card:before {
            display: none !important;
        }
        .wg-discount {
            width: 66px !important;
            height: 66px !important;
            border-radius: 18px !important;
        }
        .wg-discount span {
            margin-top: 1px !important;
        }
        .wg-timeboxes {
            grid-template-columns: repeat(2, 1fr);
        }
    }