/* Cairo variable font, self-hosted (OFL). Subsets split by unicode-range so only the needed files load. */
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url(fonts/cairo-arabic-wght-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EEFF}
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url(fonts/cairo-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url(fonts/cairo-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Layout concept: corporate service company. Deep-blue hero band with a white contact card,
   an overlapping trust strip, white cards with soft shadows. Blue and white only. */
:root{
  --bg:#F3F7FC; --surface:#FFFFFF; --surface-2:#E6EEF9; --fg:#0B1F3A; --muted:#475B78; --line:#D5E0EF;
  --accent:#1558D6; --danger:#B42318; --on-accent:#FFFFFF; --accent-soft:#E7EFFD; --focus:#1558D6;
  --band:#0A2E6E; --band-deep:#071F4D; --on-band:#FFFFFF; --band-muted:#BCCDE8; --band-line:#2B4D8A; --accent-on-band:#9CC2FF;
  --shadow:0 1px 2px rgba(11,31,58,.06),0 10px 28px rgba(11,31,58,.08);
  --font-display:'Cairo','Segoe UI',Tahoma,sans-serif;
  --font-body:'Cairo','Segoe UI',Tahoma,sans-serif;
  --font-mono:'Cairo','Segoe UI',Tahoma,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#06132A; --surface:#0D2042; --surface-2:#132A52; --fg:#E8F0FB; --muted:#9DB0CE; --line:#21396A;
    --accent:#5B9BFF; --danger:#FF9A8F; --on-accent:#04122B; --accent-soft:#102650; --focus:#8DB8FF;
    --band:#0B2A5C; --band-deep:#051B3F; --on-band:#FFFFFF; --band-muted:#B5C7E4; --band-line:#2C4D88; --accent-on-band:#9CC2FF;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#06132A; --surface:#0D2042; --surface-2:#132A52; --fg:#E8F0FB; --muted:#9DB0CE; --line:#21396A;
  --accent:#5B9BFF; --danger:#FF9A8F; --on-accent:#04122B; --accent-soft:#102650; --focus:#8DB8FF;
  --band:#0B2A5C; --band-deep:#051B3F; --on-band:#FFFFFF; --band-muted:#B5C7E4; --band-line:#2C4D88; --accent-on-band:#9CC2FF;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:1.05rem;line-height:1.75;direction:rtl;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.4;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
ul,ol{margin:0;padding:0}
.mono{font-family:var(--font-mono);letter-spacing:.14em;font-size:.72rem;font-weight:600}
.wrap{max-width:72.5rem;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.band :focus-visible,.notice :focus-visible,.hero :focus-visible{outline-color:var(--accent-on-band)}
/* top notice bar */
.notice{background:var(--band-deep);color:var(--on-band);font-size:.88rem;line-height:1.6}
.notice .wrap{padding-block:.5rem;display:flex;flex-wrap:wrap;gap:.2rem 1.25rem;align-items:center;justify-content:space-between}
.notice a{color:var(--accent-on-band);font-weight:600}
.notice-hot{font-weight:600}
/* header */
.site-head{background:var(--surface);border-bottom:1px solid var(--line);z-index:50;box-shadow:0 1px 0 rgba(11,31,58,.02)}
.head-in{display:flex;align-items:center;gap:.75rem 1.25rem;flex-wrap:wrap;padding-block:.75rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.mark{width:2.5rem;height:2.5rem;border-radius:9px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex:none}
.mark-img{width:2.5rem;height:2.5rem;flex:none;display:block}
.brand-text{display:grid;line-height:1.15}
.brand-ar{font-family:var(--font-display);font-weight:800;font-size:1.3rem}
.brand-en{font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.24em;color:var(--muted)}
.nav{display:flex;gap:.15rem;flex:1;justify-content:center;flex-wrap:wrap}
.nav a{padding:.45rem .85rem;border-radius:8px;text-decoration:none;font-weight:600;font-size:.97rem}
.nav a:hover{background:var(--accent-soft);color:var(--accent)}
@media (min-width:900px){.site-head{position:sticky;top:env(safe-area-inset-top,0px)}}
@media (max-width:899px){
  .head-in .btn{margin-inline-start:auto}
  .nav{order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:.2rem}
  .nav a{white-space:nowrap}
}
/* mobile header */
.nav-toggle{display:none}
@media (max-width:899px){
  .notice .wrap{padding-block:.4rem;justify-content:center;text-align:center;font-size:.8rem}
  .notice-hot{display:none}
  .site-head{position:sticky;top:0;box-shadow:0 2px 14px rgba(11,31,58,.08)}
  .head-in{flex-wrap:nowrap;gap:.6rem;padding-block:.55rem}
  .brand{gap:.55rem}
  .brand-ar{font-size:1.1rem;white-space:nowrap}
  .brand-en{white-space:nowrap;font-size:.56rem}
  .brand{min-width:0}
  .head-in .btn{margin-inline-start:auto;white-space:nowrap}
  .nav-toggle{display:inline-grid;place-items:center;flex:none;width:2.6rem;height:2.6rem;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;padding:0}
  .nav-toggle:hover{background:var(--accent-soft);color:var(--accent)}
  .nav-toggle svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
  .nav-toggle .i-close{display:none}
  .nav-toggle[aria-expanded="true"] .i-open{display:none}
  .nav-toggle[aria-expanded="true"] .i-close{display:block}
  .nav{display:none;position:absolute;top:100%;inset-inline:0;order:0;flex-basis:auto;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;gap:0;overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - 7rem);background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 14px 26px rgba(11,31,58,.14);padding:.4rem 1rem 1rem;z-index:70}
  .nav.open{display:flex}
  .nav a{display:block;white-space:normal;padding:.9rem .35rem;border-radius:0;border-bottom:1px solid var(--line);font-size:1.02rem}
  .nav .has-sub{display:block;border-bottom:1px solid var(--line)}
  .nav .has-sub > a{border-bottom:0}
  .nav .sub{display:none!important}
  .nav > a:last-child{border-bottom:0}
}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.6rem 1.35rem;border-radius:8px;font:inherit;font-weight:700;text-decoration:none;border:1.5px solid transparent;cursor:pointer;line-height:1.4;text-align:center}
.btn-sm{min-height:42px;padding:.4rem 1.05rem;font-size:.95rem}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 86%,#000)}
.btn-ghost{border-color:var(--accent);color:var(--accent);background:transparent}
.btn-ghost:hover{background:var(--accent-soft)}
/* hero */
.hero{background:var(--band);color:var(--on-band);position:relative;overflow:hidden;padding-block:clamp(2.75rem,6vw,4.75rem) clamp(5.5rem,9vw,7rem)}
.hero{background-image:linear-gradient(color-mix(in srgb,var(--band) 80%,transparent),color-mix(in srgb,var(--band) 86%,transparent)),url(images/hero-appliances.webp);background-size:cover;background-position:center}
/* hero-mobile */@media (max-width:860px){.hero{background-image:linear-gradient(to bottom,color-mix(in srgb,var(--band) 68%,transparent) 0,var(--band) 68vw),url(images/hero-appliances.webp);background-size:100% 100%,100% auto;background-position:top,top center;background-repeat:no-repeat}}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--on-band) 14%,transparent) 1.2px,transparent 1.2px);background-size:24px 24px;-webkit-mask-image:linear-gradient(to left,#000,transparent 65%);mask-image:linear-gradient(to left,#000,transparent 65%);pointer-events:none}
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:860px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:.95rem;color:var(--accent-on-band)}
.eyebrow::before{content:"";width:2rem;height:2px;background:currentColor}
.hero h1{color:var(--on-band);font-weight:800;font-size:clamp(2rem,5vw,3.3rem);line-height:1.4;margin:.7rem 0 1.1rem}
.lead{font-size:1.12rem;color:var(--band-muted);max-width:38rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.hero .btn-primary{background:var(--on-band);color:var(--band)}
.hero .btn-primary:hover{background:color-mix(in srgb,var(--on-band) 88%,var(--band))}
.hero .btn-ghost{border-color:var(--on-band);color:var(--on-band)}
.hero .btn-ghost:hover{background:color-mix(in srgb,var(--on-band) 14%,transparent)}
.hero-note{margin-top:1.5rem;font-size:.92rem;color:var(--band-muted);max-width:36rem}
.hero-note a{color:var(--accent-on-band);font-weight:700}
/* contact card (appliance rating plate) */
.plate{background:var(--surface);color:var(--fg);border-radius:14px;overflow:hidden;box-shadow:0 22px 50px rgba(0,0,0,.28)}
.plate-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--accent);color:var(--on-accent);padding:.7rem 1.1rem;font-weight:700;font-size:.95rem}
.plate-head .mono{font-size:.64rem}
.plate-row{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:1rem;align-items:baseline;padding:.9rem 1.1rem;border-top:1px solid var(--line)}
.plate-head + .plate-row{border-top:0}
.plate-label{font-size:.88rem;color:var(--muted);font-weight:600}
.plate-val{display:block;direction:ltr;text-align:right;font-weight:700;font-size:1rem;overflow-wrap:anywhere;text-decoration:none;line-height:1.5}
a.plate-val:hover{color:var(--accent)}
.plate-hot{display:block;direction:ltr;text-align:right;font-family:var(--font-display);font-weight:800;font-size:clamp(2.8rem,6vw,3.7rem);line-height:1.05;color:var(--accent);text-decoration:none}
.plate-foot{background:var(--accent-soft);border-top:1px solid var(--line);padding:.75rem 1.1rem;font-size:.88rem;font-weight:600}
/* trust strip */
.trust{margin-top:-3.2rem;position:relative;z-index:2;padding-bottom:clamp(2.5rem,5vw,3.5rem)}
.trust-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:1040px){.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:519px){.trust-grid{grid-template-columns:minmax(0,1fr)}}
.trust-item{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:1.1rem;display:grid;grid-template-columns:2.7rem minmax(0,1fr);gap:.1rem .85rem;align-items:start}
.trust-item svg{grid-row:1 / span 2;width:2.7rem;height:2.7rem;padding:.6rem;border-radius:10px;background:var(--accent-soft);color:var(--accent);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trust-item h3{font-size:1.02rem}
.trust-item p{font-size:.9rem;color:var(--muted);line-height:1.65}
/* sections */
.section{padding-block:clamp(3rem,7vw,5.5rem)}
.section-surface{background:var(--surface);border-block:1px solid var(--line)}
.sec-head{max-width:44rem;margin-bottom:2.4rem}
.sec-head.center{text-align:center;margin-inline:auto}
.sec-eyebrow{display:block;color:var(--accent);font-weight:700;font-size:.95rem;margin-bottom:.3rem}
.sec-head h2{font-size:clamp(1.6rem,3.5vw,2.3rem);font-weight:800;margin-bottom:.7rem}
.sec-head p{color:var(--muted)}
.band{background:var(--band);color:var(--on-band)}
/* services */
.svc-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
@media (max-width:1040px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:519px){.svc-grid{grid-template-columns:minmax(0,1fr)}}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.4rem 1.25rem 1.5rem;display:grid;gap:.75rem;align-content:start;box-shadow:var(--shadow);border-top:3px solid var(--line);transition:border-color .15s}
.section-surface .svc{background:var(--bg)}
.svc:hover{border-top-color:var(--accent)}
.ico{width:3.5rem;height:3.5rem;padding:.7rem;border-radius:12px;background:var(--accent-soft);color:var(--accent);fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.svc h3{font-size:1.2rem}
.svc p{font-size:.94rem;color:var(--muted);line-height:1.75}
/* steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:519px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:1.4rem 1.25rem;display:grid;gap:.55rem;align-content:start}
.steps .n{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:1rem}
.steps h3{font-size:1.15rem}
.steps p{font-size:.95rem;color:var(--muted);line-height:1.75}
/* guide */
.guide-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:900px){.guide-grid{grid-template-columns:minmax(0,1fr)}}
.guide-grid .sec-head{margin-bottom:0}
.safety{margin-top:1.5rem;background:var(--accent-soft);border:1px solid var(--line);border-inline-start:4px solid var(--accent);border-radius:10px;padding:1rem 1.1rem;font-size:.95rem;line-height:1.8}
.safety strong{display:block;margin-bottom:.2rem;color:var(--accent)}
.acc details{border-top:1px solid var(--line)}
.acc details:last-child{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem .25rem;min-height:56px;font-family:var(--font-display);font-size:1.15rem;font-weight:700}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";width:.6rem;height:.6rem;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .2s;flex:none;margin-left:.3rem;margin-top:-.2rem}
.acc details[open] summary::after{transform:rotate(-135deg);margin-top:.2rem}
.acc .ans{padding:0 .25rem 1.3rem;color:var(--muted);max-width:42rem}
.acc .ans a{color:var(--accent);font-weight:600}
.faults{margin:0 0 .4rem;padding:0 .25rem}
.faults > div{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.2rem 1.25rem;padding:.8rem 0;border-top:1px dashed var(--line)}
.faults > div:first-child{border-top:0}
.faults dt{font-weight:700;color:var(--fg);line-height:1.6}
.faults dd{margin:0;color:var(--muted);line-height:1.8;font-size:.96rem}
@media (max-width:640px){.faults > div{grid-template-columns:minmax(0,1fr)}}
.guide-note{padding:0 .25rem;font-size:.88rem;color:var(--muted);margin-top:.4rem}
/* independence band */
.ind-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:860px){.ind-grid{grid-template-columns:minmax(0,1fr)}}
.band h2{font-size:clamp(1.75rem,4vw,2.6rem);font-weight:800;margin:.6rem 0 1rem}
.band .lede{color:var(--band-muted);max-width:30rem}
.band .more{display:inline-block;margin-top:1.3rem;color:var(--accent-on-band);font-weight:700}
.ind-list{list-style:none;display:grid}
.ind-list li{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.2rem 1rem;padding:1.1rem 0;border-top:1px solid var(--band-line)}
.ind-list li:last-child{border-bottom:1px solid var(--band-line)}
.ind-list svg{width:1.5rem;height:1.5rem;color:var(--accent-on-band);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:.25rem}
.ind-list h3{font-size:1.1rem}
.ind-list p{grid-column:2;color:var(--band-muted);font-size:.96rem;line-height:1.8}
/* request */
.req-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,5vw,3.5rem);align-items:start}
@media (max-width:900px){.req-grid{grid-template-columns:minmax(0,1fr)}}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:clamp(1.1rem,3vw,1.9rem)}
.form-card h3,.direct h3{font-size:1.35rem;margin-bottom:1rem}
.f-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:560px){.f-row{grid-template-columns:minmax(0,1fr)}}
.field{display:grid;gap:.35rem;margin-bottom:1rem}
.field label{font-weight:700;font-size:.95rem}
.field input,.field select,.field textarea{font:inherit;color:var(--fg);background:var(--bg);border:1.5px solid var(--line);border-radius:8px;padding:.65rem .85rem;min-height:48px;width:100%}
.field textarea{min-height:7.5rem;resize:vertical;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.f-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.4rem}
.f-note{margin-top:1rem;font-size:.88rem;color:var(--muted)}
.direct-list{list-style:none;display:grid;border-top:1px solid var(--line)}
.direct-list li{display:grid;grid-template-columns:5.2rem minmax(0,1fr) auto;gap:.5rem 1rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--line)}
.direct-list .l{font-size:.9rem;color:var(--muted);font-weight:600}
.direct-list a{direction:ltr;text-align:right;font-weight:700;overflow-wrap:anywhere;text-decoration:none;line-height:1.5}
.direct-list a:hover{color:var(--accent)}
.direct-list a.big{font-family:var(--font-display);font-weight:800;font-size:1.9rem;line-height:1.1;color:var(--accent)}
.copy{font:inherit;font-size:.85rem;font-weight:700;min-height:36px;padding:.25rem .85rem;border-radius:8px;border:1.5px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
.copy:hover{border-color:var(--accent);color:var(--accent)}
.direct .after{margin-top:1.1rem;font-size:.9rem;color:var(--muted)}
/* legal views */
.legal{max-width:46rem;margin-inline:auto;padding-block:clamp(2.5rem,6vw,4rem) clamp(3rem,7vw,5rem);counter-reset:c}
.legal .back{display:inline-block;margin-bottom:1.4rem;color:var(--accent);font-weight:700}
.legal h1{font-size:clamp(1.9rem,4.6vw,2.7rem);font-weight:800;margin-bottom:.5rem}
.legal .meta{font-size:.85rem;color:var(--muted);margin-bottom:1.6rem}
.legal h2{font-size:1.3rem;margin:2.2rem 0 .6rem;counter-increment:c}
.legal h2::before{content:counter(c) ". ";color:var(--accent)}
.legal p,.legal li{max-width:65ch}
.legal p + p{margin-top:.8rem}
.legal ul{padding-inline-start:1.3rem;display:grid;gap:.4rem;margin-top:.6rem}
.legal .callout{margin-top:1.4rem;background:var(--accent-soft);border:1px solid var(--line);border-inline-start:4px solid var(--accent);border-radius:10px;padding:1rem 1.1rem}
.legal a{color:var(--accent);font-weight:600}
/* footer */
.site-foot{background:var(--band-deep);padding-block:3rem 2rem;font-size:.95rem}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:2rem}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:519px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
.site-foot h3{font-size:1rem;margin-bottom:.7rem;color:var(--on-band)}
.site-foot ul{list-style:none;display:grid;gap:.35rem}
.site-foot a{text-decoration:none;color:var(--band-muted)}
.site-foot a:hover{color:var(--accent-on-band);text-decoration:underline}
.site-foot .ltr{direction:ltr;display:inline-block;overflow-wrap:anywhere}
.foot-brand p{color:var(--band-muted);margin-top:.8rem;max-width:22rem;line-height:1.8}
.foot-brand .brand-ar{color:var(--on-band)}
.foot-brand .brand-en{color:var(--band-muted)}
.foot-bottom{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--band-line);color:var(--band-muted);font-size:.86rem;line-height:1.8}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* ===== device pages ===== */
.svc{position:relative}
.svc h3 a{text-decoration:none}
.svc h3 a::after{content:"";position:absolute;inset:0;border-radius:12px}
.svc h3 a:focus-visible{outline:none}
.svc:has(h3 a:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.svc-more{font-size:.9rem;font-weight:700;color:var(--accent)}
.svc:hover h3 a{color:var(--accent)}
.page-hero{padding-block:clamp(2rem,5vw,3.25rem) clamp(2.75rem,6vw,4.25rem)}
.crumbs{display:flex;flex-wrap:wrap;gap:.35rem .6rem;font-size:.9rem;color:var(--band-muted);margin-bottom:1.4rem;list-style:none}
.crumbs li+li::before{content:"/";margin-inline-end:.6rem;color:var(--band-line)}
.crumbs a{color:var(--accent-on-band);text-decoration:none;font-weight:600}
.crumbs a:hover{text-decoration:underline}
.page-hero h1{margin-top:.5rem}
.sym-list{list-style:none;margin:0;padding:0}
.sym-list li{display:grid;grid-template-columns:1.4rem minmax(0,1fr);gap:.7rem;align-items:start;padding:.85rem 1.1rem;border-top:1px solid var(--line);font-weight:600;line-height:1.6}
.sym-list li svg{width:1.3rem;height:1.3rem;margin-top:.15rem;color:var(--accent);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.plate-head + .sym-list li:first-child{border-top:0}
.hero-ico{width:3.1rem;height:3.1rem;padding:.55rem;border-radius:10px;background:color-mix(in srgb,var(--on-band) 12%,transparent);color:var(--on-band);fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:.9rem}
.checks{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
@media (max-width:700px){.checks{grid-template-columns:minmax(0,1fr)}}
.checks li{background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--accent);border-radius:12px;box-shadow:var(--shadow);padding:1.2rem 1.25rem;display:grid;gap:.4rem;align-content:start}
.checks h3{font-size:1.1rem}
.checks p{font-size:.95rem;color:var(--muted);line-height:1.75}
.tips{margin-top:1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.3rem}
.section-surface .tips{background:var(--bg)}
.tips h3{font-size:1.1rem;margin-bottom:.6rem}
.tips ul{list-style:none;display:grid;gap:.5rem}
.tips li{position:relative;padding-inline-start:1.4rem;color:var(--muted);font-size:.96rem;line-height:1.75}
.tips li::before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:.55rem;height:.55rem;border-radius:50%;background:var(--accent)}
.safety.warn{margin-top:0;margin-bottom:1.25rem}
.mini-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
@media (max-width:900px){.mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mini{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;display:flex;align-items:center;gap:.8rem;font-weight:700}
.section-surface .mini{background:var(--bg)}
.mini svg{width:2.6rem;height:2.6rem;flex:none;padding:.5rem;border-radius:10px;background:var(--accent-soft);color:var(--accent);fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.mini a{text-decoration:none}
.mini a::after{content:"";position:absolute;inset:0;border-radius:12px}
.mini:hover{border-color:var(--accent)}
.mini:has(a:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.mini a:focus-visible{outline:none}
.cta-band .ind-grid{align-items:center}
.cta-band .cta-row{margin-top:0}
.cta-band .btn-primary{background:var(--on-band);color:var(--band)}
.cta-band .btn-primary:hover{background:color-mix(in srgb,var(--on-band) 88%,var(--band))}
.cta-band .btn-ghost{border-color:var(--on-band);color:var(--on-band)}
.cta-band .btn-ghost:hover{background:color-mix(in srgb,var(--on-band) 14%,transparent)}
.cta-band .hero-note{margin-top:1.1rem}
.cta-band .hero-note a{color:var(--accent-on-band)}
.cta-stack{display:grid;gap:.8rem}
.cta-hot{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,6vw,3.4rem);line-height:1.1;direction:ltr;text-align:right;color:var(--on-band);text-decoration:none}
/* ===== brands dropdown + brand pages ===== */
.nav .has-sub{position:relative;display:flex}
.nav .sub{display:none}
@media (min-width:900px){
  .nav .sub{position:absolute;top:100%;inset-inline-start:0;min-width:22rem;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:.35rem;z-index:80}
  .nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{display:grid}
}
.disclose{margin-top:1.3rem;max-width:40rem;background:color-mix(in srgb,var(--on-band) 10%,transparent);border:1px solid var(--band-line);border-inline-start:4px solid var(--accent-on-band);border-radius:10px;padding:.9rem 1.1rem;font-size:.95rem;line-height:1.8;color:var(--on-band)}
.disclose strong{display:block;margin-bottom:.15rem;color:var(--accent-on-band)}
.disclose a{color:var(--accent-on-band);font-weight:700}
.svc-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:46rem;margin-inline:auto}
@media (max-width:519px){.svc-grid.two{grid-template-columns:minmax(0,1fr)}}
/* illustrations */
.illus-sec{padding-block:clamp(1.5rem,4vw,2.5rem) 0}
.illus{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--accent-soft)}
.illus svg{display:block;width:100%;height:auto}
.illus img{display:block;width:100%;height:auto;max-height:30rem;object-fit:cover}
.illus figcaption{padding:.75rem 1rem;font-size:.95rem;color:var(--muted);background:var(--surface);border-top:1px solid var(--line);text-align:center}
.s-bg{fill:var(--accent-soft)}
.s-dots circle{fill:var(--accent);opacity:.12}
.s-card{fill:var(--surface);stroke:var(--line);stroke-width:2}
.s-acc{fill:var(--accent)}
.s-band{fill:var(--band)}
.s-fg{fill:var(--fg)}
.s-white{fill:#fff}
.s-notch{fill:var(--accent-soft)}
.s-floor{fill:var(--surface-2)}
.s-skin{fill:#F1C7A3}
.s-ln,.s-ln2,.s-ln3,.s-ln4,.s-chk,.s-arm,.s-air,.s-belt,.s-smile{fill:none;stroke-linecap:round;stroke-linejoin:round}
.s-ln{stroke:var(--accent);stroke-width:4;opacity:.55}
.s-ln2{stroke:var(--accent);stroke-width:6}
.s-ln3{stroke:var(--accent);stroke-width:8}
.s-ln4{stroke:var(--band);stroke-width:5}
.s-chk{stroke:var(--accent);stroke-width:7}
.s-arm{stroke:var(--accent);stroke-width:20}
.s-air{stroke:var(--accent);stroke-width:4;stroke-dasharray:2 10;opacity:.7}
.s-belt{stroke:var(--band);stroke-width:8}
.s-smile{stroke:#7a4a2a;stroke-width:3}
.skip-link{position:absolute;inset-inline-start:.75rem;top:-5rem;z-index:100;background:var(--accent);color:var(--on-accent);padding:.65rem 1.1rem;border-radius:8px;font-weight:700;text-decoration:none;transition:top .15s}
.skip-link:focus{top:max(.75rem,env(safe-area-inset-top,0px))}
.route-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main:focus,[tabindex="-1"]:focus{outline:none}
/* mobile header: keep brand name clear of the call button */
@media (max-width:899px){
  .head-in{gap:.45rem}
  .brand{flex:1 1 auto;min-width:0}
  .brand-ar{font-size:1.02rem;white-space:nowrap}
  .head-in .btn{flex:none;margin-inline-start:0;padding:.35rem .8rem;min-height:42px;font-size:.9rem}
  .nav-toggle{flex:none}
}
@media (max-width:389px){
  .brand-en{display:none}
  .mark-img{width:2.1rem;height:2.1rem}
  .brand{gap:.4rem}
  .brand-ar{font-size:.95rem}
  .head-in .btn{padding:.3rem .6rem;font-size:.85rem}
}
@media (max-width:359px){
  .head-in{gap:.35rem}
  .nav-toggle{width:2.3rem;height:2.3rem}
  .head-in .btn{padding:.25rem .45rem;min-height:40px;font-size:.78rem}
  .brand-ar{font-size:.84rem}
  .mark-img{width:1.9rem;height:1.9rem}
}
.brand-intro{max-width:46rem;margin-inline:auto;text-align:center;color:var(--muted)}
.brand-sec .svc-grid{margin-top:1.8rem}
.brand-tip{max-width:50rem;margin:1.6rem auto 0;background:var(--accent-soft);border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem}
.brand-tip h3{font-size:1.05rem;margin-bottom:.25rem}
.brand-tip p{font-size:.95rem;color:var(--muted)}

/* ===== brands dropdown (desktop): soft fade + caret + light hover ===== */
@media (min-width:900px){
  .nav .has-sub > a::after{content:"";display:inline-block;width:.34em;height:.34em;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-.12em);margin-inline-start:.5rem;transition:transform .18s ease}
  .nav .has-sub:hover > a::after,.nav .has-sub:focus-within > a::after{transform:rotate(-135deg) translateY(-.05em)}
  .nav .has-sub:hover > a,.nav .has-sub:focus-within > a{background:var(--accent-soft);color:var(--accent)}
  .nav .sub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.1rem;min-width:35rem;max-height:calc(100vh - 9rem);overflow-y:auto;padding:.5rem;
    visibility:hidden;opacity:0;transform:translateY(8px);pointer-events:none;
    transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
  .nav .sub::before{content:"";position:absolute;inset:-.7rem 0 auto;height:.7rem}
  .nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{display:grid;visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
  .nav .sub a{padding:.42rem .7rem;font-size:.92rem;white-space:nowrap;border-radius:8px;transition:background-color .14s ease,color .14s ease,transform .14s ease}
  .nav .sub a:hover,.nav .sub a:focus-visible{background:var(--accent-soft);color:var(--accent);transform:translateX(-3px)}
}
@media (prefers-reduced-motion:reduce){
  .nav .sub,.nav .sub a,.nav .has-sub > a::after{transition:none!important;transform:none!important}
}

/* utility classes (moved from inline styles) */
.acc-narrow{max-width:50rem;margin-inline:auto}
.tips-narrow{max-width:48rem;margin-inline:auto;margin-top:2rem}
.hero-note.mt-0{margin-top:0}
a.link-strong{color:var(--accent);font-weight:700}
.plate-val.rtl-val{direction:rtl;text-align:right}
.guide-note.center-mt{text-align:center;margin-top:1.5rem}
.pos-35{object-position:50% 35%}
.pos-15{object-position:50% 15%}

/* form validation */
.f-err{color:var(--danger);font-size:.88rem;font-weight:600;line-height:1.5}
.f-err[hidden]{display:none}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--danger)}
.f-summary{color:var(--danger);font-weight:700;margin:0 0 .9rem}
.f-summary[hidden]{display:none}

/* sticky call / WhatsApp bar (mobile only) */
.mobile-cta{display:none}
@media (max-width:899px){
  .mobile-cta{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;position:fixed;inset-inline:0;bottom:0;z-index:50;
    padding:.6rem max(12px,env(safe-area-inset-left,0px)) calc(.6rem + env(safe-area-inset-bottom,0px));
    background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(11,31,58,.14)}
  .mobile-cta .btn{min-height:46px;padding:.4rem .8rem;white-space:nowrap}
  .site-foot{padding-bottom:calc(2rem + 4.6rem + env(safe-area-inset-bottom,0px))}
}
@media print{.mobile-cta{display:none!important}}

.codes-wrap{margin-top:2.4rem}
.codes-wrap h3{text-align:center;font-size:1.3rem;margin-bottom:.4rem}
.codes-wrap .guide-note{text-align:center;margin-bottom:1.2rem}
.codes-wrap .faults dt{text-align:start}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.illus-sec.alt{padding-block:clamp(1.5rem,4vw,2.5rem)}
.illus.photo{max-width:56rem;margin-inline:auto;background:#fff}
.illus.photo img{max-height:none;object-fit:contain}

/* ===== نصائح الصيانة ===== */
.legal.article h2::before{content:none}
.legal.article .illus{margin:0 0 1.8rem}
.legal ol{padding-inline-start:1.3rem;display:grid;gap:.4rem;margin-top:.6rem}
.legal .safety{margin-block:1.4rem}
.legal .faults{margin:.8rem 0 0;padding:0}
.legal .art-svc{margin-top:1.6rem}
.svc-tag{font-size:.8rem;font-weight:700;color:var(--accent)}
.related{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.legal .related h2{margin-top:0;font-size:1.15rem}
.legal .related ul{list-style:none;padding-inline-start:0}
.tips-note{max-width:46rem;margin:2rem auto 0;text-align:center}
/* قائمة أضيق قليلًا لتتسع لرابط نصائح الصيانة */
@media (min-width:900px){.nav a{padding:.45rem .6rem;font-size:.93rem}.head-in{column-gap:.9rem}}
@media (min-width:900px) and (max-width:1279px){.nav a{padding:.45rem .42rem;font-size:.9rem}.head-in{column-gap:.6rem}.head-in .btn{padding-inline:.9rem}}
/* ===== زر الوضع الداكن ===== */
.theme-toggle{display:inline-grid;place-items:center;flex:none;width:2.6rem;height:2.6rem;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;padding:0;margin-inline-start:auto}
.theme-toggle:hover{background:var(--accent-soft);color:var(--accent)}
.theme-toggle svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}
}
@media (max-width:899px){.theme-toggle{width:2.6rem;height:2.6rem}}
@media (max-width:360px){.theme-toggle{width:2.3rem;height:2.3rem}}

/* desktop header: "تواصل معنا" as a call-to-action button */
@media (min-width:900px){
  .nav > a:last-child{background:var(--accent);color:var(--on-accent);padding:.5rem 1.15rem;margin-inline-start:.6rem;border-radius:8px;font-weight:700;white-space:nowrap;transition:background-color .15s ease}
  .nav > a:last-child:hover,.nav > a:last-child:focus-visible{background:color-mix(in srgb,var(--accent) 86%,#000);color:var(--on-accent)}
}

/* "كيف نعمل" step cards: hover */
.steps li{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.steps .n{transition:transform .2s ease}
@media (hover:hover){
  .steps li:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 2px 4px rgba(11,31,58,.08),0 18px 36px rgba(11,31,58,.16)}
  .steps li:hover .n{transform:scale(1.1)}
  .steps li:hover h3{color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){.steps li:hover,.steps li:hover .n{transform:none}}

/* mobile: two floating round buttons (call + WhatsApp) instead of a full-width bar */
@media (max-width:899px){
  .mobile-cta{display:flex;justify-content:space-between;align-items:flex-end;gap:0;background:none;border:0;box-shadow:none;pointer-events:none;
    padding:0 max(16px,env(safe-area-inset-left,0px)) calc(16px + env(safe-area-inset-bottom,0px))}
  .mobile-cta .btn{pointer-events:auto;flex:none;width:58px;height:58px;min-height:0;padding:0;border-radius:50%;font-size:0;line-height:0;gap:0;
    border:0;color:#fff;box-shadow:0 6px 18px rgba(11,31,58,.32),0 1px 3px rgba(11,31,58,.2);transition:transform .15s ease,box-shadow .15s ease}
  .mobile-cta .btn:active{transform:scale(.93)}
  .mobile-cta .btn::before{content:"";display:block;width:28px;height:28px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
  .mobile-cta .btn-primary{background:var(--accent);color:var(--on-accent);
    --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.6a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E")}
  .mobile-cta .btn-ghost{background:#25D366;color:#fff;
    --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2a9.9 9.9 0 0 0-8.5 14.9L2 22l5.25-1.38A9.9 9.9 0 1 0 12.04 2zm5.8 14.1c-.25.7-1.45 1.33-2 1.4-.52.07-1.17.1-1.88-.12a17 17 0 0 1-1.7-.63c-3-1.3-4.95-4.32-5.1-4.52-.15-.2-1.2-1.6-1.2-3.05s.76-2.16 1.03-2.46c.27-.3.6-.37.8-.37h.57c.18 0 .43-.07.67.5.25.6.85 2.07.92 2.22.08.15.13.33.03.52-.1.2-.15.32-.3.5l-.45.52c-.15.15-.3.31-.13.6.17.3.77 1.27 1.65 2.05 1.13 1 2.1 1.32 2.4 1.47.3.15.47.12.65-.07.17-.2.75-.87.95-1.17.2-.3.4-.25.67-.15.27.1 1.73.82 2.03.97.3.15.5.22.57.35.07.12.07.72-.18 1.42z'/%3E%3C/svg%3E")}
  .mobile-cta .btn-ghost:hover{background:#1ebe5b}
  .site-foot{padding-bottom:calc(2rem + 1rem + env(safe-area-inset-bottom,0px))}
}
@media (max-width:899px) and (prefers-reduced-motion:reduce){.mobile-cta .btn:active{transform:none}}

/* desktop header: theme toggle sits to the right of the "تواصل معنا" button */
@media (min-width:900px){
  .nav{display:contents}
  .nav > a:first-child{margin-inline-start:auto}
  .nav > a:last-child{order:3}
  .head-in .theme-toggle{order:2;margin-inline-start:auto;margin-inline-end:0}
  .head-in .nav > *{order:1}
  .head-in .nav > a:last-child{order:3}
  .brand{order:0}
}
@media (min-width:900px){.head-in{flex-wrap:nowrap}}
@media (min-width:900px) and (max-width:1279px){
  .nav > a:last-child{padding:.45rem .8rem;margin-inline-start:0}
  .brand{gap:.5rem}.brand-ar{font-size:1.15rem}
  .head-in .theme-toggle{width:2.4rem;height:2.4rem}
}
@media (min-width:900px){.nav a,.brand-ar{white-space:nowrap}}
@media (min-width:900px) and (max-width:1099px){
  .head-in{column-gap:.35rem}
  .nav a{font-size:.82rem;padding:.4rem .3rem}
  .nav > a:last-child{padding:.4rem .65rem}
  .brand-en{display:none}
  .brand-ar{font-size:1.05rem}
  .mark-img{width:2.1rem;height:2.1rem}
}