:root{
  --bg:#0b0b0d;
  --bg-elevated:#141417;
  --bg-card:#18181c;
  --fg:#f6f5f1;
  --fg-muted:#a3a19c;
  --fg-faint:#6b6a67;
  --accent:#12afe5;
  --accent-dim:#0174ba;
  --line:#28282c;
  --line-soft:#1e1e22;
  --radius:2px;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}
body{background:var(--bg); color:var(--fg); font-family:'Tajawal',sans-serif; font-weight:400; line-height:1.7; overflow-x:hidden; position:relative;}
h1,h2,h3,.display{font-family:'Cairo',sans-serif; font-weight:800; line-height:1.25; letter-spacing:-0.01em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

.eyebrow{font-family:'Cairo',sans-serif; font-weight:700; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--accent); display:inline-block;}

/* animated background */
.bg-animated{position:fixed; top:0; right:0; bottom:0; left:0; z-index:-2; background:#000; overflow:hidden;}
.bg-animated .glow{position:absolute; width:70vmax; height:70vmax; border-radius:50%; filter:blur(90px); opacity:0.35;}
.bg-animated .glow-1{background:radial-gradient(circle, rgba(18,175,229,0.55), transparent 70%); top:-20%; right:-15%; animation:drift1 26s ease-in-out infinite alternate;}
.bg-animated .glow-2{background:radial-gradient(circle, rgba(1,116,186,0.5), transparent 70%); bottom:-25%; left:-10%; animation:drift2 32s ease-in-out infinite alternate;}
.bg-animated .glow-3{background:radial-gradient(circle, rgba(18,175,229,0.3), transparent 70%); top:35%; left:40%; width:50vmax; height:50vmax; animation:drift3 38s ease-in-out infinite alternate;}
.bg-animated .stars{position:absolute; top:0; right:0; bottom:0; left:0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 65% 15%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.5px 1.5px at 35% 75%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 50% 45%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 90% 85%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 10% 90%, rgba(255,255,255,0.3), transparent);
  background-repeat:repeat; background-size:400px 400px; animation:twinkle 6s ease-in-out infinite;}
@keyframes drift1{0%{transform:translate(0,0) scale(1);} 100%{transform:translate(-8%,10%) scale(1.15);}}
@keyframes drift2{0%{transform:translate(0,0) scale(1);} 100%{transform:translate(10%,-8%) scale(1.1);}}
@keyframes drift3{0%{transform:translate(0,0) scale(1) rotate(0deg);} 100%{transform:translate(-6%,-10%) scale(1.2) rotate(20deg);}}
@keyframes twinkle{0%,100%{opacity:0.7;} 50%{opacity:1;}}
@media (prefers-reduced-motion: reduce){.bg-animated .glow-1, .bg-animated .glow-2, .bg-animated .glow-3, .bg-animated .stars{animation:none;}}

/* nav */
header{position:sticky; top:0; z-index:50; background:rgba(11,11,13,0.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 28px; max-width:var(--maxw); margin:0 auto;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Cairo',sans-serif; font-weight:800; font-size:1.15rem; color:var(--fg);}
.logo-img{height:34px; width:auto;}
.footer-logo-img{height:46px; width:auto;}
.nav-links{display:flex; align-items:center; gap:34px;}
.nav-links a{font-size:0.92rem; color:var(--fg-muted); font-weight:500; transition:color .2s ease;}
.nav-links a:hover, .nav-links a.active{color:var(--fg);}
.nav-cta{font-family:'Cairo',sans-serif; font-weight:700; font-size:0.85rem; background:var(--accent); color:#071019; padding:11px 22px; border-radius:var(--radius); transition:transform .18s ease, box-shadow .18s ease; white-space:nowrap;}
.nav-cta:hover{transform:translateY(-1px); box-shadow:0 8px 24px -8px rgba(18,175,229,0.55);}
.menu-toggle{display:none; background:none; border:none; color:var(--fg); font-size:1.6rem; cursor:pointer;}

/* hero */
.hero{position:relative; padding:100px 0 80px; overflow:hidden; border-bottom:1px solid var(--line-soft);}
.hero-inner{position:relative; z-index:2;}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;}
.hero-text{max-width:640px;}
.hero h1{font-size:clamp(2.2rem, 5vw, 3.6rem); margin:22px 0 24px; color:var(--fg);}
.hero h1 em{font-style:normal; color:var(--accent);}
.hero p.lead{font-size:1.1rem; color:var(--fg-muted); max-width:560px; margin-bottom:36px;}
.btn-row{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:60px;}
.btn-primary{font-family:'Cairo',sans-serif; font-weight:700; font-size:0.95rem; background:var(--accent); color:#071019; padding:16px 32px; border-radius:var(--radius); transition:transform .18s ease, box-shadow .18s ease;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(18,175,229,0.55);}
.btn-secondary{font-family:'Cairo',sans-serif; font-weight:700; font-size:0.95rem; color:var(--fg); padding:16px 32px; border-radius:var(--radius); border:1px solid var(--line); transition:border-color .18s ease, background .18s ease;}
.btn-secondary:hover{border-color:var(--fg-muted); background:var(--bg-elevated);}
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-soft); padding-top:32px; gap:20px;}
.stat b{display:block; font-family:'Cairo',sans-serif; font-weight:900; font-size:1.9rem; color:var(--fg);}
.stat span{font-size:0.8rem; color:var(--fg-faint);}

/* hero gallery */
.gallery{
  position:relative; max-width:560px; margin:0 auto 24px;
  height:380px; display:flex; align-items:center; justify-content:center;
}
.gallery .frame{
  position:absolute; top:0; right:0; bottom:0; left:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .6s ease; gap:36px;
}
.gallery .frame.active{opacity:1; visibility:visible;}
.gallery .frame img{
  width:320px; height:260px; object-fit:contain; object-position:center;
  margin:0 auto; filter:drop-shadow(0 20px 40px rgba(18,175,229,0.15));
}
.gallery .frame-icon{
  width:230px; height:230px; flex-shrink:0;
  filter:drop-shadow(0 20px 45px rgba(18,175,229,0.4));
}
.gallery .frame-icon svg{display:block; width:100%; height:100%;}
.gallery .frame-caption{
  font-family:'Cairo',sans-serif; font-weight:800; font-size:1.05rem; letter-spacing:0.01em;
  color:var(--fg); position:relative;
  padding:13px 32px;
  border-radius:40px;
  background:var(--bg-card);
  border:1.5px solid var(--accent);
  box-shadow:0 12px 28px -8px rgba(18,175,229,0.55), 0 0 0 4px rgba(18,175,229,0.08);
  white-space:nowrap;
  display:flex; align-items:center; gap:10px;
}
.gallery .frame-caption::before{
  content:"";
  width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0;
  box-shadow:0 0 8px 1px var(--accent);
}
.gallery-controls{display:flex; align-items:center; justify-content:center; gap:18px;}
.gallery-dots{display:flex; gap:8px; justify-content:center;}
.gallery-dots button{width:8px; height:8px; border-radius:50%; border:none; background:var(--line); cursor:pointer; padding:0; transition:background .2s ease, transform .2s ease;}
.gallery-dots button.active{background:var(--accent); transform:scale(1.3);}
.gallery-nav-btn{position:relative; background:var(--bg-card); border:1px solid var(--line); color:var(--fg-muted); width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:color .2s ease, border-color .2s ease; flex-shrink:0;}
.gallery-nav-btn:hover{color:var(--accent); border-color:var(--accent-dim);}
@media (prefers-reduced-motion: reduce){.gallery .frame{transition:none;}}
@media (max-width:560px){
  .gallery{height:320px; max-width:100%;}
  .gallery .frame{gap:24px;}
  .gallery .frame img{width:220px; height:190px;}
  .gallery .frame-icon{width:170px; height:170px;}
  .gallery .frame-caption{font-size:0.82rem; padding:10px 20px; gap:7px;}
}

section{padding:100px 0;}

/* ظهور تدريجي عند التمرير - CSS خالص بدون أي جافاسكريبت.
   المتصفحات التي لا تدعم animation-timeline تتجاهل هذا القسم بالكامل والمحتوى يبقى ظاهرًا طبيعيًا دائمًا. */
@supports (animation-timeline: view()) {
  .scroll-fade{
    animation: scroll-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
  @keyframes scroll-fade-in{
    from{opacity:0; transform:translateY(24px);}
    to{opacity:1; transform:translateY(0);}
  }
}
@media (prefers-reduced-motion: reduce){
  .scroll-fade{animation:none !important;}
}

/* slow rotation for the decorative hero arc rings */
.hero-arc{animation:arc-spin 90s linear infinite;}
@keyframes arc-spin{from{transform:translateX(-50%) rotate(0deg);} to{transform:translateX(-50%) rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.hero-arc{animation:none;}}

/* subtle glow pulse on stat numbers when counting up */
.stat b.counting{color:var(--accent); transition:color .4s ease;}
.section-head{max-width:620px; margin-bottom:56px;}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.3rem); margin-top:14px;}
.section-head p{color:var(--fg-muted); margin-top:14px; font-size:1rem;}

/* services */
.services{border-bottom:1px solid var(--line-soft); background:rgba(20,20,23,0.55);}
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);}
.service-card{background:var(--bg-elevated); padding:34px 30px; transition:background .2s ease;}
.service-card:hover{background:var(--bg-card);}
.service-num{font-family:'Cairo',sans-serif; font-weight:800; color:var(--accent-dim); font-size:0.85rem;}
.service-card svg{width:28px; height:28px; margin:18px 0 16px; color:var(--accent);}
.service-card h3{font-size:1.1rem; margin-bottom:8px;}
.service-card p{color:var(--fg-muted); font-size:0.92rem;}

/* process */
.process{border-bottom:1px solid var(--line-soft);}
.phase-track{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.phase-track::before{content:""; position:absolute; top:29px; right:12.5%; left:12.5%; height:1px; background:var(--line); z-index:0;}
.phase{position:relative; z-index:1;}
.phase-icon{width:58px; height:58px; background:var(--bg); border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:22px;}
.phase-icon svg{width:26px; height:26px;}
.phase h3{font-size:1rem; margin-bottom:8px; font-family:'Cairo',sans-serif; font-weight:700;}
.phase p{color:var(--fg-muted); font-size:0.88rem;}
.phase-label{font-family:'Cairo',sans-serif; font-weight:700; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px;}

/* portfolio */
.portfolio-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.port-card{aspect-ratio:3/4; border-radius:var(--radius); border:1px solid var(--line); position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:20px; background:linear-gradient(160deg, #1c1a15, var(--bg-card) 70%); transition:transform .25s ease, border-color .25s ease;}
.port-card:hover{transform:translateY(-6px); border-color:var(--accent-dim);}
.port-card .tag{font-family:'Cairo',sans-serif; font-weight:700; font-size:0.8rem; color:var(--fg); background:rgba(0,0,0,0.55); padding:7px 13px; border-radius:var(--radius); backdrop-filter:blur(6px);}

/* about */
.about{border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:rgba(20,20,23,0.55);}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.about-copy p{color:var(--fg-muted); margin-bottom:16px; font-size:1rem;}
.timeline{border-right:1px solid var(--line); padding-right:26px;}
.tl-item{position:relative; padding-bottom:30px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:""; position:absolute; right:-31px; top:4px; width:9px; height:9px; border-radius:50%; background:var(--accent);}
.tl-item b{font-family:'Cairo',sans-serif; display:block; color:var(--fg); margin-bottom:4px;}
.tl-item span{color:var(--fg-faint); font-size:0.88rem;}

/* blog */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.blog-card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color .2s ease, transform .2s ease;}
.blog-card:hover{border-color:var(--accent-dim); transform:translateY(-4px);}
.blog-card img{width:100%; aspect-ratio:16/10; object-fit:cover;}
.blog-card-body{padding:22px;}
.blog-cat{font-family:'Cairo',sans-serif; font-size:0.72rem; color:var(--accent); text-transform:uppercase; letter-spacing:0.08em;}
.blog-card h3{font-size:1.05rem; margin:10px 0 8px;}
.blog-card p{color:var(--fg-muted); font-size:0.9rem;}
.blog-filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.blog-filters a{font-family:'Cairo',sans-serif; font-size:0.82rem; padding:8px 16px; border-radius:20px; border:1px solid var(--line); color:var(--fg-muted);}
.blog-filters a.active, .blog-filters a:hover{background:var(--accent); color:#071019; border-color:var(--accent);}
.post-header{max-width:720px; margin:0 auto 40px;}
.post-header h1{font-size:clamp(1.8rem,4vw,2.6rem); margin:16px 0;}
.post-body{max-width:720px; margin:0 auto; color:var(--fg-muted); font-size:1.05rem; line-height:1.9;}
.post-body img{border-radius:var(--radius); margin:24px 0;}
.post-body p{margin-bottom:20px;}
.post-cover{width:100%; max-width:900px; margin:0 auto 40px; border-radius:var(--radius); aspect-ratio:16/9; object-fit:cover;}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
.field{margin-bottom:18px;}
.field label{display:block; font-size:0.85rem; color:var(--fg-muted); margin-bottom:8px; font-family:'Cairo',sans-serif; font-weight:600;}
.field input, .field textarea{width:100%; background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; color:var(--fg); font-family:'Tajawal',sans-serif; font-size:0.95rem; transition:border-color .2s ease;}
.field input:focus, .field textarea:focus{border-color:var(--accent); outline:none;}
.field textarea{resize:vertical; min-height:120px;}
.form-submit{font-family:'Cairo',sans-serif; font-weight:700; font-size:0.95rem; background:var(--accent); color:#071019; padding:15px 34px; border:none; border-radius:var(--radius); cursor:pointer; width:100%; transition:transform .18s ease;}
.form-submit:hover{transform:translateY(-2px);}
.form-note{margin-top:14px; font-size:0.88rem;}
.info-card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:34px;}
.info-row{display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line-soft);}
.info-row:last-of-type{border-bottom:none;}
.info-row svg{width:20px; height:20px; color:var(--accent); flex-shrink:0; margin-top:2px;}
.info-row b{display:block; font-family:'Cairo',sans-serif; font-size:0.9rem; margin-bottom:4px;}
.info-row span, .info-row a{color:var(--fg-muted); font-size:0.88rem; display:block;}
.info-row a:hover{color:var(--accent);}
.social-row{display:flex; gap:12px; margin-top:22px;}
.social-row a{width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color .2s ease, color .2s ease;}
.social-row a:hover{border-color:var(--accent); color:var(--accent);}
.social-row svg{width:16px; height:16px;}

footer{border-top:1px solid var(--line-soft); padding:40px 0;}
.footer-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;}
.footer-inner p{color:var(--fg-faint); font-size:0.85rem;}

@media (max-width:900px){
  .nav-links, .nav-cta{display:none;}
  .menu-toggle{display:block;}
  .hero-grid{grid-template-columns:1fr; gap:20px;}
  .hero-grid{display:flex; flex-direction:column-reverse;}
  .services-grid{grid-template-columns:1fr;}
  .phase-track{grid-template-columns:1fr 1fr; row-gap:36px;}
  .phase-track::before{display:none;}
  .portfolio-grid, .blog-grid{grid-template-columns:1fr 1fr;}
  .about-grid, .contact-grid{grid-template-columns:1fr; gap:44px;}
  .stats-row{grid-template-columns:1fr 1fr; row-gap:22px;}
  .timeline{border-right:none; padding-right:0; padding-top:18px; border-top:1px solid var(--line);}
  .tl-item::before{right:auto; left:0;}
}
@media (max-width:560px){
  .hero{padding:80px 0 60px;}
  .portfolio-grid, .blog-grid{grid-template-columns:1fr;}
  .btn-row{flex-direction:column;}
  .btn-row a{text-align:center;}
}

/* ---------- BILINGUAL / LTR SUPPORT ---------- */
body.lang-en{font-family:'Inter',sans-serif;}
body.lang-en h1, body.lang-en h2, body.lang-en h3, body.lang-en .display{font-family:'Inter',sans-serif; font-weight:800; letter-spacing:-0.02em;}
body.lang-en .eyebrow, body.lang-en .service-num, body.lang-en .phase-label, body.lang-en .blog-cat{font-family:'Inter',sans-serif; font-weight:700;}
body.lang-en .nav-cta, body.lang-en .btn-primary, body.lang-en .btn-secondary, body.lang-en .form-submit{font-family:'Inter',sans-serif; font-weight:700;}

.lang-switch{
  font-family:'Cairo',sans-serif; font-size:0.82rem; font-weight:600;
  color:var(--fg-muted); padding:8px 14px; border:1px solid var(--line); border-radius:20px;
  transition:border-color .2s ease, color .2s ease;
}
.lang-switch:hover{border-color:var(--accent); color:var(--accent);}

[dir="ltr"] .eyebrow::before{margin-left:0;}
[dir="ltr"] .timeline{border-right:none; border-left:1px solid var(--line); padding-right:0; padding-left:26px;}
[dir="ltr"] .tl-item::before{right:auto; left:-31px;}

@media (max-width:900px){
  [dir="ltr"] .timeline{border-left:none; padding-left:0; padding-top:18px; border-top:1px solid var(--line);}
  [dir="ltr"] .tl-item::before{left:auto; right:0;}
}