/* ==========================================================================
   TraceZoo 2.0 — EXCLUSIVE BONUS PACKAGE section
   Saare 7 sales page par lagta hai (free, fe, oto1..oto5).
   Section ka DOM assets/js/bonus.js banata hai.

   DHYAN: yahan ke SAARE variable "--bns-" se shuru hote hain. Aisa jaan-boojh
   kar kiya hai - theme.css --ink / --line jaise aam naam redefine karti hai,
   aur wo is LIGHT section me ghus kar text safed-par-safed kar deta (free page
   ke form me theek yahi bug aaya tha). Prefix se wo kabhi nahi hoga.
   ========================================================================== */
.bns{
  --bns-navy   :#0C1E4E;
  --bns-navy2  :#123070;
  --bns-ink    :#16233F;
  --bns-ink2   :#4A5878;
  --bns-gold   :#FFC42E;
  --bns-g      :#1E8E3E;   /* bonus 1 - green  */
  --bns-g-bg   :#EAF7EE;
  --bns-p      :#6B21C7;   /* bonus 2 - purple */
  --bns-p-bg   :#F3ECFD;
  --bns-o      :#E8590C;   /* bonus 3 - orange */
  --bns-o-bg   :#FEF3E7;

  background:#fff;color:var(--bns-ink);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  padding:0 0 22px;border-radius:20px;overflow:hidden;
  margin:34px auto;width:min(1060px,94vw);
  box-shadow:0 26px 60px rgba(0,0,0,.34);
  line-height:1.5;text-align:left;
}
.bns *{box-sizing:border-box}
.bns img{max-width:100%;height:auto;display:block}
.bns ul{list-style:none;margin:0;padding:0}
.bns p,.bns h2,.bns h3{margin:0}

/* ---------- 1. HEADER BAND ---------- */
.bns__head{
  position:relative;text-align:center;color:#fff;padding:20px 18px 24px;
  background:
    radial-gradient(680px 240px at 50% -30%, rgba(255,196,46,.22), transparent 70%),
    linear-gradient(170deg,#0A1A44,#0C1E4E 55%,#0A1838);
}
/* halke se sitare, poore CSS se */
.bns__head::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(2px 2px at 12% 22%, #fff, transparent),
    radial-gradient(2px 2px at 82% 16%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 28% 74%, #FFC42E, transparent),
    radial-gradient(1.6px 1.6px at 68% 68%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 92% 52%, #FFC42E, transparent),
    radial-gradient(1.6px 1.6px at 6% 58%, #fff, transparent);
}
.bns__pill{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,#FFD75C,#F0A800);color:#3B2500;
  border-radius:30px;padding:6px 22px;
  font-size:clamp(11px,1.25vw,14px);font-weight:800;letter-spacing:.6px;
}
.bns__pill svg{width:16px;height:16px;flex:none}
.bns__h{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:12px 0 6px;
  font-size:clamp(26px,5.4vw,58px);font-weight:900;letter-spacing:-1px;
  text-transform:uppercase;line-height:1.02;
}
.bns__h img{width:clamp(52px,7vw,96px);flex:none}
.bns__h span{color:var(--bns-gold)}
.bns__sub{
  position:relative;z-index:1;
  font-size:clamp(13px,1.7vw,19px);font-weight:600;color:#D8E2F5;
}
.bns__sub b{color:var(--bns-gold);font-weight:800}

/* ---------- 2. BONUS CARD ---------- */
.bns__c{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:18px;align-items:center;
  margin:14px 14px 0;padding:22px 24px;border-radius:16px;
}
.bns__c--1{background:var(--bns-g-bg);border:1px solid #C9E7D3}
.bns__c--2{background:var(--bns-p-bg);border:1px solid #DDCDF6}
.bns__c--3{background:var(--bns-o-bg);border:1px solid #F8DCC2}
.bns__l{min-width:0}
.bns__r{min-width:0;position:relative;display:flex;justify-content:center}

.bns__tag{
  display:inline-block;border-radius:8px;padding:6px 20px;color:#fff;
  font-size:clamp(12px,1.4vw,16px);font-weight:800;letter-spacing:.5px;
}
.bns__c--1 .bns__tag{background:var(--bns-g)}
.bns__c--2 .bns__tag{background:var(--bns-p)}
.bns__c--3 .bns__tag{background:var(--bns-o)}

.bns__t{
  margin:12px 0 8px;font-size:clamp(19px,2.9vw,32px);font-weight:900;
  letter-spacing:-.6px;line-height:1.1;text-transform:uppercase;
}
.bns__t i{display:block;font-style:normal}
.bns__c--1 .bns__t i:first-child{color:var(--bns-g)}
.bns__c--2 .bns__t i:first-child{color:var(--bns-p)}
.bns__c--3 .bns__t i:first-child{color:var(--bns-o)}
.bns__t i + i{color:var(--bns-navy)}

.bns__d{
  margin:0 0 12px;font-size:clamp(12.5px,1.4vw,15.5px);
  color:var(--bns-ink2);line-height:1.55;max-width:420px;
}
.bns__list{display:grid;grid-template-columns:1fr 1fr;gap:7px 16px}
.bns__list li{
  display:flex;align-items:flex-start;gap:8px;min-width:0;
  font-size:clamp(11.5px,1.25vw,14px);font-weight:600;color:var(--bns-ink);
  line-height:1.35;
}
.bns__list li::before{
  content:"";flex:none;width:17px;height:17px;margin-top:1px;border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:center;background-size:11px;background-repeat:no-repeat;
}
.bns__c--1 .bns__list li::before{background-color:var(--bns-g)}
.bns__c--2 .bns__list li::before{background-color:var(--bns-p)}
.bns__c--3 .bns__list li::before{background-color:var(--bns-o)}

/* "VALUED AT $197" wala dabba */
.bns__val{
  display:inline-flex;align-items:center;gap:12px;margin-top:16px;
  background:#fff;border-radius:12px;padding:9px 20px 9px 10px;
  box-shadow:0 4px 14px rgba(0,0,0,.10);
}
.bns__val img{width:clamp(34px,3.6vw,46px);flex:none}
.bns__val span{display:block;font-size:clamp(11px,1.2vw,13.5px);font-weight:700;letter-spacing:.4px}
.bns__val b{display:block;font-size:clamp(21px,2.9vw,33px);font-weight:900;letter-spacing:-.8px;line-height:1.05}
.bns__c--1 .bns__val span,.bns__c--1 .bns__val b{color:var(--bns-g)}
.bns__c--2 .bns__val span,.bns__c--2 .bns__val b{color:var(--bns-p)}
.bns__c--3 .bns__val span,.bns__c--3 .bns__val b{color:var(--bns-o)}

/* art ke kone par gol badge */
.bns__badge{
  position:absolute;right:-4px;bottom:6px;
  width:clamp(78px,9.6vw,116px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;align-content:center;text-align:center;
  color:#fff;padding:8px;line-height:1.15;
  font-size:clamp(8.5px,.95vw,11.5px);font-weight:800;letter-spacing:.2px;
  box-shadow:0 8px 18px rgba(0,0,0,.24);
}
.bns__badge b{display:block;font-size:clamp(15px,1.9vw,24px);font-weight:900;letter-spacing:-.5px}
.bns__c--1 .bns__badge{background:var(--bns-g)}
.bns__c--2 .bns__badge{background:var(--bns-p)}
.bns__c--3 .bns__badge{background:var(--bns-o)}

/* ---------- 3. TOTAL PANEL ---------- */
.bns__total{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:16px;align-items:center;text-align:center;color:#fff;
  margin:16px 14px 0;padding:16px 22px;border-radius:16px;
  background:
    radial-gradient(520px 200px at 50% -40%, rgba(255,196,46,.20), transparent 70%),
    linear-gradient(170deg,#0A1A44,#0C1E4E);
}
.bns__total > img:first-child{width:clamp(72px,10vw,150px)}
.bns__total > img:last-child{width:clamp(74px,9.4vw,138px)}
.bns__tv{min-width:0}
.bns__tv span{
  display:block;font-size:clamp(12.5px,1.7vw,20px);font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;
}
.bns__tv b{
  display:block;color:var(--bns-gold);
  font-size:clamp(34px,7vw,72px);font-weight:900;letter-spacing:-2px;line-height:1.02;
}
.bns__tv em{
  display:inline-block;font-style:normal;margin-top:4px;
  background:linear-gradient(180deg,#FFD75C,#F0A800);color:#3B2500;
  border-radius:6px;padding:5px 20px;
  font-size:clamp(12px,1.6vw,19px);font-weight:900;letter-spacing:.4px;
}

/* ---------- 4. NEECHE KI TRUST ROW ---------- */
.bns__trust{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  margin:14px 14px 0;padding:14px 16px;border-radius:14px;
  background:#fff;border:1px solid #E4E9F2;
}
.bns__trust li{display:flex;align-items:center;gap:10px;min-width:0}
.bns__trust i{
  flex:none;width:clamp(30px,3.4vw,42px);height:clamp(30px,3.4vw,42px);
  border-radius:50%;display:grid;place-items:center;color:#fff;
}
.bns__trust i svg{width:56%;height:56%}
.bns__trust .i-g{background:linear-gradient(180deg,#34C759,#1E8E3E)}
.bns__trust .i-b{background:linear-gradient(180deg,#3B9BFF,#1565D8)}
.bns__trust .i-p{background:linear-gradient(180deg,#9B5DE5,#6B21C7)}
.bns__trust .i-o{background:linear-gradient(180deg,#FFC42E,#F0900A)}
.bns__trust b{display:block;font-size:clamp(11px,1.2vw,13.5px);font-weight:800;color:var(--bns-ink);line-height:1.2}
.bns__trust span{display:block;font-size:clamp(10px,1.05vw,12px);color:var(--bns-ink2);line-height:1.3;margin-top:2px}

/* ---------- 5. RESPONSIVE ---------- */
@media (max-width:900px){
  .bns__c{grid-template-columns:minmax(0,1fr);gap:14px}
  .bns__r{order:-1}                    /* phone par art pehle, phir text */
  .bns__d{max-width:none}
  .bns__trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .bns__total{grid-template-columns:minmax(0,1fr);gap:10px;justify-items:center}
  .bns__total > img:first-child,.bns__total > img:last-child{width:clamp(84px,22vw,130px)}
}
@media (max-width:560px){
  .bns{border-radius:14px;margin:24px auto}
  .bns__c{margin:10px 10px 0;padding:16px 14px;border-radius:12px}
  .bns__total,.bns__trust{margin:10px 10px 0;padding:14px 12px}
  .bns__list{grid-template-columns:1fr;gap:6px}
  .bns__badge{position:static;margin:10px auto 0}
  .bns__r{flex-direction:column;align-items:center}
}