/* ══════════════════════════════════════════════════════════════
   LANDING — SECTION REDESIGNS (v3)
   Loads after landing-redesign.css. Why-us, counters, process,
   testimonials, reels carousel, pricing, ROI, map markers.
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. WHY US — connected spine + ghost numerals
   ───────────────────────────────────────────── */
.why-items{position:relative;padding-inline-start:38px;gap:22px!important}
.why-items::before{
  content:'';position:absolute;inset-inline-start:17px;top:14px;bottom:14px;
  width:2px;border-radius:2px;background:var(--pb);
}
/* animated fill — height driven by --spine from JS */
.why-items::after{
  content:'';position:absolute;inset-inline-start:17px;top:14px;
  width:2px;border-radius:2px;height:var(--spine,0%);
  background:linear-gradient(180deg,var(--pl),#5ef0c4);
  box-shadow:0 0 14px var(--pg);
  transition:height .15s linear;
}
.why-item{
  position:relative;overflow:visible;align-items:center;
  background:linear-gradient(135deg,rgba(18,27,24,.92),rgba(13,23,20,.75));
  border:1px solid var(--pb);border-radius:18px;padding:22px 24px;
  transition:transform .45s cubic-bezier(.19,1,.22,1),border-color .35s,box-shadow .45s;
}
.why-item::after{
  content:'';position:absolute;inset-inline-start:-30px;top:50%;translate:0 -50%;
  width:13px;height:13px;border-radius:50%;
  background:var(--d);border:2px solid var(--pb);
  transition:background .35s,border-color .35s,box-shadow .35s,scale .35s;
}
.why-item.lit::after{
  background:var(--pl);border-color:#5ef0c4;box-shadow:0 0 16px var(--pl);scale:1.15;
}
.why-item:hover{
  transform:translateX(-8px);border-color:var(--pbr);
  box-shadow:-10px 0 40px rgba(14,148,110,.18);
}
/* oversized ghost numeral behind the card */
.why-num{
  position:absolute!important;inset-inline-end:14px;top:50%;translate:0 -50%;
  width:auto!important;height:auto!important;min-width:0!important;
  background:none!important;border:none!important;box-shadow:none!important;
  font-size:58px!important;font-weight:900;line-height:1;z-index:0;
  color:transparent!important;-webkit-text-fill-color:transparent!important;
  -webkit-text-stroke:1.5px rgba(14,148,110,.30);
  transition:-webkit-text-stroke-color .35s;pointer-events:none;
}
.why-item:hover .why-num{-webkit-text-stroke-color:rgba(94,240,196,.65)}
.why-txt{position:relative;z-index:1;padding-inline-end:56px}
.why-item-title{font-size:16px!important;font-weight:800;margin-bottom:6px}

/* ─────────────────────────────────────────────
   2. COUNTERS — real cards, not bare columns
   ───────────────────────────────────────────── */
.counters{background:var(--d2)}
.cnt-grid{gap:18px!important;max-width:1180px;margin:0 auto}
.cnt-item{
  position:relative;overflow:hidden;padding:32px 24px 28px!important;
  background:linear-gradient(160deg,rgba(18,27,24,.95),rgba(11,18,16,.9));
  border:1px solid var(--pb);border-radius:22px;
  transition:transform .45s cubic-bezier(.19,1,.22,1),border-color .35s,box-shadow .45s,background .35s;
}
.cnt-item::after{display:none}
.cnt-item::before{
  content:'';position:absolute;top:-60px;inset-inline-end:-60px;
  width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,148,110,.22),transparent 70%);
  filter:blur(24px);opacity:.7;transition:opacity .4s;
}
.cnt-item:hover{
  transform:translateY(-8px);border-color:var(--pbr);
  box-shadow:0 22px 50px rgba(0,0,0,.4),0 0 40px rgba(14,148,110,.16);
}
.cnt-item:hover::before{opacity:1}
.cnt-ico{
  width:52px;height:52px;margin:0 auto 16px;border-radius:16px;
  display:flex!important;align-items:center;justify-content:center;
  background:var(--pu);border:1px solid var(--pb);color:var(--pl);
  position:relative;z-index:1;
  transition:background .35s,border-color .35s,color .35s,transform .45s,box-shadow .35s;
}
.cnt-item:hover .cnt-ico{
  background:var(--p);border-color:var(--p);color:#fff;
  transform:translateY(-3px) rotate(-8deg);box-shadow:0 10px 26px var(--pg);
}
.cnt-num,.cnt-suf{position:relative;z-index:1;letter-spacing:-1px}
.cnt-lbl{position:relative;z-index:1;font-size:12.5px;margin-top:10px}
.cnt-bar{
  width:100%!important;height:3px!important;margin:18px 0 0!important;
  border-radius:3px;background:var(--pb);position:relative;z-index:1;
  transform:none!important;overflow:hidden;box-shadow:none!important;
}
.cnt-bar::after{
  content:'';position:absolute;inset:0;border-radius:3px;
  background:linear-gradient(90deg,var(--p),#5ef0c4);
  transform:scaleX(0);transform-origin:right center;
  transition:transform 1.2s cubic-bezier(.19,1,.22,1);
}
.cnt-item.vis .cnt-bar::after{transform:scaleX(1)}

/* ─────────────────────────────────────────────
   3. PROCESS — animated roadmap
   ───────────────────────────────────────────── */
.proc-timeline{position:relative;padding-top:18px}
.proc-timeline::before{
  top:46px!important;right:6%!important;left:6%!important;
  height:3px!important;border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--pb) 0 14px,transparent 14px 26px)!important;
}
/* travelled road — width driven by --road from JS */
.proc-road{
  position:absolute;top:46px;right:6%;height:3px;border-radius:3px;z-index:1;
  width:var(--road,0%);
  background:linear-gradient(90deg,#5ef0c4,var(--p));
  box-shadow:0 0 16px var(--pg);transition:width .15s linear;
}
.proc-car{
  position:absolute;top:46px;right:calc(6% + var(--road,0%));z-index:3;
  translate:50% -50%;
  width:15px;height:15px;border-radius:50%;
  background:#5ef0c4;box-shadow:0 0 0 5px rgba(94,240,196,.16),0 0 22px #5ef0c4;
  transition:right .15s linear,opacity .4s;
  opacity:0;
}
.process.rolling .proc-car{opacity:1}
.proc-step{z-index:2}
.proc-num-wrap{
  background:var(--d2)!important;border:2px solid var(--pb)!important;
  color:var(--tm)!important;position:relative;box-shadow:none!important;
  transition:background .4s,border-color .4s,color .4s,transform .4s,box-shadow .4s;
}
.proc-step.lit .proc-num-wrap{
  background:var(--gm)!important;border-color:var(--p)!important;color:#fff!important;
  transform:scale(1.12);
  box-shadow:0 0 0 6px rgba(14,148,110,.14),0 10px 30px var(--pg)!important;
}
.proc-ico-lbl{opacity:.4;transition:opacity .4s,transform .4s}
.proc-step.lit .proc-ico-lbl{opacity:1;transform:translateY(-2px)}
.proc-title{color:var(--t2);transition:color .4s}
.proc-step.lit .proc-title{color:var(--t1)}

/* ─────────────────────────────────────────────
   4. TESTIMONIALS — staggered quote cards
   ───────────────────────────────────────────── */
.ts-card--text{
  background:linear-gradient(150deg,rgba(18,27,24,.96),rgba(12,20,18,.88));
  border:1px solid var(--pb);border-radius:22px;
  transition:transform .45s cubic-bezier(.19,1,.22,1),border-color .35s,box-shadow .45s;
}
.ts-catalog .ts-card--text:nth-child(even){margin-top:28px}
.ts-card--text:hover{
  transform:translateY(-8px);border-color:var(--pbr);
  box-shadow:0 22px 50px rgba(0,0,0,.4);
}
.ts-quote-inner::before{
  font-size:104px!important;top:-6px!important;
  color:rgba(14,148,110,.10)!important;transition:color .4s,transform .5s;
}
.ts-card--text:hover .ts-quote-inner::before{
  color:rgba(94,240,196,.18)!important;transform:scale(1.06);
}
.ts-stars{letter-spacing:2px}
.ts-av{position:relative}
.ts-av::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--pbr);opacity:0;transition:opacity .4s,scale .5s;
}
.ts-card:hover .ts-av::after{opacity:1;scale:1.08}
.ts-tab{cursor:pointer}

/* ─────────────────────────────────────────────
   5. REELS — 3D coverflow carousel
   ───────────────────────────────────────────── */
.reels-stage{position:relative;perspective:1500px;padding:10px 0 4px}
.reels-grid.reels-3d{
  display:block!important;position:relative;
  height:clamp(390px,52vw,470px);
  transform-style:preserve-3d;margin:0 auto;max-width:1100px;
}
.reels-3d .reels-card{
  position:absolute;top:0;left:50%;margin-left:-118px;width:236px;
  transition:transform .65s cubic-bezier(.19,1,.22,1),opacity .5s ease,filter .5s ease;
  will-change:transform;filter:saturate(.5) brightness(.6);
}
.reels-3d .reels-card__media{
  border-radius:20px;overflow:hidden;border:1px solid var(--pb);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.reels-3d .reels-card.is-active{filter:none}
.reels-3d .reels-card.is-active .reels-card__media{
  border-color:var(--pbr);
  box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 44px rgba(14,148,110,.3);
}
.reels-3d .reels-card__caption{
  opacity:0;transition:opacity .4s;text-align:center;margin-top:12px;
}
.reels-3d .reels-card.is-active .reels-card__caption{opacity:1}

.reels-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px}
.reels-nav__btn{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1.5px solid var(--pb);color:var(--t2);
  transition:border-color .3s,color .3s,background .3s,box-shadow .3s,transform .3s;
}
.reels-nav__btn:hover,.reels-nav__btn:focus-visible{
  border-color:var(--pl);color:var(--pl);background:var(--pu);
  box-shadow:0 0 20px var(--pg);transform:translateY(-2px);outline:none;
}
.reels-nav__dots{display:flex;gap:8px}
.reels-nav__dot{
  width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:var(--pb);transition:background .3s,width .3s,border-radius .3s;
}
.reels-nav__dot.act{background:var(--pl);width:24px;border-radius:5px;box-shadow:0 0 10px var(--pg)}

@media (max-width:640px){
  .reels-stage{perspective:none}
  .reels-grid.reels-3d{
    height:auto!important;display:flex!important;overflow-x:auto;
    scroll-snap-type:x mandatory;gap:14px;padding-bottom:10px;
    -webkit-overflow-scrolling:touch;
  }
  .reels-3d .reels-card{
    position:relative!important;top:auto!important;left:auto!important;
    margin-left:0!important;width:auto!important;
    transform:none!important;filter:none!important;
    flex:0 0 68%;scroll-snap-align:center;
  }
  .reels-3d .reels-card__caption{opacity:1!important}
  .reels-nav{display:none}
}

/* ─────────────────────────────────────────────
   6. PRICING — rotating light around the border
   ───────────────────────────────────────────── */
.pr-card{
  position:relative;overflow:hidden;isolation:isolate;background:transparent;
  transition:transform .45s cubic-bezier(.19,1,.22,1),box-shadow .45s;
}
/* Both layers sit BEHIND the card's own content via negative z-index —
   `isolation:isolate` keeps them inside the card's stacking context.
   Do not force position:relative on the children: that would break the
   absolutely-positioned "most popular" badge. */
.pr-card::before{
  content:'';position:absolute;top:50%;left:50%;width:165%;aspect-ratio:1;
  translate:-50% -50%;z-index:-2;opacity:0;
  background:conic-gradient(transparent 0deg 296deg,var(--p) 330deg,#5ef0c4 348deg,transparent 360deg);
  animation:prSpin 5s linear infinite;
  transition:opacity .45s ease;
}
.pr-card::after{
  content:'';position:absolute;inset:1.5px;border-radius:22px;z-index:-1;
  background:linear-gradient(160deg,rgba(18,27,24,.98),rgba(12,20,18,.96));
}
.pr-card:hover::before,.pr-card.pop::before{opacity:1}
@keyframes prSpin{to{rotate:360deg}}
.pr-card.pop{box-shadow:0 0 60px rgba(14,148,110,.22),var(--sh)}
.pr-card:hover:not(.pop){transform:translateY(-10px)}
.pr-val{letter-spacing:-1px}
.pr-features li{transition:transform .3s,color .3s}
.pr-card:hover .pr-features li{transform:translateX(-3px)}

/* ─────────────────────────────────────────────
   7. ROI CALCULATOR — console/dashboard look
   ───────────────────────────────────────────── */
.roi-section{position:relative;overflow:hidden}
.roi-section::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(38% 46% at 82% 14%,rgba(14,148,110,.20),transparent 62%),
    radial-gradient(34% 40% at 14% 86%,rgba(94,240,196,.13),transparent 64%);
  filter:blur(40px);
}
.roi-inner{position:relative;z-index:1}
.roi-badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 18px;border-radius:999px;
  background:rgba(14,148,110,.10);border:1px solid var(--pbr);
  color:var(--pl);font-size:12px;font-weight:700;letter-spacing:.4px;
}
.roi-badge::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--pl);
  box-shadow:0 0 10px var(--pl);animation:lblPulse 2.4s ease-in-out infinite;
}
.roi-grid{
  border-radius:26px;overflow:hidden;border:1px solid var(--pb);
  background:linear-gradient(150deg,rgba(18,27,24,.96),rgba(11,18,16,.92));
  box-shadow:0 30px 70px rgba(0,0,0,.42);
  /* panels now share one bordered shell — the original 24px gap would
     punch a visible slot through it */
  gap:0!important;
}
.roi-form-panel,.roi-results-panel{padding:clamp(22px,3vw,34px)!important}
.roi-form-panel{
  border-inline-end:1px solid var(--pb);
  background:linear-gradient(180deg,rgba(14,148,110,.05),transparent 60%);
}
.roi-label{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:13px;font-weight:700;color:var(--t2);margin-bottom:10px;
}
.roi-sales-val{color:var(--pl);font-weight:800}
.roi-select,.roi-range{width:100%}
.roi-select{
  background:#0b0f0e;border:1.5px solid var(--pb);border-radius:12px;
  padding:13px 16px;color:var(--t1);font-family:inherit;font-size:14px;outline:none;
  transition:border-color .3s,box-shadow .3s;
}
.roi-select:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(14,148,110,.14)}
.roi-toggle{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:11px 14px;border-radius:12px;border:1px solid var(--pb);
  background:rgba(255,255,255,.02);margin-top:9px;
  transition:border-color .3s,background .3s;
}
.roi-toggle:hover{border-color:var(--pbr);background:var(--pu)}
.roi-calc-btn{
  margin-top:10px;padding:15px;border-radius:999px;border:none;cursor:pointer;
  background:var(--gm);color:#fff;font-family:inherit;font-size:15px;font-weight:800;
  box-shadow:0 10px 34px var(--pg);
  transition:transform .3s,box-shadow .3s;
}
.roi-calc-btn:hover{transform:translateY(-3px);box-shadow:0 18px 46px var(--pg)}
.roi-results-panel{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  background:
    repeating-linear-gradient(0deg,rgba(14,148,110,.045) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,rgba(14,148,110,.045) 0 1px,transparent 1px 26px);
}
.roi-results-hint{color:var(--tm);font-size:14px;text-align:center;margin:auto}
.roi-disclaimer{text-align:center;font-size:12.5px;color:var(--tm);margin-top:18px}
.roi-cta-wrap{display:flex;justify-content:center;margin-top:18px}
.roi-cta-btn{
  padding:14px 30px;border-radius:999px;text-decoration:none;font-weight:700;
  border:1px solid var(--pbr);color:var(--pl);background:var(--pu);
  transition:transform .3s,box-shadow .3s,background .3s;
}
.roi-cta-btn:hover{
  transform:translateY(-3px);box-shadow:0 0 26px var(--pg);background:rgba(14,148,110,.2);
}
@media (max-width:900px){
  .roi-form-panel{border-inline-end:none;border-bottom:1px solid var(--pb)}
}

/* ─────────────────────────────────────────────
   8. MAP — pulsing markers
   ───────────────────────────────────────────── */
.pmap-dot{animation:pmapPulse 2.2s ease-in-out infinite;transform-origin:center}
.pmap-dot.d1{animation-delay:.4s}
.pmap-dot.d2{animation-delay:.9s}
@keyframes pmapPulse{
  0%,100%{opacity:.55;stroke-width:1}
  50%{opacity:1;stroke-width:4}
}
.pmap-halo{animation:pmapHalo 2.2s ease-out infinite;transform-origin:center;pointer-events:none}
.pmap-halo.d1{animation-delay:.4s}
.pmap-halo.d2{animation-delay:.9s}
@keyframes pmapHalo{
  0%{opacity:.45;r:4}
  70%{opacity:0;r:17}
  100%{opacity:0;r:17}
}

/* ─────────────────────────────────────────────
   9. RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width:1100px){
  .cnt-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:900px){
  .proc-road,.proc-car{display:none}
  .why-items{padding-inline-start:30px}
  .why-item::after{inset-inline-start:-24px}
}
@media (max-width:640px){
  .why-items{padding-inline-start:24px;gap:16px!important}
  .why-items::before,.why-items::after{inset-inline-start:11px}
  .why-item{padding:18px}
  .why-item::after{inset-inline-start:-19px;width:11px;height:11px}
  .why-num{font-size:44px!important;inset-inline-end:10px}
  .why-txt{padding-inline-end:42px}
  .cnt-grid{grid-template-columns:1fr!important}
  .cnt-item{padding:26px 20px 24px!important}
  .ts-catalog .ts-card--text:nth-child(even){margin-top:0}
}

/* ─────────────────────────────────────────────
   10. REDUCED MOTION
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .pr-card::before{animation:none}
  .pmap-dot,.pmap-halo,.roi-badge::before{animation:none}
  .why-items::after,.proc-road,.proc-car{transition:none}
  .reels-3d .reels-card{transition:none}
  .cnt-bar::after{transition:none;transform:scaleX(1)}
}

/* ─────────────────────────────────────────────
   11. PRICING CARDS & ROBUST LAYOUT
   ───────────────────────────────────────────── */
.pr-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 24px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  align-items: stretch !important;
}
.pr-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box !important;
}
.pr-price {
  min-height: 54px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-bottom: 12px !important;
}
.pr-price.pr-price--empty {
  align-items: center !important;
  gap: 12px !important;
}
.pr-val--custom {
  font-size: 26px !important;
  font-weight: 800 !important;
  background: var(--gc, linear-gradient(135deg, #5ef0c4, #0E946E)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1.2 !important;
}
.pr-period-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0E946E 0%, #0bb985 100%) !important;
  border: 1.5px solid rgba(94, 240, 196, 0.65) !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  line-height: 1.2 !important;
  box-shadow: 0 4px 14px rgba(14, 148, 110, 0.45), 0 0 12px rgba(94, 240, 196, 0.25) !important;
  letter-spacing: -0.2px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.pr-card:hover .pr-period-tag {
  transform: scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(14, 148, 110, 0.6), 0 0 16px rgba(94, 240, 196, 0.4) !important;
}
.pr-features {
  flex-grow: 1 !important;
}
.pr-cta {
  margin-top: auto !important;
}