@font-face{font-family:'Reem Kufi';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/reem-kufi-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Reem Kufi';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/reem-kufi-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Reem Kufi';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/reem-kufi-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Reem Kufi';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/reem-kufi-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ===== Tokens ===== */
:root{--bg:#0B0B0B;--bg2:#161616;--alt:#101010;--ink:#F5F2EA;--mute:#A3A3A3;--accent:#F6A91B;--copper:#B8721A;--line:rgba(245,242,234,.13);--f:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;--d:'Reem Kufi',var(--f);--ease:cubic-bezier(.2,.8,.2,1)}

/* ===== Base ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 16px/1.8 var(--f);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.w{width:min(1180px,92%);margin-inline:auto}
.sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip:auto;inset-block-start:8px;inset-inline-start:8px;z-index:200;background:var(--accent);color:#111;padding:10px 18px;border-radius:99px;font-weight:600}
h1,h2,h3{font-family:var(--d);line-height:1.3}
h2{font-size:clamp(26px,5vw,46px);margin-bottom:34px}
h2::after{content:"";display:block;width:56px;height:2px;margin-top:14px;background:linear-gradient(90deg,var(--accent),var(--copper))}
section{padding:clamp(56px,9vw,110px) 0}
.alt{background:var(--alt)}
.lead{color:var(--mute);max-width:60ch;margin:-14px 0 28px}
.note{color:var(--mute);font-size:13px}
.ok{color:#7be0a0;font-size:14px;min-height:22px}
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s,transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ===== Buttons & forms ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 26px;border-radius:99px;font:600 15px var(--f);border:1px solid var(--ink);color:var(--ink);background:none;cursor:pointer;transition:transform .3s,box-shadow .3s}
.btn.f{background:var(--accent);border-color:var(--accent);color:#111}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px var(--accent)}
form{display:grid;gap:12px}
input,select,textarea{width:100%;min-height:48px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:inherit}
input::placeholder,textarea::placeholder{color:#8a8a8a}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two>*,.cfg>*,.ct>*{min-width:0}
.fl span{display:block;font-size:12px;color:var(--mute);margin-bottom:4px}

/* ===== Navigation ===== */
#nav{position:fixed;inset:0 0 auto;z-index:50;padding:12px 0;transition:background .3s}
#nav.s{background:rgba(11,11,11,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
#nav .w{display:flex;justify-content:space-between;align-items:center;gap:10px}
.logo{display:flex;align-items:center;gap:10px;font:700 19px/1.2 var(--d);max-width:60%}
.logo img{height:30px;width:auto;flex:none}
#nav ul{display:flex;gap:26px;list-style:none;font-size:15px;color:var(--mute)}
#nav ul a:hover{color:var(--ink)}
.acts{display:flex;gap:8px;align-items:center}
.acts .btn{min-height:44px;padding:0 16px}
#mb{display:none}
@media(max-width:860px){
  #nav ul{display:none;position:absolute;inset:100% 0 auto;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line)}
  #nav ul.o{display:flex}
  #nav ul a{display:block;padding:16px 5%}
  #mb{display:inline-flex}#bk{display:none}
  .logo{font-size:15px;max-width:56%}.logo img{height:26px}
}

/* ===== Hero ===== */
.hero{min-height:100svh;display:grid;align-items:center;position:relative;overflow:hidden;padding:110px 0 clamp(200px,31vw,340px);background:radial-gradient(560px circle at var(--mx,70%) var(--my,35%),rgba(245,242,234,.13),transparent 60%)}
.hbg{position:absolute;inset:0;background:center/cover;opacity:.32}
.hero .w{position:relative;z-index:2}
.hero h1{font-size:clamp(34px,6.4vw,92px);max-width:17ch;line-height:1.2}
.wd{display:inline-block;animation:up 1s var(--ease) both;animation-delay:calc(.15s + var(--i) * .13s)}
.hero p{max-width:46ch;color:var(--mute);font-size:clamp(16px,2.4vw,19px);margin:22px 0 32px;animation:up 1.1s .25s both}
.cta{display:flex;gap:12px;flex-wrap:wrap;animation:up 1.1s .45s both}
.badge{display:inline-flex;gap:8px;align-items:center;margin:0 0 18px;padding:4px 14px;border:1px solid var(--line);border-radius:99px;font-size:14px;color:var(--mute);animation:up 1.1s .1s both}
.badge b{color:var(--accent)}
.stage{position:absolute;left:-2%;bottom:4%;width:min(680px,64%);animation:drive 1.8s .2s cubic-bezier(.15,.8,.25,1) both}
.stage img{width:100%;height:auto;filter:drop-shadow(0 0 30px rgba(246,169,27,.22))}
.beam{position:absolute;left:91%;top:40%;width:70%;height:90px;background:linear-gradient(90deg,rgba(255,244,214,.5),transparent);clip-path:polygon(0 35%,100% 0,100% 100%,0 65%);filter:blur(5px);opacity:0;animation:up 1s 1.9s forwards,flick 4s 3s infinite}
@keyframes up{from{opacity:0;transform:translateY(60px)}}
@keyframes drive{from{opacity:0;translate:-60% 0}}
@keyframes flick{50%{opacity:.6}}
@media(max-width:700px){.hero{padding-bottom:230px}.stage{width:96%;opacity:.55}.beam{display:none}}

/* ===== Trust bar ===== */
.trust{display:flex;flex-wrap:wrap;gap:10px 26px;padding:18px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--mute)}
.ti{display:inline-flex;align-items:center;gap:8px;min-height:24px}
.ti:hover{color:var(--ink)}
.ti svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dot{width:9px;height:9px;border-radius:50%;background:#c0392b;display:inline-block}
.dot.on{background:#34c759;box-shadow:0 0 0 4px rgba(52,199,89,.2)}

/* ===== Services & steps ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}
.card{background:linear-gradient(160deg,#1b1b1b,#121212);border:1px solid var(--line);border-radius:18px;padding:28px;transition:transform .2s,border-color .3s}
.card:hover{transform:translateY(-6px);border-color:var(--accent)}
.card svg{width:40px;height:40px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.card h3{font-size:21px;margin-bottom:6px}
.card p{color:var(--mute);font-size:15px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));border:1px solid var(--line);border-radius:20px;overflow:hidden;counter-reset:s}
.steps div{padding:32px 28px;border-inline-start:1px solid var(--line);counter-increment:s}
.steps div:first-child{border:0}
.steps div::before{content:counter(s,decimal-leading-zero);font:700 40px var(--d);color:var(--accent);display:block}
.steps h3{font-size:20px;margin:6px 0}
.steps p{color:var(--mute);font-size:15px}

/* ===== Galleries & lightbox ===== */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:14px}
.gal figure{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--bg2)}
.gal.sq figure{aspect-ratio:1}
.zoom{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.gal figure:hover img{transform:scale(1.07)}
.gal figcaption{position:absolute;inset:auto 0 0;padding:26px 14px 10px;font-size:14px;background:linear-gradient(transparent,rgba(0,0,0,.75));pointer-events:none}
#lb{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.94);display:grid;place-items:center;cursor:zoom-out}
#lb img{max-width:94vw;max-height:88vh;object-fit:contain}
.lbb{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(20,20,20,.8);color:var(--ink);font-size:24px;cursor:pointer;display:grid;place-items:center}
#lbx{inset-block-start:16px;inset-inline-end:16px}
#lbp{inset-inline-start:16px}#lbn{inset-inline-end:16px}

/* ===== Steering-wheel designer & before/after ===== */
.cfg{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.pv{position:sticky;top:90px;background:radial-gradient(circle at 50% 40%,#3a3a3a,#111 75%);border:1px solid var(--line);border-radius:24px;padding:24px}
.pv svg{width:100%;max-width:380px;margin:auto;filter:drop-shadow(0 0 1px rgba(255,255,255,.45)) drop-shadow(0 20px 28px rgba(0,0,0,.65))}
.pv .note{text-align:center;margin-top:10px}
.grp{margin-bottom:16px}
.grp>label{display:block;font-size:13px;color:var(--mute);margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .2s,background .2s}
.chip:hover{border-color:var(--mute)}
.chip.on{border-color:var(--accent);background:rgba(246,169,27,.14)}
.sw{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.35)}
@media(max-width:860px){.cfg{grid-template-columns:1fr}.pv{position:static}}
.ba{position:relative;aspect-ratio:4/3;max-width:760px;border-radius:20px;overflow:hidden;border:1px solid var(--line);direction:ltr;--p:50%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .bf{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:3;padding:0}
.ba .ln{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:var(--accent);z-index:2}
.ba .tg{position:absolute;top:14px;padding:2px 12px;border-radius:99px;background:rgba(0,0,0,.65);font-size:12px;z-index:2}
.tg.l{left:14px}.tg.r{right:14px}

/* ===== Reviews & FAQ ===== */
.rev{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px}
.rev blockquote{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:26px}
.rev cite{display:block;margin-top:14px;color:var(--mute);font-size:14px;font-style:normal}
.stars{color:var(--accent);letter-spacing:2px;margin-bottom:8px}
.rf{margin-top:26px}
.rf summary{list-style:none;cursor:pointer}
.rf summary::-webkit-details-marker{display:none}
.rf form{margin-top:16px;max-width:560px}
.paper{background:#EFE9DB;color:#141414}
.paper h2::after{background:linear-gradient(90deg,#8a4f0c,var(--copper))}
.paper details{border-bottom:1px solid rgba(0,0,0,.16)}
.paper summary{cursor:pointer;font-weight:600;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.paper summary::after{content:"+";color:#8a4f0c;font-size:22px;line-height:1}
.paper details[open] summary::after{content:"–"}
.paper summary::-webkit-details-marker{display:none}
.paper details p{color:#3a3a3a;padding:0 0 18px;max-width:70ch}

/* ===== Contact ===== */
.ct{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.info p{color:var(--mute);margin:10px 0}
.info b{color:var(--ink)}
.info .btn{margin:6px 8px 0 0}
.hrs{list-style:none;margin:4px 0 14px}
.hrs li{display:flex;justify-content:space-between;gap:16px;max-width:340px;border-bottom:1px dashed var(--line);padding:3px 0;color:var(--mute);font-size:15px}
.hrs li.today{color:var(--ink)}
.map{margin-top:18px;height:240px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.9)}
@media(max-width:800px){.ct{grid-template-columns:1fr}}

/* ===== Footer ===== */
.foot{border-top:1px solid var(--line);padding:56px 0 24px;color:var(--mute);font-size:14px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:36px}
.fbrand img{width:min(300px,80%);height:auto;margin-bottom:14px}
.fbrand p{max-width:38ch}
.foot h3{font-size:15px;color:var(--ink);margin-bottom:12px}
.foot li{list-style:none;margin:6px 0}
.foot a:hover{color:var(--ink)}
.fbot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px;font-size:13px}
.fbot a{text-decoration:underline;text-underline-offset:3px}
.ver{color:#9a9a9a}
@media(max-width:800px){.fgrid{grid-template-columns:1fr;gap:28px}}

/* ===== Mobile action bar ===== */
.bar{display:none;position:fixed;inset:auto 0 0;z-index:60;padding:10px 4% calc(10px + env(safe-area-inset-bottom));gap:10px;background:rgba(11,11,11,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.bar a{flex:1}
.bar .wa{background:#25D366;border-color:#25D366;color:#06160c}
@media(max-width:860px){.bar{display:flex}body{padding-bottom:76px}}

/* ===== Intro, no-JS, texture ===== */
#intro{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;transition:opacity .7s}
#intro.out{opacity:0;pointer-events:none}
#intro video{width:100%;height:100%;object-fit:contain}
@media(min-aspect-ratio:1/1){#intro video{object-fit:cover}}
#skip{position:absolute;inset-block-end:calc(24px + env(safe-area-inset-bottom));inset-inline-end:24px;min-height:44px;background:rgba(0,0,0,.5)}
.ns{padding:120px 0 60px;text-align:center}
.ns h1{font-size:34px;margin-bottom:12px}
.ns a{color:var(--accent);text-decoration:underline}
@media(hover:hover){body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.045;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}
.tight{padding-top:0}
.gap{margin-top:24px}
.nf{min-height:100vh;display:grid;place-items:center;text-align:center;padding:20px}
.nf img{width:min(300px,70%);margin:0 auto 24px}
.nf h1{font-size:64px}
.nf p{color:var(--mute);margin:10px 0 24px}
.pg{max-width:760px;padding:60px 0 80px}
.pg .btn{margin-bottom:30px}
.pg section{padding:0 0 50px}

.zoom:focus-visible{outline-offset:-4px}
.btn:disabled{opacity:.6;cursor:progress;transform:none;box-shadow:none}
.ok a{color:var(--accent);text-decoration:underline;margin-inline-start:6px}
.sum{color:var(--ink);font-size:14px;text-align:center;margin-top:12px;min-height:22px}
.mapbtn{width:100%;height:100%;border:0;cursor:pointer;color:var(--ink);font:600 15px var(--f);background:radial-gradient(circle at 50% 40%,#2a2a2a,#121212)}
.mapbtn:hover{color:var(--accent)}
#wheels,#gallery,#faq{content-visibility:auto;contain-intrinsic-size:1px 700px}
@media print{#nav,.bar,#intro,.stage,.beam,#lb,.skip,.acts{display:none!important}body{background:#fff;color:#000}.hero{min-height:0;padding:20px 0;background:none}.hero p,.lead,.note,.card p{color:#333}.card,.rev blockquote{border-color:#999;background:none}a{color:#000}}