/* ═══ STERDIL.AE — SHARED STYLESHEET ═══════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: "Inter", sans-serif; color: #0F172A; background: #fff; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

:root {
  --navy:#0F172A; --navy-mid:#162033; --green:#10B981; --green-dark:#059669;
  --white:#FFFFFF; --slate-50:#F8FAFC; --slate-100:#F1F5F9; --slate-200:#E2E8F0;
  --slate-400:#94A3B8; --slate-500:#64748B; --slate-600:#475569; --slate-700:#334155;
  --amber:#F59E0B;
  --radius-xl:24px; --radius-lg:18px; --radius-md:12px; --radius-sm:8px; --radius-pill:999px;
  --shadow-sm:0 4px 16px rgba(15,23,42,.07); --shadow-md:0 12px 36px rgba(15,23,42,.10); --shadow-lg:0 24px 64px rgba(15,23,42,.13);
  --trans:200ms ease; --max:1200px;
}

/* ── LAYOUT ── */
.wrap { width: min(calc(100% - 2.5rem), var(--max)); margin-inline: auto; }
.section    { padding: 88px 0; }
.section-sm { padding: 64px 0; }
.bg-white { background: var(--white); }
.bg-slate { background: var(--slate-50); }
.bg-navy  { background: var(--navy); color: var(--white); }

/* ── TYPOGRAPHY ── */
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin-bottom: .85rem; }
.eyebrow::before { content:""; width:22px; height:2px; background:currentColor; border-radius:999px; }
h1 { font-size: clamp(2.1rem,5vw,4rem); font-weight:900; letter-spacing:-.04em; line-height:1.05; margin-bottom:1.2rem; }
h2 { font-size: clamp(1.65rem,3vw,2.6rem); font-weight:800; letter-spacing:-.03em; line-height:1.1; margin-bottom:1rem; }
h3 { font-size:1.08rem; font-weight:700; letter-spacing:-.02em; margin-bottom:.55rem; }
h4 { font-size:.95rem; font-weight:700; }
.lead { font-size:clamp(1rem,1.8vw,1.15rem); line-height:1.72; }
.section-intro { max-width:700px; margin-bottom:3rem; }
.section-intro p { color:var(--slate-700); font-size:1.02rem; }
.section-intro.light h2, .section-intro.light .eyebrow { color:#fff; }
.section-intro.light .eyebrow { color:var(--green); }
.section-intro.light p { color:rgba(255,255,255,.75); }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; height:50px; padding:0 1.4rem; border-radius:var(--radius-pill); font-family:inherit; font-weight:700; font-size:.93rem; border:1.5px solid transparent; cursor:pointer; transition:transform var(--trans),box-shadow var(--trans),background var(--trans),color var(--trans); white-space:nowrap; }
.btn-green  { background:var(--green); color:#fff; box-shadow:0 10px 28px rgba(16,185,129,.28); }
.btn-green:hover  { background:var(--green-dark); transform:translateY(-2px); }
.btn-ghost  { background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
.btn-ghost:hover  { background:rgba(255,255,255,.08); transform:translateY(-2px); }
.btn-outline { background:transparent; color:var(--green); border-color:var(--green); }
.btn-outline:hover { background:var(--green); color:#fff; transform:translateY(-2px); }
.btn-navy   { background:var(--navy); color:#fff; }
.btn-navy:hover   { background:#162033; transform:translateY(-2px); }
.btn-sm { height:42px; padding:0 1.1rem; font-size:.85rem; }

/* ── NAV ── */
.site-header { position:sticky; top:0; z-index:900; background:rgba(15,23,42,.88); backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid rgba(255,255,255,.07); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:72px; }
.brand-logo { height:34px; width:auto; object-fit:contain; }
.nav-links { display:flex; align-items:center; gap:1.6rem; }
.nav-links a { color:rgba(255,255,255,.78); font-size:.88rem; font-weight:600; transition:color var(--trans); }
.nav-links a:hover, .nav-links a.active { color:#fff; }
.nav-links a.active { border-bottom:2px solid var(--green); padding-bottom:2px; }
.nav-right { display:flex; align-items:center; gap:1rem; }
.nav-phone { color:rgba(255,255,255,.75); font-size:.85rem; font-weight:600; display:flex; align-items:center; gap:.4rem; }
.nav-phone:hover { color:#fff; }
.nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span { display:block; width:100%; height:2px; background:rgba(255,255,255,.8); border-radius:999px; }
.mobile-menu { display:none; flex-direction:column; gap:.2rem; padding:1rem 1.25rem 1.25rem; border-top:1px solid rgba(255,255,255,.07); background:rgba(15,23,42,.97); }
.mobile-menu a { padding:.7rem .5rem; color:rgba(255,255,255,.82); font-weight:600; font-size:.95rem; border-radius:var(--radius-md); }
.mobile-menu a:hover { background:rgba(255,255,255,.06); color:#fff; }
.mobile-menu .btn { margin-top:.5rem; width:100%; }
.mobile-menu.open { display:flex; }

/* ── HERO ── */
.hero {
  position:relative;
  background-image:url('herobanner.jpg');
  background-size:cover;
  background-position:center 30%;
  background-repeat:no-repeat;
  color:#fff;
  padding:100px 0 108px;
  overflow:hidden;
}
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(10,18,35,.93) 0%,rgba(10,18,35,.78) 50%,rgba(10,18,35,.52) 100%); z-index:0; }
.hero::after  { content:""; position:absolute; top:-80px; right:-80px; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle,rgba(16,185,129,.16) 0%,transparent 70%); z-index:0; }
.hero .wrap   { position:relative; z-index:1; }
.hero-grid    { display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:.5rem; background:rgba(16,185,129,.14); border:1px solid rgba(16,185,129,.28); color:var(--green); border-radius:var(--radius-pill); padding:.32rem .85rem; font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.4rem; }
.hero-eyebrow span { width:7px; height:7px; border-radius:50%; background:var(--green); }
.hero p.lead  { color:rgba(255,255,255,.85); max-width:580px; }
.hero-btns    { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.85rem; }
.hero-trust   { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:2rem; }
.trust-chip   { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .85rem; border-radius:var(--radius-pill); background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.88); font-size:.82rem; font-weight:600; backdrop-filter:blur(4px); }

/* Hero right stat panel */
.hero-panel { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.11); border-radius:26px; padding:1.4rem; box-shadow:0 24px 64px rgba(0,0,0,.32); backdrop-filter:blur(8px); }
.stat-card  { background:rgba(255,255,255,.96); color:var(--navy); border-radius:20px; padding:1.3rem 1.4rem; margin-bottom:.9rem; box-shadow:var(--shadow-md); }
.stat-label { font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-dark); margin-bottom:.35rem; }
.stat-value { font-size:2.5rem; font-weight:900; line-height:1; margin-bottom:.35rem; }
.stat-desc  { color:var(--slate-600); font-size:.9rem; }
.mini-grid  { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.mini-card  { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.11); border-radius:16px; padding:.9rem; }
.mini-card strong { display:block; font-size:.93rem; margin-bottom:.2rem; color:#fff; }
.mini-card  span  { font-size:.82rem; color:rgba(255,255,255,.68); line-height:1.4; }

/* ── TRUST STRIP ── */
.trust-strip { background:var(--slate-50); border-top:1px solid var(--slate-200); border-bottom:1px solid var(--slate-200); padding:1.5rem 0; }
.trust-strip-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 2rem; }
.trust-badge { display:inline-flex; align-items:center; gap:.55rem; font-size:.85rem; font-weight:700; color:var(--slate-700); padding:.5rem 1.1rem; border-radius:var(--radius-pill); background:var(--white); border:1.5px solid var(--slate-200); box-shadow:var(--shadow-sm); }
.trust-badge .badge-dot { width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0; }
.trust-badge.amber .badge-dot { background:var(--amber); }

/* ── SERVICE CARDS / GRID ── */
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.services-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.svc-card { background:var(--white); border:1px solid var(--slate-200); border-radius:var(--radius-xl); padding:1.55rem; box-shadow:var(--shadow-sm); transition:transform var(--trans),box-shadow var(--trans),border-color var(--trans); display:flex; flex-direction:column; gap:.7rem; }
.svc-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(16,185,129,.3); }
.svc-icon { width:50px; height:50px; border-radius:14px; background:rgba(16,185,129,.1); color:var(--green-dark); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.svc-card p   { color:var(--slate-600); font-size:.93rem; line-height:1.55; margin:0; }
.svc-tags     { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:auto; }
.svc-tag      { font-size:.73rem; font-weight:600; padding:.22rem .55rem; border-radius:var(--radius-pill); background:var(--slate-100); color:var(--slate-600); }
.svc-link     { display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem; font-weight:700; color:var(--green-dark); margin-top:.25rem; }
.svc-link:hover { color:var(--navy); }

/* Phase cards */
.phase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.phase-card { background:var(--white); border:1px solid var(--slate-200); border-radius:var(--radius-xl); padding:1.6rem; box-shadow:var(--shadow-sm); }
.phase-num  { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--navy); color:#fff; font-size:.88rem; font-weight:800; margin-bottom:.9rem; }
.phase-card p { color:var(--slate-600); font-size:.93rem; line-height:1.55; margin:0; }

/* ── EFFICIENCY CALLOUT ── */
.callout-block { background:var(--navy); color:#fff; border-radius:var(--radius-xl); padding:2.8rem; display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; }
.callout-block h2 { color:#fff; margin-bottom:.75rem; }
.callout-block p  { color:rgba(255,255,255,.78); font-size:1.02rem; line-height:1.7; margin:0; }
.callout-stats    { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.callout-stat     { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); padding:1.1rem; text-align:center; }
.callout-stat strong { display:block; font-size:2rem; font-weight:900; color:var(--green); line-height:1; margin-bottom:.3rem; }
.callout-stat span   { font-size:.8rem; color:rgba(255,255,255,.65); font-weight:600; }

/* ── PRICING TEASER ── */
.pricing-strip { background:linear-gradient(135deg,#0F172A 0%,#1a2744 100%); color:#fff; padding:3.5rem 0; }
.pricing-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; }
.pricing-label { font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green); margin-bottom:.5rem; }
.pricing-title { font-size:clamp(1.5rem,3vw,2.2rem); font-weight:900; margin-bottom:.5rem; }
.pricing-cards { display:flex; flex-wrap:wrap; gap:1rem; }
.pricing-card  { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); padding:1.1rem 1.5rem; min-width:200px; }
.pricing-card .price { font-size:1.8rem; font-weight:900; color:var(--green); line-height:1; }
.pricing-card .price-label { font-size:.78rem; color:rgba(255,255,255,.65); font-weight:600; margin-top:.3rem; }
.pricing-card .price-service { font-size:.9rem; font-weight:700; color:#fff; margin-bottom:.35rem; }

/* ── FAQ SECTION ── */
.faq-list { display:grid; gap:1rem; max-width:800px; }
.faq-item { border:1px solid var(--slate-200); border-radius:var(--radius-md); overflow:hidden; }
.faq-q    { width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem 1.25rem; background:var(--white); border:none; cursor:pointer; font-family:inherit; font-size:.97rem; font-weight:700; color:var(--navy); text-align:left; transition:background var(--trans); }
.faq-q:hover { background:var(--slate-50); }
.faq-q svg   { flex-shrink:0; transition:transform var(--trans); }
.faq-q[aria-expanded="true"] svg { transform:rotate(180deg); }
.faq-a { display:none; padding:.1rem 1.25rem 1.1rem; color:var(--slate-700); font-size:.95rem; line-height:1.7; background:var(--white); }
.faq-a.open { display:block; }

/* ── CONTACT FORM ── */
.contact-section { background:var(--slate-50); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.contact-form { background:var(--white); border:1px solid var(--slate-200); border-radius:var(--radius-xl); padding:2rem; box-shadow:var(--shadow-sm); }
.form-row  { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { margin-bottom:1.1rem; }
.form-group label { display:block; font-size:.83rem; font-weight:700; color:var(--navy); margin-bottom:.4rem; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:.7rem .85rem; border:1.5px solid var(--slate-200); border-radius:var(--radius-sm); font-family:inherit; font-size:.93rem; color:var(--navy); transition:border-color var(--trans); background:var(--white); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--green); }
.form-group textarea { resize:vertical; min-height:110px; }
.contact-info-card { background:var(--navy); color:#fff; border-radius:var(--radius-xl); padding:2rem; }
.contact-info-card h3 { color:#fff; margin-bottom:1.25rem; }
.cinfo-row { display:flex; gap:.85rem; align-items:flex-start; margin-bottom:1.25rem; }
.cinfo-icon { width:40px; height:40px; border-radius:10px; background:rgba(16,185,129,.12); color:var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cinfo-row strong { display:block; font-size:.83rem; color:rgba(255,255,255,.6); margin-bottom:.15rem; }
.cinfo-row span   { font-size:.97rem; color:#fff; font-weight:600; }
.wa-btn-block { display:flex; align-items:center; gap:.85rem; background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.25); border-radius:var(--radius-lg); padding:1rem 1.15rem; margin-top:1.5rem; cursor:pointer; transition:background var(--trans); }
.wa-btn-block:hover { background:rgba(16,185,129,.2); }
.wa-btn-block strong { display:block; color:#fff; font-size:.9rem; }
.wa-btn-block span   { font-size:.8rem; color:rgba(255,255,255,.65); }

/* ── FOOTER ── */
.footer-main   { background:var(--white); border-top:1px solid var(--slate-200); padding:64px 0 32px; }
.footer-grid   { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:3rem; }
.footer-logo   { height:32px; width:auto; margin-bottom:1rem; }
.footer-tagline{ color:var(--slate-500); font-size:.92rem; max-width:320px; margin-bottom:1.25rem; line-height:1.6; }
.footer-col h4 { font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-400); margin-bottom:1rem; }
.footer-col ul { display:grid; gap:.6rem; }
.footer-col ul a { color:var(--slate-600); font-size:.92rem; transition:color var(--trans); }
.footer-col ul a:hover { color:var(--navy); }
.footer-bottom { background:var(--navy); }
.footer-bottom-inner { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem 0; font-size:.82rem; color:rgba(255,255,255,.5); }
.footer-bottom a { color:rgba(255,255,255,.6); transition:color var(--trans); }
.footer-bottom a:hover { color:#fff; }
.footer-loc { display:flex; gap:.75rem; align-items:flex-start; margin-top:1.25rem; background:var(--slate-50); border:1px solid var(--slate-200); border-radius:var(--radius-md); padding:1rem 1.1rem; }
.loc-icon { width:36px; height:36px; border-radius:9px; background:rgba(16,185,129,.1); color:var(--green-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.loc-text strong { display:block; font-size:.88rem; margin-bottom:.15rem; }
.loc-text span   { font-size:.82rem; color:var(--slate-500); }

/* ── FLOATING WHATSAPP BUTTON ── */
.wa-float { position:fixed; bottom:28px; right:28px; z-index:999; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 28px rgba(37,211,102,.45); transition:transform var(--trans),box-shadow var(--trans); text-decoration:none; }
.wa-float:hover { transform:scale(1.1); box-shadow:0 12px 36px rgba(37,211,102,.55); }
.wa-tooltip { position:absolute; right:70px; background:var(--navy); color:#fff; font-size:.8rem; font-weight:700; padding:.4rem .8rem; border-radius:var(--radius-pill); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--trans); }
.wa-float:hover .wa-tooltip { opacity:1; }

/* ── BREADCRUMB ── */
.breadcrumb { background:var(--slate-50); border-bottom:1px solid var(--slate-200); padding:.75rem 0; }
.breadcrumb-inner { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--slate-500); }
.breadcrumb-inner a { color:var(--green-dark); font-weight:600; }
.breadcrumb-inner span { color:var(--slate-400); }

/* ── PAGE HERO (SERVICE PAGES) ── */
.page-hero { background:linear-gradient(135deg,var(--navy) 0%,#1a2744 60%,#0d1f35 100%); color:#fff; padding:72px 0 80px; position:relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; top:-60px; right:-60px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(16,185,129,.14) 0%,transparent 70%); }
.page-hero .wrap { position:relative; z-index:1; }
.page-hero h1 { margin-bottom:1.1rem; }
.page-hero p.lead { color:rgba(255,255,255,.82); max-width:680px; }
.page-hero-btns { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.75rem; }

/* ── RESPONSIVE ── */
@media (max-width:1080px) {
  .hero-grid { grid-template-columns:1fr; }
  .services-grid, .services-grid-3, .phase-grid { grid-template-columns:1fr 1fr; }
  .callout-block { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid  { grid-template-columns:1fr 1fr; }
  .pricing-inner { flex-direction:column; align-items:flex-start; }
}
@media (max-width:768px) {
  .section, .section-sm { padding:64px 0; }
  .nav-links { display:none; }
  .nav-right .btn, .nav-phone { display:none; }
  .nav-toggle { display:flex; }
  .hero { padding:76px 0 84px; background-position:center center; }
  .services-grid, .services-grid-3, .phase-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .mini-grid { grid-template-columns:1fr 1fr; }
  .callout-stats { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  .wrap { width:calc(100% - 2rem); }
  .mini-grid, .callout-stats { grid-template-columns:1fr; }
  .pricing-cards { flex-direction:column; }
}