ProGuard

/* Arabic-first (RTL) dark charcoal + hot-magenta neon, mirroring the proguard.sa feed. Hero thesis → service grid → why → WhatsApp CTA band → contact. Single committed dark theme. */
:root{
–bg:#0A090C; –surface:#141117; –surface-2:#1C1822; –raise:#241E2B;
–fg:#F4EFF6; –muted:#9A909F; –line:#2B2533;
–accent:#FF1E8E; –accent-2:#C70068; –accent-ink:#1A0410;
–wa:#25D366; –wa-ink:#07120B;
–glow:0 0 0 1px rgba(255,30,142,.0),0 18px 48px rgba(255,30,142,.18);
–shadow:0 1px 2px rgba(0,0,0,.5),0 14px 40px rgba(0,0,0,.5);
–maxw:1120px;
–f-disp:”Cairo”,”Segoe UI”,system-ui,sans-serif;
–f-body:”Tajawal”,”Cairo”,system-ui,sans-serif;
–f-en:”Saira Condensed”,”Arial Narrow”,system-ui,sans-serif;
color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(–bg);color:var(–fg);font-family:var(–f-body);line-height:1.6;-webkit-font-smoothing:antialiased}
.page{direction:rtl}
.wrap{max-width:var(–maxw);margin-inline:auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
h1,h2,h3{text-wrap:balance;margin:0}
a{color:inherit}
.en{font-family:var(–f-en);direction:ltr;unicode-bidi:isolate}
.eyebrow{font-family:var(–f-en);text-transform:uppercase;letter-spacing:.16em;font-weight:600;font-size:.82rem;color:var(–accent);direction:ltr;display:inline-block}

body::before{content:””;position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:#0A090C}

/* ———- Header ———- */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(–bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(–line)}
.bar{display:flex;align-items:center;gap:18px;padding-block:12px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .word{font-family:var(–f-en);font-weight:700;font-size:1.4rem;letter-spacing:.02em;line-height:1}
.brand .word b{color:var(–accent);font-weight:700}
nav.links{display:flex;gap:26px;margin-inline-start:auto;font-weight:500;font-size:1rem}
nav.links a{text-decoration:none;color:var(–muted)}
nav.links a:hover{color:var(–fg)}
.wa-btn{display:inline-flex;align-items:center;gap:8px;background:var(–wa);color:var(–wa-ink);font-weight:700;font-size:.95rem;padding:9px 16px;border-radius:10px;text-decoration:none;white-space:nowrap}
@media(max-width:780px){nav.links{display:none}.wa-btn{margin-inline-start:auto}}

/* ———- Hero ———- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(–line)}
.hero::before{content:””;position:absolute;inset:0;background:
radial-gradient(60% 55% at 78% 28%,rgba(255,30,142,.28),transparent 70%),
radial-gradient(45% 40% at 10% 90%,rgba(199,0,104,.18),transparent 70%);pointer-events:none}
.hero::after{content:””;position:absolute;inset:0;opacity:.5;pointer-events:none;
background-image:url(‘data:image/svg+xml;utf8,’);
background-size:56px 48px}
.hero-grid{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:40px;align-items:center;padding-block:66px}
.hero h1{font-family:var(–f-disp);font-weight:900;line-height:1.12;font-size:clamp(2.2rem,6.2vw,3.9rem);letter-spacing:-.01em}
.hero h1 .hl{color:var(–accent)}
.hero .tag-en{font-family:var(–f-en);text-transform:uppercase;letter-spacing:.22em;font-weight:600;font-size:clamp(.85rem,2.4vw,1.05rem);color:var(–muted);margin-top:14px;direction:ltr}
.hero p.lead{color:var(–muted);font-size:1.12rem;max-width:44ch;margin-top:18px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:1rem;padding:13px 22px;border-radius:12px;text-decoration:none;border:1.5px solid transparent;cursor:pointer}
.btn.wa{background:var(–wa);color:var(–wa-ink)}
.btn.ghost{border-color:var(–line);color:var(–fg);background:var(–surface)}
.btn.ghost:hover{border-color:var(–accent)}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:30px;color:var(–muted);font-size:.95rem}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.hero-meta b{color:var(–fg);font-weight:700}
.shield-art{display:flex;justify-content:center;align-items:center}
.shield-art svg{width:min(340px,82%);height:auto;filter:drop-shadow(0 22px 50px rgba(255,30,142,.4))}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr;gap:22px;padding-block:46px}.shield-art{order:-1}.shield-art svg{width:190px}}

/* ———- Sections ———- */
section{padding-block:62px}
.sec-head{display:flex;flex-direction:column;gap:7px;margin-bottom:34px}
.sec-head h2{font-family:var(–f-disp);font-weight:800;font-size:clamp(1.7rem,5vw,2.5rem);letter-spacing:-.01em;line-height:1.15}
.sec-head .h2-en{font-family:var(–f-en);text-transform:uppercase;letter-spacing:.14em;font-weight:600;font-size:.9rem;color:var(–muted);direction:ltr}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:880px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.svc-grid{grid-template-columns:1fr}}
.svc{background:var(–surface);border:1px solid var(–line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:11px;min-width:0;position:relative;overflow:hidden}
.svc::before{content:””;position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:linear-gradient(var(–accent),var(–accent-2));opacity:0;transition:opacity .2s}
.svc:hover::before{opacity:1}
.svc:hover{border-color:#3a3242}
.svc .ico{width:46px;height:46px;border-radius:12px;background:var(–surface-2);display:grid;place-items:center;color:var(–accent)}
.svc h3{font-family:var(–f-disp);font-weight:800;font-size:1.3rem;line-height:1.2}
.svc .en-sub{font-family:var(–f-en);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(–muted);margin-top:-6px;direction:ltr}
.svc p{color:var(–muted);font-size:.97rem;margin:0}

/* Why */
#why{background:var(–surface)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:880px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.why-grid{grid-template-columns:1fr}}
.why{display:flex;flex-direction:column;gap:8px;padding:22px;background:var(–bg);border:1px solid var(–line);border-radius:16px}
.why .ico{color:var(–accent)}
.why h3{font-family:var(–f-disp);font-weight:700;font-size:1.15rem}
.why p{color:var(–muted);font-size:.92rem;margin:0}

/* CTA band */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(120deg,var(–accent-2),var(–accent));border-radius:22px;padding:44px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;box-shadow:var(–glow)}
.cta-band h2{font-family:var(–f-disp);font-weight:900;color:#fff;font-size:clamp(1.5rem,4.5vw,2.2rem);max-width:18ch}
.cta-band p{color:rgba(255,255,255,.9);margin:8px 0 0;font-size:1.05rem}
.btn.onwhite{background:#120309;color:#fff}
.btn.onwhite:hover{background:#000}

/* Contact */
#contact .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center}
@media(max-width:880px){#contact .wrap{grid-template-columns:1fr;gap:26px}}
.contact-card{background:var(–surface);border:1px solid var(–line);border-radius:18px;padding:28px}
.crow{display:flex;gap:15px;padding:15px 0;border-bottom:1px solid var(–line)}
.crow:last-child{border-bottom:0}
.crow .ci{color:var(–accent);flex:0 0 auto;margin-top:3px}
.crow .lbl{font-family:var(–f-en);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(–muted);direction:ltr}
.crow .val{font-weight:700;font-size:1.08rem;word-break:break-word}
.crow .val a{text-decoration:none}
.crow .num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}

footer{border-top:1px solid var(–line);padding-block:28px;color:var(–muted);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between}
footer .word{font-family:var(–f-en);font-weight:700}
footer .word b{color:var(–accent)}

/* Floating WhatsApp */
.wa-float{position:fixed;inset-block-end:calc(18px + env(safe-area-inset-bottom,0px));inset-inline-end:calc(18px + env(safe-area-inset-right,0px));z-index:50;display:inline-flex;align-items:center;gap:10px;background:var(–wa);color:var(–wa-ink);font-weight:700;padding:13px 18px;border-radius:999px;text-decoration:none;box-shadow:0 10px 30px rgba(37,211,102,.4)}
.wa-float .lbl{font-size:.95rem}
@media(max-width:540px){.wa-float .lbl{display:none}.wa-float{padding:15px;border-radius:50%}}

@media (prefers-reduced-motion:no-preference){a,.btn,.svc,.svc::before{transition:color .15s,background .15s,border-color .15s,opacity .2s}}
:focus-visible{outline:2px solid var(–accent);outline-offset:3px}

واتساب