/* El Watania — Static Website Theme (no frameworks) */
:root{
  --gold:#AE8849;
  --gold-2:#936F33;
  --midnight:#121C22;
  --ink:#1F2531;
  --cloud:#F5F7FA;
  --muted:#8B95A1;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(0,0,0,.12);
  --shadow-sm:0 6px 20px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color: var(--gold); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; height:auto; display:block; }

.container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.section{ padding:80px 0; }
@media (max-width: 992px){ .section{ padding:56px 0; } }

.navbar{
  position:sticky; top:0; z-index:50; background:#fff;
  border-bottom:1px solid #eef1f4; box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; color:var(--midnight); font-size:20px; }
.brand img{ height:34px; width:auto; }
.navlinks{ display:flex; align-items:center; gap:12px; }
.navlinks a{ padding:10px 14px; border-radius:10px; color:#39404a; font-weight:600; }
.navlinks a.active, .navlinks a:hover{ background:var(--cloud); }
.burger{ display:none; cursor:pointer; padding:8px; border-radius:8px; border:1px solid #e5e8ec; }
@media (max-width: 900px){
  .navlinks{ display:none; position:absolute; top:64px; left:0; right:0; background:#fff; border-top:1px solid #eef1f4; padding:10px; flex-direction:column; }
  .navlinks.show{ display:flex; }
  .burger{ display:block; }
}

.hero{
  position:relative; min-height:70vh; display:flex; align-items:center; isolation:isolate;
  border-radius: var(--radius); overflow:hidden; background:#0f151a;
}
.hero .bg::before{
  content:""; position:absolute; inset:0; background:
   radial-gradient(90% 80% at 20% 10%, rgba(174,136,73,.35), transparent 45%),
   linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.6));
  z-index:1;
}
.hero .bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(104%) contrast(105%); opacity:.78; }
.hero .inner{ position:relative; z-index:2; color:#fff; padding: clamp(20px, 4vw, 64px); max-width: 1200px; margin: 0 auto; width:100%; }
.kicker{ text-transform:uppercase; letter-spacing:.18em; font-weight:700; color:#f1e9d8; opacity:.9; font-size:12px; }
.display{ font-size: clamp(32px, 5vw, 64px); line-height:1.05; margin:8px 0 12px; }
.sub{ font-size: clamp(16px, 1.6vw, 20px); max-width: 760px; color:#f0f3f6; opacity:.95; }
.btn{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; border-radius:999px; padding:.9rem 1.2rem; font-weight:700; border:1px solid transparent; text-decoration:none; }
.btn-primary{ background:var(--gold); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn-ghost:hover{ background:rgba(255,255,255,.1); }

.section-kicker{ text-transform:uppercase; letter-spacing:.18em; color:var(--gold); font-weight:700; font-size:12px; }
.section-title{ font-size: clamp(24px, 3vw, 36px); margin:0 0 8px; }
.section-desc{ color:var(--muted); max-width:760px; }

.grid{ display:grid; gap:22px; }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 992px){ .grid-3{ grid-template-columns: 1fr; } }
.card{ background:#fff; border-radius: var(--radius); padding:28px; box-shadow: var(--shadow-sm); border:1px solid #eef1f4; transition:.25s ease; }
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.card h3{ margin-top:6px; font-size:20px; }

.ic{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:#FFF7EA; color:var(--gold); box-shadow: inset 0 0 0 1px rgba(174,136,73,.2); font-size:22px; }

.stats{ background:linear-gradient(180deg, #ffffff, #fafbfc); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 28px;
  display:grid; grid-template-columns: repeat(4,1fr); gap:26px; }
@media (max-width: 992px){ .stats{ grid-template-columns: repeat(2,1fr); } }
.stat .n{ font-weight:800; font-size: clamp(28px, 3.2vw, 40px); color: var(--midnight); }
.stat .l{ color: var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.1em; }

.clients{ background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 24px; display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:center; }
.clients img{ height:36px; opacity:.75; filter:grayscale(1); transition:.2s; }
.clients img:hover{ opacity:1; filter:none; }

.footer{ background:#0F151A; color:#d3dde6; }
.footer a{ color:#d3dde6; }
.footer a:hover{ color:var(--gold); }
.footer .foot-inner{ display:grid; gap:20px; grid-template-columns: 2fr 1fr 1fr; padding: 50px 0; }
@media (max-width: 900px){ .footer .foot-inner{ grid-template-columns:1fr; } }
.copy{ border-top:1px solid rgba(255,255,255,.08); padding:16px 0; font-size:14px; color:#aeb8c3; }

.reveal{ opacity:0; transform: translateY(14px); }
.reveal.show{ opacity:1; transform:none; transition: .7s ease; }

blockquote.q{ border-left: 4px solid var(--gold); padding-left:16px; color:#4a545e; font-style:italic; }
.round{ border-radius: var(--radius); overflow:hidden; }
.mt32{ margin-top:32px; }
.mt48{ margin-top:48px; }