@font-face{font-family:'Araboto','ANC-FB-AR-Tahoma','ANC-FB-AR-Segoe','ANC-FB-AR-Noto',Tahoma,Arial,sans-serif;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/araboto-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:'Araboto','ANC-FB-AR-Tahoma','ANC-FB-AR-Segoe','ANC-FB-AR-Noto',Tahoma,Arial,sans-serif;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/araboto-500.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:'Araboto','ANC-FB-AR-Tahoma','ANC-FB-AR-Segoe','ANC-FB-AR-Noto',Tahoma,Arial,sans-serif;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/araboto-500.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:'Araboto','ANC-FB-AR-Tahoma','ANC-FB-AR-Segoe','ANC-FB-AR-Noto',Tahoma,Arial,sans-serif;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/araboto-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-400-normal.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}
@font-face{font-family:'IBM Plex Sans','ANC-FB-LAT',Arial,sans-serif;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.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}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-500-normal.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}
@font-face{font-family:'IBM Plex Sans','ANC-FB-LAT',Arial,sans-serif;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-500-normal.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}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-600-normal.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}
@font-face{font-family:'IBM Plex Sans','ANC-FB-LAT',Arial,sans-serif;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-600-normal.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}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-700-normal.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}
@font-face{font-family:'IBM Plex Sans','ANC-FB-LAT',Arial,sans-serif;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-700-normal.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}
:root{--z:1;--gold3:#7A5F08;--navy:#0B2545;--navy2:#071A33;--gold:#C9A227;--gold2:#B38E1A;--petrol:#0E4D64;--sky:#D4E8F6;--slate:#5A6473;--light:#F4F5F7;--line:#D2D6DC;--ink:#1d2f4a;--r:16px;--hh:76px;--ease:cubic-bezier(.22,.8,.24,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 64px)}
html{overflow-x:clip}
body{font-family:'Araboto','IBM Plex Sans Arabic','IBM Plex Sans','ANC-FB-AR-Tahoma','ANC-FB-AR-Segoe','ANC-FB-AR-Noto',Tahoma,Arial,sans-serif;color:var(--navy);background:#fff;line-height:1.75;font-size:16px;overflow-x:clip}
html[lang=en] body{font-family:'IBM Plex Sans','Araboto','IBM Plex Sans Arabic','ANC-FB-LAT',Arial,sans-serif;line-height:1.65}
html.lock{overflow:hidden}
img,svg{max-width:100%}
a{color:inherit}
.wrap{max-width:1180px;margin:auto;padding:0 24px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--gold);color:var(--navy);padding:10px 16px;border-radius:8px;z-index:200;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s ease both}::view-transition-new(root){animation:vt-in .35s var(--ease) both}
@keyframes vt-out{to{opacity:0}}@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* ===== header ===== */
header.top{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .3s,background .3s}
header.top.hd-sc{box-shadow:0 8px 28px rgba(11,37,69,.10)}
header.top .bar{position:absolute;inset-inline:0;bottom:-1px;height:3px;pointer-events:none}
header.top .bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),#e6c24f);transform-origin:left;transform:scaleX(var(--p,0))}
html[dir=rtl] header.top .bar i{transform-origin:right}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--hh);gap:20px;transition:height .3s}
header.top.hd-sc .wrap{height:64px}
.logo{display:block;flex:none}.logo img{height:46px;width:auto;display:block;transition:height .3s}
header.top.hd-sc .logo img{height:40px}
nav.main{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:500;margin-inline-start:auto}
nav.main>a,.dd-l{color:var(--navy);text-decoration:none;padding:10px 12px;border-radius:10px;position:relative;transition:color .2s,background .2s;white-space:nowrap}
nav.main>a:after,.dd-l:after{content:"";position:absolute;inset-inline:12px;bottom:4px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .3s var(--ease);transform-origin:center}
nav.main>a:hover:after,nav.main>a[aria-current]:after,.dd-l:hover:after,.dd-l[aria-current]:after,.dd.cur .dd-l:after{transform:scaleX(1)}
nav.main>a:hover,.dd-l:hover{color:var(--petrol)}
.dd{position:relative;display:flex;align-items:center}
.dd-b{background:none;border:0;cursor:pointer;color:var(--navy);width:28px;height:36px;display:grid;place-items:center;margin-inline-start:-6px;border-radius:8px}
.dd-b svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.dd.open .dd-b svg{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 14px);inset-inline-end:-120px;width:min(880px,calc(92vw / var(--z)));background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 70px rgba(11,37,69,.22);padding:22px 22px 18px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .3s var(--ease),visibility .25s;z-index:5}
.mega:before{content:"";position:absolute;inset-inline:0;top:-16px;height:16px}
.dd.open .mega{opacity:1;visibility:visible;transform:none}
.mg-h{display:flex;justify-content:space-between;align-items:center;padding:0 6px 14px;border-bottom:1px solid var(--line);margin-bottom:12px}
.mg-h span{font-weight:700;color:var(--gold3);font-size:14px;letter-spacing:.04em}
html[lang=en] .mg-h span{text-transform:uppercase;letter-spacing:.12em;font-size:12.5px}
.mg-h a{font-size:14px;font-weight:600;color:var(--petrol);text-decoration:none}.mg-h a:hover{text-decoration:underline}
.mg{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 14px}
.mg a{display:flex;gap:14px;align-items:center;padding:12px 12px;border-radius:12px;text-decoration:none;transition:background .2s,transform .25s var(--ease)}
.mg a:hover,.mg a:focus-visible{background:var(--light);transform:translateX(3px)}
html[dir=rtl] .mg a:hover,html[dir=rtl] .mg a:focus-visible{transform:translateX(-3px)}
.mg img{width:40px;height:40px;flex:none}
.mg b{display:block;font-size:15px;line-height:1.35}.mg small{display:block;color:var(--slate);font-size:12.5px;line-height:1.45;margin-top:2px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.nav-foot{display:none}
.hd-act{display:flex;align-items:center;gap:10px}
.lang{border:1.5px solid var(--navy);border-radius:10px;padding:7px 14px;font-size:14px;font-weight:600;text-decoration:none;color:var(--navy);transition:.2s;white-space:nowrap}
.lang:hover{background:var(--navy);color:#fff}
.burger{display:none;background:none;border:1.5px solid var(--navy);border-radius:10px;width:44px;height:44px;cursor:pointer;color:var(--navy);position:relative}
.burger span{position:absolute;inset-inline:11px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease),opacity .2s,top .35s var(--ease)}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:28px}
.burger[aria-expanded=true] span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:12px;font-weight:600;text-decoration:none;font-size:16px;border:1.5px solid transparent;cursor:pointer;font-family:inherit;transition:transform .25s var(--ease),background .2s,box-shadow .25s;position:relative;overflow:hidden}
.btn:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s}
.btn:hover:before{transform:translateX(120%)}
.btn.gold{background:var(--gold);color:var(--navy)}.btn.gold:hover{background:#d8b231;transform:translateY(-2px);box-shadow:0 12px 26px rgba(201,162,39,.38)}
.btn.ghost{border-color:rgba(255,255,255,.55);color:#fff}.btn.ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn.navy{background:var(--navy);color:#fff}.btn.navy:hover{background:#12335f;transform:translateY(-2px)}
.btn.sm{padding:9px 18px;font-size:14px;border-radius:10px}
.btn.lg{padding:16px 32px;font-size:17px}
.lnk{font-weight:600;color:var(--petrol);text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.lnk:after{content:"←";transition:transform .3s var(--ease)}html[lang=en] .lnk:after{content:"→"}
.lnk:hover:after{transform:translateX(-5px)}html[lang=en] .lnk:hover:after{transform:translateX(5px)}
.more{margin-top:34px}

/* ===== hero ===== */
.hero{background:linear-gradient(160deg,#0B2545 0%,#0B2545 55%,#0a2140 100%);color:#fff;padding:84px 0 70px;position:relative;overflow:hidden;min-height:calc(100vh / var(--z) - var(--hh));display:flex;align-items:center}
.hero>.wrap{position:relative;z-index:2;width:100%}
.net{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9}
.glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;z-index:0;pointer-events:none;animation:drift 18s ease-in-out infinite alternate}
.glow.g1{width:420px;height:420px;background:#1d4f8a;inset-inline-start:-120px;top:-80px}
.glow.g2{width:380px;height:380px;background:var(--gold);opacity:.14;inset-inline-end:-100px;bottom:-120px;animation-duration:24s}
@keyframes drift{to{transform:translate(60px,40px) scale(1.15)}}
.hero-g{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.tag{display:inline-block;color:var(--gold);font-weight:600;margin-bottom:18px;font-size:15px;letter-spacing:.02em;padding:6px 14px;border:1px solid rgba(201,162,39,.45);border-radius:999px;background:rgba(201,162,39,.08)}
html[lang=en] .tag{text-transform:uppercase;letter-spacing:.1em;font-size:12px}
.hero h1{font-size:clamp(32px,4.6vw,58px);line-height:1.2;font-weight:700}
html[lang=en] .hero h1{font-size:clamp(32px,4.3vw,54px);line-height:1.12}
.hero h1 b{color:var(--gold);font-weight:700;background:linear-gradient(100deg,var(--gold) 20%,#f1d77a 50%,var(--gold) 80%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-220% 0}}
.hero p.lead{max-width:600px;margin-top:22px;font-size:18px;color:#D9E3EE}
.btns{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.pillars{display:flex;gap:10px;margin-top:44px;flex-wrap:wrap}
.pillars span{color:var(--gold);font-weight:600;font-size:15px;padding:7px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);display:flex;gap:8px;align-items:center}
.pillars span:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);animation:blink 2.4s infinite}
.pillars span:nth-child(2):before{animation-delay:.4s}.pillars span:nth-child(3):before{animation-delay:.8s}.pillars span:nth-child(4):before{animation-delay:1.2s}
@keyframes blink{50%{opacity:.25;transform:scale(.7)}}
html[lang=en] .pillars span{letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.scroll-cue{position:absolute;bottom:22px;inset-inline:0;margin:auto;width:24px;height:38px;border:2px solid rgba(255,255,255,.4);border-radius:14px;z-index:2}
.scroll-cue i{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* orbit graphic */
.hero-v{display:flex;justify-content:center}
.orbit{--R:172px;position:relative;width:min(100%,440px);aspect-ratio:1;display:block}
.orbit .ring{position:absolute;border-radius:50%;border:1px dashed rgba(255,255,255,.22);inset:0;margin:auto}
.orbit .r1{width:100%;height:100%;animation:spin 90s linear infinite reverse}
.orbit .r2{width:72%;height:72%;border-style:solid;border-color:rgba(201,162,39,.25)}
.orbit .r3{width:46%;height:46%;border-color:rgba(255,255,255,.14)}
.orbit .pulse{position:absolute;inset:0;margin:auto;width:26%;height:26%;border-radius:50%;border:2px solid var(--gold);animation:pulse 3.6s ease-out infinite;opacity:0}
@keyframes pulse{0%{transform:scale(.8);opacity:.7}100%{transform:scale(3.4);opacity:0}}
.orbit .spin{position:absolute;inset:0;animation:spin 70s linear infinite}
.orbit:hover .spin,.orbit:hover .oi-in,.orbit:focus-within .spin,.orbit:focus-within .oi-in{animation-play-state:paused}
.oi{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px;transform:rotate(var(--a)) translateY(calc(var(--R) * -1)) rotate(calc(var(--a) * -1));text-decoration:none;display:block}
.oi-in{display:grid;place-items:center;width:100%;height:100%;border-radius:18px;background:rgba(7,26,51,.78);border:1px solid rgba(201,162,39,.45);box-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 0 18px rgba(201,162,39,.08);backdrop-filter:blur(4px);animation:spin-r 70s linear infinite;transition:background .25s,border-color .25s,box-shadow .25s;position:relative}
.oi:hover .oi-in,.oi:focus-visible .oi-in{background:var(--navy);border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.25),0 10px 30px rgba(0,0,0,.45)}
.oi img{width:34px;height:34px}
.oi em{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);white-space:nowrap;background:var(--gold);color:var(--navy);font-style:normal;font-weight:600;font-size:12.5px;padding:5px 11px;border-radius:8px;opacity:0;pointer-events:none;transition:.25s}
.oi:hover em,.oi:focus-visible em{opacity:1;transform:translateX(-50%)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-r{to{transform:rotate(-360deg)}}
.orbit .core{position:absolute;inset:0;margin:auto;width:27%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 25%,#173f70,var(--navy));border:2px solid rgba(201,162,39,.7);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(201,162,39,.08),0 0 50px rgba(201,162,39,.35);animation:glowp 4s ease-in-out infinite}
.orbit .core img{width:42%;height:auto}
@keyframes glowp{50%{box-shadow:0 0 0 18px rgba(201,162,39,.05),0 0 70px rgba(201,162,39,.5)}}
.sat{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold)}
.sat.s1{animation:sat1 16s linear infinite}.sat.s2{width:7px;height:7px;margin:-3.5px;background:#fff;box-shadow:0 0 12px #fff;animation:sat2 24s linear infinite reverse}
@keyframes sat1{from{transform:rotate(0) translateX(calc(var(--R) * .62))}to{transform:rotate(360deg) translateX(calc(var(--R) * .62))}}
@keyframes sat2{from{transform:rotate(0) translateX(calc(var(--R) * 1.12))}to{transform:rotate(360deg) translateX(calc(var(--R) * 1.12))}}

/* marquee */
.mq{background:var(--navy2);overflow:hidden;border-block:1px solid rgba(201,162,39,.25);--d:1}
html[dir=rtl] .mq{--d:-1}
.mq-t{display:flex;width:max-content;animation:mq 46s linear infinite}
.mq:hover .mq-t{animation-play-state:paused}
.mq span{color:#C9D5E3;font-weight:500;padding:16px 28px;white-space:nowrap;font-size:15px;display:flex;align-items:center;gap:56px}
.mq span:after{content:"";width:7px;height:7px;transform:rotate(45deg);background:var(--gold);flex:none}
@keyframes mq{to{transform:translateX(calc(var(--d) * -50%))}}

/* ===== sections ===== */
section{padding:96px 0;scroll-margin-top:calc(var(--hh) + 20px)}
.alt{background:var(--light)}
.dark{background:var(--navy);color:#fff}
.sec-h{margin-bottom:46px;max-width:700px}
.sec-h.c{margin-inline:auto;text-align:center}
.sec-h span.k{color:var(--gold3);font-weight:700;font-size:14px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:10px}
.sec-h span.k:before{content:"";width:28px;height:2px;background:var(--gold)}
html[lang=en] .sec-h span.k{text-transform:uppercase;letter-spacing:.14em;font-size:12.5px}
.sec-h h2{font-size:clamp(26px,3.4vw,40px);margin-top:8px;line-height:1.3;font-weight:700}
.sec-h p{color:var(--slate);margin-top:12px;font-size:17px}

/* cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid.g2{grid-template-columns:repeat(2,1fr);gap:24px}
.card,.glowc{position:relative;overflow:hidden}
.glowc:before{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(201,162,39,.16),transparent 55%);opacity:0;transition:opacity .35s;pointer-events:none}
.glowc:hover:before{opacity:1}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;transition:transform .35s var(--ease),border-color .3s,box-shadow .35s;display:flex;flex-direction:column;text-decoration:none}
.card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 22px 44px rgba(11,37,69,.13)}
.card .ic{width:62px;height:62px;border-radius:18px;background:var(--light);display:grid;place-items:center;margin-bottom:18px;transition:background .3s,transform .5s var(--ease)}
.card:hover .ic{background:var(--navy);transform:rotate(-6deg) scale(1.06)}
.card .ic img{width:40px;height:40px;transition:filter .3s}
.card:hover .ic img{filter:brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(5deg) brightness(1.05)}
.card .n{position:absolute;inset-inline-end:20px;top:18px;font-weight:700;color:#C8CFD9;font-size:14px;letter-spacing:.1em;transition:color .3s}
.card:hover .n{color:var(--gold)}
.card h3{font-size:18px;line-height:1.45;margin-bottom:8px;font-weight:600}
.card p{font-size:14.5px;color:var(--slate);flex:1}
.card .mini{list-style:none;margin-top:14px;display:grid;gap:6px;font-size:14px;color:var(--ink)}
.card .mini li{display:flex;gap:8px}.card .mini li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:10px;flex:none}
.card .go{margin-top:18px;font-size:14px;font-weight:600;color:var(--petrol);display:inline-flex;gap:6px}
.card .go:after{content:"←";transition:transform .3s var(--ease)}html[lang=en] .card .go:after{content:"→"}
.card:hover .go:after{transform:translateX(-5px)}html[lang=en] .card:hover .go:after{transform:translateX(5px)}
.g2 .card{flex-direction:column;padding:32px 30px}

/* about */
.about{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:start}
.about p{color:var(--ink);margin-top:16px;font-size:17px}
.about p.big{font-size:21px;font-weight:500;line-height:1.85;margin-top:0;color:var(--navy)}
.panel{background:linear-gradient(135deg,#0B2545,#0d2c52);border-radius:22px;border:1px solid rgba(201,162,39,.25);padding:40px;color:#fff;position:sticky;top:110px;overflow:hidden}
.panel:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;border:1px solid rgba(255,255,255,.12);inset-inline-end:-80px;bottom:-90px;box-shadow:0 0 0 40px rgba(255,255,255,.03)}
.panel .qk{display:block;color:var(--gold);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.panel q{display:block;font-size:22px;line-height:1.65;font-weight:600;quotes:none;border-top:4px solid var(--gold);padding-top:18px;position:relative;z-index:1}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:64px}
.stats div{text-align:center;padding:26px 14px;background:#fff;border-radius:var(--r);border:1px solid var(--line);border-bottom:4px solid var(--gold)}
.stats b{display:block;font-size:46px;line-height:1.1;color:var(--navy);font-weight:700}
.stats span{display:block;color:var(--slate);font-size:14.5px;margin-top:6px}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.vm .cd{background:var(--navy);color:#fff;padding:38px;border-radius:20px;border-top:5px solid var(--gold);position:relative;overflow:hidden}
.vm .cd .vi{width:52px;height:52px;border-radius:14px;background:rgba(201,162,39,.15);display:grid;place-items:center;color:var(--gold);margin-bottom:18px}
.vm .cd .vi svg{width:28px;height:28px}
.vm .cd h3{color:var(--gold);font-size:24px;margin-bottom:10px}.vm .cd p{color:#D3DDEA;font-size:17px}
.vals{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.vals .v{background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:14px;padding:22px 18px;transition:transform .3s var(--ease),border-color .3s}
.vals .v:hover{transform:translateY(-5px);border-top-color:var(--gold)}
.vals .v b{display:block;font-size:17px;margin-bottom:6px}.vals .v span{font-size:14.5px;color:var(--slate);display:block}
.vals small{display:block;color:var(--gold3);font-weight:700;margin-bottom:8px;letter-spacing:.1em;font-size:12.5px}

/* flow + timeline */
.flow{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;position:relative;counter-reset:f}
.flow:before{content:"";position:absolute;top:28px;inset-inline:8%;height:2px;background:var(--line)}
.flow:after{content:"";position:absolute;top:28px;inset-inline-start:8%;height:2px;width:84%;background:linear-gradient(90deg,var(--gold),#e6c24f);transform:scaleX(var(--p,0));transform-origin:left;transition:transform 1.6s var(--ease)}
html[dir=rtl] .flow:after{transform-origin:right}
.flow li{text-align:center;position:relative;z-index:1}
.flow .dot{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:#fff;border:2px solid var(--line);font-weight:700;color:var(--navy);transition:.4s var(--ease)}
.flow li:hover .dot,.flow.on .dot{border-color:var(--gold);background:var(--navy);color:var(--gold)}
.flow.on li:nth-child(2) .dot{transition-delay:.25s}.flow.on li:nth-child(3) .dot{transition-delay:.5s}.flow.on li:nth-child(4) .dot{transition-delay:.75s}.flow.on li:nth-child(5) .dot{transition-delay:1s}.flow.on li:nth-child(6) .dot{transition-delay:1.25s}
.flow b{font-size:15px;line-height:1.4;display:block;font-weight:600}
.tl-w{max-width:940px;margin:0}
.tl{list-style:none;position:relative;display:grid;gap:28px;padding-inline-start:84px}
.tl:before{content:"";z-index:0;position:absolute;inset-inline-start:27px;top:0;bottom:0;width:2px;background:var(--line)}
.tl:after{content:"";z-index:0;position:absolute;inset-inline-start:27px;top:0;bottom:0;width:2px;background:linear-gradient(var(--gold),#e6c24f);transform:scaleY(var(--p,0));transform-origin:top}
.tl li{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.tl li:hover{border-color:var(--gold);box-shadow:0 14px 34px rgba(11,37,69,.10)}
.tl .dot{position:absolute;inset-inline-start:-84px;top:18px;width:56px;height:56px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-weight:700;border:3px solid #fff;box-shadow:0 0 0 2px var(--gold)}
.tl h3{font-size:20px;margin-bottom:6px}.tl p{color:var(--slate);font-size:16px}
.alt .tl li,.alt .step{background:#fff}

/* sectors / why */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
.sc:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(11,37,69,.12);border-color:var(--gold)}
.sc .ic{width:56px;height:56px;border-radius:16px;background:var(--navy);color:var(--gold);display:grid;place-items:center;margin-bottom:18px;transition:transform .5s var(--ease)}
.sc:hover .ic{transform:rotate(8deg) scale(1.08)}
.sc .ic svg{width:28px;height:28px}
.sc h3{font-size:19px;margin-bottom:6px}.sc p{font-size:15px;color:var(--slate)}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.chip{display:flex;align-items:center;gap:14px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none;font-weight:600;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.chip svg{width:30px;height:30px;color:var(--gold2);flex:none;transition:transform .5s var(--ease)}
.chip:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 14px 30px rgba(11,37,69,.10)}.chip:hover svg{transform:scale(1.18) rotate(-6deg)}
.dark2{background:var(--navy);color:#fff}
.lead2{max-width:820px;font-size:20px;line-height:1.9;color:#D9E3EE;margin-bottom:44px;border-inline-start:4px solid var(--gold);padding-inline-start:22px}
.why{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:30px 26px;transition:transform .35s var(--ease),border-color .3s}
.why:hover{transform:translateY(-6px);border-color:var(--gold)}
.why small{display:block;color:var(--gold);font-weight:700;letter-spacing:.14em;font-size:30px;line-height:1;margin-bottom:14px;opacity:.9}
.why h3{font-size:19px;margin-bottom:8px}.why p{font-size:15px;color:#C9D5E3}
.note{margin-top:34px;padding-inline-start:20px;border-inline-start:4px solid var(--gold);color:var(--ink);max-width:780px;font-size:17px}

/* band */
.band{background:linear-gradient(120deg,#0B2545,#0a2140);color:#fff;padding:70px 0;position:relative;overflow:hidden}
.band:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 60px rgba(255,255,255,.03),0 0 0 120px rgba(255,255,255,.02);inset-inline-end:-120px;top:-160px}
.band .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;position:relative;flex-wrap:wrap}
.band h2{font-size:clamp(26px,3.2vw,38px);line-height:1.3}.band p{color:#C9D5E3;margin-top:8px;font-size:17px}

/* cta + form */
.cta .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.cta h2{font-size:clamp(28px,3.4vw,38px);line-height:1.3}.cta p{color:#C9D5E3;margin-top:12px}
.cl{list-style:none;margin-top:26px;display:grid;gap:12px}
.cl li{display:flex;gap:14px;align-items:baseline;border-top:1px solid rgba(255,255,255,.16);padding-top:12px}
.cl li span{color:var(--gold);min-width:92px;font-size:14px;font-weight:600}
.cl a{text-decoration:none}.cl a:hover{color:var(--gold)}
form.f{display:grid;gap:12px}
form.f .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f label{font-size:13.5px;color:#C9D5E3;display:block;margin-bottom:4px}
.f input,.f select,.f textarea{font:inherit;padding:13px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);color:#fff;width:100%;transition:border-color .2s,box-shadow .2s,background .2s}
.f select option{color:#000}.f ::placeholder{color:#8FA3BF}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(201,162,39,.3);background:rgba(255,255,255,.1)}
.f .hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.f button{font:inherit;font-weight:700;background:var(--gold);color:var(--navy);border:0;padding:15px;border-radius:12px;cursor:pointer;font-size:16px;transition:transform .25s var(--ease),background .2s}
.f button:hover{background:#d8b231;transform:translateY(-2px)}
.f button:disabled{opacity:.6;cursor:wait}
.msg{padding:12px 14px;border-radius:10px;font-size:15px;display:none}
.msg.ok{display:block;background:rgba(60,170,110,.18);border:1px solid rgba(60,170,110,.6)}
.msg.err{display:block;background:rgba(220,80,80,.16);border:1px solid rgba(220,80,80,.6)}

/* page hero + crumbs */
.ph{background:linear-gradient(160deg,#0B2545,#0B2545 60%,#0a2140);color:#fff;padding:64px 0 70px;position:relative;overflow:hidden}
.ph>.wrap{position:relative;z-index:2}
.ph h1{font-size:clamp(30px,4.2vw,52px);line-height:1.2;margin-top:6px;max-width:800px}
.ph p{color:#D9E3EE;margin-top:14px;font-size:18px;max-width:640px}
.crumb{font-size:14px;color:#B7C6DA;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:4px 0;align-items:center}
.crumb a{text-decoration:none;padding:2px 0}.crumb a:hover{color:var(--gold)}.crumb i{margin:0 10px;font-style:normal;opacity:.5}.crumb span{color:#fff}
.ph.sv{padding:56px 0 64px}
.sv-g{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.ph .no{color:var(--gold);font-weight:700;letter-spacing:.14em;font-size:14px;display:block}
.ph.sv h1{margin:8px 0 16px}
.sv-art{border-radius:26px;box-shadow:0 30px 70px rgba(0,0,0,.4);aspect-ratio:1/1;background:#EDF0F4;position:relative;animation:floaty 7s ease-in-out infinite}
.sv-art>img{width:100%;height:100%;display:block;border-radius:26px}
.sv-art .badge{position:absolute;inset-inline-start:-22px;bottom:34px;width:76px;height:76px;border-radius:22px;background:var(--navy);border:2px solid var(--gold);display:grid;place-items:center;box-shadow:0 14px 34px rgba(0,0,0,.4);animation:floaty 5s ease-in-out infinite reverse}
.sv-art .badge img{width:44px;height:44px}
@keyframes floaty{50%{transform:translateY(-12px)}}
.tabs{position:sticky;top:var(--hh);z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:top .3s}
.tabs .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs a{padding:15px 18px;text-decoration:none;font-weight:600;font-size:15px;color:var(--slate);white-space:nowrap;position:relative}
.tabs a:after{content:"";position:absolute;inset-inline:14px;bottom:0;height:3px;background:var(--gold);transform:scaleX(0);transition:transform .3s var(--ease)}
.tabs a.on{color:var(--navy)}.tabs a.on:after,.tabs a:hover:after{transform:scaleX(1)}
body.sc-on .tabs{top:64px}
.sv-body{display:grid;grid-template-columns:1.25fr .75fr;gap:56px}
.sv-body .txt p{font-size:18px;color:var(--ink);line-height:2}
.sv-body h2{font-size:26px;margin-bottom:14px}
.ticks{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ticks li{display:flex;gap:14px;padding:18px 20px;background:#fff;border-radius:14px;border:1px solid var(--line);align-items:flex-start;transition:transform .3s var(--ease),border-color .3s}
.ticks li:hover{transform:translateY(-3px);border-color:var(--gold)}
.ticks svg{flex:none;width:28px;height:28px;padding:5px;border-radius:50%;background:var(--navy);color:var(--gold);margin-top:1px}
.side{background:var(--navy);color:#fff;border-radius:20px;padding:30px;position:sticky;top:150px;align-self:start}
.side h3{font-size:20px;margin-bottom:8px}.side p{color:#C9D5E3;font-size:15px;margin-bottom:18px}
.side .btn{width:100%}.side hr{border:0;border-top:1px solid rgba(255,255,255,.16);margin:20px 0}
.side a.t{display:block;color:#fff;text-decoration:none;padding:5px 0;font-size:15px}.side a.t:hover{color:var(--gold)}
.rels{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rel{display:flex;gap:12px;align-items:center;padding:16px;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none;font-weight:600;font-size:14.5px;line-height:1.4;transition:transform .3s var(--ease),border-color .3s;position:relative;overflow:hidden}
.rel:hover{transform:translateY(-4px);border-color:var(--gold)}.rel small{display:block;color:var(--gold3);font-size:12px;letter-spacing:.1em}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
.pn a{border:1px solid var(--line);background:#fff;border-radius:14px;padding:22px 24px;text-decoration:none;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.pn a:hover{border-color:var(--gold);box-shadow:0 12px 28px rgba(11,37,69,.10);transform:translateY(-3px)}
.pn small{display:block;color:var(--slate);font-size:13px}.pn b{font-size:17px}
.pn a:last-child{text-align:end}
.box404{padding:140px 0;text-align:center}.box404 .e404{display:block;font-size:120px;line-height:1;color:var(--gold2);font-weight:700}.box404 h1{font-size:36px}.box404 p{color:var(--slate);margin:12px 0 28px}

/* footer */
footer.ft{background:var(--navy2);color:#9FB0C6;padding:64px 0 26px;font-size:14.5px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1.3fr;gap:40px}
footer img{height:58px;width:auto}
footer .fh{font-weight:700;color:#fff;font-size:15px;margin-bottom:14px}
footer a{display:block;text-decoration:none;padding:4px 0;transition:color .2s,transform .25s var(--ease)}footer a:hover{color:var(--gold);transform:translateX(-4px)}
html[lang=en] footer a:hover{transform:translateX(4px)}
footer p{margin-top:14px;max-width:360px}
.fmini{margin-top:12px}.fmini a{color:#fff}
footer small{display:block;margin-top:38px;border-top:1px solid rgba(255,255,255,.1);padding-top:18px}
.totop{position:fixed;inset-inline-end:20px;bottom:20px;width:48px;height:48px;border-radius:50%;border:0;background:var(--gold);color:var(--navy);cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 26px rgba(11,37,69,.3);opacity:0;visibility:hidden;transform:translateY(14px);transition:.3s var(--ease);z-index:80}
.totop.show{opacity:1;visibility:visible;transform:none}.totop:hover{background:#d8b231;transform:translateY(-3px)}
.totop svg{width:22px;height:22px}

/* reveal */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--dd,0) * 90ms)}.js .rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .rv{opacity:1;transform:none}.flow:after{transform:scaleX(1)}.tl:after{transform:scaleY(1)}}

/* ===== responsive ===== */
@media(max-width:1100px){.mega{inset-inline-end:-40px}.rels{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1020px){
 .grid{grid-template-columns:repeat(2,1fr)}.about,.cta .wrap,.sv-g,.sv-body,.hero-g{grid-template-columns:1fr}.panel{position:relative;top:auto}.side{position:static}.vals{grid-template-columns:repeat(2,1fr)}.g3,.chips{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}
 .sv-art{max-width:400px}.hero{min-height:0;padding:56px 0 76px}.hero-v{margin-top:20px}.scroll-cue{display:none}
 .burger{display:block}
 header.top{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
 nav.main{position:fixed;inset-inline:0;top:var(--hh);bottom:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:12px 22px 26px;overflow-y:auto;margin:0;transform:translateY(-14px);opacity:0;visibility:hidden;transition:transform .4s var(--ease),opacity .3s,visibility .4s;z-index:80;font-size:19px}
 header.top.hd-sc nav.main{top:64px}
 body.menu-open nav.main{transform:none;opacity:1;visibility:visible}
 nav.main>a,.dd-l{padding:16px 4px;border-bottom:1px solid var(--line);border-radius:0}
 nav.main>a:after,.dd-l:after{display:none}
 nav.main>a[aria-current],.dd-l[aria-current]{color:var(--petrol);font-weight:700}
 .dd{flex-wrap:wrap;border-bottom:1px solid var(--line)}.dd .dd-l{flex:1;border:0}.dd-b{width:52px;height:52px;margin:0}
 .mega{position:static;width:100%;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0;max-height:0;overflow:hidden;transition:max-height .45s var(--ease);order:3;flex-basis:100%;border-radius:0}
 .mega:before,.mg-h{display:none}
 .dd.open .mega{max-height:900px;padding-bottom:10px}
 .mg{grid-template-columns:1fr}
 .mg a{padding:10px 8px;background:var(--light);margin-bottom:6px}.mg small{display:none}
 .nav-foot{display:grid;gap:8px;margin-top:22px}.nav-foot a{padding:12px 4px;font-size:16px;border:0!important}.nav-foot .btn{color:var(--navy);justify-content:center}
 .hd-act .btn{display:none}
}
@media(max-width:640px){
 :root{--hh:68px}
 section{padding:64px 0}.hero{padding:44px 0 60px}.grid,.grid.g2,.g3,.chips,.vm,.pn,.ticks,.rels,footer .cols,form.f .row{grid-template-columns:1fr}.vals,.stats{grid-template-columns:1fr 1fr}
 .wrap{padding:0 18px}.logo img{height:38px}header.top.hd-sc .logo img{height:34px}.lang{padding:6px 10px}.hd-act{gap:8px}
 .flow{grid-template-columns:repeat(3,1fr);row-gap:22px}.flow:before,.flow:after{display:none}
 .tl{padding-inline-start:64px}.tl:before,.tl:after{inset-inline-start:19px}.tl .dot{inset-inline-start:-64px;width:40px;height:40px;font-size:13px}
 .pn a:last-child{text-align:start}.ph{padding:44px 0 50px}.band .wrap{flex-direction:column;align-items:flex-start}
 .orbit{--R:128px;width:min(92vw,330px)}.oi{width:50px;height:50px;margin:-25px}.oi img{width:28px;height:28px}.oi em{display:none}
 .stats b{font-size:36px}.sv-art .badge{inset-inline-start:-8px}.panel{padding:30px}.panel q{font-size:19px}
 .card .ic{width:54px;height:54px}.totop{inset-inline-end:14px;bottom:14px}
}
.nav-foot a:not(.btn){text-decoration:none;color:var(--navy);text-align:start}

/* ===== v3: motion / depth layer (inspired by 21st.dev, supahero, refero styles, 60fps patterns) ===== */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes ang{to{--ang:360deg}}
/* hero: grid lines + aurora + pointer spotlight */
.hero:before,.ph:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,#000 20%,transparent 75%)}
.aurora{position:absolute;inset:-20%;z-index:0;pointer-events:none;background:conic-gradient(from var(--ang) at 70% 40%,rgba(30,70,130,.0),rgba(30,70,130,.30),rgba(201,162,39,.12),rgba(11,37,69,.0) 70%);filter:blur(60px);animation:ang 26s linear infinite;opacity:.8}
.spot{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(520px circle at var(--sx,70%) var(--sy,40%),rgba(255,255,255,.09),transparent 60%);opacity:0;transition:opacity .5s}
.hero:hover .spot,.ph:hover .spot{opacity:1}
/* glass chips floating around orbit */
.orbit .fchip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:13.5px;font-weight:600;line-height:1.3;box-shadow:0 12px 30px rgba(0,0,0,.28);animation:floaty 6s ease-in-out infinite;pointer-events:none}
.fchip b{font-size:26px;color:var(--gold);line-height:1}
.fchip.c1{top:2%;inset-inline-start:-6%}.fchip.c2{bottom:4%;inset-inline-end:-8%;animation-delay:-3s}
/* split-title words */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.w>i{display:inline-block;font-style:normal;will-change:transform}
/* animated gradient border (beam) on cards */
.card:after,.sc:after,.why:after,.v:after,.rel:after,.chip:after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--ang),transparent 0 62%,var(--gold) 82%,#f1d77a 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;animation:ang 3.2s linear infinite}
.card:hover:after,.sc:hover:after,.why:hover:after,.v:hover:after,.rel:hover:after,.chip:hover:after{opacity:1}
.sc,.why,.v,.chip{position:relative;overflow:hidden}
/* 3D tilt (vars set from JS) */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,border-color .3s,box-shadow .35s}
.tilt.hot{transition:transform .08s linear,border-color .3s,box-shadow .35s}
.card.tilt:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
/* nav glide pill + tab indicator */
nav.main{position:relative}
.pill{position:absolute;top:0;left:0;height:100%;border-radius:10px;background:rgba(11,37,69,.07);pointer-events:none;opacity:0;z-index:0;transition:opacity .25s}
nav.main>a,.dd{z-index:1}
.tabs .wrap{position:relative}.tabs .ind{position:absolute;bottom:0;left:0;height:3px;background:var(--gold);border-radius:3px 3px 0 0;transition:none}
.js .tabs a:after{display:none}
/* band: beam + shimmer text */
.band{isolation:isolate}
.band .btn.gold{box-shadow:0 0 0 0 rgba(201,162,39,.5);animation:ping 2.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 18px rgba(201,162,39,0)}100%{box-shadow:0 0 0 0 rgba(201,162,39,0)}}
/* section heading underline draw */
.sec-h span.k:before{transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease) .15s}
html[dir=rtl] .sec-h span.k:before{transform-origin:right}
.sec-h.in span.k:before,.no-js .sec-h span.k:before{transform:scaleX(1)}
/* shimmer on stats */
.stats b{background:linear-gradient(100deg,var(--navy) 30%,var(--gold2) 50%,var(--navy) 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 7s linear infinite}
@media(max-width:1020px){.fchip.c1{inset-inline-start:0}.fchip.c2{inset-inline-end:0}}
@media(max-width:640px){.orbit .fchip{display:none}}
@media(hover:none){.tilt{transform:none!important}}
.js .rv.in.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,border-color .3s,box-shadow .35s;transition-delay:0s}
.js .rv.in.tilt.hot{transition:transform .08s linear,border-color .3s,box-shadow .35s}
.js .rv.in.card.tilt:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
.hero h1 b:has(.w){background:none;-webkit-text-fill-color:currentColor;color:var(--gold);animation:none}
.hero h1 b .w>i{background:linear-gradient(100deg,var(--gold) 20%,#f6df8c 50%,var(--gold) 80%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:shine 6s linear infinite}
.fchip.c1{top:-3%}

.f [aria-invalid=true]{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.15)}
@media(max-width:1020px){nav.main{position:fixed;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}nav.main .pill{display:none}}
@media(min-width:1021px){.mega{max-height:calc(100vh / var(--z) - 110px);overflow-y:auto;overscroll-behavior:contain}}
.lang-sw{display:inline-flex;gap:0;border:1.5px solid var(--navy);border-radius:10px;overflow:hidden;background:#fff}
.lang-sw .lang{padding:7px 12px;font-size:14px;font-weight:600;text-decoration:none;color:var(--navy);border:0;border-radius:0;background:transparent;line-height:1.4}
.lang-sw .lang+.lang{border-inline-start:1.5px solid var(--navy)}
.lang-sw .lang:hover{background:var(--navy);color:#fff}
@media(max-width:640px){.lang-sw .lang{padding:6px 9px;font-size:13px}}
html[lang=ckb] body{line-height:1.85}

.lang-sw .s{display:none}
@media(max-width:640px){.lang-sw .f{display:none}.lang-sw .s{display:inline}}
@media(max-width:480px){header.top .logo img{height:28px;width:auto}.lang-sw .lang{padding:5px 8px;font-size:12.5px}.burger{width:40px;height:40px}.hd-act{gap:8px}}
@media(max-width:340px){header.top .logo img{height:23px}.lang-sw .lang{padding:5px 6px;font-size:12px}.wrap{padding:0 12px}}

.lang-dd{position:relative}
.lang-dd summary{list-style:none;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1.5px solid var(--navy);border-radius:10px;cursor:pointer;color:var(--navy);font-weight:600;font-size:14px;background:#fff;line-height:1.4;transition:background .2s,color .2s;user-select:none}
.lang-dd summary::-webkit-details-marker{display:none}
.lang-dd summary:hover,.lang-dd[open] summary{background:var(--navy);color:#fff}
.lang-dd .gl{width:20px;height:20px;display:block}.lang-dd .cv{width:14px;height:14px;transition:transform .25s var(--ease)}
.lang-dd[open] .cv{transform:rotate(180deg)}
.lang-dd .ci{display:inline-flex}
.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:170px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(11,37,69,.18);padding:6px;z-index:120;display:grid;gap:2px}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:9px;color:var(--navy);text-decoration:none;font-weight:500;font-size:15px;line-height:1.4}
.lang-menu a:hover{background:var(--light)}
.lang-menu a[aria-current]{background:var(--sky);font-weight:700}
.lang-menu a[aria-current]:after{content:"✓";color:var(--petrol);font-weight:700}
@media(max-width:640px){.lang-dd .cn{display:none}.lang-dd summary{padding:8px 10px;gap:4px}}

.lg-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;color:var(--navy);font-weight:600;font-size:14px;line-height:1.4;transition:background .2s}
.lg-btn:hover{background:rgba(11,37,69,.07)}.lg-btn .gl{width:20px;height:20px}
@media(max-width:1020px){.lg-btn span{display:none}.lg-btn{padding:8px}}
/* content pages created from the control panel */
.cp{max-width:780px}
.cp h2{font-size:clamp(22px,2.6vw,30px);margin:34px 0 12px;font-weight:700;line-height:1.35}
.cp h2:first-child{margin-top:0}
.cp p{margin:0 0 16px;line-height:1.9;color:var(--slate)}
.cp ul{margin:0 0 18px;padding-inline-start:22px;line-height:1.9;color:var(--slate)}
.cp li{margin-bottom:6px}
.cp a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
.fsoc{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fsoc a{font-size:13px;padding:6px 12px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff;text-decoration:none;transition:background .2s,border-color .2s}
.fsoc a:hover{background:rgba(255,255,255,.12);border-color:var(--gold)}
.hd-act .btn,.lg-btn,.main>a,.dd-l{white-space:nowrap}
/* floating WhatsApp button (start side, so it never covers "back to top") */
.wa-fab{position:fixed;inset-inline-start:20px;bottom:20px;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(11,37,69,.28);z-index:80;transition:transform .25s var(--ease)}
.wa-fab svg{width:30px;height:30px}.wa-fab:hover{transform:scale(1.07)}
@media (max-width:700px){.wa-fab{inset-inline-start:14px;bottom:14px;width:50px;height:50px}}
@media print{.wa-fab{display:none}}
/* projects and news */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink);text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,37,69,.12)}
.pimg{display:block;aspect-ratio:16/10;background:var(--light);overflow:hidden}.pimg img{width:100%;height:100%;object-fit:cover;display:block}
.pimg.ph0{background:linear-gradient(135deg,var(--navy),var(--petrol))}
.pbody{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.pbody small{color:var(--slate);font-size:13px}.pbody b{font-size:18px;line-height:1.45;color:var(--navy)}.pbody span{color:var(--slate);font-size:15px;line-height:1.7}
.pbody em{font-style:normal;font-weight:700;color:var(--gold3);margin-top:auto;padding-top:6px}
.pcover{margin:0 0 24px;border-radius:var(--r);overflow:hidden}.pcover img{width:100%;height:auto;display:block}
.pmeta{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;padding:14px 18px;margin:0 0 22px;background:var(--light);border-radius:12px}
.pmeta li{display:flex;flex-direction:column;gap:2px}.pmeta span{font-size:12.5px;color:var(--slate)}.pmeta b,.pmeta a{font-weight:700;color:var(--navy)}
.pback{margin-top:28px}
/* the menu gets one or two more links once projects / news are published: tighten it on mid-size screens */
@media (min-width:1021px) and (max-width:1440px){nav.main{gap:2px;font-size:14.5px}nav.main>a,.dd-l{padding:10px 8px}header.top .wrap{gap:12px}.hd-act{gap:6px}.lg-btn{padding:8px 8px}}
@media (min-width:1021px) and (max-width:1200px){.logo img{height:36px;width:auto}nav.main{font-size:14px}nav.main>a,.dd-l{padding:10px 6px}.hd-act .lg-btn span{display:none}}
.pimg.ph0{display:grid;place-items:center}.pimg.ph0 img{width:62%;height:auto;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.25))}
/* careers */
.jcard .pbody{padding:22px 22px 20px}.jcard b{font-size:19px}
.f input[type=file]{padding:10px;cursor:pointer}.f input[type=file]::file-selector-button{font:inherit;font-weight:600;border:0;border-radius:8px;background:var(--gold);color:var(--navy);padding:6px 12px;margin-inline-end:10px;cursor:pointer}
.f .cons{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#C9D5E3;cursor:pointer}.f .cons input{width:18px;height:18px;flex:none;margin-top:4px;accent-color:var(--gold)}
.f [aria-invalid=true]{border-color:#E57373!important}
.cta .pback{margin-top:22px}

/* --- شعار بلا سطر اسم الشركة (600x76.514): أحجام تعادل مظهره السابق --- */
.logo img{height:34px}
header.top.hd-sc .logo img{height:30px}
footer img[src*="logo-ar"]{height:43px}
@media (min-width:1021px) and (max-width:1200px){.logo img{height:27px}}
@media (max-width:640px){.logo img{height:28px}header.top.hd-sc .logo img{height:25px}}
@media (max-width:480px){header.top .logo img{height:21px}}
@media (max-width:340px){header.top .logo img{height:17px}}

/* ====== أداء الهاتف: توقف الحركات الدائمة والزجاج الثقيل ======
   على الهاتف كانت 29 عنصراً تتحرك بلا توقف، عشرة منها بضبابية زجاجية
   وثلاثة بضبابية كبيرة — وهذا سبب ثقل التصفح. الشكل الساكن يبقى كما هو. */
@media (max-width:860px){
  .glow,.aurora,.orbit .core{animation:none!important}
  .orbit .fchip,.oi-in{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(7,26,51,.9)}
  .glow{filter:blur(40px);opacity:.28}
  .aurora{filter:none;opacity:.22}
}
@media (prefers-reduced-motion:reduce){
  .glow,.aurora,.orbit .spin,.orbit .r1,.orbit .r2,.orbit .pulse,.orbit .core,.orbit .ring,.orbit .sat,.orbit .fchip,.oi-in,.pillars span:before,.scroll-cue i,.hero h1 b,.mq-t{animation:none!important}
  .orbit .fchip,.oi-in{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}

/* ====== سلّم الخط على الهاتف: يكبر ويصغر مع عرض الشاشة بدل مقاس ثابت ====== */
@media (max-width:860px){
  .hero h1{font-size:clamp(25px,6.6vw,34px);line-height:1.3}
  .hero p{font-size:clamp(15px,3.9vw,17px);line-height:1.8}
  h2{font-size:clamp(20px,5.2vw,26px);line-height:1.38}
  h3{font-size:clamp(16.5px,4.2vw,19px);line-height:1.5}
  nav.main a{font-size:16px}
  .btn{font-size:15px}
  .pillars span{font-size:14px}
}

/* ====== تصحيح أسبقية: القواعد القائمة أخصّ من الأسماء المجرّدة ====== */
@media (max-width:860px){
  .sec-h h2{font-size:clamp(20px,5.2vw,26px);line-height:1.38}
  .card h3{font-size:clamp(16.5px,4.2vw,18px);line-height:1.5}
  .hero p.lead{font-size:clamp(15px,3.9vw,17px);line-height:1.8}
  b,i,.btn{animation:none!important}
}
@media (prefers-reduced-motion:reduce){ b,i,.btn{animation:none!important} }

/* ====== مقاسات الأزرار والبطاقات والأقسام على الشاشات الصغيرة ======
   الزرّان الكبير والعادي كانا 64 و52 بكسل جنباً إلى جنب — هذا أصل عدم التناسق. */
@media (max-width:860px){
  section{padding-block:56px}
  .card{padding:22px 20px;border-radius:15px}
  .btn.lg{padding:13px 26px;font-size:16px}
}
@media (max-width:640px){
  section{padding-block:44px}
  .card{padding:20px 18px;border-radius:14px}
  .btn,.btn.lg{padding:11px 20px;font-size:15px}
  .pillars span{padding:6px 14px}
}

/* ====== كل الأزرار بمقاس واحد على الشاشات الصغيرة ======
   .btn.gold كان له حشوه الخاص فبقي أطول بقليل من البقية. */
@media (max-width:860px){
  .btn,.btn.gold,.btn.lg,.btn.ghost{padding:13px 24px;font-size:16px}
}
@media (max-width:640px){
  .btn,.btn.gold,.btn.lg,.btn.ghost{padding:11px 20px;font-size:15px}
}


/* ===== إصلاح 1 — قائمة الخدمات المنسدلة على الشاشات الكبيرة (v=20261024e) =====
   كانت تُثبّت من الحافة المنطقية فتنزاح خارج الإطار في الواجهة العربية.
   الحل: تثبيتها من وسط شريط التنقّل. */
@media (min-width:1021px){
  .dd{position:static}
  .mega{
    inset-inline-end:auto;
    inset-inline-start:auto;
    left:50%;
    margin-left:calc(min(880px, 92vw / var(--z)) / -2);
  }
}

/* ===== إصلاح 2 — الشريط العلوي على الهاتف (v=20261024e) =====
   علامة مدمجة بدل الشعار العريض، وأيقونات بلا علب، ومساحات لمس 44px. */
@media (max-width:560px){
  header.top a.logo{display:block;line-height:0}
  header.top a.logo img{height:20px;width:auto;max-width:none;display:block}
  .hd-act{gap:2px}
  .hd-act .lg-btn{
    width:44px;height:44px;min-width:0;padding:0;border:0;background:none;box-shadow:none;
    display:flex;align-items:center;justify-content:center;
  }
  .hd-act .lg-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .hd-act .lg-btn svg{width:22px;height:22px}
  .hd-act .lang-dd > summary{
    width:44px;height:44px;padding:0;border:0;background:none;box-shadow:none;border-radius:0;
    display:flex;align-items:center;justify-content:center;
  }
  .hd-act .lang-dd > summary .cn,
  .hd-act .lang-dd > summary .cv{display:none}
  .hd-act .lang-dd > summary .ci svg,
  .hd-act .lang-dd > summary svg.ci{width:22px;height:22px}
  .burger{
    width:44px;height:44px;padding:0;border:0;background:none;box-shadow:none;border-radius:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  }
  .burger span{width:22px;height:2px;border-radius:2px}
}


/* ===== خطوط احتياطية مطابقة المقاسات — تلغي قفزة التخطيط عند تبديل الخط (v=20261024g) =====
   القياس الفعلي لكل 100px من المربع الطباعي:
     Araboto            عرض 1738.2 · صعود 89 · هبوط 22
     Tahoma             عرض 1470.9  → size-adjust 118.2%
     Segoe UI           عرض 1459.9  → size-adjust 119.1%
     Noto Sans Arabic   عرض 1383.5  → size-adjust 125.6%   (أندرويد)
     IBM Plex Sans      عرض 2555.7 · صعود 103 · هبوط 28
     Arial              عرض 2557.0  → مطابق أفقياً (99.9%)، التصحيح رأسي فقط
   الصعود والهبوط = القيمة الأصلية ÷ معامل التكبير، كي يبقى صندوق السطر كما هو.
   إن لم يكن الخط الاحتياطي مثبّتاً على الجهاز يسقط التعريف بلا أثر — لا انحدار. */
@font-face{
  font-family:'ANC-FB-AR-Tahoma'; src:local('Tahoma');
  size-adjust:118.2%; ascent-override:75.3%; descent-override:18.6%; line-gap-override:0%;
}
@font-face{
  font-family:'ANC-FB-AR-Segoe'; src:local('Segoe UI');
  size-adjust:119.1%; ascent-override:74.7%; descent-override:18.5%; line-gap-override:0%;
}
@font-face{
  font-family:'ANC-FB-AR-Noto'; src:local('Noto Sans Arabic');
  size-adjust:125.6%; ascent-override:70.9%; descent-override:17.5%; line-gap-override:0%;
}
@font-face{
  font-family:'ANC-FB-LAT'; src:local('Arial'),local('Helvetica');
  size-adjust:99.9%; ascent-override:103.1%; descent-override:28.0%; line-gap-override:0%;
}


/* ===== طبقة الحركة — أسرع وأجمل بلا كلفة على السلاسة (v=20261024h) =====
   المبدأ: كل حركة هنا على transform أو opacity فقط، وهاتان تُنفَّذان على بطاقة
   الرسم (compositor) لا على الخيط الرئيسي، فلا تتداخلان مع التمرير ولا التنقّل.
   المستبعَد عمداً من الهاتف: .glow (ضبابية متحركة) و.aurora (تدرّج مخروطي
   بزاوية متحركة) و.orbit .core (ظلّ متحرك) — ثلاثتها إعادة رسم كاملة كل إطار. */

/* 1 · إيقاع أسرع للحركات الدائمة */
.mq-t{animation-duration:30s}
.orbit .spin{animation-duration:48s}
.orbit .ring{animation-duration:58s}
.oi-in{animation-duration:48s}
.orbit .fchip{animation-duration:4.6s}
.orbit .pulse{animation-duration:2.4s}
.scroll-cue i{animation-duration:1.4s}
.hero h1 b,b,i{animation-duration:5s}

@media (max-width:860px){
  .mq-t{animation-duration:24s}
  .orbit .spin{animation-duration:40s}
  .orbit .ring{animation-duration:48s}
  .oi-in{animation-duration:40s}
  .orbit .fchip{animation-duration:4s}
  .orbit .pulse{animation-duration:2.1s}
  .scroll-cue i{animation-duration:1.25s}
}

/* 2 · دخول الشاشة الأولى — مرة واحدة، وتنتهي دائماً بالظهور (both) */
@keyframes anc-in{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hero-t > *{animation:anc-in .42s cubic-bezier(.22,.61,.36,1) both}
  .hero-t > *:nth-child(1){animation-delay:.02s}
  .hero-t > *:nth-child(2){animation-delay:.08s}
  .hero-t > *:nth-child(3){animation-delay:.14s}
  .hero-t > *:nth-child(4){animation-delay:.2s}
  .hero-t > *:nth-child(5){animation-delay:.26s}
}

/* 3 · ظهور مربوط بالتمرير نفسه لا بمؤقّت ولا بمراقب JavaScript.
       ينفّذه المتصفح على بطاقة الرسم، وإن لم يدعمه لا يتغيّر شيء ولا يختفي محتوى. */
/* أُزيلت كتلة الظهور بالتمرير: القياس على الصفحة الحيّة أظهر 13 عنصراً تبقى
   بشفافية صفر لأن المسار الزمني view() لا ينحلّ داخل حاويات هذه الصفحة.
   محتوى مخفي ثمنٌ لا تستحقّه أي حركة — فالظهور يبقى معطّلاً حتى يُعالَج مراقب
   .rv نفسه (خمسة عناصر من أربعين فقط تُفعَّل حالياً). */

/* 4 · ردّ فعل فوري للمس والضغط */
.btn{transition:transform .14s cubic-bezier(.22,.61,.36,1),box-shadow .18s,background-color .18s,border-color .18s}
.btn:active{transform:translateY(1px) scale(.985)}
@media (hover:hover){
  .card{transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .24s,border-color .24s}
  .card:hover{transform:translateY(-4px)}
  nav.main a{transition:color .16s}
}


/* ===== وضع «موقع مصمّم للكمبيوتر» على الهاتف (v=20261024j) =====
   fit.js يضع الصنف dsk والمتغيّر --dz حين يكتشف أن إطار العرض أعرض من الشاشة
   الفعلية بأكثر من 1.3 مع مؤشّر لمسي. نعوّض تصغير المتصفح بتكبير مقابل، فيعود
   المقاس إلى حجمه الطبيعي وتسري عليه نقاط التوقّف الخاصة بالهاتف.
   لا يمسّ الحاسوب إطلاقاً: المؤشّر هناك دقيق لا لمسي. */
html.dsk body{zoom:var(--dz,1)}
html.dsk{overflow-x:hidden}


/* ===== ضبط المقاسات على الهاتف — على الجذر لا على الصفحة الرئيسية وحدها (v=20261024k) =====
   سبب الخلل السابق: سلّم الخط رُبط بأصناف الصفحة الرئيسية (.sec-h h2 و.card h3)
   فبقيت الصفحات الداخلية — الخدمات والقطاعات والمنهجية ولماذا نحن ومن نحن —
   على مقاساتها الأصلية. القياس على عرض 412:
     h2 = 26px في approach و sectors و why وصفحات الخدمات الثماني
     h3 = 24px في about
     .sv-art = 360x360 أي 87% من عرض الشاشة في الصفحات الثماني
     .card .ic = 54px  و .sc .ic = 56px
   العلاج هنا يبدأ من العنصر نفسه ثم يغطّي الأصناف، فيسري على كل صفحة حالية ومقبلة. */
@media (max-width:860px){
  /* جرد كامل لقواعد المقاس في الملف — خمس عشرة قاعدة — كلٌّ منها مذكورة بالاسم
     كي لا تنجو واحدة بأسبقيتها كما نجت .vm .cd h3 سابقاً */
  h1,.hero h1,html[lang="en"] .hero h1,.ph h1,.box404 h1{
    font-size:clamp(22px,6.2vw,32px);line-height:1.25}
  h2,.sec-h h2,.band h2,.cta h2,.sv-body h2,.cp h2{
    font-size:clamp(18px,4.9vw,23px);line-height:1.32}
  h3,.card h3,.vm .cd h3,.tl h3,.sc h3,.why h3,.side h3,.sv-body h3,aside h3{
    font-size:clamp(15.5px,4.1vw,18px);line-height:1.4}

  .sv-art,.sv-g .sv-art{max-width:min(230px,58vw);margin-inline:auto}
  .sv-art img{width:100%;height:auto;display:block}

  .card .ic,.sc .ic{width:44px;height:44px;border-radius:13px}
  .card .ic img{width:24px;height:24px}
  .sc .ic svg{width:22px;height:22px}
}
@media (max-width:420px){
  .sv-art,.sv-g .sv-art{max-width:min(196px,52vw)}
  .card .ic,.sc .ic{width:40px;height:40px;border-radius:12px}
  .card .ic img{width:22px;height:22px}
  .sc .ic svg{width:20px;height:20px}
}


/* ===== شريط تبويبات صفحات الخدمات على الهاتف (v=20261024n) =====
   القياس على عرض 412: التبويبات الأربعة تحتاج 453px والمتاح 397px، فكان
   «اطلب الخدمة» يقع عند left = -71 أي خارج الشاشة ولا يمكن الوصول إليه —
   وهو زرّ الطلب نفسه، في الصفحات الثماني بلغاتها الثلاث.
   العلاج: تصغير القياس كي تدخل الأربعة، مع تمرير أفقي كضمان على الشاشات الأضيق. */
@media (max-width:860px){
  .tabs{
    display:flex;flex-wrap:nowrap;gap:2px;
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tabs > *{flex:0 0 auto;scroll-snap-align:start}
  /* .tabs a أخصّ من .tabs > * — تُذكر بالاسم وإلا بقيت على 15px و18px حشواً */
  .tabs a{
    font-size:clamp(12.5px,3.3vw,14px);
    padding:13px 8px;white-space:nowrap;scroll-snap-align:start;
  }
}


/* ===== الأزرار تتصرّف كأزرار لا كنصّ (v=20261024p) =====
   على أندرويد كان الضغط المطوّل على «اطلب خدمة» يرسم مربّع تحديد أزرق بمقابض
   ويغطّي لون الزرّ، لأن المتصفح يعامل الوسم <a> كمحتوى قابل للتحديد.
   العلاج على الجذر: كل عنصر تفاعلي يفقد وميض اللمس وقائمة الضغط المطوّل
   وإمكان التحديد. نصوص المحتوى تبقى قابلة للنسخ — المنع للأزرار وحدها. */
.btn,.burger,.lang-dd > summary,.lg-btn,nav.main a,.tabs a,.dd-b,.logo,.scroll-cue,.mq-t{
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.card,.ic,.sc,.oi{ -webkit-tap-highlight-color:transparent; }
/* إزالة الوميض لا تعني إزالة الوضوح: حلقة تركيز واضحة لمن يتنقّل بلوحة المفاتيح */
.btn:focus-visible,nav.main a:focus-visible,.tabs a:focus-visible,
.burger:focus-visible,.lang-dd > summary:focus-visible,.lg-btn:focus-visible,.card:focus-visible{
  outline:2px solid #c9a227;outline-offset:3px;border-radius:10px;
}