
:root{
  --mohi-card-ambient: rgba(7,43,80,.12);
  --mohi-card-ambient-soft: rgba(7,43,80,.06);
}

html.mohi-nexgen-v3 body{
  background:
    radial-gradient(circle at 100% 0, rgba(18,104,232,.09), transparent 24rem),
    radial-gradient(circle at 0 24%, rgba(18,169,159,.08), transparent 25rem),
    linear-gradient(180deg,#f8fbff 0%, #f3f9ff 52%, #f6fcfb 100%);
}

/* Cleaner logo presentation */
.brand:before,
.footer-brand img{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
.brand:before{opacity:.18; transform:translateY(-50%) scale(.94)}
.brand img,
.footer-brand img,
.admin-brand img,
.login-card img{
  padding:0 !important;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:drop-shadow(0 10px 18px rgba(7,43,80,.12));
}

/* Stronger moving ticker and refined shell */
.mohi-updates-ticker{
  position:relative;
  z-index:5;
  background:linear-gradient(90deg,#0b335f 0%,#0e5d79 100%);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(8,45,85,.08);
  box-shadow:0 10px 24px rgba(5,35,66,.08);
}
.mohi-ticker-shell{min-height:58px}
.mohi-ticker-heading{
  min-width:150px;
  letter-spacing:.12em;
  box-shadow:12px 0 26px rgba(4,31,59,.18);
}
.mohi-ticker-item{padding-top:7px;padding-bottom:7px}
[data-mohi-ticker-js="true"] .mohi-ticker-track{
  animation:none !important;
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  .mohi-ticker-track{animation:mohiTickerMove var(--mohi-ticker-duration,60s) linear infinite !important; transform:none !important}
  [data-mohi-ticker-js="true"] .mohi-ticker-track{animation:none !important}
}

/* Reduce oversized blank spaces */
.hero-grid{padding:66px 0 70px !important; gap:54px !important}
.hero-copy{padding:14px 0 !important}
.hero-copy h1{max-width:760px}
.hero-visual{min-height:480px !important}
.hero-photo{inset:20px 4px auto 18px !important; height:438px !important}
.page-hero{padding:58px 0 62px !important}
.page-hero>.container{padding:28px 30px !important}
.section{padding:76px 0 !important}
.section-head{margin-bottom:34px !important; padding-bottom:16px !important}
.cta-band{padding:72px 0 !important}
.footer-grid{padding-top:0}
@media (max-width: 980px){
  .hero-grid{padding:58px 0 62px !important; gap:38px !important}
  .page-hero{padding:52px 0 55px !important}
  .section{padding:66px 0 !important}
}
@media (max-width: 640px){
  .hero-grid{padding:52px 0 58px !important}
  .hero-visual{min-height:390px !important}
  .hero-photo{height:358px !important}
  .page-hero{padding:45px 0 48px !important}
  .section{padding:58px 0 !important}
  .cta-band{padding:58px 0 !important}
}

/* Cards: more depth, colour and premium finish */
.card,
.sidebar-card,
.value-card,
.principle,
.board-card,
.map-card,
.contact-card,
.resource-card,
.form-card,
.timeline-item,
.stat-card,
.support-principle,
.payment-method-card,
.support-preview-card,
.leader-card,
.programme-card,
.project-card,
.story-card{
  position:relative;
  overflow:hidden;
  border-radius:28px !important;
  background:
    radial-gradient(circle at 100% 0, rgba(18,169,159,.09), transparent 34%),
    radial-gradient(circle at 0 100%, rgba(18,104,232,.08), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(249,252,255,.98) 60%, rgba(238,249,247,.96) 100%) !important;
  border:1px solid rgba(154,190,221,.46) !important;
  box-shadow:
    0 18px 38px var(--mohi-card-ambient),
    0 4px 12px var(--mohi-card-ambient-soft),
    inset 0 1px rgba(255,255,255,.98) !important;
  transform-style:preserve-3d;
}
.card:hover,
.sidebar-card:hover,
.value-card:hover,
.principle:hover,
.board-card:hover,
.map-card:hover,
.contact-card:hover,
.resource-card:hover,
.form-card:hover,
.timeline-item:hover,
.stat-card:hover,
.support-principle:hover,
.payment-method-card:hover,
.support-preview-card:hover,
.leader-card:hover,
.programme-card:hover,
.project-card:hover,
.story-card:hover{
  transform:translateY(-10px) scale(1.012) !important;
  border-color:rgba(89,156,216,.62) !important;
  box-shadow:
    0 30px 70px rgba(7,43,80,.18),
    0 10px 22px rgba(7,43,80,.08),
    inset 0 1px rgba(255,255,255,.98) !important;
}
.card:after,
.sidebar-card:after,
.value-card:after,
.principle:after,
.board-card:after,
.map-card:after,
.contact-card:after,
.resource-card:after,
.form-card:after,
.timeline-item:after,
.stat-card:after,
.support-principle:after,
.payment-method-card:after,
.support-preview-card:after,
.leader-card:after,
.programme-card:after,
.project-card:after,
.story-card:after{
  content:"";
  position:absolute;
  right:-34px;
  top:-34px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(244,184,67,.18) 0%, rgba(244,184,67,0) 72%);
  pointer-events:none;
}
.card .card-media img,
.programme-card img,
.project-card img,
.story-card img,
.leader-card img,
.resource-card img,
.gallery-grid img,
.intro-image img{
  box-shadow:0 18px 36px rgba(7,43,80,.12) !important;
}
.program-icon,
.stat-icon,
.value-icon,
.contact-icon,
.resource-icon,
.support-icon,
.payment-method-icon{
  box-shadow:0 14px 28px rgba(7,43,80,.12), inset 0 1px rgba(255,255,255,.96) !important;
}

/* More compact section stacks */
.grid,
.cards-grid,
.story-grid,
.project-grid,
.program-grid,
.team-grid,
.resource-grid,
.gallery-grid{
  gap:22px !important;
}
.prose > *:last-child,
.card > *:last-child,
.sidebar-card > *:last-child{margin-bottom:0}

/* Circular WhatsApp with glow */
.whatsapp-float{
  width:74px !important;
  height:74px !important;
  min-height:74px !important;
  padding:0 !important;
  justify-content:center !important;
  align-items:center !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#17b75c,#25D366 56%, #45e185) !important;
  box-shadow:
    0 0 0 10px rgba(37,211,102,.13),
    0 22px 46px rgba(8,103,48,.32),
    inset 0 1px rgba(255,255,255,.45) !important;
}
.whatsapp-float:before{
  inset:-11px !important;
  border-radius:50% !important;
  border:1px solid rgba(37,211,102,.34) !important;
  animation:mohiWhatsAppGlow 2.4s ease-out infinite !important;
}
.whatsapp-float:hover{transform:translateY(-5px) scale(1.04) !important}
.whatsapp-icon{
  width:56px !important;
  height:56px !important;
  flex:0 0 56px !important;
  background:rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.34),0 10px 22px rgba(0,0,0,.12) !important;
}
.whatsapp-icon svg{width:28px !important;height:28px !important}
.whatsapp-copy{
  position:absolute;
  right:2px;
  bottom:84px;
  width:max-content;
  max-width:180px;
  padding:8px 12px;
  border-radius:999px;
  background:#063f2b;
  color:#fff;
  box-shadow:0 14px 28px rgba(0,0,0,.22);
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .35s ease, visibility .35s ease, transform .35s ease;
}
.whatsapp-copy strong{display:block;font-size:.76rem;letter-spacing:.01em}
.whatsapp-float:hover .whatsapp-copy,
.whatsapp-float:focus .whatsapp-copy{opacity:1;visibility:visible;transform:none}
@keyframes mohiWhatsAppGlow{
  0%{transform:scale(.92);opacity:.7}
  70%{transform:scale(1.16);opacity:0}
  100%{transform:scale(1.16);opacity:0}
}
@media (max-width: 640px){
  .whatsapp-float{width:68px !important;height:68px !important;min-height:68px !important}
  .whatsapp-icon{width:50px !important;height:50px !important;flex-basis:50px !important}
  .whatsapp-copy{bottom:76px}
}

/* Admin pages: better favicon/logo feel through transparent image */
.admin-brand img,
.login-card img{object-fit:contain}
