whyIcon
    :root{
      --accent:#fc5f5f;
      --accent2:#ff7a7a;
      --ink:#111318;
      --muted:#5b616b;
      --bg:#f6f7fb;
      --card:#ffffff;
      --line:rgba(17,19,24,.10);
      --shadow: 0 18px 70px rgba(10, 14, 20, .12);
      --shadow2: 0 28px 90px rgba(10, 14, 20, .16);
      --r: 22px;
    }

    *{ font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
    body{
      background: radial-gradient(1200px 600px at 15% 10%, rgba(252,95,95,.10), transparent 60%),
                  radial-gradient(900px 500px at 85% 20%, rgba(252,95,95,.06), transparent 55%),
                  linear-gradient(180deg, #fff, var(--bg));
      color: var(--ink);
      overflow-x:hidden;
    }


    /* ===== HERO / SLIDER ===== */
    .hero{
      width:100%;
      position:relative;
      overflow:hidden;
      background: url('uploads/bg2.png') center/cover no-repeat;
      background-attachment: fixed;
    }

    .heroWrap{ position:relative; z-index:1; height: 500px; display:flex; align-items:stretch; }
    .swiper{ width:100%; height: 500px; }
    .slideInner{ height: 500px; display:flex; align-items:center; padding: 30px 0; }

    .slideGrid{
      width:100%;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 30px;
      align-items:center;
    }

    .kicker{
      font-weight: 900;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: rgba(17,19,24,.62);
      margin-bottom: 12px;
    }

    .headline{
      font-weight: 950;
      font-size: 56px;
      line-height: 1.02;
      margin: 0 0 14px;
      color: var(--ink);
      overflow-wrap: anywhere; /* ✅ mobile fix */
    }
    .headline .hlAccent{
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .subline{
      color: rgba(17,19,24,.68);
      font-weight: 700;
      font-size: 16px;
      max-width: 52ch;
      margin-bottom: 22px;
    }

    .ctaRow{ display:flex; gap: 12px; flex-wrap:wrap; align-items:center; }

    .btnAccent{
      border:0;
      border-radius: 999px;
      padding: 12px 18px;
      font-weight: 950;
      letter-spacing: .02em;
      color:#fff;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: 0 18px 60px rgba(252,95,95,.22);
      transition: transform .15s ease, filter .15s ease;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap: 10px;
    }
    .btnAccent:hover{ transform: translateY(-1px); filter: brightness(1.02); color:#fff; }

    .btnGhost{
      border-radius: 999px;
      border: 1px solid rgba(17,19,24,.14);
      background: rgba(255,255,255,.70);
      padding: 12px 18px;
      font-weight: 950;
      color: rgba(17,19,24,.86);
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap: 10px;
      transition: transform .15s ease, background .15s ease;
    }
    .btnGhost:hover{ transform: translateY(-1px); background:#fff; color: var(--ink); }

    /* ✅ product png image */
    .productStage{ display:flex; justify-content:flex-end; align-items:center; position:relative; }
    .productImg{
      width: min(540px, 44vw);
      height: auto;
      display:block;
      max-width: 100%;
      filter: drop-shadow(0 24px 60px rgba(10,14,20,.20));
      animation: floaty 3.8s ease-in-out infinite;
      will-change: transform;
    }
    @keyframes floaty{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }

    .swiper-pagination-bullet{ width: 10px; height: 10px; background: rgba(17,19,24,.25); opacity: 1; }
    .swiper-pagination-bullet-active{ background: var(--accent); width: 24px; border-radius: 999px; }

    .swiper-button-next, .swiper-button-prev{
      width: 46px; height: 46px; border-radius: 999px;
      border: 1px solid rgba(17,19,24,.10);
      background: rgba(255,255,255,.86);
      box-shadow: 0 16px 50px rgba(10,14,20,.10);
      color: rgba(17,19,24,.70);
      transition: transform .15s ease, background .15s ease;
    }
    .swiper-button-next:hover, .swiper-button-prev:hover{ transform: translateY(-1px); background:#fff; }
    .swiper-button-next::after, .swiper-button-prev::after{ font-size: 16px; font-weight: 900; }

    /* ✅ Slider mobile fix (MAIN) */
    @media (max-width: 992px){
      .brandName{ font-size: 24px; max-width: 48vw; }
      .headline{ font-size: 44px; }
      .slideGrid{ grid-template-columns: 1fr; gap: 16px; }
      .productStage{ justify-content:center; }
      .productImg{ width: min(380px, 74vw); }
      .heroWrap, .swiper, .slideInner{ height: 500px; }
      .slideInner{ padding: 18px 0; }
    }

    @media (max-width: 576px){
      .topbar .wrap{ font-size: 12.5px; }
      .brandLogo{ width:42px; height:42px; }
      .brandName{ font-size: 22px; max-width: 62vw; }
      .navPill{ display:none; }

      .heroWrap, .swiper, .slideInner{ height: 520px; } /* ✅ more space for mobile */
      .slideInner{ padding: 16px 0 10px; }

      .slideGrid{ text-align:center; }
      .kicker{ font-size: 12px; letter-spacing:.12em; }
      .headline{ font-size: 30px; line-height: 1.08; }
      .subline{
        font-size: 14px;
        margin-left:auto; margin-right:auto;
        max-width: 44ch;
      }
      .ctaRow{ justify-content:center; }
      .productImg{ width: min(300px, 82vw); }

      .swiper-button-next, .swiper-button-prev{ display:none; }
      .hero{ background-attachment: scroll; }
    }

    @media (prefers-reduced-motion: reduce){
      .productImg{ animation:none; }
      .btnAccent, .btnGhost, .navLink, .iconBtn{ transition:none; }
    }

    /* ===== TRUST STRIP ===== */
    .trustStripWrap{ position: relative; padding: 18px 0 10px; margin-top: -2px; z-index: 4; }
    .trustStripCard{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.38);
      background:
        radial-gradient(600px 140px at 12% 0%, rgba(252,95,95,.25), transparent 55%),
        radial-gradient(500px 160px at 88% 20%, rgba(255,123,134,.22), transparent 55%),
        linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.46));
      box-shadow: 0 18px 60px rgba(15,18,34,.18);
      backdrop-filter: blur(14px);
      overflow: hidden;
      position: relative;
    }
    .trustItem{
      display:flex; align-items:center; gap: 14px;
      padding: 18px 18px;
      transition: transform .18s ease, background .18s ease;
    }
    .trustItem:hover{ transform: translateY(-2px); background: rgba(255,255,255,.14); }
    .trustIcon{
      width: 46px; height: 46px; border-radius: 16px;
      display:grid; place-items:center; flex: 0 0 auto;
      background:
        radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.35)),
        linear-gradient(135deg, rgba(252,95,95,.22), rgba(255,123,134,.14));
      border: 1px solid rgba(252,95,95,.22);
      box-shadow: 0 16px 34px rgba(252,95,95,.15);
    }
    .trustIcon i{ color: #0f1222; font-size: 18px; opacity: .92; }
    .trustTitle{ font-weight: 900; font-size: 14.5px; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
    .trustSub{ margin-top: 4px; color: rgba(15,18,34,.68); font-weight: 700; font-size: 12.5px; }
    .trustItem:not(:last-child){ border-right: 1px solid rgba(15,18,34,.08); }

    @media (max-width: 992px){
      .trustStripCard{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .trustItem:nth-child(2){ border-right:none; }
    }
    @media (max-width: 576px){
      .trustStripWrap{ margin-top: -16px; padding: 14px 0 6px; }
      .trustStripCard{ grid-template-columns: 1fr; border-radius: 20px; }
      .trustItem{ border-right:none !important; border-bottom:1px solid rgba(15,18,34,.08); padding: 14px 14px; }
      .trustItem:last-child{ border-bottom:none; }
    }

    /* ===== FEATURED BEST SELLERS ===== */
    .featWrap{ padding: 46px 0 56px; }
    .featHead{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom: 18px; }
    .featTitle{ font-weight: 950; font-size: clamp(22px, 2.6vw, 34px); margin:0; letter-spacing:.2px; }
    .featSub{ margin: 8px 0 0; color: rgba(17,19,24,.70); font-weight: 700; max-width: 72ch; }
    .pill{
      display:inline-flex; align-items:center; gap:10px;
      padding: 10px 14px; border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.72);
      box-shadow: 0 10px 40px rgba(10,14,20,.06);
      font-weight: 900; color: rgba(17,19,24,.84);
      white-space:nowrap;
    }

    .featGrid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    @media (max-width: 992px){ .featGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 520px){ .featGrid{ grid-template-columns: 1fr; } }

    .pCard{
      border-radius: 22px;
      border: 1px solid rgba(17,19,24,.10);
      background: rgba(255,255,255,.72);
      backdrop-filter: blur(12px);
      overflow:hidden;
      box-shadow: var(--shadow);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      position:relative;
    }
    .pCard:hover{ transform: translateY(-3px); border-color: rgba(252,95,95,.22); box-shadow: var(--shadow2); }

    .pImg{
      height: 220px;
      display:flex; align-items:center; justify-content:center;
      background: rgba(255,255,255,.55);
      border-bottom: 1px solid rgba(17,19,24,.08);
    }
    .pImg img{ width: 100%; height: 100%; object-fit: contain; padding: 16px; filter: drop-shadow(0 18px 40px rgba(10,14,20,.14)); transition: transform .25s ease; }
    .pCard:hover .pImg img{ transform: scale(1.05); }

    .pBody{ padding: 14px 14px 16px; }
    .pName{ margin:0; font-weight: 950; font-size: 15.5px; }
    .pMeta{ margin-top: 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .stars{ display:inline-flex; align-items:center; gap:4px; }
    .stars i{ color: var(--accent); }
    .rtText{ margin-left: 8px; color: rgba(17,19,24,.66); font-weight: 850; font-size: 12.5px; }

    .pActions{ margin-top: 12px; display:flex; gap:10px; }
    .btnMini{
      border: 1px solid rgba(17,19,24,.12);
      background: rgba(255,255,255,.80);
      color: rgba(17,19,24,.84);
      border-radius: 14px;
      padding: 10px 12px;
      font-weight: 950;
      display:inline-flex;
      align-items:center;
      gap:8px;
      text-decoration:none;
      transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
      flex: 1;
      justify-content:center;
    }
    .btnMini:hover{ transform: translateY(-1px); background:#fff; color: var(--ink); border-color: rgba(252,95,95,.22); }

    .btnMiniAccent{
      border: 1px solid rgba(252,95,95,.35);
      color: #fff;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: 0 16px 45px rgba(252,95,95,.18);
    }
    /* ✅ FIX: enquiry hover no white flash */
    .btnMiniAccent:hover{
      color:#fff !important;
      background: linear-gradient(135deg, #ff7a7a, #fc5f5f) !important;
      filter: brightness(1.02);
      border-color: rgba(252,95,95,.55);
    }
    .btnMiniAccent:focus{ box-shadow: 0 0 0 .2rem rgba(252,95,95,.25); }

    .alertBox{
      border-radius: 16px;
      border: 1px solid rgba(17,19,24,.10);
      background: rgba(255,255,255,.78);
      padding: 12px 14px;
      margin: 16px 0 18px;
      box-shadow: 0 10px 40px rgba(10,14,20,.05);
    }
    .alertBox.ok{ border-color: rgba(20,160,90,.22); background: rgba(20,160,90,.08); }
    .alertBox.err{ border-color: rgba(252,95,95,.28); background: rgba(252,95,95,.10); }

  /* ===== WHY SECTION (Uniform premium, matches #fc5f5f theme) ===== */
  .whyWrap{
    position: relative;
    overflow: hidden;
  }
  .whyWrap::before{
    content:"";
    position:absolute;
    inset:-40% -20%;
    background:
      radial-gradient(600px 280px at 18% 20%, rgba(252,95,95,.12), transparent 60%),
      radial-gradient(600px 260px at 85% 40%, rgba(252,95,95,.08), transparent 60%);
    pointer-events:none;
  }

  .whyHead{ position:relative; z-index:1; }
  .whyBadge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(17,19,24,.78);
    border: 1px solid rgba(17,19,24,.10);
    background: rgba(255,255,255,.70);
    box-shadow: 0 10px 40px rgba(10,14,20,.06);
    backdrop-filter: blur(10px);
  }
  .whyBadge i{ color: #fc5f5f; }

  .whyTitle{
    margin: 14px 0 8px;
    font-weight: 950;
    letter-spacing: .2px;
    font-size: 40px;
    color: rgba(17,19,24,.92);
  }
  .whySub{
    margin: 0 auto;
    max-width: 70ch;
    color: rgba(17,19,24,.68);
    font-weight: 700;
    font-size: 15.5px;
  }

  .whyGrid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
  }

  .whyCard{
    border-radius: 22px;
    border: 1px solid rgba(17,19,24,.10);
    background:
      radial-gradient(240px 140px at 15% 0%, rgba(252,95,95,.14), transparent 60%),
      linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.55));
    box-shadow: 0 18px 70px rgba(10, 14, 20, .10);
    backdrop-filter: blur(12px);
    padding: 16px 16px;
    display:flex;
    gap: 14px;
    align-items:flex-start;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position:relative;
    overflow:hidden;
  }

  .whyCard::after{
    content:"";
    position:absolute;
    top:-40%;
    left:-35%;
    width:45%;
    height:180%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
    transform: rotate(12deg) translateX(-60%);
    opacity:.0;
    pointer-events:none;
  }
  .whyCard:hover{
    transform: translateY(-3px);
    border-color: rgba(252,95,95,.20);
    box-shadow: 0 26px 90px rgba(10, 14, 20, .14);
  }
  .whyCard:hover::after{
    opacity:.55;
    animation: whySheen .95s ease;
  }

  @keyframes whySheen{
    0%{ transform: rotate(12deg) translateX(-60%); }
    100%{ transform: rotate(12deg) translateX(220%); }
  }

  .whyIcon{
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display:grid;
    place-items:center;
    flex: 0 0 auto;
    background:
      radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.90), rgba(255,255,255,.35)),
      linear-gradient(135deg, rgba(252,95,95,.22), rgba(255,122,122,.14));
    border: 1px solid rgba(252,95,95,.24);
    box-shadow: 0 18px 40px rgba(252,95,95,.14);
  }
  .whyIcon i{
color: #111827;   /* almost-black, clean */
    font-size: 18px;
  }

  .whyCardTitle{
    font-weight: 950;
    color: rgba(17,19,24,.92);
    font-size: 15.5px;
    line-height: 1.2;
    margin-bottom: 6px;
  }
  .whyCardSub{
    color: rgba(17,19,24,.68);
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.35;
  }

  @media (max-width: 992px){
    .whyTitle{ font-size: 34px; }
    .whyGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 576px){
    .whyTitle{ font-size: 28px; }
    .whySub{ font-size: 14px; }
    .whyGrid{ grid-template-columns: 1fr; }
    .whyCard{ padding: 14px 14px; }
    .whyIcon{ width: 48px; height: 48px; border-radius: 16px; }
  }
   :root{
      --accent:#fc5f5f;
      --accent2:#ff7a7a;
      --ink:#111318;
      --muted:#5b616b;
      --bg:#f6f7fb;
      --line:rgba(17,19,24,.10);
      --shadow: 0 18px 70px rgba(10, 14, 20, .12);
      --shadow2: 0 28px 90px rgba(10, 14, 20, .16);
    }
   
    /* Premium carousel area */
    .cardGlass{
      border-radius: 22px;
      border: 1px solid rgba(17,19,24,.10);
      background: rgba(255,255,255,.78);
      backdrop-filter: blur(12px);
      box-shadow: var(--shadow);
    }

    .carouselWrap{ position:relative; }
    .carousel-control-prev, .carousel-control-next{
      width: 54px; height: 54px;
      top: 50%;
      transform: translateY(-50%);
      opacity:1;
    }
    .carousel-control-prev-icon, .carousel-control-next-icon{ display:none; }
    .carBtn{
      width:54px; height:54px; border-radius:999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.88);
      box-shadow: 0 18px 55px rgba(0,0,0,.14);
      display:grid; place-items:center;
      color: rgba(17,19,24,.82);
      transition: transform .15s ease, background .15s ease;
    }
    .carBtn:hover{ transform: translateY(-1px); background:#fff; }

    /* Multi-item carousel layout */
    #fbCarousel .carousel-inner{ padding: 8px 2px 18px; }
    #fbCarousel .carousel-item{
      display:flex;
      gap:14px;
      align-items:stretch;
    }
    #fbCarousel .carousel-item > *{ flex: 0 0 auto; }
    @media (max-width: 767.98px){
      #fbCarousel .carousel-item{ gap: 10px; }
    }

    /* Feedback card – similar feel (no profile icon) */
    .fbCard{
      height:100%;
      border-radius: 26px;
      border: 1px solid rgba(17,19,24,.10);
      background: rgba(255,255,255,.86);
      box-shadow: var(--shadow);
      padding: 18px 18px 18px;
      position:relative;
      overflow:hidden;
      min-height: 260px;
      display:flex;
      flex-direction:column;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .fbCard:hover{ transform: translateY(-3px); border-color: rgba(252,95,95,.22); box-shadow: var(--shadow2); }
    .fbCard::after{
      content:"";
      position:absolute;
      left: 18px; right: 18px;
      bottom: -18px;
      height: 42px;
      border-radius: 0 0 22px 22px;
      border: 1px solid rgba(17,19,24,.08);
      border-top:0;
      background:
        radial-gradient(220px 90px at 20% 30%, rgba(252,95,95,.14), transparent 70%),
        linear-gradient(135deg, rgba(252,95,95,.08), rgba(255,255,255,.75));
      opacity:.95;
    }
    .fbHead{
      display:flex; align-items:center; justify-content:space-between;
      gap: 10px;
    }
    .fbQuote{
      font-size: 22px;
      color: var(--accent);
      filter: drop-shadow(0 10px 18px rgba(252,95,95,.18));
    }
    .fbPill{
      border-radius:999px;
      border:1px solid rgba(252,95,95,.22);
      background: rgba(252,95,95,.10);
      padding: 8px 10px;
      font-weight: 950;
      color: rgba(17,19,24,.86);
      font-size: 12.5px;
      white-space:nowrap;
    }
    .fbName{
      margin: 12px 0 0;
      font-weight: 950;
      font-size: 16px;
      letter-spacing:.1px;
    }
    .fbMeta{
      margin-top: 4px;
      color: rgba(17,19,24,.60);
      font-weight: 850;
      font-size: 12.5px;
    }
    .fbMeta a{ color: inherit; text-decoration:none; font-weight: 950; }
    .fbMeta a:hover{ color: var(--accent); }

    .fbText{
      margin-top: 10px;
      color: rgba(17,19,24,.74);
      font-weight: 750;
      line-height: 1.65;
      flex:1;
    }

    .fbBottom{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      padding-top: 12px;
      margin-top: 10px;
      border-top: 1px dashed rgba(17,19,24,.12);
      position:relative;
      z-index:2;
    }
    .fbStars i{ color: var(--accent); }
    .fbDate{
      color: rgba(17,19,24,.60);
      font-weight: 900;
      font-size: 12.5px;
      white-space:nowrap;
    }

    .ctaBox{
      border-radius: 24px;
      border: 1px solid rgba(17,19,24,.10);
      background: rgba(255,255,255,.78);
      backdrop-filter: blur(12px);
      box-shadow: var(--shadow);
      padding: 18px;
      overflow:hidden;
      position:relative;
    }
    .ctaBox::before{
      content:""; position:absolute; right:-120px; top:-120px; width:260px; height:260px; border-radius:999px;
      background: radial-gradient(circle, rgba(252,95,95,.16), transparent 62%);
      opacity:.9;
      pointer-events:none;
    }
    .btnAccent{
      border:0; border-radius:999px; padding: 12px 18px; font-weight:950; color:#fff;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: 0 18px 60px rgba(252,95,95,.22);
      text-decoration:none;
      display:inline-flex; gap:10px; align-items:center; justify-content:center;
      transition: transform .18s ease, filter .18s ease;
    }
    .btnAccent:hover{ transform: translateY(-1px); filter: brightness(1.02); }
    .btnGhost{
      border-radius:999px; padding: 12px 18px; font-weight:950;
      border: 1px solid rgba(252,95,95,.28);
      background: rgba(252,95,95,.08);
      color: rgba(17,19,24,.88);
      display:inline-flex; gap:10px; align-items:center; justify-content:center;
      text-decoration:none;
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }
    .btnGhost:hover{ transform: translateY(-1px); background: rgba(252,95,95,.10); border-color: rgba(252,95,95,.38); }