/* ===== Design tokens ===== */
:root{
  --navy:#1e2d4a;
  --navy-dark:#152238;
  --navy-light:#2a3d63;
  --orange:#e8734a;
  --orange-dark:#c65c37;
  --white:#ffffff;
  --gray-50:#f7f8fa;
  --gray-100:#eef0f4;
  --gray-400:#8891a3;
  --gray-600:#5b6478;
  --text:#1c2333;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 4px 18px rgba(30,45,74,.08);
  --container:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Cairo',Tahoma,Arial,sans-serif;
  color:var(--text);
  background:var(--white);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
html[lang="en"] body{font-family:'Inter',Arial,sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0 0 .5em;font-weight:700;line-height:1.35}
p{margin:0 0 1em}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.icon{width:1em;height:1em;display:inline-block;vertical-align:-.15em}
section{padding:64px 0}
.section-tight{padding:40px 0}
.bg-alt{background:var(--gray-50)}
.center{text-align:center}
.eyebrow{
  color:var(--orange);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.03em;
  margin-bottom:8px;
  display:block;
}
.section-head{max-width:680px;margin:0 auto 40px}
.section-head h2{font-size:1.9rem;color:var(--navy)}
.section-head p{color:var(--gray-600)}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:999px;
  font-weight:700;font-size:.98rem;
  border:2px solid transparent;
  transition:transform .15s ease, background .2s ease;
  cursor:pointer;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-dark)}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-outline-navy{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-outline-navy:hover{background:var(--navy);color:#fff}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}

/* ===== Header ===== */
header.site{
  position:sticky;top:0;z-index:40;
  background:var(--white);
  border-bottom:1px solid var(--gray-100);
}
.topbar{
  background:var(--navy-dark);color:#cfd8ea;font-size:.85rem;
}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding:8px 20px;flex-wrap:wrap;gap:6px}
.topbar a{display:inline-flex;align-items:center;gap:6px}
.topbar a:hover{color:#fff}
.navwrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;color:var(--navy)}
.brand .mark{
  width:40px;height:40px;border-radius:10px;background:var(--navy);
  color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:1.3rem;
}
nav.main{display:flex;align-items:center;gap:28px}
nav.main a{font-weight:600;color:var(--navy);font-size:.98rem;padding:6px 0;position:relative}
nav.main a.active,nav.main a:hover{color:var(--orange)}
.nav-cta{display:flex;align-items:center;gap:10px}
.lang-switch{font-weight:700;font-size:.85rem;border:1.5px solid var(--gray-100);border-radius:999px;padding:6px 14px}
.lang-switch:hover{border-color:var(--orange);color:var(--orange)}
.menu-toggle{display:none;background:none;border:none;font-size:1.6rem;color:var(--navy);cursor:pointer}

@media (max-width:900px){
  nav.main{
    position:fixed;inset-inline-start:0;top:0;bottom:0;width:78%;max-width:320px;
    background:#fff;flex-direction:column;align-items:flex-start;padding:90px 26px 26px;
    box-shadow:0 0 30px rgba(0,0,0,.15);
    transform:translateX(110%);transition:transform .25s ease;gap:20px;
  }
  nav.main.open{transform:translateX(0)}
  .menu-toggle{display:block}
  .nav-cta .btn-primary span.long{display:none}
}

/* ===== Hero ===== */
.hero{
  background:
    linear-gradient(155deg, rgba(30,45,74,.94) 45%, rgba(21,34,56,.96) 100%),
    var(--hero-img) center/cover no-repeat;
  color:#fff;position:relative;overflow:hidden;padding:72px 0 84px;
}
.hero::after{
  content:"";position:absolute;inset-inline-end:-120px;top:-160px;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.06), transparent 60%);
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative;z-index:2}
.hero h1{font-size:2.6rem;color:#fff}
.hero h1 em{color:var(--orange);font-style:normal}
.hero p.lead{color:#c7d1e6;font-size:1.1rem;max-width:520px}
.hero-badges{display:flex;gap:22px;margin-top:30px;flex-wrap:wrap}
.hero-badge{display:flex;align-items:center;gap:8px;color:#dfe6f4;font-weight:600;font-size:.92rem}
.hero-badge .icon{color:var(--orange);width:1.3em;height:1.3em}
.hero-panel{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:28px;backdrop-filter:blur(2px);
}
.hero-panel h3{color:#fff;font-size:1.15rem}
.hero-panel ul li{display:flex;gap:10px;align-items:flex-start;color:#dbe3f2;padding:7px 0;font-size:.96rem}
.hero-panel ul li .icon{color:var(--orange);margin-top:3px;flex-shrink:0}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero h1{font-size:2rem}}

/* ===== Service cards ===== */
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{
  background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);
  padding:26px;transition:box-shadow .2s ease, transform .2s ease;overflow:hidden;
}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.card .card-media{
  margin:-26px -26px 18px;aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--gray-100);
}
.card .card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card .ic{
  width:44px;height:44px;border-radius:11px;background:#fdece4;color:var(--orange);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  position:absolute;bottom:-16px;inset-inline-start:16px;
  border:3px solid #fff;
}
.card .ic .icon{width:22px;height:22px}
.card h3{font-size:1.08rem;color:var(--navy)}
.card p{color:var(--gray-600);font-size:.94rem;margin-bottom:0}
.card a.more{display:inline-block;margin-top:12px;color:var(--orange);font-weight:700;font-size:.9rem}

/* ===== Why us / trust badges ===== */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:800px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
.trust{text-align:center;padding:18px}
.trust .ic{
  width:64px;height:64px;border-radius:50%;background:var(--navy);color:var(--orange);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
}
.trust .ic .icon{width:30px;height:30px}
.trust h4{color:var(--navy);font-size:1rem;margin-bottom:4px}
.trust p{color:var(--gray-600);font-size:.88rem;margin:0}

/* ===== Coverage / list ===== */
.check-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px}
@media (max-width:560px){.check-list{grid-template-columns:1fr}}
.check-list li{display:flex;gap:10px;align-items:flex-start;color:var(--text);font-weight:600;font-size:.96rem}
.check-list li:before{
  content:"";flex-shrink:0;margin-top:6px;width:8px;height:8px;border-radius:50%;background:var(--orange);
}

/* ===== CTA band ===== */
.cta-band{
  background:var(--navy);color:#fff;border-radius:var(--radius);
  padding:44px 40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.cta-band h3{color:#fff;font-size:1.4rem;margin-bottom:4px}
.cta-band p{color:#c7d1e6;margin:0}

/* ===== FAQ accordion ===== */
.faq-item{border-bottom:1px solid var(--gray-100)}
.faq-q{
  width:100%;text-align:inherit;background:none;border:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 4px;font-weight:700;font-size:1rem;color:var(--navy);font-family:inherit;
}
.faq-q .plus{transition:transform .2s ease;color:var(--orange);font-size:1.3rem;flex-shrink:0}
.faq-item.open .faq-q .plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-a p{padding:0 4px 18px;color:var(--gray-600);margin:0}

/* ===== Contact page ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-card{
  display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--gray-100);
  border-radius:var(--radius-sm);margin-bottom:14px;
}
.contact-card .ic{
  width:44px;height:44px;border-radius:10px;background:#fdece4;color:var(--orange);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.contact-card .ic .icon{width:22px;height:22px}
.map-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--gray-100);min-height:320px}
.map-wrap iframe{width:100%;height:100%;min-height:320px;border:0}

/* ===== Footer ===== */
footer.site{background:var(--navy-dark);color:#c7d1e6;padding:52px 0 22px;font-size:.94rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:30px}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr}}
footer.site h4{color:#fff;font-size:1.02rem;margin-bottom:14px}
footer.site ul li{margin-bottom:9px}
footer.site a:hover{color:var(--orange)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:18px;text-align:center;color:#93a0bc;font-size:.85rem}

/* ===== Floating action buttons ===== */
.floating{position:fixed;bottom:22px;inset-inline-end:22px;z-index:50;display:flex;flex-direction:column;gap:12px}
.fab{
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.fab .icon{width:26px;height:26px}
.fab-whatsapp{background:#25D366}
.fab-call{background:var(--orange)}

/* ===== Breadcrumb / page hero (inner pages) ===== */
.page-hero{
  background:
    linear-gradient(155deg, rgba(30,45,74,.92) 40%, rgba(21,34,56,.95) 100%),
    var(--hero-img, none) center/cover no-repeat, var(--navy);
  color:#fff;padding:46px 0;
}
.page-hero h1{color:#fff;font-size:2rem;margin-bottom:6px}
.page-hero p{color:#c7d1e6;margin:0}
.breadcrumb{display:flex;gap:8px;color:#9fb0d1;font-size:.9rem;margin-bottom:10px}
.breadcrumb a:hover{color:#fff}

@media (max-width:700px){
  .hero h1{font-size:1.7rem}
  section{padding:46px 0}
  .cta-band{padding:30px 22px}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
}