@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');
:root{
 --ink:#17056e;--violet:#2811c9;--purple:#7c50ff;--lav:#b999ff;--bg:#f8f8fc;
 --muted:#6f678d;--line:#e8e6f1;--white:#fff;--shadow:0 28px 70px rgba(35,12,112,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:#1b1740;font-family:"Cairo",Tahoma,sans-serif;direction:rtl;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:min(1220px,92vw);margin:auto}
.section{position:relative;padding:105px 0;overflow:hidden}
.white{background:#fff}
.soft{background:linear-gradient(180deg,#fbfbff 0%,#f7f7fc 100%)}
.section-head{text-align:center;max-width:780px;margin:0 auto 54px}
.kicker{display:inline-flex;align-items:center;gap:8px;color:#6b55a8;font-weight:800;margin-bottom:10px}
.section-head h2,.copy h2{margin:0;color:var(--ink);font-weight:900;line-height:1.18;font-size:clamp(34px,4.1vw,60px)}
.section-head p,.copy p{color:var(--muted);line-height:2;font-size:17px}

/* HERO: use original captured composition exactly, then enhance around it */
.hero{position:relative;min-height:760px;background:#123a59;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:heroZoom 16s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,transparent 22%,rgba(4,0,28,.18) 100%);pointer-events:none}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.045)}}
.hero-links{position:absolute;inset:0;z-index:4;pointer-events:none}
.hero-links a{pointer-events:auto;position:absolute;border-radius:40px}
.hero-links .home{right:35%;top:1%;width:6%;height:7%}.hero-links .about{right:40.7%;top:1%;width:6.8%;height:7%}.hero-links .services{right:47.3%;top:1%;width:7%;height:7%}.hero-links .projects{right:54%;top:1%;width:6.7%;height:7%}.hero-links .pricing{right:60.7%;top:1%;width:6.5%;height:7%}.hero-links .contact{right:67%;top:1%;width:8%;height:7%}
.hero-links .primary{right:49.1%;top:69.2%;width:8.4%;height:6%}.hero-links .secondary{right:57.5%;top:69.2%;width:7%;height:6%}
.hero-orb{position:absolute;z-index:3;display:grid;place-items:center;width:70px;height:70px;border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.32),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.35);box-shadow:0 16px 50px rgba(46,22,122,.35), inset 0 1px 1px rgba(255,255,255,.7);backdrop-filter:blur(12px);font-size:34px;filter:drop-shadow(0 10px 15px rgba(0,0,0,.22));animation:floaty 4.8s ease-in-out infinite}
.hero-orb.one{left:5.5%;top:18%}.hero-orb.two{right:6.5%;top:27%;animation-delay:-1.5s}.hero-orb.three{left:9%;bottom:10%;animation-delay:-2.3s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-16px) rotate(6deg)}}
.sparkle{position:absolute;width:52px;opacity:.65;animation:twinkle 3s ease-in-out infinite}
.sparkle.s1{left:15%;top:12%}.sparkle.s2{right:14%;bottom:14%;animation-delay:-1s}
@keyframes twinkle{0%,100%{transform:scale(.75) rotate(0);opacity:.32}50%{transform:scale(1.15) rotate(14deg);opacity:.92}}

/* shared */
.reveal{opacity:0;transform:translateY(45px) scale(.985);transition:opacity .8s cubic-bezier(.2,.65,.2,1),transform .8s cubic-bezier(.2,.65,.2,1)}
.reveal.show{opacity:1;transform:none}
.reveal.delay1{transition-delay:.12s}.reveal.delay2{transition-delay:.24s}.reveal.delay3{transition-delay:.36s}
.emoji3d{display:grid;place-items:center;width:76px;height:76px;border-radius:24px;font-size:39px;background:linear-gradient(145deg,#fff,#eeeaff);box-shadow:14px 18px 38px rgba(45,20,125,.18),inset -8px -8px 18px rgba(82,37,225,.08),inset 6px 6px 12px rgba(255,255,255,.9);transform:perspective(500px) rotateX(8deg) rotateY(-9deg);transition:.35s}
.emoji3d:hover{transform:perspective(500px) rotateX(-6deg) rotateY(9deg) translateY(-7px) scale(1.05)}
.badge3d{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.92);border:1px solid rgba(119,88,255,.16);box-shadow:var(--shadow);backdrop-filter:blur(12px);padding:10px 16px;border-radius:18px;color:var(--ink);font-weight:800}

/* feature cards */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.feature{position:relative;text-align:center;perspective:1100px}
.feature .frame{position:relative;border-radius:25px;overflow:hidden;box-shadow:0 18px 45px rgba(31,11,109,.10);transform-style:preserve-3d;transition:.5s cubic-bezier(.2,.8,.2,1)}
.feature img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .7s ease,filter .5s}
.feature .shine{position:absolute;inset:-80% -70%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.45) 50%,transparent 58%);transform:translateX(-35%) rotate(8deg);transition:.85s}
.feature:hover .frame{transform:translateY(-12px) rotateX(2deg) rotateY(-2deg);box-shadow:0 34px 70px rgba(45,17,133,.18)}
.feature:hover img{transform:scale(1.075);filter:saturate(1.08) contrast(1.03)}
.feature:hover .shine{transform:translateX(55%) rotate(8deg)}
.feature h3{color:var(--ink);font-size:20px;margin:18px 0 0}
.feature .mini3d{position:absolute;left:14px;top:14px;width:54px;height:54px;font-size:27px;border-radius:17px}

/* stats */
.stats-wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.stat{position:relative;background:linear-gradient(145deg,#fff,#fbfaff);border:1px solid var(--line);border-radius:24px;min-height:142px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 14px 35px rgba(35,13,112,.07);overflow:hidden;transition:.35s}
.stat::before{content:"";position:absolute;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,#a588ff 0%,rgba(165,136,255,0) 70%);opacity:.12;top:-36px;right:-20px}
.stat:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 24px 50px rgba(38,16,127,.14)}
.stat strong{font-size:58px;color:#2700aa;line-height:1}.stat span{margin-top:12px;color:#5e5587}
.copy .small{color:#5a499a;font-weight:800;margin-bottom:12px}

/* city */
.city-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:75px;align-items:center}
.city-media{position:relative;perspective:1200px}
.city-card{border-radius:30px;overflow:hidden;box-shadow:var(--shadow);transition:.55s;transform-style:preserve-3d}
.city-card img{width:100%;min-height:475px;object-fit:cover;transition:.7s}
.city-media:hover .city-card{transform:translateY(-10px) rotateY(2deg) rotateX(1deg)}
.city-media:hover img{transform:scale(1.045)}
.screen-size{right:18px;bottom:-20px;background:linear-gradient(135deg,#3000c4,#4f18e8);color:#fff;border:none}
.button{display:inline-flex;align-items:center;gap:10px;padding:13px 25px;border-radius:999px;border:1px solid #d7d4e7;font-weight:800;transition:.3s}
.button:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(43,14,141,.13)}
.button.primary{background:linear-gradient(135deg,#2810c7,#3a00b8);color:#fff;border:0;box-shadow:0 13px 28px rgba(45,0,180,.22)}

/* map */
.map-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}
.map-card{position:relative;background:#fff;border-radius:36px;padding:8px;box-shadow:0 28px 75px rgba(31,12,116,.08);overflow:hidden}
.map-card img{width:100%;height:430px;object-fit:cover;border-radius:30px;transition:.7s}
.map-card:hover img{transform:scale(1.035)}
.map-pin{position:absolute;width:22px;height:22px;background:#4424db;border:5px solid #fff;border-radius:50%;box-shadow:0 7px 18px rgba(38,10,139,.3);animation:pulse 2.2s infinite}
.map-pin.p1{right:25%;top:25%}.map-pin.p2{right:38%;top:50%;animation-delay:-.6s}.map-pin.p3{right:60%;top:34%;animation-delay:-1.2s}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(71,37,219,.25)}50%{transform:scale(1.18);box-shadow:0 0 0 14px rgba(71,37,219,0)}}

/* locations */
.locations{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.loc{position:relative;border-radius:28px;overflow:hidden;box-shadow:0 18px 40px rgba(30,12,107,.07);min-height:330px}
.loc img{width:100%;height:100%;min-height:330px;object-fit:cover;transition:.75s cubic-bezier(.2,.75,.2,1)}
.loc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(17,6,71,.18) 100%);opacity:.4;transition:.4s}
.loc .cap{position:absolute;z-index:3;right:18px;left:18px;bottom:18px;background:rgba(255,255,255,.91);backdrop-filter:blur(14px);padding:16px 18px;border-radius:18px;text-align:center;color:var(--ink);font-weight:800;transition:.45s}
.loc:hover img{transform:scale(1.075)}
.loc:hover .cap{transform:translateY(-7px);background:#fff;box-shadow:0 18px 40px rgba(20,3,96,.16)}
.loc:hover::after{opacity:.8}
.center{text-align:center;margin-top:38px}

/* strip */
.strip{padding:38px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fbfbff}
.strip h3{text-align:center;color:var(--ink)}
.strip-row{display:flex;justify-content:center;gap:36px;flex-wrap:wrap;color:#574b92;font-weight:700}
.strip-row span{display:flex;align-items:center;gap:8px}.dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(145deg,#8c72ff,#3420b5);box-shadow:0 0 0 5px rgba(95,71,220,.08)}

/* values */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.value{background:#fff;border:1px solid var(--line);border-radius:28px;padding:34px;text-align:center;box-shadow:0 15px 40px rgba(35,13,112,.05);transition:.4s}
.value:hover{transform:translateY(-10px);box-shadow:0 30px 65px rgba(37,12,126,.12)}
.value .emoji3d{margin:0 auto 22px}
.value h3{font-size:22px;color:var(--ink);margin:8px 0}
.value p{color:#3b2e80;line-height:1.65;font-weight:700}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:start}
.form{background:#fff;border:1px solid var(--line);border-radius:30px;padding:30px;box-shadow:var(--shadow)}
.form h3{color:var(--ink);font-size:27px;margin:0 0 18px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,textarea{width:100%;font:inherit;border:1px solid #dcd9e9;background:#fff;border-radius:12px;padding:13px 14px;outline:0;transition:.25s}
input:focus,textarea:focus{border-color:#7d64ef;box-shadow:0 0 0 4px rgba(102,72,222,.08)}
textarea{grid-column:1/-1;min-height:100px;resize:vertical}
.form .button{width:100%;justify-content:center;margin-top:12px}
.checks{display:grid;gap:12px;margin-top:24px}.checks span{font-weight:700;color:var(--ink)}.checks span::before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#2c0abd;color:#fff;margin-left:9px;font-size:12px}

/* footer */
.footer{background:#fff;border-radius:60px 60px 0 0;padding:74px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.25fr .8fr .8fr .8fr;gap:48px}
.footer img{width:185px}.footer p{color:#6a6387;line-height:1.9}
.footer h4{color:var(--ink)}.footer a{display:block;color:#5e5488;margin:9px 0;transition:.25s}.footer a:hover{color:#2e0bbd;transform:translateX(-4px)}
.copyright{text-align:center;border-top:1px solid var(--line);margin-top:28px;padding-top:25px;color:#9690ab}

/* desktop top nav for internal pages */
.inner-nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.91);backdrop-filter:blur(16px);border-bottom:1px solid rgba(226,223,238,.8)}
.inner-nav .row{height:76px;display:flex;align-items:center;justify-content:space-between}
.inner-nav img{width:130px}.inner-nav nav{display:flex;gap:28px;color:var(--ink);font-weight:800}.inner-nav nav a:hover{color:#6a43e8}
.page-hero{padding:105px 0 80px;background:radial-gradient(circle at 70% 10%,#8b68ff 0,#4920db 25%,#18036d 75%);color:#fff;position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(42px,5vw,70px);margin:0}.page-hero p{font-size:18px;max-width:760px;line-height:2;color:#e8e2ff}
.page-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.page-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:0 18px 42px rgba(35,13,112,.06)}

@media(max-width:950px){
 .hero{min-height:0}.hero-bg{position:relative;height:auto;animation:none}.hero-orb,.sparkle{display:none}
 .hero-links .home,.hero-links .about,.hero-links .services,.hero-links .projects,.hero-links .pricing,.hero-links .contact{display:none}
 .features,.values,.stats-wrap,.city-grid,.map-grid,.contact-grid{grid-template-columns:1fr}
 .stats-wrap{gap:45px}.city-grid,.map-grid{gap:45px}.locations{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.inner-nav nav{display:none}
}
@media(max-width:620px){
 .section{padding:75px 0}.features{gap:20px}.stats{grid-template-columns:1fr 1fr}.stat strong{font-size:44px}.city-card img{min-height:340px}.map-card img{height:330px}.fields{grid-template-columns:1fr}textarea{grid-column:auto}.footer-grid{grid-template-columns:1fr}.section-head h2,.copy h2{font-size:34px}.page-cards{grid-template-columns:1fr}
}