@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Tajawal:wght@400;500;700;800&display=swap');

:root{
  --deep:#04051a;
  --navy:#0a0e30;
  --blue:#2946e0;
  --violet:#7b5cf0;
  --lilac:#a78bfa;
  --white:#f5f6fc;
  --muted:#a9adca;
  --muted-2:#7a7fa3;
  --card:rgba(255,255,255,0.045);
  --card-hover:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.09);
  --grad-text: linear-gradient(95deg, #7fa1ff 0%, #a78bfa 55%, #d8b4fe 100%);
  --maxw: 1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background: var(--deep);
  color: var(--white);
  font-family:'Inter', sans-serif;
  line-height:1.65;
  overflow-x:hidden;
}
html[lang="ar"] body{ font-family:'Tajawal', sans-serif; }
.disp{ font-family:'Space Grotesk', sans-serif; letter-spacing:-0.02em; }
html[lang="ar"] .disp{ font-family:'Tajawal', sans-serif; font-weight:800; letter-spacing:0; }
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img{max-width:100%; display:block;}
.wrap{ max-width: var(--maxw); margin:0 auto; padding:0 28px; }
section{ position:relative; }

.bg-mesh{ position:fixed; inset:0; z-index:-2; background: var(--deep); }
.bg-mesh::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(600px 500px at 15% 10%, rgba(41,70,224,0.32), transparent 60%),
    radial-gradient(700px 600px at 85% 15%, rgba(123,92,240,0.28), transparent 60%),
    radial-gradient(800px 700px at 50% 95%, rgba(167,139,250,0.16), transparent 60%);
}
.grain{
  position:fixed; inset:0; z-index:-1; opacity:0.035; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Header */
header{ position:sticky; top:0; z-index:100; backdrop-filter: blur(14px); background: rgba(4,5,26,0.72); border-bottom:1px solid var(--border); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 28px; max-width:var(--maxw); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:34px; width:auto; border-radius:6px; }
.brand-text .name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; letter-spacing:0.02em; }
html[lang="ar"] .brand-text .name{ font-family:'Tajawal',sans-serif; }
.brand-text .tag{ font-size:10.5px; color:var(--muted-2); letter-spacing:0.03em; }
nav.links{ display:flex; gap:32px; }
nav.links a{ font-size:14px; color:var(--muted); font-weight:500; transition:color .2s; padding-bottom:4px; border-bottom:2px solid transparent; }
nav.links a:hover{ color:var(--white); }
nav.links a.active{ color:var(--white); border-color:var(--lilac); }
.nav-right{ display:flex; align-items:center; gap:14px; }
.lang-switch{
  display:flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:20px;
  padding:6px 14px; font-size:12.5px; font-weight:600; background:rgba(255,255,255,0.03);
  transition: background .2s, border-color .2s; white-space:nowrap;
}
.lang-switch:hover{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.2); }
.burger{ display:none; font-size:22px; cursor:pointer; background:none; border:none; color:var(--white); }
.mobile-menu{ display:none; flex-direction:column; gap:2px; background:rgba(4,5,26,0.98); border-top:1px solid var(--border); }
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding:16px 28px; font-size:15px; color:var(--muted); border-bottom:1px solid var(--border); }
.mobile-menu a.active{ color:var(--white); }
@media (max-width: 860px){ nav.links{ display:none; } .burger{ display:block; } }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:10px; font-weight:600; font-size:14.5px; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; cursor:pointer; border:1px solid transparent; }
.btn-primary{ background: linear-gradient(95deg, var(--blue), var(--violet)); color:#fff; box-shadow:0 8px 24px rgba(66,60,220,0.35); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(66,60,220,0.5); }
.btn-outline{ border-color: var(--border); color:var(--white); background:rgba(255,255,255,0.03); }
.btn-outline:hover{ background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.25); }
.btn-ghost{ color:var(--muted); font-weight:500; }
.btn-ghost:hover{ color:var(--white); }

/* Hero */
.hero{ padding:90px 0 70px; position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:50px; align-items:center; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--lilac); background:rgba(123,92,240,0.12); border:1px solid rgba(123,92,240,0.3); padding:6px 14px; border-radius:20px; margin-bottom:24px; }
html[lang="ar"] .eyebrow{ text-transform:none; letter-spacing:0; }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--lilac); }
.hero h1{ font-size:clamp(34px, 5.2vw, 60px); font-weight:700; line-height:1.08; margin-bottom:22px; }
html[lang="ar"] .hero h1{ font-weight:800; line-height:1.3; }
.hero h1 .grad{ background: var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead{ font-size:17px; color:var(--muted); margin-bottom:14px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.hero-art{ position:relative; }
.hero-art svg{ width:100%; height:auto; }

/* page hero (non-home) */
.page-hero{ padding:70px 0 50px; text-align:center; }
.page-hero .eyebrow{ margin-inline:auto; }
.page-hero h1{ font-size:clamp(32px,5vw,52px); font-weight:700; margin:18px auto 16px; max-width:780px; }
html[lang="ar"] .page-hero h1{ font-weight:800; }
.page-hero p{ color:var(--muted); font-size:16.5px; max-width:640px; margin:0 auto; }

/* Process stepper */
.process{ padding:50px 0 20px; }
.process-title{ text-align:center; color:var(--muted); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:36px; }
html[lang="ar"] .process-title{ text-transform:none; letter-spacing:0; }
.steps{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.step{ flex:1; min-width:105px; text-align:center; position:relative; padding:0 6px; }
.step-icon{ width:52px; height:52px; border-radius:14px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(41,70,224,0.25), rgba(123,92,240,0.25)); border:1px solid rgba(255,255,255,0.12); }
.step-icon svg{ width:24px; height:24px; stroke:var(--lilac); }
.step-label{ font-weight:600; font-size:14px; }
.step-arrow{ position:absolute; top:26px; inset-inline-end:-14px; color:var(--muted-2); font-size:18px; }
.step:last-child .step-arrow{ display:none; }
@media (max-width:760px){ .step-arrow{ display:none; } .steps{ justify-content:center; } }

/* Sections */
.section{ padding:90px 0; border-top:1px solid var(--border); }
.section-head{ max-width:680px; margin-bottom:48px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.kicker{ font-size:12.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--lilac); margin-bottom:14px; display:block; }
html[lang="ar"] .kicker{ text-transform:none; letter-spacing:0; }
.section-head h2{ font-size:clamp(26px,3.6vw,40px); font-weight:700; margin-bottom:16px; }
html[lang="ar"] .section-head h2{ font-weight:800; }
.section-head p{ color:var(--muted); font-size:16px; }

/* image + text feature */
.feature{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:50px; align-items:center; }
.feature.rev{ direction:ltr; }
.feature.rev > *:first-child{ order:2; }
html[lang="ar"] .feature.rev{ direction:rtl; }
html[lang="ar"] .feature.rev > *:first-child{ order:0; }
@media (max-width:860px){ .feature, .feature.rev{ grid-template-columns:1fr; direction:inherit; } .feature.rev > *:first-child{ order:0; } }
.art-frame{ border-radius:22px; overflow:hidden; border:1px solid var(--border); background: linear-gradient(160deg, rgba(41,70,224,0.16), rgba(123,92,240,0.10)); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; padding:30px; }
.art-frame svg{ width:100%; height:100%; }

/* about lists */
.about-list{ display:grid; gap:14px; margin-top:6px; }
.about-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--muted); font-size:15px; }
.about-list li::before{ content:''; width:6px; height:6px; margin-top:9px; border-radius:50%; background: var(--lilac); flex-shrink:0; }
.philosophy{ display:grid; gap:10px; margin-top:22px; }
.philosophy .line{ padding:14px 18px; border-inline-start:2px solid var(--violet); background:var(--card); border-radius:0 10px 10px 0; font-weight:500; font-size:15px; }
html[lang="ar"] .philosophy .line{ border-inline-start:none; border-inline-end:2px solid var(--violet); border-radius:10px 0 0 10px; }
.mv-cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px; }
@media (max-width:700px){ .mv-cards{ grid-template-columns:1fr; } }
.mv-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:26px; }
.mv-card h3{ font-family:'Space Grotesk',sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:0.08em; color:var(--lilac); margin-bottom:10px; }
html[lang="ar"] .mv-card h3{ font-family:'Tajawal',sans-serif; text-transform:none; letter-spacing:0; }
.mv-card p{ color:var(--muted); font-size:15px; }
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; }
@media (max-width:700px){ .stat-row{ grid-template-columns:1fr; } }
.stat{ text-align:center; padding:26px 16px; background:var(--card); border:1px solid var(--border); border-radius:16px; }
.stat .num{ font-family:'Space Grotesk',sans-serif; font-size:32px; font-weight:700; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
html[lang="ar"] .stat .num{ font-family:'Tajawal',sans-serif; }
.stat .lbl{ color:var(--muted); font-size:13.5px; margin-top:6px; }

/* services grid */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .services-grid{ grid-template-columns:1fr; } }
.svc-card{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:28px; transition: transform .25s, background .25s, border-color .25s; }
.svc-card:hover{ transform:translateY(-4px); background:var(--card-hover); border-color:rgba(255,255,255,0.18); }
.svc-num{ font-family:'Space Grotesk',sans-serif; font-size:13px; color:var(--muted-2); margin-bottom:18px; }
.svc-icon{ width:44px; height:44px; border-radius:12px; margin-bottom:18px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(41,70,224,0.3), rgba(123,92,240,0.3)); }
.svc-icon svg{ width:22px; height:22px; stroke:#fff; }
.svc-card h3{ font-size:17px; font-weight:600; margin-bottom:10px; }
.svc-card p{ color:var(--muted); font-size:14.5px; }
.svc-card a.more{ display:inline-block; margin-top:14px; font-size:13.5px; font-weight:600; color:var(--lilac); }

/* detail block used on services page */
.detail{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:50px; align-items:center; }
.detail.rev{ direction: ltr; }
.detail.rev > *:first-child{ order:2; }
html[lang="ar"] .detail.rev{ direction: rtl; }
html[lang="ar"] .detail.rev > *:first-child{ order:0; }
@media (max-width:860px){ .detail, .detail.rev{ grid-template-columns:1fr; direction:inherit; } .detail.rev > *:first-child{ order:0; } }
.detail h3{ font-size:clamp(22px,2.8vw,30px); font-weight:700; margin-bottom:14px; }
html[lang="ar"] .detail h3{ font-weight:800; }
.detail .statement{ font-size:16.5px; color:var(--white); font-weight:500; margin-bottom:12px; }
.detail p.copy{ color:var(--muted); margin-bottom:12px; font-size:15px; }
.tag-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.tag-list span{ font-size:13px; padding:7px 14px; border-radius:20px; background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--muted); }
.flow-mini{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:16px 0; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; color:var(--lilac); }
html[lang="ar"] .flow-mini{ font-family:'Tajawal',sans-serif; }
.flow-mini .arrow{ color:var(--muted-2); }

/* contact */
.contact-wrap{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:50px; align-items:start; }
@media (max-width:860px){ .contact-wrap{ grid-template-columns:1fr; } }
.contact-card{ background:var(--card); border:1px solid var(--border); border-radius:22px; padding:36px; }
.contact-row{ display:flex; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--border); }
.contact-row:last-child{ border-bottom:none; }
.contact-row .ic{ width:42px; height:42px; border-radius:10px; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-row .ic svg{ width:20px; height:20px; stroke:var(--lilac); }
.contact-row .label{ font-size:12.5px; color:var(--muted-2); margin-bottom:3px; }
.contact-row .value{ font-weight:600; font-size:15.5px; }
.contact-row .value a:hover{ color:var(--lilac); }
.form-card{ background:var(--card); border:1px solid var(--border); border-radius:22px; padding:36px; margin-top:24px; }
.form-card .frow{ display:grid; gap:8px; margin-bottom:18px; }
.form-card label{ font-size:13px; color:var(--muted); }
.form-card input, .form-card textarea{
  background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; color:var(--white); font-family:inherit; font-size:14.5px; resize:vertical;
}
.form-card input:focus, .form-card textarea:focus{ outline:2px solid var(--violet); outline-offset:1px; }

footer{ padding:44px 0; border-top:1px solid var(--border); }
.foot-wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.foot-brand{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; }
html[lang="ar"] .foot-brand{ font-family:'Tajawal',sans-serif; }
.foot-copy{ color:var(--muted-2); font-size:13.5px; }
.foot-links{ display:flex; gap:22px; }
.foot-links a{ color:var(--muted); font-size:14px; }
.foot-links a:hover{ color:var(--white); }

.final-cta{ text-align:center; padding:90px 0; }
.final-cta .disp{ font-size:clamp(28px,4.5vw,44px); font-weight:700; margin-bottom:18px; }
html[lang="ar"] .final-cta .disp{ font-weight:800; }
.final-cta p{ color:var(--muted); font-size:16.5px; max-width:560px; margin:0 auto 30px; }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
::selection{ background: var(--violet); color:#fff; }