/* =========================================================
   شركة لؤلؤة الإبداع للأعمال المعدنية — Lulua Al-Ebda'a Metal Works
   Design tokens derived from brand mark: navy → azure → sky,
   pearl white, warm sand accent (Vision 2030 / KSA identity)
   ========================================================= */

:root{
  --navy:#0a2e4d;
  --navy-ink:#081f34;
  --blue:#1568b0;
  --blue-2:#2f86c9;
  --sky:#7fc7ea;
  --sky-light:#c9e9f7;
  --pearl:#f4f7f9;
  --pearl-white:#ffffff;
  --ink:#0d1b26;
  --ink-soft:#4a5b68;
  --sand:#c8a165;
  --sand-light:#e8d3a4;
  --line:#e2e8ec;

  --font-display:'Cairo', 'Tajawal', sans-serif;
  --font-body:'Tajawal', 'Cairo', sans-serif;

  --container:1240px;
  --radius:14px;
  --shadow-sm:0 2px 10px rgba(10,46,77,.06);
  --shadow-md:0 12px 34px rgba(10,46,77,.12);
  --shadow-lg:0 24px 60px rgba(10,46,77,.18);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22640%22%20height%3D%22640%22%20viewBox%3D%220%200%20640%20640%22%3E%0A%3Cg%20transform%3D%22rotate%28117%2070%2060%29%22%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2260%22%20r%3D%2216%22%20fill%3D%22none%22%20stroke%3D%22%230a2e4d%22%20stroke-width%3D%221.3%22%20opacity%3D%220.045%22/%3E%3Cpath%20d%3D%22M61.2%2054.4c4.0%20-8.8%2012.0%20-12.0%2017.6%20-8.8%22%20stroke%3D%22%230a2e4d%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20opacity%3D%220.045%22/%3E%3C/g%3E%0A%3Cg%20transform%3D%22rotate%2854%20410%20140%29%22%3E%3Ccircle%20cx%3D%22410%22%20cy%3D%22140%22%20r%3D%2211%22%20fill%3D%22none%22%20stroke%3D%22%23c8a165%22%20stroke-width%3D%221.3%22%20opacity%3D%220.05%22/%3E%3Cpath%20d%3D%22M403.9%20136.2c2.8%20-6.1%208.2%20-8.2%2012.1%20-6.1%22%20stroke%3D%22%23c8a165%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20opacity%3D%220.05%22/%3E%3C/g%3E%0A%3Cg%20transform%3D%22rotate%28234%20560%20380%29%22%3E%3Ccircle%20cx%3D%22560%22%20cy%3D%22380%22%20r%3D%2219%22%20fill%3D%22none%22%20stroke%3D%22%230a2e4d%22%20stroke-width%3D%221.3%22%20opacity%3D%220.04%22/%3E%3Cpath%20d%3D%22M549.5%20373.4c4.8%20-10.5%2014.2%20-14.2%2020.9%20-10.5%22%20stroke%3D%22%230a2e4d%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20opacity%3D%220.04%22/%3E%3C/g%3E%0A%3Cg%20transform%3D%22rotate%2826%20180%20430%29%22%3E%3Ccircle%20cx%3D%22180%22%20cy%3D%22430%22%20r%3D%229%22%20fill%3D%22none%22%20stroke%3D%22%230a2e4d%22%20stroke-width%3D%221.3%22%20opacity%3D%220.045%22/%3E%3Cpath%20d%3D%22M175.1%20426.9c2.2%20-5.0%206.8%20-6.8%209.9%20-5.0%22%20stroke%3D%22%230a2e4d%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20opacity%3D%220.045%22/%3E%3C/g%3E%0A%3Cg%20transform%3D%22rotate%28193%20320%20300%29%22%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22300%22%20r%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22%23c8a165%22%20stroke-width%3D%221.3%22%20opacity%3D%220.045%22/%3E%3Cpath%20d%3D%22M312.9%20295.4c3.2%20-7.2%209.8%20-9.8%2014.3%20-7.2%22%20stroke%3D%22%23c8a165%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20opacity%3D%220.045%22/%3E%3C/g%3E%0A%3Cg%20transform%3D%22rotate%28132%20500%2060%29%22%3E%3Ccircle%20cx%3D%22500%22%20cy%3D%2260%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%230a2e4d%22%20stroke-width%3D%221.3%22%20opacity%3D%220.035%22/%3E%3Cpath%20d%3D%22M496.1%2057.5c1.8%20-3.9%205.2%20-5.2%207.7%20-3.9%22%20stroke%3D%22%230a2e4d%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20opacity%3D%220.035%22/%3E%3C/g%3E%0A%3C/svg%3E") 0 0/640px 640px repeat,
    var(--pearl-white);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html[dir="rtl"] body{ font-family:var(--font-body); }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy-ink);
  line-height:1.25;
  margin:0 0 .5em;
  font-weight:800;
}
p{margin:0 0 1em; color:var(--ink-soft);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit; cursor:pointer;}

.container{max-width:var(--container); margin-inline:auto; padding-inline:24px;}
.section{padding-block:96px;}
.section--tight{padding-block:64px;}
.section--pearl{
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22640%22%20height%3D%22640%22%20viewBox%3D%220%200%20640%20640%22%3E%0A%3Cg%20transform%3D%22rotate%28117%2070%2060%29%22%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2260%22%20r%3D%2216%22%20fill%3D%22none%22%20stroke%3D%22%230a2e4d%22%20stroke-width%3D%221.3%22%20opacity%3D%220.045%22/%3E%3Cpath%20d%3D%22M61.2%2054.4c4.0%20-8.8%2012.0%20-12.0%2017.6%20-8.8%22%20stroke%3D%22%230a2e4d%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20opacity%3D%220.045%22/%3E%3C/g%3E%0A%3Cg%20transform%3D%22rotate%2854%20410%20140%29%22%3E%3Ccircle%20cx%3D%22410%22%20cy%3D%22140%22%20r%3D%2211%22%20fill%3D%22none%22%20stroke%3D%22%23c8a165%22%20stroke-width%3D%221.3%22%20opacity%3D%220.05%22/%3E%3Cpath%20d%3D%22M403.9%20136.2c2.8%20-6.1%208.2%20-8.2%2012.1%20-6.1%22%20stroke%3D%22%23c8a165%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20opacity%3D%220.05%22/%3E%3C/g%3E%0A%3Cg%20transform%3D%22rotate%28234%20560%20380%29%22%3E%3Ccircle%20cx%3D%22560%22%20cy%3D%22380%22%20r%3D%2219%22%20fill%3D%22none%22%20stroke%3D%22%230a2e4d%22%20stroke-width%3D%221.3%22%20opacity%3D%220.04%22/%3E%3Cpath%20d%3D%22M549.5%20373.4c4.8%20-10.5%2014.2%20-14.2%2020.9%20-10.5%22%20stroke%3D%22%230a2e4d%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20opacity%3D%220.04%22/%3E%3C/g%3E%0A%3Cg%20transform%3D%22rotate%2826%20180%20430%29%22%3E%3Ccircle%20cx%3D%22180%22%20cy%3D%22430%22%20r%3D%229%22%20fill%3D%22none%22%20stroke%3D%22%230a2e4d%22%20stroke-width%3D%221.3%22%20opacity%3D%220.045%22/%3E%3Cpath%20d%3D%22M175.1%20426.9c2.2%20-5.0%206.8%20-6.8%209.9%20-5.0%22%20stroke%3D%22%230a2e4d%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20opacity%3D%220.045%22/%3E%3C/g%3E%0A%3Cg%20transform%3D%22rotate%28193%20320%20300%29%22%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22300%22%20r%3D%2213%22%20fill%3D%22none%22%20stroke%3D%22%23c8a165%22%20stroke-width%3D%221.3%22%20opacity%3D%220.045%22/%3E%3Cpath%20d%3D%22M312.9%20295.4c3.2%20-7.2%209.8%20-9.8%2014.3%20-7.2%22%20stroke%3D%22%23c8a165%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20opacity%3D%220.045%22/%3E%3C/g%3E%0A%3Cg%20transform%3D%22rotate%28132%20500%2060%29%22%3E%3Ccircle%20cx%3D%22500%22%20cy%3D%2260%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%230a2e4d%22%20stroke-width%3D%221.3%22%20opacity%3D%220.035%22/%3E%3Cpath%20d%3D%22M496.1%2057.5c1.8%20-3.9%205.2%20-5.2%207.7%20-3.9%22%20stroke%3D%22%230a2e4d%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20opacity%3D%220.035%22/%3E%3C/g%3E%0A%3C/svg%3E") 210px 340px/640px 640px repeat,
    var(--pearl);
}
.section--navy{background:linear-gradient(155deg,var(--navy-ink),var(--navy) 55%,#123f66); color:#eaf3fa;}
.section--navy h2, .section--navy h3{color:#fff;}
.section--navy p{color:#c7dcec;}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:.8rem;
  letter-spacing:.08em; color:var(--blue);
  text-transform:uppercase;
  margin-bottom:14px;
}
html[dir="rtl"] .eyebrow{letter-spacing:0;}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--sand); display:inline-block; border-radius:2px;}

.section-head{max-width:720px; margin-bottom:52px;}
.section-head.center{margin-inline:auto; text-align:center;}
.section-head h2{font-size:clamp(1.9rem,3vw,2.6rem);}
.section-head .lede{font-size:1.08rem; color:var(--ink-soft);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 30px; border-radius:999px; font-weight:700; font-size:.96rem;
  border:1.5px solid transparent; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 10px 26px rgba(21,104,176,.35);}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(21,104,176,.42); background:var(--blue-2);}
.btn-ghost{border-color:rgba(255,255,255,.5); color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.12); transform:translateY(-3px);}
.btn-outline{border-color:var(--blue); color:var(--blue);}
.btn-outline:hover{background:var(--blue); color:#fff; transform:translateY(-3px);}
.btn-sand{background:var(--sand); color:var(--navy-ink); box-shadow:0 10px 24px rgba(200,161,101,.35);}
.btn-sand:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(200,161,101,.42);}
.btn-sm{padding:10px 20px; font-size:.86rem;}

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:1000;
  padding-block:16px;
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header::before{
  content:""; position:absolute; inset:0; background:rgba(8,31,52,.0);
  backdrop-filter:blur(0px); transition:all .4s var(--ease); z-index:-1;
}
.site-header.scrolled{padding-block:10px; background:rgba(8,31,52,.92); box-shadow:0 8px 30px rgba(8,31,52,.25); backdrop-filter:blur(10px);}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.brand img{height:52px; width:auto;}
.brand-text{display:flex; flex-direction:column; line-height:1.2;}
.brand-text strong{font-family:var(--font-display); font-weight:800; font-size:1.02rem; color:#fff; letter-spacing:.01em;}
.brand-text span{font-size:.66rem; color:var(--sky-light); letter-spacing:.12em; text-transform:uppercase;}
html[dir="rtl"] .brand-text span{letter-spacing:.02em;}

.main-nav{display:flex; align-items:center; gap:6px;}
.main-nav a{
  padding:10px 16px; border-radius:999px; font-size:.92rem; font-weight:600;
  color:#dfebf4; transition:background .3s, color .3s;
  position:relative;
}
.main-nav a:hover, .main-nav a.active{background:rgba(255,255,255,.12); color:#fff;}
.nav-drop{position:relative;}
.nav-drop > a::after{content:"›"; display:inline-block; margin-inline-start:4px; transform:rotate(90deg); font-size:.8em; transition:transform .3s;}
.nav-drop:hover > a::after{transform:rotate(-90deg);}
.nav-drop-panel{
  position:absolute; top:calc(100% + 10px); inset-inline-start:0; min-width:230px;
  background:#fff; border-radius:12px; box-shadow:var(--shadow-lg); padding:10px;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:all .28s var(--ease);
}
.nav-drop:hover .nav-drop-panel{opacity:1; visibility:visible; transform:translateY(0);}
.nav-drop-panel a{display:flex; align-items:center; gap:10px; color:var(--ink); padding:10px 12px; border-radius:8px; font-weight:600; font-size:.88rem;}
.nav-drop-panel a:hover{background:var(--pearl); color:var(--blue);}
.nav-drop-panel a .dot{width:7px;height:7px;border-radius:50%;background:var(--sand); flex-shrink:0;}

.header-actions{display:flex; align-items:center; gap:10px;}
.lang-switch{
  display:flex; align-items:center; background:rgba(255,255,255,.12); border-radius:999px; padding:4px; gap:2px;
}
.lang-switch button{
  border:none; background:transparent; color:#cfe1ee; padding:7px 13px; border-radius:999px; font-weight:700; font-size:.78rem; transition:all .3s;
}
.lang-switch button.active{background:#fff; color:var(--navy-ink);}
.burger{display:none; width:44px; height:44px; border:none; background:rgba(255,255,255,.12); border-radius:10px; color:#fff; font-size:1.2rem; align-items:center; justify-content:center;}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:linear-gradient(160deg,var(--navy-ink) 0%,var(--navy) 45%,#0f4a78 100%);
  overflow:hidden; color:#fff;
}
.hero-stage{position:absolute; inset:0; z-index:0;}
.hero-stage svg{position:absolute; inset:0; width:100%; height:100%;}
.hero-noise{position:absolute; inset:0; background:radial-gradient(ellipse at 70% 20%, rgba(127,199,234,.18), transparent 55%), radial-gradient(ellipse at 15% 85%, rgba(200,161,101,.13), transparent 50%);}

/* ---------- Hero video background ---------- */
.hero-video-wrap{position:absolute; inset:0; background:#050c14;}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-video-scrim{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(8,31,52,.82) 0%, rgba(10,46,77,.72) 38%, rgba(15,74,120,.56) 100%);
}
html[dir="rtl"] .hero-video-scrim{
  background:linear-gradient(200deg, rgba(8,31,52,.82) 0%, rgba(10,46,77,.72) 38%, rgba(15,74,120,.56) 100%);
}
@media (prefers-reduced-motion: reduce){
  .hero-video{display:none;}
  .hero-video-wrap{background-size:cover; background-position:center;}
}

/* ---------- Vertical reel grid ---------- */
.reel-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:22px;}
.reel-card{
  position:relative; margin:0; border-radius:16px; overflow:hidden;
  background:#081f34; aspect-ratio:9/16;
  box-shadow:0 14px 38px rgba(8,31,52,.16);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
}
.reel-card:hover{transform:translateY(-6px); box-shadow:0 22px 54px rgba(8,31,52,.28);}
.reel-card video{display:block; width:100%; height:100%; object-fit:cover;}
.reel-play{
  position:absolute; inset:0; margin:auto; width:60px; height:60px;
  display:flex; align-items:center; justify-content:center;
  border:0; cursor:pointer; border-radius:50%;
  background:rgba(10,46,77,.62); backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(255,255,255,.35);
  transition:transform .3s ease, background .3s ease, opacity .3s ease;
}
.reel-play svg{width:26px; height:26px; margin-inline-start:3px;}
.reel-card:hover .reel-play{transform:scale(1.08); background:rgba(21,104,176,.82);}
.reel-card.playing .reel-play{opacity:0; pointer-events:none;}
.reel-card figcaption{
  position:absolute; inset-inline:0; bottom:0; padding:34px 16px 14px;
  background:linear-gradient(to top, rgba(5,20,35,.92), transparent);
  color:#fff; font-size:.83rem; font-weight:700; line-height:1.5;
}
@media (max-width:1100px){ .reel-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){ .reel-grid{grid-template-columns:repeat(2,1fr); gap:16px;} }
@media (max-width:520px){ .reel-grid{grid-template-columns:1fr 1fr; gap:12px;} .reel-card figcaption{font-size:.74rem; padding:26px 10px 10px;} }
.hero-content{position:relative; z-index:2; padding-top:120px; padding-bottom:80px;}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:end;}
.hero-kicker{display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.78rem; color:var(--sky-light); margin-bottom:22px;}
.hero-kicker .pearl-mark{width:10px;height:10px;border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff, var(--sky) 60%, var(--blue) 100%); box-shadow:0 0 16px rgba(127,199,234,.7);}
.hero h1{font-size:clamp(2.4rem,5vw,4.1rem); color:#fff; margin-bottom:22px; font-weight:900;}
.hero h1 em{font-style:normal; color:var(--sky-light); position:relative;}
.hero .lede{font-size:1.15rem; color:#cbdfee; max-width:560px; margin-bottom:36px;}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px;}
.hero-stats{display:flex; gap:0; border-top:1px solid rgba(255,255,255,.18); padding-top:28px;}
.hero-stats .stat{flex:1; padding-inline-end:24px;}
.hero-stats .stat b{display:block; font-family:var(--font-display); font-size:2rem; font-weight:900; color:#fff;}
.hero-stats .stat span{font-size:.82rem; color:#a9c6db;}

.hero-side{position:relative;}
.hero-panel{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:20px;
  padding:26px; backdrop-filter:blur(6px); box-shadow:var(--shadow-lg);
}
.hero-panel h4{color:#fff; font-size:1rem; margin-bottom:16px; display:flex; align-items:center; gap:10px;}
.mini-service{display:flex; align-items:center; gap:14px; padding:12px 8px; border-radius:12px; transition:background .3s;}
.mini-service:hover{background:rgba(255,255,255,.08);}
.mini-service .ic{width:40px; height:40px; border-radius:10px; background:linear-gradient(145deg,var(--blue),var(--sky)); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.mini-service .ic svg{width:20px; height:20px; stroke:#fff;}
.mini-service .tx b{display:block; font-size:.9rem; color:#fff; font-weight:700;}
.mini-service .tx span{font-size:.76rem; color:#a9c6db;}

.scroll-cue{position:absolute; bottom:26px; inset-inline-start:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:#9fc0d6; font-size:.72rem; letter-spacing:.1em; z-index:2;}
html[dir="rtl"] .scroll-cue{transform:translateX(50%);}
.scroll-cue .line{width:1px; height:34px; background:linear-gradient(#9fc0d6,transparent); animation:cueMove 1.8s ease-in-out infinite;}
@keyframes cueMove{0%{opacity:0; transform:scaleY(.3); transform-origin:top;} 50%{opacity:1;transform:scaleY(1);transform-origin:top;} 100%{opacity:0; transform:scaleY(.3); transform-origin:bottom;}}

/* ---------- Hero skyline signature (CSS towers + brand swoosh) ---------- */
.skyline{position:absolute; inset-inline:0; bottom:0; height:46%; display:flex; align-items:flex-end; gap:3px; opacity:.9; z-index:1;}
.skyline .tower{flex:1; background:linear-gradient(180deg,rgba(21,104,176,.35),rgba(8,31,52,.85)); border-top:1px solid rgba(127,199,234,.35); position:relative;}
.skyline .tower.h1{height:32%;} .skyline .tower.h2{height:52%;} .skyline .tower.h3{height:40%;}
.skyline .tower.h4{height:68%;} .skyline .tower.h5{height:46%;} .skyline .tower.h6{height:58%;}
.skyline .tower.h7{height:36%;} .skyline .tower.h8{height:50%;}
.skyline .tower.landmark{height:96%; background:linear-gradient(180deg,rgba(127,199,234,.5),rgba(8,31,52,.9)); clip-path:polygon(38% 0%,62% 0%,62% 18%,78% 18%,78% 30%,62% 30%,62% 100%,38% 100%,38% 30%,22% 30%,22% 18%,38% 18%);}
.skyline .tower::before{content:""; position:absolute; inset-inline:6px; top:10px; bottom:10px; background-image:linear-gradient(rgba(201,233,247,.14) 1px,transparent 1px); background-size:100% 14px;}
.crane{position:absolute; z-index:2; opacity:.85;}
.crane svg{width:100%; height:100%;}

.pearl-orb{position:absolute; width:120px; height:120px; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 32% 28%, #ffffff, var(--sky) 45%, var(--blue) 85%);
  box-shadow:0 0 60px rgba(127,199,234,.55), 0 0 120px rgba(21,104,176,.35);
  animation:orbFloat 7s ease-in-out infinite;
}
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-16px) scale(1.03);}}

.brand-swoosh{position:absolute; z-index:1; pointer-events:none;}
.brand-swoosh path{fill:none; stroke:url(#swooshGrad); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:1400; stroke-dashoffset:1400; animation:drawSwoosh 2.6s var(--ease) .3s forwards;}
@keyframes drawSwoosh{to{stroke-dashoffset:0;}}

.particles span{position:absolute; width:4px; height:4px; border-radius:50%; background:#cdeaf9; opacity:.5; animation:twinkle 3.4s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.15; transform:scale(.7);} 50%{opacity:.8; transform:scale(1.2);}}

/* ---------- Wave divider ---------- */
.wave-divider{display:block; width:100%; height:70px; margin-block:-1px;}
.wave-divider path{fill:var(--pearl);}
.wave-divider.to-white path{fill:#fff;}
.wave-divider.to-navy path{fill:var(--navy-ink);}

/* ---------- Cards ---------- */
.grid{display:grid; gap:28px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

.goal-card{
  background:#fff; border-radius:var(--radius); padding:30px 26px; box-shadow:var(--shadow-sm);
  border:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  position:relative; overflow:hidden;
}
.goal-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:transparent;}
.goal-card .num{
  font-family:var(--font-display); font-weight:900; font-size:.78rem; color:var(--sand);
  letter-spacing:.08em; margin-bottom:14px; display:inline-block;
}
.goal-card .ic{width:52px; height:52px; border-radius:14px; background:var(--pearl); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.goal-card .ic svg{width:26px; height:26px; stroke:var(--blue);}
.goal-card h3{font-size:1.08rem; margin-bottom:8px;}
.goal-card p{font-size:.92rem; margin-bottom:0;}

.service-card{
  background:#fff; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease); display:flex; flex-direction:column;
}
.service-card:hover{transform:translateY(-10px); box-shadow:var(--shadow-lg);}
.service-card .thumb{height:190px; position:relative; overflow:hidden; background-size:110% auto; background-position:center; transition:background-size .6s var(--ease);}
.service-card .thumb svg{width:100%; height:100%;}
.service-card:hover .thumb{background-size:122% auto;}
.thumb-tag{position:absolute; inset-inline-start:16px; bottom:14px; color:#fff; font-family:var(--font-display); font-weight:800; font-size:.95rem; letter-spacing:.02em; text-shadow:0 2px 10px rgba(0,0,0,.4);}
.service-card .body{padding:26px; display:flex; flex-direction:column; gap:10px; flex:1;}
.service-card .tag{font-family:var(--font-display); font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--blue);}
.service-card h3{font-size:1.25rem; margin-bottom:2px;}
.service-card p{font-size:.92rem; flex:1;}
.service-card .more{display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--navy-ink); font-size:.9rem; margin-top:6px;}
.service-card .more svg{width:16px; height:16px; transition:transform .3s;}
html[dir="rtl"] .service-card .more svg{transform:scaleX(-1);}
.service-card:hover .more svg{transform:translateX(4px);}
html[dir="rtl"] .service-card:hover .more svg{transform:scaleX(-1) translateX(4px);}

/* ---------- Stats ---------- */
.stats-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-md);}
.stats-strip .stat-box{background:#fff; padding:34px 22px; text-align:center; border-inline-end:1px solid var(--line);}
.stats-strip .stat-box:last-child{border-inline-end:none;}
.stats-strip .stat-box b{display:block; font-family:var(--font-display); font-size:2.4rem; font-weight:900; color:var(--blue); margin-bottom:6px;}
.stats-strip .stat-box span{font-size:.86rem; color:var(--ink-soft); font-weight:600;}

/* ---------- Timeline / process ---------- */
.process-line{position:relative; padding-inline-start:0;}
.process-item{display:grid; grid-template-columns:64px 1fr; gap:22px; padding-block:26px; position:relative;}
.process-item::before{content:""; position:absolute; inset-inline-start:31px; top:0; bottom:0; width:2px; background:var(--line);}
.process-item:first-child::before{top:50%;}
.process-item:last-child::before{bottom:50%;}
.process-dot{width:64px; height:64px; border-radius:50%; background:#fff; border:2px solid var(--sky-light); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; color:var(--blue); z-index:1; flex-shrink:0;}

/* ---------- Partners ---------- */
.partners-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.partner-badge{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 16px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:140px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.partner-badge:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--sky-light);}
.partner-badge .mark{width:52px;height:52px;border-radius:50%; background:linear-gradient(145deg,var(--pearl),#e7eef2); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:900; color:var(--blue); font-size:1.1rem; border:1px solid var(--line);}
.partner-badge .logo-img{width:100%; height:56px; display:flex; align-items:center; justify-content:center;}
.partner-badge .logo-img img{max-width:100%; max-height:100%; object-fit:contain;}
.partner-badge span{font-size:.82rem; font-weight:700; color:var(--navy-ink); line-height:1.4;}

/* ---------- Testimonials / quote ---------- */
.quote-block{background:var(--pearl); border-radius:20px; padding:44px; position:relative;}
.quote-block svg{width:38px; height:38px; fill:var(--sand); margin-bottom:14px;}
.quote-block p{font-size:1.15rem; color:var(--navy-ink); font-weight:600; font-family:var(--font-display);}

/* ---------- Forms ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:.86rem; font-weight:700; color:var(--navy-ink);}
.field input, .field select, .field textarea{
  border:1.5px solid var(--line); border-radius:10px; padding:13px 16px; font-family:inherit; font-size:.95rem;
  background:#fbfcfd; transition:border-color .3s, box-shadow .3s; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(21,104,176,.12); background:#fff;}
.field textarea{resize:vertical; min-height:120px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-ink); color:#c7d9e6; padding-top:70px;}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.08);}
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.footer-brand img{height:44px;}
.footer-brand strong{font-family:var(--font-display); color:#fff; font-size:1rem;}
.site-footer h5{color:#fff; font-family:var(--font-display); font-size:.92rem; margin-bottom:18px; letter-spacing:.03em;}
.site-footer ul li{margin-bottom:11px;}
.site-footer a{color:#a9c1d3; font-size:.9rem; transition:color .3s;}
.site-footer a:hover{color:var(--sky-light);}
.footer-social{display:flex; align-items:center; gap:14px; margin-top:18px;}
.footer-social-label{color:#cfe0ec; font-size:.85rem; font-weight:700;}
.footer-social a{width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.footer-social a:hover{background:var(--sand); border-color:var(--sand); transform:translateY(-2px);}
.footer-social svg{width:20px; height:20px; stroke:#fff;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-block:24px; font-size:.82rem; color:#7f9cb2; flex-wrap:wrap; gap:10px;}

/* ---------- Bilingual toggle (AR default / EN) ---------- */
html:not([data-lang="en"]) .en{display:none;}
html[data-lang="en"] .ar{display:none;}
html[data-lang="en"] body{font-family:'Poppins','Tajawal',sans-serif;}
html[data-lang="en"] h1,html[data-lang="en"] h2,html[data-lang="en"] h3,html[data-lang="en"] h4{font-family:'Cairo','Poppins',sans-serif;}

/* ---------- Reveal animations ----------
   Hidden state only applies once main.js has confirmed JS is running
   (html.js, set synchronously in <head> before first paint). If JS is
   blocked or fails to load, html never gets .js and every .reveal /
   .reveal-stagger item is simply visible with no animation — no content
   is ever permanently hidden behind a script that didn't run. */
html.js .reveal{opacity:0; transform:translateY(28px);}
.reveal{transition:opacity .8s var(--ease), transform .8s var(--ease);}
html.js .reveal.in{opacity:1; transform:translateY(0);}
html.js .reveal-stagger > *{opacity:0; transform:translateY(24px);}
.reveal-stagger > *{transition:opacity .7s var(--ease), transform .7s var(--ease);}
html.js .reveal-stagger.in > *{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.15s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.25s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.35s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.45s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.55s;}
.reveal-stagger.in > *:nth-child(7){transition-delay:.65s;}
.reveal-stagger.in > *:nth-child(8){transition-delay:.75s;}

/* ---------- Breadcrumb / inner hero ---------- */
.inner-hero{
  position:relative; padding-top:170px; padding-bottom:90px; color:#fff; overflow:hidden;
  background:linear-gradient(155deg,var(--navy-ink),var(--navy) 60%, #114873);
}
.inner-hero .hero-noise{opacity:.8;}
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:.86rem; color:#a9c6db; margin-bottom:18px;}
.breadcrumb a{color:#a9c6db;}
.breadcrumb a:hover{color:#fff;}
.inner-hero h1{font-size:clamp(2rem,4vw,3.1rem); color:#fff; margin-bottom:14px;}
.inner-hero .lede{color:#cbdfee; max-width:620px; font-size:1.05rem;}

/* ---------- Service detail page ---------- */
.spec-list{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.spec-item{display:flex; align-items:flex-start; gap:12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px;}
.spec-item .dot{width:9px; height:9px; border-radius:50%; background:var(--sand); margin-top:8px; flex-shrink:0;}
.spec-item b{display:block; font-size:.94rem; color:var(--navy-ink); margin-bottom:2px;}
.spec-item span{font-size:.85rem; color:var(--ink-soft);}

.gallery-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.gallery-strip .g-item{border-radius:16px; overflow:hidden; aspect-ratio:4/3; background-size:cover; background-position:center; transition:transform .5s var(--ease); box-shadow:var(--shadow-sm);}
.gallery-strip .g-item svg{width:100%; height:100%;}
.gallery-strip .g-item:hover{transform:translateY(-4px) scale(1.02);}

.applications-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.app-card{background:var(--pearl); border-radius:14px; padding:24px; text-align:center;}
.app-card .ic{width:48px; height:48px; margin-inline:auto; margin-bottom:14px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);}
.app-card .ic svg{width:24px; height:24px; stroke:var(--blue);}
.app-card h4{font-size:.98rem; margin-bottom:6px;}
.app-card p{font-size:.85rem; margin-bottom:0;}

.cross-services{display:flex; gap:14px; flex-wrap:wrap;}
.cross-chip{display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:10px 20px 10px 12px; font-weight:700; font-size:.9rem; transition:all .3s;}
html[dir="rtl"] .cross-chip{padding:10px 12px 10px 20px;}
.cross-chip:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-3px);}
.cross-chip .ic{width:30px;height:30px;border-radius:50%; background:var(--pearl); display:flex; align-items:center; justify-content:center;}
.cross-chip .ic svg{width:15px;height:15px; stroke:var(--blue);}

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:28px; padding:56px; background:linear-gradient(135deg,var(--navy-ink),var(--blue) 120%);
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; position:relative; overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.cta-band::after{content:""; position:absolute; inset-inline-end:-60px; top:-60px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(127,199,234,.35),transparent 70%);}
.cta-band h3{color:#fff; font-size:1.7rem; margin-bottom:8px; max-width:480px;}
.cta-band p{color:#cbdfee; margin-bottom:0; max-width:460px;}
.cta-actions{display:flex; gap:14px; position:relative; z-index:1;}

/* ---------- Map / contact ---------- */
.contact-wrap{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start;}
.contact-info-card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px; box-shadow:var(--shadow-sm);}
.contact-row{display:flex; gap:16px; padding-block:16px; border-bottom:1px solid var(--line);}
.contact-row:last-child{border-bottom:none;}
.contact-row .ic{width:44px; height:44px; border-radius:12px; background:var(--pearl); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.contact-row .ic svg{width:20px;height:20px; stroke:var(--blue);}
.contact-row b{display:block; font-size:.92rem; color:var(--navy-ink); margin-bottom:3px;}
.contact-row span, .contact-row a{font-size:.88rem; color:var(--ink-soft);}
.map-frame{border-radius:20px; overflow:hidden; border:1px solid var(--line); height:220px; margin-top:20px;}

/* ---------- Back to top ---------- */
.to-top{position:fixed; inset-inline-end:26px; bottom:26px; width:48px; height:48px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); z-index:900; opacity:0; visibility:hidden; transform:translateY(12px); transition:all .35s var(--ease); border:none;}
.to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.to-top svg{width:20px;height:20px; stroke:#fff;}
html[dir="rtl"] .to-top svg{transform:scaleX(-1);}

/* ---------- Mobile nav ---------- */
.mobile-nav{position:fixed; inset:0; background:var(--navy-ink); z-index:1100; display:flex; flex-direction:column; padding:26px 24px; transform:translateX(100%); transition:transform .45s var(--ease); overflow-y:auto;}
html[dir="rtl"] .mobile-nav{transform:translateX(-100%);}
.mobile-nav.open{transform:translateX(0);}
html[dir="rtl"] .mobile-nav.open{transform:translateX(0);}
.mobile-nav-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:30px;}
.mobile-nav-top .brand img{height:42px;}
.mobile-nav-close{width:42px; height:42px; border-radius:10px; background:rgba(255,255,255,.1); border:none; color:#fff; font-size:1.2rem;}
.mobile-nav a{display:block; padding:16px 6px; color:#fff; font-size:1.15rem; font-weight:700; border-bottom:1px solid rgba(255,255,255,.08); font-family:var(--font-display);}
.mobile-nav .sub-links{padding-inline-start:16px;}
.mobile-nav .sub-links a{font-size:.94rem; font-weight:600; color:#b9d0e0; padding-block:12px;}

/* =========================================================
   Pearl mark — enhanced shine & sparkle
   ========================================================= */
.pearl-orb{
  background:radial-gradient(circle at 30% 26%, #ffffff 0%, #fdfffe 10%, var(--sky) 48%, var(--blue) 88%);
  box-shadow:0 0 40px rgba(255,255,255,.55), 0 0 90px rgba(127,199,234,.75), 0 0 160px rgba(21,104,176,.5);
  animation:orbFloat 6s ease-in-out infinite, pearlPulse 3.2s ease-in-out infinite;
  overflow:visible;
}
.pearl-orb::before{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.55) 18deg, transparent 40deg, transparent 180deg, rgba(127,199,234,.45) 200deg, transparent 230deg, transparent 360deg);
  animation:pearlRotate 5s linear infinite;
  filter:blur(1px);
}
.pearl-orb::after{
  content:""; position:absolute; inset:6%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 32% 24%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 10%, transparent 26%);
  animation:pearlGlint 3.2s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes pearlPulse{
  0%,100%{box-shadow:0 0 40px rgba(255,255,255,.5), 0 0 90px rgba(127,199,234,.7), 0 0 150px rgba(21,104,176,.45);}
  50%{box-shadow:0 0 56px rgba(255,255,255,.75), 0 0 130px rgba(127,199,234,.95), 0 0 210px rgba(21,104,176,.6);}
}
@keyframes pearlRotate{to{transform:rotate(360deg);}}
@keyframes pearlGlint{0%,100%{opacity:.55; transform:scale(.9);} 50%{opacity:1; transform:scale(1.12);}}
.pearl-sparkle{position:absolute; z-index:3; width:7px; height:7px; pointer-events:none;
  background:radial-gradient(circle, #fff 0%, var(--sky) 60%, transparent 80%);
  clip-path:polygon(50% 0%,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0% 50%,37% 37%);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.9));
  animation:sparkleTwinkle 2.4s ease-in-out infinite;
}
@keyframes sparkleTwinkle{0%,100%{opacity:0; transform:scale(.3) rotate(0deg);} 50%{opacity:1; transform:scale(1) rotate(25deg);}}
.hero-kicker .pearl-mark{
  animation:pearlPulse 2.6s ease-in-out infinite;
  box-shadow:0 0 10px rgba(255,255,255,.8), 0 0 22px rgba(127,199,234,.9);
}

/* =========================================================
   Material themes — per service page
   ========================================================= */
body[data-theme="glass"]{
  --t-grad:linear-gradient(150deg,#eef8fd 0%, #d3edf9 45%, #a9def2 100%);
  --t-h1:#0a2e4d; --t-sub:#3d6f8c; --t-accent:#1f8fce; --t-accent2:#7fc7ea;
  --t-icon-bg:#ffffff; --t-surface:#f2fbff; --t-line:#cfe9f6; --t-tag:#0e6ea3;
}
body[data-theme="steel"]{
  --t-grad:linear-gradient(150deg,#3c4448 0%, #6c777c 48%, #a7b1b5 100%);
  --t-h1:#ffffff; --t-sub:#dfe4e6; --t-accent:#8a969b; --t-accent2:#ced5d8;
  --t-icon-bg:#eef1f2; --t-surface:#f4f5f6; --t-line:#dde1e3; --t-tag:#5b656a;
}
body[data-theme="iron"]{
  --t-grad:linear-gradient(150deg,#050506 0%, #1b1d1f 48%, #34373b 100%);
  --t-h1:#ffffff; --t-sub:#b7bcbf; --t-accent:#9aa0a5; --t-accent2:#c7ccd0;
  --t-icon-bg:#212326; --t-surface:#f1f1f2; --t-line:#e0e1e2; --t-tag:#8b9195;
}

body[data-theme] .inner-hero{background:var(--t-grad); position:relative;}
body[data-theme] .inner-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
}
body[data-theme="steel"] .inner-hero::before{
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.1) 0px, rgba(255,255,255,.1) 1px, transparent 1px, transparent 7px);
}
body[data-theme="iron"] .inner-hero::before{
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:16px 16px;
}
body[data-theme="glass"] .inner-hero::before{
  background:repeating-linear-gradient(120deg, rgba(255,255,255,.5) 0px, rgba(255,255,255,.5) 2px, transparent 2px, transparent 70px);
}
body[data-theme] .inner-hero .hero-noise{display:none;}
body[data-theme] .inner-hero h1{color:var(--t-h1);}
body[data-theme] .inner-hero .lede{color:var(--t-sub);}
body[data-theme] .inner-hero .breadcrumb,
body[data-theme] .inner-hero .breadcrumb a{color:var(--t-sub);}
body[data-theme] .inner-hero .breadcrumb a:hover{color:var(--t-h1);}
body[data-theme] .inner-hero .eyebrow{color:var(--t-accent);}
body[data-theme] .inner-hero .eyebrow::before{background:var(--t-accent2);}

/* The three service pages set a dark photo overlay directly on .inner-hero via
   an inline style, which overrides the light "glass" theme gradient above.
   Force light, readable text on that dark photo background for all three pages. */
/* The decorative pattern (::before) is meant to sit on top of the flat theme
   gradient. When a page instead sets a real photo as the hero background, the
   pattern's semi-opaque stripes/dots sat on top of the photo and washed it out.
   Hide the pattern whenever a photo background is present so the image stays clear. */
body[data-theme] .inner-hero[style*="background-image"]::before{display:none;}
body[data-theme] .inner-hero[style*="background-image"] h1{color:#fff;}
body[data-theme] .inner-hero[style*="background-image"] .lede{color:#cbdfee;}
body[data-theme] .inner-hero[style*="background-image"] .breadcrumb,
body[data-theme] .inner-hero[style*="background-image"] .breadcrumb a{color:#a9c6db;}
body[data-theme] .inner-hero[style*="background-image"] .breadcrumb a:hover{color:#fff;}
body[data-theme] .inner-hero[style*="background-image"] .eyebrow{color:#7fc7ea;}

body[data-theme] .spec-item .dot{background:var(--t-accent);}
body[data-theme] .section--pearl{background:var(--t-surface);}
body[data-theme] .app-card{background:var(--t-surface); border:1px solid var(--t-line);}
body[data-theme] .app-card .ic{background:var(--t-icon-bg);}
body[data-theme] .app-card .ic svg{stroke:var(--t-accent);}
body[data-theme] .section-head .eyebrow{color:var(--t-accent);}
body[data-theme] .section-head .eyebrow::before{background:var(--t-accent2);}

/* =========================================================
   Project gallery — work samples placeholder grid
   ========================================================= */
.project-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.project-card{border-radius:16px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
.project-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg);}
.project-media{position:relative; aspect-ratio:4/3; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, var(--t-surface,#eef2f4), #ffffff);
  border-bottom:1px dashed var(--t-line, var(--line));
}
.project-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.project-media .placeholder-ic{display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--t-accent, var(--blue)); opacity:.55;}
.project-media .placeholder-ic svg{width:34px; height:34px; stroke:currentColor;}
.project-media .placeholder-ic span{font-size:.72rem; font-weight:700; letter-spacing:.02em;}
.project-card:hover .project-media .placeholder-ic{opacity:.85;}
.project-info{padding:16px 18px;}
.project-info b{display:block; font-size:.95rem; color:var(--navy-ink); margin-bottom:4px;}
.project-info .project-tag{display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700; color:var(--t-tag, var(--blue)); letter-spacing:.02em;}
.project-info .project-tag::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--t-accent, var(--blue));}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-side{max-width:440px;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .partners-grid{grid-template-columns:repeat(3,1fr);}
  .stats-strip{grid-template-columns:repeat(2,1fr);}
  .stats-strip .stat-box:nth-child(2){border-inline-end:none;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:34px;}
  .contact-wrap{grid-template-columns:1fr;}
}
@media (max-width:860px){
  .main-nav, .header-actions .lang-switch{display:none;}
  .burger{display:flex;}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .applications-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-strip{grid-template-columns:repeat(2,1fr);}
  .project-gallery{grid-template-columns:repeat(2,1fr);}
  .form-grid{grid-template-columns:1fr;}
  .partners-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .section{padding-block:64px;}
  .grid-4, .grid-3, .grid-2{grid-template-columns:1fr;}
  .stats-strip{grid-template-columns:1fr;}
  .stats-strip .stat-box{border-inline-end:none; border-bottom:1px solid var(--line);}
  .footer-grid{grid-template-columns:1fr; gap:30px;}
  .hero-stats{flex-wrap:wrap; gap:20px;}
  .hero-stats .stat{flex:1 1 40%;}
  .cta-band{flex-direction:column; align-items:flex-start; padding:36px 26px;}
  .applications-grid{grid-template-columns:1fr;}
  .gallery-strip{grid-template-columns:1fr;}
  .project-gallery{grid-template-columns:1fr;}
}

/* ---------- Fixed WhatsApp button (always bottom-right, both AR/EN) ---------- */
.whatsapp-float{
  position:fixed !important;
  right:22px !important;
  left:auto !important;
  bottom:22px !important;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.45);
  z-index:9999;
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 14px 32px rgba(37,211,102,.55);}
@media (max-width:600px){
  .whatsapp-float{width:52px; height:52px; right:16px !important; bottom:16px !important;}
  .whatsapp-float svg{width:26px; height:26px;}
}