/* ==========================================================================
   Gikpik. Palette is lifted from the logo artwork: night navy, a violet haze
   low on the horizon, and the mint-to-aqua of the mark itself.
   ========================================================================== */

@font-face{font-family:"Chakra Petch";font-weight:500;font-style:normal;font-display:swap;src:url("../assets/fonts/chakra-petch-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:600;font-style:normal;font-display:swap;src:url("../assets/fonts/chakra-petch-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:700;font-style:normal;font-display:swap;src:url("../assets/fonts/chakra-petch-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:100 900;font-style:normal;font-display:swap;src:url("../assets/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2")}

:root{
  --night:#03062B;
  --deep:#060C45;
  --indigo:#0F1C78;
  --mint:#00EB8A;
  --aqua:#00E6B6;
  --ink:#EEF2FF;
  --ink-soft:#C7CEF2;
  --dim:#9BA4D8;
  --line:rgba(155,164,216,.18);
  --line-strong:rgba(155,164,216,.36);
  --card:rgba(10,18,84,.5);
  --amber:#FFC857;
  --rose:#FF8095;

  --display:"Chakra Petch",system-ui,sans-serif;
  --text:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;

  --pad:clamp(20px,5vw,56px);
  --header-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0;background:var(--night);color:var(--ink);
  font:400 1.0625rem/1.62 var(--text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.012em;line-height:1.08}

.container{width:min(100% - 2*var(--pad),1240px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--mint);color:#02143A;padding:.7em 1.1em;font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}

/* ---------- Page-level effects ---------- */
.progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:60;background:linear-gradient(90deg,var(--mint),var(--aqua));transform:scaleX(0);transform-origin:left;box-shadow:0 0 12px rgba(0,235,138,.7)}
.cursor-glow{position:fixed;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,235,138,.12),rgba(0,235,138,.04) 55%,transparent 72%);pointer-events:none;z-index:1;opacity:0;transition:opacity .5s;will-change:transform}
.cursor-glow.on{opacity:1}

/* ---------- Buttons: two opposite corners cut at 45 degrees, like the mark ---------- */
.btn{
  --c:12px;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.95em 1.55em;border:0;cursor:pointer;text-decoration:none;
  font:650 .98rem/1 var(--text);letter-spacing:.005em;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));
  transition:background .2s,color .2s;will-change:transform;
}
.btn:focus-visible{outline:2px solid #fff;outline-offset:-5px}
.btn-primary{background:var(--mint);color:#02143A}
.btn-primary:focus-visible{outline-color:#02143A}
.btn-primary:hover{background:#5CFFB6}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-sm{padding:.75em 1.15em;font-size:.9rem;--c:9px}

/* ---------- Cut-corner cards + cursor spotlight ---------- */
.cut{
  --cut:22px;
  position:relative;background:var(--card);border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
}
.cut::after{
  content:"";position:absolute;top:-1px;right:-1px;width:calc(var(--cut) + 1px);height:calc(var(--cut) + 1px);pointer-events:none;
  background:linear-gradient(to top right,transparent calc(50% - .8px),var(--line-strong) calc(50% - .8px),var(--line-strong) calc(50% + .8px),transparent calc(50% + .8px));
}
.glow{isolation:isolate;position:relative}
.glow::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(0,235,138,.16),transparent 62%);
}
.glow:hover::before{opacity:1}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);display:flex;align-items:center;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(3,6,43,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .3s;pointer-events:none}
.site-header.is-solid{border-bottom-color:var(--line)}
.site-header.is-solid::before{opacity:1}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.wordmark{font:700 1.3rem/1 var(--display);letter-spacing:.07em}
.main-nav{display:flex;align-items:center;gap:30px}
.main-nav a:not(.btn){font-size:.96rem;font-weight:500;color:var(--ink-soft);text-decoration:none;padding:.4em 0;position:relative}
.main-nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.main-nav a:not(.btn):hover{color:var(--ink)}
.main-nav a:not(.btn):hover::after{transform:scaleX(1)}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line-strong);background:rgba(3,6,43,.5);cursor:pointer;position:relative}
.menu-btn i{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);transition:transform .25s,top .25s}
.menu-btn i:nth-of-type(1){top:16px}
.menu-btn i:nth-of-type(2){top:25px}
.menu-btn[aria-expanded="true"] i:nth-of-type(1){top:21px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-of-type(2){top:21px;transform:rotate(-45deg)}

/* ---------- Altitude rail ---------- */
.rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);height:min(54vh,440px);width:14px;z-index:40;display:none}
.rail-track{position:absolute;right:6px;top:0;bottom:0;width:1px;background:var(--line-strong)}
.rail-marker{position:absolute;left:50%;top:calc(var(--p,0) * 100%);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;background:var(--mint);transform:rotate(45deg);box-shadow:0 0 14px rgba(0,235,138,.8);transition:top .15s linear}
.rail li{position:absolute;right:2px;top:calc(var(--i) / (var(--n) - 1) * 100%);width:9px;height:1px;margin-top:-.5px;background:var(--dim)}
.rail li span{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:.78rem;font-weight:500;white-space:nowrap;color:var(--dim);display:none}
.rail li.is-on span{color:var(--ink)}
@media (min-width:1180px){.rail{display:block}}
@media (min-width:1560px){.rail li span{display:block}}

/* ==========================================================================
   Aurora
   ========================================================================== */
.aurora{
  position:absolute;inset:0;overflow:hidden;z-index:0;
  background:
    radial-gradient(78% 66% at 0% 112%,rgba(184,116,172,.82) 0%,rgba(122,80,150,.46) 36%,transparent 76%),
    radial-gradient(62% 72% at 94% 64%,rgba(8,46,150,.86) 0%,transparent 70%),
    radial-gradient(56% 50% at 46% 36%,rgba(6,22,110,.9) 0%,transparent 72%),
    linear-gradient(180deg,#000206 0%,#020836 48%,#071056 100%);
}
.aurora i{position:absolute;top:-12%;height:132%;opacity:.3;transform:skewX(-14deg);will-change:transform;animation:sway 40s ease-in-out infinite alternate;background:linear-gradient(90deg,transparent 0%,rgba(30,92,224,.6) 50%,transparent 100%),linear-gradient(180deg,transparent 0%,rgba(30,92,224,.5) 46%,rgba(124,72,164,.4) 100%);background-blend-mode:screen;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent)}
.aurora i:nth-child(1){left:14%;width:18vw}
.aurora i:nth-child(2){left:44%;width:14vw;animation-duration:52s;animation-delay:-14s;opacity:.26}
.aurora i:nth-child(3){left:72%;width:20vw;animation-duration:46s;animation-delay:-28s;opacity:.3}
@keyframes sway{to{transform:translateX(7vw) skewX(-9deg)}}
.aurora::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 70%,var(--night) 100%)}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:grid;grid-template-rows:1fr auto;padding-top:calc(var(--header-h) + 24px)}
.hero>.container{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:clamp(20px,3vw,48px)}
.status-pill{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(18px,2.4vw,28px);padding:.5em 1em .5em .85em;font-size:.9rem;font-weight:600;color:var(--ink-soft);background:rgba(255,255,255,.05);border:1px solid var(--line-strong);border-radius:99px}
.live{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(0,235,138,.7);animation:ping 2.2s ease-out infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(0,235,138,0)}100%{box-shadow:0 0 0 0 rgba(0,235,138,0)}}
.display{font-size:clamp(2.6rem,6.2vw,5.6rem);line-height:.98;letter-spacing:-.025em;font-weight:700}
.display .line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.display .li{display:inline-block}
.grad{background:linear-gradient(100deg,var(--mint) 0%,var(--aqua) 28%,#C6FFF0 50%,var(--aqua) 72%,var(--mint) 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:-260% 0}}
.lede{margin-top:clamp(22px,3vw,34px);max-width:52ch;font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--ink-soft)}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3.4vw,40px)}
.hero-note{margin-top:28px;max-width:54ch;font-size:.95rem;color:var(--dim);padding-left:16px;border-left:2px solid var(--mint)}

.hero-stage{position:relative;justify-self:center;width:min(100%,620px);aspect-ratio:1}
#particles{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.hero-stage .mark{position:absolute;inset:8%;width:84%;height:84%;filter:drop-shadow(0 24px 90px rgba(0,235,138,.2))}
.js .hero-stage .mark{opacity:0}
.js .hero-stage.no-particles .mark,.fallback .hero-stage .mark{opacity:1}
.hero-stage.has-particles .mark{display:none}
.hero-stage.no-particles #particles,.fallback .hero-stage #particles{display:none}

.hero-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:28px}
.tagline{font:600 1.05rem/1 var(--display);letter-spacing:.02em;color:var(--ink-soft)}
.climb{font-size:.9rem;color:var(--dim);text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.climb::after{content:"";width:1px;height:34px;background:linear-gradient(var(--mint),transparent);animation:cue 2.4s ease-in-out infinite}
.climb:hover{color:var(--ink)}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* hidden until the GSAP intro plays; .fallback guarantees visibility if scripts fail */
.js .display .li{transform:translateY(112%)}
.js .status-pill,.js .lede,.js .actions,.js .hero-note,.js .hero-foot{opacity:0}
.fallback .display .li{transform:none!important}
.fallback .status-pill,.fallback .lede,.fallback .actions,.fallback .hero-note,.fallback .hero-foot{opacity:1!important}

/* ---------- Numbers ---------- */
.stats{position:relative;padding-block:clamp(36px,5vw,64px);background:var(--night);border-top:1px solid var(--line)}
.stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:8px clamp(14px,2.4vw,32px);border-left:1px solid var(--line-strong)}
.stat:first-child{border-left:0;padding-left:0}
.num{font:700 clamp(2.8rem,6.4vw,5.4rem)/1 var(--display);letter-spacing:-.03em;background:linear-gradient(180deg,#fff,var(--aqua));-webkit-background-clip:text;background-clip:text;color:transparent}
.cap{margin-top:10px;font-size:.98rem;color:var(--dim);max-width:20ch}

/* ---------- Marquee bands ---------- */
.bands{position:relative;overflow:hidden;padding-block:clamp(44px,6vw,86px);background:var(--night)}
.band{overflow:hidden;white-space:nowrap}
.band-mint{position:relative;z-index:2;background:var(--mint);color:#02143A;transform:rotate(-1.6deg) scale(1.05);box-shadow:0 24px 80px rgba(0,235,138,.22)}
.band-line{position:relative;z-index:1;margin-top:-12px;background:#050B40;border-block:1px solid var(--line-strong);transform:rotate(1.3deg) scale(1.05);color:transparent}
.marquee{display:flex;width:max-content;animation:marq 42s linear infinite}
.band-line .marquee{animation-direction:reverse;animation-duration:50s}
.marquee ul{display:flex;flex:none}
.marquee li{display:flex;align-items:center;gap:.9em;padding:.34em .5em .34em 0;font:700 clamp(2rem,4.6vw,4rem)/1.1 var(--display);letter-spacing:-.01em}
.marquee li::after{content:"";width:.3em;height:.3em;background:currentColor;transform:rotate(45deg);margin-left:.1em;flex:none}
.band-line li{-webkit-text-stroke:1.2px var(--mint)}
.band-line li::after{background:var(--mint)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ==========================================================================
   Sections
   ========================================================================== */
.section{position:relative;padding-block:clamp(76px,10vw,144px)}
.section-head{max-width:800px;margin-bottom:clamp(34px,5vw,60px)}
.section h2,.work-head h2{font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.02;letter-spacing:-.022em;font-weight:700}
.section-head p{margin-top:20px;max-width:62ch;color:var(--ink-soft)}

/* word-mask reveal for headings */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.split .wi{display:inline-block}
.js .split .wi{transform:translateY(112%)}
.fallback .split .wi{transform:none!important}

/* ---------- Services ---------- */
.services{background:linear-gradient(180deg,var(--night),#050b3d)}
.result{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:.95rem;color:var(--ink)}
.result strong{color:var(--mint);margin-right:.35em}

.offers{--cut:30px;margin-top:clamp(56px,8vw,96px);padding:clamp(26px,4vw,46px);background:linear-gradient(135deg,rgba(0,235,138,.14),rgba(15,28,120,.55) 60%)}
.offers h3{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:26px}
.offer-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.offer{padding-left:20px;border-left:1px solid var(--line-strong);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.offer h4{font-size:1.2rem;color:var(--mint)}
.offer p{color:var(--ink-soft);font-size:.98rem;margin-bottom:8px}

/* ---------- Solutions ---------- */
.fit{background:linear-gradient(180deg,#050b3d,var(--night))}
.fit-grid{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.5fr);gap:clamp(24px,4vw,56px);align-items:start}
.tabs{display:flex;flex-direction:column;border-left:1px solid var(--line-strong)}
.tabs button{text-align:left;padding:1em 1.2em;background:transparent;border:0;border-left:3px solid transparent;margin-left:-1px;cursor:pointer;font:600 1.1rem/1.25 var(--display);color:var(--dim);transition:color .2s,background .2s,border-color .2s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-left-color:var(--mint);background:linear-gradient(90deg,rgba(0,235,138,.12),transparent)}
.panel{padding:clamp(24px,3.4vw,40px);display:grid;gap:30px;min-height:330px;align-content:start}
.panel-block h3{font-size:1.05rem;color:var(--mint);margin-bottom:10px}
#panel-today{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.4;color:var(--ink);max-width:36ch;font-family:var(--display);font-weight:500}
.flow{display:flex;flex-wrap:wrap;gap:14px 0;align-items:center}
.flow li{position:relative;padding:.72em 1.05em;font:600 .98rem/1.1 var(--display);background:rgba(0,235,138,.09);border:1px solid rgba(0,235,138,.4);animation:chip .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--k,0) * .14s)}
.flow li+li{margin-left:30px}
.flow li+li::before{content:"";position:absolute;left:-31px;top:50%;width:30px;height:1px;background:var(--mint);transform-origin:left;animation:wire .35s ease both;animation-delay:calc(var(--k,0) * .14s + .1s)}
.flow li+li::after{content:"";position:absolute;left:-6px;top:50%;width:7px;height:7px;margin-top:-3.5px;background:var(--mint);transform:rotate(45deg);animation:chip .3s ease both;animation-delay:calc(var(--k,0) * .14s + .3s)}
@keyframes chip{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes wire{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.flow li+li::after{animation-name:diamond}
@keyframes diamond{from{opacity:0;transform:rotate(45deg) scale(0)}to{opacity:1;transform:rotate(45deg) scale(1)}}
.panel.swap .panel-block>p,.panel.swap .panel-foot{animation:swap .4s ease}
@keyframes swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel-foot{font-size:.94rem;color:var(--dim);max-width:56ch}

/* ---------- Work: expanding panels ---------- */
.work{background:linear-gradient(180deg,var(--night),#040a38 55%,var(--night));padding-block:clamp(76px,10vw,140px)}
.work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:clamp(28px,4vw,44px)}
.work-head p:not(.xp-hint):not(.eyebrow){margin-top:18px;max-width:58ch;color:var(--ink-soft)}
.xp-hint{flex:none;display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--dim)}
.xp-hint::before{content:"";width:30px;height:1px;background:var(--mint)}
.index li[hidden]{display:none}
.plate{width:100%;height:clamp(170px,18vw,240px);background:radial-gradient(80% 90% at 20% 100%,rgba(142,94,150,.3),transparent 70%),radial-gradient(70% 80% at 90% 10%,rgba(15,28,120,.8),transparent 70%),#050B3C;border-bottom:1px solid var(--line)}
.plate .p-line{fill:none;stroke:var(--mint);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.plate .p-dim{fill:none;stroke:rgba(155,164,216,.5);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.plate .p-thin{stroke-width:1;opacity:.75}
.plate .p-grid{fill:none;stroke:rgba(155,164,216,.2);stroke-width:1}
.plate .p-solid{fill:rgba(0,235,138,.17)}
.plate .p-hero{stroke-width:2.6;filter:drop-shadow(0 0 6px rgba(0,235,138,.65))}
.plate .p-dot{fill:var(--mint);filter:drop-shadow(0 0 8px rgba(0,235,138,.9))}
.plate .p-bars{stroke-width:3}
.kind{font-size:.9rem;font-weight:600;color:var(--mint)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.chips li{font-size:.8rem;font-weight:500;color:var(--dim);padding:.22em .65em;border:1px solid var(--line-strong);border-radius:2px}
.status{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.94rem;font-weight:600}
.status a,.ix-links a{color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--mint);text-decoration-thickness:1.5px}
.status a:hover,.ix-links a:hover{color:var(--mint)}
.lock{color:var(--dim);font-weight:500;display:inline-flex;align-items:center;gap:7px}
.lock::before{content:"";width:12px;height:13px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 13'%3E%3Cpath d='M3 5V3.5a3 3 0 0 1 6 0V5h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1.5 0h3V3.5a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 13'%3E%3Cpath d='M3 5V3.5a3 3 0 0 1 6 0V5h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1.5 0h3V3.5a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center/contain no-repeat}

.index-wrap{margin-top:clamp(52px,7vw,88px)}
.index-title{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:20px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.filter{padding:.62em 1.05em;font-size:.92rem;font-weight:600;color:var(--dim);background:transparent;border:1px solid var(--line-strong);border-radius:2px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.filter:hover{color:var(--ink);border-color:var(--dim)}
.filter[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:#02143A}
.filter .count{font-weight:500;opacity:.7;margin-left:.2em}
.index{border-top:1px solid var(--line-strong)}
.index li{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(0,1.15fr) minmax(0,.85fr);gap:12px 28px;padding:22px 6px;border-bottom:1px solid var(--line);align-items:start;transition:background .2s}
.index li:hover{background:rgba(255,255,255,.03)}
.index h4{font-size:1.2rem;margin-bottom:5px}
.index li:hover h4{color:var(--mint)}
.ix-main p{font-size:.96rem;color:var(--ink-soft);max-width:64ch}
.ix-stack{font-size:.9rem;color:var(--dim)}
.ix-links{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:flex-end;font-size:.92rem;font-weight:600}
.empty{margin-top:24px;color:var(--dim)}

/* ---------- Team ---------- */
.team{background:linear-gradient(180deg,var(--night),#050b3d)}
.avatar{width:84px;height:84px;margin-bottom:14px;display:grid;place-items:center;overflow:hidden;font:700 1.9rem/1 var(--display);color:#02143A;background:linear-gradient(160deg,var(--mint),var(--aqua));clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.person .role{font-size:.92rem;font-weight:600;color:var(--mint)}
.person .blurb{font-size:.96rem;color:var(--ink-soft);margin-top:6px}
.person .links{display:flex;gap:14px;margin-top:10px;font-size:.9rem;font-weight:600}
.person .links a{text-underline-offset:4px;text-decoration-color:var(--mint)}

/* ---------- Process ---------- */
.process{background:var(--night)}
.process-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.process-intro{position:sticky;top:calc(var(--header-h) + 40px)}
.process-intro p{margin-top:22px;color:var(--ink-soft);max-width:54ch}
.verdict{margin-top:34px}
.verdict-title{font-size:.94rem;color:var(--dim);margin-bottom:12px}
.verdict ul{display:flex;flex-wrap:wrap;gap:10px}
.verdict li{padding:.5em 1em;font:600 .95rem/1 var(--display);border:1px solid;border-radius:2px;display:inline-flex;align-items:center;gap:.6em}
.verdict li::before{content:"";width:7px;height:7px;background:currentColor;transform:rotate(45deg)}
.v-yes{color:var(--mint)}.v-maybe{color:var(--amber)}.v-no{color:var(--rose)}

.route p{color:var(--ink-soft);max-width:52ch}
.route .gets{margin-top:12px;font-size:.96rem;color:var(--ink)}
.route .gets strong{color:var(--mint);margin-right:.4em}

.gates{margin-top:clamp(72px,10vw,130px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line-strong)}
.gates header{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,5vw,80px);align-items:start;margin-bottom:clamp(34px,5vw,56px)}
.gates h3{font-size:clamp(1.6rem,3vw,2.3rem)}
.gates header p{color:var(--ink-soft);max-width:60ch}
.gate-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.gate-row li{position:relative;padding-top:38px}
.gate-row li::before{content:"";position:absolute;left:0;top:0;width:14px;height:14px;background:var(--night);border:2px solid var(--line-strong);transform:rotate(45deg) scale(.82);transition:background .4s,border-color .4s,box-shadow .4s;transition-delay:calc(var(--k,0) * .18s)}
.gate-row li.is-lit::before{background:var(--mint);border-color:var(--mint);box-shadow:0 0 14px rgba(0,235,138,.8)}
.gate-row li::after{content:"";position:absolute;left:22px;right:-6px;top:6px;height:1px;background:var(--line-strong)}
.gate-row li:last-child::after{display:none}
.gate-row h4{font-size:1.2rem;margin-bottom:8px}
.gate-row p{font-size:.94rem;color:var(--dim)}

/* ---------- Contact ---------- */
.contact{overflow:hidden;isolation:isolate;background:var(--night)}
.contact .aurora{opacity:.95}
.contact .aurora::after{background:linear-gradient(180deg,var(--night) 0%,transparent 28%,transparent 80%,var(--night) 100%)}
.contact .container{position:relative;z-index:1}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(32px,6vw,96px);align-items:start}
.contact-copy>p{margin-top:22px;color:var(--ink-soft);max-width:50ch}
.channels{margin-top:34px;border-top:1px solid var(--line-strong)}
.channels li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.channels span{font-size:.92rem;color:var(--dim)}
.channels a{font-weight:600;text-decoration-color:var(--mint);text-underline-offset:4px;text-decoration-thickness:1.5px;overflow-wrap:anywhere}
.channels a:hover{color:var(--mint)}
.clock{margin-top:24px;font-size:.95rem;color:var(--dim)}
#dhaka-time{color:var(--ink)}

.brief{color-scheme:dark;padding:clamp(22px,3vw,36px);background:rgba(4,9,52,.92)}
.brief h3{font-size:1.5rem;margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.93rem;font-weight:500;color:var(--ink-soft);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:.82em .95em;background:rgba(255,255,255,.05);border:1px solid var(--line-strong);border-radius:2px;color:var(--ink);transition:border-color .2s,background .2s}
.field textarea{resize:vertical;min-height:110px}
.field input::placeholder{color:#7C86BD}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid rgba(0,235,138,.45);outline-offset:1px;border-color:var(--mint);background:rgba(255,255,255,.08)}
.field [aria-invalid="true"]{border-color:var(--rose)}
.field .err{display:block;margin-top:6px;font-size:.88rem;color:var(--rose)}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.form-note{margin-top:16px;font-size:.9rem;color:var(--dim);min-height:1.4em}

/* ---------- Footer ---------- */
.site-footer{position:relative;overflow:hidden;border-top:1px solid var(--line);padding-top:34px;background:var(--night)}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.footer-row .wordmark{font-size:1.15rem}
.foot-tag{color:var(--ink-soft);font:600 .98rem var(--display)}
.foot-meta{color:var(--dim);font-size:.92rem}
.mega{margin:clamp(16px,3vw,44px) 0 -.07em;text-align:center;white-space:nowrap;user-select:none;pointer-events:none;font:700 clamp(4.4rem,22.5vw,21rem)/.8 var(--display);letter-spacing:.015em;background:linear-gradient(180deg,rgba(0,235,138,.5),rgba(0,235,138,.02) 78%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px rgba(0,235,138,.3)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr}
  .hero-stage{position:absolute;right:-18vw;top:10%;width:min(94vw,540px);opacity:.34;z-index:0;pointer-events:none}
  .hero-copy{position:relative;z-index:1}
  .stats-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .stat:nth-child(3){border-left:0;padding-left:0}
  .offer-row{grid-template-columns:1fr}
  .fit-grid,.process-grid,.contact-grid,.gates header{grid-template-columns:1fr}
  .process-intro{position:static}
  .gate-row{grid-template-columns:1fr;gap:26px;padding-left:34px;position:relative}
  .gate-row::before{content:"";position:absolute;left:6px;top:10px;bottom:30px;width:1px;background:var(--line-strong)}
  .gate-row li{padding-top:0}
  .gate-row li::before{left:-34px;top:4px}
  .gate-row li::after{display:none}
  .tabs{flex-direction:row;flex-wrap:wrap;border-left:0;gap:8px}
  .tabs button{border:1px solid var(--line-strong);margin:0;padding:.7em 1em;font-size:.98rem;border-radius:2px}
  .tabs button[aria-selected="true"]{background:var(--mint);color:#02143A;border-color:var(--mint)}
  .flow{flex-direction:column;align-items:flex-start;gap:0}
  .flow li+li{margin:26px 0 0}
  .flow li+li::before{left:18px;top:-26px;width:1px;height:26px;transform-origin:top}
  .flow li+li::after{left:15px;top:-7px;margin-top:0}
  .index li{grid-template-columns:1fr;gap:8px}
  .ix-links{justify-content:flex-start}
  @keyframes wire{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}
@media (max-width:860px){
  .menu-btn{display:block}
  .main-nav{position:fixed;inset:var(--header-h) 0 0 0;flex-direction:column;align-items:stretch;gap:0;padding:12px var(--pad) 32px;background:rgba(3,6,43,.98);height:calc(100vh - var(--header-h));height:calc(100dvh - var(--header-h));overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transform:translateY(-110%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s .35s;overflow:auto}
  .main-nav[data-open="true"]{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .main-nav a:not(.btn){font:600 1.5rem/1 var(--display);padding:1em 0;border-bottom:1px solid var(--line);color:var(--ink)}
  .main-nav a:not(.btn)::after{display:none}
  .main-nav .btn{margin-top:24px;padding:1.1em;font-size:1rem}
}
@media (max-width:560px){
  .hero-foot .climb{display:none}
  .channels li{grid-template-columns:1fr;gap:2px}
  .form-actions .btn,.actions .btn{flex:1 1 100%}
  .stat{padding-inline:14px}
}
@media (hover:none){.cursor-glow{display:none}}

/* ==========================================================================
   Reduced motion: everything visible, nothing moving
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .display .li,.js .split .wi{transform:none}
  .js .status-pill,.js .lede,.js .actions,.js .hero-note,.js .hero-foot{opacity:1}
  .js .hero-stage .mark{opacity:1}
  .hero-stage #particles{display:none}
  .route li{opacity:1}
  .cursor-glow,.progress{display:none}
}

/* ==========================================================================
   v3 polish layer: intro, depth, live demos, richer buttons and cards
   ========================================================================== */
:root{--blue:91,140,255;--violet:214,128,200;--mintrgb:0,235,138}

/* film grain */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* intro loader */
.loader{position:fixed;inset:0;z-index:200;background:var(--night);display:none;place-items:center;align-content:center;gap:26px}
.js .loader{display:grid;animation:loaderSafe .01s 4.5s forwards}
@keyframes loaderSafe{to{opacity:0;visibility:hidden}}
.loader svg{width:96px;height:96px;overflow:visible;filter:drop-shadow(0 0 28px rgba(0,235,138,.55))}
.loader path{fill:rgba(0,235,138,0);stroke:var(--mint);stroke-width:2.5;stroke-dasharray:2700;stroke-dashoffset:2700;animation:ld-draw 1.3s cubic-bezier(.6,0,.2,1) forwards,ld-fill .5s 1s ease forwards}
@keyframes ld-draw{to{stroke-dashoffset:0}}
@keyframes ld-fill{to{fill:rgba(0,235,138,1)}}
.loader p{font:700 1.05rem/1 var(--display);letter-spacing:.55em;padding-left:.55em;color:var(--ink-soft);opacity:0;animation:ld-text .6s .7s ease forwards}
@keyframes ld-text{to{opacity:1}}
.loader .ld-bar{display:block;width:132px;height:2px;margin-top:-8px;overflow:hidden;background:rgba(155,164,216,.2);opacity:0;animation:ld-text .4s .45s ease forwards}
.loader .ld-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--aqua));box-shadow:0 0 10px rgba(0,235,138,.8);transform:scaleX(0);transform-origin:left;animation:ld-bar 1.45s .1s cubic-bezier(.6,0,.2,1) forwards}
@keyframes ld-bar{to{transform:scaleX(1)}}
/* quicker intro on refresh */
.gk-quick .loader path{animation-duration:.6s,.25s;animation-delay:0s,.4s}
.gk-quick .loader p{animation-duration:.35s;animation-delay:.1s}
.gk-quick .loader .ld-bar{animation-delay:.05s}
.gk-quick .loader .ld-bar i{animation-duration:.6s;animation-delay:0s}

/* section scale + eyebrow */
.section h2,.work-head h2{font-size:clamp(2.2rem,5.2vw,4.4rem)}
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:20px;font:600 .86rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--mint)}
.eyebrow b{font-weight:700;color:var(--ink)}
.eyebrow::before{content:"";width:44px;height:2px;background:linear-gradient(90deg,var(--mint),transparent)}
.eyebrow{overflow:hidden}
.js .eyebrow{opacity:0}
.fallback .eyebrow{opacity:1!important}

/* ambient colour orbs behind sections */
.services,.fit,.team,.process{overflow-x:clip}
.services::before,.fit::before,.team::before,.process::before{content:"";position:absolute;z-index:0;width:min(70vw,900px);aspect-ratio:1;border-radius:50%;pointer-events:none;filter:blur(30px)}
.services::before{right:-24vw;top:-10vw;background:radial-gradient(closest-side,rgba(var(--violet),.2),transparent 70%)}
.fit::before{left:-26vw;top:6vw;background:radial-gradient(closest-side,rgba(var(--blue),.24),transparent 70%)}
.team::before{right:-20vw;top:20%;background:radial-gradient(closest-side,rgba(0,235,138,.14),transparent 70%)}
.process::before{left:-24vw;bottom:0;background:radial-gradient(closest-side,rgba(var(--violet),.18),transparent 70%)}
.section>.container{position:relative;z-index:1}

/* buttons: flowing gradient, light sweep, arrow */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-130%);transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.btn:hover::before{transform:translateX(130%)}
.btn-primary,.btn-primary:hover{background:linear-gradient(100deg,#00EB8A,#00E6B6,#7BFFD0,#00EB8A);background-size:260% 100%;animation:btnflow 5s linear infinite}
.btn-primary:hover{filter:brightness(1.1)}
@keyframes btnflow{to{background-position:-260% 0}}
.has-arrow::after{content:"";width:.62em;height:.62em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg) translate(-2px,2px);margin-left:.15em;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.has-arrow:hover::after{transform:rotate(45deg) translate(1px,-1px) scale(1.1);margin-left:.45em}
.btn-ghost{box-shadow:inset 0 0 0 1px rgba(0,235,138,.4)}
.btn-ghost:hover{background:rgba(0,235,138,.14);box-shadow:inset 0 0 0 1px var(--mint)}

/* richer cards */
.glow::before{background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(var(--ac,0,235,138),.2),transparent 62%)}
.cut{transition:border-color .3s}
.glow:hover{border-color:rgba(var(--ac,0,235,138),.5)}

/* hero depth: perspective grid + floating live demos */
.grid-floor{position:absolute;left:-30%;right:-30%;bottom:-6%;height:56%;z-index:0;pointer-events:none;perspective:520px;-webkit-mask-image:linear-gradient(to top,#000 5%,transparent 88%);mask-image:linear-gradient(to top,#000 5%,transparent 88%)}
.grid-floor::before{content:"";position:absolute;inset:calc(-40% - 84px) 0 0 0;transform:rotateX(64deg);transform-origin:50% 100%;will-change:transform;
  background:linear-gradient(rgba(0,235,138,.4) 1px,transparent 1px) 0 0/84px 84px,linear-gradient(90deg,rgba(0,235,138,.4) 1px,transparent 1px) 0 0/84px 84px;animation:gridmove 3.2s linear infinite}
@keyframes gridmove{from{transform:rotateX(64deg) translateY(0)}to{transform:rotateX(64deg) translateY(84px)}}

.float{position:absolute;z-index:3;pointer-events:none;will-change:transform}
.float-in{padding:12px 12px 14px;background:linear-gradient(160deg,rgba(24,40,150,.88),rgba(6,12,70,.92));border:1px solid rgba(255,255,255,.16);border-radius:16px;box-shadow:0 34px 80px -24px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.16);animation:bob 7s ease-in-out infinite}
.f-web{width:43%;left:-17%;top:5%}
.f-app{width:29%;right:-8%;top:41%}.f-app .float-in{animation-delay:-2.4s;animation-duration:8s}
.f-flow{width:47%;left:-4%;bottom:-3%}.f-flow .float-in{animation-delay:-4.6s;animation-duration:9s}
@keyframes bob{50%{transform:translateY(-14px)}}
.float-tag{display:flex;align-items:center;gap:8px;margin-bottom:10px;font:600 .72rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.float-tag .live{width:6px;height:6px}
.float-note{margin-top:8px;font-size:.74rem;line-height:1.3;color:var(--ink-soft)}

/* mini live demos (also used in service cards) */
.viz{--a:var(--ac,0,235,138);width:100%}
.viz-web .vb-bar{display:flex;align-items:center;gap:4px;padding:6px 8px;background:rgba(255,255,255,.07);border-radius:8px 8px 0 0}
.vb-bar i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.32)}
.vb-bar span{margin-left:8px;flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.12)}
.vb-body{display:grid;gap:8px;padding:10px;background:rgba(255,255,255,.04);border-radius:0 0 8px 8px}
.vb-hero{display:block;height:38px;border-radius:6px;background:linear-gradient(100deg,rgba(var(--a),.85),rgba(0,230,182,.5));transform-origin:left;animation:vbuild 6s ease-in-out infinite}
.vb-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.vb-row i{display:block;height:22px;border-radius:5px;background:rgba(255,255,255,.14);transform-origin:left;animation:vbuild 6s ease-in-out infinite;animation-delay:.25s}
.vb-row i:nth-child(2){animation-delay:.4s}.vb-row i:nth-child(3){animation-delay:.55s}
.vb-body u{display:block;height:6px;width:82%;border-radius:3px;background:rgba(255,255,255,.18);transform-origin:left;animation:vbuild 6s ease-in-out infinite;animation-delay:.7s}
.vb-body u+u{width:56%;animation-delay:.85s}
@keyframes vbuild{0%{transform:scaleX(0);opacity:0}14%,80%{transform:scaleX(1);opacity:1}94%,100%{transform:scaleX(0);opacity:0}}

.viz-app{display:grid;place-items:center}
.ph{position:relative;display:grid;gap:6px;align-content:start;width:80px;height:136px;padding:14px 7px 8px;border-radius:15px;border:2px solid rgba(255,255,255,.34);background:rgba(3,6,43,.75)}
.notch{position:absolute;top:5px;left:50%;width:22px;height:4px;margin-left:-11px;border-radius:2px;background:rgba(255,255,255,.34)}
.ph-card{display:block;height:34px;border-radius:7px;background:linear-gradient(135deg,rgba(var(--a),.95),rgba(0,230,182,.6))}
.ph ul{display:grid;gap:5px}
.ph li{height:12px;border-radius:4px;background:rgba(255,255,255,.16);animation:phrow 4s ease-in-out infinite}
.ph li:nth-child(2){animation-delay:.2s}.ph li:nth-child(3){animation-delay:.4s}
@keyframes phrow{0%{transform:translateY(14px);opacity:0}16%,84%{transform:none;opacity:1}100%{transform:translateY(-6px);opacity:0}}
.ph-btn{position:absolute;left:7px;right:7px;bottom:8px;height:14px;border-radius:7px;background:rgb(var(--a));animation:pulsebtn 2s ease-in-out infinite}
@keyframes pulsebtn{50%{transform:scale(.94);opacity:.8}}

.viz-flow svg{width:100%;height:auto;overflow:visible}
.fl-path{stroke:rgba(255,255,255,.26);stroke-width:1.5}
.fl-nodes rect{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.34);stroke-width:1.2}
.fl-nodes .fl-done{stroke:rgb(var(--a));fill:rgba(var(--a),.2);animation:fldone 2.6s ease-in-out infinite}
@keyframes fldone{0%,45%{fill:rgba(var(--a),.05)}60%,100%{fill:rgba(var(--a),.32)}}
.fl-dot{fill:rgb(var(--a));filter:drop-shadow(0 0 5px rgb(var(--a)))}
.fl-check{stroke:rgb(var(--a));stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;animation:flchk 2.6s ease-in-out infinite}
@keyframes flchk{0%,48%{stroke-dashoffset:24}62%,100%{stroke-dashoffset:0}}


.person .role{color:rgb(var(--ac,0,235,138))}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tags li{font-size:.76rem;font-weight:600;padding:.28em .7em;border-radius:99px;color:var(--ink-soft);border:1px solid rgba(var(--ac,0,235,138),.5);background:rgba(var(--ac,0,235,138),.1)}

@media (max-width:1020px){
  .float{display:none}
  .grid-floor{height:40%}
}
@media (max-width:560px){
}
@media (prefers-reduced-motion:reduce){
  .loader{display:none!important}
  .js .eyebrow{opacity:1}
  .btn-primary{animation:none}
  .grid-floor::before{animation:none}
  body::after{display:none}
}


/* ".tech" notation beside the wordmark: small, secondary, the wordmark stays the focus */
.tld{font:600 .46em/1 var(--display);letter-spacing:.06em;color:var(--mint);vertical-align:baseline;position:relative;top:-.95em;margin-left:.2em;text-transform:lowercase}
.wordmark{white-space:nowrap}

/* ==========================================================================
   Work: expanding panels (desktop row, mobile accordion)
   ========================================================================== */
.xp-wrap{--xpw:620px;display:flex;gap:12px;height:clamp(480px,64vh,580px)}
.xp{--ac:0,235,138;position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:#050B3C;border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
  transition:flex .8s cubic-bezier(.22,.8,.2,1),border-color .4s}
.xp.is-open{flex:5.2 1 0;border-color:rgba(var(--ac),.55)}
.xp::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;transition:opacity .5s;
  background:radial-gradient(130% 55% at 50% 105%,rgba(var(--ac),.26),transparent 70%),radial-gradient(70% 60% at 90% 0%,rgba(15,28,120,.7),transparent 70%)}
.xp.is-open::before{opacity:1}

.xp-hit{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px 0 22px;border:0;color:var(--ink);cursor:pointer;
  background:linear-gradient(180deg,rgba(3,6,43,.05),rgba(3,6,43,.55));transition:opacity .35s,background .3s}
.xp-hit:hover{background:linear-gradient(180deg,rgba(var(--ac),.1),rgba(3,6,43,.5))}
.xp-hit:focus-visible{outline:2px solid rgb(var(--ac));outline-offset:-6px}
.xp.is-open .xp-hit{opacity:0;pointer-events:none}
.xp-num{font:700 .95rem/1 var(--display);letter-spacing:.08em;color:rgb(var(--ac))}
.xp-title{flex:1;min-height:0;overflow:hidden;writing-mode:vertical-rl;transform:rotate(180deg);font:600 clamp(1.05rem,1.4vw,1.3rem)/1 var(--display);letter-spacing:.01em;white-space:nowrap}
.xp-plus{position:relative;flex:none;width:28px;height:28px;border:1px solid rgba(var(--ac),.6);border-radius:50%;transition:transform .45s cubic-bezier(.22,.8,.2,1),background .3s}
.xp-plus::before,.xp-plus::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:rgb(var(--ac))}
.xp-plus::after{transform:rotate(90deg)}
.xp-hit:hover .xp-plus{transform:rotate(90deg);background:rgba(var(--ac),.16)}

.xp-panel{position:absolute;inset:0;z-index:1}
.xp-art{position:absolute;left:0;top:0;width:var(--xpw);height:57%;display:grid;place-items:center;padding:30px 36px 0;opacity:.16;transform:scale(1.1);transform-origin:30% 40%;transition:opacity .6s,transform 1.1s cubic-bezier(.22,.8,.2,1)}
.xp.is-open .xp-art{opacity:1;transform:none}
.xp-art .plate{width:100%;height:100%;background:none;border:0}
.xp-body{position:absolute;left:0;bottom:0;width:var(--xpw);display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:30px 34px 30px;
  background:linear-gradient(180deg,transparent,rgba(3,6,43,.82) 26%);opacity:0;transform:translateY(26px);transition:opacity .25s,transform .5s cubic-bezier(.22,.8,.2,1)}
.xp.is-open .xp-body{opacity:1;transform:none;transition-delay:.32s,.32s}
.xp-count{position:absolute;right:34px;top:32px;font:700 .82rem/1 var(--display);letter-spacing:.12em;color:var(--dim)}
.xp-body .kind{color:rgb(var(--ac))}
.xp-body h3{font-size:clamp(1.6rem,2.4vw,2.2rem)}
.xp-desc{color:var(--ink-soft);font-size:1rem;max-width:58ch}
.xp-body .status{margin-top:4px;padding-top:0}
.xp-body .status a{text-decoration-color:rgb(var(--ac))}

.xp .plate .p-line{stroke:rgb(var(--ac))}
.xp .plate .p-solid{fill:rgba(var(--ac),.18)}
.xp .plate .p-dot{fill:rgb(var(--ac));filter:drop-shadow(0 0 8px rgba(var(--ac),.9))}
.xp .plate .p-hero{filter:drop-shadow(0 0 6px rgba(var(--ac),.65))}

.xp-timer{position:absolute;left:0;bottom:0;z-index:4;width:100%;height:2px;background:rgb(var(--ac));box-shadow:0 0 10px rgba(var(--ac),.8);transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none}
.xp-wrap.autoplay .xp.is-open .xp-timer{opacity:1;animation:xptime 6.5s linear forwards}
.xp-wrap.autoplay.paused .xp.is-open .xp-timer{animation-play-state:paused}
@keyframes xptime{to{transform:scaleX(1)}}

@media (max-width:860px){
  .work-head{flex-direction:column;align-items:flex-start;gap:14px}
  .xp-wrap{flex-direction:column;height:auto;gap:10px}
  .xp,.xp.is-open{flex:none;display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .6s cubic-bezier(.22,.8,.2,1),border-color .4s}
  .xp.is-open{grid-template-rows:auto 1fr}
  .xp-hit{position:relative;inset:auto;flex-direction:row;justify-content:flex-start;gap:16px;min-height:68px;padding:18px 20px;background:none}
  .xp.is-open .xp-hit{opacity:1;pointer-events:auto}
  .xp-title{writing-mode:horizontal-tb;transform:none;white-space:normal;text-align:left;font-size:1.15rem;line-height:1.2}
  .xp.is-open .xp-plus{transform:rotate(45deg)}
  .xp-panel{position:relative;inset:auto;min-height:0;overflow:hidden}
  .xp-art{position:relative;width:100%;height:190px;padding:6px 20px 0;opacity:1;transform:none}
  .xp-body{position:relative;width:100%;padding:12px 20px 24px;background:none;opacity:1;transform:none}
  .xp-count,.xp-body h3{display:none}
}

/* Also built: compact rows that open on click */
.index li{padding:16px 6px;align-items:start;cursor:pointer}
.index h4{margin-bottom:0;font-size:1.15rem}
.ix-toggle{display:inline-flex;align-items:center;gap:12px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ix-toggle::after{content:"";flex:none;width:7px;height:7px;border-right:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:translateY(-3px) rotate(45deg);transition:transform .35s cubic-bezier(.22,.8,.2,1)}
.index li.is-open .ix-toggle::after{transform:translateY(1px) rotate(-135deg)}
.ix-toggle:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
.ix-ready .ix-desc{max-height:0;margin-top:0;opacity:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,.8,.2,1),opacity .3s,margin-top .3s}
.ix-ready li.is-open .ix-desc{max-height:10em;margin-top:8px;opacity:1}
.ix-stack,.ix-links{padding-top:3px}
@media (max-width:1020px){
  .ix-ready li:not(.is-open) .ix-stack,.ix-ready li:not(.is-open) .ix-links{display:none}
}

/* ==========================================================================
   Services: expanding row with a live demo per service
   ========================================================================== */
.xp-svc{height:clamp(440px,58vh,520px)}
.xp-svc .xp-art{height:54%;padding:24px 36px 0}
.xp-svc .xp-art .viz-web{width:300px}
.xp-svc .xp-art .viz-flow{width:340px}
.xp-svc .xp-art .viz-app .ph{transform:scale(1.4)}
.xp-svc .xp-art .viz-shop,.xp-svc .xp-art .viz-dash,.xp-svc .xp-art .viz-pulse{width:310px}
.xp-svc .xp-body .result{width:100%;margin-top:6px;padding-top:12px;border-top:1px solid var(--line);font-size:.98rem;color:var(--ink)}
.xp-svc .xp-body .result strong{color:rgb(var(--ac));margin-right:.35em}
@media (max-width:860px){
  .xp-svc{height:auto}
  .xp-svc .xp-art{height:200px;padding:16px 20px 0}
  .xp-svc .xp-art .viz-web,.xp-svc .xp-art .viz-shop,.xp-svc .xp-art .viz-dash,.xp-svc .xp-art .viz-pulse{width:min(270px,82%)}
  .xp-svc .xp-art .viz-flow{width:min(300px,90%)}
  .xp-svc .xp-art .viz-app .ph{transform:scale(1.15)}
}

/* e-commerce demo: products get picked, cart count pops */
.viz-shop{position:relative;padding:18px 4px 4px}
.vs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.vs-grid i{display:block;aspect-ratio:3/4;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.14) 0 56%,transparent 56%),linear-gradient(90deg,rgba(255,255,255,.18) 0 70%,transparent 70%) 8px 74%/70% 5px no-repeat,rgba(255,255,255,.04);animation:vs-pick 4.8s ease-in-out infinite}
.vs-grid i:nth-child(2){animation-delay:1.2s}.vs-grid i:nth-child(3){animation-delay:2.4s}.vs-grid i:nth-child(4){animation-delay:3.6s}
@keyframes vs-pick{0%,30%,100%{transform:none;border-color:rgba(255,255,255,.14);box-shadow:none}8%,20%{transform:translateY(-7px);border-color:rgb(var(--a));box-shadow:0 12px 26px -10px rgba(var(--a),.7)}}
.vs-cart{position:absolute;right:0;top:-12px;display:flex;align-items:center;gap:7px;padding:6px 9px 6px 11px;border-radius:99px;background:rgba(3,6,43,.9);border:1px solid rgba(var(--a),.6)}
.vs-ico{width:15px;height:11px;border:2px solid rgb(var(--a));border-top:0;border-radius:0 0 4px 4px}
.vs-cart b{min-width:18px;height:18px;border-radius:9px;background:rgb(var(--a));color:#02143A;font:700 .7rem/18px var(--display);text-align:center;animation:vs-pop 1.2s ease-in-out infinite}
@keyframes vs-pop{0%,70%,100%{transform:none}82%{transform:scale(1.35)}}

/* custom software demo: dashboard bars rise and fall */
.viz-dash{display:grid;gap:10px;padding:12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12)}
.vd-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vd-kpi i{position:relative;height:30px;border-radius:6px;background:rgba(255,255,255,.08)}
.vd-kpi i::before{content:"";position:absolute;left:8px;top:8px;width:40%;height:4px;border-radius:2px;background:rgba(255,255,255,.25)}
.vd-kpi i::after{content:"";position:absolute;left:8px;bottom:7px;width:58%;height:6px;border-radius:3px;background:rgb(var(--a))}
.vd-kpi i:nth-child(2)::after{width:38%}.vd-kpi i:nth-child(3)::after{width:72%}
.vd-bars{display:flex;align-items:flex-end;gap:8px;height:84px;border-bottom:1px solid rgba(255,255,255,.2)}
.vd-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,rgb(var(--a)),rgba(var(--a),.2));transform-origin:bottom;animation:vd-grow 3.6s ease-in-out infinite}
.vd-bars i:nth-child(1){height:40%}.vd-bars i:nth-child(2){height:66%;animation-delay:.12s}.vd-bars i:nth-child(3){height:50%;animation-delay:.24s}
.vd-bars i:nth-child(4){height:86%;animation-delay:.36s}.vd-bars i:nth-child(5){height:70%;animation-delay:.48s}.vd-bars i:nth-child(6){height:96%;animation-delay:.6s}
@keyframes vd-grow{0%,100%{transform:scaleY(.18)}30%,72%{transform:scaleY(1)}}

/* maintenance demo: a heartbeat line keeps running */
.viz-pulse{padding:10px 4px}
.viz-pulse svg{width:100%;height:auto;overflow:visible}
.vp-base{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.2}
.vp-line{fill:none;stroke:rgb(var(--a));stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90 420;animation:vp-run 2.6s linear infinite;filter:drop-shadow(0 0 5px rgba(var(--a),.85))}
@keyframes vp-run{from{stroke-dashoffset:510}to{stroke-dashoffset:0}}
.vp-label{display:flex;align-items:center;gap:9px;margin-top:12px;font:600 .78rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.vp-label .live{width:7px;height:7px}

/* ==========================================================================
   Team: equal portrait panels that widen on hover; compact lists below
   ========================================================================== */
.people{display:flex;gap:14px;height:clamp(400px,56vh,500px);margin-top:0}
.person{--ac:0,235,138;position:relative;flex:1 1 0;min-width:0;padding:0;overflow:hidden;cursor:pointer;background:#050b3c;border:1px solid var(--line);border-bottom:3px solid rgb(var(--ac));
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);transition:flex .75s cubic-bezier(.22,.8,.2,1)}
.person:hover,.person.is-open,.person:focus-visible{flex:1.8 1 0}
.person:focus-visible{outline:2px solid rgb(var(--ac));outline-offset:-4px}
.person .avatar.photo{position:absolute;inset:0;width:100%;height:100%;margin:0;clip-path:none;background:#050b3c}
.person .avatar.photo img{object-position:50% 28%;transition:transform 1.1s cubic-bezier(.22,.8,.2,1)}
.person:hover .avatar.photo img,.person.is-open .avatar.photo img{transform:scale(1.05)}
.person .avatar.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(3,6,43,.96))}
.pbody{position:absolute;left:0;right:0;bottom:0;display:grid;gap:4px;padding:0 22px 22px}
.person h3{font-size:clamp(1.25rem,1.8vw,1.55rem)}
.person .role{font-size:.92rem;font-weight:600;color:rgb(var(--ac))}
.person .blurb,.person .tags{max-height:0;margin-top:0;opacity:0;overflow:hidden;transition:max-height .5s cubic-bezier(.22,.8,.2,1),opacity .35s,margin-top .35s}
.person:hover .blurb,.person.is-open .blurb,.person:focus-visible .blurb{max-height:5em;margin-top:6px;opacity:1;transition-delay:.15s}
.person:hover .tags,.person.is-open .tags,.person:focus-visible .tags{max-height:5em;margin-top:10px;opacity:1;transition-delay:.22s}

.team-more{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);margin-top:clamp(36px,5vw,56px)}
.tm-title{margin-bottom:14px;font-size:clamp(1.15rem,1.7vw,1.4rem)}
.acc{border-top:1px solid var(--line-strong)}
.acc li{border-bottom:1px solid var(--line)}
.acc h4{margin:0;font:600 1.08rem/1.3 var(--display)}
.acc-btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:16px 4px;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:color .25s}
.acc-btn::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:translateY(-3px) rotate(45deg);transition:transform .35s cubic-bezier(.22,.8,.2,1)}
.acc-btn:hover,.acc li.is-open .acc-btn{color:var(--mint)}
.acc li.is-open .acc-btn::after{transform:translateY(1px) rotate(-135deg)}
.acc-btn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.acc-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.22,.8,.2,1)}
.acc.acc-ready li:not(.is-open) .acc-body{grid-template-rows:0fr}
.acc-body>div{min-height:0;overflow:hidden}
.acc-body p{margin-bottom:18px;padding:0 4px;max-width:56ch;font-size:.98rem;color:var(--ink-soft)}

@media (max-width:860px){
  .people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;height:auto;gap:12px}
  .person{flex:none;aspect-ratio:4/5}
  .person.is-open{grid-column:1/-1;aspect-ratio:16/12}
  .pbody{padding:0 14px 14px}
  .person h3{font-size:1.08rem}
  .person .role{font-size:.8rem}
  .person .blurb{font-size:.9rem}
  .team-more{grid-template-columns:1fr}
}

/* ==========================================================================
   How we work: expanding timeline, one step open at a time
   ========================================================================== */
.route{position:relative;padding-left:60px}
.route::before,.route::after{content:"";position:absolute;left:17px;top:22px;width:2px}
.route::before{height:var(--track,0px);background:var(--line-strong);transition:height .55s cubic-bezier(.22,.8,.2,1)}
.route::after{height:var(--fill,0px);background:linear-gradient(var(--mint),var(--aqua));box-shadow:0 0 12px rgba(0,235,138,.6);transition:height .6s cubic-bezier(.22,.8,.2,1)}
.route li{position:relative;opacity:.5;transition:opacity .4s}
.route li.is-lit,.route li:hover{opacity:1}
.route li::before{content:"";position:absolute;left:-52px;top:14px;width:16px;height:16px;background:var(--night);border:2px solid var(--line-strong);transform:rotate(45deg);transition:background .3s,border-color .3s,box-shadow .3s,transform .4s}
.route li.is-lit::before{background:var(--mint);border-color:var(--mint);box-shadow:0 0 16px rgba(0,235,138,.8)}
.route li.is-open::before{transform:rotate(45deg) scale(1.22)}
.route h3{margin:0;font-size:clamp(1.3rem,2vw,1.65rem)}
.route-btn{display:flex;align-items:baseline;gap:14px;width:100%;padding:8px 0 16px;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.route-btn:hover{color:var(--mint)}
.route-btn:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
.route-n{min-width:1.9em;font:700 .85rem/1 var(--display);letter-spacing:.1em;color:var(--mint)}
.route-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .55s cubic-bezier(.22,.8,.2,1)}
.route.route-ready li:not(.is-open) .route-body{grid-template-rows:0fr}
.route-body>div{min-height:0;overflow:hidden;padding-left:calc(1.9em + 14px)}
.route-timer{position:relative;display:block;max-width:220px;height:2px;margin:16px 0 24px;overflow:hidden;background:var(--line)}
.route-timer::after{content:"";position:absolute;inset:0;background:var(--mint);transform:scaleX(0);transform-origin:left}
.route:not(.autoplay) .route-timer{visibility:hidden}
.route.autoplay li.is-open .route-timer::after{animation:xptime 5s linear forwards}
.route.autoplay.paused li.is-open .route-timer::after{animation-play-state:paused}
@media (max-width:560px){
  .route{padding-left:44px}
  .route::before,.route::after{left:9px}
  .route li::before{left:-43px}
  .route-body>div{padding-left:0}
}

/* no transitions during first setup (prevents collapse animations on load) */
.is-init *,.is-init *::before,.is-init *::after{transition:none!important}

/* ==========================================================================
   Language switch + Bangla typography
   ========================================================================== */
.main-nav{margin-left:auto}
.lang-switch{display:inline-flex;align-items:center;gap:7px;padding:.5em .9em;border:1px solid var(--line-strong);border-radius:99px;font:600 .88rem/1 var(--display);color:var(--ink-soft);text-decoration:none;white-space:nowrap;transition:color .25s,border-color .25s,background .25s}
.lang-switch::before{content:"";width:14px;height:14px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E") center/contain no-repeat}
.lang-switch:hover{color:var(--ink);border-color:var(--mint);background:rgba(0,235,138,.08)}
@media (max-width:860px){
  .header-row{gap:12px}
  .lang-switch{margin-left:auto;padding:.55em .8em}
}

/* Bengali glyphs come from Anek Bangla (headings) and Hind Siliguri (text);
   Latin characters keep the brand fonts because these faces only cover Bengali */
@font-face{font-family:"Anek Bangla";font-weight:100 800;font-style:normal;font-display:swap;src:url("../assets/fonts/anek-bangla-bengali-wght-normal.woff2") format("woff2");unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1}
@font-face{font-family:"Hind Siliguri";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/hind-siliguri-bengali-400-normal.woff2") format("woff2");unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1}
@font-face{font-family:"Hind Siliguri";font-weight:600;font-style:normal;font-display:swap;src:url("../assets/fonts/hind-siliguri-bengali-600-normal.woff2") format("woff2");unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1}
html[lang="bn"]{--display:"Chakra Petch","Anek Bangla",system-ui,sans-serif;--text:"Hanken Grotesk","Hind Siliguri",system-ui,sans-serif}
.lang-switch[lang="bn"]{font-family:"Anek Bangla",var(--display)}
html[lang="bn"] body{line-height:1.75}
html[lang="bn"] h1,html[lang="bn"] h2,html[lang="bn"] h3,html[lang="bn"] h4{letter-spacing:0;line-height:1.3}
html[lang="bn"] .display{font-size:clamp(2.3rem,5.4vw,4.9rem);line-height:1.18;letter-spacing:0}
html[lang="bn"] .section h2,html[lang="bn"] .work-head h2{font-size:clamp(1.95rem,4.4vw,3.7rem);line-height:1.25}
html[lang="bn"] .display .line,html[lang="bn"] .split .w{padding:.08em 0 .24em;margin:-.08em 0 -.24em}
html[lang="bn"] .eyebrow{letter-spacing:.06em}
html[lang="bn"] .float-tag,html[lang="bn"] .vp-label{letter-spacing:.04em}
html[lang="bn"] .xp-title{letter-spacing:0;font-size:clamp(1.05rem,1.35vw,1.25rem)}
html[lang="bn"] .lede,html[lang="bn"] .section-head p{line-height:1.8}
html[lang="bn"] .btn{font-weight:600;line-height:1.2;padding-block:.85em}
html[lang="bn"] .tabs button{line-height:1.45}

html.menu-open,html.menu-open body{overflow:hidden}

/* ---------- Performance layer ---------- */
/* animations in sections that are off-screen are paused (set by IntersectionObserver in main.js) */
.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}
.btn-primary{animation-play-state:paused}
.btn-primary:hover,.btn-primary:focus-visible{animation-play-state:running}
.is-off .btn-primary{animation-play-state:paused!important}
.grad{will-change:auto}
.hero-stage,.float,.cursor-glow{backface-visibility:hidden}
@media (max-width:860px){
  .aurora i{animation:none}
  .aurora i:nth-child(3){display:none}
  .grid-floor::before{animation-duration:6s}
  .float-in{animation:none}
  .cursor-glow{display:none}
  body::after{display:none}
}

/* sister companies */
.group-grid{list-style:none;margin:clamp(32px,5vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.group-card{position:relative;border:1px solid var(--line);background:var(--card);transition:border-color .3s,transform .3s}
.group-card:hover,.group-card:focus-within{border-color:rgba(0,235,138,.55);transform:translateY(-3px)}
.group-link{display:flex;flex-direction:column;gap:12px;height:100%;padding:clamp(22px,3vw,34px);color:inherit;text-decoration:none}
.group-logo{display:flex;align-items:center;height:64px;margin-bottom:10px}
.group-logo-plate{align-self:flex-start;padding:10px 16px;background:#F4F1EA;border-radius:8px}
.group-logo-plate img{display:block;height:44px;width:auto}
.group-wordmark{font:700 1.9rem/1 var(--display);letter-spacing:.01em;color:var(--ink)}
.group-wordmark b{font-weight:700;color:var(--mint)}
.group-wordmark i{font-style:normal;font-weight:500;color:var(--ink-soft);margin-left:.15em}
.group-desc{color:var(--ink-soft);max-width:44ch}
.group-url{margin-top:auto;padding-top:8px;font:600 .9rem/1 var(--display);letter-spacing:.08em;color:var(--mint)}
.group-url::after{content:" \2192"}
.foot-group{font:600 .8rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-decoration:none}
.foot-group:hover{color:var(--mint)}
@media (max-width:760px){.group-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.group-card{transition:none}.group-card:hover,.group-card:focus-within{transform:none}}