/* Future Auto Service — flattened runtime stylesheet */

/* ===== style.css ===== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root{--bg:#07090d;--bg-2:#0b1016;--panel:rgba(19,27,36,.66);--panel-solid:#121a23;--panel-soft:rgba(255,255,255,.055);--ink:#f6f7f8;--muted:#9ca8b3;--dim:#697684;--line:rgba(255,255,255,.12);--line-soft:rgba(255,255,255,.075);--orange:#ff7626;--amber:#ffbf68;--cyan:#d6dee6;--green:#68e0b3;--max:1240px;--radius:26px;--font-ar:'Cairo',Tahoma,sans-serif;--font-en:'Cairo',Tahoma,sans-serif;--ease:cubic-bezier(.22,.8,.24,1);--shadow:0 30px 90px rgba(0,0,0,.34)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;min-width:320px;overflow-x:hidden;background:radial-gradient(900px 620px at 92% -10%,rgba(255,118,38,.16),transparent 58%),radial-gradient(760px 580px at -12% 32%,rgba(214,222,230,.12),transparent 62%),linear-gradient(145deg,#07090d,#0b1016 62%,#090c11);color:var(--ink);font-family:var(--font-ar);line-height:1.8}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.container{width:min(var(--max),calc(100% - 64px));margin-inline:auto}
::selection{background:var(--orange);color:#160b04}:where(a:not(.brand),button,input,select,textarea):focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.site-progress{position:fixed;z-index:100;inset:0 0 auto;height:3px;pointer-events:none}.site-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--orange),var(--amber));box-shadow:0 0 20px var(--orange);transition:width .12s linear}
.topbar{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,9,13,.72);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.topbar:after{content:"";position:absolute;inset:auto 0 -1px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),var(--orange),transparent);opacity:.6}.topbar-inner{min-height:82px;display:flex;align-items:center;gap:22px}.brand{display:flex;align-items:center;gap:12px;min-width:250px;transition:transform .3s var(--ease)}.brand:hover{transform:translateY(-2px)}.mark{width:58px;height:56px;display:grid;place-items:center;overflow:hidden}.mark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(255,118,38,.3))}.brand-copy strong{display:block;font-size:14px;letter-spacing:.02em}.brand-copy small{display:block;color:var(--muted);font-size:10px;margin-top:0}.nav{display:flex;align-items:center;gap:3px;flex:1;overflow:visible;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav a,.lang{padding:8px 11px;border:1px solid transparent;border-radius:999px;color:var(--muted);font-size:11px;white-space:nowrap;transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}.nav a:hover,.nav a.active{color:var(--ink);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.11);transform:translateY(-1px)}.nav a.active{color:var(--amber)}.lang{border-color:var(--line);background:rgba(255,255,255,.03);color:var(--ink);font-size:10px}.lang:hover{border-color:rgba(255,118,38,.7)}.menu{display:none;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft);color:var(--ink);padding:6px 10px;font-size:18px;line-height:1}.theme-toggle{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft);color:var(--amber);transition:transform .3s var(--ease),border-color .3s var(--ease)}.theme-toggle:hover{transform:rotate(12deg) scale(1.06);border-color:var(--orange)}
main{position:relative}.hero{position:relative;min-height:720px;padding:108px 0 112px;display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,.88fr);gap:86px;align-items:center}.hero:before{content:"";position:absolute;inset:8% auto auto -13%;width:400px;height:400px;border:1px solid rgba(214,222,230,.16);border-radius:50%;box-shadow:0 0 0 36px rgba(214,222,230,.035),0 0 0 72px rgba(214,222,230,.018);pointer-events:none}.hero-copy{position:relative;z-index:1}.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--amber);font-size:10px;font-weight:800;letter-spacing:.14em}.eyebrow:before{content:"";width:30px;height:1px;background:linear-gradient(90deg,var(--orange),var(--cyan));box-shadow:0 0 15px var(--orange)}.hero h1{max-width:760px;margin:19px 0 22px;font-size:clamp(45px,5.8vw,82px);font-weight:700;letter-spacing:-.06em;line-height:1.13}.hero h1 span{display:block;color:transparent;background:linear-gradient(100deg,var(--ink),var(--cyan) 68%,var(--amber));-webkit-background-clip:text;background-clip:text}.hero p{max-width:620px;margin:0;color:var(--muted);font-size:16px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 21px;overflow:hidden;border:1px solid var(--orange);border-radius:15px;background:linear-gradient(120deg,var(--orange),var(--amber));color:#1a0b03;font-size:12px;font-weight:800;box-shadow:0 16px 30px rgba(255,118,38,.17);transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease)}.btn:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.8) 50%,transparent 75%);transform:translateX(-130%);transition:transform .75s var(--ease)}.btn:hover{transform:translateY(-4px);box-shadow:0 22px 45px rgba(255,118,38,.27);filter:saturate(1.12)}.btn:hover:before{transform:translateX(130%)}.btn.secondary{border-color:var(--line);background:rgba(255,255,255,.045);color:var(--ink);box-shadow:none}.btn.secondary:hover{border-color:rgba(214,222,230,.5);box-shadow:0 18px 35px rgba(0,0,0,.25)}.form-note{color:var(--dim);font-size:11px}.hero .form-note{margin-top:24px}.kicker-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}.kicker{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line-soft);border-radius:999px;background:rgba(255,255,255,.035);color:var(--muted);font-size:10px}.kicker b{color:var(--cyan);font-size:11px}
.hero-visual{position:relative;isolation:isolate}.hero-card{position:relative;min-height:500px;border:1px solid rgba(255,255,255,.2);border-radius:34px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.035));box-shadow:30px 30px 100px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.2);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.hero-card:before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(214,222,230,.48) 49%,rgba(255,255,255,.8) 50%,rgba(255,118,38,.45) 51%,transparent 68%);width:45%;transform:translateX(-150%) skewX(-18deg);animation:scan 7s ease-in-out infinite;pointer-events:none;mix-blend-mode:screen}.hero-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(4,7,10,.94) 100%);pointer-events:none}.hero-card img{width:100%;height:500px;display:block;object-fit:cover;opacity:.72;transform:scale(1.04);transition:transform 1.2s var(--ease),opacity .6s var(--ease)}.hero-card:hover img{opacity:.92;transform:scale(1.1)}.hero-caption{position:absolute;z-index:3;inset:auto 28px 29px;border-inline-start:2px solid var(--orange);padding-inline-start:15px}.hero-caption strong{display:block;font-size:20px}.hero-caption small{display:block;margin-top:4px;color:#d5dde0c7;font-size:11px}.hero-orbit{position:absolute;z-index:-1;inset:-35px -38px auto auto;width:190px;height:190px;border:1px solid rgba(255,118,38,.55);border-radius:50%;box-shadow:0 0 0 25px rgba(255,118,38,.07),0 0 0 50px rgba(255,118,38,.03);animation:float 7s ease-in-out infinite}.hero-orbit:after{content:"";position:absolute;inset:38px;border:1px dashed rgba(214,222,230,.4);border-radius:50%;animation:spin 22s linear infinite}.hero-chip{position:absolute;z-index:4;inset:auto auto 26px -27px;display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(13,20,27,.78);box-shadow:0 22px 40px rgba(0,0,0,.38);backdrop-filter:blur(16px);font-size:10px;color:var(--ink)}.hero-chip i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}
.section{position:relative;padding:118px 0}.section.band{background:linear-gradient(120deg,rgba(255,118,38,.07),rgba(214,222,230,.04) 48%,transparent);border-block:1px solid rgba(255,255,255,.07)}.section:after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:38px}.section-head h2{max-width:680px;margin:8px 0 0;font-size:clamp(30px,4vw,52px);letter-spacing:-.05em;line-height:1.18}.section-head p{max-width:430px;margin:0;color:var(--muted);font-size:13px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{position:relative;background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035));border:1px solid var(--line-soft);border-radius:22px;padding:27px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}.card:before{content:"";position:absolute;inset:0 0 auto auto;width:55%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),var(--orange));opacity:.8}.card:after{content:"";position:absolute;inset:auto -45px -55px auto;width:150px;height:150px;border:1px solid rgba(214,222,230,.15);border-radius:50%;transition:transform .5s var(--ease)}.card:hover{transform:translateY(-9px);border-color:rgba(214,222,230,.4);box-shadow:0 25px 60px rgba(0,0,0,.3),0 0 0 1px rgba(214,222,230,.1)}.card:hover:after{transform:scale(1.35)}.card .num{color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.14em}.card h3{position:relative;z-index:1;margin:14px 0 10px;font-size:17px;line-height:1.55}.card p{position:relative;z-index:1;margin:0 0 20px;color:var(--muted);font-size:12px}.card-link{position:relative;z-index:1;color:var(--amber);font-size:11px;font-weight:800;transition:color .25s var(--ease)}.card-link:hover{color:var(--cyan)}
.category-stage{position:relative;margin-inline:-1px}.category-rail{display:flex;gap:18px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;padding:10px 3px 28px;scrollbar-width:thin;scrollbar-color:var(--orange) transparent}.category-card{position:relative;flex:0 0 min(330px,78vw);min-height:260px;display:flex;flex-direction:column;justify-content:space-between;padding:25px;border:1px solid rgba(255,255,255,.16);border-radius:28px;scroll-snap-align:start;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 20px 55px rgba(0,0,0,.22);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)}.category-card:before{content:"";position:absolute;inset:auto -50px -60px auto;width:190px;height:190px;border:1px solid rgba(214,222,230,.22);border-radius:50%;box-shadow:0 0 0 22px rgba(214,222,230,.03),0 0 0 44px rgba(214,222,230,.02)}.category-card:hover{transform:translateY(-8px);border-color:rgba(214,222,230,.55);background:linear-gradient(145deg,rgba(214,222,230,.16),rgba(255,255,255,.05))}.category-card-top{display:flex;justify-content:space-between;align-items:center}.category-index{color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.16em}.category-badge{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:var(--amber);font-size:17px}.category-card h3{position:relative;z-index:1;margin:0;font-size:24px}.category-card p{position:relative;z-index:1;max-width:245px;margin:7px 0 0;color:var(--muted);font-size:12px}.category-card-footer{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1;color:var(--amber);font-size:11px;font-weight:800}.rail-hint{display:flex;align-items:center;gap:9px;color:var(--dim);font-size:11px}.rail-hint:before{content:"";display:block;width:38px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--line)}.step{min-height:170px;background:rgba(11,16,22,.78);padding:25px;transition:background .35s var(--ease),transform .35s var(--ease)}.step:hover{background:rgba(255,118,38,.09);transform:translateY(-4px)}.step b{display:block;color:var(--cyan);font-size:30px;line-height:1}.step p{margin:22px 0 0;color:var(--ink);font-size:12px}
.brand-groups{display:grid;gap:24px}.brand-group{position:relative;padding:30px;border:1px solid var(--line-soft);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden}.brand-group:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--cyan),var(--orange));opacity:.9}.brand-group-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}.brand-group h2{margin:0;font-size:24px}.brand-group-head p{max-width:500px;margin:0;color:var(--muted);font-size:12px}.brand-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.brand-card{min-height:105px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(5,9,13,.38);color:var(--ink);transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}.brand-card:hover{transform:translateY(-6px);border-color:rgba(214,222,230,.55);background:rgba(214,222,230,.09);box-shadow:0 15px 35px rgba(0,0,0,.25)}.brand-logo{width:78px;height:40px;display:grid;place-items:center}.brand-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.86;transition:opacity .3s var(--ease),transform .3s var(--ease),filter .3s var(--ease)}.brand-card:hover .brand-logo img{filter:none;opacity:1;transform:scale(1.08)}.brand-logo span{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:var(--amber);font-size:11px;font-weight:800}.brand-card strong{font-size:10px;font-weight:700;text-align:center}.disclaimer{display:flex;gap:11px;align-items:flex-start;margin-top:26px;padding:16px 17px;border:1px solid rgba(255,118,38,.35);border-radius:15px;background:rgba(255,118,38,.07);color:var(--muted);font-size:11px}.disclaimer b{color:var(--amber);font-size:14px}
.page-hero{position:relative;padding:92px 0 68px;border-bottom:1px solid var(--line-soft);overflow:hidden}.page-hero:before{content:"";position:absolute;inset:-150px -80px auto auto;width:410px;height:410px;border:1px solid rgba(214,222,230,.16);border-radius:50%;box-shadow:0 0 0 38px rgba(214,222,230,.035),0 0 0 76px rgba(214,222,230,.018);animation:spin 32s linear infinite}.page-hero h1{position:relative;max-width:900px;margin:18px 0 15px;font-size:clamp(38px,5.2vw,68px);letter-spacing:-.055em;line-height:1.18}.page-hero p{position:relative;max-width:740px;margin:0;color:var(--muted);font-size:15px}.content{padding:62px 0 110px}.prose{max-width:900px}.prose p,.prose li{color:var(--muted);font-size:14px}.prose h2{font-size:26px;margin-top:38px}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}.list{display:grid;gap:12px;margin:0;padding:0;list-style:none}.list li{position:relative;padding:16px 18px;border:1px solid var(--line-soft);border-radius:15px;background:rgba(255,255,255,.045);color:var(--ink);font-size:12px;transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}.list li:before{content:"✦";margin-inline-end:10px;color:var(--cyan)}.list li:hover{transform:translateX(-5px);border-color:rgba(214,222,230,.4);background:rgba(214,222,230,.07)}.form{display:grid;gap:18px;max-width:900px;padding:30px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035));box-shadow:var(--shadow);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.field{display:grid;gap:8px}.field.full{grid-column:1/-1}.field label{color:var(--ink);font-size:11px}.field label small{color:var(--dim)}.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:rgba(3,7,11,.62);color:var(--ink);outline:none;transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}.field input::placeholder,.field textarea::placeholder{color:var(--dim)}.field textarea{min-height:125px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(214,222,230,.11);transform:translateY(-1px)}.field input[type=checkbox]{width:auto;accent-color:var(--orange)}.status{display:none;padding:13px 15px;border-radius:13px;font-size:12px}.status.show{display:block}.status.info{background:rgba(214,222,230,.12);color:var(--ink)}.status.error{background:rgba(255,90,90,.12);color:#ffc0c0}.footer{padding:42px 0 30px;border-top:1px solid var(--line-soft);color:var(--muted);font-size:11px}.footer-grid{display:grid;grid-template-columns:1.3fr .8fr auto;gap:30px;align-items:end}.footer-brand{display:flex;align-items:center;gap:12px}.footer-brand-logo{width:92px;height:68px;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(255,118,38,.2))}.footer strong{display:block;color:var(--ink);font-size:13px}.footer p{max-width:340px;margin:8px 0 0}.footer nav{display:flex;flex-wrap:wrap;gap:13px}.footer nav a{transition:color .25s var(--ease)}.footer nav a:hover{color:var(--amber)}.footer-grid>span{display:grid;gap:5px;justify-items:end}.footer-dev{display:block;color:var(--amber);font-size:10px}.empty{display:inline-block;padding:14px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:12px}.error-page{text-align:center;padding:150px 0}.error-page h1{margin:0;color:var(--orange);font-size:100px;line-height:1}.whatsapp-fab{position:fixed;z-index:70;inset:auto 24px 24px auto;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 15px 32px rgba(37,211,102,.36),0 0 0 7px rgba(37,211,102,.1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}.whatsapp-fab:hover{transform:translateY(-6px) scale(1.06);box-shadow:0 22px 42px rgba(37,211,102,.45),0 0 0 11px rgba(37,211,102,.13)}.whatsapp-fab svg{width:29px;height:29px;fill:currentColor}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.reveal.is-visible{opacity:1;transform:none}.reveal.delay-1{transition-delay:.08s}.reveal.delay-2{transition-delay:.16s}.reveal.delay-3{transition-delay:.24s}.page-ready .hero-copy{animation:hero-in .8s var(--ease) both}.page-ready .hero-visual{animation:hero-in .95s .12s var(--ease) both}.page-exit{opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease}
@keyframes hero-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes scan{0%,17%{transform:translateX(-150%)}55%,72%{transform:translateX(350%)}100%{transform:translateX(350%)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(15px)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1060px){.topbar-inner{gap:14px}.brand{min-width:220px}.nav a{padding-inline:8px}.hero{grid-template-columns:1fr .9fr;gap:42px}.brand-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>span{grid-column:1/-1}}
@media(max-width:820px){.container{width:min(var(--max),calc(100% - 36px))}.topbar-inner{flex-wrap:wrap;padding:10px 0}.brand{min-width:0;order:1}.menu{display:block;order:2;margin-inline-start:auto}.lang{order:3}.theme-toggle{order:4}.nav{display:none;order:5;flex-basis:100%;flex-wrap:wrap;overflow:visible;padding:6px 0 10px}.nav.open{display:flex}.hero{min-height:auto;padding:76px 0 86px;grid-template-columns:1fr}.hero-card,.hero-card img{min-height:420px;height:420px}.hero-chip{inset:auto 16px 18px auto}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.section{padding:86px 0}.brand-group-head{display:block}.brand-group-head p{margin-top:9px}}
@media(max-width:560px){.container{width:min(100% - 26px,520px)}.hero h1{font-size:clamp(38px,10vw,52px)}.hero p{font-size:14px}.hero-card,.hero-card img{min-height:310px;height:310px}.hero-chip,.hero-orbit{display:none}.section-head{display:block}.section-head p{margin-top:11px}.grid,.split,.fields{grid-template-columns:1fr}.fields .field.full{grid-column:auto}.steps{grid-template-columns:1fr}.brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brand-group{padding:21px}.brand-group h2{font-size:21px}.footer-grid{display:block}.footer nav{margin-top:23px}.footer-grid>span{display:block;margin-top:24px}.page-hero{padding:68px 0 47px}.whatsapp-fab{inset:auto 16px 16px auto;width:52px;height:52px}.theme-toggle{width:35px;height:35px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.page-exit{opacity:1;transform:none}}


/* ===== design-system.css ===== */

/* Future Auto Service — Precision 2026 Design System */
:root{--ds-space-1:4px;--ds-space-2:8px;--ds-space-3:12px;--ds-space-4:16px;--ds-space-5:24px;--ds-space-6:32px;--ds-space-7:48px;--ds-space-8:64px;--ds-space-9:96px;--ds-radius-sm:12px;--ds-radius-md:18px;--ds-radius-lg:28px;--ds-radius-xl:38px;--ds-border:rgba(255,255,255,.12);--ds-border-strong:rgba(255,255,255,.22);--ds-surface-1:rgba(255,255,255,.045);--ds-surface-2:rgba(255,255,255,.085);--ds-focus:#d6dee6;--ds-accent:#ff7626;--ds-transition:cubic-bezier(.22,.8,.24,1)}
html{font-size:16px}body{font-feature-settings:"kern" 1,"liga" 1;text-rendering:optimizeLegibility}
html[dir="rtl"] body{text-align:right}html[dir="ltr"] body{text-align:left}html[dir="ltr"] .eyebrow:before{order:2}html[dir="ltr"] .hero-caption{border-inline-start:0;border-inline-end:2px solid var(--orange);padding-inline-start:0;padding-inline-end:15px}
/* Aurora shell */
body:before,body:after{content:"";position:fixed;z-index:-2;pointer-events:none;border-radius:50%;filter:blur(2px);opacity:.42}body:before{width:42vw;height:42vw;inset:-17vw auto auto -13vw;background:radial-gradient(circle,rgba(214,222,230,.11),transparent 67%)}body:after{width:36vw;height:36vw;inset:auto -12vw 8vh auto;background:radial-gradient(circle,rgba(255,118,38,.1),transparent 67%)}
/* Navigation as a product control bar */
.topbar-inner{min-height:86px}.nav{justify-content:center}.nav a{font-weight:600}.brand-copy strong{letter-spacing:.01em}.brand-copy small{letter-spacing:.02em}
/* Hero composition */
.hero{isolation:isolate}.hero:after{content:"01";position:absolute;z-index:-1;inset:auto 1% 8%;font-size:clamp(150px,24vw,330px);font-weight:800;line-height:.7;letter-spacing:-.12em;color:rgba(255,255,255,.025);pointer-events:none}.hero-copy{padding-block:var(--ds-space-7);max-width:760px}.hero h1{max-width:10.5ch}.hero p{max-width:55ch}.hero-visual{transform:rotate(-1deg)}.hero-visual:hover{transform:rotate(0deg)}
/* Bento services */
.grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}.grid .card{grid-column:span 4;min-height:250px}.grid .card:first-child{grid-column:span 6;min-height:300px;background:linear-gradient(145deg,rgba(214,222,230,.13),rgba(255,255,255,.035))}.grid .card:nth-child(2){grid-column:span 6}.grid .card:nth-child(3),.grid .card:nth-child(4),.grid .card:nth-child(5){grid-column:span 4}.grid .card:nth-child(6){grid-column:span 8}.card h3{max-width:24ch}.card p{max-width:48ch}.card .num{display:inline-flex;min-width:34px;justify-content:center;padding:5px 8px;border:1px solid rgba(214,222,230,.22);border-radius:999px;background:rgba(214,222,230,.06)}
/* Category selection as a tactile system */
.category-card{min-height:290px}.category-card h3{max-width:9ch;line-height:1.25}.category-card-footer{border-top:1px solid rgba(255,255,255,.1);padding-top:15px}.category-card:after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.06);border-radius:20px;pointer-events:none}
/* Process system */
.steps{position:relative;gap:12px;border:0;background:transparent;overflow:visible}.step{position:relative;min-height:190px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-md);background:linear-gradient(145deg,var(--ds-surface-2),var(--ds-surface-1));box-shadow:inset 0 1px 0 rgba(255,255,255,.1);overflow:hidden}.step:after{content:"";position:absolute;inset:auto 22px 22px; height:2px;background:linear-gradient(90deg,var(--ds-focus),transparent);transform-origin:right;transform:scaleX(.35);transition:transform .45s var(--ds-transition)}.step:hover{border-color:var(--ds-border-strong);transform:translateY(-7px);background:linear-gradient(145deg,rgba(214,222,230,.13),rgba(255,255,255,.04))}.step:hover:after{transform:scaleX(1)}.step b{font-size:36px;letter-spacing:-.08em}.step p{max-width:18ch;font-weight:600}
/* Brand directory */
body[data-page="categories"] .brand-groups{max-width:1100px;margin-inline:auto}.brand-group{border-radius:var(--ds-radius-lg)}.brand-card{min-height:112px}.brand-card strong{letter-spacing:.02em}
/* Form system */
.form{position:relative}.form:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--ds-focus),var(--ds-accent),transparent)}.fields{align-items:start}.field label{font-weight:700}.form .btn{justify-self:start}
/* Page transition and reveal */
main{animation:ds-page-in .7s var(--ds-transition) both}.reveal{transition-duration:.8s}.reveal.delay-1{transition-delay:.1s}.reveal.delay-2{transition-delay:.2s}.reveal.delay-3{transition-delay:.3s}@keyframes ds-page-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid .card,.grid .card:first-child,.grid .card:nth-child(2),.grid .card:nth-child(3),.grid .card:nth-child(4),.grid .card:nth-child(5),.grid .card:nth-child(6){grid-column:span 1;min-height:230px}.grid .card:first-child{grid-column:span 2}.nav{justify-content:flex-start}.hero-visual{transform:none}.hero:after{inset:auto 0 4%;font-size:160px}}
@media(max-width:560px){.grid,.grid .card:first-child{grid-template-columns:1fr;grid-column:span 1}.grid .card,.grid .card:first-child{grid-column:span 1}.hero h1{max-width:100%}.step p{max-width:24ch}.form .btn{justify-self:stretch}}
@media(prefers-reduced-motion:reduce){main{animation:none}.hero-visual,.step:after{transition:none}}


/* ===== v2-layout.css ===== */

/* Radical layout: Future Auto / 2026 cockpit */
.topbar-command{background:rgba(5,8,12,.88);border-bottom:1px solid rgba(255,255,255,.13)}.topbar-command .topbar-inner{display:grid;grid-template-columns:auto 1fr auto;gap:28px;min-height:92px}.topbar-command .brand{min-width:220px}.topbar-command .nav{justify-content:center;padding:0 12px}.topbar-command .nav a{font-size:10px;letter-spacing:.01em}.topbar-command .lang{justify-self:end}
.hero-v2{position:relative;min-height:calc(100vh - 92px);padding:90px 0 110px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:70px;align-items:center}.hero-v2:before{content:"";position:absolute;inset:12% auto auto 5%;width:240px;height:240px;border:1px solid rgba(214,222,230,.24);border-radius:50%;box-shadow:0 0 0 28px rgba(214,222,230,.035),0 0 0 56px rgba(214,222,230,.018);pointer-events:none}.hero-v2-copy{position:relative;z-index:2}.hero-v2-kicker{display:flex;align-items:center;gap:9px;color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.14em}.hero-v2-kicker i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}.hero-v2 h1{max-width:760px;margin:23px 0 25px;font-size:clamp(48px,6.2vw,94px);line-height:1.04;letter-spacing:-.075em}.hero-v2 h1 span{display:block;color:transparent;background:linear-gradient(100deg,var(--ink),var(--cyan) 60%,var(--amber));background-clip:text;-webkit-background-clip:text}.hero-v2-copy>p{max-width:570px;color:var(--muted);font-size:16px}.hero-v2-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}.hero-v2-proof{display:flex;flex-wrap:wrap;gap:22px;margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}.hero-v2-proof strong{display:block;color:var(--ink);font-size:19px}.hero-v2-proof span{display:block;color:var(--dim);font-size:10px}.hero-v2-stage{position:relative;min-height:590px;display:grid;place-items:center}.hero-v2-stage:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(214,222,230,.13),transparent 62%);filter:blur(10px)}.hero-v2-image{position:relative;width:min(100%,560px);height:570px;border:1px solid rgba(255,255,255,.22);border-radius:42px;overflow:hidden;transform:rotate(2.5deg);background:#121a23;box-shadow:35px 35px 100px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .6s var(--ease)}.hero-v2-image:hover{transform:rotate(0) translateY(-8px)}.hero-v2-image:before{content:"";position:absolute;z-index:2;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(214,222,230,.5) 49%,rgba(255,255,255,.9) 50%,rgba(255,118,38,.48) 51%,transparent 73%);transform:translateX(-140%) skewX(-20deg);animation:scan 7s ease-in-out infinite;mix-blend-mode:screen}.hero-v2-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(4,7,10,.94));}.hero-v2-image img{width:100%;height:100%;object-fit:cover;opacity:.72}.hero-v2-image-caption{position:absolute;z-index:3;inset:auto 28px 28px;color:var(--ink)}.hero-v2-image-caption strong{display:block;font-size:21px}.hero-v2-image-caption span{display:block;color:#d5dde0c7;font-size:11px}.hero-v2-float{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;padding:15px 17px;border:1px solid rgba(255,255,255,.2);border-radius:18px;background:rgba(10,17,24,.78);box-shadow:0 22px 45px rgba(0,0,0,.4);backdrop-filter:blur(18px);font-size:11px}.hero-v2-float.top{inset:10% auto auto -4%}.hero-v2-float.bottom{inset:auto -5% 13% auto}.hero-v2-float b{display:block;color:var(--amber);font-size:18px}.hero-v2-float small{display:block;color:var(--muted)}
.home-index{position:absolute;inset:auto 0 28px;color:rgba(255,255,255,.22);font-size:10px;letter-spacing:.18em}.home-index:before{content:"";display:inline-block;width:45px;height:1px;margin-inline-end:10px;vertical-align:middle;background:var(--cyan)}.home-panel{padding-top:30px}.home-panel .section-head{align-items:center}.home-panel .section-head h2{max-width:10ch}.home-panel .section-head p{max-width:330px}.site-v2 .section{padding-block:110px}.site-v2 .section.band{background:linear-gradient(120deg,rgba(214,222,230,.06),rgba(255,118,38,.055),transparent)}
.site-v2 .steps{grid-template-columns:repeat(4,minmax(0,1fr))}.site-v2 .step{min-height:210px}.site-v2 .step p{max-width:15ch;font-size:14px}.site-v2 .category-stage{margin-top:12px}
.footer-v2{background:rgba(5,8,12,.54)}
@media(max-width:1000px){.topbar-command .topbar-inner{grid-template-columns:auto 1fr auto;gap:16px}.hero-v2{gap:38px}.hero-v2 h1{font-size:clamp(44px,7vw,76px)}.hero-v2-float.top{inset:5% auto auto -7%}.hero-v2-float.bottom{inset:auto -7% 8%}}
@media(max-width:820px){.topbar-command .topbar-inner{display:flex}.hero-v2{min-height:auto;padding:72px 0 90px;grid-template-columns:1fr}.hero-v2-copy{order:1}.hero-v2-stage{order:2;min-height:480px}.hero-v2-image{height:470px}.hero-v2-float.top{inset:5% auto auto 0}.hero-v2-float.bottom{inset:auto 0 7% auto}.site-v2 .steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hero-v2 h1{font-size:clamp(42px,12vw,61px)}.hero-v2-proof{gap:13px}.hero-v2-proof strong{font-size:16px}.hero-v2-stage{min-height:380px}.hero-v2-image{height:365px;border-radius:30px}.hero-v2-float{padding:11px 12px;font-size:9px}.hero-v2-float.top{inset:2% auto auto 0}.hero-v2-float.bottom{inset:auto 0 2% auto}.site-v2 .steps{grid-template-columns:1fr}.site-v2 .step{min-height:150px}}


/* ===== header-footer-system.css ===== */

/* Future Auto Service — Header & Footer layer
   One source of truth for the shared navigation and footer. */
.topbar-command {
  --hf-text: var(--ink);
  --hf-muted: var(--muted);
  --hf-accent: var(--amber);
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 8, 12, .92);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.topbar-command::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--orange), transparent);
  opacity: .65;
}
.topbar-command .topbar-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 244px;
  padding: 15px 0 14px;
}
.topbar-command .brand {
  order: 1;
  min-width: 0;
  height: 150px;
  flex: 0 0 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.topbar-command .mark {
  width: 166px;
  height: 130px;
  display: grid;
  place-items: center;
  overflow: visible;
  flex: none;
}
.topbar-command .mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
  filter: drop-shadow(0 10px 22px rgba(255, 118, 38, .26));
}
.topbar-command .brand-copy { display: none; }
.topbar-command .nav {
  order: 2;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
  overflow: visible;
}
.topbar-command .nav > a,
.topbar-command .services-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 13px;
  background: rgba(255, 255, 255, .045);
  color: var(--hf-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  transition: color .25s var(--ds-transition), background .25s var(--ds-transition), border-color .25s var(--ds-transition), transform .25s var(--ds-transition);
}
.topbar-command .nav > a:hover,
.topbar-command .nav > a.active,
.topbar-command .services-trigger:hover,
.topbar-command details[open] .services-trigger {
  color: var(--hf-text);
  background: linear-gradient(135deg, rgba(255, 118, 38, .18), rgba(214, 222, 230, .1));
  border-color: rgba(255, 191, 104, .55);
  transform: translateY(-2px);
}
.topbar-command details.services-menu { position: relative; display: inline-flex; }
.topbar-command summary.services-trigger { cursor: pointer; gap: 9px; list-style: none; }
.topbar-command summary.services-trigger::-webkit-details-marker { display: none; }
.topbar-command .services-trigger span { color: var(--hf-accent); font-size: 15px; line-height: 1; }
.topbar-command details[open] .services-trigger span { transform: rotate(180deg); }
.topbar-command .services-panel {
  position: absolute;
  z-index: 100;
  top: calc(100% + 10px);
  left: 50%;
  display: grid;
  min-width: 250px;
  gap: 5px;
  padding: 10px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 18px;
  background: rgba(10, 16, 23, .98);
  box-shadow: 0 24px 55px rgba(0, 0, 0, .42);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.topbar-command details:not([open]) .services-panel { display: none; }
.topbar-command .services-panel a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--hf-muted);
  font-size: 11px;
  font-weight: 700;
}
.topbar-command .services-panel a:hover,
.topbar-command .services-panel a.active { color: var(--hf-text); background: rgba(214, 222, 230, .1); }
.topbar-command .header-actions {
  order: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 2px;
}
.topbar-command .header-actions .lang,
.topbar-command .header-actions .theme-toggle {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar-command .header-actions .lang { min-height: 34px; padding: 6px 15px; font-size: 10px; font-weight: 800; }
.topbar-command .header-actions .theme-toggle { width: 36px; height: 36px; }
.topbar-command :where(a:not(.brand), button, summary):focus:not(:focus-visible) { outline: none; }

.footer-v2 {
  color: var(--hf-muted, var(--muted));
  background: rgba(5, 8, 12, .7);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer-v2 .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 25px;
  text-align: center;
  align-items: center;
}
.footer-v2 .footer-brand { flex-direction: column; justify-content: center; gap: 8px; }
.footer-v2 .footer-brand-logo { width: 112px; height: 82px; }
.footer-v2 p { max-width: 480px; margin: 8px auto 0; color: var(--hf-muted, var(--muted)); line-height: 1.9; }
.footer-v2 .footer-contact { display: grid; gap: 4px; margin-top: 12px; color: var(--hf-muted, var(--muted)); font-size: 11px; }
.footer-v2 .footer-contact a { color: var(--hf-accent, var(--amber)); }
.footer-v2 strong { color: var(--hf-text, var(--ink)); font-size: 14px; }
.footer-v2 nav { justify-content: center; align-items: center; gap: 9px 18px; }
.footer-v2 nav a { color: var(--hf-muted, var(--muted)); font-size: 11px; font-weight: 600; }
.footer-v2 nav a:hover { color: var(--hf-accent, var(--amber)); }
.footer-v2 .footer-grid > span { display: grid; justify-items: center; gap: 5px; color: var(--hf-muted, var(--muted)); }
.footer-v2 .footer-dev { color: var(--hf-accent, var(--amber)); }

@media (max-width: 820px) {
  .topbar-command .topbar-inner { min-height: 230px; padding-inline: 14px; }
  .topbar-command .brand { height: 132px; flex-basis: 132px; }
  .topbar-command .mark { width: 150px; height: 116px; }
  .topbar-command .nav { gap: 6px; }
  .topbar-command .nav > a, .topbar-command .services-trigger { min-height: 36px; padding-inline: 10px; font-size: 10px; }
  .topbar-command .services-panel { position: fixed; top: 220px; left: 14px; right: 14px; width: auto; min-width: 0; max-height: calc(100vh - 240px); overflow-y: auto; transform: none; }
}
@media (max-width: 560px) {
  .topbar-command .topbar-inner { min-height: 228px; }
  .topbar-command .brand { height: 122px; flex-basis: 122px; }
  .topbar-command .mark { width: 136px; height: 106px; }
  .topbar-command .nav { max-width: 340px; gap: 4px; }
  .topbar-command .nav > a, .topbar-command .services-trigger { min-height: 34px; padding: 6px 8px; font-size: 9px; }
  .topbar-command .services-panel { top: 216px; left: 12px; right: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-v2 { padding-bottom: 24px; }
}


/* ===== brand-color-system.css ===== */

/* Future Auto brand color system — derived from the orange, gold, graphite and steel logo */
:root{--bg:#08090c;--bg-2:#0d1014;--panel:rgba(24,27,31,.72);--panel-solid:#171b20;--panel-soft:rgba(255,255,255,.055);--ink:#f7f3ed;--muted:#b0b3b6;--dim:#777e86;--line:rgba(214,222,230,.16);--line-soft:rgba(214,222,230,.09);--orange:#f4771c;--amber:#ffc34d;--cyan:#d6dee6;--green:#a6cfc2;--focus:#ffb83d}
body{background:radial-gradient(900px 620px at 92% -10%,rgba(244,119,28,.18),transparent 58%),radial-gradient(760px 580px at -12% 32%,rgba(214,222,230,.09),transparent 62%),linear-gradient(145deg,#08090c,#111419 62%,#0a0c10)}
body:before{background:radial-gradient(circle,rgba(214,222,230,.1),transparent 67%)}body:after{background:radial-gradient(circle,rgba(244,119,28,.12),transparent 67%)}
.hero-v2 h1 span,.hero h1 span{background:linear-gradient(100deg,var(--ink),var(--cyan) 57%,var(--amber));background-clip:text;-webkit-background-clip:text}
.btn{background:linear-gradient(120deg,var(--orange),var(--amber));box-shadow:0 16px 30px rgba(244,119,28,.2)}
.btn:hover{box-shadow:0 22px 45px rgba(244,119,28,.32)}
.section.band{background:linear-gradient(120deg,rgba(244,119,28,.07),rgba(214,222,230,.04),transparent)}
.site-v2 .section.band{background:linear-gradient(120deg,rgba(214,222,230,.045),rgba(244,119,28,.07),transparent)}
.topbar-command:after{background:linear-gradient(90deg,transparent,var(--cyan),var(--orange),transparent)}
.brand-card:hover,.category-card:hover{border-color:rgba(244,119,28,.55)}
.category-card:hover{background:linear-gradient(145deg,rgba(244,119,28,.14),rgba(255,255,255,.05))}
.hero-v2-stage:before{background:radial-gradient(circle,rgba(244,119,28,.13),transparent 62%)}
.hero-v2-image:before{background:linear-gradient(115deg,transparent 25%,rgba(214,222,230,.42) 49%,rgba(255,255,255,.9) 50%,rgba(244,119,28,.52) 51%,transparent 73%)}
.brand-logo{border-color:rgba(244,119,28,.2)!important}


/* ===== mobile-layout-fix.css ===== */

/* Mobile viewport lock: no horizontal drift or side scroll */
html{width:100%;max-width:100%;overflow-x:clip}
body{width:100%;max-width:100%;overflow-x:hidden}
*,*:before,*:after{min-width:0}
img,svg,video,canvas{max-width:100%}
@media(max-width:820px){
  .container{width:calc(100% - 28px);max-width:calc(100% - 28px);margin-inline:auto}
  .topbar,.topbar-command,.topbar-command .topbar-inner{width:100%;max-width:100%;overflow:visible}
  .topbar-command .nav{width:100%;max-width:100%;padding-inline:0;overflow:visible}
  .topbar-command .nav>a,.topbar-command .services-trigger{max-width:calc(100vw - 28px)}
  .topbar-command .services-panel{max-width:calc(100vw - 28px);width:calc(100vw - 28px);inset-inline-start:50%;overflow:hidden}
  .hero-v2,.hero,.section,.content,.page-hero{width:100%;max-width:100%;overflow:hidden}
  .hero-v2-stage{width:100%;max-width:100%;overflow:visible}
  .hero-v2-image{width:100%;max-width:100%;}
  .hero-v2-float{max-width:calc(100% - 24px);white-space:normal;overflow-wrap:anywhere}
  .hero-v2-float.top{inset-inline-start:0}.hero-v2-float.bottom{inset-inline-end:0}
  .category-rail{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
  .steps,.grid,.fields,.split{width:100%;max-width:100%}
  .footer,.footer-grid{width:100%;max-width:100%;overflow:hidden}
}
@media(max-width:560px){
  .container{width:calc(100% - 24px);max-width:calc(100% - 24px)}
  .topbar-command .nav{justify-content:center;row-gap:6px}
  .topbar-command .nav>a,.topbar-command .services-trigger{padding-inline:9px}
  .hero-v2{padding-inline:0}
  .hero-v2 h1{overflow-wrap:anywhere}
  .hero-v2-proof{max-width:100%;overflow:hidden}
}


/* ===== design-system-overrides.css ===== */

/* Future Auto Service — Page-specific overrides
   Only rules that are genuinely specific to a page belong here. */
html, body { font-family: var(--font-ar) !important; }
html[dir="rtl"] body { direction: rtl; }
html[dir="ltr"] body { direction: ltr; }

body[data-page="categories"] .page-hero .container { text-align: center; }
body[data-page="categories"] .page-hero .eyebrow { justify-content: center; }
body[data-page="categories"] .page-hero h1,
body[data-page="categories"] .page-hero p { margin-inline: auto; }
body[data-page="categories"] .brand-group { text-align: center; }
body[data-page="categories"] .brand-group::before { inset: 0 0 auto; width: 100%; height: 2px; }
body[data-page="categories"] .brand-group-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
body[data-page="categories"] .brand-group-head p { margin-inline: auto; }
body[data-page="categories"] .disclaimer { max-width: 980px; margin-inline: auto; justify-content: center; text-align: center; }

body[data-page="categories"] .brand-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}
body[data-page="categories"] .brand-card {
  position: relative;
  min-height: 210px;
  padding: 26px 22px;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow: 0 18px 38px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.1);
}
body[data-page="categories"] .brand-card::before {
  content: "";
  position: absolute;
  inset: 0 18% auto;
  width: 64%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .72;
}
body[data-page="categories"] .brand-card:hover {
  transform: translateY(-8px) scale(1.015);
  background: linear-gradient(145deg, rgba(214,222,230,.13), rgba(255,255,255,.045));
  border-color: rgba(214,222,230,.5);
  box-shadow: 0 26px 55px rgba(0,0,0,.3), 0 0 0 1px rgba(214,222,230,.08);
}
body[data-page="categories"] .brand-logo {
  width: 220px;
  height: 104px;
  display: grid;
  place-items: center;
  padding: 16px 22px;
  border: 1px solid rgba(12,20,28,.12);
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #e9eef0);
  box-shadow: 0 12px 26px rgba(0,0,0,.2), inset 0 1px 0 #fff;
}
body[data-page="categories"] .brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: none;
  opacity: 1;
}
body[data-page="categories"] .brand-card strong { font-size: 13px; letter-spacing: .04em; color: var(--ink); }

@media (max-width: 1060px) {
  body[data-page="categories"] .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body[data-page="categories"] .brand-grid { grid-template-columns: 1fr; gap: 16px; }
  body[data-page="categories"] .brand-card { min-height: 190px; }
  body[data-page="categories"] .brand-logo { width: min(240px, 88vw); height: 96px; }
}


/* Contact experience */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  gap: 24px;
  align-items: start;
}
.contact-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 30px;
  background: radial-gradient(circle at 10% 0%, rgba(255,118,38,.16), transparent 38%), linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
  box-shadow: 0 30px 90px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.12);
  isolation: isolate;
}
.contact-panel::before,
.contact-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(214,222,230,.16);
  border-radius: 50%;
  pointer-events: none;
}
.contact-panel::before { width: 300px; height: 300px; inset: -150px auto auto -70px; animation: contactOrbit 16s linear infinite; }
.contact-panel::after { width: 180px; height: 180px; inset: auto -80px 34px auto; border-color: rgba(255,118,38,.22); animation: contactOrbit 11s linear infinite reverse; }
.contact-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.contact-panel-head h2 { margin: 10px 0 4px; font-size: clamp(28px, 4vw, 46px); letter-spacing: -.05em; line-height: 1.1; }
.contact-panel-head p { margin: 0; color: var(--muted); font-size: 12px; }
.contact-pulse { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 8px rgba(104,224,179,.1), 0 0 24px var(--green); animation: contactPulse 2.2s ease-in-out infinite; }
.contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.contact-card { min-width: 0; display: flex; align-items: flex-start; gap: 13px; padding: 17px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(4,8,12,.42); color: var(--ink); transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease); }
.contact-card:hover { transform: translateY(-6px); border-color: rgba(255,191,104,.58); background: rgba(255,118,38,.1); box-shadow: 0 18px 35px rgba(0,0,0,.24); }
.contact-card-primary { grid-column: 1 / -1; background: linear-gradient(115deg, rgba(255,118,38,.24), rgba(255,255,255,.06)); border-color: rgba(255,191,104,.45); }
.contact-card-static { cursor: default; }
.contact-card-static:hover { transform: translateY(-3px); }
.contact-card-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid rgba(255,191,104,.4); border-radius: 12px; color: var(--amber); font-size: 12px; font-weight: 800; }
.contact-card span:last-child { min-width: 0; display: grid; gap: 2px; }
.contact-card small { color: var(--amber); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.contact-card strong { overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
.contact-card b { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.65; }
.contact-form-wrap { min-width: 0; }
.contact-form-wrap .form { max-width: none; position: sticky; top: 24px; }
@keyframes contactPulse { 0%,100% { transform: scale(.85); opacity: .72; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes contactOrbit { to { transform: rotate(360deg); } }

/* Vehicle brand cards: contain every logo inside a predictable box. */
body[data-page="categories"] .brand-card { min-width: 0; overflow: hidden; }
body[data-page="categories"] .brand-logo { min-width: 0; max-width: 100%; overflow: hidden; flex: 0 1 auto; }
body[data-page="categories"] .brand-logo img { display: block; width: 100%; height: 100%; min-width: 0; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
body[data-page="categories"] .brand-card strong { max-width: 100%; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-form-wrap .form { position: static; }
}
@media (max-width: 560px) {
  .contact-panel { padding: 22px 16px; border-radius: 24px; }
  .contact-cards { grid-template-columns: 1fr; }
  .contact-card-primary { grid-column: auto; }
  .contact-card { padding: 15px; }
  body[data-page="categories"] .brand-logo { width: min(240px, 88vw); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-panel::before, .contact-panel::after, .contact-pulse { animation: none; }
}


/* Contact icons and intelligent active state */
.contact-card { cursor: pointer; position: relative; }
.contact-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid transparent; opacity: 0; transform: scale(.96); transition: opacity .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); pointer-events: none; }
.contact-card.is-active { border-color: var(--amber); background: linear-gradient(120deg, rgba(255,118,38,.24), rgba(214,222,230,.08)); box-shadow: 0 0 0 1px rgba(255,191,104,.25), 0 18px 45px rgba(255,118,38,.18), inset 0 0 25px rgba(255,191,104,.06); }
.contact-card.is-active::after { opacity: 1; transform: scale(1); border-color: rgba(255,191,104,.65); }
.contact-card.is-active .contact-card-icon { color: #fff; border-color: var(--amber); background: linear-gradient(135deg, var(--orange), var(--amber)); box-shadow: 0 0 0 6px rgba(255,118,38,.12), 0 0 24px rgba(255,191,104,.42); transform: translateY(-2px) scale(1.05); }
.contact-card-icon { transition: transform .35s var(--ease), color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.contact-card-icon svg { width: 21px; height: 21px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-icon-whatsapp svg { fill: currentColor; stroke: none; }
.contact-card-primary .contact-card-icon { color: #25d366; border-color: rgba(37,211,102,.5); }
.footer-rights { direction: rtl; unicode-bidi: plaintext; text-align: center; }
.footer-rights .footer-dev { direction: inherit; }

/* Every vehicle logo stays centered and fully visible inside the logo plate. */
body[data-page="categories"] .brand-logo {
  overflow: hidden;
  padding: 12px 16px;
  align-items: center;
  justify-items: center;
}
body[data-page="categories"] .brand-logo-img,
body[data-page="categories"] .brand-logo-img.brand-wide,
body[data-page="categories"] .brand-logo-img.brand-fitted {
  display: block;
  width: auto;
  height: auto;
  max-width: 94%;
  max-height: 82%;
  object-fit: contain;
  object-position: center;
  transform: none !important;
}

/* Keep the Arabic rights sentence and Latin brand name in a deterministic visual order. */
.footer-v2 .footer-grid > .footer-rights { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; direction: ltr; unicode-bidi: isolate; }
.footer-v2 .footer-rights > span:not(.footer-dev) { white-space: nowrap; }
.footer-v2 .footer-rights .footer-dev { flex-basis: 100%; text-align: center; }


/* Services menu: keep the complete list visible and scrollable on small screens. */
.topbar-command .topbar-inner,
.topbar-command .nav,
.topbar-command details.services-menu { overflow: visible; }
.topbar-command .services-panel { z-index: 1000; }
@media (max-width: 820px) {
  .topbar-command details.services-menu[open] .services-panel {
    position: fixed;
    top: 196px;
    left: 12px;
    right: 12px;
    width: auto;
    min-width: 0;
    max-height: calc(100dvh - 212px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
    z-index: 10000;
    transform: none;
  }
}
@media (max-width: 560px) {
  .topbar-command details.services-menu[open] .services-panel {
    top: 194px;
    left: 10px;
    right: 10px;
    max-height: calc(100dvh - 208px);
    grid-template-columns: 1fr;
  }
}

.contact-card bdi { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.65; unicode-bidi: isolate; }
.contact-card > span[dir="rtl"] { min-width: 0; display: grid; gap: 2px; }


/* Services portal: a translucent glass menu that stays readable over the page. */
.topbar-command .services-menu { position: relative; display: inline-flex; }
.topbar-command .services-trigger {
  position: relative;
  isolation: isolate;
  min-width: 142px;
  min-height: 42px;
  gap: 10px;
  overflow: hidden;
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,118,38,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 22px rgba(0,0,0,.12);
}
.topbar-command .services-trigger::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255,191,104,.32), transparent 48%);
  opacity: calc(.25 + var(--proximity, 0) * .75);
  transition: opacity .25s var(--ease);
}
.topbar-command .services-trigger span { transition: transform .35s var(--ease), color .25s var(--ease); }
.topbar-command .services-menu.is-open .services-trigger span { transform: rotate(180deg); }
.topbar-command .services-panel {
  position: fixed;
  z-index: 2147483000;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(440px, calc(100vw - 24px));
  min-width: 0;
  gap: 8px;
  padding: 13px;
  overflow: hidden auto;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(20,31,40,.72), rgba(7,12,18,.56));
  box-shadow: 0 28px 80px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,118,38,.12);
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,191,104,.7) transparent;
  animation: servicesPanelIn .28s var(--ease) both;
}
.topbar-command .services-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.13), transparent 28%, transparent 72%, rgba(255,118,38,.08));
}
.topbar-command .services-panel a {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 52px;
  gap: 10px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 15px;
  color: rgba(246,247,248,.78);
  background: rgba(255,255,255,.055);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  transition: transform .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.topbar-command .services-panel a::before {
  content: counter(service-item, decimal-leading-zero);
  counter-increment: service-item;
  display: grid;
  place-items: center;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(255,191,104,.35);
  border-radius: 9px;
  color: var(--amber);
  background: rgba(255,118,38,.08);
  font-size: 9px;
  letter-spacing: .05em;
  transition: transform .3s var(--ease), color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.topbar-command .services-panel a::after {
  content: "↗";
  position: absolute;
  inset-inline-end: 12px;
  color: var(--amber);
  opacity: .4;
  transform: translateX(-5px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.topbar-command .services-panel { counter-reset: service-item; }
.topbar-command .services-panel a:hover,
.topbar-command .services-panel a:focus-visible,
.topbar-command .services-panel a.active,
.topbar-command .services-panel a.is-near {
  z-index: 1;
  color: var(--ink);
  border-color: rgba(255,191,104,.65);
  background: radial-gradient(circle at 8% 50%, rgba(255,191,104,.22), transparent 45%), linear-gradient(135deg, rgba(255,118,38,.18), rgba(214,222,230,.1));
  box-shadow: 0 12px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(255,191,104,.08), 0 0 24px rgba(255,118,38,calc(.08 + var(--proximity, 0) * .18));
  transform: translateY(-3px) translateX(calc(var(--proximity, 0) * -2px));
}
.topbar-command .services-panel a:hover::before,
.topbar-command .services-panel a:focus-visible::before,
.topbar-command .services-panel a.active::before,
.topbar-command .services-panel a.is-near::before { color: #1a0b03; background: linear-gradient(135deg, var(--amber), var(--orange)); box-shadow: 0 0 18px rgba(255,191,104,.35); transform: scale(1.08); }
.topbar-command .services-panel a:hover::after,
.topbar-command .services-panel a:focus-visible::after,
.topbar-command .services-panel a.active::after,
.topbar-command .services-panel a.is-near::after { opacity: 1; transform: translateX(0); }
@keyframes servicesPanelIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Rights: Arabic/English are separate lines, never bidi-mixed. */
.footer-v2 .footer-grid > .footer-rights { flex-direction: column; gap: 3px; line-height: 1.55; }
.footer-v2 .footer-rights .rights-main,
.footer-v2 .footer-rights .rights-brand { display: block; white-space: nowrap; }
.footer-v2 .footer-rights .rights-brand { color: var(--hf-accent, var(--amber)); font-weight: 800; }
.footer-v2 .footer-rights .footer-dev { margin-top: 5px; }

/* Contact alignment: the language controls the copy direction; phone digits stay isolated LTR. */
html[dir="rtl"] body[data-page="contact"] .contact-layout,
html[dir="rtl"] body[data-page="contact"] .contact-panel { direction: rtl; text-align: right; }
html[dir="ltr"] body[data-page="contact"] .contact-layout,
html[dir="ltr"] body[data-page="contact"] .contact-panel { direction: ltr; text-align: left; }
body[data-page="contact"] .contact-card { direction: inherit; text-align: inherit; }
body[data-page="contact"] .contact-card > span:not(.contact-card-icon) { min-width: 0; display: grid; gap: 2px; text-align: inherit; }
body[data-page="contact"] .contact-card bdi { direction: ltr; unicode-bidi: isolate; text-align: start; }


/* Arabic footer: all footer content is centered while Arabic direction is preserved. */
html[dir="rtl"] body[data-page] .footer-v2,
html[dir="rtl"] body[data-page] .footer-v2 .footer-grid,
html[dir="rtl"] body[data-page] .footer-v2 .footer-brand,
html[dir="rtl"] body[data-page] .footer-v2 nav,
html[dir="rtl"] body[data-page] .footer-v2 .footer-contact,
html[dir="rtl"] body[data-page] .footer-v2 .footer-rights { direction: rtl; }
html[dir="rtl"] body[data-page] .footer-v2,
html[dir="rtl"] body[data-page] .footer-v2 .footer-grid,
html[dir="rtl"] body[data-page] .footer-v2 .footer-brand,
html[dir="rtl"] body[data-page] .footer-v2 nav,
html[dir="rtl"] body[data-page] .footer-v2 .footer-contact,
html[dir="rtl"] body[data-page] .footer-v2 .footer-rights { text-align: center; justify-items: center; align-items: center; justify-content: center; }
.footer-v2 .footer-rights .rights-main { display: block; white-space: nowrap; direction: rtl; unicode-bidi: plaintext; }
.footer-v2 .footer-rights .rights-main bdi { direction: ltr; unicode-bidi: isolate; }

/* Day mode: a complete readable light palette, not just a button state. */
html[data-theme="light"] {
  --bg: #f3f6f8;
  --bg-2: #e8eef2;
  --panel: rgba(255,255,255,.82);
  --panel-solid: #ffffff;
  --panel-soft: rgba(15,35,48,.055);
  --ink: #13212b;
  --muted: #526572;
  --dim: #71818b;
  --line: rgba(15,35,48,.16);
  --line-soft: rgba(15,35,48,.10);
  --cyan: #426274;
  --amber: #b85e12;
  --orange: #e26419;
  --shadow: 0 30px 90px rgba(25,45,58,.16);
  background: var(--bg);
}
html[data-theme="light"] body {
  background: radial-gradient(900px 620px at 92% -10%, rgba(226,100,25,.12), transparent 58%), radial-gradient(760px 580px at -12% 32%, rgba(66,98,116,.10), transparent 62%), linear-gradient(145deg,#f7fafb,#e9f0f3 62%,#f2f6f8);
  color: var(--ink);
}
html[data-theme="light"] .topbar-command,
html[data-theme="light"] .topbar { background: rgba(247,250,251,.90); border-color: rgba(15,35,48,.12); }
html[data-theme="light"] .topbar-command .nav > a,
html[data-theme="light"] .topbar-command .services-trigger { background: rgba(15,35,48,.035); border-color: rgba(15,35,48,.12); }
html[data-theme="light"] .topbar-command .services-panel { background: rgba(255,255,255,.98); border-color: rgba(15,35,48,.16); box-shadow: 0 24px 55px rgba(25,45,58,.18); }
html[data-theme="light"] .card,
html[data-theme="light"] .brand-group,
html[data-theme="light"] .contact-panel,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .category-card,
html[data-theme="light"] .step { background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(235,242,245,.82)); border-color: rgba(15,35,48,.14); box-shadow: 0 18px 42px rgba(25,45,58,.10), inset 0 1px 0 rgba(255,255,255,.9); }
html[data-theme="light"] .brand-card { background: rgba(255,255,255,.68); border-color: rgba(15,35,48,.12); }
html[data-theme="light"] .brand-logo { background: linear-gradient(145deg,#fff,#edf2f4); }
html[data-theme="light"] .footer-v2 { background: rgba(255,255,255,.70); border-color: rgba(15,35,48,.12); }
html[data-theme="light"] .footer-v2 .footer-contact,
html[data-theme="light"] .footer-v2 p,
html[data-theme="light"] .footer-v2 nav a { color: var(--muted); }
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea { background: rgba(255,255,255,.82); color: var(--ink); border-color: rgba(15,35,48,.18); }

/* Compact, centered safety zone for German/European marks and selected tall marks. */
body[data-page="categories"] .brand-logo-img.brand-compact {
  max-width: 78%;
  max-height: 68%;
  transform: none !important;
  object-fit: contain;
  object-position: center;
}

/* Final no-crop rule: every SVG uses the whole logo plate, including on mobile. */
body[data-page="categories"] .brand-logo {
  display: grid;
  place-items: center;
  width: min(240px, 100%);
  height: 118px;
  overflow: hidden;
  padding: 12px 16px;
}
body[data-page="categories"] .brand-logo-img,
body[data-page="categories"] .brand-logo-img.brand-wide,
body[data-page="categories"] .brand-logo-img.brand-fitted,
body[data-page="categories"] .brand-logo-img.brand-compact {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none !important;
}

/* The categories page is RTL at every breakpoint; logo artwork itself remains centered. */
body[data-page="categories"],
body[data-page="categories"] main,
body[data-page="categories"] .content,
body[data-page="categories"] .brand-groups,
body[data-page="categories"] .brand-group { direction: rtl; }
body[data-page="categories"] .brand-group-head { direction: rtl; text-align: right; }
body[data-page="categories"] .brand-grid { direction: rtl; }

/* Final responsive sizing for the current web and mobile layouts. */
.theme-toggle { width: 40px; height: 40px; }
.contact-card { min-height: 78px; }
.contact-card.phone-link {
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255,191,104,.24);
}
.contact-card.phone-link:active,
.contact-card.phone-link:focus,
.contact-card.phone-link:focus-visible {
  border-color: var(--amber);
  background: linear-gradient(120deg, rgba(255,118,38,.24), rgba(214,222,230,.08));
  box-shadow: 0 0 0 2px rgba(255,191,104,.28), 0 16px 34px rgba(255,118,38,.16);
}
@media (max-width: 820px) {
  .container { width: calc(100% - 28px); max-width: calc(100% - 28px); }
  .contact-layout { gap: 16px; }
  body[data-page="categories"] .brand-logo { width: min(220px, 100%); height: 112px; }
  .footer-v2 .footer-grid { gap: 20px; }
}
@media (max-width: 560px) {
  .theme-toggle { width: 36px; height: 36px; }
  .contact-card { min-height: 72px; }
  body[data-page="categories"] .brand-card { min-height: 184px; padding: 20px 14px; }
  body[data-page="categories"] .brand-logo { width: min(230px, 100%); height: 112px; padding: 10px 12px; }
  .footer-v2 .footer-grid,
  .footer-v2 .footer-brand,
  .footer-v2 nav,
  .footer-v2 .footer-contact,
  .footer-v2 .footer-rights { text-align: center !important; justify-items: center; align-items: center; justify-content: center; }
}

/* Unified proximity glow for desktop hover and mobile touch/focus. */
html {
  --glow-rgb: 255 191 104;
  --glow-accent-rgb: 255 118 38;
}
html[data-theme="light"] {
  --glow-rgb: 184 94 18;
  --glow-accent-rgb: 226 100 25;
}
:where(a:not(.brand), button, summary, input, select, textarea, .card, .brand-card, .category-card, .contact-card) {
  --proximity: 0;
  transition: box-shadow .24s var(--ease), border-color .24s var(--ease), background-color .24s var(--ease), filter .24s var(--ease), transform .24s var(--ease);
}
:where(a:not(.brand), button, summary, input, select, textarea, .card, .brand-card, .category-card, .contact-card):hover,
:where(a:not(.brand), button, summary, input, select, textarea, .card, .brand-card, .category-card, .contact-card):focus-visible,
:where(a:not(.brand), button, summary, input, select, textarea, .card, .brand-card, .category-card, .contact-card).is-near,
:where(a:not(.brand), button, summary, input, select, textarea, .card, .brand-card, .category-card, .contact-card):active {
  border-color: rgb(var(--glow-rgb) / calc(.28 + var(--proximity) * .52));
  box-shadow: 0 0 0 2px rgb(var(--glow-rgb) / calc(.08 + var(--proximity) * .16)), 0 0 calc(14px + var(--proximity) * 28px) rgb(var(--glow-accent-rgb) / calc(.10 + var(--proximity) * .22));
  filter: brightness(calc(1 + var(--proximity) * .07));
}
:where(a:not(.brand), button, summary, .card, .brand-card, .category-card, .contact-card).is-near {
  position: relative;
  z-index: 2;
}
:where(a:not(.brand), button, summary, input, select, textarea, .card, .brand-card, .category-card, .contact-card).is-nearest {
  box-shadow: 0 0 0 2px rgb(var(--glow-rgb) / .24), 0 0 34px rgb(var(--glow-accent-rgb) / .34);
}
@media (prefers-reduced-motion: reduce) {
  :where(a:not(.brand), button, summary, input, select, textarea, .card, .brand-card, .category-card, .contact-card) { transition: none; }
}

/* Dashboard-style digital clock: fixed opposite the WhatsApp action. */
.site-clock {
  --clock-bg: rgba(7, 13, 18, .90);
  --clock-line: rgba(214, 222, 230, .18);
  --clock-text: var(--ink);
  --clock-muted: var(--muted);
  --clock-accent: var(--amber);
  position: fixed;
  z-index: 70;
  left: 16px;
  top: 218px;
  width: min(226px, calc(100vw - 78px));
  padding: 12px 14px 14px;
  overflow: hidden;
  border: 1px solid var(--clock-line);
  border-radius: 28px 12px 28px 12px;
  background: linear-gradient(145deg, var(--clock-bg), rgba(22, 31, 39, .72));
  color: var(--clock-text);
  box-shadow: 0 18px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10), 0 0 25px rgba(255,118,38,.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: none;
  direction: rtl;
}
html[dir="ltr"] .site-clock { left: auto; right: 16px; }
.site-clock::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 72%;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--orange), transparent);
}
.site-clock::after {
  content: "";
  position: absolute;
  width: 92px;
  height: 92px;
  right: -42px;
  bottom: -48px;
  border: 1px solid rgba(255,191,104,.24);
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(255,191,104,.035), 0 0 0 24px rgba(255,191,104,.02);
}
.site-clock-car {
  position: relative;
  width: 82px;
  height: 34px;
  margin: 0 auto 7px;
  border: 2px solid var(--clock-accent);
  border-radius: 24px 24px 9px 9px;
  background: linear-gradient(180deg, rgba(214,222,230,.20), rgba(255,118,38,.08));
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.035), 0 0 18px rgba(255,118,38,.13);
  transform: perspective(80px) rotateX(-8deg);
}
.site-clock-car::before,
.site-clock-car::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 13px;
  height: 7px;
  border-radius: 7px 7px 3px 3px;
  background: var(--clock-accent);
  box-shadow: 0 0 12px var(--clock-accent);
}
.site-clock-car::before { left: 7px; }
.site-clock-car::after { right: 7px; }
.site-clock-car span {
  position: absolute;
  left: 22px;
  top: 4px;
  width: 34px;
  height: 13px;
  border: 1px solid var(--cyan);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  opacity: .85;
}
.site-clock-car b {
  position: absolute;
  left: 31px;
  bottom: 4px;
  width: 20px;
  height: 3px;
  border-radius: 3px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}
.site-clock-car i {
  position: absolute;
  left: -14px;
  right: -14px;
  top: 17px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--clock-accent), transparent);
  opacity: .7;
}
.site-clock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.site-clock-kicker { color: var(--clock-accent); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.site-clock-head i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: clockPulse 2s ease-in-out infinite; }
.site-clock-time { display: block; margin-top: 2px; color: var(--clock-text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: .08em; line-height: 1.25; font-variant-numeric: tabular-nums; direction: ltr; text-align: left; text-shadow: 0 0 16px rgba(255,191,104,.22); }
.site-clock-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--clock-line); }
.site-clock-dates span { display: grid; gap: 1px; min-width: 0; }
.site-clock-dates b { color: var(--clock-accent); font-size: 8px; font-weight: 800; }
.site-clock-dates time { color: var(--clock-muted); font-size: 9px; line-height: 1.35; white-space: nowrap; }
@keyframes clockPulse { 0%,100% { opacity: .55; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
html[data-theme="light"] .site-clock {
  --clock-bg: rgba(255,255,255,.92);
  --clock-line: rgba(15,35,48,.14);
  --clock-text: #13212b;
  --clock-muted: #526572;
  --clock-accent: #a94f0d;
  box-shadow: 0 18px 42px rgba(25,45,58,.16), inset 0 1px 0 rgba(255,255,255,.95), 0 0 25px rgba(226,100,25,.10);
}
@media (max-width: 560px) {
  .site-clock { left: 10px; top: 208px; width: 190px; padding: 9px 10px 11px; border-radius: 22px 10px 22px 10px; }
  html[dir="ltr"] .site-clock { left: auto; right: 10px; }
  .site-clock-car { width: 70px; height: 29px; margin-bottom: 5px; transform: scale(.88) perspective(80px) rotateX(-8deg); }
  .site-clock-kicker { font-size: 7px; }
  .site-clock-time { font-size: 20px; }
  .site-clock-dates { gap: 5px; }
  .site-clock-dates b { font-size: 7px; }
  .site-clock-dates time { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { .site-clock-head i { animation: none; } }


/* Requested refinement: inline automotive clock before the footer */
.site-clock {
  position: relative;
  inset: auto;
  z-index: 2;
  width: min(100% - 28px, 620px);
  margin: 0 auto 18px;
  padding: 18px 22px 20px;
  border: 1px solid rgba(255, 191, 104, .3);
  border-radius: 28px 12px 28px 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(8,13,18,.8));
  box-shadow: 0 18px 55px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.14);
  overflow: hidden;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.site-clock::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(var(--cyan),var(--orange)); }
.site-clock-car { width:150px; height:54px; margin:0 auto 4px; transform:perspective(160px) rotateX(-8deg); }
.site-clock-car svg { width:100%; height:100%; overflow:visible; }
.site-clock-car .car-body { fill:rgba(255,118,38,.2); stroke:var(--orange); stroke-width:2; }
.site-clock-car .car-window { fill:rgba(214,222,230,.16); stroke:var(--cyan); stroke-width:1.5; }
.site-clock-car .car-line { stroke:var(--amber); stroke-width:1; stroke-dasharray:5 4; animation:carDash 2.6s linear infinite; }
.site-clock-car .car-wheel { fill:#0b1016; stroke:var(--cyan); stroke-width:2; }
.site-clock-car .car-hub { fill:var(--amber); }
.site-clock-car .car-light { fill:var(--amber); filter:drop-shadow(0 0 5px var(--amber)); }
.site-clock-car .car-light-back { fill:var(--orange); }
.site-clock-car .car-shadow { fill:none; stroke:rgba(214,222,230,.28); stroke-width:2; stroke-linecap:round; }
.site-clock-head { position:relative; }
.site-clock-time { font-size:clamp(25px,4vw,36px); letter-spacing:.13em; text-shadow:0 0 22px rgba(255,191,104,.28); }
.site-clock-dates { gap:18px; }
.site-clock-dates span { padding:5px 10px; border-radius:10px; background:rgba(255,255,255,.035); }
html[data-theme="light"] .site-clock { background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(231,237,241,.82)); }

/* Proximity lighting: only the single nearest target receives the glow */
:where(a:not(.brand),button,summary,input,select,textarea,.card,.brand-card,.category-card,.contact-card).is-near:not(.is-nearest) { filter:none; transform:none; box-shadow:none; }
:where(a:not(.brand),button,summary,input,select,textarea,.card,.brand-card,.category-card,.contact-card).is-nearest { filter:brightness(calc(1 + var(--proximity) * .12)); }

/* WhatsApp glass button: stable on hover and touch */
.whatsapp-fab { background:rgba(37,211,102,.18); border:1px solid rgba(156,255,195,.52); box-shadow:0 16px 36px rgba(0,0,0,.25),0 0 0 7px rgba(37,211,102,.08),inset 0 1px 0 rgba(255,255,255,.3); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); }
.whatsapp-fab:hover,.whatsapp-fab:focus-visible { background:rgba(37,211,102,.3); box-shadow:0 22px 42px rgba(0,0,0,.28),0 0 0 11px rgba(37,211,102,.12),inset 0 1px 0 rgba(255,255,255,.35); }
@keyframes carDash { to { stroke-dashoffset:-18; } }
@media(max-width:560px){ .site-clock { width:calc(100% - 24px); padding:14px 15px 16px; } .site-clock-car { width:118px; height:43px; } .site-clock-dates { gap:6px; } .site-clock-dates time { font-size:8px; } }
@media(prefers-reduced-motion:reduce){ .site-clock-car .car-line { animation:none; } }


/* Final interaction refinement: click-first services menu, clearer type and responsive motion */
.topbar-command .topbar-inner { min-height: 258px; }
.topbar-command .brand { height: 164px; flex-basis: 164px; }
.topbar-command .mark { width: 190px; height: 148px; }
.topbar-command .nav > a,
.topbar-command .services-trigger { min-height: 44px; padding: 8px 16px; font-size: 13px; }
.topbar-command .services-trigger { cursor: pointer; }
.topbar-command .services-panel a { min-height: 44px; padding: 9px 14px; font-size: 13px; }
.header-actions .lang { font-size: 12px !important; }
.footer-v2, .footer-v2 nav a, .footer-v2 .footer-contact { font-size: 12px; }
.footer-v2 p { font-size: 13px; }
.field label, .field input, .field select, .field textarea { font-size: 13px; }
.card p, .category-card p, .page-hero p, .section-head p { font-size: 14px; }
.card-link, .category-card-footer, .rail-hint { font-size: 12px; }

:where(a:not(.brand),button,summary,.card,.brand-card,.category-card,.contact-card,.btn) {
  -webkit-tap-highlight-color: transparent;
  transition: transform .34s var(--ease), filter .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease), background .34s var(--ease);
}
:where(a:not(.brand),button,summary,.card,.brand-card,.category-card,.contact-card,.btn).is-nearest {
  transform: translateY(calc(var(--proximity) * -4px)) scale(calc(1 + var(--proximity) * .014));
  filter: brightness(calc(1 + var(--proximity) * .12)) saturate(calc(1 + var(--proximity) * .08));
}
:where(a:not(.brand),button,summary,.card,.brand-card,.category-card,.contact-card,.btn).is-nearest::after { opacity: calc(.35 + var(--proximity) * .45); }
.touch-pulse { animation: touchPulse .46s var(--ease); }
.btn:hover, .card:hover, .category-card:hover, .brand-card:hover { animation: playfulLift .6s var(--ease) both; }
.site-clock-car svg { filter: drop-shadow(0 8px 12px rgba(255,118,38,.18)); }
.site-clock-car .car-body { fill: rgba(255,118,38,.2); }
@keyframes playfulLift { 0% { rotate:0deg; } 45% { rotate:-.35deg; } 100% { rotate:0deg; } }
@keyframes touchPulse { 0% { transform:scale(1); } 45% { transform:scale(1.045); } 100% { transform:scale(1); } }
@media(max-width:820px){
  .topbar-command .topbar-inner { min-height: 244px; }
  .topbar-command .brand { height: 142px; flex-basis: 142px; }
  .topbar-command .mark { width: 168px; height: 128px; }
  .topbar-command .nav > a, .topbar-command .services-trigger { min-height: 40px; padding-inline: 12px; font-size: 12px; }
  .topbar-command .services-panel a { font-size: 12px; }
}
@media(max-width:560px){
  .topbar-command .topbar-inner { min-height: 240px; }
  .topbar-command .brand { height: 132px; flex-basis: 132px; }
  .topbar-command .mark { width: 154px; height: 118px; }
  .topbar-command .nav > a, .topbar-command .services-trigger { min-height: 38px; padding: 7px 10px; font-size: 11px; }
  .topbar-command .services-panel a { font-size: 11px; }
  .card p, .category-card p, .page-hero p, .section-head p { font-size: 13px; }
}


/* Booking form refinement: branded date/time controls and centered clock copy */
.site-clock { text-align: center; }
.site-clock-head { justify-content: center; }
.site-clock-time { text-align: center; }
.site-clock-dates, .site-clock-dates span, .site-clock-dates b, .site-clock-dates time { text-align: center; }
.field input[type="date"], .field input[type="time"] {
  min-height: 50px;
  color: var(--ink);
  color-scheme: dark;
  border-color: rgba(255,191,104,.28);
  background: linear-gradient(135deg, rgba(255,118,38,.10), rgba(214,222,230,.06)), rgba(3,7,11,.62);
  accent-color: var(--orange);
}
.field input[type="date"]:hover, .field input[type="time"]:hover,
.field input[type="date"]:focus, .field input[type="time"]:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(255,191,104,.12), 0 12px 25px rgba(255,118,38,.10);
}
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 5px;
  border-radius: 8px;
  filter: invert(79%) sepia(42%) saturate(700%) hue-rotate(345deg) brightness(104%);
  background-color: rgba(255,191,104,.10);
}
html[data-theme="light"] .field input[type="date"],
html[data-theme="light"] .field input[type="time"] {
  color-scheme: light;
  color: #17212a;
  border-color: rgba(189,105,28,.35);
  background: linear-gradient(135deg, rgba(255,118,38,.12), rgba(255,255,255,.72));
}
html[data-theme="light"] .field input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] .field input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none;
  background-color: rgba(189,105,28,.10);
}

/* Branded date/time controls across every service form */
.field input[type="date"], .field input[type="time"] { appearance: none; -webkit-appearance: none; min-height: 52px; font-family: inherit; font-weight: 600; letter-spacing: .02em; background: linear-gradient(135deg, rgba(255,118,38,.14), rgba(214,222,230,.07)), rgba(3,7,11,.62); border-color: rgba(255,191,104,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.field input[type="date"]:focus, .field input[type="time"]:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,118,38,.13), 0 14px 28px rgba(255,118,38,.12); }
html[data-theme="light"] .field input[type="date"], html[data-theme="light"] .field input[type="time"] { background: linear-gradient(135deg, rgba(255,118,38,.13), rgba(255,255,255,.8)); color: #17212a; border-color: rgba(189,105,28,.42); }



/* Final typography choice: Cairo everywhere, with no font settings UI */
html body, html[dir="rtl"] body, html[dir="ltr"] body { font-family: "Cairo", Tahoma, Arial, sans-serif !important; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
.topbar-command .header-actions .lang { font-weight: 400 !important; letter-spacing: .01em; }

/* Homepage: every text-bearing element is centered */
.site-v2, .site-v2 * { text-align: center !important; }
.site-v2 .hero-v2-copy, .site-v2 .hero-v2-copy > *, .site-v2 .hero-v2-actions, .site-v2 .hero-v2-proof { justify-content: center; }
.site-v2 .hero-v2-copy > p, .site-v2 .section-head p { margin-inline: auto; }
html[dir="rtl"] .site-v2 h1, html[dir="rtl"] .site-v2 h2, html[dir="rtl"] .site-v2 h3 { letter-spacing: 0; line-height: 1.38; word-spacing: .06em; }
html[dir="ltr"] .site-v2 h1, html[dir="ltr"] .site-v2 h2, html[dir="ltr"] .site-v2 h3 { letter-spacing: .01em; line-height: 1.16; }

/* All cards: centered typography across every page and every card child */
.card, .card *,
.contact-card, .contact-card *,
.brand-card, .brand-card *,
.category-card, .category-card *,
.step, .step *,
.hero-v2-float, .hero-v2-float *,
.disclaimer, .disclaimer * {
  text-align: center !important;
}
.card, .contact-card, .brand-card, .category-card, .step, .hero-v2-float {
  align-items: center;
}
.card .card-link, .category-card-footer, .contact-card > span, .hero-v2-float > * {
  justify-content: center;
}

/* Absolute center mode requested for the full site */
body, body * { text-align: center !important; }
.card, .card *, .contact-card, .contact-card *, .brand-card, .brand-card *,
.category-card, .category-card *, .step, .step *, .list li, .list li *,
.hero-v2-float, .hero-v2-float *, .page-hero, .page-hero *, .footer, .footer * {
  text-align: center !important;
}
.card p, .card h3, .card .card-link, .contact-card > span, .brand-card strong,
.category-card p, .category-card h3, .step p, .list li, .page-hero p,
.footer p, .footer-contact, .footer nav, .footer-rights { margin-inline: auto; }


/* Final plain typography: all site copy centered in Arabic and English */
html[dir="rtl"] body, html[dir="ltr"] body { font-family: "Cairo", Tahoma, Arial, sans-serif !important; }
body, body * { text-align: center !important; }
.card, .card *, .contact-card, .contact-card *, .brand-card, .brand-card *,
.category-card, .category-card *, .step, .step *, .list li, .list li *,
.hero-v2-float, .hero-v2-float *, .page-hero, .page-hero *, .footer, .footer * {
  text-align: center !important;
}
.card p, .card h3, .card .card-link, .contact-card > span, .brand-card strong,
.category-card p, .category-card h3, .step p, .list li, .page-hero p,
.footer p, .footer-contact, .footer nav, .footer-rights { margin-inline: auto; }


/* Explicit bidirectional layout and centered headings */
html[dir="rtl"], html[dir="rtl"] body { direction: rtl !important; }
html[dir="ltr"], html[dir="ltr"] body { direction: ltr !important; }
body :where(h1, h2, h3, h4, h5, h6, .eyebrow, .kicker, .section-head, .page-hero, .hero-caption, .hero-v2-image-caption) {
  text-align: center !important;
  margin-inline-start: auto !important;
  margin-inline-end: auto !important;
}
html[dir="rtl"] body :where(h1, h2, h3, h4, h5, h6, p, li, label, a, button, summary, strong, small, span) {
  text-align: center !important;
}
html[dir="ltr"] body :where(h1, h2, h3, h4, h5, h6, p, li, label, a, button, summary, strong, small, span) {
  text-align: center !important;
}


/* v3 web polish: compact glass command bar and responsive spacing */
.topbar-command {
  background: rgba(5, 8, 12, .72);
  border-bottom-color: rgba(255, 255, 255, .10);
}
.topbar-command .topbar-inner {
  min-height: 188px;
  gap: 12px;
  padding: 14px 0 16px;
}
.topbar-command .brand {
  height: 112px;
  flex-basis: 112px;
}
.topbar-command .mark {
  width: 142px;
  height: 104px;
}
.topbar-command .nav {
  width: min(100%, 820px);
  min-height: 54px;
  padding: 8px;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 38px rgba(0,0,0,.18);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
}
.topbar-command .nav > a,
.topbar-command .services-trigger {
  min-height: 38px;
  padding: 7px 14px;
  border-color: transparent;
  border-radius: 12px;
  background: transparent;
  font-size: 11px;
}
.topbar-command .nav > a:hover,
.topbar-command .nav > a.active,
.topbar-command .services-trigger:hover,
.topbar-command details[open] .services-trigger {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 191, 104, .34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 7px 18px rgba(0,0,0,.14);
}
.topbar-command .header-actions {
  position: absolute;
  inset-inline-end: 0;
  top: 13px;
  gap: 6px;
}
.topbar-command .header-actions .lang,
.topbar-command .header-actions .theme-toggle {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.topbar-command .header-actions .lang { min-height: 32px; padding: 5px 11px; font-size: 10px !important; }
.topbar-command .header-actions .theme-toggle { width: 32px; height: 32px; }

.clock-format {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 9px auto 1px;
  padding: 3px;
  border: 1px solid var(--clock-line);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
}
.clock-format > span {
  padding: 3px 6px;
  color: var(--clock-muted);
  font-size: 8px;
  font-weight: 700;
}
.clock-format button {
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--clock-muted);
  font: inherit;
  font-size: 8px;
  font-weight: 800;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.clock-format button:hover,
.clock-format button[aria-pressed="true"] {
  color: #170b03;
  background: linear-gradient(135deg, var(--amber), var(--orange));
  border-color: rgba(255,255,255,.18);
}
html[data-theme="light"] .clock-format { background: rgba(15,35,48,.06); }
html[data-theme="light"] .clock-format button[aria-pressed="true"] { color: #fff; }

@media (max-width: 820px) {
  .topbar-command .topbar-inner { min-height: 170px; padding: 12px 14px 14px; }
  .topbar-command .brand { height: 96px; flex-basis: 96px; }
  .topbar-command .mark { width: 126px; height: 92px; }
  .topbar-command .header-actions { top: 10px; inset-inline-end: 12px; }
  .topbar-command .nav { width: min(100%, 700px); min-height: 48px; padding: 6px; }
  .topbar-command .nav > a, .topbar-command .services-trigger { min-height: 34px; padding: 6px 11px; font-size: 10px; }
}
@media (max-width: 560px) {
  .topbar-command .topbar-inner { min-height: 158px; gap: 9px; padding: 10px 10px 12px; }
  .topbar-command .brand { height: 86px; flex-basis: 86px; }
  .topbar-command .mark { width: 112px; height: 82px; }
  .topbar-command .header-actions { top: 10px; inset-inline-end: 10px; }
  .topbar-command .header-actions .lang { min-height: 28px; padding-inline: 8px; font-size: 9px !important; }
  .topbar-command .header-actions .theme-toggle { width: 28px; height: 28px; }
  .topbar-command .nav { max-width: 100%; min-height: 44px; gap: 4px; border-radius: 15px; }
  .topbar-command .nav > a, .topbar-command .services-trigger { min-height: 31px; padding: 5px 8px; font-size: 9px; border-radius: 9px; }
  .clock-format { margin-top: 7px; }
  .clock-format > span { display: none; }
  .clock-format button { min-height: 23px; padding-inline: 8px; }
}


/* v4 interaction polish: comfortable logo-to-nav spacing, isolated proximity glow, stable WhatsApp */
.topbar-command .topbar-inner {
  min-height: 216px;
  gap: 20px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.topbar-command .brand {
  height: 126px;
  flex-basis: 126px;
}
.topbar-command .mark {
  width: 154px;
  height: 114px;
}
.topbar-command .nav {
  margin-top: 2px;
  isolation: isolate;
}
.topbar-command .nav > a,
.topbar-command .services-trigger,
.topbar-command .header-actions button {
  position: relative;
  isolation: isolate;
  will-change: transform, filter, box-shadow;
}
.topbar-command .nav > a::after,
.topbar-command .services-trigger::after,
.topbar-command .header-actions button::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,191,104,.38), rgba(255,118,38,.18));
  opacity: 0;
  transform: scale(.82);
  transition: opacity .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
  pointer-events: none;
}
.topbar-command .nav > a.is-nearest,
.topbar-command .services-trigger.is-nearest,
.topbar-command .header-actions button.is-nearest {
  z-index: 2;
  transform: translateY(-3px) scale(1.035);
  filter: brightness(1.16) saturate(1.15);
  box-shadow: 0 9px 22px rgba(255,118,38,.18), inset 0 1px 0 rgba(255,255,255,.22);
}
.topbar-command .nav > a.is-nearest::after,
.topbar-command .services-trigger.is-nearest::after,
.topbar-command .header-actions button.is-nearest::after {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 0 4px rgba(255,191,104,.10), 0 0 18px rgba(255,118,38,.28);
}
.topbar-command .nav > a.is-near:not(.is-nearest),
.topbar-command .services-trigger.is-near:not(.is-nearest),
.topbar-command .header-actions button.is-near:not(.is-nearest) {
  transform: none;
  filter: none;
  box-shadow: none;
}
.whatsapp-fab {
  position: fixed;
  z-index: 80;
  touch-action: manipulation;
  contain: layout paint;
  will-change: background, box-shadow;
  transform: translateZ(0) !important;
  transition: background .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.whatsapp-fab:active {
  transform: translateZ(0) scale(.96) !important;
}
@media (max-width: 820px) {
  .topbar-command .topbar-inner { min-height: 196px; gap: 17px; padding-top: 13px; padding-bottom: 17px; }
  .topbar-command .brand { height: 108px; flex-basis: 108px; }
  .topbar-command .mark { width: 138px; height: 101px; }
}
@media (max-width: 560px) {
  .topbar-command .topbar-inner { min-height: 184px; gap: 15px; padding-top: 11px; padding-bottom: 15px; }
  .topbar-command .brand { height: 98px; flex-basis: 98px; }
  .topbar-command .mark { width: 124px; height: 91px; }
  .topbar-command .nav { margin-top: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-command .nav > a.is-nearest,
  .topbar-command .services-trigger.is-nearest,
  .topbar-command .header-actions button.is-nearest { transform: none; }
}


/* v5 type scale: slightly larger, clearer, and still aligned with the design system */
body {
  font-size: 15px;
  line-height: 1.85;
}
.topbar-command .nav > a,
.topbar-command .services-trigger { font-size: 12px; }
.topbar-command .header-actions .lang { font-size: 11px !important; }
.hero-v2-kicker, .eyebrow { font-size: 12px; }
.hero-v2-copy > p, .hero p { font-size: 17px; line-height: 1.9; }
.hero-v2-actions .btn, .actions .btn, .btn { font-size: 13px; }
.hero-v2-proof span, .kicker, .form-note { font-size: 11px; }
.section-head p, .page-hero p { font-size: 15px; line-height: 1.85; }
.card h3, .category-card h3 { font-size: 19px; }
.card p, .category-card p { font-size: 14px; line-height: 1.85; }
.card-link, .category-card-footer, .rail-hint { font-size: 13px; }
.step p, .list li, .prose p, .prose li { font-size: 15px; line-height: 1.9; }
.field label, .field input, .field select, .field textarea { font-size: 14px; }
.footer-v2 p, .footer-v2 .footer-contact, .footer-v2 nav a { font-size: 13px; }
.site-clock-time { font-size: clamp(26px, 4vw, 38px); }
.clock-format button, .clock-format > span { font-size: 9px; }
@media (max-width: 820px) {
  .topbar-command .nav > a,
  .topbar-command .services-trigger { font-size: 11px; }
  .hero-v2-copy > p, .hero p { font-size: 16px; }
  .section-head p, .page-hero p { font-size: 14px; }
  .card p, .category-card p, .list li { font-size: 14px; }
}
@media (max-width: 560px) {
  body { font-size: 14px; }
  .topbar-command .nav > a,
  .topbar-command .services-trigger { font-size: 10px; }
  .hero-v2-copy > p, .hero p { font-size: 15px; }
  .card h3, .category-card h3 { font-size: 17px; }
  .card p, .category-card p, .list li { font-size: 13px; }
  .section-head p, .page-hero p { font-size: 13px; }
  .btn { font-size: 12px; }
}


/* v6 visual story rail: poster-sized glass panels for inspection campaigns */
.visual-showcase { overflow: hidden; }
.visual-showcase-head { align-items: center; }
.visual-showcase-head h2 { max-width: 12ch; }
.visual-rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--orange) transparent;
  padding: 12px 4px 28px;
  scroll-padding-inline: 4px;
}
.visual-rail::-webkit-scrollbar { height: 7px; }
.visual-rail::-webkit-scrollbar-track { background: rgba(255,255,255,.045); border-radius: 999px; }
.visual-rail::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--cyan), var(--orange)); border-radius: 999px; }
.visual-card {
  position: relative;
  flex: 0 0 min(420px, 72vw);
  aspect-ratio: 0.8;
  min-height: 0;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035));
  box-shadow: 0 26px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(20px) saturate(1.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.visual-card:hover, .visual-card:focus-visible { transform: translateY(-9px); border-color: rgba(255,191,104,.62); box-shadow: 0 34px 80px rgba(0,0,0,.42), 0 0 0 1px rgba(255,191,104,.16), inset 0 1px 0 rgba(255,255,255,.25); }
.visual-card-image { display: block; color: var(--ink); }
.visual-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .8s var(--ease), filter .6s var(--ease); }
.visual-card-image:hover img, .visual-card-image:focus-visible img { transform: scale(1.045); filter: saturate(1.08) contrast(1.04); }
.visual-card::after { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(4,7,10,.02) 38%, rgba(4,7,10,.9) 100%); }
.visual-card-image::before { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background: linear-gradient(112deg, transparent 28%, rgba(255,255,255,.48) 49%, rgba(255,118,38,.34) 52%, transparent 72%); transform: translateX(-140%) skewX(-18deg); transition: transform .9s var(--ease); }
.visual-card-image:hover::before, .visual-card-image:focus-visible::before { transform: translateX(140%) skewX(-18deg); }
.visual-card-overlay { position:absolute; z-index:3; inset:auto 24px 24px; display:grid; gap:7px; text-align: start; }
.visual-card-overlay b { color: var(--amber); font-size: 13px; letter-spacing: .16em; }
.visual-card-overlay strong { color: var(--ink); font-size: 19px; line-height: 1.5; }
.visual-card-overlay small { color: var(--muted); font-size: 11px; }
.visual-card-slot { background: radial-gradient(circle at 75% 20%, rgba(214,222,230,.16), transparent 34%), linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,118,38,.08) 55%, rgba(7,9,13,.94)); }
.visual-card-slot-warm { background: radial-gradient(circle at 25% 28%, rgba(255,118,38,.22), transparent 36%), linear-gradient(145deg, rgba(255,118,38,.14), rgba(255,255,255,.045) 55%, rgba(7,9,13,.95)); }
.visual-slot-orbit { position:absolute; inset:13% 12% auto auto; width:64%; aspect-ratio:1; border:1px solid rgba(214,222,230,.25); border-radius:50%; box-shadow:0 0 0 22px rgba(214,222,230,.045), 0 0 0 44px rgba(255,118,38,.035); }
.visual-slot-orbit::after { content:""; position:absolute; inset:22%; border:1px dashed rgba(255,191,104,.54); border-radius:50%; animation: spin 22s linear infinite; }
.visual-card-slot::before { content:"FAS"; position:absolute; inset:20% auto auto 12%; color:rgba(255,255,255,.08); font-size:clamp(64px, 12vw, 128px); font-weight:800; letter-spacing:-.08em; }
.visual-rail-hint { margin-top: 2px; }
@media (max-width: 820px) {
  .visual-card { flex-basis: min(360px, 76vw); border-radius: 26px; }
  .visual-card-overlay { inset-inline: 19px; bottom: 19px; }
  .visual-card-overlay strong { font-size: 17px; }
}
@media (max-width: 560px) {
  .visual-showcase .section-head { display: block; }
  .visual-showcase-head h2 { max-width: 14ch; }
  .visual-rail { gap: 14px; padding-inline: 2px; }
  .visual-card { flex-basis: min(320px, 78vw); border-radius: 23px; }
  .visual-card-overlay strong { font-size: 16px; }
}


/* v7 inspection visual lightbox: full image view with booking CTA */
.visual-card-image {
  padding: 0;
  font: inherit;
  text-align: inherit;
  cursor: zoom-in;
}
.visual-card-image:focus-visible { outline: 2px solid var(--amber); outline-offset: 5px; }
body.lightbox-open { overflow: hidden; }
.visual-lightbox {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(2,5,8,.82);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.visual-lightbox.is-open { opacity: 1; visibility: visible; }
.visual-lightbox-panel {
  position: relative;
  width: min(100%, 680px);
  max-height: calc(100vh - 32px);
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 10px 10px 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(8,13,18,.84));
  box-shadow: 0 32px 100px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.2);
  transform: translateY(22px) scale(.96);
  transition: transform .42s var(--ease);
}
.visual-lightbox.is-open .visual-lightbox-panel { transform: translateY(0) scale(1); }
.visual-lightbox-panel img {
  display: block;
  width: auto;
  height: min(72vh, 760px);
  max-width: 100%;
  object-fit: contain;
  border-radius: 19px;
  box-shadow: 0 18px 45px rgba(0,0,0,.42);
}
.visual-lightbox-close {
  position: absolute;
  z-index: 3;
  inset: 12px 12px auto auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: rgba(7,10,14,.64);
  color: var(--ink);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.visual-lightbox-close:hover { color: #180b03; background: linear-gradient(135deg, var(--amber), var(--orange)); }
.visual-lightbox-book { min-width: 190px; }
@media (max-width: 560px) {
  .visual-lightbox { padding: 10px; }
  .visual-lightbox-panel { width: 100%; padding: 7px 7px 13px; border-radius: 22px; }
  .visual-lightbox-panel img { height: min(72vh, 620px); border-radius: 15px; }
  .visual-lightbox-close { width: 34px; height: 34px; inset: 9px 9px auto auto; }
  .visual-lightbox-book { min-width: 170px; }
}


/* v8 evolving glass: layered motion gradient and engine sound control */
.topbar-command .nav {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(118deg, rgba(255,118,38,.15), rgba(214,222,230,.08) 36%, rgba(255,191,104,.13) 58%, rgba(21,147,163,.10) 82%, rgba(255,118,38,.12)),
    rgba(255,255,255,.045);
  background-size: 260% 260%;
  animation: glassColorFlow 13s ease-in-out infinite;
}
.topbar-command .nav::before {
  content: "";
  position: absolute;
  inset: -80%;
  pointer-events: none;
  background: conic-gradient(from 90deg, transparent, rgba(255,191,104,.18), transparent 22%, rgba(214,222,230,.14), transparent 46%, rgba(255,118,38,.16), transparent 72%);
  animation: glassOrbit 16s linear infinite;
}
.topbar-command .nav > *,
.topbar-command .nav .services-panel { position: relative; z-index: 1; }
@keyframes glassColorFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes glassOrbit { to { transform: rotate(360deg); } }
.sound-toggle {
  position: relative;
  display: inline-grid !important;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255,191,104,.32);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(255,118,38,.16), rgba(214,222,230,.08));
  color: var(--amber);
  font-size: 16px;
  line-height: 1;
  overflow: visible;
}
.sound-toggle::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(255,191,104,.34);
  border-radius: 14px;
  opacity: 0;
  transform: scale(.82);
  pointer-events: none;
}
.sound-toggle.sound-needed::after,
.sound-toggle:hover::after,
.sound-toggle[aria-pressed="true"]:focus-visible::after {
  opacity: 1;
  animation: soundPulse 1.8s ease-out infinite;
}
.sound-toggle.is-muted { color: var(--muted); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.045); }
@keyframes soundPulse { 0% { transform:scale(.82); opacity:.75; } 70%, 100% { transform:scale(1.22); opacity:0; } }
@media (max-width: 560px) {
  .sound-toggle { width: 28px; height: 28px; border-radius: 9px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-command .nav { animation: none; }
  .topbar-command .nav::before { animation: none; }
  .sound-toggle::after { animation: none !important; }
}

/* ===== v47 responsive RTL category cards + stronger start-up sound UI ===== */
html[dir="rtl"] body,
html[dir="rtl"] .category-card,
html[dir="rtl"] .category-card * { direction: rtl; }

.category-card {
  isolation: isolate;
  flex-basis: min(390px, 86vw);
  min-height: 360px;
  padding: clamp(20px, 3vw, 30px);
  text-align: right;
  background:
    radial-gradient(circle at 8% 12%, rgba(214,222,230,.18), transparent 29%),
    radial-gradient(circle at 92% 88%, rgba(255,118,38,.27), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(7,12,18,.42) 55%, rgba(255,118,38,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 24px 62px rgba(0,0,0,.3);
}
.category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .7;
  background: linear-gradient(118deg, transparent 28%, rgba(255,255,255,.2) 42%, transparent 52%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease);
}
.category-card:hover::after { transform: translateX(120%); }
.category-card:hover {
  background:
    radial-gradient(circle at 8% 12%, rgba(214,222,230,.23), transparent 29%),
    radial-gradient(circle at 92% 88%, rgba(255,118,38,.34), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.2), rgba(7,12,18,.4) 55%, rgba(255,118,38,.13));
  border-color: rgba(255,191,104,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 30px 75px rgba(0,0,0,.38), 0 0 0 1px rgba(255,118,38,.12);
}
.category-card-copy { position: relative; z-index: 1; min-height: 104px; }
.category-card h3 { max-width: none; font-size: clamp(22px, 3vw, 29px); line-height: 1.3; }
.category-card p { max-width: 31ch; line-height: 1.9; }
.category-brand-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 22px;
}
.category-brand-chip {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 5px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  background: rgba(3,8,13,.42);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.category-brand-chip:hover { transform: translateY(-4px); border-color: rgba(255,191,104,.55); background: rgba(255,118,38,.14); }
.category-brand-logo { width: 52px; height: 28px; display: grid; place-items: center; color: var(--amber); font-size: 11px; font-weight: 800; }
.category-brand-logo img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: .9; }
.category-brand-chip b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 700; }
.category-card-footer { margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.15); }
.category-more { display: inline-flex; align-items: center; gap: 5px; color: var(--amber); transition: color .25s var(--ease), transform .25s var(--ease); }
.category-card:hover .category-more { color: #fff; transform: translateX(-3px); }
.sound-toggle { position: relative; overflow: hidden; }
.sound-toggle[aria-pressed="true"] { color: var(--amber); border-color: rgba(255,191,104,.55); box-shadow: 0 0 0 3px rgba(255,118,38,.08), 0 0 18px rgba(255,118,38,.2); }
.sound-toggle[aria-pressed="true"]::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,191,104,.35); border-radius: inherit; animation: soundRing 1.7s ease-in-out infinite; }
.sound-toggle.sound-needed { animation: soundAttention .8s ease-in-out 2; }
@keyframes soundRing { 0%,100% { transform: scale(.78); opacity: .25; } 50% { transform: scale(1); opacity: 1; } }
@keyframes soundAttention { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

@media (max-width: 820px) {
  .category-rail { gap: 14px; padding-inline: 2px; }
  .category-card { flex-basis: min(360px, 82vw); min-height: 344px; }
  .category-brand-list { gap: 6px; }
}
@media (max-width: 560px) {
  .category-card { flex-basis: calc(100vw - 42px); min-height: 330px; border-radius: 22px; }
  .category-card-copy { min-height: 98px; }
  .category-card h3 { font-size: 22px; }
  .category-brand-chip { padding-inline: 3px; }
  .category-brand-logo { width: 44px; height: 26px; }
  .category-brand-chip b { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sound-toggle[aria-pressed="true"]::before { animation: none; }
  .category-card::after { display: none; }
}

/* ===== v48 intelligent orange motion system for every card ===== */
:root {
  --orange-deep: #8d2f08;
  --orange-hot: #ff5a16;
  --orange-gold: #ffb347;
}

.card,
.category-card,
.brand-card,
.contact-card,
.contact-panel,
.form,
.price-card,
.info-card,
.service-card {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(140% 120% at var(--glow-x, 8%) var(--glow-y, 0%), rgba(255,179,71,.18), transparent 38%),
    radial-gradient(110% 100% at 94% 100%, rgba(255,90,22,.22), transparent 44%),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(31,13,7,.46) 54%, rgba(255,118,38,.1));
  border-color: rgba(255,173,89,.2);
}
.card::before,
.category-card::before,
.brand-card::before,
.contact-card::before,
.contact-panel::before,
.form::before,
.price-card::before,
.info-card::before,
.service-card::before {
  z-index: -1;
  inset: -55% -25%;
  width: 150%;
  height: 210%;
  opacity: .5;
  background: conic-gradient(from 35deg at 50% 50%, transparent 0 18%, rgba(255,179,71,.34) 26%, transparent 38%, rgba(255,90,22,.28) 53%, transparent 67%, rgba(255,209,130,.2) 78%, transparent 90%);
  filter: blur(18px);
  transform: rotate(0deg) scale(.82);
  animation: cardOrangeOrbit 11s linear infinite;
  pointer-events: none;
}
.card::after,
.category-card::after,
.brand-card::after,
.contact-card::after,
.contact-panel::after,
.form::after,
.price-card::after,
.info-card::after,
.service-card::after {
  z-index: -1;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: inherit;
  opacity: .55;
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.14) 40%, rgba(255,122,38,.18) 50%, transparent 66%);
  transform: translateX(-120%) skewX(-16deg);
  animation: cardOrangeSweep 7.5s var(--ease) infinite;
  pointer-events: none;
}
.card:hover,
.category-card:hover,
.brand-card:hover,
.contact-card:hover,
.contact-panel:hover,
.form:hover,
.price-card:hover,
.info-card:hover,
.service-card:hover {
  border-color: rgba(255,184,102,.68);
  background:
    radial-gradient(140% 120% at 18% 0%, rgba(255,179,71,.25), transparent 38%),
    radial-gradient(110% 100% at 94% 100%, rgba(255,90,22,.3), transparent 44%),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(31,13,7,.4) 54%, rgba(255,118,38,.16));
  box-shadow: 0 26px 65px rgba(0,0,0,.34), 0 0 0 1px rgba(255,118,38,.12), 0 0 32px rgba(255,90,22,.12);
}
.card > *,
.category-card > *,
.brand-card > *,
.contact-card > *,
.contact-panel > *,
.form > *,
.price-card > *,
.info-card > *,
.service-card > * { position: relative; z-index: 1; }
.category-card-footer { display: grid; gap: 8px; justify-items: start; align-items: start; }
.category-more { padding-top: 7px; border-top: 1px solid rgba(255,191,104,.28); width: 100%; }

@keyframes cardOrangeOrbit {
  from { transform: rotate(0deg) scale(.82); }
  to { transform: rotate(360deg) scale(.82); }
}
@keyframes cardOrangeSweep {
  0%, 18% { transform: translateX(-120%) skewX(-16deg); opacity: 0; }
  35% { opacity: .65; }
  58%, 100% { transform: translateX(120%) skewX(-16deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card::before,
  .category-card::before,
  .brand-card::before,
  .contact-card::before,
  .contact-panel::before,
  .form::before,
  .price-card::before,
  .info-card::before,
  .service-card::before,
  .card::after,
  .category-card::after,
  .brand-card::after,
  .contact-card::after,
  .contact-panel::after,
  .form::after,
  .price-card::after,
  .info-card::after,
  .service-card::after { animation: none; }
}

/* ===== v49 typography + layout polish for animated orange cards ===== */
.card,
.category-card,
.brand-card,
.contact-card,
.form,
.price-card,
.info-card,
.service-card {
  text-align: right;
  text-wrap: pretty;
}
.card h3,
.category-card h3,
.brand-card strong,
.contact-card h3,
.price-card h3,
.info-card h3,
.service-card h3 {
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: -.025em;
}
.card p,
.category-card p,
.brand-card p,
.contact-card p,
.price-card p,
.info-card p,
.service-card p {
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1.9;
  color: rgba(226,232,236,.76);
}
.grid { align-items: stretch; }
.card { min-height: 255px; display: flex; flex-direction: column; }
.card p { flex: 1; }
.card-link { align-self: flex-start; font-size: 13px; padding-top: 12px; border-top: 1px solid rgba(255,191,104,.24); width: 100%; }
.category-card { min-height: 300px; }
.category-card-copy { min-height: 124px; }
.category-card-footer { font-size: 13px; line-height: 1.7; }
.category-more { font-size: 13px; font-weight: 800; }
.brand-card { min-height: 130px; }
.brand-card strong { font-size: 13px; }
.section-head p { font-size: clamp(13px, 1.1vw, 15px); line-height: 1.9; }
@media (max-width: 820px) {
  .card { min-height: 235px; }
  .card h3, .category-card h3 { font-size: 18px; }
  .card p, .category-card p { font-size: 13px; }
}
@media (max-width: 560px) {
  .card { min-height: 0; }
  .card h3, .category-card h3 { font-size: 17px; line-height: 1.6; }
  .card p, .category-card p { font-size: 13px; line-height: 1.85; }
  .category-card { min-height: 286px; }
  .category-card-copy { min-height: 112px; }
}

/* ===== v51 quiet footer interactions + clearer controls ===== */
.btn,
.hero-v2-actions .btn,
.actions .btn,
.topbar-command .nav > a,
.topbar-command .services-trigger,
.topbar-command .header-actions .lang,
.services-panel a,
.footer nav a {
  font-size: 14px;
  font-weight: 800;
}
.btn { min-height: 56px; padding-inline: 24px; }
.topbar-command .nav > a,
.topbar-command .services-trigger { min-height: 40px; padding-inline: 14px; }
.services-panel a { min-height: 42px; }
.footer,
.footer * { transition: none !important; }
.footer a:hover,
.footer nav a:hover,
.footer .is-near,
.footer .is-nearest,
.footer .touch-pulse { transform: none !important; filter: none !important; animation: none !important; box-shadow: none !important; }
.footer a:hover { color: var(--amber); text-shadow: 0 0 10px rgba(255,191,104,.18); }
.footer .footer-brand-logo { filter: drop-shadow(0 5px 12px rgba(255,118,38,.12)); }
@media (max-width: 820px) {
  .btn, .hero-v2-actions .btn, .actions .btn { font-size: 14px; min-height: 54px; }
  .topbar-command .nav > a, .topbar-command .services-trigger { font-size: 13px; }
}
@media (max-width: 560px) {
  .btn, .hero-v2-actions .btn, .actions .btn { font-size: 13px; min-height: 52px; padding-inline: 18px; }
  .topbar-command .nav > a, .topbar-command .services-trigger { font-size: 12px; }
}

/* ===== v52 reliable services menu + subtle page-specific audio control ===== */
.topbar-command .services-menu { position: relative; display: inline-flex; overflow: visible; }
.topbar-command .services-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--hf-muted, var(--muted)); font: inherit; cursor: pointer; }
.topbar-command .services-menu.is-open .services-trigger,
.topbar-command .services-trigger:hover { color: var(--hf-text, var(--ink)); background: linear-gradient(135deg, rgba(255,118,38,.18), rgba(214,222,230,.1)); border-color: rgba(255,191,104,.55); }
.topbar-command .services-menu.is-open .services-trigger span { transform: rotate(180deg); }
.topbar-command .services-panel[hidden] { display: none; }
.topbar-command .services-menu.is-open .services-panel { display: grid; }
@media (max-width: 820px) {
  .topbar-command .services-menu.is-open .services-panel { position: fixed; top: 196px; left: 12px; right: 12px; width: auto; min-width: 0; max-height: calc(100dvh - 212px); overflow-y: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; z-index: 10000; transform: none; }
}
@media (max-width: 560px) {
  .topbar-command .services-menu.is-open .services-panel { top: 194px; left: 10px; right: 10px; max-height: calc(100dvh - 208px); grid-template-columns: 1fr; }
}


/* ===== v53 mobile menu visibility + centre logo favicon ===== */
.topbar-command .topbar-inner,
.topbar-command .nav,
.topbar-command .services-menu,
.topbar-command .services-panel { overflow: visible; }
.topbar-command .services-menu.is-open { z-index: 10001; }
.topbar-command .services-menu.is-open .services-panel { visibility: visible; opacity: 1; pointer-events: auto; }
.topbar-command .services-panel { visibility: visible; }
@media (max-width: 820px) {
  .topbar-command .services-menu.is-open .services-panel { top: 100%; margin-top: 10px; }
}
@media (max-width: 560px) {
  .topbar-command .services-menu.is-open .services-panel { top: 100%; margin-top: 8px; }
}

/* v54: keep the open services panel anchored under its trigger on phones */
@media (max-width: 820px) {
  .topbar-command .services-menu.is-open .services-panel {
    position: absolute;
    top: calc(100% + 9px);
    left: 50%;
    right: auto;
    width: min(300px, calc(100vw - 20px));
    max-height: min(62vh, 420px);
    transform: translateX(-50%);
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* ===== v55 contact system: steel, teal and violet accents instead of orange ===== */
body[data-page="contact"] .contact-panel {
  background:
    radial-gradient(circle at 8% 8%, rgba(74, 183, 190, .19), transparent 34%),
    radial-gradient(circle at 94% 92%, rgba(130, 105, 214, .16), transparent 34%),
    linear-gradient(145deg, rgba(214,222,230,.12), rgba(7,14,22,.76) 62%);
  border-color: rgba(119, 205, 210, .28);
  box-shadow: 0 30px 90px rgba(0,0,0,.32), inset 0 1px 0 rgba(214,222,230,.16);
}
body[data-page="contact"] .contact-card {
  min-height: 112px;
  padding: 19px;
  border-color: rgba(119,205,210,.22);
  background: linear-gradient(135deg, rgba(46,112,125,.24), rgba(20,28,42,.7) 62%, rgba(108,86,166,.15));
  box-shadow: inset 0 1px 0 rgba(214,222,230,.12), 0 14px 28px rgba(0,0,0,.16);
  text-align: right !important;
}
body[data-page="contact"] .contact-card:hover {
  transform: translateY(-3px);
  border-color: rgba(119,205,210,.48);
  background: linear-gradient(135deg, rgba(46,139,150,.3), rgba(20,28,42,.72) 62%, rgba(108,86,166,.22));
  box-shadow: inset 0 1px 0 rgba(214,222,230,.16), 0 18px 36px rgba(15,92,105,.18);
}
body[data-page="contact"] .contact-card-primary {
  background: linear-gradient(120deg, rgba(33,133,122,.38), rgba(20,65,78,.38) 58%, rgba(108,86,166,.22));
  border-color: rgba(104,224,179,.4);
}
body[data-page="contact"] .contact-card-static {
  background: linear-gradient(135deg, rgba(91,76,148,.28), rgba(30,42,61,.72) 64%, rgba(74,183,190,.13));
}
body[data-page="contact"] .contact-card-icon {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-color: rgba(119,205,210,.42);
  border-radius: 14px;
  color: #8fe2df;
  background: rgba(119,205,210,.08);
}
body[data-page="contact"] .contact-card-primary .contact-card-icon { color: #9ff0c8; border-color: rgba(104,224,179,.48); background: rgba(104,224,179,.1); }
body[data-page="contact"] .contact-card > span:not(.contact-card-icon) { text-align: right !important; align-items: start; }
body[data-page="contact"] .contact-card small { color: #8fe2df; font-size: 11px; letter-spacing: .04em; }
body[data-page="contact"] .contact-card strong { font-size: 15px; line-height: 1.7; }
body[data-page="contact"] .contact-card b,
body[data-page="contact"] .contact-card bdi { color: rgba(231,241,244,.78); font-size: 13px; line-height: 1.75; }
body[data-page="contact"] .contact-card.is-active { border-color: #8fe2df; background: linear-gradient(120deg, rgba(46,139,150,.38), rgba(91,76,148,.25)); box-shadow: 0 0 0 1px rgba(143,226,223,.2), 0 18px 40px rgba(46,139,150,.18); }
@media (max-width: 560px) {
  body[data-page="contact"] .contact-card { min-height: 100px; padding: 16px; }
  body[data-page="contact"] .contact-card strong { font-size: 14px; }
  body[data-page="contact"] .contact-card b,
  body[data-page="contact"] .contact-card bdi { font-size: 12px; }
}

/* ===== v56 final navigation visibility + orange-harmony contact cards ===== */
.topbar-command .nav::after { content: none !important; display: none !important; }
.topbar-command .services-menu.is-open { z-index: 100000 !important; }
.topbar-command .services-menu.is-open .services-panel {
  z-index: 100001 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: grid !important;
}
@media (max-width: 820px) {
  .topbar-command .services-menu.is-open .services-panel {
    position: fixed !important;
    top: 206px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 224px) !important;
    overflow-y: auto !important;
    transform: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 12px !important;
    border: 1px solid rgba(255,191,104,.5) !important;
    background: rgba(12,15,19,.98) !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(255,118,38,.18) !important;
  }
}
@media (max-width: 560px) {
  .topbar-command .services-menu.is-open .services-panel {
    top: 202px !important;
    left: 10px !important;
    right: 10px !important;
    max-height: calc(100dvh - 220px) !important;
    grid-template-columns: 1fr !important;
  }
}

body[data-page="contact"] .contact-panel {
  background:
    radial-gradient(circle at 8% 8%, rgba(255,118,38,.18), transparent 34%),
    radial-gradient(circle at 94% 92%, rgba(214,222,230,.12), transparent 34%),
    linear-gradient(145deg, rgba(255,195,77,.10), rgba(15,18,22,.82) 62%);
  border-color: rgba(255,191,104,.34);
}
body[data-page="contact"] .contact-cards { gap: 14px; margin-top: 28px; }
body[data-page="contact"] .contact-card {
  min-height: 116px;
  padding: 20px;
  border-color: rgba(255,191,104,.28);
  background: linear-gradient(135deg, rgba(255,118,38,.20), rgba(30,28,27,.76) 58%, rgba(214,222,230,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px rgba(0,0,0,.18);
  text-align: right !important;
}
body[data-page="contact"] .contact-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,191,104,.58);
  background: linear-gradient(135deg, rgba(255,118,38,.28), rgba(30,28,27,.78) 58%, rgba(214,222,230,.13));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 36px rgba(255,118,38,.13);
}
body[data-page="contact"] .contact-card-primary {
  background: linear-gradient(120deg, rgba(37,155,94,.26), rgba(255,118,38,.24) 58%, rgba(255,195,77,.13));
  border-color: rgba(104,224,179,.42);
}
body[data-page="contact"] .contact-card-static {
  background: linear-gradient(135deg, rgba(214,222,230,.14), rgba(34,31,29,.78) 60%, rgba(255,118,38,.16));
}
body[data-page="contact"] .contact-card-icon {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-color: rgba(255,191,104,.52);
  border-radius: 14px;
  color: var(--amber);
  background: rgba(255,118,38,.10);
}
body[data-page="contact"] .contact-card-primary .contact-card-icon { color: #b8f0cb; border-color: rgba(104,224,179,.52); background: rgba(37,155,94,.13); }
body[data-page="contact"] .contact-card > span:not(.contact-card-icon) { text-align: right !important; align-items: start; gap: 3px; }
body[data-page="contact"] .contact-card small { color: var(--amber); font-size: 11px; font-weight: 800; letter-spacing: .03em; }
body[data-page="contact"] .contact-card strong { color: var(--ink); font-size: 15px; line-height: 1.65; }
body[data-page="contact"] .contact-card b,
body[data-page="contact"] .contact-card bdi { color: rgba(239,235,226,.78); font-size: 13px; line-height: 1.75; }
body[data-page="contact"] .contact-card.is-active { border-color: var(--amber); background: linear-gradient(120deg, rgba(255,118,38,.34), rgba(255,195,77,.14)); box-shadow: 0 0 0 1px rgba(255,191,104,.22), 0 18px 40px rgba(255,118,38,.16); }
@media (max-width: 560px) {
  body[data-page="contact"] .contact-cards { gap: 11px; margin-top: 22px; }
  body[data-page="contact"] .contact-card { min-height: 104px; padding: 16px; }
  body[data-page="contact"] .contact-card strong { font-size: 14px; }
  body[data-page="contact"] .contact-card b,
  body[data-page="contact"] .contact-card bdi { font-size: 12px; }
}

/* ===== v57 navigation type and spacing polish ===== */
.topbar-command .nav > a,
.topbar-command .services-trigger {
  text-align: center !important;
  line-height: 1.35;
  letter-spacing: 0;
  flex: 0 0 auto;
}
.topbar-command .nav { gap: 8px; }
.topbar-command .services-trigger { min-width: 142px; }
.topbar-command .nav > a { min-width: 96px; }
.services-panel-portal { display: grid !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
.services-panel-portal a { text-align: right !important; }
@media (max-width: 560px) {
  .topbar-command .nav { gap: 8px; padding-inline: 7px; }
  .topbar-command .nav > a { min-width: 102px; }
  .topbar-command .services-trigger { min-width: 150px; }
}

/* Mobile touch target and stable portal layer. */
.topbar-command .services-trigger { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.topbar-command .services-panel.services-panel-portal { visibility: visible; pointer-events: auto; }
@media (max-width: 560px) {
  .topbar-command .services-panel.services-panel-portal {
    grid-template-columns: 1fr;
    border-radius: 20px;
    padding: 10px;
  }
  .topbar-command .services-panel.services-panel-portal a { min-height: 48px; }
}

/* The portal is appended to body by JavaScript, so it no longer has .topbar-command as an ancestor. */
.services-panel.services-panel-portal {
  position: fixed !important;
  z-index: 2147483000 !important;
  display: grid !important;
  counter-reset: service-item;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 13px;
  overflow: hidden auto;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(20,31,40,.78), rgba(7,12,18,.68));
  box-shadow: 0 28px 80px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,118,38,.12);
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,191,104,.7) transparent;
}
.services-panel.services-panel-portal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.14), transparent 30%, transparent 70%, rgba(255,118,38,.1));
}
.services-panel.services-panel-portal a {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center;
  min-height: 52px;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 15px;
  color: rgba(246,247,248,.86) !important;
  background: rgba(255,255,255,.07);
  font-family: var(--font-ar);
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.45;
  white-space: normal;
  transition: transform .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.services-panel.services-panel-portal a::before {
  content: counter(service-item, decimal-leading-zero);
  counter-increment: service-item;
  display: grid;
  place-items: center;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(255,191,104,.38);
  border-radius: 9px;
  color: var(--amber);
  background: rgba(255,118,38,.1);
  font-size: 9px;
}
.services-panel.services-panel-portal a::after {
  content: "↗";
  margin-inline-start: auto;
  color: var(--amber);
  opacity: .7;
}
.services-panel.services-panel-portal a:hover,
.services-panel.services-panel-portal a:focus-visible,
.services-panel.services-panel-portal a.active,
.services-panel.services-panel-portal a.is-near {
  color: var(--ink) !important;
  border-color: rgba(255,191,104,.7);
  background: linear-gradient(135deg, rgba(255,118,38,.24), rgba(214,222,230,.12));
  box-shadow: 0 12px 28px rgba(0,0,0,.25), 0 0 22px rgba(255,118,38,.18);
  transform: translateY(-2px);
}
@media (max-width: 560px) {
  .services-panel.services-panel-portal {
    grid-template-columns: 1fr;
    padding: 10px;
    border-radius: 20px;
  }
  .services-panel.services-panel-portal a { min-height: 48px; font-size: 13px !important; }
}

/* Final navigation contract: no horizontal rail or scrollbar on any device. */
.topbar-command .nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  overflow: visible !important;
  white-space: normal;
  scrollbar-width: none;
}
.topbar-command .nav::-webkit-scrollbar { display: none; }
.topbar-command .nav > a,
.topbar-command .nav .services-menu { flex: 0 0 auto; }
.services-panel.services-panel-portal {
  max-height: none !important;
  overflow: visible !important;
}
@media (max-width: 820px) {
  .topbar-command .nav { padding: 8px 0 9px; }
}
@media (max-width: 560px) {
  .topbar-command .nav { gap: 5px; }
  .topbar-command .nav > a,
  .topbar-command .services-trigger { min-height: 38px; padding-inline: 10px; font-size: 11px; }
}

/* Release 1.0 navigation: one compact horizontal rail, with the animated glass contained inside it. */
.topbar-command .nav {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  isolation: isolate;
  contain: paint;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  background-clip: padding-box;
}
.topbar-command .nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
.topbar-command .nav > a,
.topbar-command .nav .services-menu { flex: 0 0 auto; }
.topbar-command .nav::before {
  inset: 0;
  border-radius: inherit;
  clip-path: inset(0 round 18px);
  contain: paint;
  transform: none;
  background: linear-gradient(115deg, rgba(255,118,38,.18), rgba(214,222,230,.10) 35%, rgba(255,191,104,.16) 60%, rgba(21,147,163,.12) 82%, rgba(255,118,38,.16));
  background-size: 220% 100%;
  animation: navGlassFlow 12s ease-in-out infinite;
  mix-blend-mode: normal;
  opacity: .9;
}
.topbar-command .nav::after { content: none !important; display: none !important; }
@keyframes navGlassFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (max-width: 820px) {
  .topbar-command .nav { max-width: 100%; padding: 8px 6px 9px; }
}
@media (max-width: 560px) {
  .topbar-command .nav { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-command .nav::before { animation: none; }
}


/* v66: keep every navigation link, especially Contact, inside the mobile frame */
@media (max-width: 820px) {
  .topbar-command .nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    gap: 7px;
    padding: 9px;
    overflow: hidden !important;
    white-space: normal;
  }
  .topbar-command .nav > a,
  .topbar-command .nav .services-menu {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .topbar-command .nav > a,
  .topbar-command .nav .services-trigger {
    min-height: 42px;
    padding: 7px 8px;
    white-space: normal;
    line-height: 1.35;
  }
  .topbar-command .nav .services-menu { display: block; }
  .topbar-command .nav .services-trigger {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-content: center;
    gap: 5px;
  }
}


/* v67: restore the compact horizontal mobile rail and hint only when it overflows */
@media (max-width: 820px) {
  .topbar-command .nav {
    display: flex !important;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    min-height: 54px;
    gap: 6px;
    padding: 8px 10px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
  .topbar-command .nav::-webkit-scrollbar { display: none; }
  .topbar-command .nav > a,
  .topbar-command .nav .services-menu {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .topbar-command .nav > a,
  .topbar-command .nav .services-trigger {
    min-height: 38px;
    padding: 6px 10px;
    white-space: nowrap;
  }
  .topbar-command .nav .services-menu { display: inline-flex; }
  .topbar-command .nav .services-trigger { width: auto; min-width: 142px; }
}


/* v68: clean mobile hero layout and smooth, full-width header aurora motion */
@media (max-width: 560px) {
  body[data-page="home"] .hero-v2-stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    justify-items: stretch;
    gap: 10px;
    min-height: 0;
    padding-top: 10px;
  }
  body[data-page="home"] .hero-v2-image {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    height: clamp(250px, 78vw, 350px);
    border-radius: 24px;
    transform: none;
    box-shadow: 0 20px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.22);
  }
  body[data-page="home"] .hero-v2-image:hover { transform: none; }
  body[data-page="home"] .hero-v2-image::before {
    animation: none;
    opacity: .16;
    mix-blend-mode: normal;
  }
  body[data-page="home"] .hero-v2-float {
    position: relative;
    inset: auto !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 8px 10px;
    gap: 7px;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,.22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body[data-page="home"] .hero-v2-float.top { grid-column: 1; grid-row: 2; }
  body[data-page="home"] .hero-v2-float.bottom { grid-column: 2; grid-row: 2; }
  body[data-page="home"] .hero-v2-float b { font-size: 15px; }
  body[data-page="home"] .hero-v2-float small { font-size: 9px; line-height: 1.35; }
  body[data-page="home"] .hero-v2-image-caption { inset-inline: 16px; bottom: 16px; }
  body[data-page="home"] .hero-v2-image-caption strong { font-size: 18px; }
}

/* Fill the complete nav capsule with a quiet aurora and a transform-only light pass. */
.topbar-command .nav {
  background-color: rgba(11,16,22,.82);
  background-image:
    linear-gradient(116deg, rgba(255,118,38,.17), rgba(255,191,104,.12) 28%, rgba(214,222,230,.08) 54%, rgba(21,147,163,.13) 78%, rgba(255,118,38,.15)),
    linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  background-size: 100% 100%, 100% 100%;
  animation: none;
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
}
.topbar-command .nav::before {
  inset: -22% -58%;
  clip-path: none;
  contain: none;
  background: linear-gradient(108deg, transparent 22%, rgba(255,118,38,.06) 33%, rgba(255,191,104,.24) 46%, rgba(214,222,230,.15) 55%, rgba(21,147,163,.19) 66%, rgba(255,118,38,.09) 75%, transparent 86%);
  opacity: .92;
  mix-blend-mode: screen;
  transform: translate3d(-48%,0,0) skewX(-14deg);
  animation: navAuroraPass 8.5s cubic-bezier(.45,0,.55,1) infinite alternate;
  will-change: transform;
}
.topbar-command .nav::after {
  background:
    radial-gradient(180px circle at var(--nav-pointer-x) var(--nav-pointer-y), rgba(255,191,104,.18), transparent 76%),
    linear-gradient(110deg, transparent 38%, rgba(255,255,255,.035) 48%, rgba(255,191,104,.08) 51%, transparent 63%);
  opacity: calc(.08 + var(--nav-glow) * .68);
}
@keyframes navAuroraPass {
  0% { transform: translate3d(-48%,0,0) skewX(-14deg) scaleX(.92); }
  100% { transform: translate3d(48%,0,0) skewX(-14deg) scaleX(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-command .nav::before { animation: none; transform: none; }
}


/* v69: make the animated spectrum read clearly across the full nav capsule */
.topbar-command .nav {
  background-image:
    linear-gradient(116deg, rgba(255,118,38,.24) 0%, rgba(255,191,104,.21) 26%, rgba(214,222,230,.13) 52%, rgba(21,147,163,.2) 76%, rgba(255,118,38,.23) 100%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 14px 36px rgba(0,0,0,.2), 0 0 22px rgba(255,118,38,.09);
}
.topbar-command .nav::before {
  background: linear-gradient(108deg, transparent 8%, rgba(255,118,38,.12) 22%, rgba(255,191,104,.34) 40%, rgba(214,222,230,.24) 53%, rgba(21,147,163,.3) 66%, rgba(255,118,38,.2) 79%, transparent 93%);
  animation-duration: 7.6s;
}


/* v70: coherent, legible daylight palette across the full site */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7f9;
  --bg-2: #eaf0f3;
  --panel: rgba(255,255,255,.92);
  --panel-solid: #fff;
  --panel-soft: rgba(20,42,54,.045);
  --ink: #172630;
  --muted: #526671;
  --dim: #667984;
  --line: rgba(23,38,48,.16);
  --line-soft: rgba(23,38,48,.09);
  --cyan: #2b697c;
  --amber: #95500d;
  --orange: #c95212;
  --green: #218158;
  --focus: #92500e;
  --ds-focus: #92500e;
  --ds-accent: #c95212;
  --shadow: 0 24px 60px rgba(32,55,68,.12);
  background: #f4f7f9;
}
html[data-theme="light"] body {
  color: var(--ink);
  background: radial-gradient(900px 620px at 92% -10%,rgba(226,100,25,.075),transparent 60%),radial-gradient(760px 580px at -12% 32%,rgba(66,98,116,.065),transparent 62%),linear-gradient(145deg,#f8fafb,#edf2f5 62%,#f5f8fa);
}
html[data-theme="light"] body::before { opacity: .22; }
html[data-theme="light"] body::after { opacity: .18; }
html[data-theme="light"] .topbar-command,
html[data-theme="light"] .topbar {
  color: var(--ink);
  background: rgba(250,252,253,.96);
  border-color: rgba(23,38,48,.12);
  box-shadow: 0 12px 32px rgba(32,55,68,.07);
}
html[data-theme="light"] .topbar-command .nav {
  color: var(--ink);
  border-color: rgba(23,38,48,.16);
  background-color: rgba(255,255,255,.9);
  background-image: linear-gradient(116deg,rgba(255,255,255,.96),rgba(239,246,249,.96) 45%,rgba(255,248,239,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98),0 10px 28px rgba(32,55,68,.09);
}
html[data-theme="light"] .topbar-command .nav::before {
  background: linear-gradient(108deg,transparent 8%,rgba(226,100,25,.07) 22%,rgba(255,191,104,.22) 40%,rgba(255,255,255,.34) 53%,rgba(42,130,151,.14) 66%,rgba(226,100,25,.1) 79%,transparent 93%);
  opacity: .78;
  mix-blend-mode: normal;
}
html[data-theme="light"] .topbar-command .nav > a,
html[data-theme="light"] .topbar-command .services-trigger {
  color: var(--ink) !important;
  border-color: rgba(23,38,48,.13);
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95),0 3px 10px rgba(32,55,68,.045);
  text-shadow: none;
}
html[data-theme="light"] .topbar-command .nav > a:hover,
html[data-theme="light"] .topbar-command .nav > a:focus-visible,
html[data-theme="light"] .topbar-command .nav > a.active,
html[data-theme="light"] .topbar-command .services-trigger:hover,
html[data-theme="light"] .topbar-command .services-menu.is-open .services-trigger {
  color: #71370d !important;
  border-color: rgba(201,82,18,.35);
  background: linear-gradient(135deg,rgba(255,192,108,.3),rgba(255,255,255,.94));
}
html[data-theme="light"] .topbar-command .nav > .nav-contact { background: linear-gradient(135deg,rgba(255,191,104,.25),rgba(226,100,25,.09)); }
html[data-theme="light"] .topbar-command .header-actions button {
  color: var(--ink);
  border-color: rgba(23,38,48,.16);
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 14px rgba(32,55,68,.08);
}
html[data-theme="light"] .topbar-command .services-panel,
html[data-theme="light"] .services-panel-portal {
  color: var(--ink);
  border-color: rgba(23,38,48,.16);
  background: linear-gradient(145deg,rgba(255,255,255,.99),rgba(241,247,249,.99));
  box-shadow: 0 24px 55px rgba(32,55,68,.2),inset 0 1px 0 #fff;
}
html[data-theme="light"] .topbar-command .services-panel a,
html[data-theme="light"] .services-panel-portal a {
  color: var(--ink) !important;
  border-color: rgba(23,38,48,.1);
  background: rgba(255,255,255,.84);
}
html[data-theme="light"] .topbar-command .services-panel a:hover,
html[data-theme="light"] .topbar-command .services-panel a.active,
html[data-theme="light"] .services-panel-portal a:hover,
html[data-theme="light"] .services-panel-portal a.active {
  color: #71370d !important;
  border-color: rgba(201,82,18,.3);
  background: linear-gradient(135deg,rgba(255,191,104,.28),rgba(255,255,255,.95));
  box-shadow: 0 8px 20px rgba(32,55,68,.08);
}
@media (max-width: 820px) {
  html[data-theme="light"] .topbar-command .services-menu.is-open .services-panel {
    color: var(--ink) !important;
    border-color: rgba(23,38,48,.18) !important;
    background: linear-gradient(145deg,rgba(255,255,255,.99),rgba(241,247,249,.99)) !important;
    box-shadow: 0 24px 55px rgba(32,55,68,.2) !important;
  }
}
html[data-theme="light"] .hero-v2-float {
  color: var(--ink);
  border-color: rgba(23,38,48,.14);
  background: linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,245,247,.94));
  box-shadow: 0 12px 28px rgba(32,55,68,.12),inset 0 1px 0 #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html[data-theme="light"] .hero-v2-float small { color: var(--muted); }
html[data-theme="light"] .hero-v2-float b { color: #9a520d; }
html[data-theme="light"] .hero-v2-stage::before { background: radial-gradient(circle,rgba(226,100,25,.09),transparent 64%); }
html[data-theme="light"] .hero-v2-image-caption,
html[data-theme="light"] .hero-v2-image-caption strong { color: #fff; }
html[data-theme="light"] .hero-v2-image-caption span { color: rgba(255,255,255,.9); }
html[data-theme="light"] .hero-v2-proof { border-color: rgba(23,38,48,.14); }
html[data-theme="light"] .home-index { color: #687984; }
html[data-theme="light"] .section.band,
html[data-theme="light"] .site-v2 .section.band { background: linear-gradient(120deg,rgba(226,100,25,.035),rgba(66,98,116,.035),transparent); }
html[data-theme="light"] .disclaimer { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,.8); }

html[data-theme="light"] body .card,
html[data-theme="light"] body .category-card,
html[data-theme="light"] body .brand-group,
html[data-theme="light"] body .brand-card,
html[data-theme="light"] body .step,
html[data-theme="light"] body .contact-panel,
html[data-theme="light"] body .contact-card,
html[data-theme="light"] body .form,
html[data-theme="light"] body .price-card,
html[data-theme="light"] body .info-card,
html[data-theme="light"] body .service-card {
  color: var(--ink);
  border-color: rgba(23,38,48,.13);
  background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,245,247,.93));
  box-shadow: 0 14px 34px rgba(32,55,68,.09),inset 0 1px 0 rgba(255,255,255,.98);
}
html[data-theme="light"] body .card p,
html[data-theme="light"] body .category-card p,
html[data-theme="light"] body .brand-card p,
html[data-theme="light"] body .contact-card p,
html[data-theme="light"] body .price-card p,
html[data-theme="light"] body .info-card p,
html[data-theme="light"] body .service-card p,
html[data-theme="light"] body .step p { color: var(--muted); }
html[data-theme="light"] .category-card-footer,
html[data-theme="light"] .category-more,
html[data-theme="light"] .card-link { color: #344b57; border-color: rgba(23,38,48,.12); }
html[data-theme="light"] body .card:hover,
html[data-theme="light"] body .category-card:hover,
html[data-theme="light"] body .brand-card:hover,
html[data-theme="light"] body .contact-card:hover,
html[data-theme="light"] body .service-card:hover {
  color: var(--ink);
  border-color: rgba(201,82,18,.28);
  background: linear-gradient(145deg,#fff8ef,#fff 58%,#eef6f8);
  box-shadow: 0 18px 38px rgba(32,55,68,.12),0 0 0 1px rgba(201,82,18,.06);
}
html[data-theme="light"] body .card p,
html[data-theme="light"] body .category-card p,
html[data-theme="light"] body .brand-card p,
html[data-theme="light"] body .contact-card p,
html[data-theme="light"] body .price-card p,
html[data-theme="light"] body .info-card p,
html[data-theme="light"] body .service-card p { color: #526671; }

html[data-theme="light"] .contact-panel,
html[data-theme="light"] body[data-page="contact"] .contact-panel {
  color: var(--ink);
  border-color: rgba(23,38,48,.14);
  background: radial-gradient(circle at 8% 8%,rgba(255,190,106,.15),transparent 34%),linear-gradient(145deg,#fff,#eef4f6 72%);
  box-shadow: 0 20px 48px rgba(32,55,68,.1),inset 0 1px 0 #fff;
}
html[data-theme="light"] .contact-panel-head h2 { color: var(--ink); }
html[data-theme="light"] .contact-panel-head p { color: var(--muted); }
html[data-theme="light"] .contact-panel::before,
html[data-theme="light"] .contact-panel::after { border-color: rgba(43,105,124,.12); }
html[data-theme="light"] body[data-page="contact"] .contact-card {
  color: var(--ink);
  border-color: rgba(23,38,48,.13);
  background: linear-gradient(135deg,#fff,#f0f5f7);
  box-shadow: 0 8px 20px rgba(32,55,68,.075),inset 0 1px 0 #fff;
}
html[data-theme="light"] body[data-page="contact"] .contact-card-primary {
  border-color: rgba(33,129,88,.25);
  background: linear-gradient(120deg,rgba(33,129,88,.075),rgba(255,255,255,.98) 56%,rgba(255,191,104,.16));
}
html[data-theme="light"] body[data-page="contact"] .contact-card-static { background: linear-gradient(135deg,#fff,#eef4f6 72%,rgba(255,191,104,.09)); }
html[data-theme="light"] body[data-page="contact"] .contact-card small { color: #8b4a0c; }
html[data-theme="light"] body[data-page="contact"] .contact-card strong { color: #172630; }
html[data-theme="light"] body[data-page="contact"] .contact-card b,
html[data-theme="light"] body[data-page="contact"] .contact-card bdi { color: #526671; }
html[data-theme="light"] body[data-page="contact"] .contact-card-icon { color: #87500f; border-color: rgba(149,80,13,.22); background: rgba(255,191,104,.16); }
html[data-theme="light"] body[data-page="contact"] .contact-card-primary .contact-card-icon { color: #176a48; border-color: rgba(33,129,88,.26); background: rgba(33,129,88,.08); }
html[data-theme="light"] body[data-page="contact"] .contact-card:hover,
html[data-theme="light"] body[data-page="contact"] .contact-card.is-active { border-color: rgba(201,82,18,.3); background: linear-gradient(135deg,#fff5e8,#fff 62%,#eef6f7); }
html[data-theme="light"] .contact-pulse { background: #218158; box-shadow: 0 0 0 8px rgba(33,129,88,.1),0 0 20px rgba(33,129,88,.22); }

html[data-theme="light"] .field label { color: #243b47; }
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea {
  color: #172630;
  border-color: rgba(23,38,48,.2);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(32,55,68,.035);
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #74848d; opacity: 1; }
html[data-theme="light"] select option { color: #172630; background: #fff; }
html[data-theme="light"] input[type="checkbox"] { accent-color: #c95212; }
html[data-theme="light"] .form-note { color: #61737d; }
html[data-theme="light"] .status { color: #29404c; border-color: rgba(23,38,48,.12); background: rgba(255,255,255,.82); }
html[data-theme="light"] .field input:focus,
html[data-theme="light"] .field select:focus,
html[data-theme="light"] .field textarea:focus { border-color: #c95212; box-shadow: 0 0 0 3px rgba(201,82,18,.13); }
html[data-theme="light"] .btn {
  color: #24170d;
  border-color: rgba(132,67,13,.2);
  background: linear-gradient(120deg,#e96b19,#f1b83f);
  box-shadow: 0 10px 24px rgba(174,83,17,.18),inset 0 1px 0 rgba(255,255,255,.32);
  text-shadow: none;
}
html[data-theme="light"] .btn:hover,
html[data-theme="light"] .btn:focus-visible { color: #211307; background: linear-gradient(120deg,#f07820,#f7c653); box-shadow: 0 14px 30px rgba(174,83,17,.22); }
html[data-theme="light"] .btn.secondary {
  color: #243944;
  border-color: rgba(23,38,48,.18);
  background: linear-gradient(135deg,rgba(255,255,255,.96),rgba(235,242,245,.92));
  box-shadow: 0 6px 18px rgba(32,55,68,.07),inset 0 1px 0 #fff;
}
html[data-theme="light"] .btn.secondary:hover { color: #71370d; border-color: rgba(201,82,18,.3); background: #fff8ef; }

html[data-theme="light"] .visual-rail::-webkit-scrollbar-track { background: rgba(23,38,48,.08); }
html[data-theme="light"] .visual-card-slot {
  border-color: rgba(23,38,48,.13);
  background: radial-gradient(circle at 75% 20%,rgba(43,105,124,.08),transparent 36%),linear-gradient(145deg,#fff,#eef4f6 60%,#fff8ef);
  box-shadow: 0 18px 40px rgba(32,55,68,.09),inset 0 1px 0 #fff;
}
html[data-theme="light"] .visual-card-slot-warm { background: radial-gradient(circle at 25% 28%,rgba(226,100,25,.11),transparent 38%),linear-gradient(145deg,#fffaf3,#fff 55%,#eef5f7); }
html[data-theme="light"] .visual-card-slot::after { display: none; }
html[data-theme="light"] .visual-card-slot::before { color: rgba(23,38,48,.055); }
html[data-theme="light"] .visual-slot-orbit { border-color: rgba(43,105,124,.18); box-shadow: 0 0 0 22px rgba(43,105,124,.035),0 0 0 44px rgba(201,82,18,.025); }
html[data-theme="light"] .visual-slot-orbit::after { border-color: rgba(149,80,13,.38); }
html[data-theme="light"] .visual-card-slot .visual-card-overlay strong { color: #172630; }
html[data-theme="light"] .visual-card-slot .visual-card-overlay small { color: #526671; }
html[data-theme="light"] .visual-card-slot .visual-card-overlay b { color: #95500d; }
html[data-theme="light"] .visual-card-image .visual-card-overlay strong { color: #fff; }
html[data-theme="light"] .visual-card-image .visual-card-overlay small { color: rgba(255,255,255,.88); }
html[data-theme="light"] .visual-card-image .visual-card-overlay b { color: #ffd06b; }
html[data-theme="light"] .visual-lightbox { background: rgba(16,29,36,.78); }
html[data-theme="light"] .visual-lightbox-panel { border-color: rgba(255,255,255,.72); background: linear-gradient(145deg,#fff,#edf3f5); box-shadow: 0 28px 80px rgba(12,25,32,.36); }
html[data-theme="light"] .visual-lightbox-close { color: #172630; border-color: rgba(23,38,48,.18); background: rgba(255,255,255,.94); }

html[data-theme="light"] .footer-v2 {
  color: var(--ink);
  border-color: rgba(23,38,48,.12);
  background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(237,243,246,.94));
  box-shadow: 0 16px 38px rgba(32,55,68,.07);
}
html[data-theme="light"] .footer-v2 h2,
html[data-theme="light"] .footer-v2 strong { color: var(--ink); }
html[data-theme="light"] .footer-v2 p,
html[data-theme="light"] .footer-v2 .footer-contact,
html[data-theme="light"] .footer-v2 nav a,
html[data-theme="light"] .footer-v2 .footer-rights { color: var(--muted); }
html[data-theme="light"] .footer-v2 a:hover { color: #9a4e0c; }
html[data-theme="light"] .whatsapp-fab { color: #fff; border-color: rgba(17,103,63,.28); background: #18834f; box-shadow: 0 12px 28px rgba(16,95,58,.22),0 0 0 6px rgba(33,129,88,.08); }
html[data-theme="light"] .whatsapp-fab:hover,
html[data-theme="light"] .whatsapp-fab:focus-visible { color: #fff; background: #116d41; }
html[data-theme="light"] .clock-format { color: #314b57; border-color: rgba(23,38,48,.14); background: rgba(255,255,255,.78); }
html[data-theme="light"] .clock-format button[aria-pressed="true"] { color: #fff; background: #356d7c; }
html[data-theme="light"] .site-clock { color: var(--clock-text,#172630); border-color: rgba(23,38,48,.14); box-shadow: 0 16px 34px rgba(32,55,68,.09); }
html[data-theme="light"] .site-clock-dates span { background: rgba(23,38,48,.045); }
html[data-theme="light"] ::selection { color: #172630; background: rgba(255,191,104,.48); }

/* v72: four fixed mobile navigation actions, all visible at once and never scroll */
@media (max-width: 560px) {
  .topbar-command .nav {
    display: grid !important;
    grid-template-columns: .9fr .9fr 1.24fr 1.03fr;
    align-items: stretch;
    justify-content: stretch;
    gap: 3px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 5px;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none;
  }
  .topbar-command .nav > a,
  .topbar-command .nav .services-menu {
    display: flex !important;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    flex: 1 1 0;
  }
  .topbar-command .nav > a {
    min-height: 38px;
    padding: 4px 2px !important;
    font-size: clamp(8.5px,2.5vw,10px) !important;
    line-height: 1.15;
    white-space: nowrap;
    text-align: center;
  }
  .topbar-command .nav .services-trigger {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    min-height: 38px;
    gap: 2px;
    padding: 4px 2px !important;
    font-size: clamp(8.5px,2.5vw,10px) !important;
    line-height: 1.15;
    white-space: nowrap;
  }
  .topbar-command .nav .services-trigger > span { margin-inline-start: 1px; font-size: 8px; }
}

/* Daylight cards keep text crisp while a soft amber-teal-pearl current moves beneath it. */
html[data-theme="light"] body .card,
html[data-theme="light"] body .category-card,
html[data-theme="light"] body .brand-group,
html[data-theme="light"] body .brand-card,
html[data-theme="light"] body .step,
html[data-theme="light"] body .contact-panel,
html[data-theme="light"] body .contact-card,
html[data-theme="light"] body .service-card {
  background: linear-gradient(145deg,rgba(255,249,237,.9),rgba(255,255,255,.79) 42%,rgba(235,247,248,.88) 76%,rgba(248,243,255,.84));
}
html[data-theme="light"] body .card::before,
html[data-theme="light"] body .category-card::before,
html[data-theme="light"] body .brand-card::before,
html[data-theme="light"] body .step::before,
html[data-theme="light"] body .contact-card::before,
html[data-theme="light"] body .contact-panel::before,
html[data-theme="light"] body .service-card::before {
  background: conic-gradient(from 35deg at 50% 50%,transparent 0 17%,rgba(255,184,94,.74) 25%,transparent 37%,rgba(234,102,43,.52) 51%,transparent 64%,rgba(64,157,171,.48) 76%,transparent 87%,rgba(190,162,229,.34) 94%,transparent 100%);
  opacity: .62;
  filter: blur(15px);
  animation: cardOrangeOrbit 13s linear infinite;
}
html[data-theme="light"] body .card::after,
html[data-theme="light"] body .category-card::after,
html[data-theme="light"] body .brand-card::after,
html[data-theme="light"] body .step::after,
html[data-theme="light"] body .contact-card::after,
html[data-theme="light"] body .contact-panel::after,
html[data-theme="light"] body .service-card::after {
  background: linear-gradient(112deg,transparent 16%,rgba(255,255,255,.66) 38%,rgba(255,187,98,.42) 48%,rgba(73,165,177,.3) 58%,rgba(198,177,235,.24) 68%,transparent 84%);
  animation: lightCardSweep 7.8s var(--ease) infinite;
}
html[data-theme="light"] body .contact-panel {
  background: radial-gradient(circle at 8% 8%,rgba(255,190,106,.18),transparent 34%),linear-gradient(145deg,rgba(255,250,242,.9),rgba(239,247,248,.82));
}
html[data-theme="light"] body[data-page="contact"] .contact-card,
html[data-theme="light"] body[data-page="contact"] .contact-card-primary,
html[data-theme="light"] body[data-page="contact"] .contact-card-static {
  background: linear-gradient(135deg,rgba(255,250,242,.88),rgba(255,255,255,.78) 54%,rgba(236,247,247,.88));
}
html[data-theme="light"] body[data-page="contact"] .contact-card-primary {
  background: linear-gradient(120deg,rgba(224,247,236,.88),rgba(255,255,255,.78) 56%,rgba(255,235,207,.86));
}
html[data-theme="light"] body .card:hover,
html[data-theme="light"] body .category-card:hover,
html[data-theme="light"] body .brand-card:hover,
html[data-theme="light"] body .contact-card:hover,
html[data-theme="light"] body .service-card:hover {
  background: linear-gradient(135deg,rgba(255,244,225,.88),rgba(255,255,255,.78) 48%,rgba(225,244,244,.88));
}
@keyframes lightCardSweep {
  0%,18% { transform: translateX(-120%) skewX(-16deg); opacity: 0; }
  35% { opacity: .72; }
  58%,100% { transform: translateX(120%) skewX(-16deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] body .card::before,
  html[data-theme="light"] body .category-card::before,
  html[data-theme="light"] body .brand-card::before,
  html[data-theme="light"] body .step::before,
  html[data-theme="light"] body .contact-card::before,
  html[data-theme="light"] body .contact-panel::before,
  html[data-theme="light"] body .service-card::before,
  html[data-theme="light"] body .card::after,
  html[data-theme="light"] body .category-card::after,
  html[data-theme="light"] body .brand-card::after,
  html[data-theme="light"] body .step::after,
  html[data-theme="light"] body .contact-card::after,
  html[data-theme="light"] body .contact-panel::after,
  html[data-theme="light"] body .service-card::after { animation: none; }
}


/* v73 — navigation type system, layered aurora motion, and centered vehicle-category copy */
:root {
  --nav-label-size: 13px;
  --nav-label-weight: 750;
  --nav-label-line: 1.2;
}
.topbar-command .nav {
  --nav-pointer-x: 50%;
  --nav-pointer-y: 50%;
  --nav-glow: 0;
  position: relative;
  isolation: isolate;
  background-image:
    radial-gradient(230px circle at var(--nav-pointer-x) var(--nav-pointer-y),rgba(255,177,88,.18),transparent 72%),
    linear-gradient(112deg,rgba(255,112,44,.24),rgba(255,194,94,.19) 25%,rgba(196,215,225,.12) 46%,rgba(43,166,177,.22) 68%,rgba(130,105,192,.13) 84%,rgba(255,112,44,.22)),
    linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  background-size: 100% 100%,260% 220%,100% 100%;
  background-position: center,0% 50%,center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 14px 36px rgba(0,0,0,.2),0 0 26px rgba(255,118,38,.12);
  animation: navBaseSpectrum 12s ease-in-out infinite;
}
.topbar-command .nav::before {
  z-index: 0;
  inset: -34% -62%;
  border-radius: inherit;
  background: linear-gradient(108deg,transparent 15%,rgba(255,122,46,.14) 29%,rgba(255,205,112,.52) 43%,rgba(239,245,248,.34) 51%,rgba(66,186,193,.46) 63%,rgba(155,130,214,.3) 74%,rgba(255,128,62,.23) 83%,transparent 94%);
  background-size: 230% 100%;
  background-position: 0% 50%;
  opacity: .88;
  filter: blur(13px) saturate(1.35);
  mix-blend-mode: screen;
  transform: translate3d(-30%,0,0) skewX(-12deg);
  animation: navAuroraGlide 8.5s cubic-bezier(.42,0,.58,1) infinite alternate;
  will-change: transform,background-position;
}
.topbar-command .nav::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(210px circle at var(--nav-pointer-x) var(--nav-pointer-y),rgba(255,218,151,.38),transparent 72%),linear-gradient(112deg,transparent 34%,rgba(255,255,255,.1) 48%,rgba(255,202,119,.2) 52%,rgba(66,186,193,.12) 59%,transparent 71%);
  opacity: calc(.18 + var(--nav-glow,0) * .55);
  mix-blend-mode: screen;
  transition: opacity .35s ease,background-position .55s ease;
}
.topbar-command .nav > a,
.topbar-command .nav .services-trigger {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 15px;
  color: var(--ink) !important;
  opacity: 1 !important;
  font-family: var(--font-ar),sans-serif !important;
  font-size: var(--nav-label-size) !important;
  font-weight: var(--nav-label-weight) !important;
  line-height: var(--nav-label-line) !important;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-indent: 0;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 12px;
  text-shadow: none;
  transition: color .28s ease,background .32s ease,border-color .28s ease,box-shadow .32s ease,transform .32s var(--ease);
}
.topbar-command .nav .services-trigger > span {
  color: var(--amber);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.topbar-command .nav > a:hover,
.topbar-command .nav > a:focus-visible,
.topbar-command .nav > a.active,
.topbar-command .nav .services-trigger:hover,
.topbar-command .nav .services-trigger:focus-visible,
.topbar-command .nav .services-trigger[aria-expanded="true"] {
  color: #fff8ed !important;
  border-color: rgba(255,202,123,.48);
  background: linear-gradient(120deg,rgba(255,126,48,.3),rgba(255,199,100,.22) 42%,rgba(51,159,173,.2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24),0 7px 20px rgba(0,0,0,.18),0 0 20px rgba(255,150,65,.16);
}
.topbar-command .nav > a.is-nearest,
.topbar-command .nav .services-trigger.is-nearest {
  color: #fff8ed !important;
  border-color: rgba(255,207,137,.62);
  background: linear-gradient(120deg,rgba(255,126,48,.42),rgba(255,199,100,.26) 42%,rgba(51,159,173,.28));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),0 8px 24px rgba(0,0,0,.2),0 0 24px rgba(255,150,65,.22);
}
.topbar-command .nav > a:focus-visible,
.topbar-command .nav .services-trigger:focus-visible { outline: 2px solid rgba(255,206,132,.78); outline-offset: 2px; }
@keyframes navBaseSpectrum {
  0%,100% { background-position:center,0% 50%,center; }
  50% { background-position:center,100% 50%,center; }
}
@keyframes navAuroraGlide {
  0% { transform:translate3d(-31%,0,0) skewX(-12deg); background-position:0% 50%; }
  100% { transform:translate3d(31%,0,0) skewX(-12deg); background-position:100% 50%; }
}

/* Day mode keeps the same motion language with a luminous, soft-glass palette. */
html[data-theme="light"] .topbar-command .nav {
  border-color: rgba(23,38,48,.15);
  background-image:
    radial-gradient(230px circle at var(--nav-pointer-x) var(--nav-pointer-y),rgba(237,147,64,.13),transparent 72%),
    linear-gradient(112deg,rgba(255,237,215,.9),rgba(245,248,249,.94) 32%,rgba(225,242,243,.92) 68%,rgba(247,239,252,.9)),
    linear-gradient(135deg,rgba(255,255,255,.5),rgba(235,243,246,.35));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98),0 10px 28px rgba(32,55,68,.1),0 0 22px rgba(55,139,153,.08);
}
html[data-theme="light"] .topbar-command .nav::before {
  background: linear-gradient(108deg,transparent 15%,rgba(240,137,61,.13) 29%,rgba(255,193,109,.42) 43%,rgba(255,255,255,.65) 51%,rgba(65,158,174,.3) 63%,rgba(155,130,214,.2) 74%,rgba(236,130,66,.16) 83%,transparent 94%);
  opacity: .78;
  filter: blur(14px) saturate(1.15);
  mix-blend-mode: normal;
}
html[data-theme="light"] .topbar-command .nav::after {
  background: radial-gradient(210px circle at var(--nav-pointer-x) var(--nav-pointer-y),rgba(239,165,85,.21),transparent 72%),linear-gradient(112deg,transparent 34%,rgba(255,255,255,.44) 48%,rgba(255,198,124,.22) 52%,rgba(66,164,177,.14) 59%,transparent 71%);
  mix-blend-mode: normal;
}
html[data-theme="light"] .topbar-command .nav > a,
html[data-theme="light"] .topbar-command .nav .services-trigger {
  color: #203640 !important;
  opacity: 1 !important;
  border-color: rgba(23,38,48,.1);
  background: rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98),0 3px 9px rgba(32,55,68,.045);
}
html[data-theme="light"] .topbar-command .nav > a:hover,
html[data-theme="light"] .topbar-command .nav > a:focus-visible,
html[data-theme="light"] .topbar-command .nav > a.active,
html[data-theme="light"] .topbar-command .nav .services-trigger:hover,
html[data-theme="light"] .topbar-command .nav .services-trigger:focus-visible,
html[data-theme="light"] .topbar-command .nav .services-trigger[aria-expanded="true"] {
  color: #71370d !important;
  border-color: rgba(201,82,18,.3);
  background: linear-gradient(120deg,rgba(255,230,196,.9),rgba(255,255,255,.84) 44%,rgba(219,241,242,.86));
  box-shadow: inset 0 1px 0 #fff,0 7px 18px rgba(32,55,68,.1),0 0 16px rgba(226,139,54,.11);
}
html[data-theme="light"] .topbar-command .nav > a.is-nearest,
html[data-theme="light"] .topbar-command .nav .services-trigger.is-nearest {
  color: #71370d !important;
  border-color: rgba(201,82,18,.4);
  background: linear-gradient(120deg,rgba(255,224,183,.97),rgba(255,255,255,.88) 44%,rgba(207,236,238,.92));
}

@media (max-width: 560px) {
  :root { --nav-label-size: clamp(11px,2.6vw,12px); }
  .topbar-command .nav { grid-template-columns: .92fr .86fr 1.38fr 1.08fr; gap: 3px; }
  .topbar-command .nav > a,
  .topbar-command .nav .services-trigger {
    min-height: 40px;
    padding: 5px 3px !important;
    font-size: var(--nav-label-size) !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
  }
  .topbar-command .nav .services-trigger { gap: 3px; }
  .topbar-command .nav .services-trigger > span { font-size: 10px; }
}

/* Center every text line on vehicle-category and brand cards, in both languages. */
body[data-page="categories"] .brand-grid { justify-items: stretch; }
body[data-page="categories"] .brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center !important;
}
body[data-page="categories"] .brand-card > *,
body[data-page="categories"] .brand-card strong,
body[data-page="categories"] .brand-card p,
body[data-page="categories"] .brand-card span { text-align: center !important; }
body[data-page="categories"] .brand-logo { margin-inline: auto; }
body[data-page="categories"] .brand-card strong {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 1.5em;
  margin-inline: auto;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: .015em;
  overflow-wrap: anywhere;
}
body[data-page="home"] .category-card { text-align: center !important; }
body[data-page="home"] .category-card-top { position: relative; justify-content: center; text-align: center; }
body[data-page="home"] .category-card-top .category-badge { position: absolute; inset-inline-end: 0; }
body[data-page="home"] .category-card-copy { display: grid; justify-items: center; text-align: center !important; }
body[data-page="home"] .category-card-copy h3,
body[data-page="home"] .category-card-copy p { width: 100%; text-align: center !important; }
body[data-page="home"] .category-card-copy p { margin-inline: auto; }
body[data-page="home"] .category-card-footer {
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  text-align: center !important;
}
body[data-page="home"] .category-card-footer > *,
body[data-page="home"] .category-card-footer .category-more { text-align: center !important; }
@media (prefers-reduced-motion: reduce) {
  .topbar-command .nav,
  .topbar-command .nav::before { animation: none !important; }
}


/* v74 — branded appointment selection panel for the booking form */
.appointment-picker {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-column: 1 / -1;
  min-width: 0;
  padding: clamp(16px,2.5vw,24px);
  border: 1px solid rgba(255,191,104,.3);
  border-radius: 22px;
  background: radial-gradient(ellipse at 100% 0%,rgba(255,133,53,.17),transparent 42%),radial-gradient(ellipse at 0% 100%,rgba(57,160,174,.13),transparent 46%),linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.025)),rgba(7,13,18,.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13),0 15px 40px rgba(0,0,0,.16),0 0 28px rgba(255,118,38,.07);
  animation: appointmentGlow 9s ease-in-out infinite alternate;
}
.appointment-picker::before,
.appointment-picker::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  filter: blur(32px);
  pointer-events: none;
}
.appointment-picker::before { inset: -120px -55px auto auto; background: rgba(255,139,54,.2); }
.appointment-picker::after { inset: auto auto -142px -65px; background: rgba(67,174,185,.16); }
.appointment-picker-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.appointment-picker-mark {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,220,166,.55);
  border-radius: 15px;
  color: #371b08;
  background: linear-gradient(135deg,#ffd28c,#ff9b42 58%,#42b7bf);
  box-shadow: 0 8px 22px rgba(255,132,48,.2),inset 0 1px 0 rgba(255,255,255,.7);
}
.appointment-picker-mark svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.appointment-picker-copy { min-width: 0; }
.appointment-picker-copy .eyebrow { margin-bottom: 5px; color: var(--amber); font-size: 9px; letter-spacing: .12em; }
.appointment-picker-copy h3 { margin: 0; color: var(--ink); font-size: clamp(17px,2vw,21px); font-weight: 800; line-height: 1.35; }
.appointment-picker-copy p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.appointment-picker-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.appointment-picker-fields .appointment-field { min-width: 0; margin: 0; }
.appointment-picker-fields .appointment-field label { margin-bottom: 8px; color: var(--ink); font-size: 12px; font-weight: 750; line-height: 1.5; }
.appointment-picker-fields .appointment-field label small { color: var(--muted); font-size: 10px; font-weight: 500; }
.appointment-picker-fields .appointment-input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 10px 13px;
  border: 1px solid rgba(255,191,104,.38);
  border-radius: 14px;
  color: var(--ink);
  color-scheme: dark;
  direction: ltr;
  text-align: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .025em;
  accent-color: #ff9d43;
  background: linear-gradient(120deg,rgba(255,137,56,.13),rgba(255,255,255,.065) 48%,rgba(67,174,185,.1)),rgba(4,9,13,.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11),0 5px 14px rgba(0,0,0,.12);
  transition: border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.appointment-picker-fields .appointment-input:hover,
.appointment-picker-fields .appointment-input:focus-visible {
  border-color: var(--amber);
  background: linear-gradient(120deg,rgba(255,137,56,.2),rgba(255,255,255,.09) 48%,rgba(67,174,185,.14)),rgba(4,9,13,.82);
  box-shadow: 0 0 0 3px rgba(255,177,88,.14),0 9px 20px rgba(255,118,38,.1),inset 0 1px 0 rgba(255,255,255,.16);
  outline: none;
}
.appointment-picker-fields .appointment-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 5px;
  border-radius: 9px;
  filter: invert(78%) sepia(41%) saturate(850%) hue-rotate(345deg) brightness(105%);
  background: rgba(255,178,91,.12);
}
html[data-theme="light"] .appointment-picker {
  border-color: rgba(194,112,39,.24);
  background: radial-gradient(ellipse at 100% 0%,rgba(255,194,122,.25),transparent 44%),radial-gradient(ellipse at 0% 100%,rgba(115,202,207,.2),transparent 48%),linear-gradient(135deg,rgba(255,255,255,.92),rgba(244,248,249,.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98),0 14px 36px rgba(33,57,70,.09),0 0 24px rgba(66,151,163,.08);
}
html[data-theme="light"] .appointment-picker::before { background: rgba(244,164,91,.22); }
html[data-theme="light"] .appointment-picker::after { background: rgba(81,175,184,.2); }
html[data-theme="light"] .appointment-picker-mark {
  color: #fff;
  border-color: rgba(255,255,255,.76);
  background: linear-gradient(135deg,#ffad55,#ed782c 56%,#43aeb7);
  box-shadow: 0 8px 20px rgba(220,124,50,.18),inset 0 1px 0 rgba(255,255,255,.7);
}
html[data-theme="light"] .appointment-picker-fields .appointment-input {
  color: #1d303b;
  color-scheme: light;
  border-color: rgba(195,121,54,.36);
  accent-color: #ea812d;
  background: linear-gradient(120deg,rgba(255,234,210,.9),rgba(255,255,255,.96) 48%,rgba(224,244,244,.94));
  box-shadow: inset 0 1px 0 #fff,0 5px 14px rgba(33,57,70,.07);
}
html[data-theme="light"] .appointment-picker-fields .appointment-input:hover,
html[data-theme="light"] .appointment-picker-fields .appointment-input:focus-visible {
  border-color: #dc812f;
  background: linear-gradient(120deg,rgba(255,225,186,.96),rgba(255,255,255,.98) 48%,rgba(211,239,240,.97));
  box-shadow: 0 0 0 3px rgba(221,137,58,.14),0 8px 20px rgba(46,88,101,.1),inset 0 1px 0 #fff;
}
html[data-theme="light"] .appointment-picker-fields .appointment-input::-webkit-calendar-picker-indicator {
  filter: none;
  background: rgba(229,143,57,.13);
}
@keyframes appointmentGlow {
  0% { border-color: rgba(255,191,104,.24); }
  100% { border-color: rgba(66,174,185,.34); }
}
@media (max-width: 560px) {
  .appointment-picker { padding: 15px; border-radius: 19px; }
  .appointment-picker-fields { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .appointment-picker-head { gap: 11px; margin-bottom: 15px; }
  .appointment-picker-mark { flex-basis: 42px; width: 42px; height: 42px; border-radius: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .appointment-picker { animation: none; }
}


/* v76: keep the logo calm on hover/touch; proximity remains active for other controls. */
.topbar-command .brand:hover,
.topbar-command .brand:active,
.topbar-command .brand.is-near,
.topbar-command .brand.is-nearest {
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
.topbar-command .brand.is-nearest::before,
.topbar-command .brand.is-nearest::after { opacity: 0 !important; box-shadow: none !important; }
.footer-v2 .footer-rights .footer-dev {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.6;
  text-align: center;
  white-space: normal;
}

/* v1.0.0 final polish: stable header, calm controls, hero gallery and proof cards */
.footer-v2 .footer-release { display: none !important; }
.topbar-command .topbar-inner { position: relative; }
.topbar-command .header-actions {
  position: absolute; z-index: 6; top: 15px; left: 0; right: auto;
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  direction: ltr; gap: 6px; width: auto; padding: 0;
}
.topbar-command .header-actions button { position: relative; isolation: isolate; overflow: hidden; }
.topbar-command .header-actions .lang {
  width: 78px; min-width: 78px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-color: rgba(255,191,104,.32);
  background: linear-gradient(135deg, rgba(255,118,38,.12), rgba(255,255,255,.045)); color: var(--ink);
  font-weight: 800; letter-spacing: .04em;
}
.topbar-command .header-actions .lang .lang-symbol { color: var(--amber); font-size: 14px; line-height: 1; }
.topbar-command .header-actions .lang .lang-label { max-width: 42px; overflow: hidden; text-overflow: ellipsis; }
.topbar-command .header-actions button::before {
  content: ""; position: absolute; z-index: -2; inset: 0; border-radius: inherit;
  background: linear-gradient(112deg, transparent 0 34%, rgba(255,191,104,.24) 48%, rgba(255,255,255,.16) 52%, transparent 66%);
  animation: commandSheen 6.5s ease-in-out infinite; opacity: .42; transform: translateX(-125%); pointer-events: none;
}
.topbar-command .header-actions button::after {
  content: ""; position: absolute; z-index: -1; inset: 1px; border-radius: inherit;
  background: rgba(10,15,21,.72); box-shadow: inset 0 0 10px rgba(255,118,38,.08); pointer-events: none;
}
.topbar-command .header-actions button > * { position: relative; z-index: 1; }
.topbar-command .header-actions button:hover, .topbar-command .header-actions button:focus-visible {
  border-color: rgba(255,191,104,.58); box-shadow: 0 0 0 2px rgba(255,191,104,.08), 0 7px 18px rgba(255,118,38,.16);
  filter: brightness(1.05) saturate(1.06); transform: translateY(-1px);
}
.topbar-command .header-actions .lang .lang-symbol, .topbar-command .header-actions .sound-toggle span, .topbar-command .header-actions .theme-toggle span {
  color: var(--amber); text-shadow: 0 0 12px rgba(255,191,104,.42);
}
@keyframes commandSheen { 0%,62% { transform: translateX(-125%); } 82%,100% { transform: translateX(125%); } }

.hero-v2-gallery { position: relative; width: 100%; max-width: 620px; }
.hero-gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.hero-gallery-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--amber); font-size: 12px; font-weight: 850; letter-spacing: .12em; }
.hero-gallery-kicker::before { content: ""; width: 30px; height: 2px; background: linear-gradient(90deg, var(--orange), var(--amber)); box-shadow: 0 0 14px rgba(255,118,38,.42); }
.hero-gallery-heading h2 { margin: 7px 0 0; color: var(--ink); font-size: clamp(20px, 2.2vw, 30px); line-height: 1.25; }
.hero-gallery-arrow { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border: 1px solid rgba(255,191,104,.38); border-radius: 50%; color: var(--amber); font-size: 28px; animation: galleryArrow 1.8s ease-in-out infinite; }
.hero-gallery-rail { display: flex; gap: 15px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--orange) transparent; padding: 8px 3px 18px; }
.hero-gallery-rail::-webkit-scrollbar { height: 6px; }
.hero-gallery-rail::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--cyan), var(--orange)); border-radius: 999px; }
.hero-gallery-card { position: relative; flex: 0 0 min(248px, 68vw); aspect-ratio: .76; min-height: 320px; overflow: hidden; scroll-snap-align: start; border: 1px solid rgba(255,255,255,.20); border-radius: 26px; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,118,38,.06) 55%, rgba(7,9,13,.95)); box-shadow: 0 22px 55px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.16); }
.hero-gallery-card-image { padding: 0; color: var(--ink); cursor: zoom-in; }
.hero-gallery-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .7s var(--ease), filter .5s var(--ease); }
.hero-gallery-card-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 42%, rgba(4,7,10,.9) 100%); }
.hero-gallery-card-image:hover img, .hero-gallery-card-image:focus-visible img { transform: scale(1.045); filter: saturate(1.07) contrast(1.03); }
.hero-gallery-card-empty { display: grid; place-items: center; background: radial-gradient(circle at 70% 20%, rgba(214,222,230,.14), transparent 32%), radial-gradient(circle at 20% 80%, rgba(255,118,38,.14), transparent 34%), linear-gradient(145deg, rgba(255,255,255,.10), rgba(7,9,13,.94)); }
.hero-gallery-card-empty::before { content: ""; position: absolute; inset: 14%; border: 1px dashed rgba(255,191,104,.28); border-radius: 50%; animation: galleryOrbit 16s linear infinite; }
.hero-gallery-placeholder { position: relative; z-index: 1; display: grid; justify-items: center; gap: 9px; color: var(--muted); }
.hero-gallery-placeholder b { color: var(--amber); font-size: 14px; letter-spacing: .16em; }
.hero-gallery-placeholder i { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(255,191,104,.45); border-radius: 50%; color: var(--amber); font-size: 31px; font-style: normal; }
.hero-gallery-placeholder small { max-width: 150px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.hero-gallery-hint { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 10px; }
.hero-gallery-hint::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); }
.hero-v2-proof { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.hero-v2-proof .proof-card { position: relative; min-width: 0; min-height: 92px; display: grid; place-items: center; align-content: center; gap: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 26px rgba(0,0,0,.15); transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.hero-v2-proof .proof-card::before { content: ""; position: absolute; inset: 0 auto auto; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--proof-color, var(--orange)), transparent); }
.hero-v2-proof .proof-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -30px; bottom: -42px; border: 1px solid rgba(255,191,104,.24); border-radius: 50%; animation: proofPulse 3.2s ease-in-out infinite; }
.hero-v2-proof .proof-card:hover { transform: translateY(-7px); border-color: rgba(255,191,104,.58); box-shadow: 0 18px 36px rgba(255,118,38,.16), inset 0 1px 0 rgba(255,255,255,.16); }
.hero-v2-proof .proof-card > * { position: relative; z-index: 1; }
.hero-v2-proof .proof-card i { width: 7px; height: 7px; border-radius: 50%; background: var(--proof-color, var(--orange)); box-shadow: 0 0 13px var(--proof-color, var(--orange)); animation: proofBlink 2.4s ease-in-out infinite; }
.hero-v2-proof .proof-card strong { color: var(--ink); font-size: 23px; line-height: 1; }
.hero-v2-proof .proof-card span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.proof-card-experience { --proof-color: var(--amber); } .proof-card-services { --proof-color: var(--cyan); } .proof-card-groups { --proof-color: var(--green); }
@keyframes galleryArrow { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
@keyframes galleryOrbit { to { transform: rotate(360deg); } }
@keyframes proofPulse { 0%,100% { transform: scale(.88); opacity: .42; } 50% { transform: scale(1.06); opacity: .78; } }
@keyframes proofBlink { 0%,100% { opacity: .55; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.18); } }
html[data-theme="light"] .topbar-command .header-actions button { border-color: rgba(189,105,28,.28); background: linear-gradient(135deg, rgba(255,118,38,.13), rgba(255,255,255,.82)); box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 5px 16px rgba(45,65,75,.10); }
html[data-theme="light"] .topbar-command .header-actions button::after { background: rgba(255,255,255,.54); }
@media (max-width: 820px) { .hero-v2-gallery { max-width: none; } .hero-gallery-card { flex-basis: min(248px, 43vw); min-height: 340px; } }
@media (max-width: 560px) {
  .topbar-command .topbar-inner { min-height: 292px; }
  .topbar-command .header-actions { top: 12px; left: 12px; }
  .topbar-command .brand { height: 156px; flex-basis: 156px; transform: translateY(30px); }
  .topbar-command .mark { width: 154px; height: 120px; }
  .topbar-command .nav { margin-top: 18px; }
  .hero-gallery-heading h2 { font-size: 21px; }
  .hero-gallery-arrow { width: 42px; height: 42px; flex-basis: 42px; font-size: 24px; }
  .hero-gallery-card { flex-basis: 74vw; min-height: 345px; border-radius: 23px; }
  .hero-v2-proof { gap: 7px; }
  .hero-v2-proof .proof-card { min-height: 86px; border-radius: 15px; }
  .hero-v2-proof .proof-card strong { font-size: 20px; } .hero-v2-proof .proof-card span { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .topbar-command .header-actions button::before, .hero-gallery-arrow, .hero-gallery-card-empty::before, .hero-v2-proof .proof-card::after, .hero-v2-proof .proof-card i { animation: none; } }

/* v8 — Give the primary “Our Work” gallery more presence and polish its heading. */
.hero-v2-gallery {
  max-width: 760px;
  padding: clamp(18px, 2.4vw, 30px);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 30px;
  background: radial-gradient(ellipse at 82% 0%, rgba(255,118,38,.12), transparent 42%), linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
  box-shadow: 0 28px 70px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hero-gallery-heading { align-items: center; margin-bottom: 22px; }
.hero-gallery-kicker { padding: 7px 12px; border: 1px solid rgba(255,191,104,.24); border-radius: 999px; background: rgba(255,191,104,.07); letter-spacing: .08em; }
.hero-gallery-heading h2 {
  margin-top: 11px;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.35;
  letter-spacing: -.035em;
  text-shadow: 0 8px 30px rgba(255,118,38,.16);
}
.hero-gallery-arrow { background: radial-gradient(circle, rgba(255,191,104,.12), transparent 72%); }
.hero-gallery-rail { gap: 18px; padding: 10px 4px 22px; }
.hero-gallery-card { flex-basis: min(290px, 72vw); min-height: 390px; border-radius: 25px; }
.hero-gallery-hint { margin-top: 4px; font-size: 11px; }
@media (max-width: 820px) {
  .hero-v2-gallery { max-width: none; }
  .hero-gallery-card { flex-basis: min(290px, 48vw); min-height: 370px; }
}
@media (max-width: 560px) {
  .hero-v2-gallery { padding: 17px 14px 15px; border-radius: 24px; }
  .hero-gallery-heading { margin-bottom: 16px; }
  .hero-gallery-heading h2 { font-size: 23px; }
  .hero-gallery-kicker { font-size: 10px; }
  .hero-gallery-rail { gap: 13px; }
  .hero-gallery-card { flex-basis: 78vw; min-height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-gallery-arrow { animation: none; }
}

/* v9 — “Our work” cards as separated architectural glass gates. */
.hero-gallery-rail {
  gap: clamp(24px, 3vw, 42px);
  padding: 18px 18px 30px;
  perspective: 1200px;
}
.hero-gallery-card {
  flex-basis: min(300px, 70vw);
  min-height: 410px;
  border: 1px solid rgba(205,237,255,.42);
  border-radius: 8px 8px 18px 18px;
  background: linear-gradient(90deg, rgba(255,255,255,.24), rgba(176,221,245,.07) 5%, transparent 12%, transparent 88%, rgba(255,255,255,.12) 96%, rgba(255,255,255,.25)), linear-gradient(145deg, rgba(178,226,255,.19), rgba(20,47,64,.28) 52%, rgba(7,9,13,.92));
  box-shadow: 0 24px 50px rgba(0,0,0,.38), inset 8px 0 0 rgba(208,239,255,.10), inset -8px 0 0 rgba(208,239,255,.08), inset 0 1px 0 rgba(255,255,255,.5), 0 0 24px rgba(104,192,234,.10);
  transform: rotateY(-2deg);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .45s var(--ease);
}
.hero-gallery-card:nth-child(even) { transform: rotateY(2deg); }
.hero-gallery-card:hover, .hero-gallery-card:focus-visible {
  transform: translateY(-8px) rotateY(0deg) scale(1.015);
  border-color: rgba(220,246,255,.78);
  box-shadow: 0 34px 68px rgba(0,0,0,.42), inset 8px 0 0 rgba(208,239,255,.14), inset -8px 0 0 rgba(208,239,255,.12), inset 0 1px 0 rgba(255,255,255,.65), 0 0 34px rgba(104,192,234,.19);
}
.hero-gallery-card-image img { filter: saturate(.88); }
.hero-gallery-card-image::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(198,232,250,.32), transparent 7%, transparent 92%, rgba(198,232,250,.20)), linear-gradient(112deg, transparent 22%, rgba(255,255,255,.44) 47%, rgba(144,215,248,.22) 51%, transparent 70%);
  transform: translateX(-120%) skewX(-14deg);
  transition: transform 1s var(--ease);
}
.hero-gallery-card-image:hover::before, .hero-gallery-card-image:focus-visible::before { transform: translateX(120%) skewX(-14deg); }
.hero-gallery-card-image::after { background: linear-gradient(180deg, rgba(4,7,10,.02) 30%, rgba(4,7,10,.82) 100%); }
.hero-gallery-card-empty::before { inset: 12%; border: 1px solid rgba(208,239,255,.24); border-radius: 3px; animation: none; box-shadow: inset 0 0 36px rgba(177,226,250,.08), 0 0 22px rgba(177,226,250,.06); }
.hero-gallery-card-empty::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(220,245,255,.20), transparent 8%, transparent 92%, rgba(220,245,255,.16)), linear-gradient(180deg, rgba(213,240,255,.13), transparent 18%, transparent 82%, rgba(213,240,255,.09));
}
.hero-gallery-placeholder { z-index: 2; }
.hero-gallery-placeholder i { border-color: rgba(205,237,255,.62); color: #c9edff; box-shadow: 0 0 22px rgba(104,192,234,.14); }
@media (max-width: 820px) {
  .hero-gallery-card { flex-basis: min(300px, 49vw); min-height: 390px; }
}
@media (max-width: 560px) {
  .hero-gallery-rail { gap: 22px; padding-inline: 10px; }
  .hero-gallery-card { flex-basis: 78vw; min-height: 370px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-gallery-card, .hero-gallery-card-image::before { transition: none; }
}

/* v10 — Full-bleed mobile hero and free-standing interactive glass portals. */
@media (max-width: 820px) {
  body[data-page="home"] .site-v2 > .hero-v2.container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding: 34px 0 66px !important;
    gap: 28px !important;
    overflow: hidden;
  }
  body[data-page="home"] .hero-v2-copy { width: min(100% - 32px, 620px); margin-inline: auto; }
  body[data-page="home"] .hero-v2-stage {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body[data-page="home"] .hero-v2-gallery {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 26px clamp(16px, 5vw, 42px) 24px !important;
    border-inline: 0;
    border-radius: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(104,192,234,.13), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.035), transparent 85%);
    box-shadow: none;
  }
  body[data-page="home"] .hero-gallery-heading,
  body[data-page="home"] .hero-gallery-hint { width: min(100%, 1100px); margin-inline: auto; }
  body[data-page="home"] .hero-gallery-rail {
    width: 100%;
    gap: clamp(18px, 4vw, 34px);
    padding: 28px max(20px, calc((100vw - 1100px) / 2)) 38px;
    perspective: 1500px;
    scroll-padding-inline: 24px;
  }
  body[data-page="home"] .hero-gallery-card {
    flex: 0 0 clamp(245px, 31vw, 350px);
    min-height: clamp(370px, 56vw, 510px);
  }
}
@media (max-width: 560px) {
  body[data-page="home"] .site-v2 > .hero-v2.container { gap: 24px !important; padding-top: 24px !important; }
  body[data-page="home"] .hero-v2-copy { width: calc(100% - 36px); }
  body[data-page="home"] .hero-v2-gallery { padding: 24px 0 22px !important; }
  body[data-page="home"] .hero-gallery-heading,
  body[data-page="home"] .hero-gallery-hint { width: calc(100% - 36px); }
  body[data-page="home"] .hero-gallery-heading h2 { max-width: none; }
  body[data-page="home"] .hero-gallery-rail {
    gap: 20px;
    padding: 24px 22px 34px;
    margin: 0;
  }
  body[data-page="home"] .hero-gallery-card {
    flex: 0 0 min(76vw, 340px);
    min-height: clamp(390px, 112vw, 500px);
  }
}
/* Glass interaction: proximity and hover tint the pane, lift the frame and sweep a reflection. */
.hero-gallery-card {
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform .55s var(--ease), border-color .45s var(--ease), box-shadow .55s var(--ease), filter .45s var(--ease);
}
.hero-gallery-card::after {
  transition: opacity .45s ease, background .45s ease;
}
.hero-gallery-card-empty.is-near,
.hero-gallery-card-empty.is-nearest,
.hero-gallery-card-empty:hover,
.hero-gallery-card-empty:focus-visible {
  transform: translateY(-10px) rotateY(0deg) scale(1.025);
  border-color: rgba(214,244,255,.94);
  background: linear-gradient(110deg, rgba(221,246,255,.30), rgba(127,199,230,.16) 18%, rgba(13,40,57,.55) 52%, rgba(210,241,255,.18)), radial-gradient(ellipse at var(--pointer-x,50%) var(--pointer-y,35%), rgba(203,239,255,.34), transparent 48%);
  box-shadow: 0 36px 80px rgba(0,0,0,.48), 0 0 42px rgba(117,209,248,.28), inset 10px 0 0 rgba(226,247,255,.2), inset -10px 0 0 rgba(226,247,255,.18), inset 0 1px 0 rgba(255,255,255,.82);
  filter: brightness(1.16) saturate(1.18);
}
.hero-gallery-card-empty.is-nearest::after,
.hero-gallery-card-empty:hover::after,
.hero-gallery-card-empty:focus-visible::after {
  opacity: 1;
  background: radial-gradient(ellipse at var(--pointer-x,50%) var(--pointer-y,35%), rgba(218,246,255,.30), transparent 54%), linear-gradient(108deg, transparent 24%, rgba(255,255,255,.34) 45%, rgba(165,228,255,.20) 51%, transparent 72%);
  animation: portalRefraction 1.6s ease-in-out infinite alternate;
}
.hero-gallery-card-image.is-near,
.hero-gallery-card-image.is-nearest,
.hero-gallery-card-image:hover,
.hero-gallery-card-image:focus-visible {
  transform: translateY(-10px) rotateY(0deg) scale(1.025);
  border-color: rgba(214,244,255,.94);
  box-shadow: 0 36px 80px rgba(0,0,0,.48), 0 0 42px rgba(117,209,248,.28), inset 10px 0 0 rgba(226,247,255,.2), inset -10px 0 0 rgba(226,247,255,.18), inset 0 1px 0 rgba(255,255,255,.82);
}
.hero-gallery-card-image.is-nearest::before,
.hero-gallery-card-image:hover::before,
.hero-gallery-card-image:focus-visible::before { transform: translateX(120%) skewX(-14deg); }
@keyframes portalRefraction {
  from { filter: brightness(.9); }
  to { filter: brightness(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-gallery-card, .hero-gallery-card::after { transition: none; }
  .hero-gallery-card-empty.is-nearest::after, .hero-gallery-card-empty:hover::after { animation: none; }
}

/* v11 — Center-focused portal carousel: active gate forward, neighbors recessed. */
.hero-gallery-rail {
  align-items: center;
  justify-content: flex-start;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  perspective: 1500px;
  perspective-origin: 50% 48%;
  transform-style: preserve-3d;
  overflow-y: visible;
}
.hero-gallery-card {
  scroll-snap-align: center;
  flex-shrink: 0;
  transform-origin: center center;
  transform: translateZ(var(--portal-z, -115px)) scale(var(--portal-scale, .81)) rotateY(var(--portal-rotate, 0deg));
  opacity: var(--portal-opacity, .76);
  z-index: 1;
}
.hero-gallery-card.is-centered {
  z-index: 5;
  opacity: 1;
  transform: translateZ(34px) scale(1.045) rotateY(0deg);
  border-color: rgba(218,246,255,.86);
  box-shadow: 0 34px 78px rgba(0,0,0,.46), 0 0 35px rgba(117,209,248,.2), inset 9px 0 0 rgba(226,247,255,.15), inset -9px 0 0 rgba(226,247,255,.13), inset 0 1px 0 rgba(255,255,255,.72);
}
.hero-gallery-card.is-centered .hero-gallery-card-caption,
.hero-gallery-card.is-centered .hero-gallery-placeholder { filter: drop-shadow(0 0 12px rgba(152,222,255,.22)); }
@media (max-width: 820px) {
  body[data-page="home"] .hero-gallery-rail { justify-content: flex-start; }
  body[data-page="home"] .hero-gallery-card { flex-basis: clamp(250px, 67vw, 340px); }
}
@media (max-width: 560px) {
  body[data-page="home"] .hero-gallery-rail { padding-inline: calc((100vw - min(76vw, 340px)) / 2); }
  body[data-page="home"] .hero-gallery-card { flex-basis: min(76vw, 340px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-gallery-rail { scroll-behavior: auto; }
  .hero-gallery-card { transition: none; }
}

/* v12 — Fresnel-like glass edge reflections that strengthen on the centered gate. */
.hero-gallery-card {
  --edge-glow: .16;
  border-color: rgba(202,235,250,.42);
  box-shadow: 0 24px 52px rgba(0,0,0,.34), inset 7px 0 0 rgba(218,244,255,var(--edge-glow)), inset -7px 0 0 rgba(218,244,255,calc(var(--edge-glow) * .72)), inset 0 1px 0 rgba(255,255,255,.62), inset 0 -1px 0 rgba(190,231,250,.26), 0 0 24px rgba(115,201,236,.09);
  background-color: rgba(139,197,222,.11);
}
.hero-gallery-card::after {
  opacity: .72;
  background-image: linear-gradient(90deg, rgba(239,251,255,.32), rgba(170,225,247,.08) 2%, transparent 8%, transparent 92%, rgba(171,225,247,.09) 98%, rgba(243,252,255,.26)), linear-gradient(180deg, rgba(255,255,255,.25), transparent 3%, transparent 96%, rgba(197,234,250,.16));
  mix-blend-mode: screen;
  pointer-events: none;
}
.hero-gallery-card-empty::after {
  background-image: radial-gradient(ellipse at var(--pointer-x,50%) var(--pointer-y,35%), rgba(218,246,255,.23), transparent 54%), linear-gradient(90deg, rgba(239,251,255,.32), rgba(170,225,247,.08) 2%, transparent 8%, transparent 92%, rgba(171,225,247,.09) 98%, rgba(243,252,255,.26)), linear-gradient(180deg, rgba(255,255,255,.25), transparent 3%, transparent 96%, rgba(197,234,250,.16));
}
.hero-gallery-card-image::after {
  opacity: .9;
  background-image: linear-gradient(180deg, rgba(4,7,10,.02) 30%, rgba(4,7,10,.82) 100%), linear-gradient(90deg, rgba(227,248,255,.3), transparent 7%, transparent 93%, rgba(198,235,250,.2));
}
.hero-gallery-card.is-centered {
  --edge-glow: .48;
  border-color: rgba(224,249,255,.92);
  box-shadow: 0 38px 82px rgba(0,0,0,.48), 0 0 38px rgba(124,215,249,.27), inset 10px 0 0 rgba(229,248,255,.38), inset -10px 0 0 rgba(214,243,255,.3), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(196,234,251,.62);
}
.hero-gallery-card.is-centered::after { opacity: 1; }
.hero-gallery-card.is-centered::before {
  filter: drop-shadow(0 0 8px rgba(173,231,255,.38));
}
.hero-gallery-card-empty.is-nearest,
.hero-gallery-card-empty:hover,
.hero-gallery-card-empty:focus-visible {
  --edge-glow: .66;
  border-color: rgba(235,251,255,1);
  box-shadow: 0 38px 86px rgba(0,0,0,.48), 0 0 48px rgba(129,222,255,.38), inset 12px 0 0 rgba(233,249,255,.48), inset -12px 0 0 rgba(222,246,255,.4), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(202,237,252,.78);
}
.hero-gallery-card.is-centered .hero-gallery-placeholder i {
  color: #e5f8ff;
  border-color: rgba(231,250,255,.9);
  box-shadow: 0 0 18px rgba(157,228,255,.38), inset 0 0 15px rgba(174,230,255,.14);
}

/* v13 — Header, Arabic typography, working clock control, and image-save deterrence. */
@media (min-width: 821px) {
  .topbar-command .nav {
    width: min(100%, 980px) !important;
    justify-content: center !important;
    margin-inline: auto !important;
    gap: clamp(10px, 1.2vw, 20px) !important;
  }
  .topbar-command .nav > a,
  .topbar-command .services-trigger { white-space: nowrap; }
}
html[dir="rtl"] .hero-v2-kicker,
html[dir="rtl"] .hero-v2-kicker *,
html[dir="rtl"] .site-v2 .hero-v2-kicker {
  letter-spacing: 0 !important;
  word-spacing: .02em !important;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
html[dir="rtl"] .site-v2 h1,
html[dir="rtl"] .site-v2 h2,
html[dir="rtl"] .site-v2 p { letter-spacing: 0 !important; }
/* The clock wrapper was unintentionally made inert in an earlier visual-only pass. */
.site-clock,
.site-clock * { pointer-events: auto !important; }
.clock-format { position: relative; z-index: 5; touch-action: manipulation; }
.clock-format button { position: relative; z-index: 6; cursor: pointer; pointer-events: auto !important; }
.clock-format button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* Discourage casual drag/context-menu saving. Publicly served images cannot be DRM-protected. */
.hero-gallery-card-image img,
.visual-card-image img,
.visual-lightbox-panel img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
.hero-gallery-card-image,
.visual-card-image { -webkit-touch-callout: none; }

/* v14 — In the expanded services menu, proximity lights only the closest item. */
.topbar-command .services-panel a.is-near:not(.is-nearest):not(:hover):not(:focus-visible):not(.active),
.services-panel.services-panel-portal a.is-near:not(.is-nearest):not(:hover):not(:focus-visible):not(.active) {
  color: var(--muted) !important;
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}
.topbar-command .services-panel a.is-near:not(.is-nearest):not(:hover):not(:focus-visible):not(.active)::before,
.services-panel.services-panel-portal a.is-near:not(.is-nearest):not(:hover):not(:focus-visible):not(.active)::before {
  color: var(--amber) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: none !important;
  transform: none !important;
}
.topbar-command .services-panel a.is-near:not(.is-nearest):not(:hover):not(:focus-visible):not(.active)::after,
.services-panel.services-panel-portal a.is-near:not(.is-nearest):not(:hover):not(:focus-visible):not(.active)::after {
  opacity: 0 !important;
  transform: translateX(-5px) !important;
}
.topbar-command .services-panel a.is-nearest,
.services-panel.services-panel-portal a.is-nearest {
  color: var(--ink) !important;
  border-color: rgba(255,191,104,.72) !important;
  background: radial-gradient(circle at 8% 50%, rgba(255,191,104,.24), transparent 46%), linear-gradient(135deg, rgba(255,118,38,.2), rgba(214,222,230,.1)) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.25), 0 0 26px rgba(255,118,38,.24) !important;
  transform: translateY(-2px) !important;
}