:root{--bg:#F6F5FF;--fg:#0D1021;--mut:#575C78;--card:#fff;--line:#DCDAF2;--v:#6A4CFF;--a:#1FD3B3;--p:#FF9E7A;--d:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;--b:'Instrument Sans','Segoe UI',system-ui,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0B0D1C;--fg:#F1F0FF;--mut:#9A9EC2;--card:#151936;--line:#262B55}}
:root[data-theme="dark"]{--bg:#0B0D1C;--fg:#F1F0FF;--mut:#9A9EC2;--card:#151936;--line:#262B55}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px)}
*,*::before,*::after{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--fg);font:400 1.0625rem/1.6 var(--b);overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--v);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--d);line-height:1.02;letter-spacing:-.03em}
h1{font-size:clamp(2.8rem,7.4vw,6.4rem);font-weight:800}
h2{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:800;max-width:16ch}
.wrap{width:min(1200px,92%);margin-inline:auto}
section{padding:clamp(4.5rem,10vw,8rem) 0;position:relative}
.lead{color:var(--mut);max-width:56ch;margin-top:1.1rem}

/* ---------- nav ---------- */
html{overflow-x:clip}
header{position:fixed;left:0;right:0;top:0;z-index:50;padding-top:calc(env(safe-area-inset-top,0px) + 12px);pointer-events:none}
.bar{pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;height:68px;padding:0 .8rem 0 1.2rem;background:color-mix(in srgb,var(--bg) 68%,transparent);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border:1px solid var(--line);border-radius:22px;transition:box-shadow .3s,background .3s,border-color .3s}
.bar::before,.bar::after{content:"";position:absolute;width:18px;height:18px;border:3px solid var(--a);pointer-events:none;transition:transform .5s cubic-bezier(.2,.9,.2,1)}
.bar::before{left:-7px;top:-7px;border-right:0;border-bottom:0;border-radius:9px 0 0 0}
.bar::after{right:-7px;bottom:-7px;border-left:0;border-top:0;border-radius:0 0 9px 0}
.bar:hover::before{transform:translate(-3px,-3px)}.bar:hover::after{transform:translate(3px,3px)}
header.s .bar{box-shadow:0 18px 40px -20px rgba(20,16,80,.45)}
.prog{position:absolute;left:20px;bottom:0;height:3px;width:calc((100% - 40px)*var(--p,0));background:linear-gradient(90deg,var(--v),var(--a));border-radius:3px}
.logo{display:flex;align-items:center;gap:.55rem;font:800 1.3rem var(--d);letter-spacing:-.03em}
.logo svg{width:38px;height:38px;flex:none;overflow:visible}.logo .hx6{transform-box:fill-box;transform-origin:center;animation:spin 16s linear infinite}
.caret{font:600 1.2rem ui-monospace,Menlo,monospace;color:var(--a);margin-left:-.35rem;animation:blink 1.1s steps(1) infinite}
.links{position:relative;display:flex;align-items:center;gap:.1rem;font-weight:600;font-size:.95rem}
.links>a{position:relative;z-index:1;padding:.6rem 1.35rem;color:var(--mut);transition:color .25s}
.links>a::before,.links>a::after{position:absolute;top:50%;translate:0 -50%;font:600 .9rem ui-monospace,Menlo,monospace;color:var(--v);opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.2,1)}
.links>a::before{content:"<";left:.55rem;transform:translateX(8px)}.links>a::after{content:"/>";right:.4rem;transform:translateX(-8px)}
.links>a:hover,.links>a.act{color:var(--fg)}.links>a:hover::before,.links>a:hover::after,.links>a.act::before,.links>a.act::after{opacity:1;transform:none}
.ind{position:absolute;top:50%;height:38px;translate:0 -50%;border-radius:13px 13px 13px 3px;background:color-mix(in srgb,var(--v) 15%,transparent);opacity:0;transition:left .5s cubic-bezier(.2,.9,.2,1),width .5s cubic-bezier(.2,.9,.2,1),opacity .3s}

/* dropdown — .has-drop is intentionally NOT positioned; the panel anchors to
   the already-positioned .links row so the trigger's offsetLeft (used by the
   hover indicator) stays correct */
.drop-trig{display:inline-flex;align-items:center;gap:.3rem;background:none;border:0;font:inherit;font-weight:600;cursor:pointer;color:var(--mut);padding:.6rem 1.1rem;border-radius:12px;transition:color .25s}
.drop-trig:hover,.drop-trig[aria-expanded=true]{color:var(--fg)}
.drop-trig .cv{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s}
.drop-trig[aria-expanded=true] .cv{transform:rotate(-135deg) translateY(1px)}
.drop-panel{position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;width:min(560px,86vw);background:var(--card);border:1px solid var(--line);border-radius:24px 24px 24px 8px;box-shadow:0 30px 70px -20px rgba(20,16,80,.35);padding:1rem;display:grid;grid-template-columns:1fr 1fr;gap:.3rem;opacity:0;visibility:hidden;translate:-50% 8px;transition:opacity .25s,translate .25s,visibility 0s .25s}
.has-drop.open .drop-panel{opacity:1;visibility:visible;translate:-50% 0;transition:opacity .25s,translate .25s}
.drop-panel a{display:flex;align-items:center;gap:.7rem;padding:.65rem .7rem;border-radius:14px 14px 14px 4px;color:var(--fg);font-weight:600;font-size:.92rem;transition:background .2s}
.drop-panel a:hover{background:color-mix(in srgb,var(--v) 10%,transparent)}
.drop-panel a i{flex:none;width:34px;height:34px;border-radius:10px 10px 10px 3px;display:grid;place-items:center;background:linear-gradient(140deg,var(--v),var(--a));color:#fff;font-style:normal;font-size:1rem}
.drop-panel .all{grid-column:1/-1;margin-top:.4rem;border-top:1px solid var(--line);padding-top:.9rem;justify-content:space-between;color:var(--v)}
@media(max-width:700px){.drop-panel{grid-template-columns:1fr}}

.bg{display:none;flex:none;width:48px;height:48px;border:0;cursor:pointer;background:var(--v);border-radius:16px 16px 16px 4px;position:relative}
.bg span{position:absolute;left:14px;right:14px;height:3px;border-radius:2px;background:#fff;transition:transform .45s cubic-bezier(.2,.9,.2,1),opacity .2s,top .45s}
.bg span:nth-child(1){top:16px}.bg span:nth-child(2){top:22px;right:22px}.bg span:nth-child(3){top:28px}
.bg[aria-expanded=true] span:nth-child(1){top:22px;transform:rotate(45deg)}.bg[aria-expanded=true] span:nth-child(2){opacity:0}.bg[aria-expanded=true] span:nth-child(3){top:22px;transform:rotate(-45deg)}
header.o .bar{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}header.o .logo{color:#fff}
.mm{position:fixed;inset:0;z-index:40;background:#0D1021;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 96px) 8% calc(env(safe-area-inset-bottom,0px) + 32px);overflow:auto;clip-path:circle(0 at calc(100% - 46px) 58px);visibility:hidden;transition:clip-path .8s cubic-bezier(.7,0,.2,1),visibility 0s .8s}
.mm.o{clip-path:circle(160% at calc(100% - 46px) 58px);visibility:visible;transition:clip-path .8s cubic-bezier(.7,0,.2,1),visibility 0s}
.mm::before{content:"";position:absolute;right:-90px;bottom:-90px;width:320px;height:320px;background:linear-gradient(135deg,var(--v),var(--a));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);opacity:.25;animation:spin 24s linear infinite}
.mm .l{position:relative;opacity:0;translate:0 30px;transition:opacity .5s,translate .6s cubic-bezier(.2,.9,.2,1)}
.mm.o .l{opacity:1;translate:0;transition-delay:calc(.28s + var(--i)*.06s)}
.mm a.l{display:flex;align-items:baseline;gap:1rem;font:800 clamp(2rem,9vw,3.4rem) var(--d);letter-spacing:-.03em;padding:.25rem 0}
.mm code{font:500 .9rem ui-monospace,Menlo,monospace;color:var(--a)}
.mm .sub{position:relative;display:flex;flex-direction:column;gap:.2rem;max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.9,.2,1)}
.mm .msvc.open .sub{max-height:600px}
.mm .sub a{font:600 1.05rem var(--b);color:#ffffffb0;padding:.35rem 0 .35rem 1.2rem}
.mm .msvc .drop-trig{display:flex;align-items:baseline;gap:1rem;width:100%;text-align:left;font:800 clamp(2rem,9vw,3.4rem) var(--d);letter-spacing:-.03em;padding:.25rem 0;background:none;border:0;color:#fff;cursor:pointer}
.mm .msvc .drop-trig .cv{width:14px;height:14px;border-width:3px;margin-bottom:.4em}
.mm a.l.act,.mm .msvc.act>.drop-trig{color:var(--a)}
.mm .mf{position:relative;margin-top:2rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;color:#ffffffb0}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.7rem;border-radius:999px;background:var(--v);color:#fff;font:600 1rem var(--b);border:0;cursor:pointer;transition:transform .25s,box-shadow .25s;box-shadow:0 10px 30px -10px var(--v)}
.btn:hover{box-shadow:0 16px 36px -10px var(--v)}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 2px var(--line)}
.bar .cta-n{border-radius:16px 16px 4px 16px;padding:.8rem 1.4rem;font-size:.95rem}.cta-n code{font:600 .95rem ui-monospace,Menlo,monospace;color:#7CF3DD}
@media(max-width:980px){.links,.bar .cta-n{display:none}.bg{display:block}}
@media(min-width:981px){.mm{display:none}}
@media(max-width:480px){.cta .btn{width:100%;justify-content:center}.ct{border-radius:36px 36px 36px 10px}.bx.big h3{font-size:1.8rem}.card{left:6%;right:6%;padding:1.2rem}.logo{font-size:1.15rem}}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;align-items:center;padding-top:120px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.hero h1 span{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 b{display:block;font-weight:800;transform:translateY(105%);animation:up .9s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:calc(var(--i)*.12s + .15s)}
.hero .lead{font-size:1.2rem;opacity:0;animation:fade .8s .8s forwards}
.cta{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap;opacity:0;animation:fade .8s 1s forwards}
.stage{position:relative;aspect-ratio:1;width:100%;max-width:560px;justify-self:center;opacity:0;animation:fade 1.2s .4s forwards}
.blob{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 30px 60px color-mix(in srgb,var(--v) 40%,transparent))}
.sh{position:absolute;will-change:transform;transition:transform .25s ease-out}
.sh>div{width:100%;height:100%}
.hex{width:110px;height:110px;top:4%;left:2%}.hex>div{background:var(--a);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);animation:spin 18s linear infinite}
.ring{width:150px;height:150px;bottom:6%;left:-4%}.ring>div{border-radius:50%;border:14px solid var(--p);animation:bob 6s ease-in-out infinite}
.sq{width:96px;height:96px;top:8%;right:0}.sq>div{background:var(--fg);border-radius:32% 68% 55% 45%/50% 40% 60% 50%;animation:morph 8s ease-in-out infinite}
.tri{width:84px;height:84px;bottom:4%;right:6%}.tri>div{background:var(--v);clip-path:polygon(50% 0,100% 100%,0 100%);animation:bob 5s ease-in-out infinite reverse}
.card{position:absolute;left:12%;right:12%;top:26%;background:var(--card);border-radius:28px 28px 28px 6px;padding:1.6rem;box-shadow:0 30px 70px -20px rgba(20,16,80,.35);overflow:hidden;border:1px solid var(--line)}
.card small{color:var(--mut);font-weight:600}
.card h3{font-size:1.5rem;margin:.3rem 0 1rem}
.bar-i{height:60px;border-radius:9px;background:var(--line);margin:.55rem 0;overflow:hidden}.bar-i i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--v),var(--a));width:0;animation:fill 1.6s 1.4s forwards cubic-bezier(.2,.8,.2,1)}
.card .ghost-name{position:absolute;right:-.4rem;bottom:-1.3rem;font:800 4rem var(--d);letter-spacing:-.05em;opacity:.07;pointer-events:none;white-space:nowrap}
.tag{display:inline-block;font-size:.8rem;font-weight:600;padding:.3rem .8rem;border-radius:999px;background:color-mix(in srgb,var(--a) 25%,transparent)}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}.stage{max-width:420px}}

/* ---------- inner page header (services/about/contact/hrm) ---------- */
.pagehead{padding-top:calc(120px + 2rem);padding-bottom:3rem}
.pagehead .crumb{display:flex;gap:.5rem;align-items:center;color:var(--mut);font-weight:600;font-size:.9rem;margin-bottom:1rem}
.pagehead .crumb a:hover{color:var(--v)}
.pagehead h1{font-size:clamp(2.4rem,6vw,4.4rem)}

/* ---------- marquee ---------- */
.mq{background:var(--fg);color:var(--bg);overflow:hidden;padding:1.3rem 0;transform:rotate(-1.4deg);margin:-1rem -2rem}
.mq div{display:flex;gap:2.5rem;width:max-content;animation:slide 30s linear infinite;font:800 clamp(1.6rem,3.5vw,2.6rem) var(--d);letter-spacing:-.02em;white-space:nowrap}
.mq em{display:inline-block;width:.7em;height:.7em;background:var(--a);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);margin-left:2.5rem;font-style:normal}

/* ---------- services grid ---------- */
.sg{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:1.4rem;margin-top:3.5rem;align-items:start}
@media(min-width:1000px){.sv:nth-child(even){margin-top:2.6rem}}
.sv{display:block;position:relative;isolation:isolate;background:var(--card);border:1px solid var(--line);border-radius:32px 32px 32px 8px;padding:.7rem .7rem 1.5rem;overflow:hidden;will-change:transform}
.sv.rv{opacity:1;transform:none;transition:transform .35s cubic-bezier(.2,.9,.2,1),border-color .3s,box-shadow .3s}
.sv::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--g2) 30%,transparent),transparent 60%)}
.sv:hover{border-color:var(--g1);box-shadow:0 30px 60px -30px var(--g1)}.sv:hover::before{opacity:1}
.sv:nth-child(3n+1){--r:50% 50% 26px 26px/64% 64% 26px 26px;--r2:26px 110px 26px 110px}
.sv:nth-child(3n+2){--r:38% 62% 63% 37%/41% 44% 56% 59%;--r2:60px 26px 60px 26px}
.sv:nth-child(3n){--r:110px 26px 110px 26px;--r2:50% 50% 26px 26px/64% 64% 26px 26px}
.im{aspect-ratio:4/3;background:linear-gradient(140deg,var(--g1),var(--g2));border-radius:var(--r);overflow:hidden;clip-path:inset(0 0 100% 0);transition:border-radius .8s cubic-bezier(.2,.9,.2,1),clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.sv.in .im{clip-path:inset(0)}.sv:hover .im{border-radius:var(--r2)}
.im svg{width:100%;height:100%;display:block;transition:transform .8s cubic-bezier(.2,.9,.2,1)}.sv:hover .im svg{transform:scale(1.09) rotate(-2deg)}
.im .f,.im .g,.im .o,.im .p{transform-box:fill-box;transform-origin:center}
.im .f{animation:bob 4.5s ease-in-out infinite}.im .g{animation:bob 6s ease-in-out infinite reverse}.im .o{animation:spin 9s linear infinite}.im .p{animation:pulse 2.2s ease-in-out infinite}
.tx{padding:1.2rem 1rem 0;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.sv h3{font-size:1.25rem;letter-spacing:-.02em}.sv p{color:var(--mut);font-size:.93rem;margin-top:.35rem;line-height:1.45}
.go{flex:none;width:44px;height:44px;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center;font-size:1.1rem;transition:transform .5s cubic-bezier(.2,.9,.2,1),background .3s}
.sv:hover .go{transform:rotate(45deg) scale(1.12);background:var(--g1);color:#fff}

/* ---------- why bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2rem;margin-top:3rem}
.bx{background:var(--card);border:1px solid var(--line);padding:1.8rem;position:relative;overflow:hidden;min-height:190px;display:flex;flex-direction:column;justify-content:flex-end}
.bx h3{font-size:1.5rem}.bx p{color:var(--mut);margin-top:.4rem;font-size:.97rem;line-height:1.5}
.bx.big{grid-column:span 3;grid-row:span 2;background:var(--fg);color:var(--bg);border-radius:48px 48px 48px 12px}.bx.big p{color:color-mix(in srgb,var(--bg) 70%,transparent)}.bx.big h3{font-size:2.4rem}
.bx.m{grid-column:span 3;border-radius:28px}.bx.s{grid-column:span 2;border-radius:28px 8px 28px 28px}
.bx.v{background:var(--v);color:#fff;border-color:transparent}.bx.v p{color:#ffffffcc}
.bx .deco{position:absolute;top:-30px;right:-30px;width:150px;height:150px;opacity:.9;animation:spin 24s linear infinite}
.bx.big .deco{width:300px;height:300px;top:-70px;right:-70px;background:linear-gradient(135deg,var(--v),var(--a));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.bx.m .deco{background:var(--p);border-radius:50%}.bx.s .deco{background:var(--a);border-radius:38% 62% 63% 37%/41% 44% 56% 59%;animation-duration:12s}
.bx.v .deco{background:#ffffff33;clip-path:polygon(50% 0,100% 100%,0 100%)}
@media(max-width:900px){.bx.big,.bx.m,.bx.s{grid-column:span 6;grid-row:auto}}

/* ---------- how / process ---------- */
.how{background:var(--card);border-block:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3.5rem;position:relative}
.steps svg{position:absolute;top:40px;left:8%;width:84%;height:24px;overflow:visible}
.steps path{stroke:var(--v);stroke-width:3;fill:none;stroke-dasharray:6 10;stroke-dashoffset:var(--o,900)}
.st{position:relative;text-align:center;padding:0 1rem}
.n{width:84px;height:84px;margin:0 auto 1.4rem;display:grid;place-items:center;font:800 1.8rem var(--d);color:#fff;background:var(--v);position:relative;z-index:1;transition:transform .5s}
.st:nth-of-type(2) .n{background:var(--a);color:var(--fg)}.st:nth-of-type(3) .n{background:var(--p);color:var(--fg)}
.st.on .n{transform:scale(1.12) rotate(8deg)}
.st:nth-of-type(1) .n{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}.st:nth-of-type(2) .n{border-radius:38% 62% 63% 37%/41% 44% 56% 59%}.st:nth-of-type(3) .n{border-radius:50% 50% 50% 8%}
.st p{color:var(--mut);max-width:30ch;margin:.5rem auto 0}
@media(max-width:800px){.steps{grid-template-columns:1fr}.steps svg{display:none}}
.pills{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.pills span{padding:.6rem 1.2rem;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600}

/* ---------- hrm ---------- */
.hr{background:var(--fg);color:var(--bg);border-radius:64px 64px 12px 64px;padding:clamp(2rem,6vw,4.5rem);display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;position:relative;overflow:hidden}
.hr::before{content:"";position:absolute;left:-140px;bottom:-170px;width:400px;height:400px;background:conic-gradient(var(--v),var(--a),var(--p),var(--v));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);opacity:.35;animation:spin 30s linear infinite}
.hr>*{position:relative}.hr .lead{color:color-mix(in srgb,var(--bg) 72%,transparent)}
.mods{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 2rem}
.mods li{font:500 .88rem ui-monospace,Menlo,monospace;padding:.5rem .9rem;border-radius:10px 10px 10px 2px;background:color-mix(in srgb,var(--bg) 12%,transparent);border:1px dashed color-mix(in srgb,var(--bg) 35%,transparent)}
.mods li::before{content:"{ ";color:var(--a)}.mods li::after{content:" }";color:var(--a)}
.hv{min-height:380px}
.pn{position:absolute;background:var(--card);color:var(--fg);border-radius:26px 26px 26px 6px;padding:1.1rem 1.2rem;box-shadow:0 30px 60px -25px #000a;border:1px solid var(--line);animation:bob 7s ease-in-out infinite}
.pn small{color:var(--mut);font-weight:600;display:block}
.p1{left:0;top:0;width:54%;animation-delay:-2s}.p2{right:0;top:12%;width:42%;border-radius:26px 26px 6px 26px;animation-delay:-4s}.p3{left:12%;right:4%;bottom:0}
.rw{position:relative;max-width:140px;margin:.5rem auto 0}.rw b{position:absolute;inset:0;display:grid;place-items:center;font:800 1.7rem var(--d)}
.rg{display:block;width:100%;transform:rotate(-90deg)}.rg circle{fill:none;stroke-width:12;stroke-linecap:round}.rg .t{stroke:var(--line)}
.rg .pg{stroke:var(--a);stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s .3s cubic-bezier(.2,.8,.2,1)}.hv.in .pg{stroke-dashoffset:6}
.av{display:flex;margin-top:.8rem}.av i{width:34px;height:34px;border:3px solid var(--card);margin-left:-10px;background:var(--c);border-radius:50%}.av i:first-child{margin-left:0}.av i:nth-child(2){border-radius:10px}.av i:nth-child(4){border-radius:50% 50% 50% 4px}
.av em{font:600 .8rem var(--b);font-style:normal;align-self:center;margin-left:.5rem}
.pb{height:10px;border-radius:9px;background:var(--line);margin:.6rem 0;overflow:hidden}.pb i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--v),var(--a));transition:width 1.4s .6s cubic-bezier(.2,.8,.2,1)}.hv.in .pb i{width:var(--w)}
@media(max-width:900px){.hr{grid-template-columns:1fr;border-radius:40px 40px 12px 40px;gap:2rem}.hv{min-height:350px}}

/* ---------- about page ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:3rem}
.stat{background:var(--card);border:1px solid var(--line);border-radius:24px 24px 24px 6px;padding:1.6rem}
.stat b{display:block;font:800 2.6rem var(--d);color:var(--v)}
.stat span{color:var(--mut);font-weight:600;font-size:.92rem}
@media(max-width:800px){.stats{grid-template-columns:1fr 1fr}}
.team-vals{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
@media(max-width:800px){.team-vals{grid-template-columns:1fr}}

/* ---------- homepage proof + selected product ---------- */
.proof{padding:3.5rem 0;background:var(--fg);color:var(--bg);overflow:hidden}
.proof .eyebrow{color:color-mix(in srgb,var(--bg) 68%,transparent);margin-bottom:0}
.proof .stats{margin-top:1.6rem;grid-template-columns:repeat(4,1fr)}
.proof .stat{background:color-mix(in srgb,var(--bg) 7%,transparent);border-color:color-mix(in srgb,var(--bg) 16%,transparent);border-radius:20px 20px 20px 6px}
.proof .stat b{color:var(--a)}.proof .stat span{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.work-head{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.work-head .btn{margin-top:1.8rem}
.work-board{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:.8rem;padding:1rem;background:var(--fg);border:1px solid var(--line);border-radius:32px 32px 32px 8px;box-shadow:0 30px 70px -42px color-mix(in srgb,var(--fg) 50%,transparent);overflow:hidden}
.work-board figure{position:relative;min-width:0;background:#EAF3F8;border:1px solid #d7e5eb;border-radius:18px 18px 18px 5px;overflow:hidden}
.work-board img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;transition:transform .7s cubic-bezier(.2,.9,.2,1)}
.work-board figure:hover img{transform:scale(1.045)}
.work-board figcaption{padding:.55rem .7rem;background:var(--card);color:var(--mut);font:500 .68rem var(--m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-stack{display:grid;gap:.8rem}
@media(max-width:900px){.proof .stats{grid-template-columns:repeat(2,1fr)}.work-head{grid-template-columns:1fr}.work-board{max-width:720px}}
@media(max-width:480px){.proof{padding:2.8rem 0}.proof .stats{gap:.65rem}.proof .stat{padding:1rem}.proof .stat b{font-size:2rem}.work-board{gap:.5rem;padding:.55rem;border-radius:24px 24px 24px 6px}.work-stack{gap:.5rem}.work-board figure{border-radius:12px 12px 12px 4px}.work-board figcaption{padding:.4rem;font-size:.56rem}}

/* ---------- partnership models ---------- */
.partner-models{position:relative;overflow:hidden;background:color-mix(in srgb,var(--fg) 3%,var(--bg));border-block:1px solid var(--line)}
.partner-models::before{content:"";position:absolute;right:0;top:0;width:min(48vw,680px);height:100%;background-image:linear-gradient(color-mix(in srgb,var(--fg) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--fg) 4%,transparent) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,transparent,#000);pointer-events:none}
.partner-models>.wrap{position:relative}
.model-intro{display:grid;grid-template-columns:1fr .8fr;gap:2rem;align-items:end}
.model-intro h2{max-width:12ch}
.model-intro .lead{margin:0 0 .35rem;max-width:42ch}
.model-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin-top:3rem}
.model-grid::before{content:"";position:absolute;left:25%;right:25%;top:-1.5rem;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--fg) 25%,transparent),transparent);pointer-events:none}
.model-card{position:relative;isolation:isolate;overflow:hidden;min-width:0;min-height:350px;padding:clamp(1.4rem,3vw,2.2rem);background:var(--card);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;align-items:flex-start;transition:transform .35s cubic-bezier(.2,.9,.2,1),border-color .3s,box-shadow .3s}
.model-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--a) 70%,var(--line));box-shadow:0 22px 44px -36px color-mix(in srgb,var(--fg) 48%,transparent)}
.model-card::after{content:"";position:absolute;z-index:-1;right:-4.5rem;top:-5rem;width:15rem;height:15rem;border:1px solid color-mix(in srgb,var(--a) 25%,transparent);border-radius:50%;transition:rotate .8s cubic-bezier(.2,.9,.2,1),scale .6s}
.model-card:hover::after{rotate:18deg;scale:1.08}
.model-card.referral{background:var(--fg);color:var(--bg);border-color:transparent}
.model-card.referral::after{background:color-mix(in srgb,var(--v) 50%,transparent)}
.model-card.referral:hover{border-color:color-mix(in srgb,var(--a) 65%,transparent)}
.model-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;width:100%}
.model-top .path-no{font:500 .76rem var(--m);color:var(--v)}
.referral .model-top .path-no{color:var(--a)}
.model-badge{width:46px;aspect-ratio:1;display:grid;place-items:center;background:var(--fg);color:var(--a);font:700 .78rem var(--m);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);transition:rotate .5s cubic-bezier(.2,.9,.2,1)}
.model-card:hover .model-badge{rotate:6deg}
.referral .model-badge{background:var(--a);color:var(--fg);font-size:1.4rem;clip-path:none;border-radius:50% 50% 50% 8%}
.model-card h3{position:relative;font-size:clamp(1.55rem,2.7vw,2.1rem);max-width:17ch;margin:1.5rem 0 .65rem}
.model-card p{position:relative;max-width:48ch;color:var(--mut);line-height:1.5}
.model-card.referral p{color:color-mix(in srgb,var(--bg) 72%,transparent)}
.model-flow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.35rem;width:100%;margin-top:auto;padding-top:1.8rem}
.model-flow span{min-width:0;padding:.55rem .4rem;text-align:center;white-space:nowrap;font:500 .72rem var(--m);color:var(--fg);background:color-mix(in srgb,var(--v) 9%,var(--card));border:1px solid var(--line);border-radius:12px 12px 12px 3px}
.model-flow i{font-style:normal;color:var(--v);transition:translate .3s}
.model-card:hover .model-flow i{translate:3px 0}
.referral .model-flow span{background:color-mix(in srgb,var(--bg) 8%,transparent);border-color:color-mix(in srgb,var(--bg) 20%,transparent);color:var(--bg)}
.referral .model-flow i{color:var(--a)}
.model-card>a{position:relative;display:inline-flex;align-items:center;gap:.8rem;margin-top:1.25rem;color:var(--v);font-weight:700}
.model-card.referral>a{color:var(--a)}
.model-card>a span{transition:translate .3s}.model-card>a:hover span{translate:5px -2px}
@media(max-width:800px){.model-intro{grid-template-columns:1fr;gap:.8rem}.model-intro h2{max-width:16ch}.model-grid{margin-top:2.4rem}}
@media(max-width:650px){.model-grid{grid-template-columns:1fr;gap:1rem}.model-grid::before{display:none}.model-card{min-height:320px;padding:1.5rem}}
@media(max-width:380px){.model-flow{gap:.2rem}.model-flow span{display:grid;place-items:center;min-height:2.5em;font-size:.64rem;line-height:1.15;padding-inline:.25rem;white-space:normal}.model-flow i{font-size:.8rem}}

/* ---------- who we are + privacy ---------- */
.who-page .team-vals .bx{border-radius:8px;min-height:210px;justify-content:flex-start;border-top:2px solid var(--a)}
.who-page .team-vals .deco{display:none}
.policy-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.policy-nav{position:sticky;top:100px;display:grid;gap:.25rem;padding-left:1rem;border-left:1px solid var(--line)}
.policy-nav strong{font:500 .72rem var(--m);color:var(--mut);margin-bottom:.5rem}
.policy-nav a{padding:.35rem 0;color:var(--mut);font-size:.9rem;transition:color .2s,translate .2s}
.policy-nav a:hover{color:var(--fg);translate:3px 0}
.policy-copy{max-width:78ch}
.policy-note{padding:1.25rem 1.4rem;margin-bottom:2rem;background:color-mix(in srgb,var(--a) 10%,var(--card));border-left:3px solid var(--a);border-radius:0 8px 8px 0;color:var(--mut)}
.policy-note strong{display:block;margin-bottom:.25rem;color:var(--fg);font-family:var(--d);font-size:1.15rem}
.policy-part{padding:1.65rem 0;border-top:1px solid var(--line);scroll-margin-top:100px}
.policy-part h2{font-size:1.55rem;max-width:none;margin-bottom:.7rem}
.policy-part p,.policy-part li{color:var(--mut);max-width:74ch}
.policy-part p+p{margin-top:.7rem}
.policy-part ul{padding-left:1.25rem;margin:.7rem 0}
.policy-part li+li{margin-top:.4rem}
.policy-part a{color:var(--v);text-decoration:underline;text-underline-offset:3px}
@media(max-width:800px){.policy-layout{grid-template-columns:1fr}.policy-nav{position:static;display:flex;gap:.3rem .9rem;flex-wrap:wrap;padding:0 0 .8rem;border:0;border-bottom:1px solid var(--line)}.policy-nav strong{width:100%}}

/* ---------- faq ---------- */
.faq{max-width:820px;margin-top:2.5rem}
details{border-bottom:1px solid var(--line);padding:1.3rem 0}
summary{cursor:pointer;list-style:none;font:600 1.2rem var(--d);display:flex;justify-content:space-between;gap:1rem;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:28px;height:28px;background:var(--v);clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%);transition:transform .4s}
details[open] summary::after{transform:rotate(135deg);background:var(--p)}
details p{color:var(--mut);margin-top:.8rem;max-width:64ch;animation:fade .5s}

/* ---------- contact ---------- */
.ct{background:var(--fg);color:var(--bg);border-radius:56px 56px 56px 12px;padding:clamp(2rem,6vw,4.5rem);display:grid;grid-template-columns:1fr 1fr;gap:3rem;position:relative;overflow:hidden}
.ct::before{content:"";position:absolute;width:420px;height:420px;right:-140px;top:-160px;background:linear-gradient(135deg,var(--v),var(--a));border-radius:38% 62% 63% 37%/41% 44% 56% 59%;animation:morph 10s ease-in-out infinite;opacity:.9}
.ct>*{position:relative}
.ct .lead{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.ct .cinfo{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}
.ct .cinfo a{font-weight:600;padding:.8rem 1rem;border-radius:14px 14px 14px 4px;background:color-mix(in srgb,var(--bg) 10%,transparent)}
form{display:grid;gap:.9rem}
input,select,textarea{width:100%;padding:1rem 1.2rem;border-radius:16px;border:2px solid transparent;background:color-mix(in srgb,var(--bg) 12%,transparent);color:var(--bg);font:inherit}
select option{color:#0D1021}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--bg) 55%,transparent)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--a)}
.ct .btn{background:var(--a);color:#0D1021;justify-content:center;box-shadow:none}
.ok{display:none;padding:1rem 1.2rem;border-radius:16px;background:color-mix(in srgb,var(--a) 30%,transparent)}
.ok.err{background:color-mix(in srgb,var(--p) 35%,var(--card))}
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media(max-width:860px){.ct{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{padding:4rem 0 2.5rem;color:var(--mut);font-size:.95rem;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem;padding-bottom:2.5rem}
.fgrid .fb p{max-width:32ch;margin-top:.8rem}
.fgrid h4{font:700 .85rem var(--b);text-transform:uppercase;letter-spacing:.06em;color:var(--fg);margin-bottom:.9rem}
.fgrid ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.55rem}
.fgrid a:hover{color:var(--v)}
.fbottom{border-top:1px solid var(--line);padding-top:1.5rem;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
@media(max-width:800px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}}

/* ---------- motion ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.2,.9,.2,1)}.rv.in{opacity:1;transform:none}
@keyframes up{to{transform:none}}@keyframes fade{to{opacity:1}}@keyframes fill{to{width:var(--w)}}
@keyframes spin{to{rotate:360deg}}@keyframes slide{to{transform:translateX(-50%)}}
@keyframes pulse{50%{scale:1.5;opacity:.5}}@keyframes blink{50%{opacity:0}}@keyframes bob{50%{translate:0 -18px}}
@keyframes morph{50%{border-radius:63% 37% 37% 63%/55% 60% 40% 45%;rotate:40deg}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.hero h1 b,.hero .lead,.cta,.stage,.rv{opacity:1;transform:none}.bar-i i{width:var(--w)}}

/* =====================================================================
   v2 · code-native layer (hero, SDLC, service pages, filters)
   ===================================================================== */
:root{--m:'JetBrains Mono',ui-monospace,Menlo,monospace;--g1:var(--v);--g2:var(--a)}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes ang{to{--ang:360deg}}@keyframes dash{to{stroke-dashoffset:-24}}@keyframes in{to{opacity:1;translate:0}}@keyframes prog{to{width:100%}}
.eyebrow{font:500 .85rem var(--m);color:var(--mut);display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-bottom:1.3rem}
.eyebrow code{font:inherit;color:var(--g1);background:color-mix(in srgb,var(--g1) 13%,transparent);padding:.3rem .7rem;border-radius:9px 9px 9px 2px}
.eyebrow span::before{content:"$ ";color:var(--a)}

/* hero: pointer spotlight grid + code stage */
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,var(--v) 1.3px,transparent 1.5px);background-size:28px 28px;opacity:.5;-webkit-mask:radial-gradient(340px circle at var(--hx,72%) var(--hy,38%),#000,transparent 70%);mask:radial-gradient(340px circle at var(--hx,72%) var(--hy,38%),#000,transparent 70%);pointer-events:none}
.hero .wrap{position:relative}
.stage::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--v) 38%,transparent),transparent 65%);filter:blur(30px)}
.orbit{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--v);stroke-opacity:.35;stroke-width:1.5;stroke-dasharray:3 9;overflow:visible}
.orbit circle:last-child{transform-box:fill-box;transform-origin:center;animation:spin 50s linear infinite reverse;stroke:var(--a)}
.ide{color:#E9E8FF;font-family:var(--m);border:1.5px solid transparent;border-radius:22px 22px 22px 6px;background:linear-gradient(#0D1021,#0D1021) padding-box,conic-gradient(from var(--ang),#2a2f5c 0 62%,var(--a),var(--v),#2a2f5c) border-box;animation:ang 6s linear infinite;box-shadow:0 40px 80px -30px rgba(20,16,80,.65);overflow:hidden}
.hero .ide{position:absolute;left:5%;right:1%;top:17%}
.ide .tb,.term .tb{display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;border-bottom:1px solid #2a2f5c;font:500 .74rem var(--m);color:#9A9EC2}
.tb i{width:10px;height:10px;border-radius:50%;background:#FF9E7A}.tb i:nth-child(2){background:#FFD36E}.tb i:nth-child(3){background:#1FD3B3}.tb span{margin-left:.6rem}
.ide pre{margin:0;padding:1rem 1.1rem;font:500 clamp(.66rem,1.5vw,.8rem)/1.75 var(--m);min-height:12.5em;white-space:pre-wrap;color:#E9E8FF}
.ide .k,.term .k{color:#B9A8FF}.ide .s,.term .s{color:var(--a)}.ide .n{color:#FFD36E}.ide .c{color:#6c7195}
.cur{display:inline-block;width:.55em;height:1.05em;background:var(--a);vertical-align:-.18em;animation:blink 1s steps(1) infinite}
.ide .ft{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 1rem;border-top:1px solid #2a2f5c;font:500 .7rem var(--m);color:#9A9EC2}
.ide .ok2{color:var(--a);opacity:0;translate:0 6px;transition:opacity .6s,translate .6s}.ide.done .ok2{opacity:1;translate:0}
.gl{width:82px;height:82px}
.gl b{display:grid;place-items:center;width:100%;height:100%;font:700 1.45rem var(--m);letter-spacing:-.06em;color:#fff;animation:bob 6s ease-in-out infinite}
.g1{top:1%;left:3%}.g1 b{background:linear-gradient(135deg,var(--v),var(--a));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.g2{top:4%;right:3%;width:70px;height:70px}.g2 b{background:var(--fg);color:var(--a);border-radius:30% 70% 60% 40%/50% 40% 60% 50%;animation-delay:-2s}
.g3{bottom:13%;left:-3%;width:74px;height:74px}.g3 b{background:var(--p);color:var(--fg);clip-path:polygon(20% 0,100% 0,80% 100%,0 100%);animation-delay:-3s}
.g4{bottom:1%;right:5%;width:68px;height:68px}.g4 b{background:var(--a);color:var(--fg);border-radius:50%;animation-delay:-1s}
.git{left:27%;bottom:3%;width:172px;background:var(--card);border:1px solid var(--line);border-radius:18px 18px 18px 5px;padding:.6rem .8rem;font:500 .66rem var(--m);color:var(--mut);box-shadow:0 20px 40px -20px rgba(20,16,80,.4)}
.git svg{display:block;width:100%;overflow:visible}.git path{fill:none;stroke:var(--v);stroke-width:2.5;stroke-dasharray:6 6;animation:dash 1.4s linear infinite}
.git circle{fill:var(--a)}.git .pl{transform-box:fill-box;transform-origin:center;animation:pulse 2s ease-in-out infinite}
@media(max-width:900px){.hero .ide{top:14%}.git{left:22%}}

/* SDLC */
.sdlc{background:var(--fg);color:var(--bg);overflow:hidden}
.sdlc::before{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--bg) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--bg) 7%,transparent) 1px,transparent 1px);background-size:52px 52px;-webkit-mask:linear-gradient(#000,transparent 80%);mask:linear-gradient(#000,transparent 80%)}
.sdlc>.wrap{position:relative}.sdlc .lead,.sdlc .eyebrow{color:color-mix(in srgb,var(--bg) 68%,transparent)}
.sd{display:grid;grid-template-columns:.75fr 1.25fr;gap:2.5rem;margin-top:3rem;align-items:start}
.pl-list{position:relative;display:flex;flex-direction:column;gap:.35rem}
.pl-list::before,.pl-list::after{content:"";position:absolute;left:27px;top:28px;width:2px;background:color-mix(in srgb,var(--bg) 18%,transparent);bottom:28px}
.pl-list::after{bottom:auto;height:calc((100% - 56px)*var(--k,0));background:linear-gradient(var(--v),var(--a));transition:height .7s cubic-bezier(.2,.9,.2,1)}
.ph{position:relative;z-index:1;display:flex;align-items:center;gap:1rem;background:none;border:0;color:inherit;font:700 1.2rem var(--d);letter-spacing:-.02em;text-align:left;padding:.4rem 0;cursor:pointer;opacity:.5;transition:opacity .3s,translate .4s cubic-bezier(.2,.9,.2,1)}
.ph code{flex:none;width:56px;height:56px;display:grid;place-items:center;font:700 .95rem var(--m);background:color-mix(in srgb,var(--bg) 10%,var(--fg));border:2px solid color-mix(in srgb,var(--bg) 22%,transparent);border-radius:18px 18px 18px 5px;transition:all .5s cubic-bezier(.2,.9,.2,1)}
.ph:hover{opacity:.85}.ph.dn{opacity:.85}.ph.dn code{border-color:var(--a);color:var(--a)}
.ph.on{opacity:1;translate:8px 0}.ph.on code{background:linear-gradient(135deg,var(--v),var(--a));border-color:transparent;color:#fff;border-radius:50% 50% 50% 8%;scale:1.1}
.loop{font:500 .78rem var(--m);color:var(--a);margin-top:1.2rem}
.term{background:linear-gradient(#0a0c1a,#0a0c1a) padding-box,conic-gradient(from var(--ang),#2a2f5c 0 62%,var(--a),var(--v),#2a2f5c) border-box;border:1.5px solid transparent;border-radius:28px 28px 28px 8px;animation:ang 6s linear infinite;color:#E9E8FF;font-family:var(--m);min-height:430px;position:relative;overflow:hidden}
.tbody{padding:1.8rem clamp(1.2rem,3vw,2.2rem) 4rem}
.tbody h3,.tbody p,.tbody li{opacity:0;translate:0 14px;animation:in .55s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:calc(var(--j,0)*.09s)}
.tbody .cm{color:#6c7195;font-size:.8rem}.tbody h3{font-size:clamp(2.2rem,5vw,3.4rem);margin:.4rem 0 .8rem;background:linear-gradient(90deg,#fff,var(--a));-webkit-background-clip:text;background-clip:text;color:transparent}
.tbody .ds{font:400 1.05rem/1.6 var(--b);color:#c9c8ea;max-width:46ch}
.tbody ul{list-style:none;padding:0;margin:1.4rem 0;display:grid;gap:.6rem}.tbody li{font-size:.92rem}.tbody li b{color:var(--a);margin-right:.7rem}
.tbody .cmt{font-size:.85rem;color:#9A9EC2;border-top:1px dashed #2a2f5c;padding-top:1rem}
.tprog{position:absolute;left:0;right:0;bottom:0;height:4px;background:#1a1e3e}.tprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--v),var(--a));animation:prog 7s linear forwards}
.sdlc:not(.live) .tprog i,.term:hover .tprog i{animation-play-state:paused}
@media(max-width:860px){.sd{grid-template-columns:1fr}.pl-list{flex-direction:row;overflow-x:auto;padding-bottom:.6rem;gap:.6rem}.pl-list::before,.pl-list::after{display:none}.ph span{display:none}.ph.on{translate:0}}

/* services hub filters + step 4 */
.chips{display:flex;gap:.6rem;flex-wrap:wrap}.chips+.sg{margin-top:1.8rem}
.chip{font:600 .85rem var(--m);padding:.6rem 1.1rem;border-radius:13px 13px 13px 3px;border:1px solid var(--line);background:var(--card);color:var(--mut);cursor:pointer;transition:all .3s cubic-bezier(.2,.9,.2,1)}
.chip::before{content:"#";color:var(--a);margin-right:.15rem}.chip:hover{color:var(--fg);translate:0 -3px}.chip.on{background:var(--v);border-color:var(--v);color:#fff}
.sv[hidden]{display:none}.sg.flt .sv{margin-top:0!important}
.steps.s4{grid-template-columns:repeat(4,1fr)}.st:nth-of-type(4) .n{background:linear-gradient(135deg,var(--v),var(--a));clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
@media(max-width:800px){.steps.s4{grid-template-columns:1fr}}

/* service detail pages */
.sph{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.sp h1{font-size:clamp(2.3rem,5.2vw,4.1rem);max-width:17ch}.sp .cta{margin-top:2rem}
.sart{position:relative;width:100%;max-width:440px;justify-self:center;padding:14px}
.sart .ide{border-radius:26px 26px 26px 6px}.sart .im{clip-path:none;border-radius:0;aspect-ratio:4/3}
.sart .gl.g2{top:-4%;right:-2%}.sart .gl.g4{bottom:-4%;left:-4%;right:auto}
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem;margin-top:3rem;counter-reset:d}
.dc{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:28px 28px 28px 8px;padding:1.5rem 1.6rem 1.8rem;transition:transform .4s cubic-bezier(.2,.9,.2,1),border-color .3s,box-shadow .3s}
.dc::before{counter-increment:d;content:"0" counter(d) " /";display:block;font:700 .82rem var(--m);color:var(--g1);margin-bottom:1.6rem}
.dc::after{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,var(--g1),var(--g2));transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.9,.2,1)}
.dc:hover{transform:translateY(-8px) rotate(-.6deg);border-color:var(--g1);box-shadow:0 30px 60px -30px var(--g1)}.dc:hover::after{transform:none}
.dc h3{font-size:1.3rem}.dc p{color:var(--mut);margin-top:.5rem;font-size:.95rem;line-height:1.5}
.bestfor{font:500 .95rem var(--m);margin-top:2.2rem;color:var(--mut);max-width:70ch}.bestfor code{color:var(--g1);font:inherit;font-weight:700}
.pills.mono span{font:500 .85rem var(--m);border-radius:10px 10px 10px 2px}.pills.mono span::before{content:"import ";color:var(--g1)}
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:2rem}
.rel a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem 1.4rem;border:1px solid var(--line);background:var(--card);border-radius:22px 22px 22px 6px;font:700 1.1rem var(--d);letter-spacing:-.02em;transition:transform .35s cubic-bezier(.2,.9,.2,1),border-color .3s}
.rel a::after{content:"→";color:var(--g1);transition:translate .3s}.rel a:hover{border-color:var(--g1);transform:translateY(-4px)}.rel a:hover::after{translate:6px 0}
@media(max-width:900px){.sph{grid-template-columns:1fr}.sart{max-width:360px}}
@media(prefers-reduced-motion:reduce){.tbody h3,.tbody p,.tbody li,.ide .ok2{opacity:1;translate:none}}

/* ---------- persistent theme switch ---------- */
.theme-switch{--toggle-size:12px;--container-width:5.625em;--container-height:2.5em;--container-radius:6.25em;--circle-container-diameter:3.375em;--sun-moon-diameter:2.125em;--circle-container-offset:calc((var(--circle-container-diameter) - var(--container-height))/2*-1);--transition:.5s cubic-bezier(0,-.02,.4,1.25);--circle-transition:.3s cubic-bezier(0,-.02,.35,1.17);display:inline-flex;position:relative;flex:none;cursor:pointer;line-height:1;font-size:var(--toggle-size)}
.theme-switch{padding-block:7px}
.theme-switch,.theme-switch *,.theme-switch *::before,.theme-switch *::after{box-sizing:border-box;margin:0;padding:0;font-size:var(--toggle-size)}
.theme-switch{padding-block:7px}
.theme-switch__checkbox{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.theme-switch__container{position:relative;display:block;width:var(--container-width);height:var(--container-height);overflow:hidden;border-radius:var(--container-radius);background:#3D7EAE;box-shadow:inset 0 .05em .18em #0004,0 .06em .12em #fff9;transition:var(--transition)}
.theme-switch__container::before{content:"";position:absolute;z-index:1;inset:0;border-radius:inherit;box-shadow:inset 0 .05em .19em #0004;pointer-events:none}
.theme-switch__clouds{position:absolute;bottom:-.625em;left:.312em;width:1.25em;height:1.25em;border-radius:50%;background:#F3FDFF;box-shadow:.937em .312em #F3FDFF,-.312em -.312em #AACADF,1.437em .375em #F3FDFF,.5em -.125em #AACADF,2.187em 0 #F3FDFF,1.25em -.062em #AACADF,2.937em .312em #F3FDFF,2em -.312em #AACADF,3.625em -.062em #F3FDFF,2.625em 0 #AACADF,4.5em -.312em #F3FDFF,3.375em -.437em #AACADF;transition:var(--transition)}
.theme-switch__stars-container{position:absolute;top:-100%;left:.312em;width:2.75em;color:#fff;transition:var(--transition)}
.theme-switch__stars-container svg{display:block;width:100%;height:auto}
.theme-switch__circle-container{position:absolute;top:var(--circle-container-offset);left:var(--circle-container-offset);display:flex;width:var(--circle-container-diameter);height:var(--circle-container-diameter);border-radius:var(--container-radius);background:#ffffff1a;box-shadow:inset 0 0 0 3.375em #ffffff1a,0 0 0 .625em #ffffff1a,0 0 0 1.25em #ffffff1a;pointer-events:none;transition:var(--circle-transition)}
.theme-switch__sun-moon-container{position:relative;z-index:2;width:var(--sun-moon-diameter);height:var(--sun-moon-diameter);margin:auto;overflow:hidden;border-radius:var(--container-radius);background:#ECCA2F;box-shadow:inset .062em .062em .062em #feffef9c,inset 0 -.062em .062em #a1872a;filter:drop-shadow(.062em .125em .125em #0004);transition:var(--transition)}
.theme-switch__moon{position:relative;width:100%;height:100%;transform:translateX(100%);border-radius:inherit;background:#C4C9D1;box-shadow:inset .062em .062em .062em #feffef9c,inset 0 -.062em .062em #969696;transition:var(--transition)}
.theme-switch__spot{position:absolute;top:.75em;left:.312em;width:.75em;height:.75em;border-radius:50%;background:#959DB1;box-shadow:inset 0 .031em .062em #0004}
.theme-switch__spot:nth-child(2){top:.937em;left:1.375em;width:.375em;height:.375em}
.theme-switch__spot:nth-child(3){top:.312em;left:.812em;width:.25em;height:.25em}
.theme-switch__checkbox:checked+.theme-switch__container{background:#1D1F2C}
.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__circle-container{left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter))}
.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__moon{transform:translateX(0)}
.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__clouds{bottom:-4.062em}
.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__stars-container{top:50%;transform:translateY(-50%)}
.theme-switch__checkbox:focus-visible+.theme-switch__container{outline:3px solid var(--v);outline-offset:4px}
.theme-switch__container,.theme-switch__clouds,.theme-switch__circle-container,.theme-switch__sun-moon-container,.theme-switch__moon,.theme-switch__stars-container{transition-duration:.5s}

/* Keep the mobile navigation legible in either page theme. */
.mm{background:var(--bg);color:var(--fg)}
header.o .logo{color:var(--fg)}
.mm .sub a{color:color-mix(in srgb,var(--fg) 72%,transparent)}
.mm .msvc .drop-trig{color:var(--fg)}
.mm .mf{color:var(--mut)}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media(max-width:360px){.bar{gap:.5rem;padding-inline:.65rem}.logo{font-size:.95rem;gap:.3rem}.logo svg{width:30px;height:30px}}