/* ============================================================================
   Zentallio — mobile design system  (m.zentallio.com)
   Mobile-first. Har rule single-column phone ke liye likha gaya hai.
   Desktop ki koi media query yahan nahi -- ye file sirf mobile serve karti hai.
   ========================================================================= */

/* ---------- 1. Tokens (desktop site se same brand) ---------------------- */
:root{
  --bg:#05080F;
  --bg2:#0A1020;
  --surface:rgba(255,255,255,.035);
  --surface2:rgba(255,255,255,.06);
  --ink:#EEF1F8;
  --fg2:#AEB9CB;
  --fg3:#6E798F;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.15);

  --teal:#15F2F2;
  --violet:#9B7BFF;
  --amber:#E5A24B;
  --pink:#ff2d95;

  /* har page apna accent set kar sakta hai: <body data-accent="violet"> */
  --ac:var(--teal);
  --acr:21,242,242;

  --sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* Ek hi jagah se gutter control -- kisi bhi section mein alag padding nahi */
  --gut:18px;
  --rad:16px;
  --rad-sm:11px;
  --tap:46px;              /* minimum touch target */
  --head-h:60px;

  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
body[data-accent="violet"]{--ac:var(--violet);--acr:155,123,255}
body[data-accent="amber"]{--ac:var(--amber);--acr:229,162,75}
body[data-accent="pink"]{--ac:var(--pink);--acr:255,45,149}

/* ---------- 2. Overflow ko structurally namumkin banao ------------------ */
/* min-width:0 flex/grid children ka sab se bada overflow sabab hai.
   Yahan globally 0 kar diya -- phir koi lamba word ya table baahar nahi ja sakta. */
*,*::before,*::after{box-sizing:border-box;min-width:0}

html{
  -webkit-text-size-adjust:100%;      /* iOS landscape par font jump rokta hai */
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
html,body{
  max-width:100%;
  overflow-x:clip;                    /* clip -> position:sticky zinda rehta hai */
}
@supports not (overflow:clip){ html,body{overflow-x:hidden} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;                     /* 16px se kam -> iOS input par zoom karta hai */
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
  padding-left:var(--safe-l);
  padding-right:var(--safe-r);
}

/* Koi bhi replaced element container se baahar nahi nikal sakta */
img,svg,video,canvas,iframe,object,embed{
  max-width:100%;
  height:auto;
  display:block;
}
/* Lamba text, URL, email -- sab wrap hoga, kabhi horizontal scroll nahi */
h1,h2,h3,h4,h5,h6,p,li,dt,dd,td,th,figcaption,blockquote,a,span,label{
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}
pre,code{
  font-family:var(--mono);
  white-space:pre-wrap;
  word-break:break-word;
}
/* Table akela element hai jise scroll karne dena theek hai -- lekin wrapper ke andar */
.m-tablewrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:var(--rad-sm);
  margin:18px 0;
}
.m-tablewrap table{border-collapse:collapse;width:100%;font-size:.86rem}
.m-tablewrap th,.m-tablewrap td{
  padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);white-space:normal;
}
.m-tablewrap th{color:var(--fg3);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.m-tablewrap tr:last-child td{border-bottom:0}

/* ---------- 3. Typography scale (fluid, phone range mein clamp) --------- */
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.18;font-weight:600;letter-spacing:-.01em}
h1{font-family:var(--serif);font-size:clamp(1.85rem,8.2vw,2.6rem);line-height:1.1;font-weight:400}
h2{font-family:var(--serif);font-size:clamp(1.45rem,6vw,1.95rem);line-height:1.16;font-weight:400}
h3{font-size:clamp(1.08rem,4.4vw,1.28rem)}
h4{font-size:1rem}
p{margin:0 0 1em;color:var(--fg2)}
p:last-child{margin-bottom:0}
a{color:var(--ac);text-decoration:none}
strong,b{color:var(--ink);font-weight:600}
ul,ol{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.5em;color:var(--fg2)}
li::marker{color:var(--ac)}
hr{border:0;border-top:1px solid var(--line);margin:30px 0}

/* Eyebrow / kicker -- ye section ka topic batata hai, is liye isko
   prominent rakha hai; iske baad wali heading aur paragraph ek step chhote. */
.m-kick{
  font-family:var(--mono);
  font-size:clamp(.8rem,3.5vw,.92rem);
  font-weight:600;
  line-height:1.45;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ac);
  margin:0 0 14px;
  display:block;
}
.m-kick + h2{font-size:clamp(1.28rem,5.3vw,1.68rem)}
.m-kick + h2 + p,
.m-kick + h2 + .m-lede,
.m-kick + h2 + .m-muted{font-size:.92rem;line-height:1.6}

/* ---------- 4. Layout primitives ---------------------------------------- */
.m-wrap{width:100%;padding-inline:var(--gut)}
.m-sec{
  width:100%;
  padding:clamp(38px,9vw,58px) var(--gut);
  border-top:1px solid var(--line);
  position:relative;
}
.m-sec:first-of-type{border-top:0}
.m-sec > *:last-child{margin-bottom:0}

/* Stack -- har child ke beech consistent gap, koi margin-collapse surprise nahi */
.m-stack{display:flex;flex-direction:column;gap:14px}

/* Grid: phone par hamesha 1 ya 2 column. auto-fit se overflow nahi hota
   kyunki minmax ka min 0 hai. */
.m-grid{display:grid;grid-template-columns:1fr;gap:12px}
.m-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

/* ---------- 5. Header + menu -------------------------------------------- */
.m-head{
  position:sticky;top:0;z-index:70;
  height:var(--head-h);
  padding-top:var(--safe-t);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gut);
  background:rgba(5,8,15,.82);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}
/* Brand ka wahi treatment jo home page par hai -- serif + chalti hui
   shine gradient. (desktop: .znav-brand / tools/unify_nav.py) */
.m-brand{
  font-family:var(--serif);
  font-weight:500;font-size:1.3rem;letter-spacing:-.01em;
  display:inline-flex;align-items:center;min-height:var(--tap);line-height:1;
  background:linear-gradient(100deg,#fff 0%,#fff 42%,#15F2F2 49%,#9B7BFF 53%,#fff 60%,#fff 100%);
  background-size:280% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:m-brandShine 7s linear infinite;
}
@keyframes m-brandShine{
  0%{background-position:130% center}
  100%{background-position:-30% center}
}
/* Circular bordered button -- home page ke .menu-btn jaisa */
.m-burger{
  appearance:none;padding:0;cursor:pointer;
  width:44px;height:44px;flex:0 0 44px;
  border:1px solid var(--line2);border-radius:50%;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  transition:border-color .25s,background .25s;
  -webkit-tap-highlight-color:transparent;
}
.m-burger span{display:block;width:16px;height:1.5px;background:var(--ink);
  transition:transform .3s,opacity .3s}
body.menu-open .m-burger{border-color:rgba(255,255,255,.4)}
body.menu-open .m-burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.menu-open .m-burger span:nth-child(2){opacity:0}
body.menu-open .m-burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.m-menu{
  position:fixed;inset:0;z-index:69;
  background:var(--bg);
  padding:calc(var(--head-h) + var(--safe-t) + 18px) var(--gut) calc(26px + var(--safe-b));
  display:flex;flex-direction:column;
  overflow-y:auto;
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform .38s cubic-bezier(.4,0,.2,1),visibility .38s;
}
body.menu-open .m-menu{transform:translateY(0);visibility:visible}
body.menu-open{overflow:hidden}
/* Overlay links: home page ke .menu-nav jaisa -- bade serif links,
   mono number, aur sector ka rang wala dot. */
.m-menu-nav{display:flex;flex-direction:column;justify-content:center;flex:1}
.m-menu a.m-menu-item{
  display:flex;align-items:center;gap:16px;
  min-height:var(--tap);
  padding:clamp(11px,2.4vw,18px) 0;
  border-bottom:1px solid var(--line);
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.9rem,9vw,2.6rem);letter-spacing:-.02em;
  color:var(--fg2);line-height:1.15;
  transition:color .3s,padding-left .3s;
}
.m-menu a.m-menu-item.m-cur{color:#fff}
.m-menu a.m-menu-item i{
  font-family:var(--mono);font-style:normal;font-size:.72rem;
  color:var(--fg3);letter-spacing:.1em;flex:0 0 auto;
}
.m-menu a.m-menu-item.m-cur i{color:var(--ink)}
.m-menu a.m-menu-item span{flex:1 1 auto;min-width:0}
.m-menu a.m-menu-item b{width:10px;height:10px;border-radius:50%;flex:0 0 10px;margin-left:auto}
.m-menu a.m-menu-item .m-d-fb{background:var(--teal);box-shadow:0 0 12px var(--teal)}
.m-menu a.m-menu-item .m-d-fa{background:var(--violet);box-shadow:0 0 12px var(--violet)}
.m-menu a.m-menu-item .m-d-ai{background:var(--pink);box-shadow:0 0 12px var(--pink)}
.m-menu-foot{
  margin-top:clamp(24px,5vh,44px);padding-top:0;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  color:var(--fg3);text-transform:uppercase;
}

/* ---------- 6. Hero ------------------------------------------------------ */
.m-hero{
  position:relative;
  padding:clamp(36px,10vw,60px) var(--gut) clamp(34px,9vw,52px);
  overflow:hidden;
}
.m-hero::before{
  content:'';position:absolute;top:-34%;left:50%;
  width:min(150vw,560px);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(var(--acr),.17),transparent 66%);
  pointer-events:none;z-index:0;
}
.m-hero > *{position:relative;z-index:1}
.m-hero h1{margin-bottom:16px}
.m-hero-sub{font-size:1.02rem;color:var(--fg2);line-height:1.62;margin-bottom:22px}

/* Hero colour shades (F&B / Fashion): pink "AI" like desktop .zh-ai, accent-tinted "live". */
.m-hero .m-ai{
  background:linear-gradient(96deg,var(--pink),#ff8fc6);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.m-hero-sub .m-hl{color:var(--ac);font-weight:600}

/* Scale strip (10 sectors · 80+ formats …): 2×2 tiles, gradient numbers. */
.m-scale{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.m-scale-item{
  padding:16px 16px 14px;border:1px solid var(--line2);border-radius:16px;
  background:linear-gradient(160deg,rgba(var(--acr),.09),transparent 62%),var(--surface);
}
.m-scale-item b{
  display:block;font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1;letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--teal),var(--violet));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  padding-bottom:.06em;
}
.m-scale-item span{
  display:block;margin-top:8px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);
}
.m-scale-item.is-agent{border-color:rgba(var(--acr),.5);box-shadow:0 0 26px -6px rgba(var(--acr),.35)}
.m-scale-item.is-agent span{color:var(--ac)}

.m-scroll-cue{
  display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:24px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg3);
}
.m-scroll-cue i{width:1px;height:28px;background:linear-gradient(to bottom,transparent,rgba(var(--acr),.8));
  animation:m-cue 1.8s ease-in-out infinite;transform-origin:top}
@keyframes m-cue{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.m-scroll-cue i{animation:none}}

/* F&B page bits: KPI tiles, Iris note, Ask bubble, sector accordion details. */
.m-scale--kpi{margin:18px 0 14px}
.m-scale--kpi .m-scale-item b{font-size:1.6rem}
.m-iris-note{
  padding:12px 14px;border-left:2px solid var(--ac);border-radius:0 12px 12px 0;
  background:rgba(var(--acr),.07);font-size:.9rem;
}
.m-iris-note strong{color:var(--ac)}
.m-iris-note b{color:var(--ink);font-weight:600}
.m-ask{
  margin:16px 0 14px;padding:14px 16px;border:1px solid var(--line2);border-radius:16px 16px 16px 4px;
  background:var(--surface);
}
.m-ask-who{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);margin-bottom:6px}
.m-ask p{margin:0;color:var(--ink);font-size:.98rem}
.m-fmt{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ac);margin-bottom:8px}
.m-proof{margin-top:10px;font-size:.84rem;color:var(--fg3)}
.m-proof b{
  font-family:var(--serif);font-weight:400;font-size:1.3rem;margin-right:6px;
  background:linear-gradient(100deg,var(--teal),var(--violet));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}

/* Home hero -- desktop jaisa: centred title, orb, sub, dot-links. Tight spacing. */
.m-hero-home{text-align:center;padding:clamp(26px,7vw,40px) var(--gut) clamp(26px,7vw,36px)}
.m-hero-home::before{top:18%;width:min(120vw,460px);
  background:radial-gradient(circle,rgba(255,45,149,.10),rgba(155,123,255,.05) 40%,transparent 66%)}
.m-htitle{font-size:clamp(1.6rem,8.4vw,2.6rem);line-height:1.04;letter-spacing:-.025em;margin:0}
.m-htitle .g{font-style:italic;white-space:nowrap;
  background:linear-gradient(100deg,var(--teal) 0%,#7fe6ff 22%,var(--pink) 52%,#c9a3ff 78%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% auto;animation:m-flow 9s linear infinite}
@keyframes m-flow{to{background-position:200% center}}
.m-horb{position:relative;height:clamp(170px,50vw,210px);margin:6px calc(-1 * var(--gut)) 4px}
.m-horb canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.m-hero-home .m-hero-sub{max-width:36ch;margin:0 auto 18px}
.m-hero-sub strong{color:var(--ink);font-weight:500}
.m-hcta{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px;margin:0 auto}
.m-lk{--ccr:21,242,242;--cc:var(--teal);position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:0 7px 0 24px;
  border-radius:999px;border:1.5px solid rgba(var(--ccr),.75);background:rgba(var(--ccr),.06);color:var(--ink);
  font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:-.005em;
  -webkit-tap-highlight-color:transparent;transition:transform .15s ease,background .2s,border-color .2s}
.m-lk.fa{--ccr:155,123,255;--cc:var(--violet)}
/* halki rangeen shade jo button ke andar aage peeche behti rehti hai */
.m-lk::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--ccr),0) 0%,rgba(var(--ccr),.22) 50%,rgba(var(--ccr),0) 100%);
  background-size:200% 100%;animation:m-lk-shade 4s ease-in-out infinite alternate}
.m-lk.fa::before{animation-delay:-2s}
@keyframes m-lk-shade{from{background-position:100% 0}to{background-position:-100% 0}}
.m-lk .ar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:1.05rem;
  border:1.5px solid rgba(var(--ccr),.75);background:rgba(var(--ccr),.12);color:var(--cc);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,color .2s}
.m-lk:active{transform:scale(.97);background:rgba(var(--ccr),.16);border-color:var(--cc)}
.m-lk:active .ar{transform:translateX(4px);background:var(--cc);color:#05080F}
@media (prefers-reduced-motion:reduce){.m-lk::before{animation:none}}
@media (prefers-reduced-motion:reduce){.m-htitle .g{animation:none}}

/* ---------- 7. Buttons --------------------------------------------------- */
.m-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;
  /* 44px accessibility ki farsh hai (WCAG 2.5.5 / Apple HIG) -- isse neeche
     nahi jaate, lekin padding pehle 14/20 thi jo phone par bhaari lagti thi */
  min-height:44px;
  padding:9px 16px;
  border-radius:var(--rad-sm);
  font-size:.9rem;font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s,opacity .16s;
}
.m-btn:active{transform:scale(.982)}
.m-btn-primary{background:var(--ac);color:#05080F;border-color:var(--ac)}
.m-btn-ghost{background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--line2)}
.m-btns{display:flex;flex-direction:column;gap:8px}

/* ---------- 8. Cards ----------------------------------------------------- */
.m-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--rad);
  padding:19px 17px;
  position:relative;
  overflow:hidden;          /* card ke andar ka kuch bhi baahar nahi nikal sakta */
}
.m-card h3{margin-bottom:8px;color:var(--ink)}
.m-card p{font-size:.92rem;margin-bottom:0}
.m-card-link{display:block;color:inherit}
.m-card-link:active{background:var(--surface2)}
.m-card-num{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  color:var(--ac);display:block;margin-bottom:9px;
}
/* Solutions cards: tagline hi card ki main heading hai -- naam aur para
   us se ek-ek step chhote */
.m-card-num.m-card-tag{
  font-size:clamp(.95rem,4vw,1.05rem);font-weight:600;line-height:1.4;
  letter-spacing:.01em;margin-bottom:8px;color:#5FA8FF;
}
.m-card-tag + h3{font-size:.92rem;margin-bottom:6px}
.m-card-tag ~ p{font-size:.84rem;line-height:1.55}
.m-card-tag ~ ul li{font-size:.8rem;margin-bottom:.35em}
.m-card-arrow{
  margin-top:13px;font-size:.82rem;color:var(--ac);font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
}

/* ---------- 9. Stat chips ------------------------------------------------ */
.m-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:20px 0}
/* 3 stats -> teeno ek qatar mein, warna aakhri akela reh jaata hai */
/* Theek 3 stats -> ek hi qatar mein, warna aakhri akela reh jaata hai.
   2 ya 4+ ke liye default 2-column theek hai. */
.m-stats:not(.m-card > *):has(> .m-stat:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.m-stats:not(.m-card > *):has(> .m-stat:nth-child(3):last-child) .m-stat b{font-size:1.1rem}
.m-stats:not(.m-card > *):has(> .m-stat:nth-child(3):last-child) .m-stat i{font-size:.6rem;letter-spacing:.06em}
.m-stat{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rad-sm);padding:13px 12px;
}
.m-stat b{
  display:block;font-family:var(--mono);font-size:1.32rem;
  color:var(--ink);font-weight:500;line-height:1.1;letter-spacing:-.02em;
}
.m-stat i{
  display:block;font-style:normal;margin-top:5px;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);
}

/* Card ke andar stats (food solutions) -- 3 chhote tiles mein lambe labels
   ("Iris uplift / ticket") toot kar bhadde lagte the. Yahan ek list panel:
   label left, value right -- label kitna bhi lamba ho, row saaf rehti hai. */
.m-card > .m-stats{
  display:flex;flex-direction:column;gap:0;margin:18px 0 0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rad-sm);overflow:hidden;
}
.m-card > .m-stats .m-stat{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:none;border:0;border-radius:0;padding:11px 14px;
}
.m-card > .m-stats .m-stat + .m-stat{border-top:1px solid var(--line)}
.m-card > .m-stats .m-stat b{
  order:2;flex-shrink:0;white-space:nowrap;
  font-size:14px;color:var(--ac);letter-spacing:-.01em;
}
.m-card > .m-stats .m-stat i{
  order:1;margin-top:0;min-width:0;
  font-size:.76rem;letter-spacing:.05em;line-height:1.4;color:var(--fg2);
}

/* ---------- 10. Accordion (dense desktop content ko mobile par foldable) - */
.m-acc{border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;background:var(--surface)}
.m-acc + .m-acc{margin-top:10px}
.m-acc summary{
  list-style:none;cursor:pointer;
  min-height:var(--tap);
  padding:16px 44px 16px 17px;
  position:relative;
  font-weight:600;font-size:.98rem;color:var(--ink);
  display:flex;align-items:center;
  -webkit-tap-highlight-color:transparent;
}
.m-acc summary::-webkit-details-marker{display:none}
.m-acc summary::after{
  content:'';position:absolute;right:18px;top:50%;
  width:8px;height:8px;margin-top:-5px;
  border-right:1.6px solid var(--ac);border-bottom:1.6px solid var(--ac);
  transform:rotate(45deg);transition:transform .25s;
}
.m-acc[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.m-acc-body{padding:0 17px 17px;border-top:1px solid var(--line);padding-top:15px}
.m-acc-body > *:last-child{margin-bottom:0}

/* Food selector: har sector ki apni solutions (desktop SECSOL) */
.m-secsol{margin-top:22px}
.m-secsol .m-kick{display:block;margin-bottom:12px}
.m-secsol .m-acc + .m-acc{margin-top:8px}
.m-secsol .m-acc summary{font-size:.86rem;font-weight:500;line-height:1.35;padding-top:13px;padding-bottom:13px}
.m-secsol .m-acc-body .m-card-num{display:inline-block;margin-bottom:8px}
.m-secsol .m-acc-body > p{color:var(--fg2);font-size:.9rem;line-height:1.55;margin:0 0 12px}
.m-secsol-pts{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.m-secsol-pts li{
  font-size:.84rem;line-height:1.5;color:var(--fg2);
  padding-left:12px;border-left:2px solid rgba(var(--acr),.35);
}
.m-secsol-pts li b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.m-secsol .m-iris{margin:0}

/* ---------- 11. Pills / tag row (scroll snap, contained) ---------------- */
.m-pills{
  display:flex;gap:8px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin:0 calc(var(--gut) * -1) 18px;
  padding:2px var(--gut);
}
.m-pills::-webkit-scrollbar{display:none}
.m-pill{
  flex:0 0 auto;scroll-snap-align:start;
  padding:9px 15px;min-height:38px;
  display:inline-flex;align-items:center;
  border:1px solid var(--line2);border-radius:999px;
  font-size:.82rem;color:var(--fg2);white-space:nowrap;
  background:var(--surface);
}
.m-pill[aria-selected="true"],.m-pill.is-on{
  background:rgba(var(--acr),.12);border-color:rgba(var(--acr),.5);color:var(--ac);
}
/* Auto-sliding pill row: track mein pills do baar hain; mobile.js scrollLeft
   aage badhata hai (transform nahi) -- is liye haath se swipe bhi hota hai. */
.m-pills--marquee{scroll-snap-type:none}
.m-marquee-track{display:flex;gap:8px;width:max-content;padding-right:8px}
/* auto-slide ke dauran snap band -- warna har frame wapas khinchta hai */
.is-drifting{scroll-snap-type:none !important;scroll-behavior:auto !important}
@media (prefers-reduced-motion:reduce){
  .m-marquee-track > [aria-hidden="true"]{display:none}
}

/* Headings: the highlighted <em> phrase gets the desktop teal → violet gradient. */
main h1 em,main h2 em,main h3.m-grad em{
  background:linear-gradient(100deg,var(--teal),var(--violet));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-right:.06em; /* keeps the italic overhang from being clipped */
}

/* ---------- 12. Prose block (articles / legal pages) -------------------- */
.m-prose{padding:clamp(28px,7vw,42px) var(--gut)}
.m-prose h2{margin-top:36px}
.m-prose h3{margin-top:26px}
.m-prose > *:first-child{margin-top:0}
.m-prose img{border-radius:var(--rad-sm);margin:20px 0}
.m-prose blockquote{
  margin:22px 0;padding:14px 16px;
  border-left:2px solid var(--ac);
  background:var(--surface);border-radius:0 var(--rad-sm) var(--rad-sm) 0;
  color:var(--fg2);font-style:italic;
}

/* ---------- 13. Footer --------------------------------------------------- */
.m-foot{
  display:flex;flex-direction:column;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(10,16,32,.6));
  padding:40px var(--gut) calc(26px + var(--safe-b));
}
.m-foot-name{font-weight:600;font-size:1.22rem;color:var(--ink);display:inline-block;align-self:flex-start}
.m-foot-tag{margin:10px 0 0;color:var(--fg2);font-size:.88rem;line-height:1.6}
/* contact links ke neeche, har row ke saath teal icon */
.m-foot-contact{
  order:2;display:flex;flex-direction:column;gap:6px;
  margin-top:32px;padding-top:24px;border-top:1px solid var(--line);
}
.m-foot-contact a{
  color:var(--fg2);font-size:.88rem;line-height:1.45;
  min-height:46px;display:flex;align-items:center;gap:14px;
}
/* charon icons ek jaise: outline, chhote rounded box mein (social icons jaisa) */
.m-foot-contact svg{display:none}
.m-foot-contact a::before{
  content:"";flex:0 0 36px;width:36px;height:36px;border-radius:10px;
  border:1px solid var(--line);
  background:var(--surface) center/18px 18px no-repeat;
}
.m-foot-contact a:first-child::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315F2F2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")}
.m-foot-contact a[href^="tel:"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315F2F2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}
.m-foot-contact .m-foot-mail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315F2F2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
.m-foot-mail{color:var(--teal) !important}
/* social icons footer ke aakhir mein (links ke baad, copyright se pehle) */
.m-foot-social{
  order:3;display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;
}
.m-foot-social a{
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);
  display:inline-flex;align-items:center;justify-content:center;color:var(--fg2);
  -webkit-tap-highlight-color:transparent;transition:color .2s,border-color .2s,background .2s;
}
.m-foot-social a:active{color:var(--teal);border-color:rgba(21,242,242,.45);background:rgba(21,242,242,.08)}
.m-foot-social svg{width:18px;height:18px;fill:currentColor}
/* Product / Company / Legal left mein ek ke neeche ek, Solutions (lambi list) right mein */
.m-foot-cols{
  order:1;margin-top:28px;padding-top:28px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;
  grid-template-areas:"p s" "c s" "l s";align-items:start;
}
.m-foot-cols > div:nth-child(1){grid-area:p}
.m-foot-cols > div:nth-child(2){grid-area:s}
.m-foot-cols > div:nth-child(3){grid-area:c}
.m-foot-cols > div:nth-child(4){grid-area:l}
.m-foot-cols h4{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg3);margin:0 0 6px;font-weight:600;
}
.m-foot-cols a{display:flex;align-items:center;min-height:36px;color:var(--fg2);font-size:.88rem}
/* Solutions band ho to 2x2 grid (Product|Solutions, Company|Legal); khule to Solutions poori right side le */
.m-foot-cols:has(.zsol-fcol.is-collapsible:not(.is-open)){grid-template-areas:"p s" "c l"}
.m-foot-tog{
  display:inline-flex;align-items:center;gap:6px;min-height:34px;margin-top:2px;padding:0 12px;
  border-radius:999px;cursor:pointer;font:inherit;font-size:.78rem;font-weight:500;
  background:rgba(var(--acr),.08);border:1px solid rgba(var(--acr),.35);color:var(--ac);
  -webkit-tap-highlight-color:transparent;transition:background .2s,border-color .2s;
}
.m-foot-tog svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.m-foot-tog:active{background:rgba(var(--acr),.16)}
.zsol-fcol.is-open .m-foot-tog svg{transform:rotate(180deg)}
/* height 0 -> auto animation: grid rows 0fr -> 1fr */
.m-foot-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1)}
.m-foot-more > div{overflow:hidden;min-height:0;opacity:0;transition:opacity .25s}
.zsol-fcol.is-open .m-foot-more{grid-template-rows:1fr}
.zsol-fcol.is-open .m-foot-more > div{opacity:1}
@media (prefers-reduced-motion:reduce){.m-foot-more,.m-foot-more > div,.m-foot-tog svg{transition:none}}
.m-foot-bot{
  order:4;margin-top:18px;
  font-size:.74rem;color:var(--fg3);
}
.m-foot-switch{
  order:5;align-self:flex-start;margin-top:16px;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;color:var(--fg2);font-size:.82rem;
  border:1px solid var(--line2);border-radius:999px;padding:0 15px;
}

/* ---------- 14. Sticky bottom CTA --------------------------------------- */
.m-sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:8px var(--gut) calc(8px + var(--safe-b));
  background:rgba(5,8,15,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(105%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.m-sticky-cta.is-on{transform:translateY(0)}
body:has(.m-sticky-cta) .m-foot{padding-bottom:calc(78px + var(--safe-b))}

/* ---------- 15. Utilities ------------------------------------------------ */
.m-mono{font-family:var(--mono)}
.m-muted{color:var(--fg3)}
.m-center{text-align:center}
.m-hide{display:none !important}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:4px}

/* ---------- 16. Motion / reveal ----------------------------------------- */
.m-rev{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.m-rev.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .m-rev{opacity:1;transform:none}
}

/* ---------- 17. Bahut chhoti screens (<=360px) -------------------------- */
@media (max-width:360px){
  :root{--gut:14px}
  /* 2 column par stat tile ~140px ka rehta hai -- 1 column banane se sirf
     lambai barhti hai, faida koi nahi. Sirf card grid 1 column hoti hai. */
  .m-grid-2{grid-template-columns:1fr}
  .m-stats .m-stat{padding:11px 10px}
  .m-stats .m-stat b{font-size:1.16rem}
  .m-stats:not(.m-card > *):has(> .m-stat:nth-child(3):last-child) .m-stat b{font-size:1rem}
  .m-stats:not(.m-card > *):has(> .m-stat:nth-child(3):last-child) .m-stat i{font-size:.56rem}
}
/* ---------- 18. Landscape phone ----------------------------------------- */
@media (orientation:landscape) and (max-height:460px){
  .m-hero{padding-block:30px}
  .m-menu{padding-top:calc(var(--head-h) + 10px)}
}

/* ---------- 19. Link list (TOC, tag rows, nav groups) ------------------ */
.m-linklist{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--rad);
  background:var(--surface);overflow:hidden;margin:4px 0 18px;
}
.m-linklist a{
  display:flex;align-items:center;gap:10px;
  min-height:var(--tap);padding:13px 16px;
  color:var(--fg2);font-size:.92rem;
  border-bottom:1px solid var(--line);
}
.m-linklist a:last-child{border-bottom:0}
.m-linklist a::after{
  content:'';margin-left:auto;flex:0 0 auto;
  width:6px;height:6px;
  border-right:1.5px solid var(--fg3);border-bottom:1.5px solid var(--fg3);
  transform:rotate(-45deg);
}
.m-linklist a:active{background:var(--surface2);color:var(--ink)}

/* ---------- 20. Rhythm between generated blocks ------------------------ */
.m-sec > .m-grid,
.m-sec > .m-stats,
.m-sec > .m-pills,
.m-sec > .m-acc,
.m-sec > .m-linklist,
.m-sec > .m-btns,
.m-sec > .m-tablewrap{margin-bottom:22px}
.m-sec > *:last-child{margin-bottom:0}
.m-sec > h2,.m-sec > h3{margin-top:26px}
.m-sec > h2:first-child,.m-sec > h3:first-child,
.m-kick + h2,.m-kick + h3{margin-top:0}
.m-card > *:last-child{margin-bottom:0}
.m-card + .m-card{margin-top:10px}
.m-card p + p{margin-top:-.4em}
/* details ke baad aane wala text card se chipke nahi */
.m-acc + p,.m-grid + p,.m-stats + p{margin-top:18px}

/* ---------- 21. Tap targets & nested-link fallback --------------------- */
.m-foot-name{min-height:var(--tap);display:inline-flex;align-items:center;padding:4px 0}
.m-inline-link{color:var(--ac)}
.m-linklist.is-static .m-inline-link{display:flex;align-items:center;min-height:var(--tap);
  padding:13px 16px;border-bottom:1px solid var(--line);color:var(--fg2)}
.m-linklist.is-static .m-inline-link:last-child{border-bottom:0}

/* ---------- 22. Sector explorer (desktop ke selector ka mobile version) -- */
.m-sector-explorer{padding-bottom:clamp(30px,7vw,46px)}
/* panel sirf banner pe khatam ho (food selector) to neeche ka gap kam karo */
.m-sector-panel > .m-banner:last-child{margin-bottom:0}
.m-sector-explorer:has(.m-sector-panel.is-on > .m-banner:last-child){padding-bottom:10px}
.m-sector-explorer:has(.m-sector-panel.is-on > .m-banner:last-child) + .m-sec{padding-top:28px}
.m-sector-tabs{
  position:sticky;
  /* header ke theek neeche chipke -- safe-area ko bhi shumaar karo */
  top:calc(var(--head-h) + var(--safe-t));
  z-index:50;
  margin:18px calc(var(--gut) * -1) 22px;
  padding:11px var(--gut) 12px;
  background:rgba(5,8,15,.94);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-block:1px solid var(--line);
}
/* stick hone par halka saya -- warna banner ke upar tairta hua lagta hai */
.m-sector-tabs::after{
  content:'';position:absolute;left:0;right:0;top:100%;height:14px;
  background:linear-gradient(180deg,rgba(5,8,15,.45),transparent);
  pointer-events:none;
}
.m-sector-tabs .m-pill{
  appearance:none;font:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.m-sector-panel{opacity:1;animation:m-panel-in .28s ease both}
@keyframes m-panel-in{
  from{transform:translateY(7px)}
  to  {transform:none}
}
.m-sector-panel[hidden]{display:none}
@keyframes m-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.m-sector-panel h3{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.35rem,5.6vw,1.75rem);margin-bottom:12px}
.m-sector-panel h4{font-size:.98rem;margin-bottom:6px;color:var(--ink)}
.m-sector-panel > .m-kick{margin-top:26px}
.m-sector-panel > .m-kick:first-child{margin-top:0}
/* Fashion: desktop ka "Every solution" -- L1 / AI do groups */
.m-fx-block{margin-top:30px}
.m-fx-h{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,5.2vw,1.5rem);margin:0 0 6px}
.m-fx-sub{font-size:.88rem;color:var(--fg2);margin-bottom:14px}
.m-solgrp{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.m-fx-block > .m-kick + .m-solgrp{margin-top:4px;padding-top:0;border-top:0}
.m-solgrp-eye{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg3);margin-bottom:8px}
.m-solgrp h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,4.8vw,1.35rem);margin-bottom:6px}
.m-solgrp-sub{font-size:.86rem;color:var(--fg2);margin-bottom:14px}

/* Product / solution screen -- band: naam + role; khula: KPI, alert, Iris, actions */
.m-fx-list{display:flex;flex-direction:column;gap:8px}
.m-fx{border:1px solid var(--line2);border-radius:14px;background:var(--surface);overflow:hidden}
.m-fx[open]{border-color:rgba(var(--acr),.35)}
.m-fx summary{list-style:none;display:flex;align-items:center;gap:10px;
  padding:14px 15px;min-height:var(--tap);cursor:pointer}
.m-fx summary::-webkit-details-marker{display:none}
.m-fx summary::after{content:'';flex:0 0 auto;width:8px;height:8px;margin-left:auto;
  border-right:1.5px solid var(--fg3);border-bottom:1.5px solid var(--fg3);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.m-fx[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.m-fx-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.m-fx-t b{font-size:.98rem;color:var(--ink);font-weight:600;line-height:1.3}
.m-fx-t i{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg3)}
.m-fx-tag{flex:0 0 auto;font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.1em;
  color:var(--ac);border:1px solid rgba(var(--acr),.4);border-radius:6px;padding:3px 6px}
.m-fx-body{padding:0 15px 16px}
.m-fx-d{font-size:.86rem;color:var(--fg2);margin:0 0 12px}
.m-fx-body .m-stats{margin:0 0 12px}
.m-fx-body .m-stats .m-stat b{font-size:.92rem;line-height:1.25}
.m-fx-alert{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;line-height:1.5;
  color:var(--amber);margin:0 0 10px}
.m-fx-body .m-iris{margin:0 0 12px;padding:12px 13px}
.m-fx-body .m-iris p{font-size:.86rem;line-height:1.55}
.m-fx-acts{display:flex;flex-wrap:wrap;gap:6px}
.m-fx-acts span{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:var(--fg2);
  border:1px solid var(--line2);border-radius:999px;padding:5px 9px}
.m-fx-body > *:last-child{margin-bottom:0}
.m-corenote{margin-top:22px;font-size:.84rem;line-height:1.6}
.m-cta .m-btns{margin:18px 0 12px}
.m-lede{font-size:1rem;color:var(--fg2);line-height:1.62;margin-bottom:18px}

/* Iris ka quote */
.m-iris{
  border:1px solid rgba(var(--acr),.32);
  background:rgba(var(--acr),.06);
  border-radius:var(--rad);padding:15px 16px;margin:18px 0;
}
.m-iris-who{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ac);margin-bottom:9px;
}
.m-iris-who::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ac)}
.m-iris p{margin:0;color:var(--ink);font-size:.95rem;line-height:1.6}
.m-iris b,.m-iris strong{color:var(--ac);font-weight:600}

/* ---------- 23. Definition list (label + description, stacked) --------- */
/* Phone par do-column table ka label column nichur jaata hai aur lafz beech
   se toot-te hain -- is liye label upar, tafseel neeche. */
.m-deflist{margin:4px 0 18px;padding:0;
  border:1px solid var(--line);border-radius:var(--rad);
  background:var(--surface);overflow:hidden}
.m-def{padding:14px 16px;border-bottom:1px solid var(--line)}
.m-def:last-child{border-bottom:0}
.m-def dt{font-weight:600;color:var(--ink);font-size:.92rem;margin:0 0 5px;
  word-break:normal;overflow-wrap:break-word}
.m-def dd{margin:0;color:var(--fg2);font-size:.9rem;line-height:1.58}

/* Do-column table: label column ko nichurne se bachao */
.m-tablewrap table{table-layout:fixed}
.m-tablewrap td{word-break:normal;overflow-wrap:break-word}
.m-tablewrap td:first-child{width:45%}

/* ---------- 24. Sector banner -- video background + upar content -------- */
/* Desktop jaisa: clip peeche chalti hai, headline/stats/CTA uske upar.
   Scrim laazmi hai -- warna chalti hui video par text parha nahi jaata. */
.m-banner{
  position:relative;
  margin:0 calc(var(--gut) * -1) 24px;
  min-height:clamp(340px,56svh,480px);
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;isolation:isolate;
  background:var(--bg2);
}
.m-banner-vid{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 28%;
  /* desktop ki --vop kahin kahin .73 tak jaati hai -- phone ki chhoti aur
     aksar dhoop mein dekhi jaane wali screen par itni halki video gayab
     ho jaati hai, is liye farsh .88 rakha hai */
  opacity:max(var(--vop,1),.88);
}
/* brand tint -- sector ka apna rang */
.m-banner-ink{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--sec-tint,transparent);
  opacity:.08;mix-blend-mode:overlay;
}
/* scrim: upar halka, neeche page ke background mein ghul jaata hai */
/* Scrim sirf wahan gehra hai jahan text baithta hai. Upar ka aadha hissa
   tقریباً saaf rehta hai taake video waqai nazar aaye. */
.m-banner-vig{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(5,8,15,.32) 0%,
    rgba(5,8,15,.04) 15%,
    rgba(5,8,15,.05) 40%,      /* yahan tak video saaf */
    rgba(5,8,15,.52) 55%,      /* yahan se text zone shuru */
    rgba(5,8,15,.86) 70%,
    rgba(5,8,15,.96) 87%,
    var(--bg)        100%);
}
.m-banner-copy{
  position:relative;z-index:3;
  padding:0 var(--gut) clamp(22px,6vw,34px);
  width:100%;
}
.m-banner-copy > .m-kick{
  color:#fff;opacity:.9;
  text-shadow:0 1px 8px rgba(0,0,0,.85);
}
.m-banner-copy > *:last-child{margin-bottom:0}
.m-banner--flat{min-height:0;background:transparent}
.m-banner--flat .m-banner-copy{padding-inline:0}

/* rotating headline -- desktop par ye badalti rehti hai */
.m-rot{position:relative}
/* Base par opacity 1 -- animation sirf polish hai, uske bharose text ki
   visibility nahi chhodi ja sakti (warna animation atak jaye to headline
   ghayab ho jaata hai). 'both' final state pakka rakhta hai, aur keyframe
   kabhi 0 tak nahi jaata. */
.m-rot-item{display:none;opacity:1}
.m-rot-item.is-on{display:block;animation:m-rot-in .38s ease both}
/* Sirf transform animate hota hai. Opacity ko haath nahi lagate --
   headline kabhi adhi-phiki nazar nahi aani chahiye, chahe animation
   kisi wajah se beech mein ruk jaye. */
@keyframes m-rot-in{
  from{transform:translateY(9px)}
  to  {transform:none}
}
.m-rot-item h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.6rem,7.4vw,2.3rem);line-height:1.12;
  color:#fff;margin:0 0 10px;
  text-shadow:0 2px 10px rgba(0,0,0,.72), 0 1px 30px rgba(0,0,0,.5);
}
.m-rot-item h3 em{font-style:italic;color:var(--ac)}
.m-rot-item p{
  color:rgba(238,241,248,.9);font-size:.95rem;line-height:1.58;margin:0;
  text-shadow:0 1px 8px rgba(0,0,0,.8), 0 1px 22px rgba(0,0,0,.55);
}
.m-rot-ticks{display:flex;gap:6px;margin:8px 0 0}
/* Dash chhota dikhta hai lekin hit area 44px ka hai -- ungli se
   chhoona aasan rahe. */
.m-tick{
  appearance:none;border:0;padding:0;cursor:pointer;
  width:30px;height:44px;position:relative;background:transparent;
  -webkit-tap-highlight-color:transparent;
}
.m-tick::after{
  content:'';position:absolute;left:0;top:50%;margin-top:-1px;
  width:22px;height:2px;border-radius:2px;
  background:rgba(255,255,255,.28);transition:background .25s;
}
.m-tick.is-on::after{background:var(--ac)}

/* banner ke stats -- glassy, video ke upar parhe jaate hain */
.m-banner-stats{margin:20px 0 18px}
.m-banner-stats .m-stat{
  background:rgba(5,8,15,.42);
  border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.m-banner-stats .m-stat b{color:#fff}
.m-banner-stats .m-stat i{color:rgba(174,185,203,.95)}
.m-banner .m-btns{margin-top:2px}

@media (min-width:430px){
  .m-banner{margin-inline:0;border-radius:var(--rad)}
}
/* landscape phone: banner poori screen na khaye */
@media (orientation:landscape) and (max-height:520px){
  .m-banner{min-height:340px}
}
/* reduced motion / data saver: sirf poster */
@media (prefers-reduced-motion:reduce){
  .m-rot-item.is-on,.m-sector-panel{animation:none;opacity:1;transform:none}
}

/* JS data ke units: 96<span class="u">s</span> */
.m-stat b span,.m-card h4 span,.m-rot-item h3 span.u{
  font-size:.72em;opacity:.7;font-weight:400;margin-left:1px;
}

/* ---------- Lead forms (contact + walkthrough) -> POST /api/lead -------- */
.m-form{display:flex;flex-direction:column;gap:14px}
.m-field{display:flex;flex-direction:column;gap:6px}
.m-field label{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}
.m-field input,.m-field textarea{
  width:100%;min-height:var(--tap);padding:12px 14px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line2);border-radius:var(--rad-sm);
  font-family:var(--sans);font-size:16px; /* 16px = iOS focus par zoom nahi karta */
  -webkit-appearance:none;appearance:none;
}
.m-field textarea{min-height:110px;resize:vertical;line-height:1.5}
.m-field input:focus,.m-field textarea:focus{outline:none;border-color:var(--ac)}
.m-field input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 40px var(--bg2) inset}
.m-field.err input,.m-field.err textarea{border-color:#ff5c7a}
.m-field.err label{color:#ff5c7a}
.m-chips{display:flex;flex-wrap:wrap;gap:8px}
.m-chip{min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--fg2);font-family:var(--sans);font-size:.88rem}
.m-chip[aria-pressed="true"]{border-color:var(--ac);color:var(--ink);background:rgba(var(--acr),.12)}
.m-form .m-btn{width:100%;cursor:pointer;font-family:inherit}
.m-form .m-btn[disabled]{opacity:.6}
.m-form-note{font-size:.84rem;color:var(--fg3);margin:0}
.m-form-note.err{color:#ff6b6b}
.m-form-done{text-align:center;padding:10px 0}
.m-form-done h3{margin-bottom:8px}
.m-form-done .m-btn{margin-top:16px}

/* ---------- Ask Iris button (booking.js) sits above the sticky CTA bar ---- */
.zbook-fab{transition:bottom .3s cubic-bezier(.4,0,.2,1)}
body:has(.m-sticky-cta.is-on) .zbook-fab{bottom:calc(74px + var(--safe-b))}

/* In-page anchors land below the sticky header. */
.m-sec[id]{scroll-margin-top:calc(var(--head-h) + var(--safe-t, 0px) + 12px)}

/* ---------- Meet Iris page ------------------------------------------- */
.m-iris-page .m-sec{padding-block:clamp(30px,8vw,44px)}
.m-iris-page .m-sec > h2{margin-bottom:12px}
.m-live{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
  padding:6px 12px;border:1px solid rgba(var(--acr),.35);border-radius:999px;background:rgba(var(--acr),.07);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ac);
}
.m-live i{width:6px;height:6px;border-radius:50%;background:var(--ac);box-shadow:0 0 8px rgba(var(--acr),.9);animation:m-iris-pulse 2.4s ease-in-out infinite}
.m-layers{display:grid;gap:8px;margin-top:18px}
.m-layer{
  display:flex;align-items:center;gap:14px;padding:14px 16px;
  border:1px solid var(--line2);border-radius:14px;background:var(--surface);
}
.m-layer > b{
  flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
  font-family:var(--mono);font-size:.78rem;color:var(--ac);background:rgba(var(--acr),.1);border:1px solid rgba(var(--acr),.3);
}
.m-layer h3{font-size:1rem;margin:0 0 2px}
.m-layer p{margin:0;font-size:.86rem;color:var(--fg3)}
.m-ask--iris{border-color:rgba(var(--acr),.4);border-radius:16px 16px 4px 16px;background:rgba(var(--acr),.06);margin-top:0}
.m-ask--iris .m-ask-who{color:var(--ac)}
.m-ask--iris p{font-size:.92rem;color:var(--fg2)}
.m-ask--iris p b{color:var(--ink)}
.m-sig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}
.m-sig > div{padding:13px 13px 12px;border:1px solid var(--line2);border-radius:14px;background:var(--surface)}
.m-sig h3{font-size:.9rem;margin:0 0 4px;color:var(--ink)}
.m-sig p{margin:0;font-size:.78rem;line-height:1.45;color:var(--fg3)}
.m-steps{list-style:none;margin:18px 0 0;padding:0;counter-reset:st}
.m-steps li{position:relative;padding:0 0 18px 44px;counter-increment:st}
.m-steps li:last-child{padding-bottom:0}
.m-steps li::before{
  content:counter(st,decimal-leading-zero);position:absolute;left:0;top:0;
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  font-family:var(--mono);font-size:.66rem;color:var(--ac);border:1px solid rgba(var(--acr),.45);background:var(--bg);z-index:1;
}
.m-steps li::after{content:"";position:absolute;left:15px;top:30px;bottom:0;width:1px;background:rgba(var(--acr),.25)}
.m-steps li:last-child::after{display:none}
.m-steps b{display:block;color:var(--ink);font-weight:600;margin:4px 0 3px}
.m-steps span{display:block;font-size:.88rem;color:var(--fg2)}
.m-iris-cta{text-align:center}
.m-iris-cta .m-btns{justify-content:center}

/* ZSOL-NAV:START -- Solutions dropdown (tools/build_solutions.py) */
.m-menu-nav{justify-content:flex-start}
.m-menu button.m-menu-item{appearance:none;background:none;border:0;border-bottom:1px solid var(--line);width:100%;text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:16px;min-height:var(--tap);padding:clamp(11px,2.4vw,18px) 0;
  font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,9vw,2.6rem);letter-spacing:-.02em;color:var(--fg2);line-height:1.15;-webkit-tap-highlight-color:transparent}
.m-menu button.m-menu-item i{font-family:var(--mono);font-style:normal;font-size:.72rem;color:var(--fg3);letter-spacing:.1em;flex:0 0 auto}
.m-menu-grp.open button.m-menu-item,.m-menu-grp.m-cur button.m-menu-item{color:#fff}
.m-menu-chev{margin-left:auto;width:26px;height:26px;flex:0 0 26px;border:1px solid var(--line2);border-radius:50%;position:relative}
.m-menu-chev::before,.m-menu-chev::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
.m-menu-chev::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
.m-menu-grp.open .m-menu-chev{border-color:rgba(21,242,242,.55)}
.m-menu-grp.open .m-menu-chev::after{transform:translate(-50%,-50%) rotate(0)}
.m-menu-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.3,.7,.2,1)}
.m-menu-grp.open .m-menu-sub{grid-template-rows:1fr}
.m-menu-subin{overflow:hidden;display:flex;flex-direction:column;gap:8px}
.m-menu-grp.open .m-menu-subin{padding:14px 0 18px}
.m-menu a.m-menu-sp{display:flex;align-items:center;gap:13px;min-height:var(--tap);padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}
.m-menu a.m-menu-sp:active{border-color:rgba(21,242,242,.4);background:rgba(21,242,242,.06)}
.m-menu-st{display:flex;flex-direction:column;gap:2px;min-width:0}
.m-menu-st strong{font-family:var(--sans);font-weight:600;font-size:.95rem;color:#fff;line-height:1.25}
.m-menu-st em{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;color:var(--fg3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-menu a.m-menu-all{display:inline-flex;gap:8px;padding:6px 2px 0;min-height:var(--tap);align-items:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.m-menu-ic{--s:40px;width:var(--s);height:var(--s);flex:0 0 var(--s);border-radius:11px;background:#2c0e26;position:relative;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.m-menu-ic>span{font-family:var(--serif);font-weight:600;color:#F25DB6;font-size:14px;letter-spacing:-.03em}
.m-menu-ic[data-n="3"]>span{font-size:11.5px}
.m-menu-ic:not(.is-img)::before,.m-menu-ic:not(.is-img)::after{content:"";position:absolute;inset:3px;border-radius:9px;border:3px solid #18EEF0;clip-path:polygon(0 0,46% 0,46% 46%,0 46%)}
.m-menu-ic:not(.is-img)::after{border-color:#FF2D95;clip-path:polygon(54% 54%,100% 54%,100% 100%,54% 100%)}
.m-menu-ic img{width:100%;height:100%;object-fit:cover;display:block}
/* ZSOL-NAV:END */