/* Redesign layer -- premium depth, 3D network graphic, trust badges, stories, FAQ.
   Loads after style.css and brand.css so it can extend both without duplicating tokens. */
:root{--shadow-soft:0 20px 55px rgba(0,61,46,.12);--shadow-lift:0 30px 70px rgba(0,61,46,.22);--radius-lg:1.75rem;--radius-md:1.1rem;
--grad-brand:linear-gradient(135deg,#005f42,#008f67 55%,#139fce);
--grad-mesh-a:radial-gradient(circle at 15% 20%,rgba(19,159,206,.22),transparent 45%);
--grad-mesh-b:radial-gradient(circle at 85% 15%,rgba(16,168,115,.20),transparent 42%);
--grad-mesh-c:radial-gradient(circle at 50% 90%,rgba(245,173,32,.14),transparent 45%);}

/* Soft animated gradient backdrop for sections that want extra depth without extra imagery */
.mesh-bg{position:relative;isolation:isolate;overflow:hidden}
.mesh-bg::before{content:"";position:absolute;inset:-10%;z-index:-1;background:var(--grad-mesh-a),var(--grad-mesh-b),var(--grad-mesh-c);animation:meshDrift 22s ease-in-out infinite alternate}
@keyframes meshDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2%,2%,0) scale(1.06)}}

/* Tilt cards -- redesign.js sets --rx/--ry from pointer position */
.tilt-card{--rx:0deg;--ry:0deg;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease,box-shadow .25s ease;will-change:transform}
.tilt-card:hover{box-shadow:var(--shadow-lift)}

/* Trust / verification badges -- only rendered by trust_badges_html() when an admin has set a real status */
.trust-strip{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.trust-badge{display:flex;align-items:center;gap:.6rem;padding:.65rem 1.05rem;border:1px solid rgba(0,143,103,.16);border-radius:999px;color:#0b3a2c;background:rgba(255,255,255,.85);box-shadow:0 8px 22px rgba(0,61,46,.08);backdrop-filter:blur(6px);font-weight:800;font-size:.86rem}
.trust-badge i{color:#008f67}
.trust-badge.is-pending{opacity:.72;border-style:dashed}
.trust-badge .status{display:block;color:#5c766e;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
[data-bs-theme=dark] .trust-badge{color:#e6f5ef;background:rgba(7,52,40,.85)}

/* Isometric "impact network" -- animated 3D stakeholder diagram */
.impact-network{padding:clamp(2rem,5vw,4rem) 0}
.network-3d{position:relative;perspective:1400px;min-height:420px}
.network-canvas{position:relative;transform-style:preserve-3d;transform:rotateX(8deg) rotateY(-6deg);margin:auto;width:min(720px,100%);height:420px;transition:transform .4s ease}
.network-hub{position:absolute;top:50%;left:50%;width:170px;height:170px;transform:translate3d(-50%,-50%,40px);display:grid;place-items:center;text-align:center;border-radius:28px;color:#fff;background:var(--grad-brand);box-shadow:0 30px 60px rgba(0,61,46,.35),inset 0 1px 0 rgba(255,255,255,.25);font-weight:800;padding:1rem;line-height:1.3}
.network-hub small{display:block;margin-top:.35rem;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#cdece0;font-weight:700}
.network-node{position:absolute;display:flex;align-items:center;gap:.55rem;padding:.7rem 1rem;border-radius:16px;color:#0b3a2c;background:rgba(255,255,255,.94);box-shadow:0 18px 40px rgba(0,61,46,.16);font-weight:800;font-size:.85rem;animation:nodeFloat 4.5s ease-in-out infinite;transform:translateZ(20px);white-space:nowrap}
.network-node i{color:#008f67;font-size:1.1rem}
.network-node:nth-child(2){top:4%;left:2%;animation-delay:.1s}
.network-node:nth-child(3){top:2%;right:0;animation-delay:.6s}
.network-node:nth-child(4){bottom:12%;left:-2%;animation-delay:1.1s}
.network-node:nth-child(5){bottom:14%;right:-2%;animation-delay:1.6s}
.network-node:nth-child(6){top:44%;left:-6%;animation-delay:2.1s}
.network-node:nth-child(7){top:44%;right:-6%;animation-delay:2.6s}
@keyframes nodeFloat{0%,100%{transform:translateZ(20px) translateY(0)}50%{transform:translateZ(20px) translateY(-10px)}}
.network-lines{position:absolute;inset:0;z-index:-1;width:100%;height:100%}
.network-lines path{fill:none;stroke:url(#networkGradient);stroke-width:2;stroke-dasharray:6 8;animation:lineFlow 3s linear infinite}
@keyframes lineFlow{to{stroke-dashoffset:-28}}
@media(max-width:767px){.network-canvas{transform:none;height:auto;display:grid;gap:.75rem;width:100%}.network-hub{position:relative;top:auto;left:auto;transform:none;margin:auto;width:150px;height:150px}.network-node{position:relative;top:auto;left:auto;right:auto;bottom:auto;justify-content:center;animation:none;transform:none}.network-lines{display:none}}
@media(prefers-reduced-motion:reduce){.network-node{animation:none}.network-lines path{animation:none}.mesh-bg::before{animation:none}}

/* Testimonials & success stories */
.testimonial-card{height:100%;padding:1.8rem;border-radius:var(--radius-md);background:var(--bs-body-bg,#fff);border:1px solid rgba(0,143,103,.1);box-shadow:var(--shadow-soft)}
.testimonial-card .quote-mark{color:#d9ece6;font-size:2.4rem;line-height:1;font-family:Georgia,serif}
.testimonial-card p.quote{margin:.5rem 0 1.1rem;color:#33473f;font-size:1.02rem;line-height:1.7}
[data-bs-theme=dark] .testimonial-card p.quote{color:#d8e5e1}
.testimonial-person{display:flex;align-items:center;gap:.75rem}
.testimonial-person img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.testimonial-person .avatar-fallback{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--light-green,#e5f7f0);color:#008f67;font-weight:800}

/* FAQ accordion */
.faq-accordion .accordion-item{margin-bottom:.75rem;border:1px solid rgba(0,143,103,.12)!important;border-radius:1rem!important;overflow:hidden}
.faq-accordion .accordion-button{font-weight:800;color:#06345e}
.faq-accordion .accordion-button:not(.collapsed){color:#008f67;background:#f1faf7}
.faq-accordion .accordion-button:focus{box-shadow:none}

/* Local SEO chips */
.locality-strip{display:flex;flex-wrap:wrap;gap:.5rem}
.locality-strip span{padding:.35rem .8rem;border-radius:999px;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);font-size:.78rem;font-weight:700}

@media(max-width:575px){.trust-badge{font-size:.78rem;padding:.55rem .85rem}}

/* ================= JEA "Working Model — Bridge for Every Opportunity" (alliance.php) ================= */

/* Step 1: bridge diagram — providers on top, JEA hub in the middle, institutions/students below */
.bridge-diagram{display:grid;justify-items:center;gap:0;padding:1rem 0}
.bridge-tier{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.bridge-chip{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.3rem;border-radius:16px;color:#0b3a2c;background:var(--bs-body-bg,#fff);box-shadow:var(--shadow-soft);font-weight:800;font-size:.92rem}
.bridge-chip i{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:10px;color:#fff;background:var(--grad-brand);font-size:1rem}
.bridge-connector{width:2px;height:36px;margin:.4rem auto;background:repeating-linear-gradient(to bottom,#008f67 0 6px,transparent 6px 12px);position:relative}
.bridge-connector::after{content:"";position:absolute;left:50%;bottom:-2px;width:9px;height:9px;border-right:2px solid #008f67;border-bottom:2px solid #008f67;transform:translateX(-50%) rotate(45deg)}
.bridge-hub{display:grid;place-items:center;text-align:center;width:200px;height:200px;border-radius:50%;color:#fff;background:var(--grad-brand);box-shadow:0 30px 65px rgba(0,61,46,.35),inset 0 1px 0 rgba(255,255,255,.25);font-weight:800;padding:1rem;animation:hubPulse 3.5s ease-in-out infinite}
.bridge-hub small{display:block;margin-top:.4rem;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#cdece0;font-weight:700}
@keyframes hubPulse{0%,100%{box-shadow:0 30px 65px rgba(0,61,46,.35),0 0 0 0 rgba(19,159,206,.35)}50%{box-shadow:0 30px 65px rgba(0,61,46,.35),0 0 0 18px rgba(19,159,206,0)}}
.bridge-tier.destinations .bridge-chip{padding:1.1rem 1.6rem;font-size:1rem;border:2px solid rgba(0,143,103,.18)}
@media(prefers-reduced-motion:reduce){.bridge-hub{animation:none}}

/* Step 2: opportunity flow columns -- 4 content tracks + 3 narrow arrow tracks between them */
.flow-columns{display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr 28px 1fr;gap:0 .6rem;align-items:stretch}
.flow-col{min-width:0;padding:1.5rem 1.25rem;border-radius:var(--radius-md);background:var(--bs-body-bg,#fff);box-shadow:var(--shadow-soft);position:relative;z-index:1}
.flow-col.is-hub{color:#fff;background:var(--grad-brand)}
.flow-col h4{font-size:1rem;font-weight:850;margin-bottom:.85rem;line-height:1.3}
.flow-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.84rem;font-weight:600;line-height:1.35}
.flow-col ul li{display:flex;align-items:flex-start;gap:.5rem}
.flow-col ul i{width:16px;flex:0 0 16px;margin-top:.2rem;color:#139fce}
.flow-col.is-hub ul i{color:#ffd45c}
.flow-arrow{display:flex;align-items:center;justify-content:center;color:#008f67;font-size:1.2rem;z-index:0}
@media(max-width:991px){.flow-columns{grid-template-columns:1fr;gap:.9rem}.flow-arrow{transform:rotate(90deg);padding:.15rem 0}}

/* Step 3: real-time instant distribution band */
.instant-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.4rem;padding:2rem;border-radius:var(--radius-lg);background:linear-gradient(120deg,#003d2e,#007b59 65%,#139fce);color:#fff}
.instant-band .instant-col{display:grid;gap:.6rem;text-align:left}
.instant-band .instant-col span{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.86rem;color:rgba(255,255,255,.85)}
.instant-hub{position:relative;width:96px;height:96px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.4);font-size:1.8rem;flex:0 0 auto}
.instant-hub::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.35);animation:ringPulse 2.2s ease-out infinite}
@keyframes ringPulse{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.35);opacity:0}}
.instant-callout{display:flex;align-items:center;gap:.9rem;padding:1rem 1.3rem;border-radius:16px;background:rgba(255,255,255,.96);color:#0b3a2c;font-weight:800;box-shadow:0 20px 45px rgba(0,20,15,.3)}
.instant-callout i{color:#f28c28;font-size:1.5rem}
@media(prefers-reduced-motion:reduce){.instant-hub::before{animation:none}}

/* Step 4: communication channels + phone notification mockup */
.channel-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:center}
.channel-list{display:grid;gap:.7rem}
.channel-chip{display:flex;align-items:center;gap:.7rem;padding:.75rem 1rem;border-radius:14px;background:var(--bs-body-bg,#fff);box-shadow:var(--shadow-soft);font-weight:700;font-size:.86rem}
.channel-chip i{width:32px;height:32px;flex:0 0 32px;display:grid;place-items:center;border-radius:9px;color:#fff;background:var(--grad-brand)}
.phone-mockup{width:230px;margin:auto;padding:14px;border-radius:34px;background:#0b1f18;box-shadow:0 30px 60px rgba(0,20,15,.35)}
.phone-mockup .phone-notch{width:70px;height:14px;margin:0 auto 10px;border-radius:0 0 12px 12px;background:#0b1f18}
.phone-mockup .phone-screen{padding:1.1rem .9rem;border-radius:20px;background:linear-gradient(160deg,#0d2c22,#083a2d)}
.phone-notification{padding:.9rem;border-radius:14px;background:#fff;color:#17332a;animation:notifyDrop .6s ease-out}
.phone-notification strong{display:flex;align-items:center;gap:.4rem;font-size:.82rem}
.phone-notification p{margin:.35rem 0;font-size:.78rem;color:#526b62}
.phone-notification a{display:inline-block;padding:.35rem .7rem;border-radius:8px;color:#fff;background:#008f67;font-size:.74rem;font-weight:800}
@keyframes notifyDrop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@media(max-width:767px){.channel-flow{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.phone-notification{animation:none}}

/* Step 5: benefits-for-all colour-coded grid */
.benefit-col{height:100%;padding:1.6rem;border-radius:var(--radius-md);color:#fff;box-shadow:var(--shadow-soft)}
.benefit-col h4{font-weight:850;margin-bottom:.2rem}
.benefit-col small{display:block;opacity:.85;font-weight:700;text-transform:uppercase;font-size:.68rem;letter-spacing:.06em}
.benefit-col ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem;font-size:.9rem;font-weight:600}
.benefit-col ul i{margin-right:.5rem}
.benefit-col.providers{background:linear-gradient(150deg,#005f42,#008f67)}
.benefit-col.institutions{background:linear-gradient(150deg,#06345e,#139fce)}
.benefit-col.students{background:linear-gradient(150deg,#4a1d7a,#7b2cbf)}
.benefit-col.society{background:linear-gradient(150deg,#8a4a05,#f28c28)}

/* Step 6: impact goal flow + mission banner */
.impact-goal-flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem}
.impact-goal-step{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:120px;text-align:center}
.impact-goal-step .goal-icon{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--grad-brand);font-size:1.3rem;box-shadow:var(--shadow-soft)}
.impact-goal-step span{font-weight:800;font-size:.86rem}
.impact-goal-arrow{color:#008f67;font-size:1.2rem}
.mission-banner{margin-top:2.5rem;padding:2rem;border-radius:var(--radius-lg);text-align:center;color:#fff;background:linear-gradient(120deg,#003d2e,#008f67 60%,#139fce)}
.mission-banner .mission-hindi{display:block;font-size:clamp(1.3rem,3vw,2rem);font-weight:850;margin-bottom:.4rem}
.mission-banner .mission-english{opacity:.9;font-weight:700}
@media(max-width:767px){.impact-goal-arrow{transform:rotate(90deg)}}

/* Sitewide announcement toast (includes/footer.php) -- single clean appearance, no auto-reappear.
   Replaces the old, visually chaotic .site-global-popup that flashed on/off forever and clashed with the brand palette. */
.announce-toast{position:fixed;left:clamp(14px,2.5vw,28px);bottom:clamp(14px,2.5vw,28px);z-index:1040;display:flex;align-items:center;gap:.85rem;max-width:min(380px,calc(100% - 28px));padding:1rem 2.4rem 1rem 1.1rem;border-radius:16px;color:#fff;background:var(--grad-brand);box-shadow:0 22px 55px rgba(0,61,46,.32);opacity:0;pointer-events:none;transform:translateY(16px) scale(.97);transition:opacity .35s ease,transform .35s ease}
.announce-toast.is-visible{opacity:1;pointer-events:auto;transform:none}
.announce-toast-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:rgba(255,255,255,.18);font-size:1.05rem}
.announce-toast-message{display:flex;flex-direction:column;gap:.15rem;color:#fff!important;font-size:.9rem;line-height:1.35}
.announce-toast-message strong{font-weight:800}
.announce-toast-message span{opacity:.88;font-weight:600}
.announce-toast-close{position:absolute;top:.6rem;right:.6rem;width:24px;height:24px;display:grid;place-items:center;border:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.16);font-size:.72rem}
.announce-toast-close:hover{background:rgba(255,255,255,.3)}
@media(max-width:575px){.announce-toast{left:10px;right:10px;max-width:calc(100% - 20px)}}
@media(prefers-reduced-motion:reduce){.announce-toast{transition:opacity .01s}}