/* Home / Overview */
/* ---------- hero ---------- */
.hm-hero { position: relative; min-height: 730px; display: flex; align-items: center; padding: 0 var(--padx) 32px; perspective: 1600px; }
.hm-car { position: absolute; left: calc(max(48px, 50% - 610px) + 394px); top: 140px; width: 1066px; transform-origin: 60% 55%; z-index: 0; pointer-events: none; }
.hm-car__box { position: relative; width: 100%; aspect-ratio: 1536 / 768; }
.hm-car__box img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; transition: opacity .86s var(--ease); }
.hm-car__dark { opacity: 0; filter: saturate(.82); }
html[data-mc-dark] .hm-car__dark { opacity: 1; }
html[data-mc-dark] .hm-car__light { opacity: 0; }
.hm-lamp, .hm-halo, .hm-pool { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .86s var(--ease); }
.hm-lamp { left: 45.6%; top: 57.2%; width: 7.4%; height: 14.4%; transform: translate(-50%, -50%); z-index: 4; filter: blur(5px); background: radial-gradient(circle at 48% 46%, rgba(255,240,216,.46) 0%, rgba(255,214,158,.26) 42%, rgba(240,182,112,.10) 70%, rgba(214,150,80,0) 100%); }
.hm-halo { left: 45.6%; top: 57.4%; width: 26%; height: 48%; transform: translate(-50%, -50%); z-index: 3; filter: blur(6px); background: radial-gradient(circle at 50% 50%, rgba(255,208,152,.15) 0%, rgba(226,164,92,.07) 38%, rgba(198,138,74,0) 72%); }
.hm-pool { left: 30%; top: 93%; width: 40%; height: 12%; transform: translate(-50%, -50%) rotate(-3deg); z-index: 2; filter: blur(14px); background: radial-gradient(ellipse at 60% 50%, rgba(226,168,98,.22) 0%, rgba(198,138,74,.10) 40%, rgba(160,110,58,0) 78%); }
html[data-mc-dark] .hm-lamp, html[data-mc-dark] .hm-halo, html[data-mc-dark] .hm-pool { opacity: 1; }
html[data-mc-dark] .hm-lamp { transition-delay: .25s; } html[data-mc-dark] .hm-halo { transition-delay: .4s; } html[data-mc-dark] .hm-pool { transition-delay: .55s; }
.hm-hero .mc-vignette { background-position: 0 -96px; }
.hm-mark-clip { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; user-select: none; }
.hm-mark {
position: absolute; left: max(48px, calc(50% - 610px)); top: 50%; transform: translate(-27%, -52%); width: 1320px; max-width: none; height: auto; display: block;
opacity: .34; filter: grayscale(1) sepia(1) saturate(45%) hue-rotate(-10deg) brightness(1.02);
}
html[data-mc-dark] .hm-mark { opacity: .085; filter: grayscale(1) sepia(1) saturate(45%) hue-rotate(-10deg) brightness(.82); }
.hm-hero__in { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.hm-hero__copy { grid-column: 1 / span 5; padding-top: 12px; }
.hm-hero__body { margin: 0 0 40px; max-width: 46ch; font-size: 15.5px; line-height: 1.74; color: var(--ink-body); text-wrap: pretty; }
@media (max-width: 1099px) { .hm-hero__copy { grid-column: 1 / span 7; } }
@media (max-width: 759px) {
.hm-hero { min-height: auto; padding: 40px var(--padx) 150px; }
.hm-hero__in { display: block; }
.hm-car { left: 50%; top: auto; bottom: 0; width: calc(100% - 40px); max-width: 480px; transform: translateX(-50%); transform-origin: 50% 100%; opacity: .96; }
.hm-mark { left: -34%; top: 8px; transform: none; width: 152%; max-width: 152%; }
.hm-hero .mc-vignette { background-position: 0 -72px; }
}
/* ---------- about ---------- */
.ab { position: relative; z-index: 2; padding: 132px var(--padx) 40px; }
@media (max-width: 759px) { .ab { padding: 84px var(--padx) 24px; } }
.ab-box {
--ab-top: -140px; --ab-min: 400px; --ab-mt: 0px;
position: relative; width: 100%; max-width: 1220px; margin: 0 auto; padding: 64px; min-height: 440px; border-radius: 32px; border: 1px solid var(--stroke);
background: linear-gradient(90deg, #FDFCFA 0%, #F2EDE5 48%, #DFD7CA 100%); display: flex; flex-direction: row; gap: 72px; align-items: center;
}
html[data-mc-dark] .ab-box { background: linear-gradient(90deg, #241619 0%, #170C0F 46%, #0C0406 100%); }
.ab-visual { position: relative; flex: 0 0 42%; align-self: stretch; min-height: 400px; }
.ab-photo-wrap { position: absolute; z-index: 2; left: -64px; right: -4%; top: var(--ab-top); bottom: -64px; overflow: hidden; border-radius: 0 0 0 31px; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(90deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%); }
.ab-photo-inner { position: absolute; top: 0; left: 0; width: 100%; }
.ab-photo { display: block; width: 100%; height: auto; filter: brightness(1.01) saturate(.96); }
html[data-mc-dark] .ab-photo { filter: brightness(.82) saturate(.92) contrast(1.04); }
.ab-video { position: absolute; left: 36.6%; top: 1.9%; width: 45.9%; height: 41.9%; border-radius: 50%; overflow: hidden; z-index: 2; isolation: isolate; display: flex; align-items: center; justify-content: center; transform: rotate(-1deg); }
.ab-video iframe { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 244%; height: 100%; border: 0; display: block; }
.ab-play { position: relative; z-index: 2; appearance: none; border: 0; cursor: pointer; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0; background: radial-gradient(60% 60% at 50% 45%, rgba(10,6,4,.20) 0%, rgba(10,6,4,.04) 70%, rgba(10,6,4,0) 100%); transition: background .24s ease; }
.ab-play:hover { background: radial-gradient(70% 70% at 50% 45%, rgba(10,6,4,.34) 0%, rgba(10,6,4,.10) 74%, rgba(10,6,4,0) 100%); }
.ab-play__icon { display: inline-flex; align-items: center; justify-content: center; width: 23%; aspect-ratio: 1; min-width: 48px; border-radius: 50%; padding-left: 4px; color: #F8F6F3; background: rgba(16,4,7,.52); border: 1px solid rgba(248,246,243,.62); box-shadow: 0 10px 24px -12px rgba(0,0,0,.8); backdrop-filter: blur(2px); }
.ab-glass { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 3; background: linear-gradient(196deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.03) 24%, rgba(255,255,255,0) 42%), radial-gradient(70% 50% at 28% 90%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 70%); }
.ab-copy { position: relative; z-index: 2; flex: 1 1 auto; max-width: 560px; }
.ab-eyebrow { margin: 0 0 20px; font-family: var(--ui); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(var(--ink-rgb), .78); }
.ab-h2 { margin: 0 0 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.1vw, 44px); line-height: 1.14; letter-spacing: -.01em; color: var(--ink); }
.ab-body { margin: 0 0 34px; font-size: 15px; line-height: 1.75; text-wrap: pretty; color: rgba(var(--ink-rgb), .78); }
.ab-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.ab-fact { display: flex; gap: 14px; align-items: flex-start; }
.ab-fact__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #7E6233; border: 1px solid rgba(126,98,51,.28); background: rgba(126,98,51,.05); }
html[data-mc-dark] .ab-fact__icon { color: #E2A862; border-color: rgba(226,168,98,.34); background: rgba(226,168,98,.07); }
.ab-fact__text { display: block; font-size: 13.5px; line-height: 1.6; text-wrap: pretty; color: rgba(var(--ink-rgb), .7); }
.ab-fact__text strong { display: block; margin-bottom: 3px; font-weight: 600; font-size: 15px; letter-spacing: -.005em; color: var(--ink); }
@media (max-width: 899px) {
.ab-box { flex-direction: column-reverse; gap: 48px; padding: 48px 40px; min-height: 0; }
.ab-visual { flex: none; width: 100%; min-height: var(--ab-min); margin-top: var(--ab-mt); }
.ab-photo-wrap { left: -40px; right: -40px; bottom: -48px; border-radius: 0 0 31px 31px; -webkit-mask-image: none; mask-image: none; }
.ab-copy { width: 100%; max-width: none; flex: none; }
}
@media (max-width: 759px) {
.ab-box { padding: 40px 24px; border-radius: 22px; }
.ab-photo-wrap { left: -24px; right: -24px; bottom: -40px; border-radius: 0 0 21px 21px; }
.ab-h2 { font-size: 30px; }
}
@media (max-width: 639px) { .ab-facts { grid-template-columns: 1fr; gap: 22px; } }
@media (min-width: 900px) and (max-width: 1239px) { .ab-facts { grid-template-columns: 1fr; } .ab-box { gap: 48px; } }
/* ---------- folder tabs ---------- */
.ft-sec { position: relative; z-index: 2; padding: 104px 48px 48px; }
@media (max-width: 759px) { .ft-sec { padding: 64px 20px 32px; } }
.ft-head { position: relative; z-index: 1; max-width: 680px; margin: 0 auto 56px; text-align: center; }
@media (max-width: 759px) { .ft-head { margin-bottom: 36px; } }
.ft { --lh: clamp(22px, calc((min(100vw, 1196px) - 166px) / 20.9), 34px); --panel: #FFFFFE; position: relative; width: 100%; max-width: 1100px; margin: 0 auto; }
html[data-mc-dark] .ft { --panel: #1A1512; }
.ft-tabs { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 10px; padding: 8px 0 0; scrollbar-width: none; }
.ft-tabs::-webkit-scrollbar { display: none; }
.ft-tab {
position: relative; flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; appearance: none; cursor: pointer; margin: 0; padding: 12px 6px 12px; border-radius: 14px 14px 0 0;
border: 1px solid transparent; border-bottom: none; background: linear-gradient(180deg, rgba(40,30,18,.045) 0%, rgba(40,30,18,.045) 65%, rgba(40,30,18,.06) 100%); z-index: 1; font: inherit;
}
html[data-mc-dark] .ft-tab { background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.035) 65%, rgba(0,0,0,.08) 100%); }
.ft-tab.is-on { border-color: var(--stroke); background: var(--panel); z-index: 3; padding-bottom: 16px; }
html[data-mc-dark] .ft-tab.is-on { background: var(--panel); }
.ft-tab__join { display: none; position: absolute; left: 0; right: 0; bottom: -6px; height: 8px; background: var(--panel); pointer-events: none; }
.ft-tab.is-on .ft-tab__join { display: block; }
.ft-tab__tape { position: relative; display: block; line-height: 0; flex: 0 0 auto; height: var(--lh); width: calc(var(--lh) * var(--r) / 98); transition: transform .22s ease; }
.ft-tab.is-on .ft-tab__tape { transform: translateY(-1px); }
.ft-tape { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; }
.ft-tape--light { opacity: 1; filter: drop-shadow(0 1px 1px rgba(40,28,14,.25)); }
.ft-tape--dark { opacity: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
html[data-mc-dark] .ft-tape--light { opacity: 0; } html[data-mc-dark] .ft-tape--dark { opacity: 1; }
@media (max-width: 759px) {
.ft-tabs { gap: 4px; overflow-x: auto; margin: 0 -20px; padding: 8px 20px 0; }
.ft-tab { flex: 0 0 auto; padding: 10px 8px 12px; }
.ft { --lh: 28px; }
}
.ft-panel {
position: relative; z-index: 1; background: var(--panel); border: 1px solid var(--stroke); border-top: none; margin-top: -1px; border-radius: 0 0 22px 22px; padding: 48px; outline: none; overflow: hidden;
box-shadow: 0 30px 60px -44px rgba(58,44,32,.35);
}
html[data-mc-dark] .ft-panel { box-shadow: 0 30px 60px -40px rgba(0,0,0,.9); }
@media (max-width: 759px) { .ft-panel { border-radius: 0 0 18px 18px; padding: 28px 20px 24px; } }
.ft-draw { position: absolute; z-index: 0; pointer-events: none; user-select: none; left: 0; bottom: 0; width: min(72%, 820px); height: auto; max-height: 100%; object-fit: contain; object-position: left bottom; opacity: .36; filter: grayscale(1) sepia(1) saturate(45%) hue-rotate(-10deg); }
html[data-mc-dark] .ft-draw { opacity: .20; filter: grayscale(1) sepia(1) saturate(45%) hue-rotate(-10deg) brightness(1.3); }
@media (max-width: 759px) { .ft-draw { width: 120%; } }
.ft-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
@media (max-width: 759px) { .ft-grid { grid-template-columns: 1fr; gap: 24px; } .ft-copy { order: 2; } .ft-polaroid-wrap { order: 1; } }
.ft-copy { display: flex; flex-direction: column; align-items: flex-start; align-self: end; min-width: 0; width: 100%; }
.ft-kicker { margin: 0 0 18px; white-space: nowrap; align-self: stretch; font-family: var(--ui); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgb(112, 86, 46); }
html[data-mc-dark] .ft-kicker { color: var(--accent-strong); }
.ft-live { min-width: 0; min-height: 190px; }
.ft-live.is-anim { animation: ftText 1000ms var(--ease) both; }
@keyframes ftText { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ftPhoto { from { opacity: 0; transform: translateX(10px) scale(.985); } to { opacity: 1; transform: none; } }
.ft-h3 { margin: 0 0 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3vw, 44px); line-height: 1.15; letter-spacing: -.002em; color: var(--ink); }
.ft-body { margin: 0 0 28px; max-width: 42ch; font-size: 15.5px; line-height: 1.74; color: var(--ink-body); text-wrap: pretty; }
@media (max-width: 759px) { .ft-h3 { font-size: 30px; } .ft-live { min-height: 0; } }
.ft-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 100%; max-width: 420px; padding: 18px 0; margin: 0 0 28px; border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke); }
.ft-meta > div { display: flex; flex-direction: column; gap: 6px; }
.ft-meta__label { font-family: var(--ui); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--ink-rgb), .68); }
.ft-meta__value { font-size: 14px; color: var(--ink-body); }
.ft-polaroid-wrap { position: relative; width: 88%; justify-self: center; align-self: center; }
.ft-polaroid-wrap.is-anim { animation: ftPhoto 1200ms var(--ease) both; }
@media (max-width: 759px) { .ft-polaroid-wrap { width: 92%; } }
.ft-polaroid { position: relative; z-index: 1; width: 100%; padding: 14px 14px 56px; border-radius: 2px; background: linear-gradient(180deg, #FDFCF8 0%, #F6F3EC 100%); transform: rotate(2deg); box-shadow: 0 24px 40px -24px rgba(58,40,20,.45), 0 2px 4px rgba(58,40,20,.14), inset 0 0 0 1px rgba(120,98,62,.08); }
html[data-mc-dark] .ft-polaroid { filter: brightness(.88); box-shadow: 0 24px 40px -22px rgba(0,0,0,.85), 0 2px 4px rgba(0,0,0,.4); }
@media (max-width: 759px) { .ft-polaroid { padding: 10px 10px 40px; transform: rotate(1.2deg); } }
.ft-img { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 1px; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.ft-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-clip { position: absolute; z-index: 3; left: 34px; top: -22px; width: 18px; height: 62px; border-radius: 9px; border: 2px solid #A2A2AA; transform: rotate(-4deg); box-shadow: 1px 2px 2px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.35); }
.ft-clip span { position: absolute; left: 2px; right: 2px; top: 8px; bottom: -8px; border-radius: 6px; border: 2px solid #B4B4BB; border-bottom: none; }
.ft-prop { position: absolute; z-index: 0; top: 16%; left: -18%; width: 25%; aspect-ratio: 1 / 1; transform: rotate(8deg); pointer-events: none; filter: drop-shadow(0 4px 5px rgba(58,30,20,.24)) drop-shadow(0 1px 1.5px rgba(58,30,20,.26)); }
html[data-mc-dark] .ft-prop { filter: drop-shadow(0 4px 5px rgba(0,0,0,.55)) drop-shadow(0 1px 1.5px rgba(0,0,0,.5)) brightness(.88); }
.ft-prop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.ft-prop[data-s="0"] { top: 20%; left: -33%; width: 100%; aspect-ratio: 3 / 1; transform: rotate(24deg); }
.ft-prop[data-s="1"] { transform: rotate(-7deg); }
.ft-prop[data-s="2"] { transform: rotate(12deg); } .ft-prop[data-s="2"] img { transform: scaleX(-1); }
.ft-prop[data-s="4"] { top: 14%; left: -32%; width: 44%; aspect-ratio: 1005 / 874; transform: rotate(62deg); }
.ft-prop[data-s="5"] { transform: rotate(-10deg); }
.ft-prop[data-s="6"] { top: 4%; left: -29%; width: 68%; aspect-ratio: 1418 / 887; transform: rotate(2deg); }
.ft-prop[data-s="7"] { top: 20%; left: -23%; width: 30%; aspect-ratio: 1430 / 762; transform: rotate(204deg); }
@media (max-width: 759px) { .ft-prop { display: none; } }
.ft-arrows { position: absolute; left: -80px; right: -80px; top: calc(50% + 28px); transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; }
.ft-arrow { pointer-events: auto; appearance: none; background: transparent; cursor: pointer; padding: 0; margin: 0; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--stroke); color: var(--ink-body); display: flex; align-items: center; justify-content: center; transition: color .2s ease, border-color .2s ease; }
.ft-arrow:hover { color: var(--ink); border-color: var(--accent); }
@media (max-width: 1259px) { .ft-arrows { position: static; transform: none; justify-content: center; gap: 12px; margin-top: 24px; } }
/* ---------- cars we know best ---------- */
.ctyp { position: relative; z-index: 2; padding: 104px 48px 128px; }
@media (max-width: 759px) { .ctyp { padding: 64px 20px 72px; } }
.ctyp-in { width: 100%; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); column-gap: 64px; row-gap: 36px; align-items: start; }
.ctyp-copy { grid-column: 1; grid-row: 1; max-width: 540px; }
.ctyp-copy .mc-eyebrow { margin-bottom: 26px; text-indent: .22em; }
.ctyp-cta { display: flex; margin-top: 32px; }
.ctyp-cert { grid-column: 2; grid-row: 1; justify-self: end; align-self: end; width: 100%; max-width: 540px; transform: translateX(-64px); }
.ctyp-row { grid-column: 1 / -1; grid-row: 2; position: relative; width: 100%; }
@media (max-width: 999px) {
.ctyp-in { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
.ctyp-cert { grid-column: 1; grid-row: 2; justify-self: start; align-self: start; transform: none; }
.ctyp-row { grid-row: 3; }
}
.ctyp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 26px; width: 100%; }
/* ha egy típus el van rejtve (mc_hidden_models), a megmaradó csempék kitöltik a sort */
.ctyp-grid[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ctyp-arrow { appearance: none; background: transparent; cursor: pointer; padding: 0; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--stroke); color: var(--ink-body); display: flex; align-items: center; justify-content: center; transition: border-color .24s var(--ease), color .24s var(--ease); position: absolute; top: calc(clamp(86px, 9.6vw, 130px) * .66 - 21px); }
.ctyp-arrow:hover { border-color: #AA8A53; color: #AA8A53; }
.ctyp-arrow--prev { right: calc(100% + 16px); } .ctyp-arrow--next { left: calc(100% + 16px); }
@media (max-width: 1099px) {
.ctyp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: 20px; }
.ctyp-arrow { position: static; align-self: start; margin-top: calc(clamp(86px, 9.6vw, 130px) * .66 - 21px); }
}
@media (max-width: 759px) {
.ctyp-row { column-gap: 10px; }
.ctyp-arrow { width: 36px; height: 36px; margin-top: calc(clamp(86px, 9.6vw, 130px) * .66 - 18px); }
.ctyp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 22px; }
}
.ctile { display: flex; flex-direction: column; gap: 14px; cursor: pointer; padding: 0 0 4px; }
.ctile-img { display: block; position: relative; width: 100%; height: clamp(86px, 9.6vw, 130px); padding-bottom: 14px; border-bottom: 1px solid var(--stroke); transition: border-color .5s var(--ease); }
.ctile.is-on .ctile-img { border-bottom-color: var(--accent); }
.ctile-cover, .ctile-live { display: block; position: absolute; left: 6px; top: 0; width: calc(100% - 12px); height: calc(100% - 14px); background-repeat: no-repeat; background-position: 50% 100%; background-size: contain; transform-origin: 50% 100%; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.ctile-cover--dark, .ctile-live--dark { display: none; }
html[data-mc-dark] .ctile-cover--light, html[data-mc-dark] .ctile-live--light { display: none; }
html[data-mc-dark] .ctile-cover--dark, html[data-mc-dark] .ctile-live--dark { display: block; }
.ctile-live { opacity: 0; }
.ctile.is-on .ctile-live, .ctile:hover .ctile-live, .ctile:focus-visible .ctile-live { opacity: 1; }
.ctile.is-on .ctile-cover, .ctile:hover .ctile-cover, .ctile:focus-visible .ctile-cover { opacity: 0; }
.ctile-meta { display: flex; flex-direction: column; gap: 5px; }
.ctile-name { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.25; letter-spacing: -.002em; color: var(--ink-body); transition: color .28s var(--ease); }
.ctile-sub { font-family: var(--ui); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink-rgb), .68); transition: color .28s var(--ease); }
.ctile.is-on .ctile-name { color: var(--ink); } .ctile.is-on .ctile-sub { color: var(--accent-strong); }
/* certificate */
.cert {
position: relative; overflow: hidden; border-radius: 5px 5px 12px 5px / 5px 5px 9px 5px; transform: rotate(-1.8deg);
background: radial-gradient(9px 7px at 91% 82%, rgba(150,96,44,.16), rgba(150,96,44,0) 100%), radial-gradient(5px 5px at 12% 88%, rgba(150,96,44,.14), rgba(150,96,44,0) 100%), radial-gradient(4px 3px at 64% 9%, rgba(150,96,44,.12), rgba(150,96,44,0) 100%), radial-gradient(130% 120% at 50% 45%, rgba(250,246,234,0) 55%, rgba(176,150,104,.2) 100%), linear-gradient(176deg, #F8F5EA 0%, #F4F0E3 55%, #EEE8D7 100%);
box-shadow: 0 26px 50px -28px rgba(58,44,32,.36), 0 4px 12px -8px rgba(58,44,32,.2), inset 0 0 0 1px rgba(120,98,62,.16), inset 0 0 14px rgba(150,120,72,.14);
}
html[data-mc-dark] .cert { filter: brightness(.86); box-shadow: 0 26px 50px -28px rgba(0,0,0,.8), 0 4px 12px -8px rgba(0,0,0,.55), inset 0 0 0 1px rgba(120,98,62,.16), inset 0 0 14px rgba(150,120,72,.14); }
@media (max-width: 759px) { .cert { transform: rotate(-1deg); } }
.cert-guilloche {
position: absolute; inset: 0; pointer-events: none; opacity: .7; mix-blend-mode: multiply; background-size: 220px 220px, cover, 100% 100%, auto;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
linear-gradient(0deg, transparent, transparent),
linear-gradient(90deg, rgba(92,80,54,0) 47.5%, rgba(92,80,54,.06) 49.7%, rgba(92,80,54,.12) 50%, rgba(255,252,240,.3) 50.25%, rgba(255,252,240,0) 52.5%);
}
.cert-hole { position: absolute; z-index: 3; right: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); box-shadow: inset 1px 1px 1.5px rgba(40,30,16,.35), 0 0 0 1px rgba(150,122,80,.22); }
.cert-hole--t { top: 30%; } .cert-hole--b { bottom: 30%; }
.cert-ear { position: absolute; z-index: 4; right: 0; bottom: 0; width: 56px; height: 44px; pointer-events: none; background: radial-gradient(120% 120% at 100% 100%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 18%, rgba(120,96,58,.07) 34%, rgba(120,96,58,0) 62%); }
.cert-inner { position: relative; z-index: 1; margin: 7px; padding: 18px 20px 16px; }
.cert-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-bottom: 10px; border-bottom: 1.5px solid rgba(30,27,20,.86); }
.cert-kicker { margin: 0 0 3px; font-family: var(--serif); font-size: 16px; font-weight: 700; line-height: 1.1; letter-spacing: .04em; color: #1F1C15; }
.cert-title { margin: 0; font-family: var(--serif-text); font-size: 8.5px; line-height: 1.1; font-style: italic; letter-spacing: .01em; color: #3A3428; }
.cert-serial { margin: 0; flex-shrink: 0; font-family: var(--serif); font-size: 12px; line-height: 1.1; letter-spacing: .04em; color: #1F1C15; }
.cert-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(2, 62px); }
@media (max-width: 759px) { .cert-inner { padding: 16px 16px 14px; } .cert-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 66px); } }
.cert-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 13px 9px; border-bottom: 1px solid rgba(34,30,22,.7); border-left: 1px solid rgba(34,30,22,.7); }
.cert-row:nth-child(2n) { border-bottom: none; }
.cert-row:nth-child(-n+2) { border-left: none; }
@media (max-width: 759px) { .cert-row { padding: 10px 10px 9px; } }
.cert-label { font-family: var(--serif-text); font-size: 10px; letter-spacing: .01em; line-height: 1.1; color: #26221A; }
.cert-value { font-family: 'Special Elite', 'Courier New', Courier, monospace; font-size: 12.5px; letter-spacing: .01em; line-height: 1.32; color: #262A3A; text-wrap: pretty; text-shadow: .3px 0 0 rgba(38,42,58,.45); padding-bottom: 2px; border-bottom: 1px dotted rgba(34,30,22,.55); transform-origin: left bottom; min-height: 1.4em; }
.cert-row:nth-child(1) .cert-value { transform: translate(.5px,.3px) rotate(-.35deg); }
.cert-row:nth-child(2) .cert-value { transform: translate(-.4px,-.2px) rotate(.25deg); }
.cert-row:nth-child(3) .cert-value { transform: translate(.2px,.5px) rotate(.4deg); }
.cert-row:nth-child(4) .cert-value { transform: translate(.6px,-.4px) rotate(-.2deg); }
.cert-row:nth-child(5) .cert-value { transform: translate(-.3px,.2px) rotate(.3deg); }
.cert-row:nth-child(6) .cert-value { transform: translate(.4px,-.1px) rotate(-.4deg); }
/* ---------- social ---------- */
.sm { position: relative; z-index: 2; padding: 128px var(--padx) 120px; --sm-accent: #7E6233; }
html[data-mc-dark] .sm { --sm-accent: #E2A862; }
@media (max-width: 759px) { .sm { padding: 72px var(--padx) 72px; } }
.sm-box {
position: relative; width: 100%; max-width: 1220px; margin: 0 auto; padding: 56px 64px 60px; min-height: 380px; border-radius: 32px; border: 1px solid var(--stroke); background: var(--panel-bg);
display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: center;
}
.sm-copy { position: relative; z-index: 2; max-width: 560px; }
.sm-eyebrow { margin: 0 0 22px; font-family: var(--ui); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(var(--ink-rgb), .78); }
.sm-h2 { margin: 0 0 20px; font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 3.1vw, 46px); line-height: 1.12; letter-spacing: -.01em; white-space: nowrap; color: var(--ink); }
.sm-body { margin: 0 0 30px; max-width: 480px; font-size: 15px; line-height: 1.7; text-wrap: pretty; color: rgba(var(--ink-rgb), .78); }
.sm-row { display: flex; gap: 16px; flex-wrap: wrap; }
.sm-link {
position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 3px; border-radius: 50%; text-decoration: none; isolation: isolate; overflow: hidden; transition: filter .24s ease, transform .2s var(--ease);
background: linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 7%, rgba(255,255,255,.16) 26%, rgba(255,255,255,0) 45%, rgba(0,0,0,0) 92%, rgba(0,0,0,.28) 100%), radial-gradient(140% 220% at 18% -80%, rgba(255,255,255,.85), rgba(255,255,255,0) 45%), conic-gradient(from 92deg at 50% 50%, rgba(255,255,255,.30), rgba(0,0,0,.18) 14%, rgba(255,255,255,.34) 30%, rgba(0,0,0,.16) 48%, rgba(255,255,255,.26) 63%, rgba(0,0,0,.18) 80%, rgba(255,255,255,.30) 100%), linear-gradient(180deg,#fdfdfe 0%,#eaecef 9%,#b6b9bf 25%,#5f6166 43%,#333438 50%,#74777d 55%,#c7cacf 68%,#fafbfc 81%,#c9ccd1 91%,#8c8f95 100%);
box-shadow: 0 14px 26px -14px rgba(58,44,32,.5), 0 3px 8px -4px rgba(58,44,32,.32), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(0,0,0,.42);
}
html[data-mc-dark] .sm-link {
background: linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 7%, rgba(255,255,255,.16) 26%, rgba(255,255,255,0) 45%, rgba(0,0,0,0) 92%, rgba(0,0,0,.28) 100%), radial-gradient(140% 220% at 18% -80%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%), radial-gradient(120% 170% at 50% 150%, rgba(198,138,74,.26), rgba(198,138,74,0) 62%), conic-gradient(from 92deg at 50% 50%, rgba(255,255,255,.26), rgba(0,0,0,.30) 14%, rgba(255,255,255,.30) 30%, rgba(0,0,0,.26) 48%, rgba(255,255,255,.22) 63%, rgba(0,0,0,.28) 80%, rgba(255,255,255,.26) 100%), linear-gradient(180deg,#f0f1f3 0%,#c6c9ce 9%,#84878d 25%,#3c3e42 43%,#1b1c1f 50%,#4e5055 55%,#9ea1a7 68%,#dfe1e4 81%,#93969b 91%,#5a5c61 100%);
box-shadow: 0 14px 26px -14px rgba(0,0,0,.95), 0 3px 9px -4px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(0,0,0,.42);
}
.sm-link:hover { filter: brightness(1.05) contrast(1.03); }
.sm-face { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; color: #15110D; background: radial-gradient(130% 190% at 50% -35%, #fffdf9 0%, #f7f2ea 45%, #eae2d5 100%); box-shadow: inset 0 2px 3px rgba(74,58,40,.18), inset 0 -1px 0 rgba(255,255,255,.85), 0 0 0 1px rgba(255,255,255,.55); }
html[data-mc-dark] .sm-face { color: #F4EEE8; background: radial-gradient(130% 190% at 50% -35%, #291d1c 0%, #180e11 48%, #0d0407 100%), radial-gradient(90% 120% at 50% 130%, rgba(198,138,74,.16), rgba(198,138,74,0) 70%); box-shadow: inset 0 2px 4px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(255,255,255,.10); }
.sm-phone-clip { position: absolute; right: 48px; top: -90px; bottom: 0; width: 320px; overflow: hidden; z-index: 2; }
.sm-phone { position: absolute; left: 6px; top: 0; width: 308px; height: 667px; border-radius: 50px; padding: 3px; background: linear-gradient(90deg, #8A8A90 0%, #D8D8DC 6%, #6E6E75 22%, #3A3A40 52%, #6E6E75 80%, #C9C9CE 95%, #7C7C83 100%); box-shadow: 0 46px 80px -34px rgba(58,44,32,.52), 0 14px 30px -16px rgba(58,44,32,.32), inset 0 0 0 1px rgba(255,255,255,.4); }
html[data-mc-dark] .sm-phone { box-shadow: 0 46px 80px -34px rgba(0,0,0,.9), 0 14px 30px -16px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.14); }
.sm-bezel { position: relative; width: 100%; height: 100%; border-radius: 48px; padding: 9px; background: #07070A; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.sm-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 40px; background: #0C0C0E; }
.sm-screen video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0C0C0E; filter: brightness(1.18) contrast(.96); }
.sm-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,0) 44%); }
.sm-island { position: absolute; left: 50%; top: 13px; transform: translateX(-50%); width: 92px; height: 27px; border-radius: 14px; background: #050507; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.sm-b { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(180deg, #C9C9CE 0%, #6E6E75 40%, #46464C 100%); }
.sm-b--action { left: -2px; top: 108px; height: 30px; } .sm-b--up { left: -2px; top: 156px; height: 54px; } .sm-b--down { left: -2px; top: 222px; height: 54px; } .sm-b--power { right: -2px; top: 182px; height: 80px; }
@media (max-width: 1019px) { .sm-box { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; } .sm-phone-clip { right: 24px; width: 292px; } .sm-phone { width: 280px; height: 607px; } }
@media (max-width: 819px) {
.sm-box { display: block; padding: 56px 44px 0; }
.sm-phone-clip { position: relative; right: auto; top: auto; bottom: auto; width: 268px; height: 330px; margin: 44px auto 0; }
.sm-phone { width: calc(100% - 12px); height: 540px; top: auto; bottom: -210px; border-radius: 40px; }
.sm-bezel { border-radius: 38px; } .sm-screen { border-radius: 30px; }
}
@media (max-width: 759px) { .sm-box { padding: 44px 28px 0; border-radius: 22px; } .sm-h2 { font-size: 30px; } }
/* ---------- workshop banner ---------- */
.ws { position: relative; width: 100%; min-height: clamp(380px, 34vw, 460px); display: flex; align-items: center; overflow: hidden; background: #100407; }
.ws-img { position: absolute; top: 0; right: 0; height: 100%; width: 76%; object-fit: cover; object-position: 58% 52%; display: block; z-index: 0; filter: saturate(1.04) contrast(1.02) brightness(1.16); }
.ws-grade { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; background: linear-gradient(180deg, rgba(96,62,32,.14) 0%, rgba(52,30,16,.04) 46%, rgba(16,8,5,.22) 100%); }
.ws-fade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, #100407 0%, #100407 24%, rgba(16,4,7,.88) 38%, rgba(16,4,7,.44) 56%, rgba(16,4,7,.06) 76%, rgba(16,4,7,0) 100%); }
.ws-vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 150% 112% at 72% 46%, rgba(16,4,7,0) 62%, rgba(16,4,7,.16) 100%); }
.ws-container { position: relative; z-index: 4; width: 100%; max-width: calc(var(--maxw) + 96px); margin: 0 auto; padding: 0 48px; }
.ws-copy { max-width: 34ch; }
.ws-eyebrow { margin: 0 0 20px; font-family: var(--ui); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-indent: .22em; text-transform: uppercase; color: rgb(201,160,99); }
.ws-h2 { margin: 0 0 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 2.9vw, 44px); line-height: 1.14; letter-spacing: -.002em; color: #F4EEE8; }
.ws-body { margin: 0 0 30px; max-width: 36ch; font-size: 15px; line-height: 1.72; color: rgba(244,238,232,.74); text-wrap: pretty; }
.mc-btn--on-dark {
--chrome:
linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 7%, rgba(255,255,255,.16) 26%, rgba(255,255,255,0) 45%, rgba(0,0,0,0) 92%, rgba(0,0,0,.28) 100%),
radial-gradient(140% 220% at 18% -80%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%),
radial-gradient(120% 170% at 50% 150%, rgba(198,138,74,.26), rgba(198,138,74,0) 62%),
conic-gradient(from 92deg at 50% 50%, rgba(255,255,255,.26), rgba(0,0,0,.30) 14%, rgba(255,255,255,.30) 30%, rgba(0,0,0,.26) 48%, rgba(255,255,255,.22) 63%, rgba(0,0,0,.28) 80%, rgba(255,255,255,.26) 100%),
linear-gradient(180deg,#f0f1f3 0%,#c6c9ce 9%,#84878d 25%,#3c3e42 43%,#1b1c1f 50%,#4e5055 55%,#9ea1a7 68%,#dfe1e4 81%,#93969b 91%,#5a5c61 100%);
--face: radial-gradient(130% 190% at 50% -35%, #291d1c 0%, #180e11 48%, #0d0407 100%), radial-gradient(90% 120% at 50% 130%, rgba(198,138,74,.16), rgba(198,138,74,0) 70%);
--face-ink: #F4EEE8; --face-inset: inset 0 2px 4px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.10); --face-ring: rgba(255,255,255,.10); --txt-shadow: 0 1px 0 rgba(0,0,0,.55);
--drop: 0 14px 26px -14px rgba(0,0,0,.95), 0 3px 9px -4px rgba(0,0,0,.7); --rim: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(0,0,0,.42);
}
@media (max-width: 759px) {
.ws { min-height: 680px; align-items: flex-end; }
.ws-img { width: 100%; object-position: 62% 50%; }
.ws-fade { background: linear-gradient(180deg, rgba(16,4,7,0) 0%, rgba(16,4,7,.20) 32%, rgba(16,4,7,.86) 62%, #100407 88%); }
.ws-container { padding: 0 20px 56px; } .ws-copy { max-width: none; }
}
/* ---------- contact ---------- */
.hc { position: relative; z-index: 2; padding: 96px 48px 0; background: var(--bg); }
.hc .mc-vignette { display: block; background-position: 0 0; height: 826px; bottom: auto; }
.hc-in { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr; gap: 72px; align-items: start; }
.hc-left { max-width: 56ch; }
.hc-body { margin: 0 0 48px; max-width: 48ch; font-size: 15.5px; line-height: 1.74; color: var(--ink-body); text-wrap: pretty; }
.hc-right { position: relative; min-height: 520px; }
.hc-key { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: translate(-32%, -8%); }
.hc-key img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(2.2); z-index: 2; max-width: 100%; max-height: 100%; object-fit: contain; }
.hc-key__dark { display: none; }
html[data-mc-dark] .hc-key__dark { display: block; } html[data-mc-dark] .hc-key__light { display: none; }
@media (max-width: 759px) {
.hc { padding: 56px 20px 0; }
.hc-in { grid-template-columns: 1fr; gap: 16px; }
.hc-right { min-height: 220px; }
.hc-key { transform: none; }
.hc-key img { transform: translate(-50%, -50%) scale(1.3); }
}
/* =====================================================================
Javítási kör 1 (Home)
===================================================================== */
/* Világos hero autó: a kép 3:2, a doboz 2:1 – nem nyújtjuk, hanem a sötét autóhoz igazítjuk */
.hm-car__box .hm-car__light { inset: auto; left: 1.9%; top: -14.4%; width: 94.9%; height: auto; }
/* Okmány: félkövér gépelt adatok, pontsor nélkül */
.cert-value { font-weight: 700; -webkit-text-stroke: .25px currentColor; border-bottom: 0; padding-bottom: 0; overflow-wrap: anywhere; hyphens: auto; }
/* Workshop sötét gomb: a fény felülről jön be (mint a sötét módú gomboknál) */
.mc-btn--on-dark::after { background: linear-gradient(180deg, rgba(255,240,222,.34) 0%, rgba(255,240,222,.12) 26%, rgba(255,240,222,0) 58%); transform: none; }
.mc-btn--on-dark:hover::after { opacity: .36; transform: none; }
@media (max-width: 759px) {
/* Hero autó lejjebb, hogy ne érjen a gombhoz */
.hm-hero { padding-bottom: 215px; }
/* Restoration process – 2 soros fülek, minden látszik */
.ft { --lh: clamp(16px, calc((100vw - 120px) / 12.2), 21px); }
.ft-tabs { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: 4px; justify-content: space-between; }
.ft-tab { flex: 1 1 auto; padding: 8px 4px; border: 1px solid var(--stroke); border-radius: 10px; z-index: 1; }
.ft-tab.is-on { background: var(--panel); border-color: var(--accent); padding-bottom: 8px; z-index: 1; box-shadow: 0 0 0 1px var(--accent) inset; }
.ft-tab__join { display: none !important; }
.ft-panel { margin-top: 12px; border-top: 1px solid var(--stroke); border-radius: 18px; }
.ft-polaroid-wrap { width: 88%; }
/* A nyilak oldalt, a kép szélén (nem nyomják össze a tartalmat) */
.ft-arrows { position: absolute; left: 6px; right: 6px; top: var(--ft-arrow-top, 50%); transform: translateY(-50%); margin: 0; display: flex; justify-content: space-between; pointer-events: none; z-index: 5; }
.ft-arrow { width: 38px; height: 38px; pointer-events: auto; background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 6px 16px -8px rgba(0,0,0,.4); }
/* Okmány: két egyenlő oszlop, sor-folyam, a szöveg törhet */
.cert-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-template-rows: none; grid-auto-rows: minmax(64px, auto); }
.cert-row, .cert-row:nth-child(n) { border: 0; border-bottom: 1px solid rgba(34,30,22,.7); border-left: 1px solid rgba(34,30,22,.7); min-width: 0; }
.cert-row:nth-child(odd) { border-left: 0; }
.cert-row:nth-last-child(-n+2) { border-bottom: 0; }
.cert-value { font-size: 12px; }
/* Autók: egyszerre egy látszik, oldalra léptethető (carousel), a szomszédok halványan átsejlenek */
.ctyp-row { display: block; position: relative; width: calc(100% + 40px); margin: 0 -20px; }
.ctyp-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 19vw; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ctyp-grid::-webkit-scrollbar { display: none; }
.ctile { flex: 0 0 62vw; scroll-snap-align: center; opacity: .35; transition: opacity .55s var(--ease); }
.ctile.is-on { opacity: 1; }
.ctile-img { height: clamp(104px, 32vw, 150px); }
.ctyp-row::before, .ctyp-row::after { content: ""; position: absolute; top: 0; bottom: 0; width: 15%; z-index: 2; pointer-events: none; }
.ctyp-row::before { left: 0; background: linear-gradient(90deg, var(--bg) 8%, rgba(0,0,0,0) 100%); }
.ctyp-row::after { right: 0; background: linear-gradient(270deg, var(--bg) 8%, rgba(0,0,0,0) 100%); }
.ctyp-row::before, .ctyp-row::after { background-blend-mode: normal; }
html:not([data-mc-dark]) .ctyp-row::before { background: linear-gradient(90deg, #F8F6F3 8%, rgba(248,246,243,0) 100%); }
html:not([data-mc-dark]) .ctyp-row::after { background: linear-gradient(270deg, #F8F6F3 8%, rgba(248,246,243,0) 100%); }
html[data-mc-dark] .ctyp-row::before { background: linear-gradient(90deg, #100407 8%, rgba(16,4,7,0) 100%); }
html[data-mc-dark] .ctyp-row::after { background: linear-gradient(270deg, #100407 8%, rgba(16,4,7,0) 100%); }
.ctyp-arrow { position: absolute; z-index: 3; width: 38px; height: 38px; margin: 0; top: calc(clamp(104px, 32vw, 150px) * .5 - 19px); background: var(--bg); }
.ctyp-arrow--prev { left: 12px; right: auto; }
.ctyp-arrow--next { right: 12px; left: auto; }
}
/* =====================================================================
Javítási kör 2 (Home, mobil)
===================================================================== */
@media (max-width: 759px) {
/* Restoration process: mint desktopon (kiemelt, a panelhez érő fül), de csak az aktuális és a szomszédai látszanak;
a szélen elhalványul, ha van még fül. Az aktív fül középre görög. */
.ft { --lh: 29px; }
.ft-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin: 0 0 -6px; padding: 8px 0 6px; gap: 6px; justify-content: flex-start;
scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ml, 0px), #000 calc(100% - var(--mr, 0px)), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 var(--ml, 0px), #000 calc(100% - var(--mr, 0px)), transparent 100%); }
.ft-tabs.has-l { --ml: 44px; } .ft-tabs.has-r { --mr: 44px; }
.ft-tab { flex: 0 0 auto; padding: 13px 12px 13px; border: 1px solid transparent; border-bottom: none; border-radius: 14px 14px 0 0; scroll-snap-align: center; box-shadow: none; z-index: 1; }
.ft-tab.is-on { border-color: var(--stroke); background: var(--panel); padding-bottom: 17px; z-index: 3; box-shadow: none; }
.ft-tab__join { display: none; }
.ft-tab.is-on .ft-tab__join { display: block !important; }
.ft-panel { margin-top: 0; border-top: none; border-radius: 0 0 22px 22px; }
/* Autók: a ponyvás (le nem vett) autók látszanak; a ponyva kis késéssel jön le, ha visszalépünk egy autóra */
.ctile { opacity: .55; }
.ctile:not(.is-on) .ctile-cover { opacity: 1; }
.ctile:not(.is-on) .ctile-live { opacity: 0; }
.ctyp-grid.is-moved .ctile.is-on .ctile-cover,
.ctyp-grid.is-moved .ctile.is-on .ctile-live { transition-delay: .6s; }
/* Kompaktabb okmány, hogy a kártya + a carousel egy képernyőre férjen */
.cert { transform: rotate(-.8deg); }
.cert-inner { margin: 5px; padding: 11px 12px 8px; }
.cert-head { padding-bottom: 7px; }
.cert-kicker { font-size: 14px; margin-bottom: 2px; }
.cert-serial { font-size: 11px; }
.cert-rows { grid-auto-rows: minmax(50px, auto); }
.cert-row { padding: 7px 9px 6px; gap: 3px; }
.cert-label { font-size: 9.5px; }
.cert-value { font-size: 11.5px; line-height: 1.25; }
}
@media (max-width: 759px) {
/* Workshop banner: kevesebb fehér felül, a kép feljebb a szöveghez képest, alul több sötét */
.ws { min-height: 590px; }
.ws-img { height: 64%; width: 100%; object-position: 62% 100%; }
.ws-fade { background: linear-gradient(180deg, rgba(16,4,7,0) 0%, rgba(16,4,7,.12) 22%, rgba(16,4,7,.62) 44%, rgba(16,4,7,.94) 58%, #100407 68%); }
.ws-container { padding: 0 20px 64px; }
}
/* =====================================================================
Tablet álló (760–1023 px)
===================================================================== */
/* A kis anyagminta a designban kicsit külön mozog a nagy képtől */
@keyframes ftSw { from { translate: -14px 6px; } to { translate: 0 0; } }
.ft-polaroid-wrap.is-anim .ft-prop { animation: ftSw 1700ms cubic-bezier(.22, .61, .36, 1) both; }
@media (prefers-reduced-motion: reduce) { .ft-polaroid-wrap.is-anim .ft-prop { animation: none; } }
@media (min-width: 760px) and (max-width: 1023px) {
/* Hero: az autó a gomb alá kerül, mint mobilon */
.hm-hero { min-height: auto; padding: 72px var(--padx) clamp(300px, 46vw, 420px); }
.hm-hero__in { display: block; }
.hm-hero__copy { max-width: 560px; }
.hm-car { left: 50%; top: auto; bottom: 0; width: min(calc(100% - 48px), 720px); max-width: none; transform: translateX(-50%); transform-origin: 50% 100%; opacity: .96; }
.hm-mark { left: -20%; top: 8px; transform: none; width: 120%; max-width: 120%; }
.hm-hero .mc-vignette { background-position: 0 -72px; }
/* Welcome: kisebb tükör, balra igazítva */
.ab-visual { width: 100%; max-width: 360px; margin-right: auto; }
.ab-copy { max-width: 560px; }
/* Restoration process: fülek mint mobilon (görgethető, szélén halvány), mindig kis térközzel */
.ft { --lh: 25px; }
.ft-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin: 0 0 -6px; padding: 8px 0 6px; gap: 8px; justify-content: flex-start;
scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ml, 0px), #000 calc(100% - var(--mr, 0px)), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 var(--ml, 0px), #000 calc(100% - var(--mr, 0px)), transparent 100%); }
.ft-tabs.has-l { --ml: 56px; } .ft-tabs.has-r { --mr: 56px; }
.ft-tab { flex: 0 0 auto; padding: 14px 18px 14px; scroll-snap-align: center; }
.ft-tab.is-on { padding-bottom: 18px; }
.ft-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
.ft-prop { display: block; }
/* Cars: két autó egyszerre, nyilakkal görgethető; a kiválasztás kattintásra */
.ctyp-in { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
.ctyp-cert { grid-column: 1; grid-row: 2; justify-self: center; align-self: start; transform: none; max-width: 520px; }
.ctyp-row { grid-row: 3; }
.ctyp-grid { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ctyp-grid::-webkit-scrollbar { display: none; }
.ctile { flex: 0 0 calc((100% - 28px) / 2); scroll-snap-align: start; }
.ctyp-arrow:disabled { opacity: .3; cursor: default; }
.ctile-img { height: clamp(110px, 16vw, 150px); }
.ctyp-arrow { margin-top: calc(clamp(110px, 16vw, 150px) * .5 - 21px); }
/* Get in touch → footer: kisebb hézag */
.hc-right { min-height: 390px; }
.hc-key { transform: translate(-9%, -6%); }
.hc-key img { transform: translate(-50%, -50%) scale(1.85); }
}
/* =====================================================================
Tablet fekvő / kis laptop (1024–1279 px)
===================================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
/* Hero autó: kisebb, oldalt marad */
.hm-car { width: 61vw; left: calc(max(48px, 50% - 610px) + 36vw); top: calc(130px + 8vw); }
/* Cars: a nyilak a sorban (nem kilógva a képernyőből) */
.ctyp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: 20px; }
.ctyp-arrow { position: static; align-self: start; margin-top: calc(clamp(86px, 9.6vw, 130px) * .66 - 21px); }
/* Get in touch → footer: kisebb hézag */
.hc-right { min-height: 424px; }
}
/* A ponyvás és a ponyva nélküli kép (azonos vászon) soha nem méretezhető egymáshoz képest: tökéletesen fedik egymást */
.ctile-cover, .ctile-live { transform: none !important; }
/* =====================================================================
Hero autó v2 – 5 képkocka (assets/hero-seq/merci-1..5.webp, azonos 1829×1023 vászon):
1 világos · 2 elsötétült (lámpa nélkül) · 3–4 a lámpa gyúlása · 5 végleges sötét (égő lámpa + fénykör).
A váltást a js/home.js egy