:root { --bg: #F5F7FA; --bg2: #E2E8F0; --card: #FFFFFF; --ink: #1A1A1A; --mute: #5A5A5A; --line: #CBD5E1; --maroon: #891811; --maroon2: #70130E; --red: #E10606; --steel: #8E949B; --graphite: #1E2329; --graphite2: #272D34; --head: 'Noto Kufi Arabic','Segoe UI',Tahoma,Arial,sans-serif; --body: 'IBM Plex Sans Arabic','Segoe UI',Tahoma,Arial,sans-serif; color-scheme: light; box-sizing: border-box; padding-top: env(safe-area-inset-top,0px); padding-bottom: env(safe-area-inset-bottom,0px); }
@media (prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) { --bg: #0E1013; --bg2: #16191E; --card: #1A1C21; --ink: #ECEFF1; --mute: #90A4AE; --line: #2C3748; --maroon: #891811; --maroon2: #FF5A6E; --red: #E10606; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #0E1013; --bg2: #16191E; --card: #1A1C21; --ink: #ECEFF1; --mute: #90A4AE; --line: #2C3748; --maroon: #891811; --maroon2: #FF5A6E; --red: #E10606; color-scheme: dark; }
:root[data-theme="light"] { --bg: #F5F7FA; --bg2: #E2E8F0; --card: #FFFFFF; --ink: #1A1A1A; --mute: #5A5A5A; --line: #CBD5E1; --maroon: #891811; --maroon2: #70130E; --red: #E10606; color-scheme: light; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; height: 100%; overflow-x: clip; scrollbar-width: thin; scrollbar-color: var(--red) var(--bg2); }
body { background-color: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.9; overflow-x: clip; min-height: 100%; transition: background-color .4s cubic-bezier(.2,.9,.3,1),color .4s cubic-bezier(.2,.9,.3,1); -webkit-font-smoothing: antialiased; }
/* main page brand scrollbar — خلفية شريط التمرير بهوية الوكالة التجارية */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: linear-gradient(180deg,#0b0e14 0%,#160c0e 50%,#0b0e14 100%); box-shadow: inset 1px 0 0 rgba(255,255,255,.05),inset 0 0 6px rgba(0,0,0,.5); border-left: 1px solid rgba(225,6,19,.12); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#ff3b47 0%,#e10606 45%,#891811 100%); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; box-shadow: inset 0 1px 1.5px rgba(255,255,255,.45),0 0 8px rgba(225,6,19,.35); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#ff5c66 0%,#f50817 40%,#b80000 100%); background-clip: padding-box; box-shadow: 0 0 14px rgba(225,6,19,.75),inset 0 1px 2px rgba(255,255,255,.6); }
[data-theme="light"] ::-webkit-scrollbar-track { background: linear-gradient(180deg,#f5f0f0 0%,#ebe4e5 50%,#f5f0f0 100%); box-shadow: inset 1px 0 0 rgba(0,0,0,.04),inset 0 0 6px rgba(137,24,17,.04); border-left: 1px solid rgba(225,6,19,.1); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: linear-gradient(180deg,#090c12 0%,#150a0d 50%,#090c12 100%); box-shadow: inset 1px 0 0 rgba(255,255,255,.05),inset 0 0 8px rgba(0,0,0,.6); border-left: 1px solid rgba(225,6,19,.15); }
/* Enhanced Antique / Patina Dot Matrix Background (خلفية معتقة بلمسة فخامة وعمق ثلاثي الأبعاد مثل Home1.php) */
:root[data-theme="dark"] body, body[data-theme="dark"] { background-color: #070709; background-image: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%), radial-gradient(ellipse 100% 100% at 50% 100%, rgba(0,0,0,.9) 0%, transparent 80%), radial-gradient(#000000 16%, transparent 17%), radial-gradient(#000000 16%, transparent 17%), radial-gradient(rgba(255,255,255,.07) 16%, transparent 22%), radial-gradient(rgba(255,255,255,.07) 16%, transparent 22%), linear-gradient(180deg, #0a0b0e 0%, #070709 50%, #050507 100%); background-position: 0 0, 0 0, 0 0, 8px 8px, 0 1px, 8px 9px, 0 0; background-size: 100% 100%, 100% 100%, 16px 16px, 16px 16px, 16px 16px, 16px 16px, 100% 100%; background-attachment: fixed; }
:root[data-theme="light"] body, body[data-theme="light"], body { background-color: #f6f3ed; background-image: radial-gradient(ellipse 100% 100% at 50% 100%, rgba(140,130,115,.08) 0%, transparent 75%), radial-gradient(rgba(45,35,25,.07) 16%, transparent 17%), radial-gradient(rgba(45,35,25,.07) 16%, transparent 17%), radial-gradient(rgba(255,255,255,.95) 16%, transparent 22%), radial-gradient(rgba(255,255,255,.95) 16%, transparent 22%), linear-gradient(180deg, #faf7f2 0%, #f4f0e8 50%, #eae5dc 100%); background-position: 0 0, 0 0, 8px 8px, 0 1px, 8px 9px, 0 0; background-size: 100% 100%, 16px 16px, 16px 16px, 16px 16px, 16px 16px, 100% 100%; background-attachment: fixed; }
@media (prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) body { background-color: #070709; background-image: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%), radial-gradient(ellipse 100% 100% at 50% 100%, rgba(0,0,0,.9) 0%, transparent 80%), radial-gradient(#000000 16%, transparent 17%), radial-gradient(#000000 16%, transparent 17%), radial-gradient(rgba(255,255,255,.07) 16%, transparent 22%), radial-gradient(rgba(255,255,255,.07) 16%, transparent 22%), linear-gradient(180deg, #0a0b0e 0%, #070709 50%, #050507 100%); background-position: 0 0, 0 0, 0 0, 8px 8px, 0 1px, 8px 9px, 0 0; background-size: 100% 100%, 100% 100%, 16px 16px, 16px 16px, 16px 16px, 16px 16px, 100% 100%; background-attachment: fixed; }
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { display: block; }
.en { direction: ltr; text-align: left; font-size: .82em; color: var(--mute); line-height: 1.6; }
.en.t,.h2en { text-align: right; }
/* nav */
header { position: sticky; top: env(safe-area-inset-top,0px); z-index: 100; background: color-mix(in srgb,var(--bg) 84%,transparent); backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid color-mix(in srgb,var(--line) 70%,transparent); transition: background .3s,border-color .3s,box-shadow .3s; }
header nav { margin: auto; display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; gap: 8px; }
.brand { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; display: flex; align-items: center; transition: border-color .25s,transform .25s,box-shadow .25s; }
.brand:hover { border-color: var(--red); box-shadow: 0 4px 14px rgba(225,6,19,.15); transform: translateY(-1px); }
.brand img { height: 36px; width: auto; display: block; }
header nav ul { list-style: none; display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; }
header nav ul a { text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--ink); padding: 6px 10px; border-radius: 8px; position: relative; transition: color .25s,background-color .25s,box-shadow .25s; }
header nav ul a::after { content: ""; position: absolute; bottom: 0; left: 10px; right: 10px; height: 2.5px; background: var(--red); border-radius: 3px; transform: scaleX(0); opacity: 0; transition: transform .25s cubic-bezier(.2,.8,.2,1),opacity .25s; }
header nav ul a:hover { color: var(--red); }
header nav ul a:hover::after { transform: scaleX(0.7); opacity: 0.7; }
header nav ul a.on { color: var(--red); background: color-mix(in srgb,var(--red) 10%,transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--red) 25%,transparent); }
header nav ul a.on::after { transform: scaleX(1); opacity: 1; }
.btn { background: var(--maroon); color: #fff; text-decoration: none; font-weight: 700; font-size: 14.5px; padding: 8px 20px; border-radius: 8px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--maroon); box-shadow: 0 2px 8px rgba(137,24,17,.22); transition: background .25s,border-color .25s,transform .2s,box-shadow .25s; }
.btn:hover { background: var(--red); border-color: var(--red); box-shadow: 0 6px 16px rgba(225,6,19,.35); transform: translateY(-2px); }
.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pg { position: absolute; right: 0; bottom: -1px; height: 3px; width: 0; background: linear-gradient(90deg,var(--red),#ff5a6e); z-index: 2; }
@media(max-width:1020px) {
    header nav ul { display: none; }
}
/* hero */
.hero { position: relative; overflow: hidden; min-height: calc(100vh - 54px); min-height: calc(100svh - 54px); display: flex; align-items: center; padding: 0 22px; background: radial-gradient(1200px 700px at 25% 40%,#fff,transparent 70%),linear-gradient(180deg,#f3f4f6,#d9dce0); }
.blade { position: absolute; transform: skewX(-25deg); }
.b1 { top: 0; left: -8%; width: 36%; height: 16px; background: linear-gradient(90deg,#6c727a,#d9dde1 55%,#8d939a); animation: inL 1s cubic-bezier(.2,.8,.2,1) both; }
.b2 { top: 0; right: -6%; width: 26%; height: 16px; background: var(--maroon); animation: inR 1s .1s cubic-bezier(.2,.8,.2,1) both; }
.b3 { bottom: 7%; left: -10%; width: 44%; height: 12px; background: var(--maroon); animation: inL 1.1s .5s cubic-bezier(.2,.8,.2,1) both; }
.b4 { bottom: 7%; left: 35%; width: 30%; height: 12px; background: linear-gradient(90deg,#7b828a,#e6e8eb); animation: inL 1.1s .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes inL {
    from { transform: skewX(-25deg) translateX(-130%); }
    to { transform: skewX(-25deg); }
}
@keyframes inR {
    from { transform: skewX(-25deg) translateX(130%); }
    to { transform: skewX(-25deg); }
}
.hw { position: relative; z-index: 2; max-width: 1240px; margin: auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 60px 0 90px; color: #171b20; }
.ht h1 { font-family: var(--head); font-weight: 800; font-size: clamp(38px,5.6vw,76px); line-height: 1.35; position: relative; padding-bottom: 20px; }
.ht h1 span { display: block; overflow: hidden; }
.ht h1 i { display: block; font-style: normal; animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
.ht h1 span:nth-child(1) i { animation-delay: .8s; }
.ht h1 span:nth-child(2) i { animation-delay: .95s; }
.ht h1::after { content: ""; position: absolute; right: 0; bottom: 0; height: 10px; width: 150px; background: var(--maroon); transform: skewX(-25deg) scaleX(0); transform-origin: right; animation: draw .9s 1.6s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes draw {
    to { transform: skewX(-25deg) scaleX(1); }
}
@keyframes rise {
    from { transform: translateY(110%); }
    to { transform: none; }
}
@keyframes fade {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}
.ht .sub { font-family: var(--head); font-weight: 600; font-size: clamp(16px,2vw,21px); color: var(--maroon); direction: ltr; text-align: right; margin-top: 6px; animation: fade 1s 1.3s both; }
.ht p.ar { font-size: clamp(17px,1.9vw,20px); color: #3d444b; max-width: 30em; margin-top: 18px; animation: fade 1s 1.45s both; }
.ht p.eng { direction: ltr; text-align: left; font-size: 14.5px; color: #5c646c; max-width: 36em; margin-top: 12px; animation: fade 1s 1.6s both; }
.ht .btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; animation: fade 1s 1.75s both; }
.ht .ghost { color: #171b20; border-color: #171b20; }
.ht .ghost:hover { background: #171b20; color: #fff; }
.stage { position: relative; width: min(560px,100%); aspect-ratio: 1; margin: auto; animation: pop 1.3s .2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pop {
    from { opacity: 0; transform: scale(.6) rotate(-40deg); }
    to { opacity: 1; transform: none; }
}
.stage .l { position: absolute; inset: 0; will-change: transform; }
.stage .l svg { width: 100%; height: 100%; animation: spin 90s linear infinite; }
.stage .l2 svg { animation-duration: 55s; animation-direction: reverse; }
@keyframes spin {
    to { transform: rotate(360deg); }
}
.hub { position: absolute; inset: 23%; border-radius: 50%; background: radial-gradient(circle at 35% 28%,#fff,#e6e8eb 72%); box-shadow: inset 0 0 0 6px #fff,inset 0 0 0 8px #c3c8ce,0 24px 60px rgba(0,0,0,.2); display: grid; place-items: center; }
.hub img { width: 84%; display: block; animation: fade 1s 1.2s both; }
.hub::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(105deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%); background-size: 260% 100%; animation: shine 6s 2.2s ease-in-out infinite; }
@keyframes shine {
    0% { background-position: 130% 0; }
    35%,100% { background-position: -130% 0; }
}
.cue { position: absolute; bottom: 20px; left: 50%; width: 26px; height: 42px; border: 2px solid #5c646c; border-radius: 14px; z-index: 3; margin-left: -13px; }
.cue::after { content: ""; position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; margin-left: -2px; background: var(--red); border-radius: 2px; animation: dt 1.6s infinite; }
@keyframes dt {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(16px); }
}
@media(max-width:900px) {
    .hw { grid-template-columns: 1fr; gap: 20px; padding: 34px 0 80px; }
    .stage { order: -1; width: min(380px,86%); }
}
/* marquee */
.mq { background: var(--graphite); overflow: hidden; padding: 20px 0; direction: ltr; position: relative; border-top: 4px solid var(--maroon); }
.mq .tr { display: flex; align-items: center; gap: 56px; width: max-content; animation: mq 38s linear infinite; }
.mq img { height: 44px; display: block; flex: none; }
.mq i { width: 12px; height: 12px; background: var(--red); transform: rotate(45deg); flex: none; }
@keyframes mq {
    to { transform: translateX(-50%); }
}
/* generic & unified layout system */
section { padding: 25px 6px; position: relative; }
.w { max-width: 1240px; margin: auto; }
/* نظام الترويسات والعناوين الموحد لكافة الأقسام */
.sh { position: relative; margin-bottom: 32px; }
.sh-head, .sec-head, .pr-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: nowrap; gap: 16px 24px; margin-bottom: 16px; width: 100%; clear: both; }
.sh-head .kico, .sec-head .kico, .kick .kico { width: 24px; height: 24px; min-width: 24px; flex-shrink: 0; color: var(--red); display: inline-flex; align-items: center; justify-content: center; }
.kick { font-family: var(--head); font-weight: 700; font-size: 14px; color: var(--maroon2); margin-bottom: 8px; display: flex; align-items: center; width: 100%; gap: 10px; line-height: 1.4; white-space: nowrap; clear: both; opacity: 1!important; transform: none!important; transition: none!important; }
.kick::before { content: ""; width: 28px; height: 4px; background: var(--maroon2); transform: skewX(-25deg); border-radius: 2px; flex: none; }
h2, .sh h2, .sec-head h2, .pr-head h2 { font-family: var(--head); font-weight: 800; font-size: clamp(19px,2.8vw,30px); line-height: 1.3; margin: 0; letter-spacing: -.01em; display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0; }
.h2en, .sh .h2en, .sec-head .h2en, .pr-head .h2en { direction: ltr; text-align: left; font-family: var(--head); font-weight: 600; font-size: clamp(12px,1.4vw,16px); color: var(--mute); margin: 0; line-height: 1.4; margin-inline-start: auto; display: inline-flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
.lead, .sh .lead { font-family: var(--body); font-size: clamp(15px,1.6vw,19px); color: var(--mute); margin-top: 10px; line-height: 1.8; }
@media(max-width:768px) {
    .sh-head, .sec-head, .pr-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 14px; }
    h2, .sh h2, .sec-head h2, .pr-head h2 { white-space: normal; font-size: clamp(18px,4.5vw,22px); width: 100%; display: block; float: none !important; margin-bottom: 4px; }
    .h2en, .sh .h2en, .sec-head .h2en, .pr-head .h2en { margin-inline-start: 0 !important; font-size: 13px; width: 100%; white-space: normal; line-height: 1.45; display: block; direction: ltr; text-align: right; float: none !important; margin-bottom: 12px; }
}
/* تناغم الأقسام الداكنة */
.dark-sec h2, .dark-sec .h2en, .cine h2, .contact h2, .bot-sec h2 { color: #fff; }
.dark-sec .kick, .cine .kick, .contact .kick, .bot-sec .kick { color: #ff8a96; }
.dark-sec .kick::before, .cine .kick::before, .contact .kick::before, .bot-sec .kick::before { background: #ff5a6e; }
.dark-sec .h2en, .cine .h2en, .contact .h2en { color: #c5cbd4; }
.dark-sec .lead, .cine .lead, .contact .lead, .bot-sec .lead { color: #d5d9de; }
.dv { height: 36px; overflow: hidden; position: relative; margin: -18px 0; z-index: 4; pointer-events: none; }
.dv::before { content: ""; position: absolute; top: 50%; left: 5%; right: 5%; height: 1px; background: linear-gradient(90deg,transparent,rgba(225,6,19,.4) 30%,rgba(255,90,110,.6) 50%,rgba(142,148,155,.3) 70%,transparent); transform: translateY(-50%); }
.dv::after { content: ""; position: absolute; top: 50%; left: 50%; width: 180px; height: 12px; background: radial-gradient(ellipse,rgba(225,6,19,.45) 0%,transparent 70%); transform: translate(-50%,-50%); filter: blur(4px); }
.dv i { position: absolute; top: 9px; height: 18px; transform: skewX(-25deg); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.dv i:nth-child(1) { right: -5%; width: 55%; background: linear-gradient(90deg,var(--maroon),var(--red)); transform: skewX(-25deg) translateX(120%); }
.dv i:nth-child(2) { right: 50%; width: 40%; background: linear-gradient(90deg,#5a626a,#d9dde1 55%,#7b828a); transform: skewX(-25deg) translateX(-160%); }
.dv.in i:nth-child(1),.dv.in i:nth-child(2) { transform: skewX(-25deg); }
@media(max-width:860px) {
    section { padding: 30px 10px; }
}
/* trio */
.trio { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 36px; }
.pillar { background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--maroon); padding: 22px 20px 20px; position: relative; overflow: hidden; }
.pillar::before { content: ""; position: absolute; top: -6px; left: 0; width: 90px; height: 6px; background: var(--steel); }
.pillar-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.pillar .ai { width: 60px; height: 60px; min-width: 60px; margin-bottom: 0; }
.pillar h3 { font-family: var(--head); font-weight: 800; font-size: clamp(20px,2vw,24px); line-height: 1.3; margin: 0; }
.pillar .en.t { font-family: var(--head); font-weight: 600; font-size: clamp(12.5px,1.2vw,14px); color: var(--mute); margin-top: 2px; margin-bottom: 0; }
.pillar p.ar { font-size: clamp(15px,1.2vw,17px); line-height: 1.75; }
.pillar p.eng { direction: ltr; text-align: left; font-size: clamp(12px,1.1vw,13.5px); color: var(--mute); margin-top: 8px; line-height: 1.65; }
@media(max-width:980px) {
    .trio { grid-template-columns: 1fr; gap: 20px; }
}
@media(max-width:480px) {
    .pillar { padding: 18px 16px 16px; }
    .pillar-head { gap: 12px; }
    .pillar .ai { width: 52px; height: 52px; min-width: 52px; }
}
.draw .dr { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease .2s; }
.in .draw .dr,.draw.in .dr { stroke-dashoffset: 0; }
/* values */
.vgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 26px; border-top: 1px solid #b3b3b375; }
.val { padding: 28px 26px 28px 20px; border-bottom: 1px solid var(--line); position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 16px; transition: background .3s; }
.val:hover { background: color-mix(in srgb,var(--card) 70%,transparent); }
.val::after { content: ""; position: absolute; right: 0; top: 0; width: 0; height: 4px; background: var(--red); transition: width .5s; }
.val:hover::after { width: 100%; }
.val .ico { width: 44px; height: 44px; margin: 0; }
.val-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; width: 100%; }
.val h3, .val-head h3 { font-family: var(--head); font-weight: 800; font-size: 21px; line-height: 1.4; margin: 0; white-space: nowrap; }
.val .en.t, .val-head .en.t { font-family: var(--head); font-weight: 600; font-size: 13px; margin: 0; color: var(--mute); direction: ltr; text-align: left; white-space: nowrap; }
.val p { font-size: 16px; color: var(--mute); line-height: 1.8; }
.val p.eng { direction: ltr; text-align: left; font-size: 12.5px; margin-top: 6px; }
@media(max-width:980px) {
    .vgrid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:620px) {
    .vgrid { grid-template-columns: 1fr; }
}
.bi { height: 104px; width: auto; max-width: 100%; display: block; margin-bottom: 14px; transform: scale(.55) rotate(-30deg); opacity: 0; transition: transform 1.2s cubic-bezier(.2,.8,.2,1) .25s,opacity .8s .25s; }
.in .bi { transform: none; opacity: 1; }
.phil .bi { margin: 0; height: 96px; }
button.tile { display: block; width: 100%; font: inherit; cursor: pointer; border-width: 1px; border-top-width: 4px; }
.tile.on { transform: translateY(-8px); box-shadow: 0 0 0 2px var(--red),0 22px 40px rgba(0,0,0,.3); }
.bshow { display: grid; grid-template-columns: 1fr 1.15fr; margin-top: 50px; background: var(--graphite); color: #fff; overflow: hidden; border-top: 6px solid var(--red); }
.bph { position: relative; min-height: 440px; overflow: hidden; background: #000; }
.bph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity .9s ease,transform 9s ease-out; }
.bph img.on { opacity: 1; transform: scale(1); }
.bin { padding: 38px 40px; display: flex; flex-direction: column; justify-content: center; }
.bin.sw { animation: fade .6s both; }
.lv2 { align-self: flex-start; background: var(--maroon); font-size: 13.5px; font-weight: 700; padding: 1px 14px; margin-bottom: 12px; }
.bin h3 { font-family: var(--head); font-weight: 800; font-size: clamp(34px,4.4vw,56px); line-height: 1.2; direction: ltr; text-align: right; }
.btag { font-family: var(--head); font-weight: 600; color: #ff6679; font-size: 19px; margin: 4px 0 14px; }
.bin p { font-size: 16.5px; color: #d5d9de; line-height: 1.95; }
.bin p.eng { direction: ltr; text-align: left; font-size: 13px; color: #98a0a8; margin-top: 12px; line-height: 1.7; }
@media(max-width:940px) {
    .bshow { grid-template-columns: 1fr; }
    .bph { order: -1; min-height: 0; aspect-ratio: 16/9; }
    .bin { padding: 28px 24px; }
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chips span { background: var(--maroon); color: #fff; font-size: 12.5px; font-weight: 700; padding: 1px 10px; direction: ltr; }
.rl { margin-top: 12px; list-style: none; }
.rl li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.7; }
.rl li b { display: block; color: var(--ink); font-size: 14.5px; }
.rl li span { color: var(--mute); }
.cine { padding: 0; min-height: min(80vh,640px); display: flex; align-items: center; overflow: hidden; color: #fff; }
.cine img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; opacity: .6; will-change: transform; }
.cov { position: absolute; inset: 0; background: linear-gradient(270deg,rgba(13,16,19,.94),rgba(13,16,19,.5) 62%,rgba(13,16,19,.15)); }
.cin { position: relative; z-index: 2; width: 100%; padding: 90px 22px; }
.cine h2 { font-size: clamp(42px,7.4vw,100px); line-height: 1.2; max-width: 12em; }
.cine .kick { color: #ff6679; }
.cine .kick::before { background: #ff6679; }
.cen { direction: ltr; text-align: right; font-family: var(--head); font-weight: 600; font-size: clamp(16px,2.4vw,28px); color: #ff6679; margin: 6px 0 26px; }
.phone img { width: min(600px,100%)!important; }
/* intro svg */
.intro2 { background: transparent; padding: 6px 0 0; direction: ltr; }
.intro2, .isvg, .isvg svg, .isvg * { color: initial; fill: initial; }
.isvg { max-width: 1300px; margin: 0 auto; }
.isvg svg { display: block; width: 100%; height: auto; }
.ia-card,.ia-em,.ia-wd1,.ia-wd2,.lt,.ia-tile,.ia-pill,.ia-kb,.ia-line { transform-box: fill-box; transform-origin: center; }
.ia-card { animation: iaCard 1.1s .1s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes iaCard {
    from { opacity: 0; transform: translateY(1.6px) scale(.97); }
}
.ia-kb { transform-box: fill-box; transform-origin: center; }
/* عارض صور اللوحة الترحيبية Hero Slideshow - دوران تلقائي كل 30 ثانية */
.ia-hero-slider { position: relative; }
.hero-slide { opacity: 0; transition: opacity 1.4s cubic-bezier(0.4,0,0.2,1),transform 30s linear; transform-origin: 50% 50%; transform-box: fill-box; transform: scale(1); pointer-events: none; }
.hero-slide.active { opacity: 1; transform: scale(1.08) translate(-0.35px,0.2px); pointer-events: auto; }
/* واجهة التحكم التفاعلية - إخفاء مؤقت بناءً على الطلب */
.hero-slider-ui { display: none!important; }
.hero-nav-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.08); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: all .25s ease; }
.hero-nav-btn svg { width: 14px; height: 14px; }
.hero-nav-btn:hover { background: var(--red,#e10613); border-color: var(--red,#e10613); transform: scale(1.1); box-shadow: 0 0 10px rgba(225,6,19,0.6); }
.hero-dots { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; }
.hdot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.25); border: none; padding: 0; cursor: pointer; overflow: hidden; transition: width .35s cubic-bezier(0.4,0,0.2,1),background-color .3s ease,transform .2s ease; }
.hdot:hover { transform: scale(1.25); background: rgba(255,255,255,0.5); }
.hdot.active { width: 26px; border-radius: 999px; background: rgba(255,255,255,0.18); }
.hdot-progress { position: absolute; inset: 0; width: 0%; border-radius: inherit; background: linear-gradient(90deg,#e10613 0%,#ff4d5a 100%); }
.hdot.active .hdot-progress { animation: hdotFill 30s linear forwards; }
@keyframes hdotFill {
    from { width: 0%; }
    to { width: 100%; }
}
.hero-slider-ui.paused .hdot.active .hdot-progress { animation-play-state: paused; }
.hero-slide-badge { font-family: var(--head,'Cairo',sans-serif); font-weight: 700; font-size: 11.5px; color: #e5e9f0; letter-spacing: 0.2px; padding-inline: 4px; white-space: nowrap; direction: rtl; text-align: right; }
@media (max-width:600px) {
    .hero-slider-ui { margin: 12px auto 4px; padding: 4px 10px 4px 6px; gap: 6px; }
    .hero-nav-btn { width: 22px; height: 22px; }
    .hero-nav-btn svg { width: 12px; height: 12px; }
    .hero-slide-badge { font-size: 10.5px; }
}
.ia-line { animation: iaLine 2.3s .5s cubic-bezier(.5,0,.2,1) backwards; }
@keyframes iaLine {
    0% { clip-path: inset(0 100% calc(100% - 7px) 0); }
    45% { clip-path: inset(0 0 calc(100% - 7px) 0); }
    100% { clip-path: inset(0 0 0 0); }
}
.lt { animation: iaLt .8s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes iaLt {
    from { opacity: 0; transform: translateY(1.5px); }
}
.ia-brand-intro { animation: iaLogoReveal 1.35s 0.75s cubic-bezier(0.16, 1, 0.3, 1) backwards; transform-box: fill-box; transform-origin: center; transition: opacity .65s ease,visibility .65s ease; }
.ia-brand-intro.hide-on-brand { opacity: 0!important; visibility: hidden!important; pointer-events: none!important; }
@keyframes iaLogoReveal {
    0% { opacity: 0; transform: translateX(-12px) scale(0.96); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    40% { opacity: 0.8; }
    100% { opacity: 1; transform: translateX(0) scale(1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes iaLogoFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-0.35px); }
}
.ia-em image,.ia-em rect,.ia-em path,.ia-logo-unified { border: none!important; stroke: none!important; outline: none!important; filter: none!important; }
.ia-logo-unified { animation: iaLogoFloat 6s 2.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; transition: transform .3s ease; }
.ia-logo-unified:hover { transform: scale(1.02); }
.l3-em, .l3-em image, .l3-em * { border: none!important; stroke: none!important; outline: none!important; box-shadow: none!important; }
@keyframes iaEm {
    from { opacity: 0; transform: rotate(-140deg) scale(.3); }
}
@keyframes iaFlt {
    0%,100% { translate: 0 0; }
    50% { translate: 0 -.35px; }
}
.ia-wd1 { animation: iaWd1 1.1s 1.1s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes iaWd1 {
    from { opacity: 0; clip-path: inset(0 100% 0 0); }
}
.ia-wd2 { animation: iaWd2 1.1s .95s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes iaWd2 {
    from { opacity: 0; clip-path: inset(0 0 0 100%); }
}
.ia-tile { cursor: pointer; animation: iaTile .9s cubic-bezier(.2,.8,.2,1) backwards; transition: transform .3s,filter .3s; outline: none; }
@keyframes iaTile {
    from { opacity: 0; transform: translateY(3px); }
}
.ia-tile:hover,.ia-tile:focus-visible { transform: translateY(-.55px) scale(1.05); filter: drop-shadow(0 0 .25px #ed1c24) drop-shadow(0 .3px .5px rgba(0,0,0,.5)); }
.ia-pill { cursor: pointer; animation: iaPill .8s 3.1s cubic-bezier(.2,.9,.3,1.3) backwards; transition: transform .2s; }
@keyframes iaPill {
    from { opacity: 0; transform: scale(.6); }
}
.ia-pill:hover { transform: translateY(-.3px); }
/* تحسين عناصر الشعار والخط التفاعلي .st2 */
.isvg .st2 { fill: var(--red,#ed1c24); filter: drop-shadow(0 0 .35px rgba(237,28,36,.55)); transition: fill .35s ease,filter .35s ease; }
.isvg .ia-wd1 .st2 { animation: st2Glow 4.8s ease-in-out infinite alternate; }
.isvg .ia-line .st2 { transition: filter .4s ease,opacity .3s ease; }
.isvg:hover .ia-line .st2 { filter: drop-shadow(0 0 .9px rgba(237,28,36,.85)) drop-shadow(0 0 1.8px rgba(237,28,36,.4)); }
@keyframes st2Glow {
    0% { filter: drop-shadow(0 0 .2px rgba(237,28,36,.35)); }
    50% { filter: drop-shadow(0 0 .75px rgba(237,28,36,.75)) drop-shadow(0 0 1.2px rgba(237,28,36,.35)); }
    100% { filter: drop-shadow(0 0 .3px rgba(237,28,36,.4)); }
}
@media (prefers-reduced-motion:reduce) {
    .isvg * { animation: none!important; }
}
.gochips { display: none; gap: 8px; padding: 6px 16px 20px; grid-template-columns: repeat(2,1fr); }
.gochips button { background: var(--maroon); color: #fff; border: 0; padding: 10px; font-weight: 700; font-size: 15px; min-height: 44px; direction: ltr; }
.gochips button:hover { background: var(--red); }
@media(max-width:700px) {
    .gochips { display: grid; }
}
.pr { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; }
.pr .bi { height: min(230px,36vw); }
@media(max-width:700px) {
    .pr { grid-template-columns: 1fr; gap: 20px; }
}
.nr { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wp { font-size: 13px; font-weight: 700; text-decoration: none; padding: 3px 14px; border: 1px solid var(--red); background: var(--red); color: #fff; white-space: nowrap; }
.wp:hover { background: var(--maroon2); }
.ymap { margin-top: 46px; background: var(--card); border: 1px solid var(--line); padding: 22px 22px 14px; border-top: 5px solid var(--maroon); }
.yh h3 { font-family: var(--head); font-weight: 800; font-size: clamp(20px,2.4vw,28px); line-height: 1.5; }
.ymap svg { width: 100%; height: auto; max-height: 640px; margin-top: 6px; }
.yland { fill: url(#yg); stroke: #7f1319; stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 12px 16px rgba(0,0,0,.2)); }
.ysea { font-family: var(--body); font-size: 15px; fill: var(--steel); font-style: italic; }
.ygl { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 7; opacity: .7; }
/* seq - مسار وتنسيق التسلسل المحفور ثلاثي الأبعاد المجسم */
.seq { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 10px; margin-top: 16px; --p: 0; padding: 10px 4px 18px; }
/* مجرى المسار المحفور ثلاثي الأبعاد (Recessed 3D Beveled Track - يقع تحت العناصر بشكل افتراضي وممتد بدقة عبر مراكز الدوائر) */
.sline { position: absolute; top: 21px; right: calc(100% / var(--n, 4) / 2); left: calc(100% / var(--n, 4) / 2); height: 6px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(255, 255, 255, 0.65) 100%); border-radius: 999px; box-shadow: inset 1px 1.5px 3px rgba(0, 0, 0, 0.22),0 1px 0 rgba(255, 255, 255, 0.85); overflow: hidden; z-index: 0; pointer-events: none; }
.sfill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--maroon), var(--red)); border-radius: 999px; box-shadow: 0 0 10px rgba(225, 6, 6, 0.6), 0 0 4px var(--red); transform: scaleX(var(--p)); transform-origin: right; transition: transform .45s cubic-bezier(.25, .9, .3, 1); }
.sn { position: relative; padding-top: 48px; display: flex; flex-direction: column; z-index: 1; }
/* القرص الرقمي المجسم والمحفور للداخل - متوسّط ومحاذى بدقة مع شريط التقدم */
.dot { position: absolute; top: 8px; right: 50%; transform: translateX(50%); width: 32px; height: 32px; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.98) 0%, rgba(225, 230, 238, 0.95) 70%, rgba(200, 208, 220, 0.95) 100%); border: 1.5px solid rgba(160, 175, 195, 0.6); border-radius: 50%; display: grid; place-items: center; font-family: var(--head); font-weight: 800; font-size: 13.5px; line-height: 1; color: var(--maroon); z-index: 2; box-shadow: inset 1px 1.5px 3px rgba(0, 0, 0, 0.18),inset -1px -1px 3px rgba(255, 255, 255, 0.95),0 3px 8px rgba(0, 0, 0, 0.1),0 1px 0 rgba(255, 255, 255, 0.9); transition: background .35s, border-color .35s, color .35s, transform .35s, box-shadow .35s; }
.dot::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; border: 1px dashed rgba(137, 24, 17, 0.25); pointer-events: none; }
.sn.on .dot, .sn:hover .dot { background: radial-gradient(circle at 35% 30%, #ff4d5a 0%, var(--red) 60%, var(--maroon) 100%); border-color: #ff6679; color: #fff; transform: translateX(50%) scale(1.12); box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.45),inset -1px -2px 4px rgba(0, 0, 0, 0.35),0 4px 14px rgba(225, 6, 6, 0.45); }
.sn.on .dot::after, .sn:hover .dot::after { border-color: rgba(255, 255, 255, 0.4); }
/* بطاقات خطوات التصنيع #mseq داخل .sn بجعلها محفورة ومجسمة ثلاثية الأبعاد ومحاذاة للدوائر */
#mseq .sn { background: linear-gradient(165deg, rgba(238, 242, 246, 0.92) 0%, rgba(225, 230, 238, 0.98) 100%); border: 1px solid rgba(160, 175, 195, 0.45); border-top: 4px solid var(--maroon); border-radius: 16px; padding: 48px 18px 20px; box-shadow: inset 3px 4px 10px rgba(0, 0, 0, 0.16),inset -3px -3px 8px rgba(255, 255, 255, 0.9),0 1px 0 rgba(255, 255, 255, 0.95),0 2px 8px rgba(0, 0, 0, 0.04); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1), border-color .35s; }
#mseq .sn:hover { transform: translateY(-3px); box-shadow: inset 4px 6px 14px rgba(0, 0, 0, 0.22),inset -3px -3px 10px rgba(255, 255, 255, 0.95),0 4px 16px rgba(137, 24, 17, 0.08); border-color: rgba(137, 24, 17, 0.4); }
#mseq .sn .dot { top: 8px; right: 50%; transform: translateX(50%); }
#mseq .sn.on .dot, #mseq .sn:hover .dot { transform: translateX(50%) scale(1.12); }
#mseq .sn h3 { margin-top: 4px; font-family: var(--head); font-weight: 800; font-size: 19px; line-height: 1.45; color: var(--ink); }
#mseq .sn .en.t { font-family: var(--head); font-weight: 600; font-size: 12.5px; color: #788594; margin-bottom: 8px; }
#mseq .sn p { font-size: 14.5px; color: var(--mute); line-height: 1.75; }
#mseq .sn p.eng { direction: ltr; text-align: left; font-size: 12px; margin-top: 10px; color: #788594; line-height: 1.6; border-top: 1px dashed rgba(160, 175, 195, 0.35); padding-top: 8px; }
/* الوضع الليلي لمسار التسلسل وبطاقات خطوات التصنيع */
[data-theme="dark"] .sline { background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(255, 255, 255, 0.08) 100%); box-shadow: inset 1px 1.5px 3px rgba(0, 0, 0, 0.85),0 1px 0 rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .dot { background: radial-gradient(circle at 35% 30%, #1a1e24 0%, #12151a 70%, #0d0f13 100%); border-color: rgba(255, 255, 255, 0.12); color: #ff5a6e; box-shadow: inset 1.5px 2px 4px rgba(0, 0, 0, 0.8),inset -1px -1px 3px rgba(255, 255, 255, 0.05),0 3px 8px rgba(0, 0, 0, 0.5),0 1px 0 rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .dot::after { border-color: rgba(255, 90, 110, 0.25); }
[data-theme="dark"] #mseq .sn { background: linear-gradient(165deg, #111419 0%, #0d0f13 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-top: 4px solid var(--red); box-shadow: inset 3px 5px 12px rgba(0, 0, 0, 0.75),inset -2px -3px 8px rgba(255, 255, 255, 0.05),0 1px 0 rgba(255, 255, 255, 0.06),0 4px 14px rgba(0, 0, 0, 0.4); }
[data-theme="dark"] #mseq .sn:hover { box-shadow: inset 4px 7px 16px rgba(0, 0, 0, 0.88),inset -2px -3px 10px rgba(255, 255, 255, 0.08),0 6px 20px rgba(225, 6, 6, 0.12); border-color: rgba(225, 6, 6, 0.4); }
[data-theme="dark"] #mseq .sn h3 { color: #f1f3f6; }
[data-theme="dark"] #mseq .sn .en.t,[data-theme="dark"] #mseq .sn p.eng { color: #727e8d; border-top-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] #mseq .sn p { color: #9aa5b2; }
@media(max-width:1000px) {
    .seq { grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
    .sline { top: 8px; bottom: 8px; left: auto; right: 25px; width: 6px; height: auto; }
    .sfill { transform: scaleY(var(--p)); transform-origin: top; }
    .sn { padding: 0 54px 0 0; min-height: 40px; }
    .dot { top: 8px; right: 12px; transform: none; }
    .sn.on .dot, .sn:hover .dot { transform: scale(1.12); }
    #mseq .sn { padding: 16px 54px 18px 18px; }
    #mseq .sn .dot { top: 14px; right: 12px; transform: none; }
    #mseq .sn.on .dot, #mseq .sn:hover .dot { transform: scale(1.12); }
}
/* brands (#brands & #bseq) - توسيط العناصر وتصحيح العرض بالكامل */
#brands .w { text-align: center; display: flex; flex-direction: column; align-items: center; }
#brands .kick { justify-content: center; }
#brands h2,#brands .h2en { text-align: center; }
#bseq { width: 100%; max-width: 1180px; margin: 36px auto 0; justify-content: center; align-items: stretch; }
#bseq .sn { height: 100%; display: flex; flex-direction: column; justify-content: flex-start; }
@media(max-width:1000px) {
    #bseq .sn { padding: 0 54px 0 0; }
    #bseq .dot { top: 8px; right: 12px; left: auto; transform: none; }
    #bseq .sn.on .dot, #bseq .sn:hover .dot { transform: scale(1.12); }
}
.tile { position: relative; background: linear-gradient(160deg, #242930 0%, #15181c 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 24px 18px 22px; text-align: center; color: #fff; cursor: pointer; box-shadow: inset 2px 3px 8px rgba(0, 0, 0, 0.65), inset -1px -2px 6px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.35); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1), border-color .35s; overflow: hidden; height: calc(100% - 10px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* توحيد استدارة وتنسيق حدود بطاقات العلامات التجارية */
.sn:nth-child(2) .tile { border-top: 4px solid #d1202e; }
.sn:nth-child(3) .tile { border-top: 4px solid #e63946; }
.sn:nth-child(4) .tile { border-top: 4px solid #f6b21b; }
.sn:nth-child(5) .tile { border-top: 4px solid #19a9bd; }
.tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.08) 0%, transparent 70%); pointer-events: none; }
.tile:hover { transform: translateY(-6px); box-shadow: inset 3px 5px 12px rgba(0, 0, 0, 0.85), inset -1px -2px 8px rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 18px rgba(225, 6, 6, 0.25); }
.sn:nth-child(2) .tile:hover { border-color: #d1202e; }
.sn:nth-child(3) .tile:hover { border-color: #e63946; }
.sn:nth-child(4) .tile:hover { border-color: #f6b21b; }
.sn:nth-child(5) .tile:hover { border-color: #19a9bd; }
.tile .lv { display: inline-block; background: linear-gradient(90deg, var(--maroon), var(--red)); color: #fff; font-size: 12.5px; font-weight: 700; padding: 3px 14px; border-radius: 999px; margin-bottom: 14px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.sn:nth-child(4) .tile .lv { background: linear-gradient(90deg, #c78604, #f6b21b); color: #171b20; }
.sn:nth-child(5) .tile .lv { background: linear-gradient(90deg, #0f6c79, #19a9bd); }
.tile img { height: 72px; max-width: 100%; object-fit: contain; display: block; margin: 0 auto 12px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4)); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.tile:hover img { transform: scale(1.06); }
.tile .tg { font-size: 14.5px; color: #d5d9de; line-height: 1.5; }
.bsum { margin-top: 60px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.bsum p { font-size: 20px; max-width: 30em; }
.bsum .eng { direction: ltr; text-align: left; font-size: 14px; color: var(--mute); margin-top: 10px; }
@media(max-width:860px) {
    .bsum { grid-template-columns: 1fr; }
}
/* products - بطاقات المنتجات بحدود هندسية متنوعة ومجسمة */
.pgrid { display: grid; grid-template-columns: repeat(6,1fr); gap: 22px; margin-top: 46px; }
.pc { grid-column: span 2; background: var(--card); border: 1px solid var(--line); padding: clamp(14px,3.2vw,30px) clamp(10px,2.5vw,28px); position: relative; transition: transform .35s,box-shadow .35s,border-color .35s; overflow: hidden; }
.pc:nth-child(n+4) { grid-column: span 3; }
.pc::after { content: ""; position: absolute; right: 0; top: 26px; bottom: 26px; width: 5px; background: var(--maroon); }
.pc:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.14); }
/* تنويع هندسي لبطاقات المنتجات */
.pc:nth-child(1) { border-radius: 18px 4px 18px 4px; border-top: 3px solid var(--maroon); }
.pc:nth-child(2) { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); border-top: 3px solid var(--red); border-left: 2px solid rgba(225, 6, 6, 0.4); }
.pc:nth-child(3) { border-radius: 4px 18px 4px 18px; border-top: 3px solid var(--maroon); }
.pc:nth-child(4) { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); border-top: 3px solid #ff5a6e; }
.pc:nth-child(5) { border-radius: 20px 20px 4px 4px; border-top: 3px solid var(--red); }
.pc:nth-child(6) { clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px); border-top: 3px solid var(--maroon2); }
.pc-head { display: flex; align-items: center; gap: clamp(8px,2vw,16px); margin-bottom: clamp(8px,2vw,14px); }
.pc-head > div:not(.ico), .pc-head > div { flex: 1; min-width: 0; }
.pc .ico { width: clamp(34px,7.5vw,48px); height: clamp(34px,7.5vw,48px); min-width: clamp(34px,7.5vw,48px); margin: 0; color: var(--maroon2); flex: none; }
.pc h3 { font-family: var(--head); font-weight: 800; font-size: clamp(14px,3vw,22px); line-height: 1.3; margin: 0; overflow-wrap: break-word; }
.pc .en.t { font-family: var(--head); font-weight: 600; font-size: clamp(9.5px,2vw,13px); margin-top: 2px; margin-bottom: 0; }
.pc p { font-size: clamp(12px,2.4vw,16px); color: var(--mute); line-height: 1.65; }
.pc p.eng { direction: ltr; text-align: left; font-size: clamp(10px,2vw,13px); margin-top: 8px; }
.note { margin-top: 34px; font-size: clamp(14px,3vw,19px); border-right: 5px solid var(--red); padding-right: 20px; }
@media(max-width:980px) {
    .pgrid { grid-template-columns: 1fr 1fr; }
    .pc,.pc:nth-child(n+4) { grid-column: span 1; }
    .pc:last-child { grid-column: span 2; }
}
@media(max-width:620px) {
    .pgrid { grid-template-columns: repeat(2,1fr); }
    .pc:last-child { grid-column: span 2; }
}
/* making */
.phil { margin-top: 24px; background: linear-gradient(135deg,var(--maroon),#4f0b10); color: #fff; padding: 34px 36px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; clip-path: polygon(0 0,100% 0,100% 100%,2% 100%); }
.phil .ico { color: #fff; width: 70px; height: 70px; margin: 0; }
.phil p { font-size: 20px; line-height: 1.9; }
.phil .eng { direction: ltr; text-align: left; font-size: 14px; color: #e8c9cc; margin-top: 8px; }
.sn h3 { font-family: var(--head); font-weight: 800; font-size: 21px; line-height: 1.5; }
.sn .en.t { font-family: var(--head); font-weight: 600; font-size: 12.5px; margin-bottom: 6px; }
.sn p { font-size: 16px; color: var(--mute); line-height: 1.8; }
.sn p.eng { direction: ltr; text-align: left; font-size: 12.5px; margin-top: 4px; }
@media(max-width:700px) {
    .phil { grid-template-columns: 1fr; }
}
/* categories */
.cgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 46px; }
.cat { background: var(--card); border: 1px solid var(--line); transition: transform .35s,box-shadow .35s; }
.cat:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.14); }
.ch { display: flex; align-items: center; gap: 8px; padding: 6px 10px; color: #fff; background: radial-gradient(circle at 35% 30%, var(--red) 0%, var(--maroon2)); }
.cat.m .ch { background: radial-gradient(circle at 35% 30%, var(--red) 0%,var(--maroon2)); }
.ch b { background: #fff; color: var(--ink); font-family: var(--head); font-size: 16px; min-width: 40px; text-align: center; padding: 1px 6px; }
.ch h3 { font-family: var(--head); font-weight: 800; font-size: 18px; line-height: 1.4; flex: 1; }
.ch .en { color: #e9ebee; font-size: 11.5px; letter-spacing: .5px; }
.ci { padding: 6px 8px; }
.ci div { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--bg2); padding: 7px 14px; margin-bottom: 8px; font-size: 15.5px; border-right: 3px solid var(--red); }
.ci div:last-child { margin-bottom: 0; }
.ci span.en { font-size: 11.5px; text-align: left; flex: none; max-width: 44%; }
@media(max-width:980px) {
    .cgrid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:640px) {
    .cgrid { grid-template-columns: 1fr; }
}
/* network */
.stats { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 24px; background: radial-gradient(circle at 35% 30%, var(--red) 0%, var(--maroon2)); color: #fff; clip-path: polygon(1.5% 0,100% 0,98.5% 100%,0 100%); }
.stat { padding: 30px 16px; text-align: center; position: relative; }
.stat+.stat::before { content: ""; position: absolute; right: 0; top: 22%; bottom: 22%; width: 2px; background: rgba(255,255,255,.3); transform: skewX(-20deg); }
.stat b { display: block; font-family: var(--head); font-weight: 800; font-size: clamp(30px,4.4vw,54px); line-height: 1.2; direction: ltr; }
.stat span { font-size: 17px; color: #f1d9db; }
@media(max-width:700px) {
    .stats { grid-template-columns: 1fr 1fr; }
    .stat+.stat::before { display: none; }
}
.net { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; margin-top: 46px; align-items: center; }
.map { background: var(--card); border: 1px solid var(--line); padding: 6px; }
.map svg { width: 100%; height: auto; }
.map .gl { stroke: var(--line); stroke-width: 1; opacity: .6; }
.lk { fill: none; stroke: var(--steel); stroke-width: 2; stroke-dasharray: 5 6; opacity: .8; }
.lk.on { stroke: var(--red); opacity: 1; }
.nd { cursor: pointer; }
.nd .core { fill: var(--graphite); stroke: #fff; stroke-width: 3; transition: fill .3s,r .3s; }
.nd.on .core,.nd:hover .core { fill: var(--red); }
.nd .ring { fill: none; stroke: var(--red); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.nd.on .ring { animation: rp 1.8s ease-out infinite; }
@keyframes rp {
    from { opacity: .8; transform: scale(1); }
    to { opacity: 0; transform: scale(3); }
}
.nd text { font-family: var(--body); fill: var(--ink); font-size: 15px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.nd text.e { font-size: 11px; font-weight: 500; fill: var(--mute); }
.hubs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.hb { background: var(--card); border: 1px solid var(--line); padding: 6px 14px; font-size: 14.5px; font-weight: 500; min-height: 40px; transition: background .2s,color .2s,border-color .2s; }
.hb:hover { border-color: var(--red); }
.hb.on { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.hd { background: var(--card); border: 1px solid var(--line); border-right: 6px solid var(--red); padding: 8px 10px; min-height: 160px; }
.hd h3 { font-family: var(--head); font-weight: 800; font-size: 23px; line-height: 1.4; }
.hd .en.t { font-family: var(--head); font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.hd p { font-size: 17.5px; }
.hd.sw { animation: fade .5s both; }
@media(max-width:940px) {
    .net { grid-template-columns: 1fr; }
}
.lg3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 46px; }
.lc { background: var(--card); border: 1px solid var(--line); border-top: 5px solid var(--red); padding: 10px 15px; border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,0.05); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.lc:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,0.1); border-color: var(--red); }
.lc-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.lc .ico { width: 38px; height: 38px; min-width: 38px; margin: 0; color: var(--red); flex: none; background: color-mix(in srgb, var(--red) 10%, transparent); border-radius: 8px; padding: 6px; border: 1px solid color-mix(in srgb, var(--red) 22%, transparent); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.lc:hover .ico { transform: scale(1.1) rotate(4deg); }
.lc h3 { font-family: var(--head); font-weight: 800; font-size: 20px; line-height: 1.35; margin: 0; color: var(--ink); }
.lc .en.t { font-family: var(--head); font-weight: 600; font-size: 12px; margin: 2px 0 0; color: var(--mute); }
.lc ul { margin: 0; padding: 0; }
.lc li { list-style: none; font-size: 15px; color: var(--mute); padding: 6px 20px 6px 0; position: relative; line-height: 1.8; }
.lc li::before { content: ""; position: absolute; right: 0; top: 14px; width: 7px; height: 7px; background: var(--red); transform: rotate(45deg); border-radius: 1px; }
.lc li b { color: var(--ink); }
:root[data-theme="dark"] .lc { background: linear-gradient(150deg, rgba(26,28,33,0.85), rgba(18,21,25,0.95)); border-color: rgba(255,255,255,0.08); border-top: 5px solid var(--red); box-shadow: 0 12px 32px rgba(0,0,0,0.35); }
:root[data-theme="light"] .lc { background: linear-gradient(150deg, rgba(255,255,255,0.95), rgba(246,243,237,0.88)); border-color: rgba(203,213,225,0.7); border-top: 5px solid var(--red); box-shadow: 0 10px 28px rgba(0,0,0,0.05); }
@media(max-width:980px) {
    .lg3 { grid-template-columns: 1fr; }
}
/* roadmap cards inside seq - ثلاثي الأبعاد محفور ومجوف للداخل مجسم (3D Carved / Recessed / Intaglio Inset Effect) */
/* حفر وتجويف مجسم للداخل عبر ظلال مركبة ثلاثية الأبعاد */
.rmc { position: relative; background: linear-gradient(165deg, rgba(238, 242, 246, 0.92) 0%, rgba(225, 230, 238, 0.98) 100%); border: 1px solid rgba(160, 175, 195, 0.45); border-top: 4px solid var(--maroon); border-radius: 12px; padding: 8px 12px 12px; margin-top: 10px; height: calc(100% - 10px); box-shadow: inset 3px 4px 10px rgba(0, 0, 0, 0.16), inset -3px -3px 8px rgba(255, 255, 255, 0.9), 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 8px rgba(0, 0, 0, 0.04); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1), border-color .35s; overflow: hidden; }
.rmc::before { content: ""; position: absolute; inset: 0; border-radius: 15px; pointer-events: none; background: radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.4) 0%, transparent 60%); opacity: 0.6; }
.rmc:hover { transform: translateY(-3px); box-shadow: inset 4px 6px 14px rgba(0, 0, 0, 0.22), inset -3px -3px 10px rgba(255, 255, 255, 0.95), 0 4px 16px rgba(137, 24, 17, 0.08); border-color: rgba(137, 24, 17, 0.4); }
.rmc h3 { position: relative; font-family: var(--head); font-weight: 800; font-size: 19px; line-height: 1.45; color: var(--ink); letter-spacing: -0.2px; margin-bottom: 8px; }
.rmc p { position: relative; font-size: 14.5px; color: var(--mute); line-height: 1.75; }
.rmc p.eng { direction: ltr; text-align: left; font-size: 12px; margin-top: 14px; color: #788594; line-height: 1.6; border-top: 1px dashed rgba(160, 175, 195, 0.35); padding-top: 10px; }
/* الرقاقات والعناصر الفرعية المحفورة داخل بطاقة خارطة الطريق */
.rmc .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; position: relative; }
.rmc .chips span { display: inline-flex; align-items: center; background: linear-gradient(145deg, rgba(230, 235, 242, 0.95), rgba(215, 222, 232, 0.95)); border: 1px solid rgba(160, 175, 195, 0.5); border-radius: 8px; padding: 3px 10px; font-size: 12.5px; font-weight: 700; color: var(--maroon); box-shadow: inset 1.5px 2px 4px rgba(0, 0, 0, 0.12), inset -1px -1px 3px rgba(255, 255, 255, 0.85), 0 1px 0 rgba(255, 255, 255, 0.9); letter-spacing: 0.2px; }
.rmc .rl { list-style: none; margin: 14px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.rmc .rl li { background: linear-gradient(150deg, rgba(235, 240, 247, 0.85), rgba(220, 227, 237, 0.95)); border: 1px solid rgba(160, 175, 195, 0.45); border-right: 3px solid var(--red); border-radius: 10px; padding: 7px 12px; font-size: 13.5px; line-height: 1.6; color: var(--ink); box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.1), inset -1px -1px 4px rgba(255, 255, 255, 0.9), 0 1px 0 rgba(255, 255, 255, 0.8); }
.rmc .rl li b { display: block; font-family: var(--head); font-size: 13.5px; color: var(--ink); font-weight: 700; }
.rmc .rl li span { display: block; font-size: 12px; color: var(--mute); margin-top: 2px; }
/* الوضع الليلي للبطاقات ثلاثية الأبعاد المحفورة */
[data-theme="dark"] .rmc { background: linear-gradient(165deg, #111419 0%, #0d0f13 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-top: 4px solid var(--red); box-shadow: inset 3px 5px 12px rgba(0, 0, 0, 0.75), inset -2px -3px 8px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.4); }
[data-theme="dark"] .rmc::before { background: radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.08) 0%, transparent 60%); opacity: 0.3; }
[data-theme="dark"] .rmc:hover { box-shadow: inset 4px 7px 16px rgba(0, 0, 0, 0.88), inset -2px -3px 10px rgba(255, 255, 255, 0.08), 0 6px 20px rgba(225, 6, 6, 0.12); border-color: rgba(225, 6, 6, 0.4); }
[data-theme="dark"] .rmc h3 { color: #f1f3f6; }
[data-theme="dark"] .rmc p { color: #9aa5b2; }
[data-theme="dark"] .rmc p.eng { color: #727e8d; border-top-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .rmc .chips span { background: linear-gradient(145deg, #161a20, #0f1216); border-color: rgba(255, 255, 255, 0.09); color: #ff5a6e; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.65), inset -1px -1px 3px rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .rmc .rl li { background: linear-gradient(150deg, #15191f, #0f1216); border-color: rgba(255, 255, 255, 0.08); border-right-color: var(--red); color: #d8dde4; box-shadow: inset 2px 3px 7px rgba(0, 0, 0, 0.6), inset -1px -1px 4px rgba(255, 255, 255, 0.05); }
[data-theme="dark"] .rmc .rl li b { color: #edf1f6; }
[data-theme="dark"] .rmc .rl li span { color: #8b96a4; }
/* app base grid */
.ag { display: grid; grid-template-columns: 1fr .9fr; gap: 56px; align-items: center; }
.phone { position: relative; display: flex; justify-content: center; align-items: center; }
.phone img { position: relative; width: min(440px,96%); max-width: 100%; height: auto; display: block; filter: drop-shadow(0 28px 36px rgba(0,0,0,.35)); animation: flt 6s ease-in-out infinite; transition: transform .3s ease-out; }
@keyframes flt {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.steps3 { display: grid; gap: 12px; margin-top: 24px; }
.s3 { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 6px 8px; background: var(--card); border-radius: 12px; border: 1px solid var(--line); border-right: 4px solid var(--red); box-shadow: 0 4px 14px rgba(0,0,0,.04); }
.s3 b { width: 44px; height: 44px; background: var(--red); color: #fff; border-radius: 10px; display: grid; place-items: center; font-family: var(--head); font-size: 18px; font-weight: 800; }
.s3 h3 { font-family: var(--head); font-weight: 800; font-size: 17.5px; line-height: 1.45; color: var(--ink); }
.s3 p { font-size: 14.5px; color: var(--mute); line-height: 1.7; margin-top: 2px; }
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.ft { display: flex; gap: 12px; align-items: flex-start; padding: 6px 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.03); }
.ft .ico { width: 26px; height: 26px; margin: 0; color: var(--red); flex: none; }
.ft h4 { font-family: var(--head); font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--ink); }
.ft p { font-size: 13px; color: var(--mute); line-height: 1.6; margin-top: 3px; }
.qr { display: flex; align-items: center; gap: 18px; margin-top: 22px; padding: 16px 20px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.06); border-top: 4px solid var(--red); flex-wrap: wrap; }
.qr #qrbox { width: 110px; height: 110px; flex: none; display: grid; place-items: center; }
.qr #qrbox img,.qr #qrbox canvas { width: 110px!important; height: 110px!important; }
.qr b { font-family: var(--head); font-size: 16.5px; display: block; line-height: 1.5; color: var(--ink); }
.qr small { display: block; direction: ltr; text-align: right; color: var(--mute); font-size: 13px; margin: 3px 0 8px; }
@media(max-width:960px) {
    .ag { grid-template-columns: 1fr; gap: 36px; text-align: right; }
    .phone { margin: 20px auto 0; max-width: 400px; }
    .feat { grid-template-columns: 1fr; }
}
/* contact */
.contact { background: var(--graphite); color: #fff; }
.contact .kick { color: #ff6679; }
.contact .kick::before { background: #ff6679; }
.contact .h2en { color: #9aa3af; }
.cg { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 36px; }
.cg>div { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-top: 3px solid var(--red); border-radius: 14px; padding: 22px 20px; transition: background .25s,border-color .25s,transform .25s; }
.cg>div:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); transform: translateY(-3px); }
.cg h3 { font-family: var(--head); font-weight: 700; font-size: 16px; color: #ff9aa6; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.cg h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; }
.tel { display: block; direction: ltr; text-align: right; font-weight: 700; font-size: clamp(17px,1.9vw,21px); letter-spacing: .3px; text-decoration: none; line-height: 1.4; color: #f1f5f9; transition: color .2s; }
.tel:hover { color: #ff6679; }
.acts { display: flex; gap: 10px; margin-top: 14px; flex-wrap: nowrap; flex-direction: row; }
.acts a { font-weight: 700; font-size: 14px; text-decoration: none; padding: 8px 18px; border-radius: 8px; border: 1px solid #5a636c; min-height: 40px; display: inline-flex; align-items: center; transition: background .2s,border-color .2s,transform .2s; }
.acts a:hover { background: #2f363e; border-color: #8e9aa8; transform: translateY(-1px); }
.acts a.wa { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 3px 10px rgba(225,6,19,.25); }
.acts a.wa:hover { background: var(--maroon2); border-color: var(--maroon2); }
.addr { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px; margin-top: 18px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; }
.addr p { font-size: 16px; line-height: 1.6; color: #e2e8f0; }
.addr small { display: block; color: #9aa3af; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
@media(max-width:860px) {
    .cg { grid-template-columns: 1fr; gap: 16px; }
    .cg>div { padding: 18px 16px; }
}
footer { background: #0f1215; color: #8b939b; text-align: center; font-size: 14.5px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom,0px)); }
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s ease var(--d,0s),transform .8s ease var(--d,0s); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation: none!important; transition: none!important; }
    .bi { opacity: 1; transform: none; }
    .rv { opacity: 1; transform: none; }
    .ht h1::after { transform: skewX(-25deg)!important; }
    .dr { stroke-dashoffset: 0!important; }
    .dv i { transform: skewX(-25deg)!important; }
    .sfill { transform: scaleX(1); }
}
/* round 3: animated icons */
.draw .dr { stroke-dasharray: 1; stroke-dashoffset: 1; }
.in .draw .dr,.draw.in .dr { animation: icoDraw 7s ease-in-out infinite; }
@keyframes icoDraw {
    0% { stroke-dashoffset: 1; }
    18%,80% { stroke-dashoffset: 0; }
    98%,100% { stroke-dashoffset: -1; }
}
.ico { overflow: visible; animation: icoBob 5s ease-in-out infinite; }
@keyframes icoBob {
    0%,100% { translate: 0 0; }
    50% { translate: 0 -1.5px; }
}
.ic-truck { animation: drive 2.6s ease-in-out infinite; }
@keyframes drive {
    0%,100% { translate: -2px 0; }
    50% { translate: 2px 0; }
}
.ic-trend,.ic-up { animation: icoUp 2.4s ease-in-out infinite; }
@keyframes icoUp {
    0%,100% { translate: 0 0; }
    50% { translate: 2px -2px; }
}
.ic-net,.ic-head,.ic-shield,.ic-badge { animation: icoPulse 2.6s ease-in-out infinite; }
@keyframes icoPulse {
    0%,100% { scale: 1; }
    50% { scale: 1.1; }
}
.ic-bolt { animation: icoFlash 2.2s infinite; }
@keyframes icoFlash {
    0%,60%,100% { opacity: 1; }
    64% { opacity: .2; }
    68% { opacity: 1; }
    72% { opacity: .35; }
}
.ic-phone { animation: icoShake 3.6s infinite; }
@keyframes icoShake {
    0%,70%,100% { rotate: 0deg; }
    75% { rotate: -9deg; }
    80% { rotate: 9deg; }
    85% { rotate: -5deg; }
    90% { rotate: 4deg; }
}
.ic-tag { animation: icoSwing 3s ease-in-out infinite; transform-origin: 20% 20%; }
@keyframes icoSwing {
    0%,100% { rotate: -8deg; }
    50% { rotate: 10deg; }
}
.ic-ruler { animation: icoSwing 3.4s ease-in-out infinite; transform-origin: 50% 50%; }
.ic-box,.ic-layers,.ic-factory { animation: icoBounce 2.4s ease-in-out infinite; }
@keyframes icoBounce {
    0%,100% { translate: 0 0; }
    40% { translate: 0 -2px; }
}
[data-mv="hand"] { transform-origin: 12px 12px; transform-box: view-box; animation: spin 4s linear infinite; }
[data-mv="hand2"] { transform-origin: 12px 12px; transform-box: view-box; animation: spin 24s linear infinite; }
[data-mv="glow"] { opacity: 0; animation: icoGlow 2.2s ease-in-out infinite; }
@keyframes icoGlow {
    50% { opacity: .4; }
}
[data-mv="pl"] { animation: pairL 3s ease-in-out infinite; }
@keyframes pairL {
    50% { translate: 2px 0; }
}
[data-mv="pr"] { animation: pairR 3s ease-in-out infinite; }
@keyframes pairR {
    50% { translate: -2px 0; }
}
[data-mv^="g"] { transform-box: fill-box; transform-origin: center; animation: gpop 3s ease-in-out infinite; }
[data-mv="g2"] { animation-delay: .25s; }
[data-mv="g3"] { animation-delay: .5s; }
[data-mv="g4"] { animation-delay: .75s; }
@keyframes gpop {
    0%,100% { scale: 1; }
    20% { scale: .7; }
    40% { scale: 1; }
}
[data-mv="np"] { transform-box: fill-box; transform-origin: center; animation: npp 2s ease-in-out infinite; }
@keyframes npp {
    50% { scale: 1.5; }
}
/* brand animated icons */
.ai { width: 104px; height: 104px; display: block; margin-bottom: 14px; overflow: visible; }
.phil .ai { margin: 0; width: 104px; height: 104px; filter: drop-shadow(0 0 8px rgba(255,255,255,.35)); }
.pr .ai { width: min(230px,38vw); height: auto; margin: 0; }
.eye-lid { transform-box: view-box; transform-origin: 100px 100px; animation: eyeBlink 6s infinite; }
@keyframes eyeBlink {
    0%,91%,100% { transform: scaleY(1); }
    94.5% { transform: scaleY(.06); }
}
.eye-look { animation: eyeLook 7s ease-in-out infinite; }
@keyframes eyeLook {
    0%,100% { translate: 0 0; }
    22% { translate: -13px -3px; }
    48% { translate: 13px 2px; }
    74% { translate: 0 5px; }
}
.eye-ring { transform-box: fill-box; transform-origin: center; animation: ringP 2.4s ease-in-out infinite; }
@keyframes ringP {
    0%,100% { scale: 1; }
    50% { scale: 1.14; }
}
.eye-tick { transform-box: view-box; transform-origin: 100px 100px; animation: tickP 2.4s ease-in-out infinite; }
@keyframes tickP {
    0%,100% { transform: scaleY(1); }
    50% { transform: scaleY(.82); }
}
.m-dash { transform-box: view-box; transform-origin: 100px 100px; animation: spin 26s linear infinite; }
.m-arrow { animation: arrowHit 3.8s cubic-bezier(.2,.9,.3,1) infinite; }
@keyframes arrowHit {
    0% { translate: -52px 52px; opacity: 0; }
    14% { opacity: 1; }
    30% { translate: 0 0; }
    36% { translate: -5px 5px; }
    44%,86% { translate: 0 0; opacity: 1; }
    100% { translate: 0 0; opacity: 0; }
}
.m-r1,.m-r2 { transform-box: fill-box; transform-origin: center; animation: hitRing 3.8s ease-out infinite; }
.m-r2 { animation-delay: .1s; }
@keyframes hitRing {
    0%,28% { scale: 1; }
    35% { scale: 1.2; }
    48%,100% { scale: 1; }
}
.o-ring { transform-box: view-box; transform-origin: 100px 100px; animation: spin 30s linear infinite; }
.o-arc { transform-box: view-box; transform-origin: 100px 100px; animation: spinrev 10s linear infinite; }
.o-rocket { animation: rocketBob 3s ease-in-out infinite; }
@keyframes rocketBob {
    0%,100% { translate: 0 5px; }
    50% { translate: 0 -9px; }
}
.o-flame,.o-flame2 { transform-box: fill-box; transform-origin: 50% 0; animation: flame .22s ease-in-out infinite alternate; }
.o-flame2 { animation-duration: .17s; }
@keyframes flame {
    from { scale: 1 .78; }
    to { scale: 1 1.18; }
}
.o-st { animation: twk 2s ease-in-out infinite; }
.o-st.s2 { animation-delay: .6s; }
.o-st.s3 { animation-delay: 1.1s; }
@keyframes twk {
    0%,100% { opacity: 1; scale: 1; }
    50% { opacity: .2; scale: .4; }
}
.o-st,.q-st { transform-box: fill-box; transform-origin: center; }
.p-dash { transform-box: view-box; transform-origin: 100px 100px; animation: spin 22s linear infinite; }
.p-t,.p-t2 { transform-box: view-box; transform-origin: 100px 100px; animation: tickP 2.6s ease-in-out infinite; }
.p-red { animation: chevUp 2.2s ease-in-out infinite; }
@keyframes chevUp {
    0%,100% { translate: 0 0; }
    50% { translate: 0 -12px; }
}
.p-dot { animation: dotB 2.2s ease-in-out infinite; }
@keyframes dotB {
    0%,100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}
.p-g { transform-box: fill-box; transform-origin: center; animation: icoPulse 2.2s ease-in-out infinite; }
.q-gear { transform-box: view-box; transform-origin: 100px 106px; animation: spin 18s linear infinite; }
.q-shield { transform-box: fill-box; transform-origin: center; animation: icoPulse 3s ease-in-out infinite; }
.q-check { stroke-dasharray: 1; animation: chk 3.4s ease-in-out infinite; }
@keyframes chk {
    0% { stroke-dashoffset: 1; }
    30%,85% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -1; }
}
.q-st { animation: twk 2s ease-in-out infinite; }
.q-st.s2 { animation-delay: .5s; }
.q-st.s3 { animation-delay: 1s; }
@keyframes spinrev {
    to { transform: rotate(-360deg); }
}
@media(prefers-reduced-motion:reduce) {
    .ai *,.ico,.ico * { animation: none!important; }
    .draw .dr { stroke-dashoffset: 0!important; }
    .q-check { stroke-dashoffset: 0!important; }
}
/* separate brand sections */
/* separate brand sections (#bsecs) — توسيط وتنسيق متوازن في الصفحة */
.bs { padding: 60px 16px; background: transparent; position: relative; overflow: hidden; }
.bs .w { max-width: 1240px; margin: 0 auto; position: relative; z-index: 2; }
.bs-in { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; justify-content: center; position: relative; padding: 36px 32px; background: transparent !important; backdrop-filter: none !important; backdrop-filter: none !important; border: none !important; box-shadow: none !important; overflow: visible; }
/* حدود الزوايا الهندسية الأربعة فقط (Corner Notches Only) */
.bs-in::before, .bs-in::after { content: ""; position: absolute; width: 32px; height: 32px; pointer-events: none; z-index: 3; transition: width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1), border-color .35s, filter .35s; }
/* الزاوية العلوية اليمنى والزاوية السفلية اليسرى */
.bs-in::before { top: 0; right: 0; border-top: 3px solid var(--ac, var(--red)); border-right: 3px solid var(--ac, var(--red)); }
.bs-in::after { bottom: 0; left: 0; border-bottom: 3px solid var(--ac, var(--red)); border-left: 3px solid var(--ac, var(--red)); }
/* الزوايا العلوية اليسرى والسفلية اليمنى عبر خلفية خطية هندسية دقيقة عند الزوايا */
.bs-in { background-image: linear-gradient(to right, var(--ac, var(--red)) 32px, transparent 32px), linear-gradient(to bottom, var(--ac, var(--red)) 32px, transparent 32px), linear-gradient(to left, var(--ac, var(--red)) 32px, transparent 32px), linear-gradient(to top, var(--ac, var(--red)) 32px, transparent 32px) !important; background-position: top left, top left, bottom right, bottom right !important; background-size: 32px 3px, 3px 32px, 32px 3px, 3px 32px !important; background-repeat: no-repeat !important; transition: background-size .35s cubic-bezier(.2,.8,.2,1); }
.bs-in:hover::before, .bs-in:hover::after { width: 38px; height: 38px; filter: drop-shadow(0 0 8px var(--ac, var(--red))); }
.bs-in:hover { background-size: 46px 3px, 3px 46px, 46px 3px, 3px 46px !important; }
/* لمسات هندسية إضافية للزوايا حسب هوية كل علامة */
#brand-rakan .bs-in::before, #brand-rakan .bs-in::after { border-width: 4px; }
#brand-seeltop .bs-in::before { border-radius: 0 16px 0 0; }
#brand-seeltop .bs-in::after { border-radius: 0 0 0 16px; }
#brand-glmod .bs-in::before, #brand-glmod .bs-in::after { border-style: solid; filter: drop-shadow(0 0 3px rgba(246, 178, 27, 0.4)); }
#brand-bravora .bs-in::before { border-radius: 16px 0 0 0; }
#brand-bravora .bs-in::after { border-radius: 0 0 16px 0; }
.bs.alt .bs-phw { order: 2; }
.bs-phw { position: relative; width: 100%; }
.bs-phw::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 2px solid var(--ac, var(--red)); opacity: .7; transition: inset .6s cubic-bezier(.2,.8,.2,1); }
.bs.alt .bs-phw::before { inset: 18px 18px -18px -18px; }
.bs-phw:hover::before { inset: 8px -8px -8px 8px; }
.bs.alt .bs-phw:hover::before { inset: 8px 8px -8px -8px; }
.bs-ph { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #000; border-top: 6px solid var(--ac, var(--red)); border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,.28); }
.bs-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform 2.2s cubic-bezier(.2,.8,.2,1); }
.bs-ph.in img { transform: scale(1); animation: kb2 20s 2.2s ease-in-out infinite alternate; }
@keyframes kb2 {
    to { transform: scale(1.08) translate(-1%,.8%); }
}
.bs-num { position: absolute; left: 18px; bottom: 6px; font-family: var(--head); font-weight: 800; font-size: clamp(70px,11vw,150px); line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.8); text-shadow: 0 4px 20px rgba(0,0,0,.4); pointer-events: none; }
.bs-head { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 10px 0 14px; }
.bs-plate { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(160deg,#2a3038,#171b20); padding: 10px 22px; border-top: 4px solid var(--ac, var(--red)); border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.25); flex: none; }
.bs-plate img { height: 54px; width: auto; display: block; max-width: 100%; }
.bs-tx { position: relative; text-align: right; }
.bs-tx h3 { font-family: var(--head); font-weight: 800; font-size: clamp(34px,5vw,64px); line-height: 1.15; direction: ltr; text-align: right; margin: 0; flex: none; }
.bs-tx .btag { font-family: var(--head); font-weight: 600; color: var(--ac, var(--maroon2)); font-size: 20px; margin: 4px 0 14px; }
.bs-tx p { font-size: 18px; color: var(--mute); line-height: 2; }
.bs-tx p.eng { direction: ltr; text-align: left; font-size: 14px; line-height: 1.75; margin-top: 10px; }
.bs-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
@media(max-width:900px) {
    .bs { padding: 50px 16px; }
    .bs-in { grid-template-columns: 1fr; gap: 30px; padding: 32px 24px; }
    .bs.alt .bs-phw { order: 0; }
    .bs-head { gap: 16px; }
}
@media(max-width:480px) {
    .bs-in { padding: 24px 16px; border-radius: 16px!important; clip-path: none!important; }
    .bs-plate { padding: 8px 16px; }
    .bs-plate img { height: 44px; }
}
/* intro text wave */
.lw { animation: iaLt .8s calc(.35s + var(--i)*.05s) cubic-bezier(.2,.8,.2,1) backwards,iaWave 5.5s calc(3.3s + var(--i)*.07s) ease-in-out infinite; }
@keyframes iaWave {
    0%,14%,100% { transform: none; }
    7% { transform: translateY(-.75px) scale(1.12); }
}
.ia-line { animation: iaLine 2.3s .5s cubic-bezier(.5,0,.2,1) backwards; }
/* app section — مدمج مع خلفية الصفحة المعتقة (Dot-Matrix) بدون حواف مصمتة */
.app { background: transparent; color: var(--ink); clip-path: none; padding: 30px 16px!important; margin-top: 0; position: relative; overflow: hidden; border-top: none; }
.app::before { content: ""; position: absolute; top: -120px; left: -80px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle,rgba(225,6,19,.065) 0%,rgba(137,24,17,.03) 45%,transparent 70%); pointer-events: none; z-index: 0; animation: appGlowFloat 14s ease-in-out infinite alternate; }
.app::after { content: ""; position: absolute; bottom: -100px; right: -60px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle,rgba(137,24,17,.05) 0%,rgba(225,6,19,.02) 50%,transparent 70%); pointer-events: none; z-index: 0; animation: appGlowFloat 16s ease-in-out infinite alternate-reverse; }
@keyframes appGlowFloat {
    0% { transform: translate(0,0) scale(1); }
    50% { transform: translate(24px,18px) scale(1.08); }
    100% { transform: translate(-16px,28px) scale(0.96); }
}
.app .w { position: relative; z-index: 2; }
.ag::before { content: ""; position: absolute; right: -24px; top: -50px; width: 240px; height: 240px; background: radial-gradient(var(--line) 1.5px,transparent 2px) 0 0/20px 20px; z-index: -1; opacity: .45; }
.app .kick { color: var(--maroon2); }
.app .kick::before { background: var(--maroon2); }
.app .h2en,.app .en { color: var(--mute); }
.ag p.lead { color: var(--mute); margin: 12px 0 20px; font-size: clamp(15.5px,1.6vw,19px); line-height: 1.8; }
.phone::before { display: none; }
.phone img { filter: drop-shadow(0 20px 30px rgba(0,0,0,.25)); }
.orb { position: absolute; border-radius: 50%; filter: blur(30px); animation: orb 9s ease-in-out infinite alternate; z-index: 0; }
.orb.o1 { width: 220px; height: 220px; background: rgba(225,6,19,.08); top: 6%; left: 8%; }
.orb.o2 { width: 180px; height: 180px; background: rgba(137,24,17,.1); bottom: 4%; right: 10%; animation-delay: -4s; }
@keyframes orb {
    to { translate: 30px -24px; scale: 1.2; }
}
.fc { position: absolute; z-index: 3; background: var(--card); color: var(--ink); font-weight: 700; font-size: 13.5px; padding: 6px 16px 6px 12px; border-radius: 30px; box-shadow: 0 8px 22px rgba(0,0,0,.15); border: 1px solid var(--line); white-space: nowrap; animation: fcf 5s ease-in-out infinite; }
.fc::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--red); border-radius: 50%; margin-left: 8px; }
.fc.f1 { top: 6%; right: 0; }
.fc.f2 { top: 36%; left: -2%; animation-delay: -1.2s; }
.fc.f3 { bottom: 20%; right: -2%; animation-delay: -2.4s; }
.fc.f4 { bottom: 4%; left: 6%; animation-delay: -3.6s; }
@keyframes fcf {
    0%,100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}
.app .s3 { background: var(--card); border: 1px solid var(--line); border-right: 4px solid var(--red); box-shadow: 0 6px 18px rgba(0,0,0,.04); }
.app .s3 h3 { color: var(--ink); }
.app .s3 p { color: var(--mute); }
.app .ft { background: var(--card); border: 1px solid var(--line); }
.app .ft h4 { color: var(--ink); }
.app .ft p { color: var(--mute); }
.app .ft .ico { color: var(--red); }
.app .qr { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0,0,0,.08); border-top: 4px solid var(--red); }
@media(max-width:960px) {
    .app { padding: 46px 16px!important; }
    .fc.f2 { left: 2%; }
    .fc.f3 { right: 2%; }
}
@media (prefers-reduced-motion:reduce) {
    .orb,.fc { animation: none!important; }
}
.bs-tx { display: flex; flex-direction: column; align-items: flex-start; }
.bs-tx p { align-self: stretch; }
.lv2 { color: #fff; }
.bs-num { opacity: .7; }
.bs.alt .bs-ph { background: transparent; box-shadow: none; transition: box-shadow 1.2s; }
.bs-ph.rv { opacity: 1; transform: none; }
.bs-ph.in { box-shadow: 0 30px 60px rgba(0,0,0,.28); }
.bs-ph img { clip-path: inset(0 0 0 100%); transition: clip-path 1.3s cubic-bezier(.7,0,.2,1),transform 2.2s cubic-bezier(.2,.8,.2,1); }
.bs.alt .bs-ph img { clip-path: inset(0 100% 0 0); }
.bs-ph.in img,.bs.alt .bs-ph.in img { clip-path: inset(0); }
@media (prefers-reduced-motion:reduce) {
    .bs-ph img { clip-path: inset(0)!important; }
}
/* one-brand-at-a-time slider */
.bsl { padding: 90px 22px; background: var(--bg2); }
.bsl-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.bsl-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.bsl-tab { background: var(--card); border: 1px solid var(--line); padding: 8px 18px; font-weight: 700; display: flex; gap: 10px; align-items: center; min-height: 44px; direction: ltr; transition: background .25s,color .25s,transform .25s,border-color .25s; }
.bsl-tab b { color: var(--red); font-family: var(--head); }
.bsl-tab:hover { transform: translateY(-3px); border-color: var(--red); }
.bsl-tab.on { background: var(--maroon); color: #fff; border-color: var(--maroon); }
.bsl-tab.on b { color: #fff; }
.bsl-ctl { display: flex; align-items: center; gap: 12px; }
.bsl-ar { width: 38px; height: 38px; border: 2px solid var(--ink); background: transparent; font-size: 22px; font-weight: 700; transition: background .2s,color .2s; }
.bsl-ar:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.bsl-ar:disabled { opacity: .3; cursor: not-allowed; }
.bsl-cnt { font-family: var(--head); font-weight: 800; direction: ltr; min-width: 76px; text-align: center; }
.bsl-bar { height: 4px; background: var(--line); margin: 18px 0 34px; position: relative; }
.bsl-bar i { position: absolute; right: 0; top: 0; bottom: 0; width: 25%; background: var(--red); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.bsl-view { display: grid; overflow: hidden; touch-action: pan-y; }
.bsl-s { grid-area: 1/1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s,visibility .5s; }
.bsl-s.on { opacity: 1; visibility: visible; pointer-events: auto; }
.bsl-ph { position: relative; aspect-ratio: 16/10; overflow: hidden; border-top: 6px solid var(--red); box-shadow: 0 30px 60px rgba(0,0,0,.28); }
.bsl-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bsl-s.on .bsl-ph img { animation: phIn 1.2s cubic-bezier(.7,0,.2,1) both,kb2 20s 1.2s ease-in-out infinite alternate; }
@keyframes phIn {
    from { clip-path: inset(0 0 0 100%); transform: scale(1.3); }
    to { clip-path: inset(0); transform: scale(1); }
}
.bsl-s.on .bsl-tx>* { animation: txIn .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d,0s); }
@keyframes txIn {
    from { opacity: 0; transform: translateY(26px); }
}
@media(max-width:900px) {
    .bsl { padding: 64px 20px; }
    .bsl-s { grid-template-columns: 1fr; gap: 26px; }
}
@media (prefers-reduced-motion:reduce) {
    .bsl-s.on .bsl-ph img,.bsl-s.on .bsl-tx>* { animation: none!important; }
}
/* pulsing text on hover / touch (animation driven by JS, glow by CSS) */
:is(h1,h2,h3,h4,p,li,dt,dd,.kick,.tg,.btag,.note,.lead,.tel,.stat span,.stat b,.lv,.lv2,.hb,.pill):hover { text-shadow: 0 0 18px rgba(209,32,46,.35); }
/* round 4 */
/* intro: creative background reveal + 3D logo */
.isvg { position: relative; }
.ia-shut .sh { transform-box: fill-box; transform-origin: center; animation: shutOut 1.2s cubic-bezier(.7,0,.2,1) calc(.2s + var(--i)*.075s) forwards; }
@keyframes shutOut {
    to { transform: translateY(calc(var(--d)*108%)); }
}
.ia-sweep { opacity: 0; transform-box: fill-box; animation: swp 9s 1.5s ease-in-out infinite; }
@keyframes swp {
    0% { opacity: 0; transform: translateX(-12px); }
    2% { opacity: .2; }
    16% { opacity: .2; transform: translateX(86px); }
    18%,100% { opacity: 0; transform: translateX(86px); }
}
.ia-kb { animation: iaKb 22s 0.2s ease-in-out infinite alternate; }
.ia-lifted .ia-em,.ia-lifted .ia-wd1,.ia-lifted .ia-wd2,.ia-lifted .ia-tg { opacity: 0!important; }
.l3d { position: absolute; inset: 0; pointer-events: none; perspective: calc(var(--u,1)*1100px); perspective-origin: 50% 48%; z-index: 3; }
.l3d-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--mx,0)*16deg)) rotateX(calc(var(--my,0)*-10deg)); transition: transform .6s ease-out; }
.l3d-in { position: absolute; inset: 0; transform-style: preserve-3d; animation: l3Sway 10s 3s ease-in-out infinite; }
@keyframes l3Sway {
    0%,100% { transform: rotateY(-7deg) rotateX(2deg); }
    50% { transform: rotateY(7deg) rotateX(-2deg); }
}
.l3-item { position: absolute; transform-style: preserve-3d; }
.l3-spin { position: absolute; inset: 0; transform-style: preserve-3d; }
.l3-ly { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; backface-visibility: visible; }
.l3-ly.back { filter: brightness(.3) saturate(.7); }
.l3-tg .lt { pointer-events: auto; }
.l3-em { animation: l3EmIn 2.1s .5s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes l3EmIn {
    from { opacity: 0; transform: translateZ(calc(var(--u,1)*-900px)) rotateY(-220deg) rotateX(40deg) scale(.3); }
}
.l3-em .l3-spin { animation: l3EmLoop 16s 3s ease-in-out infinite; }
@keyframes l3EmLoop {
    0% { transform: translateZ(0) rotateY(0deg); }
    25% { transform: translateZ(calc(var(--u,1)*30px)) rotateY(-10deg); }
    50% { transform: translateZ(0) rotateY(10deg); }
    62% { transform: translateZ(calc(var(--u,1)*60px)) rotateY(10deg); }
    78% { transform: translateZ(calc(var(--u,1)*60px)) rotateY(370deg); }
    90%,100% { transform: translateZ(0) rotateY(360deg); }
}
.l3-ar { transform-origin: 50% 100%; animation: l3ArIn 1.5s 1s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes l3ArIn {
    from { opacity: 0; transform: rotateX(-100deg) translateZ(calc(var(--u,1)*-200px)); }
}
.l3-ar .l3-spin { animation: l3Bob 6s 2.6s ease-in-out infinite; }
@keyframes l3Bob {
    0%,100% { transform: translateZ(0); }
    50% { transform: translateZ(calc(var(--u,1)*34px)); }
}
.l3-al { animation: l3AlIn 1.6s .85s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes l3AlIn {
    from { opacity: 0; transform: translateX(18%) translateZ(calc(var(--u,1)*-700px)) rotateY(70deg); }
}
.l3-al .l3-spin { animation: l3Bob2 7s 2.6s ease-in-out infinite; }
@keyframes l3Bob2 {
    0%,100% { transform: translateZ(calc(var(--u,1)*10px)) rotateY(-3deg); }
    50% { transform: translateZ(calc(var(--u,1)*44px)) rotateY(3deg); }
}
.l3-tg { transform-origin: 50% 0; animation: l3TgIn 1.3s 1.5s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes l3TgIn {
    from { opacity: 0; transform: rotateX(95deg); }
}
.l3-tg .l3-spin { animation: l3Bob 8s 3s ease-in-out infinite; }
/* main headings: motion graphics, always alive — موحد لكافة الأقسام */
.mg { --tc: var(--ink); }
.cine .mg, .contact .mg, .bot-sec .mg, .dark-sec .mg { --tc: #fff; }
[data-theme="dark"] .mg { --tc: #eef0f2; }
h2.mg.rv { opacity: 1; transform: none; }
.mg .hwd { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .2em .05em .32em; margin: -.2em -.05em -.32em; perspective: 700px; }
.mg .hwi { display: inline-block; transform: translateY(118%) rotateX(-80deg) scale(.9); transform-origin: 50% 100%; opacity: 0; transition: transform 1.05s cubic-bezier(.2,.9,.25,1.05) calc(var(--k)*.09s),opacity .6s calc(var(--k)*.09s); background: linear-gradient(100deg,var(--tc) 44%,var(--red) 50%,var(--tc) 56%) 100% 0/250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.mg.in .hwi,.in .mg .hwi { transform: none; opacity: 1; animation: hShine 6s calc(1.4s + var(--k)*.22s) linear infinite; }
@keyframes hShine {
    0% { background-position: 100% 0; }
    26%,100% { background-position: 0% 0; }
}
.mg:hover { text-shadow: none!important; }
.mg::after { animation: hBar 4s ease-in-out infinite; }
@keyframes hBar {
    0%,100% { width: 80px; }
    50% { width: 150px; }
}
.kick::before { animation: kBar 3s ease-in-out infinite; }
@keyframes kBar {
    50% { width: 60px; }
}
.kico { width: 24px; height: 24px; margin: 0; color: var(--maroon2); }
.cine .kico,.contact .kico { color: #ff6679; }
.dico { width: 26px; height: 26px; margin: 0 0 -6px 8px; display: inline-block; color: #ff6679; }
@media (prefers-reduced-motion:reduce) {
    .mg .hwi { transform: none!important; opacity: 1!important; animation: none!important; background: none; -webkit-text-fill-color: var(--tc); color: var(--tc); }
    .ia-shut,.ia-sweep { display: none; }
}
/* elegant stacked brand sections */
.bs { position: relative; overflow: hidden; padding: 30px 16px; }
.bs .w { position: relative; z-index: 2; }
.bs-wm { position: absolute; top: 50%; left: 2%; translate: 0 -50%; font-family: var(--head); font-weight: 800; font-size: clamp(90px,17vw,260px); line-height: 1; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb,var(--ac) 18%,transparent); white-space: nowrap; pointer-events: none; direction: ltr; animation: wmDrift 18s ease-in-out infinite alternate; z-index: 0; }
.bs.alt .bs-wm { right: auto; left: -2%; }
@keyframes wmDrift {
    to { translate: -5% -50%; }
}
.bs.alt .bs-phw { order: 2; }
.bs-phw { position: relative; }
.bs-phw::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 2px solid var(--ac); opacity: .7; transition: inset .6s cubic-bezier(.2,.8,.2,1); }
.bs.alt .bs-phw::before { inset: 18px 18px -18px -18px; }
.bs-phw:hover::before { inset: 8px -8px -8px 8px; }
.bs.alt .bs-phw:hover::before { inset: 8px 8px -8px -8px; }
.bs-ph { border-top-color: var(--ac); }
.bs-ph img { transition: clip-path 1.3s cubic-bezier(.7,0,.2,1),transform 2.2s cubic-bezier(.2,.8,.2,1),translate .5s ease-out; }
.bs-plate { border-top-color: var(--ac); }
.bs-tx h3 { position: relative; padding-bottom: 14px; }
.bs-tx h3::after { content: ""; position: absolute; right: 0; bottom: 0; height: 5px; width: 90px; background: var(--ac); transform: skewX(-25deg); animation: hBar 3.4s ease-in-out infinite; }
.bs-tx .btag { color: var(--ac); }
.bs .lv2 { background: var(--ac); color: var(--acf,#fff); }
.bs-nav .btn { background: var(--ac); border-color: var(--ac); color: var(--acf,#fff); }
.bs-nav .btn:hover { filter: brightness(1.12); }
.bs-nav .btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.bs-nav .btn.ghost:hover { background: var(--ink); color: var(--bg); }
/* brand dots navigation */
nav.bdots, .bdots { position: fixed !important; right: 18px !important; left: auto !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; width: auto !important; min-width: 0 !important; max-width: 44px !important; height: auto !important; min-height: 0 !important; max-height: fit-content !important; margin: 0 !important; padding: 12px 8px !important; border-radius: 24px !important; background: color-mix(in srgb,var(--card) 85%,transparent) !important; -webkit-backdrop-filter: blur(14px) saturate(160%) !important; backdrop-filter: blur(14px) saturate(160%) !important; border: 1px solid color-mix(in srgb,var(--line) 75%,transparent) !important; box-shadow: 0 8px 30px rgba(0,0,0,.15) !important; opacity: 0 !important; pointer-events: none !important; transform-origin: center right !important; transition: opacity .35s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 12px !important; z-index: 999 !important; box-sizing: border-box !important; }
nav.bdots.show, .bdots.show { opacity: 1 !important; pointer-events: auto !important; transform: translateY(-50%) scale(1) !important; }
.bdots button { position: relative; width: 12px!important; height: 12px!important; min-width: 12px!important; min-height: 12px!important; max-width: 12px!important; max-height: 12px!important; border-radius: 50%!important; border: 2px solid var(--mute); background: transparent; padding: 0; margin: 0; cursor: pointer; outline: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease; }
.bdots button::after { content: ""; position: absolute; inset: -10px; }
.bdots button:hover { border-color: var(--red); background: color-mix(in srgb,var(--red) 30%,transparent); transform: scale(1.3); }
.bdots button.on { background: var(--red)!important; border-color: var(--red)!important; box-shadow: 0 0 12px rgba(225,6,19,.7),0 0 0 3px rgba(225,6,19,.2); transform: scale(1.4); }
.bdots button span { position: absolute; right: 26px; top: 50%; transform: translateY(-50%) translateX(6px); background: var(--graphite); color: #fff; font-family: var(--head); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 6px 18px rgba(0,0,0,.3); white-space: nowrap; opacity: 0; pointer-events: none; direction: rtl; transition: opacity .2s ease,transform .2s ease; }
.bdots button:hover span,.bdots button:focus-visible span { opacity: 1; transform: translateY(-50%) translateX(0); }
[data-theme="dark"] .bdots { background: rgba(26,28,33,.85) !important; border-color: rgba(255,255,255,.12) !important; box-shadow: 0 10px 30px rgba(0,0,0,.55) !important; }
@media(max-width:900px) {
    .bs { padding: 72px 20px; }
    .bs.alt .bs-phw { order: 0; }
    .bdots { right: 8px !important; gap: 10px !important; padding: 10px 7px !important; }
    .bdots button { width: 10px; height: 10px; min-width: 10px; min-height: 10px; }
    .bs-phw::before,.bs.alt .bs-phw::before { inset: 12px -8px -12px 8px; }
}
@media(max-width:768px) {
    nav.bdots, .bdots { right: 6px !important; padding: 8px 5px !important; gap: 8px !important; z-index: 999 !important; }
    .bdots button { width: 9px !important; height: 9px !important; min-width: 9px !important; min-height: 9px !important; }
    /* إخفاء التسميات النصية عند التمرير على الموبايل لمنع تغطية المحتوى */
    .bdots button span { display: none !important; }
}
/* stats icons, category icons, contact buttons */
.sico { width: 38px; height: 38px; margin: 0 auto 4px; color: #fff; display: block; }
.cico { width: 34px; height: 34px; margin: 0; color: #fff; flex: none; }
.ch .cico { overflow: visible; }
[data-mv="piston"],[data-mv="rod"] { animation: pist 1.1s ease-in-out infinite; }
@keyframes pist {
    50% { translate: 0 2.2px; }
}
[data-mv="plate"],[data-mv="spokes"],[data-mv="disc"] { transform-origin: 12px 12px; transform-box: view-box; animation: spin 6s linear infinite; }
[data-mv="plus"] { animation: icoFlash 1.8s infinite; }
[data-mv="drop"],[data-mv="oild"] { transform-box: fill-box; transform-origin: center; animation: dropP 1.8s ease-in-out infinite; }
@keyframes dropP {
    50% { scale: 1.45; translate: 0 1px; }
}
[data-mv="pinc"] { transform-box: fill-box; transform-origin: center; animation: npp 1.8s ease-in-out infinite; }
[data-mv="seatl"],[data-mv="line"] { animation: pist 2.4s ease-in-out infinite; }
.ic-pin,.ic-fuel,.ic-oil,.ic-seat,.ic-fairing { animation: icoBounce 2.2s ease-in-out infinite; }
.ic-users,.ic-battery { animation: icoPulse 2.4s ease-in-out infinite; }
.ic-wheel,.ic-clutch,.ic-brake,.ic-piston { animation: none; }
.cb { display: flex; gap: 6px; flex: none; }
.cbtn { position: relative; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; text-decoration: none; transition: transform .25s,filter .25s,box-shadow .25s; }
.cbtn svg { width: 14px; height: 14px; fill: currentColor; }
.cbtn.wa { background: #25d366; box-shadow: 0 2px 6px rgba(37,211,102,.25); }
.cbtn.cl { background: var(--red); box-shadow: 0 2px 6px rgba(225,6,19,.25); }
.cbtn:hover { transform: translateY(-1.5px) scale(1.08); filter: brightness(1.1); }
.cbtn.wa::after { content: ""; position: absolute; inset: 0; border-radius: 8px; border: 1.5px solid #25d366; animation: waPing 2.2s ease-out infinite; }
@keyframes waPing {
    from { transform: scale(1); opacity: .8; }
    to { transform: scale(1.4); opacity: 0; }
}
.cbtn.cl svg { animation: ringShake 3s infinite; }
@keyframes ringShake {
    0%,70%,100% { rotate: 0deg; }
    75% { rotate: -14deg; }
    80% { rotate: 14deg; }
    85% { rotate: -8deg; }
    90% { rotate: 6deg; }
}
.nr { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.08); }
.nr:last-child { border-bottom: none; }
@media (prefers-reduced-motion:reduce) {
    .cbtn.wa::after,.cbtn.cl svg { animation: none; }
}
.l3-em .l3-ly { clip-path: inset(0 0 33% 0); }
/* social icons */
.soc { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 24px; margin-top: 24px; border-top: 1px solid rgba(255,255,255,.1); }
.soc h3 { font-family: var(--head); font-weight: 700; font-size: 15px; color: #cbd5e1; }
.soc-r { display: flex; gap: 12px; flex-wrap: wrap; }
.soc-b { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 8px; border-radius: 30px; background: #262c33; color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; direction: ltr; transition: transform .3s,box-shadow .3s; }
.soc-b svg { width: 34px; height: 34px; padding: 7px; border-radius: 50%; fill: currentColor; color: #fff; flex: none; transition: transform .5s; }
.soc-b.fb svg { background: #1877f2; }
.soc-b.ig svg { background: linear-gradient(45deg,#feda75,#fa7e1e 25%,#d62976 55%,#962fbf 78%,#4f5bd5); }
.soc-b.tt svg { background: #010101; box-shadow: 2px 2px 0 #25f4ee,-2px -2px 0 #fe2c55; }
.soc-b.yt svg { background: #f00; }
.soc-b:hover,.soc-b:focus-visible { transform: translateY(-5px); box-shadow: 0 14px 26px rgba(0,0,0,.45); }
.soc-b:hover svg { transform: rotate(360deg) scale(1.12); }
.soc-b::after { content: ""; position: absolute; inset: 0; border-radius: 30px; border: 2px solid rgba(255,255,255,.35); opacity: 0; transform: scale(1); }
.soc-b:hover::after { animation: socPing 1.2s ease-out infinite; }
@keyframes socPing {
    from { opacity: .8; transform: scale(1); }
    to { opacity: 0; transform: scale(1.25,1.5); }
}
.soc-b.nope { animation: socNope .45s; }
@keyframes socNope {
    25% { translate: -5px 0; }
    75% { translate: 5px 0; }
}
.fsoc { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0 auto; flex-wrap: nowrap; }
.fsoc a, .fsoc .sb { width: 48px; height: 48px; min-width: 48px; position: relative; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.2); color: #e2e8f0; box-shadow: 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.25); text-decoration: none; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s; box-sizing: border-box; cursor: pointer; }
.fsoc a svg, .fsoc .sb svg { width: 22px; height: 22px; fill: currentColor; display: block; transition: transform .25s ease, fill .25s ease; }
.fsoc a:hover, .fsoc .sb:hover { background: rgba(255,255,255,0.12); }
.fsoc a:active, .fsoc .sb:active { transform: scale(0.92); }
.fsoc a.instagram:hover, .fsoc .sb.instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%)!important; border-color: rgba(255,255,255,0.45)!important; color: #fff!important; box-shadow: 0 6px 18px rgba(214,36,159,0.55), 0 0 12px rgba(253,89,73,0.4)!important; }
.fsoc a.youtube:hover, .fsoc .sb.youtube:hover { background: linear-gradient(135deg, #ff0000 0%, #b30000 100%)!important; border-color: rgba(255,120,120,0.5)!important; color: #fff!important; box-shadow: 0 6px 18px rgba(255,0,0,0.55), 0 0 12px rgba(255,0,0,0.4)!important; }
.fsoc a.facebook:hover, .fsoc .sb.facebook:hover { background: linear-gradient(135deg, #1877f2 0%, #0d5ec4 100%)!important; border-color: rgba(120,180,255,0.5)!important; color: #fff!important; box-shadow: 0 6px 18px rgba(24,119,242,0.55), 0 0 12px rgba(24,119,242,0.4)!important; }
.fsoc a.tiktok:hover, .fsoc .sb.tiktok:hover { background: #010101!important; border-color: rgba(255,255,255,0.4)!important; color: #fff!important; box-shadow: -3px -3px 12px rgba(0,242,254,0.65), 3px 3px 12px rgba(254,44,85,0.65)!important; }
.fsoc a.whatsapp:hover, .fsoc .sb.whatsapp:hover { background: linear-gradient(135deg, #25d366 0%, #128c7e 100%)!important; border-color: rgba(120,255,170,0.5)!important; color: #fff!important; box-shadow: 0 6px 18px rgba(37,211,102,0.55), 0 0 12px rgba(37,211,102,0.4)!important; }
.fsoc a:active, .fsoc .sb:active { transform: scale(0.94); }
[data-theme="light"] .fsoc a, [data-theme="light"] .fsoc .sb { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.12); color: var(--red); box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
@media (prefers-reduced-motion:reduce) {
    .soc-b:hover svg,.soc-b:hover::after { animation: none; transform: none; }
}
/* videos section — تنسيق سينمائي فاخر متناغم مع خلفية الصفحة (Dot-Matrix) */
.vid { background: transparent; position: relative; overflow: hidden; padding: 48px 16px 64px !important; }
.vid-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.vid-ar { display: flex; gap: 12px; }
.vid-ar button { width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid var(--line); background: color-mix(in srgb, var(--card) 75%, transparent); backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink); font-size: 20px; font-weight: 700; display: inline-grid; place-items: center; transition: all .25s cubic-bezier(.2,.8,.2,1); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.vid-ar button:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(225,6,19,.3); }
/* شريط التبويبات والبحث */
.vtools { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.vtabs { display: flex; gap: 10px; flex-wrap: wrap; }
.vtab { background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1.5px solid var(--line); border-radius: 24px; padding: 6px 18px; font-family: var(--head); font-weight: 700; font-size: 14px; min-height: 38px; color: var(--ink); transition: all .25s ease; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.vtab b { color: var(--red); margin-left: 6px; }
.vtab:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.vtab.on { background: var(--maroon); border-color: var(--maroon); color: #fff; box-shadow: 0 6px 18px rgba(137,24,17,.3); }
.vtab.on b { color: #fff; }
.vtr { display: flex; gap: 10px; align-items: center; }
.vsearch { display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--card) 85%, transparent); backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1.5px solid var(--line); border-radius: 24px; padding: 0 16px; min-height: 40px; color: var(--mute); transition: border-color .25s, box-shadow .25s; }
.vsearch:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(225,6,19,.15); }
.vsearch svg { width: 17px; height: 17px; flex: none; }
.vsearch input { border: 0; background: transparent; outline: 0; font: inherit; font-size: 14px; color: var(--ink); width: min(200px, 36vw); }
.vview { border: 1.5px solid var(--line); background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 20px; padding: 0 16px; min-height: 40px; font-weight: 700; font-size: 13.5px; color: var(--ink); transition: all .25s ease; }
.vview:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.vsl-wrap { position: relative; width: 100%; }
.vsl { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 12px 4px 28px; cursor: grab; -webkit-overflow-scrolling: touch; outline: none; }
.vsl::-webkit-scrollbar { display: none; }
.vsl.drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.vc { flex: 0 0 min(440px, 84vw); scroll-snap-align: start; position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; border-radius: 18px; background: #000; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.12); border-top: 4px solid var(--ac, var(--red)); box-shadow: 0 14px 34px rgba(0,0,0,.28); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .3s; }
.vc:hover { transform: translateY(-7px) scale(1.01); box-shadow: 0 24px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(225,6,19,.4); }
.vc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); pointer-events: none; -webkit-user-drag: none; }
.vc:hover img { transform: scale(1.08); }
.vc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 50%, rgba(10,12,16,0.92) 100%); pointer-events: none; }
.vc .play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.vc .cap { position: absolute; right: 0; left: 0; bottom: 0; padding: 16px 20px; z-index: 3; }
.vc .cap b { display: block; font-family: var(--head); font-size: 20px; font-weight: 700; line-height: 1.35; color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,.6); }
.vc .cap small { display: block; color: #cbd5e1; font-size: 13.5px; margin-top: 4px; }
.vprog { height: 4px; background: color-mix(in srgb, var(--line) 40%, transparent); border-radius: 4px; position: relative; margin-top: 6px; overflow: hidden; }
.vprog i { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, var(--maroon), var(--red)); border-radius: 4px; transition: right .15s linear; }
.vc.vcn { animation: vcIn .7s cubic-bezier(.2,.8,.2,1) var(--dl,0s) backwards; }
@keyframes vcIn {
    from { opacity: 0; transform: translateY(28px) scale(.96); }
}
.vc .vprev { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; }
.vc .vtag { position: absolute; top: 14px; left: 14px; z-index: 3; background: rgba(0,0,0,.7); padding: 2px 14px; font-size: 13px; font-weight: 700; direction: ltr; }
.vc .play { z-index: 2; }
.vsl.grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,300px),1fr)); overflow: visible; scroll-snap-type: none; cursor: default; }
.vsl.grid .vc { flex: none; width: auto; }
.vempty { padding: 50px 10px; color: var(--mute); font-size: 18px; }
.vmore { text-align: center; margin-top: 20px; }
.vmore[hidden] { display: none; }
/* مشغل الفيديو: نافذة منبثقة متجاوبة فاخرة */
.vmodal { position: fixed; inset: 0; z-index: 120; background: rgba(6, 8, 12, 0.88); backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: grid; place-items: center; padding: clamp(12px, 3vw, 24px); overflow-y: auto; transition: opacity .3s ease; }
.vmodal[hidden] { display: none; }
.vm-in { width: min(960px, 100%); margin: auto; background: #0f1217; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05); overflow: hidden; display: flex; flex-direction: column; transform-origin: center center; animation: vmPop 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes vmPop {
    from { opacity: 0; transform: scale(0.94) translateY(14px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.vm-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 20px; background: linear-gradient(180deg, #181d25 0%, #12161d 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #ffffff; margin: 0; position: relative; z-index: 2; }
.vm-top b { font-family: var(--head); font-size: clamp(14px, 2vw, 17px); font-weight: 700; color: #ffffff; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 10px; }
.vm-top b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); flex: none; }
.vm-top button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.08); color: #e2e8f0; font-size: 16px; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; transition: all .25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vm-top button:hover { background: var(--red); border-color: var(--red); color: #ffffff; transform: rotate(90deg) scale(1.08); box-shadow: 0 4px 14px rgba(225, 6, 19, 0.4); }
#vm-v { position: relative; width: 100%; background: #000; aspect-ratio: 16 / 9; max-height: calc(85vh - 70px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
#vm-v video { width: 100%; height: 100%; max-height: 100%; object-fit: contain; background: #000; display: block; border: none; outline: none; }
/* round 7: dark / light toggle */
/* theme toggle & header controls */
.nav-r { display: flex; gap: 10px; align-items: center; }
.theme,.home { width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--line); background: color-mix(in srgb,var(--card) 60%,transparent); color: var(--ink); display: grid; place-items: center; text-decoration: none; position: relative; overflow: hidden; padding: 0; transition: background .25s,color .25s,border-color .25s,transform .25s,box-shadow .25s; }
.theme:hover,.home:hover { background: var(--card); color: var(--red); border-color: var(--red); box-shadow: 0 4px 12px rgba(225,6,19,.15); transform: translateY(-2px); }
.theme svg,.home svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme svg { position: absolute; transition: transform .6s cubic-bezier(.2,.8,.2,1),opacity .35s; }
.theme .sun { transform: none; opacity: 1; }
.theme .moon { transform: rotate(-120deg) scale(.2); opacity: 0; }
[data-theme="dark"] .theme .sun { transform: rotate(120deg) scale(.2); opacity: 0; }
[data-theme="dark"] .theme .moon { transform: none; opacity: 1; }
.tt,.tt *,.tt *::before,.tt *::after { transition: background-color .4s ease,color .4s ease,border-color .4s ease,fill .4s ease,box-shadow .4s ease!important; }
[data-theme="dark"] header { background: rgba(14,16,19,.88); border-bottom-color: rgba(255,255,255,.08); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
[data-theme="dark"] .brand { background: rgba(255,255,255,.94); border-color: transparent; }
[data-theme="dark"] #yg stop:nth-child(1) { stop-color: #2c353d; }
[data-theme="dark"] #yg stop:nth-child(2) { stop-color: #232a31; }
[data-theme="dark"] #yg stop:nth-child(3) { stop-color: #1a2026; }
[data-theme="dark"] .yland { stroke: #ff5a6e; }
[data-theme="dark"] .yland { filter: drop-shadow(0 12px 16px rgba(0,0,0,.5)); }
[data-theme="dark"] .app { background: transparent; color: #eef0f2; }
[data-theme="dark"] .app .mg { --tc: #eef0f2; }
[data-theme="dark"] .app .kick { color: #ff6679; }
[data-theme="dark"] .app .kick::before { background: #ff6679; }
[data-theme="dark"] .app .h2en,[data-theme="dark"] .app .en { color: #a7aeb6; }
[data-theme="dark"] .ag p.lead { color: #b9c0c7; }
[data-theme="dark"] .app .s3,[data-theme="dark"] .app .ft { background: #1a2026; border-color: #2c353d; }
[data-theme="dark"] .app .s3 h3,[data-theme="dark"] .app .ft h4 { color: #eef0f2; }
[data-theme="dark"] .app .s3 p,[data-theme="dark"] .app .ft p { color: #a7aeb6; }
[data-theme="dark"] .ag::before { background: radial-gradient(#3a444d 2px,transparent 2.6px) 0 0/22px 22px; }
[data-theme="dark"] .fc { background: #1f262c; color: #eef0f2; border-color: #2c353d; }
[data-theme="dark"] .bs-nav .btn.ghost { color: var(--ink); }
@media (prefers-reduced-motion:reduce) {
    .theme svg { transition: none; }
}
header nav { flex-direction: row-reverse; }
@media(max-width:560px) {
    .nav-r .btn { display: none; }
    .brand img { height: 30px; }
}
/* brand ladder in natural RTL flow */
#bseq { direction: rtl; }
#bseq .sfill { transform-origin: right; }
/* network on governorates */
#netsvg .nd text { font-size: 19px; font-weight: 700; }
#netsvg .nd text.e { font-size: 12.5px; font-weight: 500; }
.nd.mn .core { fill: var(--red); }
.nd.mn text { font-size: 21px; }
.lk.sib { stroke: #d1202e; opacity: .5; }
.hubs { max-height: none; }
.hb { padding: 5px 12px; font-size: 14px; min-height: 36px; }
.gmap { position: relative; margin-top: 16px; overflow: hidden; border: 1px solid var(--line); width: 100%; }
.gmap img { display: block; width: 100%; height: auto; }
#gov-ov { position: absolute; inset: 0; width: 100%; height: 100%; }
.gh { cursor: pointer; outline: none; }
.gh .ghc { fill: transparent; stroke: transparent; transition: fill .25s,stroke .25s; }
.gh:hover .ghc,.gh:focus-visible .ghc { fill: rgba(209,32,46,.2); stroke: #d1202e; stroke-width: 1.2; }
.gh.on .ghc { fill: rgba(209,32,46,.28); stroke: #d1202e; stroke-width: 2; }
.gr { fill: none; stroke: #16a34a; stroke-width: 2.2; stroke-dasharray: 6 5; stroke-linecap: round; animation: grDash 1s linear infinite; }
@keyframes grDash {
    to { stroke-dashoffset: -22; }
}
/* most requested products */
.tp { background: var(--bg2); }
.tp-g { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 44px; }
.tpc { background: var(--card); border: 1px solid var(--line); border-top: 5px solid var(--ac); overflow: hidden; transition: transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s; }
.tpc:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(0,0,0,.28); }
.tpi { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #111; }
.tpi>img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.3s cubic-bezier(.2,.8,.2,1); }
.tpc:hover .tpi>img:first-child { transform: scale(1.1); }
.rib { position: absolute; left: -8%; right: -8%; top: 18px; transform: rotate(-3.5deg); background: linear-gradient(90deg,var(--red),var(--maroon),var(--red)); color: #fff; overflow: hidden; box-shadow: 0 8px 18px rgba(0,0,0,.45); z-index: 3; }
.rtr { display: flex; width: max-content; animation: ribMove 16s linear infinite; direction: ltr; padding: 3px 0; }
.rtr span,.rtr i { font-weight: 800; font-size: 14px; padding: 0 14px; white-space: nowrap; font-style: normal; direction: rtl; }
@keyframes ribMove {
    to { transform: translateX(-50%); }
}
.tpn { position: absolute; bottom: 6px; right: 14px; font-family: var(--head); font-weight: 800; font-size: 48px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.9); text-shadow: 0 4px 18px rgba(0,0,0,.5); z-index: 2; }
.tpl { position: absolute; bottom: 12px; left: 12px; height: 36px; width: auto; max-width: 44%; object-fit: contain; z-index: 2; background: linear-gradient(160deg,#2a3038,#171b20); padding: 6px 10px; border-top: 3px solid var(--ac); }
.tpb { padding: 20px 22px 22px; }
.tpb h3 { font-family: var(--head); font-weight: 800; font-size: 20px; line-height: 1.5; }
.tpb p { color: var(--mute); font-size: 15.5px; line-height: 1.9; margin: 6px 0 12px; }
.tpt { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tpt span { background: var(--bg2); border-right: 3px solid var(--ac); padding: 1px 12px; font-size: 13px; font-weight: 700; direction: ltr; }
.tpa { width: 100%; justify-content: center; background: #25d366; border-color: #25d366; }
.tpa:hover { background: #1da851; border-color: #1da851; }
@media(max-width:980px) {
    .tp-g { grid-template-columns: 1fr 1fr; }
}
@media(max-width:620px) {
    .tp-g { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion:reduce) {
    .rtr { animation: none; }
}
/* manufacturing philosophy */
.mph { position: relative; margin-top: 20px; padding: 34px 28px 28px; background: var(--card); color: var(--ink); overflow: hidden; border-radius: 20px; border: 1px solid var(--line); border-top: 5px solid var(--red); box-shadow: 0 10px 30px rgba(0,0,0,0.06); transition: background .4s cubic-bezier(.2,.9,.3,1), border-color .4s, box-shadow .4s, color .4s; }
.mph-b { position: absolute; top: -20%; height: 140%; transform: skewX(-25deg); pointer-events: none; }
.mph-b.b1 { left: -10%; width: 24%; background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--red) 7%,transparent) 50%,transparent); animation: mphS 9s ease-in-out infinite alternate; }
.mph-b.b2 { left: 25%; width: 12%; background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--red) 5%,transparent) 50%,transparent); animation: mphS 14s ease-in-out infinite alternate-reverse; }
@keyframes mphS {
    0% { transform: skewX(-25deg) translateX(0); }
    100% { transform: skewX(-25deg) translateX(80px); }
}
.mph-h,.mph-g { position: relative; z-index: 2; }
.mph-k { display: inline-block; background: color-mix(in srgb,var(--red) 12%,transparent); color: var(--red); font-family: var(--head); font-weight: 800; font-size: 14px; padding: 3px 16px; border-radius: 20px; margin-bottom: 16px; border: 1px solid color-mix(in srgb,var(--red) 25%,transparent); transition: background .3s,transform .3s; }
.mph-k:hover { transform: scale(1.04); background: color-mix(in srgb,var(--red) 18%,transparent); }
.mph-t { font-family: var(--head); font-weight: 800; font-size: clamp(18px,3.6vw,30px); line-height: 1.4; max-width: 18em; color: var(--ink); }
.mph-t em { font-style: normal; color: var(--red); position: relative; white-space: nowrap; display: inline-block; }
.mph-t em::after { content: ""; position: absolute; right: 0; bottom: -4px; height: 3.5px; width: 100%; border-radius: 3px; background: linear-gradient(90deg,var(--red),color-mix(in srgb,var(--red) 60%,transparent)); transform-origin: right; animation: mphLinePulse 4s ease-in-out infinite; }
@keyframes mphLinePulse {
    0%,100% { transform: scaleX(1); opacity: .85; }
    50% { transform: scaleX(0.7); opacity: .4; }
}
.mph-l { font-size: clamp(17px,1.9vw,21px); line-height: 2; margin-top: 10px; color: var(--ink); opacity: .9; }
.mph-e { direction: ltr; text-align: left; font-size: 14px; color: var(--mute); margin-top: 8px; line-height: 1.7; }
.mph-g { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 34px; }
.mp { background: var(--bg); border: 1px solid var(--line); border-top: 4px solid var(--red); padding: 22px 18px; border-radius: 14px; color: var(--ink); transition: transform .4s cubic-bezier(.2,.8,.2,1), background .4s, box-shadow .4s cubic-bezier(.2,.8,.2,1), border-color .4s; position: relative; overflow: hidden; }
.mp::before { content: ""; position: absolute; top: 0; right: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--red) 6%, transparent) 50%, transparent); transition: right .6s ease; pointer-events: none; }
.mp:hover::before { right: 100%; }
.mp:hover { transform: translateY(-8px); background: var(--card); box-shadow: 0 18px 36px rgba(0,0,0,0.08), 0 0 16px -4px color-mix(in srgb, var(--red) 20%, transparent); border-color: var(--red); }
.mp-n { display: block; font-family: var(--head); font-weight: 800; font-size: 15px; color: var(--red); direction: ltr; text-align: right; }
.mp-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
.mp .mpi { width: 42px; height: 42px; min-width: 42px; margin: 0; color: var(--red); flex: none; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.mp:hover .mpi { transform: scale(1.15) rotate(4deg); }
.mp h4 { font-family: var(--head); font-weight: 800; font-size: 18px; line-height: 1.35; margin: 0; color: var(--ink); }
.mp p { font-size: 14.5px; line-height: 1.8; color: var(--mute); margin: 0; }
.mp small { display: block; direction: ltr; text-align: left; color: var(--mute); opacity: .8; font-size: 12.5px; margin-top: 8px; }
[data-mv="mer"] { transform-origin: 12px 12px; transform-box: view-box; animation: merSpin 4.5s ease-in-out infinite; }
@keyframes merSpin {
    0%,100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(15deg) scale(1.08); }
}
@media(max-width:980px) {
    .mph-g { grid-template-columns: 1fr 1fr; }
    .mph { padding: 34px 22px; }
}
@media(max-width:560px) {
    .mph-g { grid-template-columns: 1fr; }
}
/* contact heading + closing line */
.contact .closing { font-family: var(--head); font-weight: 800; font-size: clamp(20px,3.2vw,28px); line-height: 1.4; margin-top: 28px; max-width: none; color: #f8fafc; display: flex; align-items: center; gap: 12px; }
.contact .closing::before { content: ""; width: 24px; height: 3px; background: var(--red); border-radius: 2px; }
.big.mg { --tc: #fff; }
.big.mg .hwi { transform: translateY(118%) rotateX(-90deg) rotateY(40deg) scale(.85); background-image: linear-gradient(100deg,transparent 44%,#ffd0d5 50%,transparent 56%),linear-gradient(var(--tc),var(--tc)),linear-gradient(var(--red),var(--red)); background-size: 250% 100%,0% 100%,100% 100%; background-position: 100% 0,100% 0,0 0; background-repeat: no-repeat; }
.big.mg.in .hwi,.in .big.mg .hwi { transform: none; opacity: 1; animation: bFill 1.5s calc(.4s + var(--k)*.17s) ease-out both,bShine 6.5s calc(3.2s + var(--k)*.23s) linear infinite; }
@keyframes bFill {
    to { background-size: 250% 100%,100% 100%,100% 100%; }
}
@keyframes bShine {
    0% { background-position: 100% 0,100% 0,0 0; }
    26%,100% { background-position: 0% 0,100% 0,0 0; }
}
.contact .big.mg { animation: bigSway 9s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes bigSway {
    0%,100% { transform: perspective(1100px) rotateY(-6deg) rotateX(1.5deg); }
    50% { transform: perspective(1100px) rotateY(6deg) rotateX(-1.5deg); }
}
@media (prefers-reduced-motion:reduce) {
    .contact .big.mg { animation: none; }
    .big.mg .hwi { background-image: none; -webkit-text-fill-color: #fff; color: #fff; animation: none!important; transform: none; opacity: 1; }
}
.gmap #gov-ov { width: 100%; height: 100%; max-height: none; margin: 0; top: 0; left: 0; }
.rib { direction: ltr; }
/* ═══════════ نظام مزج خلفيات الأقسام مع الخلفية الأساسية (توحيد وتناغم بصري فاخر) الأقسام المشمولة: .isvg | #brands | #making | خريطة المحافظات (.ymap) | #roadmap | #contact ═══════════ */
.intro2, .isvg { background: transparent !important; }
.intro2 { position: relative; background: radial-gradient(ellipse 90% 60% at 50% 25%, color-mix(in srgb, var(--card) 45%, transparent) 0%, transparent 85%) !important; }
#brands { position: relative; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg2) 65%, transparent) 18%, color-mix(in srgb, var(--bg2) 65%, transparent) 82%, transparent 100%) !important; }
:root[data-theme="dark"] #brands { background: linear-gradient(180deg, transparent 0%, rgba(22, 25, 30, 0.55) 15%, rgba(22, 25, 30, 0.55) 85%, transparent 100%) !important; }
:root[data-theme="light"] #brands { background: linear-gradient(180deg, transparent 0%, rgba(226, 232, 240, 0.45) 15%, rgba(226, 232, 240, 0.45) 85%, transparent 100%) !important; }
#making { position: relative; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg2) 60%, transparent) 15%, color-mix(in srgb, var(--bg2) 60%, transparent) 85%, transparent 100%) !important; }
:root[data-theme="dark"] #making { background: linear-gradient(180deg, transparent 0%, rgba(22, 25, 30, 0.55) 15%, rgba(22, 25, 30, 0.55) 85%, transparent 100%) !important; }
:root[data-theme="light"] #making { background: linear-gradient(180deg, transparent 0%, rgba(226, 232, 240, 0.45) 15%, rgba(226, 232, 240, 0.45) 85%, transparent 100%) !important; }
#making .mph { border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); transition: background .4s cubic-bezier(.2,.9,.3,1), border-color .4s, box-shadow .4s; }
:root[data-theme="dark"] #making .mph { background: linear-gradient(145deg, rgba(26,28,33,0.85), rgba(18,21,25,0.92)) !important; backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); border-top: 5px solid var(--red); box-shadow: 0 16px 40px rgba(0,0,0,0.35); }
:root[data-theme="light"] #making .mph { background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(246,243,237,0.92)) !important; backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(203,213,225,0.7); border-top: 5px solid var(--red); box-shadow: 0 14px 36px rgba(0,0,0,0.06); }
:root[data-theme="light"] #making .mp { background: rgba(245, 247, 250, 0.85); border: 1px solid rgba(203, 213, 225, 0.7); border-top: 4px solid var(--red); }
:root[data-theme="light"] #making .mp:hover { background: #ffffff; box-shadow: 0 14px 30px rgba(0,0,0,0.08); }
:root[data-theme="dark"] #making .mp { background: rgba(22, 25, 30, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-top: 4px solid var(--red); }
:root[data-theme="dark"] #making .mp:hover { background: rgba(30, 35, 42, 0.95); box-shadow: 0 16px 36px rgba(0,0,0,0.35); }
/* خريطة الانتشار في المحافظات */
/* تقليل الحشو: العنوان يحمل حشوه الخاص، والخريطة تملأ كامل المساحة */
.ymap { border-radius: 18px; backdrop-filter: blur(12px); box-shadow: 0 12px 36px rgba(0,0,0,0.06); transition: all .35s ease; padding: 22px 0 0; border-top: 5px solid var(--red) !important; overflow: hidden; }
:root[data-theme="dark"] .ymap { background: linear-gradient(145deg, rgba(26,28,33,0.85), rgba(15,18,22,0.92)) !important; border: 1px solid rgba(255,255,255,0.09) !important; border-top: 5px solid var(--red) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.35); }
:root[data-theme="light"] .ymap { background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(246,243,237,0.88)) !important; border: 1px solid rgba(203,213,225,0.7) !important; border-top: 5px solid var(--red) !important; box-shadow: 0 12px 32px rgba(0,0,0,0.05); }
.yh { margin-bottom: 14px; padding: 0 24px; }
.yh h3 { font-family: var(--head); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; color: var(--ink); margin: 0; }
.yh .en.t { font-family: var(--head); font-weight: 600; font-size: 13px; color: var(--mute); margin-top: 4px; }
#categories { position: relative; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg2) 60%, transparent) 15%, color-mix(in srgb, var(--bg2) 60%, transparent) 85%, transparent 100%) !important; }
#roadmap { position: relative; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg2) 60%, transparent) 15%, color-mix(in srgb, var(--bg2) 60%, transparent) 85%, transparent 100%) !important; }
:root[data-theme="dark"] #roadmap { background: linear-gradient(180deg, transparent 0%, rgba(22, 25, 30, 0.55) 15%, rgba(22, 25, 30, 0.55) 85%, transparent 100%) !important; }
:root[data-theme="light"] #roadmap { background: linear-gradient(180deg, transparent 0%, rgba(226, 232, 240, 0.45) 15%, rgba(226, 232, 240, 0.45) 85%, transparent 100%) !important; }
/* قسم التواصل #contact */
.contact { position: relative; overflow: hidden; backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
:root[data-theme="dark"] .contact { background: linear-gradient(180deg, rgba(14,16,19,0.75) 0%, rgba(20,24,29,0.92) 50%, rgba(10,12,14,0.98) 100%) !important; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
:root[data-theme="light"] .contact { background: linear-gradient(180deg, rgba(30,35,41,0.88) 0%, rgba(24,28,34,0.95) 50%, rgba(18,21,26,0.98) 100%) !important; border-top: 1px solid rgba(225,6,19,0.25); border-bottom: 1px solid rgba(0,0,0,0.1); }
.contact::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(225,6,19,0.14) 0%, transparent 60%); pointer-events: none; }
/* ═══════════ التأثيرات البصرية الوهمية المتداخلة بين الأقسام (Visual Section Interlocking Illusions) ربط عضوي مستمر وهوية بصرية موحدة عبر هالات ضوئية وتدرجات هندسية متداخلة ═══════════ */
section { position: relative; }
/* هالات الضوء المحيطية الناعمة المتداخلة بين نهايات وبدايات الأقسام */
section::after { content: ""; position: absolute; bottom: -2px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--line) 40%, transparent) 25%, color-mix(in srgb, var(--red) 30%, transparent) 50%, color-mix(in srgb, var(--line) 40%, transparent) 75%, transparent 100%); pointer-events: none; z-index: 3; }
.cine::after, footer::after, .bot-sec::after { display: none !important; }
/* توهج وهمي جانبي يربط الأقسام بصرياً بالخلفية الأم */
#precision::before, #brands::before, #making::before, #network::before, #roadmap::before { content: ""; position: absolute; top: -40px; right: -5%; width: 420px; height: 220px; background: radial-gradient(ellipse at 80% 20%, rgba(225,6,19,0.06) 0%, transparent 70%); pointer-events: none; z-index: 1; filter: blur(20px); }
:root[data-theme="light"] #precision::before, :root[data-theme="light"] #brands::before, :root[data-theme="light"] #making::before, :root[data-theme="light"] #network::before, :root[data-theme="light"] #roadmap::before { background: radial-gradient(ellipse at 80% 20%, rgba(225,6,19,0.04) 0%, transparent 70%); }
#products::before { content: ""; position: absolute; top: 10%; left: -4%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(137,24,17,0.07) 0%, transparent 68%); pointer-events: none; z-index: 1; filter: blur(25px); }
/* تأثير التداخل المتدرج قبل وبعد الفواصل الهندسية */
.dv-wrap { position: relative; width: 100%; overflow: visible; }
/* ═══════════ نظام فواصل هندسية وحركية متباينة تحافظ على الهوية البصرية وتدمج الأقسام مع الخلفية ═══════════ */
/* النمط 1: شريط التيكر المتحرك المتداخل بين الأقسام (.section-ticker-divider) */
.section-ticker-divider { position: relative; margin: 6px 0; padding: 10px 0; overflow: hidden; direction: ltr; background: linear-gradient(180deg, rgba(20,24,30,0.45) 0%, rgba(10,12,16,0.7) 50%, rgba(20,24,30,0.45) 100%); border-top: 1px solid rgba(225,6,19,0.3); border-bottom: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
:root[data-theme="light"] .section-ticker-divider { background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(235,230,222,0.65) 50%, rgba(255,255,255,0.4) 100%); border-top: 1px solid rgba(225,6,19,0.35); border-bottom: 1px solid rgba(0,0,0,0.08); }
.section-ticker-divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 120px; background: linear-gradient(90deg, var(--bg, #070709) 0%, transparent 100%); z-index: 2; pointer-events: none; }
.section-ticker-divider::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 120px; background: linear-gradient(-90deg, var(--bg, #070709) 0%, transparent 100%); z-index: 2; pointer-events: none; }
.section-ticker-track { display: flex; align-items: center; gap: 54px; width: max-content; white-space: nowrap; }
.section-ticker-track.dir-left { animation: sTickerLeft 36s linear infinite; }
.section-ticker-track.dir-right { animation: sTickerRight 36s linear infinite; }
.section-ticker-divider:hover .section-ticker-track { animation-play-state: paused; }
@keyframes sTickerLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes sTickerRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
.s-ticker-item { display: inline-flex; align-items: center; gap: 12px; font-family: var(--head); font-weight: 800; font-size: 15px; letter-spacing: .06em; color: var(--ink); opacity: .85; transition: opacity .25s, transform .25s; }
.s-ticker-item:hover { opacity: 1; transform: scale(1.05); }
.s-ticker-item i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px rgba(225,6,19,0.8); flex: none; }
/* النمط 2: فاصل الشعار الماسي المركزي المتوهج (.sec-crest-divider) */
.sec-crest-divider { position: relative; display: flex; align-items: center; justify-content: center; margin: 36px auto; max-width: 900px; padding: 0 20px; }
.sec-crest-divider::before { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, transparent, rgba(225,6,19,0.4) 60%, var(--red) 100%); border-radius: 2px; }
.sec-crest-divider::after { content: ""; flex: 1; height: 2px; background: linear-gradient(-90deg, transparent, rgba(225,6,19,0.4) 60%, var(--red) 100%); border-radius: 2px; }
.sec-crest-badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 20px; margin: 0 16px; background: var(--card); border: 1px solid var(--line); border-radius: 30px; box-shadow: 0 4px 18px rgba(0,0,0,0.12), 0 0 0 1px rgba(225,6,19,0.15) inset; font-family: var(--head); font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: .04em; transform: perspective(600px) translateZ(0); transition: transform .3s ease, box-shadow .3s ease; }
.sec-crest-badge:hover { transform: perspective(600px) translateY(-3px) scale(1.04); box-shadow: 0 8px 24px rgba(225,6,19,0.25); }
.sec-crest-badge svg { width: 18px; height: 18px; fill: var(--red); }
/* النمط 3: هالة التداخل الهندسي الضبابي والتموج الذائب (.sec-wave-divider) */
.sec-wave-divider { position: relative; width: 100%; height: 160px; margin: -70px 0 -70px 0; overflow: visible; pointer-events: none; z-index: 1; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%),linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%),linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.sec-wave-divider::before { content: ""; position: absolute; inset: 10% 5%; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(225, 6, 19, 0.18) 0%, rgba(137, 24, 17, 0.08) 50%, transparent 80%); filter: blur(40px); pointer-events: none; z-index: 0; }
.sec-wave-divider svg { position: relative; width: 100%; height: 100%; display: block; z-index: 1; opacity: 0.85; }
.sec-wave-divider path.sw-aura { fill: none; stroke: url(#waveAuraGrad); stroke-width: 45; stroke-linecap: round; filter: blur(28px); opacity: 0.55; }
.sec-wave-divider path.sw-ribbon1 { fill: none; stroke: url(#waveStrokeGrad); stroke-width: 2.5; filter: drop-shadow(0 0 12px rgba(225, 6, 19, 0.7)); opacity: 0.85; }
.sec-wave-divider path.sw-ribbon2 { fill: none; stroke: url(#waveStrokeGrad2); stroke-width: 1.8; filter: drop-shadow(0 0 8px rgba(255, 77, 90, 0.5)); opacity: 0.75; }
/* النمط 5: هالة التداخل الصناعي الضبابي لقسم التصنيع (.sec-ind-divider) */
.sec-ind-divider { position: relative; width: 100%; height: 150px; margin: -65px 0 -65px 0; overflow: visible; pointer-events: none; z-index: 1; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%),linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%),linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.sec-ind-divider::before { content: ""; position: absolute; inset: 10% 5%; background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(225, 6, 19, 0.18) 0%, rgba(137, 24, 17, 0.08) 50%, transparent 80%); filter: blur(36px); pointer-events: none; z-index: 0; }
.sec-ind-divider svg { position: relative; width: 100%; height: 100%; display: block; z-index: 1; opacity: 0.85; }
.sec-ind-divider path.ind-aura { fill: none; stroke: url(#indAuraGrad); stroke-width: 40; filter: blur(24px); opacity: 0.5; }
.sec-ind-divider path.ind-ribbon { fill: none; stroke: url(#indStrokeGrad); stroke-width: 2.2; filter: drop-shadow(0 0 10px rgba(225, 6, 19, 0.7)); opacity: 0.85; }
.sec-ind-divider path.ind-mid { fill: color-mix(in srgb, var(--red) 24%, transparent); }
.sec-ind-divider path.ind-front { fill: color-mix(in srgb, var(--bg-card) 65%, color-mix(in srgb, var(--red) 15%, transparent)); }
.sec-ind-divider path.ind-glow { fill: none; stroke: url(#indStrokeGrad); stroke-width: 2.2; opacity: 0.9; filter: drop-shadow(0 0 7px rgba(225, 6, 19, 0.7)); }
[data-theme="light"] .sec-ind-divider path.ind-back { fill: rgba(137, 24, 17, 0.14); }
[data-theme="light"] .sec-ind-divider path.ind-mid { fill: rgba(225, 6, 19, 0.16); }
[data-theme="light"] .sec-ind-divider path.ind-front { fill: rgba(255, 255, 255, 0.6); }
[data-theme="light"] .sec-ind-divider path.ind-glow { opacity: 0.95; filter: drop-shadow(0 0 5px rgba(225, 6, 19, 0.45)); }
/* النمط 4: فاصل التموج الضوئي ثلاثي الأبعاد شبه الشفاف (.sec-beam-divider) */
.sec-beam-divider { position: relative; width: 100%; height: 160px; margin: -70px 0 -70px 0; overflow: visible; pointer-events: none; z-index: 1; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%),linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%),linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.sec-beam-divider::before { content: ""; position: absolute; inset: 12% 8%; background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(225, 6, 19, 0.18) 0%, rgba(137, 24, 17, 0.06) 50%, transparent 80%); filter: blur(38px); pointer-events: none; z-index: 0; }
.sec-beam-divider svg { position: relative; width: 100%; height: 100%; display: block; z-index: 1; }
.sec-beam-divider path.bm-aura { fill: none; stroke: url(#beamAuraGrad); stroke-width: 44; filter: blur(28px); opacity: 0.55; }
/* طبقة تموج ثلاثية الأبعاد شبه شفافة بظلال عميقة وتدرج كريستالي */
.sec-beam-divider path.bm-3d-wave { fill: url(#beam3dGrad); opacity: 0.7; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.35)); }
.sec-beam-divider path.bm-flow1 { fill: none; stroke: url(#beamStrokeGrad); stroke-width: 2.4; filter: drop-shadow(0 0 10px rgba(225, 6, 19, 0.75)); opacity: 0.9; }
.sec-beam-divider path.bm-flow2 { fill: none; stroke: url(#beamStrokeGrad2); stroke-width: 1.8; filter: drop-shadow(0 0 8px rgba(255, 90, 110, 0.6)); opacity: 0.8; }
section, .cine, .tp-wrap { position: relative; z-index: 2; }
section .w, .cine .w { position: relative; z-index: 2; }
/* تنسيقات شريحة المستخدم وشريط الفوتر الثابت (بدون تكرار أو تعارض) */
.user-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 12px; border: 1.5px solid var(--line); background: color-mix(in srgb,var(--card) 60%,transparent); text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 700; height: 38px; min-width: 0; transition: border-color .22s,background-color .22s,color .22s,transform .22s,box-shadow .22s; cursor: pointer; }
.user-chip:hover { border-color: var(--red)!important; background: var(--card)!important; color: var(--red)!important; box-shadow: 0 4px 12px rgba(225,6,19,.15)!important; transform: translateY(-2px); }
.user-chip .u-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--red); flex-shrink: 0; display: block; }
.user-chip .u-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.user-chip-login { padding: 0 14px; font-size: 13px; font-weight: 700; }
.home,.theme { width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid var(--line); background: color-mix(in srgb,var(--card) 60%,transparent); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; text-decoration: none; transition: background .22s,color .22s,border-color .22s,transform .22s,box-shadow .22s; flex-shrink: 0; position: relative; }
.home:hover,.theme:hover { background: var(--card); color: var(--red); border-color: var(--red); box-shadow: 0 4px 12px rgba(225,6,19,.15); transform: translateY(-2px); }
.home svg,.theme svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
footer { position: fixed!important; bottom: 0!important; left: 0!important; right: 0!important; width: 100%!important; z-index: 850!important; background: color-mix(in srgb,#0a0d12 94%,transparent)!important; -webkit-backdrop-filter: blur(18px) saturate(180%)!important; backdrop-filter: blur(18px) saturate(180%)!important; border-top: 1px solid rgba(255,255,255,.12)!important; box-shadow: 0 -8px 28px rgba(0,0,0,.55),0 -1px 0 rgba(225,6,19,.25)!important; padding: 3px 8px calc(6px + env(safe-area-inset-bottom,0px))!important; min-height: 38px!important; display: grid!important; grid-template-columns: 1fr auto 1fr!important; align-items: center!important; gap: 16px!important; }
footer .fcopy { grid-column: 1!important; justify-self: start!important; text-align: right!important; font-size: clamp(11.5px,1.2vw,13px)!important; color: #94a3b8!important; white-space: nowrap!important; font-family: var(--head)!important; }
footer .fsoc { grid-column: 2!important; justify-self: center!important; margin: 0 auto!important; display: flex!important; align-items: center!important; justify-content: center!important; gap: 12px!important; flex-wrap: nowrap!important; }
footer .fextra { grid-column: 3!important; justify-self: end!important; display: flex!important; align-items: center!important; }
footer .fbadge { font-size: 11px!important; font-weight: 600!important; color: #cbd5e1!important; background: rgba(255,255,255,.06)!important; border: 1px solid rgba(255,255,255,.1)!important; border-radius: 999px!important; padding: 3px 10px!important; white-space: nowrap!important; font-family: var(--head)!important; }
body { padding-bottom: calc(46px + env(safe-area-inset-bottom,0px))!important; }
@media(max-width:900px) {
    body { padding-bottom: calc(92px + env(safe-area-inset-bottom,0px))!important; }
}
@media(max-width:768px) {
    body { padding-bottom: calc(104px + env(safe-area-inset-bottom,0px))!important; }
    footer { display: flex!important; flex-direction: column!important; align-items: center!important; justify-content: center!important; gap: 6px!important; padding: 3px 6px calc(6px + env(safe-area-inset-bottom,0px))!important; min-height: 56px!important; }
    footer .fsoc { margin: 0 auto!important; gap: 12px!important; order: 1!important; }
    footer .fcopy { text-align: center!important; order: 2!important; font-size: 11px!important; }
    footer .fextra { display: none!important; }
}
@media(max-width:480px) {
    body { padding-bottom: calc(112px + env(safe-area-inset-bottom,0px))!important; }
    .user-chip .u-name { display: none!important; }
    .user-chip { padding: 4px!important; }
    .home,.theme { width: 32px; height: 32px; border-radius: 8px; }
    .home svg,.theme svg { width: 16px; height: 16px; }
}