/* ===========================================================================
   1. DESIGN TOKENS
   =========================================================================== */
:root{
  --blue:#1B3691;
  --blue-deep:#162C76;
  --ink:#0B1B3A;
  --cyan:#2BB2E7;
  --cyan-ink:#0E7CAE;      /* cyan that passes contrast as text */
  --accent:#00D4FF;

  --paper:#FFFFFF;
  --paper-2:#F5F9FF;
  --paper-3:#EEF4FF;

  --text:#111827;
  --muted:#6B7280;
  --muted-2:#767F8F;
  --line:#E4EAF4;
  --line-soft:#EDF1F9;

  --r-sm:8px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;

  /* layered shadows read as depth rather than a single grey blur */
  --sh-1:0 1px 2px rgba(11,27,58,.04), 0 4px 12px rgba(11,27,58,.04);
  --sh-2:0 1px 2px rgba(11,27,58,.04), 0 8px 18px rgba(11,27,58,.05), 0 22px 48px rgba(11,27,58,.08);
  --sh-3:0 2px 6px rgba(11,27,58,.05), 0 14px 34px rgba(11,27,58,.07), 0 40px 80px rgba(11,27,58,.10);
  --sh-btn:inset 0 1px 0 rgba(255,255,255,.16), 0 4px 12px rgba(27,54,145,.18);
  --sh-btn-h:inset 0 1px 0 rgba(255,255,255,.2), 0 10px 26px rgba(27,54,145,.26);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* one motion language: three durations, two curves, used everywhere */
  --t-micro:.3s;     /* hover, focus, colour  */
  --t-move:.7s;      /* entrances, reveals    */
  --t-slide:.85s;    /* carousel travel       */

  --logo:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALAAAAC/CAMAAABpP6a5AAAA/1BMVEXY4vDo5+Qhq+SRyuCy5/huxulUZ6diutwjTJ2ms8nz8u6Yn7ii2/Hj6O8hO5J4hrC0uOCRnsesrLemsdJgc7F0hbpsdat///9/f38fH38AAP8Af38farQAf/9Qw++31uxmZsx/n79/qtR/kMCBkL4aNY8AAAArs+f+/v76+vrX19b3+Pjj4uLHycrt7e0QLIr19PPn5+fq6uosRJX29fG4w8tLuOI7Upzr6/Tk3NlSZqWOmLZFW6F/f//L5vLp6+8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQeKjKAAAAQHRSTlMU7P7rCefk/fn8rv2cW/79CJkEcbOpBAICAwECAwK7XgUIBpir/gD+DC/+TfL+lf5wzbD9i/768A7+9P7wAoBumm/QzQAACr9JREFUeNrt3QmTorgXAPDggdqOR9vHzN7/Y9OGS0BAUXt2vv+32nDJFZRc4Fbtq62tqdke/e2bRwLkEcDHPyzAv+DHBf/yy6/v7++b9WazWa9HozX+1xqh2o8hNEoDjEaEX5KD8EHM4J9++t86RElolQCo+k2kn2oTCJHNlOCff13HAGOxeHl5xvH2+qbm8ewstMr3APTl99/HxBhW4ssX/E8SfzmGEaO5wD+/48Rqi5e3V/XoecvlEtZi9vSjLMZ/YDcebKnjMB76jkEgtwe/49xqL2+qR3AWxEpZjJDhuyxibB7uYzIb+D8h0v54nd7EksT4f9IxlQmTGJN9p5rkdmB8kGkvqgfbRCzOPxZpxt7UGcXboesbWogowd8B0p5bJJeY4yjF7OLBWMFitKEBb9Y4u1NIEULFW1zJxRq7C/4vQi8qpAuR4u1WKYnB3fQuXpcQChCf+MTtwLganj3IECLFg7G5N64fBu6kV4VsIVQ8NP3rhwEJ6SWLjUjMVhMHxb0WRSMYrZHxCjmCLGbLsW7u7oHXANGNZVJzPFTcrIobwCDU3jwIH0U8OZlZTYCm8n2F/FE+d0vFY5YizmsCkL2GCuEjia0THtkawSNRXrgMSOIhC9htBgNhXrJYYRAHJ9dJPqYO3iBNmFdYjiOwRgYjIOR4y8WWCHFwHSZAvSD+D+HDiYeN4BF68cSCoSdA3AjeIGMq2AttLF5wijHYJ4FFF7Aw8fA6c4DKjCG8IDJxtSp2VOKADEZCR7RbOQ4pxRhMquG19gxhN2K6HB8sIhifQnhQmlgviaP7FbvWc97E0kkTx1p7g7ArMVVVzDDYqE3NG7TwoGxx+I2lKgJdJ5ytSU1wU1W0E1u6Uj8fXstNcJ5jevEkP+YK4JH2J5Qc9lFnGiuC6JirXtN9R8YRPqR4gBN8LeEcPJI2BlfFBuXodrAKFXEFI2CosC/xrRwPDrggCveqwPU0WPYhl4lVojhorgfsdZ3araqR5DGtLCbUcdA0QETenVa9GYi6OOQy8afSNseTIPEa+RoEkH3a0yCuzyBKUF+TsbBXj7y1O/BAU7sDL+1P836OJwnXLK8YpOBvyKGtCJvwW61jedR9o7KcF+c4ubl5mExmQcLF6S2uSWVgoD3RrQvYS3VOiEtjpD+wSmK+mrm1BchIPBwGQUS1Ym6U3urSYgamLGF1pnPFSTFLlZmJ9Ywaad3mlVDKWWN50bNPZQ3FLddEInaV1Gpi7a55rRmFxtmm8M71uLzcfS3wb7mtYu/XkofFTvSn8cfsfMe5tZo/0qiOOZzf6GhwDNZwoj9a+8uOp5A4sn4J1NQvgY+59vOyfY68eLDREG/Um1du/Mcy+Ln9IGHPo6O3smTdGK1+iLrnh2qQ8PAFlkv4C+2ySQkYc5p7e3phna8fcGioNsXJlu4W1n77AKPQaT+q4WMuv17pC6w5n1QZ7hsMNP9Icf59wuCw5wzvaC6PLsVugLzP5uvX3763jd++Ir4MU4GhZf6oT6sC5o3W4JAOjC988bxR+rqvCPyxWPzVPhYG60jOUBJ4oKgWBUAG5YLs2HcMJjFDhrF4pZTPZqNFiwNdK8TQ3TGJmcDQnim7yjXZXj/Q9sXsDIb5JwVTX9FVeyHw5UI3YkYwhEFRjMK4Na0LMTO4fHc6apvC1zcMYto6TkYJnx5cuavHJh7T55gZvIwHN63UmsYqRgxgG9LnWC39jcbik3Qxc4brw3E3VcEDhvalNBzHYlOymAtcH47ZxagTsEix/IOuqY1Vbh1zg+stPXLFKfiTGVxb9JY8HnOD8ZRXXrKQfOTxg6H9Gd+5+ujmyBMAjq5ASicxUutYBLg6SUutYyHg2jWTRLEYcHWSllgVgsDVKU9ejkWBic+lyRCLA8dXeeFGtlgguNKvKKmOBYLrXVMyxALB2ST9wS3e36iKGAzEgKMpr7JKn4oH4sQiM1yf8lhzrOwbq0IseIknkOoqfSQOqB+W8rsB20ereic2erCZskP/YOnKvumWUAo+i6nhZNGxDAbaF0pvue9LItj2Znr1qxBA9F4reswk/JANjrxWscWM2avfuEkoDhx7FXcn1ysQHHkrX8XjRbJnusTrG8XH8kfC8ysuw968nl8ZXlHg5dWLeOvBN9qcD3OCSV76/Fr38ysInHh9zvzGnYB3Fz2EgOcixod23uz0kguceos3f6R5RYCFjA+x12+xCJaAHQ5wll/O461dfgWACV7AnF/wIR18EeCdUHh5wSSvJq8euMGxd8/nnbQ+3vjB4rztF8k5wHYfXg6w3UM98IDteS9eZvDVG/J6XSovK9heZd4PXi9lUwob+OpF3zr2soFzb8f1kLfjUoFJ3hB7B7Tek8vapEQFttWaN9p78dBFfplKwrOs2jNYSPuh6LpFE8lzckyNdhjcvgc+btFWXKd+U9Wke7iHzcsCviRd++UHiTRj75pUsXeYm0XpwHAWN8Gj2lM5jr9rH77D2EBMf9B5xaeMCx3aojZnFb447lnE5zjouslD1o7yDKzSgXt/joMmw0tLeQAwzTg8M3sHU91IsVdm788iAWdFM9MVthzsDTyjOZe4NC9KdQdm73/vAfyBDIXquQgvUBx8bSSQPAJheaAG6MbCIgY/UV5yXFw8tYYgihCE9wMkP4p/FmSR/wpHtI94KTTyQ8IZGPgXymuk4+WJ/THhenwZTw7FGA/Tx7BRA9ixaK+a7eXxrH7imB6nx3YxnU4/j5/VOJ/P6opwx234dOPJceS4LLdSoJiwp+SLq3Hzs/lo8TQT9fX00eCNGj2eauIUrPm61xO3Kb+FDbQRAfxDWdmP5k2eYnPKC8/Zpi7Gk/WI3u1gWLm0BvlVr2o/nrfex5Zvm9NHiu97a2Lw0WOK23hTcW2XcoRHNmv5IONZVayY9a2fehgo7Gnbm3ETxTVqm37jKt53Oha39263gXltJQKl22MdTnc03u02v7MAii18e/NsP6R3MLy2CoLi/THHtR7Si8/dSDs8R++rMS/2I3oLe+2Dcl/n3uxiMKb3boNsr/0yuKOioPduh1lNVLbzNbooCgZv/nKAyg7PWgcjBYt3MMn2pAbV+9KOK3n6YPFGYIUETopi9nDeGLwjgZOikFjGU8Y34Uz0BnA8fZjSzoJYvdthMzgWSzrwmL0R2CeDkzI+SZk/2L3RNuVN4HT/kKP9SN58I3hSq1jywjPhYh5vvq86EZyIBVcFjzfeprwZnL0+TKiYy3vI93gmdw+KF3N5owSTX75QESurx/BGzY6Nr2gpi+ee3b93MCs0KDe/2ys+8kxLxBTC5427V9zbb57KxDvT1C/8Seb3ki7ziWLf1RVrxUe2+bzp02ra/ffTxU0QuJDNmMy+Y8aUP7+EXcpvlIWrKCfrokJGM5d3kHZfaa1eWZgleefq+kmfrdjMA978lrvF7radx908+2Qn49n87FGiuQo431Wd4j2hcZINnOWky8uar2J0SzZHAQ/w/JbUb2mRo01jf/KGZpzmtDPNml1WZ9VrEUtm72EyI+6q3vLlvChNMzYrWaNc1N0X3Av8IxZz6HHzq8byNuGrOUGbejdB2FWd6o3YKK0NjE7aABWl3ffSh5LsU05YbKZ853j6ZvR44+6d3HCIa+Msb3Unv89dQhAbJhjADI2AgnYx5wH32rf2L1hm/A1L4n2E6WKqBAAAAABJRU5ErkJggg==");
  --gutter:clamp(20px,4vw,40px);
  --sec-y:clamp(76px,9vw,132px);
  --s-1:8px; --s-2:14px; --s-3:22px; --s-4:32px; --s-5:48px; --s-6:72px;
  --head-gap:clamp(42px,4.6vw,62px);
}

/* ===========================================================================
   2. RESET + BASE
   =========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16.5px;line-height:1.65;color:var(--text);
  background:var(--paper);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  color:var(--ink);letter-spacing:-.03em;line-height:1.14;
  text-wrap:balance;                 /* kills orphans in headlines */
}
p{text-wrap:pretty;}
/* figures line up in counters and tables */
.tnum,[data-count],.triad__num,.case__metric{font-variant-numeric:tabular-nums;}
[id]{scroll-margin-top:98px;}        /* sticky-header-safe anchors */
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:none;cursor:pointer;}
ul{list-style:none;}
::selection{background:var(--cyan);color:#fff;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px;}
.skip{
  position:absolute;left:var(--gutter);top:-64px;z-index:1000;
  background:var(--blue);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) var(--r-sm);
  font-size:14px;font-weight:600;transition:top .25s var(--ease);
}
.skip:focus{top:0;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* ===========================================================================
   3. LAYOUT PRIMITIVES
   =========================================================================== */
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter);}
.wrap--narrow{max-width:960px;}

.sec{padding:var(--sec-y) 0;position:relative;}
.sec--tight{padding:clamp(52px,6vw,78px) 0;}
.sec--flush-b{padding-bottom:0;}
.sec--soft{background:var(--paper-2);}
.sec--soft::before,.sec--soft::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);
}
.sec--soft::before{top:0;} .sec--soft::after{bottom:0;}
.sec--flush-t{padding-top:0;}
.sec--pull{padding-top:clamp(38px,4vw,54px);}
.sec--dark{background:var(--ink);color:#fff;}
.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff;}

/* the reading spine: heading pinned left, content right */
.split{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(36px,5.5vw,84px);align-items:start;
}
.split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.split__aside{position:relative;}
@media (min-width:981px){
  .split__aside--sticky{position:sticky;top:120px;}
}
@media (max-width:980px){
  .split{grid-template-columns:1fr;gap:34px;}
}

.hr-line{height:1px;background:var(--line);border:0;}

/* ===========================================================================
   4. TYPE + SHARED BITS
   =========================================================================== */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);margin-bottom:20px;
}
.eyebrow::before{
  content:"";width:22px;height:2px;background:var(--cyan);border-radius:2px;
  transform-origin:left;transition:transform .8s var(--ease-out) .1s;
}
:where(.r:not(.in), .stagger:not(.in)) .eyebrow::before{transform:scaleX(0);}
.sec--dark .eyebrow{color:var(--cyan);}

.h-lead{font-size:clamp(28px,3.6vw,42px);margin-bottom:18px;}
.h-sub{font-size:clamp(21px,2.3vw,26px);}
.lede{color:var(--muted);font-size:17px;max-width:46ch;}
.sec--dark .lede{color:rgba(255,255,255,.78);}
/* one vertical rhythm for every section head, centred or split */
.center-head{text-align:center;max-width:660px;margin:0 auto var(--head-gap);}
.split--head{margin-bottom:var(--head-gap);}
.sec-cta{text-align:center;margin-top:clamp(34px,3.8vw,50px);}
.center-head .eyebrow{justify-content:center;}
.center-head .lede{margin-inline:auto;}

/* ===========================================================================
   5. BUTTONS + LINKS
   =========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border-radius:var(--r-sm);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:-.01em;border:1.5px solid transparent;
  transition:background .28s var(--ease),border-color .28s var(--ease),
             color .28s var(--ease),transform .28s var(--ease),box-shadow .28s var(--ease);
}
.btn svg{width:17px;height:17px;flex-shrink:0;transition:transform .3s var(--ease);}
.btn:hover svg{transform:translateX(4px);}

.btn--primary{background:var(--blue);color:#fff;box-shadow:var(--sh-btn);}
.btn--primary:hover{background:var(--blue-deep);transform:translateY(-2px);box-shadow:var(--sh-btn-h);}
.btn--outline{border-color:var(--line);color:var(--ink);background:#fff;}
.btn--outline:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px);}
.btn--light{background:#fff;color:var(--blue);}
.btn--light:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.2);}
.btn--ghost{border-color:rgba(255,255,255,.3);color:#fff;}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.btn--sm{padding:11px 20px;font-size:14px;}
.btn:active{transform:translateY(0) scale(.985);}
.btn--lg{padding:17px 34px;font-size:16px;}
.btn--block{width:100%;}

/* animated-underline text link */
.tlink{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14.5px;
  color:var(--blue);position:relative;padding-bottom:3px;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.tlink:hover::after{transform:scaleX(1);}
.tlink svg{width:15px;height:15px;transition:transform .3s var(--ease);}
.tlink:hover svg{transform:translateX(4px);}
.sec--dark .tlink{color:var(--cyan);}

/* ===========================================================================
   6. SCROLL REVEAL (CSS-driven, JS only toggles .in)
   =========================================================================== */
.r{opacity:0;transform:translateY(16px);
   transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);
   transition-delay:calc(var(--i,0) * 70ms);}
.r.in{opacity:1;transform:none;}
.r--left{transform:translateX(-18px);}
.r--right{transform:translateX(18px);}
.r--scale{transform:translateY(16px) scale(.985);}
.r--still{transform:none;}
/* auto-stagger children: no inline --i needed, maps to Elementor delays */
.stagger > *{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
.stagger.in > *{opacity:1;transform:none;}
.stagger.in > *:nth-child(1){transition-delay:.02s}
.stagger.in > *:nth-child(2){transition-delay:.09s}
.stagger.in > *:nth-child(3){transition-delay:.16s}
.stagger.in > *:nth-child(4){transition-delay:.23s}
.stagger.in > *:nth-child(5){transition-delay:.3s}
.stagger.in > *:nth-child(6){transition-delay:.37s}
.stagger.in > *:nth-child(7){transition-delay:.44s}
/* section heads sequence internally: eyebrow -> heading -> paragraph.
   The .in override needs the extra class to outrank the rule above it —
   without it these children stayed parked 12px low forever. */
.center-head.stagger > *,.split__aside.stagger > *{transform:translateY(12px);}
.center-head.stagger.in > *,.split__aside.stagger.in > *{transform:none;}
/* parallax: JS writes --py, CSS owns the transform (Elementor Motion Effects) */
[data-parallax]{transform:translate3d(0,var(--py,0px),0);will-change:transform;}
@media (max-width:900px){[data-parallax]{transform:none !important;}}

/* ===========================================================================
   7. NAVBAR
   =========================================================================== */
.site-head{
  position:fixed;inset:0 0 auto;z-index:900;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.site-head.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(11,27,58,.06);background:rgba(255,255,255,.88);}
/* the header is the first beat of the page-load choreography */
.site-head{opacity:0;transform:translateY(-8px);animation:navIn .6s var(--ease-out) forwards;}
@keyframes navIn{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.site-head{opacity:1;transform:none;animation:none;}}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px;}
.site-head.is-stuck .nav{height:66px;transition:height .35s var(--ease);}

.brand{display:flex;align-items:center;gap:11px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:18.5px;letter-spacing:-.025em;color:var(--ink);}
.brand__mark{
  width:30px;height:30px;flex-shrink:0;
  background-image:var(--logo);background-size:contain;
  background-repeat:no-repeat;background-position:center;
}
.brand em{font-style:normal;color:var(--blue);}

.nav__links{display:flex;align-items:center;gap:30px;}
.nav__links > li{position:relative;}
.nav__a{font-size:14.5px;font-weight:500;color:var(--text);display:inline-flex;align-items:center;gap:5px;padding:6px 0;position:relative;transition:color .25s var(--ease);}
.nav__a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out);}
.nav__a:hover{color:var(--blue);}
.nav__a:hover::after,.nav__a.is-active::after{transform:scaleX(1);}
.nav__a.is-active{color:var(--blue);font-weight:600;}
.nav__caret{width:10px;height:10px;transition:transform .25s var(--ease);opacity:.55;}
.has-sub:hover .nav__caret{transform:rotate(180deg);}

.subnav{
  position:absolute;top:calc(100% + 16px);left:50%;width:286px;
  transform:translateX(-50%) translateY(8px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-2);padding:8px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.subnav a{display:block;padding:10px 12px;border-radius:var(--r-sm);font-size:13.5px;color:var(--muted);transition:background .2s,color .2s;}
.subnav a:hover{background:var(--paper-2);color:var(--blue);}

.nav__end{display:flex;align-items:center;gap:14px;}
.burger{width:40px;height:40px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:var(--r-sm);}
.burger span{width:18px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease);}
.burger.is-open span:nth-child(1){transform:translateY(6.8px) rotate(45deg);}
.burger.is-open span:nth-child(2){opacity:0;}
.burger.is-open span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg);}

.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(340px,86vw);z-index:960;
  background:#fff;padding:96px 26px 40px;overflow-y:auto;
  transform:translateX(101%);transition:transform .4s var(--ease-out);
  box-shadow:-12px 0 48px rgba(11,27,58,.14);
}
.drawer.is-open{transform:none;}
.drawer a{display:block;padding:14px 0;font-size:16px;font-weight:600;font-family:'Plus Jakarta Sans',sans-serif;border-bottom:1px solid var(--line-soft);}
.drawer__sub{padding-left:14px;}
.drawer__sub a{font-size:14px;font-weight:400;color:var(--muted);padding:10px 0;border:0;}
.scrim{position:fixed;inset:0;z-index:950;background:rgba(11,27,58,.42);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;}
.scrim.is-open{opacity:1;visibility:visible;}
@media (max-width:980px){.nav__links{display:none;}.burger{display:flex;}.nav__end .btn{display:none;}}

/* ===========================================================================
   8. HERO
   =========================================================================== */
.hero{
  position:relative;padding:150px 0 clamp(64px,7vw,100px);
  background:
    radial-gradient(760px 420px at 88% -8%, rgba(43,178,231,.10), transparent 62%),
    linear-gradient(180deg, var(--paper-2) 0%, #FBFDFF 58%, var(--paper) 100%);
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent);
}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);
  gap:clamp(40px,5vw,68px);align-items:center;
}
.hero__tag{
  display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--blue);
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;margin-bottom:26px;box-shadow:var(--sh-1);
}
.hero__tag i{width:6px;height:6px;border-radius:50%;background:var(--cyan);}
.hero h1{font-size:clamp(34px,4.3vw,54px);line-height:1.07;letter-spacing:-.035em;margin-bottom:24px;max-width:19ch;}
.hero h1 b{font-weight:800;color:var(--blue);}
.hero__lede{font-size:17.5px;color:var(--muted);max-width:50ch;margin-bottom:34px;}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:40px;}
.hero__proof{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;padding-top:26px;border-top:1px solid var(--line);}
.hero__proof-item{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted);}
.hero__proof-item svg{width:16px;height:16px;color:var(--cyan);flex-shrink:0;}

/* hero load orchestration — the page's single non-user-triggered moment */
.hero__tag,.hero h1,.hero__lede,.hero__cta,.hero__proof,.console,.console__float{
  opacity:0;transform:translateY(18px);animation:heroUp .85s var(--ease-out) forwards;
}
/* nav -> tag -> headline -> paragraph -> CTA -> trust row -> visual -> cards */
.hero__tag{animation-delay:.14s}
.hero h1{animation-delay:.22s}
.hero__lede{animation-delay:.36s}
.hero__cta{animation-delay:.48s}
.hero__proof{animation-delay:.58s}
.console{animation-delay:.64s}
.console__float{animation-delay:.9s}
@keyframes heroUp{to{opacity:1;transform:none;}}

/* --- the console: a real-looking interface, no invented metrics --- */
.console__stage{position:relative;padding-bottom:26px;}
.console{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);overflow:hidden;position:relative;z-index:2;
}
.console__bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-soft);background:#FCFDFF;}
.console__dots{display:flex;gap:5px;}
.console__dots i{width:8px;height:8px;border-radius:50%;background:var(--line);}
.console__dots i:first-child{background:#E4EAF4;}
.console__title{font-size:12.5px;font-weight:600;color:var(--muted-2);letter-spacing:.02em;}
.console__live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--cyan-ink);letter-spacing:.06em;text-transform:uppercase;}
.console__live i{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:blip 2.4s ease-in-out infinite;}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.console__body{padding:22px 20px 24px;}
.console__row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;}
.console__row h4{font-size:14.5px;font-weight:700;letter-spacing:-.02em;}
.console__row span{font-size:11.5px;color:var(--muted-2);letter-spacing:.06em;text-transform:uppercase;font-weight:600;}

.chart{display:flex;align-items:flex-end;gap:9px;height:112px;padding:0 2px 0;border-bottom:1px solid var(--line-soft);}
.chart i{
  flex:1;border-radius:4px 4px 0 0;background:var(--paper-3);
  transform:scaleY(0);transform-origin:bottom;
  animation:grow .9s var(--ease-out) forwards;
}
.chart i:nth-child(1){height:38%;animation-delay:.55s}
.chart i:nth-child(2){height:52%;animation-delay:.62s}
.chart i:nth-child(3){height:44%;animation-delay:.69s}
.chart i:nth-child(4){height:66%;animation-delay:.76s}
.chart i:nth-child(5){height:58%;animation-delay:.83s}
.chart i:nth-child(6){height:80%;animation-delay:.9s}
.chart i:nth-child(7){height:100%;background:linear-gradient(180deg,var(--cyan),var(--blue));animation-delay:.97s}
@keyframes grow{to{transform:scaleY(1);}}

.plat{padding-top:18px;display:grid;gap:11px;}
.plat__item{display:flex;align-items:center;gap:11px;}
.plat__logo{
  width:30px;height:30px;border-radius:7px;background:var(--paper-2);
  border:1px solid var(--line-soft);display:grid;place-items:center;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:13px;color:var(--blue);flex-shrink:0;
}
.plat__name{font-size:14px;font-weight:600;color:var(--text);}
.plat__state{
  margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px;background:var(--paper-2);color:var(--muted);
  border:1px solid var(--line-soft);
}
.plat__state.is-on{background:rgba(43,178,231,.1);color:#1583B5;border-color:rgba(43,178,231,.22);}

.console__float{
  position:absolute;right:-8px;top:calc(100% - 46px);bottom:auto;z-index:3;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-2);padding:13px 16px;min-width:186px;
}
.console__float .k{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);margin-bottom:5px;}
.console__float .v{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:15px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;}
.console__float .v svg{width:16px;height:16px;color:var(--cyan);}
.is-floating{animation:heroUp .85s var(--ease-out) .62s forwards, bob 7s ease-in-out 1.6s infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

@media (max-width:980px){
  .hero{padding-top:126px;}
  .hero__grid{grid-template-columns:1fr;gap:48px;}
  .console__stage{max-width:520px;}
}
@media (max-width:560px){
  .console__float{position:static;top:auto;margin-top:14px;min-width:0;}
  .console__stage{padding-bottom:0;}
  .is-floating{animation:heroUp .85s var(--ease-out) .62s forwards;}
}

/* ===========================================================================
   9. PROBLEM
   =========================================================================== */
.pain{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.pain__cell{background:#fff;padding:22px 24px;display:flex;gap:13px;align-items:flex-start;transition:background .3s var(--ease);}
.pain__cell:hover{background:var(--paper-2);}
.pain__cell svg{width:18px;height:18px;color:var(--cyan);flex-shrink:0;margin-top:3px;}
.pain__cell p{font-size:15px;color:var(--text);line-height:1.5;}
.pain__note{margin-top:26px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-.02em;display:flex;align-items:center;gap:11px;}
.pain__note i{width:30px;height:2px;background:var(--cyan);border-radius:2px;}
@media (max-width:640px){.pain{grid-template-columns:1fr;}}

/* ===========================================================================
   10. PLATFORM MARQUEE
   =========================================================================== */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;background:#fff;}
.strip__label{text-align:center;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:26px;}
/* ===========================================================================
   11. SERVICES
   =========================================================================== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.svc{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:30px 28px 26px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .4s var(--ease);
}
.svc::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out);
}
.svc:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:#D4E0F4;}
.svc:hover::before{transform:scaleX(1);}
.svc__ico{width:40px;height:40px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line-soft);display:grid;place-items:center;margin-bottom:20px;transition:background .4s var(--ease),border-color .4s var(--ease);}
.svc__ico svg{width:19px;height:19px;color:var(--blue);transition:color .4s var(--ease);}
.svc:hover .svc__ico{background:var(--blue);border-color:var(--blue);}
.svc:hover .svc__ico svg{color:#fff;}
.svc h3{font-size:18.5px;letter-spacing:-.025em;margin-bottom:9px;}
.svc p{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:18px;}
.svc__tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px;}
.svc__tags span{font-size:12px;font-weight:500;color:var(--muted);background:var(--paper-2);border:1px solid var(--line-soft);border-radius:999px;padding:4px 11px;}
.svc__foot{margin-top:auto;}

/* featured card spans two columns and leads the grid */
.svc--lead{grid-column:span 3;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(26px,4vw,48px);padding:clamp(28px,3vw,38px);align-items:center;}
.svc--lead .svc__copy{display:flex;flex-direction:column;}
.svc--lead h3{font-size:clamp(20px,2.3vw,25px);}
.svc--lead p{font-size:15px;}
.svc__viz{
  border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--paper-2);
  padding:18px;display:grid;gap:10px;
}
.viz__row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:10px 12px;}
.viz__row b{font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:800;color:var(--blue);width:26px;flex-shrink:0;}
.viz__row span{font-size:13px;color:var(--text);font-weight:500;}
.viz__row em{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;color:var(--cyan-ink);letter-spacing:.04em;}
.viz__bar{height:6px;border-radius:99px;background:#fff;border:1px solid var(--line-soft);overflow:hidden;}
.viz__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));width:0;transition:width 1.2s var(--ease-out);}
.svc-grid.in .viz__bar i{width:78%;}
@media (max-width:1040px){
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .svc--lead{grid-column:span 2;}
}
@media (max-width:760px){
  .svc-grid{grid-template-columns:1fr;}
  .svc--lead{grid-column:span 1;grid-template-columns:1fr;padding:28px;}
  .svc--lead .svc__viz{order:2;}
}

/* ===========================================================================
   12. STORY RAIL (problem -> strategy -> execution -> growth)
   =========================================================================== */
.rail-head{max-width:720px;margin-bottom:clamp(36px,4vw,52px);}
.rail-head .h-sub{max-width:24ch;}
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
.rail__step{padding:0 24px 0 0;position:relative;}
.rail__step::before{
  content:"";position:absolute;left:0;top:13px;width:100%;height:1px;background:var(--line);
}
.rail__step:last-child::before{background:linear-gradient(90deg,var(--line),transparent);}
.rail__dot{
  position:relative;z-index:2;width:27px;height:27px;border-radius:50%;
  background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:11.5px;font-weight:800;color:var(--muted-2);
  margin-bottom:20px;transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease);
}
.rail__step.in .rail__dot{border-color:var(--blue);color:var(--blue);}
.rail__step.in:last-child .rail__dot{background:var(--blue);border-color:var(--blue);color:#fff;}
.rail__step h4{font-size:16px;letter-spacing:-.025em;margin-bottom:7px;}
.rail__step p{font-size:14.5px;color:var(--muted);line-height:1.6;padding-right:18px;}
.rail__cta{
  margin-top:clamp(34px,3.6vw,46px);padding-top:26px;border-top:1px solid var(--line);
  font-size:16px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
}
@media (max-width:860px){
  .rail{grid-template-columns:1fr 1fr;gap:34px 0;}
  .rail__step:nth-child(2)::before{background:linear-gradient(90deg,var(--line),transparent);}
}
@media (max-width:520px){
  .rail{grid-template-columns:1fr;gap:26px;}
  .rail__step::before{display:none;}
  .rail__dot{margin-bottom:12px;}
}

/* ===========================================================================
   13. CREDIBILITY TRIAD
   =========================================================================== */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.triad__cell{background:var(--paper-2);padding:clamp(28px,3.4vw,44px) clamp(20px,2.6vw,36px);}
.triad__num{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(46px,6vw,74px);line-height:1;letter-spacing:-.05em;
  color:var(--blue);margin-bottom:14px;display:flex;align-items:baseline;
}
.triad__num sup{font-size:.36em;font-weight:700;color:var(--cyan);letter-spacing:0;top:-1.4em;position:relative;}
.triad__cell h4{font-size:17px;letter-spacing:-.025em;margin-bottom:8px;}
.triad__cell p{font-size:14px;color:var(--muted);line-height:1.6;}
@media (max-width:820px){.triad{grid-template-columns:1fr;}}

/* ===========================================================================
   14. WORK / CASE STUDIES
   =========================================================================== */
.work{display:grid;gap:18px;}
.case{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,3.5vw,48px);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,38px);
  transition:box-shadow .4s var(--ease-out),border-color .4s var(--ease);
}
.case:hover{box-shadow:var(--sh-2);border-color:#D4E0F4;}
.case__meta{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:12px;}
.case h3{font-size:clamp(20px,2.2vw,25px);letter-spacing:-.03em;margin-bottom:20px;}
.case__steps{display:grid;gap:0;}
.case__step{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:13px 0;border-top:1px solid var(--line-soft);}
.case__step:last-child{border-bottom:1px solid var(--line-soft);}
.case__step dt{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);padding-top:2px;}
.case__step dd{font-size:15px;color:var(--text);line-height:1.55;}
.case__step--out dd{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;color:var(--blue);font-size:15.5px;letter-spacing:-.02em;}
.case__panel{
  border-radius:var(--r-md);padding:clamp(22px,2.6vw,30px);
  background:linear-gradient(160deg,var(--paper-2),#EAF2FF);
  border:1px solid var(--line-soft);
}
.case__metric{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(30px,4vw,44px);letter-spacing:-.04em;color:var(--blue);line-height:1;margin-bottom:8px;}
.case__metric-l{font-size:13.5px;color:var(--muted);margin-bottom:22px;}
.case__spark{display:flex;align-items:flex-end;gap:4px;height:58px;}
.case__spark i{flex:1;border-radius:3px 3px 0 0;background:rgba(27,54,145,.14);}
.case__spark i:last-child{background:linear-gradient(180deg,var(--cyan),var(--blue));}
@media (max-width:860px){.case{grid-template-columns:1fr;}.case__step{grid-template-columns:92px 1fr;}}
@media (max-width:480px){.case__step{grid-template-columns:1fr;gap:4px;}}

/* ===========================================================================
   15. WHY (dark spine section)
   =========================================================================== */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);overflow:hidden;}
.why-cell{background:var(--ink);padding:30px 28px;transition:background .4s var(--ease);}
.why-cell:hover{background:#0F2449;}
.why-cell__ico{width:38px;height:38px;border-radius:10px;background:rgba(43,178,231,.12);border:1px solid rgba(43,178,231,.22);display:grid;place-items:center;margin-bottom:18px;}
.why-cell__ico svg{width:18px;height:18px;color:var(--cyan);}
.why-cell h4{font-size:17px;letter-spacing:-.025em;margin-bottom:9px;}
.why-cell p{font-size:14.5px;color:rgba(255,255,255,.74);line-height:1.62;}
.why-quote{margin-top:30px;padding:24px 26px;border-radius:var(--r-md);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);}
.why-quote p{font-family:'Plus Jakarta Sans',sans-serif;font-size:16.5px;font-weight:600;line-height:1.55;letter-spacing:-.02em;color:rgba(255,255,255,.92);}
@media (max-width:640px){.why-grid{grid-template-columns:1fr;}}

/* ===========================================================================
   17. PROCESS
   =========================================================================== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;}
.steps::before{content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:var(--line);}
.steps__fill{position:absolute;left:0;top:19px;height:1px;background:linear-gradient(90deg,var(--blue),var(--cyan));width:0;transition:width 1.4s var(--ease-out);}
.step{position:relative;z-index:2;}
.step__n{
  width:39px;height:39px;border-radius:50%;background:#fff;border:1.5px solid var(--line);
  display:grid;place-items:center;font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;font-size:13px;color:var(--muted-2);margin-bottom:20px;
  transition:border-color .45s var(--ease),color .45s var(--ease),transform .45s var(--ease-out);
}
.step.in .step__n{border-color:var(--blue);color:var(--blue);transform:scale(1.04);}
.step h4{font-size:17px;letter-spacing:-.025em;margin-bottom:8px;}
.step p{font-size:14.5px;color:var(--muted);line-height:1.6;padding-right:10px;}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;gap:34px 24px;}.steps::before,.steps__fill{display:none;}}
@media (max-width:520px){.steps{grid-template-columns:1fr;}}

/* ===========================================================================
   18. ABOUT
   =========================================================================== */
.about-card{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(28px,3.4vw,44px);
  background:linear-gradient(165deg,#fff,var(--paper-2));position:relative;overflow:hidden;
}
.about-card__mark{width:52px;height:52px;background-image:var(--logo);background-size:contain;background-repeat:no-repeat;margin-bottom:26px;}
.about-card p{font-size:15px;color:var(--muted);line-height:1.68;}
.about-facts{display:grid;gap:0;margin-top:26px;}
.about-fact{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-top:1px solid var(--line);}
.about-fact:last-child{border-bottom:1px solid var(--line);}
.about-fact dt{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);font-weight:600;width:112px;flex-shrink:0;}
.about-fact dd{font-size:15px;font-weight:500;color:var(--text);}
.about-copy p{margin-bottom:16px;color:var(--muted);font-size:16.5px;}
.about-copy p:last-of-type{margin-bottom:30px;}

/* ===========================================================================
   19. INSIGHTS
   =========================================================================== */
.posts{display:grid;gap:0;border-top:1px solid var(--line);}
.post{
  display:grid;grid-template-columns:150px 1fr 120px;gap:26px;align-items:center;
  padding:26px 4px;border-bottom:1px solid var(--line);
  transition:background .35s var(--ease),padding-left .35s var(--ease);
}
.post:hover{background:var(--paper-2);padding-left:14px;}
.post__cat{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-ink);}
.post h3{font-size:18px;letter-spacing:-.025em;margin-bottom:5px;line-height:1.3;}
.post p{font-size:14px;color:var(--muted);}
.post__go{justify-self:end;display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;color:var(--blue);opacity:0;transform:translateX(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease);}
.post:hover .post__go{opacity:1;transform:none;}
.post__go svg{width:15px;height:15px;}
@media (max-width:860px){
  .post{grid-template-columns:1fr;gap:9px;padding:22px 4px;}
  .post__go{justify-self:start;opacity:1;transform:none;}
}

/* ===========================================================================
   20. FINAL CTA
   =========================================================================== */
.close{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  background:
    radial-gradient(620px 300px at 78% 6%, rgba(43,178,231,.16), transparent 62%),
    linear-gradient(160deg,var(--ink) 0%,#10265A 100%);
}
.close::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 70%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 70%);
}
.close .wrap{position:relative;z-index:2;}
.close h2{font-size:clamp(29px,4.4vw,50px);letter-spacing:-.035em;line-height:1.08;margin-bottom:20px;color:#fff;}
.close p{color:rgba(255,255,255,.8);font-size:17px;max-width:52ch;margin:0 auto 36px;}
.close__row{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-bottom:30px;}
.close__direct{font-size:14.5px;color:rgba(255,255,255,.7);}
.close__direct a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1px;transition:border-color .3s;}
.close__direct a:hover{border-color:var(--cyan);}

/* ===========================================================================
   21. CONTACT FORM
   =========================================================================== */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3.2vw,38px);box-shadow:var(--sh-1);}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.f{margin-bottom:16px;}
.f label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px;letter-spacing:-.01em;}
.f input,.f select,.f textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:#FCFDFF;font-size:15px;transition:border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
}
.f textarea{min-height:104px;resize:vertical;}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(27,54,145,.08);}
.f input::placeholder,.f textarea::placeholder{color:#A8B0BF;}
.f select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:15px;padding-right:40px;}
.f-fine{font-size:13px;color:var(--muted);margin-top:14px;text-align:center;}
.f-done{display:none;text-align:center;padding:26px 0;}
.f-done.is-on{display:block;animation:heroUp .6s var(--ease-out) forwards;}
.f-done__ico{width:52px;height:52px;border-radius:50%;background:rgba(43,178,231,.12);display:grid;place-items:center;margin:0 auto 18px;}
.f-done__ico svg{width:24px;height:24px;color:var(--cyan);}
.f-done h3{font-size:19px;margin-bottom:9px;}
.f-done p{font-size:15px;color:var(--muted);}
.reach{display:grid;gap:10px;margin-top:30px;}
.reach a{display:flex;align-items:center;gap:13px;padding:15px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);}
.reach a:hover{border-color:var(--blue);transform:translateX(4px);box-shadow:var(--sh-1);}
.reach__ico{width:36px;height:36px;border-radius:9px;background:var(--paper-2);display:grid;place-items:center;flex-shrink:0;}
.reach__ico svg{width:17px;height:17px;color:var(--blue);}
.reach b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:14.5px;letter-spacing:-.02em;}
.reach span{font-size:13px;color:var(--muted);}
@media (max-width:560px){.f-row{grid-template-columns:1fr;gap:0;}}

/* ===========================================================================
   22. FOOTER
   =========================================================================== */
.foot{background:#fff;border-top:1px solid var(--line);padding:clamp(48px,5vw,68px) 0 30px;}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px);padding-bottom:36px;}
.foot__about p{font-size:14.5px;color:var(--muted);max-width:38ch;margin-top:16px;}
.foot h5{font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px;}
.foot ul{display:grid;gap:10px;}
.foot ul a{font-size:14.5px;color:var(--muted);transition:color .25s var(--ease);}
.foot ul a:hover{color:var(--blue);}
.foot__bar{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid var(--line);}
.foot__bar p,.foot__bar a{font-size:13.5px;color:var(--muted-2);}
.foot__legal{display:flex;gap:20px;}
.foot__legal a:hover{color:var(--blue);}
@media (max-width:760px){.foot__grid{grid-template-columns:1fr 1fr;}.foot__about{grid-column:span 2;}}

/* ===========================================================================
   23. FLOATING WHATSAPP
   =========================================================================== */
.wa{
  position:fixed;z-index:880;right:clamp(16px,2.4vw,26px);
  bottom:calc(clamp(16px,2.4vw,26px) + env(safe-area-inset-bottom,0px));
  width:52px;height:52px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,211,102,.34);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);
  transition:opacity .4s var(--ease),transform .4s var(--ease-out),visibility .4s,box-shadow .3s;
}
.wa.is-on{opacity:1;visibility:visible;transform:none;}
.wa:hover{box-shadow:0 12px 30px rgba(37,211,102,.45);transform:translateY(-3px);}
.wa svg{width:26px;height:26px;fill:#fff;}
/* ===========================================================================
   24. PAGE HEADER (blog + article)  — Elementor: Container, 1 col, centred
   =========================================================================== */
.page-head{
  position:relative;padding:142px 0 clamp(44px,5vw,66px);
  background:
    radial-gradient(680px 340px at 82% -14%, rgba(43,178,231,.10), transparent 62%),
    linear-gradient(180deg, var(--paper-2) 0%, #FBFDFF 62%, var(--paper) 100%);
  border-bottom:1px solid var(--line);
}
.page-head__in{max-width:760px;}
.page-head h1{font-size:clamp(32px,4.4vw,52px);letter-spacing:-.035em;line-height:1.07;margin-bottom:20px;}
.page-head .lede{font-size:17.5px;max-width:54ch;}
.crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);margin-bottom:22px;}
.crumb a{transition:color .25s var(--ease);}
.crumb a:hover{color:var(--blue);}
.crumb svg{width:13px;height:13px;opacity:.45;}
.crumb span[aria-current]{color:var(--ink);font-weight:500;}

/* ---- search + category filters ---- */
.blog-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:38px;}
.search{position:relative;width:min(320px,100%);}
.search input{
  width:100%;padding:13px 16px 13px 44px;font-size:14.5px;
  border:1.5px solid var(--line);border-radius:999px;background:#fff;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.search input::placeholder{color:#A8B0BF;}
.search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,54,145,.08);}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none;}
.cats{display:flex;flex-wrap:wrap;gap:8px;}
.cat{
  font-size:13.5px;font-weight:600;font-family:'Plus Jakarta Sans',sans-serif;
  padding:9px 17px;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;color:var(--muted);letter-spacing:-.01em;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.cat:hover{border-color:#C9D6EE;color:var(--ink);transform:translateY(-1px);}
.cat.is-on{background:var(--ink);border-color:var(--ink);color:#fff;}

/* ===========================================================================
   25. EDITORIAL PANELS — article art without stock photography
   =========================================================================== */
.panel{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  background:linear-gradient(150deg,var(--blue) 0%,#24449F 55%,var(--cyan) 140%);
  aspect-ratio:16/10;display:block;
}
.panel--b{background:linear-gradient(150deg,var(--ink) 0%,#16305E 60%,#2B6FB0 140%);}
.panel--c{background:linear-gradient(150deg,#0E7CAE 0%,var(--cyan) 70%,#7FD3F2 150%);}
.panel--d{background:linear-gradient(150deg,#1A2E63 0%,var(--blue) 70%,#3E86D6 150%);}
/* fine grid, the only decoration these panels get */
.panel::before{
  content:"";position:absolute;inset:0;opacity:.3;
  background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(130% 100% at 78% 0%,#000,transparent 72%);
  mask-image:radial-gradient(130% 100% at 78% 0%,#000,transparent 72%);
}
.panel__mark{
  position:absolute;right:16px;bottom:-14px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(62px,8.5vw,96px);line-height:1;letter-spacing:-.055em;
  color:rgba(255,255,255,.15);pointer-events:none;
}
.panel__tag{
  position:absolute;left:18px;top:18px;z-index:2;
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(11,27,58,.34);border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:6px 13px;border-radius:999px;
}
.panel__wrap{overflow:hidden;border-radius:var(--r-md);}
.panel__wrap .panel{transition:transform .8s var(--ease-out);}
a:hover .panel__wrap .panel,.art:hover .panel{transform:scale(1.035);filter:saturate(1.06) brightness(1.03);}
.panel{transition:transform var(--t-slide) var(--ease-out),filter var(--t-slide) var(--ease-out);}

/* ===========================================================================
   26. FEATURED ARTICLE
   =========================================================================== */
.feat{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:center;
  padding:clamp(22px,2.6vw,30px);
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  transition:box-shadow .45s var(--ease-out),border-color .45s var(--ease),transform .45s var(--ease-out);
}
.feat:hover{box-shadow:var(--sh-2);border-color:#D4E0F4;transform:translateY(-3px);}
.feat__body{padding:clamp(4px,1vw,14px) clamp(4px,1.4vw,18px) clamp(4px,1vw,14px) 0;}
.feat__kicker{
  display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:16px;
}
.feat__kicker i{width:20px;height:2px;background:var(--cyan);border-radius:2px;}
.feat h2{font-size:clamp(23px,2.9vw,34px);letter-spacing:-.033em;line-height:1.14;margin-bottom:14px;}
.feat p{font-size:16px;color:var(--muted);margin-bottom:22px;max-width:48ch;}
@media (max-width:900px){.feat{grid-template-columns:1fr;}.feat__body{order:2;padding:0 4px 6px;}}

/* ---- article meta line ---- */
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:13px;color:var(--muted);}
.meta i{width:4px;height:4px;border-radius:50%;background:var(--line);}
.meta b{font-weight:600;color:var(--text);}

/* ===========================================================================
   27. ARTICLE GRID
   =========================================================================== */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.art{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:box-shadow .45s var(--ease-out),border-color .45s var(--ease),transform .45s var(--ease-out);
}
.art:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:#D4E0F4;}
.art__art{overflow:hidden;}
.art__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.art h3{font-size:18.5px;letter-spacing:-.028em;line-height:1.3;margin-bottom:10px;}
.art p{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:18px;}
.art__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--line-soft);}
.art__go{display:inline-flex;align-items:center;gap:7px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13.5px;color:var(--blue);}
.art__go svg{width:15px;height:15px;transition:transform .3s var(--ease);}
.art:hover .art__go svg{transform:translateX(4px);}
.art[hidden]{display:none;}
@media (max-width:980px){.art-grid{grid-template-columns:repeat(2,1fr);gap:22px;}}
@media (max-width:620px){.art-grid{grid-template-columns:1fr;}}

.more-row{display:flex;justify-content:center;margin-top:clamp(36px,4vw,52px);}
.empty{
  display:none;text-align:center;padding:60px 20px;border:1px dashed var(--line);
  border-radius:var(--r-lg);background:var(--paper-2);
}
.empty.is-on{display:block;}
.empty h3{font-size:19px;margin-bottom:8px;}
.empty p{font-size:15px;color:var(--muted);}

/* ===========================================================================
   28. ARTICLE PAGE — reading progress, prose, aside, share
   =========================================================================== */
.progress{position:fixed;top:0;left:0;height:2px;z-index:940;width:0;
  background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .12s linear;}

.art-layout{display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:clamp(36px,5vw,88px);align-items:start;}
@media (max-width:1000px){.art-layout{grid-template-columns:1fr;}.art-aside{display:none;}}
.art-aside{position:sticky;top:112px;}
.toc h5,.share h5{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.toc{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line);}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:2px;}
.toc a{
  display:block;padding:7px 0 7px 14px;font-size:14px;color:var(--muted);
  border-left:2px solid var(--line);transition:color .25s var(--ease),border-color .25s var(--ease);
}
.toc a:hover{color:var(--ink);border-color:#C9D6EE;}
.toc a.is-on{color:var(--blue);border-color:var(--blue);font-weight:600;}
.share-row{display:flex;gap:8px;}
.share-row a{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:border-color .3s,background .3s,transform .3s;
}
.share-row a svg{width:16px;height:16px;color:var(--muted);transition:color .3s;}
.share-row a:hover{border-color:var(--blue);background:var(--blue);transform:translateY(-2px);}
.share-row a:hover svg{color:#fff;}

/* ---- prose: the one place line-length and rhythm matter most ---- */
.prose{max-width:72ch;}
.prose > * + *{margin-top:22px;}
.prose p{font-size:17px;line-height:1.75;color:#2C3444;}
.prose p.stand{font-size:19.5px;line-height:1.62;color:var(--ink);font-weight:500;letter-spacing:-.015em;}
.prose h2{font-size:clamp(23px,2.5vw,29px);letter-spacing:-.03em;margin-top:52px;}
.prose h2 + p{margin-top:16px;}
.prose h3{font-size:19.5px;letter-spacing:-.025em;margin-top:36px;}
.prose h3 + p{margin-top:12px;}
.prose ul,.prose ol{padding-left:0;display:grid;gap:12px;}
.prose li{position:relative;padding-left:26px;font-size:16.5px;line-height:1.7;color:#2C3444;}
.prose ul li::before{
  content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;
  border-radius:2px;background:var(--cyan);
}
.prose ol{counter-reset:pl;}
.prose ol li{counter-increment:pl;}
.prose ol li::before{
  content:counter(pl);position:absolute;left:0;top:1px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:13px;color:var(--blue);
}
.prose strong{font-weight:600;color:var(--ink);}
.prose a:not(.btn){color:var(--blue);font-weight:500;border-bottom:1.5px solid rgba(27,54,145,.25);transition:border-color .25s;}
.prose a:not(.btn):hover{border-color:var(--blue);}
.prose blockquote{
  margin-top:34px;padding:26px 28px;border-radius:var(--r-md);
  background:var(--paper-2);border:1px solid var(--line-soft);border-left:3px solid var(--cyan);
}
.prose blockquote p{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:18px;
  line-height:1.55;letter-spacing:-.02em;color:var(--ink);
}
.prose figure{margin-top:34px;}
.prose figcaption{margin-top:12px;font-size:13.5px;color:var(--muted);}
.prose hr{margin-top:44px;height:1px;background:var(--line);border:0;}
.callout{
  margin-top:34px;padding:24px 26px;border-radius:var(--r-md);
  border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1);
}
.callout h4{font-size:16px;letter-spacing:-.025em;margin-bottom:9px;}
.callout p{font-size:15px;color:var(--muted);line-height:1.65;}

/* ---- author ---- */
.author{
  display:flex;align-items:center;gap:16px;margin-top:48px;padding-top:28px;
  border-top:1px solid var(--line);
}
.author__mark{
  width:48px;height:48px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line);
  background-image:var(--logo);background-size:26px;background-position:center;
  background-repeat:no-repeat;flex-shrink:0;
}
.author b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;letter-spacing:-.02em;}
.author span{font-size:14px;color:var(--muted);}

/* --- screen-reader-only utility ------------------------------------------ */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ===========================================================================
   29. POINTER INTERACTION PRIMITIVES
   JS writes --mx/--my (-1..1), --rx/--ry (tilt deg) and --tx/--ty (magnet px).
   CSS owns every transform, so all of this degrades to nothing without JS.
   Everything here is gated on a real pointer — touch devices skip it.
   =========================================================================== */
.scene{perspective:1200px;}
[data-tilt]{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease-out);
  transform-style:preserve-3d;
}
[data-tilt].is-tilting{transition:transform .12s linear;}

/* magnetic buttons — 5px maximum, just enough to feel alive */
.btn--magnet{transform:translate3d(var(--tx,0px),var(--ty,0px),0);}
.btn--magnet:hover{transition:transform .14s linear,background .28s var(--ease),box-shadow .28s var(--ease);}

/* cursor-following light */
.glow{
  position:absolute;inset:-10%;pointer-events:none;z-index:0;overflow:hidden;
  transform:translate3d(calc(var(--mx,0) * 16px),calc(var(--my,0) * 12px),0);
  transition:transform .8s var(--ease-out);
}
.glow > i{
  position:absolute;inset:-6%;display:block;
  background:radial-gradient(520px circle at 70% 26%, rgba(43,178,231,.16), transparent 62%);
}
.glow--dark > i{background:radial-gradient(560px circle at 60% 34%, rgba(43,178,231,.22), transparent 64%);}

@media (max-width:900px),(hover:none),(pointer:coarse){
  [data-tilt],.btn--magnet,.glow{transform:none !important;}
}
@media (prefers-reduced-motion:reduce){
  [data-tilt],.btn--magnet,.glow{transform:none !important;}
}

/* ---- word-by-word headline reveal (JS wraps words in <span>) ---- */
.rw span{
  display:inline-block;opacity:0;transform:translateY(.42em);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  transition-delay:calc(var(--w,0) * 55ms);
}
.rw.in span{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.rw span{opacity:1;transform:none;}}

/* ===========================================================================
   30. HERO — floating cards + cursor scene
   =========================================================================== */
.hero__stage{position:relative;padding:56px 0 62px;}
.fcard{
  position:absolute;z-index:4;
  transform:translate3d(calc(var(--mx,0) * var(--d,10) * 1px),calc(var(--my,0) * var(--d,10) * 1px),0);
  transition:transform .55s var(--ease-out);
}
.fcard__in{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-2);padding:12px 15px;min-width:172px;
  animation:bob var(--dur,7s) ease-in-out var(--del,0s) infinite;
}
/* each card sits in a clear band above / beside / below the console, so the
   layering reads as depth instead of covering the interface.
   --d is the cursor travel in px: 4-6px is depth, 20px is a gaming site. */
.fcard--a{top:0;right:-18px;--d:6;}
.fcard--a .fcard__in{--dur:7.5s;--del:.2s;}
.fcard--b{top:150px;left:-46px;--d:3;}
.fcard--b .fcard__in{--dur:9s;--del:1.1s;}
.fcard--c{bottom:0;right:-26px;--d:5;}
.fcard--c .fcard__in{--dur:8.2s;--del:.6s;}
.fcard__k{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.fcard__k svg{width:13px;height:13px;color:var(--cyan-ink);}
.fcard__v{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:14.5px;letter-spacing:-.025em;color:var(--ink);display:flex;align-items:center;gap:7px;}
.fcard__v em{font-style:normal;font-size:12px;font-weight:700;color:var(--cyan-ink);}
.fcard__spark{display:flex;align-items:flex-end;gap:3px;height:22px;margin-top:8px;}
.fcard__spark i{width:5px;border-radius:2px;background:var(--paper-3);}
.fcard__spark i:last-child{background:linear-gradient(180deg,var(--cyan),var(--blue));}
/* entrance, staggered after the console */
.fcard{opacity:0;animation:fcardIn .8s var(--ease-out) forwards;}
.fcard--a{animation-delay:1s} .fcard--b{animation-delay:1.12s} .fcard--c{animation-delay:1.24s}
@keyframes fcardIn{to{opacity:1;}}
@media (max-width:1240px){.fcard--a{right:-4px}.fcard--b{left:-18px}.fcard--c{right:-6px}}
@media (max-width:980px){.fcard--b{display:none}}
@media (max-width:620px){.fcard{display:none;}}

/* ===========================================================================
   31. PROBLEM -> SOLUTION TRANSFORMATION
   Cards enter from four directions, then the solution row resolves under them.
   =========================================================================== */
.tform{position:relative;}
.tform__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.pcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 18px;text-align:center;
  opacity:0;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
}
.pcard:nth-child(1){transform:translate3d(-34px,18px,0);}
.pcard:nth-child(2){transform:translate3d(-16px,-26px,0);}
.pcard:nth-child(3){transform:translate3d(0,30px,0) scale(.94);}
.pcard:nth-child(4){transform:translate3d(16px,-26px,0);}
.pcard:nth-child(5){transform:translate3d(34px,18px,0);}
.tform__grid.in .pcard{opacity:1;transform:none;}
.tform__grid.in .pcard:nth-child(1){transition-delay:.02s}
.tform__grid.in .pcard:nth-child(2){transition-delay:.1s}
.tform__grid.in .pcard:nth-child(3){transition-delay:.18s}
.tform__grid.in .pcard:nth-child(4){transition-delay:.26s}
.tform__grid.in .pcard:nth-child(5){transition-delay:.34s}
.pcard__ico{width:34px;height:34px;margin:0 auto 12px;border-radius:9px;background:var(--paper-2);border:1px solid var(--line-soft);display:grid;place-items:center;}
.pcard__ico svg{width:16px;height:16px;color:#94A0B4;}
.pcard p{font-size:13.5px;font-weight:500;color:var(--text);line-height:1.45;}

.tform__arrow{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:clamp(26px,3vw,38px) 0;opacity:0;transition:opacity .7s var(--ease-out) .5s;
}
.tform__arrow.in{opacity:1;}
.tform__arrow i{width:1px;height:34px;background:linear-gradient(180deg,var(--line),var(--cyan));}
.tform__arrow span{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-ink);}

.solve{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.solve__cell{
  background:linear-gradient(180deg,#fff,var(--paper-2));padding:24px 22px;
  opacity:0;transform:scale(.97);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
.solve.in .solve__cell{opacity:1;transform:none;}
.solve.in .solve__cell:nth-child(1){transition-delay:.1s}
.solve.in .solve__cell:nth-child(2){transition-delay:.2s}
.solve.in .solve__cell:nth-child(3){transition-delay:.3s}
.solve.in .solve__cell:nth-child(4){transition-delay:.4s}
.solve__n{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:12px;color:var(--cyan-ink);letter-spacing:.06em;margin-bottom:10px;}
.solve__cell h4{font-size:16px;letter-spacing:-.025em;margin-bottom:7px;}
.solve__cell p{font-size:13.5px;color:var(--muted);line-height:1.55;}
@media (max-width:900px){
  .tform__grid{grid-template-columns:repeat(2,1fr);}
  .tform__grid .pcard:nth-child(5){grid-column:span 2;}
  .solve{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:520px){
  .tform__grid,.solve{grid-template-columns:1fr;}
  .tform__grid .pcard:nth-child(5){grid-column:auto;}
  .pcard{transform:translate3d(0,18px,0) !important;}
}

/* ===========================================================================
   32. E-COMMERCE MANAGEMENT — the one animated dashboard on the page
   =========================================================================== */
.ecom{position:relative;overflow:hidden;background:var(--paper-2);}
.ecom::before,.ecom::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);
}
.ecom::before{top:0}.ecom::after{bottom:0}
.ecom__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(36px,5vw,72px);align-items:center;position:relative;z-index:2;}
.ecom__no{
  display:inline-flex;align-items:baseline;gap:10px;margin-bottom:16px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;letter-spacing:-.03em;
}
.ecom__no b{font-size:34px;line-height:1;color:var(--blue);}
.ecom__no span{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
/* matches .h-lead — the section's emphasis comes from the 01 mark, the
   dashboard and the background band, not from two extra pixels of type */
.ecom h2{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.033em;line-height:1.1;margin-bottom:18px;}
.ecom__lede{font-size:17px;color:var(--muted);max-width:44ch;margin-bottom:26px;}
.mplist{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;}
.mplist span{
  font-size:13px;font-weight:600;font-family:'Plus Jakarta Sans',sans-serif;
  padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);
  color:var(--ink);letter-spacing:-.01em;transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.mplist span:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:var(--sh-1);}
.ecom__do{display:grid;gap:11px;margin-bottom:30px;}
.ecom__do li{display:flex;gap:11px;font-size:15px;color:var(--text);line-height:1.5;}
.ecom__do svg{width:17px;height:17px;color:var(--cyan-ink);flex-shrink:0;margin-top:3px;}

/* --- the dashboard --- */
.dash{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease-out);
  opacity:0;
}
.dash.is-tilting{transition:transform .12s linear;}
.dash.is-live{opacity:1;transition:opacity .7s var(--ease-out);}
.dash__bar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line-soft);background:#FCFDFF;border-radius:var(--r-lg) var(--r-lg) 0 0;}
.dash__dots{display:flex;gap:5px}
.dash__dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.dash__title{font-size:12.5px;font-weight:600;color:var(--muted)}
.dash__sample{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);padding:4px 9px;border-radius:999px;}
.dash__body{padding:20px}

/* beat 1 — product cards appear */
.dprods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.dprod{
  border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:11px;background:#fff;
  opacity:0;transform:translateY(10px);
}
.is-live .dprod{animation:dIn .6s var(--ease-out) forwards}
.is-live .dprod:nth-child(1){animation-delay:.15s}
.is-live .dprod:nth-child(2){animation-delay:.27s}
.is-live .dprod:nth-child(3){animation-delay:.39s}
@keyframes dIn{to{opacity:1;transform:none}}
.dprod__img{height:38px;border-radius:5px;background:linear-gradient(135deg,var(--paper-3),#DCE8FB);margin-bottom:9px}
.dprod__t{height:6px;width:78%;border-radius:99px;background:var(--paper-3);margin-bottom:6px}
.dprod__t.s{width:52%}
/* beat 2 — listing optimisation indicators activate */
.dscore{margin-top:9px;height:4px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.dscore i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width 1s var(--ease-out)}
.is-live .dprod:nth-child(1) .dscore i{width:86%;transition-delay:.7s}
.is-live .dprod:nth-child(2) .dscore i{width:72%;transition-delay:.82s}
.is-live .dprod:nth-child(3) .dscore i{width:94%;transition-delay:.94s}
.dprod__tag{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.dprod__tag em{font-style:normal;color:var(--cyan-ink);opacity:0;transition:opacity .5s var(--ease)}
.is-live .dprod__tag em{opacity:1;transition-delay:1.2s}

/* beat 4 — the chart draws itself */
.dchart{position:relative;border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:14px 14px 10px;background:#FCFDFF;margin-bottom:14px}
.dchart__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.dchart__head h5{font-size:12.5px;letter-spacing:-.02em}
.dchart__head span{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.dchart svg{width:100%;height:88px;display:block;overflow:visible}
.dchart .line{
  fill:none;stroke:url(#eviGrad);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;
}
.is-live .dchart .line{animation:draw 1.6s var(--ease-out) 1.6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.dchart .area{fill:url(#eviFade);opacity:0}
.is-live .dchart .area{animation:fadeArea .9s ease 3s forwards}
@keyframes fadeArea{to{opacity:1}}
.dchart .pt{opacity:0}
.is-live .dchart .pt{animation:fadeArea .5s ease 3.2s forwards}

/* beats 5 + 6 — revenue rises, growth indicator moves up */
.dkpi{display:grid;grid-template-columns:1.25fr 1fr;gap:10px}
.dkpi__box{border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:13px 14px;background:#fff;opacity:0;transform:translateY(8px)}
.is-live .dkpi__box{animation:dIn .6s var(--ease-out) forwards}
.is-live .dkpi__box:nth-child(1){animation-delay:2.05s}
.is-live .dkpi__box:nth-child(2){animation-delay:2.2s}
.dkpi__k{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.dkpi__v{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.dkpi__up{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#0E8A5F;margin-top:5px}
.dkpi__up svg{width:13px;height:13px;transform:translateY(4px);opacity:0;transition:transform .7s var(--ease-out),opacity .4s}
.is-live .dkpi__up svg{transform:none;opacity:1;transition-delay:2.7s}

/* beat 3 — order notifications slide in */
/* beat 3 — the order feed slides in from the right, inside the layout */
.dfeed{display:grid;gap:8px;margin-bottom:14px}
.dfeed__row{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:9px 12px;background:#FCFDFF;
  opacity:0;transform:translateX(20px);
}
.is-live .dfeed__row{animation:toastIn .65s var(--ease-out) forwards}
.is-live .dfeed__row:nth-child(1){animation-delay:1.15s}
.is-live .dfeed__row:nth-child(2){animation-delay:1.35s}
@keyframes toastIn{to{opacity:1;transform:none}}
.dfeed__ico{width:26px;height:26px;border-radius:7px;background:rgba(43,178,231,.12);display:grid;place-items:center;flex-shrink:0}
.dfeed__ico svg{width:13px;height:13px;color:var(--cyan-ink)}
.dfeed b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;letter-spacing:-.02em}
.dfeed__sub{font-size:11px;color:var(--muted)}
.dfeed__t{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dash__note{margin-top:14px;font-size:12.5px;color:var(--muted);text-align:right}
@media (max-width:1040px){
  .ecom__grid{grid-template-columns:1fr;gap:44px}
}
@media (max-width:620px){
  .dprods{grid-template-columns:1fr 1fr}
  .dprods .dprod:nth-child(3){display:none}
  .dash__note{text-align:left}
}

/* ===========================================================================
   33. SUPPORTING SERVICES 02–07
   =========================================================================== */
.svc2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc2{
  position:relative;overflow:hidden;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);padding:26px 24px 24px;
  display:flex;flex-direction:column;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .4s var(--ease),background .4s var(--ease);
}
.svc2::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out);
}
.svc2:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:#D4E0F4;background:#FDFEFF}
.svc2:hover::after{transform:scaleX(1)}
.svc2__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.svc2__n{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.04em;color:#B6C2D8;transition:color .4s var(--ease)}
.svc2:hover .svc2__n{color:var(--cyan-ink)}
.svc2__ico{width:38px;height:38px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line-soft);display:grid;place-items:center;transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease-out)}
.svc2__ico svg{width:18px;height:18px;color:var(--blue);transition:color .4s var(--ease)}
.svc2:hover .svc2__ico{background:var(--blue);border-color:var(--blue);transform:scale(1.06) rotate(-4deg)}
.svc2:hover .svc2__ico svg{color:#fff}
.svc2 h3{font-size:17.5px;letter-spacing:-.028em;margin-bottom:8px}
.svc2 p{font-size:14.5px;color:var(--muted);line-height:1.6}
/* the detail line stays folded until hover / focus */
.svc2__more{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease-out),opacity .4s var(--ease),margin-top .5s var(--ease-out)}
.svc2:hover .svc2__more,.svc2:focus-within .svc2__more{max-height:110px;opacity:1;margin-top:12px}
.svc2__more span{display:inline-block;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--paper-2);border:1px solid var(--line-soft);border-radius:999px;padding:4px 11px;margin:0 5px 5px 0}
.svc2__go{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13.5px;color:var(--blue)}
.svc2__go svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.svc2:hover .svc2__go svg{transform:translateX(6px)}
@media (max-width:980px){.svc2-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.svc2-grid{grid-template-columns:1fr}.svc2__more{max-height:110px;opacity:1;margin-top:12px}}

/* ===========================================================================
   34. GROWTH JOURNEY — a path that draws as you scroll
   =========================================================================== */
.journey{position:relative;padding-left:56px}
.journey__track{position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:var(--line);border-radius:2px}
.journey__aside-note{
  margin-top:26px;padding-top:24px;border-top:1px solid var(--line);
  font-size:15px;color:var(--muted);
}
.journey__aside-note b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;color:var(--ink);font-size:15.5px;letter-spacing:-.02em;margin-bottom:6px}
.journey__fill{
  position:absolute;left:0;top:0;width:100%;border-radius:2px;
  background:linear-gradient(180deg,var(--blue),var(--cyan));
  height:calc(var(--jp,0) * 100%);transition:height .25s linear;
}
.jstep{position:relative;padding:0 0 clamp(26px,3vw,38px)}
.jstep:last-child{padding-bottom:0}
.jstep__dot{
  position:absolute;left:-56px;top:-2px;width:40px;height:40px;border-radius:50%;
  background:#fff;border:2px solid var(--line);display:grid;place-items:center;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:12.5px;color:#AEBACF;
  transition:border-color .45s var(--ease),color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease-out);
}
.jstep.is-on .jstep__dot{border-color:var(--blue);color:var(--blue);transform:scale(1.06)}
.jstep.is-on:last-child .jstep__dot{background:var(--blue);border-color:var(--blue);color:#fff}
.jstep__body{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  padding:14px 18px;border:1px solid transparent;border-radius:var(--r-md);
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease-out);
}
.jstep.is-on .jstep__body{background:#fff;border-color:var(--line);transform:translateX(4px);box-shadow:var(--sh-1)}
.jstep h4{font-size:17px;letter-spacing:-.028em;color:#8E9AAF;transition:color .45s var(--ease)}
.jstep.is-on h4{color:var(--ink)}
.jstep p{font-size:14px;color:var(--muted-2);transition:color .45s var(--ease)}
.jstep.is-on p{color:var(--muted)}
.jstep--lead h4{font-size:19px}
.jstep--lead .jstep__body{border-color:var(--line);background:#fff}
@media (max-width:560px){
  .journey{padding-left:44px}
  .journey__track{left:15px}
  .jstep__dot{left:-44px;width:32px;height:32px;font-size:11px}
  .jstep__body{padding:12px 14px}
}

/* ===========================================================================
   35. STATISTICS — large type, count-up, labels arriving late
   =========================================================================== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.stat{position:relative;padding-top:26px;border-top:1px solid var(--line)}
.stat__num{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(62px,9vw,128px);line-height:.92;letter-spacing:-.06em;
  background:linear-gradient(100deg,var(--blue) 12%,var(--cyan) 46%,var(--blue) 82%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;margin-bottom:16px;
}
/* only drifts while the section is in view — it repaints clipped text, so
   it must not run for the whole page */
.stats.in .stat__num{animation:statDrift 18s linear infinite;}
@keyframes statDrift{to{background-position:220% 0}}
@media (prefers-reduced-motion:reduce){.stat__num{animation:none}}
.stat h4{font-size:17.5px;letter-spacing:-.028em;margin-bottom:8px}
.stat p{font-size:14px;color:var(--muted);line-height:1.6;max-width:34ch}
.stat h4,.stat p{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.stats.in .stat h4{opacity:1;transform:none;transition-delay:.55s}
.stats.in .stat p{opacity:1;transform:none;transition-delay:.68s}
.stats.in .stat:nth-child(2) h4{transition-delay:.65s} .stats.in .stat:nth-child(2) p{transition-delay:.78s}
.stats.in .stat:nth-child(3) h4{transition-delay:.75s} .stats.in .stat:nth-child(3) p{transition-delay:.88s}
@media (max-width:860px){.stats{grid-template-columns:1fr;gap:30px}}

/* ===========================================================================
   36. CASE STUDIES — scale in, zoom + overlay on hover
   =========================================================================== */
.cases2{display:grid;gap:clamp(20px,2.4vw,28px)}
.case2{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(24px,3.4vw,48px);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,28px);
  transition:box-shadow .5s var(--ease-out),border-color .45s var(--ease),transform .5s var(--ease-out);
}
.case2:hover{box-shadow:var(--sh-2);border-color:#D4E0F4;transform:translateY(-4px)}
.case2:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.case2:nth-child(even) .case2__vis{order:2}
.case2__vis{position:relative;overflow:hidden;border-radius:var(--r-md);opacity:0;transform:scale(.94);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.case2.in .case2__vis{opacity:1;transform:none}
.case2__vis .panel{transition:transform .9s var(--ease-out)}
.case2:hover .case2__vis .panel{transform:scale(1.05)}
.case2__ov{
  position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;padding:20px;
  background:linear-gradient(180deg,transparent 40%,rgba(11,27,58,.72));
  opacity:0;transition:opacity .5s var(--ease)
}
.case2:hover .case2__ov{opacity:1}
.case2__ov span{display:inline-flex;align-items:center;gap:8px;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;transform:translateY(8px);transition:transform .5s var(--ease-out)}
.case2:hover .case2__ov span{transform:none}
.case2__ov svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.case2:hover .case2__ov svg{transform:translateX(5px)}
.case2__body{opacity:0;transform:translateX(22px);transition:opacity .8s var(--ease-out) .12s,transform .8s var(--ease-out) .12s}
.case2.in .case2__body{opacity:1;transform:none}
.case2:nth-child(even) .case2__body{transform:translateX(-22px)}
.case2.in:nth-child(even) .case2__body{transform:none}
.case2__meta{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:12px}
.case2 h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.032em;margin-bottom:18px}
.case2__rows{display:grid}
.case2__row{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line-soft)}
.case2__row:last-child{border-bottom:1px solid var(--line-soft)}
.case2__row dt{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.case2__row dd{font-size:15px;line-height:1.55;color:var(--text)}
.case2__mets{display:flex;flex-wrap:wrap;gap:26px;margin-top:22px}
.case2__met b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(24px,3vw,32px);letter-spacing:-.04em;color:var(--blue);line-height:1;font-variant-numeric:tabular-nums}
.case2__met span{font-size:12.5px;color:var(--muted)}
@media (max-width:900px){
  .case2,.case2:nth-child(even){grid-template-columns:1fr}
  .case2:nth-child(even) .case2__vis{order:0}
  .case2__body,.case2:nth-child(even) .case2__body{transform:translateY(18px)}
  .case2.in .case2__body{transform:none}
}
@media (max-width:480px){.case2__row{grid-template-columns:1fr;gap:3px}}

/* ===========================================================================
   37. MARKETPLACE WALL — marquee + viewport fade-in
   =========================================================================== */
.mwall{
  padding:clamp(48px,5.5vw,76px) 0;background:var(--paper-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.mwall__label{text-align:center;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:clamp(30px,3.4vw,42px)}
.marq.in .marq__item:hover{color:var(--blue);transform:scale(1.06)}

/* ===========================================================================
   38. HOMEPAGE BLOG TEASER (reuses .feat / .art from the blog page)
   =========================================================================== */
.blogteaser{display:grid;gap:clamp(20px,2.4vw,28px)}

/* ===========================================================================
   39. FINAL CTA — floating growth marks + cursor light
   =========================================================================== */
.close__marks{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cmark{
  position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  display:flex;align-items:center;gap:8px;padding:9px 13px;
  font-size:11.5px;font-weight:600;color:rgba(255,255,255,.82);
  letter-spacing:.02em;white-space:nowrap;
  transform:translate3d(calc(var(--mx,0) * var(--d,10) * 1px),calc(var(--my,0) * var(--d,10) * 1px),0);
  transition:transform .7s var(--ease-out);
}
.cmark i{display:block;width:6px;height:6px;border-radius:50%;background:var(--cyan);flex-shrink:0}
.cmark__f{display:inline-flex;align-items:center;gap:9px;animation:bob var(--dur,9s) ease-in-out var(--del,0s) infinite}
.cmark--1{top:16%;left:7%;--d:5}
.cmark--2{top:30%;right:8%;--d:7}
.cmark--3{bottom:19%;left:12%;--d:4}
.cmark--4{bottom:26%;right:11%;--d:6}
@media (max-width:1100px){.cmark--2,.cmark--3{display:none}}
@media (max-width:820px){.close__marks{display:none}}

/* ===========================================================================
   40. PLATFORM LOGO MARQUEE
   Elementor: Image Carousel (autoplay, linear, 0 pause, arrows off) or a
   Container + this CSS. Each item is a fixed-size card so no logo is ever
   stretched — the image is object-fit: contain inside it.
   Default state is muted greyscale; hover restores full brand colour.
   =========================================================================== */
.lmarq{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.lmarq__track{
  display:flex;width:max-content;
  animation:slide 46s linear infinite;
}
/* two identical sets + -50% travel = a seamless loop with no visible reset */
@keyframes slide{to{transform:translateX(-50%);}}
.lmarq:hover .lmarq__track,.lmarq:focus-within .lmarq__track{animation-play-state:paused;}
.lmarq__set{display:flex;}
.lcard{
  flex:0 0 auto;width:184px;height:86px;margin:0 9px;
  display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 1px 2px rgba(11,27,58,.03);
  transition:transform var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease),
             box-shadow var(--t-micro) var(--ease);
}
.lcard:hover{transform:translateY(-3px);border-color:#D4E0F4;box-shadow:var(--sh-1);}
/* real logo files drop straight in here — aspect ratio is preserved */
.lcard__img{
  max-width:108px;max-height:30px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.58;
  transition:filter var(--t-micro) var(--ease),opacity var(--t-micro) var(--ease),
             transform var(--t-micro) var(--ease);
}
.lcard:hover .lcard__img{filter:none;opacity:1;transform:scale(1.04);}
/* typographic stand-in until the official SVGs are in place */
.lcard__wm{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:18px;
  letter-spacing:-.025em;color:#6E7A8F;white-space:nowrap;
  transition:color var(--t-micro) var(--ease),transform var(--t-micro) var(--ease);
}
.lcard:hover .lcard__wm{color:var(--brand,var(--blue));transform:scale(1.03);}
@media (max-width:700px){
  .lmarq__track{animation-duration:72s;}
  .lcard{width:152px;height:74px;margin:0 6px;}
  .lcard__wm{font-size:16px;}
}
@media (prefers-reduced-motion:reduce){.lmarq__track{animation:none;}}

/* 40b. PLATFORM LOGO MARQUEE — official logo on hover (homepage only)
   The wordmark stays as the resting state; on hover it fades out and the
   platform's own logo (assets/logos/platforms/) fades and scales in.
   Each logo is shown at an optically balanced size and cropped to its
   artwork (per-logo numbers from build/logo_identity.json) — never
   stretched or recoloured.
   Elementor: add the same <img> to each card and paste this CSS. */
.mwall .lcard{position:relative;}
.mwall .lcard__wm{transition:color var(--t-micro) var(--ease),transform .45s var(--ease-out),opacity .35s var(--ease);}
.mwall .lcard__logo{
  --k:1;position:absolute;top:50%;left:50%;
  width:calc(var(--cw) * var(--k));height:calc(var(--ch) * var(--k));overflow:hidden;
  pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.9);
  transition:opacity .45s var(--ease),transform .55s var(--ease-out);
}
.mwall .lcard__logo img{
  position:absolute;display:block;max-width:none;
  width:calc(var(--iw) * var(--k));height:calc(var(--ih) * var(--k));
  left:calc(var(--ix) * var(--k) * -1);top:calc(var(--iy) * var(--k) * -1);
}
.mwall .lcard:hover .lcard__wm{opacity:0;transform:scale(.94);}
.mwall .lcard:hover .lcard__logo{opacity:1;transform:translate(-50%,-50%) scale(1);}
.mwall .lcard__logo[data-logo="amazon"]{--cw:90.6px;--ch:28.7px;--iw:114.1px;--ih:76px;--ix:11.7px;--iy:23.7px;}
.mwall .lcard__logo[data-logo="flipkart"]{--cw:96.1px;--ch:27px;--iw:121.1px;--ih:80.7px;--ix:12.5px;--iy:26.8px;}
.mwall .lcard__logo[data-logo="meesho"]{--cw:46px;--ch:46px;--iw:46px;--ih:46px;--ix:0px;--iy:0px;}
.mwall .lcard__logo[data-logo="myntra"]{--cw:88.5px;--ch:29.4px;--iw:90.3px;--ih:39.5px;--ix:1px;--iy:5.3px;}
.mwall .lcard__logo[data-logo="blinkit"]{--cw:46px;--ch:46px;--iw:46px;--ih:46px;--ix:0px;--iy:0px;}
.mwall .lcard__logo[data-logo="shopify"]{--cw:41.4px;--ch:46px;--iw:46px;--ih:46px;--ix:2.3px;--iy:0px;}
.mwall .lcard__logo[data-logo="etsy"]{--cw:66.3px;--ch:32px;--iw:69.2px;--ih:34.6px;--ix:1.6px;--iy:1.5px;}
.mwall .lcard__logo[data-logo="ebay"]{--cw:77px;--ch:32px;--iw:97px;--ih:64.6px;--ix:10px;--iy:16.3px;}
.mwall .lcard__logo[data-logo="poshmark"]{--cw:118px;--ch:20.6px;--iw:118px;--ih:20.6px;--ix:0px;--iy:0px;}
@media (max-width:700px){.mwall .lcard__logo{--k:.84;}}
@media (prefers-reduced-motion:reduce){.mwall .lcard__logo,.mwall .lcard:hover .lcard__logo{transform:translate(-50%,-50%);}}

/* ===========================================================================
   41. CLIENT REVIEWS — continuous marquee
   Same behaviour as the platform logo strip: one constant right-to-left
   drift, never a slide-then-stop. The set is duplicated so the offset wraps
   by exactly one set width — no jump, flash or gap at the seam. Motion is
   driven by a transform written once per frame, which is what makes hover
   pause and pointer drag possible mid-flow.
   Elementor: Loop Carousel with autoplay + "infinite" + linear transition and
   0ms pause between slides, or an Image/Loop Carousel styled with this CSS.
   =========================================================================== */
.rev-sec{
  position:relative;
  background:
    radial-gradient(880px 460px at 50% -6%, rgba(43,178,231,.07), transparent 66%),
    #fff;
}
.rev{--rev-gap:20px;--cw:clamp(268px,23vw,300px);position:relative;}
.rev__view{
  overflow:hidden;padding:12px 0 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 58px,#000 calc(100% - 58px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 58px,#000 calc(100% - 58px),transparent 100%);
  cursor:grab;
  touch-action:pan-y;        /* horizontal drag here, page still scrolls */
}
.rev__view.is-drag{cursor:grabbing;user-select:none;}
.rev__track{
  display:flex;gap:var(--rev-gap);
  will-change:transform;
  transform:translate3d(0,0,0);
}

/* --- the card: compact, one internal hierarchy for every review --------- */
.rev__card{
  flex:0 0 var(--cw);
  display:flex;flex-direction:column;
  min-height:248px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 1px 2px rgba(11,27,58,.04);
  padding:24px 22px 22px;
  transition:transform var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease),
             border-color var(--t-micro) var(--ease);
}
.rev__card:hover{transform:translateY(-3px) scale(1.015);box-shadow:var(--sh-2);border-color:#D4E0F4;}

/* top row: rating left, a small quote glyph right */
.rev__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.rev__stars{display:flex;gap:4px;}
.rev__stars svg{width:14px;height:14px;color:var(--cyan);}
.rev__mark{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:30px;
  line-height:1;letter-spacing:-.04em;color:var(--blue);opacity:.16;
  user-select:none;pointer-events:none;margin-top:8px;
}

/* the review text — readable, and capped so one long review can't turn every
   card into a tower (7 lines is roughly 40 words) */
.rev__text{
  font-size:15px;line-height:1.66;color:var(--text);
  margin-bottom:22px;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;
}

/* author block, anchored to the base of every card so they all line up */
.rev__who{
  margin-top:auto;display:flex;align-items:center;gap:12px;
  padding-top:18px;border-top:1px solid var(--line-soft);
}
.rev__av{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(150deg,var(--paper-2),var(--paper-3));
  border:1px solid var(--line);display:grid;place-items:center;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:13px;color:var(--blue);
}
.rev__nm{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14.5px;letter-spacing:-.02em;color:var(--ink);}
.rev__rl{font-size:13px;color:var(--muted);}


@media (max-width:820px){
  .rev{--cw:clamp(262px,42vw,300px);--rev-gap:16px;}
}
@media (max-width:620px){
  .rev{--cw:78vw;--rev-gap:14px;}
  .rev__card{min-height:236px;padding:22px 20px 20px;}
  /* a 58px fade eats a third of a phone-width view — keep it narrow here */
  .rev__view{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .rev__card:hover{transform:none;}
}

/* ===========================================================================
   42. FINAL POLISH PASS
   Three things the audit turned up, and nothing else. Everything already in
   this file was measured as working before it was left alone.
   =========================================================================== */

/* --- 1. ambient light ----------------------------------------------------
   The hero and closing glows only moved with the cursor, so the background
   was static on every touch device and on desktop until the mouse moved.
   The drift runs on the inner layer using transform + opacity only: the
   first version animated background-position, which repainted a full-bleed
   gradient every frame and cost ~25fps during scroll.
   Elementor: a Container background with this keyframe — no widget needed. */
.glow > i{animation:glowDrift 30s ease-in-out infinite;will-change:transform;}
@keyframes glowDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.88;}
  50%    {transform:translate3d(3%,-2.4%,0) scale(1.06);opacity:1;}
}
@media (prefers-reduced-motion:reduce){.glow > i{animation:none;}}

/* --- 2. the one hard seam on the page ------------------------------------
   Every other section boundary is a hairline or a shared tone. The dark
   "Why Evitex" block met the reviews section as an abrupt navy-to-white cut.
   A short gradient step on the underside carries the eye across it. */
.sec--dark{position:relative;}
.sec--dark::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.055));
}
.sec--dark > .wrap{position:relative;z-index:2;}

/* --- 3. secondary buttons had no depth response -------------------------
   Primary lifted and gained shadow on hover; outline and ghost only changed
   colour, so they felt like different components. Same gesture, quieter. */
.btn--outline:hover{box-shadow:0 8px 20px rgba(27,54,145,.1);}
.btn--light:hover{box-shadow:0 12px 30px rgba(0,0,0,.22);}
.btn--ghost:hover{box-shadow:0 8px 22px rgba(0,0,0,.18);}

/* ===========================================================================
   43. DISCOVERABLE DETAILS
   Seven additions, each one the audit showed was genuinely absent. Everything
   pointer-driven is gated on a real pointer and a wide viewport, and every
   transform is written by CSS from a variable — so on a phone none of this
   costs a frame.
   =========================================================================== */

/* --- 1. scroll progress, hidden in the navbar's bottom edge --------------
   Invisible until the header sticks, then a 2px brand line that tracks the
   page. Elementor: Container + Custom CSS, or the Scroll Progress widget. */
.head-prog{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  transform:scaleX(var(--sp,0));transform-origin:left;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  opacity:0;transition:opacity .45s var(--ease);pointer-events:none;
}
.site-head.is-stuck .head-prog{opacity:1;}

/* --- 2. line-by-line reveal for section headings ------------------------
   The hero reveals word by word; section headings now reveal line by line,
   which keeps the motion language varied rather than one fade everywhere.
   JS measures the real line breaks, then wraps each line in a clipping span. */
.ln{display:block;overflow:hidden;}
.ln > span{
  display:block;transform:translateY(105%);
  transition:transform .85s var(--ease-out);
  transition-delay:calc(var(--l,0) * 95ms);
}
.stagger.in .ln > span,.r.in .ln > span{transform:none;}
/* a split heading is revealed by its lines, so the block itself stays put */
.stagger > h2.ln-ready,.stagger.in > h2.ln-ready{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .ln{overflow:visible;}
  .ln > span{transform:none;}
}

/* --- 3. cursor-following spotlight on the service cards ----------------
   Only the card under the cursor lights, and only that card's variables get
   written, so the cost is one element per frame at most. */
.svc2 > *{position:relative;z-index:1;}
.svc2::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(280px circle at var(--sx,50%) var(--sy,50%),
             rgba(43,178,231,.13),transparent 60%);
  opacity:0;transition:opacity .45s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .svc2:hover::before{opacity:1;}
}

/* --- 4. contextual cursor label ----------------------------------------
   A small pill that appears only over article artwork — not a global custom
   cursor, and the real cursor is never replaced. */
.cchip{
  position:fixed;left:0;top:0;z-index:950;pointer-events:none;
  transform:translate3d(var(--cx,-300px),var(--cy,-300px),0);
  will-change:transform;
}
.cchip span{
  display:block;transform:translate(-50%,-50%) scale(.45);opacity:0;
  transition:transform .4s var(--ease-out),opacity .25s var(--ease);
  background:var(--blue);color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:11px;line-height:1;
  letter-spacing:.09em;text-transform:uppercase;
  padding:12px 15px;border-radius:999px;white-space:nowrap;
  box-shadow:0 10px 24px rgba(27,54,145,.32);
}
.cchip.is-on span{transform:translate(-50%,-50%) scale(1);opacity:1;}
@media (max-width:900px),(hover:none),(pointer:coarse){.cchip{display:none;}}

/* --- 5. case-study overlay now wipes instead of fading ------------------ */
.case2__ov{
  opacity:1;
  clip-path:inset(100% 0 0 0);
  transition:clip-path .65s var(--ease-out);
}
.case2:hover .case2__ov{clip-path:inset(0 0 0 0);}
@media (prefers-reduced-motion:reduce){
  .case2__ov{transition:opacity .3s;opacity:0;clip-path:none;}
  .case2:hover .case2__ov{opacity:1;}
}

/* --- 6. marketplace flow: a pulse travels the platform list -------------
   The one animation the primary service has and the others don't. It says
   "we run the whole ecosystem" using the platform names already on the page.
   Elementor: 6 chips + entrance animation delays, or this keyframe. */
.ecom.is-flow .mplist span{
  animation:chipFlow 7s var(--ease) infinite;
  animation-delay:calc(var(--c,0) * .42s);
}
@keyframes chipFlow{
  0%,22%,100%{border-color:var(--line);transform:none;box-shadow:none;}
  6%  {border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 6px 16px rgba(43,178,231,.24);}
  13% {border-color:var(--line);transform:none;box-shadow:none;}
}
.mplist:hover span{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){.ecom.is-flow .mplist span{animation:none;}}