/* ==========================================================================
   THOUSAND FLOW — unified design system
   One stylesheet for the homepage and every service page.
   Fonts are self-hosted (Mona Sans, Hanken Grotesk, Newsreader Italic).
   ========================================================================== */

@font-face{font-family:"Mona Sans";src:url("../fonts/mona-sans-var.woff2") format("woff2");font-weight:400 850;font-stretch:100% 112%;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-var.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-italic-var.woff2") format("woff2");font-weight:400 560;font-style:italic;font-display:swap}

:root{
  /* colour */
  --paper:#fbfaf8;
  --paper-2:#f2f1ee;
  --white:#ffffff;
  --ink:#0d2038;
  --ink-2:#2a3b52;
  --muted:#5a687a;
  --line:#e4e2dd;
  --line-2:#d6d3cc;
  --navy:#0b1d33;
  --navy-2:#122b48;
  --navy-3:#1b3a5e;
  --gold:#e9b949;
  --gold-hi:#f4c654;
  --gold-ink:#9a6c0c;
  --blue:#2f6fdd;
  --focus:#2f6fdd;

  --h-zoho:#e8483f;   --t-zoho:#fdeee6;
  --h-web:#2f6fdd;    --t-web:#e8f0fe;
  --h-mobile:#ee5d4b; --t-mobile:#fdebe6;
  --h-wa:#169c58;     --t-wa:#e3f5ea;
  --h-ai:#6c4ce0;     --t-ai:#eeeafd;
  --h-cloud:#e9840f;  --t-cloud:#fdf0df;
  --h-auto:#0d8f8d;   --t-auto:#e0f3f2;

  /* type */
  --f-display:"Mona Sans","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-body:"Hanken Grotesk","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-accent:"Newsreader","Iowan Old Style","Baskerville","Georgia",serif;

  --fs-hero:clamp(2.45rem,.8rem + 3.9vw,6rem);
  --fs-h1:clamp(2.35rem,1rem + 3.4vw,5.2rem);
  --fs-h2:clamp(2rem,1rem + 2.75vw,4.5rem);
  --fs-h3:clamp(1.3rem,1rem + .75vw,1.85rem);
  --fs-h4:clamp(1.08rem,.98rem + .3vw,1.3rem);
  --fs-lead:clamp(1.06rem,.96rem + .42vw,1.42rem);
  --fs-body:clamp(1rem,.95rem + .18vw,1.13rem);
  --fs-small:clamp(.875rem,.85rem + .1vw,.95rem);
  --fs-note:clamp(1rem,.92rem + .3vw,1.22rem);

  /* layout */
  --gutter:clamp(20px,4.2vw,88px);
  --wrap:min(100% - 2 * var(--gutter),1720px);
  --gap:clamp(14px,1.5vw,30px);
  --section:clamp(84px,9vw,176px);
  --r-xl:clamp(22px,2vw,34px);
  --r-lg:clamp(18px,1.4vw,24px);
  --r-md:14px;
  --header-h:clamp(68px,5.2vw,88px);

  /* motion */
  --ease-out:cubic-bezier(.16,.84,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-soft:cubic-bezier(.2,.7,.2,1);
  --shadow-lift:0 34px 70px -34px rgba(13,32,56,.42),0 12px 24px -16px rgba(13,32,56,.18);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.62 var(--f-body);font-kerning:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,video,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-stretch:106%;font-weight:720;letter-spacing:-.028em;line-height:1.04;color:var(--ink);text-wrap:balance}
p{margin:0}
p,li{text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--gold-hi);color:var(--ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:var(--wrap);margin-inline:auto}

.skip-link{position:fixed;left:16px;top:-80px;z-index:100;background:var(--ink);color:#fff;padding:.8rem 1.1rem;border-radius:10px;font-weight:600;text-decoration:none;transition:top .2s}
.skip-link:focus{top:16px}

.scroll-progress{position:fixed;inset:0 0 auto;height:3px;z-index:90;background:linear-gradient(90deg,var(--gold),#f08a4b 55%,var(--blue));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* ---------- editorial labels (replace generic pill eyebrows) ---------- */
.note{display:flex;align-items:center;gap:.85rem;margin:0 0 clamp(1rem,1.6vw,1.6rem);font:italic 450 var(--fs-note)/1.3 var(--f-accent);color:var(--muted);letter-spacing:.003em}
.note::before{content:"";flex:0 0 auto;width:clamp(1.8rem,2.6vw,3rem);height:1px;background:currentColor;opacity:.55;transform-origin:0 50%;transition:transform 1s var(--ease-out) .15s}
.note--light{color:rgba(255,255,255,.72)}
.note--stack{display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;align-items:start}
.note--stack::before{margin-top:.68em}
.js [data-reveal]:not(.is-in) .note::before,.js .note[data-reveal]:not(.is-in)::before{transform:scaleX(0)}

/* line-mask headings */
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:block;transform:translate3d(0,0,0);transition:transform 1.15s var(--ease-out);transition-delay:calc(var(--i,0) * 95ms + var(--d,0ms))}
.js [data-reveal]:not(.is-in) .ln>span{transform:translate3d(0,108%,0)}
.tail-serif{font-family:var(--f-accent);font-style:italic;font-weight:440;font-stretch:100%;letter-spacing:-.012em;color:var(--gold-ink)}
.tail-light{font-weight:380;color:var(--muted)}
.on-dark .tail-serif,.tail-serif--light{color:var(--gold-hi)}
.on-dark .tail-light{color:rgba(255,255,255,.62)}

/* ---------- buttons ---------- */
.btn{--bg:var(--ink);--fg:#fff;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.75rem;min-height:54px;padding:0 .55rem 0 1.4rem;border:1px solid transparent;border-radius:999px;background:var(--bg);color:var(--fg);font:600 clamp(.95rem,.9rem + .15vw,1.05rem)/1 var(--f-body);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:transform .45s var(--ease-out),background-color .3s,box-shadow .4s,color .3s;will-change:transform}
.btn__label{display:inline-block;transition:transform .45s var(--ease-out)}
.btn__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);overflow:hidden;flex:0 0 auto}
.btn__icon svg{width:18px;height:18px;transition:transform .5s var(--ease-out)}
.btn:hover .btn__icon svg{transform:translateX(3px)}
.btn--light{--bg:#fff;--fg:var(--ink)}
.btn--light .btn__icon{background:var(--ink);color:#fff}
.btn--dark .btn__icon{background:var(--gold-hi);color:var(--ink)}
.btn--ghost{--bg:rgba(255,255,255,.08);--fg:#fff;border-color:rgba(255,255,255,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding-right:1.4rem}
.btn--ghost:hover{--bg:rgba(255,255,255,.16)}
.btn--outline{--bg:transparent;--fg:var(--ink);border-color:var(--line-2);padding-right:1.4rem}
.btn--outline:hover{border-color:var(--ink)}
.btn--plain{padding-right:1.4rem}
.btn:hover{box-shadow:0 18px 36px -18px rgba(13,32,56,.55)}
.btn--light:hover{box-shadow:0 18px 40px -16px rgba(0,0,0,.45)}

.link-arrow{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;text-decoration:none;color:var(--ink);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .5s var(--ease-out)}
.link-arrow svg{width:16px;height:16px;transition:transform .4s var(--ease-out)}
.link-arrow:hover{background-size:100% 1px}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:80;height:var(--header-h);color:var(--ink);transition:background-color .45s,box-shadow .45s,color .35s,transform .5s var(--ease-out)}
.site-header::before{content:"";position:absolute;inset:0;background:rgba(251,250,248,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(13,32,56,.07);opacity:1;transition:opacity .45s}
.site-header.is-over-dark{color:#fff}
.site-header.is-over-dark::before{opacity:0}
.nav{position:relative;height:100%;width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:clamp(16px,2.4vw,44px)}
/* Thousand Flow logo: no white pill. White over dark sections, full-colour on hover. */
.brand{display:inline-flex;position:relative;align-items:center;text-decoration:none;margin-right:auto;flex:0 0 auto;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
.brand__logo{display:block;width:clamp(178px,18vw,224px);height:auto;aspect-ratio:2021/452;object-fit:contain;filter:none;transition:opacity .3s ease,transform .35s var(--ease-out)}
.brand:hover .brand__logo,.brand:focus-visible .brand__logo{transform:translateY(-1px)}
/* Dark hero / open mobile menu / dark footer: white logo without a surrounding box. */
.site-header.is-over-dark .brand__logo,
.menu-open .site-header .brand__logo,
.site-footer .brand__logo{opacity:0}
.site-header.is-over-dark .brand::after,
.menu-open .site-header .brand::after,
.site-footer .brand::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:url("../brand/thousand-flow-wordmark-white.webp") center / contain no-repeat;opacity:1;transition:opacity .3s ease,transform .35s var(--ease-out)}
/* Hover and keyboard focus expose the real, unmodified, multicolour original. */
.site-header.is-over-dark .brand:hover .brand__logo,
.site-header.is-over-dark .brand:focus-visible .brand__logo,
.menu-open .site-header .brand:hover .brand__logo,
.menu-open .site-header .brand:focus-visible .brand__logo,
.site-footer .brand:hover .brand__logo,
.site-footer .brand:focus-visible .brand__logo{opacity:1}
.site-header.is-over-dark .brand:hover::after,
.site-header.is-over-dark .brand:focus-visible::after,
.menu-open .site-header .brand:hover::after,
.menu-open .site-header .brand:focus-visible::after,
.site-footer .brand:hover::after,
.site-footer .brand:focus-visible::after{opacity:0;transform:translateY(-1px)}
.footer__brand .brand__logo{width:clamp(192px,21vw,240px)}
@media(max-width:480px){.site-header .brand__logo{width:clamp(170px,54vw,188px)}}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.2vw,40px)}
.nav-links a{position:relative;padding:.6rem 0;font-weight:560;font-size:clamp(.95rem,.9rem + .12vw,1.04rem);text-decoration:none;opacity:.86;transition:opacity .25s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:.25rem;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease-out)}
.nav-links a:hover,.nav-links a.is-active{opacity:1}
.nav-links a:hover::after,.nav-links a.is-active::after{transform:scaleX(1);transform-origin:0 50%}
.nav-cta{min-height:46px;font-size:.95rem}
.nav-cta .btn__icon{width:34px;height:34px}
.site-header.is-over-dark .nav-cta{--bg:#fff;--fg:var(--ink)}
.site-header.is-over-dark .nav-cta .btn__icon{background:var(--ink);color:#fff}
.menu-toggle{display:none;position:relative;width:48px;height:48px;border-radius:50%;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 30%,transparent);background:transparent}
.menu-toggle span{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:currentColor;transition:transform .45s var(--ease-out),top .45s var(--ease-out)}
.menu-toggle span:nth-child(1){top:19px}.menu-toggle span:nth-child(2){top:27px}
.menu-open .menu-toggle span:nth-child(1){top:23px;transform:rotate(45deg)}
.menu-open .menu-toggle span:nth-child(2){top:23px;transform:rotate(-45deg)}

/* header entrance */
.js .site-header{animation:header-in 1s var(--ease-out) .25s both}
@keyframes header-in{from{transform:translate3d(0,-110%,0)}to{transform:none}}
.js .nav-links a{animation:fade-down .9s var(--ease-out) both;animation-delay:calc(.45s + var(--i,0) * 70ms)}
@keyframes fade-down{from{opacity:0;transform:translate3d(0,-10px,0)}to{opacity:.86;transform:none}}

/* mobile menu sheet */
.menu-sheet{position:fixed;inset:0;z-index:70;display:grid;grid-template-rows:1fr auto;padding:calc(var(--header-h) + 24px) var(--gutter) max(28px,env(safe-area-inset-bottom));background:var(--navy);color:#fff;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-io),visibility 0s linear .7s;overflow-y:auto}
.menu-open .menu-sheet{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .7s var(--ease-io),visibility 0s}
.menu-open .site-header{color:#fff}
.menu-open .site-header::before{opacity:0}
.menu-sheet__links{display:grid;align-content:start;gap:.2rem}
.menu-sheet__links a{display:block;padding:.35rem 0;font:720 clamp(2rem,9vw,3.4rem)/1.05 var(--f-display);font-stretch:106%;letter-spacing:-.03em;text-decoration:none;opacity:0;transform:translate3d(0,24px,0);transition:opacity .5s,transform .7s var(--ease-out)}
.menu-open .menu-sheet__links a{opacity:1;transform:none;transition-delay:calc(.18s + var(--i,0) * 55ms)}
.menu-sheet__services{margin-top:1.6rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.4rem 1rem;opacity:0;transition:opacity .6s .45s}
.menu-open .menu-sheet__services{opacity:1}
.menu-sheet__services p{grid-column:1/-1;font:italic 450 1.05rem/1.3 var(--f-accent);color:rgba(255,255,255,.6);margin-bottom:.3rem}
.menu-sheet__services a{color:rgba(255,255,255,.85);text-decoration:none;font-size:.98rem;padding:.35rem 0}
.menu-sheet__foot{display:grid;gap:1rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14);margin-top:1.6rem}
.menu-sheet__foot .btn{width:100%;justify-content:space-between}
.menu-sheet__foot a.mail{color:rgba(255,255,255,.75)}
body.menu-open{overflow:hidden}

@media (max-width:979px){
  .nav-links,.nav .nav-cta{display:none}
  .menu-toggle{display:inline-block}
}
@media (min-width:980px){.menu-sheet{display:none}}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;isolation:isolate;min-height:clamp(600px,46vw,980px);display:flex;align-items:center;color:#fff;background:var(--navy);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__media picture,.hero__img{position:absolute;inset:0;width:100%;height:100%}
.hero__img{object-fit:cover;object-position:92% 44%;transform-origin:75% 50%;will-change:transform}
.hero__light{position:absolute;inset:-20%;background:radial-gradient(42% 38% at 28% 30%,rgba(255,196,110,.30),transparent 70%),radial-gradient(30% 30% at 80% 18%,rgba(255,170,90,.18),transparent 70%);mix-blend-mode:soft-light;animation:light-drift 16s ease-in-out infinite alternate}
@keyframes light-drift{from{transform:translate3d(-3%,-2%,0)}to{transform:translate3d(4%,3%,0)}}
.hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,22,40,.88) 0%,rgba(8,22,40,.72) 30%,rgba(8,22,40,.3) 54%,rgba(8,22,40,0) 70%),linear-gradient(180deg,rgba(8,22,40,.5) 0%,rgba(8,22,40,0) 22%,rgba(8,22,40,0) 70%,rgba(8,22,40,.55) 100%)}
.hero__inner{position:relative;padding-top:calc(var(--header-h) + clamp(18px,2.4vw,56px));padding-bottom:clamp(92px,7vw,140px);will-change:transform}
.hero__copy{max-width:min(58vw,1100px)}
.hero__note{font:italic 450 var(--fs-note)/1.35 var(--f-accent);color:rgba(255,255,255,.84);margin-bottom:clamp(.8rem,1.2vw,1.3rem)}
.hero__title{font-size:var(--fs-hero);line-height:.96;letter-spacing:-.04em;font-weight:780;font-stretch:104%;color:#fff;margin-bottom:clamp(1rem,1.4vw,1.6rem)}
.hero__title .ln{padding-bottom:.08em;margin-bottom:-.08em}
.hero__title .ln--gold{color:var(--gold-hi)}
.hero__lead{font-size:var(--fs-lead);line-height:1.5;color:rgba(255,255,255,.9);max-width:50ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.4rem,2vw,2.2rem)}
.hero__qualities{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:clamp(1.1rem,1.5vw,1.8rem);font-size:var(--fs-small);color:rgba(255,255,255,.78)}
.hero__qualities li{display:flex;align-items:center;gap:.5rem}
.hero__qualities svg{width:17px;height:17px;color:var(--gold-hi)}

/* hero intro sequence (CSS-driven so it never waits on JS) */
.js .hero__img{animation:hero-img 2.2s var(--ease-out) both}
@keyframes hero-img{from{transform:scale(1.16);filter:saturate(.6) brightness(.75)}to{transform:scale(1.04);filter:none}}
.js .hero__media{animation:hero-mask 1.6s var(--ease-io) both}
@keyframes hero-mask{from{clip-path:inset(6% 4% 6% 4% round 32px)}to{clip-path:inset(0 0 0 0 round 0)}}
.js .hero__note,.js .hero__lead,.js .hero__actions>*,.js .hero__qualities{animation:rise-in 1.1s var(--ease-out) both}
.js .hero__note{animation-delay:.55s}
.js .hero__title .ln>span{animation:line-in 1.2s var(--ease-out) both;animation-delay:calc(.7s + var(--i,0) * 110ms);transition:none}
.js .hero__lead{animation-delay:1.1s}
.js .hero__actions>*:nth-child(1){animation-delay:1.22s}
.js .hero__actions>*:nth-child(2){animation-delay:1.32s}
.js .hero__qualities{animation-delay:1.45s}
@keyframes line-in{from{transform:translate3d(0,108%,0)}to{transform:none}}
@keyframes rise-in{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}

/* credibility strip at the hero → content transition */
.proof{position:relative;z-index:3;margin-top:calc(-1 * clamp(56px,4.6vw,84px))}
.proof__bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(var(--wrap),760px);margin-left:calc((100% - var(--wrap)) / 2);background:var(--white);border-radius:var(--r-lg);box-shadow:0 30px 60px -30px rgba(13,32,56,.35),0 0 0 1px rgba(13,32,56,.06)}
.proof__item{position:relative;padding:clamp(18px,1.6vw,28px) clamp(18px,2vw,32px)}
.proof__item+.proof__item::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line)}
.proof__value{display:block;font:760 clamp(1.7rem,1.2rem + 1.3vw,2.6rem)/1 var(--f-display);font-stretch:106%;letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.proof__label{display:block;margin-top:.45rem;font-size:var(--fs-small);line-height:1.35;color:var(--muted)}
.js .proof__bar{animation:rise-in 1.2s var(--ease-out) 1.55s both}

/* ---------- hero: tablet & mobile composition ---------- */
@media (max-width:1099px){
  .hero__copy{max-width:62vw}
  .hero__shade{background:linear-gradient(90deg,rgba(8,22,40,.88) 0%,rgba(8,22,40,.6) 45%,rgba(8,22,40,.1) 80%),linear-gradient(180deg,rgba(8,22,40,.45) 0%,rgba(8,22,40,0) 25%,rgba(8,22,40,0) 65%,rgba(8,22,40,.6) 100%)}
}
@media (max-width:860px){
  .hero{display:block;min-height:0;background:var(--navy)}
  .hero__media{position:relative;inset:auto;height:min(64svh,calc(100vw * 1.12));min-height:360px}
  .hero__img{object-position:50% 34%}
  .hero__shade{background:linear-gradient(180deg,rgba(8,22,40,.55) 0%,rgba(8,22,40,0) 24%,rgba(8,22,40,0) 52%,rgba(11,29,51,.92) 88%,var(--navy) 100%)}
  .hero__inner{padding-top:0;margin-top:calc(-1 * clamp(110px,26vw,190px));padding-bottom:clamp(88px,20vw,120px)}
  .hero__copy{max-width:none}
  .hero__note{max-width:30ch}
}
@media (max-width:600px){
  .hero__actions{display:grid}
  .hero__actions .btn{width:100%;justify-content:space-between}
  .hero__actions .btn--ghost{justify-content:center}
  .hero__qualities{gap:.45rem 1.1rem}
  .proof__bar{grid-template-columns:1fr 1fr 1fr;border-radius:18px}
  .proof__item{padding:16px 12px}
  .proof__value{font-size:clamp(1.45rem,6.6vw,1.8rem)}
  .proof__label{font-size:.8rem}
}

/* ==========================================================================
   TECHNOLOGY ECOSYSTEM
   ========================================================================== */
.stack{padding:clamp(72px,7vw,130px) 0 clamp(64px,6vw,110px)}
.stack__head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap) calc(var(--gap) * 2);align-items:end}
.stack__head h2{font-size:var(--fs-h2)}
.stack__head p{color:var(--muted);max-width:46ch;margin-top:1rem}
.platforms{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);overflow:hidden}
.platform{position:relative;display:grid;justify-items:center;align-content:center;gap:.7rem;padding:clamp(18px,2vw,34px) 10px;text-align:center}
.platform+.platform{border-left:1px solid var(--line)}
.platform img{height:clamp(30px,2.6vw,46px);width:auto;max-width:82%;object-fit:contain;transition:transform .6s var(--ease-out)}
.platform:hover img{transform:translateY(-3px) scale(1.04)}
.platform b{font:600 var(--fs-small)/1 var(--f-body);color:var(--ink-2)}

.rails{margin-top:clamp(48px,5vw,88px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3vw,48px)}
.rails>div{min-width:0}
.rail__head{width:var(--wrap);margin:0 auto clamp(12px,1.2vw,20px);display:flex;align-items:baseline;gap:.6rem 1.2rem;flex-wrap:wrap}
.rail__head p{margin-right:auto}
.rail__head h3{font-size:var(--fs-h4);font-weight:680;letter-spacing:-.015em}
.rail__head p{font:italic 450 var(--fs-small)/1.3 var(--f-accent);color:var(--muted)}
.rail-toggle{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line-2);background:var(--white);border-radius:999px;padding:.45rem .9rem;font-size:.85rem;font-weight:600;color:var(--ink-2)}
.rail-toggle svg{width:12px;height:12px}
.rail{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rail__track{display:flex;width:max-content;will-change:transform}
.rail__set{display:flex;align-items:center;flex:0 0 auto}
.tech{display:inline-flex;align-items:center;gap:clamp(12px,1vw,18px);padding:0 clamp(22px,2.4vw,44px);white-space:nowrap}
.tech img{width:auto;height:clamp(32px,2.6vw,48px);flex:0 0 auto}
.tech span{font:640 clamp(1.4rem,1rem + 1.35vw,2.6rem)/1 var(--f-display);font-stretch:104%;letter-spacing:-.03em;color:var(--ink)}
.tech::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);margin-left:clamp(22px,2.4vw,44px)}
.rail--db .tech span{font-weight:420;color:var(--ink-2)}
.rail--db .tech img{height:clamp(30px,2.3vw,42px)}
.rail--db .tech::after{background:transparent;border:1.5px solid var(--line-2)}
.rails.is-static .rail{-webkit-mask-image:none;mask-image:none}
.rails.is-static .rail__track{width:auto}
.rails.is-static .rail__set{flex-wrap:wrap;justify-content:center;width:var(--wrap);margin-inline:auto;gap:1rem 0}
.rails.is-static .rail__set[aria-hidden]{display:none}

@media (max-width:860px){
  .stack__head{grid-template-columns:1fr}
  .platforms{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:600px){
  .platforms{grid-template-columns:repeat(6,1fr)}
  .platform{grid-column:span 2}
  .platform:nth-child(4),.platform:nth-child(5){grid-column:span 3;border-top:1px solid var(--line)}
  .platform:nth-child(4){border-left:0}
  .rail__head p{display:none}
}

/* ==========================================================================
   SERVICES (homepage)
   ========================================================================== */
.services{padding:clamp(40px,4vw,80px) 0 var(--section)}
.services__intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap) calc(var(--gap) * 2);align-items:end;margin-bottom:clamp(36px,4vw,72px)}
.services__intro h2{font-size:var(--fs-h2)}
.services__intro p{color:var(--muted);font-size:var(--fs-lead);line-height:1.5;max-width:40ch}

.svc-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.svc-cell{grid-column:span 4;display:flex}
.svc-cell--zoho{grid-column:span 7}
.svc-cell--web{grid-column:span 5}
.svc-cell--cloud,.svc-cell--auto{grid-column:1/-1}

.svc{--hue:var(--ink);--tint:var(--paper-2);--mx:50%;--my:50%;position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;min-height:clamp(420px,32vw,580px);border-radius:var(--r-xl);background:var(--tint);color:var(--ink);overflow:hidden;transform-style:preserve-3d;transition:transform .7s var(--ease-out),box-shadow .6s var(--ease-out);will-change:transform}
.svc::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(255,255,255,.55),transparent 45%);opacity:0;transition:opacity .5s}
.svc--dark::before{background:radial-gradient(520px circle at var(--mx) var(--my),rgba(255,255,255,.12),transparent 45%)}
.svc::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--angle,0deg),transparent 0 62%,var(--hue) 78%,var(--gold) 86%,transparent 96%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s;pointer-events:none;z-index:5}
.svc:hover,.svc:focus-within{box-shadow:var(--shadow-lift)}
.svc:hover::before,.svc:hover::after,.svc:focus-within::after{opacity:1}
.svc:hover::after{animation:border-spin 3.2s linear infinite}
@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes border-spin{to{--angle:360deg}}
.svc:focus-within{outline:3px solid var(--focus);outline-offset:4px}
.svc :focus-visible{outline:none}

.svc__body{position:relative;z-index:2;display:flex;flex-direction:column;gap:.8rem;padding:clamp(24px,2.3vw,40px)}
.svc__mark{height:40px;display:flex;align-items:center;margin-bottom:.4rem}
.svc__mark img{height:100%;width:auto}
.svc__tile{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:#fff;box-shadow:0 10px 24px -14px rgba(13,32,56,.35);margin-bottom:.4rem}
.svc__tile img{width:34px;height:34px}
.svc h3{font-size:var(--fs-h3);max-width:16ch}
.svc__link{text-decoration:none;color:inherit}
.svc__link::after{content:"";position:absolute;inset:0;z-index:4;border-radius:var(--r-xl)}
.svc__text{color:var(--ink-2);max-width:36ch}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.3rem}
.chips li{padding:.38rem .8rem;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(13,32,56,.08);font-size:.84rem;font-weight:600;color:var(--ink-2)}
.svc__more{display:inline-flex;align-items:center;gap:.6rem;margin-top:auto;padding-top:1rem;font-weight:650;font-size:.95rem;color:var(--ink)}
.svc__more span{display:inline-block;overflow:hidden}
.svc__more span i{display:inline-block;font-style:normal;transform:translate3d(-104%,0,0);opacity:0;transition:transform .6s var(--ease-out),opacity .4s}
.svc__more b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;flex:0 0 auto;transition:transform .6s var(--ease-out),background-color .3s}
.svc__more b svg{width:18px;height:18px}
.svc:hover .svc__more span i,.svc:focus-within .svc__more span i{transform:none;opacity:1}
.svc:hover .svc__more b{transform:rotate(-35deg) scale(1.06)}
.svc__media{position:relative;flex:1;min-height:0}

/* media frames */
.frame{position:relative;overflow:hidden;border-radius:var(--r-lg);background:#fff}
.frame img{width:100%;height:100%;object-fit:cover;transform:translate3d(0,var(--py,0),0) scale(1.12);transition:transform .9s var(--ease-out)}
.svc:hover .frame img{transform:translate3d(0,var(--py,0),0) scale(1.17)}

/* Zoho: split, image-led with product marks */
.svc--zoho{--hue:var(--h-zoho);--tint:linear-gradient(135deg,#fff4ea 0%,#fde9de 100%);flex-direction:row}
.svc--zoho .svc__body{flex:0 0 44%}
.svc--zoho .svc__media{display:flex;align-items:center;padding:clamp(26px,2.6vw,48px) 0 clamp(26px,2.6vw,48px) 0}
.svc--zoho .frame{position:absolute;top:13%;bottom:13%;left:4%;right:-12%;border-radius:var(--r-lg) 0 0 var(--r-lg);box-shadow:0 30px 60px -30px rgba(120,40,10,.35)}
.svc--zoho .frame img{object-position:30% 50%}
.marks{position:absolute;inset:0;z-index:3;pointer-events:none}
.marks span{position:absolute;display:grid;place-items:center;width:clamp(46px,3.6vw,64px);aspect-ratio:1;border-radius:16px;background:#fff;box-shadow:0 16px 30px -16px rgba(13,32,56,.45);animation:float 7s ease-in-out infinite;animation-delay:var(--fd,0s);animation-play-state:paused}
.marks img{width:58%;height:auto}
.is-playing .marks span,.marks.is-playing span{animation-play-state:running}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}

/* Web: dark editorial panel */
.svc--web{--hue:#6aa7ff;--tint:linear-gradient(160deg,#10294a 0%,#0b1d33 100%);color:#fff}
.svc--dark h3,.svc--dark .svc__more{color:#fff}
.svc--dark .svc__text{color:rgba(255,255,255,.76)}
.svc--dark .chips li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.86)}
.svc--dark .svc__more b{background:#fff;color:var(--ink)}
.svc--web .svc__media{margin:0 clamp(24px,2.3vw,40px) -1px;min-height:clamp(170px,14vw,240px)}
.browser{position:absolute;inset:0 0 0 0;border-radius:16px 16px 0 0;background:#fff;overflow:hidden;box-shadow:0 -10px 40px -10px rgba(0,0,0,.4)}
.browser__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#eef2f7;border-bottom:1px solid #dfe6ee}
.browser__bar i{width:9px;height:9px;border-radius:50%;background:#ff6b5f}.browser__bar i:nth-child(2){background:#f6c54d}.browser__bar i:nth-child(3){background:#35c27a}
.browser__bar span{margin-left:12px;height:16px;flex:0 1 46%;border-radius:8px;background:#fff;border:1px solid #dfe6ee}
.browser .frame{position:absolute;inset:30px 0 0;border-radius:0}
.browser .frame img{object-position:50% 35%}
.ui-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem;border-radius:12px;background:#fff;color:var(--ink);font:600 .78rem/1.2 var(--f-body);box-shadow:0 18px 30px -16px rgba(0,0,0,.5);white-space:nowrap;transition:transform .8s var(--ease-out)}
.ui-chip img{width:20px;height:20px}
.ui-chip small{display:block;font-weight:500;color:var(--muted);font-size:.72rem}
.svc--web .ui-chip--a{right:-6px;top:22%}
.svc--web .ui-chip--b{left:-8px;bottom:18%}
.svc:hover .ui-chip--a{transform:translate3d(-8px,-6px,0)}
.svc:hover .ui-chip--b{transform:translate3d(8px,-4px,0)}

/* Mobile: image-led with offset icon block */
.svc--mobile{--hue:var(--h-mobile);--tint:linear-gradient(160deg,#fff1ed 0%,#fde3dc 100%)}
.svc--mobile .svc__media{margin:0 0 0 clamp(24px,2.3vw,40px);min-height:clamp(170px,13vw,230px)}
.svc--mobile .frame{position:absolute;inset:0 0 0 0;border-radius:var(--r-lg) 0 0 0}
.svc--mobile .frame img{object-position:78% 40%}
.offset-tile{position:absolute;z-index:3;left:-14px;top:-24px;display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:#fff;box-shadow:0 18px 30px -16px rgba(120,30,10,.45);transition:transform .8s var(--ease-out)}
.offset-tile img{width:38px;height:38px}
.svc:hover .offset-tile{transform:translate3d(6px,-6px,0) rotate(-6deg)}

/* WhatsApp: live chat diagram */
.svc--wa{--hue:var(--h-wa);--tint:linear-gradient(160deg,#eefaf2 0%,#dcf3e5 100%)}
.svc--wa .svc__media{padding:0 clamp(24px,2.3vw,40px) clamp(24px,2.3vw,40px)}
.chat{display:grid;gap:.55rem;font-size:.86rem;line-height:1.35}
.chat__msg{max-width:84%;padding:.6rem .8rem;border-radius:14px;background:#fff;box-shadow:0 8px 18px -12px rgba(13,60,30,.4)}
.chat__msg--in{border-top-left-radius:4px}
.chat__msg--out{justify-self:end;background:#d6f8de;border-top-right-radius:4px}
.chat__msg small{display:block;text-align:right;font-size:.7rem;color:#5b7a66;margin-top:.15rem}
.chat__sys{justify-self:center;display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:999px;background:var(--ink);color:#fff;font-size:.74rem;font-weight:600}
.chat__sys img{width:16px;height:16px}
.js .is-playing .chat__msg,.js .is-playing .chat__sys{animation:chat-step 9s var(--ease-out) infinite both;animation-delay:var(--cd,0s)}
@keyframes chat-step{0%{opacity:0;transform:translate3d(0,10px,0) scale(.98)}6%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translate3d(0,-4px,0)}}
.svc__wa-logo{width:44px;height:44px}

/* AI: agent graph */
.svc--ai{--hue:#a68bff;--tint:radial-gradient(120% 90% at 80% 100%,#2a1d6b 0%,#160f3d 60%,#120c31 100%);color:#fff}
.svc--ai .svc__media{min-height:clamp(190px,15vw,260px)}
.graph{position:absolute;inset:0 6% 6%}
.graph svg{width:100%;height:100%;overflow:visible}
.graph .edge{fill:none;stroke:rgba(190,170,255,.35);stroke-width:1.4;vector-effect:non-scaling-stroke}
.graph .flow{fill:none;stroke:#d9caff;stroke-width:2.2;stroke-dasharray:7 100;stroke-dashoffset:7;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.95}
.is-playing .graph .flow{animation:dash-flow 3.4s linear infinite;animation-delay:var(--fd,0s)}
@keyframes dash-flow{to{stroke-dashoffset:-100}}
.gnode{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:.35rem;font:600 .74rem/1.1 var(--f-body);color:rgba(255,255,255,.85);text-align:center;white-space:nowrap}
.gnode i{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(4px)}
.gnode i img{width:24px;height:24px}
.gnode--core i{width:62px;height:62px;border-radius:20px;background:linear-gradient(135deg,#8a6cff,#5b3fd6);border:0;box-shadow:0 0 0 8px rgba(138,108,255,.16),0 0 40px rgba(138,108,255,.55)}
.gnode--core i img{width:34px;height:34px}
.is-playing .gnode--core i{animation:core-pulse 3.4s ease-in-out infinite}
@keyframes core-pulse{0%,100%{box-shadow:0 0 0 8px rgba(138,108,255,.16),0 0 40px rgba(138,108,255,.5)}50%{box-shadow:0 0 0 14px rgba(138,108,255,.06),0 0 60px rgba(138,108,255,.75)}}
.gnode--review i{border-color:rgba(244,198,84,.6)}
.is-playing .gnode--review i{animation:review 6.8s ease-in-out infinite}
@keyframes review{0%,60%,100%{background:rgba(255,255,255,.1)}70%,85%{background:rgba(244,198,84,.3)}}

/* Cloud: horizontal with live status */
.svc--cloud{--hue:var(--h-cloud);--tint:linear-gradient(120deg,#fff6ea 0%,#fdecd6 100%);flex-direction:row;min-height:clamp(360px,26vw,480px)}
.svc--cloud .svc__body{flex:0 0 40%}
.svc--cloud .svc__media{flex:1;padding:clamp(20px,2vw,32px) clamp(20px,2vw,32px) clamp(20px,2vw,32px) 0}
.svc--cloud .frame{position:absolute;inset:clamp(20px,2vw,32px) clamp(20px,2vw,32px) clamp(20px,2vw,32px) 0}
.svc--cloud .frame img{object-position:50% 45%}
.status{display:grid;gap:.45rem;margin-top:.4rem;max-width:380px}
.status li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;padding:.6rem .8rem;border-radius:12px;background:rgba(255,255,255,.7);border:1px solid rgba(13,32,56,.06);font-size:.88rem;font-weight:600;color:var(--ink-2)}
.status li span:last-child{font-weight:500;color:var(--muted);font-size:.8rem}
.status i{width:9px;height:9px;border-radius:50%;background:#1fbf6a;box-shadow:0 0 0 0 rgba(31,191,106,.5)}
.is-playing .status i{animation:ping 2.4s ease-out infinite;animation-delay:var(--sd,0s)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(31,191,106,.55)}70%,100%{box-shadow:0 0 0 9px rgba(31,191,106,0)}}

/* Automation band */
.svc--auto{--hue:#33d1c9;--tint:linear-gradient(120deg,#0b1d33 0%,#0f3340 100%);color:#fff;flex-direction:row;min-height:clamp(300px,21vw,400px)}
.svc--auto .svc__body{flex:0 0 38%}
.svc--auto .svc__media{flex:1;display:flex;align-items:center;padding:clamp(20px,2vw,36px)}

/* pipeline (shared by the automation band and the automation page) */
.pipeline{position:relative;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,34px);align-items:center}
.pipeline__line{position:absolute;left:6%;right:6%;top:50%;height:2px;background:rgba(255,255,255,.16);border-radius:2px}
.pipeline__line::after{content:"";position:absolute;top:-5px;left:0;width:100%;height:12px;background:radial-gradient(circle 6px at 6px 50%,var(--gold-hi) 80%,rgba(244,198,84,.35) 92%,transparent);opacity:0}
.is-playing .pipeline__line::after{animation:travel 5.6s linear infinite}
@keyframes travel{0%{transform:translate3d(0,0,0);opacity:0}6%{opacity:1}92%{opacity:1}100%{transform:translate3d(calc(100% - 12px),0,0);opacity:0}}
.pnode{position:relative;z-index:1;display:grid;gap:.5rem;padding:clamp(12px,1.1vw,18px);border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.pnode img{width:28px;height:28px}
.pnode b{font:650 .9rem/1.2 var(--f-body)}
.pnode small{font-size:.76rem;color:rgba(255,255,255,.6);line-height:1.3}
.pnode em{font:italic 450 .8rem/1 var(--f-accent);color:var(--gold-hi)}
.is-playing .pnode{animation:node-lit 5.6s var(--ease-io) infinite;animation-delay:var(--pd,0s)}
@keyframes node-lit{0%,8%{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.07)}14%,30%{border-color:rgba(244,198,84,.75);background:rgba(244,198,84,.12)}40%,100%{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.07)}}

/* services: responsive compositions */
@media (max-width:1279px){
  .svc--zoho .svc__body{flex-basis:48%}
  .svc--cloud .svc__body{flex-basis:46%}
  .svc--auto{flex-direction:column}
  .svc--auto .svc__body{flex:none}
  .svc--auto .svc__media{flex:none;padding-top:0}
}
@media (max-width:1099px){
  .services__intro{grid-template-columns:1fr}
  .svc-cell{grid-column:span 6}
  .svc-cell--zoho,.svc-cell--cloud,.svc-cell--auto{grid-column:1/-1}
  .svc-cell--web{grid-column:span 6}
  .svc-cell--mobile{grid-column:span 6}
  .svc{min-height:clamp(400px,52vw,520px)}
  .svc--zoho{min-height:clamp(380px,42vw,460px)}
}
@media (max-width:860px){
  .svc--zoho,.svc--cloud{flex-direction:column}
  .svc--zoho .svc__body,.svc--cloud .svc__body{flex-basis:auto}
  .svc--zoho .svc__media{min-height:clamp(220px,46vw,320px);padding:0}
  .svc--zoho .frame{inset:0 0 0 clamp(24px,4vw,40px);top:0;bottom:-1px;left:clamp(24px,4vw,40px);right:0;border-radius:var(--r-lg) 0 0 0}
  .svc--cloud .svc__media{min-height:clamp(200px,44vw,300px);padding:0}
  .svc--cloud .frame{inset:0 0 0 clamp(24px,4vw,40px);border-radius:var(--r-lg) 0 0 0}
  .pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pipeline__line{display:none}
}
@media (max-width:640px){
  .svc-cell,.svc-cell--web,.svc-cell--mobile{grid-column:1/-1}
  .svc{min-height:0}
  .svc--web .svc__media{min-height:200px}
  .svc--mobile .svc__media{min-height:210px}
  .svc--ai .svc__media{min-height:240px}
  .svc__more span i{transform:none;opacity:1}
  .marks span:nth-child(n+5){display:none}
}

/* ==========================================================================
   GLOBAL DELIVERY
   ========================================================================== */
.global{position:relative;padding:0 0 var(--section)}
.principles-wrap{position:relative;z-index:2;margin-top:calc(-1 * clamp(56px,5vw,84px))}
.global__stage{--p:1;position:relative;isolation:isolate;color:#fff;background:var(--navy);min-height:clamp(560px,40vw,860px);display:flex;align-items:stretch;overflow:hidden;clip-path:inset(0 calc((1 - var(--p)) * 3.2%) round calc((1 - var(--p)) * 44px))}
.global__map{position:absolute;inset:-3% 0;z-index:-2;will-change:transform}
.global__map img,.global__map svg{position:absolute;inset:0;width:100%;height:100%}
.global__map img{object-fit:cover;object-position:50% 50%}
.global__net .arc{fill:none;stroke:rgba(255,214,140,.3);stroke-width:1.6}
.global__net .comet{fill:none;stroke:#ffe1a1;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:9 100;stroke-dashoffset:9;opacity:0}
.is-playing .global__net .comet{animation:comet 5.5s var(--ease-io) infinite;animation-delay:var(--cd,0s)}
@keyframes comet{0%{stroke-dashoffset:9;opacity:0}8%{opacity:1}82%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}}
.global__net .city{fill:#ffd27a}
.global__net .ring{fill:none;stroke:#ffd27a;stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0}
.is-playing .global__net .ring{animation:ring 3.2s ease-out infinite;animation-delay:var(--cd,0s)}
@keyframes ring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.global__net .home .city{fill:#fff}
.global__net .home .ring{stroke:#fff}
.global__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,20,37,.92) 0%,rgba(8,20,37,.72) 34%,rgba(8,20,37,.2) 64%,rgba(8,20,37,.35) 100%),linear-gradient(0deg,rgba(8,20,37,.85) 0%,rgba(8,20,37,0) 40%)}
.global__grid{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--gap) calc(var(--gap)*2);align-content:center;padding:clamp(64px,6vw,120px) 0 clamp(110px,9vw,170px)}
.global__copy{max-width:640px}
.global__copy h2{font-size:var(--fs-h2);color:#fff}
.global__copy p{margin-top:clamp(1.2rem,1.6vw,1.8rem);color:rgba(255,255,255,.8);font-size:var(--fs-lead);line-height:1.55;max-width:44ch}
.global__copy .btn{margin-top:clamp(1.6rem,2.4vw,2.6rem)}
.principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.principle{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;padding:clamp(16px,1.5vw,24px);border-radius:var(--r-lg);background:var(--white);border:1px solid rgba(13,32,56,.06);box-shadow:0 30px 60px -34px rgba(13,32,56,.45);transition:transform .6s var(--ease-out),box-shadow .5s}
.principle:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.principle i{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--paper-2)}
.principle i img{width:30px;height:30px;transition:transform .6s var(--ease-out)}
.principle:hover i img{transform:scale(1.1) rotate(-6deg)}
.principle h3{font-size:var(--fs-h4);font-weight:680;letter-spacing:-.015em}
.principle p{margin-top:.2rem;font-size:var(--fs-small);color:var(--muted);line-height:1.4}
@media (max-width:1099px){
  .global__grid{grid-template-columns:1fr}
  .principles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .global__stage{display:block;min-height:0}
  .global__map{position:relative;inset:auto;height:clamp(260px,62vw,420px)}
  .global__shade{background:linear-gradient(180deg,rgba(8,20,37,.35) 0%,rgba(8,20,37,0) 30%,rgba(11,29,51,.85) 80%,var(--navy) 100%)}
  .global__grid{padding-top:0;margin-top:clamp(-120px,-16vw,-60px);padding-bottom:clamp(88px,18vw,120px)}
  .principles-wrap{margin-top:-56px}
}
@media (max-width:600px){
  .principles{grid-template-columns:1fr}
}

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process{padding:var(--section) 0;background:var(--paper-2)}
.process__head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--gap) calc(var(--gap)*2);align-items:end;margin-bottom:clamp(48px,5vw,96px)}
.process__head h2{font-size:var(--fs-h2)}
.process__head p{color:var(--muted);font-size:var(--fs-lead);line-height:1.5;max-width:42ch}
.steps-wrap{--progress:0;position:relative}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.steps__rail{position:absolute;left:calc(12.5% - var(--gap)*.375);right:calc(12.5% - var(--gap)*.375);top:44px;height:2px;background:var(--line-2);border-radius:2px;pointer-events:none}
.steps__rail span{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),#f08a4b);border-radius:inherit;transform-origin:0 50%;transform:scaleX(var(--progress))}
.step{position:relative;display:grid;justify-items:center;text-align:center;gap:.5rem;padding:0 clamp(4px,1vw,16px)}
.step__node{position:relative;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--white);border:1px solid var(--line);box-shadow:0 0 0 10px var(--paper-2);transition:border-color .5s,box-shadow .6s var(--ease-out),transform .6s var(--ease-out)}
.step__node img{width:42px;height:42px;transition:transform .7s var(--ease-out),filter .5s;filter:saturate(.25) opacity(.7)}
.step__num{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line-2);font:700 .78rem/1 var(--f-display);color:var(--muted);transition:background-color .5s,color .5s,border-color .5s}
.step h3{margin-top:1.2rem;font-size:var(--fs-h3)}
.step__sub{font:italic 450 var(--fs-note)/1.25 var(--f-accent);color:var(--muted)}
.step__text{margin-top:.4rem;color:var(--ink-2);font-size:var(--fs-small);line-height:1.55;max-width:30ch}
.step.is-active .step__node{border-color:var(--gold);box-shadow:0 0 0 10px var(--paper-2),0 18px 40px -18px rgba(170,110,10,.55);transform:translateY(-4px)}
.step.is-active .step__node img{filter:none;transform:scale(1.06)}
.step.is-active .step__num{background:var(--ink);border-color:var(--ink);color:#fff}
@media (max-width:1099px){
  .process__head{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,5vw,56px) var(--gap)}
  .steps__rail{display:none}
  .step{grid-template-columns:auto 1fr;justify-items:start;text-align:left;column-gap:1.2rem;align-items:start;padding:clamp(20px,2.4vw,28px);border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line)}
  .step__node{grid-row:span 4;width:72px;height:72px;box-shadow:none}
  .step.is-active .step__node{box-shadow:0 14px 30px -16px rgba(170,110,10,.5)}
  .step__node img{width:36px;height:36px}
  .step h3{margin-top:.2rem}
}
@media (max-width:640px){
  .steps{grid-template-columns:1fr;gap:0;padding-left:0}
  .steps__rail{display:block;left:35px;right:auto;top:36px;bottom:36px;width:2px;height:auto}
  .steps__rail span{transform-origin:50% 0;transform:scaleY(var(--progress));background:linear-gradient(180deg,var(--gold),#f08a4b)}
  .step{background:none;border:0;padding:0 0 clamp(34px,8vw,48px);column-gap:1.1rem}
  .step:last-child{padding-bottom:0}
  .step__node{width:72px;height:72px;box-shadow:0 0 0 8px var(--paper-2)}
  .step.is-active .step__node{box-shadow:0 0 0 8px var(--paper-2),0 14px 30px -16px rgba(170,110,10,.5)}
}

/* ==========================================================================
   TRUST
   ========================================================================== */
.trust{padding:var(--section) 0}
.trust__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap) calc(var(--gap)*2);align-items:center}
.trust__copy h2{font-size:var(--fs-h2)}
.trust__copy>p{margin-top:1.2rem;color:var(--muted);font-size:var(--fs-lead);max-width:36ch}
.trust__facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:clamp(28px,3vw,48px);background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.trust__facts div{background:var(--paper);padding:clamp(16px,1.4vw,22px)}
.trust__facts b{display:block;font:700 var(--fs-h4)/1.15 var(--f-display);letter-spacing:-.02em}
.trust__facts span{display:block;margin-top:.3rem;font-size:var(--fs-small);color:var(--muted);line-height:1.4}
.trust__visual{position:relative;padding-bottom:clamp(80px,8vw,140px)}
.trust__visual .frame{aspect-ratio:16/10;border-radius:var(--r-xl)}
.trust__visual .frame img{object-position:50% 40%}
.quote{position:absolute;left:clamp(-60px,-4vw,-20px);right:18%;bottom:0;padding:clamp(24px,2.6vw,44px);border-radius:var(--r-xl);background:var(--navy);color:#fff;box-shadow:0 40px 80px -40px rgba(13,32,56,.6)}
.quote p{font:italic 440 clamp(1.25rem,1rem + 1vw,2rem)/1.32 var(--f-accent);letter-spacing:-.005em}
.quote footer{display:flex;align-items:center;gap:.9rem;margin-top:1.4rem;font-size:var(--fs-small)}
.quote footer b{display:block;font-weight:650}
.quote footer span{color:rgba(255,255,255,.65)}
.quote__mark{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--gold-hi);color:var(--ink);font:760 1.1rem/1 var(--f-display)}
@media (max-width:1099px){
  .trust__grid{grid-template-columns:1fr}
  .trust__visual{max-width:900px}
  .quote{left:clamp(16px,4vw,40px);right:clamp(16px,8vw,120px)}
}
@media (max-width:600px){
  .trust__visual{padding-bottom:0}
  .trust__visual .frame{aspect-ratio:4/3}
  .quote{position:relative;left:auto;right:auto;margin:-48px 12px 0}
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{padding:0 0 var(--section)}
.about__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap) calc(var(--gap)*2);align-items:start;padding-top:clamp(48px,5vw,96px);border-top:1px solid var(--line)}
.about__head{position:sticky;top:calc(var(--header-h) + 32px)}
.about__head h2{font-size:var(--fs-h2)}
.about__head p{margin-top:1.2rem;color:var(--muted);max-width:38ch}
.values{display:grid;grid-template-columns:1fr 1fr;gap:0}
.value{position:relative;padding:clamp(24px,2.4vw,40px) clamp(10px,2vw,36px) clamp(28px,2.8vw,44px) 0}
.value:nth-child(even){padding-left:clamp(20px,2.4vw,40px);border-left:1px solid var(--line)}
.value:nth-child(n+3){border-top:1px solid var(--line)}
.value img{width:48px;height:48px;margin-bottom:1.2rem;transition:transform .7s var(--ease-out)}
.value:hover img{transform:translateY(-4px) rotate(-5deg)}
.value h3{font-size:var(--fs-h3)}
.value p{margin-top:.6rem;color:var(--ink-2);max-width:32ch}
@media (max-width:1099px){
  .about__grid{grid-template-columns:1fr}
  .about__head{position:static}
}
@media (max-width:600px){
  .values{grid-template-columns:1fr}
  .value,.value:nth-child(even){padding:26px 0;border-left:0;border-top:1px solid var(--line)}
  .value:first-child{border-top:0}
}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{padding:0 0 clamp(20px,2vw,32px)}
.cta__stage{--p:1;position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--navy);border-radius:var(--r-xl);width:calc(100% - 2 * clamp(10px,1.2vw,24px));margin-inline:auto;clip-path:inset(0 calc((1 - var(--p)) * 2.5%) round var(--r-xl))}
.cta__bg{position:absolute;inset:-10% 0;z-index:-1}
.cta__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;opacity:.42}
.cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,29,51,.96) 0%,rgba(11,29,51,.82) 45%,rgba(11,29,51,.45) 100%)}
.cta__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap) calc(var(--gap)*2);align-items:end;padding:clamp(72px,8vw,160px) 0}
.cta h2{font-size:clamp(2.5rem,1rem + 4.6vw,7rem);line-height:.96;letter-spacing:-.04em;color:#fff}
.cta__copy>p{margin-top:1.4rem;font-size:var(--fs-lead);color:rgba(255,255,255,.82);max-width:40ch}
.cta__actions{display:grid;gap:.8rem;justify-items:start}
.cta__contact{display:grid;gap:.25rem;margin-top:1.4rem;font-size:var(--fs-small);color:rgba(255,255,255,.7)}
.cta__contact a{color:#fff;font-weight:600}
.cta .btn--outline{--fg:#fff;border-color:rgba(255,255,255,.35)}
.cta .btn--outline:hover{border-color:#fff}
@media (max-width:860px){
  .cta__grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .cta__actions,.cta__actions .btn{width:100%}
  .cta__actions .btn{justify-content:space-between}
  .cta__actions .btn--outline{justify-content:center}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--navy);color:rgba(255,255,255,.78);padding:clamp(64px,6vw,110px) 0 28px;margin-top:clamp(-40px,-2vw,-20px);padding-top:calc(clamp(64px,6vw,110px) + 40px)}
.footer__grid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.6fr));gap:var(--gap) calc(var(--gap)*1.5)}
.footer__brand .brand{color:#fff}
.footer__brand p{margin-top:1rem;max-width:30ch;font:italic 450 var(--fs-note)/1.4 var(--f-accent);color:rgba(255,255,255,.7)}
.site-footer h2{font:650 .95rem/1.2 var(--f-body);letter-spacing:0;color:#fff;margin-bottom:1rem}
.site-footer ul{display:grid;gap:.55rem}
.site-footer a{text-decoration:none;color:rgba(255,255,255,.75);transition:color .25s}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:clamp(48px,5vw,88px);padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:.88rem;color:rgba(255,255,255,.55)}
@media (max-width:980px){.footer__grid{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}}
@media (max-width:480px){.footer__grid{grid-template-columns:1fr 1fr;column-gap:20px}.footer__grid>div:last-child{grid-column:1/-1}}

/* ==========================================================================
   SERVICE PAGES
   ========================================================================== */
.page{--hue:var(--ink);--tint:var(--paper-2)}
.page--zoho{--hue:var(--h-zoho);--tint:var(--t-zoho)}
.page--web{--hue:var(--h-web);--tint:var(--t-web)}
.page--mobile{--hue:var(--h-mobile);--tint:var(--t-mobile)}
.page--wa{--hue:var(--h-wa);--tint:var(--t-wa)}
.page--ai{--hue:var(--h-ai);--tint:var(--t-ai)}
.page--cloud{--hue:var(--h-cloud);--tint:var(--t-cloud)}
.page--auto{--hue:var(--h-auto);--tint:var(--t-auto)}

.page-hero{position:relative;padding:calc(var(--header-h) + clamp(28px,3.4vw,64px)) 0 clamp(64px,6vw,120px);background:linear-gradient(180deg,var(--tint) 0%,var(--paper) 100%);overflow:hidden}
.page-hero::before{content:"";position:absolute;width:70vw;height:70vw;max-width:1100px;max-height:1100px;right:-18vw;top:-30vw;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--hue) 18%,transparent),transparent);pointer-events:none}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:var(--fs-small);color:var(--muted);margin-bottom:clamp(24px,3vw,56px)}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs li{display:flex;align-items:center;gap:.5rem}
.crumbs li+li::before{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);opacity:.6}
.page-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--gap) calc(var(--gap)*2.2);align-items:center}
.page-hero h1{font-size:var(--fs-h1);line-height:1;letter-spacing:-.035em}
.page-hero .lead{margin-top:clamp(1.2rem,1.6vw,1.8rem);font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);max-width:46ch}
.page-hero .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.6rem,2.4vw,2.4rem)}
.aside-note{display:grid;grid-template-columns:3px 1fr;gap:1rem;margin-top:clamp(28px,3vw,48px);max-width:52ch}
.aside-note::before{content:"";border-radius:3px;background:var(--hue)}
.aside-note strong{display:block;font:650 var(--fs-body)/1.3 var(--f-body);margin-bottom:.3rem}
.aside-note p{color:var(--muted);font-size:var(--fs-small);line-height:1.55}
@media (max-width:1099px){.page-hero__grid{grid-template-columns:1fr}}
@media (max-width:600px){.page-hero .actions{display:grid}.page-hero .actions .btn{justify-content:space-between}.page-hero .actions .btn--outline{justify-content:center}}

/* hero visuals */
.vis{position:relative;aspect-ratio:15/11;width:100%;container-type:inline-size}
.vis__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.vis__svg .edge{fill:none;stroke:color-mix(in srgb,var(--hue) 40%,#c9d3df);stroke-width:1.5;stroke-dasharray:4 6;vector-effect:non-scaling-stroke}
.is-playing .vis__svg .edge{animation:dash-move 1.6s linear infinite}
@keyframes dash-move{to{stroke-dashoffset:-20}}
.vis__frame{position:absolute;overflow:hidden;border-radius:clamp(14px,2.6cqi,26px);background:#fff;box-shadow:0 40px 80px -40px rgba(13,32,56,.45),0 0 0 1px rgba(13,32,56,.05)}
.vis__frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.06) translate3d(var(--vx,0),var(--vy,0),0);transition:transform 1.2s var(--ease-out)}
.vfloat{position:absolute;z-index:2;transform:translate(-50%,-50%)}
.vfloat>div{display:flex;align-items:center;gap:clamp(6px,1.4cqi,12px);padding:clamp(7px,1.6cqi,12px) clamp(9px,2cqi,14px);border-radius:clamp(10px,2.2cqi,16px);background:#fff;box-shadow:0 22px 40px -22px rgba(13,32,56,.5),0 0 0 1px rgba(13,32,56,.05);font:600 clamp(10px,2.3cqi,14px)/1.25 var(--f-body);color:var(--ink);white-space:nowrap;transform:translate3d(var(--fx,0),var(--fy,0),0);transition:transform 1s var(--ease-out)}
.vfloat img{width:clamp(18px,4.4cqi,30px);height:auto;flex:0 0 auto}
.vfloat small{display:block;font-weight:500;color:var(--muted);font-size:.86em}
.is-playing .vfloat>div{animation:float 7s ease-in-out infinite;animation-delay:var(--fd,0s)}
.vtile>div{display:grid;place-items:center;width:clamp(42px,11cqi,72px);aspect-ratio:1;padding:0;border-radius:clamp(12px,3cqi,20px)}
.vtile img{width:58%}
.vtile span{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.9);font-size:clamp(9px,2cqi,12px);font-weight:600;color:var(--ink-2);white-space:nowrap}
.vis--chat .phone{position:absolute;left:12%;top:1%;width:40%;height:98%;border-radius:clamp(20px,5cqi,38px);background:#0f1b2a;padding:clamp(6px,1.4cqi,10px);box-shadow:0 50px 90px -40px rgba(10,40,25,.55)}
.phone__screen{height:100%;border-radius:clamp(15px,4cqi,30px);background:#efe9e1 linear-gradient(180deg,#eae4db,#efe9e1);overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.phone__top{display:flex;align-items:center;gap:8px;padding:clamp(8px,2cqi,14px);background:#0f6b4a;color:#fff;font:600 clamp(10px,2.3cqi,14px)/1.2 var(--f-body)}
.phone__top img{width:clamp(18px,4.4cqi,28px);height:auto;background:#fff;border-radius:50%;padding:2px}
.phone__top small{display:block;font-weight:400;opacity:.75;font-size:.82em}
.phone .chat{padding:clamp(8px,2.4cqi,16px);font-size:clamp(10px,2.3cqi,14px);align-content:end}
.vis--chat .vfloat{left:78%}

/* capability grid */
.section{padding:var(--section) 0}
.section--tint{background:var(--paper-2)}
.section__head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--gap) calc(var(--gap)*2);align-items:end;margin-bottom:clamp(36px,4vw,72px)}
.section__head h2{font-size:var(--fs-h2)}
.section__head>p{color:var(--muted);font-size:var(--fs-lead);line-height:1.5;max-width:44ch}
@media (max-width:1099px){.section__head{grid-template-columns:1fr}}
.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.caps[data-items="7"],.caps[data-items="8"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.caps[data-items="7"] .cap:first-child{grid-column:span 2}
.cap{position:relative;display:flex;flex-direction:column;gap:.7rem;padding:clamp(22px,2.2vw,36px);border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line);transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .4s;overflow:hidden}
.cap::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--hue);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-out)}
.cap:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:transparent}
.cap:hover::before{transform:scaleX(1)}
.cap__icon{display:grid;place-items:center;width:clamp(58px,4.4vw,72px);aspect-ratio:1;border-radius:18px;background:var(--tint);margin-bottom:.6rem;transition:transform .7s var(--ease-out)}
.cap__icon img{width:58%;height:auto}
.cap:hover .cap__icon{transform:rotate(-6deg) scale(1.05)}
.cap h3{font-size:var(--fs-h4);font-weight:680;letter-spacing:-.018em}
.cap__txt{display:grid;gap:.55rem}
.cap p{color:var(--ink-2);font-size:var(--fs-small);line-height:1.6;max-width:42ch}
.caps[data-items="7"] .cap:first-child{background:linear-gradient(140deg,var(--tint),#fff 75%);flex-direction:row;align-items:flex-start;gap:1.4rem}
.caps[data-items="7"] .cap:first-child .cap__icon{width:clamp(80px,6vw,104px);background:#fff;box-shadow:0 16px 32px -18px rgba(13,32,56,.35);flex:0 0 auto}
.caps[data-items="7"] .cap:first-child h3{font-size:var(--fs-h3)}
.caps[data-items="7"] .cap:first-child p{font-size:var(--fs-body)}
@media (max-width:1279px){.caps[data-items="7"],.caps[data-items="8"]{grid-template-columns:repeat(3,minmax(0,1fr))}.caps[data-items="7"] .cap:first-child{grid-column:1/-1}.caps[data-items="8"] .cap:nth-child(n+7){grid-column:span 1}.caps[data-items="8"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1099px){.caps,.caps[data-items="7"],.caps[data-items="8"]{grid-template-columns:repeat(2,minmax(0,1fr))}.caps[data-items="7"] .cap:first-child{grid-column:1/-1}}
@media (max-width:600px){.caps,.caps[data-items="7"],.caps[data-items="8"]{grid-template-columns:1fr}.cap,.caps[data-items="7"] .cap:first-child{flex-direction:row;align-items:flex-start;gap:1rem}.cap__icon,.caps[data-items="7"] .cap:first-child .cap__icon{width:54px;margin:0;flex:0 0 auto}.cap__txt{min-width:0}}

/* use cases */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line-2)}
.case{position:relative;padding:clamp(28px,3vw,52px) clamp(18px,2.6vw,44px) clamp(28px,3vw,48px) 0}
.case+.case{padding-left:clamp(18px,2.6vw,44px);border-left:1px solid var(--line-2)}
.case::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--hue);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s var(--ease-out);transition-delay:var(--d,0ms)}
.case.is-in::before,.is-in .case::before{transform:scaleX(1)}
.case img{width:clamp(48px,3.6vw,60px);height:auto;margin-bottom:1.4rem}
.case h3{font-size:var(--fs-h3)}
.case p{margin-top:.7rem;color:var(--ink-2);max-width:36ch}
@media (max-width:860px){.cases{grid-template-columns:1fr}.case,.case+.case{padding:28px 0;border-left:0;border-top:1px solid var(--line-2)}.case:first-child{border-top:0}}

/* delivery approach + related */
.approach{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap) calc(var(--gap)*2);align-items:start}
.approach h2{font-size:var(--fs-h2)}
.approach__copy>p{margin-top:1.2rem;color:var(--ink-2);font-size:var(--fs-lead);line-height:1.55;max-width:46ch}
.mini-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:clamp(28px,3vw,44px)}
.mini-steps li{position:relative;padding:14px 14px 16px;border-radius:14px;background:var(--white);border:1px solid var(--line)}
.mini-steps b{display:block;font:700 .95rem/1.2 var(--f-display);letter-spacing:-.01em}
.mini-steps span{display:block;margin-top:.25rem;font-size:.82rem;color:var(--muted)}
.mini-steps i{display:block;font:700 .72rem/1 var(--f-display);color:var(--hue);margin-bottom:.6rem;font-style:normal}
.related h3{font:italic 450 var(--fs-note)/1.3 var(--f-accent);color:var(--muted);margin-bottom:1rem;letter-spacing:0;font-stretch:100%}
.related ul{display:grid;gap:10px}
.related a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:clamp(14px,1.4vw,20px) clamp(16px,1.6vw,24px);border-radius:16px;background:var(--white);border:1px solid var(--line);text-decoration:none;transition:transform .5s var(--ease-out),border-color .3s,box-shadow .5s}
.related a:hover{transform:translateX(6px);border-color:var(--ink);box-shadow:0 18px 36px -24px rgba(13,32,56,.4)}
.related a img{width:40px;height:40px}
.related a b{font:650 var(--fs-body)/1.25 var(--f-body)}
.related a small{display:block;color:var(--muted);font-size:.85rem;font-weight:400}
.related a svg{width:20px;height:20px;transition:transform .5s var(--ease-out)}
.related a:hover svg{transform:translateX(4px)}
@media (max-width:1099px){.approach{grid-template-columns:1fr}}
@media (max-width:600px){.mini-steps{grid-template-columns:1fr 1fr}}

/* Zoho: core products */
.core{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.core li{display:flex;align-items:center;gap:1rem;padding:clamp(16px,1.6vw,24px);border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line);transition:transform .5s var(--ease-out),box-shadow .5s}
.core li:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.core img{width:48px;height:48px;object-fit:contain;flex:0 0 auto}
.core b{display:block;font:650 var(--fs-body)/1.2 var(--f-body)}
.core small{display:block;color:var(--muted);font-size:.86rem;line-height:1.35;margin-top:.2rem}
@media (max-width:1099px){.core{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.core{grid-template-columns:1fr}}

/* Zoho: full-width, naturally scrolling 108-product catalogue. No nested scrolling. */
.catalogue{margin:0}
.catalogue__shell{position:relative;border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -50px rgba(13,32,56,.35);overflow:hidden}
.catalogue__shell picture{display:block}
.catalogue__img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}
.catalogue figcaption{margin-top:12px;font-size:.86rem;color:var(--muted)}
.cat-count{display:flex;align-items:baseline;gap:.6rem}
.cat-count strong{font:760 clamp(3rem,2rem + 3vw,5.6rem)/.9 var(--f-display);letter-spacing:-.05em;color:var(--h-zoho)}
.cat-count span{font:italic 450 var(--fs-note)/1.2 var(--f-accent);color:var(--muted)}

/* Zoho: category directory */
.directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(40px,4vw,72px)}
.dir{padding:clamp(20px,2vw,30px);border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line)}
.dir header{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.dir header img{width:32px;height:32px}
.dir h3{font-size:var(--fs-h4);font-weight:680;letter-spacing:-.015em}
.dir header span{margin-left:auto;font:700 .8rem/1 var(--f-display);color:var(--muted)}
.dir ul{display:flex;flex-wrap:wrap;gap:6px}
.dir li{padding:.32rem .65rem;border-radius:8px;background:var(--paper-2);font-size:.84rem;color:var(--ink-2)}
@media (max-width:1279px){.directory{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.directory{grid-template-columns:1fr}}
.legal-note{margin-top:clamp(28px,3vw,48px);padding:18px 20px;border-radius:14px;background:var(--paper-2);font-size:.86rem;color:var(--muted);line-height:1.55;max-width:96ch}

/* page CTA */
.page-cta{padding:0 0 clamp(20px,2vw,32px)}

/* thread: a line drawn between sections */
.thread{display:block;width:1px;height:clamp(56px,6vw,110px);margin:0 0 clamp(28px,3vw,48px) 0;background:linear-gradient(var(--line-2),var(--gold));transform-origin:50% 0;transition:transform 1.2s var(--ease-out)}
.thread::after{content:"";display:block;width:7px;height:7px;margin:calc(100% - 3px) 0 0 -3px;border-radius:50%;background:var(--gold);position:relative;top:100%}
.js .thread[data-reveal]:not(.is-in){transform:scaleY(0)}

/* ==========================================================================
   REVEAL SYSTEM — hidden states only exist when JS is running
   ========================================================================== */
[data-reveal]{transition:opacity .9s var(--ease-out),transform 1.15s var(--ease-out),clip-path 1.3s var(--ease-out);transition-delay:var(--d,0ms)}
.js [data-reveal="rise"]:not(.is-in){opacity:0;transform:translate3d(0,46px,0)}
.js [data-reveal="left"]:not(.is-in){opacity:0;transform:translate3d(-70px,0,0)}
.js [data-reveal="right"]:not(.is-in){opacity:0;transform:translate3d(70px,0,0)}
.js [data-reveal="zoom"]:not(.is-in){opacity:0;transform:scale(.9)}
.js [data-reveal="fade"]:not(.is-in){opacity:0}
.js [data-reveal="wipe"]:not(.is-in){clip-path:inset(0 100% 0 0)}
[data-reveal="wipe"].is-in{clip-path:inset(0 0 0 0)}
.js [data-reveal="mask"]:not(.is-in){clip-path:inset(14% 10% 14% 10% round 28px)}
[data-reveal="mask"].is-in{clip-path:inset(0 0 0 0 round 0)}
[data-reveal="mask"] img{transition:transform 1.6s var(--ease-out)}
.js [data-reveal="mask"]:not(.is-in) img{transform:scale(1.25)}
.js [data-stagger]>*{transition:opacity .8s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(var(--i,0) * 85ms + var(--d,0ms))}
.js [data-stagger]:not(.is-in)>*{opacity:0;transform:translate3d(0,34px,0)}
.js [data-stagger="zoom"]:not(.is-in)>*{transform:scale(.88)}
.js [data-stagger="side"]:not(.is-in)>*:nth-child(odd){transform:translate3d(-40px,0,0)}
.js [data-stagger="side"]:not(.is-in)>*:nth-child(even){transform:translate3d(40px,0,0)}
/* stagger cells keep their own transforms after reveal */
.svc-grid[data-stagger]>*{transition:opacity .9s var(--ease-out),transform 1.2s var(--ease-out)}

/* ==========================================================================
   REDUCED MOTION — essential content only, no ornamental motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js [data-reveal],.js [data-stagger]>*,.js [data-reveal] .ln>span{opacity:1!important;transform:none!important;clip-path:none!important}
  .hero__light{display:none}
  .chat__msg,.chat__sys{opacity:1;transform:none}
  .global__stage,.cta__stage{clip-path:none}
}

/* small screens: horizontal entrance offsets would widen the mobile layout viewport, so enter vertically */
@media (max-width:860px){
  .js [data-reveal="left"]:not(.is-in),.js [data-reveal="right"]:not(.is-in){transform:translate3d(0,40px,0)}
  .js [data-stagger="side"]:not(.is-in)>*:nth-child(odd),.js [data-stagger="side"]:not(.is-in)>*:nth-child(even){transform:translate3d(0,34px,0)}
}
@media (max-width:600px){
  .vis{aspect-ratio:1/1}
  .vis--chat .phone{left:4%;width:56%}
  .vis--chat .vfloat{left:74%}
  .vis--chat .vis__frame{left:34%!important;width:66%!important}
}
@media (max-width:600px){.vis--flow{aspect-ratio:4/3}}

/* === Thousand Flow useful-resources / SEO content. Maintains original design. === */
.tf-resource-section,.tf-faq-section{padding:clamp(60px,7vw,112px) 0;background:var(--paper)}
.tf-resource-section h2,.tf-faq-section h2{font-size:clamp(1.8rem,2.8vw,3.5rem);max-width:920px;line-height:1.15}
.tf-resource-intro{max-width:72ch;margin:1.2rem 0 2.1rem;color:var(--ink-2);font-size:1.1rem}
.tf-resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:2rem}
.tf-resource-card{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.5vw,38px);transition:border-color .25s,transform .25s,box-shadow .25s}
.tf-resource-card:hover,.tf-resource-card:focus-within{border-color:#a6bad0;transform:translateY(-2px);box-shadow:0 15px 35px -25px rgba(13,32,56,.35)}
.tf-resource-card small{display:block;color:var(--blue);font:700 .8rem/1.4 var(--f-body);letter-spacing:.04em;text-transform:uppercase}
.tf-resource-card h2,.tf-resource-card h3{font-size:clamp(1.2rem,1.5vw,1.75rem);line-height:1.23;margin:.7rem 0 1rem}
.tf-resource-card p{color:var(--muted);font-size:.96rem;line-height:1.65}
.tf-resource-card span,.tf-resource-card-more{font-weight:700;color:var(--blue);text-decoration:none}
.tf-resource-card-more{display:inline-block;margin-top:1rem}
.tf-resource-browse,.tf-faq-read{margin-top:1.7rem}.tf-resource-browse a,.tf-faq-read a{font-weight:700;color:var(--blue)}
.tf-faq-section{background:var(--paper-2)}.tf-faq-list{margin-top:2.1rem;max-width:1000px}
.tf-faq-item{border-top:1px solid var(--line-2);padding:1rem .15rem}
.tf-faq-item:last-child{border-bottom:1px solid var(--line-2)}
.tf-faq-item summary{cursor:pointer;font:680 clamp(1.05rem,1.4vw,1.28rem)/1.4 var(--f-display);padding:.3rem 2rem .3rem 0;position:relative;list-style:none}
.tf-faq-item summary::-webkit-details-marker{display:none}
.tf-faq-item summary::after{content:'+';position:absolute;right:.3rem;top:0;color:var(--blue);font-size:1.5rem}
.tf-faq-item[open] summary::after{content:'−'}
.tf-faq-item p{padding:.7rem 1.7rem .5rem 0;color:var(--ink-2);max-width:75ch;line-height:1.75}
.tf-guide-page{padding:calc(var(--header-h) + 42px) 0 100px}
.tf-guide-crumb{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;margin:0 0 3rem;color:var(--muted);font-size:.89rem}
.tf-guide-crumb li+li::before{content:'/';margin-right:.65rem;opacity:.55}.tf-guide-crumb a{color:var(--blue)}
.tf-guide-heading{max-width:1000px;margin-bottom:clamp(44px,5vw,88px)}
.tf-guide-heading h1{font-size:clamp(2.25rem,4.6vw,5.2rem);line-height:1.05}
.tf-guide-lead{font-size:clamp(1.08rem,1.5vw,1.4rem);line-height:1.65;max-width:800px;margin-top:1.4rem;color:var(--ink-2)}
.tf-guide-meta{font-size:.85rem;color:var(--muted);margin-top:1.3rem}
.tf-guide-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(230px,320px);gap:clamp(35px,6vw,100px);align-items:start}
.tf-guide-section{padding:0 0 2.3rem;margin-bottom:2.3rem;border-bottom:1px solid var(--line)}
.tf-guide-section h2{font-size:clamp(1.55rem,2vw,2.2rem);line-height:1.2;margin:0 0 1.1rem}
.tf-guide-section h3{font-size:clamp(1.1rem,1.35vw,1.4rem);line-height:1.3;margin:1.6rem 0 .55rem}
.tf-guide-section p{color:var(--ink-2);margin:.5rem 0 1rem;line-height:1.8}
.tf-guide-sidebar{position:sticky;top:calc(var(--header-h) + 25px);border:1px solid var(--line);background:#fff;padding:1.6rem;border-radius:var(--r-lg)}
.tf-guide-sidebar h2{font-size:1.3rem;line-height:1.25;margin-bottom:1.3rem}
.tf-guide-sidebar ul li{padding:.7rem 0;border-top:1px solid var(--line)}.tf-guide-sidebar a{color:var(--ink-2);text-decoration:none}.tf-guide-sidebar a:hover{color:var(--blue);text-decoration:underline}
.tf-checklist{list-style:none;margin-top:1.3rem;display:grid;gap:.9rem}
.tf-checklist li{padding:.45rem 0 .45rem 2.1rem;position:relative;color:var(--ink-2)}
.tf-checklist li::before{content:'✓';position:absolute;left:0;color:#168f59;font-weight:800}
.tf-guide-next{margin-top:3.5rem;padding:clamp(22px,3.5vw,50px);background:#e8eff7;border-radius:var(--r-lg);max-width:1150px}
.tf-guide-next h2{font-size:clamp(1.4rem,2vw,2.4rem);margin-bottom:1rem}
.tf-guide-next p{max-width:70ch;margin-bottom:1.2rem;color:var(--ink-2)}
.tf-guide-next a{color:#1755a3;font-weight:750}
.tf-guide-buttons{display:flex;flex-wrap:wrap;gap:1.2rem}
.tf-resource-grid--hub{margin:2.5rem 0 3rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.tf-resource-grid--hub .tf-resource-card h2{font-size:clamp(1.25rem,1.7vw,1.8rem)}
.tf-resource-grid--hub .tf-resource-card h2 a{color:inherit;text-decoration:none}
@media(max-width:900px){.tf-guide-layout{grid-template-columns:1fr}.tf-guide-sidebar{position:static}.tf-guide-page{padding-bottom:70px}}
@media(max-width:620px){.tf-resource-grid,.tf-resource-grid--hub{grid-template-columns:1fr}.tf-faq-section,.tf-resource-section{padding:65px 0}.tf-guide-crumb{margin-bottom:2rem}}