/* ── Ajánlatkészítés-céloldal · közös réteg a base.css fölé ─────────────── */

/* A látványterv jelzősávja (nem része a tervnek) */
.demo-strip {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: var(--ink); color: #fdfcf9;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 7px 16px; font-size: 0.76rem;
}
.demo-strip b { font-weight: 600; }
.demo-strip span { color: rgba(253, 252, 249, 0.62); }
.demo-strip a { color: #fdfcf9; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
body.focused .demo-strip { display: none; }
.page { padding-top: 34px; min-height: 100vh; display: flex; flex-direction: column; }
body.focused .page { padding-top: 0; }

/* ── Váz ─────────────────────────────────────────────────────────────── */
.shell { max-width: 1120px; width: 100%; margin: 0 auto; padding: 0 28px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0 8px; }
.header-note { white-space: nowrap; }

.kicker {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--blue); margin: 0 0 12px;
}
h1.h {
  font-family: var(--serif); font-size: 3rem; line-height: 1.06;
  font-weight: 600; letter-spacing: -0.022em; margin: 0 0 18px;
}
h1.h .accent { color: var(--blue); }
h1.h .accent em { font-style: italic; }
.lead { font-size: 1.08rem; line-height: 1.62; color: var(--ink-2); margin: 0 0 22px; max-width: 32em; }
.lead b { color: var(--ink); font-weight: 600; }
.cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--blue); color: #fff; border: 0; border-radius: 14px;
  font-family: var(--sans); font-size: 1.02rem; font-weight: 700;
  min-height: 54px; padding: 0 26px; cursor: pointer;
  box-shadow: 0 12px 26px -16px rgba(39, 67, 230, 0.85);
  transition: 0.16s; text-decoration: none;
}
.hero-cta:hover { background: var(--blue-deep); }
.cta-note { font-size: 0.86rem; color: var(--ink-3); line-height: 1.5; }
.cta-note b { color: var(--ink-2); font-weight: 600; }

.section { padding-top: 64px; }
.section h2 {
  font-family: var(--serif); font-size: 1.9rem; font-weight: 600;
  letter-spacing: -0.015em; margin: 0 0 22px; max-width: 24em; line-height: 1.15;
}
.section h2 em { font-style: italic; color: var(--blue); }
.section > p.intro { font-size: 1rem; line-height: 1.6; color: var(--ink-2); max-width: 36em; margin: -8px 0 22px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cards article { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.cards article span { font-family: var(--serif); font-size: 1.5rem; color: var(--line-2); display: block; margin-bottom: 6px; }
.cards article h3 { font-size: 1rem; margin: 0 0 7px; }
.cards article p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-2); }
.cards article p i { font-style: italic; color: var(--ink); }

/* ── Foglaló-kártya (asztali méret) ─────────────────────────────────── */
.book-grid { display: grid; grid-template-columns: 1fr 440px; gap: 40px; align-items: start; }
.book-grid .booking-card { position: sticky; top: 50px; }
.booking-card { margin: 0; padding: 22px 20px 20px; }
.personal { display: flex; gap: 15px; align-items: flex-start; }
.personal .portrait {
  flex: 0 0 auto; width: 84px; height: 104px;
  border-radius: 14px; object-fit: cover; object-position: 50% 30%;
  background: #e8e3da;
}
.personal strong {
  display: block; font-family: var(--serif); font-size: 1.16rem;
  font-weight: 600; line-height: 1.2; letter-spacing: -0.012em; margin-bottom: 7px;
}
.personal p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--ink-2); }
.open-slots { margin-top: 18px; }
.open-slots.gone { display: none; }
.open-hint { text-align: center; font-size: 0.78rem; color: var(--ink-3); margin: 10px 0 0; }
.open-hint.gone { display: none; }
.slots-wrap {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 0.36s cubic-bezier(0.2, 0.75, 0.2, 1), opacity 0.3s ease;
}
.slots-wrap > div { overflow: hidden; }
.slots-wrap.open { grid-template-rows: 1fr; opacity: 1; }
.slots-inner { padding-top: 20px; }
.slots-divider { height: 1px; background: var(--line); margin-bottom: 20px; }
.booking-card.open-default .slots-inner { padding-top: 18px; }
.booking-card.open-default .slots-divider { margin-bottom: 18px; }
.book-text h2 { margin-bottom: 14px; }
.book-text p { font-size: 1rem; line-height: 1.62; color: var(--ink-2); max-width: 30em; margin: 0 0 14px; }
.book-text ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 10px; }
.book-text li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }
.book-text li .tick { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--green-tint); color: var(--green); display: grid; place-items: center; margin-top: 2px; }
.book-text li .tick svg { width: 12px; height: 12px; }
.quote-me {
  border-left: 3px solid var(--blue); padding: 4px 0 4px 16px; margin: 18px 0 0;
  font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.45; color: var(--ink);
}
.quote-me small { display: block; font-family: var(--sans); font-style: normal; font-size: 0.78rem; color: var(--ink-3); margin-top: 6px; }

/* ── Ajánlat-épülés demó ─────────────────────────────────────────────── */
.demo-wrap {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 1px 2px rgba(28, 26, 21, 0.04), 0 26px 50px -34px rgba(28, 26, 21, 0.45);
  overflow: hidden;
}
.demo-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--line); background: #fff; flex-wrap: wrap;
}
.demo-tag {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-3); display: inline-flex; align-items: center; gap: 7px;
}
.demo-tag i { width: 7px; height: 7px; border-radius: 50%; background: #e0b34a; }
.seg { display: inline-flex; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button {
  border: 0; background: none; border-radius: 999px; padding: 7px 13px;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: 0.14s;
}
.seg button.on { background: var(--ink); color: #fff; }
.demo-body { display: grid; grid-template-columns: 1fr 1.28fr; min-height: 430px; }
.demo-in { padding: 18px; background: var(--paper); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.demo-in .who { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.bubble {
  max-width: 92%; border-radius: 16px; padding: 11px 14px; font-size: 0.92rem; line-height: 1.5;
  opacity: 0; transform: translateY(8px); transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.bubble.in { opacity: 1; transform: none; }
.bubble.say { background: #fff; border: 1px solid var(--line-2); font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--ink); display: flex; gap: 10px; align-items: flex-start; }
.bubble.say .mic { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; margin-top: 2px; }
.bubble.say .mic svg { width: 12px; height: 12px; }
.bubble.ask { background: #fff; border: 1px solid var(--line); color: var(--ink); align-self: flex-start; border-bottom-left-radius: 6px; }
.bubble.ans { background: var(--blue); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; }
.typing { display: inline-flex; gap: 4px; align-items: center; height: 10px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.35; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 0.9; } }

.demo-quote { padding: 16px 20px 18px; background: #fff; display: flex; flex-direction: column; }
.qhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.qhead strong { display: block; font-family: var(--serif); font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; }
.qhead small { display: block; font-size: 0.76rem; color: var(--ink-3); margin-top: 2px; }
.qchip { font-size: 0.7rem; font-weight: 700; padding: 5px 9px; border-radius: 999px; background: var(--paper); color: var(--ink-2); white-space: nowrap; border: 1px solid var(--line); }
.qchip.wait { background: #fff6db; color: #8a5a00; border-color: rgba(138, 90, 0, 0.18); }
.qchip.ok { background: var(--green-tint); color: #147a43; border-color: rgba(31, 157, 85, 0.25); }
.qrows { flex: 1 1 auto; }
.qrow {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start;
  padding: 9px 0; border-bottom: 1px dashed var(--line);
  opacity: 0; transform: translateY(6px); transition: opacity 0.26s ease, transform 0.3s ease;
}
.qrow.in { opacity: 1; transform: none; }
.qrow.static { opacity: 1; transform: none; transition: none; }
.qrow .name { font-weight: 600; font-size: 0.92rem; }
.qrow .meta { font-size: 0.78rem; color: var(--ink-3); margin-top: 1px; }
.qrow .amt { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.rule {
  display: inline-flex; gap: 6px; align-items: center; margin-top: 5px;
  font-size: 0.7rem; font-weight: 700; color: var(--blue); background: var(--blue-tint);
  border-radius: 999px; padding: 3px 8px 3px 6px;
}
.rule svg { width: 11px; height: 11px; }
.qtotal { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; }
.qtotal span { font-size: 0.8rem; color: var(--ink-3); }
.qtotal strong { font-family: var(--serif); font-size: 1.36rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.qstatus {
  margin-top: 12px; border-radius: 14px; padding: 11px 13px; font-size: 0.85rem; line-height: 1.5;
  background: #fff6db; color: #7a4f00; border: 1px solid rgba(138, 90, 0, 0.16);
  opacity: 0; transition: opacity 0.3s ease;
}
.qstatus.in { opacity: 1; }
.qstatus.ok { background: var(--green-tint); color: #146a3c; border-color: rgba(31, 157, 85, 0.22); }
.qactions { display: flex; gap: 8px; margin-top: 10px; opacity: 0; transition: opacity 0.3s ease; }
.qactions.in { opacity: 1; }
.qactions button {
  border: 1.5px solid var(--line-2); background: #fff; border-radius: 12px; padding: 9px 13px;
  font-family: var(--sans); font-size: 0.84rem; font-weight: 600; color: var(--ink); cursor: default;
}
.qactions button.go { background: var(--blue); border-color: var(--blue); color: #fff; }
.demo-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 14px; border-top: 1px solid var(--line); font-size: 0.76rem; color: var(--ink-3); background: #fff; flex-wrap: wrap;
}
.demo-foot button {
  border: 0; background: none; color: var(--ink-2); font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
}
.demo-foot button:hover { color: var(--blue); }
.demo-foot button svg { width: 13px; height: 13px; }

.demo-wrap.compact .demo-body { min-height: 360px; }
.demo-wrap.compact .bubble { font-size: 0.86rem; padding: 9px 12px; }
.demo-wrap.compact .qrow { padding: 7px 0; }
.demo-wrap.compact .qrow .name { font-size: 0.86rem; }

/* ── V2: ma / utána ──────────────────────────────────────────────────── */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.col { border-radius: 20px; padding: 22px 22px 20px; border: 1px solid var(--line); background: var(--card); }
.col.after { background: #fff; border-color: rgba(39, 67, 230, 0.35); box-shadow: 0 0 0 4px var(--blue-tint); }
.col h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
.col h3 em { font-style: italic; color: var(--blue); }
.col .sub { margin: 0 0 16px; font-size: 0.86rem; color: var(--ink-3); }
.col ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: s; }
.col li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); counter-increment: s; }
.col li::before {
  content: counter(s); flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-3);
  font-size: 0.74rem; font-weight: 700; display: grid; place-items: center; margin-top: 1px;
}
.col.after li::before { background: var(--blue); border-color: var(--blue); color: #fff; }
.col.after li { color: var(--ink); }
.col li b { color: var(--ink); font-weight: 600; }
.nots { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 40em; }
.nots li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.nots li b { flex: 0 0 auto; font-family: var(--serif); font-weight: 600; font-style: italic; color: var(--blue); font-size: 1.08rem; min-width: 3.2em; }

/* ── Záró sötét panel + lábléc ───────────────────────────────────────── */
.closing {
  margin-top: 72px; border-radius: 26px; padding: 52px 40px; text-align: center; color: #fdfcf9;
  background:
    radial-gradient(700px 300px at 20% 0%, rgba(39, 67, 230, 0.35), transparent 60%),
    radial-gradient(500px 260px at 90% 100%, rgba(224, 179, 74, 0.18), transparent 60%),
    linear-gradient(162deg, #272319, #171510);
}
.closing h2 { font-family: var(--serif); font-size: 2.1rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 auto 12px; max-width: 18em; line-height: 1.12; }
.closing h2 em { font-style: italic; color: #a9b8ff; }
.closing p { margin: 0 auto 24px; max-width: 34em; color: rgba(253, 252, 249, 0.72); font-size: 1rem; line-height: 1.6; }
.closing .hero-cta { box-shadow: 0 0 0 6px rgba(39, 67, 230, 0.22), 0 18px 40px -16px rgba(39, 67, 230, 0.9); }
footer.foot {
  margin-top: auto; padding: 36px 0 40px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--ink-3);
}
footer.foot a { color: var(--ink-2); text-decoration: none; }
footer.foot a:hover { color: var(--blue); }
footer.foot .links { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── FÓKUSZMÓD (az élő foglaló folyamata, változatlan) ───────────────── */
.focusmode {
  position: fixed; inset: 0; z-index: 80; background: var(--paper); overflow-y: auto;
  display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
body.focused { overflow: hidden; }
body.focused .focusmode { opacity: 1; pointer-events: auto; }
.fm-bar { position: sticky; top: 0; z-index: 3; flex: 0 0 auto; background: rgba(247, 244, 238, 0.94); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
.fm-bar-in { max-width: 660px; margin: 0 auto; padding: 14px 20px 0; }
.fm-bar-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.fm-step { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-2); }
.fm-step b { color: var(--blue); }
.fm-back { border: 0; background: none; padding: 0; cursor: pointer; font-family: var(--sans); font-size: 0.84rem; font-weight: 600; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fm-back:hover { color: var(--blue); }
.fm-back svg { width: 14px; height: 14px; }
.fm-rail { height: 3px; border-radius: 999px; background: rgba(28, 26, 21, 0.1); margin: 11px 0 0; overflow: hidden; }
.fm-rail i { display: block; height: 100%; width: 33.33%; background: var(--blue); border-radius: 999px; transition: width 0.32s cubic-bezier(0.2, 0.75, 0.2, 1); }
.fm-slot { display: flex; align-items: center; gap: 10px; padding: 11px 0 13px; font-size: 0.85rem; color: var(--ink-2); }
.fm-slot .cal-mark { width: 28px; height: 28px; border-radius: 8px; font-size: 0.7rem; }
.fm-slot strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
.fm-slot span { color: var(--ink-3); }
.fm-body { max-width: 660px; width: 100%; margin: auto; padding: 34px 20px 64px; }
.fm-step-panel { display: none; }
.fm-step-panel.on { display: block; animation: fmIn 0.26s cubic-bezier(0.2, 0.75, 0.2, 1); }
@keyframes fmIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fm-h { font-family: var(--serif); font-size: 2.1rem; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; }
.fm-lead { font-size: 1rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 6px; max-width: 34em; }
.fm-help { font-size: 0.88rem; line-height: 1.55; color: var(--ink-3); margin: 0 0 26px; max-width: 34em; }
.fm-field { display: block; margin-bottom: 22px; }
.fm-field > .lbl { display: block; font-size: 0.92rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.fm-field input, .fm-field textarea { width: 100%; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; padding: 15px 16px; font-family: var(--sans); font-size: 1.02rem; color: var(--ink); transition: border-color 0.14s, box-shadow 0.14s; }
.fm-field textarea { resize: none; line-height: 1.6; overflow: hidden; min-height: 104px; }
.fm-field input::placeholder, .fm-field textarea::placeholder { color: #b3ada2; }
.fm-field input:focus, .fm-field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.fm-field.bad input, .fm-field.bad textarea { border-color: #b42318; background: #fffbfa; }
.err { display: none; color: #b42318; font-size: 0.84rem; font-weight: 500; margin: 7px 0 0; }
.fm-field.bad .err, .fm-group.bad .err { display: block; }
.fm-group { margin-bottom: 24px; }
.fm-group > .lbl { display: block; font-size: 0.92rem; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.opts > .opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt span { display: flex; align-items: center; gap: 11px; min-height: 56px; padding: 10px 15px; border: 1.5px solid var(--line-2); border-radius: 14px; background: #fff; font-size: 0.98rem; font-weight: 500; color: var(--ink); cursor: pointer; transition: 0.14s; }
.opt span::before { content: ""; flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--line-2); background: #fff; transition: 0.14s; }
.opt span:hover { border-color: var(--blue); }
.opt input:checked + span { border-color: var(--blue); background: var(--blue-tint); font-weight: 600; box-shadow: 0 0 0 1px var(--blue); }
.opt input:checked + span::before { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 3.5px #fff; }
.opt input:focus-visible + span { box-shadow: 0 0 0 3px var(--blue-tint); }
.fm-group.bad .opt span { border-color: rgba(180, 35, 24, 0.45); }
.starters { border-left: 2px solid var(--line-2); padding: 2px 0 2px 16px; margin: -6px 0 26px; }
.starters p { margin: 0 0 8px; font-size: 0.85rem; font-weight: 600; color: var(--ink-3); }
.starters ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.starters li { font-family: var(--serif); font-style: italic; font-size: 0.98rem; color: var(--ink-2); line-height: 1.45; }
.fm-actions { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.fm-next { border: 0; border-radius: 14px; background: var(--blue); color: #fff; font-family: var(--sans); font-size: 1.02rem; font-weight: 700; min-height: 54px; padding: 0 30px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 12px 26px -16px rgba(39, 67, 230, 0.85); transition: 0.16s; }
.fm-next:hover:not(:disabled) { background: var(--blue-deep); }
.fm-next:disabled { background: #ddd9d1; color: #8d887e; box-shadow: none; cursor: not-allowed; }
.fm-prev { border: 1.5px solid var(--line-2); background: #fff; border-radius: 14px; font-family: var(--sans); font-size: 0.96rem; font-weight: 600; color: var(--ink-2); min-height: 54px; padding: 0 22px; cursor: pointer; }
.fm-prev:hover { border-color: var(--blue); color: var(--blue); }
.fm-privacy { font-size: 0.85rem; color: var(--ink-3); margin: 16px 0 0; line-height: 1.55; }
.fm-privacy a { color: var(--ink-2); }
.form-error { display: none; gap: 10px; align-items: flex-start; background: #fff0ef; border: 1px solid rgba(180, 35, 24, 0.28); color: #8f251c; border-radius: 14px; padding: 13px 15px; font-size: 0.9rem; line-height: 1.5; margin: 0 0 20px; }
.form-error b { display: block; margin-bottom: 2px; }
.conf { text-align: center; padding-top: 12px; }
.conf h2 { font-family: var(--serif); font-size: 2.1rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; }
.conf > p { font-size: 1rem; line-height: 1.6; color: var(--ink-2); margin: 0 auto 24px; max-width: 34em; }
.conf .done-card { max-width: 380px; margin: 0 auto 20px; }
.conf .note { font-size: 0.9rem; color: var(--ink-3); line-height: 1.6; max-width: 34em; margin: 0 auto 22px; }
.conf .secondary { border: 1.5px solid var(--line-2); background: #fff; border-radius: 14px; font-family: var(--sans); font-size: 0.96rem; font-weight: 600; color: var(--ink); min-height: 52px; padding: 0 24px; cursor: pointer; }
.conf .secondary:hover { border-color: var(--blue); color: var(--blue); }
.sms { text-align: left; max-width: 430px; margin: 30px auto 0; border: 1px solid var(--line); border-radius: 18px; background: var(--card); padding: 18px 19px; }
.sms strong { display: block; font-size: 0.96rem; margin-bottom: 5px; }
.sms .why { margin: 0 0 13px; font-size: 0.87rem; line-height: 1.55; color: var(--ink-2); }
.sms-row { display: flex; gap: 10px; }
.sms-row input { flex: 1 1 auto; min-width: 0; border: 1.5px solid var(--line-2); border-radius: 13px; background: #fff; padding: 13px 14px; font-family: var(--sans); font-size: 1rem; color: var(--ink); transition: border-color 0.14s, box-shadow 0.14s; }
.sms-row input::placeholder { color: #b3ada2; }
.sms-row input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.sms-ok { flex: 0 0 auto; width: 52px; border: 0; border-radius: 13px; background: var(--blue); color: #fff; cursor: pointer; display: grid; place-items: center; transition: 0.16s; }
.sms-ok svg { width: 21px; height: 21px; }
.sms-ok:hover:not(:disabled) { background: var(--blue-deep); }
.sms-ok:disabled { background: #ddd9d1; color: #8d887e; cursor: not-allowed; }
.sms-note { margin: 11px 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--ink-3); }
.sms-done { display: none; gap: 11px; align-items: flex-start; }
.sms-done .tick { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
.sms-done .tick svg { width: 14px; height: 14px; }
.sms-done p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--ink-2); }
.sms-done p b { color: var(--ink); }
.sms.saved { background: var(--green-tint); border-color: rgba(31, 157, 85, 0.3); }
.sms.saved .sms-ask { display: none; }
.sms.saved .sms-done { display: flex; }

/* ── Reszponzív ──────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .book-grid { grid-template-columns: 1fr; gap: 26px; }
  .book-grid .booking-card { position: static; }
  .demo-body { grid-template-columns: 1fr; }
  .demo-in { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; }
  .compare { grid-template-columns: 1fr; }
  h1.h { font-size: 2.4rem; }
}
@media (max-width: 620px) {
  .shell { padding: 0 18px; }
  .top { padding-top: 18px; }
  .header-note { display: none; }
  h1.h { font-size: 2rem; }
  .section { padding-top: 46px; }
  .section h2 { font-size: 1.5rem; }
  .closing { padding: 38px 22px; margin-top: 52px; }
  .closing h2 { font-size: 1.6rem; }
  .fm-bar-in, .fm-body { padding-left: 18px; padding-right: 18px; }
  .fm-body { padding-top: 26px; margin: 0 auto; }
  .fm-h { font-size: 1.72rem; }
  .fm-slot { flex-wrap: wrap; row-gap: 2px; }
  .wide-only { display: none; }
  .opts.wide { grid-template-columns: 1fr; }
  .fm-actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .fm-next, .fm-prev { width: 100%; justify-content: center; }
  .conf h2 { font-size: 1.72rem; }
  .demo-strip span { display: none; }
}

/* ── HOZO-referencia blokk ───────────────────────────────────────────── */
.ref-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(28, 26, 21, 0.04), 0 26px 50px -34px rgba(28, 26, 21, 0.45);
}
.ref-shot { position: relative; display: block; background: #f3f0ea; text-decoration: none; }
.ref-shot img { display: block; width: 100%; height: auto; }
.ref-shot .try {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--ink); color: #fff; border-radius: 12px; padding: 11px 16px;
  font-size: 0.9rem; font-weight: 700; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.6);
  transition: 0.16s;
}
.ref-shot:hover .try { background: var(--blue); }
.ref-meta { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 0.8rem; line-height: 1.45; color: var(--ink-2); }
.ref-meta img { height: 30px; width: auto; flex: 0 0 auto; }
.ref-meta b { color: var(--ink); }
.ref-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 36px; align-items: center; }
.ref-text h2 { margin-bottom: 14px; }
.ref-text > p { font-size: 1rem; line-height: 1.62; color: var(--ink-2); margin: 0 0 20px; max-width: 32em; }
.ref-person { display: flex; gap: 12px; align-items: center; margin-top: 22px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 16px; background: #fff; max-width: 34em; }
.ref-person .ava { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--paper); border: 1px dashed var(--line-2); display: grid; place-items: center; font-family: var(--serif); font-weight: 600; color: var(--ink-3); font-size: 1.1rem; }
.ref-person strong { display: block; font-size: 0.94rem; }
.ref-person small { display: block; color: var(--ink-3); font-size: 0.78rem; margin-top: 2px; }
.ref-person .ph { display: inline-block; font-size: 0.76rem; line-height: 1.4; color: #7a4f00; background: #fff6db; border-radius: 8px; padding: 5px 8px; margin-top: 7px; }
.ref-compact { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; }
.ref-compact img.shot { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.ref-compact h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.012em; line-height: 1.2; }
.ref-compact p { margin: 0 0 14px; font-size: 0.92rem; line-height: 1.58; color: var(--ink-2); }
.hero-cta.small { min-height: 44px; padding: 0 18px; font-size: 0.92rem; }
@media (max-width: 980px) {
  .ref-grid { grid-template-columns: 1fr; gap: 24px; }
  .ref-compact { grid-template-columns: 1fr; }
}

/* ── HOZO-idézet ─────────────────────────────────────────────────────── */
.ref-quote { margin: 22px 0 0; max-width: 34em; }
.ref-quote blockquote {
  margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.22rem; line-height: 1.42;
  color: var(--ink); letter-spacing: -0.005em; border-left: 3px solid var(--blue); padding: 4px 0 4px 18px;
}
.ref-quote figcaption { display: flex; align-items: center; gap: 12px; margin: 12px 0 0 21px; font-size: 0.82rem; line-height: 1.4; color: var(--ink-3); }
.ref-quote figcaption img { height: 26px; width: auto; }
.ref-quote figcaption b { color: var(--ink); }
.ref-quote .relayed { margin: 14px 0 0 21px; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); font-style: italic; }
.ref-quote .relayed span { display: block; font-style: normal; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }

/* ── Napválasztó: az 5 hétköznap egyenlően osztja a kártyát, nem görget ── */
.booking-card .day-row { gap: 6px; }
.booking-card .day { flex: 1 1 0; min-width: 0; padding: 9px 3px 8px; }
.booking-card .day strong { font-size: 0.8rem; white-space: nowrap; }
.booking-card .day span { font-size: 0.68rem; }

/* ── Idővonal-demó (rendelési ügyek) ─────────────────────────────────── */
.tl-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(28, 26, 21, 0.04), 0 26px 50px -34px rgba(28, 26, 21, 0.45); }
.tl-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: #fff; flex-wrap: wrap; }
.tl-legend { display: flex; gap: 6px; flex-wrap: wrap; }
.lg { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; padding: 4px 9px; border-radius: 999px; }
.lg.vevo { background: var(--green-tint); color: #147a43; }
.lg.mi { background: var(--blue-tint); color: var(--blue); }
.lg.besz { background: #fff3d6; color: #8a5a00; }
.lg.sys { background: var(--paper); color: var(--ink-3); border: 1px solid var(--line); }
.tl-order { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tl-order strong { display: block; font-family: var(--serif); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; }
.tl-order small { display: block; color: var(--ink-3); font-size: 0.78rem; margin-top: 2px; }
.tl-body { position: relative; padding: 16px 18px; background: var(--paper); display: flex; flex-direction: column; gap: 10px; min-height: 420px; }
.tl-body::before { content: ""; position: absolute; left: 50%; top: 16px; bottom: 16px; width: 2px; background: var(--line); }
.tl-item { display: flex; opacity: 0; transform: translateY(8px); transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.2, 0.75, 0.2, 1); }
.tl-item.in { opacity: 1; transform: none; }
.tl-item.bal { justify-content: flex-start; }
.tl-item.jobb { justify-content: flex-end; }
.tl-item.sys { justify-content: center; }
.tl-bubble { position: relative; z-index: 1; max-width: 64%; border-radius: 16px; padding: 10px 13px 11px; background: #fff; border: 1px solid var(--line-2); }
.tl-item.vevo .tl-bubble { border-color: rgba(31, 157, 85, 0.45); background: #f2faf5; border-bottom-left-radius: 6px; }
.tl-item.mi .tl-bubble { border-color: rgba(39, 67, 230, 0.4); background: #f0f3ff; border-bottom-right-radius: 6px; }
.tl-item.beszallito .tl-bubble { border-color: rgba(224, 179, 74, 0.6); background: #fff8e6; }
.tl-who { display: flex; align-items: center; gap: 7px; font-size: 0.74rem; font-weight: 700; color: var(--ink-2); margin-bottom: 4px; }
.tl-who .ic { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.tl-who .ic svg { width: 11px; height: 11px; }
.tl-item.vevo .ic { background: var(--green); color: #fff; }
.tl-item.mi .ic { background: var(--blue); color: #fff; }
.tl-item.beszallito .ic { background: #d9a03a; color: #fff; }
.tl-who time { margin-left: auto; padding-left: 10px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.tl-bubble p { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--ink); }
.tl-sys { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 8px; font-size: 0.78rem; color: var(--ink-2); }
.tl-sys .ic { width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-3); flex: 0 0 auto; }
.tl-sys .ic svg { width: 12px; height: 12px; }
.tl-sys b { display: block; font-size: 0.8rem; color: var(--ink); }
.tl-sys span { color: var(--ink-3); }
.tl-sys time { color: var(--ink-3); margin-left: 6px; white-space: nowrap; }
.tl-next { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; background: #fff; border-top: 1px solid var(--line); opacity: 0; transition: opacity 0.3s ease; }
.tl-next.in { opacity: 1; }
.tl-next-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); background: var(--blue-tint); padding: 4px 9px; border-radius: 999px; }
.tl-next strong { font-size: 0.95rem; }
.tl-next-meta { margin-left: auto; font-size: 0.8rem; color: var(--ink-3); }
.tl-wrap.compact .tl-body { min-height: 360px; }
.tl-wrap.compact .tl-bubble p { font-size: 0.86rem; }
.ref-badge { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: #fff; font-family: var(--serif); font-weight: 600; display: grid; place-items: center; font-size: 0.9rem; }
.ref-meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 0.78rem; color: var(--ink); }
@media (max-width: 620px) {
  .tl-bubble { max-width: 88%; }
  .tl-body::before { display: none; }
  .tl-body { padding: 14px 12px; }
  .tl-order { padding: 12px 14px; }
  .tl-who time { font-size: 0.7rem; }
}

/* ── Futószalag-demó (termékfeltöltés) ───────────────────────────────── */
.pl-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(28, 26, 21, 0.04), 0 26px 50px -34px rgba(28, 26, 21, 0.45); }
.pl-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: #fff; flex-wrap: wrap; }
.pl-body { display: grid; grid-template-columns: 1fr 1.3fr; min-height: 460px; }
.pl-phone { padding: 16px 16px 18px; background: var(--paper); border-right: 1px solid var(--line); }
.pl-review { padding: 16px 18px 18px; background: #fff; }
.pl-body .who { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.pl-step { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--line); opacity: 0; transform: translateY(8px); transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.2, 0.75, 0.2, 1); }
.pl-step.in { opacity: 1; transform: none; }
.pl-step .n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.pl-step b { display: flex; align-items: center; gap: 7px; font-size: 0.92rem; }
.pl-step b .ic { width: 16px; height: 16px; color: var(--blue); display: inline-grid; place-items: center; }
.pl-step b .ic svg { width: 15px; height: 15px; }
.pl-step p { margin: 4px 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--ink-2); }
.pl-step p b { display: inline; color: var(--ink); }
.pl-thumbs { display: flex; gap: 6px; margin-top: 8px; }
.pl-thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); background: #ddd; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pl-chips span { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 600; padding: 4px 9px 4px 6px; border-radius: 999px; background: var(--blue-tint); color: var(--blue); }
.pl-chips span svg { width: 11px; height: 11px; }
.pl-imgs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; opacity: 0; transition: opacity 0.4s ease; }
.pl-imgs.in { opacity: 1; }
.pl-imgs figure { margin: 0; }
.pl-imgs img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); background: #eee; }
.pl-imgs figcaption { font-size: 0.72rem; color: var(--ink-3); text-align: center; margin-top: 5px; }
.pl-arrow { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; }
.pl-arrow svg { width: 15px; height: 15px; }
.pl-fields { margin-top: 12px; display: grid; gap: 8px; }
.pl-field { border: 1px solid var(--line); border-radius: 12px; padding: 8px 11px; background: var(--paper); opacity: 0; transform: translateY(6px); transition: opacity 0.26s ease, transform 0.3s ease; }
.pl-field.in { opacity: 1; transform: none; }
.pl-field span { display: flex; justify-content: space-between; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.pl-field span i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--blue); }
.pl-field p { margin: 3px 0 0; font-size: 0.88rem; line-height: 1.45; color: var(--ink); }
.pl-wrap.compact .pl-body { min-height: 380px; }
.pl-wrap.compact .pl-field p { font-size: 0.82rem; }
.pl-wrap.compact .pl-thumbs img { width: 46px; height: 46px; }
/* előtte / utána nagyban */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ba figure { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.ba img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ba figcaption { padding: 12px 16px; font-size: 0.86rem; color: var(--ink-2); display: flex; justify-content: space-between; gap: 10px; }
.ba figcaption b { color: var(--ink); }
.ba .tagx { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.ba figure.after .tagx { color: var(--green); }
@media (max-width: 980px) { .pl-body { grid-template-columns: 1fr; } .pl-phone { border-right: 0; border-bottom: 1px solid var(--line); } }
@media (max-width: 620px) { .ba { grid-template-columns: 1fr 1fr; gap: 10px; } .ba figcaption { flex-direction: column; gap: 2px; padding: 9px 11px; font-size: 0.78rem; } .pl-imgs { gap: 6px; } }

/* ── Javítás: a képek height-attribútuma felülírta az aspect-ratio-t → magasság auto ── */
.pl-imgs img, .ba img { height: auto; }
.ref-compact { grid-template-columns: 360px 1fr; }
.ref-compact .ba { gap: 8px; }
.ref-compact .ba figcaption { padding: 8px 10px; font-size: 0.76rem; flex-direction: column; gap: 2px; }
@media (max-width: 980px) { .ref-compact { grid-template-columns: 1fr; } }

/* ── ChatGPT-hirdetés mockup ─────────────────────────────────────────── */
.cm-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(28,26,21,.04), 0 26px 50px -34px rgba(28,26,21,.45); }
.cm-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: #fff; flex-wrap: wrap; }
.cm-hint { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cm-tabs { display: flex; gap: 6px; padding: 12px 14px 0; flex-wrap: wrap; background: #fff; }
.cm-tabs button { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 8px 13px; font-family: var(--sans); font-size: .82rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: .14s; text-align: left; }
.cm-tabs button:hover { border-color: var(--blue); color: var(--blue); }
.cm-tabs button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cm-screen { padding: 20px 22px 24px; background: #fff; min-height: 340px; }
.cm-q { display: flex; gap: 12px; align-items: flex-start; justify-content: flex-end; margin-bottom: 20px; opacity: 0; transform: translateY(8px); transition: opacity .28s ease, transform .3s ease; }
.cm-q.in { opacity: 1; transform: none; }
.cm-q span { order: 2; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; font-size: .68rem; font-weight: 700; color: var(--ink-3); }
.cm-q p { order: 1; margin: 0; background: var(--paper); border-radius: 16px 16px 4px 16px; padding: 11px 15px; font-size: .95rem; line-height: 1.45; max-width: 78%; }
.cm-a { display: flex; gap: 12px; align-items: flex-start; opacity: 0; transform: translateY(8px); transition: opacity .28s ease, transform .3s ease; }
.cm-a.in { opacity: 1; transform: none; }
.cm-a-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.cm-a-ic svg { width: 16px; height: 16px; }
.cm-a p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink); max-width: 60ch; }
.cm-ad { margin: 22px 0 0 40px; max-width: 460px; opacity: 0; transform: translateY(10px); transition: opacity .32s ease, transform .34s cubic-bezier(.2,.75,.2,1); }
.cm-ad.in { opacity: 1; transform: none; }
.cm-ad-label { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.cm-ad-card { display: flex; gap: 13px; align-items: center; border: 1px solid var(--line-2); border-radius: 16px; padding: 12px; background: #fff; text-decoration: none; color: inherit; transition: .16s; }
.cm-ad-card:hover { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.cm-ad-card img { flex: 0 0 auto; width: 62px; height: 62px; border-radius: 12px; object-fit: cover; background: #eee; }
.cm-ad-brand { display: block; font-size: .72rem; color: var(--ink-3); margin-bottom: 2px; }
.cm-ad-card strong { display: block; font-size: .98rem; letter-spacing: -.008em; }
.cm-ad-card p { margin: 2px 0 0; font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
.cm-ad-note { display: flex; gap: 7px; align-items: flex-start; margin: 10px 0 0; font-size: .8rem; line-height: 1.45; color: var(--blue); background: var(--blue-tint); border-radius: 10px; padding: 8px 11px; }
.cm-ad-note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
.cm-foot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: .76rem; color: var(--ink-3); background: #fff; }

/* ── Kampány-felépítés ábra ──────────────────────────────────────────── */
.ka { display: grid; gap: 12px; }
.ka-row { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; position: relative; }
.ka-row.hl { border-color: rgba(39,67,230,.35); box-shadow: 0 0 0 3px var(--blue-tint); }
.ka-lbl { display: flex; align-items: center; gap: 9px; font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.ka-lbl b { width: 20px; height: 20px; border-radius: 50%; background: var(--blue); color: #fff; font-size: .7rem; display: grid; place-items: center; letter-spacing: 0; }
.ka-row h3 { font-family: var(--serif); font-size: 1.16rem; font-weight: 600; margin: 0 0 6px; letter-spacing: -.012em; }
.ka-row > p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.ka-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ka-meta span { font-size: .76rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); }
.ka-hints { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ka-hints li { font-family: var(--serif); font-style: italic; font-size: .95rem; line-height: 1.45; color: var(--ink-2); padding-left: 14px; border-left: 2px solid var(--line-2); }
.ka-ads { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; }
.ka-ad { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--paper); }
.ka-ad b { display: block; font-size: .88rem; margin-bottom: 3px; }
.ka-ad span { font-size: .8rem; line-height: 1.4; color: var(--ink-2); }
.ka-ad i { display: block; font-style: normal; font-size: .68rem; color: var(--ink-3); margin-top: 5px; font-variant-numeric: tabular-nums; }
.ka-arrow { display: grid; place-items: center; color: var(--line-2); }
.ka-arrow svg { width: 20px; height: 20px; }

/* ── Garantálom / nem garantálom ─────────────────────────────────────── */
.gar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gar > div { border-radius: 20px; padding: 24px 24px 22px; }
.gar .igen { background: var(--card); border: 1px solid rgba(31,157,85,.32); box-shadow: 0 0 0 3px rgba(31,157,85,.08); }
.gar .nem { background: var(--card); border: 1px solid var(--line-2); }
.gar h3 { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; margin: 0 0 4px; letter-spacing: -.014em; }
.gar .sub { margin: 0 0 16px; font-size: .84rem; color: var(--ink-3); }
.gar ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.gar li { display: flex; gap: 11px; align-items: flex-start; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.gar li b { color: var(--ink); font-weight: 600; }
.gar li .m { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px; }
.gar li .m svg { width: 12px; height: 12px; }
.gar .igen .m { background: var(--green-tint); color: var(--green); }
.gar .nem .m { background: rgba(28,26,21,.06); color: var(--ink-3); }
@media (max-width: 860px) { .gar { grid-template-columns: 1fr; } }

/* ── Példák (a három megépített oldal) ───────────────────────────────── */
.pk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pk a { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; transition: .16s; }
.pk a:hover { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); transform: translateY(-2px); }
.pk .sh { position: relative; background: var(--paper); border-bottom: 1px solid var(--line); aspect-ratio: 16 / 11; overflow: hidden; }
.pk .sh img { display: block; width: 100%; height: auto; }
.pk .tx { padding: 14px 16px 16px; }
.pk .tx span { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.pk .tx h3 { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; margin: 5px 0 5px; letter-spacing: -.01em; }
.pk .tx p { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--ink-2); }
.pk .tx em { display: block; font-style: normal; margin-top: 9px; font-size: .84rem; font-weight: 700; color: var(--blue); }
@media (max-width: 860px) { .pk { grid-template-columns: 1fr; } }

/* ── Árak ────────────────────────────────────────────────────────────── */
.ar { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; align-items: start; }
.ar-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px; }
.ar-card.fo { border-color: rgba(39,67,230,.35); box-shadow: 0 0 0 3px var(--blue-tint); }
.ar-card h3 { font-family: var(--serif); font-size: 1.28rem; font-weight: 600; margin: 0 0 3px; }
.ar-card .kicsi { margin: 0 0 14px; font-size: .84rem; color: var(--ink-3); }
.ar-ossz { font-family: var(--serif); font-size: 2rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ar-ossz small { font-family: var(--sans); font-size: .82rem; font-weight: 500; color: var(--ink-3); margin-left: 6px; letter-spacing: 0; }
.ar-bont { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ar-bont li { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--ink-2); padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.ar-bont li:last-child { border-bottom: 0; padding-bottom: 0; }
.ar-bont li b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-tabla { width: 100%; border-collapse: collapse; margin-top: 6px; }
.ar-tabla th, .ar-tabla td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--line); font-size: .88rem; }
.ar-tabla th { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ar-tabla td b { font-variant-numeric: tabular-nums; }
.ar-tabla tr:last-child td { border-bottom: 0; }
.ar-note { margin: 16px 0 0; padding: 13px 15px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; font-size: .86rem; line-height: 1.55; color: var(--ink-2); }
.ar-note b { color: var(--ink); }
@media (max-width: 860px) { .ar { grid-template-columns: 1fr; } }

/* Reszponzív képek: a height attribútum ne írja felül az arányt (mért hiba) */
.hero-portre img, .pk .sh img, .cm-ad-card img { height: auto; }
.hero-portre img { aspect-ratio: 1 / 1; object-fit: cover; }
.cm-ad-card img { height: 62px; }

/* ── Portré-névjegy: a szöveg a kép ALATT (3 megjelenítés) ───────────── */
.pv { margin: 0; }
.pv-kep img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 22px; background: #e8e3da; }

/* A · Névjegy — halk, tiszta */
.pv-a figcaption { padding: 16px 4px 0; }
.pv-a figcaption b { display: block; font-family: var(--serif); font-size: 1.18rem; font-weight: 600; letter-spacing: -.012em; margin-bottom: 5px; }
.pv-a figcaption p { margin: 0; font-size: .89rem; line-height: 1.6; color: var(--ink-2); }

/* B · Kiemelt mondat + aláírás */
.pv-b figcaption { padding: 18px 4px 0; }
.pv-b .mondat { margin: 0 0 14px; font-family: var(--serif); font-size: 1.1rem; line-height: 1.42; color: var(--ink); letter-spacing: -.008em; }
.pv-b .alairas { display: flex; align-items: center; gap: 12px; }
.pv-b .alairas .vonal { flex: 0 0 auto; width: 34px; height: 2px; border-radius: 2px; background: var(--blue); }
.pv-b .alairas span:last-child { font-size: .84rem; line-height: 1.4; color: var(--ink-3); }
.pv-b .alairas b { display: block; font-size: .96rem; color: var(--ink); font-weight: 600; }

/* C · Adatsor */
.pv-c figcaption { margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
.pv-c .nev { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.pv-c .nev b { display: block; font-family: var(--serif); font-size: 1.12rem; font-weight: 600; letter-spacing: -.012em; }
.pv-c .nev span { font-size: .8rem; color: var(--ink-3); }
.pv-c .adatok { display: grid; gap: 11px; }
.pv-c .adatok > div { display: flex; align-items: baseline; gap: 10px; }
.pv-c .adatok b { flex: 0 0 auto; min-width: 5.4em; font-family: var(--serif); font-size: 1.06rem; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }
.pv-c .adatok span { font-size: .85rem; line-height: 1.45; color: var(--ink-2); }

/* ── Az egyedi céloldal kiemelése (ez a fő megkülönböztető) ──────────── */
.ka-row.kiemelt-oldal h3 em { font-style: italic; color: var(--blue); }
.ka-row.kiemelt-oldal > p b { color: var(--ink); font-weight: 600; }
.ka-row.kiemelt-oldal .ka-meta span { background: var(--blue-tint); border-color: rgba(39,67,230,.24); color: var(--blue); font-weight: 700; }
.ar-bont li.kiemelt { background: var(--blue-tint); border: 1px solid rgba(39,67,230,.28); border-radius: 12px; padding: 11px 13px; margin: 2px 0; align-items: flex-start; }
.ar-bont li.kiemelt .cim { display: block; color: var(--ink); font-size: .95rem; }
.ar-bont li.kiemelt i { display: block; font-style: normal; font-size: .8rem; line-height: 1.4; color: var(--blue); margin-top: 3px; }
.ar-bont li.kiemelt > b { color: var(--blue); }

/* ── Portré-névjegy A KÉPEN (D · E · F) ──────────────────────────────── */
.pv-d .pv-kep, .pv-e .pv-kep, .pv-f .pv-kep { position: relative; border-radius: 22px; overflow: hidden; }
.pv-d .pv-kep img, .pv-e .pv-kep img, .pv-f .pv-kep img { border-radius: 0; }

/* D · Gradiens-sáv — nincs doboz, a kép folytatódik a szöveg mögött */
.pv-d figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; color: #fdfcf9;
  padding: 40px 20px 18px;
  background: linear-gradient(to top, rgba(20,18,14,.96) 0%, rgba(20,18,14,.93) 58%, rgba(20,18,14,.42) 85%, transparent 100%);
}
.pv-d figcaption b { display: block; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; letter-spacing: -.012em; margin-bottom: 4px; }
.pv-d figcaption p { margin: 0; font-size: .82rem; line-height: 1.5; color: rgba(253,252,249,.86); }

/* E · Üveg-panel — a kép átsejlik a szöveg mögött */
.pv-e figcaption {
  position: absolute; left: 12px; right: 12px; bottom: 12px; color: #fdfcf9;
  padding: 15px 17px 16px; border-radius: 16px;
  background: rgba(24,21,17,.52);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(253,252,249,.16);
}
.pv-e figcaption b { display: block; font-family: var(--serif); font-size: 1.12rem; font-weight: 600; letter-spacing: -.012em; margin-bottom: 5px; }
.pv-e figcaption p { margin: 0; font-size: .82rem; line-height: 1.5; color: rgba(253,252,249,.88); }

/* F · Név a képen, a mondat lelógó világos kártyán */
.pv-f { position: relative; margin-bottom: 10px; }
.pv-f .pv-nev {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  background: rgba(20,18,14,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fdfcf9; font-family: var(--serif); font-size: 1.02rem; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; letter-spacing: -.01em;
}
.pv-f figcaption {
  position: relative; z-index: 2; margin: -54px 14px 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 15px 17px; box-shadow: 0 14px 32px -18px rgba(28,26,21,.55);
}
.pv-f figcaption p { margin: 0; font-size: .87rem; line-height: 1.55; color: var(--ink-2); }

/* Tiszta portré: felirat nélkül, a hero jobb oldalán */
.pv-tiszta .pv-kep img { border-radius: 22px; }

/* ── Wordmark: pontosan az élő szucsroland.hu szabályai (globals.css) ─── */
.top { padding: 30px 0 6px; }
.wordmark {
  min-width: 0;
  display: grid;
  gap: 1px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 620;
  letter-spacing: .005em;
  text-decoration: none;
}
.wordmark > span::after { color: var(--blue); content: "."; }
.wordmark small {
  display: block;
  max-width: 37ch;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 760;
  letter-spacing: .16em;
  line-height: 1.35;
  text-transform: uppercase;
  margin-top: 0;
}

/* ══ Telefon-keret + sötét ChatGPT-felület ═══════════════════════════════ */
.tel { flex: 0 0 auto; width: 320px; max-width: 100%; }
.tel.nagy { width: 366px; }
/* Asztalon kisebb, aranyosan meretezett keszulek; az elfoglalt hely is csokken. */
@media (min-width: 1001px) { .tel { zoom: .82; } }
.tel-keret {
  position: relative; aspect-ratio: 9 / 19.3; padding: 13px;
  border-radius: 54px;
  background:
    linear-gradient(142deg, #7c7c82 0%, #46464b 9%, #232326 26%, #1a1a1d 52%, #26262a 74%, #4d4d53 90%, #85858c 100%);
  box-shadow:
    0 0 0 1px rgba(10,9,7,.62),
    inset 0 0 0 1px rgba(255,255,255,.26),
    inset 0 1.5px 1px rgba(255,255,255,.4),
    inset 0 -1.5px 1px rgba(255,255,255,.14),
    0 44px 72px -36px rgba(20,18,14,.72),
    0 12px 26px -14px rgba(20,18,14,.4);
}
/* oldalgombok: balra némító + hangerő, jobbra bekapcsoló */
.tel-keret::before {
  content: ""; position: absolute; left: -2.5px; top: 20%;
  width: 3px; height: 22px; border-radius: 3px;
  background: linear-gradient(90deg, #55555b, #2a2a2e);
  box-shadow: 0 42px 0 0 #4c4c52, 0 84px 0 0 #4c4c52;
}
.tel-keret::after {
  content: ""; position: absolute; right: -2.5px; top: 31%;
  width: 3px; height: 62px; border-radius: 3px;
  background: linear-gradient(270deg, #55555b, #2a2a2e);
}
.tel-sziget { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: 82px; height: 23px; background: #000; border-radius: 999px; z-index: 4; }
.tel-kijelzo {
  position: absolute; inset: 13px; border-radius: 42px; overflow: hidden;
  background: #000; color: #ececec; display: flex; flex-direction: column;
  font-family: -apple-system, "SF Pro Text", var(--sans);
}
.tel-statusz { display: flex; justify-content: space-between; align-items: center; padding: 13px 22px 0; font-size: 12.5px; font-weight: 640; letter-spacing: .01em; }
.tel-statusz .jelek { display: inline-flex; align-items: center; gap: 5px; }
.tel-statusz svg { height: 11px; width: auto; }
.tel-statusz .akku { width: 22px; height: 11px; border-radius: 3px; border: 1px solid rgba(236,236,236,.5); position: relative; }
.tel-statusz .akku::before { content: ""; position: absolute; inset: 1.5px; width: 42%; background: #ececec; border-radius: 1px; }
.tel-fejlec { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.tel-fejlec .cim { font-size: 15px; font-weight: 620; color: #ececec; text-align: center; }
.tel-fejlec .jobb { display: inline-flex; gap: 7px; justify-self: end; }
.tel-fejlec .ik { width: 30px; height: 30px; border-radius: 50%; background: rgba(120,120,128,.22); color: #ececec; display: grid; place-items: center; }
.tel-fejlec .ik svg { width: 16px; height: 16px; }
.tel-szal { flex: 1 1 auto; padding: 10px 14px 0; overflow: hidden; }
.tel-kerdes {
  margin: 0 0 18px auto; max-width: 82%; width: fit-content;
  background: #303030; border-radius: 20px; padding: 10px 14px;
  font-size: 13.5px; line-height: 1.42; color: #fff;
}
.tel-valasz { display: block; }
.tel-valasz p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #ececec; }
.tel-valasz p.ki { margin-top: 9px; }
.tel-valasz p.ki b { font-weight: 660; color: #fff; }
.tel-ad { margin: 16px 0 0; }
.tel-ad-cimke { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8e8e93; margin-bottom: 6px; }
.tel-ad-kartya { display: flex; gap: 10px; align-items: center; background: #1c1c1e; border: 1px solid #333336; border-radius: 15px; padding: 9px; }
.tel-ad-kartya img { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #2c2c2e; }
.tel-ad-kartya span { display: block; font-size: 9.5px; color: #8e8e93; margin-bottom: 1px; }
.tel-ad-kartya b { display: block; font-size: 13px; font-weight: 640; color: #fff; line-height: 1.25; }
.tel-ad-kartya p { margin: 2px 0 0; font-size: 11.5px; line-height: 1.35; color: #b6b6bb; }
.tel-ad-sajat { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: #7f9cff; }
.tel-beviteli {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px; margin: 10px 12px 0;
  background: #1c1c1e; border: 1px solid #313134; border-radius: 26px; padding: 8px 9px 8px 12px;
}
.tel-beviteli .ik { color: #b6b6bb; display: grid; place-items: center; }
.tel-beviteli .ik svg { width: 19px; height: 19px; }
.tel-beviteli .ph { flex: 1 1 auto; font-size: 14px; color: #8e8e93; }
.tel-beviteli .korgomb { flex: 0 0 auto; width: 31px; height: 31px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; }
.tel-beviteli .korgomb svg { width: 17px; height: 17px; }
.tel-kijelzo::after { content: ""; display: block; height: 14px; flex: 0 0 auto; }
.tel-hazgomb { position: absolute; left: 50%; bottom: 19px; transform: translateX(-50%); width: 108px; height: 4px; border-radius: 3px; background: rgba(236,236,236,.55); z-index: 3; }

/* ── Elrendezés: gépen egymás mellett, telefonon swipe ────────────────── */
.tel-sor { display: flex; gap: 20px; align-items: flex-start; }
.tel-tetel { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.tel-tetel .tel-cimke { margin: 14px 0 0; font-size: .84rem; font-weight: 700; color: var(--ink-2); text-align: center; }
.tel-tetel .tel-alcim { margin: 3px 0 0; font-size: .8rem; line-height: 1.45; color: var(--ink-3); text-align: center; max-width: 30ch; }
@media (max-width: 1000px) {
  .tel-sor {
    margin: 0 -28px; padding: 4px 28px 10px; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tel-sor::-webkit-scrollbar { display: none; }
  .tel-tetel { flex: 0 0 auto; scroll-snap-align: center; width: 300px; }
  .tel { width: 300px; }
}
@media (max-width: 620px) { .tel-sor { margin: 0 -18px; padding-left: 18px; padding-right: 18px; } }
.tel-huzd { display: none; margin: 16px 0 0; text-align: center; font-size: .84rem; font-weight: 600; color: var(--ink-3); }
.tel-huzd span { color: var(--blue); }
@media (max-width: 1000px) { .tel-huzd { display: block; } }

/* ── 2 · egy nagy telefon + kérdésválasztó ───────────────────────────── */
.tel-egy { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.tel-valaszto { display: grid; gap: 10px; }
.tel-valaszto button {
  text-align: left; border: 1px solid var(--line-2); background: var(--card); border-radius: 16px;
  padding: 14px 16px; cursor: pointer; font-family: var(--sans); transition: .16s;
}
.tel-valaszto button:hover { border-color: var(--blue); }
.tel-valaszto button.on { border-color: var(--blue); background: var(--blue-tint); box-shadow: 0 0 0 1px var(--blue); }
.tel-valaszto button b { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; }
.tel-valaszto button span { display: block; font-size: .95rem; line-height: 1.45; color: var(--ink); }
@media (max-width: 900px) { .tel-egy { grid-template-columns: 1fr; gap: 24px; justify-items: center; } .tel-valaszto { order: 2; width: 100%; } }

/* ── 3 · telefon + kinagyított hirdetés ──────────────────────────────── */
.tel-nagyito { display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: center; }
.nagyito-kartya { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px; }
.nagyito-fej { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.nagyito-fej img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.nagyito-fej span { display: block; font-size: .8rem; color: var(--ink-3); }
.nagyito-fej b { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; letter-spacing: -.012em; margin: 2px 0; }
.nagyito-fej p { margin: 0; font-size: .9rem; color: var(--ink-2); }
.nagyito-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.nagyito-lista li { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.nagyito-lista li b { flex: 0 0 auto; min-width: 8.4em; color: var(--blue); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; }
@media (max-width: 900px) { .tel-nagyito { grid-template-columns: 1fr; gap: 26px; justify-items: center; } }

/* ══ Fókuszált karusszel — a középső éles, mellette halványan a többi ════ */
.kar { --kar-w: 300px; --kar-arany: 1.78; position: relative; overflow: hidden; padding: 12px 0 0; }
.kar-szinpad { position: relative; height: calc(var(--kar-w) * var(--kar-arany)); }
.kar-elem {
  position: absolute; left: 50%; top: 50%; width: var(--kar-w);
  padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .58s cubic-bezier(.32,.72,.28,1), opacity .42s ease, filter .42s ease;
  will-change: transform;
}
.kar-elem[data-poz="0"] { transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 3; cursor: default; filter: none; }
.kar-elem[data-poz="-1"] { transform: translate(-112%, -50%) scale(.84); opacity: .44; z-index: 1; filter: saturate(.55); }
.kar-elem[data-poz="1"] { transform: translate(12%, -50%) scale(.84); opacity: .44; z-index: 1; filter: saturate(.55); }
.kar-elem[data-poz="-1"]:hover, .kar-elem[data-poz="1"]:hover { opacity: .72; filter: saturate(.8); }
.kar-elem:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 6px; border-radius: 36px; }

.kar-also { text-align: center; padding-top: 22px; }
.kar-cim { margin: 0; font-family: var(--serif); font-size: 1.16rem; font-weight: 600; letter-spacing: -.012em; }
.kar-alcim { margin: 5px auto 0; max-width: 34em; font-size: .88rem; line-height: 1.5; color: var(--ink-3); }
.kar-pontok { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.kar-pontok button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line-2); cursor: pointer; transition: .22s; }
.kar-pontok button:hover { background: var(--ink-3); }
.kar-pontok button.on { background: var(--blue); transform: scale(1.3); }

/* ── A képernyő tartalma (közös mindhárom stílusban) ─────────────────── */
.kp {
  position: relative; aspect-ratio: 1 / var(--kar-arany); overflow: hidden;
  background: #000; color: #ececec; display: flex; flex-direction: column; text-align: left;
  font-family: -apple-system, "SF Pro Text", var(--sans);
}
.kp-statusz { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px 0; font-size: 12px; font-weight: 640; }
.kp-statusz .jelek { display: inline-flex; align-items: center; gap: 5px; }
.kp-statusz svg { height: 10.5px; width: auto; }
.kp-statusz .akku { width: 21px; height: 10.5px; border-radius: 3px; border: 1px solid rgba(236,236,236,.5); position: relative; }
.kp-statusz .akku::before { content: ""; position: absolute; inset: 1.5px; width: 44%; background: #ececec; border-radius: 1px; }
.kp-fejlec { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 11px 13px 6px; }
.kp-fejlec .cim { font-size: 14.5px; font-weight: 620; text-align: center; }
.kp-fejlec .ik { width: 29px; height: 29px; border-radius: 50%; background: rgba(120,120,128,.22); display: grid; place-items: center; }
.kp-fejlec .ik.jobb { justify-self: end; }
.kp-fejlec .ik svg { width: 15px; height: 15px; }
.kp-szal { flex: 1 1 auto; padding: 8px 14px 0; overflow: hidden; }
.kp-kerdes { margin: 0 0 16px auto; max-width: 84%; width: fit-content; background: #303030; border-radius: 19px; padding: 9px 13px; font-size: 13px; line-height: 1.42; color: #fff; }
.kp-valasz { margin: 0; font-size: 13px; line-height: 1.5; color: #ececec; }
.kp-valasz.ki { margin-top: 9px; }
.kp-valasz.ki b { font-weight: 660; color: #fff; }
.kp-ad { margin-top: 15px; }
.kp-ad-cimke { display: block; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8e8e93; margin-bottom: 6px; }
.kp-ad-kartya { display: flex; gap: 10px; align-items: center; background: #1c1c1e; border: 1px solid #333336; border-radius: 14px; padding: 9px; }
.kp-ad-kartya img { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 9px; object-fit: cover; background: #2c2c2e; }
.kp-ad-kartya span { display: block; font-size: 9px; color: #8e8e93; margin-bottom: 1px; }
.kp-ad-kartya b { display: block; font-size: 12.5px; font-weight: 640; color: #fff; line-height: 1.25; }
.kp-ad-kartya p { margin: 2px 0 0; font-size: 11px; line-height: 1.35; color: #b6b6bb; }
.kp-beviteli { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin: 8px 11px 0; background: #1c1c1e; border: 1px solid #313134; border-radius: 999px; padding: 4px 5px 4px 11px; }
.kp-beviteli .ik { color: #b6b6bb; display: grid; place-items: center; }
.kp-beviteli .ik svg { width: 16px; height: 16px; }
.kp-beviteli .ph { flex: 1 1 auto; font-size: 12.5px; color: #8e8e93; }
.kp-beviteli .korgomb { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; }
.kp-beviteli .korgomb svg { width: 13px; height: 13px; }
.kp-hazgomb { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 34%; height: 4px; border-radius: 3px; background: rgba(236,236,236,.5); }
.kp::after { content: ""; display: block; height: 18px; flex: 0 0 auto; }

/* ── A · csupasz: nincs keret, csak a lekerekített képernyő ──────────── */
.kar-csupasz .kp { border-radius: 30px; box-shadow: 0 26px 48px -26px rgba(20,18,14,.5), 0 0 0 1px rgba(20,18,14,.08); }

/* ── B · perem: hajszálvékony sötét szegély ──────────────────────────── */
.kar-perem .kar-elem > .kp { border-radius: 30px; }
.kar-perem .kar-elem { border-radius: 36px; background: #101012; padding: 5px; box-shadow: 0 28px 52px -26px rgba(20,18,14,.55), inset 0 0 0 1px rgba(255,255,255,.07); }

/* ── C · készülék: vékony fém perem, sziget ──────────────────────────── */
.kar-keszulek .kar-elem { border-radius: 44px; padding: 9px; background: linear-gradient(146deg,#6a6a70,#2a2a2e 32%,#1b1b1e 60%,#4a4a50); box-shadow: 0 0 0 1px rgba(10,9,7,.5), inset 0 0 0 1px rgba(255,255,255,.22), 0 34px 58px -28px rgba(20,18,14,.6); }
.kar-keszulek .kp { border-radius: 35px; }
.kar-keszulek .kar-elem::after { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 24%; height: 19px; background: #000; border-radius: 999px; z-index: 4; }
.kar-keszulek .kp-statusz { padding-top: 14px; }

@media (max-width: 700px) { .kar { --kar-w: 268px; } .kar-cim { font-size: 1.06rem; } }
@media (max-width: 420px) { .kar { --kar-w: 246px; } }