/* Munya Automotive Services — site stylesheet
   Identity: carbon black + signal red + steel. Edit the tokens in :root only. */

:root{
  --red:#e11d2e; --red-hover:#c4101f; --red-deep:#8f0d18; --red-soft:#fdecee;
  --ink:#12151a; --steel:#5b6572; --bg:#ffffff; --soft:#f4f5f7; --line:#e3e6ea;
  --carbon:#0b0d10; --carbon-2:#14181d; --carbon-line:#262c34; --on-dark:#f1f4f8; --on-dark-mute:#a8b3bf;
  --wa:#1fa855; --wa-hover:#178f47;
  --shadow:0 1px 2px rgba(18,21,26,.06),0 10px 28px rgba(18,21,26,.08);
  --shadow-lg:0 2px 4px rgba(18,21,26,.1),0 24px 56px rgba(18,21,26,.22);
  --radius:18px;
  --font-head:"Cairo","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-body:"IBM Plex Sans Arabic","Cairo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
html[data-lang="en"] body{ line-height:1.6; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--red); text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font-family:inherit; font-size:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.25; margin:0 0 .5em; text-wrap:balance; }
p{ margin:0 0 1em; text-wrap:pretty; }
:focus-visible{ outline:3px solid var(--red); outline-offset:2px; border-radius:6px; }
[hidden]{ display:none !important; }
html[data-lang="ar"] [lang="en"]{ display:none !important; }
html[data-lang="en"] [lang="ar"]{ display:none !important; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; }
.wrap{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:20px; }
.skip{ position:absolute; inset-inline-start:12px; top:-60px; background:var(--red); color:#fff; padding:8px 14px; border-radius:8px; z-index:300; }
.skip:focus{ top:10px; }

/* carbon-fibre texture (used by header, hero, footer) */
.carbon{ background:
  radial-gradient(900px 420px at 80% 0%, rgba(225,29,46,.18), transparent 65%),
  linear-gradient(135deg, rgba(255,255,255,.04) 25%, transparent 25%) 0 0/8px 8px,
  linear-gradient(225deg, rgba(255,255,255,.04) 25%, transparent 25%) 0 0/8px 8px,
  linear-gradient(315deg, rgba(0,0,0,.4) 25%, transparent 25%) 4px 0/8px 8px,
  linear-gradient(45deg, rgba(0,0,0,.4) 25%, transparent 25%) 4px 0/8px 8px,
  #0e1115; }

/* ---------- buttons ---------- */
.btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:9px; border:0; border-radius:12px; padding:13px 26px; font-weight:800; font-size:15.5px; background:var(--red); color:#fff; transition:background .15s,transform .15s,box-shadow .2s; text-decoration:none !important; white-space:nowrap; box-shadow:0 8px 22px rgba(225,29,46,.32); }
.btn:hover{ background:var(--red-hover); transform:translateY(-2px); box-shadow:0 12px 28px rgba(225,29,46,.42); }
.btn::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%); }
.btn:hover::after{ transform:translateX(120%); transition:transform .7s; }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); box-shadow:none; }
.btn-ghost:hover{ background:var(--soft); border-color:var(--ink); box-shadow:none; }
.btn-dark-ghost{ background:rgba(255,255,255,.06); color:#fff; border:1.5px solid rgba(255,255,255,.28); box-shadow:none; }
.btn-dark-ghost:hover{ background:rgba(255,255,255,.14); box-shadow:none; }
.btn-wa{ background:var(--wa); box-shadow:0 8px 22px rgba(31,168,85,.35); }
.btn-wa:hover{ background:var(--wa-hover); box-shadow:0 12px 28px rgba(31,168,85,.45); }
.btn-sm{ padding:9px 16px; font-size:14px; border-radius:10px; }
.btn-lg{ padding:16px 32px; font-size:17px; border-radius:14px; }
.btn svg{ width:1.2em; height:1.2em; flex:none; }

/* ---------- header (big logo) ---------- */
.topbar{ position:sticky; top:0; z-index:80; color:var(--on-dark); border-bottom:1px solid var(--carbon-line); box-shadow:0 8px 28px rgba(0,0,0,.35); }
.topbar .wrap{ display:flex; align-items:center; gap:16px; min-height:96px; }
.brand{ display:block; flex:none; }
.brand img{ height:80px; width:auto; filter:drop-shadow(0 4px 14px rgba(225,29,46,.28)); transition:transform .3s; }
.brand:hover img{ transform:scale(1.04); }
.nav{ display:flex; gap:2px; margin-inline-start:10px; flex:1; }
.nav a{ color:var(--on-dark-mute); padding:9px 13px; border-radius:10px; font-weight:700; font-size:15px; text-decoration:none; position:relative; }
.nav a:hover{ color:#fff; }
.nav a[aria-current="page"]{ color:#fff; }
.nav a[aria-current="page"]::after,.nav a:hover::after{ content:""; position:absolute; inset-inline:13px; bottom:3px; height:3px; border-radius:3px; background:var(--red); }
.tools{ display:flex; align-items:center; gap:8px; }
.icon-btn{ min-width:42px; height:42px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:11px; background:rgba(255,255,255,.07); border:1px solid var(--carbon-line); color:var(--on-dark); font-weight:700; font-size:13px; }
.icon-btn:hover{ background:rgba(255,255,255,.15); }
.icon-btn svg{ width:20px; height:20px; }
.guest-btn{ max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.burger{ display:none; }
@media (max-width:1240px){
  .burger{ display:inline-flex; }
  .nav{ position:fixed; inset-inline:0; top:96px; flex-direction:column; background:#0e1115; padding:14px 20px 24px; border-bottom:1px solid var(--carbon-line); gap:2px; transform:translateY(-130%); transition:transform .28s; margin:0; z-index:-1; }
  .nav.open{ transform:none; }
  .nav a{ padding:14px; font-size:17px; }
  .nav a[aria-current="page"]::after,.nav a:hover::after{ display:none; }
  .nav a[aria-current="page"]{ background:rgba(255,255,255,.08); }
  .tools .wa-top{ display:none; }
}
@media (max-width:560px){
  .topbar .wrap{ min-height:78px; gap:8px; }
  .brand img{ height:60px; }
  .nav{ top:78px; }
  .guest-btn{ max-width:92px; }
}

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; color:var(--on-dark); }
.hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(700px 380px at 22% 18%, rgba(225,29,46,.22), transparent 70%); pointer-events:none; }
.hero .wrap{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:30px; align-items:center; padding-block:34px 4px; }
.tagline{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#ffd2d6; margin-block-end:18px; direction:ltr; unicode-bidi:isolate; }
.tagline i{ width:6px; height:6px; border-radius:50%; background:var(--red); box-shadow:0 0 10px var(--red); }
.hero h1{ font-size:clamp(30px,4.2vw,50px); font-weight:800; color:#fff; margin-block-end:.25em; }
.hero h1 em{ font-style:normal; color:var(--red); text-shadow:0 0 28px rgba(225,29,46,.45); }
.hero .lead{ font-size:clamp(19px,2.2vw,26px); font-weight:700; color:#fff; margin-block-end:.5em; font-family:var(--font-head); }
.agents{ color:var(--on-dark-mute); font-size:15.5px; max-width:58ch; }
.agents b{ color:#fff; letter-spacing:.02em; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-block:16px 16px; }
.search{ position:relative; max-width:640px; }
.search form{ display:flex; gap:8px; background:#fff; border-radius:16px; padding:7px; box-shadow:var(--shadow-lg); }
.search input{ flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:16px; padding:12px 14px; color:#12151a; }
.search input:focus{ outline:none; }
.search input::placeholder{ color:#7b8794; }
.search .btn{ border-radius:11px; box-shadow:none; }
.suggest{ position:absolute; inset-inline:0; top:calc(100% + 6px); z-index:30; background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden; max-height:360px; overflow-y:auto; }
.suggest button{ display:flex; align-items:center; gap:12px; width:100%; text-align:start; background:none; border:0; padding:11px 14px; color:inherit; border-block-end:1px solid var(--line); }
.suggest button:last-child{ border:0; }
.suggest button:hover,.suggest button.on{ background:var(--red-soft); }
.suggest .s-name{ font-weight:700; font-size:14.5px; line-height:1.4; display:block; }
.suggest .s-ref{ font-size:12.5px; color:var(--steel); }
.suggest .s-free{ color:var(--red); font-weight:800; }
.suggest .ico{ width:34px; height:34px; border-radius:9px; background:var(--red-soft); color:var(--red); display:grid; place-items:center; flex:none; }
.suggest .ico svg{ width:20px; height:20px; }
.hint{ font-size:13px; color:var(--on-dark-mute); margin-block-start:10px; }
.hero-visual{ position:relative; min-height:370px; display:grid; place-items:center; }
.rotor-wrap{ position:relative; width:min(370px,90%); aspect-ratio:1; filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.rotor-wrap::before{ content:""; position:absolute; inset:-14%; border-radius:50%; background:radial-gradient(circle,rgba(225,29,46,.45),transparent 62%); animation:pulse 4s ease-in-out infinite; }
.rotor-wrap svg{ position:relative; width:100%; height:100%; overflow:visible; }
.rotor-spin{ transform-origin:200px 200px; animation:spin 26s linear infinite; }
.rotor-wrap:hover .rotor-spin{ animation-duration:5s; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pulse{ 0%,100%{ opacity:.6; transform:scale(.96); } 50%{ opacity:1; transform:scale(1.04); } }
.float-card{ position:absolute; background:rgba(14,17,21,.78); backdrop-filter:blur(8px); border:1px solid var(--carbon-line); border-radius:14px; padding:10px 14px; font-size:13px; font-weight:700; color:#fff; box-shadow:var(--shadow-lg); animation:floaty 5s ease-in-out infinite; }
.float-card small{ display:block; color:var(--on-dark-mute); font-weight:500; font-size:11.5px; }
.float-card.f1{ inset-block-start:6%; inset-inline-start:0; }
.float-card.f2{ inset-block-end:10%; inset-inline-end:0; animation-delay:-2.2s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@media (max-width:900px){
  .hero .wrap{ grid-template-columns:minmax(0,1fr); padding-block:34px 0; }
  .hero-visual{ min-height:0; margin-block-start:6px; }
  .rotor-wrap{ width:min(300px,70%); }
  .float-card{ display:none; }
}

/* animated car scene */
.scene{ position:relative; z-index:2; height:176px; direction:ltr; overflow:hidden; margin-block-start:-4px; }
.scene .road{ position:absolute; inset-inline:0; bottom:22px; height:4px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.28) 12%,rgba(255,255,255,.28) 88%,transparent); }
.scene .dash{ position:absolute; inset-inline:0; bottom:10px; height:3px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 46px,transparent 46px 110px); opacity:.7; }
.scene .glowline{ position:absolute; inset-inline:10%; bottom:20px; height:10px; background:radial-gradient(ellipse at center,rgba(225,29,46,.5),transparent 70%); filter:blur(6px); }
#car{ position:absolute; bottom:14px; left:0; width:430px; will-change:transform; }
#car svg{ width:100%; height:auto; overflow:visible; display:block; }
.streaks{ position:absolute; inset-inline-start:-210px; top:52px; width:200px; height:70px; opacity:0; pointer-events:none; }
.streaks i{ position:absolute; height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.7)); }
.streaks i:nth-child(1){ top:0; width:190px; right:0; } .streaks i:nth-child(2){ top:16px; width:140px; right:0; }
.streaks i:nth-child(3){ top:34px; width:200px; right:0; } .streaks i:nth-child(4){ top:52px; width:120px; right:0; }
.caliper{ transition:filter .2s; }
.wheel-spin{ transform-box:fill-box; transform-origin:center; }
@media (max-width:640px){ .tagline{ flex-wrap:wrap; gap:6px 8px; font-size:11px; letter-spacing:.08em; } .scene{ height:130px; } #car{ width:290px; } .streaks{ top:38px; } }

/* ---------- brands marquee ---------- */
.brandbar{ background:#fff; border-block:1px solid var(--line); }
.brandbar .wrap{ display:flex; align-items:center; gap:24px; padding-block:18px; }
.brandbar .lbl{ flex:none; font-weight:800; font-size:14.5px; max-width:230px; line-height:1.45; color:var(--ink); }
.brandbar .lbl small{ display:block; color:var(--steel); font-weight:500; font-size:12.5px; }
.marquee{ flex:1; min-width:0; overflow:hidden; direction:ltr; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:16px; width:max-content; animation:marq 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.bpill{ flex:none; height:58px; min-width:128px; padding:8px 18px; border-radius:12px; background:#fff; border:1px solid var(--line); display:grid; place-items:center; box-shadow:var(--shadow); }
.bpill img{ height:38px; width:auto; max-width:150px; object-fit:contain; }
.bpill span{ font-family:var(--font-head); font-weight:800; font-size:22px; letter-spacing:.02em; font-style:italic; }
@media (max-width:760px){ .brandbar .wrap{ flex-direction:column; align-items:stretch; gap:8px; } .brandbar .lbl{ max-width:none; } }

/* ---------- sections ---------- */
.section{ padding-block:72px; }
.section.soft{ background:var(--soft); }
.section.dark{ color:var(--on-dark); }
.section-head{ max-width:760px; margin-block-end:36px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.kicker{ display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin-block-end:8px; }
.section-head h2{ font-size:clamp(26px,3.4vw,40px); font-weight:800; }
.section-head h2::after{ content:""; display:block; width:64px; height:4px; border-radius:4px; background:var(--red); margin-block-start:12px; }
.section-head.center h2::after{ margin-inline:auto; }
.section-head p{ color:var(--steel); font-size:17px; margin:12px 0 0; }
.section.dark .section-head p{ color:var(--on-dark-mute); }
@media (max-width:700px){ .section{ padding-block:48px; } }
.grid{ display:grid; gap:20px; }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:980px){ .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .g2,.g3{ grid-template-columns:minmax(0,1fr); } .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); }
.card h3{ font-size:19px; font-weight:800; }
.card p:last-child{ margin-bottom:0; }

/* trust */
.trust{ background:var(--soft); }
.trust .wrap{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; padding-block:26px; }
.trust-item{ display:flex; gap:13px; align-items:center; }
.trust-item .ti{ flex:none; width:50px; height:50px; border-radius:14px; background:var(--red); color:#fff; display:grid; place-items:center; box-shadow:0 8px 18px rgba(225,29,46,.3); }
.trust-item .ti svg{ width:26px; height:26px; }
.trust-item b{ display:block; font-size:15px; line-height:1.35; }
.trust-item span{ font-size:13px; color:var(--steel); }
@media (max-width:900px){ .trust .wrap{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .trust .wrap{ grid-template-columns:minmax(0,1fr); } }

/* brand product cards (stage images) */
.pcard{ position:relative; display:flex; flex-direction:column; border-radius:22px; overflow:hidden; background:var(--carbon); color:#fff; text-decoration:none !important; box-shadow:var(--shadow-lg); transition:transform .25s,box-shadow .25s; transform-style:preserve-3d; }
.pcard:hover{ box-shadow:0 30px 70px rgba(225,29,46,.28),var(--shadow-lg); }
.pcard .pimg{ aspect-ratio:1; overflow:hidden; }
.pcard .pimg img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.pcard:hover .pimg img{ transform:scale(1.07); }
.pcard .pbody{ padding:18px 20px 22px; border-block-start:3px solid var(--red); }
.pcard h3{ font-size:22px; margin:0 0 4px; color:#fff; letter-spacing:.01em; }
.pcard p{ color:var(--on-dark-mute); font-size:14px; margin:0 0 12px; line-height:1.6; }
.pcard .go{ font-weight:800; font-size:14px; color:#fff; display:inline-flex; gap:8px; align-items:center; }
.pcard .go::after{ content:"→"; transition:transform .2s; }
html[dir="rtl"] .pcard .go::after{ content:"←"; }
.pcard:hover .go::after{ transform:translateX(5px); }
html[dir="rtl"] .pcard:hover .go::after{ transform:translateX(-5px); }

.catcard{ position:relative; border-radius:22px; overflow:hidden; min-height:300px; display:flex; align-items:flex-end; color:#fff; text-decoration:none !important; box-shadow:var(--shadow-lg); }
.catcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s; }
.catcard:hover img{ transform:scale(1.06); }
.catcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(7,9,12,.88)); }
.catcard .cb{ position:relative; z-index:2; padding:22px; }
.catcard h3{ color:#fff; margin:0 0 4px; font-size:24px; }
.catcard p{ margin:0; color:#d6dde5; font-size:14.5px; }

/* makes */
.logo-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); color:#12151a; }
.logo-card img{ width:100%; border-radius:8px; }
.make-groups{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-block-start:16px; }
.make-groups div{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:14px; }
.make-groups b{ display:block; color:var(--red); margin-block-end:2px; }
@media (max-width:640px){ .make-groups{ grid-template-columns:minmax(0,1fr); } }
.two-col{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:36px; align-items:center; }
@media (max-width:820px){ .two-col{ grid-template-columns:minmax(0,1fr) !important; } }

/* countries */
.country{ display:flex; flex-direction:column; gap:10px; transition:transform .2s,box-shadow .2s; }
.country:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.country .flag-lg{ width:62px; height:42px; border-radius:7px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); }
.country .flag-lg svg,.flag svg{ width:100%; height:100%; display:block; }
.country h3{ margin:0; }
.country p{ color:var(--steel); font-size:14.5px; flex:1; margin:0; }
.country a{ font-weight:800; font-size:14.5px; }

/* steps */
.steps{ counter-reset:s; }
.step{ position:relative; }
.step::before{ counter-increment:s; content:counter(s); display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--red); color:#fff; font-family:var(--font-head); font-weight:800; font-size:24px; margin-block-end:14px; box-shadow:0 0 0 8px var(--red-soft); }
.step h3{ font-size:20px; margin-block-end:6px; }
.step p{ color:var(--steel); margin:0; }

/* photos / gallery */
.photo{ margin:0; border-radius:16px; overflow:hidden; background:#000; position:relative; cursor:zoom-in; }
.photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.photo:hover img{ transform:scale(1.05); }
.photo figcaption{ position:absolute; inset-inline:0; bottom:0; padding:22px 14px 10px; font-size:13px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.75)); }
.teaser{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.teaser .photo:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.teaser .photo img{ aspect-ratio:1; }
@media (max-width:760px){ .teaser{ grid-template-columns:repeat(2,minmax(0,1fr)); } .teaser .photo:nth-child(1){ grid-column:span 2; grid-row:auto; } }
.filters-bar{ display:flex; flex-wrap:wrap; gap:8px; margin-block-end:26px; }
.fchip{ border:1.5px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:8px 18px; font-weight:700; font-size:14.5px; }
.fchip:hover{ border-color:var(--ink); }
.fchip.on{ background:var(--red); border-color:var(--red); color:#fff; }
.masonry{ column-count:4; column-gap:14px; }
.masonry .photo{ break-inside:avoid; margin-block-end:14px; display:block; }
.masonry .photo img{ height:auto; }
@media (max-width:1000px){ .masonry{ column-count:3; } }
@media (max-width:700px){ .masonry{ column-count:2; column-gap:10px; } .masonry .photo{ margin-block-end:10px; } }
.masonry .photo.pop{ animation:popin .45s both; }
@keyframes popin{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }

/* services / plans */
.badge{ display:inline-block; font-size:12px; font-weight:800; padding:3px 11px; border-radius:999px; background:var(--red-soft); color:var(--red); margin-block-end:10px; }
.badge.soon{ background:#f6ead9; color:#9a6317; }
.addon{ display:flex; gap:14px; }
.addon .ai{ flex:none; width:48px; height:48px; border-radius:14px; background:var(--red-soft); color:var(--red); display:grid; place-items:center; }
.addon .ai svg{ width:24px; height:24px; }
.addon h3{ font-size:17px; margin-block-end:4px; }
.addon p{ font-size:14.5px; color:var(--steel); margin:0; }
.plans{ align-items:stretch; }
.plan{ display:flex; flex-direction:column; position:relative; }
.plan.hot{ border-color:var(--red); box-shadow:0 0 0 2px var(--red),var(--shadow-lg); }
.plan .tagp{ position:absolute; inset-block-start:-13px; inset-inline-start:22px; background:var(--red); color:#fff; font-size:12px; font-weight:800; padding:3px 14px; border-radius:999px; }
.plan .price{ font-family:var(--font-head); font-size:38px; font-weight:800; line-height:1.1; margin-block:6px 14px; }
.plan .price small{ font-size:14px; font-weight:600; color:var(--steel); }
.plan ul{ list-style:none; padding:0; margin:0 0 20px; flex:1; }
.plan li{ padding-block:7px; display:flex; gap:10px; font-size:14.5px; }
.plan li::before{ content:""; flex:none; width:18px; height:18px; margin-block-start:4px; border-radius:50%; background:var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e11d2e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; }

/* about */
.founder{ display:grid; grid-template-columns:340px minmax(0,1fr); gap:42px; align-items:start; }
.founder .portrait{ border-radius:22px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-lg); position:relative; }
.founder .portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top; }
.founder h2{ font-size:30px; }
.role{ color:var(--red); font-weight:800; margin-block-end:14px; }
.pillrow{ display:flex; flex-wrap:wrap; gap:10px; margin-block:18px; }
.pill{ background:var(--red-soft); color:var(--red-deep); border-radius:999px; padding:6px 16px; font-weight:800; font-size:14px; }
@media (max-width:860px){ .founder{ grid-template-columns:minmax(0,1fr) !important; gap:24px; } .founder .portrait{ max-width:340px; } }
.timeline{ list-style:none; margin:0; padding:0; position:relative; }
.timeline::before{ content:""; position:absolute; inset-block:8px; inset-inline-start:11px; width:2px; background:var(--line); }
.timeline li{ position:relative; padding-inline-start:40px; padding-block-end:24px; }
.timeline li::before{ content:""; position:absolute; inset-inline-start:3px; top:6px; width:18px; height:18px; border-radius:50%; background:var(--red); box-shadow:0 0 0 5px var(--red-soft); }
.timeline b{ display:block; font-size:17px; }
.timeline span{ color:var(--steel); font-size:14.5px; }
.timeline .yrs{ color:var(--red); font-weight:800; font-size:13px; }
.values .card{ text-align:center; }
.values .vi{ width:62px; height:62px; margin:0 auto 12px; border-radius:18px; background:var(--red); color:#fff; display:grid; place-items:center; box-shadow:0 10px 22px rgba(225,29,46,.3); }
.values .vi svg{ width:30px; height:30px; }

/* page head */
.pagehead{ color:var(--on-dark); padding-block:44px 38px; position:relative; overflow:hidden; }
.pagehead .wrap{ position:relative; }
.pagehead h1{ font-size:clamp(30px,4.2vw,46px); font-weight:800; color:#fff; margin-block-end:.25em; }
.pagehead h1::after{ content:""; display:block; width:70px; height:4px; background:var(--red); border-radius:4px; margin-block-start:12px; }
.pagehead p{ color:var(--on-dark-mute); max-width:62ch; margin:14px 0 18px; }
.pagehead .search{ margin:0; max-width:680px; }

/* catalogue */
.brandpick{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-block:30px; position:relative; z-index:3; }
.bp{ display:flex; flex-direction:column; border:2px solid transparent; border-radius:18px; overflow:hidden; background:var(--carbon); color:#fff; text-align:start; padding:0; box-shadow:var(--shadow-lg); transition:transform .2s,border-color .2s; }
.bp:hover{ transform:translateY(-4px); }
.bp.on{ border-color:var(--red); box-shadow:0 0 0 4px rgba(225,29,46,.2),var(--shadow-lg); }
.bp img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.bp span{ padding:10px 14px; font-weight:800; font-size:15px; display:flex; justify-content:space-between; gap:8px; }
.bp span em{ font-style:normal; font-size:12.5px; color:var(--on-dark-mute); font-weight:600; }
@media (max-width:760px){ .brandpick{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.cat-tools{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-block-end:20px; }
.sel{ border:1.5px solid var(--line); border-radius:11px; padding:9px 14px; background:#fff; color:var(--ink); font:inherit; font-size:14.5px; font-weight:600; }
.res-count{ margin-inline-start:auto; font-weight:800; }
.parts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px; }
.part{ display:flex; flex-direction:column; gap:9px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); transition:border-color .15s,transform .2s,box-shadow .2s; position:relative; overflow:hidden; }
.part::before{ content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--red); transform:scaleY(0); transform-origin:top; transition:transform .25s; }
.part:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:#d6dae0; }
.part:hover::before{ transform:scaleY(1); }
.part-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tag{ font-size:11.5px; font-weight:800; border-radius:6px; padding:2px 9px; background:var(--carbon); color:#fff; }
.tag.pos{ background:var(--red-soft); color:var(--red-deep); }
.part h3{ font-size:16px; line-height:1.45; margin:2px 0 0; font-weight:800; }
.part .fit{ font-size:14px; color:var(--steel); margin:0; line-height:1.55; }
.part .ref{ display:flex; align-items:center; gap:8px; background:var(--soft); border:1px dashed #cfd5dc; border-radius:10px; padding:7px 12px; }
.part .ref .mono{ font-weight:700; flex:1; word-break:break-all; font-size:14.5px; }
.part .alt{ font-size:13px; color:var(--steel); }
.part .alt b{ color:var(--ink); }
.copy{ border:0; background:none; color:var(--red); font-weight:800; font-size:12px; padding:2px 4px; }
.part .btn{ margin-block-start:auto; }
.empty{ text-align:center; padding:50px 20px; background:var(--soft); border-radius:var(--radius); border:1px dashed var(--line); }
.notfound{ display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--carbon); color:#fff; border-radius:20px; padding:26px 30px; margin-block-start:30px; box-shadow:var(--shadow-lg); }
.notfound h3{ margin:0 0 4px; font-size:21px; color:#fff; }
.notfound p{ margin:0; color:var(--on-dark-mute); }

/* contact */
.contact-card{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; }
.contact-card .flag-lg{ width:58px; height:39px; border-radius:7px; overflow:hidden; border:1px solid var(--line); }
.contact-card .flag-lg svg{ width:100%; height:100%; }
.contact-card .num{ font-family:var(--font-mono); font-size:21px; font-weight:600; direction:ltr; unicode-bidi:isolate; }
.contact-card .em{ font-family:var(--font-mono); font-size:15.5px; font-weight:600; direction:ltr; unicode-bidi:isolate; word-break:break-all; }
.contact-card .role-tag{ font-size:12.5px; font-weight:800; color:var(--red); letter-spacing:.04em; }
.form{ display:grid; gap:14px; }
.form .row2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
@media (max-width:620px){ .form .row2{ grid-template-columns:minmax(0,1fr); } }
.field label{ display:block; font-weight:800; font-size:14px; margin-block-end:5px; }
.field input,.field textarea,.field select{ width:100%; border:1.5px solid var(--line); border-radius:11px; padding:11px 14px; background:#fff; color:var(--ink); font:inherit; font-size:15.5px; }
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:3px solid var(--red-soft); border-color:var(--red); }
.faq details{ border:1px solid var(--line); border-radius:12px; background:#fff; padding:4px 18px; margin-block-end:10px; }
.faq summary{ cursor:pointer; font-weight:800; padding-block:12px; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::after{ content:"+"; color:var(--red); font-size:22px; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ color:var(--steel); padding-block-end:8px; margin:0; }

/* CTA band */
.ctaband{ background:linear-gradient(120deg,#0b0d10,#1a0e11 55%,#7d0b16); color:#fff; border-radius:26px; padding:46px 38px; display:flex; gap:26px; align-items:center; justify-content:space-between; flex-wrap:wrap; box-shadow:var(--shadow-lg); position:relative; overflow:hidden; }
.ctaband::before{ content:""; position:absolute; width:380px; height:380px; border-radius:50%; inset-inline-end:-90px; top:-110px; background:radial-gradient(circle,rgba(225,29,46,.55),transparent 65%); }
.ctaband > *{ position:relative; }
.ctaband h2{ margin:0 0 6px; font-size:clamp(23px,3vw,34px); }
.ctaband p{ margin:0; opacity:.88; }
.ctaband .btns{ display:flex; gap:12px; flex-wrap:wrap; }

/* footer */
.footer{ color:var(--on-dark-mute); padding-block:56px 24px; }
.footer .cols{ display:grid; grid-template-columns:1.5fr 1fr 1.3fr; gap:40px; }
.footer .flogo{ height:104px; width:auto; margin-block-end:14px; }
.footer h4{ color:#fff; font-size:15px; margin-block-end:12px; position:relative; padding-block-end:8px; }
.footer h4::after{ content:""; position:absolute; inset-inline-start:0; bottom:0; width:34px; height:3px; background:var(--red); border-radius:3px; }
.footer a{ color:var(--on-dark-mute); display:block; padding-block:4px; text-decoration:none; font-size:14.5px; }
.footer a:hover{ color:#fff; }
.footer .legal{ border-block-start:1px solid var(--carbon-line); margin-block-start:36px; padding-block-start:18px; font-size:13px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.footer .phone{ display:flex; align-items:center; gap:8px; color:#fff; font-family:var(--font-mono); direction:ltr; unicode-bidi:isolate; padding-block:4px; }
.footer .phone svg{ width:20px; height:20px; flex:none; color:var(--wa); }
.footer .mail{ direction:ltr; unicode-bidi:isolate; font-family:var(--font-mono); font-size:13.5px; color:#fff; }
.footer .mail small{ display:block; font-family:var(--font-body); color:var(--on-dark-mute); font-size:12px; direction:inherit; }
@media (max-width:900px){ .footer .cols{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .footer .cols > :first-child{ grid-column:span 2; } }
@media (max-width:520px){ .footer .cols{ grid-template-columns:minmax(0,1fr); } .footer .cols > :first-child{ grid-column:auto; } }

/* overlays */
.overlay{ position:fixed; inset:0; z-index:200; background:rgba(8,10,13,.68); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:16px; }
.modal{ background:#fff; color:var(--ink); border-radius:22px; width:100%; max-width:450px; padding:28px; box-shadow:var(--shadow-lg); max-height:92vh; overflow-y:auto; border-block-start:5px solid var(--red); }
.modal h3{ font-size:22px; }
.modal .sub{ color:var(--steel); font-size:14.5px; margin-block-end:16px; }
.modal .actions{ display:flex; gap:10px; justify-content:flex-end; margin-block-start:18px; flex-wrap:wrap; }
.modal .ctx{ background:var(--red-soft); color:var(--red-deep); border-radius:10px; padding:8px 12px; font-size:13.5px; font-weight:700; margin-block-end:12px; }
.modal .hintline{ font-size:13px; color:var(--steel); margin:8px 0 0; }
.closex{ float:inline-end; background:none; border:0; font-size:30px; line-height:1; color:var(--steel); }
@media (max-width:560px){ .overlay.sheet{ align-items:flex-end; padding:0; } .overlay.sheet .modal{ border-radius:22px 22px 0 0; max-width:none; } }
.lightbox{ position:fixed; inset:0; z-index:260; background:rgba(4,6,9,.94); display:flex; align-items:center; justify-content:center; padding:20px; }
.lightbox img{ max-width:min(94vw,1100px); max-height:88vh; border-radius:12px; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lb-btn{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#fff; font-size:26px; display:grid; place-items:center; }
.lb-btn:hover{ background:var(--red); border-color:var(--red); }
.lb-prev{ left:16px; } .lb-next{ right:16px; }
.lb-close{ position:absolute; top:16px; right:18px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#fff; font-size:28px; line-height:1; }
.lb-count{ position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#cfd6dd; font-size:14px; direction:ltr; }
.wa-float{ position:fixed; inset-block-end:18px; inset-inline-end:18px; z-index:70; width:60px; height:60px; border-radius:50%; background:var(--wa); color:#fff; display:grid; place-items:center; box-shadow:0 10px 26px rgba(31,168,85,.5); animation:wapulse 2.6s infinite; }
.wa-float:hover{ background:var(--wa-hover); }
.wa-float svg{ width:32px; height:32px; }
@keyframes wapulse{ 0%{ box-shadow:0 10px 26px rgba(31,168,85,.5),0 0 0 0 rgba(31,168,85,.5); } 70%{ box-shadow:0 10px 26px rgba(31,168,85,.5),0 0 0 18px rgba(31,168,85,0); } 100%{ box-shadow:0 10px 26px rgba(31,168,85,.5),0 0 0 0 rgba(31,168,85,0); } }
.toast{ position:fixed; inset-block-end:24px; inset-inline:0; margin-inline:auto; width:fit-content; max-width:90vw; background:#12151a; color:#fff; padding:10px 20px; border-radius:999px; z-index:300; font-size:14px; box-shadow:var(--shadow-lg); }
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease,transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } *{ animation:none !important; } .marquee-track{ transform:none; } }

.eyebrow{ display:inline-block; font-size:13px; font-weight:800; color:#ffd2d6; background:rgba(225,29,46,.16); border:1px solid rgba(225,29,46,.4); padding:4px 14px; border-radius:999px; margin-block-end:12px; }
.statsband{ color:#fff; border-block:1px solid var(--carbon-line); }
.statsband .wrap{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; padding-block:26px; text-align:center; }
.sb b{ display:block; font-family:var(--font-head); font-size:38px; line-height:1.1; color:#fff; text-shadow:0 0 22px rgba(225,29,46,.5); }
.sb b .ltr::after{ content:"+"; color:var(--red); }
.sb > span{ color:var(--on-dark-mute); font-size:13.5px; }
@media (max-width:760px){ .statsband .wrap{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---- gears hero ---- */
.gears-wrap{ position:relative; width:min(540px,100%); filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.gears-wrap::before{ content:""; position:absolute; inset:-8% -4%; border-radius:50%; background:radial-gradient(circle,rgba(225,29,46,.42),transparent 64%); animation:pulse 4s ease-in-out infinite; }
.gears-wrap svg{ position:relative; width:100%; height:auto; overflow:visible; display:block; }
.g-a{ animation:spin 26s linear infinite; }
.g-b{ animation:spinr 17.9s linear infinite; }
@keyframes spinr{ to{ transform:rotate(-360deg); } }
.gears-wrap:hover .g-a{ animation-duration:8s; } .gears-wrap:hover .g-b{ animation-duration:5.5s; }
.offer{ list-style:none; margin:4px 0 14px; padding:0; display:grid; gap:7px; max-width:60ch; }
.offer li{ position:relative; padding-inline-start:26px; font-size:16.5px; line-height:1.55; color:#e8edf3; font-weight:600; }
.offer li::before{ content:""; position:absolute; inset-inline-start:0; top:.62em; width:12px; height:12px; border-radius:3px; background:var(--red); transform:rotate(45deg); box-shadow:0 0 10px rgba(225,29,46,.7); }
.offer.light li{ color:var(--ink); }
.offer.light li::before{ box-shadow:none; }
.shipline{ display:inline-block; margin:0; padding:9px 18px; border:1px solid rgba(225,29,46,.45); background:rgba(225,29,46,.12); color:#fff; border-radius:12px; font-weight:800; font-size:15.5px; }
.hero h1{ font-size:clamp(28px,3.9vw,48px); }
/* ---- sub navigation (spare-parts section) ---- */
.subnav{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:96px; z-index:50; box-shadow:0 6px 18px rgba(18,21,26,.05); }
.subnav .wrap{ display:flex; gap:8px; padding-block:10px; overflow-x:auto; }
.subnav a{ white-space:nowrap; padding:8px 18px; border-radius:999px; font-weight:800; font-size:14.5px; color:var(--ink); text-decoration:none; border:1.5px solid var(--line); }
.subnav a:hover{ border-color:var(--ink); }
.subnav a[aria-current="page"]{ background:var(--red); border-color:var(--red); color:#fff; box-shadow:0 6px 16px rgba(225,29,46,.3); }
@media (max-width:560px){ .subnav{ top:78px; } }
/* ---- category cards ---- */
.catcard{ min-height:290px; }
.catcard.plain{ background:linear-gradient(145deg,#12161b,#1b1013 60%,#4a0a12); }
.catcard.plain::after{ background:none; }
.catcard.plain .cico{ position:absolute; inset-block-start:34px; inset-inline-start:24px; width:76px; height:76px; border-radius:20px; background:rgba(225,29,46,.16); border:1px solid rgba(225,29,46,.45); color:#fff; display:grid; place-items:center; box-shadow:0 0 30px rgba(225,29,46,.3); transition:transform .3s; }
.catcard.plain:hover .cico{ transform:scale(1.08) rotate(-4deg); }
.catcard.plain .cico svg{ width:42px; height:42px; }
.catbadge{ position:absolute; z-index:3; inset-block-start:14px; inset-inline-end:14px; font-size:12px; font-weight:800; padding:4px 13px; border-radius:999px; background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(4px); }
.catbadge.live{ background:var(--red); border-color:var(--red); box-shadow:0 6px 16px rgba(225,29,46,.4); }
/* ---- coming-soon pages ---- */
.soon-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:44px; align-items:center; }
.soon-t{ font-size:clamp(26px,3.2vw,38px); margin-block:6px 10px; }
.soon-visual{ display:block; border-radius:24px; overflow:hidden; box-shadow:var(--shadow-lg); }
.soon-visual.panel{ position:relative; min-height:380px; display:grid; place-items:center; align-content:center; gap:14px; color:#fff; }
.soon-visual.panel .big{ width:150px; height:150px; border-radius:36px; background:rgba(225,29,46,.16); border:1px solid rgba(225,29,46,.5); display:grid; place-items:center; box-shadow:0 0 60px rgba(225,29,46,.4); }
.soon-visual.panel .big svg{ width:86px; height:86px; }
.soon-visual.panel b{ font-family:var(--font-head); font-size:22px; letter-spacing:.04em; }
.soon-visual .ring{ position:absolute; width:260px; height:260px; border-radius:50%; border:2px solid rgba(225,29,46,.45); animation:ringp 3s ease-out infinite; }
@keyframes ringp{ from{ transform:scale(.7); opacity:.9; } to{ transform:scale(1.5); opacity:0; } }
.soon-visual.flyerbox{ cursor:zoom-in; max-width:420px; margin-inline:auto; }
.soon-visual.flyerbox img{ width:100%; height:auto; }
@media (max-width:820px){ .soon-grid{ grid-template-columns:minmax(0,1fr); gap:28px; } }

/* ---- bigger logo + headlight (as on business card, page 2) ---- */
:root{ --hh:120px; }
.topbar{ overflow:visible; }
.topbar::after{ content:""; position:absolute; inset-block:0; inset-inline-end:0; width:min(36vw,470px); background:url(../img/headlight.webp) 40% 38%/cover no-repeat; opacity:.9; pointer-events:none; z-index:0; }
html[dir="rtl"] .topbar::after{ -webkit-mask-image:linear-gradient(to right,#000 30%,transparent); mask-image:linear-gradient(to right,#000 30%,transparent); }
html[dir="ltr"] .topbar::after{ -webkit-mask-image:linear-gradient(to left,#000 30%,transparent); mask-image:linear-gradient(to left,#000 30%,transparent); }
.topbar .wrap{ position:relative; z-index:2; max-width:1340px; min-height:var(--hh); }
.brand img{ height:104px; }
.nav a{ padding:9px 10px; font-size:14.5px; }
.footer .flogo{ height:132px; }
.subnav{ top:var(--hh); }
@media (max-width:1240px){ .nav{ top:var(--hh); } }
@media (max-width:560px){ :root{ --hh:90px; } .brand img{ height:74px; } .topbar::after{ width:46vw; opacity:.6; } .topbar .wrap{ min-height:var(--hh); } .nav{ top:var(--hh); } .subnav{ top:var(--hh); } .footer .flogo{ height:104px; } }
/* ---- business card + QR ---- */
.bc-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:30px; align-items:start; }
.bc-cards{ display:grid; gap:16px; }
.bc-cards .photo,.fcard .photo{ aspect-ratio:1388/788; background:#0b0d10; box-shadow:var(--shadow-lg); }
.qr-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.qr-box{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:14px; text-align:center; box-shadow:var(--shadow); color:#12151a; }
.qr-box img{ width:100%; max-width:220px; height:auto; margin-inline:auto; }
.qr-box b{ display:block; margin-top:8px; font-size:14px; line-height:1.4; }
.bc-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-block:18px 10px; }
.bc-note{ color:var(--steel); font-size:14px; }
@media (max-width:860px){ .bc-grid{ grid-template-columns:minmax(0,1fr); } }
.fqr{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:center; border-block-start:1px solid var(--carbon-line); margin-block-start:34px; padding-block-start:28px; }
.fqr .fcard{ display:grid; gap:12px; width:min(300px,100%); }
.fqr .qr-box{ width:184px; padding:10px; }
.fqr .qr-box img{ max-width:156px; }
@media (max-width:560px){ :root{ --hh:80px; } .brand img{ height:62px; } .guest-btn{ max-width:74px; padding-inline:8px; } .tools{ gap:5px; } .icon-btn{ min-width:38px; height:38px; padding-inline:8px; } .topbar .wrap{ gap:6px; padding-inline:12px; } }
@media (max-width:370px){ .brand img{ height:54px; } .guest-btn{ max-width:60px; font-size:12px; } }

/* ===== v4: clear LED car-front band, catalogues, roadside chat, TikTok ===== */
.topbar::after{ display:none !important; }
.lightband{ position:relative; z-index:2; border-block:1px solid var(--carbon-line); background:linear-gradient(90deg,rgba(225,29,46,.14),transparent 45%),rgba(6,8,10,.6); }
.lightband .wrap{ display:flex; align-items:center; gap:30px; direction:ltr; padding-block:20px; }
.lb-art{ flex:0 0 min(470px,46%); }
.lb-art svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.lb-text{ flex:1; direction:rtl; text-align:right; position:relative; }
html[dir="ltr"] .lb-text{ direction:ltr; text-align:left; }
.lb-mark{ position:absolute; inset-block-start:-34px; inset-inline-end:0; font-family:Georgia,serif; font-size:120px; line-height:1; color:rgba(225,29,46,.35); pointer-events:none; }
html[dir="ltr"] .lb-mark{ inset-inline-end:auto; inset-inline-start:0; }
.lb-q{ margin:0 0 6px; font-family:var(--font-head); font-weight:800; font-size:clamp(26px,3.7vw,48px); line-height:1.2; color:#fff; text-shadow:0 0 30px rgba(255,255,255,.18); }
.lb-q em{ font-style:normal; color:var(--red); text-shadow:0 0 26px rgba(225,29,46,.55); }
.lb-en{ display:block; color:var(--on-dark-mute); letter-spacing:.14em; text-transform:uppercase; font-size:12.5px; font-weight:700; direction:ltr; }
html[dir="rtl"] .lb-en{ text-align:right; }
.lb-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-block-start:14px; }
.lb-tags span{ border:1px solid rgba(225,29,46,.5); background:rgba(225,29,46,.12); color:#fff; border-radius:999px; padding:4px 14px; font-size:12.5px; font-weight:800; direction:ltr; }
.cfsvg .led{ animation:ledp 3s ease-in-out infinite; }
.cfsvg .bloom{ animation:bloomp 3s ease-in-out infinite; }
@keyframes ledp{ 50%{ opacity:.72; } }
@keyframes bloomp{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }
@media (max-width:760px){ .lightband .wrap{ flex-direction:column; align-items:stretch; gap:6px; } .lb-art{ flex:none; width:100%; } .lb-text,html[dir="rtl"] .lb-text,html[dir="ltr"] .lb-text{ text-align:center; } .lb-tags{ justify-content:center; } .lb-en{ text-align:center !important; } .lb-mark{ display:none; } }
/* catalogue cards */
.itemgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
@media (max-width:980px){ .itemgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .itemgrid{ grid-template-columns:minmax(0,1fr); } }
.itemcard{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow); transition:transform .2s,box-shadow .2s,border-color .2s; }
.itemcard[hidden]{ display:none; }
.itemcard::before{ content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--red); transform:scaleY(0); transform-origin:top; transition:transform .25s; }
.itemcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:#d6dae0; }
.itemcard:hover::before{ transform:scaleY(1); }
.itemcard .ii{ width:50px; height:50px; border-radius:14px; background:var(--red-soft); color:var(--red); display:grid; place-items:center; }
.itemcard .ii svg{ width:27px; height:27px; }
.itemcard .ib{ flex:1; }
.itemcard h3{ font-size:16.5px; line-height:1.4; margin:0 0 4px; font-weight:800; }
.itemcard p{ margin:0; color:var(--steel); font-size:14.5px; line-height:1.6; }
.refline{ margin-block-start:8px; background:var(--soft); border:1px dashed #cfd5dc; border-radius:10px; padding:6px 10px; font-size:13px; word-break:break-all; }
.catintro{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-block-end:22px; }
.catintro p{ flex-basis:100%; margin:0; color:var(--steel); }
.catintro .badge{ margin:0; background:var(--red); color:#fff; }
.malay{ display:inline-flex; align-items:center; gap:8px; font-weight:800; }
.malay svg{ border-radius:3px; border:1px solid var(--line); }
.catwrap.withflyer{ display:grid; grid-template-columns:290px minmax(0,1fr); gap:26px; align-items:start; }
.catwrap.withflyer .itemgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.flyerside{ aspect-ratio:9/16; position:sticky; top:140px; box-shadow:var(--shadow-lg); }
@media (max-width:900px){ .catwrap.withflyer{ grid-template-columns:minmax(0,1fr); } .flyerside{ position:static; max-width:300px; margin-inline:auto; } }
@media (max-width:640px){ .catwrap.withflyer .itemgrid{ grid-template-columns:minmax(0,1fr); } }
.badge.live{ background:var(--red); color:#fff; }
/* TikTok */
.tiktok{ position:relative; overflow:hidden; display:flex; align-items:center; gap:24px; flex-wrap:wrap; background:linear-gradient(120deg,#0b0d10,#12101a 55%,#2a0a10); color:#fff; border-radius:26px; padding:30px 34px; box-shadow:var(--shadow-lg); }
.tiktok::before{ content:""; position:absolute; width:320px; height:320px; border-radius:50%; inset-inline-end:-80px; top:-120px; background:radial-gradient(circle,rgba(37,244,238,.28),transparent 65%); }
.tiktok > *{ position:relative; }
.tt-ico{ width:78px; height:78px; border-radius:22px; background:#000; display:grid; place-items:center; color:#fff; box-shadow:-3px -3px 0 #25f4ee,3px 3px 0 #fe2c55; flex:none; }
.tt-ico svg{ width:42px; height:42px; }
.tt-copy{ flex:1; min-width:240px; }
.tt-copy h2{ margin:0 0 6px; font-size:clamp(22px,2.6vw,30px); color:#fff; }
.tt-copy p{ margin:0; color:var(--on-dark-mute); }
.footer .phone.tt svg{ color:#fff; }
/* roadside chat */
.roadgrid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:28px; align-items:start; }
@media (max-width:900px){ .roadgrid{ grid-template-columns:minmax(0,1fr); } }
.chatcard{ border-radius:24px; padding:20px; color:#fff; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:12px; border:1px solid var(--carbon-line); }
.chathead{ display:flex; align-items:center; gap:12px; }
.chathead b{ display:block; font-size:17px; }
.chathead small{ display:flex; align-items:center; gap:6px; color:var(--on-dark-mute); }
.chathead .badge{ margin:0; margin-inline-start:auto; }
.dot{ width:8px; height:8px; border-radius:50%; background:#3ddc84; box-shadow:0 0 8px #3ddc84; display:inline-block; }
.avatar{ width:48px; height:48px; border-radius:14px; background:var(--red); display:grid; place-items:center; box-shadow:0 8px 20px rgba(225,29,46,.4); }
.avatar svg{ width:27px; height:27px; }
.chatcard .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chatcard .fchip{ background:rgba(255,255,255,.07); border-color:var(--carbon-line); color:#fff; font-size:13px; padding:6px 14px; }
.chatcard .fchip:hover{ background:var(--red); border-color:var(--red); }
.chatlog{ height:390px; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:12px; background:rgba(0,0,0,.28); border-radius:16px; border:1px solid var(--carbon-line); scroll-behavior:smooth; }
.msg{ display:flex; }
.msg.user{ justify-content:flex-end; }
.bub{ max-width:90%; padding:10px 14px; border-radius:16px; font-size:15px; line-height:1.75; }
.msg.bot .bub{ background:rgba(255,255,255,.09); border:1px solid var(--carbon-line); }
.msg.user .bub{ background:var(--red); color:#fff; }
.who{ display:block; font-size:11.5px; font-weight:800; color:#ffb3ba; margin-block-end:2px; }
.msg.user .who{ color:#ffe1e4; }
.txt{ white-space:pre-wrap; word-break:break-word; }
.msg.wait .txt{ opacity:.7; animation:waitp 1.2s ease-in-out infinite; }
@keyframes waitp{ 50%{ opacity:.3; } }
.acts{ display:flex; flex-wrap:wrap; gap:8px; margin-block-start:10px; }
.chatform{ display:flex; gap:8px; }
.chatform input{ flex:1; min-width:0; border:1.5px solid var(--carbon-line); background:rgba(255,255,255,.09); color:#fff; border-radius:12px; padding:12px 14px; font:inherit; font-size:15.5px; }
.chatform input::placeholder{ color:#97a3b0; }
.chatform input:focus{ outline:3px solid rgba(225,29,46,.35); border-color:var(--red); }
.chatnote{ font-size:12.5px; color:var(--on-dark-mute); margin:0; }
.safety{ background:var(--red-soft); border:1px solid #f3b9bf; border-radius:18px; padding:20px; }
.safety h3{ color:var(--red-deep); margin-block-end:8px; }
.safety ol{ margin:0; padding-inline-start:22px; display:grid; gap:6px; }
@media (max-width:640px){ .chatlog{ height:330px; } }

/* ===== v5: photo item cards + credits ===== */
.itemcard.hasimg{ padding:0; gap:0; }
.itemcard.hasimg::before{ z-index:3; }
.itemimg{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#10141a; }
.itemimg img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.itemcard.hasimg:hover .itemimg img{ transform:scale(1.07); }
.itemimg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(8,10,13,.45)); pointer-events:none; }
.itemimg .credit{ position:absolute; z-index:2; inset-block-end:8px; inset-inline-end:8px; width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font:700 13px/24px Georgia,serif; text-align:center; text-decoration:none; opacity:0; transition:opacity .2s; }
.itemcard.hasimg:hover .credit,.itemimg .credit:focus-visible{ opacity:1; }
.icbody{ display:flex; flex-direction:column; gap:12px; padding:16px 18px 18px; flex:1; }
.credit-table{ overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:#fff; margin-block-start:14px; }
.credit-table table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.credit-table th,.credit-table td{ padding:8px 12px; border-block-end:1px solid var(--line); vertical-align:middle; }
.credit-table th{ background:var(--soft); text-align:start; }
.credit-table img{ width:96px; height:72px; object-fit:cover; border-radius:8px; }
.credit-table tr:target{ background:var(--red-soft); }
.itemimg.ph{ display:grid; place-items:center; }
.itemimg.ph::after{ display:none; }
.itemimg.ph .phi{ width:86px; height:86px; border-radius:24px; background:rgba(225,29,46,.16); border:1px solid rgba(225,29,46,.5); color:#fff; display:grid; place-items:center; box-shadow:0 0 40px rgba(225,29,46,.35); transition:transform .3s; }
.itemimg.ph .phi svg{ width:46px; height:46px; }
.itemcard.hasimg:hover .itemimg.ph .phi{ transform:scale(1.08) rotate(-4deg); }

.itemimg.prod{ background:#fff; }
.itemimg.prod::after{ display:none; }
.itemimg.prod img{ object-fit:contain; }

/* v6 hero: photographic engine + gears visual */
.engine-wrap{ position:relative; width:min(600px,100%); isolation:isolate; }
.engine-wrap::before{ content:""; position:absolute; inset:6% 0 0; z-index:-1; border-radius:50%; background:radial-gradient(circle at 50% 58%,rgba(225,29,46,.5),transparent 66%); animation:pulse 4.5s ease-in-out infinite; }
.engine-wrap img{ display:block; width:100%; height:auto; -webkit-mask-image:radial-gradient(ellipse closest-side at 52% 52%,#000 66%,transparent 100%); mask-image:radial-gradient(ellipse closest-side at 52% 52%,#000 66%,transparent 100%); animation:engDrift 16s ease-in-out infinite alternate; transform-origin:55% 60%; }
.engine-wrap .spin-gear{ position:absolute; inset-inline-start:-4%; inset-block-end:6%; width:25%; color:rgba(225,29,46,.55); filter:drop-shadow(0 0 14px rgba(225,29,46,.6)); animation:gspin 38s linear infinite; z-index:-1; }
@keyframes engDrift{ from{ transform:scale(1) translateY(0); } to{ transform:scale(1.045) translateY(-6px); } }
@keyframes gspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .engine-wrap img,.engine-wrap .spin-gear,.engine-wrap::before{ animation:none; } }
@media (max-width:900px){ .engine-wrap{ width:min(460px,92%); margin-inline:auto; } }
.lb-art img{ display:block; width:100%; height:auto; -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 52%,#000 80%,transparent 100%); mask-image:radial-gradient(ellipse closest-side at 50% 52%,#000 80%,transparent 100%); }