/* al-nuqta.iq — homepage prototype styles (mobile-first, container queries) */
.site{container-type:inline-size;container-name:site;font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;color:#14224A;background:#F5F7FB;text-align:start;line-height:1.6}
.site *{box-sizing:border-box}
.site a{color:inherit;text-decoration:none}
.site h1,.site h2,.site h3{font-family:'Alexandria',sans-serif;margin:0}
.ms{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
.wrap{max-width:1200px;margin:0 auto;padding-inline:20px}
.eyebrow{color:#8F6316;font-weight:600;font-size:14px;letter-spacing:.2px}
.h2{font-weight:700;font-size:clamp(26px,4.2cqi,42px);line-height:1.3}
.lead{font-size:clamp(15px,1.6cqi,18px);color:#4A5578;line-height:1.8}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:14px;font-weight:700;font-size:15px;border:0;cursor:pointer;font-family:inherit;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:active{transform:scale(.97)}
.btn-gold{background:#E2A63C;color:#14224A}
.btn-gold:hover{box-shadow:0 10px 24px rgba(226,166,60,.35);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-navy{background:#14224A;color:#fff}

/* header */
.hdr{position:sticky;top:0;z-index:30;background:rgba(14,27,61,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.hdr-in{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:46px;height:auto;display:block}
.brand b{font-family:'Alexandria',sans-serif;font-size:17px}
.brand small{display:block;font-size:11px;color:#C9D2E8;font-weight:400}
.nav{display:flex;gap:4px;flex:1}
.nav button,.nav a{background:none;border:0;color:#fff;font:inherit;font-weight:500;font-size:15px;padding:10px 12px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.nav button:hover,.nav a:hover,.nav .on{background:rgba(255,255,255,.08)}
.hdr-cta{display:flex;gap:8px}
.burger{display:none;margin-inline-start:auto;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:none;color:#fff;cursor:pointer;align-items:center;justify-content:center}
.mega{position:absolute;inset-inline:0;top:100%;background:#fff;color:#14224A;border-bottom:1px solid #E4E9F2;box-shadow:0 24px 48px rgba(14,27,61,.18);animation:drop .25s ease}
.mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:24px 20px}
.mega a{display:flex;gap:12px;padding:14px;border-radius:14px}
.mega a:hover{background:#F5F7FB}
.mega .ic{width:40px;height:40px;border-radius:12px;background:#F6E7C8;color:#8F6316;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mega b{display:block;font-size:15px}
.mega span.d{font-size:13px;color:#4A5578}
.sheet{position:fixed;inset:0;z-index:60;background:#0E1B3D;color:#fff;display:flex;flex-direction:column;animation:slide .3s ease;overflow-y:auto}
.sheet-h{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.sheet-b{padding:12px 20px 120px;display:flex;flex-direction:column;gap:6px}
.sheet-b .grp{font-size:13px;color:#E2A63C;font-weight:600;margin-top:16px}
.sheet-b a.it{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 12px;border-radius:14px;background:rgba(255,255,255,.05);font-size:16px}

/* hero */
.hero{background:#0E1B3D;color:#fff;overflow:hidden;position:relative}
.hero-in{padding-top:56px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.hero .logo{width:130px;height:auto;animation:up .8s ease both}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(226,166,60,.14);color:#F6E7C8;font-size:13px;font-weight:500;animation:up .8s .1s ease both}
.hero h1{font-weight:800;font-size:clamp(34px,6.4cqi,68px);line-height:1.22;max-width:960px;animation:up .9s .2s ease both}
.hl{color:#E2A63C;position:relative;white-space:nowrap}
.hl::after{content:'';position:absolute;inset-inline:0;bottom:-6px;height:6px;border-radius:6px;background:#E2A63C;transform-origin:right;animation:grow 1.2s .9s ease both}
.hero p.sub{font-size:clamp(15px,1.8cqi,19px);color:#C9D2E8;max-width:680px;line-height:1.8;animation:up .9s .3s ease both}
.hero .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;animation:up .9s .4s ease both}
.seek{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:10px;width:100%;animation:up .9s .5s ease both}
.seek-l{font-size:13px;color:#C9D2E8}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:14px;cursor:pointer;transition:background .2s,border-color .2s}
.chip:hover{background:rgba(226,166,60,.15);border-color:#E2A63C}
.globe{position:relative;width:100%;max-width:1400px;margin:8px auto 0;animation:float 9s ease-in-out infinite}
.globe img{width:100%;height:auto;display:block}
.pulse{position:absolute;left:50.3%;top:64.5%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 18px 6px rgba(226,166,60,.8)}
.pulse::before,.pulse::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid #E2A63C;animation:ring 2.6s ease-out infinite}
.pulse::after{animation-delay:1.3s}

/* marquee */
.marq{background:#fff;border-block:1px solid #E4E9F2;overflow:hidden;overflow:clip;contain:paint;direction:ltr;max-width:100%}
.marq-t{display:flex;gap:40px;width:max-content;padding:18px 0;animation:marq 38s linear infinite}
.marq:hover .marq-t{animation-play-state:paused}
.marq-i{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:#14224A;white-space:nowrap;direction:rtl}
.marq-i .ms{color:#8F6316;font-size:20px}
.marq-logo{width:120px;height:40px;border-radius:10px;border:1px dashed #C7D0E0;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#4A5578;direction:rtl}

/* sections */
.sec{padding-block:clamp(56px,8cqi,104px)}
.sec-h{display:flex;flex-direction:column;gap:10px;max-width:760px;margin-bottom:32px}
.reveal{}

/* sector explorer */
.sx{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}
.sx-tabs{display:flex;flex-direction:column;gap:6px;position:sticky;top:88px}
.sx-tab{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 16px;border-radius:16px;background:#fff;border:1px solid #E4E9F2;font:inherit;font-weight:600;font-size:15px;color:#14224A;cursor:pointer;text-align:start;transition:all .2s ease}
.sx-tab .ms{color:#8F6316}
.sx-tab:hover{border-color:#E2A63C}
.sx-tab.on{background:#14224A;color:#fff;border-color:#14224A;box-shadow:0 12px 28px rgba(20,34,74,.18)}
.sx-tab.on .ms{color:#E2A63C}
.sx-panel{background:#fff;border:1px solid #E4E9F2;border-radius:24px;padding:clamp(20px,3cqi,40px);display:flex;flex-direction:column;gap:22px;animation:fade .35s ease}
.sx-panel h3{font-size:clamp(22px,3cqi,32px);font-weight:700;line-height:1.35}
.pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pt{display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:14px;background:#F5F7FB;font-size:14px;line-height:1.6}
.pt .ms{color:#1F8A5B;font-size:20px}
.jr-t{font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px}
.jr{display:flex;gap:0;counter-reset:st;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.st{flex:1 0 66px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;position:relative;scroll-snap-align:start;font-size:13px;font-weight:600}
.st::before{content:'';position:absolute;top:21px;inset-inline-end:50%;width:100%;height:2px;background:linear-gradient(to left,#E2A63C,#E2A63C);opacity:.45}
.st:first-child::before{display:none}
.st i{width:44px;height:44px;border-radius:50%;background:#14224A;color:#E2A63C;display:flex;align-items:center;justify-content:center;font-style:normal;font-family:'Alexandria',sans-serif;font-weight:700;position:relative;z-index:1;box-shadow:0 0 0 6px #fff}
.sx-cta{display:flex;flex-wrap:wrap;gap:10px}

/* platform */
.pf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px;align-items:stretch}
.pf-info{background:#14224A;color:#fff;border-radius:24px;padding:clamp(22px,3cqi,40px);display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.pf-info::after{content:'';position:absolute;width:280px;height:280px;border-radius:50%;border:1px solid rgba(226,166,60,.25);left:-90px;bottom:-110px}
.core{display:flex;flex-wrap:wrap;gap:6px}
.core span{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);font-size:13px}
.pf-sel{margin-top:auto;padding:18px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(226,166,60,.35);display:flex;gap:14px;align-items:flex-start;animation:fade .3s ease}
.pf-sel .ic{width:48px;height:48px;border-radius:14px;background:#E2A63C;color:#14224A;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-content:start}
.app{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border-radius:18px;background:#fff;border:1px solid #E4E9F2;font:inherit;font-size:13px;font-weight:600;color:#14224A;cursor:pointer;text-align:center;transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.app .ic{width:52px;height:52px;border-radius:16px;background:#F6E7C8;color:#8F6316;display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.app:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(20,34,74,.08)}
.app.on{border-color:#E2A63C;box-shadow:0 0 0 3px rgba(226,166,60,.25)}
.app.on .ic{background:#14224A;color:#E2A63C}
.app.new::after{content:'جديد';font-size:10px;color:#8F6316;background:#F6E7C8;border-radius:999px;padding:1px 8px;margin-top:-4px}

/* medcore spotlight */
.spot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:center;background:#0E1B3D;color:#fff;border-radius:28px;padding:clamp(22px,4cqi,56px);overflow:hidden}
.win{border-radius:16px;background:#F5F7FB;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.35);transform:perspective(1200px) rotateY(-8deg);transition:transform .5s ease}
.win:hover{transform:none}
.win-b{height:30px;background:#E4E9F2;display:flex;gap:6px;align-items:center;padding:0 12px;direction:ltr}
.win-b i{width:9px;height:9px;border-radius:50%;background:#C7D0E0}
.win-c{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;color:#4A5578;font-size:14px;text-align:center;padding:12px}
.wings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wing{padding:14px;border-radius:14px;background:rgba(255,255,255,.07)}
.wing b{font-family:'Alexandria',sans-serif;font-size:26px;color:#E2A63C;display:block}

/* before after */
.ba-sw{display:inline-flex;padding:5px;border-radius:999px;background:#fff;border:1px solid #E4E9F2;gap:4px}
.ba-sw button{min-height:44px;padding:0 20px;border-radius:999px;border:0;background:none;font:inherit;font-weight:600;font-size:15px;color:#4A5578;cursor:pointer;transition:all .25s ease}
.ba-sw button.on{background:#14224A;color:#fff}
.ba-box{margin-top:20px;border-radius:24px;min-height:340px;position:relative;overflow:hidden}
.mess{background:#EEF1F6;border:1px dashed #C7D0E0;height:340px;position:relative;animation:fade .35s ease}
.mess>span{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:14px;background:#fff;border:1px dashed #B8C2D6;font-size:13px;font-weight:600;color:#4A5578;white-space:nowrap;animation:jitter 3s ease-in-out infinite}
.mess>span.bad{border-color:#C0392B;color:#9B2C1F}
.order{background:#14224A;color:#fff;padding:20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;animation:fade .35s ease}
.lane{background:rgba(255,255,255,.06);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px}
.lane h4{margin:0;font-family:'Alexandria',sans-serif;font-size:15px;color:#E2A63C;display:flex;align-items:center;gap:6px}
.lane>span{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.07);font-size:13px}
.lane>span .ms{color:#3CCB8A;font-size:18px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:14px}
.bx{border-radius:22px;padding:22px;background:#fff;border:1px solid #E4E9F2;display:flex;flex-direction:column;gap:10px;transition:transform .25s ease,box-shadow .25s ease}
.bx:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(20,34,74,.08)}
.bx .ms{font-size:30px;color:#8F6316}
.bx b{font-family:'Alexandria',sans-serif;font-size:18px}
.bx p{margin:0;font-size:14px;color:#4A5578;line-height:1.7}
.bx.w2{grid-column:span 2}
.bx.h2r{grid-row:span 2}
.bx.dark{background:#14224A;color:#fff;border-color:#14224A}
.bx.dark p{color:#C9D2E8}
.bx.gold{background:#F6E7C8;border-color:#F6E7C8}
.slogan{font-family:'Alexandria',sans-serif;font-weight:800;font-size:clamp(26px,3.6cqi,40px);line-height:1.3}
.slogan em{font-style:normal;color:#E2A63C}

/* rails (horizontal scroll) */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
.card{border-radius:20px;background:#fff;border:1px solid #E4E9F2;overflow:hidden;display:flex;flex-direction:column}
.card .ph{aspect-ratio:16/10;background:#EEF2F8;display:flex;align-items:center;justify-content:center;color:#4A5578;font-size:13px;text-align:center;padding:10px}
.card .bd{padding:18px;display:flex;flex-direction:column;gap:6px}
.inf{padding:22px;border-radius:20px;background:#fff;border:1px solid #E4E9F2;display:flex;flex-direction:column;gap:10px;min-height:180px}
.inf .ms{width:48px;height:48px;border-radius:14px;background:#14224A;color:#E2A63C;display:flex;align-items:center;justify-content:center}
.rev{padding:22px;border-radius:20px;background:#fff;border:1px solid #E4E9F2;display:flex;flex-direction:column;gap:12px;margin:0}
.stars{color:#E2A63C;display:flex;gap:2px}

/* closing + footer */
.close{background:#14224A;color:#fff;border-radius:28px;padding:clamp(24px,4cqi,56px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:center;position:relative;overflow:hidden}
.close::before{content:'';position:absolute;width:420px;height:420px;border-radius:50%;border:1px solid rgba(226,166,60,.2);left:-140px;top:-160px}
.acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.act{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 16px;border-radius:14px;border:1px solid rgba(255,255,255,.25);font-weight:600;font-size:15px;transition:background .2s}
.act:hover{background:rgba(255,255,255,.08)}
.act.g{background:#E2A63C;color:#14224A;border-color:#E2A63C}
.ftr{background:#0E1B3D;color:#C9D2E8;padding:56px 0 110px;font-size:14px}
.ftr-g{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:28px}
.ftr strong{color:#fff;display:block;margin-bottom:8px}
.ftr a{display:block;line-height:2.1;color:#C9D2E8}
.ftr a:hover{color:#E2A63C}

/* floating + mobile bar */
.fab{position:fixed;inset-inline-end:20px;bottom:20px;z-index:40;width:58px;height:58px;border-radius:50%;background:#E2A63C;color:#14224A;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(14,27,61,.3);animation:bob 3s ease-in-out infinite}
.mbar{display:none;position:fixed;inset-inline:0;bottom:0;z-index:50;background:#fff;border-top:1px solid #E4E9F2;padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:8px;box-shadow:0 -8px 24px rgba(14,27,61,.08)}
.mbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border-radius:12px;font-size:12px;font-weight:600;color:#14224A}
.mbar a.g{background:#E2A63C}
.mbar a.w{background:#E7F7EE;color:#14632F}

/* shared header (component) */
.hdr-fixed{position:fixed;top:0;inset-inline:0}
.hdr-space{height:68px}
.nav .cur{color:#E2A63C}

/* inner pages */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:#C9D2E8;animation:up .7s ease both}
.crumbs a:hover{color:#E2A63C}
.phero{background:#0E1B3D;color:#fff;position:relative;overflow:hidden}
.phero::after{content:'';position:absolute;width:560px;height:560px;border-radius:50%;border:1px solid rgba(226,166,60,.18);left:-200px;bottom:-300px;pointer-events:none}
.phero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:center;padding-block:clamp(36px,6cqi,88px);position:relative;z-index:1}
.phero-tx{display:flex;flex-direction:column;gap:16px}
.phero h1{font-weight:800;font-size:clamp(30px,4.6cqi,54px);line-height:1.25;animation:up .8s .1s ease both}
.phero p.sub{color:#C9D2E8;font-size:clamp(15px,1.7cqi,18px);line-height:1.8;margin:0;animation:up .8s .2s ease both}
.phero .ctas{display:flex;flex-wrap:wrap;gap:10px;animation:up .8s .3s ease both}
.phero .win{animation:up 1s .3s ease both}
.tag{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(226,166,60,.16);color:#F6E7C8;font-size:13px;font-weight:600}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pair{border-radius:20px;overflow:hidden;border:1px solid #E4E9F2;background:#fff;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.pair:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(20,34,74,.08)}
.pair .b{padding:16px 18px;color:#4A5578;font-size:14px;display:flex;gap:8px;align-items:flex-start;line-height:1.7}
.pair .b .ms{color:#B0413E;font-size:20px}
.pair .a{padding:16px 18px;background:#F6E7C8;font-size:15px;font-weight:600;display:flex;gap:8px;align-items:flex-start;line-height:1.7;flex:1}
.pair .a .ms{color:#1F8A5B;font-size:20px}
.steps2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:20px;align-items:start}
.stl{display:flex;flex-direction:column;gap:8px}
.stb{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 14px;border-radius:14px;border:1px solid #E4E9F2;background:#fff;font:inherit;font-weight:600;font-size:15px;color:#14224A;cursor:pointer;text-align:start;transition:all .2s ease}
.stb i{width:32px;height:32px;border-radius:50%;background:#F6E7C8;color:#8F6316;display:flex;align-items:center;justify-content:center;font-style:normal;font-family:'Alexandria',sans-serif;font-size:14px;flex-shrink:0}
.stb:hover{border-color:#E2A63C}
.stb.on{background:#14224A;color:#fff;border-color:#14224A}
.stb.on i{background:#E2A63C;color:#14224A}
.std{background:#fff;border:1px solid #E4E9F2;border-radius:22px;padding:clamp(20px,3cqi,32px);display:flex;flex-direction:column;gap:14px;position:sticky;top:90px}
.std .num{font-family:'Alexandria',sans-serif;font-weight:800;font-size:56px;line-height:1;color:#F6E7C8}
.std h3{font-size:24px}
.prog{height:6px;border-radius:6px;background:#E4E9F2;overflow:hidden}
.prog span{display:block;height:100%;background:#E2A63C;border-radius:6px;transition:width .35s ease}
.std-nav{display:flex;gap:8px;margin-top:auto}
.mchips{display:flex;flex-wrap:wrap;gap:8px}
.mchip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid #E4E9F2;font:inherit;font-size:14px;font-weight:600;color:#14224A;cursor:pointer;transition:border-color .2s,background .2s}
.mchip .ms{color:#8F6316;font-size:20px}
.mchip:hover{border-color:#E2A63C}
.mchip.on{background:#14224A;color:#fff;border-color:#14224A}
.mchip.on .ms{color:#E2A63C}
.faq{display:flex;flex-direction:column;gap:10px}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:60px;padding:0 18px;border-radius:16px;background:#fff;border:1px solid #E4E9F2;font:inherit;font-weight:600;font-size:16px;color:#14224A;cursor:pointer;text-align:start}
.faq-q .ms{transition:transform .25s ease;color:#8F6316}
.faq-q.on .ms{transform:rotate(180deg)}
.faq-a{padding:4px 18px 16px;color:#4A5578;font-size:15px;line-height:1.8;animation:fade .25s ease}
.band{background:#14224A;color:#fff;border-radius:28px;padding:clamp(24px,4cqi,48px);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;position:relative;overflow:hidden}
.band::before{content:'';position:absolute;width:360px;height:360px;border-radius:50%;border:1px solid rgba(226,166,60,.2);left:-120px;top:-150px}
.band>*{position:relative}
.ph{background:#EEF2F8;display:flex;align-items:center;justify-content:center;color:#4A5578;font-size:13px;text-align:center;padding:10px}
.lgs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.lg{height:96px;border-radius:16px;border:1px dashed #C7D0E0;background:#fff;display:flex;align-items:center;justify-content:center;color:#4A5578;font-size:12px;transition:transform .2s ease}
.lg:hover{transform:scale(1.03)}
.form{background:#fff;border:1px solid #E4E9F2;border-radius:24px;padding:clamp(20px,3cqi,36px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:14px;font-weight:600}
.field input,.field select,.field textarea{font:inherit;font-size:16px;min-height:52px;padding:10px 14px;border-radius:12px;border:1px solid #C7D0E0;background:#F9FAFC;color:#14224A;width:100%}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid #E2A63C;outline-offset:1px;border-color:#E2A63C}
.hint{font-size:13px;color:#4A5578}
.cinfo{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:20px;background:#fff;border:1px solid #E4E9F2;transition:border-color .2s}
.cinfo:hover{border-color:#E2A63C}
.cinfo .ic{width:48px;height:48px;border-radius:14px;background:#14224A;color:#E2A63C;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.role{background:#fff;border:1px solid #E4E9F2;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
.role-h{display:flex;align-items:center;gap:8px;font-weight:700;font-family:'Alexandria',sans-serif}
.perm{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px}
.tgl{width:52px;height:30px;border-radius:999px;background:#C7D0E0;border:0;position:relative;cursor:pointer;transition:background .2s ease;flex-shrink:0}
.tgl::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:inset-inline-start .2s ease}
.tgl.on{background:#1F8A5B}
.tgl.on::after{inset-inline-start:25px}
.chat{background:#fff;border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:10px;color:#14224A}
.bub{max-width:85%;padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.7}
.bub.me{align-self:flex-start;background:#E2A63C;color:#14224A;border-end-start-radius:6px}
.bub.ai{align-self:flex-end;background:#F5F7FB;border:1px solid #E4E9F2;border-end-end-radius:6px}
.typing{align-self:flex-end;display:inline-flex;gap:4px;padding:12px 16px;border-radius:18px;background:#F5F7FB}
.typing i{width:7px;height:7px;border-radius:50%;background:#8F6316;animation:dot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
.dq{position:relative;border-radius:28px;background:#fff;border:1px solid #E4E9F2;padding:clamp(24px,4cqi,56px);overflow:hidden;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;align-items:center}
.dq blockquote{margin:0;font-family:'Alexandria',sans-serif;font-weight:700;font-size:clamp(20px,2.6cqi,30px);line-height:1.5}
.dq blockquote .ms{color:#E2A63C;font-size:44px;display:block;margin-bottom:8px}
.tl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:t}
.tl>div{position:relative;padding:22px;border-radius:20px;background:#fff;border:1px solid #E4E9F2;display:flex;flex-direction:column;gap:8px}
.tl>div::before{counter-increment:t;content:'0' counter(t);font-family:'Alexandria',sans-serif;font-weight:800;font-size:34px;color:#F6E7C8;line-height:1}
.cert{background:#fff;border:1px solid #E4E9F2;border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:10px;transition:transform .25s ease,box-shadow .25s ease}
.cert:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(20,34,74,.08)}
.cert .seal{width:64px;height:64px;border-radius:50%;background:#14224A;color:#E2A63C;display:flex;align-items:center;justify-content:center;font-family:'Alexandria',sans-serif;font-weight:800;font-size:13px;box-shadow:0 0 0 6px #F6E7C8}
.cert .mean{margin-top:auto;padding:12px 14px;border-radius:14px;background:#F5F7FB;font-size:14px;line-height:1.7}
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid #E4E9F2;border-radius:18px;overflow:hidden;font-size:14px}
.tbl th,.tbl td{padding:14px 16px;text-align:start;border-bottom:1px solid #E4E9F2}
.tbl th{background:#14224A;color:#fff;font-weight:600}
.tbl tr:last-child td{border-bottom:0}
.tblw{overflow-x:auto;border-radius:18px}
.wtabs{display:inline-flex;padding:5px;border-radius:999px;background:#fff;border:1px solid #E4E9F2;gap:4px;flex-wrap:wrap}
.wtabs button{min-height:44px;padding:0 18px;border-radius:999px;border:0;background:none;font:inherit;font-weight:600;font-size:15px;color:#4A5578;cursor:pointer;transition:all .25s ease}
.wtabs button.on{background:#14224A;color:#fff}
.mlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;animation:fade .3s ease}
.mlist span{display:flex;align-items:center;gap:10px;padding:14px;border-radius:14px;background:#fff;border:1px solid #E4E9F2;font-weight:600;font-size:14px}
.mlist span .ms{color:#8F6316}
.inf-big{font-family:'Alexandria',sans-serif;font-weight:800;font-size:56px;color:#E2A63C;line-height:1}

/* completed projects */
.mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;animation:up 1s .3s ease both}
.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:18px;display:block}
.mosaic .big{grid-column:1/-1;aspect-ratio:16/8}
.mosaic .sm{aspect-ratio:4/3}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat{background:#fff;border:1px solid #E4E9F2;border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:6px}
.stat b{font-family:'Alexandria',sans-serif;font-weight:800;font-size:clamp(30px,4cqi,44px);color:#14224A;line-height:1.1}
.stat span{font-size:14px;color:#4A5578;line-height:1.6}
@property --n{syntax:'<integer>';initial-value:0;inherits:false}
.count{animation:count 1.8s ease-out both;counter-reset:n var(--n)}
.count::after{content:counter(n)}
@keyframes count{from{--n:0}to{--n:var(--to)}}
.chain{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.chain>div{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-weight:600;font-size:14px;position:relative}
.chain .ic{width:58px;height:58px;border-radius:50%;background:#14224A;color:#E2A63C;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px #F6E7C8;position:relative;z-index:1}
.chain>div:not(:last-child)::after{content:'';position:absolute;top:28px;inset-inline-start:calc(50% + 36px);width:calc(100% - 62px);height:2px;background:repeating-linear-gradient(to left,#E2A63C 0 8px,transparent 8px 14px);background-size:14px 2px;animation:dash 1s linear infinite}
@keyframes dash{to{background-position:-14px 0}}
.feat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-radius:28px;overflow:hidden;background:#0E1B3D;color:#fff}
.feat img{width:100%;height:100%;object-fit:cover;display:block;min-height:320px}
.feat-b{padding:clamp(22px,4cqi,48px);display:flex;flex-direction:column;gap:14px}
.res{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.7}
.res .ms{color:#E2A63C;font-size:22px}
.pcard{border-radius:22px;overflow:hidden;background:#fff;border:1px solid #E4E9F2;display:flex;flex-direction:column;cursor:pointer;text-align:start;font:inherit;color:#14224A;padding:0;transition:transform .25s ease,box-shadow .25s ease;animation:fade .35s ease}
.pcard:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(20,34,74,.12)}
.pcard .im{position:relative;aspect-ratio:16/9;overflow:hidden}
.pcard .im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.pcard:hover .im img{transform:scale(1.06)}
.pcard .chipc{position:absolute;top:12px;inset-inline-start:12px;padding:6px 12px;border-radius:999px;background:rgba(14,27,61,.85);color:#F6E7C8;font-size:12px;font-weight:600}
.pcard .bd{padding:18px;display:flex;flex-direction:column;gap:8px}
.pcard .more{color:#8F6316;font-weight:600;font-size:14px;margin-top:auto}
.modal{position:fixed;inset:0;z-index:70;background:rgba(14,27,61,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .25s ease}
.modal-c{background:#fff;border-radius:24px;max-width:860px;width:100%;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;position:relative}
.modal-c img{width:100%;aspect-ratio:16/8;object-fit:cover;display:block}
.modal-x{position:absolute;top:12px;inset-inline-end:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(14,27,61,.85);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-b{padding:clamp(18px,3cqi,32px);display:flex;flex-direction:column;gap:12px}
.clients{display:flex;flex-wrap:wrap;gap:10px}
.clients span{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid #E4E9F2;font-weight:600;font-size:14px}
.clients span .ms{color:#8F6316}
.art{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:20px;background:#fff;border:1px solid #E4E9F2;transition:transform .25s ease,box-shadow .25s ease}
.art:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(20,34,74,.08)}
.art b{font-family:'Alexandria',sans-serif;font-size:17px;line-height:1.5}

/* motion */
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ring{from{transform:scale(.6);opacity:1}to{transform:scale(3.2);opacity:0}}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes jitter{0%,100%{transform:rotate(var(--r,0deg))}50%{transform:rotate(var(--r,0deg)) translateY(-4px)}}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes rv{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
.reveal{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
}
@media (prefers-reduced-motion: reduce){.site *,.site *::before,.site *::after{animation:none !important;transition:none !important}}

/* tablet */
@container site (max-width: 1000px){
.nav,.hdr-cta{display:none}
.burger{display:inline-flex}
.sx{grid-template-columns:minmax(0,1fr)}
.sx-tabs{position:static;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.sx-tab{flex:0 0 auto;min-height:48px;scroll-snap-align:start;white-space:nowrap}
.pf,.spot,.close{grid-template-columns:minmax(0,1fr)}
.win{transform:none}
.bento{grid-template-columns:repeat(2,minmax(0,1fr))}
.ftr-g{grid-template-columns:repeat(2,minmax(0,1fr))}
.mega{display:none}
}
/* phone */
@container site (max-width: 640px){
.wrap{padding-inline:16px}
.brand small{display:none}
.hero-in{padding-top:36px;gap:14px}
.hero .logo{width:96px}
.hero .ctas{flex-direction:column;width:100%}
.hero .ctas .btn{width:100%}
.chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;width:100%;padding-bottom:4px;scroll-snap-type:x mandatory}
.chip{flex:0 0 auto;scroll-snap-align:start}
.globe{width:160%;margin-inline:-30%}
.pts{grid-template-columns:minmax(0,1fr)}
.jr{flex-direction:column;overflow:visible;gap:0}
.st{flex-direction:row;text-align:start;gap:14px;padding:6px 0;flex:0 0 auto}
.st::before{top:-50%;inset-inline-start:21px;inset-inline-end:auto;width:2px;height:100%;background:#E2A63C}
.apps{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.app{padding:12px 4px;font-size:12px;border-radius:16px}
.app .ic{width:46px;height:46px}
.order{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:8px}
.mess{height:380px}
.bento{grid-template-columns:minmax(0,1fr)}
.bx.w2{grid-column:auto}
.bx.h2r{grid-row:auto}
.acts{grid-template-columns:minmax(0,1fr)}
.ftr-g{grid-template-columns:minmax(0,1fr)}
.fab{display:none}
.mbar{display:flex}
.wings{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@container site (max-width: 1000px){
.phero-in,.steps2,.dq{grid-template-columns:minmax(0,1fr)}
.grid4,.roles,.tl{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
.lgs{grid-template-columns:repeat(3,minmax(0,1fr))}
.std{position:static}
.mlist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container site (max-width: 640px){
.grid2,.grid3,.form,.roles,.tl{grid-template-columns:minmax(0,1fr)}
.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
.lgs{grid-template-columns:repeat(2,minmax(0,1fr))}
.mlist{grid-template-columns:minmax(0,1fr)}
.stl{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.stb{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
.phero .ctas .btn{flex:1 1 100%}
.std .num{font-size:44px}
.hdr-space{height:68px}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.chain{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}
.chain>div::after{display:none}
.feat{grid-template-columns:minmax(0,1fr)}
.feat img{min-height:200px}
.modal{align-items:flex-end;padding:0}
.modal-c{border-radius:24px 24px 0 0;max-height:92vh}
}
@container site (max-width: 1000px){
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.chain{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}
.chain>div::after{display:none}
}

/* =========================================================
   v2 — creative motion system + engineering components
   ========================================================= */
.site a.btn-navy,.site .btn-navy{color:#fff}
.site a.btn-gold,.site .btn-gold{color:#14224A}
.site a.btn-ghost{color:#fff}
@property --ga{syntax:'<angle>';initial-value:0deg;inherits:false}
@property --sh{syntax:'<percentage>';initial-value:0%;inherits:false}

/* buttons: light sweep + arrow nudge */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-gold::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);transform:translateX(120%);transition:transform .7s ease}
.btn-gold:hover::before{transform:translateX(-120%)}
.btn .ms{transition:transform .25s ease}
.btn:hover .ms{transform:translateX(-4px)}

/* scroll progress (inside header) */
.sprog{position:absolute;inset-inline:0;bottom:-1px;height:3px;background:linear-gradient(to left,#E2A63C,#F6E7C8,#4F7BFF);transform-origin:right;transform:scaleX(0);pointer-events:none}
@supports (animation-timeline: scroll()){.sprog{animation:grow linear both;animation-timeline:scroll(root block)}}

/* hero atmosphere */
.hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(201,210,232,.22) 1px,transparent 1.4px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);animation:drift 30s linear infinite;pointer-events:none}
.hero::after{content:'';position:absolute;width:780px;height:780px;left:50%;top:-420px;margin-left:-390px;border-radius:50%;background:radial-gradient(circle,rgba(79,123,255,.28),transparent 62%);filter:blur(10px);animation:breathe 9s ease-in-out infinite;pointer-events:none}
.hero-in{position:relative;z-index:2}
.hero h1 .w{display:inline-block;animation:wordup .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.15s + var(--i,0) * .09s)}
.hero h1 .hl{display:inline-block;background:linear-gradient(100deg,#E2A63C 0%,#E2A63C 40%,#FFF1D2 50%,#E2A63C 60%,#E2A63C 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wordup .9s .6s cubic-bezier(.2,.8,.2,1) both,shine 5s 1.6s linear infinite}
.hero h1 .hl::after{background:#E2A63C}
.bin{position:absolute;top:0;bottom:0;width:120px;overflow:hidden;font:500 12px/1.9 ui-monospace,'SFMono-Regular',Menlo,monospace;color:rgba(226,166,60,.22);direction:ltr;text-align:center;-webkit-mask-image:linear-gradient(transparent,#000 20%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 20%,#000 70%,transparent);pointer-events:none;z-index:1}
.bin.r{right:2%}.bin.l{left:2%}
.bin>div{white-space:pre;animation:rain 22s linear infinite}
.bin.l>div{animation-duration:30s;animation-direction:reverse;color:rgba(79,123,255,.3)}
.globe{z-index:1}
@supports (animation-timeline: scroll()){
 .globe img{animation:gpar linear both;animation-timeline:scroll(root block);animation-range:0 900px}
}
.hcard{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:rgba(14,27,61,.72);border:1px solid rgba(226,166,60,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 12px 30px rgba(0,0,0,.3);animation:hfloat 7s ease-in-out infinite;animation-delay:var(--d,0s)}
.hcard .ms{color:#E2A63C;font-size:18px}
.hcard i{width:8px;height:8px;border-radius:50%;background:#3CCB8A;box-shadow:0 0 0 0 rgba(60,203,138,.6);animation:ping 2s infinite}

/* marquee: two rows + edge fade */
.marq{-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.marq-t.back{animation-direction:reverse;animation-duration:46s;padding-top:0}

/* section heads */
.sec-h .eyebrow{display:inline-flex;align-items:center;gap:10px;align-self:flex-start}
.sec-h .eyebrow::before{content:'';width:28px;height:2px;border-radius:2px;background:#E2A63C;transform-origin:right}
@supports (animation-timeline: view()){
 .sec-h .h2{animation:clipin linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
 .sec-h .eyebrow::before{animation:grow linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
 .stg>*{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
 .stg>*:nth-child(3n+2){animation-range:entry 8% entry 100%}
 .stg>*:nth-child(3n+3){animation-range:entry 16% cover 22%}
 .imr{animation:wipe linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
 .imr img{animation:unzoom linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
 .pop{animation:popin linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
}

/* glowing border on hover (cards) */
.glow{position:relative;isolation:isolate}
.glow::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ga),transparent 0 62%,#E2A63C 78%,#4F7BFF 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s ease;animation:spin 3.5s linear infinite;pointer-events:none;z-index:2}
.glow:hover::before,.glow:focus-visible::before{opacity:1}
.bx .ms,.inf .ms,.cert .seal,.app .ic,.cinfo .ic{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.bx:hover .ms,.inf:hover .ms,.cert:hover .seal,.app:hover .ic,.cinfo:hover .ic{transform:translateY(-3px) rotate(-6deg) scale(1.06)}
.band::before,.close::before,.phero::after,.pf-info::after{animation:spinr 40s linear infinite}
.band::after,.close::after{content:'';position:absolute;width:220px;height:220px;border-radius:50%;border:1px dashed rgba(79,123,255,.3);right:-70px;bottom:-110px;animation:spinr 30s linear infinite reverse;pointer-events:none}

/* skeleton screen placeholders (for real screenshots to come) */
.skel{width:100%;height:100%;display:grid;grid-template-columns:28% 1fr;gap:10px;padding:12px}
.skel>div{display:flex;flex-direction:column;gap:8px}
.skel i{display:block;border-radius:8px;background:linear-gradient(90deg,#E4E9F2 0%,#F5F7FB 40%,#E4E9F2 80%);background-size:300% 100%;animation:skel 1.8s ease-in-out infinite}
.skel .side i{height:18px}.skel .side i:first-child{height:34px;background:#14224A}
.skel .main .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.skel .main .row i{height:54px}
.skel .main .chart{height:96px;border-radius:12px;background:linear-gradient(180deg,rgba(226,166,60,.25),rgba(226,166,60,.05)),repeating-linear-gradient(90deg,#E4E9F2 0 1px,transparent 1px 40px);position:relative;overflow:hidden}
.skel .main .chart::after{content:'';position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(90deg,#E2A63C,#4F7BFF);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 50 L20 42 L40 46 L60 30 L80 34 L100 20 L120 26 L140 14 L160 18 L180 8 L200 12 L200 60 L0 60Z'/%3E%3C/svg%3E") center/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 50 L20 42 L40 46 L60 30 L80 34 L100 20 L120 26 L140 14 L160 18 L180 8 L200 12 L200 60 L0 60Z'/%3E%3C/svg%3E") center/100% 100%;opacity:.55;transform-origin:left;animation:grow 2.4s ease-out both}
.skel-l{position:absolute;inset-inline:0;bottom:10px;text-align:center;font-size:12px;color:#4A5578}
.win-c{position:relative}

/* ===== engineering lab (code strength) ===== */
.lab{background:#0A1430;color:#fff;position:relative;overflow:hidden}
.lab::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(79,123,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(79,123,255,.07) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 70% 30%,#000,transparent 70%);animation:drift 40s linear infinite;pointer-events:none}
.lab .wrap{position:relative}
.lab .eyebrow{color:#E2A63C}
.lab .lead{color:#C9D2E8}
.lab-g{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:28px;align-items:start}
.ide{direction:ltr;text-align:left;background:#071026;min-width:0;border:1px solid rgba(255,255,255,.09);border-radius:20px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.45),0 0 0 1px rgba(226,166,60,.08);font:500 13.5px/1.8 'JetBrains Mono','SFMono-Regular',Menlo,Consolas,ui-monospace,monospace}
.ide-b{display:flex;align-items:center;gap:6px;padding:0 10px;background:#0D1A3A;border-bottom:1px solid rgba(255,255,255,.06);min-height:46px;overflow-x:auto;scrollbar-width:none}
.ide-b .dots{display:flex;gap:6px;margin-right:10px}
.ide-b .dots i{width:10px;height:10px;border-radius:50%;background:#33415F}
.ide-b .dots i:first-child{background:#E2A63C}
.ide-tab{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:9px;border:0;background:none;color:#8C9AC0;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.ide-tab:hover{color:#fff}
.ide-tab.on{background:#071026;color:#fff;box-shadow:inset 0 -2px 0 #E2A63C}
.ide-tab .fi{width:8px;height:8px;border-radius:2px;background:#4F7BFF}
.ide-c{padding:16px 0 18px;counter-reset:ln;min-height:330px}
.cl{display:block;white-space:pre;padding:0 18px 0 54px;position:relative;color:#DCE3F5;clip-path:inset(0 0 0 0);animation:type 14s steps(28,end) infinite;animation-delay:calc(var(--l,0) * .32s)}
.cl::before{counter-increment:ln;content:counter(ln);position:absolute;left:0;width:38px;text-align:right;color:#3A4A72}
.cl .k{color:#E2A63C}.cl .t{color:#7FA6FF}.cl .s{color:#9BE3B5}.cl .c{color:#8494BE;font-style:italic}.cl .f{color:#FFE2A8}.cl .a{color:#C9A6FF}
.caret{display:inline-block;width:8px;height:1.15em;vertical-align:-3px;background:#E2A63C;animation:blink 1s steps(2) infinite}
.term{border-top:1px solid rgba(255,255,255,.06);background:#050C1E;padding:14px 18px;font-size:12.5px;line-height:1.9;color:#8C9AC0}
.term p{margin:0;display:flex;justify-content:space-between;gap:12px;animation:termin 14s infinite both;animation-delay:calc(5s + var(--l,0) * .7s)}
.term b{color:#fff;font-weight:500}.term .ok{color:#3CCB8A}
.pill-r{display:flex;flex-wrap:wrap;gap:8px}
.pill-r span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:13px;color:#DCE3F5}
.pill-r span .ms{font-size:16px;color:#E2A63C}
.eng{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.eng>div{padding:18px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px;transition:background .3s,transform .3s}
.eng>div:hover{background:rgba(255,255,255,.08);transform:translateY(-3px)}
.eng .ms{font-size:26px;color:#E2A63C}
.eng b{font-family:'Alexandria',sans-serif;font-size:16px}
.eng p{margin:0;font-size:13.5px;color:#C9D2E8;line-height:1.7}

/* tech orbit */
.orbit{position:relative;width:min(100%,420px);aspect-ratio:1;margin:12px auto}
.orbit .ocore{position:absolute;inset:38%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F6E7C8,#E2A63C 55%,#8F6316);box-shadow:0 0 60px rgba(226,166,60,.55),0 0 0 10px rgba(226,166,60,.08),0 0 0 22px rgba(226,166,60,.05);display:flex;align-items:center;justify-content:center;color:#14224A;font:800 15px 'Alexandria',sans-serif;animation:breathe 5s ease-in-out infinite;flex-wrap:nowrap}
.ring{position:absolute;border-radius:50%;border:1px dashed rgba(201,210,232,.22);animation:spinr 48s linear infinite}
.ring.r1{inset:20%}.ring.r2{inset:2%;animation-duration:70s;animation-direction:reverse}
.ring .o{position:absolute;inset:0;transform:rotate(var(--a));pointer-events:none}
.ring .o span{position:absolute;top:0;left:50%;translate:-50% -50%;transform:rotate(calc(var(--a) * -1));pointer-events:auto;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#0D1A3A;border:1px solid rgba(226,166,60,.35);color:#fff;font:600 12.5px/1 'IBM Plex Sans Arabic',sans-serif;white-space:nowrap;direction:ltr;animation:spinr 48s linear infinite reverse;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.ring.r2 .o span{animation-duration:70s;animation-direction:normal;border-color:rgba(79,123,255,.45)}

/* delivery flow (SDLC) */
.flow{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;padding-top:6px}
.flow::before{content:'';position:absolute;top:33px;inset-inline:6%;height:2px;background:repeating-linear-gradient(to left,rgba(226,166,60,.6) 0 8px,transparent 8px 14px);animation:dash 1s linear infinite}
.flow .pkt{position:absolute;top:28px;inset-inline-start:6%;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 14px 4px rgba(226,166,60,.9);animation:travel 7s cubic-bezier(.6,0,.4,1) infinite}
.flow>div{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-size:13px;font-weight:600;color:#DCE3F5}
.flow>div .ic{width:56px;height:56px;border-radius:18px;background:#0D1A3A;border:1px solid rgba(226,166,60,.4);display:flex;align-items:center;justify-content:center;color:#E2A63C;position:relative;z-index:1;animation:nodeon 7s infinite;animation-delay:calc(var(--i) * .8s)}
.flow small{font-weight:400;color:#8C9AC0;font-size:12px;line-height:1.5}

/* keyword cloud (internal links) */
.kw{display:flex;flex-wrap:wrap;gap:8px}
.kw a{display:inline-flex !important;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-size:13px;line-height:1.4 !important;color:#C9D2E8;transition:border-color .2s,color .2s,background .2s}
.kw a:hover{border-color:#E2A63C;color:#fff;background:rgba(226,166,60,.1)}
.seo-p{font-size:13.5px;line-height:1.9;color:#AEB9D6;max-width:980px;margin:0}

/* layered architecture */
.arch{display:flex;flex-direction:column;gap:10px;position:relative}
.arch>div{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px;border-radius:18px;background:#fff;border:1px solid #E4E9F2;position:relative;transition:transform .3s ease,box-shadow .3s ease}
.arch>div:hover{transform:translateX(-6px);box-shadow:0 14px 30px rgba(20,34,74,.08)}
.arch>div .ic{width:52px;height:52px;border-radius:16px;background:#14224A;color:#E2A63C;display:flex;align-items:center;justify-content:center}
.arch>div b{font-family:'Alexandria',sans-serif;font-size:16px;display:block}
.arch>div span.d{font-size:13.5px;color:#4A5578;line-height:1.7}
.arch>div code{direction:ltr;font:600 12px ui-monospace,Menlo,monospace;color:#6E4A0C;background:#F6E7C8;padding:5px 10px;border-radius:8px;white-space:nowrap}
.arch>div:not(:last-child)::after{content:'';position:absolute;inset-inline-start:43px;bottom:-11px;width:2px;height:12px;background:#E2A63C}
.arch .sec-layer{background:#14224A;color:#fff;border-color:#14224A}
.arch .sec-layer span.d{color:#C9D2E8}
.arch .sec-layer .ic{background:#E2A63C;color:#14224A}

@keyframes wordup{from{opacity:0;transform:translateY(.6em) rotate(2deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes shine{from{background-position:120% 0}to{background-position:-130% 0}}
@keyframes drift{from{background-position:0 0}to{background-position:-240px 240px}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}
@keyframes rain{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@keyframes gpar{from{transform:none}to{transform:translateY(-70px) scale(1.07)}}
@keyframes hfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(60,203,138,.6)}80%,100%{box-shadow:0 0 0 8px rgba(60,203,138,0)}}
@keyframes clipin{from{clip-path:inset(0 0 100% 0);transform:translateY(28px);opacity:0}to{clip-path:inset(-20% 0 -20% 0);transform:none;opacity:1}}
@keyframes wipe{from{clip-path:inset(0 0 0 100% round 20px)}to{clip-path:inset(0 0 0 0 round 20px)}}
@keyframes unzoom{from{transform:scale(1.25)}to{transform:scale(1)}}
@keyframes popin{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes spin{to{--ga:360deg}}
@keyframes spinr{to{rotate:360deg}}
@keyframes skel{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes type{0%{clip-path:inset(0 100% 0 0)}5%,86%{clip-path:inset(0 0 0 0)}92%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes blink{50%{opacity:0}}
@keyframes termin{0%,2%{opacity:0;transform:translateY(6px)}6%,86%{opacity:1;transform:none}92%,100%{opacity:0}}
@keyframes travel{0%{inset-inline-start:6%;opacity:0}6%{opacity:1}94%{opacity:1}100%{inset-inline-start:94%;opacity:0}}
@keyframes nodeon{0%,8%,100%{box-shadow:0 0 0 0 rgba(226,166,60,0);background:#0D1A3A}3%{box-shadow:0 0 0 8px rgba(226,166,60,.18);background:#14224A}}

@container site (max-width: 1000px){
 .lab-g{grid-template-columns:minmax(0,1fr)}
 .bin{display:none}
 .flow{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:26px}
 .flow::before,.flow .pkt{display:none}
}
@container site (max-width: 640px){
 .hcard{display:none}
 .hcard.m{display:flex;font-size:12px;padding:8px 12px}
 .ide{font-size:11.5px;border-radius:16px}
 .ide-c{min-height:0;padding:12px 0 14px}
 .cl{padding:0 12px 0 40px}
 .cl::before{width:28px}
 .eng{grid-template-columns:minmax(0,1fr)}
 .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
 .orbit{width:min(100%,340px)}
 .ring .o span{font-size:11px;padding:6px 9px}
 .arch>div{grid-template-columns:44px minmax(0,1fr);padding:14px}
 .arch>div .ic{width:44px;height:44px}
 .arch>div code{grid-column:2;justify-self:start}
 .arch>div:not(:last-child)::after{inset-inline-start:35px}
 .hero::after{width:460px;height:460px;margin-left:-230px;top:-260px}
}
@media (prefers-reduced-motion: reduce){
 .site *,.site *::before,.site *::after{animation:none !important;transition:none !important}
 .sprog{transform:scaleX(0)}
 .cl,.term p{clip-path:none;opacity:1}
}
/* v2 fixes */
.h2,.hero h1,.phero h1,.sx-panel h3{text-wrap:balance}
.lead,.sub{text-wrap:pretty}
.ba-box{min-height:0}
.order{min-height:300px;align-content:stretch}
.order .lane{animation:up .55s cubic-bezier(.2,.8,.2,1) both}
.order .lane:nth-child(2){animation-delay:.08s}.order .lane:nth-child(3){animation-delay:.16s}.order .lane:nth-child(4){animation-delay:.24s}
.order .lane>span{animation:fade .4s both;animation-delay:.35s}
.mess>span{transition:transform .3s}
.flow>div .ic .ms{font-size:26px}
.sx-panel .pt{animation:up .45s both}
.sx-panel .pt:nth-child(2){animation-delay:.07s}.sx-panel .pt:nth-child(3){animation-delay:.14s}
.st i{transition:transform .3s}
.sx-panel .st{animation:fade .4s both}
.sx-panel .st:nth-child(2){animation-delay:.05s}.sx-panel .st:nth-child(3){animation-delay:.1s}.sx-panel .st:nth-child(4){animation-delay:.15s}.sx-panel .st:nth-child(5){animation-delay:.2s}.sx-panel .st:nth-child(6){animation-delay:.25s}.sx-panel .st:nth-child(7){animation-delay:.3s}
.pf-sel{animation:popin .35s cubic-bezier(.3,1.4,.5,1) both}
@media (prefers-reduced-motion: reduce){.site *,.site *::before,.site *::after{animation:none !important;transition:none !important}}
@container site (max-width: 640px){
 .orbit{width:min(100%,300px)}
 .ring.r2{inset:7%}
 .term{overflow-x:auto;font-size:11px}
 .term p{white-space:nowrap}
 .hcard.m{right:34% !important;top:18% !important}
}
.seo-box{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;align-items:start;padding:clamp(22px,4cqi,44px);border-radius:28px;background:#fff;border:1px solid #E4E9F2;position:relative;overflow:hidden}
.seo-box::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(20,34,74,.08) 1px,transparent 1.4px);background-size:18px 18px;-webkit-mask-image:linear-gradient(to left,#000,transparent 60%);mask-image:linear-gradient(to left,#000,transparent 60%);pointer-events:none}
.seo-box>*{position:relative}
.kwt{display:flex;flex-wrap:wrap;gap:8px}
.kwt span{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;background:#F5F7FB;border:1px solid #E4E9F2;font-size:13px;font-weight:600;color:#14224A}
@container site (max-width: 760px){.seo-box{grid-template-columns:minmax(0,1fr)}}

/* ===== bidirectional: Arabic (rtl) / English (ltr) =====
   The site follows the document direction set by the language plugin.
   Everything above uses logical properties; below are the few motions
   and glyphs that must mirror explicitly. Code blocks stay LTR in both. */
.fx{display:inline-block}
[dir="ltr"] .fx,[dir="ltr"] .ms.fx{transform:scaleX(-1)}
[dir="ltr"] .btn:hover .ms{transform:translateX(4px)}
[dir="ltr"] .btn:hover .ms.fx{transform:scaleX(-1) translateX(-4px)}
[dir="ltr"] .hl::after,[dir="ltr"] .sec-h .eyebrow::before,[dir="ltr"] .sprog{transform-origin:left}
[dir="ltr"] .sprog{background:linear-gradient(to right,#E2A63C,#F6E7C8,#4F7BFF)}
[dir="ltr"] .st::before{background:linear-gradient(to right,#E2A63C,#E2A63C)}
[dir="ltr"] .win{transform:perspective(1200px) rotateY(8deg)}
[dir="ltr"] .win:hover{transform:none}
[dir="ltr"] .arch>div:hover{transform:translateX(6px)}
[dir="ltr"] .marq-i,[dir="ltr"] .marq-logo{direction:ltr}
[dir="ltr"] .chain>div:not(:last-child)::after,[dir="ltr"] .flow::before{animation-direction:reverse}
[dir="ltr"] .sheet{animation-name:slide-l}
[dir="ltr"] .hero h1 .hl{background-position:0 0}
@keyframes slide-l{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes wipe-l{from{clip-path:inset(0 100% 0 0 round 20px)}to{clip-path:inset(0 0 0 0 round 20px)}}
@supports (animation-timeline: view()){[dir="ltr"] .imr{animation-name:wipe-l}}
.ide,.ide *,.term{unicode-bidi:isolate}
/* language switch */
.lang{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.25);color:#fff;font:600 13px/1 'IBM Plex Sans Arabic',sans-serif;letter-spacing:.3px;transition:background .2s,border-color .2s}
.lang:hover{border-color:#E2A63C;background:rgba(226,166,60,.12)}
.lang .ms{font-size:18px;color:#E2A63C}
@media (prefers-reduced-motion: reduce){.site *,.site *::before,.site *::after{animation:none !important;transition:none !important}}
.lang-m{display:none}
@container site (max-width: 1000px){.lang-m{display:inline-flex;margin-inline-start:auto;min-height:44px}.lang-m+.burger{margin-inline-start:8px}}
.site a.band{color:#fff}
.ph{background:linear-gradient(110deg,#EAEFF7 30%,#F7F9FC 45%,#EAEFF7 60%);background-size:250% 100%;animation:skel 2.6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.site *,.site *::before,.site *::after{animation:none !important;transition:none !important}}
.flow.f5{grid-template-columns:repeat(5,minmax(0,1fr))}
.flow.f5::before{inset-inline:10%}
.flow.f5 .pkt{animation-name:travel5}
@keyframes travel5{0%{inset-inline-start:10%;opacity:0}6%{opacity:1}94%{opacity:1}100%{inset-inline-start:90%;opacity:0}}
.flow.f5>div .ic{animation-duration:7s;animation-delay:calc(var(--i) * 1.3s)}
@container site (max-width: 1000px){.flow.f5{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:26px}}
@container site (max-width: 640px){.flow.f5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.arch>div{animation-fill-mode:both}
@container site (max-width: 900px){#architecture .wrap>div:first-child{position:static !important}}
@media (prefers-reduced-motion: reduce){.site *,.site *::before,.site *::after{animation:none !important;transition:none !important}}
/* real assets */
.marq-img{height:46px;width:auto;max-width:130px;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .3s,opacity .3s,transform .3s}
.marq-img:hover{filter:none;opacity:1;transform:scale(1.08)}
.marq-t{align-items:center}
.lg.has{border-style:solid;border-color:#E4E9F2;padding:12px}
.lg.has img{max-width:82%;max-height:70px;object-fit:contain;filter:grayscale(.15);transition:filter .3s,transform .3s}
.lg.has:hover img{filter:none;transform:scale(1.06)}
.win-c.real{padding:0;display:block;background:#fff}
.win-c.real img{width:100%;height:100%;object-fit:cover;display:block}
.shotwrap{position:relative}
.tp-badge{position:absolute;inset-inline-start:-16px;bottom:-22px;width:108px;height:auto;background:#fff;border-radius:22px;padding:10px;box-shadow:0 18px 40px rgba(0,0,0,.35);animation:hfloat 6s ease-in-out infinite;z-index:2}
.doc{background:#F5F7FB;display:flex;align-items:center;justify-content:center;padding:16px;aspect-ratio:16/10;overflow:hidden}
.doc img{height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:6px;box-shadow:0 10px 24px rgba(20,34,74,.14);transition:transform .4s ease}
.card:hover .doc img,.cert:hover .doc img{transform:scale(1.04) rotate(-1deg)}
.doc.sm{aspect-ratio:3/4;padding:10px;border-radius:14px;margin-bottom:4px}
@container site (max-width: 640px){.tp-badge{width:80px;inset-inline-start:-6px;bottom:-16px;border-radius:16px;padding:7px}.marq-img{height:38px}}
@media (prefers-reduced-motion: reduce){.site *,.site *::before,.site *::after{animation:none !important;transition:none !important}}
.lgs.lgc{display:flex;flex-wrap:wrap;justify-content:center}
.lgs.lgc>.lg{flex:0 0 calc((100% - 48px) / 5)}
@container site (max-width: 1000px){.lgs.lgc>.lg{flex-basis:calc((100% - 24px) / 3)}}
@container site (max-width: 640px){.lgs.lgc>.lg{flex-basis:calc((100% - 12px) / 2)}}
/* review pass: SEO keyword line in H1, tap targets, performance */
.h1k{display:block;font-family:'IBM Plex Sans Arabic',sans-serif;font-size:clamp(14px,1.5cqi,17px);font-weight:600;color:#E2A63C;letter-spacing:.2px;margin-bottom:10px;line-height:1.5}
.sec-h a,.sec a[style*="font-weight: 600"]:not(.btn):not(.mchip){display:inline-flex;align-items:center;min-height:44px}
.ide-tab{min-height:40px}
@container site (max-width: 640px){.ide-tab{min-height:44px}.ring .o span{font-size:12px}}
.brand small{font-size:12px}
.glow::before{animation-play-state:paused}
.glow:hover::before,.glow:focus-visible::before{animation-play-state:running}
.tgl{position:relative}
.tgl::before{content:'';position:absolute;inset:-8px -4px}
@media (prefers-reduced-motion: reduce){.site *,.site *::before,.site *::after{animation:none !important;transition:none !important}}
/* v3: director art, map, events gallery */
.dq-art{border-radius:22px;aspect-ratio:4/5;background:radial-gradient(120% 90% at 80% 10%,rgba(226,166,60,.28),transparent 55%),linear-gradient(160deg,#14224A,#0E1B3D);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:clamp(22px,3cqi,36px);position:relative;overflow:hidden}
.dq-art::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:18px 18px;opacity:.6}
.dq-art .ms{position:relative;color:#E2A63C;font-size:72px}
.dq-art b{position:relative;font-family:'Alexandria',sans-serif;font-size:clamp(22px,2.8cqi,32px);line-height:1.3}
.dq-art small{position:relative;color:#C9D2E8;font-size:14px}
@container site (max-width: 760px){.dq-art{aspect-ratio:16/10}}
.map-f{border-radius:22px;overflow:hidden;aspect-ratio:16/9;background:#EEF2F8;border:1px solid #E4E9F2}
.map-f iframe{display:block;width:100%;height:100%;border:0}
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:12px}
.gal-i{position:relative;display:block;padding:0;border:0;border-radius:16px;overflow:hidden;background:#EEF2F8;aspect-ratio:16/10;cursor:zoom-in;transition:transform .3s ease,box-shadow .3s ease}
.gal-i.tall{grid-row:span 2;aspect-ratio:auto}
.gal-i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gal-i:hover{box-shadow:0 14px 34px rgba(14,27,61,.18)}
.gal-i:hover img{transform:scale(1.05)}
.gal-i:focus-visible{outline:3px solid #E2A63C;outline-offset:2px}
@container site (max-width: 1000px){.gal{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container site (max-width: 640px){.gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.lbx{position:fixed;inset:0;z-index:1000;background:rgba(8,14,32,.92);display:flex;align-items:center;justify-content:center;padding:56px 16px;animation:fade .25s ease}
.lbx img{max-width:min(1100px,100%);max-height:100%;object-fit:contain;border-radius:12px}
.lbx-x,.lbx-n{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lbx-x{top:14px;inset-inline-end:14px}
.lbx-n{top:50%;transform:translateY(-50%)}
.lbx-n.prev{inset-inline-start:14px}
.lbx-n.next{inset-inline-end:14px}
[dir="ltr"] .lbx-n .ms{transform:scaleX(-1)}
.lbx-c{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#C9D2E8;font-size:14px}
/* v3: English (LTR) adjustments */
[dir="ltr"] .hl{white-space:normal}
[dir="ltr"] .marq-i{direction:ltr}
[dir="ltr"] .hero h1,[dir="ltr"] .phero h1{letter-spacing:-.01em}
/* v4: before / after side by side (no toggle) */
.ba-dual{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px;align-items:stretch}
.ba-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.ba-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-weight:700;font-size:14px;line-height:1}
.ba-tag .ms{font-size:18px}
.ba-tag.bad{background:#FDECEC;color:#9B2C1F}
.ba-tag.good{background:#E7F7EE;color:#14632F}
.ba-dual .mess,.ba-dual .order{flex:1;border-radius:24px;overflow:hidden}
.ba-dual .mess{height:auto;min-height:360px}
.ba-dual .order{grid-template-columns:repeat(2,minmax(0,1fr));align-content:stretch;min-height:360px}
@container site (max-width: 900px){.ba-dual{grid-template-columns:minmax(0,1fr)}.ba-dual .mess{min-height:320px}}
@container site (max-width: 640px){
.ba-dual{gap:12px}
.ba-dual .mess{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:10px;min-height:0;padding:22px 14px}
.ba-dual .mess>span{position:static}
.ba-dual .order{min-height:0;padding:12px;gap:8px}
.ba-dual .lane{padding:12px}
}
@container site (max-width: 380px){.ba-dual .order{grid-template-columns:minmax(0,1fr)}}
/* v4: ISO 27001 spotlight */
.iso27{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4cqi,48px);align-items:center;padding:clamp(22px,4cqi,52px);border-radius:28px;background:radial-gradient(90% 120% at 100% 0%,rgba(226,166,60,.22),transparent 60%),linear-gradient(135deg,#0E1B3D,#14224A 60%,#1C2F63);color:#fff;position:relative;overflow:hidden;box-shadow:0 24px 60px rgba(14,27,61,.22)}
.iso27::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:20px 20px;pointer-events:none}
.iso27>*{position:relative}
.site a.iso27{color:#fff}
.iso27-txt{display:flex;flex-direction:column;gap:14px;min-width:0}
.iso27-big{display:flex;align-items:baseline;gap:12px;direction:ltr;align-self:flex-start}
.iso27-big span{font:800 clamp(26px,4cqi,44px)/1 'Alexandria',sans-serif;color:#C9D2E8}
.iso27-big b{font:800 clamp(64px,11cqi,132px)/.9 'Alexandria',sans-serif;letter-spacing:-.02em;background:linear-gradient(90deg,#F6E7C8,#E2A63C 60%,#C98A1F);-webkit-background-clip:text;background-clip:text;color:transparent}
.iso27 .h2{color:#fff}
.iso27 p{margin:0;color:#C9D2E8;line-height:1.8;font-size:16px}
.iso27-meta{display:flex;flex-wrap:wrap;gap:8px}
.iso27-meta>span{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:13px;color:#fff}
.iso27-meta .ms{font-size:17px;color:#E2A63C}
.iso27-doc{background:#fff;border-radius:18px;padding:10px;transform:rotate(-3deg);box-shadow:0 20px 44px rgba(0,0,0,.35);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.iso27-doc img{width:100%;display:block;border-radius:10px}
.iso27:hover .iso27-doc{transform:rotate(0) scale(1.02)}
[dir="ltr"] .iso27-doc{transform:rotate(3deg)}
@container site (max-width: 760px){.iso27{grid-template-columns:minmax(0,1fr)}.iso27-doc{max-width:240px;justify-self:center;order:-1}}
/* v4: contact map full width */
.map-f.wide{grid-column:1 / -1;aspect-ratio:auto;height:clamp(320px,36cqi,480px)}
@container site (max-width: 640px){.map-f.wide{height:340px;border-radius:18px}}

/* v5: privacy page */
.pv{max-width:860px;display:flex;flex-direction:column;gap:18px}
.pv-b{background:#fff;border:1px solid #E4E9F2;border-radius:20px;padding:clamp(20px,3cqi,32px);display:flex;flex-direction:column;gap:12px}
.pv-h{display:flex;align-items:center;gap:10px;margin:0;font-family:'Alexandria',sans-serif;font-weight:700;font-size:clamp(19px,2.2cqi,24px);color:#14224A}
.pv-h .ms{color:#E2A63C;font-size:26px}
.pv-l{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:8px;color:#2B3656;line-height:1.85;font-size:clamp(15px,1.5cqi,17px)}
.pv-l b{color:#14224A}
.pv-l a{color:#8F6316;font-weight:600}
.pv .lead{margin:0}
.pv-c{background:#F5F7FB}
.pv-date{color:#C9D2E8;font-size:14px}

/* v6 (2026-11-05): globe point, infra cards, Google reviews, FAQ mark, before/after motion, icon sizes */
.pulse-l{position:absolute;inset:0;pointer-events:none;z-index:2}
@supports (animation-timeline: scroll()){
 .globe .pulse-l{animation:gpar linear both;animation-timeline:scroll(root block);animation-range:0 900px}
}
/* icons inside square boxes follow the box, not the text size */
.ic>.ms{font-size:26px}
.app .ic>.ms{font-size:28px}
.mega .ic>.ms{font-size:22px}
.pill-r>span>.ms{font-size:22px}
.mlist>span>.ms{font-size:22px}
.clients>span>.ms{font-size:24px}
.inf .ms{font-size:26px}
@container site (max-width: 700px){.app .ic>.ms{font-size:24px}}
/* infrastructure cards */
.infx{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@container site (max-width: 1100px){.infx{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container site (max-width: 700px){.infx{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@container site (max-width: 700px){.ifx{min-height:0;padding:18px 14px 14px;gap:8px}.ifx b{font-size:15px}.ifx-d{font-size:13px}.ifx-n{font-size:28px;top:14px;left:12px}[dir="ltr"] .ifx-n{right:12px}.ifx>.ms{width:46px;height:46px;font-size:24px}.ifx:last-child:nth-child(odd){grid-column:1/-1}}
.ifx{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:24px 20px 20px;border-radius:20px;color:#fff;text-decoration:none;min-height:230px;background:#0E1B3D;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.ifx::before{content:'';position:absolute;inset:-70%;z-index:-2;background:conic-gradient(from 0deg,transparent 0 68%,rgba(226,166,60,.15) 74%,#E2A63C 82%,transparent 90%);animation:ifxspin 7s linear infinite;animation-delay:calc(var(--i,0) * -1.4s)}
.ifx::after{content:'';position:absolute;inset:1.5px;border-radius:18.5px;z-index:-1;background:radial-gradient(120% 80% at 100% 0%,rgba(226,166,60,.12),transparent 55%),linear-gradient(160deg,#1B2B5A 0%,#0E1B3D 100%)}
.ifx-n{position:absolute;top:16px;left:18px;font:800 38px/1 'Alexandria',sans-serif;color:transparent;-webkit-text-stroke:1px rgba(226,166,60,.6);letter-spacing:1px;transition:color .35s}
[dir="ltr"] .ifx-n{left:auto;right:18px}
.ifx>.ms{width:56px;height:56px;border-radius:16px;background:rgba(226,166,60,.12);border:1px solid rgba(226,166,60,.4);color:#E2A63C;display:flex;align-items:center;justify-content:center;font-size:28px;animation:ifxbeat 3.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * .45s)}
.ifx b{font-family:'Alexandria',sans-serif;font-size:17px;line-height:1.45;margin-top:4px;color:#fff}
.ifx-d{font-size:14px;line-height:1.75;color:#C9D2E8}
.ifx-m{margin-top:auto;display:inline-flex;align-items:center;gap:6px;color:#E2A63C;font-weight:600;font-size:14px}
.ifx-m .fx{transition:transform .3s}
.ifx:hover{transform:translateY(-6px);box-shadow:0 22px 44px -16px rgba(14,27,61,.6)}
.ifx:hover .ifx-n{color:rgba(226,166,60,.22)}
.ifx:hover .ifx-m .fx{transform:translateX(-5px)}
[dir="ltr"] .ifx:hover .ifx-m .fx{transform:translateX(5px)}
@keyframes ifxspin{to{transform:rotate(360deg)}}
@keyframes ifxbeat{0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(226,166,60,0)}50%{transform:scale(1.07);box-shadow:0 0 24px rgba(226,166,60,.35)}}
/* Google reviews */
a.rev{color:inherit;text-decoration:none;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
a.rev:hover{transform:translateY(-4px);border-color:#E2A63C;box-shadow:0 18px 36px -18px rgba(20,34,74,.35)}
.rev-h{display:flex;align-items:center;gap:12px}
.rev-av{position:relative;flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;background:#14224A;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(226,166,60,.6)}
.rev-av::before{content:attr(data-i);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 18px 'Alexandria',sans-serif;color:#E2A63C}
.rev-av img{position:relative;width:100%;height:100%;object-fit:cover;display:block}
.rev-n{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13px;color:#4A5578}
.rev-n b{color:#14224A;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rev-m{margin-top:auto;display:inline-flex;align-items:center;gap:6px;color:#8F6316;font-weight:600;font-size:14px}
.rev-m .fx{transition:transform .3s}
a.rev:hover .rev-m .fx{transform:translateX(-5px)}
[dir="ltr"] a.rev:hover .rev-m .fx{transform:translateX(5px)}
/* FAQ: question mark made of binary digits */
.qmark{position:relative;width:min(300px,72%);aspect-ratio:3/4;margin:34px auto 0;overflow:hidden;direction:ltr;text-align:center;font:700 13px/1 ui-monospace,'SFMono-Regular',Menlo,monospace;letter-spacing:1px;color:#E2A63C;background:rgba(226,166,60,.1);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'%3E%3Cpath d='M70 120C70 50 125 20 165 20C225 20 250 65 250 105C250 150 220 172 190 192C165 209 160 222 160 255L160 270L110 270L110 248C110 205 125 185 155 162C185 140 195 128 195 108C195 85 180 70 158 70C132 70 122 90 120 120Z'/%3E%3Ccircle cx='135' cy='332' r='34'/%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 300 400'%3E%3Cpath d='M70 120C70 50 125 20 165 20C225 20 250 65 250 105C250 150 220 172 190 192C165 209 160 222 160 255L160 270L110 270L110 248C110 205 125 185 155 162C185 140 195 128 195 108C195 85 180 70 158 70C132 70 122 90 120 120Z'/%3E%3Ccircle cx='135' cy='332' r='34'/%3E%3C/svg%3E") center/contain no-repeat;animation:qfloat 7s ease-in-out infinite;pointer-events:none}
.qmark>div{white-space:pre;background:linear-gradient(180deg,#E2A63C 0%,#8F6316 45%,#E2A63C 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:rain 14s linear infinite}
@keyframes qfloat{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-16px) rotate(4deg)}}
@container site (max-width: 900px){.qmark{display:none}}
/* before / after: live chaos layer (built by nq.js) and an orderly wave on the right */
.mess-live{position:absolute;inset:0;pointer-events:none;z-index:1}
.mess-live~span{visibility:hidden}
.mess-live>span{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:14px;background:#fff;border:1px dashed #B8C2D6;font-size:13px;font-weight:600;color:#4A5578;white-space:nowrap;will-change:transform;transition:border-color .2s,box-shadow .2s,background-color .2s}
.mess-live>span.bad{border-color:#C0392B;color:#9B2C1F}
.mess-live>span.hit{border-style:solid;border-color:#C0392B;background:#FFF4F2;box-shadow:0 0 0 5px rgba(192,57,43,.14)}
@media (prefers-reduced-motion: no-preference){
 .order .lane>span{animation:fade .4s .35s both,flowrow 6s ease-in-out infinite;animation-delay:.35s,calc(1.2s + var(--d,0s))}
 .order .lane>span>.ms{animation:tick 6s ease-in-out infinite;animation-delay:calc(1.2s + var(--d,0s))}
 [dir="ltr"] .order .lane>span{animation-name:fade,flowrowl}
 .order .lane:nth-child(1)>span:nth-of-type(2){--d:.5s}.order .lane:nth-child(1)>span:nth-of-type(3){--d:1s}
 .order .lane:nth-child(2)>span:nth-of-type(1){--d:1.5s}.order .lane:nth-child(2)>span:nth-of-type(2){--d:2s}.order .lane:nth-child(2)>span:nth-of-type(3){--d:2.5s}
 .order .lane:nth-child(3)>span:nth-of-type(1){--d:3s}.order .lane:nth-child(3)>span:nth-of-type(2){--d:3.5s}.order .lane:nth-child(3)>span:nth-of-type(3){--d:4s}
 .order .lane:nth-child(4)>span:nth-of-type(1){--d:4.5s}.order .lane:nth-child(4)>span:nth-of-type(2){--d:5s}.order .lane:nth-child(4)>span:nth-of-type(3){--d:5.5s}
}
@keyframes flowrow{0%,14%,100%{background:rgba(255,255,255,.07);transform:none;box-shadow:inset 0 0 0 rgba(226,166,60,0)}5%{background:rgba(226,166,60,.2);transform:translateX(-6px);box-shadow:inset -3px 0 0 #E2A63C}}
@keyframes flowrowl{0%,14%,100%{background:rgba(255,255,255,.07);transform:none;box-shadow:inset 0 0 0 rgba(226,166,60,0)}5%{background:rgba(226,166,60,.2);transform:translateX(6px);box-shadow:inset 3px 0 0 #E2A63C}}
@keyframes tick{0%,14%,100%{transform:none;color:#3CCB8A}6%{transform:scale(1.35);color:#7CF0B9}}
/* MedCore: auto slider of module screens (8 slides x 4s) */
.mds .mds-t{padding:0;position:relative;overflow:hidden;background:#0E1B3D}
.mds-s{position:absolute;inset:0;margin:0;opacity:0;animation:mdsfade 32s linear infinite;animation-delay:calc(var(--k) * 4s - 1s)}
.mds-s img{width:100%;height:100%;object-fit:cover;display:block}
.mds-s.dk img{object-fit:contain;background:#161C24}
.mds-s figcaption{position:absolute;bottom:14px;right:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 12px;border-radius:999px;background:rgba(14,27,61,.88);color:#fff;font-size:14px;font-weight:600;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
[dir="ltr"] .mds-s figcaption{right:auto;left:14px}
.mds-s figcaption .ms{color:#E2A63C;font-size:20px}
.mds-d{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2;padding:5px 8px;border-radius:999px;background:rgba(14,27,61,.55)}
.mds-d i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.5);animation:mdsdot 32s linear infinite;animation-delay:calc(var(--k) * 4s - 1s)}
.mds:hover .mds-s,.mds:hover .mds-d i{animation-play-state:paused}
@keyframes mdsfade{0%{opacity:0;transform:translateX(-36px) scale(1.03)}2.5%{opacity:1;transform:none}12.5%{opacity:1;transform:none}15%{opacity:0;transform:translateX(36px) scale(.98)}100%{opacity:0}}
@keyframes mdsdot{0%,15%,100%{width:6px;background:rgba(255,255,255,.5)}2.5%,12.5%{width:20px;background:#E2A63C}}
@media (prefers-reduced-motion: reduce){.mds-s:first-child{opacity:1}}

@container site (max-width: 900px){.ba-dual .mess{min-height:340px;align-content:center}}

/* v7 (2026-11-05): header on one line in English; "New" badge in English */
.nav button,.nav a,.hdr-cta a,.hdr-cta button,.brand b,.brand small{white-space:nowrap}
.brand,.hdr-cta{flex-shrink:0}
[dir="ltr"] .nav{gap:0}
[dir="ltr"] .nav button,[dir="ltr"] .nav a{padding:10px 9px;font-size:14px}
[dir="ltr"] .brand small{display:none}
@container site (min-width: 1700px){[dir="ltr"] .brand small{display:block}}
@container site (max-width: 1279px){[dir="ltr"] .hdr-cta .btn-ghost{display:none}}
@container site (max-width: 1120px){[dir="ltr"] .nav button,[dir="ltr"] .nav a{padding:10px 7px;font-size:13.5px}[dir="ltr"] .hdr-in{gap:12px}}
[dir="ltr"] .app.new::after{content:'New'}

/* v8 (2026-11-05): blog, categories and articles in the new design */
.nq-root.nq-part>.site{min-height:0!important}
.nq-shell>.site{min-height:60vh}
.bhero-in,.ahero-in{display:flex;flex-direction:column;gap:16px;padding-block:clamp(36px,6cqi,80px);position:relative;z-index:1}
.bhero p.sub{max-width:720px}
.ahero h1{max-width:920px;font-size:clamp(28px,4cqi,46px)}
.bcats{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.bcat{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
a.bcat:hover{border-color:#E2A63C;color:#E2A63C}
.bcat.on{background:#E2A63C;border-color:#E2A63C;color:#14224A}
.bcat-n{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.bcat.on .bcat-n{background:rgba(20,34,74,.15)}
.bcat.soon{border-style:dashed;color:#C9D2E8;opacity:.8}
.bcat-s{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(226,166,60,.18);color:#E2A63C}
.bsec,.asec{padding-top:clamp(28px,4cqi,56px)}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:20px}
.acard{display:flex;flex-direction:column;border-radius:20px;background:#fff;border:1px solid #E4E9F2;overflow:hidden;color:inherit;text-decoration:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;animation:up .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(min(var(--i,0),8) * .06s)}
.acard:hover{transform:translateY(-5px);border-color:#E2A63C;box-shadow:0 22px 44px -22px rgba(20,34,74,.35)}
.acard-im{display:block;aspect-ratio:16/9;overflow:hidden;background:#0E1B3D}
.acard-im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.acard:hover .acard-im img{transform:scale(1.05)}
.art-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#1B2B5A,#0E1B3D);color:#E2A63C}
.art-ph .ms{font-size:44px}
.acard-bd{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px;flex:1}
.acard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:#4A5578}
.acard-cat{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:#F6E7C8;color:#8F6316;font-size:12px;font-weight:700;text-decoration:none}
.acard b{font-family:'Alexandria',sans-serif;font-size:18px;line-height:1.5;color:#14224A}
.acard-ex{font-size:14px;line-height:1.8;color:#4A5578;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acard-more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;color:#8F6316;font-weight:600;font-size:14px}
.acard-more .fx{transition:transform .3s}
.acard:hover .acard-more .fx{transform:translateX(-5px)}
[dir="ltr"] .acard:hover .acard-more .fx{transform:translateX(5px)}
.aempty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:56px 20px;border-radius:24px;background:#fff;border:1px dashed #C7D0E0;text-align:center}
.aempty .ms{font-size:44px;color:#E2A63C}
.ameta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;color:#C9D2E8;font-size:14px}
.ameta>span{display:inline-flex;align-items:center;gap:6px}
.ameta .ms{color:#E2A63C;font-size:20px}
.agrid2{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(24px,4cqi,48px);align-items:start}
@container site (max-width: 960px){.agrid2{grid-template-columns:minmax(0,1fr)}}
.abody{min-width:0}
.aimg{border-radius:22px;overflow:hidden;margin:0 0 28px;box-shadow:0 26px 50px -30px rgba(14,27,61,.55);background:#0E1B3D}
.aimg img{width:100%;height:auto;display:block}
.aimg .art-ph{aspect-ratio:16/8}
.prose{font-size:clamp(16px,1.6cqi,18px);line-height:2;color:#24304F;max-width:780px}
[dir="ltr"] .prose{line-height:1.85}
.prose>*{margin:0 0 1.05em}
.prose h2{font-family:'Alexandria',sans-serif;font-size:clamp(20px,2.4cqi,26px);line-height:1.45;color:#14224A;margin:1.6em 0 .7em;padding-inline-start:16px;border-inline-start:4px solid #E2A63C}
.prose strong{color:#14224A}
.prose a{color:#8F6316;text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-inline-start:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.prose ul li,.prose ol li{position:relative;padding-inline-start:30px}
.prose ul li::before{content:'';position:absolute;inset-inline-start:8px;top:.85em;width:8px;height:8px;border-radius:50%;background:#E2A63C}
.prose ol{counter-reset:ol}
.prose ol li{counter-increment:ol}
.prose ol li::before{content:counter(ol);position:absolute;inset-inline-start:0;top:.35em;width:22px;height:22px;border-radius:7px;background:#14224A;color:#E2A63C;font:700 12px/22px 'Alexandria',sans-serif;text-align:center}
.prose ul.art-check li{padding:12px 46px 12px 16px;border-radius:14px;background:#fff;border:1px solid #E4E9F2}
[dir="ltr"] .prose ul.art-check li{padding:12px 16px 12px 46px}
.prose ul.art-check li::before{content:'✓';inset-inline-start:14px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:7px;background:#E7F7EE;color:#1F8A5B;font-weight:800;font-size:14px;line-height:22px;text-align:center}
.aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
@container site (max-width: 960px){.aside{position:static}}
.abox{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:20px;background:#fff;border:1px solid #E4E9F2}
.abox b{font-family:'Alexandria',sans-serif;font-size:16px;color:#14224A}
.abox.dark{background:#0E1B3D;border-color:#0E1B3D;color:#C9D2E8}
.abox.dark b{color:#fff;font-size:19px;line-height:1.4}
.abox.dark p{margin:0;font-size:14px;line-height:1.8}
.abox.dark>.ms{width:48px;height:48px;border-radius:14px;background:rgba(226,166,60,.14);color:#E2A63C;display:flex;align-items:center;justify-content:center;font-size:26px}
.abox .btn{width:100%}
.ashare{display:flex;flex-wrap:wrap;gap:8px}
.ashare a,.ashare button{width:44px;height:44px;border-radius:12px;border:1px solid #E4E9F2;background:#F5F7FB;color:#14224A;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.ashare a:hover,.ashare button:hover{background:#14224A;color:#E2A63C;border-color:#14224A}
.ashare .ms{font-size:22px}
.acopy.ok{background:#E2A63C!important;color:#14224A!important;border-color:#E2A63C!important}
.arel{padding-top:0}
.ameta .acard-cat{background:#E2A63C;color:#14224A}
.prose h3{font-family:'Alexandria',sans-serif;font-size:clamp(17px,2cqi,21px);line-height:1.5;color:#14224A;margin:1.3em 0 .5em}
.prose pre{direction:ltr;text-align:left;background:#0E1B3D;color:#E4E9F2;border-radius:16px;padding:18px 20px;overflow-x:auto;font:500 14px/1.75 ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;box-shadow:inset 0 0 0 1px rgba(226,166,60,.18)}
.prose pre code{font:inherit;white-space:pre}
.prose hr{border:0;height:1px;background:#E4E9F2;margin:2em 0}
.prose .art-tb{overflow-x:auto;border-radius:16px;border:1px solid #E4E9F2;background:#fff}
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.7}
.prose th{background:#14224A;color:#fff;text-align:start;padding:12px 16px;font-weight:700}
.prose td{padding:10px 16px;border-top:1px solid #E4E9F2}
.prose tr:nth-child(even) td{background:#F8F9FC}

/* production */
html,body{margin:0}
body .nq-root{display:block}
.nq-h .hero .logo,.nq-h .badge,.nq-h .hero h1,.nq-h .hero h1 .w,.nq-h .hero p.sub,.nq-h .hero .ctas,.nq-h .seek,.nq-h .crumbs,.nq-h .phero h1,.nq-h .phero p.sub,.nq-h .phero .ctas,.nq-h .phero .win,.nq-h .mosaic{animation:none!important}
@media (prefers-reduced-motion: no-preference){.nq-h .hero h1 .hl{animation:shine 5s linear infinite!important}}
.nq-h .hl::after{animation:none!important}
.nq-ok{display:flex;gap:12px;align-items:flex-start;padding:18px 20px;border-radius:18px;background:#E7F7EE;border:1px solid #9AD8B3;color:#14632F;font-weight:600;line-height:1.7}
.nq-ok.err{background:#FDECEC;border-color:#F2B8B8;color:#8A1F1F}