/* Ajánlat Stúdió – nyilvános főoldal. Az app.css tokenjeire épül (szín, betű). A hős egérmozgásra dől (3D), az induló csomag
   asztalon görgetésre animál, a példapanel élő ajánlatot rajzol (assets/pagepreview.js). Mobilon szellős, egyoszlopos:
   a nehéz vizuálok egyszerűsödnek vagy elmaradnak. Csökkentett mozgásnál minden a kész állapotban áll. */

.landing { --head-h: 76px; --lp-bg: #F7F5F1; --lp-shadow: 0 14px 34px rgba(75, 30, 109, .10), 0 2px 6px rgba(29, 26, 34, .06);
  --gut: max(16px, env(safe-area-inset-left, 0px)); --gut-r: max(16px, env(safe-area-inset-right, 0px));
  background: var(--lp-bg); color: var(--color-text); overflow-x: hidden; }
.landing em { font-style: normal; color: var(--brand-orange); }
.landing main { overflow-x: clip; }
.landing .btn.lg { padding: 14px 26px; font-size: var(--fs-md); border-radius: 12px; }
html { scroll-padding-top: calc(var(--head-h, 76px) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }   /* a menü és a horgonyok animáltan görgetnek */
.lp-skip { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: #fff; color: var(--brand-purple); font-weight: 700; }
.lp-skip:focus { left: 8px; }

/* fejléc */
/* a fejléc sávja teljes szélességű, a tartalma a szakaszokkal egy szélességű konténerben: logó | menü középen | belépés + gomb */
.lp-head { position: sticky; top: 0; z-index: 20;
  padding: 0 max(var(--gut-r), 2vw) 0 max(var(--gut), 2vw); background: color-mix(in srgb, #F7F5F1 82%, transparent);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid rgba(75, 30, 109, .08); }
.lp-brand { display: block; text-decoration: none; flex: none; }
.lp-brand .brand-logo { width: 66px; margin: 0; }
.lp-head-in { max-width: calc(1400px - 2 * max(16px, 2vw)); height: var(--head-h); margin: 0 auto; padding: 0 clamp(0px, 1vw, 16px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
.lp-nav { display: flex; justify-content: center; gap: clamp(18px, 2.4vw, 36px); }
.lp-nav a { position: relative; padding: 6px 0; }
.lp-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--brand-orange); transform: scaleX(0); transition: transform .25s var(--ease, ease); }
.lp-nav a:hover::after, .lp-nav a:focus-visible::after { transform: scaleX(1); }
.lp-nav a { color: var(--color-text-muted); font-weight: 600; font-size: 15px; text-decoration: none; }
.lp-nav a:hover { color: var(--brand-purple); }
.lp-head-actions { display: flex; gap: 18px; align-items: center; justify-self: end; }
.lp-head-actions .lp-login { padding-left: 18px; border-left: 1px solid rgba(75, 30, 109, .15); }
.lp-login { color: var(--brand-purple); font-weight: 700; text-decoration: none; }
.lp-login:hover { text-decoration: underline; }

/* tipográfia */
.lp-kicker { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-purple); }
.landing h1, .landing h2, .landing h3 { margin: 0; font-family: var(--font-head); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; color: var(--brand-purple); text-wrap: balance; }
.landing h1 { font-size: clamp(36px, 4.3vw, 72px); }
.landing h2 { font-size: clamp(32px, 3.6vw, 58px); }
.landing h3 { font-size: clamp(24px, 2.2vw, 36px); }
.lp-lead { margin: 20px 0 0; max-width: 40ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--color-text-muted); }
.lp-fine { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--color-text-muted); }
.lp-fine.center, .lp-note.center { text-align: center; }
.lp-note { margin: 18px 0 0; font-size: 14px; color: var(--color-text-muted); }
.lp-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.lp-micro { margin: 16px 0 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--color-text-muted); }
.lp-film-w { margin: 14px 0 0; }
.lp-film-link { display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 700; color: var(--brand-purple); text-decoration: none; transition: color .2s; }
.lp-film-link .pl { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; padding-left: 2px; font-size: 10px; color: #fff; background: var(--brand-purple); transition: transform .2s, background .2s; }
.lp-film-link:hover { color: var(--brand-orange); } .lp-film-link:hover .pl { transform: scale(1.1); background: var(--brand-orange); }
.lp-film-link:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 4px; border-radius: 8px; }
.lp-micro .ok { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: var(--color-success); }
.lp-copy.center { text-align: center; max-width: 820px; margin: 0 auto; }

/* szakasz-keret és -fejléc */
.lp-sec { max-width: 1400px; margin: 0 auto; padding: clamp(56px, 10vh, 120px) max(var(--gut-r), 2vw) 0 max(var(--gut), 2vw); }
.lp-sec-h { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 16px 48px; margin-bottom: clamp(24px, 4vh, 44px); padding: 0 clamp(0px, 1vw, 16px); }
.lp-sec-h .lp-lead { margin: 0; justify-self: end; }

/* ---------- 1 · hős: álló szöveg + laptop rétegekkel (a JS egérmozgásra dönti; a rétegek translateZ-vel lebegnek) ---------- */
.lp-hero { position: relative; min-height: calc(100vh - var(--head-h)); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center;
  gap: clamp(16px, 2vw, 40px); padding: clamp(24px, 5vh, 64px) 0 clamp(24px, 5vh, 64px) max(var(--gut), 5vw); max-width: 1680px; margin: 0 auto; overflow: hidden; }
.lp-hero-text { position: relative; z-index: 2; }
.lp-dev { position: relative; perspective: 1800px; perspective-origin: 50% 50%; margin-right: clamp(8px, 2vw, 40px); }
.lp-dev::before { content: ''; position: absolute; inset: 6% 4% 10% 14%; border-radius: 50%; filter: blur(70px); opacity: .55;
  background: radial-gradient(circle at 35% 45%, color-mix(in srgb, var(--brand-orange) 70%, transparent), transparent 60%), radial-gradient(circle at 70% 55%, color-mix(in srgb, var(--brand-purple) 55%, transparent), transparent 62%); }
.lp-dev-in { --rx: 2deg; --ry: -3deg; position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); will-change: transform; }
.lp-laptop { display: block; width: 100%; height: auto; filter: drop-shadow(0 40px 50px rgba(29,26,34,.18)); }
.lp-layer { position: absolute; transform-style: preserve-3d; background: #fff; border-radius: 16px; box-shadow: 0 26px 50px rgba(75,30,109,.22), 0 3px 8px rgba(29,26,34,.08); font-size: clamp(9px, .78vw, 13px); }
.ly-det { left: 12%; top: 2%; display: flex; align-items: center; gap: .8em; padding: .75em 1.1em; font-weight: 700; color: var(--color-text-muted); transform: translateZ(40px); white-space: nowrap; }
.ly-det .trk { position: relative; width: 7em; height: 6px; border-radius: 3px; background: #ECE8E3; }
.ly-det .fill { position: absolute; inset: 0 auto 0 0; width: 50%; border-radius: 3px; background: var(--brand-orange); }
.ly-det .knob { position: absolute; left: 50%; top: 50%; width: 1.25em; height: 1.25em; margin: -.625em 0 0 -.625em; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 0 0 3px var(--brand-orange) inset; }
.ly-det .on { color: var(--color-accent); }
.ly-as { left: 71%; top: 20%; width: 27%; padding: 1em 1.1em 1.1em; transform: translateZ(80px); }
.ly-as .ah { display: flex; align-items: center; gap: .5em; font-family: var(--font-head); font-weight: 800; color: var(--brand-purple); margin-bottom: .5em; } .ly-as .ah img { width: 1.6em; }
.ly-as p { margin: 0 0 .6em; line-height: 1.4; color: var(--color-text); }
.ly-ok { left: 6%; top: 74%; display: flex; align-items: center; gap: .6em; padding: .7em 1.2em; border-radius: 99px; font-family: var(--font-head); font-weight: 800; color: var(--brand-purple); transform: translateZ(110px); white-space: nowrap; }
.ly-ok i { font-style: normal; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--color-success); color: #fff; display: grid; place-items: center; }
.ly-ok b { margin-left: .4em; color: var(--color-text); }
.diff { display: flex; flex-wrap: wrap; gap: .35em; }
.diff span { padding: .25em .7em; border-radius: 99px; font-size: .9em; font-weight: 700; color: var(--color-accent); border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent); white-space: nowrap; background: #fff; }
.diff span.g { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 40%, transparent); }
.acts { display: flex; gap: .5em; margin-top: .8em; }
.acts span { padding: .45em .9em; border-radius: 9px; font-weight: 700; border: 1px solid #DDD7D0; background: #fff; }
.acts span.p { background: var(--brand-purple); border-color: var(--brand-purple); color: #fff; }

/* ---------- 2 · elválasztó sáv a szakmákkal ---------- */
.lp-band { max-width: 1400px; margin: 0 auto; padding: 28px max(var(--gut-r), 4vw) 28px max(var(--gut), 4vw); display: flex; align-items: center; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap;
  border-top: 1px solid rgba(75, 30, 109, .1); border-bottom: 1px solid rgba(75, 30, 109, .1); }
.lp-band p { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -.015em; line-height: 1.2; color: var(--brand-purple); max-width: 30ch; }
.lp-band-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-band-chips a { padding: 9px 16px; border-radius: 99px; background: #fff; border: 1px solid #E6E0EC; color: var(--brand-purple); font-weight: 700; font-size: 15px; text-decoration: none; transition: border-color .2s, transform .2s; }
.lp-band-chips a:hover { border-color: var(--brand-orange); transform: translateY(-2px); }

/* ---------- 3 · induló csomag: kijelölhető területek (hover, kattintás), kézi szintcsúszka, mozgó oszlopgrafikon ---------- */
.lp-start-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 48px); align-items: start; padding: clamp(28px, 3.4vw, 52px); border-radius: 30px; background: #fff; }
.lp-step-l { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--brand-purple); }
.lp-step-l b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-purple); color: #fff; font-size: 14px; }
.lp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lp-tile { position: relative; min-height: 64px; padding: 10px 40px 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 2px; text-align: left; font: inherit; cursor: pointer;
  background: #FBFAF8; border: 1.5px solid #ECE8E3; border-radius: 14px; color: var(--color-text); transition: border-color .2s, background .2s, transform .2s var(--ease, ease), box-shadow .2s; }
.lp-tile:hover { border-color: #DCCDB8; background: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(75,30,109,.10); }
.lp-tile[aria-pressed="true"] { border-color: var(--brand-orange); background: #FFF6F3; }
.lp-tile:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-purple) 40%, transparent); outline-offset: 2px; }
.lp-tile .t { font-family: var(--font-head); font-size: 15px; font-weight: 700; line-height: 1.15; }
.lp-tile .n { font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; }
.lp-tile .chk { position: absolute; right: 12px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 6px; border: 2px solid #DDD7D0; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 900; transition: background .2s, border-color .2s; }
.lp-tile[aria-pressed="true"] .chk { background: var(--brand-orange); border-color: var(--brand-orange); }
.lp-stats { display: flex; gap: clamp(20px, 3vw, 44px); margin: 28px 0 0; }
.lp-stats dt { font-family: var(--font-head); font-size: clamp(34px, 3vw, 50px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--brand-purple); }
.lp-stats dd { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--color-text-muted); }
.lp-slider { padding: 16px 20px 12px; background: #FBFAF8; border: 1px solid #ECE8E3; border-radius: 16px; }
.lp-slider-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--color-text-muted); }
.lp-slider-h b { font-family: var(--font-head); font-size: 22px; color: var(--brand-orange); text-align: right; }
.lp-range { width: 100%; height: 34px; margin: 0; accent-color: var(--brand-orange); cursor: pointer; }
.lp-ticks { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); }
.lp-ticks span.on { color: var(--color-accent); font-weight: 800; }
.lp-chart { display: flex; align-items: flex-end; gap: 10px; height: 280px; margin-top: 18px; padding: 0 2px; border-bottom: 2px solid #ECE8E3; }
.lp-bar { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.lp-bar .v { font-family: var(--font-head); font-size: 13px; font-weight: 800; white-space: nowrap; margin-bottom: 5px; color: var(--brand-purple); font-variant-numeric: tabular-nums; }
.lp-bar .col { width: 100%; max-width: 64px; border-radius: 9px 9px 0 0; background: linear-gradient(180deg, var(--c2), var(--c1)); height: 0; transition: height .45s var(--ease, ease); }
.lp-bar:hover .col { filter: brightness(1.08); }
.lp-legend { display: flex; gap: 10px; margin-top: 10px; }
.lp-legend span { flex: 1 1 0; min-width: 0; font-size: 11.5px; line-height: 1.25; font-weight: 600; color: var(--color-text-muted); text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.lp-legend small { display: block; font-weight: 500; opacity: .8; }
.lp-chart-empty { align-self: center; margin: auto; color: var(--color-text-muted); font-size: 14px; }
.lp-start .lp-note { margin-top: 14px; font-size: 13px; }
/* ---------- 4 · példák: képes kártyák ---------- */
.lp-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.lp-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid #ECE8E3; color: inherit; text-decoration: none;
  transition: transform .25s var(--ease, ease), box-shadow .25s, border-color .25s; }
.lp-card:hover, .lp-card:focus-visible { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(75,30,109,.14); border-color: #DCCDB8; }
.lp-card .lp-ph { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--c) 18%, #F3ECF8); }
.lp-card .lp-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease, ease); }
.lp-card:hover .lp-ph img { transform: scale(1.04); }
.lp-card .ph-none::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--c) 45%, transparent), transparent 60%), radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--brand-orange) 30%, transparent), transparent 55%); }
.lp-card .lp-tag { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 5px 11px; border-radius: 99px; background: rgba(255,255,255,.92); color: var(--brand-purple); font-size: 13px; font-weight: 800; }
.lp-card .bd { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 16px; }
.lp-card .bd > b { font-family: var(--font-head); font-size: 20px; line-height: 1.15; letter-spacing: -.015em; color: var(--brand-purple); }
.lp-card .bd > small { font-size: 14px; color: var(--color-text-muted); }
.lp-card .ft { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; border-top: 1px solid #F0ECE7; }
.lp-card .pr { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.3; } .lp-card .pr strong { display: block; font-size: 15px; color: var(--color-text); }
.lp-card .go { font-weight: 800; font-size: 14px; color: var(--brand-purple); white-space: nowrap; }

/* ---------- 5 · kiindulás: fülek ---------- */
.lp-tabs { display: inline-flex; gap: 4px; padding: 5px; margin: 0 0 18px clamp(0px, 1vw, 16px); border-radius: 14px; background: #fff; border: 1px solid #ECE8E3; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.lp-tabs::-webkit-scrollbar { display: none; }
.lp-tabs button { flex: none; border: 0; background: none; padding: 10px 16px; border-radius: 10px; font: inherit; font-weight: 700; font-size: 15px; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; }
.lp-tabs button[aria-selected="true"] { background: var(--brand-purple); color: #fff; }
.lp-way { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(24px, 4vw, 64px); min-height: 520px; padding: clamp(28px, 4vw, 56px); border-radius: 30px; background: #fff; overflow: hidden; }
.lp-way[hidden] { display: none; }
.lp-way .tx p { margin: 14px 0 0; max-width: 46ch; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; color: var(--color-text-muted); }
.lp-way .tx .lp-fine { font-size: 14px; }
.lp-way .vis { position: relative; height: 420px; }
.lp-way .lp-cw { height: auto; max-width: 560px; justify-self: center; width: 100%; }

/* sablonlegyező */
.lp-tpl { position: absolute; left: 50%; bottom: 8px; width: 150px; height: 210px; margin-left: -75px; transform-origin: 50% 330%; overflow: hidden;
  background: #fff; border: 1px solid #ECE8E3; border-radius: 14px; box-shadow: var(--lp-shadow); text-align: left; transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 5deg)); }
.lp-tpl.lp-fan-hot { z-index: 2; transform: translateY(-34px); box-shadow: 0 24px 50px rgba(255,74,46,.28), 0 0 0 3px var(--brand-orange); }
.lp-tpl .top { height: 84px; display: flex; align-items: flex-end; padding: 12px 14px; color: #fff; font-family: var(--font-head); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lp-tpl .nm { padding: 12px 14px 4px; font-family: var(--font-head); font-size: 16px; font-weight: 800; line-height: 1.15; color: var(--brand-purple); }
.lp-tpl .lp-tpl-n { padding: 0 14px; font-size: 13px; color: var(--color-text-muted); font-weight: 600; }

/* AS chatablak */
.lp-cw { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid #ECE8E3;
  box-shadow: 0 30px 60px rgba(75,30,109,.14), 0 3px 8px rgba(29,26,34,.06); text-align: left; font-size: 14.5px; }
.cw-h { display: flex; align-items: center; gap: 10px; height: 54px; flex: none; padding: 0 18px; border-bottom: 1px solid #ECE8E3; }
.cw-h img { width: 26px; } .cw-h b { font-family: var(--font-head); font-size: 15.5px; color: var(--brand-purple); }
.cw-h .live { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--color-success); }
.cw-h .live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); }
.cw-b { display: flex; flex-direction: column; gap: 11px; padding: 18px; background: linear-gradient(180deg, #FBFAF8, #fff); }
.cw-b .u { align-self: flex-end; max-width: 82%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--brand-purple); color: #fff; line-height: 1.4; }
.cw-b .u mark { background: rgba(255,255,255,.16); color: #fff; border-radius: 4px; padding: 0 3px; box-shadow: inset 0 -2px 0 var(--brand-orange); }
.cw-b .a { align-self: flex-start; max-width: 92%; padding: 11px 14px; border-radius: 16px 16px 16px 4px; background: #F4F1EE; line-height: 1.45; }
.cw-b .pl { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.cw-b .pl span { display: flex; justify-content: space-between; gap: 18px; padding: 6px 10px; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 600; }
.cw-b .pl em { font-style: normal; color: var(--color-text-muted); flex: none; white-space: nowrap; } .cw-b .pl .x { color: var(--color-text-muted); }
.cw-in { display: flex; align-items: center; gap: 10px; margin: 0 14px 14px; padding: 8px 8px 8px 14px; border-radius: 14px; border: 2px solid #E6E0EC; background: #fff; }
.cw-in span { flex: 1; color: #8A8393; } .cw-in i { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-purple); color: #fff; font-style: normal; display: grid; place-items: center; font-weight: 700; }

/* bármiből: szalvéta + e-mail + csúnya Excel → (AS) → rendezett javaslat */
.lp-any { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(230px, 1fr); align-items: center; gap: 14px; }
.lp-any .src { position: relative; height: 100%; min-height: 360px; }
.lp-any .nap { position: absolute; width: 74%; left: -4%; top: 0; transform: rotate(-6deg); filter: drop-shadow(0 16px 22px rgba(29,26,34,.18)); }
.lp-any .mail { position: absolute; left: 14%; top: 40%; width: 78%; padding: 12px 14px; background: #fff; border: 1px solid #D9D9D9; border-radius: 4px; box-shadow: 0 14px 30px rgba(29,26,34,.14);
  font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.45; color: #333; transform: rotate(2deg); }
.lp-any .mail .mh { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #E5E5E5; font-size: 11px; color: #777; } .lp-any .mail .mh b { color: #222; }
.lp-any .ugly { position: absolute; left: 0; bottom: 0; transform: rotate(-3deg); box-shadow: 0 14px 30px rgba(29,26,34,.14); background: #fff; }
.lp-any .ugly table { border-collapse: collapse; font-family: Calibri, 'Segoe UI', Arial, sans-serif; font-size: 12px; color: #000; }
.lp-any .ugly th { background: #EFEFEF; color: #555; font-weight: 400; border: 1px solid #C8C8C8; padding: 2px 6px; }
.lp-any .ugly td { border: 1px solid #D4D4D4; padding: 3px 8px; min-width: 64px; } .lp-any .ugly td.y { background: #FFF200; } .lp-any .ugly td.e { color: #C00000; font-weight: 700; }
.lp-any .arrow { position: relative; width: 54px; height: 54px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-orange) 18%, transparent), 0 12px 26px rgba(255,74,46,.3); }
.lp-any .arrow img { width: 30px; }
.lp-any .out { padding: 16px 18px 12px; border-radius: 16px; background: #fff; box-shadow: 0 26px 50px rgba(75,30,109,.16); font-size: 13.5px; }
.lp-any .qh { display: flex; flex-direction: column-reverse; gap: 2px; margin-bottom: 4px; } .lp-any .qh b { font-family: var(--font-head); font-size: 15px; color: var(--brand-purple); }
.lp-any .qh span { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); white-space: nowrap; }
.lp-any .sec { display: flex; align-items: center; gap: 7px; margin: 8px 0 2px; font-family: var(--font-head); font-size: 12.5px; font-weight: 800; color: var(--brand-purple); }
.lp-any .sec::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--brand-orange); }
.lp-any .r { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 34px; border-top: 1px solid #F0ECE7; font-weight: 600; }
.lp-any .r small { color: var(--color-text-muted); font-weight: 500; margin-left: 4px; } .lp-any .r b { white-space: nowrap; } .lp-any .r b:not(:only-child) { font-weight: 700; }

/* ---------- 6 · AS: lépések + jóváhagyott ajánlat ---------- */
.lp-as-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 5vw, 80px); padding: clamp(32px, 4vw, 64px); border-radius: 30px; background: #F3ECF8; }
.lp-steps { list-style: none; counter-reset: st; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.lp-steps li { counter-increment: st; position: relative; padding-left: 50px; font-size: 16px; line-height: 1.5; color: var(--color-text-muted); }
.lp-steps li::before { content: counter(st); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-purple); color: #fff; font-family: var(--font-head); font-weight: 800; }
.lp-steps b { display: block; color: var(--brand-purple); font-family: var(--font-head); font-size: 18px; }
.lp-qc { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.lp-qc .steps { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800; font-size: 14px; flex-wrap: wrap; justify-content: center; }
.lp-qc .steps span { padding: 7px 14px; border-radius: 99px; background: #fff; border: 2px solid #DDD7D0; color: var(--color-text-muted); }
.lp-qc .steps span.on { border-color: var(--brand-purple); color: var(--brand-purple); } .lp-qc .steps span.ok { background: var(--brand-purple); border-color: var(--brand-purple); color: #fff; }
.lp-qc .steps i { font-style: normal; color: #CFC6BD; }
.lp-qc .q { width: min(100%, 520px); padding: 18px 22px 14px; border-radius: 18px; background: #fff; box-shadow: 0 26px 50px rgba(75,30,109,.14); text-align: left; }
.lp-qc .qh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .lp-qc .qh b { font-family: var(--font-head); font-size: 18px; color: var(--brand-purple); }
.lp-qc .qh span { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-success); }
.lp-qc .r { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid #F0ECE7; font-size: 14.5px; font-weight: 600; }
.lp-qc .r > b { flex: none; white-space: nowrap; } .lp-qc .r > span { min-width: 0; }
.lp-qc .r small { color: var(--color-text-muted); font-weight: 600; margin-left: 4px; } .lp-qc .r small s { color: var(--color-text-muted); }
.lp-qc .r.chg small { color: var(--color-accent); font-weight: 800; }
.lp-qc .r.del span, .lp-qc .r.del b { color: var(--color-text-muted); text-decoration: line-through; text-decoration-color: var(--brand-orange); text-decoration-thickness: 2px; }
.lp-qc .r.new { margin: 0 -10px; padding: 0 10px; border-radius: 8px; background: linear-gradient(90deg, #E6F3EC, #fff 70%); }
.lp-qc .r.new i { font-style: normal; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent); }
.lp-qc .sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; padding-top: 10px; border-top: 2px solid var(--brand-purple); font-size: 14px; font-weight: 700; }
.lp-qc .sum b { font-family: var(--font-head); font-size: 26px; color: var(--brand-purple); }

/* ---------- 7 · „ablak” elválasztó ---------- */
.lp-window { position: relative; height: clamp(360px, 55vh, 580px); clip-path: inset(0); display: grid; place-items: center; text-align: center; margin: clamp(56px, 10vh, 120px) 0 0; }
.lp-window .bg { position: fixed; inset: 0; z-index: -1; background: #2B0F3A url('landing/ablak.webp') center / cover no-repeat; }
.lp-window .lp-win-in { position: relative; max-width: 980px; padding: 0 20px; }
.lp-window h2 { color: #fff; font-size: clamp(34px, 4.6vw, 76px); text-shadow: 0 4px 30px rgba(43,15,58,.35); }
.lp-window em { color: #FFD3C8; }
.lp-window p { margin: 22px auto 0; max-width: 52ch; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: rgba(255,255,255,.88); }

/* ---------- 8 · a kész ajánlat ---------- */
.lp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.lp-t { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 680px; overflow: hidden;
  padding: clamp(32px, 3.4vw, 52px) clamp(22px, 3vw, 44px); border-radius: 30px; background: #fff; }
.lp-t > p { margin: 14px 0 0; max-width: 44ch; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; color: var(--color-text-muted); }
.lp-t .vis { position: relative; width: 100%; flex: none; height: clamp(340px, 31vw, 440px); margin: auto 0 0; }
.lp-t.wide { grid-column: 1 / -1; flex-direction: row; text-align: left; align-items: center; gap: clamp(24px, 4vw, 64px); min-height: 520px; }
.lp-t.wide .tx { flex: .8; } .lp-t.wide .tx p { margin: 14px 0 0; max-width: 46ch; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; color: var(--color-text-muted); }
.lp-t.wide .tx .lp-fine { font-size: 14px; }
.lp-t.wide .vis { flex: 1.2; height: 420px; margin: 0; }
.t-o { background: #FFF0EB; } .t-p { background: #F3ECF8; }
.t-d { background: var(--brand-purple); } .t-d h3 { color: #fff; } .t-d em { color: #FF9A85; } .lp-t.t-d > p { color: rgba(255,255,255,.78); }
.lp-seg { display: inline-flex; gap: 3px; padding: 4px; margin-top: 22px; border-radius: 12px; background: #F1EDF5; }
.lp-seg button { border: 0; background: none; padding: 8px 14px; border-radius: 9px; font: inherit; font-weight: 700; font-size: 14px; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; }
.lp-seg button[aria-pressed="true"] { background: #fff; color: var(--brand-purple); box-shadow: 0 2px 6px rgba(75,30,109,.14); }
.t-d .lp-seg { background: rgba(255,255,255,.12); } .t-d .lp-seg button { color: rgba(255,255,255,.75); } .t-d .lp-seg button[aria-pressed="true"] { background: #fff; color: var(--brand-purple); }
/* élő lap a csempén: felül kilóg a csempe alján (mintha a lap kicsúszna) */
.lp-detail .vis { display: flex; justify-content: center; }
.lp-detail .lp-live { width: min(78%, 400px); margin-top: 34px; align-self: flex-start; border-radius: 6px 6px 0 0; overflow: hidden; box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
.lp-deck figure { position: absolute; left: 50%; top: 14%; width: 44%; margin: 0 0 0 -22%; transform-origin: 50% 160%; transform: rotate(calc((var(--i) - 1) * 9deg)); transition: transform .4s var(--ease, ease); }
.lp-deck figure .lp-live { border-radius: 4px; overflow: hidden; box-shadow: 0 18px 40px rgba(75,30,109,.2); background: #fff; }
.lp-deck figcaption { position: absolute; left: 0; right: 0; top: -30px; text-align: center; font-family: var(--font-head); font-weight: 800; font-size: 13px; color: var(--brand-purple); opacity: 0; transition: opacity .3s; }
.lp-looks:hover .lp-deck figure { transform: rotate(calc((var(--i) - 1) * 16deg)) translateY(-14px); }
.lp-looks:hover .lp-deck figcaption { opacity: 1; }
.lp-out .a4 { position: absolute; left: 4%; top: 0; width: 40%; border-radius: 3px; overflow: hidden; box-shadow: 0 20px 44px rgba(75,30,109,.18); transform: rotate(-4deg); background: #fff; }
.lp-xls { position: absolute; right: 2%; top: 18%; width: 62%; background: #fff; border-radius: 8px; box-shadow: 0 22px 46px rgba(29,26,34,.18); overflow: hidden; font-size: 13px; text-align: left; }
.lp-xls .bar { height: 36px; background: #1F7A4D; color: #fff; display: flex; align-items: center; padding: 0 14px; font-weight: 700; }
.lp-xls .fx { height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid #E1E4E6; font-family: Consolas, monospace; color: #3A3E44; } .lp-xls .fx i { font-style: normal; font-weight: 700; color: #1F7A4D; }
.lp-xls table { border-collapse: collapse; width: 100%; } .lp-xls td, .lp-xls th { border: 1px solid #E1E4E6; height: 34px; padding: 0 9px; white-space: nowrap; text-align: left; } .lp-xls .n { text-align: right; }
.lp-xls tr.h td, .lp-xls tr.h th { font-weight: 700; background: #F7F8F6; } .lp-xls tr.t td { font-weight: 800; border-top: 2px solid #1D232B; }
.lp-xls td.edit { outline: 2px solid #1F7A4D; outline-offset: -2px; background: #E8F5EE; font-weight: 700; }

/* ---------- 9 · folytonosság: három kis csempe ---------- */
.lp-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.lp-mini { display: flex; flex-direction: column; padding: clamp(26px, 2.6vw, 40px); border-radius: 26px; background: #fff; min-height: 520px; border: 1px solid transparent; transition: transform .25s var(--ease, ease), box-shadow .25s, border-color .25s; }
.lp-mini:hover { transform: translateY(-4px); border-color: #E8DCCB; box-shadow: 0 18px 40px rgba(90, 64, 30, .10); }
.lp-mini h3 { font-size: clamp(22px, 1.8vw, 28px); }
.lp-mini > p { margin: 12px 0 26px; font-size: 15.5px; line-height: 1.5; color: var(--color-text-muted); }
.lp-mini .vis { margin-top: auto; }
.lp-price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; text-align: left; }
.lp-price .lp-pl-box { grid-column: 1 / -1; padding: 6px 16px; border-radius: 16px; background: #fff; box-shadow: var(--lp-shadow); }
.lp-price .cr { display: flex; justify-content: space-between; gap: 10px; min-height: 44px; align-items: center; border-top: 1px solid #F0ECE7; font-size: 14px; font-weight: 600; } .lp-price .cr:first-child { border-top: 0; }
.lp-price .cr b { color: var(--color-accent); white-space: nowrap; } .lp-price .cr s { color: var(--color-text-muted); font-weight: 500; margin-right: 4px; }
.lp-price .mini { padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: var(--lp-shadow); display: flex; flex-direction: column; gap: 6px; }
.lp-price .mini.new { box-shadow: var(--lp-shadow), 0 0 0 2px var(--brand-orange); }
.lp-price .lp-pill { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-purple); } .lp-price .mini.new .lp-pill { color: var(--color-accent); }
.lp-price .mr { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 600; } .lp-price .mr b { font-family: var(--font-head); color: var(--brand-purple); white-space: nowrap; }
.lp-price small { font-size: 12.5px; color: var(--color-text-muted); }
.lp-list { padding: 14px 16px 10px; border-radius: 18px; background: #F7F5F1; text-align: left; }
.lp-list .srch { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px; border: 2px solid #D9C9EC; border-radius: 12px; background: #fff; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.lp-list .srch i { width: 13px; height: 13px; border: 2px solid var(--brand-purple); border-radius: 50%; }
.lp-list .cur { width: 2px; height: 18px; background: var(--brand-purple); animation: lp-blink 1.1s steps(2) infinite; }
@keyframes lp-blink { 50% { opacity: 0; } }
.lp-list .li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 58px; border-top: 1px solid #ECE8E3; font-size: 14px; font-weight: 600; }
.lp-list .li small { display: block; color: var(--color-text-muted); font-size: 12.5px; font-weight: 500; }
.lp-list .li .pr { text-align: right; font-weight: 800; white-space: nowrap; } .lp-list .li em { display: block; font-style: normal; font-size: 12px; font-weight: 700; } .lp-list .li em.ok { color: var(--color-success); } .lp-list .li em.wip { color: #B5761B; }
.lp-team .lp-tcard { padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: var(--lp-shadow); text-align: left; display: flex; flex-direction: column; }
.lp-team .tt { font-family: var(--font-head); font-size: 19px; color: var(--brand-purple); } .lp-team .ts { font-size: 13px; color: var(--color-text-muted); margin-bottom: 8px; }
.lp-team .mem { display: flex; align-items: center; gap: 12px; min-height: 46px; border-top: 1px solid #F0ECE7; font-weight: 600; font-size: 14px; }
.lp-team .mem small { margin-left: auto; color: var(--color-text-muted); }
.lp-team .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; flex: none; }

/* ---------- 10 · film ---------- */
.lp-film { padding: clamp(64px, 12vh, 140px) max(var(--gut-r), 5vw) 0 max(var(--gut), 5vw); }
.lp-film .frame { position: relative; max-width: 1100px; margin: 40px auto 0; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 40%, rgba(255,74,46,.35), transparent 55%), radial-gradient(circle at 75% 60%, rgba(75,30,109,.55), transparent 60%), #1D1A22; }
.lp-film .frame video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: #1D1A22; }
.lp-film .play { position: absolute; z-index: 1; width: 88px; height: 88px; border: 0; border-radius: 50%; cursor: pointer; background: #fff; color: var(--brand-purple);
  display: grid; place-items: center; font-size: 30px; padding-left: 7px; box-shadow: 0 20px 50px rgba(0,0,0,.35); transition: transform .2s; }
.lp-film .play:hover { transform: scale(1.06); } .lp-film .play:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 4px; }
.lp-film .frame.playing .play { display: none; }
.lp-film .frame.sq { aspect-ratio: 1 / 1; }   /* telefonon a négyzetes film (landing.js) */
.lp-film .lp-lead { margin-left: auto; margin-right: auto; max-width: 56ch; }

/* ---------- 11 · ár és próba ---------- */
.lp-price-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; gap: clamp(28px, 5vw, 80px); padding: clamp(32px, 4vw, 64px); border-radius: 30px; background: #FFF0EB; }
.lp-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.lp-checks li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.45; font-weight: 600; }
.lp-checks li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff; background: var(--color-success); }
.lp-plan { display: flex; flex-direction: column; padding: 30px 30px 24px; border-radius: 24px; background: #fff; box-shadow: 0 26px 60px rgba(75,30,109,.16); }
.lp-plan-k { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-purple); }
.lp-plan-p { margin: 10px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lp-plan-p b { font-family: var(--font-head); font-size: clamp(34px, 3vw, 44px); letter-spacing: -.02em; color: var(--brand-purple); }
.lp-plan-p span { font-weight: 700; color: var(--color-text-muted); }
.lp-plan-g { margin: 4px 0 0; font-size: 14px; color: var(--color-text-muted); }
.lp-plan .lp-checks { margin-bottom: 26px; } .lp-plan .lp-checks li { font-size: 15px; }
.lp-plan .btn { justify-content: center; }

/* ---------- 12 · gyakori kérdések ---------- */
.lp-faq-list { max-width: 880px; margin: 0 auto; display: grid; gap: 10px; }
.lp-faq-list details { border-radius: 16px; background: #fff; border: 1px solid #ECE8E3; transition: border-color .2s; }
.lp-faq-list details[open] { border-color: #DCCDB8; }
.lp-faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--brand-purple); }
.lp-faq-list summary::-webkit-details-marker { display: none; }
.lp-faq-list summary::after { content: '+'; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #F3ECF8; font-size: 18px; }
.lp-faq-list details[open] summary::after { content: '–'; }
.lp-faq-list p { margin: 0; padding: 0 22px 20px; max-width: 70ch; font-size: 16px; line-height: 1.6; color: var(--color-text-muted); }
.lp-faq .lp-sec-h { grid-template-columns: minmax(0, 1fr); text-align: center; }

/* ---------- 13 · zárás, lábléc ---------- */
.lp-end { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; padding: clamp(80px, 14vh, 160px) var(--gut-r) clamp(80px, 14vh, 160px) var(--gut); }
.lp-end .lp-lead { margin: 0 auto; max-width: 52ch; }
.lp-end-login { margin: 0; color: var(--color-text-muted); font-size: 14px; }
.lp-end-login a { color: var(--brand-purple); font-weight: 700; }
.lp-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 26px max(var(--gut-r), 5vw) calc(26px + env(safe-area-inset-bottom, 0px)) max(var(--gut), 5vw); border-top: 1px solid #ECE8E3; font-size: 14px; color: var(--color-text-muted); }
.lp-foot a { color: inherit; } .lp-foot span a { margin: 0 2px; }

/* ---------- részletek: lenyíló szövegpanel ---------- */
.lp-more { grid-column: 1 / -1; }
.lp-more.solo { max-width: 1400px; margin: 0 auto; padding: clamp(8px, 2vh, 24px) var(--gut-r) 0 var(--gut); }
.lp-more-row { display: grid; justify-items: center; }
.lp-more-btn { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 9px 16px 9px 12px; border-radius: 12px; border: 1px solid rgba(75, 30, 109, .2); background: transparent;
  color: var(--color-text); font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.3; cursor: pointer; transition: background-color .2s, border-color .2s; }
.lp-more-btn:hover { background: rgba(75, 30, 109, .06); border-color: rgba(75, 30, 109, .45); }
.lp-more-btn .ico { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--brand-purple); color: var(--brand-purple); }
.lp-more-btn .ico::before, .lp-more-btn .ico::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .25s ease, opacity .25s ease; }
.lp-more-btn .ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.lp-more-btn[aria-expanded="true"] .ico::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
html:not(.lp-js) .lp-more-row { display: none; }
.lp-panel { display: grid; grid-template-rows: 1fr; }
.lp-js .lp-panel { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .3s ease, opacity .3s ease; }
.lp-js .lp-panel.open { grid-template-rows: 1fr; opacity: 1; }
.lp-panel > div { overflow: hidden; min-height: 0; }
.lp-panel .txt { max-width: 780px; margin: 0 auto; padding: clamp(16px, 2.4vh, 28px) 4px 8px; display: flex; flex-direction: column; gap: 14px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65; }
.lp-panel .txt p { margin: 0; }
.lp-panel .txt p:first-child { font-family: var(--font-head); font-size: clamp(19px, 1.5vw, 23px); font-weight: 800; line-height: 1.3; color: var(--brand-purple); }

/* ---------- példapanel (dialog): asztalon jobbról nyíló, széles panel; mobilon teljes képernyő, alul rögzített összeggel ---------- */
.lp-demo { position: fixed; inset: 0 0 0 auto; width: min(1080px, 96vw); height: 100%; max-height: none; max-width: none; margin: 0; padding: 0; border: 0;
  background: #FBFAF8; color: var(--color-text); box-shadow: -30px 0 80px rgba(29,26,34,.28); display: none; flex-direction: column; overflow: hidden; }
.lp-demo[open] { display: flex; }
.lp-demo { transform: translateX(104%); transition: transform .42s cubic-bezier(.22, .8, .24, 1); }   /* jobbról csúszik be, bezáráskor ki – mint az app oldalpanelje */
.lp-demo.show { transform: none; }
.lp-demo::backdrop { background: rgba(29,26,34,.42); backdrop-filter: blur(3px); }
.lp-demo::backdrop { transition: opacity .42s; opacity: 0; } .lp-demo.show::backdrop { opacity: 1; }
html.lp-demo-open { overflow: hidden; }
.dm-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 16px; align-items: start; padding: 22px 28px 16px; border-bottom: 1px solid #ECE8E3; background: #fff; }
.dm-ht .lp-kicker { margin-bottom: 6px; font-size: 12px; }
.dm-ht h2 { font-size: clamp(24px, 2.4vw, 34px); }
.dm-x { width: 42px; height: 42px; border-radius: 50%; border: 0; background: #F3F0EC; font-size: 18px; cursor: pointer; color: var(--brand-purple); }
.dm-x:hover { background: #EAE4DD; }
.dm-chips { grid-column: 1 / -1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
.dm-chips::-webkit-scrollbar { display: none; }
.dm-chips button { flex: none; padding: 7px 14px; border-radius: 99px; border: 1px solid #E6E0EC; background: #fff; font: inherit; font-weight: 700; font-size: 14px; color: var(--color-text-muted); cursor: pointer; }
.dm-chips button[aria-pressed="true"] { background: var(--brand-purple); border-color: var(--brand-purple); color: #fff; }
.dm-b { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
.dm-side { overflow-y: auto; padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 18px; border-right: 1px solid #ECE8E3; background: #fff; }
.dm-l { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.dm-brief { padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: #F4F1EE; }
.dm-brief p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
.dm-brief small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--color-text-muted); }
.dm-lv { display: flex; justify-content: space-between; align-items: baseline; }
.dm-lv b { font-family: var(--font-head); font-size: 20px; color: var(--brand-orange); }
.dm-ctl input[type="range"] { width: 100%; margin: 12px 0 0; accent-color: var(--brand-orange); height: 28px; cursor: pointer; }
.dm-ticks { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.dm-ticks span.on { color: var(--color-accent); font-weight: 800; }
.dm-row .lp-seg { margin-top: 8px; display: flex; } .dm-row .lp-seg button { flex: 1; padding: 8px 6px; font-size: 13.5px; }
.dm-sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 14px 16px; border-radius: 16px; background: var(--brand-purple); color: rgba(255,255,255,.8); font-weight: 700; font-size: 14px; }
.dm-sum b { font-family: var(--font-head); font-size: 28px; color: #fff; font-variant-numeric: tabular-nums; }
.dm-sum small { flex-basis: 100%; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.65); }
.dm-side .lp-fine { margin: 0; font-size: 13px; }
.dm-cta { justify-content: center; }
.dm-credit { font-size: 11.5px; color: var(--color-text-muted); }
.dm-page { overflow-y: auto; padding: 28px; display: flex; justify-content: center; align-items: flex-start; background: #EFEBE6; }
.dm-paper { width: min(100%, 620px); border-radius: 4px; overflow: hidden; box-shadow: 0 20px 50px rgba(29,26,34,.2); background: #fff; }
.dm-bar { display: none; }

/* ---------- tablet ---------- */
@media (max-width: 1180px) {
  .lp-nav { display: none; }
  .lp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .lp-trio .lp-mini:last-child { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 960px) {
  .lp-sec-h { grid-template-columns: minmax(0, 1fr); } .lp-sec-h .lp-lead { justify-self: start; }
  .lp-way, .lp-as-in, .lp-price-in { grid-template-columns: minmax(0, 1fr); }
  .lp-way { min-height: 0; }
  .lp-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-t.wide { flex-direction: column; text-align: center; } .lp-t.wide .vis { width: 100%; }
  .dm-b { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .dm-side { overflow: visible; border-right: 0; border-bottom: 1px solid #ECE8E3; }
  .dm-page { overflow: visible; }
}

/* ---------- telefon: szellős, egyoszlopos; a nehéz vizuálok egyszerűsödnek vagy elmaradnak ---------- */
@media (max-width: 760px) {
  .landing { --head-h: 64px; }
  .lp-brand .brand-logo { width: 54px; }
  .lp-head .btn { padding: 9px 14px; font-size: 14px; } .lp-hide-s { display: none; }
  .lp-kicker { font-size: 12px; letter-spacing: .16em; }
  .landing h1 { font-size: clamp(34px, 9.6vw, 44px); } .landing h2 { font-size: clamp(30px, 8.4vw, 38px); } .landing h3 { font-size: 26px; }
  .lp-lead { font-size: 17px; }
  .lp-sec { padding-top: 72px; }

  .lp-hero { grid-template-columns: minmax(0, 1fr); min-height: auto; padding: 28px var(--gut-r) 36px var(--gut); gap: 26px; }
  .lp-cta { flex-direction: column; } .lp-cta .btn { justify-content: center; }
  .lp-dev { margin: 0 -10% 0 -4%; } .lp-layer { font-size: 9.5px; } .ly-as { display: none; }

  .lp-band { flex-direction: column; align-items: flex-start; padding: 26px var(--gut-r) 26px var(--gut); }
  .lp-band-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: calc(100% + var(--gut) + var(--gut-r)); margin: 0 calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut)); padding: 0 var(--gut-r) 4px var(--gut); }
  .lp-band-chips::-webkit-scrollbar { display: none; } .lp-band-chips a { flex: none; }

  .lp-start-in { grid-template-columns: minmax(0, 1fr); padding: 24px 18px; border-radius: 24px; gap: 28px; }
  .lp-tile { min-height: 56px; padding: 8px 34px 8px 12px; } .lp-tile .t { font-size: 14px; }
  .lp-chart { height: 220px; gap: 6px; } .lp-bar .v { font-size: 11px; } .lp-legend { gap: 6px; } .lp-legend span { font-size: 10.5px; }
  .lp-stats { gap: 26px; } .lp-stats dt { font-size: 36px; }

  /* példák: vízszintesen lapozható kártyák */
  .lp-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut)); padding: 4px var(--gut-r) 18px var(--gut); scroll-padding: 0 var(--gut); }
  .lp-cards::-webkit-scrollbar { display: none; }
  .lp-card { flex: 0 0 78%; scroll-snap-align: start; }
  .lp-card:hover { transform: none; }

  .lp-tabs { display: flex; margin-left: 0; } .lp-tabs button { padding: 9px 12px; font-size: 14px; }
  .lp-way { padding: 26px 20px; border-radius: 24px; gap: 26px; }
  .lp-way .vis { height: 340px; }
  .lp-tpl { width: 124px; height: 176px; margin-left: -62px; } .lp-tpl .top { height: 66px; }
  .lp-any { grid-template-columns: minmax(0, 1fr); height: auto !important; } .lp-any .src { display: none; } .lp-any .arrow { display: none; }   /* mobilon csak az eredmény */
  .lp-way .lp-any { height: auto; }
  .lp-cw { font-size: 13.5px; }

  .lp-as-in { padding: 28px 20px; border-radius: 24px; }
  .lp-qc .steps { display: none; }
  .lp-qc .q { padding: 14px 16px 10px; }

  .lp-window { height: 360px; margin-top: 72px; }

  .lp-t { min-height: 0; padding: 30px 20px 0; border-radius: 24px; }
  .lp-t .vis { height: 330px; margin-top: 26px; }
  .lp-detail .lp-live { width: 86%; }
  .lp-deck figure { width: 54%; margin-left: -27%; }
  .lp-out-t { padding-bottom: 30px; } .lp-out-t .vis { height: auto; margin-top: 22px; }
  .lp-out .a4 { display: none; } .lp-xls { position: static; width: 100%; }   /* mobilon csak a táblázat: a PDF-lap a fenti csempéken már látszik */
  .lp-looks .vis { height: 290px; } .lp-deck figure { top: 10%; }
  .lp-xls { font-size: 12.5px; } .lp-xls td, .lp-xls th { height: 34px; padding: 0 8px; }

  .lp-trio { grid-template-columns: minmax(0, 1fr); } .lp-trio .lp-mini:last-child { grid-column: auto; }
  .lp-mini { min-height: 0; padding: 26px 20px; border-radius: 24px; }
  .lp-trio .lp-mini:nth-child(2) .lp-list .li:nth-of-type(3) { display: none; }
  .lp-price .mr { flex-direction: column; gap: 2px; }

  .lp-film { padding-top: 72px; } .lp-film .frame { border-radius: 18px; margin-top: 26px; } .lp-film .play { width: 70px; height: 70px; font-size: 24px; }
  .lp-price-in { padding: 28px 20px; border-radius: 24px; } .lp-plan { padding: 24px 20px 20px; }
  .lp-faq-list summary { font-size: 16.5px; padding: 16px 18px; } .lp-faq-list p { padding: 0 18px 18px; font-size: 15.5px; }
  .lp-faq .lp-sec-h { text-align: left; }
  .lp-end { gap: 18px; } .lp-end .btn { width: 100%; max-width: 360px; justify-content: center; }
  .lp-foot { flex-direction: column; }

  /* példapanel: teljes képernyő; az összeg és a szint alul, rögzítve */
  .lp-demo { width: 100%; inset: 0; box-shadow: none; }
  .dm-h { padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gut-r) 12px var(--gut); gap: 10px 12px; }
  .dm-chips { margin: 0 calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut)); padding: 0 var(--gut-r) 0 var(--gut); }
  /* sorrend mobilon: az ügyfél kérése → az élő lap → a többi beállítás; a szintcsúszka és az összeg az alsó sávban,
     így húzás közben a lap a szemed előtt frissül */
  .dm-b { display: flex; flex-direction: column; gap: 16px; padding: 16px var(--gut-r) 24px var(--gut); background: #EFEBE6; }
  .dm-side { display: contents; }
  .dm-side > * { order: 3; }
  .dm-side > .dm-brief { order: 1; background: #fff; }
  .dm-page { order: 2; padding: 0; background: none; overflow: visible; }
  .dm-side > .dm-level, .dm-side .dm-sum { display: none; }   /* a szint és az összeg az alsó sávban van */
  .dm-row { padding: 12px 14px; border-radius: 14px; background: #fff; }
  .dm-paper { width: 100%; }
  .dm-bar { display: grid; gap: 4px; padding: 10px var(--gut-r) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gut); background: var(--brand-purple); color: rgba(255,255,255,.85); }
  .dm-bar-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 700; font-size: 14px; }
  .dm-bar b { font-family: var(--font-head); font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; }
  .dm-bar input[type="range"] { width: 100%; height: 30px; margin: 0; accent-color: var(--brand-orange); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-list .cur { animation: none; }
  .lp-js .lp-panel, .lp-more-btn, .lp-more-btn .ico::before, .lp-more-btn .ico::after, .lp-bar .col, .lp-tile, .lp-mini, .lp-card, .lp-card .lp-ph img, .lp-deck figure, .lp-demo, .lp-demo::backdrop { transition: none; }

}
.lp-credits { flex-basis: 100%; font-size: 12px; color: var(--color-text-muted); }

/* 0.52.5: a második szekció is „ablak” elválasztó (saját, színátmenetes háttérrel, hogy ne ismételje a lejjebbi képet) */
.lp-window.lp-window-2 { margin-top: clamp(24px, 4vh, 48px); height: auto; min-height: clamp(320px, 46vh, 480px); padding: clamp(48px, 8vh, 88px) 0; }
/* „Hogyan készült?” – az első elválasztó: cím, a kutatás mondata és a Részletek gomb a módszertanra */
.lp-window.lp-window-2 p { text-shadow: 0 2px 18px rgba(43, 15, 58, .6), 0 1px 3px rgba(43, 15, 58, .35); color: #fff; }
.lp-window .lp-how-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; padding: 12px 26px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 999px; color: #fff; font-weight: 800; font-size: 16px; text-decoration: none;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
.lp-window .lp-how-btn::after { content: '›'; font-size: 1.3em; line-height: 1; transition: transform .2s; }
.lp-window .lp-how-btn:hover, .lp-window .lp-how-btn:focus-visible { background: #fff; color: var(--brand-purple); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(43, 15, 58, .35); }
.lp-window .lp-how-btn:hover::after, .lp-window .lp-how-btn:focus-visible::after { transform: translateX(3px); }
.lp-window .lp-how-btn:focus-visible { outline: 3px solid #FFD3C8; outline-offset: 3px; }
.lp-window.lp-window-2 .bg { background: radial-gradient(120% 90% at 15% 20%, #FF4A2E 0%, rgba(255, 74, 46, 0) 55%), radial-gradient(110% 90% at 85% 80%, #9A86B0 0%, rgba(154, 134, 176, 0) 60%), #4B1E6D; }
.lp-window.lp-window-2 h2 { font-size: clamp(30px, 3.8vw, 60px); }
/* fejléc: a menüpontok ne törjenek két sorba (Mac, nagyobb betűméret); szűkebb helyen a menü elrejtve */
.lp-nav a, .lp-head-actions a { white-space: nowrap; }
@media (max-width: 1320px) { .lp-nav { gap: clamp(14px, 1.6vw, 24px); } .lp-nav a { font-size: 14px; } }
@media (max-width: 1240px) { .lp-nav { display: none; } }
/* AS-példa: a törölt sor egyértelműen törölt, és nem számít bele a végösszegbe */
.lp-qc .r.del .out { font-style: normal; text-decoration: none; display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: #FFE4DE; color: #B4321B; font-size: 11.5px; font-weight: 700; }
.lp-qc .sum small { font-weight: 500; color: var(--color-text-muted); font-size: 12px; }
.lp-plan .lp-checks small { display: block; color: var(--color-text-muted); font-size: 12.5px; font-weight: 500; }
.lp-as .lp-lead { margin: 10px 0 18px; }

/* 0.52.7: hős-vizuál – a termék mechanizmusa három nagy, olvasható lépésben a (halványított) laptop előtt */
.lp-dev .lp-laptop { opacity: .45; filter: saturate(.7); }
.ly-s1, .ly-s2, .ly-s3, .ly-as2 { font-size: clamp(12px, .95vw, 16px); display: flex; align-items: center; gap: .7em; padding: .9em 1.2em; white-space: nowrap; }
.lp-layer .n { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; background: var(--brand-purple); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: .9em; }
.lp-layer .n.ok { background: var(--color-success); font-size: 1em; }
.lp-layer .h { font-weight: 700; color: var(--color-text-muted); }
.ly-s1 { left: 0; top: 6%; transform: translateZ(60px); }
.ly-s1 .chips { display: flex; gap: .35em; }
.ly-s1 .chips b { padding: .35em .8em; border-radius: 99px; background: var(--brand-purple); color: #fff; font-size: .9em; }
.ly-s2 { left: 36%; top: 36%; transform: translateZ(90px); }
.ly-s2 .trk { position: relative; width: 7em; height: 7px; border-radius: 4px; background: #ECE8E3; }
.ly-s2 .fill { position: absolute; inset: 0 auto 0 0; width: 50%; border-radius: 4px; background: var(--brand-orange); }
.ly-s2 .knob { position: absolute; left: 50%; top: 50%; width: 1.3em; height: 1.3em; margin: -.65em 0 0 -.65em; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 0 0 3px var(--brand-orange) inset; }
.ly-s2 .on { font-family: var(--font-head); font-weight: 800; color: var(--brand-orange); font-size: 1.15em; }
.ly-s3 { left: 8%; top: 66%; padding: 1.1em 1.5em; transform: translateZ(130px); flex-wrap: wrap; row-gap: .1em; }
.ly-s3 .big { font-family: var(--font-head); font-weight: 800; font-size: 1.55em; color: var(--brand-purple); letter-spacing: -.01em; }
.ly-s3 .sm { flex-basis: 100%; padding-left: 2.6em; color: var(--color-text-muted); font-weight: 600; }
.ly-as2 { left: 66%; top: 74%; padding: .7em 1em; font-size: clamp(11px, .8vw, 14px); transform: translateZ(70px); border-radius: 14px; }
.ly-as2 img { width: 1.8em; }
.ly-as2 span { display: grid; color: var(--color-text-muted); }
.ly-as2 b { color: var(--brand-purple); font-family: var(--font-head); }
@media (max-width: 760px) {
  .ly-s1, .ly-s2, .ly-s3 { font-size: 11px; }
  .ly-as2 { display: none; }
  .ly-s2 { left: 30%; }
}
.ly-s3 { display: grid; grid-template-columns: auto auto; column-gap: .8em; row-gap: .1em; align-items: center; justify-content: start; width: max-content; }
.ly-s3 .n { grid-row: span 2; }
.ly-s3 .sm { padding-left: 0; }
.ly-as2 img { display: block; width: 1.9em; height: 1.9em; flex: none; }
@media (max-width: 760px) {
  .ly-s1 { left: 7%; }
  .ly-s2 { left: auto; right: 13%; }
  .ly-s2 .trk { width: 4.5em; }
  .ly-s3 { left: 9%; }
}
/* 0.52.8: a második elválasztó ugyanazt a háttérképet kapja, mint a lenti „ablak”; a három „saját” kiemelve */
.lp-window.lp-window-2 .bg { background: #2B0F3A url('landing/ablak.webp') center / cover no-repeat; }
.lp-window .own { color: #fff; font-weight: 800; }
.ly-s1 .h strong { color: var(--brand-purple); }
.ly-s1 .chips b.more { background: #fff; color: var(--brand-purple); box-shadow: inset 0 0 0 1.5px var(--brand-purple); }
@media (max-width: 760px) {
  .ly-s1 .chips { display: none; }
  .ly-s3 { width: auto; max-width: 82%; white-space: normal; }
  .ly-s3 .big { font-size: 1.3em; line-height: 1.2; }
}
.lp-window .own { text-shadow: 0 1px 12px rgba(43, 15, 58, .45); }
/* 0.52.10: az AS-buborék lejjebb, hogy ne érjen a „beárazott tétel” kártyához */
.ly-as2 { top: 92%; left: 58%; }

/* bizalmi sor az árak mellett: a kutatás számával és a módszertani oldal linkjével */
.lp-trust { font-size: 15px; font-weight: 600; color: var(--color-text); }
.lp-trust b { color: var(--brand-purple); font-variant-numeric: tabular-nums; }
.lp-trust a { color: var(--brand-purple); font-weight: 700; white-space: nowrap; }

/* közösségi profilok a láblécben */
.lp-social { display: inline-flex; gap: 10px; align-items: center; vertical-align: middle; margin-left: 10px; }
.lp-social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--brand-purple); background: rgba(75, 30, 109, .08); transition: background .2s, color .2s, transform .2s; }
.lp-social a:hover, .lp-social a:focus-visible { background: var(--brand-purple); color: #fff; transform: translateY(-1px); }
.lp-social svg { display: block; }

/* az iroda-ember finoman: a GYIK fejlécében és a záró felhívásnál (kis méret, csak szélesebb képernyőn) */
.lp-mascot { display: block; width: clamp(110px, 11vw, 160px); height: auto; justify-self: end; opacity: .96; }
.lp-mascot-end { width: clamp(120px, 12vw, 170px); margin: 0 auto -6px; justify-self: auto; }
@media (max-width: 760px) { .lp-sec-h .lp-mascot { display: none; } .lp-mascot-end { width: 110px; } }

/* a főcím minden méreten pontosan három sor; a laptop kisebb, így a szöveg mellett mindig marad hely */
.landing h1 span { display: block; white-space: nowrap; }
.landing h1 { font-size: clamp(26px, 3.3vw, 60px); }
.lp-start-l .lp-trust { margin-top: 22px; }
@media (max-width: 760px) { .landing h1 { font-size: clamp(24px, 7.4vw, 40px); } .lp-dev { max-width: 420px; } }
.lp-h1-last { position: relative; width: fit-content; }
.lp-h1-fig { position: absolute; left: calc(100% + .25em); bottom: -.25em; height: 2.5em; width: auto; pointer-events: none; }