:root{
--ink:#0d1b2a;--ink-2:#1b2a3d;--muted:#5a6b7f;--line:#e3e9f0;--bg:#ffffff;--bg-2:#f6f8fb;
--brand:#0a3d62;--brand-2:#12608f;--accent:#c8891a;--accent-2:#e0a52f;--ok:#1a7f4b;
--r:14px;--r-lg:22px;--sh:0 1px 2px rgba(13,27,42,.06),0 8px 24px rgba(13,27,42,.06);
--sh-lg:0 2px 6px rgba(13,27,42,.08),0 18px 48px rgba(13,27,42,.10);
--max:1140px;--sp:clamp(56px,7vw,96px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
font-family:"SF Arabic","Segoe UI",system-ui,-apple-system,"Noto Naskh Arabic",Tahoma,Arial,sans-serif;
font-size:17px;line-height:1.85;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.5;margin:0 0 .6em;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(29px,4.8vw,46px);line-height:1.45;padding-block:2px}
h2{font-size:clamp(24px,3.6vw,35px)}
h3{font-size:clamp(19px,2.4vw,23px)}
p{margin:0 0 1.1em}
.wrap{width:min(100% - 40px,var(--max));margin-inline:auto}
.sec{padding-block:var(--sp)}
.sec--alt{background:var(--bg-2);border-block:1px solid var(--line)}
.eyebrow{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.14em;
color:var(--accent);text-transform:uppercase;margin-bottom:14px}
.lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:62ch}
.center{text-align:center}.center .lead{margin-inline:auto}
/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:20px;min-height:74px}
.brand{display:flex;align-items:center;gap:11px;font-weight:900;font-size:20px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand__mark{width:38px;height:38px;border-radius:11px;flex:none;
background:linear-gradient(140deg,var(--brand) 0%,var(--brand-2) 60%,var(--accent) 160%);
display:grid;place-items:center;color:#fff;font-size:15px;font-weight:900;letter-spacing:-.5px}
.brand__sub{display:block;font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-top:-4px}
.nav{margin-inline-start:auto;display:flex;align-items:center;gap:4px}
.nav a{padding:9px 13px;border-radius:9px;color:var(--ink-2);font-size:15.5px;font-weight:600}
.nav a:hover{background:var(--bg-2);text-decoration:none}
.nav a[aria-current=page]{color:var(--brand-2);background:#eef4f9}
.burger{display:none;margin-inline-start:auto;width:44px;height:44px;border:1px solid var(--line);
background:#fff;border-radius:11px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:19px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;inset-inline:0;height:2px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media(max-width:980px){
.burger{display:flex}
.nav{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
background:#fff;border-bottom:1px solid var(--line);padding:14px 20px 22px;
box-shadow:var(--sh);display:none}
.nav.is-open{display:flex}
.nav a{padding:13px 12px;font-size:17px}
}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:14px 24px;border-radius:12px;font-weight:800;font-size:16px;border:1px solid transparent;
cursor:pointer;transition:transform .12s ease,box-shadow .18s ease,background .18s ease;white-space:nowrap}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--wa{background:#1faf54;color:#fff;box-shadow:0 6px 18px rgba(31,175,84,.28)}
.btn--wa:hover{background:#18994a}
.btn--tel{background:var(--brand);color:#fff;box-shadow:0 6px 18px rgba(10,61,98,.24)}
.btn--tel:hover{background:#0c4a76}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:#c6d3e0;background:var(--bg-2)}
.btn--lg{padding:17px 30px;font-size:17px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.center .btns{justify-content:center}
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:
radial-gradient(1100px 520px at 88% -12%,rgba(200,137,26,.13),transparent 60%),
radial-gradient(900px 500px at 8% 0%,rgba(18,96,143,.14),transparent 62%),
linear-gradient(180deg,#fbfcfe 0%,#ffffff 100%)}
.hero__in{padding-block:clamp(52px,7vw,92px)}
.hero h1{max-width:19ch}
.hero .lead{max-width:56ch;font-size:clamp(17px,2.1vw,20.5px)}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center}
@media(max-width:900px){.hero__grid{grid-template-columns:1fr}}
.hero__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
padding:26px;box-shadow:var(--sh-lg)}
.hero__card h3{font-size:18px;margin-bottom:16px}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-inline-start:44px;margin-bottom:16px;
font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.steps li:last-child{margin-bottom:0}
.steps li::before{content:counter(s);position:absolute;inset-inline-start:0;top:2px;width:29px;height:29px;
border-radius:50%;background:#eef4f9;color:var(--brand-2);font-weight:900;font-size:14px;
display:grid;place-items:center}
/* ---------- cards ---------- */
.grid{display:grid;gap:20px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid--3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid--3,.grid--2{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
box-shadow:var(--sh);transition:transform .16s ease,box-shadow .22s ease,border-color .22s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:#d3dfeb}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:15.5px;margin-bottom:14px}
.card__ico{width:46px;height:46px;border-radius:13px;background:#eef4f9;color:var(--brand-2);
display:grid;place-items:center;margin-bottom:16px}
.card__ico svg{width:23px;height:23px}
.more{font-weight:800;font-size:15px;color:var(--brand-2)}
.more::after{content:" ←"}
/* ---------- trust ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:820px){.trust{grid-template-columns:1fr 1fr}}
.trust__i{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 18px;text-align:center}
.trust__i b{display:block;font-size:16px;margin-bottom:4px}
.trust__i span{font-size:14px;color:var(--muted);line-height:1.6}
/* ---------- faq ---------- */
.faq{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:20px 24px;font-weight:700;font-size:17px;list-style:none;
display:flex;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-inline-start:auto;font-size:23px;color:var(--brand-2);
font-weight:700;line-height:1;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{color:var(--brand-2)}
.faq .a{padding:0 24px 22px;color:var(--muted);font-size:15.8px}
.faq .a p:last-child{margin-bottom:0}
/* ---------- cta band ---------- */
.band{background:linear-gradient(135deg,var(--brand) 0%,#0d4f7c 55%,#12608f 100%);color:#fff;
border-radius:var(--r-lg);padding:clamp(30px,4.5vw,52px);text-align:center}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.86);max-width:58ch;margin-inline:auto}
.band .btn--ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.band .btn--ghost:hover{background:rgba(255,255,255,.2)}
/* ---------- form ---------- */
.form{display:grid;gap:16px}
.field label{display:block;font-weight:700;font-size:15px;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1px solid var(--line);
border-radius:11px;font:inherit;font-size:16px;background:#fff;color:var(--ink);transition:border-color .16s,box-shadow .16s}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brand-2);
box-shadow:0 0 0 3px rgba(18,96,143,.13)}
.field textarea{min-height:130px;resize:vertical}
.hp{position:absolute!important;left:-9999px!important;opacity:0}
.note{font-size:13.5px;color:var(--muted)}
.alert{padding:15px 18px;border-radius:12px;font-weight:700;font-size:15.5px;margin-bottom:20px}
.alert--ok{background:#e8f6ee;color:#12643b;border:1px solid #bfe3ce}
.alert--err{background:#fdecec;color:#a02020;border:1px solid #f5c6c6}
/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#c3cfdb;padding-block:clamp(44px,5vw,66px) 26px;margin-top:var(--sp)}
.ftr a{color:#dbe4ec}
.ftr__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px}
@media(max-width:820px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr__grid{grid-template-columns:1fr}}
.ftr h4{color:#fff;font-size:15.5px;margin-bottom:14px;letter-spacing:.02em}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:9px;font-size:15px}
.ftr .brand{color:#fff}.ftr .brand__sub{color:#93a4b5}
.ftr__bottom{border-top:1px solid rgba(255,255,255,.11);margin-top:34px;padding-top:20px;
display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:14px;color:#8fa1b3}
/* ---------- floating ---------- */
.float{position:fixed;inset-inline-end:16px;bottom:16px;z-index:70;display:flex;flex-direction:column;gap:10px}
.float a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;
box-shadow:0 6px 20px rgba(13,27,42,.28)}
.float a:hover{text-decoration:none;transform:translateY(-2px)}
.float svg{width:26px;height:26px}
.float__wa{background:#1faf54}.float__tel{background:var(--brand)}
@media(max-width:560px){.float{inset-inline-end:12px;bottom:12px}.float a{width:50px;height:50px}}
.skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--brand);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{inset-inline-start:10px;top:10px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}