/* ============================================================================
   VAROLYN — Services page · Section 5 "TECHNOLOGY THAT POWERS BETTER CARE"
   Wide light card (reference match): title + 6 tech features in a row,
   stylised Bangalore map on the right with soft-pulsing green pins.
   Self-contained (.svtc- prefix only). PERFORMANCE: no images, no JS,
   no filters — map is CSS blobs + inline SVG pins; pulses are
   transform/opacity only, staggered, off under reduced-motion. Geist.
   ============================================================================ */
.svtc{
  --forest:#1a6b5a; --emerald:#25957a; --mint:#3dbf97; --ink:#0d1f1a;
  --sub:#4a6b62; --line:rgba(20,60,45,.12);
  font-family:'Geist',system-ui,-apple-system,sans-serif;color:var(--ink);
  background:#D5EDE3;                                  /* strict requested section colour */
  padding:clamp(28px,4.5vw,56px) clamp(14px,4vw,56px) clamp(34px,5vw,64px);   /* SPACING TRIM: bottom 84→64 (page rhythm) */
}
.svtc *{box-sizing:border-box;min-width:0}
.svtc-card{max-width:1180px;margin:0 auto;background:#fff;border:1px solid rgba(255,255,255,.9);
  border-radius:clamp(22px,3vw,30px);padding:clamp(20px,3vw,34px) clamp(16px,2.6vw,32px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 18px 44px -18px rgba(16,64,45,.18);
  display:grid;gap:clamp(20px,3vw,30px)}
@media (min-width:1080px){ .svtc-card{grid-template-columns:1fr minmax(280px,330px);align-items:center} }

/* ---------------- left: title + 6 features ---------------- */
.svtc-title{text-align:center;font-weight:800;font-size:clamp(19px,2.4vw,26px);line-height:1.25;
  letter-spacing:-.02em;color:#0e5240;margin:0 0 clamp(18px,2.6vw,26px)}
.svtc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.6vw,22px) clamp(10px,1.6vw,14px)}
@media (min-width:600px){ .svtc-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1080px){ .svtc-grid{grid-template-columns:repeat(6,minmax(0,1fr))} }
.svtc-item{display:flex;flex-direction:column;align-items:center;text-align:center}
.svtc-item .c{width:clamp(46px,6vw,56px);height:clamp(46px,6vw,56px);border-radius:50%;flex:none;
  display:grid;place-items:center;color:var(--forest);background:#fff;
  border:1px solid rgba(26,107,90,.22);
  box-shadow:0 0 0 4px rgba(61,191,151,.08),0 8px 18px -8px rgba(16,64,45,.25);
  margin-bottom:9px}
.svtc-item .c svg{width:50%;height:50%;display:block;margin:auto}
.svtc-item b{display:block;font-weight:700;font-size:clamp(12px,1.3vw,14.5px);line-height:1.25;margin:0 0 4px}
.svtc-item span{display:block;font-size:clamp(10.5px,1.1vw,12.5px);line-height:1.45;color:var(--sub);max-width:17ch}

/* ---------------- right: Bangalore ZONES map (client asset, as-is) + pulsing pins ---------------- */
.svtc-map{position:relative;width:100%;max-width:380px;margin:0 auto;aspect-ratio:760/712;
  border-radius:14px;overflow:clip}                  /* same slot/size/radius; the asset is a transparent silhouette, so the shadow lives on the map shape itself (below), not on a rectangle */
.svtc-map img{width:100%;height:100%;display:block;
  filter:drop-shadow(0 10px 18px rgba(16,64,45,.18))}   /* soft static shadow hugging the map outline (never animated) */
/* pulse dots — one per baked-in pin, %-anchored to the image so they track pins at every width.
   Pure transform/opacity (compositor-only), decorative, zero layout space. */
.svtc-zdot{position:absolute;width:9px;height:9px;border-radius:50%;background:#25957a;
  transform:translate(-50%,-50%);pointer-events:none}
.svtc-zdot::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(61,191,151,.65);opacity:0;transform:scale(.55)}
@media (prefers-reduced-motion: no-preference){
  .svtc-zdot::after{animation:svtc-zping 2s ease-out infinite}
  .svtc-zdot.z2::after{animation-delay:.2s} .svtc-zdot.z3::after{animation-delay:.4s}
  .svtc-zdot.z4::after{animation-delay:.6s} .svtc-zdot.z5::after{animation-delay:.8s}
  .svtc-zdot.z6::after{animation-delay:1s}  .svtc-zdot.z7::after{animation-delay:1.2s}
  .svtc-zdot.z8::after{animation-delay:1.4s}
}
@keyframes svtc-zping{0%{transform:scale(.55);opacity:.75}70%{opacity:.12}100%{transform:scale(2.1);opacity:0}}
/* pin-head coordinates — computed from the asset (machine-calibrated) */
.svtc-zdot.z1{left:43.4%;top:17.0%}   /* Byatarayanapura */
.svtc-zdot.z2{left:17.9%;top:29.3%}   /* Dasarahalli */
.svtc-zdot.z3{left:29.6%;top:47.9%}   /* West */
.svtc-zdot.z4{left:54.0%;top:48.4%}   /* East */
.svtc-zdot.z5{left:81.7%;top:50.2%}   /* Mahadevapura */
.svtc-zdot.z6{left:37.8%;top:66.7%}   /* South */
.svtc-zdot.z7{left:16.1%;top:70.6%}   /* RR Nagara */
.svtc-zdot.z8{left:47.2%;top:81.4%}   /* Bommanahalli */

/* caption under the map */
.svtc-cap{text-align:center;font-size:clamp(11px,1.2vw,13px);color:var(--sub);line-height:1.5;
  margin:10px 0 0}
.svtc-cap b{color:var(--forest);font-weight:700}



/* layout-regression repair */
.svtc-grid{grid-auto-rows:1fr}
.svtc-item{height:100%}
/* desktop 6-col: reserve a 2-line title slot so every description starts at the same Y.
   "Doctor Collaboration"/"Medication Reminders" titles wrap to 2 lines while the others
   are 1 line; without this, their descriptions sit ~19px lower. 1-line titles take the
   same slot, so all descriptions align. Tablet(3-col)/mobile(2-col) titles are 1 line
   and already align at 0px, so this is scoped to the 6-col layout only. */
@media (min-width:1080px){ .svtc-item b{min-height:2.5em} }