/* ==========================================================================
   CODINT AUTOMOTIVE · "Sunny garage" design system
   Cheerful, trustworthy: cream paper, navy ink, signal yellow, CODINT blue & red.
   Sticker-style cards (navy outline + hard shadow) and road-marking decoration.
   ========================================================================== */
:root {
  --ink: #111214;
  --ink-2: #3d4147;
  --ink-3: #767b84;
  --paper: #f4f4f1;
  --paper-2: #e4e4e1;
  --white: #ffffff;
  --sky: #ececea;
  --sky-2: #d8d8d4;
  --blue: #c4161c;
  --blue-d: #9b1017;
  --red: #c4161c;
  --red-d: #9b1017;
  --yellow: #ffcf1f;
  --yellow-d: #e0ae00;
  --mint: #1f8a5b;
  --peach: #f0d9cf;
  --line: rgba(17,18,20, .12);
  --radius: 22px;
  --max: 1240px;
  --font-head: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --soft: 0 26px 60px -30px rgba(17,18,20,.38), 0 2px 8px rgba(17,18,20,.05);
  --soft-sm: 0 12px 28px -16px rgba(17,18,20,.35), 0 1px 3px rgba(17,18,20,.06);
  /* per-section colour hooks */
  --fg: var(--ink);
  --fg2: var(--ink-2);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--yellow); color: var(--ink); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }
.wrap { width: min(var(--max), 100% - 32px); margin-inline: auto; position: relative; z-index: 1; }
section { position: relative; }
.section { padding: clamp(72px, 9vw, 120px) 0; color: var(--fg); }
.section--alt { background: var(--sky); }
.section--white { background: var(--white); }
.section--navy { background: var(--ink); --fg: #fff; --fg2: #d3d7de; }
.section--yellow { background: var(--yellow); }

/* ---------- type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--ink); box-shadow: var(--soft);
}
.eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.section--navy .eyebrow { background: var(--yellow); }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.08; margin: 0; letter-spacing: -0.02em; color: inherit; }
h2 { font-size: clamp(32px, 4.6vw, 56px); font-weight: 800; margin-top: 20px; color: var(--fg); }
h3 { font-size: 21px; font-weight: 700; }
.lead { color: var(--fg2); font-size: clamp(16.5px, 1.5vw, 19px); max-width: 720px; margin: 16px 0 0; }
.grad { background: linear-gradient(transparent 60%, var(--yellow) 60%, var(--yellow) 92%, transparent 92%); padding: 0 .12em; margin: 0 -.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.section--navy .grad, .section--yellow .grad { background: none; }
.section--navy .grad { color: var(--yellow); }
.section--yellow .grad { background: linear-gradient(transparent 60%, #fff 60%, #fff 92%, transparent 92%); }
.red { color: var(--red); }
.mono { font-family: var(--font-mono); }
.sec-head { margin-bottom: 52px; }
.sec-head--center { text-align: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-weight: 700; font-size: 15.5px;
  border: 1px solid var(--line); cursor: pointer; transition: transform .15s, box-shadow .15s, background .2s; white-space: nowrap; box-shadow: var(--soft-sm);
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--soft); }
.btn:active { transform: translate(2px, 2px); box-shadow: var(--soft); }
.btn--primary { background: var(--red); color: #fff; }
.btn--ghost { background: var(--white); color: var(--ink); }
.btn--blue { background: var(--blue); color: #fff; }
.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--sm { padding: 10px 18px; font-size: 14px; }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; background: var(--ink); border-bottom: 3px solid var(--yellow); }
.header-inner { display: flex; align-items: center; gap: 18px; height: 74px; }
.brand img { height: 34px; width: auto; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { white-space: nowrap; padding: 8px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #d3d7de; transition: color .2s, background .2s; }
.nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav a.is-active { background: var(--yellow); color: var(--ink); }
.lang { display: inline-flex; border: 2px solid rgba(255,255,255,.35); border-radius: 999px; padding: 2px; }
.lang button { border: 0; background: transparent; color: #d3d7de; font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }
.header-cta .btn { border-color: var(--ink); background: var(--yellow); color: var(--ink); box-shadow: var(--soft); }
.menu-btn { display: none; margin-left: 0; width: 44px; height: 44px; border-radius: 12px; border: 2px solid rgba(255,255,255,.4); background: transparent; cursor: pointer; }
.menu-btn span { display: block; width: 18px; height: 2px; background: #fff; margin: 4px auto; transition: transform .25s, opacity .25s; }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1260px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .header-inner .lang { margin-left: auto; }
  .menu-open .nav { display: flex; flex-direction: column; position: absolute; top: 74px; left: 0; right: 0; background: var(--ink); padding: 12px 16px 24px; border-bottom: 3px solid var(--yellow); }
  .menu-open .nav a { padding: 14px 12px; font-size: 17px; }
}
@media (max-width: 520px) { .header-cta { display: none; } .brand img { height: 28px; } .header-inner { gap: 10px; } }

/* ---------- hero ---------- */
.hero { padding: 132px 0 70px; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: var(--paper); position: relative; }
.hero .deco-sun { position: absolute; width: min(60vw, 760px); aspect-ratio: 1; right: -12vw; top: -8vw; border-radius: 50%; background: var(--yellow); }
.hero .deco-ring { position: absolute; width: min(48vw, 600px); aspect-ratio: 1; right: -4vw; top: 2vw; border-radius: 50%; border: 3px dashed var(--ink); opacity: .22; animation: slowspin 60s linear infinite; }
.hero .deco-road { position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: var(--ink); }
.hero .deco-road::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; background: repeating-linear-gradient(90deg, var(--yellow) 0 56px, transparent 56px 112px); animation: roadmove 2.4s linear infinite; }
.hero .deco-road::after { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; background: repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 0 0/28px 28px; }
@keyframes slowspin { to { transform: rotate(360deg); } }
@keyframes roadmove { to { background-position: 112px 0; } }
.hero-inner { display: grid; grid-template-columns: 1.02fr 1fr; gap: 40px; align-items: center; position: relative; padding-bottom: 80px; }
.hero h1 { font-size: clamp(42px, 6.2vw, 84px); font-weight: 800; letter-spacing: -0.035em; margin-top: 22px; color: var(--ink); line-height: 1.02; }
.hero .lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.trust-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 30px; max-width: 520px; }
.trust-row span { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; }
.trust-row svg { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--mint); color: #fff; flex: none; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font-size: 13.5px; font-weight: 700; }
.pill i { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); border: 1.5px solid var(--ink); }
.pill--petrol i { background: var(--yellow); } .pill--diesel i { background: #969ba4; } .pill--hybrid i { background: var(--blue); }
.sticker {
  position: absolute; z-index: 5; right: 2%; top: -26px; width: 112px; height: 112px; border-radius: 50%; background: var(--red); color: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; text-align: center; font-family: var(--font-head); font-weight: 800; font-size: 14.5px; line-height: 1.1; transform: rotate(12deg); box-shadow: var(--soft-sm); padding: 10px;
}
.sticker small { display: block; font-family: var(--font-body); font-size: 10.5px; font-weight: 600; opacity: .9; }
.hero-visual { position: relative; }
@media (max-width: 980px) {
  .hero { min-height: auto; padding-top: 112px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero .deco-sun { width: 90vw; right: -30vw; top: 20vw; }
  .sticker { right: 4%; top: -34px; }
}
@media (max-width: 560px) { .trust-row { grid-template-columns: 1fr; } .hero .deco-road { height: 90px; } }

/* ---------- 3D stage ---------- */
.s3d-wrap { position: relative; }
.stage3d {
  position: relative; height: clamp(380px, 46vw, 540px); border-radius: 32px; overflow: hidden; cursor: grab; border: 1px solid var(--line); box-shadow: var(--soft);
  background:
    radial-gradient(60% 55% at 50% 52%, #fff 0, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #e6e6e2 0%, #f1f1ee 62%, #fff2c4 100%);
}
.stage3d::before { content: ""; position: absolute; inset: auto 0 0 0; height: 36%; background: linear-gradient(180deg, rgba(255,207,31,0), rgba(255,207,31,.35)); pointer-events: none; }
.stage3d.is-drag { cursor: grabbing; }
.stage3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.s3d-loading, .s3d-nowebgl { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; transition: opacity .5s; text-align: center; padding: 20px; }
.stage3d.is-ready .s3d-loading { opacity: 0; }
.s3d-nowebgl { display: none; }
.stage3d.no-webgl .s3d-nowebgl { display: grid; }
.stage3d.no-webgl .s3d-loading { display: none; }
.s3d-top { position: absolute; left: 18px; right: 18px; top: 14px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--ink); letter-spacing: .1em; pointer-events: none; z-index: 3; }
.hud-live { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-weight: 600; }
.hud-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.s3d-hint { background: var(--yellow); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-weight: 600; }
.s3d-hot { position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; transition: opacity .3s; pointer-events: none; will-change: transform; }
.s3d-hot i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); border: 2.5px solid #fff; box-shadow: 0 0 0 2px var(--ink); }
.s3d-hot span { position: absolute; left: 14px; top: -13px; white-space: nowrap; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 8px; background: var(--ink); color: #fff; }
.s3d-ctrl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--white); }
.seg button, .seg-btn { border: 0; background: transparent; color: var(--ink-2); font-size: 13.5px; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: all .2s; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.seg-btn { border: 1px solid var(--line); background: var(--white); font-family: var(--font-mono); letter-spacing: .06em; }
.seg-btn[aria-pressed="true"] { background: var(--blue); color: #fff; }
.swatches { display: flex; gap: 8px; margin-left: auto; }
.swatches button { width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2.5px solid #fff; outline: 2px solid var(--ink); cursor: pointer; }
.swatches button[aria-pressed="true"] { outline-width: 3.5px; transform: scale(1.12); }
.section--navy .stage3d { box-shadow: var(--soft); }
.section--navy .seg, .section--navy .seg-btn { border-color: #fff; }

.hud-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.metric { border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; background: var(--white); box-shadow: var(--soft); }
.metric small { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.metric strong { font-family: var(--font-head); font-size: 22px; font-weight: 800; }
.metric em { font-style: normal; font-size: 12px; color: var(--mint); font-weight: 700; }
.metric em.warn { color: #c4161c; }
.bar { height: 6px; border-radius: 6px; background: rgba(17,18,20,.1); margin-top: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--mint); border-radius: 6px; }
.bar i.warn { background: var(--yellow-d); }
@media (max-width: 560px) { .hud-metrics { grid-template-columns: 1fr 1fr; } .swatches { margin-left: 0; } }

/* ---------- brand strip ---------- */
.marquee { background: var(--white); padding: 22px 0; overflow: hidden; border-block: 3px solid var(--ink); position: relative; z-index: 2; }
.marquee-track { display: flex; gap: 52px; width: max-content; align-items: center; animation: marquee 70s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.mq { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--ink-3); filter: grayscale(1); opacity: .8; transition: all .25s; }
.mq img { height: 30px; width: auto; max-width: 56px; object-fit: contain; }
.mq:hover { filter: none; opacity: 1; color: var(--ink); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- cards ---------- */
.card {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: var(--white); color: var(--ink); box-shadow: var(--soft);
  transition: transform .18s, box-shadow .18s;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: var(--soft); }
.section--navy .card { box-shadow: var(--soft); } .section--navy .card:hover { box-shadow: var(--soft); }
.card p { color: var(--ink-2); margin: 10px 0 0; font-size: 15.5px; }
.icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; background: var(--sky-2); border: 1px solid var(--line); color: var(--blue-d); }
.icon svg { width: 26px; height: 26px; }
.icon--red { background: var(--peach); color: var(--red); }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 980px) { .value-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .value-grid { grid-template-columns: 1fr; } }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 70px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--yellow); box-shadow: var(--soft); }
.stat { padding: 28px 24px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat strong { font-family: var(--font-head); font-size: clamp(38px, 4.6vw, 58px); font-weight: 800; display: block; line-height: 1; color: var(--ink); }
.stat strong sup { font-size: .5em; color: var(--red); }
.stat span { color: var(--ink); font-size: 14.5px; display: block; margin-top: 10px; font-weight: 600; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

/* ---------- tabs / panels ---------- */
.pt-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.pt-tab { padding: 11px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); cursor: pointer; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; box-shadow: var(--soft); transition: all .15s; }
.pt-tab i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); }
.pt-tab svg { color: var(--blue-d); }
.pt-tab:hover { transform: translate(-1px, -1px); }
.pt-tab[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: var(--soft); }
.pt-tab[aria-selected="true"] svg { color: var(--yellow); }
.section--navy .pt-tab[aria-selected="true"] { background: var(--yellow); color: var(--ink); box-shadow: var(--soft); }
.section--navy .pt-tab[aria-selected="true"] svg { color: var(--ink); }
.pt-panel { display: none; }
.pt-panel.is-active { display: grid; grid-template-columns: 1fr 1.3fr; gap: 28px; animation: pop .45s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pt-intro { border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; background: var(--yellow); box-shadow: var(--soft); align-self: start; color: var(--ink); }
.pt-intro h3 { font-size: 30px; font-weight: 800; }
.pt-intro p { color: #3a3410; }
.spec-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.spec-list li { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px dashed rgba(17,18,20,.35); padding-bottom: 10px; font-size: 14.5px; }
.spec-list li span { color: #3a3410; }
.spec-list li b { font-family: var(--font-mono); font-weight: 500; font-size: 12.5px; text-align: right; color: var(--ink); }
.pt-items { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pt-item { border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: var(--white); color: var(--ink); box-shadow: var(--soft); }
.pt-item h4 { font-size: 17px; font-weight: 700; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pt-item h4 small { font-family: var(--font-mono); font-size: 10px; color: #fff; background: var(--red); border-radius: 6px; padding: 2px 7px; font-weight: 500; letter-spacing: .04em; }
.pt-item p { color: var(--ink-2); font-size: 14.5px; margin: 8px 0 0; }
@media (max-width: 920px) { .pt-panel.is-active { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pt-items { grid-template-columns: 1fr; } }
.disclaimer { color: var(--fg2); font-size: 13.5px; margin-top: 22px; opacity: .85; }

/* ---------- flush planner ---------- */
.flush-layout { display: grid; grid-template-columns: .85fr 1.4fr; gap: 28px; align-items: start; }
.flush-list { display: grid; gap: 10px; }
.flush-item { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; font-size: 15px; font-weight: 600; box-shadow: var(--soft); transition: all .15s; }
.flush-item .icon { margin: 0; width: 38px; height: 38px; border-radius: 12px; flex: none; }
.flush-item .icon svg { width: 20px; height: 20px; }
.flush-item:hover { transform: translate(-1px, -1px); }
.flush-item[aria-selected="true"] { background: var(--yellow); box-shadow: var(--soft); transform: translateX(8px); }
.flush-detail { border: 1px solid var(--line); border-radius: 26px; padding: clamp(24px, 3vw, 38px); background: var(--sky); box-shadow: var(--soft); position: sticky; top: 100px; }
.fd-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.fd-head .icon { margin: 0; background: var(--yellow); }
.fd-head h3 { font-size: 28px; font-weight: 800; }
.fd-rows { margin: 0; display: grid; gap: 14px; }
.fd-rows div { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.fd-rows dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 2px; font-weight: 500; }
.fd-rows dd { margin: 0; color: var(--ink); font-size: 15.5px; }
.perf-legal { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; background: #fff4c2; color: var(--ink); font-size: 14.5px; }
@media (max-width: 920px) { .flush-layout { grid-template-columns: 1fr; } .flush-detail { position: static; } .flush-list { grid-template-columns: 1fr 1fr; } .flush-item[aria-selected="true"] { transform: none; } }
@media (max-width: 520px) { .flush-list { grid-template-columns: 1fr; } }

/* ---------- services ---------- */
.svc-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.chip { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-weight: 700; font-size: 14.5px; cursor: pointer; transition: all .15s; box-shadow: var(--soft); }
.chip.is-active { background: var(--ink); color: #fff; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: var(--white); display: flex; flex-direction: column; gap: 10px; box-shadow: var(--soft); transition: transform .18s, box-shadow .18s; }
.svc:hover { transform: translate(-3px, -3px); box-shadow: var(--soft); }
.svc:nth-child(3n+2) .icon { background: var(--peach); color: var(--red); }
.svc:nth-child(3n) .icon { background: #fff0b0; color: #8a6a00; }
.svc.is-hidden { display: none; }
.svc-head { display: flex; align-items: center; gap: 14px; }
.svc-head .icon { margin: 0; flex: none; }
.svc-head h3 { font-size: 19px; }
.svc p { color: var(--ink-2); font-size: 15px; margin: 0; }
.svc ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.svc li { font-size: 14.5px; padding-left: 24px; position: relative; font-weight: 500; }
.svc li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center/10px no-repeat; }
.svc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
.tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--sky); border: 1.5px solid var(--ink); font-weight: 500; }
@media (max-width: 980px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- 3D systems ---------- */
.perf .sec-head h2 { color: #fff; }
.sys-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.sys-side { display: grid; gap: 20px; }
@media (max-width: 980px) { .sys-grid { grid-template-columns: 1fr; } }

/* ---------- brands ---------- */
.brand-finder { display: grid; grid-template-columns: 1fr 1.7fr; gap: 32px; align-items: start; }
.search { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 18px; padding: 4px 6px 4px 18px; background: var(--white); box-shadow: var(--soft-sm); }
.search input { flex: 1; background: transparent; border: 0; outline: 0; padding: 14px 0; font-size: 16px; min-width: 0; }
.search svg { width: 20px; height: 20px; color: var(--ink-2); flex: none; }
.bf-result { margin-top: 24px; border: 1px solid var(--line); border-radius: 24px; padding: 26px; background: var(--yellow); min-height: 220px; box-shadow: var(--soft); }
.bf-result .bf-logo { height: 54px; margin-bottom: 14px; display: flex; align-items: center; }
.bf-result .bf-logo img { height: 54px; width: auto; max-width: 120px; object-fit: contain; }
.bf-result h3 { font-size: 28px; font-weight: 800; }
.bf-result p { color: #3a3410; font-size: 15px; margin: 8px 0 0; }
.bf-pts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.brand-cloud { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
.brand-chip { border: 1px solid var(--line); border-radius: 18px; padding: 16px 10px 12px; background: var(--white); cursor: pointer; transition: all .15s; display: grid; gap: 8px; justify-items: center; font-weight: 700; font-size: 13.5px; box-shadow: var(--soft); min-height: 104px; align-content: center; }
.brand-chip .logo { height: 34px; display: flex; align-items: center; justify-content: center; }
.brand-chip .logo img { height: 32px; width: auto; max-width: 64px; object-fit: contain; }
.brand-chip .wm { font-family: var(--font-head); font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--ink); }
.brand-chip .dots { display: inline-flex; gap: 4px; }
.brand-chip .dots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink); }
.brand-chip:hover { transform: translate(-2px, -2px); box-shadow: var(--soft); }
.brand-chip.is-active { background: var(--blue); color: #fff; }
.brand-chip.is-active .wm { color: #fff; }
.brand-chip.is-active .logo img { filter: brightness(0) invert(1); }
.dot-P { background: var(--yellow); } .dot-D { background: #969ba4; } .dot-H { background: var(--blue); } .dot-E { background: var(--mint); }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; margin-bottom: 16px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); }
.brand-note { font-size: 12.5px; color: var(--ink-3); margin-top: 16px; }
@media (max-width: 980px) { .brand-finder { grid-template-columns: 1fr; } }

/* ---------- process / inspection ---------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 22px 24px; background: var(--white); box-shadow: var(--soft); }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: -20px; left: 20px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #fff; border: 1px solid var(--line); font-family: var(--font-head); font-weight: 800; font-size: 20px; box-shadow: var(--soft); }
.step p { color: var(--ink-2); font-size: 15px; margin: 8px 0 0; }
@media (max-width: 980px) { .process { grid-template-columns: 1fr 1fr; gap: 34px 22px; } }
@media (max-width: 560px) { .process { grid-template-columns: 1fr; } }
.inspect { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; margin-top: 90px; }
.check-panel { border: 1px solid var(--line); border-radius: 26px; background: var(--white); padding: 18px 24px; box-shadow: var(--soft); }
.check-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 2px dashed var(--line); font-size: 15.5px; font-weight: 600; }
.check-row:last-child { border-bottom: 0; }
.check-row small { display: block; color: var(--ink-3); font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; }
.status { font-family: var(--font-mono); font-size: 11px; padding: 4px 11px; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--line); font-weight: 600; }
.status.ok { background: #cfe9d9; } .status.warn { background: #ffefb3; } .status.bad { background: #f6c4c1; }
@media (max-width: 900px) { .inspect { grid-template-columns: 1fr; } }

/* ---------- app ---------- */
.app-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.app-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.app-feat { display: flex; gap: 14px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--white); cursor: pointer; transition: all .15s; text-align: left; box-shadow: var(--soft); color: var(--ink); }
.app-feat .icon { width: 42px; height: 42px; margin: 0; flex: none; border-radius: 12px; }
.app-feat .icon svg { width: 21px; height: 21px; }
.app-feat b { display: block; font-family: var(--font-head); font-size: 16px; }
.app-feat span { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; display: block; margin-top: 3px; }
.app-feat.is-active { background: var(--yellow); }
.store-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; align-items: center; }
.store { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--ink); color: #fff; opacity: .9; }
.store small { display: block; font-size: 10.5px; opacity: .8; line-height: 1.2; }
.store b { display: block; font-size: 15px; line-height: 1.2; }
@media (max-width: 980px) { .app-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .app-feats { grid-template-columns: 1fr; } }
.phone-stage { display: flex; justify-content: center; position: relative; padding: 20px 0; }
.phone-stage::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: var(--yellow); border: 1px solid var(--line); top: 50%; left: 50%; transform: translate(-50%, -50%); }
.phone { width: 300px; height: 620px; border-radius: 46px; padding: 12px; position: relative; background: var(--ink); box-shadow: var(--soft); border: 1px solid var(--line); transition: transform .3s ease; transform: perspective(1200px) rotateY(-12deg) rotateX(4deg); }
.phone::before { content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 20px; background: #000; z-index: 3; }
.screen { width: 100%; height: 100%; border-radius: 34px; background: #f7f7f4; overflow: hidden; position: relative; color: var(--ink); }
.scr { position: absolute; inset: 0; padding: 58px 16px 16px; opacity: 0; transform: translateX(20px); transition: opacity .45s, transform .45s; font-size: 12.5px; }
.scr.is-active { opacity: 1; transform: none; }
.scr-h { font-family: var(--font-head); font-size: 20px; font-weight: 800; margin-bottom: 2px; }
.scr-sub { color: var(--ink-3); font-size: 11.5px; margin-bottom: 14px; }
.m-card { border-radius: 16px; padding: 12px 14px; background: #fff; border: 1.5px solid var(--ink); margin-bottom: 10px; }
.m-car { background: var(--blue); color: #fff; }
.m-car .m-muted { color: #e3e6eb; }
.m-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.m-row + .m-row { margin-top: 8px; }
.m-muted { color: var(--ink-3); font-size: 11px; }
.m-btn { display: block; text-align: center; padding: 11px; border-radius: 12px; background: var(--red); color: #fff; font-weight: 700; margin-top: 10px; border: 1.5px solid var(--ink); }
.m-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.m-grid div { background: #fff; border: 1.5px solid var(--ink); border-radius: 12px; padding: 8px 2px; font-size: 10px; color: var(--ink-3); }
.m-grid b { display: block; font-size: 16px; color: var(--ink); }
.m-tl { list-style: none; padding: 0; margin: 0; }
.m-tl li { position: relative; padding: 0 0 14px 22px; font-size: 12px; font-weight: 600; }
.m-tl li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); }
.m-tl li::after { content: ""; position: absolute; left: 8px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.m-tl li:last-child::after { display: none; }
.m-tl li.now::before { background: var(--blue); box-shadow: 0 0 0 4px rgba(196,22,28,.25); }
.m-tl li.todo { color: var(--ink-3); } .m-tl li.todo::before { background: #d5d7dc; }
.m-tl small { display: block; color: var(--ink-3); font-size: 10.5px; font-weight: 400; }
.m-photo { height: 90px; border-radius: 12px; background: repeating-linear-gradient(45deg, #fde58a 0 10px, #f9d95c 10px 20px); display: grid; place-items: center; color: var(--ink); font-weight: 600; font-size: 11px; margin: 8px 0; border: 1.5px solid var(--ink); }
.m-nav { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-around; padding: 10px; border-radius: 18px; background: #fff; border: 1.5px solid var(--ink); }
.m-nav i { width: 20px; height: 5px; border-radius: 4px; background: #d5d7dc; }
.m-nav i.on { background: var(--red); }

/* ---------- promos ---------- */
.promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.promo { position: relative; border-radius: var(--radius); padding: 28px; border: 1px solid var(--line); overflow: hidden; background: var(--white); color: var(--ink); display: flex; flex-direction: column; gap: 10px; box-shadow: var(--soft); transition: transform .18s, box-shadow .18s; }
.promo:hover { transform: translate(-3px, -3px) rotate(-.4deg); box-shadow: var(--soft); }
.promo--hero { grid-column: span 2; background: var(--red); color: #fff; }
.promo--hero h3 .red { color: var(--yellow); }
.promo .tagline { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; background: var(--ink); color: #fff; align-self: flex-start; padding: 3px 10px; border-radius: 999px; }
.promo--hero .tagline { background: var(--yellow); color: var(--ink); }
.promo h3 { font-size: 24px; font-weight: 800; position: relative; z-index: 1; }
.promo--hero h3 { font-size: clamp(28px, 3.6vw, 42px); }
.promo p { color: var(--ink-2); font-size: 15px; margin: 0; position: relative; z-index: 1; }
.promo--hero p { color: #fbdcd9; }
.promo .btn { margin-top: auto; align-self: flex-start; position: relative; z-index: 1; }
.promo--hero .btn { background: var(--yellow); color: var(--ink); }
.promo:nth-child(3) { background: #e4e7ec; } .promo:nth-child(4) { background: #ffefb3; } .promo:nth-child(5) { background: #d6eadf; } .promo:nth-child(6) { background: var(--peach); }
.promo-note { text-align: center; color: var(--ink); font-size: 13px; margin-top: 26px; font-weight: 600; }
@media (max-width: 900px) { .promo-grid { grid-template-columns: 1fr 1fr; } .promo--hero { grid-column: span 2; } }
@media (max-width: 620px) { .promo-grid { grid-template-columns: 1fr; } .promo--hero { grid-column: auto; } }

/* ---------- standard / history ---------- */
.std-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1000px) { .std-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .std-grid { grid-template-columns: 1fr; } }
.hist-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.timeline { position: relative; display: grid; gap: 22px; padding-left: 38px; }
.timeline::before { content: ""; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 4px; background: repeating-linear-gradient(180deg, var(--ink) 0 14px, transparent 14px 24px); }
.tl-item { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; background: var(--white); box-shadow: var(--soft-sm); }
.tl-item::before { content: ""; position: absolute; left: -35px; top: 26px; width: 20px; height: 20px; border-radius: 50%; background: var(--yellow); border: 1px solid var(--line); }
.tl-item.is-now { background: var(--yellow); }
.tl-item.is-now::before { background: var(--red); }
.tl-item small { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--red); font-weight: 500; }
.tl-item.is-now small { color: var(--ink); }
.tl-item h3 { margin: 6px 0 8px; font-size: 21px; }
.tl-item p { margin: 0; color: var(--ink-2); font-size: 15px; }
.mv { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 60px; }
@media (max-width: 980px) { .hist-layout { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .mv { grid-template-columns: 1fr; } }

/* ---------- table / faq ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--soft); }
table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 14.5px; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1.5px solid var(--line); }
th { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); background: var(--ink); }
td:first-child { font-weight: 700; }
tbody tr:nth-child(even) { background: #f6f6f3; }
td .na { color: var(--ink-3); }
tr:last-child td { border-bottom: 0; }
.kb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
details.kb { border: 1px solid var(--line); border-radius: 18px; background: var(--white); padding: 0 24px; box-shadow: var(--soft-sm); transition: box-shadow .15s; }
details.kb[open] { background: #fff8d9; box-shadow: var(--soft); }
details.kb summary { list-style: none; cursor: pointer; padding: 20px 34px 20px 0; position: relative; font-family: var(--font-head); font-weight: 700; font-size: 17px; }
details.kb summary::-webkit-details-marker { display: none; }
details.kb summary::after { content: "+"; position: absolute; right: 0; top: 14px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); border: 1px solid var(--line); font-size: 20px; line-height: 1; transition: transform .2s; }
details.kb[open] summary::after { transform: rotate(45deg); }
details.kb summary small { display: block; font-family: var(--font-mono); font-weight: 500; color: var(--red); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.kb-body { color: var(--ink-2); font-size: 15px; padding-bottom: 20px; }
.kb-body p { margin: 0 0 10px; }
.kb-body b { color: var(--ink); }
@media (max-width: 860px) { .kb-grid { grid-template-columns: 1fr; } }

/* ---------- fleet ---------- */
.fleet { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.fleet h2 { color: #fff; }
.fleet ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.fleet li { display: flex; gap: 16px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: var(--soft); }
.fleet li .icon { margin: 0; width: 44px; height: 44px; flex: none; }
.fleet li b { display: block; font-family: var(--font-head); font-size: 17px; }
.fleet li span { color: var(--ink-2); font-size: 14.5px; }
@media (max-width: 900px) { .fleet { grid-template-columns: 1fr; } }

/* ---------- booking ---------- */
.booking { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list .icon { margin: 0; width: 46px; height: 46px; flex: none; background: var(--yellow); color: var(--ink); }
.contact-list b { display: block; font-family: var(--font-head); font-size: 17px; }
.contact-list span, .contact-list a { color: var(--ink-2); font-size: 15px; }
.contact-list a:hover { color: var(--blue); text-decoration: underline; }
.form { border: 1px solid var(--line); border-radius: 26px; padding: 30px; background: var(--white); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; box-shadow: var(--soft); }
.form .btn { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fdfdfb; outline: none; transition: box-shadow .15s; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 4px rgba(196,22,28,.3); border-color: var(--blue); }
.field--full { grid-column: 1 / -1; }
.form-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); margin: 0; }
.form-ok { grid-column: 1 / -1; display: none; padding: 14px; border-radius: 12px; background: #cfe9d9; border: 1px solid var(--line); color: var(--ink); font-size: 14.5px; font-weight: 600; }
.form-ok.show { display: block; }
@media (max-width: 900px) { .booking { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form { grid-template-columns: 1fr; } }

.cta-band { border: 1px solid var(--line); border-radius: 32px; padding: clamp(36px, 6vw, 70px); text-align: center; position: relative; overflow: hidden; background: var(--red); color: #fff; box-shadow: var(--soft); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 22px, transparent 22px 44px); }
.cta-band > * { position: relative; }
.cta-band h2 { max-width: 780px; margin: 0 auto; color: #fff; }
.cta-band .grad { background: none; color: var(--yellow); }
.cta-band .lead { margin-inline: auto; color: #fbdcd9; }
.cta-band .hero-actions { justify-content: center; }
.cta-band .btn--primary { background: var(--yellow); color: var(--ink); }

/* ---------- footer / fab ---------- */
.footer { background: var(--ink); color: #d3d7de; padding: 70px 0 30px; border-top: 6px solid var(--yellow); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid h4 { font-size: 13px; font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); margin-bottom: 16px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.foot-grid a:hover { color: #fff; text-decoration: underline; }
.foot-brand img { height: 36px; width: auto; margin-bottom: 14px; }
.foot-brand p { font-size: 14.5px; max-width: 360px; }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 50px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); font-size: 13px; opacity: .85; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 55; }
.fab .btn { background: var(--yellow); color: var(--ink); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }

/* hero: car sits on the sun */
.hero-visual::before { content: ""; position: absolute; left: 4%; right: 4%; top: 2%; aspect-ratio: 1; max-height: 96%; margin: auto; border-radius: 50%; background: var(--yellow); border: 1px solid var(--line); box-shadow: var(--soft); }
.hero .stage3d { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.hero .stage3d::before { display: none; }
.hero .s3d-top { left: 0; right: 0; }
.hero .deco-sun { display: none; }
.map-card { margin-top: 28px; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--soft-sm); background: #fff; position: relative; }
.map-card iframe { width: 100%; height: 240px; border: 0; display: block; }
.map-card .btn { position: absolute; right: 12px; bottom: 12px; }
.sticker span { display: block; }
.hero .s3d-hint { display: none; }
.hero .s3d-top { justify-content: flex-start; }
.sticker { right: auto; left: -6px; top: 6%; }

/* =====================================================================
   REFINED PASS: editorial / designer finish (no patterns, no hard outlines)
   ===================================================================== */
body { font-size: 17px; background: var(--paper); }
.eyebrow { border: 0; background: none; box-shadow: none; padding: 0; font-size: 12px; letter-spacing: .18em; color: var(--blue); font-weight: 600; }
.eyebrow::before { width: 28px; height: 2px; border-radius: 2px; background: var(--red); }
.section--navy .eyebrow { background: none; color: var(--yellow); }
.section--navy .eyebrow::before { background: var(--yellow); }
.grad { background: none; padding: 0; margin: 0; color: var(--blue); }
.section--navy .grad { color: var(--yellow); }
.cta-band .grad { color: var(--yellow); background: none; }
h2 { letter-spacing: -0.03em; }

.site-header { border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(17,18,20,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.header-cta .btn { box-shadow: none; background: var(--yellow); border-color: var(--yellow); }
.nav a.is-active { background: rgba(255,255,255,.12); color: #fff; }

.btn { border: 1px solid transparent; box-shadow: none; padding: 14px 26px; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(17,18,20,.5); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn--primary { background: var(--red); }
.btn--primary:hover { background: var(--red-d); }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(17,18,20,.28); }
.btn--ghost:hover { background: #fff; }
.section--navy .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.btn--blue { background: var(--blue); }
.fab .btn { background: var(--ink); color: #fff; box-shadow: 0 16px 30px -12px rgba(17,18,20,.6); }

.card, .svc, .step, .tl-item, .pt-item, details.kb, .metric, .check-panel, .table-wrap, .form, .flush-detail, .fd-rows div, .brand-chip, .search, .bf-result, .map-card, .stat, .app-feat, .pt-intro, .fleet li, .perf-legal { border: 1px solid var(--line); }
.card:hover, .svc:hover, .brand-chip:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -30px rgba(17,18,20,.45); }
.card, .svc, .pt-item { border-radius: 24px; }
.pt-intro { background: var(--ink); color: #fff; border-color: transparent; }
.pt-intro p, .pt-intro .spec-list li span { color: #c8ccd3; }
.pt-intro .spec-list li { border-bottom-color: rgba(255,255,255,.18); }
.pt-intro .spec-list li b { color: var(--yellow); }
.section--navy .pt-intro { background: var(--blue); }
.section--navy .pt-intro .spec-list li b { color: #fff; }
.pt-tab, .chip, .seg-btn { box-shadow: none; border: 1px solid rgba(17,18,20,.22); background: transparent; }
.pt-tab:hover, .chip:hover { background: #fff; transform: none; }
.pt-tab[aria-selected="true"], .chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }
.section--navy .pt-tab { border-color: rgba(255,255,255,.3); color: #fff; background: transparent; }
.section--navy .pt-tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: none; }
.section--navy .pt-tab[aria-selected="true"] svg { color: var(--blue); }
.section--navy .pt-tab svg { color: var(--yellow); }
.flush-item { box-shadow: none; border: 1px solid var(--line); }
.flush-item[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateX(6px); box-shadow: none; }
.flush-item[aria-selected="true"] .icon { background: var(--yellow); color: var(--ink); }
.flush-detail { background: #fff; border-radius: 28px; box-shadow: var(--soft); }
.fd-rows div { background: var(--sky); border-color: transparent; }
.fd-head .icon { background: var(--yellow); }
.icon { border: 0; background: var(--sky); border-radius: 16px; }
.icon--red { background: #fbdcd9; }
.svc:nth-child(3n) .icon { background: #fff0c4; color: #9a6a00; }
.stats { background: var(--ink); border: 0; border-radius: 28px; }
.stat { border-right: 1px solid rgba(255,255,255,.14); }
.stat strong { color: #fff; }
.stat strong sup { color: var(--yellow); }
.stat span { color: #c8ccd3; font-weight: 500; }
@media (max-width: 760px) { .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.14); } }
.step::before { border: 0; box-shadow: none; background: var(--blue); }
.status { border: 0; }
.tag { border: 0; background: var(--sky); }
.pill { border: 1px solid rgba(17,18,20,.2); background: rgba(255,255,255,.7); font-weight: 600; }
.pill i { border: 0; }
.timeline::before { background: linear-gradient(var(--blue), var(--red)); width: 2px; }
.tl-item::before { border: 3px solid var(--blue); background: #fff; }
.tl-item.is-now { background: var(--ink); color: #fff; border-color: transparent; }
.tl-item.is-now p { color: #c8ccd3; }
.tl-item.is-now small { color: var(--yellow); }
.tl-item.is-now::before { border-color: var(--yellow); background: var(--ink); }
.promo { border: 0; box-shadow: var(--soft-sm); }
.promo:hover { transform: translateY(-5px); box-shadow: 0 34px 60px -30px rgba(17,18,20,.5); }
.promo .tagline { background: rgba(17,18,20,.08); color: var(--ink); }
.promo--hero .tagline { background: rgba(255,255,255,.18); color: #fff; }
.section--yellow { background: #fff3b5; }
.section--yellow .grad { color: var(--red); }
.promo:nth-child(3) { background: #e1e5ec; } .promo:nth-child(4) { background: #fff; } .promo:nth-child(5) { background: #d6eadf; } .promo:nth-child(6) { background: #fbdcd9; }
.promo--hero .btn { background: #fff; color: var(--red); }
.cta-band { border: 0; background: var(--ink); box-shadow: none; }
.cta-band::before { background: radial-gradient(700px 300px at 85% 0, rgba(229,36,43,.55), transparent 70%), radial-gradient(600px 300px at 0 100%, rgba(31,91,255,.5), transparent 70%); }
.cta-band .lead { color: #c8ccd3; }
.cta-band .btn--primary { background: var(--yellow); color: var(--ink); }
.footer { border-top: 0; }
.form { box-shadow: var(--soft); }
.field input, .field select, .field textarea { border: 1px solid rgba(17,18,20,.25); }
.map-card { border: 1px solid var(--line); box-shadow: var(--soft-sm); }
th { color: #fff; }
.search { box-shadow: none; border: 1px solid rgba(17,18,20,.25); }
.brand-chip { box-shadow: none; }
.brand-chip.is-active { background: var(--ink); }
.bf-result { background: var(--ink); color: #fff; border-color: transparent; }
.bf-result p { color: #c8ccd3; }
.bf-result .bf-logo img { background: #fff; border-radius: 12px; padding: 8px; box-sizing: content-box; }
.bf-result .pill { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.bf-result .btn--primary { background: var(--yellow); color: var(--ink); }
.bf-result h3 { color: #fff; }
.marquee { border-block: 1px solid var(--line); background: #fff; }
.phone-stage::before { background: linear-gradient(160deg, #cfe0ff, #fff1c9); border: 0; }
.phone { box-shadow: 0 40px 70px -30px rgba(17,18,20,.7); border: 0; }
.m-card, .m-grid div, .m-nav { border: 1px solid var(--line); }
.store { border: 0; }

/* ---------- HERO: split canvas, real 3D model on a deep navy stage ---------- */
.hero { background: var(--paper); padding: 120px 0 0; min-height: 0; align-items: stretch; }
.hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 58%; background: radial-gradient(60% 55% at 55% 60%, #7b0d14 0, #111214 70%); border-bottom-left-radius: 260px; z-index: 0; }
.hero .deco-ring, .hero .deco-road, .hero .deco-sun, .sticker { display: none !important; }
.hero-visual::before { display: none; }
.hero-inner { grid-template-columns: 1fr 1.1fr; gap: 20px; padding-bottom: 90px; align-items: center; }
.hero h1 { font-size: clamp(42px, 5.6vw, 78px); }
.hero-visual { margin-right: -2vw; }
.stage3d { height: clamp(380px, 44vw, 560px); border: 0; box-shadow: none; background: transparent; border-radius: 0; overflow: visible; cursor: grab; }
.stage3d::before { display: none; }
.stage3d model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; --poster-color: transparent; background: transparent; outline: none; }
.stage3d model-viewer::part(default-progress-bar) { display: none; }
.hero .s3d-top, .hero .s3d-ctrl, .hero .hud-metrics { color: #fff; }
.hud-live { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff; }
.s3d-hint { background: transparent; border: 0; color: #c8ccd3; }
.seg { border: 1px solid rgba(255,255,255,.28); background: transparent; }
.seg button { color: #cfdcf7; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.seg-btn { border-color: rgba(255,255,255,.28); color: #fff; }
.seg-btn[aria-pressed="true"] { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.swatches button { border: 2px solid rgba(255,255,255,.9); outline: 1px solid rgba(255,255,255,.3); }
.swatches button[aria-pressed="true"] { outline: 2px solid var(--yellow); }
.metric { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); box-shadow: none; backdrop-filter: blur(6px); }
.metric small { color: #9fb2d8; }
.metric strong { color: #fff; }
.metric em { color: #6ee7b7; }
.bar { background: rgba(255,255,255,.15); }
.hot { display: block; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); box-shadow: 0 0 0 5px rgba(229,36,43,.35), 0 8px 18px rgba(0,0,0,.35); cursor: pointer; position: relative; opacity: 0; transition: opacity .3s, transform .2s; pointer-events: none; }
.hot::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--red); }
.hot span { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.xray-on .hot { opacity: 1; pointer-events: auto; }
.perf .stage3d { height: clamp(400px, 46vw, 580px); background: radial-gradient(60% 55% at 50% 60%, #7b0d14 0, rgba(17,18,20,0) 72%); }
.s3d-loading, .s3d-nowebgl { color: #c8ccd3; }
@media (max-width: 980px) {
  .hero::after { width: 100%; top: auto; height: 56%; border-bottom-left-radius: 0; border-top-left-radius: 120px; }
  .hero-inner { grid-template-columns: 1fr; padding-bottom: 60px; }
  .hero-visual { margin-right: 0; }
}
.hero::after { width: 50%; }
.hero h1 { font-size: clamp(40px, 4.7vw, 66px); }
.hero-inner { grid-template-columns: 1fr 1fr; }
@media (max-width: 980px) { .hero::after { width: 100%; } }

/* =====================================================================
   ITALIAN PASS: ivory, nero, rosso & brass. Bodoni editorial type, hairlines, arches.
   ===================================================================== */
:root {
  --ink: #111214; --ink-2: #3d4147; --ink-3: #767b84;
  --paper: #f4f4f1; --paper-2: #e4e4e1; --sky: #ececea; --sky-2: #d8d8d4;
  --red: #c4161c; --red-d: #9b1017; --blue: #c4161c; --blue-d: #9b1017;
  --yellow: #ffcf1f; --yellow-d: #e0ae00; --mint: #1f8a5b;
  --gold: #ffcf1f; --brass: #c4161c;
  --line: rgba(23, 18, 15, .14);
  --font-head: "Bodoni Moda", "Playfair Display", Georgia, serif;
  --font-body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Jost", system-ui, sans-serif;
  --soft: 0 30px 60px -34px rgba(17,18,20,.42), 0 1px 2px rgba(17,18,20,.06);
  --soft-sm: 0 14px 30px -20px rgba(17,18,20,.4), 0 1px 2px rgba(17,18,20,.05);
  --radius: 6px;
}
body { font-family: var(--font-body); font-size: 17.5px; line-height: 1.7; background: var(--paper); color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.012em; line-height: 1.08; }
h2 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 600; }
h3 { font-size: 22px; font-weight: 600; }
.hero h1 { font-weight: 600; font-size: clamp(42px, 5vw, 74px); line-height: 1.02; letter-spacing: -0.02em; }
.grad, .section--navy .grad, .cta-band .grad { font-style: italic; font-weight: 500; background: none; color: var(--red); }
.section--navy .grad, .cta-band .grad { color: var(--gold); }
.section--yellow .grad { color: var(--red); }
.eyebrow, .tagline, .tag, .check-row small, .fd-rows dt, .spec-list li b, .metric small, .m-muted, details.kb summary small, .stat span, th, .status, .tl-item small, .s3d-top, .store small {
  font-family: var(--font-body);
}
.eyebrow { text-transform: uppercase; letter-spacing: .28em; font-size: 11.5px; font-weight: 500; color: var(--blue); }
.eyebrow::before { width: 34px; height: 1px; border-radius: 0; background: currentColor; }
.section--navy .eyebrow { color: var(--gold); }
.lead { font-weight: 300; font-size: clamp(17px, 1.5vw, 20px); }
.sec-head { margin-bottom: 60px; }

/* buttons: rectangular, tracked caps */
.btn { border-radius: 2px; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 600; padding: 17px 32px; border: 1px solid transparent; }
.btn--sm { padding: 12px 20px; font-size: 11px; }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-d); transform: none; box-shadow: 0 16px 28px -16px rgba(196,22,28,.7); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; transform: none; box-shadow: none; }
.section--navy .btn--ghost, .cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.section--navy .btn--ghost:hover { background: #fff; color: var(--ink); }
.btn--blue { background: var(--ink); color: #fff; }
.fab .btn { background: var(--red); color: #fff; box-shadow: 0 18px 30px -14px rgba(17,18,20,.7); }

/* header */
.site-header { background: rgba(17,18,20,.96); border-bottom: 1px solid rgba(255,207,31,.35); }
.nav a { text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; font-weight: 500; padding: 9px 10px; border-radius: 0; color: #d3d7de; position: relative; }
.nav a:hover { background: none; color: #fff; }
.nav a.is-active { background: none; color: var(--gold); }
.nav a.is-active::after, .nav a:hover::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 1px; background: var(--gold); }
.lang { border-color: rgba(255,207,31,.5); border-radius: 2px; }
.lang button { border-radius: 1px; letter-spacing: .12em; }
.lang button[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
.header-cta .btn { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.menu-btn { border-radius: 2px; border-color: rgba(255,207,31,.5); }

/* surfaces */
.section--alt { background: var(--sky); }
.section--navy { background: var(--ink); }
.section--navy::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(900px 400px at 85% 0, rgba(196,22,28,.22), transparent 70%); }
.section--yellow { background: #fff3b5; }
.card, .svc, .step, .tl-item, .pt-item, .pt-intro, .check-panel, .table-wrap, .form, .flush-detail, .fd-rows div, .search, .bf-result, .map-card, .app-feat, .fleet li, .promo, .metric, details.kb, .stats, .cta-band, .perf-legal, .store, .flush-item, .stat { border-radius: 4px; }
.card, .svc, .pt-item, .step, .tl-item, details.kb, .app-feat, .flush-item { background: #fdfdfb; border: 1px solid var(--line); box-shadow: none; }
.card:hover, .svc:hover { transform: translateY(-4px); box-shadow: var(--soft); border-color: rgba(196,22,28,.5); }
.icon { width: 50px; height: 50px; border-radius: 50%; background: transparent; border: 1px solid rgba(196,22,28,.55); color: var(--brass); }
.icon--red { background: transparent; color: var(--red); border-color: rgba(196,22,28,.5); }
.svc:nth-child(3n) .icon, .svc:nth-child(3n+2) .icon { background: transparent; }
.fd-head .icon { background: transparent; }
.flush-item[aria-selected="true"] .icon { background: transparent; border-color: var(--gold); color: var(--gold); }
.pt-tab, .chip, .seg-btn { border-radius: 2px; text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px; font-weight: 500; padding: 11px 18px; }
.pt-tab[aria-selected="true"], .chip.is-active { background: var(--ink); color: #fff; }
.section--navy .pt-tab[aria-selected="true"] { background: var(--gold); color: var(--ink); }
.section--navy .pt-tab[aria-selected="true"] svg { color: var(--ink); }
.pt-intro { background: var(--ink); }
.section--navy .pt-intro { background: #1b1c20; border: 1px solid rgba(255,207,31,.35); }
.pt-intro .spec-list li b, .section--navy .pt-intro .spec-list li b { color: var(--gold); }
.pt-item h4 small { background: var(--red); }
.step::before { background: transparent; border: 1px solid var(--red); color: var(--red); font-family: var(--font-head); font-style: italic; border-radius: 50%; }
.stats { background: var(--ink); }
.stat strong { font-family: var(--font-head); font-weight: 500; }
.stat strong sup { color: var(--gold); }
.tag { background: transparent; border: 1px solid var(--line); border-radius: 2px; color: var(--ink-2); }
.pill { border-radius: 2px; background: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 500; }
.timeline::before { background: linear-gradient(var(--gold), var(--red)); }
.tl-item::before { border-color: var(--gold); }
.tl-item.is-now { background: var(--ink); }
.tl-item.is-now small { color: var(--gold); }
.status { border-radius: 2px; font-weight: 500; letter-spacing: .1em; }
.promo--hero { background: var(--red); }
.promo--hero h3 .red { color: var(--gold); }
.promo--hero .btn { background: #fff; color: var(--red); }
.promo { border-radius: 4px; }
.cta-band { background: var(--ink); }
.cta-band::before { background: radial-gradient(700px 320px at 85% 0, rgba(196,22,28,.65), transparent 70%), radial-gradient(500px 260px at 0 100%, rgba(255,207,31,.3), transparent 70%); }
.cta-band .btn--primary { background: var(--gold); color: var(--ink); }
.footer { background: #100c0a; border-top: 1px solid rgba(255,207,31,.4); }
.footer h4 { font-family: var(--font-body); }
.foot-grid h4 { color: var(--gold); letter-spacing: .24em; }
th { background: var(--ink); color: var(--gold); letter-spacing: .14em; }
tbody tr:nth-child(even) { background: #f6f6f3; }
.kb-body b { color: var(--ink); }
details.kb[open] { background: #fff8d9; box-shadow: none; border-color: rgba(196,22,28,.5); }
details.kb summary::after { background: transparent; border: 1px solid var(--brass); border-radius: 50%; color: var(--brass); }
.field input, .field select, .field textarea { border-radius: 2px; background: #fdfdfb; }
.search { border-radius: 2px; }
.bf-result { background: var(--ink); }
.m-car { background: var(--ink); }
.phone-stage::before { background: linear-gradient(160deg, #e6e6e2, #fff0b0); }
.hot::before { background: var(--red); }
.phone { background: var(--ink); }

/* ---------- hero: arch window ---------- */
.hero::after { display: none; }
.hero { padding-top: 124px; }
.hero-inner { grid-template-columns: 1fr 1fr; gap: 40px; padding-bottom: 80px; }
.hero-visual { margin-right: 0; padding-bottom: 8px; }
.hero-visual::before {
  display: block; content: ""; position: absolute; left: 7%; right: 7%; top: 0; height: calc(100% - 190px); min-height: 380px;
  border-radius: 999px 999px 0 0; z-index: 0;
  background: radial-gradient(75% 55% at 50% 70%, #d01c26 0, #7d0d14 52%, #111214 100%);
  outline: 1px solid rgba(255,207,31,.85); outline-offset: 12px;
}
.hero-visual > * { position: relative; z-index: 1; }
.stage3d { height: clamp(390px, 40vw, 520px); }
.hero .s3d-top { top: 9%; justify-content: center; left: 0; right: 0; }
.hero .s3d-hint { display: none; }
.hud-live { background: transparent; border: 0; color: #e3e6eb; letter-spacing: .26em; font-size: 10.5px; }
.hud-live::before { background: var(--gold); }
.hero .s3d-ctrl { margin-top: 26px; justify-content: space-between; }
.hero .seg-btn { color: var(--ink); border-color: rgba(17,18,20,.4); }
.hero .seg-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.hero .swatches button { border: 2px solid #fdfdfb; outline: 1px solid rgba(17,18,20,.35); }
.hero .swatches button[aria-pressed="true"] { outline: 2px solid var(--red); }
.hero .hud-metrics .metric { background: #fdfdfb; border: 1px solid var(--line); backdrop-filter: none; }
.hero .hud-metrics .metric small { color: var(--ink-3); letter-spacing: .12em; }
.hero .hud-metrics .metric strong { color: var(--ink); font-family: var(--font-head); font-weight: 500; }
.hero .hud-metrics .metric em { color: var(--mint); }
.hero .bar { background: rgba(17,18,20,.12); }
.hero .bar i { background: var(--mint); }
.hero .bar i.warn { background: var(--brass); }
.perf .stage3d { background: radial-gradient(60% 55% at 50% 62%, rgba(196,22,28,.45) 0, rgba(17,18,20,0) 72%); }
.hero .trust-row svg, .trust-row svg { background: var(--mint); border-radius: 50%; }
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual::before { left: 4%; right: 4%; }
}

/* ---------- brand wall ---------- */
.marquee { background: #fdfdfb; border-block: 1px solid var(--line); padding: 26px 0; }
.mq { filter: none; opacity: 1; color: var(--ink); gap: 0; }
.mq img { height: 34px; max-width: 70px; filter: brightness(0) opacity(.72); transition: filter .25s; }
.mq .wm { font-family: var(--font-head); font-size: 20px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--ink); opacity: .75; }
.mq span:not(.wm) { display: none; }
.mq:hover img { filter: none; }
.brand-cloud { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.brand-chip { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: #fdfdfb; min-height: 132px; padding: 20px 10px 14px; box-shadow: none; gap: 10px; }
.brand-chip .logo { height: 46px; }
.brand-chip .logo img { height: 40px; max-width: 80px; filter: brightness(0) opacity(.78); transition: filter .25s, transform .25s; }
.brand-chip:hover { transform: none; background: #fff; box-shadow: inset 0 -2px 0 var(--red); }
.brand-chip:hover .logo img { filter: none; transform: scale(1.06); }
.brand-chip .nm { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--ink-2); }
.brand-chip .wm { font-family: var(--font-head); font-weight: 600; font-size: 18px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.brand-chip.is-active { background: var(--ink); }
.brand-chip.is-active .logo img { filter: brightness(0) invert(1); }
.brand-chip.is-active .nm, .brand-chip.is-active .wm { color: #fff; }
.brand-chip .dots i { border: 0; }
.bf-result .bf-logo img { background: #fff; border-radius: 2px; filter: none; }
.bf-result h3 { font-family: var(--font-head); }

/* =====================================================================
   PHOTOS + LOGO PROMINENCE
   ===================================================================== */
.ph { margin: 0; position: relative; overflow: hidden; border-radius: 4px; background: #1b1c20; isolation: isolate; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.ph:hover img { transform: scale(1.05); }
.ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 38px 18px 16px; color: #fff; background: linear-gradient(180deg, rgba(17,18,20,0), rgba(17,18,20,.86)); display: grid; gap: 2px; z-index: 1; }
.ph figcaption b { font-family: var(--font-head); font-size: 19px; font-weight: 600; letter-spacing: -.005em; }
.ph figcaption span { font-size: 13px; color: #d9dce2; font-weight: 300; }
.ph figcaption small { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 500; }

.tri { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 18px; margin-bottom: 56px; }
.tri .ph { aspect-ratio: 3 / 4; }
.tri .ph:first-child { aspect-ratio: auto; grid-row: span 1; }
.duo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin-bottom: 44px; }
.duo .ph { aspect-ratio: 16 / 10; }
.pt-photo { height: 200px; margin: -32px -32px 24px; border-radius: 4px 4px 0 0; }
.pt-photo img { height: 200px; }
.pt-intro { overflow: hidden; }
@media (max-width: 900px) { .tri { grid-template-columns: 1fr 1fr; } .tri .ph:first-child { grid-column: span 2; aspect-ratio: 16 / 10; } .duo { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .tri { grid-template-columns: 1fr; } .tri .ph:first-child { grid-column: auto; } .pt-photo { margin: -24px -24px 20px; } }

.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 14px; }
.bento .ph { height: 100%; }
.bento .b-big { grid-column: span 2; grid-row: span 2; }
.bento .b-tall { grid-row: span 2; }
.bento .b-wide { grid-column: span 2; }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; } .bento .b-big { grid-column: span 2; } }
@media (max-width: 520px) { .bento { grid-auto-rows: 160px; gap: 10px; } }

.photo-panel { position: relative; isolation: isolate; overflow: hidden; }
.photo-panel > .bgimg { position: absolute; inset: 0; z-index: -2; }
.photo-panel > .bgimg img { width: 100%; height: 100%; object-fit: cover; }
.photo-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(17,18,20,.92) 0%, rgba(17,18,20,.7) 55%, rgba(17,18,20,.35) 100%); }
.cta-band.photo-panel::before { background: linear-gradient(180deg, rgba(17,18,20,.6), rgba(155,16,23,.82)); }
.cta-band::before { z-index: -1; }
.side-photo { aspect-ratio: 4 / 3; margin-top: 28px; }

/* logo: big, sharp, always visible */
.site-header { box-shadow: 0 10px 40px -20px rgba(0,0,0,.7); }
.header-inner { height: 88px; }
.brand { display: flex; align-items: center; }
.brand img { height: 56px; width: auto; filter: drop-shadow(0 0 22px rgba(92,152,255,.28)); image-rendering: auto; }
.menu-open .nav { top: 88px; }
.hero { padding-top: 138px; }
.hero-logo { width: min(430px, 82%); height: auto; margin: 0 0 26px; display: block; }
.foot-brand img { height: 74px; width: auto; margin-bottom: 18px; filter: drop-shadow(0 0 26px rgba(92,152,255,.25)); }
@media (max-width: 760px) { .header-inner { height: 74px; } .brand img { height: 44px; } .menu-open .nav { top: 74px; } .hero { padding-top: 112px; } }
@media (max-width: 520px) { .brand img { height: 38px; } }

#splash { position: fixed; inset: 0; z-index: 200; background: #111214; display: grid; place-items: center; transition: opacity .6s ease, visibility .6s; }
#splash::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 55%, rgba(196,22,28,.42), transparent 70%); }
#splash img { position: relative; width: min(620px, 78vw); height: auto; animation: splashIn 1.1s cubic-bezier(.2,.8,.2,1) both; filter: drop-shadow(0 0 40px rgba(92,152,255,.35)); }
#splash i { position: absolute; left: 50%; bottom: 36%; width: 0; height: 3px; background: var(--gold); transform: translateX(-50%); animation: splashLine 1.1s .2s ease forwards; }
#splash.out { opacity: 0; visibility: hidden; }
@keyframes splashIn { from { opacity: 0; transform: scale(.86); letter-spacing: .2em; } to { opacity: 1; transform: none; } }
@keyframes splashLine { to { width: min(260px, 40vw); } }
.brand { flex: none; }
.brand img { max-width: none; flex: none; }
.header-inner { gap: 22px; }
.nav a { padding: 9px 8px; letter-spacing: .12em; }
@media (max-width: 1360px) { .nav a { font-size: 10.5px; padding: 9px 6px; } }
@media (max-width: 1300px) { .nav { display: none; } .menu-btn { display: block; } .header-inner .lang { margin-left: auto; } .menu-open .nav { display: flex; flex-direction: column; position: absolute; top: 88px; left: 0; right: 0; background: #111214; padding: 12px 16px 24px; border-bottom: 1px solid rgba(255,207,31,.4); } .menu-open .nav a { padding: 14px 12px; font-size: 14px; } }
.tri .ph:first-child { aspect-ratio: 3 / 4; }
@media (max-width: 900px) { .tri .ph:first-child { aspect-ratio: 16 / 10; } }

/* =====================================================================
   SPECIALIST CENTRE: divisions, Malaysia band, Performance Lab, model finder
   ===================================================================== */
.spec-badge { display: inline-flex; align-items: stretch; margin: 0 0 14px; border-radius: 2px; overflow: hidden; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.spec-badge b { background: var(--red); color: #fff; padding: 9px 14px; font-weight: 600; }
.spec-badge span { background: var(--ink); color: #e3e6eb; padding: 9px 14px; font-weight: 500; letter-spacing: .14em; }
.hero-logo { margin-bottom: 18px; }

/* divisions */
.div-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.div-card { background: #fff; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; }
.div-card:hover { transform: translateY(-5px); box-shadow: var(--soft); border-color: rgba(196,22,28,.5); }
.div-card .ph { height: 190px; border-radius: 0; }
.div-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; position: relative; }
.div-body::before { content: ""; position: absolute; left: 22px; top: -2px; width: 46px; height: 3px; background: var(--red); }
.div-body h3 { margin-top: 6px; font-size: 24px; }
.div-body p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.div-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.div-tags span { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--line); padding: 3px 9px; border-radius: 2px; color: var(--ink-2); font-weight: 500; }
.div-link { margin-top: auto; padding-top: 10px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--red); }
.div-link::after { content: " \2192"; }
@media (max-width: 980px) { .div-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .div-grid { grid-template-columns: 1fr; } }

/* malaysia band */
.malaysia { padding: clamp(80px, 10vw, 130px) 0; color: #fff; }
.malaysia .sec-head h2, .malaysia .lead { color: #fff; }
.malaysia .lead { color: #d3d7de; }
.malaysia.photo-panel::before { background: linear-gradient(180deg, rgba(17,18,20,.86), rgba(17,18,20,.7) 50%, rgba(196,22,28,.5)); }
.my-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.my-card { background: rgba(255,255,255,.08); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; padding: 26px 22px; }
.my-card b { font-family: var(--font-head); font-size: 40px; font-weight: 500; font-style: italic; color: var(--gold); line-height: 1; display: block; }
.my-card h3 { margin: 12px 0 8px; font-size: 21px; color: #fff; }
.my-card p { margin: 0; color: #d3d7de; font-size: 15px; font-weight: 300; }
@media (max-width: 980px) { .my-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .my-grid { grid-template-columns: 1fr; } }

/* performance lab */
.perf-lab { background: #0d0e10; color: #fff; overflow: hidden; --fg: #fff; --fg2: #c8ccd3; }
.perf-lab .stripes { position: absolute; inset: 0 0 auto 0; height: 14px; background: linear-gradient(90deg, #fff 0 33.33%, var(--red) 33.33% 66.66%, var(--gold) 66.66%); z-index: 2; }
.perf-lab::before { content: ""; position: absolute; right: -10%; top: 0; width: 55%; height: 100%; background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 3px, transparent 3px 26px); pointer-events: none; }
.perf-lab::after { content: ""; position: absolute; left: -15%; bottom: -30%; width: 70%; height: 70%; background: radial-gradient(closest-side, rgba(196,22,28,.42), transparent); pointer-events: none; }
.perf-lab .eyebrow { color: var(--gold); }
.perf-lab .eyebrow::before { background: var(--gold); }
.perf-lab h2 { color: #fff; }
.perf-lab .grad { color: var(--gold); }
.perf-lab .lead { color: #c8ccd3; }
.style-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 34px; position: relative; z-index: 1; }
.style-card { background: #17181c; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; }
.style-card .ph { height: 300px; border-radius: 0; }
.style-card .ph img { object-position: center 60%; }
.style-card .spec { list-style: none; margin: 0; padding: 18px 22px 8px; }
.style-card .spec li { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); align-items: baseline; position: relative; padding-left: 20px; }
.style-card .spec li::before { content: ""; position: absolute; left: 0; top: 19px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(196,22,28,.28); }
.style-card .spec li:last-child { border-bottom: 0; }
.style-card .spec b { font-family: var(--font-body); font-weight: 600; font-size: 14.5px; letter-spacing: .02em; }
.style-card .spec span { color: #aeb3bb; font-size: 14px; font-weight: 300; }
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; position: relative; z-index: 1; }
.stage { border: 1px solid rgba(255,255,255,.14); border-left: 4px solid var(--red); border-radius: 4px; padding: 24px 24px 22px; background: rgba(255,255,255,.03); position: relative; overflow: hidden; }
.stage:nth-child(2) { border-left-color: #fff; } .stage:nth-child(3) { border-left-color: var(--gold); }
.stage-n { position: absolute; right: 14px; top: -6px; font-family: var(--font-head); font-size: 86px; font-weight: 500; font-style: italic; color: rgba(255,255,255,.07); line-height: 1; }
.stage h3 { font-size: 24px; color: #fff; }
.stage p { margin: 4px 0 12px; color: #aeb3bb; font-size: 14.5px; font-weight: 300; }
.stage ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.stage li { font-size: 14.5px; padding-left: 18px; position: relative; color: #e3e6eb; }
.stage li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 2px; background: var(--gold); }
.perf-strip { display: grid; grid-template-columns: .8fr .8fr 1.4fr; gap: 14px; margin-bottom: 26px; position: relative; z-index: 1; }
.perf-strip .ph { height: 260px; }
.fit-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: relative; z-index: 1; margin-bottom: 18px; }
.fit-chips b { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-right: 8px; font-weight: 600; }
.fit-chips span { border: 1px solid rgba(255,255,255,.25); padding: 6px 12px; font-size: 13px; border-radius: 2px; color: #e3e6eb; }
@media (max-width: 900px) { .style-duo, .stages { grid-template-columns: 1fr; } .perf-strip { grid-template-columns: 1fr 1fr; } .perf-strip .ph:last-child { grid-column: span 2; } .style-card .spec li { grid-template-columns: 1fr; gap: 2px; } }

/* model finder */
.mf-top { display: grid; grid-template-columns: minmax(280px, 520px) 1fr; gap: 18px; align-items: center; margin-bottom: 14px; }
.mf-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.mf-hits { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; align-items: center; }
.mf-hits:empty { display: none; }
.mf-h { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); font-weight: 600; margin-right: 6px; }
.mchip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(17,18,20,.22); background: #fff; padding: 7px 12px; border-radius: 2px; font-size: 13.5px; cursor: pointer; color: var(--ink); transition: all .15s; }
.mchip b { font-weight: 600; }
.mchip:hover { border-color: var(--red); color: var(--red); }
.mchip.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.mchip .fl { display: inline-flex; gap: 3px; }
.mchip .fl i, .brand-chip .dots i, .legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-P { background: var(--gold); } .dot-D { background: #7d8590; } .dot-H { background: #1f8a5b; } .dot-X { background: #8a5cf5; } .dot-E { background: #1e90ff; }
.legend i { width: 11px; height: 11px; border: 0; }
.brand-finder { grid-template-columns: 1fr 1.9fr; }
.bf-result { position: sticky; top: 104px; max-height: calc(100vh - 130px); overflow-y: auto; }
.bf-result .wm.big { font-size: 34px; }
.bf-meta { margin: 2px 0 0; color: #aeb3bb !important; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.bf-notes { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: #d3d7de; }
.bf-notes li { padding-left: 16px; position: relative; }
.bf-notes li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 2px; background: var(--gold); }
.bf-models { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 6px; }
.bf-result .mchip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; padding: 6px 10px; font-size: 13px; }
.bf-result .mchip:hover { border-color: var(--gold); color: var(--gold); }
.bf-result .mchip.is-active { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.bf-hint { font-size: 12.5px; margin: 8px 0 12px !important; color: #aeb3bb !important; }
.brand-cloud { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); }
.brand-chip { min-height: 136px; }
.brand-chip .cnt { font-size: 10.5px; color: var(--ink-3); letter-spacing: .08em; }
.brand-chip.is-active .cnt { color: #c8ccd3; }
@media (max-width: 980px) { .mf-top { grid-template-columns: 1fr; } .brand-finder { grid-template-columns: 1fr; } .bf-result { position: static; max-height: none; } }

/* logo tone: grayscale keeps inner detail (Perodua, Proton chrome); colour returns on hover */
.mq img, .brand-chip .logo img { filter: grayscale(1) contrast(1.3) brightness(.62); }
.mq:hover img, .brand-chip:hover .logo img { filter: none; }
.brand-chip.is-active .logo img { filter: grayscale(1) invert(1) brightness(1.2); }
.bf-result .bf-logo img { filter: none; }
.malaysia .eyebrow { color: var(--gold); }
.malaysia .eyebrow::before { background: var(--gold); }
.malaysia .grad { color: var(--gold); }

/* DEDUPE */
.value-grid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .value-grid.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .value-grid.four { grid-template-columns: 1fr; } }
.promo--hero { grid-column: span 3; }
@media (max-width: 900px) { .promo--hero { grid-column: span 2; } }
@media (max-width: 620px) { .promo--hero { grid-column: auto; } }
.side-photo { aspect-ratio: 16 / 10; }

.contact-list .muted-line{display:block;font-size:13px;opacity:.75;margin-top:2px}.contact-list .muted-line a{text-decoration:underline}