/* التكاتف الكويتي — الموقع العام (2 نوفمبر 2026)
   فاتح ونظيف بهوية الشعار: الأحمر والأسود والأخضر (الأشخاص الثلاثة) — شريط ثلاثي يرسم كل قسم.
   الأرقام: GE Flow يرسمها هندية وصغيرة، فالخط مستبعد عن 0-9 (unicode-range) وتطلع بخط أرقام لاتيني كبير. */
@font-face{font-family:"GE Flow";src:url("../fonts/ge-flow-regular.otf") format("opentype");font-weight:400;font-display:swap;unicode-range:U+0000-002F,U+003A-FFFF;size-adjust:116%}
@font-face{font-family:"GE Flow";src:url("../fonts/ge-flow-bold.otf") format("opentype");font-weight:700;font-display:swap;unicode-range:U+0000-002F,U+003A-FFFF;size-adjust:116%}

:root{
  --paper:#F6F6F2;
  --surface:#FFFFFF;
  --ink:#14171A;
  --ink-2:#4B5157;
  --mute:#80868C;
  --line:#E2E3DD;
  --red:#C6242C;
  --red-2:#A41C23;
  --green:#2F8A3F;
  --red-soft:#FBEBEC;
  --green-soft:#E9F4EB;
  --ar:"GE Flow","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --num:"Outfit","IBM Plex Sans Arabic",system-ui,sans-serif;
  --display:var(--ar);
  --body:var(--ar);
  --wrap:1240px;
  --r:18px;
  --ease:cubic-bezier(.2,.75,.2,1);
  --dock:0px;
  color-scheme:light;
}
html[lang=en]{--display:"Outfit","IBM Plex Sans Arabic",sans-serif;--body:"IBM Plex Sans Arabic","Segoe UI",sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.85;padding-bottom:var(--dock);-webkit-tap-highlight-color:transparent;overflow-x:hidden}
html[lang=en] body{line-height:1.7}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.35;text-wrap:balance;margin:0}
html[lang=en] h1,html[lang=en] h2{line-height:1.1;letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:8px}
[dir=ltr] .flip{transform:scaleX(-1)}
.num,.ltr{font-family:var(--num);font-variant-numeric:tabular-nums}
/* «1 / 5» و«01 / 07» تنقلب بالعربي لو ما انعزلت */
.num,.step-n,.lb-top span{direction:ltr;unicode-bidi:isolate}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* tri-band: the logo's three figures */
.tri{display:inline-flex;gap:4px;width:54px;height:5px;flex:none}
.tri i{flex:1;border-radius:3px;background:var(--ink)}
.tri i:first-child{background:var(--red)}
.tri i:last-child{background:var(--green)}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;color:var(--ink-2)}
html[lang=en] .eyebrow span{text-transform:uppercase;letter-spacing:.1em;font-size:12px}
.sec{padding-block:clamp(64px,10vw,120px)}
.sec-head{display:grid;gap:14px;max-width:760px}
.sec-head h2{font-size:clamp(28px,4.2vw,50px)}
.sec-head p{color:var(--ink-2);font-size:clamp(16px,1.6vw,18px)}
.sec-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,48px)}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;min-height:50px;border-radius:999px;font-weight:700;font-size:15px;border:1.5px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s,transform .3s var(--ease);background:none}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:var(--from,right);transition:transform .45s var(--ease)}
[dir=ltr] .btn::before{--from:left}
.btn:hover::before{transform:scaleX(1)}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none}
.btn-red{background:var(--red);color:#fff}
.btn-red::before{background:var(--ink)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line::before{background:var(--ink)}
.btn-line:hover{color:#fff}
.btn-white{background:#fff;color:var(--ink)}
.btn-white::before{background:var(--red)}
.btn-white:hover{color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost::before{background:#fff}
.btn-ghost:hover{color:var(--ink)}

/* ── intro: three figures rise, then the page ── */
.intro{position:fixed;inset:0;z-index:200;background:var(--surface);display:grid;place-items:center;transition:opacity .5s ease .1s,visibility .6s}
.intro.done{opacity:0;visibility:hidden}
.intro-mark{display:flex;gap:10px;align-items:flex-end;height:64px}
.intro-mark i{width:16px;border-radius:8px;background:var(--ink);animation:bar 1s var(--ease) both}
.intro-mark i:nth-child(1){background:var(--red);height:46px}
.intro-mark i:nth-child(2){height:64px;animation-delay:.08s}
.intro-mark i:nth-child(3){background:var(--green);height:46px;animation-delay:.16s}
@keyframes bar{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}

/* scroll progress */
.prog{position:fixed;top:env(safe-area-inset-top,0px);inset-inline:0;height:3px;z-index:70;transform-origin:var(--from,right);transform:scaleX(0);background:linear-gradient(270deg,var(--red) 0 33%,var(--ink) 33% 66%,var(--green) 66%)}
[dir=ltr] .prog{--from:left;background:linear-gradient(90deg,var(--red) 0 33%,var(--ink) 33% 66%,var(--green) 66%)}

/* ── header ── */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;transition:background .35s,box-shadow .35s,backdrop-filter .35s}
.hdr.solid{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line),0 14px 30px -26px rgba(20,23,26,.5)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:80px;transition:height .35s var(--ease)}
.hdr.solid .wrap{height:66px}
.brand{display:flex;align-items:center;gap:12px;position:relative;z-index:3}
.brand img{height:52px;width:auto;transition:height .35s var(--ease)}
.hdr.solid .brand img{height:42px}
.brand b{font-family:var(--display);font-size:19px;line-height:1.2;display:block}
.brand small{display:block;font-size:10.5px;color:var(--ink-2);letter-spacing:.08em;font-family:var(--num)}
.nav{display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:999px;padding:5px;position:relative}
.nav a{position:relative;z-index:1;padding:8px 14px;border-radius:999px;font-weight:700;font-size:14.5px;color:var(--ink-2);white-space:nowrap;transition:color .25s}
.nav a:hover,.nav a.on{color:var(--ink)}
.nav .pill{position:absolute;top:5px;bottom:5px;border-radius:999px;background:var(--surface);box-shadow:0 2px 10px -4px rgba(20,23,26,.35),inset 0 -2px 0 var(--red);transition:inset .45s var(--ease),width .45s var(--ease),left .45s var(--ease);z-index:0}
.nav-foot{display:none}
.hdr-cta{display:flex;align-items:center;gap:10px;position:relative;z-index:3}
.lang{font-size:13px;font-weight:700;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 14px;min-height:40px;cursor:pointer;font-family:var(--num)}
.lang:hover{border-color:var(--ink)}
.lang[lang=ar]{font-family:"GE Flow",sans-serif;font-size:14px}
.menu-btn{display:none;position:relative;width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer}
.menu-btn i{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--ink);transition:transform .4s var(--ease),opacity .2s}
.menu-btn i:nth-child(1){top:16px}.menu-btn i:nth-child(2){top:22px}.menu-btn i:nth-child(3){top:28px}
.menu-open .menu-btn i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn i:nth-child(2){opacity:0}
.menu-open .menu-btn i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1080px){
  /* backdrop-filter على الهيدر يحبس القائمة الثابتة داخله (يصير هو الحاوية) — لما تنفتح نشيله */
  .menu-open .hdr{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface)}
  .menu-btn{display:block}
  .hdr-cta .btn{display:none}
  .nav{position:fixed;inset:0;z-index:2;flex-direction:column;align-items:stretch;gap:0;border:0;border-radius:0;background:var(--surface);padding:calc(100px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));clip-path:circle(0% at var(--cx,92%) 40px);visibility:hidden;transition:clip-path .6s var(--ease),visibility 0s .6s;overflow-y:auto}
  [dir=ltr] .nav{--cx:8%}
  .menu-open .nav{clip-path:circle(150% at var(--cx,92%) 40px);visibility:visible;transition:clip-path .6s var(--ease)}
  .nav .pill{display:none}
  .nav a{font-family:var(--display);font-size:clamp(28px,8vw,40px);padding:12px 0;border-radius:0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(18px)}
  .nav a::after{content:"←";font-family:var(--num);font-size:.6em;color:var(--mute)}
  [dir=ltr] .nav a::after{content:"→"}
  .nav a.on{color:var(--red)}
  .menu-open .nav a{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .55s var(--ease);transition-delay:calc(.15s + var(--i)*.05s)}
  .nav-foot{display:grid;gap:12px;margin-top:auto;padding-top:28px;color:var(--ink-2)}
}

/* ── hero ── */
.hero{position:relative;padding-block:clamp(18px,3vw,36px) 0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,56px);align-items:center;min-height:min(78vh,760px)}
.hero h1{font-size:clamp(42px,7.2vw,96px);margin-block:18px 18px;line-height:1.18}
html[lang=en] .hero h1{line-height:1.02}
.hero h1 .ln{display:block;overflow:hidden;padding-block:.06em}
.hero h1 .ln>span{display:inline-block;animation:rise 1s var(--ease) both;animation-delay:calc(var(--d,0) * 1s + var(--start,0s))}
.hero h1 em{font-style:normal;color:var(--red);position:relative}
.hero h1 em::after{content:"";position:absolute;inset-inline:0;bottom:.06em;height:.1em;background:var(--red);opacity:.16;border-radius:4px}
.hero h1 .g{color:var(--green)}
.hero-lead{font-size:clamp(16px,1.7vw,19px);color:var(--ink-2);max-width:540px;animation:fadeUp .9s var(--ease) both;animation-delay:calc(.3s + var(--start,0s))}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;animation:fadeUp .9s var(--ease) both;animation-delay:calc(.42s + var(--start,0s))}
.hero-stats{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:clamp(18px,3vw,40px);margin-top:clamp(28px,4vw,44px);animation:fadeUp .9s var(--ease) both;animation-delay:calc(.54s + var(--start,0s))}
.hstat{display:grid;gap:2px;justify-items:start}
.hstat b{font-family:var(--num);font-weight:700;font-size:clamp(38px,4.4vw,56px);line-height:1;letter-spacing:-.02em;display:flex;align-items:flex-start;gap:2px;direction:ltr}
.hstat b sup{font-size:.48em;color:var(--red);line-height:1}
.hstat>span{font-size:14.5px;color:var(--ink-2);font-weight:700}
.hstat b span{font-size:inherit}
@media (max-width:620px){.hero-stats{grid-template-columns:repeat(2,1fr);gap:18px 22px}}

.stage{position:relative;animation:fadeIn 1.2s var(--ease) both;animation-delay:var(--start,0s)}
.slides{position:relative;aspect-ratio:4/4.6;border-radius:28px 28px 28px 160px;overflow:hidden;background:#d9dad5;box-shadow:0 40px 80px -50px rgba(20,23,26,.6)}
[dir=ltr] .slides{border-radius:28px 28px 160px 28px}
.slide{position:absolute;inset:0;clip-path:inset(0 0 0 100%);transition:clip-path 1.1s var(--ease)}
[dir=ltr] .slide{clip-path:inset(0 100% 0 0)}
.slide.on{clip-path:inset(0 0 0 0);z-index:2}
.slide.prev{clip-path:inset(0 0 0 0);z-index:1}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 7s linear}
.slide.on img{transform:scale(1)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,16,18,.55),transparent 45%)}
.slide-meta{position:absolute;inset:auto 0 0;z-index:4;padding:22px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;color:#fff}
.slide-label{display:grid;gap:2px;font-weight:700}
.slide-label small{font-size:12px;opacity:.75;font-family:var(--num);letter-spacing:.08em}
.slide-label a{font-size:clamp(16px,1.8vw,20px)}
.slide-label a:hover{text-decoration:underline;text-underline-offset:4px}
.dots{display:flex;gap:6px}
.dots button{width:26px;height:4px;padding:0;border:0;border-radius:3px;background:rgba(255,255,255,.45);cursor:pointer;position:relative;overflow:hidden}
.dots button.on{width:46px;background:rgba(255,255,255,.35)}
.dots button.on::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:var(--from,right);animation:fill 5s linear both}
[dir=ltr] .dots button.on::after{--from:left}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.stamp{position:absolute;z-index:5;top:28px;inset-inline-start:-26px;width:132px;height:132px;border-radius:50%;background:var(--surface);display:grid;place-items:center;box-shadow:0 22px 44px -24px rgba(20,23,26,.5);animation:float 6s ease-in-out infinite}
.stamp svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.stamp svg text{font-family:var(--ar);font-size:10.6px;font-weight:700;fill:var(--ink);letter-spacing:.5px}
html[lang=en] .stamp svg text{font-family:var(--num);font-size:9.6px;letter-spacing:1.4px}
.stamp .grade{font-family:var(--display);font-size:46px;font-weight:700;color:var(--red);line-height:1}
.stamp .grade small{display:block;font-size:10px;color:var(--ink-2);text-align:center;font-family:var(--ar);margin-top:2px}
.float-card{position:absolute;z-index:5;bottom:-22px;inset-inline-end:28px;background:var(--surface);border-radius:18px;padding:14px 16px;display:flex;gap:12px;align-items:center;box-shadow:0 24px 50px -26px rgba(20,23,26,.55);max-width:300px;animation:float 7s ease-in-out infinite reverse}
.float-card .av{display:flex}
.float-card .av img{width:36px;height:36px;border-radius:50%;object-fit:contain;background:var(--paper);border:2px solid #fff;padding:3px}
.float-card .av img+img{margin-inline-start:-10px}
.float-card b{display:block;font-size:14px}
.float-card small{color:var(--ink-2);font-size:12.5px}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .stage{order:-1}
  .slides{aspect-ratio:4/3.5;border-radius:22px 22px 22px 110px}
  [dir=ltr] .slides{border-radius:22px 22px 110px 22px}
  .stamp{width:104px;height:104px;top:auto;bottom:-30px;inset-inline-start:14px}
  .stamp .grade{font-size:36px}
  .float-card{display:none}
  .hero-copy{padding-top:28px}
}
@media (max-width:520px){.hero-actions .btn{flex:1 1 100%}}

/* marquee */
.marquee{margin-top:clamp(48px,7vw,80px);border-block:1px solid var(--line);background:var(--surface);overflow:hidden;padding-block:20px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:54px;width:max-content;animation:marq 42s linear infinite}
[dir=ltr] .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee a{display:flex;align-items:center;gap:12px;flex:none;font-weight:700;font-size:15px;color:var(--ink-2);white-space:nowrap}
.marquee img{height:46px;width:auto;filter:grayscale(1);opacity:.72;transition:filter .3s,opacity .3s}
.marquee a:hover img{filter:none;opacity:1}

/* ── companies ── */
.co-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.co{position:relative;display:grid;grid-template-rows:auto 1fr;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s,border-color .5s;transform-style:preserve-3d;--mx:50%;--my:50%}
.co::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(198,36,44,.08),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.co:hover::before{opacity:1}
.co::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:linear-gradient(90deg,var(--red) 0 33%,var(--ink) 33% 66%,var(--green) 66%);transform:scaleX(0);transform-origin:var(--from,right);transition:transform .55s var(--ease)}
[dir=ltr] .co::after{--from:left}
.co:hover{box-shadow:0 30px 60px -36px rgba(20,23,26,.5);border-color:#d3d5ce}
.co:hover::after{transform:scaleX(1)}
.co-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 22px 0}
.co-logo{width:88px;height:70px;border-radius:14px;background:var(--paper);display:grid;place-items:center;padding:8px;transition:transform .5s var(--ease)}
.co:hover .co-logo{transform:translateZ(30px) scale(1.05)}
.co-logo img{max-height:54px;width:auto;object-fit:contain}
.tag{font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--paper);color:var(--ink-2);white-space:nowrap}
.tag.r{background:var(--red-soft);color:var(--red)}
.tag.g{background:var(--green-soft);color:var(--green)}
.co-body{padding:18px 22px 22px;display:grid;gap:8px;align-content:start}
.co-body h3{font-size:20px}
.co-body p{color:var(--ink-2);font-size:14.5px;line-height:1.8}
.more{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-weight:700;font-size:14px;color:var(--red)}
.more svg{width:16px;height:16px;transition:translate .35s var(--ease)}
.co:hover .more svg,.pj:hover .more svg{translate:-6px 0}
[dir=ltr] .co:hover .more svg,[dir=ltr] .pj:hover .more svg{translate:6px 0}
@media (max-width:1000px){.co-grid{grid-template-columns:repeat(2,1fr)}}
.swipe-hint{display:none;font-size:13px;color:var(--mute);align-items:center;gap:8px;margin-bottom:12px}
.swipe-hint svg{width:18px;height:18px}
@media (max-width:700px){
  .rail{display:grid;grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:calc(-1 * max(18px,env(safe-area-inset-left,0px)));padding-inline:max(18px,env(safe-area-inset-left,0px));padding-bottom:12px;scrollbar-width:none;overscroll-behavior-x:contain}
  .rail::-webkit-scrollbar{display:none}
  .rail>*{scroll-snap-align:start}
  .swipe-hint{display:flex}
  .co-grid:not(.rail){grid-template-columns:1fr}
}

/* ── projects ── */
.pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pj-grid.feature{grid-template-columns:1.5fr 1fr 1fr}
.pj-grid.feature .pj:first-child{grid-row:span 2}
.pj-grid.feature .pj:first-child .pj-img{aspect-ratio:auto;height:100%;min-height:460px}
.pj{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--ink);color:#fff;isolation:isolate}
.pj-img{aspect-ratio:4/3.2;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pj:hover .pj-img{transform:scale(1.08)}
.pj::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,16,18,.88),rgba(14,16,18,.1) 58%,transparent);z-index:1}
.pj-info{position:absolute;inset:auto 0 0;z-index:2;padding:20px;display:grid;gap:6px}
.pj-info h3{font-size:clamp(18px,2vw,23px)}
.pj-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:#d6d9dc}
.pj-chip{position:absolute;top:14px;inset-inline-start:14px;z-index:2;background:rgba(255,255,255,.95);color:var(--ink);font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px}
.pj-count{position:absolute;top:14px;inset-inline-end:14px;z-index:2;background:rgba(14,16,18,.6);font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;backdrop-filter:blur(6px);display:flex;gap:6px;align-items:center;font-family:var(--num)}
.pj-count svg{width:14px;height:14px}
.pj .more{color:#fff}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 18px;min-height:44px;font-weight:700;font-size:14px;color:var(--ink-2);cursor:pointer;transition:all .3s}
.filters button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pj.hide{display:none}
.count-line{color:var(--mute);font-size:14px;font-weight:700}
.empty{display:grid;justify-items:center;text-align:center;gap:12px;padding:56px 20px;border:1.5px dashed #cfd1ca;border-radius:var(--r);background:var(--surface)}
.empty .tri{width:80px;height:6px}
.empty h3{font-size:22px}
.empty p{color:var(--ink-2);max-width:460px}
@media (max-width:1000px){.pj-grid,.pj-grid.feature{grid-template-columns:1fr 1fr}.pj-grid.feature .pj:first-child{grid-column:span 2;grid-row:auto}.pj-grid.feature .pj:first-child .pj-img{min-height:0;aspect-ratio:16/10}}
@media (max-width:700px){.pj-grid:not(.rail),.pj-grid.feature:not(.rail){grid-template-columns:1fr}.pj-grid.feature .pj:first-child{grid-column:auto}.pj-grid.rail .pj-img{aspect-ratio:3/3.7}}

/* gallery */
.gallery{columns:3 250px;column-gap:14px}
.gallery button{display:block;width:100%;margin:0 0 14px;padding:0;border:0;border-radius:14px;overflow:hidden;cursor:zoom-in;break-inside:avoid;background:var(--line)}
.gallery img{width:100%;transition:transform .9s var(--ease)}
.gallery button:hover img{transform:scale(1.05)}
.stages{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);counter-reset:s}
.stages span{counter-increment:s;flex:1 1 150px;padding:16px 18px;display:grid;gap:6px;font-weight:700;font-size:15px}
.stages span+span{border-inline-start:1px solid var(--line)}
.stages span::before{content:counter(s);width:30px;height:30px;border-radius:9px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;font-size:14px;font-family:var(--num)}
.stages span:nth-child(even)::before{background:var(--green-soft);color:var(--green)}

/* ── process ── */
.process{position:relative;display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:22px}
.process::before{content:"";position:absolute;top:30px;inset-inline:7% 7%;height:2px;background:var(--line)}
.process .fill{position:absolute;top:30px;inset-inline-start:7%;height:2px;width:calc(86% * var(--p,0));background:linear-gradient(270deg,var(--red),var(--green))}
[dir=ltr] .process .fill{background:linear-gradient(90deg,var(--red),var(--green))}
.step{position:relative;display:grid;gap:10px;justify-items:start}
.step i{width:60px;height:60px;border-radius:50%;background:var(--surface);border:2px solid var(--line);display:grid;place-items:center;font-style:normal;font-family:var(--num);font-size:22px;font-weight:700;color:var(--mute);transition:all .5s var(--ease)}
.step.lit i{border-color:var(--red);color:#fff;background:var(--red);transform:scale(1.06);box-shadow:0 0 0 8px var(--red-soft)}
.step.lit:nth-child(even) i{border-color:var(--green);background:var(--green);box-shadow:0 0 0 8px var(--green-soft)}
.step h3{font-size:19px}
.step p{color:var(--ink-2);font-size:14.5px}
@media (max-width:880px){
  .process{grid-template-columns:1fr;gap:28px}
  .process::before,.process .fill{top:30px;bottom:30px;inset-inline-start:29px;width:2px;height:auto}
  .process .fill{height:calc((100% - 60px) * var(--p,0));bottom:auto;background:linear-gradient(180deg,var(--red),var(--green))!important}
  .step{grid-template-columns:60px 1fr;column-gap:18px;align-items:start}
  .step i{grid-row:span 2}
}

/* split / about */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split-media{position:relative}
.split-media .main{border-radius:var(--r);width:100%;aspect-ratio:5/4.3;object-fit:cover}
.split-media .badge{position:absolute;bottom:-20px;inset-inline-start:22px;background:var(--ink);color:#fff;border-radius:16px;padding:16px 20px;display:grid;gap:2px;box-shadow:0 20px 40px -24px rgba(20,23,26,.7)}
.split-media .badge b{font-family:var(--num);font-size:34px;line-height:1}
.split-media .badge span{font-size:13px;opacity:.8}
.split-body{display:grid;gap:20px}
.split-body h2{font-size:clamp(28px,3.8vw,46px)}
.split-body p{color:var(--ink-2);font-size:16.5px}
.ticks{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:700}
.ticks li::before{content:"";flex:none;width:24px;height:24px;margin-top:3px;border-radius:50%;background:var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F8A3F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ceo */
.band{background:var(--surface);border-block:1px solid var(--line)}
.ceo{display:grid;grid-template-columns:320px 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.ceo-photo{position:relative;max-width:320px;isolation:isolate}
.ceo-photo img{border-radius:var(--r);width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top}
.ceo-photo::after{content:"";position:absolute;bottom:-14px;inset-inline-end:-14px;width:62%;height:62%;border:2px solid var(--green);border-radius:var(--r);z-index:-1}
.ceo-photo::before{content:"";position:absolute;top:-14px;inset-inline-start:-14px;width:38%;height:38%;border:2px solid var(--red);border-radius:var(--r);z-index:-1}
.ceo-quote{display:grid;gap:24px}
.ceo-quote blockquote{margin:0;font-family:var(--display);font-size:clamp(21px,2.5vw,30px);line-height:1.75;position:relative}
html[lang=en] .ceo-quote blockquote{line-height:1.45}
.ceo-quote blockquote::before{content:"“";position:absolute;top:-56px;inset-inline-start:-8px;font-size:120px;color:var(--red);opacity:.15;font-family:Georgia,serif;line-height:1}
.sign b{display:block;font-size:17px}
.sign span{color:var(--ink-2);font-size:14px}
@media (max-width:820px){.ceo{grid-template-columns:1fr}.ceo-photo{max-width:230px}}

/* why */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.why>div{background:var(--surface);padding:30px 28px;display:grid;gap:10px;align-content:start;transition:background .35s}
.why>div:hover{background:#fbfbf8}
.why svg{width:34px;height:34px;color:var(--red);transition:transform .45s var(--ease)}
.why>div:hover svg{transform:translateY(-4px) rotate(-6deg)}
.why>div:nth-child(even) svg{color:var(--green)}
.why h3{font-size:19px}
.why p{color:var(--ink-2);font-size:14.5px}
@media (max-width:880px){.why{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.why{grid-template-columns:1fr}.why>div{padding:22px 20px}}
.num-list{counter-reset:n;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 30px}
.num-list li{counter-increment:n;display:flex;gap:14px;align-items:flex-start;font-size:15.5px;padding-block:11px;border-bottom:1px dashed var(--line)}
.num-list li::before{content:counter(n);flex:none;width:32px;height:32px;border-radius:9px;background:var(--red-soft);color:var(--red);font-weight:700;font-size:14px;display:grid;place-items:center;font-family:var(--num)}
.num-list li:nth-child(even)::before{background:var(--green-soft);color:var(--green)}
@media (max-width:900px){.num-list{grid-template-columns:1fr}}

/* certificates */
.iso-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.iso-chips span{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:9px 15px;font-size:14px;display:flex;gap:9px;align-items:baseline;font-weight:700}
.iso-chips b{direction:ltr;unicode-bidi:isolate;font-family:var(--num);color:var(--red)}
.certs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.cert{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px;cursor:zoom-in;transition:transform .4s var(--ease),box-shadow .4s}
.cert:hover{transform:translateY(-6px) rotate(-1.2deg);box-shadow:0 22px 40px -24px rgba(20,23,26,.5)}
.cert img{width:100%;aspect-ratio:3/4;object-fit:contain;background:var(--paper);border-radius:8px}
.certs.row{grid-template-columns:repeat(6,1fr)}
@media (max-width:1000px){.certs.row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.certs.row.rail{grid-auto-columns:44%}}

/* cta */
.cta{background:var(--ink);color:#fff;border-radius:28px;padding:clamp(40px,6vw,72px) clamp(24px,5vw,60px);display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;position:relative;overflow:hidden;isolation:isolate}
.cta::after{content:"";position:absolute;top:0;bottom:0;inset-inline-end:0;width:12px;background:linear-gradient(var(--red) 0 33%,#fff 33% 66%,var(--green) 66%)}
.cta::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;inset-inline-start:-160px;top:-260px;background:radial-gradient(closest-side,rgba(198,36,44,.4),transparent);z-index:-1;animation:float 9s ease-in-out infinite}
.cta h2{font-size:clamp(26px,3.4vw,42px)}
.cta p{color:#b9bec3;margin-top:10px;max-width:560px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:760px){.cta{grid-template-columns:1fr}.cta-actions .btn{flex:1 1 auto}}

/* page head */
.ph{position:relative;color:#fff;overflow:hidden;background:var(--ink);isolation:isolate}
.ph>img{position:absolute;inset:-12% 0 0;width:100%;height:124%;object-fit:cover;z-index:-2;animation:kb 16s ease-out both}
.ph::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(14,16,18,.92) 15%,rgba(14,16,18,.35))}
[dir=ltr] .ph::before{background:linear-gradient(90deg,rgba(14,16,18,.92) 15%,rgba(14,16,18,.35))}
.ph .wrap{padding-block:clamp(64px,10vw,120px) clamp(48px,7vw,80px);display:grid;gap:16px}
.ph h1{font-size:clamp(30px,5vw,60px);max-width:900px;animation:fadeUp .9s var(--ease) both}
.ph p{color:#d6d9dc;max-width:660px;font-size:17px;animation:fadeUp .9s .1s var(--ease) both}
.ph .co-logo{width:96px;height:78px;background:rgba(255,255,255,.95)}
.crumbs{font-size:14px;color:#c3c7cb;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:#fff}

/* detail */
.prose{display:grid;gap:18px;font-size:17px;color:var(--ink-2);max-width:68ch}
.detail{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(32px,5vw,60px);align-items:start}
.aside{position:sticky;top:calc(90px + env(safe-area-inset-top,0px));display:grid;gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:14px}
.card h3{font-size:17px}
.facts{display:grid;margin:0}
.facts div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.facts div:last-child{border:0}
.facts dt{color:var(--ink-2)}
.facts dd{margin:0;font-weight:700;text-align:end}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:14px;font-weight:700}
.block{display:grid;gap:16px;margin-top:44px}
.block h2{font-size:clamp(22px,2.4vw,26px);display:flex;align-items:center;gap:12px}
.specs{list-style:none;margin:0;padding:0;display:grid;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.specs li{padding:14px 20px;font-size:15.5px;color:var(--ink-2)}
.specs li+li{border-top:1px solid var(--line)}
.dl{display:grid;gap:10px}
.dl a{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .3s,transform .3s var(--ease)}
.dl a:hover{border-color:var(--red);transform:translateY(-2px)}
.dl .pdf{width:44px;height:52px;border-radius:8px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;font-family:var(--num);font-weight:700;font-size:12px;flex:none}
.dl b{display:block;font-size:15px}
.dl small{color:var(--mute);font-size:12.5px}
.link-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;font-weight:700;font-size:14.5px;transition:border-color .3s,background .3s}
.link-row:hover{border-color:var(--ink)}
.link-row svg{width:20px;height:20px;flex:none}
.link-row.wa{background:#e9f8ef;border-color:#bfe8cf;color:#127a3a}
.link-row.wa:hover{background:#dcf4e5}
@media (max-width:920px){.detail{grid-template-columns:1fr}.aside{position:static}}

.gal4{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:210px 210px;gap:14px}
.gal4 img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.gal4 img:first-child{grid-row:span 2}
.gal4 img:last-child{grid-column:span 2}
@media (max-width:700px){.gal4{grid-template-columns:1fr 1fr;grid-template-rows:190px 140px 140px}.gal4 img:first-child{grid-column:span 2;grid-row:auto}.gal4 img:last-child{grid-column:auto}}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,44px);align-items:start}
.ci{display:grid;gap:14px}
.ci .card{grid-template-columns:50px 1fr;align-items:start;gap:16px}
.ico{width:50px;height:50px;border-radius:14px;background:var(--red-soft);color:var(--red);display:grid;place-items:center}
.ci .card:nth-child(even) .ico{background:var(--green-soft);color:var(--green)}
.ico svg{width:22px;height:22px}
.ci b{display:block;font-size:15px;margin-bottom:4px}
.ci span,.ci a{color:var(--ink-2);font-size:15px}
.phones{display:grid;gap:4px;justify-items:start}
.copy{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:0;cursor:pointer;color:var(--ink-2);font-size:15.5px}
.copy em{font-style:normal;font-size:12px;color:var(--green);font-weight:700}
.quote-card{background:var(--ink);color:#fff;border-radius:24px;padding:clamp(28px,4vw,40px);display:grid;gap:18px;position:relative;overflow:hidden}
.quote-card::after{content:"";position:absolute;inset:auto -60px -80px auto;width:240px;height:240px;border-radius:50%;background:radial-gradient(closest-side,rgba(47,138,63,.45),transparent)}
.quote-card h3{font-size:clamp(24px,2.6vw,30px)}
.quote-card p{color:#c3c7cb}
.quote-card ol{margin:0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:q}
.quote-card li{counter-increment:q;display:flex;gap:12px;align-items:center;font-weight:700}
.quote-card li::before{content:counter(q);width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;font-family:var(--num);font-size:13px}
@media (max-width:880px){.contact{grid-template-columns:1fr}}

/* footer */
.ftr{background:var(--surface);border-top:1px solid var(--line);margin-top:clamp(60px,8vw,96px)}
.ftr-big{font-family:var(--display);font-weight:700;font-size:clamp(44px,9.5vw,136px);line-height:1.25;padding-top:40px;white-space:nowrap;overflow:hidden;background:linear-gradient(270deg,var(--red) 0%,var(--ink) 45%,var(--green) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
[dir=ltr] .ftr-big{background:linear-gradient(90deg,var(--red) 0%,var(--ink) 45%,var(--green) 100%);-webkit-background-clip:text;background-clip:text}
html[lang=en] .ftr-big{letter-spacing:-.03em}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-block:40px 36px}
.ftr h4{font-family:var(--display);font-size:16px;margin:0 0 14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px;color:var(--ink-2)}
.ftr ul a:hover{color:var(--red)}
.ftr p{color:var(--ink-2);font-size:14.5px}
.socials{display:flex;gap:8px;flex-wrap:wrap}
.socials a{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;transition:all .3s}
.socials a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.socials svg{width:19px;height:19px}
.ftr-bottom{border-top:1px solid var(--line);padding-block:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--ink-2)}
@media (max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.ftr-grid{grid-template-columns:1fr;gap:28px}}

/* ── 📱 floating dock (phone) ── */
.dock{display:none}
.wa-fab{position:fixed;z-index:44;bottom:calc(24px + env(safe-area-inset-bottom,0px));inset-inline-start:calc(24px + env(safe-area-inset-left,0px));width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 16px 30px -12px rgba(18,122,58,.7);transition:transform .35s var(--ease)}
.wa-fab:hover{transform:scale(1.08) rotate(-6deg)}
.wa-fab svg{width:28px;height:28px}
.wa-fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:ping 2.4s ease-out infinite}
@keyframes ping{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}
@media (max-width:760px){
  :root{--dock:calc(96px + env(safe-area-inset-bottom,0px))}
  .wa-fab{display:none}
  .dock{display:block;position:fixed;z-index:45;inset-inline:max(12px,env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));transition:transform .45s var(--ease)}
  .dock.away{transform:translateY(calc(100% + 60px + env(safe-area-inset-bottom,0px)))} /* زر عرض السعر طالع فوق الشريط 26px — 140% كان يخلي طرفه الأحمر باين */
  .dock-bar{position:relative;display:grid;grid-template-columns:1fr 1fr 82px 1fr 1fr;align-items:end;height:70px;padding:0 6px 8px;border-radius:26px;background:rgba(20,23,26,.92);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 22px 44px -20px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)}
  .dock-bar::before{content:"";position:absolute;inset-inline:22% 22%;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--red) 0 33%,#fff 33% 66%,var(--green) 66%);opacity:.85}
  .dock a{position:relative;display:grid;justify-items:center;gap:3px;color:rgba(255,255,255,.62);font-size:11px;font-weight:700;padding-top:10px;transition:color .3s}
  .dock a svg{width:23px;height:23px;transition:transform .4s var(--ease)}
  .dock a.on{color:#fff}
  .dock a.on svg{transform:translateY(-2px)}
  .dock a.on::after{content:"";position:absolute;bottom:-5px;width:5px;height:5px;border-radius:50%;background:var(--red)}
  .dock a.wa{color:#5be38f}
  .dock .q{position:relative;align-self:start;margin-top:-26px;justify-self:center;width:70px;height:70px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;align-content:center;gap:1px;padding:0;box-shadow:0 0 0 6px var(--paper),0 14px 28px -10px rgba(198,36,44,.8);font-size:10.5px}
  .dock .q svg{width:24px;height:24px}
  .dock .q.on::after{display:none}
}

/* ── 🧾 quote wizard ── */
.qz{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:rgba(14,16,18,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:16px;animation:fadeIn .3s ease}
.qz-box{position:relative;width:min(640px,100%);max-height:min(92vh,820px);background:var(--surface);border-radius:28px;display:grid;grid-template-rows:auto auto 1fr auto;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.7);animation:zoomIn .45s var(--ease)}
.qz-top{display:flex;align-items:center;gap:12px;padding:20px 22px 12px}
.qz-top h3{font-size:20px;flex:1}
.qz-x{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:grid;place-items:center}
.qz-x svg{width:18px;height:18px}
.qz-bar{height:5px;margin:0 22px;border-radius:5px;background:var(--paper);overflow:hidden}
.qz-bar i{display:block;height:100%;width:var(--w,0%);border-radius:5px;background:linear-gradient(270deg,var(--red),var(--ink),var(--green));transition:width .5s var(--ease)}
[dir=ltr] .qz-bar i{background:linear-gradient(90deg,var(--red),var(--ink),var(--green))}
.qz-body{overflow-y:auto;padding:22px;display:grid;gap:16px;align-content:start}
.qz-step{display:grid;gap:14px;animation:slideIn .45s var(--ease)}
.qz-step h4{font-size:clamp(20px,2.4vw,24px)}
.qz-step .hint{color:var(--mute);font-size:14px;margin-top:-8px}
.qz-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.qz-opt{position:relative;display:grid;gap:8px;justify-items:start;text-align:start;padding:14px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);cursor:pointer;font-weight:700;font-size:14.5px;transition:all .25s}
.qz-opt:hover{border-color:#bfc2bb}
.qz-opt[aria-pressed=true]{border-color:var(--red);background:var(--red-soft)}
.qz-opt[aria-pressed=true]::after{content:"✓";position:absolute;top:10px;inset-inline-end:12px;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:12px}
.qz-opt img{height:34px;width:auto;object-fit:contain}
.qz-chips{display:flex;flex-wrap:wrap;gap:8px}
.qz-chips .qz-opt{padding:10px 16px;border-radius:999px}
.qz-chips .qz-opt[aria-pressed=true]::after{display:none}
.qz label{display:grid;gap:6px;font-size:14px;font-weight:700}
.qz input,.qz textarea{font:inherit;font-weight:400;font-size:16px;padding:13px 15px;min-height:50px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);width:100%}
.qz input:focus,.qz textarea:focus{outline:none;border-color:var(--ink);background:var(--surface)}
.qz textarea{min-height:110px;resize:vertical}
.qz .f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qz .trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.qz-err{background:var(--red-soft);color:var(--red-2);border-radius:12px;padding:11px 14px;font-weight:700;font-size:14px}
.qz-foot{display:flex;align-items:center;gap:10px;padding:14px 22px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.qz-foot .step-n{color:var(--mute);font-size:13px;font-weight:700;margin-inline-end:auto;font-family:var(--num)}
.qz-done{display:grid;justify-items:center;text-align:center;gap:14px;padding:30px 10px}
.qz-done .ok{width:84px;height:84px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;animation:pop .6s var(--ease)}
.qz-done .ok svg{width:42px;height:42px}
.qz-done h4{font-size:24px}
.qz-done p{color:var(--ink-2);max-width:420px}
@media (max-width:600px){
  .qz{place-items:end center;padding:0}
  .qz-box{width:100%;max-height:94vh;border-radius:26px 26px 0 0;animation:sheet .5s var(--ease)}
  .qz .f2{grid-template-columns:1fr}
  .qz-opts{grid-template-columns:1fr 1fr}
}

/* lightbox */
.lb{position:fixed;inset:0;z-index:96;background:rgba(10,12,14,.95);display:grid;grid-template-rows:auto 1fr auto;padding:calc(12px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));animation:fadeIn .25s ease;touch-action:pan-y}
.lb-top{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:14px;font-weight:700;padding:4px 6px;font-family:var(--num)}
.lb-stage{display:grid;place-items:center;min-height:0;position:relative}
.lb-stage img{max-height:100%;max-width:100%;object-fit:contain;border-radius:10px;animation:zoomIn .35s var(--ease)}
.lb button{width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:grid;place-items:center}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb button svg{width:22px;height:22px}
.lb-nav{position:absolute;top:50%;translate:0 -50%}
.lb-prev{inset-inline-start:4px}.lb-next{inset-inline-end:4px}
.lb-cap{color:#c9cdd1;text-align:center;font-size:14px;padding-top:8px}
@media (max-width:700px){.lb-nav{display:none!important}}

/* motion */
.rv.in{animation:fadeUp .9s var(--ease) both;animation-delay:calc(var(--d,0) * 90ms)}
.view{animation:fadeIn .45s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes rise{from{transform:translateY(110%)}to{transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes spin{to{rotate:360deg}}
@keyframes marq{to{transform:translateX(50%)}}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes zoomIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
[dir=ltr] .qz-step{animation-name:slideInL}
@keyframes slideInL{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.slide{clip-path:none!important;opacity:0}.slide.on{opacity:1}.intro{display:none}}

/* ═════════ 🌑 الثيم الغامق الفخم (2 نوفمبر 2026 — محمد: «تصميم أقوى ولون خلفية أقوى… ك كمبيوتر مو شي») ═════════
   الأسطح فحمية، والأحمر والأخضر أسطع شوي عشان يبينون على الغامق. --black للأسطح اللي لازم تظل سودا
   (الشريط، البطاقات فوق الصور) لأن --ink صار فاتح. الشعارات فيها شخص أسود ← دايماً على مربع أبيض. */
/* يتفعّل بـ html.dark (زر الوضع بالهيدر، والافتراضي حسب جهاز الزائر — takatof.js) */

html.dark{
  --paper:#0E1113;
  --surface:#161A1E;
  --raise:#1D2227;
  --ink:#F3F3EF;
  --ink-2:#AEB4BA;
  --mute:#7D848B;
  --line:rgba(255,255,255,.09);
  --red:#E0313B;
  --red-2:#B8222B;
  --green:#3FAE55;
  --red-soft:rgba(224,49,59,.14);
  --green-soft:rgba(63,174,85,.15);
  --black:#0A0C0E;
  color-scheme:dark;
}
html.dark body{background:radial-gradient(1200px 600px at 85% -10%,rgba(224,49,59,.10),transparent 60%),radial-gradient(900px 500px at 0% 40%,rgba(63,174,85,.07),transparent 60%),var(--paper);background-attachment:fixed}
html.dark body::before{background:var(--paper)}
html.dark .intro{background:var(--paper)}
html.dark .hdr.solid{background:rgba(14,17,19,.78);box-shadow:0 1px 0 var(--line),0 18px 40px -30px #000}
html.dark .brand img{background:#fff;border-radius:12px;padding:4px 6px}
html.dark .nav{background:rgba(255,255,255,.05);border-color:var(--line)}
html.dark .nav .pill{background:rgba(255,255,255,.1);box-shadow:inset 0 -2px 0 var(--red)}
html.dark .lang,html.dark .menu-btn{background:var(--raise);border-color:var(--line);color:var(--ink)}
html.dark .menu-btn i{background:var(--ink)}
html.dark .btn-red::before{background:#fff}
html.dark .btn-red:hover{color:var(--red-2)}
html.dark .btn-line:hover{color:var(--black)}
html.dark .btn-white{color:var(--black)}
html.dark .co-logo,html.dark .qz-opt img,html.dark .float-card .av img,html.dark .marquee img{background:#fff}
html.dark .co-logo{box-shadow:0 10px 24px -14px #000}
html.dark .marquee{background:rgba(255,255,255,.03)}
html.dark .marquee img{filter:none;opacity:1;border-radius:10px;padding:4px 8px;height:50px}
html.dark .marquee a{color:var(--ink-2)}
html.dark .co,html.dark .card,html.dark .why>div,html.dark .stages,html.dark .specs,html.dark .chips span,html.dark .iso-chips span,html.dark .cert,html.dark .dl a,html.dark .filters button,html.dark .empty{background:var(--surface);border-color:var(--line)}
html.dark .co:hover{border-color:rgba(255,255,255,.18);box-shadow:0 30px 60px -30px #000}
html.dark .why{background:var(--line);border-color:var(--line)}
html.dark .why>div:hover{background:var(--raise)}
html.dark .band{background:linear-gradient(180deg,var(--surface),var(--paper));border-color:var(--line)}
html.dark .tag{background:rgba(255,255,255,.07)}
html.dark .pj{background:var(--black)}
html.dark .pj-chip{color:var(--black)}
html.dark .filters button.on{background:var(--ink);color:var(--black);border-color:var(--ink)}
html.dark .split-media .badge{background:var(--red)}
html.dark .cta{background:linear-gradient(120deg,#8E141B,var(--red) 55%,#B32029);color:#fff}
html.dark .cta p{color:rgba(255,255,255,.82)}
html.dark .cta::before{background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent)}
html.dark .cta::after{background:linear-gradient(#fff 0 33%,var(--black) 33% 66%,var(--green) 66%)}
html.dark .quote-card{background:linear-gradient(150deg,var(--raise),var(--black));border:1px solid var(--line)}
html.dark .ph{background:var(--black)}
html.dark .socials a{border-color:var(--line)}
html.dark .socials a:hover{background:var(--ink);color:var(--black)}
html.dark .ftr{background:var(--black);border-color:var(--line)}
html.dark .ftr-big{background:linear-gradient(270deg,var(--red),#fff 45%,var(--green))!important;-webkit-background-clip:text!important;background-clip:text!important;opacity:.95}
html.dark[dir=ltr] .ftr-big{background:linear-gradient(90deg,var(--red),#fff 45%,var(--green))!important;-webkit-background-clip:text!important;background-clip:text!important}
html.dark .stamp{background:var(--raise);box-shadow:0 22px 44px -20px #000}
html.dark .float-card{background:var(--raise);box-shadow:0 24px 50px -24px #000}
html.dark .qz{background:rgba(0,0,0,.65)}
html.dark .qz-box{background:var(--surface);border:1px solid var(--line)}
html.dark .qz-x{background:var(--raise);border-color:var(--line);color:var(--ink)}
html.dark .qz-opt{background:var(--raise);border-color:var(--line)}
html.dark .qz-opt[aria-pressed=true]{background:var(--red-soft);border-color:var(--red)}
html.dark .qz-bar{background:var(--raise)}
html.dark .qz-foot{border-color:var(--line)}
html.dark .qz-err{color:#ff8a90}
html.dark .link-row{border-color:var(--line)}
html.dark .link-row.wa{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.35);color:#5be38f}
html.dark .link-row.wa:hover{background:rgba(37,211,102,.2)}
html.dark .ticks li::before{background-color:var(--green-soft)}
html.dark .dock .q{box-shadow:0 0 0 6px var(--paper),0 14px 28px -10px rgba(224,49,59,.8)}

/* 🖥️ الواجهة على الكمبيوتر: صور القطاعات ملء الشاشة والعنوان الضخم فوقها */
/* كل الشاشات (محمد: «الحركة اللي فوق بوضع الكمبيوتر عجبتني أكثر») — الصورة تغطي الواجهة لين الشريط اللي تحتها (--mq = ارتفاع شريط الشعارات) */
@media all{
  .hero{--hh:clamp(640px,calc(100vh - 80px),940px);--mq:92px;padding:0;position:relative}
  .hero-grid{position:static;grid-template-columns:minmax(0,640px);min-height:var(--hh);align-content:center;padding-block:60px 90px}
  .hero-copy{position:relative;z-index:3}
  .hero h1{font-size:clamp(56px,7.6vw,118px);color:#fff;text-shadow:0 10px 40px rgba(0,0,0,.35)}
  .hero h1 em{color:var(--red)}
  .hero h1 em::after{opacity:.35}
  .hero-lead{color:rgba(255,255,255,.82);font-size:19px}
  .hero .eyebrow{color:rgba(255,255,255,.85)}
  .hero .btn-line{border-color:rgba(255,255,255,.7);color:#fff}
  .hero .btn-line::before{background:#fff}
  .hero .btn-line:hover{color:var(--black)}
  .hstat b{color:#fff}
  .hstat>span{color:rgba(255,255,255,.75)}
  .stage{position:absolute;inset:0 0 var(--mq) 0;z-index:0;order:0}
  .slides{position:absolute;inset:0;aspect-ratio:auto;border-radius:0!important;box-shadow:none;background:var(--black)}
  .slide::after{background:linear-gradient(270deg,rgba(10,12,14,.94) 0%,rgba(10,12,14,.72) 38%,rgba(10,12,14,.25) 75%,rgba(10,12,14,.45) 100%),linear-gradient(0deg,var(--paper) 0%,transparent 22%)}
  [dir=ltr] .slide::after{background:linear-gradient(90deg,rgba(10,12,14,.94) 0%,rgba(10,12,14,.72) 38%,rgba(10,12,14,.25) 75%,rgba(10,12,14,.45) 100%),linear-gradient(0deg,var(--paper) 0%,transparent 22%)}
  .slide-meta{inset:auto max(4vw,24px) 46px auto;width:min(420px,40%);padding:0;flex-direction:column;align-items:flex-start;gap:12px}
  [dir=ltr] .slide-meta{inset:auto auto 46px max(4vw,24px)}
  .stamp{top:auto;bottom:130px;inset-inline-start:auto;inset-inline-end:max(5vw,28px)}
  .float-card{bottom:46px;inset-inline-end:auto;inset-inline-start:max(4vw,24px);display:none}
  .marquee{margin-top:0;position:relative;z-index:2}
}
/* زر الوضع (داكن/فاتح) */
.theme{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:transform .4s var(--ease)}
.theme:hover{transform:rotate(-20deg)}
.theme svg{width:18px;height:18px}
.theme .sun{display:none}
html.dark .theme .sun{display:block}
html.dark .theme .moon{display:none}
html.dark .theme{background:var(--raise)}
@media (min-width:901px){html:not(.dark) .hdr:not(.solid){background:rgba(255,255,255,.0)}}

/* 📱 الواجهة بالجوال: نفس الصورة ملء الشاشة، الكلام تحت فوق تدرّج غامق، والختم فوق بالزاوية */
@media (max-width:900px){
  .hero-grid{min-height:calc(100svh - 80px);grid-template-columns:1fr;align-content:end;padding-block:120px 34px}
  .hero-copy{padding-top:0}
  .hero h1{font-size:clamp(46px,13vw,64px)}
  .hero-lead{font-size:16.5px}
  .slide::after{background:linear-gradient(0deg,rgba(10,12,14,.96) 0%,rgba(10,12,14,.78) 42%,rgba(10,12,14,.25) 72%,rgba(10,12,14,.5) 100%)!important}
  .slide-meta{inset:18px 18px auto 18px;width:auto;flex-direction:row;align-items:center;justify-content:space-between}
  [dir=ltr] .slide-meta{inset:18px 18px auto 18px}
  .slide-label a{font-size:15px}
  .stamp{width:92px;height:92px;top:auto;bottom:auto;inset-block-start:64px;inset-inline-end:16px;inset-inline-start:auto}
  .stamp .grade{font-size:32px}
  .hero-stats{gap:16px 20px;margin-top:26px}
  .hstat b{font-size:40px}
}

/* شارة التصنيف (بدل الختم الدائري — محمد: «مصنّفة ج… بطريقة أحلى») */
.stamp{display:none!important}
.grade-badge{display:inline-flex;align-items:center;gap:12px;margin-top:18px;padding:8px 8px 8px 14px;border-radius:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);color:#fff;animation:fadeUp .8s var(--ease) both;animation-delay:calc(.08s + var(--start,0s));max-width:100%}
[dir=ltr] .grade-badge{padding:8px 14px 8px 8px}
.gb-mark{flex:none;width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,var(--red),#8E141B);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:26px;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 18px -8px rgba(224,49,59,.8)}
.gb-txt{display:grid;gap:1px;min-width:0}
.gb-txt b{font-size:14.5px;line-height:1.35}
.gb-txt small{font-size:12px;opacity:.78;line-height:1.35}
.gb-iso{flex:none;font-family:var(--num);font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 9px;border-radius:999px;background:rgba(63,174,85,.22);color:#9be3ab;border:1px solid rgba(63,174,85,.4)}
@media (max-width:420px){.gb-iso{display:none}}

/* ═════════ ترتيب الواجهة (محمد: «معلومات تتغير مع كل صورة… أحس زحمة») ═════════
   الثابت: السطر الصغير + العنوان. المتغير مع الصورة: شارة الشركة + وصفها + زرّينها.
   الأرقام وشارة التصنيف نزلت لشريط لحالها تحت شعارات الشركات. */
.hero-live{display:grid;gap:0;justify-items:start}
.hero-live.swap>*{animation:fadeUp .6s var(--ease) both}
.hero-live.swap>*:nth-child(2){animation-delay:.06s}
.hero-live.swap>*:nth-child(3){animation-delay:.12s}
.hero-co{display:inline-flex;align-items:center;gap:12px;margin-top:4px;padding:7px 8px 7px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;transition:background .3s;max-width:100%}
[dir=ltr] .hero-co{padding:7px 16px 7px 8px}
.hero-co:hover{background:rgba(255,255,255,.2)}
.hc-logo{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;padding:5px}
.hc-logo img{max-height:32px;width:auto;object-fit:contain}
.hc-txt{display:grid;line-height:1.3;min-width:0}
.hc-txt b{font-size:16px}
.hc-txt small{font-size:12.5px;opacity:.75}
.hc-n{font-size:11.5px;opacity:.6;padding-inline-start:6px;border-inline-start:1px solid rgba(255,255,255,.25);margin-inline-start:4px}
.hero .hero-lead{margin-top:16px;min-height:3.4em;animation:none}
.hero .hero-actions{animation:none}
.slide-meta{justify-content:flex-end;gap:14px;align-items:center}
.slide-meta small{color:rgba(255,255,255,.8);font-size:12px;letter-spacing:.08em}
@media (min-width:901px){.slide-meta{flex-direction:row;width:auto;align-items:center}}

/* شريط الأرقام والتصنيف */
.stats-band{padding-block:clamp(28px,4vw,44px) 0}
.sb-grid{display:grid;grid-template-columns:repeat(4,1fr) minmax(0,1.6fr);align-items:center;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.sb-grid .hstat{padding:24px 22px;border-inline-end:1px solid var(--line);justify-items:start}
.sb-grid .hstat b{color:var(--ink);font-size:clamp(36px,3.8vw,52px)}
.sb-grid .hstat>span{color:var(--ink-2)}
.grade-badge.sb-grade{margin:0 18px;animation:none;background:var(--red-soft);border-color:transparent;color:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;justify-self:start}
.sb-grade .gb-txt small{opacity:1;color:var(--ink-2)}
@media (max-width:1000px){
  .sb-grid{grid-template-columns:repeat(2,1fr)}
  .sb-grid .hstat:nth-child(2n){border-inline-end:0}
  .sb-grid .hstat{border-bottom:1px solid var(--line)}
  .grade-badge.sb-grade{grid-column:1/-1;margin:16px;justify-self:stretch}
}
@media (max-width:900px){
  .hero-grid{padding-block:110px 30px}
  .slide-meta{inset:18px 18px auto 18px;justify-content:space-between}
  .hc-n{display:none}
}

/* العنوان سطرين بالكمبيوتر (كان ينكسر ثلاثة: «نبني / الكويت / بأيدٍ متكاتفة») + عدّاد واحد بس (عدّاد الصور) */
@media (min-width:901px){
  .hero-grid{grid-template-columns:minmax(0,880px)}
  .hero h1{font-size:clamp(56px,6.4vw,108px)}
  .hero h1 .ln{white-space:nowrap}
}
.hc-n{display:none!important}
/* عدّاد الصور بعيد عن زر الواتساب العائم (كان مغطي «01 / 07») */
@media (min-width:761px){
  .slide-meta{inset-inline-end:auto!important;inset-inline-start:max(4vw,24px)!important;bottom:34px!important} /* محمد: «خله الجنب الثاني» — تحت الكلام، بعيد عن زر الواتساب */
}

/* بلا رمشة عند التنقّل (محمد: «ليش يرمش جذي من اختار شي»): المحتوى ما يبدأ شفاف */
.view{animation:none}
.ph>img{animation:none}
/* الحركات بلا اختفاء: الشي يظل ظاهر وينزلق بس (الاختفاء ثم الظهور مع كل صفحة = رمشة) */
@keyframes fadeUp{from{transform:translateY(22px)}to{transform:none}}
@keyframes fadeIn{from{opacity:1}to{opacity:1}}
@keyframes zoomIn{from{transform:scale(.96)}to{transform:none}}

/* انتقال الصفحات (View Transitions): تلاشي متقاطع ناعم، والهيدر والشريط ثابتين ما يتحركون */
::view-transition-old(root),::view-transition-new(root){animation-duration:.38s;animation-timing-function:cubic-bezier(.2,.75,.2,1)}
.hdr{view-transition-name:hdr}
.dock{view-transition-name:dock}
.wa-fab{view-transition-name:wafab}
::view-transition-group(hdr),::view-transition-group(dock),::view-transition-group(wafab){animation:none}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* الاستبيان: الحركة بس عند الفتح وتغيّر الخطوة */
.qz{animation:none}
.qz-box{animation:none!important}
.qz-box.enter{animation:zoomIn .4s var(--ease) both!important}
@media (max-width:600px){.qz-box.enter{animation:sheet .45s var(--ease) both!important}}
.qz-step{animation:none!important}
.qz-body.step-enter .qz-step{animation:slideIn .35s var(--ease) both!important}
[dir=ltr] .qz-body.step-enter .qz-step{animation-name:slideInL!important}
@keyframes slideIn{from{transform:translateX(-18px)}to{transform:none}}
@keyframes slideInL{from{transform:translateX(18px)}to{transform:none}}