/* ═══════════════════════════════════════════════════════════ NXT LTS — Master Stylesheet v3 One CSS file rules both EN and AR — no theme difference ═══════════════════════════════════════════════════════════ */ /* ── FONTS ── */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;700;800&display=swap'); /* ── DESIGN TOKENS ── */ :root { --bg: #050810; --bg2: #0a0f1e; --bg3: #0f1628; --bg4: #141d35; --purple: #6d28d9; --purple2: #a855f7; --purple3: #c084fc; --cyan: #22d3ee; --cyan2: #67e8f9; --green: #10b981; --text: #f0f4ff; --muted: #8b9fc0; --dim: #4a5a7a; --border: rgba(124,58,237,0.16); --border2: rgba(255,255,255,0.06); --glow: rgba(124,58,237,0.4); --r: 16px; --r2: 24px; --ease-bounce: cubic-bezier(0.34,1.56,0.64,1); --ease-smooth: cubic-bezier(0.4,0,0.2,1); --ease-out: cubic-bezier(0,0,0.2,1); } /* ── RESET ── */ *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } img { display:block; max-width:100%; } a { color:inherit; text-decoration:none; } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width:5px; } ::-webkit-scrollbar-track { background:var(--bg); } ::-webkit-scrollbar-thumb { background:linear-gradient(var(--purple),var(--cyan)); border-radius:3px; } /* ── BASE BODY — EN ── */ body { background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; font-size:15px; font-weight:300; line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* ── BASE BODY — AR (html[lang=ar] set on tag) ── */ [lang="ar"] body, html[dir="rtl"] body, body[data-ar="1"] { font-family:'IBM Plex Sans Arabic','Noto Sans Arabic',sans-serif !important; direction:rtl !important; background:var(--bg) !important; color:var(--text) !important; line-height:1.7 !important; letter-spacing:0 !important; } /* ── HEADINGS — EN ── */ h1,h2,h3,h4,h5 { font-family:'Syne',sans-serif; line-height:1.08; letter-spacing:-0.03em; color:var(--text); } /* ── HEADINGS — AR ── */ [lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] h4,[lang="ar"] h5, html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,html[dir="rtl"] h5, [data-ar="1"] h1,[data-ar="1"] h2,[data-ar="1"] h3,[data-ar="1"] h4,[data-ar="1"] h5 { font-family:'IBM Plex Sans Arabic','Noto Sans Arabic',sans-serif !important; letter-spacing:0 !important; line-height:1.3 !important; } /* ── ANIMATIONS ── */ @keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } @keyframes slideRight{ from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} } @keyframes orbFloat { 0%,100%{transform:translate(0,0)scale(1)} 33%{transform:translate(28px,-18px)scale(1.04)} 66%{transform:translate(-18px,14px)scale(0.97)} } @keyframes carouselScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } @keyframes badgePulse{ 0%,100%{box-shadow:0 0 0 0 rgba(168,85,247,0.4)} 50%{box-shadow:0 0 0 6px rgba(168,85,247,0)} } @keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes shimmer { from{transform:translateX(-100%)} to{transform:translateX(100%)} } /* ── SCROLL REVEAL ── */ .reveal { opacity:0; transform:translateY(28px); transition:opacity 0.7s var(--ease-out),transform 0.7s var(--ease-out); } .reveal-left { opacity:0; transform:translateX(-28px); transition:opacity 0.7s var(--ease-out),transform 0.7s var(--ease-out); } .reveal-right{ opacity:0; transform:translateX(28px); transition:opacity 0.7s var(--ease-out),transform 0.7s var(--ease-out); } .reveal.visible,.reveal-left.visible,.reveal-right.visible { opacity:1; transform:translate(0); } /* ── NAVIGATION ── */ .nav { position:fixed; top:0; left:0; right:0; z-index:200; display:flex; align-items:center; justify-content:space-between; padding:18px 60px; background:rgba(5,8,16,0.72); backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%); border-bottom:1px solid var(--border); transition:padding 0.4s var(--ease-smooth), background 0.4s; } .nav.scrolled { padding:11px 60px; background:rgba(5,8,16,0.97); border-bottom-color:rgba(124,58,237,0.28); } .nav-brand { display:flex; align-items:center; gap:12px; } .nav-brand img { height:40px; width:auto; transition:transform 0.3s var(--ease-bounce), filter 0.3s; filter:drop-shadow(0 0 10px rgba(168,85,247,0.3)); } .nav-brand img:hover { transform:scale(1.06); filter:drop-shadow(0 0 18px rgba(168,85,247,0.6)); } .nav-links { display:flex; gap:34px; list-style:none; } .nav-links a { color:var(--muted); font-size:13.5px; font-weight:500; letter-spacing:0.04em; transition:color 0.25s; position:relative; padding-bottom:4px; } .nav-links a::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1.5px; background:linear-gradient(90deg,var(--purple2),var(--cyan)); transform:scaleX(0); transform-origin:left; transition:transform 0.3s var(--ease-out); border-radius:2px; } .nav-links a:hover { color:var(--text); } .nav-links a:hover::after,.nav-links a.active::after { transform:scaleX(1); } .nav-actions { display:flex; align-items:center; gap:10px; } .lang-btn { background:rgba(255,255,255,0.05); border:1px solid var(--border2); color:var(--text); padding:8px 16px; border-radius:10px; font-size:12.5px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all 0.25s; font-family:inherit; } .lang-btn:hover { background:rgba(124,58,237,0.15); border-color:var(--purple2); transform:translateY(-1px); } .btn-nav { background:linear-gradient(135deg,var(--purple),var(--purple2)); color:white; padding:10px 22px; border-radius:10px; font-size:13.5px; font-weight:700; font-family:'Syne',sans-serif; transition:transform 0.25s var(--ease-bounce),box-shadow 0.25s; box-shadow:0 0 22px rgba(124,58,237,0.3); letter-spacing:0.02em; display:inline-block; } .btn-nav:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(124,58,237,0.5); } [lang="ar"] .btn-nav,[dir="rtl"] .btn-nav { font-family:'IBM Plex Sans Arabic',sans-serif; } /* Dropdown (Arabic nav) */ .dropdown { position:relative; } .dropdown-menu { display:none; position:absolute; top:calc(100% + 8px); background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); min-width:220px; list-style:none; box-shadow:0 16px 48px rgba(0,0,0,0.4); overflow:hidden; animation:fadeUp 0.2s var(--ease-out); } .dropdown:hover .dropdown-menu { display:block; } .dropdown-menu li a { display:block; padding:11px 18px; font-size:14px; color:var(--muted); transition:color 0.2s, background 0.2s; } .dropdown-menu li a:hover { color:var(--text); background:rgba(124,58,237,0.1); } /* RTL nav adjustments */ html[dir="rtl"] .nav-links { flex-direction:row-reverse; } html[dir="rtl"] .dropdown-menu { right:0; left:auto; } html[dir="rtl"] .footer { direction:rtl; } html[dir="rtl"] .footer-bottom { direction:rtl; } /* ── BUTTONS ── */ .btn-primary { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--purple),var(--purple2) 60%,#9333ea); background-size:200% 200%; color:white; padding:15px 30px; border-radius:12px; font-weight:700; font-size:15px; font-family:'Syne',sans-serif; transition:transform 0.3s var(--ease-bounce),box-shadow 0.3s,background-position 0.5s; box-shadow:0 0 28px rgba(124,58,237,0.35); letter-spacing:0.02em; position:relative; overflow:hidden; border:none; cursor:pointer; } .btn-primary::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent); opacity:0; transition:opacity 0.3s; } .btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 48px rgba(124,58,237,0.55); background-position:right center; } .btn-primary:hover::before { opacity:1; } [lang="ar"] .btn-primary,[dir="rtl"] .btn-primary { font-family:'IBM Plex Sans Arabic','Noto Sans Arabic',sans-serif; } .btn-outline { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.03); color:var(--text); padding:15px 30px; border-radius:12px; font-weight:600; font-size:15px; border:1px solid rgba(255,255,255,0.14); font-family:'Syne',sans-serif; transition:all 0.3s var(--ease-smooth); letter-spacing:0.02em; backdrop-filter:blur(8px); } .btn-outline:hover { border-color:var(--purple2); background:rgba(124,58,237,0.1); transform:translateY(-2px); box-shadow:0 8px 24px rgba(124,58,237,0.2); } [lang="ar"] .btn-outline,[dir="rtl"] .btn-outline { font-family:'IBM Plex Sans Arabic','Noto Sans Arabic',sans-serif; } .btn-ghost { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:15px; font-weight:600; font-family:'Syne',sans-serif; padding:15px 24px; border-radius:12px; transition:color 0.25s,gap 0.3s var(--ease-bounce); letter-spacing:0.02em; } .btn-ghost::after { content:'→'; transition:transform 0.25s var(--ease-bounce); } .btn-ghost:hover { color:var(--text); gap:14px; } .btn-ghost:hover::after { transform:translateX(4px); } [lang="ar"] .btn-ghost,[dir="rtl"] .btn-ghost { font-family:'IBM Plex Sans Arabic','Noto Sans Arabic',sans-serif; } /* .btn — generic fallback used in some AR pages */ .btn { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--purple),var(--purple2)); color:white; padding:14px 28px; border-radius:12px; font-weight:700; transition:transform 0.3s var(--ease-bounce), box-shadow 0.3s; box-shadow:0 0 24px rgba(124,58,237,0.3); font-family:inherit; } .btn:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(124,58,237,0.5); } [lang="ar"] .btn,[dir="rtl"] .btn { font-family:'IBM Plex Sans Arabic','Noto Sans Arabic',sans-serif; } /* ── BADGE ── */ .badge { display:inline-flex; align-items:center; gap:8px; background:rgba(168,85,247,0.1); border:1px solid rgba(168,85,247,0.25); padding:6px 14px; border-radius:100px; font-size:11.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--purple3); } .badge-dot { width:6px; height:6px; border-radius:50%; background:var(--purple2); display:inline-block; animation:badgePulse 2s ease infinite; } /* ── SECTION ── */ .section { padding:100px 60px; } .section-label { font-size:11px; font-weight:800; letter-spacing:0.2em; text-transform:uppercase; color:var(--purple3); margin-bottom:14px; display:flex; align-items:center; gap:10px; } .section-label::before { content:''; display:inline-block; width:22px; height:1.5px; background:linear-gradient(90deg,var(--purple2),var(--cyan)); border-radius:2px; } [lang="ar"] .section-label,[dir="rtl"] .section-label { flex-direction:row-reverse; justify-content:flex-end; } [lang="ar"] .section-label::before,[dir="rtl"] .section-label::before { display:none; } [lang="ar"] .section-label::after,[dir="rtl"] .section-label::after { content:''; display:inline-block; width:22px; height:1.5px; background:linear-gradient(270deg,var(--purple2),var(--cyan)); border-radius:2px; } .section-title { font-size:clamp(28px,3vw,48px); font-weight:800; letter-spacing:-0.03em; margin-bottom:18px; line-height:1.06; color:var(--text); } [lang="ar"] .section-title,[dir="rtl"] .section-title { letter-spacing:0 !important; line-height:1.3 !important; } .section-sub { font-size:17px; color:var(--muted); max-width:560px; line-height:1.85; margin-bottom:64px; font-weight:300; } .text-gradient { background:linear-gradient(135deg,#fff 15%,var(--purple3) 45%,var(--cyan)); background-size:200% 200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:gradientShift 6s ease infinite; } /* ── CONTAINER ── */ .container { width:100%; max-width:1400px; margin:0 auto; padding:0 60px; } /* ── HERO ── */ .hero { min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; padding-top:80px; } .bg-orb { position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none; } .bg-orb.one { width:700px; height:700px; background:radial-gradient(circle,rgba(109,40,217,0.22) 0%,transparent 70%); top:-200px; left:-200px; animation:orbFloat 18s ease-in-out infinite; } .bg-orb.two { width:500px; height:500px; background:radial-gradient(circle,rgba(34,211,238,0.12) 0%,transparent 70%); bottom:-100px; right:-100px; animation:orbFloat 22s ease-in-out infinite reverse; } .hero-grid-lines { position:absolute; inset:0; background-image:linear-gradient(rgba(124,58,237,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,0.04) 1px,transparent 1px); background-size:80px 80px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent); -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent); pointer-events:none; } .hero-content { max-width:760px; position:relative; z-index:1; } .hero-eyebrow { font-size:11px; font-weight:800; letter-spacing:0.25em; text-transform:uppercase; color:var(--purple3); margin-bottom:24px; display:flex; align-items:center; gap:12px; animation:fadeUp 0.8s var(--ease-out) 0.1s both; } .hero-eyebrow::before { content:''; display:inline-block; width:36px; height:1.5px; background:linear-gradient(90deg,var(--purple2),var(--cyan)); } .hero h1 { font-size:clamp(42px,5.5vw,80px); font-weight:800; line-height:1.02; letter-spacing:-0.04em; margin-bottom:28px; animation:fadeUp 0.8s var(--ease-out) 0.2s both; } .hero h1 em { font-style:normal; background:linear-gradient(135deg,var(--purple3),var(--cyan2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .hero-sub { font-size:18px; color:var(--muted); line-height:1.85; max-width:560px; margin-bottom:44px; font-weight:300; animation:fadeUp 0.8s var(--ease-out) 0.35s both; } .hero-actions { display:flex; gap:14px; flex-wrap:wrap; animation:fadeUp 0.8s var(--ease-out) 0.5s both; } .hero-stats { display:flex; gap:48px; margin-top:64px; animation:fadeUp 0.8s var(--ease-out) 0.65s both; } .stat-item { display:flex; flex-direction:column; gap:4px; } .stat-num { font-family:'Syne',sans-serif; font-size:36px; font-weight:800; letter-spacing:-0.04em; background:linear-gradient(135deg,var(--purple3),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .stat-desc { font-size:12px; color:var(--dim); font-weight:500; letter-spacing:0.05em; text-transform:uppercase; } .hero-shapes { position:absolute; inset:0; pointer-events:none; overflow:hidden; } .shape { position:absolute; border-radius:50%; border:1px solid; opacity:0.06; } .shape-1 { width:600px; height:600px; border-color:var(--purple2); top:-200px; right:-100px; animation:orbFloat 25s ease-in-out infinite; } .shape-2 { width:300px; height:300px; border-color:var(--cyan); bottom:100px; right:200px; animation:orbFloat 18s ease-in-out infinite reverse; opacity:0.08; } .shape-3 { width:150px; height:150px; border-color:var(--purple3); top:200px; right:400px; animation:orbFloat 12s ease-in-out infinite; opacity:0.12; } .shape-4,.shape-5 { display:none; } /* Arabic hero */ [lang="ar"] .hero-content,[dir="rtl"] .hero-content { text-align:right; } [lang="ar"] .hero-eyebrow,[dir="rtl"] .hero-eyebrow { flex-direction:row-reverse; justify-content:flex-end; } [lang="ar"] .hero-eyebrow::before,[dir="rtl"] .hero-eyebrow::before { display:none; } [lang="ar"] .hero-actions,[dir="rtl"] .hero-actions { justify-content:flex-start; } [lang="ar"] .hero-image,[dir="rtl"] .hero-image { order:-1; } /* AR hero section specific (ar/index.html uses .hero with .hero-content + .hero-image) */ html[dir="rtl"] .hero { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; min-height:60vh; padding:140px 60px 80px; } html[dir="rtl"] .hero-content h1 { font-size:clamp(36px,4.5vw,64px); } html[dir="rtl"] .hero-image { border-radius:var(--r2); overflow:hidden; border:1px solid var(--border); box-shadow:0 0 60px rgba(124,58,237,0.2); } /* ── SERVICES GRID (static fallback) ── */ .services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px; } /* ── SERVICES CAROUSEL ── */ .services-carousel-wrapper { position:relative; overflow:hidden; margin:0 -60px; padding:8px 0 32px; mask-image:linear-gradient(90deg,transparent,black 7%,black 93%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,black 7%,black 93%,transparent); } .services-carousel { display:flex; gap:24px; width:max-content; animation:carouselScroll 38s linear infinite; will-change:transform; } /* ── SERVICE CARD ── */ .svc-card { display:flex; flex-direction:column; background:linear-gradient(145deg,var(--bg2),var(--bg3)); border:1px solid var(--border); border-radius:var(--r2); overflow:hidden; cursor:pointer; position:relative; transition:transform 0.4s var(--ease-bounce),box-shadow 0.4s,border-color 0.4s; text-decoration:none; } .svc-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(124,58,237,0.06),rgba(34,211,238,0.03)); opacity:0; transition:opacity 0.4s; z-index:0; } .svc-card:hover { transform:translateY(-8px) scale(1.01); box-shadow:0 24px 64px rgba(109,40,217,0.25),0 0 0 1px rgba(168,85,247,0.3); border-color:rgba(168,85,247,0.35); } .svc-card:hover::before { opacity:1; } .services-carousel .svc-card { width:340px; flex-shrink:0; } .svc-card-img-wrap { position:relative; overflow:hidden; height:200px; background:linear-gradient(135deg,rgba(109,40,217,0.15),rgba(34,211,238,0.08)); } .svc-card-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s var(--ease-smooth),filter 0.6s; filter:brightness(0.7) saturate(1.2); } .svc-card:hover .svc-card-img-wrap img { transform:scale(1.06); filter:brightness(0.8) saturate(1.4); } .svc-card-body { padding:28px 28px 32px; flex:1; display:flex; flex-direction:column; gap:10px; position:relative; z-index:1; } .svc-tag { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; letter-spacing:0.15em; text-transform:uppercase; color:var(--purple3); background:rgba(168,85,247,0.1); border:1px solid rgba(168,85,247,0.2); padding:4px 10px; border-radius:6px; width:fit-content; transition:background 0.25s,border-color 0.25s; } .svc-card:hover .svc-tag { background:rgba(168,85,247,0.18); border-color:rgba(168,85,247,0.4); } .svc-card-body h3 { font-size:18px; font-weight:700; letter-spacing:-0.02em; line-height:1.25; color:var(--text); margin-top:4px; } [lang="ar"] .svc-card-body h3,[dir="rtl"] .svc-card-body h3 { font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:0 !important; } .svc-card-body p { font-size:14.5px; color:var(--muted); line-height:1.75; font-weight:300; flex:1; } .svc-link { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--purple3); letter-spacing:0.03em; margin-top:8px; transition:gap 0.3s var(--ease-bounce),color 0.25s; } .svc-card:hover .svc-link { gap:14px; color:var(--cyan); } /* ── WHY GRID ── */ .why-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } .why-card { background:linear-gradient(145deg,var(--bg2),rgba(15,22,40,0.8)); border:1px solid var(--border); border-radius:var(--r2); padding:36px 32px; transition:all 0.4s var(--ease-smooth); position:relative; overflow:hidden; } .why-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--purple),var(--cyan)); transform:scaleX(0); transform-origin:left; transition:transform 0.4s var(--ease-out); } .why-card:hover { border-color:rgba(168,85,247,0.3); transform:translateY(-4px); box-shadow:0 16px 48px rgba(109,40,217,0.18); } .why-card:hover::after { transform:scaleX(1); } .why-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:rgba(124,58,237,0.12); border:1px solid rgba(124,58,237,0.25); border-radius:14px; margin-bottom:20px; color:var(--purple3); transition:background 0.3s,transform 0.3s var(--ease-bounce); } .why-icon svg { width:22px; height:22px; } .why-card:hover .why-icon { background:rgba(124,58,237,0.22); transform:scale(1.1) rotate(-3deg); } .why-card h4 { font-size:16px; font-weight:700; letter-spacing:-0.01em; margin-bottom:10px; color:var(--text); } [lang="ar"] .why-card h4,[dir="rtl"] .why-card h4 { font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:0 !important; } .why-card p { font-size:14.5px; color:var(--muted); line-height:1.8; font-weight:300; } /* ── FAQ ── */ .faq-grid { display:flex; flex-direction:column; gap:12px; max-width:860px; } .faq-item { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; transition:border-color 0.3s,box-shadow 0.3s; } .faq-item:hover,.faq-item.open { border-color:rgba(168,85,247,0.3); box-shadow:0 4px 24px rgba(109,40,217,0.15); } .faq-q { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; font-size:15px; font-weight:700; cursor:pointer; letter-spacing:-0.01em; transition:color 0.25s; gap:16px; } [lang="ar"] .faq-q,[dir="rtl"] .faq-q { letter-spacing:0; } .faq-q:hover,.faq-item.open .faq-q { color:var(--purple3); } .faq-q .icon { width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(124,58,237,0.1); border:1px solid rgba(124,58,237,0.25); border-radius:8px; font-size:18px; font-weight:300; line-height:1; color:var(--purple2); transition:transform 0.35s var(--ease-bounce),background 0.3s,color 0.3s; } .faq-item.open .faq-q .icon { transform:rotate(45deg); background:rgba(124,58,237,0.2); color:var(--cyan); } .faq-a { max-height:0; overflow:hidden; font-size:14.5px; color:var(--muted); line-height:1.85; font-weight:300; padding:0 24px; transition:max-height 0.45s var(--ease-out),padding 0.35s var(--ease-out); } .faq-item.open .faq-a { max-height:300px; padding:0 24px 20px; } /* ── STATS BAR ── */ .stats-bar { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:70px 60px; display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative; } .stats-bar::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(109,40,217,0.06),transparent); pointer-events:none; } .stat-block { text-align:center; padding:0 40px; position:relative; } .stat-block:not(:last-child)::after { content:''; position:absolute; right:0; top:15%; bottom:15%; width:1px; background:linear-gradient(transparent,var(--border),transparent); } .counter-wrap { position:relative; height:76px; overflow:hidden; display:flex; align-items:center; justify-content:center; margin-bottom:6px; } .digit-slot { display:inline-flex; flex-direction:column; height:76px; overflow:hidden; vertical-align:top; } .digit-reel { display:flex; flex-direction:column; transition:transform 0s; will-change:transform; } .digit-reel span { height:76px; line-height:76px; font-family:'Syne',sans-serif; font-size:64px; font-weight:800; letter-spacing:-0.05em; display:block; text-align:center; min-width:0.62em; background:linear-gradient(135deg,var(--purple3),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .stat-suffix { font-family:'Syne',sans-serif; font-size:64px; font-weight:800; letter-spacing:-0.05em; line-height:76px; background:linear-gradient(135deg,var(--purple3),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:inline-block; vertical-align:top; } .stat-label { font-size:13px; color:var(--muted); margin-top:10px; font-weight:400; letter-spacing:0.04em; } /* ── CTA ── */ .cta-section { padding:110px 60px; text-align:center; background:linear-gradient(135deg,rgba(109,40,217,0.07),rgba(34,211,238,0.03)); border-top:1px solid var(--border); position:relative; overflow:hidden; } .cta-section::before { content:''; position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(109,40,217,0.12),transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; } .cta-section h2 { font-size:clamp(30px,3.5vw,54px); font-weight:800; letter-spacing:-0.03em; margin-bottom:20px; position:relative; z-index:1; } [lang="ar"] .cta-section h2,[dir="rtl"] .cta-section h2 { letter-spacing:0 !important; } .cta-section p { font-size:17px; color:var(--muted); margin-bottom:44px; max-width:520px; margin-inline:auto; line-height:1.85; font-weight:300; position:relative; z-index:1; } .cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; } /* ── FOOTER ── */ .footer { background:var(--bg2); border-top:1px solid var(--border); padding:64px 60px 0; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:60px; position:relative; } .footer::before { content:''; position:absolute; top:0; left:60px; right:60px; height:1px; background:linear-gradient(90deg,transparent,var(--purple),var(--cyan),transparent); opacity:0.4; } .footer-brand img { height:44px; margin-bottom:16px; filter:drop-shadow(0 0 8px rgba(168,85,247,0.3)); } .footer-brand p { font-size:14px; color:var(--muted); line-height:1.85; max-width:280px; font-weight:300; } .footer-col h5 { font-family:'Syne',sans-serif; font-size:11px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; color:var(--text); margin-bottom:18px; } [lang="ar"] .footer-col h5,[dir="rtl"] .footer-col h5 { font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:0.05em; } .footer-col a { display:block; color:var(--muted); font-size:14px; margin-bottom:12px; transition:color 0.25s,transform 0.25s; font-weight:300; } .footer-col a:hover { color:var(--text); transform:translateX(4px); } [lang="ar"] .footer-col a:hover,[dir="rtl"] .footer-col a:hover { transform:translateX(-4px); } .footer-bottom { margin:40px -60px 0; padding:20px 60px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--dim); letter-spacing:0.02em; } /* ── PAGE HERO ── */ .page-hero { min-height:54vh; display:flex; align-items:center; padding:140px 60px 80px; background:radial-gradient(ellipse 90% 70% at 50% 0%,rgba(109,40,217,0.16) 0%,transparent 70%); border-bottom:1px solid var(--border); position:relative; overflow:hidden; } .page-hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(124,58,237,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,0.03) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; } .page-hero-inner { max-width:740px; position:relative; z-index:1; } [lang="ar"] .page-hero-inner,[dir="rtl"] .page-hero-inner { text-align:right; } .breadcrumb { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--dim); margin-bottom:22px; animation:slideRight 0.6s var(--ease-out) both; } .breadcrumb a { color:var(--muted); transition:color 0.2s; } .breadcrumb a:hover { color:var(--text); } .breadcrumb span { color:var(--purple3); } .page-hero h1 { font-size:clamp(32px,4vw,60px); font-weight:800; letter-spacing:-0.03em; margin-bottom:22px; animation:fadeUp 0.7s var(--ease-out) 0.1s both; } [lang="ar"] .page-hero h1,[dir="rtl"] .page-hero h1 { letter-spacing:0 !important; line-height:1.25 !important; } .page-hero p { font-size:18px; color:var(--muted); line-height:1.8; max-width:580px; font-weight:300; animation:fadeUp 0.7s var(--ease-out) 0.2s both; } /* ── CONTACT ── */ .contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:start; } .contact-info { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r2); padding:40px; } .contact-info h3 { font-size:22px; font-weight:800; margin-bottom:12px; letter-spacing:-0.02em; } [lang="ar"] .contact-info h3,[dir="rtl"] .contact-info h3 { font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:0 !important; } .contact-info>p { font-size:14.5px; color:var(--muted); line-height:1.8; margin-bottom:28px; font-weight:300; } .contact-item { display:flex; align-items:flex-start; gap:16px; padding:16px 0; border-bottom:1px solid var(--border); transition:transform 0.25s; } .contact-item:last-of-type { border-bottom:none; } .contact-item:hover { transform:translateX(4px); } [dir="rtl"] .contact-item:hover { transform:translateX(-4px); } .contact-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:rgba(124,58,237,0.1); border:1px solid rgba(124,58,237,0.2); border-radius:12px; flex-shrink:0; color:var(--purple3); transition:background 0.25s,transform 0.25s var(--ease-bounce); } .contact-icon svg { width:18px; height:18px; } .contact-item:hover .contact-icon { background:rgba(124,58,237,0.2); transform:scale(1.1); } .contact-item>div { display:flex; flex-direction:column; gap:3px; } .contact-item strong { font-size:13.5px; font-weight:700; } .contact-item span { font-size:14px; color:var(--muted); font-weight:300; } .form-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r2); padding:40px; } .form-card h3 { font-size:22px; font-weight:800; margin-bottom:8px; letter-spacing:-0.02em; } [lang="ar"] .form-card h3,[dir="rtl"] .form-card h3 { font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:0 !important; } .form-card>p { font-size:14.5px; color:var(--muted); margin-bottom:28px; font-weight:300; } .contact-form { display:flex; flex-direction:column; gap:16px; } .form-row { display:flex; gap:16px; } .form-group { display:flex; flex-direction:column; gap:8px; flex:1; } .form-group label { font-size:11.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); } [lang="ar"] .form-group label,[dir="rtl"] .form-group label { letter-spacing:0.04em; font-family:'IBM Plex Sans Arabic',sans-serif; } .form-group input,.form-group select,.form-group textarea { background:rgba(255,255,255,0.04); border:1px solid var(--border2); border-radius:12px; color:var(--text); font-size:14.5px; font-weight:300; padding:13px 16px; font-family:inherit; transition:border-color 0.25s,box-shadow 0.25s,background 0.25s; outline:none; } .form-group textarea { min-height:120px; resize:vertical; } .form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--purple2); box-shadow:0 0 0 3px rgba(168,85,247,0.12); background:rgba(124,58,237,0.05); } .form-group select { appearance:none; cursor:pointer; } .form-submit { background:linear-gradient(135deg,var(--purple),var(--purple2)); color:white; padding:15px 28px; border:none; border-radius:12px; cursor:pointer; font-size:15px; font-weight:700; letter-spacing:0.02em; transition:transform 0.3s var(--ease-bounce),box-shadow 0.3s; box-shadow:0 0 28px rgba(124,58,237,0.3); margin-top:8px; font-family:inherit; width:100%; } .form-submit:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(124,58,237,0.5); } .feat-list { list-style:none; display:flex; flex-direction:column; gap:10px; } .feat-list li { display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:var(--muted); line-height:1.7; font-weight:300; } .feat-list li::before { content:''; display:inline-block; width:18px; height:18px; flex-shrink:0; background:rgba(16,185,129,0.15) url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3.5 3.5L13 4.5' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/12px no-repeat; border:1px solid rgba(16,185,129,0.3); border-radius:6px; margin-top:2px; } .toast { position:fixed; bottom:28px; right:28px; background:linear-gradient(135deg,rgba(16,185,129,0.15),rgba(16,185,129,0.08)); border:1px solid rgba(16,185,129,0.35); color:var(--text); padding:16px 22px; border-radius:14px; font-size:14.5px; font-weight:500; backdrop-filter:blur(16px); transform:translateY(80px); opacity:0; transition:transform 0.5s var(--ease-bounce),opacity 0.4s; z-index:500; display:flex; align-items:center; gap:10px; box-shadow:0 8px 32px rgba(0,0,0,0.3); } .toast.show { transform:translateY(0); opacity:1; } /* Process steps */ .process-step { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r2); padding:32px; transition:all 0.4s var(--ease-smooth); position:relative; overflow:hidden; } .process-step:hover { border-color:rgba(168,85,247,0.3); transform:translateY(-4px); box-shadow:0 16px 48px rgba(109,40,217,0.15); } /* ── VISITOR COUNTER ── */ .visitor-counter { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--dim); opacity:0.65; letter-spacing:0.04em; } .visitor-counter svg { color:var(--dim); } /* ── RESPONSIVE ── */ @media(max-width:1200px){ .services-grid{grid-template-columns:repeat(2,1fr);} } @media(max-width:1024px){ .nav{padding:14px 24px;} .nav.scrolled{padding:10px 24px;} .nav-links{display:none;} .section{padding:70px 24px;} .stats-bar{padding:40px 24px;} .cta-section{padding:70px 24px;} .footer{grid-template-columns:1fr 1fr;padding:40px 24px 0;} .footer-bottom{margin:32px -24px 0;padding:16px 24px;flex-direction:column;gap:6px;text-align:center;} .services-carousel-wrapper{margin:0 -24px;} .contact-grid{grid-template-columns:1fr;} .page-hero{padding:130px 24px 70px;} .why-grid{grid-template-columns:1fr;} html[dir="rtl"] .hero{grid-template-columns:1fr;padding:130px 24px 70px;} } @media(max-width:768px){ .services-grid{grid-template-columns:1fr;} .hero-stats{gap:28px;} .form-row{flex-direction:column;} } @media(max-width:640px){ .stats-bar{grid-template-columns:1fr;} .cta-section{padding:50px 16px;} .footer{grid-template-columns:1fr;} .hero h1{font-size:38px;} .services-carousel .svc-card{width:280px;} }