@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-greek.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ZLine Technologies — base, header, responsive rules */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:#0B1736;color:#17243D;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{max-width:100%}
a{color:#12BFAE;text-decoration:none}
a:hover{color:#55E5D4}
:focus-visible{outline:2px solid #55E5D4;outline-offset:3px;border-radius:8px}
input,select,textarea,button{font-family:inherit}
::selection{background:#12BFAE;color:#0B1736}
[hidden]{display:none!important}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:#12BFAE;color:#0B1736;padding:10px 16px;border-radius:10px;font-weight:700;transition:top .2s}
.skip:focus{top:12px}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(11,23,54,0);border-bottom:1px solid rgba(255,255,255,0);transition:background .35s ease,border-color .35s ease}
.site-header.solid{background:rgba(11,23,54,.9);border-bottom-color:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.progress{position:absolute;left:0;top:0;height:2px;width:100%;pointer-events:none}
#progress{display:block;height:100%;width:0;background:linear-gradient(90deg,#12BFAE,#55E5D4)}
.nav{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,40px);height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-weight:800;font-size:19px;letter-spacing:.14em;color:#fff}
.brand-name span{color:#12BFAE}
.brand-sub{font-size:8.5px;letter-spacing:.44em;color:#B9C6DC;margin-top:5px;font-weight:600}
.nav-desktop{display:none;align-items:center;gap:36px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-link{position:relative;padding:8px 0;font-size:15px;font-weight:500;color:#B9C6DC;transition:color .2s ease}
.nav-link:hover,.nav-link[aria-current="page"]{color:#fff}
.nav-bar{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:#12BFAE;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav-link[aria-current="page"] .nav-bar{transform:scaleX(1)}
.btn-nav{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;background:#12BFAE;color:#0B1736;font-size:14.5px;font-weight:600;white-space:nowrap;transition:background .2s ease,transform .2s ease}
.btn-nav:hover{background:#55E5D4;color:#0B1736}
.btn-nav:active{transform:scale(.97)}
.burger{width:48px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;cursor:pointer;padding:0;flex:none}
.burger span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .3s ease,opacity .2s ease}
.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:absolute;top:72px;left:0;right:0;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;background:#0B1736;border-bottom:1px solid rgba(255,255,255,.08);padding:12px clamp(20px,4vw,40px) 28px;opacity:0;transform:translateY(-10px);visibility:hidden;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.2,1),visibility .35s}
.menu-open .mobile-menu{opacity:1;transform:none;visibility:visible}
.m-links{display:flex;flex-direction:column}
.m-link{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-size:18px;font-weight:600;color:#B9C6DC;border-bottom:1px solid rgba(255,255,255,.07)}
.m-link[aria-current="page"]{color:#fff}
.m-dot{width:6px;height:6px;border-radius:50%;background:#12BFAE;opacity:0}
.m-link[aria-current="page"] .m-dot{opacity:1}
.m-cta{margin-top:20px;display:flex;align-items:center;justify-content:center;height:52px;border-radius:999px;background:#12BFAE;color:#0B1736;font-size:16px;font-weight:600}
.m-cta:hover{background:#55E5D4;color:#0B1736}
@media (min-width:960px){
  .nav-desktop{display:flex}
  .burger,.mobile-menu{display:none}
}

/* ---------- service-card preview frames ---------- */
:root{--mock-h:304px}
@media (max-width:560px){:root{--mock-h:350px}}

/* ---------- why-us: heading only sticks beside the list on wide screens ---------- */
@media (max-width:1060px){.why-sticky{position:static!important}}

/* ---------- hero visual scaling (set by JS) ---------- */
#hero-visual{--s:1}

/* ---------- approach timeline: horizontal on desktop, vertical on mobile ---------- */
:root{--tl-cols:repeat(4,minmax(0,1fr));--tl-gap:36px;--tl-top:21px;--tl-left:0;--tl-right:0;--tl-bottom:auto;--tl-w:auto;--tl-h:2px;--tl-padT:76px;--tl-padL:0}
@media (max-width:959px){
  :root{--tl-cols:1fr;--tl-gap:40px;--tl-top:0;--tl-left:21px;--tl-right:auto;--tl-bottom:0;--tl-w:2px;--tl-h:auto;--tl-padT:0;--tl-padL:72px}
  .tl-fill{background:linear-gradient(180deg,#12BFAE,#55E5D4)!important}
}

/* ---------- solution tabs ---------- */
.sol-tab{text-align:left;cursor:pointer;width:100%;padding:16px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:transparent;color:#fff;display:grid;grid-template-columns:32px 1fr;gap:4px 10px;transition:background .25s ease,border-color .25s ease}
.sol-tab:hover{border-color:rgba(85,229,212,.4)}
.sol-tab[aria-selected="true"]{background:rgba(18,191,174,.1);border-color:rgba(85,229,212,.45)}
.sol-num{font-size:12.5px;font-weight:700;color:#8FA0BD;padding-top:3px}
.sol-label{font-size:16.5px;font-weight:600;color:#DCE4F0}
.sol-tab[aria-selected="true"] .sol-num{color:#55E5D4}
.sol-tab[aria-selected="true"] .sol-label{color:#fff}
.sol-desc{display:none;font-size:14.5px;line-height:1.55;color:#B9C6DC;font-weight:400;grid-column:2}
.sol-tab[aria-selected="true"] .sol-desc{display:block}

@media (max-width:560px){
  .sol-chip{display:none!important}
  .sol-row{grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr) minmax(0,.8fr) auto!important;gap:8px!important;padding:12px!important;font-size:12.5px!important}
  .sol-head{font-size:10px!important;letter-spacing:.04em!important}
  .sol-row>span{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}
  .sol-row>span:last-child>span{font-size:10.5px!important;padding:3px 8px!important}
}

/* ---------- form ---------- */
#enquiry-form .err{display:block}
#enquiry-form [aria-invalid="true"]{border-color:#D14343!important}

/* ---------- small-screen refinements ---------- */
@media (max-width:480px){
  .brand-name{font-size:17px}
  .brand svg{width:32px;height:32px}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{.site-header,.skip{display:none}}


@supports not (overflow:clip){main>section,footer{overflow:hidden!important}}

@media (hover:hover){[data-s1]:hover{background:#55E5D4 !important;color:#0B1736 !important;transform:translateY(-1px) !important}}
[data-s2]:active{transform:scale(.97) !important}
@media (hover:hover){[data-s3]:hover{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.4) !important;color:#FFFFFF !important}}
@media (hover:hover){[data-s4]:hover{transform:translateY(-4px) !important;box-shadow:0 34px 60px -34px rgba(11,23,54,.4) !important;border-color:#BDE7E1 !important}}
@media (hover:hover){[data-s5]:hover{color:#0B1736 !important}}
@media (hover:hover){[data-s6]:hover{background:#122B55 !important;color:#FFFFFF !important;transform:translateY(-1px) !important}}
@media (hover:hover){[data-s7]:hover{background:rgba(255,255,255,.07) !important;border-color:rgba(255,255,255,.45) !important;color:#FFFFFF !important}}
@media (hover:hover){[data-s8]:hover{color:#0A7F74 !important}}
@media (hover:hover){[data-s9]:hover{background:#55E5D4 !important;color:#0B1736 !important}}
@media (hover:hover){[data-s10]:hover{border-color:#12BFAE !important;color:#17243D !important}}
@media (hover:hover){[data-s11]:hover{background:#122B55 !important;color:#FFFFFF !important}}
@media (hover:hover){[data-s12]:hover{border-color:#12BFAE !important}}
[data-s13]:focus{border-color:#12BFAE !important;box-shadow:0 0 0 4px rgba(18,191,174,.15) !important}
@media (hover:hover){[data-s14]:hover{background:#122B55 !important}}
[data-s15]:active{transform:scale(.98) !important}
@media (hover:hover){[data-s16]:hover{color:#55E5D4 !important}}