/* Mobile: compact hero + hamburger header */
.menu-btn{display:none}
@media (max-width:860px){
.hero{padding:18px 0 22px}
.hero .wrap{gap:14px}
.hero .kicker{font-size:13px;margin:0 0 10px;padding:3px 12px}
.hero h1{font-size:clamp(28px,8vw,36px);line-height:1.25;margin:0 0 8px}
.hero .lead{font-size:16px;line-height:1.6;margin:0 0 8px}
.hero .svcline{font-size:14px;margin:0 0 14px;opacity:.95}
.hero .lead2,.hero .svcline .more{display:none}
.hero .cta{flex-direction:row;flex-wrap:nowrap;gap:10px}
.hero .cta .btn{flex:1 1 0;min-height:48px;padding:0 12px;font-size:15px;margin:0;width:auto;white-space:nowrap}
.hero .cta .btn:first-child{flex:1.5 1 0;box-shadow:0 4px 14px rgba(255,122,46,.35)}
.hero .cta .btn.wa{background:#1a9f4b;border-color:#1a9f4b;color:#fff;font-weight:700}
.hero .cta .btn.ghost{display:none}
.hero-fig{max-width:none}.hero-fig img{aspect-ratio:4/3;object-fit:cover;object-position:center 25%}
.tape{height:10px}
header .bar{flex-wrap:nowrap;height:56px;padding:0 16px;gap:10px;position:relative}
header .hlogo{height:30px;width:auto}
header .bar>.btn{margin:0;margin-inline-start:auto;padding:0 14px;min-height:38px;font-size:14px;border-radius:8px;width:auto}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}
.menu-btn svg{width:22px;height:22px}
.menu-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
header .bar nav{display:flex;visibility:hidden;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .22s ease,transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s linear .28s;position:absolute;top:100%;inset-inline:0;order:0;flex-direction:column;gap:0;margin:0;padding:4px 16px 10px;width:auto;overflow:visible;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(0,0,0,.14);font-size:16px}
header .bar nav.open{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
header .bar nav a{opacity:0;transform:translateY(-6px);transition:opacity .16s ease,transform .2s ease,color .15s ease}
header .bar nav.open a{opacity:1;transform:none;transition:opacity .26s ease,transform .3s cubic-bezier(.2,.7,.2,1),color .15s ease}
header .bar nav.open a:nth-child(1){transition-delay:.05s}
header .bar nav.open a:nth-child(2){transition-delay:.09s}
header .bar nav.open a:nth-child(3){transition-delay:.13s}
header .bar nav.open a:nth-child(4){transition-delay:.17s}
header .bar nav.open a:nth-child(5){transition-delay:.21s}
.menu-btn{transition:background-color .2s ease,border-color .2s ease}
.menu-btn[aria-expanded="true"]{background:var(--surface);border-color:var(--accent)}
.menu-btn line{transform-box:fill-box;transform-origin:center;transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .18s ease}
.menu-btn[aria-expanded="true"] line:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] line:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu-btn[aria-expanded="true"] line:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){header .bar nav,header .bar nav a,.menu-btn,.menu-btn line{transition:none!important}}
header .bar nav a{padding:13px 0;border-top:1px solid var(--line);color:var(--ink)}
header .bar nav a:first-child{border-top:0}
header .bar nav a{-webkit-tap-highlight-color:transparent}
header .bar nav a:hover,header .bar nav a:active,header .bar nav a:focus-visible{color:var(--accent-text)}
.menu-btn:hover,.menu-btn:active{border-color:var(--accent);color:var(--accent-text)}
}

@media (max-width:560px){.hero .kicker .k2{display:none}}
@media (max-width:700px){
#reviews .grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;margin-inline:-16px;padding:4px 16px 10px;scroll-padding-inline:16px}
#reviews .grid::-webkit-scrollbar{display:none}
#reviews .card.rv{flex:0 0 88%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;flex-direction:column;padding:20px 18px}
#reviews .rv .st{order:1;font-size:22px;letter-spacing:3px;color:#ffb020;line-height:1.2}
#reviews .rv b{order:2;display:block;margin:6px 0 10px;font-size:17px;color:var(--ink)}
#reviews .rv blockquote{order:3;margin:0;font-size:16px;line-height:1.85}
.rv-dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
.rv-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:var(--line);cursor:pointer;transition:width .25s ease,background-color .25s ease}
.rv-dots button[aria-current="true"]{width:22px;background:var(--accent)}
}
@media (min-width:701px){.rv-dots{display:none}}
@media (prefers-reduced-motion:reduce){.rv-dots button{transition:none}#reviews .grid{scroll-behavior:auto}}

/* header-tools: زرار اللغة والوضع الفاتح/الداكن (ديسكتوب + موبايل) */
.htools{display:flex;align-items:center;gap:8px}
.hbtn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.02em;line-height:1;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s ease,color .15s ease}
.hbtn:hover,.hbtn:active{border-color:var(--accent);color:var(--accent-text)}
.hbtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.hbtn svg{width:19px;height:19px}
.hbtn.theme{display:none}
.js .hbtn.theme{display:inline-flex}
.theme .i-sun{display:none}
.theme[data-mode="dark"] .i-sun{display:block}
.theme[data-mode="dark"] .i-moon{display:none}
@media (min-width:861px){
header .bar nav a[hreflang]{display:none}
html[dir="rtl"] header .bar nav{order:1}
html[dir="rtl"] header .bar .htools{order:2}
html[dir="rtl"] header .bar>.hcall{order:3}
}
@media (max-width:860px){
header .bar>.hcall{display:none}
.htools{margin-inline-start:auto}
}

/* هوفر أزرار التواصل (اتصال / واتساب / عرض سعر): على الأجهزة التي فيها ماوس فقط */
@media (hover:hover) and (pointer:fine){
.btn{transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.24);filter:brightness(1.07)}
.btn:active{transform:translateY(0);box-shadow:0 3px 8px rgba(0,0,0,.2)}
.btn.ghost:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);filter:none}
.btn.wa:hover,.fb .btn:hover{filter:brightness(.9)}
.hero .cta .btn:hover{box-shadow:0 8px 22px rgba(0,0,0,.3)}
a[href^="tel:"]:not(.btn):not(.fl-call):hover,a[href^="mailto:"]:hover,a[href^="https://wa.me"]:not(.btn):not(.fl-wa):hover{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}
/* زراير التواصل العايمة: دايرتين صغيرتين على الموبايل فقط */
.fl{display:none}
@media (max-width:860px) and (pointer:coarse),(max-width:560px){
.fl{display:flex;flex-direction:row;direction:ltr;gap:12px;position:fixed;left:calc(12px + env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:25}
.fl a{position:relative;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 0 0 1px rgba(20,40,60,.18),0 6px 16px rgba(0,0,0,.38);-webkit-tap-highlight-color:transparent}
.fl svg{width:24px;height:24px;fill:currentColor}
.fl-wa{background:#1a9f4b;color:#fff}
.fl-call{background:var(--accent);color:var(--accent-ink)}
.fl a:active{transform:scale(.94)}
.fl-call::after{content:"";position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 0 0 rgba(255,122,46,.55);animation:fl-pulse 3.2s ease-out infinite;pointer-events:none}
@keyframes fl-pulse{0%,60%{box-shadow:0 0 0 0 rgba(255,122,46,.55)}100%{box-shadow:0 0 0 16px rgba(255,122,46,0)}}
@media (prefers-reduced-motion:reduce){.fl-call::after{animation:none}}
footer{padding-bottom:120px}
}

/* قائمة "المزيد" */
details.more{position:relative;background:none;border:0;border-radius:0;margin:0}
details.more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:flex-start;gap:7px;padding:0;font-size:inherit;font-weight:600;line-height:inherit;color:var(--muted);-webkit-tap-highlight-color:transparent;user-select:none}
.more>summary::-webkit-details-marker{display:none}
details.more>summary::after,details.more[open]>summary::after{content:"";display:block;width:6px;height:6px;font-size:0;line-height:0;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
details.more[open]>summary::after{transform:translateY(1px) rotate(225deg)}
.more>summary:hover,.more[open]>summary,.more>summary:focus-visible{color:var(--ink)}
.more>summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.more-menu{position:absolute;top:calc(100% + 12px);inset-inline-start:0;z-index:40;min-width:240px;display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 32px rgba(0,0,0,.18)}
.more-menu a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink);white-space:nowrap}
.more-menu a:hover,.more-menu a:focus-visible{background:var(--bg);color:var(--accent-text)}
@media (max-width:860px){
.more{width:100%}
details.more>summary{display:flex;justify-content:space-between;width:100%;padding:13px 0;font-size:16px;border-top:1px solid var(--line);color:var(--ink)}
.more-menu{position:static;min-width:0;padding:0 14px 6px;background:transparent;border:0;border-radius:0;box-shadow:none;gap:0}
.more-menu a{padding:11px 0;border-top:1px solid var(--line);border-radius:0;font-size:15px;color:var(--muted)}
.more-menu a:first-child{border-top:1px solid var(--line)}
.more-menu a:hover,.more-menu a:focus-visible{background:transparent}
}
@media (min-width:861px){header .bar nav{white-space:nowrap}}
@media (min-width:861px) and (max-width:1100px){
header .bar{gap:12px}
header .bar nav{gap:13px;font-size:14px}
header .bar .btn.hcall{padding:6px 12px;font-size:13px;white-space:nowrap}
.hbtn{width:38px;height:38px}
header .hlogo{height:32px;width:auto}
}