.mega-sale-hero {

    position: relative;

    overflow: hidden;

    background: linear-gradient(140deg, #080C18 0%, #0F1E36 50%, #060A14 100%);

    padding: 90px 0 100px;

    text-align: center;

    margin: 20px 20px 0;

    border-radius: 28px;

  }



  .mega-sale-hero.hero .wrap { display: block; }

  .mega-sale-hero .content { position: relative; z-index: 2; }

  .mega-percent {

    font-family: var(--font-display);

    font-weight: 800;

    color: white;

    font-size: clamp(90px, 16vw, 220px);

    line-height: 0.85;

    text-shadow: 0 30px 60px rgba(0,0,0,0.3);

    animation: pulseScale 2.2s ease-in-out infinite;

  }

      .mega-percent span { font-size: 0.4em; vertical-align: super; }

  .js-sale-percent { opacity: 0; transition: opacity 0.3s ease; }

  .js-sale-percent.loaded { opacity: 1; }

  .mega-sale-hero h1 { color: white; font-size: clamp(24px, 4vw, 36px); margin: 10px 0 14px; }

  .mega-sale-hero p { color: rgba(255,255,255,.85); max-width: 480px; margin: 0 auto 34px; font-size: 16px; }

  .mega-timer { display: flex; justify-content: center; gap: 18px; margin-bottom: 38px; }

  .mega-timer .t-box {

    background: rgba(255,255,255,0.15);

    border: 1px solid rgba(255,255,255,0.3);

    border-radius: 16px;

    padding: 18px 22px;

    text-align: center;

    min-width: 84px;

    backdrop-filter: blur(8px);

  }

  .mega-timer .t-box strong { display: block; font-family: var(--font-display); font-size: 32px; color: white; }

  .mega-timer .t-box span { font-size: 12px; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: 0.04em; }

  .mega-badges { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; position: relative; z-index: 2; }

  .mega-badges .mb {

    background: rgba(255,255,255,0.15);

    border: 1px solid rgba(255,255,255,0.3);

    border-radius: 999px;

    padding: 10px 20px;

    color: white;

    font-weight: 700;

    font-size: 13px;

    backdrop-filter: blur(6px);

  }

  .why-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 60px 0; }

  .why-card {

    background: #ffffff;

    border: 1.5px solid #d0d5e0;

    border-radius: var(--radius-lg);

    padding: 28px 20px;

    text-align: center;

    transition: transform 0.3s, box-shadow 0.3s;

  }

  .why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

  .why-card .wi { font-size: 32px; margin-bottom: 12px; }

  .why-card h4 { font-size: 15px; margin-bottom: 6px; color: #1a1a2e; }

  .why-card p { font-size: 13px; color: #66708a; }

  @media (max-width: 860px) { .why-strip { grid-template-columns: repeat(2,1fr); } .mega-timer { flex-wrap: wrap; } }

  @media (max-width: 480px) {
    .js-sale-why .section-head { margin-bottom: 6px; }
    .js-sale-why .section-title { font-size: 20px; }
    .js-sale-why .section-sub { font-size: 13px; }
    .why-strip { gap: 10px; margin: 24px 0; }
    .why-card { padding: 14px 10px; border-radius: 14px; }
    .why-card .wi { font-size: 22px; margin-bottom: 6px; }
    .why-card h4 { font-size: 12.5px; margin-bottom: 3px; }
    .why-card p { font-size: 11px; line-height: 1.35; }
  }