:root{--primary:#F28C1D;--dark:#222;--muted:#6D6E71;--bg:#fff;--soft:#f7f7f9}
*{box-sizing:border-box}
body{margin:0;font-family:"Cairo",system-ui,Arial,sans-serif;color:var(--dark);background:var(--bg)}
.container{width:min(1180px,92%);margin-inline:auto}

.topbar{background:var(--soft);border-bottom:1px solid #eee;font-size:14px}
.tb-inner{display:flex;justify-content:space-between;align-items:center;padding:6px 0;color:var(--muted)}
.tb-cta a{margin-inline-start:12px;text-decoration:none}
.tb-cta .wh{background:#25D366;color:#fff;padding:4px 10px;border-radius:999px}

.header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid #eee}
.h-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand img{width:52px;height:52px;border-radius:10px;border:2px solid var(--primary);object-fit:cover}
.btext small{display:block;color:var(--muted);font-size:12px}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav-link{padding:10px 12px;border-radius:10px;text-decoration:none;color:inherit}
.nav-link.active,.nav-link:hover{background:var(--primary);color:#fff}

.hero{position:relative}
.hero-slider{position:relative;height:56vh;min-height:360px;max-height:640px;overflow:hidden}
.hs-slide{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .5s;opacity:0}
.hero .overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;background:linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.25))}
.hero h1{font-size:clamp(28px,4vw,44px);margin:.1em 0}
.hero .cta{display:flex;gap:10px;justify-content:center;margin-top:8px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-prim{background:var(--primary);color:#fff}
.btn-ghost{background:transparent;color:#fff;border-color:#fff}
.dot{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);color:#fff;border:0;width:36px;height:36px;border-radius:50%;cursor:pointer}
.dot.prev{right:10px}.dot.next{left:10px}

.band{padding:24px 0;background:#fff}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center}
.two .img img{width:100%;border-radius:12px;border:1px solid #eee}
.ticks{list-style:none;padding:0;margin:12px 0 0}
.ticks li{position:relative;margin:6px 0;padding-inline-start:18px}
.ticks li::before{content:"✔";position:absolute;right:0;color:var(--primary)}

.cats{padding:18px 0;background:var(--soft)}
.sec{margin:0 0 10px}
.cats .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cat{display:block;background:#fff;border:1px solid #eee;border-radius:12px;text-decoration:none;color:inherit}
.cat .thumb{height:120px;background-size:cover;background-position:center;border-bottom:1px solid #eee;border-radius:12px 12px 0 0}
.cat h3{margin:8px 10px;font-size:14px}

.features{padding:18px 0;background:#fff}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.feat{background:var(--soft);border:1px solid #eee;border-radius:12px;padding:14px;text-align:center}

.projects{padding:18px 0;background:#fff}
.projects .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.prj img{width:100%;height:240px;object-fit:cover;border-radius:12px;border:1px solid #eee}

.cta{background:linear-gradient(90deg, var(--primary), #ffb450);color:#fff}
.cta .row{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.cta .row span{display:block;color:#fff;opacity:.9}

.page{padding:20px 0}
.p-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.p-card{background:#fff;border:1px solid #eee;border-radius:12px;overflow:hidden}
.p-card .thumb{height:220px;background-size:cover;background-position:center}

.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.off{background:#fff;border:1px solid #eee;border-radius:12px;padding:14px;text-align:center}
.off.hot{border-color:var(--primary)}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact form input,.contact form textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:10px;margin:6px 0}
.contact .info img{width:100%;border-radius:12px;border:1px solid #eee}

.footer{background:#111;color:#ddd;margin-top:20px}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;padding:18px 0}
.footer h4{color:#fff;margin-bottom:8px}
.footer .list{list-style:none;padding:0;margin:0}
.footer .list li{margin:6px 0}
.footer a{color:#ddd;text-decoration:none}
.footer a:hover{color:#fff}
.copy{text-align:center;padding:8px 0;border-top:1px solid #333;color:#999;font-size:14px}

.wa-float{position:fixed;bottom:18px;left:18px;background:#25D366;color:#fff;padding:10px 14px;border-radius:999px;text-decoration:none;box-shadow:0 8px 28px -10px rgba(0,0,0,.3);z-index:30}

@media (max-width: 1000px){
  .cats .grid{grid-template-columns:repeat(3,1fr)}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .projects .grid{grid-template-columns:repeat(2,1fr)}
  .p-grid{grid-template-columns:repeat(2,1fr)}
  .two{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .cats .grid{grid-template-columns:repeat(2,1fr)}
  .projects .grid{grid-template-columns:1fr}
  .p-grid{grid-template-columns:1fr}
}

/* ===== Pro polish & animations ===== */
.title{font-size:clamp(22px,3.2vw,34px);margin:0 0 12px;position:relative}
.title span{color:var(--primary)}
.title::after{content:"";display:block;width:72px;height:4px;background:linear-gradient(90deg,var(--primary),#ffb450);border-radius:4px;margin-top:6px}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* Navigation underline */
.nav-link{position:relative;overflow:hidden}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:right;transition:transform .25s}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);transform-origin:left}

/* Why choose band */
.why-pro{padding:22px 0;background:var(--soft)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.why-card{background:#fff;border:1px solid #eee;border-radius:16px;padding:14px}
.why-card.main{border-color:var(--primary);box-shadow:0 10px 30px -15px rgba(242,140,29,.6)}
.why-card h3{margin:.2em 0 .4em;color:#2b2d31}
.why-card p{color:var(--muted);margin:0}

/* Clients */
.clients{padding:18px 0;background:#fff}
.clients-wrap{overflow:hidden;border:1px solid #eee;border-radius:16px;background:var(--soft)}
.clients-rail{display:flex;gap:18px;padding:12px 14px;will-change:transform}
.c-logo{flex:0 0 auto;padding:10px 16px;border-radius:999px;background:#fff;border:1px solid #eee;box-shadow:0 6px 24px -16px rgba(0,0,0,.2);font-weight:700;color:#333}

/* Projects hover */
.prj img{transition:transform .4s ease, box-shadow .3s ease}
.prj img:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 18px 38px -22px rgba(0,0,0,.35)}

/* Section headings in bands */
.band .text h2,.cats .sec,.projects .sec{position:relative;padding-bottom:6px}
.band .text h2::after,.cats .sec::after,.projects .sec::after{content:"";position:absolute;right:0;bottom:0;width:64px;height:3px;background:var(--primary);border-radius:3px}

/* Buttons micro-interactions */
.btn{transition:transform .15s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -16px rgba(0,0,0,.25)}

/* Page transition overlay */
.page-transition{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .28s ease}
.page-transition.show{opacity:1;pointer-events:auto}

/* Strong brand bars */
.footer{border-top:4px solid var(--primary)}
.header{box-shadow:0 6px 28px -24px rgba(0,0,0,.3)}

/* Cards hover */
.cat,.p-card{transition:transform .2s ease, box-shadow .25s ease}
.cat:hover,.p-card:hover{transform:translateY(-4px);box-shadow:0 14px 40px -24px rgba(0,0,0,.3)}

@media (max-width:1000px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .why-grid{grid-template-columns:1fr}
}

/* --- Pro Plus Additions --- */
.hero-slider.parallax{background-attachment:fixed}
.btn.pulse{animation:pulse 2.2s infinite ease-in-out}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(242,140,29,.45)}
  70%{box-shadow:0 0 0 16px rgba(242,140,29,0)}
  100%{box-shadow:0 0 0 0 rgba(242,140,29,0)}
}

/* Why icons */
.why-card .ico{width:36px;height:36px;border-radius:10px;margin-bottom:8px;background:linear-gradient(135deg,var(--primary),#ffb450);position:relative}
.why-card .ico::after{content:"";position:absolute;inset:6px;border-radius:8px;background:#fff}
.why-card .ico.water::before{content:"";position:absolute;inset:9px 12px 9px 12px;border-radius:50% 50% 60% 60%;background:linear-gradient(180deg,#9ad9ff,#3db7ff)}
.why-card .ico.shield::before{content:"";position:absolute;left:9px;right:9px;top:6px;bottom:6px;background:linear-gradient(180deg,#ffe0b3,#ffd08a);clip-path:polygon(50% 0, 100% 30%, 85% 100%, 15% 100%, 0 30%)}
.why-card .ico.brush::before{content:"";position:absolute;left:8px;right:8px;top:8px;bottom:8px;background:linear-gradient(90deg,#333,#999);clip-path:polygon(0 60%, 100% 40%, 100% 60%, 0 80%)}
.why-card .ico.star::before{content:"";position:absolute;inset:8px;background:linear-gradient(180deg,#ffe37a,#ffc400);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}

/* Client logos rail */
.c-logo-img{flex:0 0 auto; width:180px; height:60px; object-fit:contain; background:#fff; border-radius:12px; border:1px solid #eee; padding:6px; box-shadow:0 6px 24px -16px rgba(0,0,0,.2)}

/* Section titles stronger accent */
.title::after{background:linear-gradient(90deg,#000,#F28C1D)}

/* Header/CTA brand boost without changing the original logo asset itself */
.header .nav-link.active,.header .nav-link:hover{background:linear-gradient(90deg,#F28C1D,#ffb450); color:#fff}
.btn-prim{background:linear-gradient(90deg,#F28C1D,#ffb450)}


/* Mobile navigation */
.burger{display:none;flex-direction:column;gap:4px;background:transparent;border:0;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:#333;border-radius:2px}
@media (max-width: 900px){
  .burger{display:flex}
  .nav{position:fixed;inset:60px 0 auto 0;background:#fff;border-top:1px solid #eee;box-shadow:0 18px 40px -24px rgba(0,0,0,.25);padding:10px;display:none;flex-direction:column}
  .nav.open{display:flex}
  .nav-link{padding:12px;border-radius:10px}
  .h-inner{gap:8px}
}
/* About tagline */
.about .tag{color:var(--muted);margin-top:4px}
/* Why full width on small screens */
@media (max-width: 1200px){
  .why-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width: 900px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 520px){
  .why-grid{grid-template-columns:1fr}
}

/* Clients heading styling */
.clients-title{
  margin:0 0 10px;
  font-size:clamp(22px,3vw,32px);
  font-weight:800;
  background:linear-gradient(90deg,#F28C1D,#ffb450);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  position:relative;
}
.clients-title::after{
  content:"";
  display:block;
  width:82px;
  height:4px;
  border-radius:4px;
  background:linear-gradient(90deg,#F28C1D,#ffb450);
  margin-top:6px;
}

/* Advantages page */
.adv-hero{background:linear-gradient(180deg, rgba(242,140,29,.08), transparent);padding-top:24px}
.adv-hero .lead{color:var(--muted);margin-top:6px}
.adv-cards{padding:12px 0 22px;background:#fff}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.adv-card{background:#fff;border:1px solid #eee;border-radius:16px;padding:14px;transition:transform .2s ease, box-shadow .25s ease}
.adv-card:hover{transform:translateY(-4px);box-shadow:0 14px 40px -24px rgba(0,0,0,.25)}
.adv-card .img{height:180px;border-radius:12px;overflow:hidden;border:1px solid #eee;margin-bottom:8px;background:#f7f7f9;display:grid;place-items:center}
.adv-card .img img{width:100%;height:100%;object-fit:cover}
.adv-card h3{margin:.2em 0 .4em;color:#2b2d31}
.adv-card p{color:var(--muted);margin:0}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:1000px){
  .grid3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .grid3{grid-template-columns:1fr}
}

/* WPC page */
.wpc-hero{background:linear-gradient(180deg, rgba(242,140,29,.08), transparent);padding-top:24px}
.wpc-hero .lead{color:var(--muted);margin-top:6px}
.hero-ill{margin-top:10px;border:1px solid #eee;border-radius:16px;overflow:hidden}

.wpc-grid{padding:12px 0 22px;background:#fff}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.wpc-card{background:#fff;border:1px solid #eee;border-radius:16px;padding:14px;transition:transform .2s ease, box-shadow .25s ease}
.wpc-card:hover{transform:translateY(-4px);box-shadow:0 14px 40px -24px rgba(0,0,0,.25)}
.wpc-card .img{height:180px;border-radius:12px;overflow:hidden;border:1px solid #eee;margin-bottom:8px;background:#f7f7f9;display:grid;place-items:center}
.wpc-card .img img{width:100%;height:100%;object-fit:cover}
.wpc-card h3{margin:.2em 0 .4em}
.wpc-card p{color:var(--muted);margin:0}

.wpc-compare{padding:16px 0;background:#fff}
.wpc-compare .two{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:center}
.wpc-compare .img img{width:100%;border-radius:16px;border:1px solid #eee}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:1000px){
  .grid2{grid-template-columns:1fr}
  .wpc-compare .two{grid-template-columns:1fr}
}

/* Projects gallery */
.proj-hero{background:linear-gradient(180deg, rgba(242,140,29,.08), transparent);padding-top:24px}
.projects{background:#fff;padding:12px 0 22px}
.gproj{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:#fff;border:1px solid #eee;border-radius:16px;overflow:hidden;transition:transform .2s ease, box-shadow .25s ease}
.card img{width:100%;height:260px;object-fit:cover;display:block}
.card figcaption{padding:8px 10px;color:#555}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 40px -24px rgba(0,0,0,.25)}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (max-width:1000px){ .gproj{grid-template-columns:repeat(2,1fr)} .card img{height:220px} }
@media (max-width:520px){ .gproj{grid-template-columns:1fr} .card img{height:200px} }

/* Lightbox */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:9999}
.lb.open{display:flex}
.lb img{max-width:90vw;max-height:90vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-prev,.lb-next,.lb-close{position:absolute;background:#fff;border:0;border-radius:999px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.lb-close{top:24px;left:24px;font-size:26px;line-height:1}
.lb-prev{right:86px;top:50%;transform:translateY(-50%);font-size:28px}
.lb-next{right:24px;top:50%;transform:translateY(-50%);font-size:28px}