/* =====================================================================
   MOGAL — STYLESHEET (Bold / Geometric / Animated)
   لتغيير الألوان: عدّل المتغيرات في :root و [data-theme="light"].
   ===================================================================== */

:root {
  /* الهوية — من شعار مُقل الفعلي */
  --brand:       #01A79C;
  --brand-deep:  #018C84;
  --brand-soft:  #2CE0D2;
  --brand-glow:  rgba(1, 167, 156, 0.40);
  --accent:      #FF7A3D;   /* برتقالي مكمل للتباين والجرأة */
  --accent-glow: rgba(255, 122, 61, 0.35);

  /* داكن (افتراضي) */
  --bg:          #05181C;
  --bg-alt:      #07232A;
  --surface:     #0A2D35;
  --surface-2:   #0F3B45;
  --text:        #ECFCFA;
  --muted:       #84AEAD;
  --line:        rgba(255,255,255,0.08);
  --shadow:      0 24px 60px rgba(0,0,0,0.5);

  --radius:      22px;
  --radius-sm:   14px;
  --container:   1200px;
  --header-h:    82px;

  --font-display: "Almarai", sans-serif;
  --font-body:    "IBM Plex Sans Arabic", sans-serif;
}
[data-theme="light"] {
  --bg:          #F4FBFA;
  --bg-alt:      #E7F6F4;
  --surface:     #FFFFFF;
  --surface-2:   #ECF7F6;
  --text:        #06262B;
  --muted:       #4E7A78;
  --line:        rgba(6,38,43,0.10);
  --shadow:      0 22px 50px rgba(6,38,43,0.12);
}
html[lang="en"] { --font-display: "Outfit", sans-serif; --font-body: "Space Grotesk", sans-serif; }

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.8; overflow-x: hidden; transition: background .4s, color .4s; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.25; font-weight: 800; }
.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }

.ic, .vcard__icon svg, .scope__icon svg, .cinfo__icon svg, .scard__icon svg, .modal__icon svg, .pcard__icon svg {
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* شعارات الثيم */
.brand__logo--light, .hero__mark--light { display:none; }
[data-theme="light"] .brand__logo--dark { display:none; }
[data-theme="light"] .brand__logo--light { display:block; }

/* شريط التقدم */
.scroll-progress { position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0; z-index: 300;
  background: linear-gradient(90deg, var(--brand), var(--brand-soft)); transition: width .1s linear; }

/* ----------------------------- مكونات عامة ----------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--brand-soft);
}
[data-theme="light"] .eyebrow { color: var(--brand-deep); }
.eyebrow::before { content:""; width: 30px; height: 2px; background: linear-gradient(90deg,var(--brand),transparent); }
[dir="rtl"] .eyebrow::before { background: linear-gradient(270deg,var(--brand),transparent); }

.section { padding: 110px 0; position: relative; }
.section--alt { background: var(--bg-alt); }
.section__head { max-width: 760px; margin-bottom: 60px; }
.section__title { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 16px; letter-spacing: -.5px; }
.section__sub { color: var(--muted); font-size: 1.06rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 34px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, background .25s, color .25s;
  will-change: transform;
}
.btn--primary { position: relative; overflow: hidden; background: linear-gradient(120deg,var(--brand),var(--brand-soft)); color: #04231E; box-shadow: 0 14px 34px var(--brand-glow); }
.btn--primary::after { content:""; position:absolute; top:0; height:100%; width:45%; background: linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); inset-inline-start:-70%; transform: skewX(-20deg); transition: inset-inline-start .6s; }
.btn--primary:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 44px var(--brand-glow); }
.btn--primary:hover::after { inset-inline-start: 130%; }
.btn--ghost { border: 1.5px solid var(--line); color: var(--text); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand-soft); transform: translateY(-4px); }
[data-theme="light"] .btn--ghost:hover { color: var(--brand-deep); }
.btn--white { background:#fff; color: var(--brand-deep); box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.btn--white:hover { transform: translateY(-4px) scale(1.02); }

/* ظهور متدرّج */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ----------------------------- الهيدر ----------------------------- */
.header { position: fixed; inset-inline: 0; top: 0; z-index: 100; height: var(--header-h); transition: background .3s, box-shadow .3s, backdrop-filter .3s; }
.header.is-scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line); }
.header__inner { display:flex; align-items:center; justify-content:space-between; height:100%; gap:16px; }
.brand__logo { height: 52px; width:auto; transition: transform .3s; }
.brand:hover .brand__logo { transform: scale(1.04); }
.nav { display:flex; align-items:center; gap:2px; }
.nav__link { padding: 9px 15px; border-radius: 10px; font-weight: 500; font-size: .97rem; color: var(--muted); position: relative; transition: color .2s; }
.nav__link::after { content:""; position:absolute; inset-inline: 15px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transform-origin: center; transition: transform .25s; }
.nav__link:hover { color: var(--text); } .nav__link:hover::after { transform: scaleX(1); }
.nav__link--cta { background: linear-gradient(120deg,var(--brand),var(--brand-soft)); color:#04231E !important; font-weight:700; border-radius: 999px; }
.nav__link--cta::after { display:none; } .nav__link--cta:hover { filter: brightness(1.07); transform: translateY(-2px); }
.header__actions { display:flex; align-items:center; gap:8px; }
.icon-btn { width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid var(--line); transition: border-color .2s, color .2s, transform .2s; }
.icon-btn:hover { border-color: var(--brand); color: var(--brand-soft); transform: translateY(-2px); }
[data-theme="light"] .icon-btn:hover { color: var(--brand-deep); }
.icon-btn .ic { width:20px; height:20px; }
.lang-btn { width:auto; padding-inline:14px; font-family: var(--font-display); font-weight:700; }
.ic-moon { display:none; } [data-theme="light"] .ic-sun { display:none; } [data-theme="light"] .ic-moon { display:block; }
.burger { display:none; flex-direction:column; gap:5px; }
.burger span { width:20px; height:2px; background: currentColor; border-radius:2px; transition: transform .25s, opacity .25s; }
.burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg);} .burger.is-open span:nth-child(2){opacity:0;} .burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg);}

/* ----------------------------- الهيرو ----------------------------- */
.hero { position: relative; min-height: 100svh; display:flex; align-items:center; padding: calc(var(--header-h) + 40px) 0 90px; overflow:hidden; }
.hero__bg { position:absolute; inset:0; pointer-events:none; }
.blob { position:absolute; border-radius:50%; filter: blur(90px); }
.blob--1 { width: 520px; height:520px; background: var(--brand); opacity:.28; top:-120px; inset-inline-end:-100px; animation: blob 16s ease-in-out infinite alternate; }
.blob--2 { width: 440px; height:440px; background: var(--accent); opacity:.16; bottom:-140px; inset-inline-start:-120px; animation: blob 20s ease-in-out infinite alternate-reverse; }
@keyframes blob { to { transform: translate(50px,40px) scale(1.15);} }
.grid-lines { position:absolute; inset:0; background-image: linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%); }
.float-shapes .shape { position:absolute; opacity:.6; }
.shape--sq { width:26px; height:26px; border-radius:7px; background: var(--brand); top:22%; inset-inline-start:14%; animation: floaty 7s ease-in-out infinite; }
.shape--sq2{ width:16px; height:16px; border-radius:5px; background: var(--accent); top:70%; inset-inline-start:22%; animation: floaty 9s ease-in-out infinite 1s; }
.shape--ring{ width:46px; height:46px; border-radius:50%; border:3px solid var(--brand-soft); top:30%; inset-inline-end:20%; animation: floaty 8s ease-in-out infinite .5s; }
.shape--tri{ width:0; height:0; border-inline-start:14px solid transparent; border-inline-end:14px solid transparent; border-bottom:24px solid var(--accent); top:66%; inset-inline-end:14%; opacity:.5; animation: spin 18s linear infinite; }
.shape--dot{ width:10px; height:10px; border-radius:50%; background: var(--brand-soft); top:48%; inset-inline-start:8%; animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 50%{ transform: translateY(-22px) rotate(10deg);} }
@keyframes spin { to { transform: rotate(360deg);} }

.hero__content { position: relative; display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items:center; width: min(100% - 40px, var(--container)); margin-inline:auto; }
.hero__title { font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: -1px; margin-bottom: 22px; }
.hero__title em { font-style: normal; position: relative; display:inline-block;
  background: linear-gradient(120deg, var(--brand), var(--brand-soft), var(--accent)); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientShift 6s linear infinite; }
@keyframes gradientShift { to { background-position: -220% 0; } }
.hero__lead { color: var(--muted); font-size: clamp(1rem,1.6vw,1.18rem); max-width: 560px; margin-bottom: 32px; }
.hero__cta { display:flex; flex-wrap:wrap; gap:14px; }

/* مدار الشعار */
.hero__visual { display:grid; place-items:center; }
.orbit-stage { position: relative; width: min(420px, 78vw); aspect-ratio: 1; display:grid; place-items:center; }
.orbit-ring { position:absolute; border-radius:50%; border:1.5px dashed color-mix(in srgb,var(--brand) 40%,transparent); }
.orbit-ring--1 { inset: 0; animation: spin 38s linear infinite; }
.orbit-ring--2 { inset: 13%; border-style: solid; border-color: color-mix(in srgb,var(--brand) 16%,transparent); animation: spin 30s linear infinite reverse; }
.orbit-ring--3 { inset: 26%; border-style: dashed; border-color: color-mix(in srgb,var(--accent) 35%,transparent); animation: spin 22s linear infinite; }
.orbit-dot { position:absolute; width:16px; height:16px; border-radius:50%; }
.orbit-dot--1 { background: var(--brand-soft); top:-8px; left:50%; box-shadow:0 0 20px var(--brand-glow); animation: spin 38s linear infinite; transform-origin: 0 calc(min(420px,78vw)/2 + 8px); }
.orbit-dot--2 { width:12px; height:12px; background: var(--accent); bottom:-6px; left:50%; box-shadow:0 0 18px var(--accent-glow); animation: spin 22s linear infinite reverse; transform-origin: 0 calc(-1 * (min(420px,78vw)/2 - 26% + 6px)); }
.orbit-mark { width: 54%; filter: drop-shadow(0 18px 40px var(--brand-glow)); animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50%{ transform: translateY(-14px);} }

.hero__scroll { position:absolute; bottom: 26px; left:50%; transform: translateX(-50%); width: 26px; height: 42px; border:2px solid var(--muted); border-radius: 14px; display:grid; justify-items:center; padding-top:7px; opacity:.6; }
.hero__scroll span { width:4px; height:8px; border-radius:2px; background: var(--brand-soft); animation: scrolly 1.6s ease-in-out infinite; }
@keyframes scrolly { 0%{opacity:0; transform:translateY(-4px);} 40%{opacity:1;} 100%{opacity:0; transform:translateY(10px);} }

/* ----------------------------- شريط متحرك ----------------------------- */
.strip { background: linear-gradient(120deg,var(--brand-deep),var(--brand)); overflow:hidden; padding: 16px 0; }
.strip__track { display:flex; gap: 48px; width:max-content; animation: marquee 24s linear infinite; }
[dir="rtl"] .strip__track { animation-name: marquee-rtl; }
.strip__item { display:inline-flex; align-items:center; gap:14px; color:#EAFFFD; font-family:var(--font-display); font-weight:700; font-size:1.05rem; white-space:nowrap; }
.strip__item::after { content:"✦"; color: var(--brand-soft); }
@keyframes marquee { to { transform: translateX(-50%);} }
@keyframes marquee-rtl { to { transform: translateX(50%);} }

/* ----------------------------- عن الشركة ----------------------------- */
.about__grid { display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:start; }
.about__text > p { color: var(--muted); margin-bottom: 18px; font-size: 1.04rem; }
.about__text > p:nth-of-type(1){ color: var(--text); font-size: 1.1rem; }
.values { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.values li { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px; background: var(--surface); border:1px solid var(--line); font-weight:600; font-size:.88rem; transition: transform .2s, border-color .2s; }
.values li:hover { transform: translateY(-3px); border-color: var(--brand); }
.values li::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--brand); }
.about__cards { display:grid; gap:18px; }
.vcard { position: relative; overflow:hidden; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 26px 28px 26px 92px; transition: transform .3s, box-shadow .3s, border-color .3s; }
[dir="rtl"] .vcard { padding: 26px 92px 26px 28px; }
.vcard__no { position:absolute; top: 18px; inset-inline-start: 26px; font-family: var(--font-display); font-weight:800; font-size: 2.4rem; line-height:1; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb,var(--brand) 40%,transparent); opacity:.7; }
.vcard__icon { position:absolute; top: 50%; inset-inline-start: 26px; transform: translateY(-50%); width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:#04231E; background: linear-gradient(135deg,var(--brand),var(--brand-soft)); box-shadow: 0 10px 24px var(--brand-glow); display:none; }
.vcard h3 { font-size: 1.16rem; margin-bottom:6px; }
.vcard p { color: var(--muted); font-size:.97rem; }
.vcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: color-mix(in srgb,var(--brand) 40%,var(--line)); }
.vcard:hover .vcard__no { color: color-mix(in srgb,var(--brand) 16%,transparent); -webkit-text-stroke: 0; }

/* ----------------------------- الإحصائيات ----------------------------- */
.stats { padding: 70px 0; background: linear-gradient(120deg,var(--brand-deep),var(--brand)); position:relative; overflow:hidden; }
.stats::before { content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.10) 1.5px,transparent 1.5px); background-size: 26px 26px; opacity:.5; }
.stats__grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; position:relative; }
.stats__grid li { text-align:center; color:#EAFFFD; }
.stats__num { display:block; font-family: var(--font-display); font-weight:800; font-size: clamp(2.4rem,5vw,3.6rem); line-height:1; }
.stats__grid p { color: rgba(234,255,253,.82); font-size:.95rem; margin-top:8px; }

/* ----------------------------- الخدمات ----------------------------- */
.services__grid { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.scard { position:relative; overflow:hidden; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; text-align:start; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.scard::before { content:""; position:absolute; top:0; inset-inline-start:0; width:100%; height:100%; background: radial-gradient(circle at var(--mx,80%) var(--my,0%), color-mix(in srgb,var(--brand) 16%,transparent), transparent 45%); opacity:0; transition: opacity .35s; pointer-events:none; }
.scard:hover::before { opacity:1; }
.scard:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: color-mix(in srgb,var(--brand) 40%,var(--line)); }
.scard__icon { width:62px; height:62px; border-radius:18px; display:grid; place-items:center; color:#04231E; background: linear-gradient(135deg,var(--brand),var(--brand-soft)); box-shadow:0 12px 28px var(--brand-glow); transition: transform .35s; }
.scard:hover .scard__icon { transform: rotate(-8deg) scale(1.08); }
.scard__icon svg { width:30px; height:30px; }
.scard h3 { font-size:1.2rem; }
.scard p { color: var(--muted); font-size:.96rem; flex:1; }
.scard__more { color: var(--brand-soft); font-weight:700; font-size:.93rem; display:inline-flex; align-items:center; gap:6px; }
[data-theme="light"] .scard__more { color: var(--brand-deep); }
.scard__more::after { content:"←"; transition: translate .2s; }
[dir="ltr"] .scard__more::after { content:"→"; }
.scard:hover .scard__more::after { translate:-4px 0; }
[dir="ltr"] .scard:hover .scard__more::after { translate:4px 0; }

/* ----------------------------- نطاق العمل ----------------------------- */
.scope__grid { display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
.scope__card { position:relative; overflow:hidden; border-radius: var(--radius); padding: 42px 38px; border:1px solid var(--line); background: var(--surface); transition: transform .3s, box-shadow .3s; }
.scope__card::after { content:""; position:absolute; width:200px; height:200px; border-radius:50%; filter: blur(50px); opacity:.25; inset-inline-end:-40px; top:-40px; }
.scope__card--global::after { background: var(--brand); }
.scope__card--local::after { background: var(--accent); }
.scope__card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.scope__icon { position:relative; z-index:1; width:64px; height:64px; border-radius:18px; margin-bottom:22px; display:grid; place-items:center; color:#04231E; background: linear-gradient(135deg,var(--brand),var(--brand-soft)); box-shadow:0 12px 28px var(--brand-glow); }
.scope__card--local .scope__icon { background: linear-gradient(135deg,var(--accent),#FFAE80); color:#3A1500; box-shadow:0 12px 28px var(--accent-glow); }
.scope__card h3 { position:relative; z-index:1; font-size:1.34rem; margin-bottom:10px; }
.scope__card > p { position:relative; z-index:1; color: var(--muted); margin-bottom:18px; }
.scope__card ul { position:relative; z-index:1; display:grid; gap:10px; }
.scope__card li { display:flex; align-items:center; gap:10px; color: var(--muted); font-size:.96rem; }
.scope__card li::before { content:"✓"; flex:none; width:22px; height:22px; border-radius:8px; display:grid; place-items:center; font-size:.72rem; font-weight:800; color:var(--brand-soft); background: color-mix(in srgb,var(--brand) 14%,transparent); }
.scope__card--local li::before { color: var(--accent); background: color-mix(in srgb,var(--accent) 14%,transparent); }
[data-theme="light"] .scope__card li::before { color: var(--brand-deep); }
[data-theme="light"] .scope__card--local li::before { color: var(--accent); }

/* ----------------------------- الأعمال ----------------------------- */
.filter { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; }
.filter__btn { padding:9px 20px; border-radius:999px; border:1.5px solid var(--line); color: var(--muted); font-weight:600; font-size:.92rem; transition: all .2s; }
.filter__btn:hover { border-color: var(--brand); color: var(--brand-soft); }
[data-theme="light"] .filter__btn:hover { color: var(--brand-deep); }
.filter__btn.is-active { background: linear-gradient(120deg,var(--brand),var(--brand-soft)); border-color:transparent; color:#04231E; }
.portfolio__grid { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.pcard { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; transition: transform .3s, box-shadow .3s; }
.pcard.is-hidden { display:none; }
.pcard:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.pcard__cover { position:relative; height:166px; display:grid; place-items:center; background: radial-gradient(circle at 25% 18%, color-mix(in srgb,var(--brand) 30%,transparent), transparent 55%), radial-gradient(circle at 82% 88%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 50%), var(--surface-2); }
.pcard__cover::after { content:""; position:absolute; inset:0; background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 26px 26px; opacity:.5; }
.pcard__icon { position:relative; z-index:1; width:66px; height:66px; border-radius:18px; display:grid; place-items:center; color:#04231E; background: linear-gradient(135deg,var(--brand),var(--brand-soft)); box-shadow:0 12px 28px var(--brand-glow); transition: transform .3s; }
.pcard:hover .pcard__icon { transform: scale(1.1) rotate(8deg); }
.pcard__icon svg { width:30px; height:30px; }
.pcard__tag { position:absolute; z-index:1; top:14px; inset-inline-start:14px; font-size:.72rem; font-weight:700; color:var(--brand-soft); background: color-mix(in srgb,var(--bg) 72%,transparent); border:1px solid color-mix(in srgb,var(--brand) 35%,transparent); padding:4px 12px; border-radius:8px; backdrop-filter: blur(6px); }
[data-theme="light"] .pcard__tag { color: var(--brand-deep); }
.pcard__body { padding: 22px 24px 26px; }
.pcard__body h3 { font-size:1.08rem; margin-bottom:8px; }
.pcard__body p { color: var(--muted); font-size:.95rem; }

/* ----------------------------- العملاء ----------------------------- */
.marquee { overflow:hidden; padding: 6px 0 46px; mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee__track { display:flex; gap:16px; width:max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
[dir="rtl"] .marquee__track { animation-name: marquee-rtl; }
.marquee__item { flex:none; display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:14px; background: var(--surface); border:1px solid var(--line); font-family: var(--font-display); font-weight:700; font-size:1rem; color: var(--muted); white-space:nowrap; transition: color .2s, border-color .2s, transform .2s; }
.marquee__item::before { content:""; width:9px; height:9px; border-radius:3px; background: var(--brand); opacity:.7; }
.marquee__item:hover { color: var(--brand-soft); border-color: color-mix(in srgb,var(--brand) 45%,var(--line)); transform: translateY(-3px); }
[data-theme="light"] .marquee__item:hover { color: var(--brand-deep); }
.quotes { position:relative; max-width:820px; margin:10px auto 0; min-height:230px; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 48px 44px 38px; box-shadow: var(--shadow); }
.quotes::before { content:"\201D"; position:absolute; top: 4px; inset-inline-start: 30px; font-family: var(--font-display); font-size: 5rem; line-height:1; color: color-mix(in srgb,var(--brand) 40%,transparent); }
.quote { position:absolute; inset:0; opacity:0; visibility:hidden; transition: opacity .5s; text-align:center; padding: 30px 18px 0; }
.quote.is-active { opacity:1; visibility:visible; position:relative; }
.quote p { font-size: clamp(.98rem,1.8vw,1.14rem); margin-bottom: 22px; }
.quote__who { display:flex; align-items:center; justify-content:center; gap:12px; }
.quote__avatar { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-family: var(--font-display); font-weight:800; color:#04231E; background: linear-gradient(135deg,var(--brand),var(--brand-soft)); }
.quote__meta { text-align:start; } .quote__meta strong { display:block; font-family:var(--font-display); font-size:.98rem; } .quote__meta span { color: var(--muted); font-size:.82rem; }
.quotes__dots { display:flex; justify-content:center; gap:8px; margin-top:26px; }
.quotes__dots button { width:9px; height:9px; border-radius:50%; background: var(--line); transition: all .25s; }
.quotes__dots button.is-active { width:28px; border-radius:999px; background: var(--brand); }

/* ----------------------------- CTA ----------------------------- */
.cta-band { padding: 30px 0 110px; }
.cta-band__panel { position:relative; overflow:hidden; text-align:center; padding: 80px 36px; border-radius: 32px; color:#04231E; background: linear-gradient(135deg, var(--brand-soft), var(--brand)); box-shadow: 0 26px 64px var(--brand-glow); }
.cta-band__shapes span { position:absolute; border-radius: 14px; background: rgba(255,255,255,.16); }
.cta-band__shapes span:nth-child(1){ width:90px; height:90px; top:-20px; inset-inline-start:8%; transform: rotate(20deg); animation: floaty 8s ease-in-out infinite;}
.cta-band__shapes span:nth-child(2){ width:54px; height:54px; bottom:-10px; inset-inline-end:14%; border-radius:50%; animation: floaty 6s ease-in-out infinite 1s;}
.cta-band__shapes span:nth-child(3){ width:34px; height:34px; top:30%; inset-inline-end:8%; transform: rotate(35deg); animation: floaty 7s ease-in-out infinite .5s;}
.cta-band__panel h2 { position:relative; font-size: clamp(1.7rem,3.6vw,2.6rem); margin-bottom:12px; }
.cta-band__panel p { position:relative; opacity:.9; max-width:580px; margin:0 auto 30px; }

/* ----------------------------- واتساب ----------------------------- */
.wa-float { position:fixed; bottom:24px; inset-inline-end:24px; z-index:95; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:#25D366; color:#fff; box-shadow:0 12px 30px rgba(37,211,102,.45); transition: transform .2s; }
.wa-float:hover { transform: scale(1.1); } .wa-float svg { width:30px; height:30px; fill: currentColor; }
.wa-float::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation: waPulse 2.2s ease-out infinite; }
@keyframes waPulse { to { transform: scale(1.55); opacity:0; } }

/* ----------------------------- التواصل ----------------------------- */
.contact__grid { display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:start; }
.cform { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:34px; display:grid; gap:18px; }
.cform__row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:grid; gap:8px; } .field span { font-weight:600; font-size:.92rem; }
.field input, .field textarea { font:inherit; color: var(--text); background: var(--surface-2); border:1.5px solid var(--line); border-radius: var(--radius-sm); padding:12px 16px; transition: border-color .2s; resize:vertical; }
.field input:focus, .field textarea:focus { outline:none; border-color: var(--brand); }
.cform .btn { justify-self:start; } .cform__note { color: var(--muted); font-size:.85rem; }
.cinfo { display:grid; gap:24px; }
.cinfo__list { display:grid; gap:20px; }
.cinfo__list li { display:flex; gap:16px; align-items:flex-start; }
.cinfo__icon { flex:none; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color: var(--brand-soft); background: color-mix(in srgb,var(--brand) 13%,transparent); }
[data-theme="light"] .cinfo__icon { color: var(--brand-deep); }
.cinfo__icon svg { width:24px; height:24px; }
.cinfo__list h4 { font-size:1rem; margin-bottom:2px; } .cinfo__list p { color: var(--muted); font-size:.95rem; }
.cinfo__list a:hover { color: var(--brand-soft); } [data-theme="light"] .cinfo__list a:hover { color: var(--brand-deep); }
.cinfo__map { border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); height:230px; }
.cinfo__map iframe { width:100%; height:100%; border:0; filter: saturate(.9); }
[data-theme="dark"] .cinfo__map iframe { filter: invert(.92) hue-rotate(180deg) saturate(.7); }

/* ----------------------------- الفوتر ----------------------------- */
.footer { background: var(--bg-alt); border-top:1px solid var(--line); padding-top:64px; }
.footer__grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:40px; padding-bottom:44px; }
.footer__brand .brand__logo { height:56px; } .footer__brand p { color: var(--muted); margin-top:18px; max-width:330px; font-size:.96rem; }
.footer h4 { font-size:1.05rem; margin-bottom:16px; }
.footer__links { display:grid; gap:10px; } .footer__links a { color: var(--muted); transition: color .2s; font-size:.96rem; }
.footer__links a:hover { color: var(--brand-soft); } [data-theme="light"] .footer__links a:hover { color: var(--brand-deep); }
.footer__bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding:20px 0; color: var(--muted); font-size:.9rem; }
.footer__top { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; border:1.5px solid var(--line); transition: all .2s; }
.footer__top:hover { border-color: var(--brand); color: var(--brand-soft); transform: translateY(-3px); }

/* ----------------------------- النافذة ----------------------------- */
.modal { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; visibility:hidden; }
.modal.is-open { visibility:visible; }
.modal__backdrop { position:absolute; inset:0; background: rgba(2,12,15,.72); backdrop-filter: blur(4px); opacity:0; transition: opacity .3s; }
.modal.is-open .modal__backdrop { opacity:1; }
.modal__panel { position:relative; width:min(620px,100%); max-height:86vh; overflow-y:auto; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:38px; box-shadow: var(--shadow); transform: translateY(24px) scale(.97); opacity:0; transition: transform .3s, opacity .3s; }
.modal.is-open .modal__panel { transform:none; opacity:1; }
.modal__close { position:absolute; top:16px; inset-inline-end:16px; width:38px; height:38px; border-radius:10px; border:1.5px solid var(--line); display:grid; place-items:center; transition: all .2s; }
.modal__close:hover { border-color: var(--brand); color: var(--brand-soft); }
.modal__icon { width:60px; height:60px; border-radius:18px; display:grid; place-items:center; color:#04231E; background: linear-gradient(135deg,var(--brand),var(--brand-soft)); margin-bottom:18px; }
.modal__icon svg { width:30px; height:30px; }
.modal__panel h3 { font-size:1.45rem; margin-bottom:10px; }
.modal__panel > p { color: var(--muted); margin-bottom:20px; }
.modal__features { display:grid; gap:12px; margin-bottom:28px; }
.modal__features li { display:flex; gap:10px; align-items:flex-start; color: var(--muted); font-size:.96rem; }
.modal__features li::before { content:"✓"; flex:none; width:22px; height:22px; border-radius:8px; margin-top:3px; display:grid; place-items:center; font-size:.72rem; font-weight:800; color:var(--brand-soft); background: color-mix(in srgb,var(--brand) 14%,transparent); }
[data-theme="light"] .modal__features li::before { color: var(--brand-deep); }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1024px) {
  .hero__content { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero__text { display:flex; flex-direction:column; align-items:center; }
  .hero__cta { justify-content:center; }
  .hero__visual { order:-1; }
  .orbit-stage { width: min(300px, 70vw); }
  .services__grid, .portfolio__grid { grid-template-columns: repeat(2,1fr); }
  .about__grid, .scope__grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 860px) {
  :root { --header-h: 70px; }
  .section { padding: 76px 0; }
  .brand__logo { height: 42px; }
  .burger { display:flex; }
  .nav { position:fixed; top: var(--header-h); inset-inline:0; flex-direction:column; align-items:stretch; gap:4px; background: var(--bg); border-bottom:1px solid var(--line); padding:14px 20px 22px; transform: translateY(-12px); opacity:0; visibility:hidden; transition: all .28s; }
  .nav.is-open { transform:none; opacity:1; visibility:visible; }
  .nav__link { padding:12px 16px; font-size:1.02rem; } .nav__link::after { display:none; }
  .nav__link--cta { text-align:center; margin-top:8px; }
  .stats__grid { grid-template-columns: repeat(2,1fr); gap: 30px 0; }
  .contact__grid { grid-template-columns:1fr; }
  .footer__grid { grid-template-columns:1fr 1fr; } .footer__brand { grid-column:1/-1; }
}
@media (max-width: 600px) {
  .services__grid, .portfolio__grid { grid-template-columns:1fr; }
  .cform { padding:24px 20px; } .cform__row { grid-template-columns:1fr; }
  .hero__cta .btn { width:100%; }
  .vcard { padding: 24px 24px 24px 78px; } [dir="rtl"] .vcard { padding: 24px 78px 24px 24px; }
  .modal__panel { padding:28px 22px; }
  .footer__grid { grid-template-columns:1fr; } .footer__bottom { flex-direction:column; }
  .cta-band__panel { padding:56px 24px; border-radius:24px; }
  .quotes { padding:38px 22px 28px; } .quote__who { flex-direction:column; } .quote__meta { text-align:center; }
  .wa-float { width:52px; height:52px; bottom:18px; inset-inline-end:18px; }
  .hero__scroll { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html { scroll-behavior:auto; } .reveal { opacity:1; transform:none; }
}