/* Direction E ("the night showroom") shared chrome for the inner pages: e-car.html, e-catalog.html, e-legal.html.
   Tokens and components mirror e-showroom.html (which keeps its own inline copy and does not load this file). */
:root {
  --bg: #0b0a09; --surface: #141210; --surface-2: #1c1916; --fg: #f3f2ee; --muted: #9b9a95; --soft: #d8d1c7; --line: #2a2521; --line-2: #40372f;
  --accent: #f57b20; --accent-text: #ffa45c; --glow: 255,170,110; --radius: 6px;
  --display: "Heebo", system-ui, sans-serif; --body: "Assistant", system-ui, sans-serif;
  color-scheme: dark;
}
html { background: var(--bg); }
body { background: var(--bg); color: var(--fg); font-family: var(--body); font-weight: 300; font-size: 17px; line-height: 1.6; padding-bottom: 110px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 0; }
h2 { font-size: clamp(30px, 4vw, 52px); }
p { margin: 0; }
b, strong { font-weight: 600; }
.muted { color: var(--muted); }
.btn { border-radius: 4px; }
.btn-accent { color: #141210; transition: transform .15s, box-shadow .4s, background .2s; }
.btn-accent:hover { box-shadow: 0 10px 40px -8px rgba(var(--glow), .55); }
.btn-ghost { border-color: rgba(243,242,238,.3); }
.btn-ghost:hover { border-color: var(--fg); }
.pdemo { border-color: var(--line-2); }

/* film grain on the full tier only */
[data-fx="2"] body::before { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* anchors clear the floating pill, visible focus, skip link */
[id] { scroll-margin-top: 84px; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.skip { position: fixed; top: 10px; inset-inline-start: 10px; z-index: 100; background: var(--accent); color: #141210; padding: 10px 16px; border-radius: 999px; font-weight: 700; transform: translateY(-160%); transition: transform .2s; }
.skip:focus { transform: none; }


/* page head: a quieter version of the stage light, for catalog and legal */
.phead { position: relative; overflow: hidden; isolation: isolate; padding: 120px 0 36px; }
.phead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 90% at 50% -10%, rgba(var(--glow), .18), transparent 62%), linear-gradient(#0b0a09, #110f0d 70%, #0b0a09); }
.phead .eyebrow, .eyebrow { font-size: 12px; letter-spacing: .16em; color: var(--accent-text); font-weight: 600; }
.phead h1 { font-size: clamp(38px, 6vw, 84px); margin-top: 8px; }
.phead p { color: var(--muted); font-size: 18px; margin-top: 10px; max-width: 62ch; }
.crumbs { font-size: 13.5px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--soft); } .crumbs a:hover { color: var(--accent-text); }

/* category pills */
.pills { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: 14px; cursor: pointer; background: transparent; color: var(--fg); }
.pill.on, .pill:hover { border-color: var(--accent); color: var(--accent-text); }
.pill small { color: var(--muted); font-weight: 400; margin-inline-start: 6px; font-size: 13px; }

/* stage cards: the car cut out of the lot, standing on a lit plate */
.sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.scard { position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .4s; }
.scard:hover { transform: translateY(-4px); border-color: var(--line-2); }
.scard .plate { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: end center; padding: 28px 22px 14px; overflow: hidden; background: radial-gradient(70% 60% at 50% 0%, rgba(var(--glow), .14), transparent 70%); }
.scard .plate::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 36%; background: linear-gradient(to top, rgba(255,255,255,.04), transparent); }
.scard .plate .cw { position: relative; width: 86%; transition: transform .6s cubic-bezier(.16,1,.3,1); z-index: 1; }
.scard:hover .plate .cw { transform: translateY(-6px) scale(1.03); }
.scard .plate img.cutimg { width: 100%; height: auto; display: block; filter: drop-shadow(0 22px 26px rgba(0,0,0,.6)); }
.scard .plate img.cutimg.nocut { border-radius: 8px; mask-image: radial-gradient(90% 90% at 50% 50%, #000 60%, transparent 100%); -webkit-mask-image: radial-gradient(90% 90% at 50% 50%, #000 60%, transparent 100%); }
.scard .plate .refl { position: absolute; inset-inline: 0; top: 100%; width: 100%; transform: scaleY(-1); opacity: .22; pointer-events: none; mask-image: linear-gradient(to top, rgba(0,0,0,.5), transparent 50%); -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.5), transparent 50%); }
.scard .plate .badge { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(11,10,9,.7); border: 1px solid var(--line); color: var(--accent-text); }
.scard .body { padding: 16px 18px 18px; display: grid; gap: 8px; align-content: start; }
.scard .mk { font-size: 12px; letter-spacing: .14em; color: var(--muted); }
.scard h3 { font-size: 22px; font-weight: 700; overflow-wrap: anywhere; }
.scard h3 span { font-weight: 300; color: var(--soft); }
.scard .meta { font-size: 13.5px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.scard .pr { font-family: var(--display); font-weight: 300; font-size: 30px; letter-spacing: -.02em; line-height: 1; margin-top: 4px; display: flex; align-items: baseline; gap: 8px; }
.scard .pr small { font-family: var(--body); font-size: 11px; color: var(--muted); border: 1px dashed var(--line-2); padding: 1px 6px; border-radius: 999px; letter-spacing: 0; }
.scard .mo { font-size: 13.5px; color: var(--soft); }
.scard .acts { display: flex; gap: 8px; margin-top: 8px; }
.scard .acts .btn { flex: 1; min-height: 42px; font-size: 14px; padding: 0 10px; }
/* the whole card opens the car; the WhatsApp button sits above that layer */
.scard .go::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.scard .go:active { transform: none; }
.scard .acts .wa2 { position: relative; z-index: 4; }
@media (max-width: 1100px) { .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sgrid { grid-template-columns: minmax(0, 1fr); } }

/* panels and forms */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 26px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.panel h2 { font-size: clamp(24px, 2.4vw, 32px); }
.field input, .field select, .field textarea { border-radius: 4px; background: var(--surface); }
.note { font-size: 13.5px; color: var(--muted); }
.status { font-size: 14.5px; color: var(--accent-text); min-height: 1.2em; }
section.blk { padding: 72px 0 0; }
.sec-head { display: grid; gap: 10px; margin-bottom: 26px; max-width: 760px; }
.sec-head p { font-size: 17px; color: var(--muted); }

/* footer */
footer { margin-top: 96px; padding: 40px 0 60px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); }
footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
footer h2 { margin: 0 0 10px; color: var(--fg); font-family: var(--body); font-weight: 600; font-size: 15px; letter-spacing: 0; line-height: 1.4; }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
footer a:hover { color: var(--accent-text); }
footer .brand { font-family: var(--display); font-weight: 900; font-size: 20px; color: var(--fg); margin-bottom: 10px; }
.fxsel { display: inline-flex; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.fxsel button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.fxsel button.on { background: var(--surface-2); color: var(--fg); }
.fxsel button:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 767px) { footer .wrap { grid-template-columns: 1fr 1fr; } footer .wrap > :first-child { grid-column: 1 / -1; } }

/* bottom action bar */
.abar { position: fixed; inset-inline: 0; bottom: 0; z-index: 44; background: rgba(11,10,9,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.abar .row { display: flex; align-items: center; gap: 10px; padding: 10px 0 6px; }
.abar .what { flex: 1; min-width: 0; font-size: 14px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abar .what b { color: var(--fg); }
.abar .btn { min-height: 46px; border-radius: 999px; }
.abar .wa { width: 46px; height: 46px; flex: none; border-radius: 999px; background: #25d366; color: #0b2b16; display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.abar .legalrow { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); padding-bottom: 6px; flex-wrap: wrap; }
.abar .scale { display: inline-flex; gap: 2px; } .abar .scale i { display: block; width: 12px; height: 8px; border-radius: 2px; }
@media (max-width: 640px) { .abar .what { display: none; } .abar .row .btn { flex: 1; padding: 0 12px; } .abar .legalrow { font-size: 11px; gap: 6px; } }

/* light sweep (FX.sweep adds .sweep) */
.sweep { position: relative; overflow: visible; }
.sweep::after { content: ""; position: absolute; inset: -10% -30%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%); mix-blend-mode: screen; pointer-events: none; animation: sweep var(--sweep-dur, 1400ms) cubic-bezier(.4,0,.2,1) 1 forwards; }
@keyframes sweep { from { transform: translateX(60%); opacity: 0; } 15% { opacity: 1; } to { transform: translateX(-60%); opacity: 0; } }
.scard .plate.sweep { overflow: hidden; }

/* a long address (ofiragencies1@gmail.com) in a narrow footer column pushed 320px phones sideways (14.10.2026) */
footer li, footer a { overflow-wrap: anywhere; }