/* =================== Digital impact: animated village + outcomes =================== */
.dv-impact{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,#fff7f1 50%,#fff)}

/* switch */
.dv-switch{display:flex;width:max-content;max-width:100%;margin:0 auto 1.2rem;padding:5px;border-radius:50px;background:#fff;box-shadow:0 10px 30px rgba(27,31,59,.14);border:1px solid rgba(27,31,59,.06)}
.dv-switch button{border:0;background:transparent;border-radius:50px;padding:.6rem 1.4rem;font-weight:600;color:var(--dark);display:flex;align-items:center;gap:.4rem;transition:.35s}
.dv-switch button.on{background:linear-gradient(135deg,var(--primary),#ff9a3c);color:#fff;box-shadow:0 8px 20px rgba(232,89,12,.4)}
.dv-switch button:not(.on):hover{background:rgba(194,65,12,.08)}

/* scene */
.dv-scene{--wall:#c3c6d4;--roof:#8f93a8;--door:#7b7f95;--win:#9ea2b8;--hill1:#9aa59a;--hill2:#838e84;--link:rgba(255,255,255,0);--glow:none;
  position:relative;width:min(100%,900px);aspect-ratio:800/340;margin:0 auto;border-radius:26px;overflow:hidden;box-shadow:0 24px 60px rgba(27,31,59,.22);isolation:isolate}
.dv-scene.digital{--wall:#fff4e3;--roof:#e8590c;--door:#7a3b1d;--win:#ffd166;--hill1:#6cc070;--hill2:#4aa356;--link:#ffb347;--glow:drop-shadow(0 0 5px rgba(255,209,102,.95))}
.dv-scene .sky{position:absolute;inset:0;z-index:-2;transition:opacity 1.2s}
.dv-scene .sky.off{background:linear-gradient(180deg,#6d7287,#aab0c4 70%,#c9ccd9)}
.dv-scene .sky.on{background:linear-gradient(180deg,#58b6ff,#bfe6ff 65%,#fff3d6);opacity:0}
.dv-scene.digital .sky.on{opacity:1}
.dv-scene .sun{position:absolute;right:9%;top:11%;width:12%;aspect-ratio:1;border-radius:50%;background:#e5e8f2;box-shadow:0 0 0 0 rgba(255,214,102,0);transition:background 1.2s,box-shadow 1.2s,transform 1.2s;z-index:-1}
.dv-scene.digital .sun{background:radial-gradient(circle,#fff6c9,#ffc83d);box-shadow:0 0 0 14px rgba(255,214,102,.28),0 0 60px 20px rgba(255,200,61,.5);transform:scale(1.05)}
.dv-scene .cloud{position:absolute;height:5%;width:15%;border-radius:50px;background:rgba(255,255,255,.7);filter:blur(1px);z-index:-1;animation:dvCloud 30s linear infinite}
.dv-scene .cloud::after{content:"";position:absolute;left:20%;top:-70%;width:50%;height:150%;border-radius:50%;background:inherit}
.dv-scene .c1{top:14%;left:8%}.dv-scene .c2{top:26%;left:55%;width:11%;animation-duration:42s;animation-direction:reverse}
@keyframes dvCloud{from{transform:translateX(-30px)}50%{transform:translateX(60px)}to{transform:translateX(-30px)}}
.dv-svg{position:absolute;inset:0;width:100%;height:100%}
.dv-svg .hill1{fill:var(--hill1);transition:fill 1s}.dv-svg .hill2{fill:var(--hill2);transition:fill 1s}
.dv-svg .wall{fill:var(--wall);transition:fill 1s}.dv-svg .roof{fill:var(--roof);transition:fill 1s}.dv-svg .door{fill:var(--door);transition:fill 1s}
.dv-svg .mast{fill:var(--roof);transition:fill 1s}
.dv-svg .win{fill:var(--win);transition:fill 1s,filter 1s}
.dv-scene.digital .dv-svg .win{filter:var(--glow);animation:dvTwinkle 3s ease-in-out infinite}
.dv-svg .hs:nth-of-type(odd) .win{animation-delay:.6s}
@keyframes dvTwinkle{50%{opacity:.75}}
/* data links from the panchayat to every house */
.dv-svg .links path{stroke:var(--link);stroke-dasharray:6 10;opacity:0;transition:opacity .8s}
.dv-scene.digital .dv-svg .links path{opacity:1;animation:dvFlow 1.1s linear infinite}
@keyframes dvFlow{to{stroke-dashoffset:-32}}

/* signal icon above the panchayat */
.dv-signal{position:absolute;left:50%;top:12%;translate:-50% 0;font-size:clamp(1.4rem,4.5vw,2.6rem);line-height:1;color:#fff}
.dv-signal i{position:absolute;left:50%;top:0;translate:-50% 0;transition:opacity .6s,transform .6s}
.dv-signal .s-off{color:#4d5169;opacity:1}.dv-signal .s-on{color:#fff;opacity:0;text-shadow:0 0 18px rgba(255,255,255,.9);transform:scale(.4)}
.dv-scene.digital .dv-signal .s-off{opacity:0}
.dv-scene.digital .dv-signal .s-on{opacity:1;transform:scale(1);animation:dvSig 1.8s ease-in-out infinite}
@keyframes dvSig{50%{transform:scale(1.18);text-shadow:0 0 30px #fff}}

/* service badges that pop above each building */
.dv-badge{position:absolute;translate:-50% -100%;display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;transform:translateY(16px) scale(.4);transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.3,1.5);pointer-events:none}
.dv-badge i{width:clamp(26px,5.4vw,44px);aspect-ratio:1;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,var(--primary),#ff9a3c);color:#fff;font-size:clamp(.9rem,2.4vw,1.4rem);box-shadow:0 8px 18px rgba(232,89,12,.45)}
.dv-badge em{font-style:normal;font-size:clamp(.5rem,1.3vw,.72rem);font-weight:700;background:#fff;color:var(--dark);padding:1px 7px;border-radius:50px;box-shadow:0 4px 10px rgba(0,0,0,.15);white-space:nowrap}
.dv-scene.digital .dv-badge{opacity:1;transform:none;transition-delay:calc(var(--d) + .5s);animation:dvBob 3.4s ease-in-out infinite;animation-delay:calc(var(--d) + 1.4s)}
@keyframes dvBob{50%{translate:-50% calc(-100% - 6px)}}

/* captions */
.dv-note{position:absolute;left:50%;bottom:3.5%;translate:-50% 0;padding:.4rem 1rem;border-radius:50px;font-weight:600;font-size:clamp(.62rem,1.9vw,.95rem);white-space:nowrap;backdrop-filter:blur(8px);transition:opacity .6s,transform .6s}
.dv-note.off{background:rgba(40,42,60,.78);color:#fff}
.dv-note.on{background:rgba(255,255,255,.92);color:#17603a;opacity:0;transform:translateY(10px)}
.dv-scene.digital .dv-note.off{opacity:0;transform:translateY(10px)}
.dv-scene.digital .dv-note.on{opacity:1;transform:none}

/* who benefits */
.dv-outs .dv-out{height:100%;background:#fff;border-radius:20px;padding:1.2rem;border:1px solid rgba(27,31,59,.06);box-shadow:0 10px 28px rgba(27,31,59,.09);position:relative;overflow:hidden;transition:transform .35s,box-shadow .35s}
.dv-out::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(232,89,12,.18),transparent 70%);transition:transform .5s}
.dv-out:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(232,89,12,.2)}
.dv-out:hover::after{transform:scale(2.2)}
.dv-out .ic{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:linear-gradient(135deg,var(--primary),#ff9a3c);color:#fff;font-size:1.5rem;box-shadow:0 10px 20px rgba(232,89,12,.3);margin-bottom:.7rem;transition:transform .5s}
.dv-out:hover .ic{transform:rotate(-8deg) scale(1.1)}
.dv-out h4{font-size:1.05rem;color:var(--dark);margin-bottom:.5rem}
.dv-out ul{list-style:none;margin:0;padding:0}
.dv-out li{position:relative;padding-left:1.35rem;font-size:.85rem;color:#444;line-height:1.4;margin-bottom:.4rem}
.dv-out li::before{content:"\f26a";font-family:bootstrap-icons;position:absolute;left:0;top:0;color:#17a34a}

/* a day in the village */
.dv-day{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}
.dv-day::before{content:"";position:absolute;left:10%;right:10%;top:29px;height:4px;border-radius:4px;background:linear-gradient(90deg,#ffb347,#58b6ff,#ff7a59,#3b3f8f);opacity:.55}
.dv-day li{position:relative;text-align:center;padding:0 .3rem}
.dv-day .dot{display:grid;place-items:center;width:58px;height:58px;margin:0 auto .6rem;border-radius:50%;background:#fff;color:var(--primary);font-size:1.6rem;box-shadow:0 0 0 5px rgba(232,89,12,.14),0 10px 22px rgba(27,31,59,.15);position:relative;z-index:1;transition:transform .4s}
.dv-day li:hover .dot{transform:scale(1.15) rotate(-6deg);background:var(--primary);color:#fff}
.dv-day b{display:block;color:var(--dark)}
.dv-day em{display:inline-block;font-style:normal;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--dark);border-radius:50px;padding:1px 9px;margin:.15rem 0 .35rem}
.dv-day small{display:block;color:#555;font-size:.82rem;line-height:1.4}

/* summary */
.dv-sum{margin-top:2.6rem}
.dv-s{text-align:center;background:linear-gradient(135deg,var(--dark),#3a2a6b);color:#fff;border-radius:22px;padding:1.4rem .8rem;height:100%;box-shadow:0 16px 36px rgba(27,31,59,.28);transition:transform .35s}
.dv-s:hover{transform:translateY(-6px)}
.dv-s .ring{position:relative;display:grid;place-items:center;width:64px;height:64px;margin:0 auto .7rem;border-radius:50%;font-size:1.8rem;color:#ffd9b0;background:rgba(255,255,255,.1)}
.dv-s .ring::before,.dv-s .ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,179,71,.6);animation:dvRing 2.6s ease-out infinite}
.dv-s .ring::after{animation-delay:1.3s}
@keyframes dvRing{from{transform:scale(1);opacity:.9}to{transform:scale(1.7);opacity:0}}
.dv-s b{display:block;font-size:1.1rem;background:linear-gradient(90deg,#fff,#ffd9b0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dv-s small{display:block;opacity:.8;font-size:.8rem;margin-top:.2rem}
.dv-disc{text-align:center;color:#777;font-size:.78rem;margin:1.2rem 0 0}

@media(max-width:991px){
  .dv-day{grid-template-columns:1fr;gap:1.2rem;padding-left:0}
  .dv-day::before{left:29px;right:auto;top:20px;bottom:20px;width:4px;height:auto;background:linear-gradient(180deg,#ffb347,#58b6ff,#ff7a59,#3b3f8f)}
  .dv-day li{display:grid;grid-template-columns:58px 1fr;column-gap:1rem;text-align:left;align-items:center}
  .dv-day .dot{grid-row:1/5;margin:0}
  .dv-day em{justify-self:start}
}
@media(max-width:575px){.dv-scene{border-radius:18px}.dv-switch button{padding:.55rem 1rem;font-size:.9rem}}
@media(prefers-reduced-motion:reduce){
  .dv-scene *,.dv-s .ring::before,.dv-s .ring::after{animation:none!important}
}