/* ==========================================================================
   TraceZoo 2.0 — EXTRA LANDING-PAGE SECTIONS
   sections.js in sab ko banata hai. theme.css ke BAAD load karo.
   Purane kisi bhi section/CSS ko ye file chhuti nahi — sab naye class hain
   jo "tzs-" se shuru hote hain.
   ========================================================================== */

.tzs{padding:78px 0;position:relative}
.tzs--alt{background:linear-gradient(180deg,var(--tz-bg2),var(--tz-bg))}
.tzs__head{text-align:center;max-width:900px;margin:0 auto 46px}
.tzs__kicker{
  display:inline-block;margin:0 0 16px;padding:9px 24px;border-radius:30px;
  font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--tz-p-lt);background:rgba(146,110,212,.16);border:1px solid var(--tz-p);
}
.tzs__h{
  margin:0 0 14px;font-weight:800;letter-spacing:-.5px;color:#fff;
  font-size:clamp(28px,3.8vw,52px);line-height:1.12;
}
.tzs__h em{font-style:normal;color:var(--tz-p-l)}
.tzs__h b{font-weight:800;color:var(--tz-y)}
.tzs__p{margin:0;color:var(--tz-mut);font-size:18px;line-height:1.65}

/* ==========================================================================
   1. WHO IT'S FOR
   ========================================================================== */
.tzs-who{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.tzs-who__c{
  background:linear-gradient(170deg,var(--tz-card),var(--tz-bg3));
  border:1px solid var(--tz-line);border-radius:22px;padding:32px 26px;
  box-shadow:0 10px 28px #00000040;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.tzs-who__c:hover{transform:translateY(-9px);border-color:var(--tz-p);box-shadow:var(--tz-glow-p)}
.tzs-who__ico{
  width:74px;height:74px;margin-bottom:20px;border-radius:22px;display:grid;place-items:center;
  font-size:34px;line-height:1;
  background:radial-gradient(circle at 34% 26%,rgba(146,110,212,.42),rgba(94,68,160,.26));
  border:1px solid var(--tz-line2);
}
.tzs-who__c h3{margin:0 0 12px;font-size:20px;font-weight:700;color:#fff}
.tzs-who__c p{margin:0 0 18px;font-size:15px;color:var(--tz-mut);line-height:1.6}
.tzs-who__c li{
  position:relative;padding-left:28px;font-size:14.5px;color:var(--tz-text2);
  line-height:1.5;margin-bottom:10px;
}
.tzs-who__c li::before{
  content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;
  background:var(--tz-g) 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.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ==========================================================================
   2. VALUE STACK
   ========================================================================== */
.tzs-stack{
  max-width:900px;margin-inline:auto;
  background:linear-gradient(160deg,var(--tz-card2),var(--tz-bg3));
  border:1px solid var(--tz-line2);border-radius:26px;overflow:hidden;
  box-shadow:var(--tz-glow);
}
.tzs-stack__row{
  display:flex;align-items:center;gap:18px;
  padding:20px 30px;border-bottom:1px solid #ffffff10;
  transition:background .18s ease;
}
.tzs-stack__row:hover{background:#ffffff0a}
.tzs-stack__ico{font-size:24px;line-height:1;flex:none;width:34px;text-align:center}
.tzs-stack__t{flex:1;min-width:0}
.tzs-stack__t b{display:block;font-size:16.5px;font-weight:600;color:#fff;line-height:1.35}
.tzs-stack__t span{display:block;font-size:13.5px;color:var(--tz-mut);margin-top:3px;line-height:1.45}
.tzs-stack__v{font-size:19px;font-weight:800;color:var(--tz-p-lt);white-space:nowrap}

.tzs-stack__sum{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:24px 30px;background:#ffffff0a;border-bottom:1px solid #ffffff10;
}
.tzs-stack__sum b{font-size:19px;color:#fff}
.tzs-stack__sum s{font-size:30px;font-weight:900;color:var(--tz-mut)}

.tzs-stack__pay{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:30px;background:linear-gradient(90deg,rgba(146,110,212,.22),rgba(94,68,160,.12));
}
.tzs-stack__pay b{font-size:21px;color:#fff;font-weight:700}
.tzs-stack__pay em{
  font-style:normal;font-size:clamp(38px,5vw,60px);font-weight:900;color:var(--tz-y);line-height:1;
  text-shadow:0 6px 28px rgba(255,201,60,.35);
}
.tzs-stack__save{
  display:block;text-align:center;margin-top:22px;font-size:17px;color:var(--tz-text2);
}
.tzs-stack__save b{color:var(--tz-g);font-weight:800}

/* ==========================================================================
   3. TESTIMONIALS
   ========================================================================== */
.tzs-love{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:22px}
.tzs-love__c{
  position:relative;
  background:linear-gradient(170deg,var(--tz-card),var(--tz-bg3));
  border:1px solid var(--tz-line);border-radius:22px;padding:34px 28px 28px;
  box-shadow:0 10px 28px #00000040;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.tzs-love__c:hover{transform:translateY(-8px);border-color:var(--tz-p);box-shadow:var(--tz-glow-p)}
.tzs-love__c::before{
  content:"\201C";position:absolute;top:6px;right:24px;
  font-family:Georgia,serif;font-size:80px;line-height:1;color:rgba(146,110,212,.26);
}
.tzs-love__stars{color:var(--tz-y);font-size:17px;letter-spacing:3px;margin-bottom:14px}
.tzs-love__c p{margin:0 0 22px;font-size:15.5px;color:var(--tz-text2);line-height:1.65}
.tzs-love__by{display:flex;align-items:center;gap:14px}
.tzs-love__av{
  width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:18px;color:#fff;
  background:linear-gradient(160deg,var(--tz-p-l),var(--tz-p-d));
}
/* NOTE: ye rules sirf naam wale block par lagne chahiye. Pehle ".tzs-love__by span"
   likha tha jo avatar wale span par bhi lag raha tha aur letter chhota + halka
   ho jata tha — isliye ab direct-child selector use kiya hai. */
.tzs-love__by > span:last-child b{display:block;font-size:15px;color:#fff}
.tzs-love__by > span:last-child span{display:block;font-size:13px;color:var(--tz-mut);margin-top:2px}

/* ==========================================================================
   4. RE-LAUNCH / URGENCY BAND
   ========================================================================== */
.tzs-launch{
  position:relative;overflow:hidden;
  background:
    radial-gradient(700px 320px at 50% 0%,rgba(255,100,112,.18),transparent 70%),
    linear-gradient(160deg,var(--tz-card2),var(--tz-bg3));
  border:2px solid var(--tz-r);border-radius:28px;padding:46px 44px;
  box-shadow:0 26px 60px #00000080;
}
.tzs-launch::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(-45deg,#ffffff05 0 14px,transparent 14px 28px);
}
.tzs-launch__in{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.tzs-launch__tag{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;
  padding:9px 20px;border-radius:30px;font-size:13px;font-weight:800;letter-spacing:1.2px;
  background:var(--tz-r);color:#fff;text-transform:uppercase;
  box-shadow:0 8px 22px rgba(255,100,112,.4);
}
.tzs-launch__tag::before{
  content:"";width:9px;height:9px;border-radius:50%;background:#fff;
  animation:tzs-blink 1.2s steps(1) infinite;
}
@keyframes tzs-blink{0%,49%{opacity:1}50%,100%{opacity:.25}}
.tzs-launch h3{margin:0 0 14px;font-size:clamp(24px,3.2vw,40px);font-weight:800;color:#fff;line-height:1.16}
.tzs-launch h3 em{font-style:normal;color:var(--tz-y)}
.tzs-launch p{margin:0 0 20px;font-size:16.5px;color:var(--tz-text2);line-height:1.65}
.tzs-launch__pts li{
  position:relative;padding-left:28px;font-size:15px;color:var(--tz-text2);
  line-height:1.5;margin-bottom:10px;
}
.tzs-launch__pts li::before{
  content:"!";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;
  background:var(--tz-r);color:#fff;font-size:12px;font-weight:900;
  display:grid;place-items:center;
}

.tzs-launch__side{
  background:#00000038;border:1px solid var(--tz-line2);border-radius:22px;padding:28px 24px;text-align:center;
}
.tzs-launch__lbl{font-size:13px;font-weight:700;letter-spacing:1.2px;color:var(--tz-p-lt);text-transform:uppercase}
.tzs-launch__clock{display:flex;justify-content:center;gap:10px;margin:16px 0 22px}
.tzs-launch__u{
  min-width:74px;padding:12px 8px;border-radius:14px;
  background:linear-gradient(180deg,var(--tz-card2),var(--tz-bg3));
  border:1px solid var(--tz-line2);
}
.tzs-launch__u b{display:block;font-size:30px;font-weight:900;color:var(--tz-y);line-height:1;font-variant-numeric:tabular-nums}
.tzs-launch__u span{display:block;font-size:9.5px;letter-spacing:1px;color:var(--tz-mut);margin-top:4px}

.tzs-launch__meter{margin-top:6px;text-align:left}
/* direct child only — warna neeche wale "31%" ka <b> bhi block ban jata tha
   aur line teen tukdon me tut jati thi */
.tzs-launch__meter > b{display:block;font-size:13.5px;color:var(--tz-text2);margin-bottom:9px}
/* span hai — display:block ke bina height ignore ho jati thi aur bar dikhti hi nahi */
.tzs-launch__track{display:block;width:100%;height:11px;border-radius:20px;background:#ffffff12;overflow:hidden}
.tzs-launch__bar{
  display:block;height:100%;width:0;border-radius:20px;
  background:linear-gradient(90deg,var(--tz-y),#FF8A3D,var(--tz-r));
  transition:width 1.4s cubic-bezier(.2,.9,.3,1);
}
.tzs-launch__left{display:block;margin-top:9px;font-size:12.5px;color:var(--tz-mut)}
.tzs-launch__left b{color:var(--tz-r);font-weight:800}
.tzs-launch__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  margin-top:24px;width:100%;border:0;font:inherit;
  background:linear-gradient(180deg,#4FDC72,var(--tz-g) 55%,var(--tz-g-d));
  color:#fff;font-weight:800;font-size:16.5px;padding:17px 24px;border-radius:13px;
  box-shadow:0 5px 0 #1E7A38,0 12px 26px rgba(63,203,99,.35);
  transition:transform .12s,box-shadow .12s;
}
.tzs-launch__cta:hover{transform:translateY(2px);box-shadow:0 3px 0 #1E7A38,0 8px 18px rgba(63,203,99,.4)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .tzs{padding:52px 0}
  .tzs-launch__in{grid-template-columns:1fr;gap:28px}
  .tzs-launch{padding:32px 22px}
  .tzs-stack__row,.tzs-stack__sum,.tzs-stack__pay{padding-inline:20px}
}
@media (max-width:620px){
  .tzs__p{font-size:16px}
  .tzs-stack__row{flex-wrap:wrap;gap:10px}
  .tzs-stack__v{width:100%;text-align:right}
}

@media (prefers-reduced-motion:reduce){
  .tzs-launch__bar{transition:none}
  .tzs-launch__tag::before{animation:none}
}

/* ==========================================================================
   PRODUCT SHOWCASE BANNER  (.shot)
   Free page ka classroom banner ab fe + oto1..oto5 par bhi chalta hai.
   Base layout yahan hai; rang/border theme.css (section 9) se aate hain,
   isliye dono jagah ek hi jaisa dikhta hai. Font Baloo 2 nahi rakha —
   sales pages sirf Poppins load karte hain.
   ========================================================================== */
.shot{padding:6px 0 40px}
.shot__frame{
  position:relative;margin:0 auto;max-width:1000px;border-radius:20px;overflow:hidden;
  box-shadow:0 18px 40px rgba(20,55,110,.20);
  border:5px solid #fff;
}
.shot__frame img{width:100%;height:auto;display:block}
.shot__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 20px 16px;text-align:center;
  font-size:clamp(13px,1.6vw,17px);font-weight:600;color:#fff;
  letter-spacing:.2px;
  background:linear-gradient(180deg,transparent,rgba(10,35,75,.78));
  text-shadow:0 2px 6px rgba(0,0,0,.45);
}
.shot__cap b{color:var(--tz-y,#FFC93C);font-weight:700}
@media (max-width:620px){
  .shot__frame{border-width:3px;border-radius:14px}
  .shot__cap{padding:24px 12px 10px}
}