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

:root{
    --primary:#071a33;
    --primary-2:#0b2e58;
    --accent:#16b3bb;
    --accent-dark:#0e8f96;
    --white:#ffffff;
    --light:#f6f9fc;
    --text:#16243a;
    --muted:#65748a;
    --border:#e1e9f0;
    --success:#18a957;
    --shadow:0 18px 48px rgba(7,26,51,.12);
    --radius:20px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--light);
    color:var(--text);
    line-height:1.8;
}
html[lang="ar"] body{font-family:"Cairo",Tahoma,Arial,sans-serif}
html[lang="en"] body{font-family:"Inter",Arial,sans-serif;line-height:1.65}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.container{width:min(1180px,calc(100% - 32px));margin:auto}

/* Keep emails and phone numbers correctly ordered inside Arabic RTL layouts. */
.ltr-text,
[dir="ltr"].contact-value{
    direction:ltr !important;
    unicode-bidi:isolate !important;
    display:inline-block;
    white-space:nowrap;
    text-align:left;
}
input[type="email"],
input[type="tel"]{
    direction:ltr !important;
    unicode-bidi:isolate !important;
    text-align:left !important;
}

.topbar{background:var(--primary);color:#d8e4ef;font-size:14px}
.topbar-inner{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.navbar{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
}
.navbar-inner{
    min-height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--primary);font-weight:800}
.brand-mark{
    width:49px;height:49px;border-radius:15px;
    display:grid;place-items:center;color:#fff;font-size:23px;
    background:linear-gradient(135deg,var(--accent),var(--primary-2));
    box-shadow:0 10px 25px rgba(22,179,187,.28)
}
.brand-title{font-size:22px;line-height:1.2}
.brand-title small{display:block;color:var(--muted);font-size:10px;font-weight:600;margin-top:3px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-weight:700;position:relative}
.nav-links a::after{
    content:"";position:absolute;bottom:-10px;inset-inline-start:0;
    width:0;height:3px;background:var(--accent);border-radius:5px;transition:.25s
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:10px}
.lang-switch{
    min-width:48px;height:42px;padding:0 12px;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--border);border-radius:12px;
    background:#fff;color:var(--primary);font-weight:800
}
.lang-switch:hover{border-color:var(--accent);color:var(--accent-dark)}
.menu-toggle{display:none;border:0;background:transparent;color:var(--primary);font-size:29px;cursor:pointer}

.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:1px solid transparent;border-radius:12px;padding:12px 22px;
    font-weight:800;cursor:pointer;transition:.25s
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px)}
.btn-dark{background:var(--primary);color:#fff}
.btn-dark:hover{background:var(--primary-2);transform:translateY(-2px)}
.btn-outline{border-color:rgba(255,255,255,.55);color:#fff}
.btn-outline:hover{background:#fff;color:var(--primary)}
.btn-whatsapp{background:var(--success);color:#fff}
.btn-whatsapp:hover{background:#138b48;transform:translateY(-2px)}

.hero{
    min-height:680px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    color:#fff;
    background:
        linear-gradient(90deg,rgba(4,18,37,.96) 0%,rgba(4,18,37,.83) 46%,rgba(4,18,37,.45) 100%),
        url("../images/hero-team.jpg") center/cover no-repeat;
}
html[dir="ltr"] .hero{
    background:
        linear-gradient(90deg,rgba(4,18,37,.96) 0%,rgba(4,18,37,.83) 46%,rgba(4,18,37,.45) 100%),
        url("../images/hero-team.jpg") center/cover no-repeat;
}
.hero::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 60%,rgba(4,18,37,.28))
}
.hero-content{position:relative;z-index:2;max-width:760px}
.eyebrow{
    display:inline-flex;padding:7px 15px;border-radius:999px;margin-bottom:18px;
    color:#a5f3f5;background:rgba(22,179,187,.16);border:1px solid rgba(22,179,187,.38);
    font-weight:700
}
.hero h1{font-size:clamp(39px,6vw,68px);line-height:1.25;margin:0 0 20px}
.hero h1 span{color:#52dae0}
.hero p{max-width:680px;margin:0;color:#dce8f2;font-size:18px}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}

.section{padding:82px 0}
.section-sm{padding:55px 0}
.section-title{text-align:center;margin-bottom:42px}
.section-title h2{font-size:clamp(29px,4vw,43px);color:var(--primary);margin:0 0 10px}
.section-title p{max-width:760px;margin:0 auto;color:var(--muted)}

.grid{display:grid;gap:22px}
.feature-grid{grid-template-columns:repeat(4,1fr)}
.service-grid{grid-template-columns:repeat(3,1fr)}
.value-grid{grid-template-columns:repeat(3,1fr)}
.stats-grid{grid-template-columns:repeat(4,1fr)}

.photo-card{
    overflow:hidden;background:#fff;border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:0 10px 30px rgba(7,26,51,.06);transition:.25s
}
.photo-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.photo-card .card-image{height:210px;overflow:hidden}
.photo-card .card-image img{width:100%;height:100%;object-fit:cover;transition:.4s}
.photo-card:hover .card-image img{transform:scale(1.045)}
.photo-card .card-body{padding:24px}
.photo-card h3{margin:0 0 9px;color:var(--primary);font-size:20px}
.photo-card p{margin:0;color:var(--muted)}

.simple-card{
    background:#fff;border:1px solid var(--border);border-radius:var(--radius);
    padding:28px;box-shadow:0 10px 30px rgba(7,26,51,.05);transition:.25s
}
.simple-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.icon-box{
    width:58px;height:58px;border-radius:16px;display:grid;place-items:center;
    background:linear-gradient(135deg,#e7fbfc,#f7ffff);font-size:26px;margin-bottom:17px
}
.simple-card h3{margin:0 0 10px;color:var(--primary)}
.simple-card p{margin:0;color:var(--muted)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.real-image-box{
    overflow:hidden;border-radius:27px;box-shadow:var(--shadow);background:#dce9ef
}
.real-image-box img{width:100%;height:470px;object-fit:cover}
.check-list{display:grid;gap:12px;margin-top:22px}
.check-item{display:flex;gap:10px;align-items:flex-start}
.check-item strong{color:var(--accent);font-size:19px}

.stats-band{
    padding:30px;border-radius:26px;color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--primary-2))
}
.stat{text-align:center;padding:16px;border-inline-end:1px solid rgba(255,255,255,.13)}
.stat:last-child{border-inline-end:0}
.stat strong{display:block;color:#67e1e6;font-size:34px}
.stat span{color:#d6e4f0}

.page-hero{
    position:relative;padding:105px 0;text-align:center;color:#fff;
    background:linear-gradient(rgba(4,18,37,.84),rgba(4,18,37,.84)),url("../images/team-analytics.jpg") center/cover
}
.page-hero h1{font-size:clamp(37px,5vw,55px);margin:0 0 8px}
.breadcrumb{color:#cbd9e5}

.cta{
    padding:44px;border-radius:27px;display:flex;align-items:center;
    justify-content:space-between;gap:25px;color:#fff;
    background:linear-gradient(135deg,var(--accent-dark),var(--accent))
}
.cta h2{font-size:32px;margin:0 0 7px}
.cta p{margin:0;color:#efffff}

.contact-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:30px}
.contact-list{display:grid;gap:15px}
.contact-item{
    display:flex;gap:14px;align-items:flex-start;
    padding:18px;background:#fff;border:1px solid var(--border);border-radius:16px
}
.contact-icon{
    width:47px;height:47px;min-width:47px;border-radius:14px;
    display:grid;place-items:center;background:#eafafa;font-size:21px
}
.contact-item strong{display:block;color:var(--primary)}
.contact-item a:hover{color:var(--accent-dark)}
.form-card{
    padding:30px;background:#fff;border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow)
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:7px}
.field.full{grid-column:1/-1}
label{font-weight:700;color:var(--primary)}
input,select,textarea{
    width:100%;padding:13px 15px;border:1px solid #d8e3ec;border-radius:12px;
    background:#fff;outline:none;font-size:15px
}
input:focus,select:focus,textarea:focus{
    border-color:var(--accent);box-shadow:0 0 0 4px rgba(22,179,187,.1)
}
textarea{min-height:150px;resize:vertical}
.notice{
    display:none;margin-top:14px;padding:12px;border-radius:10px;
    background:#eaf9ed;color:#247336
}
.contact-photo{margin-top:20px;overflow:hidden;border-radius:20px}
.contact-photo img{width:100%;height:300px;object-fit:cover}

.footer{margin-top:80px;padding:55px 0 20px;background:#06172e;color:#d2dfeb}
.footer-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:40px}
.footer h3{margin-top:0;color:#fff}
.footer p{color:#b9c9d7}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-bottom{
    margin-top:35px;padding-top:20px;text-align:center;color:#9eb1c4;
    border-top:1px solid rgba(255,255,255,.1)
}
.photo-credit{font-size:12px;color:#8299ad;margin-top:10px}

.floating-whatsapp{
    position:fixed;z-index:900;inset-inline-end:22px;bottom:22px;
    width:59px;height:59px;border-radius:50%;display:grid;place-items:center;
    background:var(--success);color:#fff;font-size:27px;
    box-shadow:0 12px 28px rgba(24,169,87,.35)
}
.floating-whatsapp:hover{transform:translateY(-3px)}

@media(max-width:960px){
    .menu-toggle{display:block}
    .nav-links{
        position:absolute;top:80px;right:16px;left:16px;
        display:none;flex-direction:column;align-items:stretch;
        padding:18px;background:#fff;border:1px solid var(--border);
        border-radius:18px;box-shadow:var(--shadow)
    }
    .nav-links.open{display:flex}
    .nav-cta{display:none}
    .hero{min-height:620px;background-position:center}
    .split,.contact-grid{grid-template-columns:1fr}
    .feature-grid,.service-grid,.value-grid{grid-template-columns:repeat(2,1fr)}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
    .topbar{display:none}
    .section{padding:58px 0}
    .feature-grid,.service-grid,.value-grid,.stats-grid,.form-grid,.footer-grid{grid-template-columns:1fr}
    .hero{min-height:650px;background-position:60% center}
    .hero h1{font-size:39px}
    .cta{flex-direction:column;text-align:center;padding:30px 22px}
    .stat{border-inline-end:0;border-bottom:1px solid rgba(255,255,255,.13)}
    .stat:last-child{border-bottom:0}
    .real-image-box img{height:330px}
    .photo-card .card-image{height:220px}
    .brand-title{font-size:19px}
    .lang-switch{min-width:44px;padding:0 9px}
}