:root{
  --bg:#04080f;
  --bg-2:#07131f;
  --ink:#dff8ef;
  --muted:#9fc3b4;
  --line:rgba(166,255,221,.15);
  --soft:rgba(255,255,255,.05);
  --glass:rgba(8,15,28,.56);
  --glass-2:rgba(8,20,28,.76);
  --green:#10e39b;
  --green-2:#006039;
  --blue:#6ed2ff;
  --shadow:0 30px 80px rgba(0,0,0,.35);
  --radius:28px;
  --max:1280px;
  --title-xl:clamp(3.2rem,8vw,7rem);
  --title-lg:clamp(2rem,4vw,3.8rem);
  --title-md:clamp(1.2rem,2vw,1.8rem);
  --body:clamp(1rem,1.25vw,1.1rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:Arial,"Segoe UI","Noto Sans Arabic",sans-serif;
  background:
    radial-gradient(circle at 10% 20%, rgba(16,227,155,.12), transparent 25%),
    radial-gradient(circle at 84% 18%, rgba(110,210,255,.12), transparent 22%),
    radial-gradient(circle at 75% 75%, rgba(0,96,57,.10), transparent 26%),
    linear-gradient(180deg,#04080f,#050c16 30%,#07111b 100%);
  overflow-x:hidden;
}
body[dir="rtl"]{font-family:Tahoma,Arial,"Noto Sans Arabic",sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
.site-shell{width:min(100% - 36px, var(--max)); margin-inline:auto}
.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--green),var(--blue));
  z-index:300;
}
#starfield{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-3; display:block;
}
.ambient{
  position:fixed; inset:auto; border-radius:50%; filter:blur(65px); z-index:-2; opacity:.22; pointer-events:none;
}
.ambient-1{width:32vw;height:32vw; top:-10vw; right:-7vw; background:rgba(16,227,155,.25)}
.ambient-2{width:28vw;height:28vw; bottom:-8vw; left:-8vw; background:rgba(110,210,255,.2)}
.ambient-3{width:18vw;height:18vw; top:42vh; left:12vw; background:rgba(0,96,57,.14)}
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  backdrop-filter:blur(18px);
  background:linear-gradient(180deg,rgba(4,8,15,.78),rgba(4,8,15,.28));
  border-bottom:1px solid rgba(255,255,255,.05);
}
.header-shell{
  min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.custom-logo,.brand img{width:126px; height:auto}
.desktop-nav{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.desktop-nav a{font-size:.95rem; color:#edf8f3; opacity:.9}
.desktop-nav a:hover{opacity:1}
.lang-pill,.cta-pill{
  border:1px solid var(--line); border-radius:999px; padding:10px 14px;
  background:rgba(255,255,255,.04);
}
.cta-pill{
  background:linear-gradient(135deg, rgba(16,227,155,.2), rgba(110,210,255,.08));
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}
.menu-btn{
  width:48px;height:48px; display:none; align-items:center; justify-content:center; gap:3px;
  flex-direction:column; border:1px solid var(--line); border-radius:16px;
  background:rgba(255,255,255,.03); color:#fff;
}
.menu-btn span{display:block; width:18px; height:2px; background:#fff}
.mobile-menu{display:none; border-top:1px solid rgba(255,255,255,.05)}
.mobile-menu.open{display:block}
.mobile-menu-inner{
  width:min(100% - 36px, var(--max)); margin-inline:auto; padding:16px 0 22px;
  display:grid; gap:10px;
}
.mobile-menu-inner a{
  padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid var(--line);
}

.hero-section{padding:146px 0 48px}
.hero-layout{
  display:grid; grid-template-columns:1.05fr .95fr; gap:26px; align-items:center;
}
.hero-copy,.hero-art,.story-card,.art-panel,.service-panel,.cosmic-banner,.work-card,.location-card,.contact-panel,.inner-card{
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
}
.hero-copy{padding:42px}
.micro-label{
  display:inline-flex; align-items:center; gap:10px;
  color:#8de4c4; font-size:.82rem; letter-spacing:.15em; text-transform:uppercase;
}
.hero-copy h1{
  margin:16px 0 16px; font-size:var(--title-xl); line-height:.95; letter-spacing:-.045em;
}
body[dir="rtl"] .hero-copy h1{line-height:1.03; letter-spacing:-.03em}
.hero-copy p{
  margin:0; color:var(--muted); max-width:620px; line-height:1.9; font-size:var(--body);
}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}
.btn{
  min-height:50px; padding:0 18px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); transition:.25s ease; font-weight:600;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{
  background:linear-gradient(135deg,var(--green),#7ef5ff); color:#06110d; border-color:transparent;
}
.btn.ghost{background:rgba(255,255,255,.03)}
.hero-art{padding:28px; min-height:620px; display:flex; flex-direction:column; justify-content:center}
.art-core{
  position:relative; min-height:500px; display:grid; place-items:center; overflow:hidden;
}
.art-core img{
  position:relative; z-index:10; width:min(70%,420px);
  filter:drop-shadow(0 0 30px rgba(16,227,155,.35));
}
.orbit,.pulse{
  position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.14);
}
.orbit.o1{width:440px;height:440px; animation:spin 26s linear infinite}
.orbit.o2{width:320px;height:320px; animation:spinReverse 18s linear infinite}
.orbit.o3{width:210px;height:210px; animation:spin 9s linear infinite}
.pulse.p1{width:520px;height:520px; animation:pulse 3.8s ease-out infinite}
.pulse.p2{width:620px;height:620px; animation:pulse 5.3s ease-out infinite}
.beam{
  position:absolute; width:2px; height:130%; background:linear-gradient(180deg,transparent,rgba(16,227,155,.55),transparent);
  transform-origin:center;
}
.beam.b1{transform:rotate(28deg)}
.beam.b2{transform:rotate(-36deg); background:linear-gradient(180deg,transparent,rgba(110,210,255,.45),transparent)}
.art-caption{
  margin-top:8px; display:flex; align-items:center; justify-content:center; gap:12px; color:#d5f8ea; font-weight:700; font-size:1.08rem;
}
.floating-story{
  margin-top:18px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.story-card{padding:18px 18px 20px}
.story-card strong{display:block; font-size:1.05rem; color:#f4fffa}
.story-card span{display:block; margin-top:8px; color:var(--muted); line-height:1.7; font-size:.95rem}
.section{padding:64px 0}
.split-panel{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:24px; padding:36px;
}
.section-copy h2,.section-head h2,.banner-copy h2,.contact-panel h2{
  margin:14px 0 0; font-size:var(--title-lg); line-height:1.14; letter-spacing:-.03em;
}
body[dir="rtl"] .section-copy h2, body[dir="rtl"] .section-head h2, body[dir="rtl"] .banner-copy h2, body[dir="rtl"] .contact-panel h2{
  line-height:1.15; letter-spacing:-.02em;
}
.section-copy p,.section-head p,.banner-copy p,.contact-panel p{
  margin-top:16px; line-height:1.9; color:var(--muted); font-size:var(--body);
}
.mini-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.mini-tags span{
  padding:10px 14px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03); font-size:.92rem
}
.services-orbit{
  display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:24px;
}
.service-panel{padding:24px; min-height:210px}
.service-panel:nth-child(1){grid-column:span 4}
.service-panel:nth-child(2){grid-column:span 4; transform:translateY(28px)}
.service-panel:nth-child(3){grid-column:span 4}
.service-panel:nth-child(4){grid-column:span 6}
.service-panel:nth-child(5){grid-column:span 6; transform:translateY(12px)}
.num{font-size:.82rem; color:#8de4c4; margin-bottom:12px}
.service-panel h3{margin:0; font-size:1.38rem}
.service-panel p{margin-top:12px; line-height:1.9; color:var(--muted)}
.cosmic-banner{
  padding:32px; display:grid; grid-template-columns:1fr 360px; gap:20px; align-items:center;
}
.banner-art{
  min-height:240px; position:relative; overflow:hidden; border-radius:22px;
  background:radial-gradient(circle at center, rgba(16,227,155,.12), transparent 55%), rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.banner-art svg{position:absolute; inset:0; width:100%; height:100%}
.banner-art path{
  fill:none; stroke:url(#none); stroke:rgba(141,228,196,.9); stroke-width:2.5; opacity:.8;
}
.node{
  position:absolute; width:16px; height:16px; border-radius:50%; background:#8ef8d1;
  box-shadow:0 0 16px rgba(142,248,209,.7);
}
.n1{top:40px; left:28px}
.n2{top:112px; left:156px}
.n3{right:34px; bottom:48px}
.work-ribbon{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:24px;
}
.work-card{overflow:hidden}
.work-thumb{aspect-ratio:16/10; background:#09121b}
.work-thumb img{width:100%; height:100%; object-fit:cover}
.work-body{padding:22px}
.work-body span{display:block; color:#8de4c4; font-size:.82rem}
.work-body h3{margin:10px 0 14px; font-size:1.4rem}
.work-body a{color:#e6fff6; font-weight:600}
.location-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:24px}
.location-card{padding:28px}
.location-card span{display:inline-flex; color:#8de4c4; font-size:.82rem}
.location-card h3{margin:10px 0 12px; font-size:1.5rem}
.location-card p{margin:0; color:var(--muted); line-height:1.9}
.contact-panel{padding:38px; text-align:center}
.site-footer{padding:80px 0 36px}
.footer-shell{
  border:1px solid var(--line); border-radius:32px; padding:30px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  backdrop-filter:blur(18px);
}
.footer-top{display:flex; justify-content:space-between; gap:20px; align-items:end; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.08)}
.footer-top h3{margin:12px 0 0; font-size:clamp(1.8rem,3vw,3rem)}
.footer-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; padding:24px 0}
.footer-grid h4{margin:0 0 10px; font-size:1rem}
.footer-grid a,.footer-grid p{display:block; color:var(--muted); margin:8px 0}
.footer-word{
  font-size:clamp(4rem,15vw,14rem); line-height:.85; font-weight:900; letter-spacing:-.08em;
  opacity:.94;
}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); padding-top:18px; color:var(--muted)}
.floating-wa{
  position:fixed; right:18px; bottom:18px; z-index:220; padding:14px 18px; border-radius:999px;
  background:linear-gradient(135deg,var(--green),#7ef5ff); color:#04100b; font-weight:800; box-shadow:0 16px 35px rgba(0,0,0,.35);
}
body[dir="rtl"] .floating-wa{right:auto; left:18px}
.inner-main{padding:140px 0 60px}
.inner-card{padding:32px}
.entry-body{line-height:1.9}
.single-thumb{margin:24px 0}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease}
.reveal.visible{opacity:1; transform:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinReverse{to{transform:rotate(-360deg)}}
@keyframes pulse{
  0%{transform:scale(.76); opacity:0}
  28%{opacity:.28}
  100%{transform:scale(1.08); opacity:0}
}
@media(max-width:1100px){
  .hero-layout,.split-panel,.cosmic-banner{grid-template-columns:1fr}
  .floating-story,.work-ribbon,.location-grid,.footer-grid{grid-template-columns:repeat(2,1fr)}
  .services-orbit{grid-template-columns:repeat(2,1fr)}
  .service-panel:nth-child(n){grid-column:span 1; transform:none}
}
@media(max-width:900px){
  .desktop-nav{display:none}
  .menu-btn{display:flex}
  .hero-section{padding-top:128px}
  .floating-story,.work-ribbon,.location-grid,.footer-grid,.services-orbit{grid-template-columns:1fr}
  .hero-art{min-height:auto}
  .art-core{min-height:360px}
  .orbit.o1{width:320px;height:320px}
  .orbit.o2{width:240px;height:240px}
  .orbit.o3{width:170px;height:170px}
  .pulse.p1{width:400px;height:400px}
  .pulse.p2{width:470px;height:470px}
  .footer-top{flex-direction:column; align-items:flex-start}
}
@media(max-width:640px){
  .site-shell{width:min(100% - 24px, var(--max))}
  .hero-copy,.hero-art,.story-card,.service-panel,.location-card,.contact-panel,.inner-card,.footer-shell{padding:22px}
  .hero-copy h1{font-size:clamp(2.6rem,12vw,4.2rem)}
  .section{padding:48px 0}
  .floating-wa{padding:13px 14px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}