:root{--ink:#112E3C;--b900:#16394A;--b800:#1C4256;--b700:#21455A;--b600:#325261;--b500:#416578;
--pale:#D5DADD;--soft:#EDF2F3;--cream:#FAF8F3;--line:#E4EAEC;--sec:#4E6069;--muted:#8A9AA3;
--gold:#B08A4A;--goldt:#8A6A2F;--max:1120px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'ThmanyahSans',system-ui,sans-serif;color:var(--ink);background:#fff;
 line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:clip;font-size:17px}
h1,h2,h3{font-family:'ThmanyahDisplay','ThmanyahSans',serif;line-height:1.32;font-weight:700}
section[id]{scroll-margin-top:74px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.ltr{direction:ltr;unicode-bidi:isolate}
/* header */
header{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.94);
 backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;height:70px}
.nav .lk{justify-self:center}
.nav .lg img{height:30px;filter:brightness(0)}
.nav .sp{flex:1}
.nav .lk{display:flex;gap:26px}
.nav .lk a{font-size:15px;font-weight:600;color:var(--sec);white-space:nowrap}
.nav .lk a:hover,.nav .lk a.on{color:var(--ink)}
.lang{border:1px solid var(--line);background:#fff;font-family:inherit;font-size:12.5px;
 font-weight:700;padding:7px 14px;border-radius:30px;cursor:pointer;color:var(--sec);white-space:nowrap}
.lang:hover{border-color:var(--b500);color:var(--ink)}
@media(max-width:760px){.nav{grid-template-columns:auto 1fr auto;height:60px}
 .nav .lk{gap:16px;overflow-x:auto;scrollbar-width:none;justify-self:center}
 .nav .lk::-webkit-scrollbar{display:none}
 .nav .lk a{font-size:13.5px}}
@media(max-width:430px){.nav .lk a:nth-child(3){display:none}}
/* buttons */
.sm{display:inline-flex;align-items:center;gap:9px;border:1.5px solid rgba(255,255,255,.42);
 color:#fff;border-radius:30px;padding:8px 17px;font-size:13px;font-weight:700;letter-spacing:.3px;
 background:rgba(255,255,255,.07);margin-bottom:20px}
.sm svg{width:17px;height:17px;flex:none}
.sm .en{font-size:11px;opacity:.72;letter-spacing:2px}
.smd{border-color:rgba(176,138,74,.5);color:var(--goldt);background:rgba(176,138,74,.07)}
/* intro strip */
.intro{max-width:760px;margin-inline:auto;text-align:center}


.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;
 font-size:15px;font-weight:700;padding:14px 26px;border-radius:40px;border:1.5px solid transparent;
 cursor:pointer;transition:.18s;text-align:center}
.btn-p{background:var(--b700);color:#fff}.btn-p:hover{background:var(--b900)}
.btn-w{background:#fff;color:var(--ink)}.btn-w:hover{background:var(--cream)}
.btn-o{border-color:var(--line);color:var(--ink);background:#fff}.btn-o:hover{border-color:var(--b500)}
.btn-g{border-color:rgba(255,255,255,.35);color:#fff;background:transparent}.btn-g:hover{background:rgba(255,255,255,.12)}
.btns{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:520px){.btns{flex-direction:column}.btn{width:100%}}
/* hero */
.hero{position:relative;background:linear-gradient(160deg,#112E3C,#1C4256 58%,#2B586C);color:#fff;
 padding:0;overflow:hidden}
.hero .in{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
 padding:74px 0 78px}
.hero img.hp{width:100%;border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.34)}
.hero .im{max-width:440px;margin-inline:auto;width:100%}
.hero.wide .im{max-width:620px}
.hero.wide img.hp{aspect-ratio:16/8;object-fit:cover}
.hero .star{font-size:12px;letter-spacing:7px;color:#E0C07A;margin-bottom:16px}
.hero h1{font-size:clamp(36px,6vw,60px);line-height:1.2;letter-spacing:-.01em;color:#fff;margin-bottom:16px}
.hero p{font-size:17px;line-height:1.85;color:rgba(255,255,255,.82);max-width:470px;margin-bottom:30px}
@media(max-width:860px){.hero .in{grid-template-columns:1fr;padding:44px 0 54px;gap:26px}
 .hero .tx{order:2;text-align:center}.hero .im{order:1}
 .hero p{margin-inline:auto;max-width:100%}
 .hero .btns{flex-direction:column}
 .hero.wide .im{max-width:100%}}
/* sections */
section{padding:100px 0}
@media(max-width:700px){section{padding:62px 0}}
section.alt{background:var(--cream)}
.eye{font-size:12.5px;font-weight:800;letter-spacing:2px;color:var(--goldt);margin-bottom:12px}
h2.t{font-size:clamp(27px,3.6vw,40px);line-height:1.26;margin-bottom:14px}
.lead{font-size:18px;line-height:1.85;color:var(--sec);max-width:640px}
.ctr{text-align:center}.ctr .lead{margin-inline:auto}
.intro .lead{margin-inline:auto}
.intro .sm{margin-inline:auto}
/* products */
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:30px 0 26px}
.chip{font-family:inherit;font-size:13.5px;font-weight:700;padding:9px 18px;border-radius:30px;
 border:1px solid var(--line);background:#fff;color:var(--sec);cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--b500);color:var(--ink)}
.chip.on{background:var(--b700);border-color:var(--b700);color:#fff}
.p[hidden]{display:none}
@media(max-width:620px){.chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
 padding-inline:20px;margin-inline:-20px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
 .chip{flex:none}}
.pg{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:1000px){.pg{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.pg{grid-template-columns:repeat(2,1fr);gap:11px}}
.p{background:#fff;border-radius:16px;overflow:hidden;transition:.25s;position:relative;
 box-shadow:0 1px 2px rgba(17,46,60,.05),0 8px 24px rgba(17,46,60,.06)}
.p::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
 box-shadow:inset 0 0 0 1px rgba(176,138,74,.22)}
.p img{transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.p:hover img{transform:scale(1.045)}
.p:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(17,46,60,.1)}
.p img{aspect-ratio:1/1;object-fit:cover;width:100%;display:block;background:var(--soft)}
.p .b{padding:12px 13px;min-height:58px;display:flex;align-items:center}
.p h3{font-size:15px;font-weight:600;line-height:1.45;margin:0}

@media(max-width:560px){.p h3{font-size:13px}.p .b{padding:10px;min-height:52px}}
/* split */
.sp{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:860px){.sp{grid-template-columns:1fr;gap:26px}}
.sp img{border-radius:20px}
/* dark band */
.dk{background:linear-gradient(155deg,#112E3C,#21455A);color:#fff}
.dk h2.t,.dk h3{color:#fff}.dk .lead,.dk p{color:rgba(255,255,255,.8)}.dk .eye{color:#E0C07A}
/* feature cards */
.fc{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:34px}
.f{border-radius:16px;padding:22px;background:#fff;box-shadow:0 1px 2px rgba(17,46,60,.05),0 8px 22px rgba(17,46,60,.06)}
.dk .f{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.17)}
.f h3{font-size:16px;margin-bottom:5px}
.f p{font-size:15px;color:var(--sec);line-height:1.75}
.dk .f p{color:rgba(255,255,255,.76)}
/* steps */
.st{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;margin-top:34px}
.s{border-radius:16px;padding:24px;background:#fff;box-shadow:0 1px 2px rgba(17,46,60,.05),0 8px 22px rgba(17,46,60,.06)}
.dk .s{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.17)}
.s .n{width:33px;height:33px;border-radius:50%;background:var(--b700);color:#fff;font-weight:800;
 display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:12px}
.dk .s .n{background:#fff;color:var(--ink)}
.s h3{font-size:16px;margin-bottom:4px}
.s p{font-size:15px;color:var(--sec);line-height:1.75}
.dk .s p{color:rgba(255,255,255,.76)}
/* form */
/* المُجهِّز التفاعلي */
.bld{background:#fff;border-radius:22px;padding:28px;margin-top:34px;
 box-shadow:0 1px 2px rgba(17,46,60,.05),0 14px 36px rgba(17,46,60,.08)}
@media(max-width:620px){.bld{padding:18px;border-radius:18px}}
.bld h3{font-size:17px;margin-bottom:4px}
.bld .hint{font-size:14px;color:var(--muted);margin-bottom:16px}
.pick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.pick{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.pick{grid-template-columns:1fr 1fr;gap:10px}}
.pk{border-radius:14px;overflow:hidden;cursor:pointer;position:relative;background:var(--soft);
 box-shadow:inset 0 0 0 1px var(--line);transition:.18s}
.pk img{aspect-ratio:1/1;object-fit:cover;width:100%}
.pk span{display:block;padding:9px 10px;font-size:13.5px;font-weight:650;background:#fff}
.pk.on{box-shadow:inset 0 0 0 2.5px var(--b700)}
.pk .tick{position:absolute;inset-block-start:8px;inset-inline-end:8px;width:24px;height:24px;
 border-radius:50%;background:var(--b700);color:#fff;display:none;align-items:center;
 justify-content:center;font-size:13px;font-weight:800}
.pk.on .tick{display:flex}
.bld .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
@media(max-width:620px){.bld .row{grid-template-columns:1fr}}
.sum{margin-top:18px;background:var(--cream);border-radius:14px;padding:15px 17px;font-size:15px;
 line-height:1.9;color:var(--sec)}
.sum b{color:var(--ink)}
.form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;margin-top:32px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.fg{grid-template-columns:1fr}.form{padding:20px}}
.fl{display:flex;flex-direction:column;gap:6px}.fl.full{grid-column:1/-1}
label{font-size:13px;font-weight:700;color:var(--sec)}
input,select,textarea{font-family:inherit;font-size:16px;padding:13px 14px;border:1px solid var(--line);
 border-radius:12px;background:var(--soft);color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--b500);outline-offset:-1px;background:#fff}
textarea{min-height:96px;resize:vertical}
/* contact */
.cc{display:grid;grid-template-columns:repeat(auto-fit,minmax(222px,1fr));gap:14px;margin-top:34px}
.c{border-radius:16px;padding:24px;background:#fff;text-align:center;box-shadow:0 1px 2px rgba(17,46,60,.05),0 8px 22px rgba(17,46,60,.06)}
.c .i{margin:0 auto 11px;width:26px;height:26px;color:var(--b600)}
.c .i svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.5;fill:none}
.c h3{font-size:15px;margin-bottom:4px}
.c .v{font-size:15px;font-weight:800;direction:ltr;unicode-bidi:isolate;margin-bottom:12px;word-break:break-word}
footer{background:var(--ink);color:rgba(255,255,255,.62);padding:44px 0 26px;font-size:13.5px}
footer img{height:28px;filter:brightness(0) invert(1);opacity:.92;margin-bottom:14px}
footer .r{display:flex;gap:28px;flex-wrap:wrap}
footer .r>div{flex:1;min-width:190px}
@media(max-width:600px){footer .r>div{flex:1 1 100%;min-width:0}footer .r{gap:18px}}
footer b{color:#fff}
footer a:hover{color:#fff}
.fin{border-top:1px solid rgba(255,255,255,.13);margin-top:26px;padding-top:16px;font-size:11.5px;
 display:flex;gap:12px;flex-wrap:wrap}.fin .sp2{flex:1}
.rev{opacity:0;transform:translateY(18px);transition:.65s cubic-bezier(.2,.7,.3,1)}
.rev.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}
.ok{display:none;background:#E1F0E7;border:1px solid #1F7A4D;color:#15603C;border-radius:14px;
 padding:16px;margin-top:16px;font-size:15px;font-weight:700}