/* Additions for the live site: language switch, contact section, map, form. site.css holds the approved design. */
#app{display:flex;flex-direction:column;gap:28px}
#view-jewellery{display:flex;flex-direction:column}
.mb-comb .bx>b>div{background-color:#0a1048;background-position:center;background-size:cover;background-repeat:no-repeat}
header.sheet nav{margin-left:auto}

.lang{display:flex;border:1px solid rgba(169,187,255,.4);border-radius:999px;overflow:hidden;flex:none}
.lang button{font:600 13px var(--font-display);color:var(--body);background:transparent;border:0;padding:7px 13px;cursor:pointer}
.lang button.on{background:var(--red);color:#0a0d33}
.lang button:focus-visible{outline:2px solid #fff;outline-offset:-2px}

.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.contact .text{display:flex;flex-direction:column;gap:18px}
.contact .lead{font-size:clamp(18px,1.7vw,21px);color:#fff;font-weight:500}
.reach{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.reach li{display:flex;align-items:center;gap:12px;color:#fff;font-size:17px}
.reach svg{width:22px;height:22px;color:var(--red);flex:none}
.reach a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(232,182,80,.6)}
#cform{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,2.4vw,28px);border:1px solid rgba(169,187,255,.3);border-radius:14px;background:rgba(5,8,36,.45);text-shadow:none}
#cform label{font:600 13.5px var(--font-display);color:var(--muted);margin-top:6px}
#cform input,#cform textarea{font:400 16px var(--font-body);color:#fff;background:rgba(5,8,36,.6);border:1px solid rgba(169,187,255,.35);border-radius:8px;padding:11px 13px;width:100%}
#cform input:focus,#cform textarea:focus{outline:2px solid var(--red);outline-offset:1px;border-color:transparent}
#cform textarea{resize:vertical;min-height:110px}
#cform .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#cform .two>div{display:flex;flex-direction:column;gap:8px}
#cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#cform button{align-self:flex-start;margin-top:12px;font:700 15.5px var(--font-display);color:#0a0d33;background:linear-gradient(180deg,#f8d67e,#e0ad45);border:0;border-radius:8px;padding:13px 24px;cursor:pointer}
#cform button:hover{filter:brightness(1.08)}
#cform button:disabled{opacity:.6;cursor:wait}
#cform button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.form-msg{min-height:1.5em;font-weight:500}
.form-msg.good{color:#7ee2b8}
.form-msg.bad{color:#ffb4a8}
.contact .side{display:flex;flex-direction:column;gap:18px}
.map{width:100%;height:380px;border-radius:14px;overflow:hidden;border:1px solid rgba(169,187,255,.35);background:#0a1048;z-index:0}
.fb{width:100%;height:300px;border:0;border-radius:14px;background:#fff}
#contact{scroll-margin-top:110px}

@media (max-width:900px){
  .contact{grid-template-columns:1fr}
  #cform .two{grid-template-columns:1fr}
  .map{height:300px}
}
@media (max-width:760px){
  header.sheet nav{margin-left:0;order:3;width:100%}
  .page{padding-top:150px}
}

/* Bangla: letter-spacing breaks joined letters, so labels are set without it */
html[lang="bn"] .kicker,html[lang="bn"] .type,html[lang="bn"] .mb-cap,html[lang="bn"] .card .type{letter-spacing:0;text-transform:none;font-size:14px}
html[lang="bn"] h1,html[lang="bn"] h2,html[lang="bn"] .sub-h{letter-spacing:0;line-height:1.3}

/* Who we are: the three figures sit in one row under the text */
.who{display:flex;flex-direction:column;gap:clamp(22px,3vw,36px)}
.who p{max-width:none}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));width:100%;gap:0;border-left:0;padding-left:0;border-top:1px solid rgba(169,187,255,.3)}
.facts li{padding:22px 28px 6px 0;border-bottom:0}
.facts li+li{padding-left:28px;border-left:1px solid rgba(169,187,255,.22)}
@media (max-width:620px){.facts{grid-template-columns:1fr}.facts li,.facts li+li{padding:16px 0 4px;border-left:0}}

/* Jewellery ERP 360 diagram: fills the page width (and one screen), five parts, quicker entrance */
@media (min-width:761px){
  /* small centre, five parts on a wide even ring; every part is built the same way: hexagon on top, name and line centred under it */
  .stage{width:min(100%, calc((100vh - 110px) * 1100 / 700));max-width:none;aspect-ratio:1100/700;margin:0 auto}
  .core{top:42.86%;width:14cqw}
  .core small{font-size:clamp(11px,1.35cqw,18px)} .core strong{font-size:clamp(14px,2.1cqw,26px)}
  .orbit{top:42.86%} .orbit.o1{width:24cqw;height:24cqw} .orbit.o2{width:36cqw;height:36cqw}
  .node,.node.left,.node.right{left:var(--x);right:auto;top:var(--y);translate:-50% 0;flex-direction:column;text-align:center;gap:1cqw;width:24cqw}
  .node .hex{width:10cqw}
  .node .label{max-width:none}
  .n1{--x:26.45%;--y:11.86%} .n2{--x:73.55%;--y:11.86%}
  .n3{--x:12%;--y:46.14%}    .n4{--x:88%;--y:46.14%}
  .n5{--x:50%;--y:66%}
}
#view-jewellery{min-height:calc(100vh - 110px)}
.stage.play .core{animation-duration:.7s}
.stage.play .links .base path{animation-duration:.6s;animation-delay:.6s}
.stage.play .links .flow path{animation:fadeIn .4s ease 1.1s both, flow 1.7s linear 1.1s infinite}
.stage.play .node{animation-duration:.95s;animation-delay:calc(.8s + var(--i) * .2s)}
.stage.play .jw-title{animation-duration:.8s;animation-delay:1.9s}

/* centre diamond: cut facets that catch the light, a glint that sweeps across, and twinkling sparks */
.core svg.diamond{width:46%;margin-bottom:.2cqw;overflow:visible;filter:drop-shadow(0 0 10px rgba(170,215,255,.9)) drop-shadow(0 0 22px rgba(120,170,255,.55))}
.dm-body{transform-box:fill-box;transform-origin:50% 60%;animation:dmFloat 5s ease-in-out infinite}
.diamond .f1{animation:facet 3.2s ease-in-out infinite}
.diamond .f2{animation:facet 3.2s ease-in-out -1.1s infinite}
.diamond .f3{animation:facet 3.2s ease-in-out -2.2s infinite}
.dm-glint{animation:glint 3.4s ease-in-out infinite}
.spk{fill:#fff;transform-box:fill-box;transform-origin:center;scale:0;animation:twinkle 2.6s ease-in-out infinite;animation-delay:calc(var(--s) * -.47s);filter:drop-shadow(0 0 3px #fff)}
@keyframes facet{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes glint{0%,35%{x:-40px}75%,100%{x:190px}}
@keyframes twinkle{0%,60%,100%{scale:0;rotate:0deg;opacity:0}75%{scale:1;rotate:45deg;opacity:1}88%{scale:.35;rotate:70deg;opacity:.8}}
@keyframes dmFloat{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -3%;rotate:1.5deg}}
@media (max-width:760px){.core svg.diamond{width:44%}}

/* multi-branch drawing: main showroom, branches, dashed routes */
.mb-scroll{width:100%;overflow-x:auto}
.mbmap{display:block;width:100%;min-width:620px;height:auto;overflow:visible}
.mbmap path{vector-effect:none}
.mbmap .base path{fill:none;stroke:#fff;stroke-opacity:.75;stroke-width:2;stroke-dasharray:.018 .014}
.mbmap .flow path{fill:none;stroke:#f6d98f;stroke-width:4.500;stroke-linecap:round;stroke-dasharray:.07 .93;filter:drop-shadow(0 0 5px #f2bd4b);animation:flow 2.4s linear infinite}
.mbmap .flow path:nth-child(2){animation-delay:-.4s} .mbmap .flow path:nth-child(3){animation-delay:-.8s} .mbmap .flow path:nth-child(4){animation-delay:-1.2s}
.mbmap .flow path:nth-child(5){animation-delay:-1.6s} .mbmap .flow path:nth-child(6){animation-delay:-2s}
.mb-ring{fill:rgba(59,85,240,.16);stroke:rgba(169,187,255,.4);stroke-width:1.200}
.mb-ring.r2{fill:none;stroke-dasharray:3 7;animation:none}
.mbmap text{font:700 17px var(--font-display);fill:#fff;paint-order:stroke;stroke:#060a30;stroke-width:4px;stroke-linejoin:round}
.mbmap text.main{font-size:24px;fill:#f6d98f}
.mb-shop{opacity:0;transform-box:fill-box;transform-origin:center}
.mb-shop.main{filter:drop-shadow(0 0 18px rgba(242,189,75,.55))}
.mb-tree.play .mb-shop{animation:nodeIn .9s ease both;animation-delay:calc(var(--i) * .15s)}
.mb-tree.done .mb-shop.main{opacity:1;animation:mbBob 4s ease-in-out infinite}
@keyframes mbBob{0%,100%{translate:0 0}50%{translate:0 -5px}}

/* multi-branch: pins bounce and send out a ripple; a shop lifts and glows under the pointer */
.mb-pin{animation:mbPin 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.35s)}
.mb-ping{fill:none;stroke:#ff8f9a;stroke-width:1.500;transform-box:fill-box;transform-origin:center;opacity:0;animation:mbPing 2.4s ease-out infinite;animation-delay:calc(var(--i) * -.35s)}
@keyframes mbPin{0%,100%{translate:0 0}40%{translate:0 -9px}55%{translate:0 0}65%{translate:0 -3px}75%{translate:0 0}}
@keyframes mbPing{0%{scale:.3;opacity:.9}100%{scale:2.600;opacity:0}}
.mb-tree.done .mb-shop:not(.main){opacity:1;animation:none;transition:translate .25s ease,filter .25s ease}
.mb-tree.done .mb-shop:not(.main):hover{translate:0 -6px;filter:drop-shadow(0 0 14px rgba(242,189,75,.8))}
.mbmap .base path{animation:mbDash 1.6s linear infinite}
@keyframes mbDash{to{stroke-dashoffset:-.032}}

/* home page: all software on a wheel round the company logo */
.wheel{position:relative;width:min(100%, calc((100vh - 110px) * 1100 / 700));aspect-ratio:1100/700;margin:0 auto;container-type:inline-size}
.wheel .links .base path{stroke:rgba(169,187,255,.4);stroke-width:1.200;stroke-dasharray:1;stroke-dashoffset:1}
.wheel .orbit{top:48.57%}
.wheel .orbit.w1{width:27cqw;height:27cqw;border:1px solid rgba(169,187,255,.28);animation:spin 40s linear infinite}
.wheel .orbit.w2{width:40cqw;height:40cqw;border:1px dashed rgba(232,182,80,.38);animation:spin 70s linear infinite reverse}
.hub{position:absolute;left:50%;top:48.57%;width:17cqw;aspect-ratio:1;translate:-50% -50%;opacity:0;z-index:2}
.hub .halo{position:absolute;inset:-9px;border-radius:50%;animation:spin 7s linear infinite;
  background:conic-gradient(from 0deg, rgba(232,182,80,0) 0 12%, #f6d98f 30%, rgba(232,182,80,0) 48% 62%, #a9bbff 80%, rgba(232,182,80,0) 96%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px))}
.hub .pulse{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(246,217,143,.8);animation:pulse 3.6s ease-out infinite}
.hub .plate{position:absolute;inset:0;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 60px rgba(232,182,80,.45),0 0 0 2px #f2bd4b,inset 0 0 22px rgba(27,26,92,.18)}
.hub img{width:74%;height:auto;display:block}
.wnode{position:absolute;left:var(--x);top:var(--y);translate:-50% 0;width:21cqw;display:flex;flex-direction:column;align-items:center;gap:.9cqw;text-align:center;text-decoration:none;opacity:0;z-index:2}
.wnode .hex{width:9.400cqw}
.wnode h3{font-family:var(--font-display);font-weight:700;color:#fff;font-size:clamp(13px,1.6cqw,20px);line-height:1.22;text-shadow:0 2px 12px rgba(3,5,26,.95)}
.wnode:hover .hex{scale:1.1}
a.wnode h3{color:#f6d98f}
.wheel.play .hub{animation:coreIn .7s cubic-bezier(.2,.9,.25,1.15) both}
.wheel.play .orbit{animation:fadeIn 1.2s ease .4s both, spin 40s linear infinite}
.wheel.play .orbit.w2{animation:fadeIn 1.2s ease .5s both, spin 70s linear infinite reverse}
.wheel.play .links .base path{animation:draw .6s ease .6s both}
.wheel.play .links .flow path{animation:fadeIn .4s ease 1.1s both, flow 1.9s linear 1.1s infinite}
.wheel.play .wnode{animation:nodeIn .9s ease both;animation-delay:calc(.7s + var(--i) * .14s)}
@media (max-width:760px){
  .wheel{width:100%;aspect-ratio:auto;display:flex;flex-direction:column;gap:18px}
  .wheel .links,.wheel .orbit{display:none}
  .hub{position:relative;left:auto;top:auto;translate:none;width:150px;margin:10px auto 14px}
  .wnode{position:static;translate:none;width:auto;flex-direction:row;text-align:left;gap:16px}
  .wnode .hex{width:74px;flex:none}
  .wnode h3{font-size:17px}
}

/* logo hub effects: breathing glow, light sweeping across the logo, twinkling sparks, second ripple */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#services{padding-top:0;scroll-margin-top:120px}
.hub .plate{overflow:hidden;animation:hubGlow 3.2s ease-in-out infinite}
.hub img{animation:hubLogo 3.2s ease-in-out infinite}
.hub .shine{position:absolute;top:-20%;bottom:-20%;left:0;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.95) 45%,rgba(255,236,180,.7) 55%,transparent);translate:-140% 0;rotate:14deg;mix-blend-mode:screen;animation:hubShine 3.6s ease-in-out infinite}
.hub .pulse.p2{animation-delay:-1.8s}
.hstar{position:absolute;width:1.700cqw;height:1.700cqw;min-width:12px;min-height:12px;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);scale:0;filter:drop-shadow(0 0 4px #f6d98f);animation:twinkle 2.8s ease-in-out infinite;animation-delay:calc(var(--s) * -.56s)}
@keyframes hubGlow{0%,100%{box-shadow:0 0 45px rgba(232,182,80,.4),0 0 0 2px #f2bd4b,inset 0 0 22px rgba(27,26,92,.18)}50%{box-shadow:0 0 95px rgba(246,217,143,.85),0 0 0 3px #f6d98f,inset 0 0 22px rgba(27,26,92,.1)}}
@keyframes hubLogo{0%,100%{scale:1}50%{scale:1.06}}
@keyframes hubShine{0%,30%{translate:-140% 0}70%,100%{translate:340% 0}}

/* service cards: each software has its own colour — glowing icon tile, corner number, colour bar that fills on hover */
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
@media (max-width:1250px){.sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.sgrid{grid-template-columns:1fr}}
.scard{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:26px 24px 24px;border-radius:18px 18px 18px 4px;opacity:0;
  background:linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, rgba(6,10,48,.72)) 0%, rgba(6,10,48,.72) 55%);
  border:1px solid color-mix(in srgb, var(--c) 38%, transparent);text-shadow:none;transition:translate .25s ease,box-shadow .25s ease,border-color .25s ease}
.scard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c);box-shadow:0 0 18px var(--c)}
.scard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--c),transparent);scale:.25 1;transform-origin:left;transition:scale .35s ease}
.scard:hover{translate:0 -8px;border-color:var(--c);box-shadow:0 18px 44px rgba(2,3,20,.6),0 0 30px color-mix(in srgb, var(--c) 35%, transparent)}
.scard:hover::after{scale:1 1}
.s-no{position:absolute;right:16px;top:6px;font:800 58px var(--font-display);line-height:1;color:color-mix(in srgb, var(--c) 20%, transparent);letter-spacing:-.04em}
.s-top{display:flex;align-items:center;gap:14px;position:relative}
.s-ico{flex:none;width:58px;height:58px;border-radius:16px;display:grid;place-items:center;color:#0a0d33;background:linear-gradient(150deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c));box-shadow:0 0 22px color-mix(in srgb, var(--c) 60%, transparent);animation:sIco 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.4s)}
.s-ico svg{width:30px;height:30px}
.scard h3{font-family:var(--font-display);font-weight:800;font-size:21px;line-height:1.2;color:#fff}
.s-type{font-size:13px;font-weight:600;color:var(--c);line-height:1.3;margin-top:3px}
.s-text{font-size:15.5px;color:var(--body);position:relative}
.s-tags{list-style:none;padding:0;margin:auto 0 0;display:flex;flex-wrap:wrap;gap:8px;position:relative}
.s-tags li{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:#fff;background:color-mix(in srgb, var(--c) 12%, transparent);border:1px solid color-mix(in srgb, var(--c) 40%, transparent);border-radius:999px;padding:3px 12px 3px 10px}
.s-tags li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.sgrid.play .scard{animation:sIn .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * .09s)}
.sgrid.done .scard{opacity:1;animation:none}
@keyframes sIn{from{opacity:0;translate:0 34px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes sIco{0%,100%{box-shadow:0 0 14px color-mix(in srgb, var(--c) 45%, transparent)}50%{box-shadow:0 0 30px color-mix(in srgb, var(--c) 85%, transparent)}}

/* cloud section: three points on the left; on the right a glowing cloud that keeps the laptop, tablet and phone in sync */
.cpoints{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:14px}
.cpoints li{display:flex;gap:14px;align-items:flex-start}
.cp-ico{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--red);border:1px solid rgba(232,182,80,.6);background:rgba(232,182,80,.12)}
.cp-ico svg{width:22px;height:22px}
.cpoints b{display:block;font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;line-height:1.3}
.cpoints p{font-size:16px;color:var(--body);margin-top:2px;max-width:52ch}
.devices.cloudfx{aspect-ratio:160/130}
.devices.cloudfx .laptop{top:25%}
.cfx{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cfx path{fill:none}
.c-base path{stroke:rgba(169,187,255,.55);stroke-width:.45;stroke-dasharray:.03 .025;animation:mbDash 1.4s linear infinite}
.c-up path,.c-down path{stroke-width:1.100;stroke-linecap:round;stroke-dasharray:.08 .92}
.c-up path{stroke:#f6d98f;filter:drop-shadow(0 0 1.500px #f2bd4b);animation:flow 2.2s linear infinite reverse}
.c-down path{stroke:#8fd0ff;filter:drop-shadow(0 0 1.500px #5aa8ff);animation:flow 2.2s linear -1.1s infinite}
.c-cloud{transform-box:fill-box;transform-origin:center;animation:cFloat 4.5s ease-in-out infinite}
.c-cloud>path:not(.c-arrow){fill:#eaf5ff;stroke:#fff;stroke-width:.6;filter:drop-shadow(0 0 4px rgba(140,200,255,.95)) drop-shadow(0 0 10px rgba(90,150,255,.7))}
.c-glow{fill:rgba(90,150,255,.35);filter:blur(6px);animation:cGlow 3s ease-in-out infinite}
.c-arrow{stroke:#1b1a5c;stroke-width:1.300;stroke-linecap:round;stroke-linejoin:round;animation:cArrow 1.6s ease-in-out infinite}
.c-dot{fill:#fff;filter:drop-shadow(0 0 2px #8fd0ff);transform-box:fill-box;transform-origin:center;animation:cDot 2.2s ease-in-out infinite}
@keyframes cFloat{0%,100%{translate:0 0}50%{translate:0 -2.500px}}
@keyframes cGlow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes cArrow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes cDot{0%,100%{scale:.7;opacity:.6}50%{scale:1.500;opacity:1}}
.cfx{z-index:3;pointer-events:none}

/* cloud section art: isometric laptop wired to the cloud */
.isofx{position:relative;width:100%;aspect-ratio:800/560}
.iso{display:block;width:100%;height:100%;overflow:visible}
.iso-shadow{fill:rgba(59,85,240,.35);filter:blur(18px)}
.iso-links path{fill:none}
.iso-links.base path{stroke:rgba(169,187,255,.6);stroke-width:1.5;stroke-dasharray:.02 .012;animation:mbDash 1.6s linear infinite}
.iso-links.flow path{stroke-width:4.5;stroke-linecap:round;stroke-dasharray:.12 .88;filter:drop-shadow(0 0 4px currentColor);animation:flow 2.4s linear infinite}
.iso-lap{animation:isoFloat 5s ease-in-out infinite}
.iso-frame{fill:#0a0f48;stroke:#a9bbff;stroke-width:2;stroke-linejoin:round;filter:drop-shadow(0 0 18px rgba(90,130,255,.8))}
.iso-scan{animation:isoScan 3.6s ease-in-out infinite}
.iso-panel{animation:isoPanel 4s ease-in-out infinite}
.iso-panel.p2{animation-delay:-2s}
.iso-panel>rect:first-child{fill:rgba(120,150,255,.3);stroke:#cfe0ff;stroke-width:.5}
.iso-code{fill:none;stroke:#eaf5ff;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:40;animation:isoType 3.2s steps(12) infinite}
.iso-bar{fill:#f2bd4b;transform-box:fill-box;transform-origin:bottom;animation:isoBar 2.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.35s)}
.iso-node{opacity:0;transform-box:fill-box;transform-origin:center}
.iso-bob{animation:isoBob 3.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.45s)}
.iso-disc{fill:rgba(6,10,48,.9);stroke:var(--c);stroke-width:2;filter:drop-shadow(0 0 8px var(--c))}
.iso-ping{fill:none;stroke:var(--c);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:isoPing 2.6s ease-out infinite;animation-delay:calc(var(--i) * -.33s)}
.isofx.play .iso-node{animation:nodeIn .8s ease both;animation-delay:calc(.3s + var(--i) * .12s)}
.isofx.done .iso-node{opacity:1;animation:none}
@keyframes isoFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes isoBob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes isoPing{0%{scale:1;opacity:.9}100%{scale:1.7;opacity:0}}
@keyframes isoPanel{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes isoScan{0%,20%{y:-30px}80%,100%{y:110px}}
@keyframes isoType{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
@keyframes isoBar{0%,100%{scale:1 .45}50%{scale:1 1}}

/* cloud section: the supplied illustration with a tablet and a phone beside its laptop */
.devices.artfx{aspect-ratio:966/700}
.art{position:absolute;left:0;right:0;top:0;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px rgba(169,187,255,.35),0 0 60px rgba(59,85,240,.55)}
.devices.artfx.done .art{opacity:1;animation:isoFloat 6s ease-in-out infinite}
.art img{display:block;width:100%;height:auto}
.art-shine{position:absolute;top:-10%;bottom:-10%;left:0;width:22%;background:linear-gradient(100deg,transparent,rgba(170,210,255,.35),transparent);translate:-150% 0;animation:artShine 5s ease-in-out infinite}
.art-ping{position:absolute;width:2.2cqw;height:2.2cqw;margin:-1.1cqw 0 0 -1.1cqw;border-radius:50%;border:2px solid #7fd4ff;box-shadow:0 0 10px #7fd4ff;animation:isoPing 2.4s ease-out infinite;animation-delay:calc(var(--i) * -.48s)}
.devices.artfx .tablet{left:2%;width:23%;bottom:0}
.devices.artfx .phone{right:3%;width:13.5%;bottom:0}
@keyframes artShine{0%,40%{translate:-150% 0}80%,100%{translate:560% 0}}

/* cloud drawing with a real tablet and phone beside the laptop */
.devices.isofx{aspect-ratio:800/610}
.devices.isofx .iso{height:auto;aspect-ratio:800/560}
.devices.isofx .tablet{left:0;width:19%;bottom:0}
.devices.isofx .phone{right:2%;width:13%;bottom:0}

/* any device, any system: laptop and desktop joined through the cloud, tablet and phone on the same link */
.cloud.anyd{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.devices.anyfx{aspect-ratio:16/10}
.anysvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.anysvg path{fill:none}
.a-cloud{fill:rgba(63,224,208,.07) !important;stroke:#3fe0d0;stroke-width:.5;filter:drop-shadow(0 0 2.5px #3fe0d0);animation:aGlow 3.4s ease-in-out infinite}
.a-arc{stroke:#3fe0d0;stroke-width:.6;stroke-linecap:round;filter:drop-shadow(0 0 2px #3fe0d0);stroke-dasharray:1;stroke-dashoffset:1}
.a-dots{stroke:#8ff1e6;stroke-width:.7;stroke-linecap:round;stroke-dasharray:.01 2.6;animation:aDots 1.2s linear infinite}
.a-run{stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:.1 .9;filter:drop-shadow(0 0 2.5px #3fe0d0);animation:flow 2.2s linear infinite reverse}
.a-pt{fill:#fff;filter:drop-shadow(0 0 2px #3fe0d0);transform-box:fill-box;transform-origin:center;animation:cDot 2.2s ease-in-out infinite}
.devices.anyfx.play .a-arc{animation:draw 1s ease .5s both}
.monitor{position:absolute;left:52.5%;top:3%;width:43%}
.mon-screen{aspect-ratio:16/10;border:.8cqw solid #e6e9f7;border-bottom-width:1.6cqw;border-radius:1.1cqw;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(169,187,255,.5),0 0 50px rgba(63,224,208,.45)}
.mon-screen img{display:block;width:100%}
.mon-neck{width:13%;height:4.6cqw;margin:0 auto;background:linear-gradient(180deg,#b9c1e2,#e3e7f8)}
.mon-foot{width:36%;height:1.2cqw;margin:0 auto;border-radius:.6cqw;background:#e3e7f8;box-shadow:0 1cqw 2cqw rgba(2,3,20,.6)}
.devices.anyfx .laptop{left:5%;top:31%;width:40%}
.devices.anyfx .tablet{left:50%;width:14%;bottom:0;z-index:2}
.devices.anyfx .phone{right:5%;width:8.5%;bottom:0}
.os.sys li{border-color:rgba(63,224,208,.55);background:rgba(63,224,208,.1)}
.os.sys li::before{content:"";width:7px;height:7px;border-radius:50%;background:#3fe0d0;box-shadow:0 0 8px #3fe0d0}
@keyframes aGlow{0%,100%{filter:drop-shadow(0 0 1.5px #3fe0d0)}50%{filter:drop-shadow(0 0 5px #3fe0d0)}}
@keyframes aDots{to{stroke-dashoffset:-2.61}}
@media (max-width:760px){.cloud.anyd{grid-template-columns:1fr}.cloud.anyd .text{order:-1}}

.a-lid{fill:#11163f;stroke:#cfd6f5;stroke-width:.5;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(63,224,208,.6))}
.a-shadow{fill:rgba(59,85,240,.4);filter:blur(4px)}
.a-lap{opacity:0}
.devices.anyfx.play .a-lap{animation:fadeIn 1s ease both}
body.mbv #fx{opacity:.12}

/* multi-branch: text on the left, drawing on the right */
.cloud.mbrow{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:center}
.cloud.mbrow .mb-cap{text-align:right}
.cloud.mbrow .mbmap{min-width:0}
.cloud.mbrow .mbmap text{font-size:23px}
.cloud.mbrow .mbmap text.main{font-size:30px}
@media (max-width:1000px){.cloud.mbrow{grid-template-columns:1fr}.cloud.mbrow .mb-cap{text-align:left}}

/* hero corners: cloud sync (left) and AI (right) */
#services{position:relative}
.corner{position:absolute;top:1%;width:clamp(170px,16vw,270px);margin:0;display:none;flex-direction:column;align-items:center;gap:2px;z-index:1;animation:fadeIn 1.4s ease 1.2s both}
.corner.left{left:0} .corner.right{right:0}
.corner svg{width:100%;height:auto;overflow:visible}
.corner figcaption{font:700 13px var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:#9fe6ff;text-shadow:0 0 12px rgba(63,201,238,.8)}
html[lang="bn"] .corner figcaption{letter-spacing:0;text-transform:none;font-size:15px}
@media (min-width:1200px) and (min-aspect-ratio:3/2){.corner{display:flex}}
.corner path,.corner circle,.corner ellipse,.corner rect{fill:none}
.k-glow{fill:rgba(63,201,238,.22) !important;filter:blur(12px);animation:cGlow 3s ease-in-out infinite}
.k-cloud{stroke:#dff6ff;stroke-width:2.6;stroke-linejoin:round;filter:drop-shadow(0 0 4px #3fc9ee) drop-shadow(0 0 10px #3fc9ee);animation:cFloat 4.5s ease-in-out infinite}
.k-arrows{transform-box:fill-box;transform-origin:center;animation:spin 6s linear infinite}
.k-arrows path{stroke:#dff6ff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px #3fc9ee)}
.k-beam{stroke:#8fe3ff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:10 38;animation:kBeam 1.5s linear infinite;animation-delay:calc(var(--i) * -.31s);opacity:.85;filter:drop-shadow(0 0 3px #3fc9ee)}
.k-slab{fill:rgba(143,227,255,.5) !important;stroke:#dff6ff;stroke-width:1;filter:drop-shadow(0 0 8px #3fc9ee)}
.k-ripple{stroke:#8fe3ff;stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:isoPing 2.4s ease-out infinite}
.k-globe{stroke:rgba(143,227,255,.5);stroke-width:1}
.k-gear{transform-box:fill-box;transform-origin:center;animation:spin 12s linear infinite}
.k-teeth{stroke:#dff6ff;stroke-width:7;stroke-dasharray:7.2 7.25;filter:drop-shadow(0 0 4px #3fc9ee)}
.k-ring{stroke:#dff6ff;stroke-width:2.4;fill:rgba(6,10,48,.85) !important}
.k-ai{font:800 17px var(--font-display);fill:#fff;filter:drop-shadow(0 0 5px #3fc9ee)}
.k-wire{stroke:#8fe3ff;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:4 4;animation:kWire 1s linear infinite}
.k-node{fill:#dff6ff !important;filter:drop-shadow(0 0 3px #3fc9ee);transform-box:fill-box;transform-origin:center;animation:cDot 2s ease-in-out infinite}
.k-bub{animation:isoBob 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * -1.1s)}
.k-bub path{stroke:#6fd0ff;stroke-width:1.4;fill:rgba(63,201,238,.1) !important;stroke-linejoin:round}
.k-dot{fill:#6fd0ff !important;animation:kDot 1.2s ease-in-out infinite;animation-delay:calc(var(--d) * .2s)}
.k-spark{fill:#ffb35c !important;filter:drop-shadow(0 0 4px #ff9a3c);animation:kSpark 3s ease-in-out infinite;animation-delay:calc(var(--i) * -.75s)}
@keyframes kBeam{from{stroke-dashoffset:48}to{stroke-dashoffset:0}}
@keyframes kWire{to{stroke-dashoffset:-8}}
@keyframes kDot{0%,100%{opacity:.3}40%{opacity:1}}
@keyframes kSpark{0%,100%{opacity:.2;translate:0 0}50%{opacity:1;translate:0 -6px}}

/* contact: details on top, then the form and the map side by side at the same top and height */
#contact{display:flex;flex-direction:column;gap:26px}
.contact-head{display:flex;flex-direction:column;gap:18px}
.contact-head .lead{font-size:clamp(18px,1.7vw,21px);color:#fff;font-weight:500}
.reach{flex-direction:row;flex-wrap:wrap;gap:16px 44px}
.reach li{align-items:flex-start;max-width:520px;line-height:1.45}
.reach li svg{margin-top:3px}
.reach b{font-family:var(--font-display);font-weight:700}
.reach small{font-size:13px;font-weight:600;color:var(--muted)}
.reach .wa{margin-left:12px;font:600 13.5px var(--font-display);color:#0a0d33;background:#3fd6a0;border:0;border-radius:999px;padding:3px 12px;text-shadow:none}
.contact{align-items:stretch}
.contact .side{height:100%}
.contact .map{height:auto;flex:1;min-height:340px}

/* Who we are: text on the left, the three figures stacked on the right */
.who{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:center}
.facts{display:flex;flex-direction:column;width:auto;border-top:0;border-left:2px solid rgba(232,182,80,.55);padding-left:clamp(20px,3vw,40px)}
.facts li,.facts li+li{padding:16px 0;border-left:0;border-bottom:1px solid rgba(169,187,255,.22)}
.facts li:last-child{border-bottom:0}
@media (max-width:900px){
  .who{grid-template-columns:1fr}
  .facts{flex-direction:row;flex-wrap:wrap;gap:0 34px;border-left:0;padding-left:0;border-top:1px solid rgba(169,187,255,.3)}
  .facts li,.facts li+li{border-bottom:0;padding:16px 0 4px}
}

/* header: white logo straight on the bar, pill menu in the middle, phone and a gold call-to-action on the right */
header.sheet{padding:12px clamp(16px,4vw,64px);gap:18px;flex-wrap:nowrap;background:linear-gradient(180deg,rgba(5,8,36,.92),rgba(5,8,36,.72));border-bottom:0;transition:padding .25s ease,background .25s ease}
header.sheet::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(242,189,75,.9) 20%,rgba(169,187,255,.6) 60%,transparent)}
body.scrolled header.sheet{padding-top:6px;padding-bottom:6px;background:rgba(5,8,36,.95)}
.logo{background:none;padding:0;border-radius:0;display:flex;align-items:center}
.logo img{height:60px;filter:drop-shadow(0 0 14px rgba(169,187,255,.55));transition:height .25s ease}
body.scrolled .logo img{height:46px}
.logo.plate{background:#fff;border-radius:10px;padding:6px 14px}
header.sheet nav{margin:0 auto;gap:4px;padding:5px;border:1px solid rgba(169,187,255,.22);border-radius:999px;background:rgba(169,187,255,.07);flex-wrap:nowrap}
header.sheet nav a{padding:8px 16px;border-radius:999px;border-bottom:0;color:#dfe5ff;white-space:nowrap;transition:background .2s,color .2s}
header.sheet nav a:hover,header.sheet nav a:focus-visible{background:rgba(169,187,255,.16);color:#fff;border-bottom:0}
header.sheet nav a.active{background:linear-gradient(180deg,#f8d67e,#e0ad45);color:#0a0d33;border-bottom:0}
.h-right{display:flex;align-items:center;gap:16px;flex:none}
.h-phone{display:flex;align-items:center;gap:8px;font:600 15px var(--font-display);color:#fff;text-decoration:none;white-space:nowrap}
.h-phone[hidden]{display:none}
.h-phone svg{width:18px;height:18px;color:var(--red)}
.h-cta{display:inline-flex;align-items:center;gap:8px;font:700 14.5px var(--font-display);color:#0a0d33;text-decoration:none;white-space:nowrap;background:linear-gradient(180deg,#f8d67e,#e0ad45);border-radius:999px;padding:10px 18px;box-shadow:0 0 22px rgba(242,189,75,.45);transition:translate .2s,box-shadow .2s}
.h-cta:hover{translate:0 -2px;box-shadow:0 0 34px rgba(242,189,75,.75)}
.h-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:1250px){.h-phone span{display:none}}
@media (max-width:1050px){.h-phone{display:none}header.sheet nav a{padding:8px 11px;font-size:14px}}
@media (max-width:760px){
  header.sheet{flex-wrap:wrap}
  header.sheet nav{order:3;width:100%;margin:0;justify-content:space-between;overflow-x:auto}
  .logo img,body.scrolled .logo img{height:42px}
  .h-right{margin-left:auto}
  .h-cta{padding:8px 13px;font-size:13px}
}
header.sheet nav a.active,.h-cta{text-shadow:none}
/* header bar: see-through royal blue glass, not a dark slab */
header.sheet{background:linear-gradient(180deg,rgba(40,58,170,.34),rgba(28,40,130,.22));-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5)}
body.scrolled header.sheet{background:linear-gradient(180deg,rgba(34,48,150,.55),rgba(24,34,115,.45))}