@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700;800&display=swap');

:root{
	--bg-start:#022244;
	--bg-mid:#073a6b;
	--bg-end:#02162a;
	--panel:#07203a;
	--text:#e6eef8;
	--muted:#9fb3c8;
	--primary:#0ea5e9;
	--accent:#6366f1;
}

*{box-sizing:border-box}

html,body{margin:0;padding:0;scroll-behavior:smooth}

body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,var(--bg-start) 0%, var(--bg-mid) 50%, var(--bg-end) 100%);color:var(--text)}

.container{max-width:1200px;margin:0 auto;padding:0 20px}

.header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.2) blur(10px);background:rgba(10,15,28,0.6);border-bottom:1px solid rgba(255,255,255,0.06)}

.header .row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}

.nav a{color:var(--muted);text-decoration:none;margin:0 12px;font-weight:600}

.nav a:hover{color:#fff}

.header-logo{width:55px;height:55px;display:block;border-radius:18px;padding:10px;object-fit:contain;background:rgba(255,255,255,0.12);box-shadow:0 4px 12px rgba(0,0,0,0.25)}

.brand-logo{width:64px;height:64px;display:block;border-radius:50%;padding:10px;object-fit:contain;background:radial-gradient(circle at 30% 30%,rgba(99,102,241,.25),rgba(14,165,233,.2));box-shadow:0 6px 18px rgba(0,0,0,0.35)}

.brand-name{font-family:'Poppins','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:1.5em;font-weight:800;letter-spacing:0.02em}

.brand-highlight{color:#fff6b3}

.footer-logo{width:32px;height:32px;display:block;border-radius:10px;padding:6px;object-fit:contain;background:rgba(255,255,255,0.12);box-shadow:0 4px 12px rgba(0,0,0,0.25)}

.lang-toggle{display:flex;gap:8px;align-items:center}

.switch{cursor:pointer;padding:6px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.2);color:var(--muted)}

.switch.active{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border:none}

.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;text-decoration:none;font-weight:700;box-shadow:0 10px 30px rgba(14,165,233,.25)}

.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.2);box-shadow:none}

.hero{padding:96px 0 64px;display:flex;gap:28px;align-items:center}

.hero .hero-inner{flex:1}

.hero .hero-art{flex:1;max-width:480px}

.hero .hero-art img{width:100%;height:auto;border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,0.4)}

.hero h1{font-size:48px;line-height:1.1;margin:0 0 16px}

.hero p{font-size:18px;color:var(--muted);max-width:760px}

.card-ill{width:100%;height:140px;object-fit:cover;border-radius:12px;margin-top:12px;margin-bottom:12px}

.grid{display:grid;gap:24px}

.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

.card{background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.06);padding:22px;border-radius:16px}

.card h3{margin:0 0 8px}

.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(99,102,241,0.15);color:#c7d2fe;font-weight:700;font-size:12px;letter-spacing:.04em}

.section{padding:72px 0;border-top:1px solid rgba(255,255,255,0.06)}

.footer{padding:36px 0;border-top:1px solid rgba(255,255,255,0.06);color:var(--muted)}

.kpis{display:flex;gap:24px;flex-wrap:wrap}

.kpi{flex:1 1 180px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);padding:16px;border-radius:12px}

.kpi strong{font-size:28px}

.h2{font-size:32px;margin:0 0 16px}

.small{color:var(--muted);font-size:14px}

html[dir=rtl]{font-family:'Noto Sans Arabic',Tahoma,Arial,sans-serif}

html[dir=rtl] .nav a{margin:0 0 0 12px}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.input,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:#fff}

label{color:var(--muted);font-size:14px}

@media (max-width:720px){
	.hero{flex-direction:column}
	.hero h1{font-size:36px}
	.form-row{grid-template-columns:1fr}
}