/* ===========================
   Base
=========================== */
:root{
  --soil-900:#3a2415;
  --soil-800:#5c4033;
  --soil-700:#8b5e3c;
  --soil-600:#b07a50;
  --cream:#fdfcf8;
  --paper:#f4ede4;
  --ink:#333;

  /* Revenue donut colors */
  --rev-40:#4e8f3a;   /* Production Cost 40% */
  --rev-20a:#6b8e23;  /* BRC 20% */
  --rev-20b:#228b22;  /* GCC 20% */
  --rev-10a:#9acd32;  /* FPO 10% */
  --rev-10b:#5c4033;  /* Natural Capital 10% */
}

html,body{height:100%}
body{
  font-family:'Segoe UI',sans-serif;
  scroll-behavior:smooth;
  background:var(--cream);
  color:var(--ink);
}

/* Homepage full-page background (not the hero video) */
body.homepage{
  background:url("../images/homebg.png") center/cover fixed no-repeat;
  background-color:#f2eee6;
}

/* Let page background show through */
section.bg-light,.bg-light{background-color:transparent!important}
section{background:transparent}

/* Avoid navbar overlap on small screens */
@media (max-width:991.98px){ body{padding-top:70px} }

/* ===========================
   Navbar
=========================== */
.navbar{background:#fff!important}
.navbar-brand{font-weight:700;font-size:1.5rem;color:var(--soil-800)!important}
.navbar-nav .nav-link{color:var(--ink)!important;margin:0 10px;font-weight:500}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active{color:var(--soil-800)!important}

/* icon links */
.navbar-nav .nav-link img{transition:transform .3s ease,opacity .3s ease;height:22px;width:auto}
.navbar-nav .nav-link:hover img{transform:scale(1.1);opacity:.85}

/* ===========================
   Homepage HERO with background video
=========================== */
.hero{
  position:relative;height:100vh;display:flex;justify-content:center;align-items:center;
  text-align:center;color:#fff;overflow:hidden;background:none!important
}

.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:saturate(105%);pointer-events:none}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.48);z-index:1}
.hero-gradient{position:absolute;inset:auto 0 0 0;height:35%;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 100%);z-index:1}
.hero-content{position:relative;z-index:2;padding:0 12px;text-shadow:0 2px 16px rgba(0,0,0,.55)}
.hero h1{font-size:3.5rem;font-weight:800;margin:0}
.hero p{font-size:1.2rem;margin:8px 0 0}
@media (prefers-reduced-motion:reduce){
  .hero-video{display:block}
  .hero{background:url("../images/bg.jpg") center/cover no-repeat}
}

/* ===========================
   Buttons
=========================== */
.btn-soil{
  background:linear-gradient(135deg,var(--soil-800),var(--soil-700));
  color:#fff;border-radius:30px;padding:12px 28px;font-weight:600;transition:all .3s ease;
  box-shadow:0 5px 15px rgba(92,64,51,.3);border:none
}
.btn-soil:hover{
  transform:translateY(-3px) scale(1.05);
  background:linear-gradient(135deg,var(--soil-700),var(--soil-600));
  box-shadow:0 8px 20px rgba(92,64,51,.4)
}

/* ===========================
   Section Titles & Surfaces
=========================== */
.section-title{
  font-weight:700;color:var(--soil-800);text-align:center;margin-bottom:40px;
  display:inline-block;padding:6px 14px;border-radius:12px;background:rgba(253,252,248,.85);
  box-shadow:0 2px 10px rgba(0,0,0,.06)
}
.section-surface{
  background:rgba(253,252,248,.88);
  backdrop-filter:saturate(110%) blur(2px);
  border:1px solid rgba(92,64,51,.12);
  border-radius:16px;padding:24px;box-shadow:0 6px 24px rgba(0,0,0,.08)
}

/* Subtitle visibility booster */
.section-subtitle,#team p.text-center{
  max-width:900px;margin:8px auto 24px;color:#2b1a10;background:rgba(253,252,248,.92);
  padding:10px 16px;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.08);line-height:1.55;font-weight:500;
  text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.35)
}
@media (max-width:576px){
  .section-subtitle,#team p.text-center{padding:10px 12px;font-size:.95rem}
}

/* ===========================
   Stats
=========================== */
.stats{background:rgba(244,237,228,.85);padding:60px 20px;border-radius:20px;margin-top:40px;text-align:center}
.stat{font-size:2rem;font-weight:700;color:var(--soil-800)}
.stat p{margin-top:10px;font-size:1rem;color:#666}

/* ===========================
   Generic cards (site-wide)
=========================== */
.card{border:none;border-radius:15px;transition:transform .3s,box-shadow .3s;background:rgba(255,255,255,.92)}
.card:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:0 15px 30px rgba(0,0,0,.15)}
.card img{border-radius:15px 15px 0 0;height:220px;object-fit:cover}

/* ===========================
   Team (Founders) — Immersive 3D
=========================== */
#team{position:relative;isolation:isolate}
#team::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1200px 500px at 50% 0%,rgba(58,36,21,.15),transparent 60%),
    linear-gradient(to bottom,rgba(58,36,21,.12),rgba(58,36,21,0));
  z-index:-1;pointer-events:none
}
#team .container{perspective:1200px;perspective-origin:50% 40%}

.team-card{
  background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.1);
  transition:transform .3s;position:relative
}
.team-card:hover{transform:translateY(-8px)}
.team-card.tilt-card{
  transform-style:preserve-3d;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.88));
  border:1px solid rgba(92,64,51,.12);border-radius:24px;
  box-shadow:0 2px 8px rgba(0,0,0,.05),0 12px 28px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.65);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;will-change:transform
}
.team-card.tilt-card .shine{
  position:absolute;inset:0;background:radial-gradient(500px 400px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),rgba(255,255,255,.08) 35%,transparent 60%);
  opacity:0;transition:opacity .25s ease;border-radius:inherit;pointer-events:none
}
.team-card.tilt-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08),0 30px 60px rgba(0,0,0,.22);filter:saturate(1.02)}
.team-card.tilt-card:hover .shine{opacity:.9}

.team-info-area{position:relative;text-align:center;padding:20px}
.team-default-content{transition:opacity .3s ease}
.team-card:hover .team-default-content{opacity:0}
.team-hover-info{
  position:absolute;inset:0;padding:20px;background:rgba(92,64,51,.95);color:#fff;opacity:0;
  transition:opacity .3s ease;overflow-y:auto;border-radius:20px
}
.team-card:hover .team-hover-info{opacity:1}
.team-image-container{
  width:180px;height:180px;margin:0 auto 1rem;border-radius:50%;overflow:hidden;border:4px solid rgba(92,64,51,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.12)
}
.team-image{width:100%;height:100%;object-fit:contain;object-position:center}
.team-name{font-weight:700;color:var(--soil-800)}
.team-role{color:#666}
.team-links{display:flex;justify-content:center;gap:15px;padding:15px;background:var(--paper)}
.team-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:25px;font-weight:600;text-decoration:none;transition:background .3s,color .3s}
.btn-linkedin{background:#0077b5;color:#fff}.btn-email{background:var(--soil-700);color:#fff}
.btn-linkedin:hover,.btn-email:hover{opacity:.85}
#team .section-title{background:rgba(253,252,248,.92);border:1px solid rgba(92,64,51,.12);border-radius:18px;padding:10px 18px}
#team p.text-center{
  background:rgba(253,252,248,.86);display:inline-block;padding:10px 18px;border-radius:14px;
  border:1px solid rgba(92,64,51,.12);box-shadow:0 2px 10px rgba(0,0,0,.06)
}
/* Horizontal scroll for team */
.team-rail{
  display:flex;
  overflow-x:auto;
  gap:1.25rem;
  scroll-snap-type:x mandatory;
  padding: 6px 4px 14px;

  /* hide scrollbar cross-browser */
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;     /* Firefox */
}
.team-rail .team-card{
  min-width: 360px;        /* matches your current card layout */
  scroll-snap-align: start;
}
@media (max-width:576px){
  .team-rail .team-card{ min-width: 88vw; }
}

/* Chrome / Safari / WebKit */
.team-rail::-webkit-scrollbar {
  display: none;
}

/* =========================================================
   GREEN CHAKRA — page-scoped UI
========================================================= */

/* --- PAGE BACKGROUND (below the hero) --- */
body.green-chakra-page{
  background: url("../images/greenchakrabg2.png") center / cover fixed no-repeat;
  background-size: 2200px auto; /* adjust to control zoom */
  padding-top: 1px;
}
/* anchor seam gradient */
.gc-bg{ position: relative; }
/* Let the body background show through under sections */
.green-chakra-page main{ background: transparent !important; }

/* iOS Safari: avoid jumpiness from fixed attachments */
@supports (-webkit-overflow-scrolling: touch) {
  body.green-chakra-page { background-attachment: scroll; }
}

/* fade between hero and background */
.gc-bg::before {
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height: 40px;
  background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,0));
  pointer-events:none;
}

/* GC 3D cards */
.gc-3d-wrap{perspective:1200px;perspective-origin:50% 40%}
.gc-card{
  position:relative;border:1px solid rgba(92,64,51,.10);border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.90)),
             radial-gradient(120% 120% at 100% 0%,rgba(50,205,50,.06),transparent 40%);
  box-shadow:0 2px 6px rgba(0,0,0,.05),0 14px 24px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.60);
  transform-style:preserve-3d;will-change:transform,box-shadow,filter;
  transition:transform .28s ease,box-shadow .28s ease,filter .28s ease,border-color .28s ease
}
.gc-card:hover{
  transform:translateY(-8px) rotateX(3deg) rotateY(-2deg) scale(1.01);
  box-shadow:0 10px 22px rgba(0,0,0,.08),0 38px 60px rgba(0,0,0,.16);
  border-color:rgba(92,64,51,.18);filter:saturate(1.02)
}
.gc-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(550px 350px at 85% 0%,rgba(255,255,255,.28),transparent 55%);
  opacity:0;pointer-events:none;transition:opacity .28s ease
}
.gc-card:hover::after{opacity:.9}
.gc-card i{
  display:inline-grid;place-items:center;width:48px;height:48px;border-radius:12px;
  background:linear-gradient(180deg,rgba(50,205,50,.12),rgba(50,205,50,.06));
  color:#228b22;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px rgba(50,205,50,.12)
}

/* Glassy section surface on GC page */
.green-chakra-page .section-surface{
  background:linear-gradient(180deg,rgba(253,252,248,.92),rgba(253,252,248,.88));
  border:1px solid rgba(92,64,51,.12);border-radius:18px;
  box-shadow:0 3px 10px rgba(0,0,0,.05),0 24px 50px rgba(0,0,0,.10)
}

/* Premium tabbed titles (green gradient text) */
/* Make section headings red on Green Chakra page */
.green-chakra-page .section-title {
  color: #0d8313 !important;   /* a strong red */
  background: rgba(255,255,255,.9); /* optional for contrast */
  border: 1px solid rgba(0,0,0,.08);
}


/* Matte variant */
.green-chakra-page .matte-card{
  background:#f4f9f4;
  border:1px solid #d9e8d6;
  border-radius:12px;
  box-shadow:none;
  transition:transform .2s ease, background .3s ease, border-color .3s ease;
}
.green-chakra-page .matte-card:hover{
  background:#eaf6ea;
  transform:translateY(-4px);
  border-color:#c5dfc2;
}
.green-chakra-page .matte-card i{
  color:#2e7d32;background:#e2f3e1;border-radius:50%;padding:10px;
}

/* Comparison Table */
.gc-compare{
  width:100%;border-collapse:separate;border-spacing:0;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.92));
  border:1px solid rgba(92,64,51,.12);border-radius:18px;overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.10)
}
.gc-compare thead th{
  background:linear-gradient(180deg,#d79b3e,#bb7b23);color:#fff;font-weight:700;letter-spacing:.2px;
  border-bottom:0;padding:14px 16px;position:sticky;top:0;z-index:1
}
.gc-compare th:first-child,.gc-compare td:first-child{border-left:none}
.gc-compare th,.gc-compare td{border-left:1px solid rgba(0,0,0,.06);padding:14px 16px;vertical-align:top}
.gc-compare tbody tr:nth-child(odd){background:rgba(240,228,214,.35)}
.gc-compare tbody tr:hover{background:rgba(154,205,50,.10)}
.gc-compare .feature{font-weight:700;color:#51351f}

/* chips */
.chip{display:inline-block;font-size:.75rem;padding:5px 8px;border-radius:999px;line-height:1;border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 8px rgba(0,0,0,.06);margin-left:8px;vertical-align:middle}
.chip-green{background:#e8f7e8;color:#146b14}
.chip-gold{background:#fff3e0;color:#8a5b16}
.chip-ink{background:#eef2f3;color:#183b2a}
@media (max-width:767.98px){
  .rev-legend{grid-template-columns:1fr 1fr}
  .gc-compare th,.gc-compare td{padding:12px}
  .gc-compare thead th{font-size:.95rem}
}

/* ---------- Generic Sub-hero ---------- */
.sub-hero{
  height:50vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;
  position:relative;background-size:cover;background-position:center
}
.sub-hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}
.sub-hero .hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 16px}
.sub-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;margin:0;line-height:1.2}
.sub-hero h1::after{content:"";display:block;width:64px;height:3px;background:#32cd32;margin:10px auto 0;border-radius:2px}
.sub-hero p{
  font-size:clamp(1rem,2.4vw,1.125rem);
  background:rgba(0,0,0,.35);
  padding:8px 14px;border-radius:12px;backdrop-filter:blur(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  margin:0
}
.sub-hero .btn-soil{margin-top:2px}

/* Fallback banners for other pages */
.maati-hero{background:url("../images/maati-hero.jpg") center/cover no-repeat}
.impact-hero{background:url("../images/impact-hero.jpg") center/cover no-repeat}
.resources-hero{background:url("../images/resources-hero.jpg") center/cover no-repeat}

/* Page-specific accent buttons/titles */
.green-chakra-page .btn-soil{background:linear-gradient(135deg,#228b22,#6b8e23);color:#fff}
.green-chakra-page .btn-soil:hover{background:linear-gradient(135deg,#6b8e23,#9acd32)}
.maati-page .section-title{color:transparent;background:none;background-image:linear-gradient(135deg,#8b4513,#a0522d);-webkit-background-clip:text;background-clip:text}
.maati-page .btn-soil{background:linear-gradient(135deg,#8b4513,#a0522d);color:#fff}
.maati-page .btn-soil:hover{background:linear-gradient(135deg,#a0522d,#b5651d)}
.impact-page .section-title{color:transparent;background:none;background-image:linear-gradient(135deg,#daa520,#e2725b);-webkit-background-clip:text;background-clip:text}
.impact-page .btn-soil{background:linear-gradient(135deg,#daa520,#e2725b);color:#fff}
.impact-page .btn-soil:hover{background:linear-gradient(135deg,#e2725b,#f4a460)}
.resources-page .section-title{color:transparent;background:none;background-image:linear-gradient(135deg,#9acd32,#228b22);-webkit-background-clip:text;background-clip:text}
.resources-page .btn-soil{background:linear-gradient(135deg,#9acd32,#228b22);color:#fff}
.resources-page .btn-soil:hover{background:linear-gradient(135deg,#228b22,#6b8e23)}

/* ===========================
   Video Container (Mission)
=========================== */
.video-container{position:relative;overflow:hidden;border-radius:20px;box-shadow:0 10px 25px rgba(0,0,0,.2)}
.video-container video{width:100%;height:auto;display:block}

/* ===========================
   Success Stories
=========================== */
.story-card{position:relative;border-radius:15px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.1);transition:transform .4s ease,box-shadow .4s ease;cursor:pointer;background:rgba(255,255,255,.92)}
.story-card img{width:100%;height:220px;object-fit:cover;transition:transform .4s ease}
.story-content{padding:15px;text-align:center}
.story-hover{position:absolute;inset:0;background:rgba(92,64,51,.9);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;opacity:0;transition:opacity .4s ease}
.story-card:hover{transform:scale(1.05);box-shadow:0 15px 30px rgba(0,0,0,.2)}
.story-card:hover img{transform:scale(1.2)}
.story-card:hover .story-hover{opacity:1}

/* ===========================
   Modal
=========================== */
.modal-content{border-radius:15px;overflow:hidden;border:none}
.modal-body{padding:25px;background:var(--cream);color:var(--ink)}
.modal-body h4{color:var(--soil-800);font-weight:700;margin-bottom:15px}
.story-nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);background:linear-gradient(135deg,var(--soil-800),var(--soil-700));
  border:none;color:#fff;font-size:1.8rem;width:50px;height:50px;border-radius:50%;box-shadow:0 5px 15px rgba(0,0,0,.3);
  display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:1056
}
.story-nav-btn:hover{
  background:linear-gradient(135deg,var(--soil-700),var(--soil-600));
  transform:translateY(-50%) scale(1.1)
}
#prevStory{left:15px}#nextStory{right:15px}

/* ===========================
   Contact & Footer
=========================== */
#contact{background:var(--soil-800);color:#fff;padding:60px 20px}
#contact input,#contact textarea{border-radius:10px;border:none;padding:12px}
#contact button{background:linear-gradient(135deg,var(--soil-700),var(--soil-600));border:none;font-weight:600;color:#fff;border-radius:30px;padding:10px 25px}
#contact button:hover{background:#a06845}
footer{background:var(--soil-900);color:#fff;text-align:center;padding:15px}

/* ===========================
   Scroll Animations
=========================== */
.fade-in{opacity:0;transform:translateY(20px);transition:all .8s ease-out}
.fade-in.show{opacity:1;transform:translateY(0)}

/* =========================================================
   GREEN CHAKRA HERO — stronger, cinematic
========================================================= */
.green-chakra-page .sub-hero{height:100vh}
.green-chakra-page .sub-hero::before{background:rgba(0,0,0,.55)!important}
.green-chakra-page .sub-hero .hero-content{text-shadow:0 6px 28px rgba(0,0,0,.60);gap:10px}
.green-chakra-page .sub-hero h1{font-size:clamp(2.8rem,6vw,4rem);font-weight:800;letter-spacing:.5px}
.green-chakra-page .sub-hero h1::after{width:90px;height:4px;background:#7ed957;margin-top:14px}
.green-chakra-page .sub-hero p{background:transparent!important;padding:0!important;text-shadow:0 2px 10px rgba(0,0,0,.6);font-weight:500;margin:0}
.green-chakra-page .sub-hero .btn-soil{box-shadow:0 10px 24px rgba(0,0,0,.35)}

/* ---------- Goal/target cards in Mission ---------- */
.green-chakra-page .goal-card{
  position:relative;padding-top:32px;border:1px dashed rgba(34,139,34,.25);
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.92)),
             radial-gradient(120% 120% at 100% 0%,rgba(126,217,87,.10),transparent 45%);
}
.green-chakra-page .goal-card:hover{
  border-color:rgba(34,139,34,.45);
  box-shadow:0 10px 22px rgba(0,0,0,.08),0 38px 60px rgba(0,0,0,.14)
}
.green-chakra-page .goal-badge{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:.2px;color:#0d3f0d;
  background:linear-gradient(180deg,#bff0bf,#a6e6a6);border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 14px rgba(50,205,50,.18),inset 0 1px 0 rgba(255,255,255,.6)
}
.green-chakra-page .goal-card i{
  width:52px;height:52px;border-radius:14px;background:linear-gradient(180deg,rgba(50,205,50,.14),rgba(50,205,50,.08));
  color:#228b22;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 8px 18px rgba(50,205,50,.16)
}
.green-chakra-page .goal-sub{color:#5b6a5b;letter-spacing:.1px}

/* ========== Revenue Split (layout + card) ========== */
.rev-split{padding:20px}
.rev-copy{font-size:0.98rem;color:#314031}
.rev-points{margin:0 0 6px 1rem}
.rev-points li{margin:.25rem 0}

.rev-legend{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;margin-top:12px;font-size:.95rem
}
.rev-tag{
  display:flex;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:10px 12px;
  border:1px solid rgba(0,0,0,.06);box-shadow:0 4px 12px rgba(0,0,0,.06)
}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.d-40{background:var(--rev-40)} .d-20a{background:var(--rev-20a)}
.d-20b{background:var(--rev-20b)} .d-10a{background:var(--rev-10a)} .d-10b{background:var(--rev-10b)}

.rev-card{
  background:linear-gradient(180deg,#ffffff, #fafaf8);
  border:1px solid rgba(92,64,51,.10);
  border-radius:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.08),0 26px 48px rgba(0,0,0,.10);
  padding:10px;display:grid;place-items:center;min-height:340px;
  will-change:transform,box-shadow;
}

/* ========== Interactive SVG Donut (hover tips) ========== */
.rev-donut-svg{position:relative;width:100%;display:grid;place-items:center;padding:8px 0}
.rev-donut-svg .donut{width:min(100%,340px);height:auto;display:block}
.rev-donut-svg .ring{transition:stroke-width .2s ease,filter .2s ease;filter:drop-shadow(0 2px 4px rgba(0,0,0,.12));cursor:pointer}
.rev-donut-svg .slice:hover .ring{stroke-width:36;filter:drop-shadow(0 6px 12px rgba(0,0,0,.18))}
.rev-donut-svg .bubble{opacity:0;transform-origin:center;transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.rev-donut-svg .slice:hover .bubble{opacity:1;transform:translate(0,0) scale(1.02)}
.rev-donut-svg text{font-size:12px;fill:#223;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;letter-spacing:.2px}
.rev-donut-svg .rev-center{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none
}
.rev-donut-svg .rev-center .big{font-size:1.6rem;font-weight:800;color:#2b2b2b;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.rev-donut-svg .rev-center .small{font-size:.85rem;color:#5b6a5b;letter-spacing:.2px}

/* ===========================
   India Map
=========================== */
.india-map{
  display:flex;justify-content:center;align-items:center;margin-top:2rem
}
.india-map-img{
  max-width:720px;width:100%;height:auto;border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  transition:transform .3s ease, box-shadow .3s ease
}
.india-map-img:hover{transform:scale(1.03);box-shadow:0 12px 28px rgba(0,0,0,.22)}

/* ===========================
   How It Works — Horizontal rail (Green Chakra only)
=========================== */
.green-chakra-page .how-horizontal{
  position: relative;
  padding: 18px 0 8px;
  overflow: hidden;
}
.green-chakra-page .how-horizontal .flow-fade{
  position:absolute; top:0; bottom:0; width:56px; z-index:2; pointer-events:none;
  background: linear-gradient(to right, rgba(253,252,248,1), rgba(253,252,248,0));
}
.green-chakra-page .how-horizontal .flow-fade-right{
  right:0; background:linear-gradient(to left, rgba(253,252,248,1), rgba(253,252,248,0));
}
.green-chakra-page .how-horizontal .flow-fade-left{ left:0; }
.green-chakra-page .flow-rail{
  position: relative;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 28px 24px 24px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.green-chakra-page .flow-rail::before{
  content:"";
  position:absolute; left:0; right:0;
  top: 72px;
  height:3px; border-radius:2px;
  background: linear-gradient(90deg,#cfe9cf,#9ad09a,#cfe9cf);
  opacity:.75;
}
.green-chakra-page .step-card{
  min-width: 320px;
  scroll-snap-align: center;
  position: relative;
  padding: 18px 16px 16px;
}
.green-chakra-page .step-card .step-num{
  position:absolute; top:-10px; left:18px;
  width: 28px; height:28px; border-radius:50%;
  font-weight:700; font-size:.9rem; line-height:28px; text-align:center;
  color:#0f3a0f; background:#c8efc8; border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 4px 10px rgba(50,205,50,.18), inset 0 1px 0 rgba(255,255,255,.6);
  z-index:1;
}
.green-chakra-page .step-card .step-icon{
  display:inline-grid; place-items:center;
  width:44px; height:44px; border-radius:12px;
  background:#e2f3e1; color:#2e7d32;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  margin-bottom:10px;
  position: relative; z-index:1;
}
.green-chakra-page .step-card .step-icon i{ font-size:20px; }
.green-chakra-page .step-card h6{ font-weight:700; color:#234; margin: 0 0 6px; }
.green-chakra-page .step-card p{ color:#3a4b3a; margin:0; line-height:1.45; }
@media (max-width: 576px){
  .green-chakra-page .step-card{ min-width: 280px; }
  .green-chakra-page .flow-rail{ padding-left:16px; padding-right:16px; }
}

/* ---------- Problems (GC page; immersive / danger) ---------- */
.green-chakra-page .problem-title{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(224,49,49,.18);
  box-shadow: 0 8px 26px rgba(224,49,49,.12);
}
.green-chakra-page .problem-grid{ perspective: 1200px; }
.green-chakra-page .problem-card{
  position: relative;
  border-radius: 16px;
  padding: 18px 16px 16px 16px;
  border: 1px solid rgba(224,49,49,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88)),
    radial-gradient(120% 100% at 110% -10%, rgba(224,49,49,.10), transparent 60%);
  box-shadow: 0 6px 16px rgba(0,0,0,.08), 0 18px 42px rgba(224,49,49,.18);
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
  overflow: hidden;
  animation: problemPulse 4s ease-in-out infinite;
}
.green-chakra-page .problem-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:10px;
  background: repeating-linear-gradient(135deg, rgba(224,49,49,.36) 0 12px, transparent 12px 24px);
  pointer-events:none;
}
.green-chakra-page .problem-card::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 220px at var(--mx,70%) var(--my,0%), rgba(255,255,255,.35), transparent 45%);
  opacity:0; transition: opacity .25s ease; pointer-events:none;
}
.green-chakra-page .problem-card:hover{
  transform: translateY(-8px) rotateX(3deg) rotateY(-2deg);
  box-shadow: 0 12px 26px rgba(0,0,0,.08), 0 38px 72px rgba(224,49,49,.22);
  border-color: rgba(224,49,49,.32);
  filter: saturate(1.03);
}
.green-chakra-page .problem-card:hover::after{ opacity:.9; }
@keyframes problemPulse{
  0%,100%{ box-shadow: 0 6px 16px rgba(0,0,0,.08), 0 18px 42px rgba(224,49,49,.18); }
  50%    { box-shadow: 0 8px 18px rgba(0,0,0,.10), 0 28px 64px rgba(224,49,49,.22); }
}
.green-chakra-page .problem-badge{
  position:absolute; top:10px; right:10px;
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; font-size:.75rem; font-weight:800; letter-spacing:.2px;
  color:#fff; background: linear-gradient(180deg,#e03131,#b91c1c);
  border-radius:999px;
  box-shadow: 0 6px 16px rgba(224,49,49,.35), inset 0 1px 0 rgba(255,255,255,.4);
  transform: translateZ(30px);
}
.green-chakra-page .problem-badge:hover{ animation: shake .4s linear; }
@keyframes shake{
  0%,100%{ transform: translateZ(30px) translateX(0); }
  25%    { transform: translateZ(30px) translateX(-2px); }
  50%    { transform: translateZ(30px) translateX(2px); }
  75%    { transform: translateZ(30px) translateX(-1px); }
}
.green-chakra-page .problem-icon{
  display:grid; place-items:center;
  width:52px; height:52px; border-radius:14px;
  background: linear-gradient(180deg, rgba(224,49,49,.14), rgba(224,49,49,.10));
  color:#b91c1c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 8px 18px rgba(224,49,49,.16);
  margin-bottom:10px; transform: translateZ(20px);
}
.green-chakra-page .problem-head{ margin:2px 0 6px; font-weight:800; color:#3a2415; }
.green-chakra-page .problem-copy{ color:#4b2f2a; margin:0; line-height:1.45; }
.green-chakra-page .problem-card{ --mx:70%; --my:0%; }

/* =========================================================
   MAATI MANGE MORE (MMM) — page-scoped styles
========================================================= */

/* Page backdrop (subtle dotted paper) */
body.maati-page{
  background:
    radial-gradient(4px 4px at 25% 25%, rgba(0,0,0,.03) 12%, transparent 42%) 0 0/28px 28px,
    radial-gradient(4px 4px at 75% 75%, rgba(0,0,0,.02) 14%, transparent 44%) 0 0/28px 28px,
    var(--cream);
}

/* HERO: framed with an image-textured border */
.maati-page .mmm-hero-frame{
  position: relative;
  height: 100vh; min-height: 440px;
  margin: 18px clamp(8px, 2vw, 22px);
  border-radius: 22px;
  padding: 12px; /* frame thickness */
  box-shadow: 0 16px 36px rgba(0,0,0,.25);
  isolation: isolate;
}
.maati-page .mmm-hero-frame::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: url("../images/mmmbg.png") center/cover no-repeat;
  padding:12px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}
body {
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  color:var(--ink);
  line-height:1.6;
  /* full-page background */
  background: 
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)),
    url("images/mmmbg2.png") center/cover no-repeat fixed;
}

/* Actual hero */
.maati-page .mmm-hero{
  position: relative;
  height: 70vh; min-height: 440px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; color:#fff;
  border-radius: 18px; overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 100%),
    url("../images/mmmbg2.png");
  background-size: cover, cover;
  background-position: center, center;
}
.maati-page .mmm-hero h1{
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  font-weight: 800; margin: 0 0 .75rem;
  text-shadow: 0 3px 18px rgba(0,0,0,.45);
}
.maati-page .mmm-hero p{
  font-size: clamp(.95rem, 2.2vw, 1.15rem);
  margin: 0 0 1.2rem;
  display: inline-block;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.28);
  padding: .55rem .9rem; border-radius: 999px;
  backdrop-filter: blur(2px);
}
.maati-page .mmm-hero a{
  background: linear-gradient(135deg,#a94d1d,#7e2f0d);
  color:#fff; text-decoration:none; font-weight:700;
  padding:.7rem 1.4rem; border-radius:10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.maati-page .mmm-hero a:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.42);
  filter: saturate(1.05);
}

/* Section heading style (MMM) */
.maati-page section .section-title,
.maati-page h2.section-title {
  color: var(--soil-800);
  background: rgba(253,252,248,.92);
  border: 1px solid rgba(92,64,51,.12);
  border-radius: 14px;
  padding: 8px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Scorecard layout */
.maati-page .scorecard{
  display: flex; align-items: center; gap: 22px;
  flex-wrap: wrap;
}
.maati-page .scorecard img{
  max-width: 280px; width: 100%;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Lists / bullets — scope to main to avoid nav/footer */
.maati-page main ul{ list-style: none; padding-left: 0; }
.maati-page main ul li{
  margin: .55rem 0; padding-left: 1.35rem; position: relative;
}
.maati-page main ul li::before{
  content:"🌱"; position: absolute; left:0; top: 0.1rem;
}
.maati-page main .engagement li::before{ content:"✨"; }

/* Problems (MMM reuse; fully scoped) */
.maati-page .problem-title{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(224,49,49,.18);
  box-shadow: 0 8px 26px rgba(224,49,49,.12);
}
.maati-page .problem-grid{ perspective: 1200px; }
.maati-page .problem-card{
  position: relative; border-radius: 16px;
  padding: 18px 16px 16px;
  border: 1px solid rgba(224,49,49,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88)),
    radial-gradient(120% 100% at 110% -10%, rgba(224,49,49,.10), transparent 60%);
  box-shadow: 0 6px 16px rgba(0,0,0,.08), 0 18px 42px rgba(224,49,49,.18);
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
  overflow: hidden;
  animation: mmmProblemPulse 4s ease-in-out infinite;
}
.maati-page .problem-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:10px;
  background: repeating-linear-gradient(135deg, rgba(224,49,49,.36) 0 12px, transparent 12px 24px);
  pointer-events:none;
}
.maati-page .problem-card::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 220px at var(--mx,70%) var(--my,0%), rgba(255,255,255,.35), transparent 45%);
  opacity:0; transition: opacity .25s ease; pointer-events:none;
}
.maati-page .problem-card:hover{
  transform: translateY(-8px) rotateX(3deg) rotateY(-2deg);
  box-shadow: 0 12px 26px rgba(0,0,0,.08), 0 38px 72px rgba(224,49,49,.22);
  border-color: rgba(224,49,49,.32);
  filter: saturate(1.03);
}
.maati-page .problem-card:hover::after{ opacity:.9; }
@keyframes mmmProblemPulse{
  0%,100%{ box-shadow: 0 6px 16px rgba(0,0,0,.08), 0 18px 42px rgba(224,49,49,.18); }
  50%    { box-shadow: 0 8px 18px rgba(0,0,0,.10), 0 28px 64px rgba(224,49,49,.22); }
}
.maati-page .problem-badge{
  position:absolute; top:10px; right:10px;
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; font-size:.75rem; font-weight:800; letter-spacing:.2px;
  color:#fff; background: linear-gradient(180deg,#e03131,#b91c1c);
  border-radius:999px;
  box-shadow: 0 6px 16px rgba(224,49,49,.35), inset 0 1px 0 rgba(255,255,255,.4);
  transform: translateZ(30px);
}
.maati-page .problem-badge:hover{ animation: mmmShake .4s linear; }
@keyframes mmmShake{
  0%,100%{ transform: translateZ(30px) translateX(0); }
  25%    { transform: translateZ(30px) translateX(-2px); }
  50%    { transform: translateZ(30px) translateX(2px); }
  75%    { transform: translateZ(30px) translateX(-1px); }
}
.maati-page .problem-icon{
  display:grid; place-items:center;
  width:52px; height:52px; border-radius:14px;
  background: linear-gradient(180deg, rgba(224,49,49,.14), rgba(224,49,49,.10));
  color:#b91c1c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 8px 18px rgba(224,49,49,.16);
  margin-bottom:10px; transform: translateZ(20px);
}
.maati-page .problem-head{ margin:2px 0 6px; font-weight:800; color:#3a2415; }
.maati-page .problem-copy{ color:#4b2f2a; margin:0; line-height:1.45; }
.maati-page .problem-card{ --mx:70%; --my:0%; }

/* ---- Utility for smaller taglines (GC + MMM can reuse) ---- */
.small-tagline{ font-size: .95rem !important; }

/* ===========================
   Reduced-motion respect
=========================== */
@media (prefers-reduced-motion: reduce){
  .problem-card,
  .green-chakra-page .problem-card,
  .maati-page .problem-card{ animation: none !important; }
}
/* Partners: marquee-style, continuous auto-scroll */
.partners-viewport{
  overflow: hidden;
  position: relative;
  padding: 8px 0;
  /* Optional soft separator shadow */
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.partners-track{
  display: inline-flex;
  gap: 18px;
  align-items: stretch;
  animation: partnersMarquee 30s linear infinite;
  will-change: transform;
}
#partners:hover .partners-track{ animation-play-state: paused; }  /* pause on hover */

@keyframes partnersMarquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* track is duplicated, so 50% is one full loop */
}

.partner-card{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 320px;     /* card width */
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  cursor: pointer;
  text-align: left;
}
.partner-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0,0,0,.14);
  filter: saturate(1.02);
}
.partner-card img {
  width: 100%;
  height: 60px;              /* fix height for uniformity */
  object-fit: contain;       /* keeps aspect ratio */
  object-position: center;
  background: #fff;          /* white background so transparent logos look clean */
  padding: 6px 12px;         /* add breathing space around logos */
  border-radius: 10px;       /* keeps rounded corners */
}

.partner-badge{
  margin-left: auto; /* push badge to right */
  font-size: .95rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #2d4fd3;
  white-space: nowrap;
  border: 1px solid rgba(45,79,211,.12);
}
.partner-badge-impl{
  background: #e8f7e8;
  color: #146b14;
  border-color: rgba(20,107,20,.12);
}
.partner-badge-comm{
  background: #fff3e0;
  color: #8a5b16;
  border-color: rgba(138,91,22,.12);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .partners-track{ animation: none; }
}
/* Partners ticker is JS-driven */
#partners .partners-track { animation: none !important; will-change: transform; }
#partners .partners-viewport { overflow: hidden; }


/* Hide any native scrollbar that might appear on small screens */
.partners-viewport{ -ms-overflow-style: none; scrollbar-width: none; }
.partners-viewport::-webkit-scrollbar{ display:none; }