/* Layout: mindig világos — fehér alap, nagyon halvány pala- és égkék sávok, fotók + rájuk úszó termékfelületek; sötét felület nincs. */
:root {
  --paper: #ffffff;
  --surface: #ffffff;
  --tint: #f6f9fc;
  --tint-2: #edf2f7;
  --ink: #0f172a;
  --ink-2: #1e293b;
  --muted: #475569;
  --faint: #94a3b8;
  --line: #e6ebf1;
  --line-2: #d3dce6;
  --accent: #0077b6;
  --accent-ink: #00619a;
  --accent-soft: #e6f4fc;
  --on-accent: #ffffff;
  --ok: #15803d;
  --ok-soft: #dcfce7;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --info: #4f46e5;
  --busy: #dc2626;
  --foot: #f6f9fc;
  --foot-line: #e6ebf1;
  --foot-fg: #0f172a;
  --foot-muted: #475569;

  --f-display: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --t-xs: 0.78rem; --t-sm: 0.92rem; --t-md: 1.06rem; --t-lg: 1.22rem;
  --t-xl: clamp(1.65rem, 1.2rem + 1.6vw, 2.35rem);
  --t-hero: clamp(2.25rem, 1.4rem + 3.2vw, 3.8rem);
  --wrap: 1200px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 30px -16px rgba(15, 23, 42, .16);
  --shadow-lg: 0 2px 4px rgba(15, 23, 42, .04), 0 24px 50px -24px rgba(15, 23, 42, .24);
  --sky: #f0f8fe;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: var(--t-md); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5 { font-family: var(--f-display); line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: var(--accent-ink); }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.eyebrow { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); display: inline-flex; align-items: center; gap: .6em; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.section { padding-block: clamp(64px, 9vw, 112px); }
.tinted { background: var(--tint); }
.section-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { font-size: var(--t-xl); font-weight: 700; }
.section-head p { color: var(--muted); font-size: var(--t-lg); line-height: 1.5; max-width: 62ch; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 46px; padding: 0 22px; border-radius: 999px; font: 600 var(--t-sm)/1 var(--f-display); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-ink); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn svg { width: 16px; height: 16px; }

/* fejléc */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 20px; min-height: 70px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand-name { font: 800 1.3rem/1 var(--f-display); letter-spacing: -0.02em; }
.brand-name sup { font-size: .55em; font-weight: 600; margin-left: 1px; }
.brand-sub { display: block; font: 500 .62rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.nav { display: flex; gap: 18px; margin-left: auto; }
.nav a { color: var(--muted); text-decoration: none; font-size: var(--t-sm); font-weight: 600; }
.nav a:hover { color: var(--ink); }
/* Platform dropdown / Platform lenyíló */
.nav { align-items: center; }
.nav-group { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
.nav-trigger:hover, .nav-group.open .nav-trigger { color: var(--ink); }
.nav-trigger svg { transition: transform .15s ease; }
.nav-group.open .nav-trigger svg { transform: rotate(180deg); }
.nav-sub { display: none; position: absolute; top: calc(100% + 14px); left: -14px; min-width: 230px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); gap: 2px; z-index: 60; }
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 15px; } /* hover bridge / egér-híd */
.nav-sub a { display: block; padding: 9px 12px; border-radius: 8px; }
.nav-sub a:hover, .nav-sub a:focus-visible { background: var(--tint); color: var(--ink); }
.nav-group.open .nav-sub { display: grid; }
@media (hover: hover) and (min-width: 1081px) { .nav-group:hover .nav-sub { display: grid; } }
.top .btn { min-height: 40px; padding: 0 18px; }
.lang-switch { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; padding: 3px; gap: 2px; flex: none; }
.lang-switch a { font: 600 .74rem/1 var(--f-mono); letter-spacing: .06em; padding: 7px 10px; border-radius: 999px; color: var(--muted); text-decoration: none; }
.lang-switch a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); }
.menu-btn { display: none; margin-left: auto; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); border-radius: 8px; width: 42px; height: 40px; cursor: pointer; }
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-btn { display: inline-grid; place-items: center; margin-left: 0; }
  .lang-switch { margin-left: auto; }
  .top .btn-primary { display: none; }
  .nav.open { display: grid; gap: 0; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px clamp(16px, 4vw, 40px) 16px; box-shadow: var(--shadow); }
  .nav.open a { padding: 12px 0; font-size: var(--t-md); border-bottom: 1px solid var(--line); }
  .nav.open .nav-trigger { width: 100%; justify-content: space-between; padding: 12px 0; font-size: var(--t-md); border-bottom: 1px solid var(--line); }
  .nav.open .nav-sub { position: static; min-width: 0; padding: 0 0 0 14px; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .nav.open .nav-sub::before { display: none; }
  .nav.open .nav-sub a { border-radius: 0; padding: 11px 0; }
}

/* hero */
.hero { background: radial-gradient(70rem 30rem at 90% 0%, var(--sky), transparent 70%), linear-gradient(180deg, var(--surface) 0%, var(--tint) 100%); padding-block: clamp(48px, 7vw, 96px) clamp(72px, 9vw, 120px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 980px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { font-size: var(--t-hero); font-weight: 800; letter-spacing: -0.03em; line-height: 1.03; margin-top: 18px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { margin-top: 22px; font-size: var(--t-lg); line-height: 1.55; color: var(--muted); max-width: 54ch; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.hero-proof span { font: 500 var(--t-xs)/1.4 var(--f-body); color: var(--muted); letter-spacing: .03em; }
.hero-proof b { color: var(--ink); font-weight: 500; }

/* fotó + úszó felület */
.stage { position: relative; min-width: 0; padding: 0 0 72px 48px; }
.stage .photo { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; max-width: 100%; background: var(--tint-2); }
.stage .photo img { width: 100%; height: 100%; object-fit: cover; }
.stage .float { position: absolute; left: 0; bottom: 0; width: min(420px, 88%); }
.stage.right { padding: 0 48px 64px 0; }
.stage.right .float { left: auto; right: 0; }
@media (min-width: 561px) { .hero .stage { padding-bottom: 150px; } }
@media (max-width: 560px) { .stage, .stage.right { padding: 0; } .stage .float { position: relative; width: 100%; margin-top: -40px; left: 0; right: 0; padding-inline: 10px; } }

/* élő folyam kártya */
.console { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; }
.console-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); font: 500 var(--t-xs)/1 var(--f-body); color: var(--muted); }
.live { display: inline-flex; align-items: center; gap: 7px; color: var(--ok); letter-spacing: .1em; text-transform: uppercase; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }
.console-bar .kpis { margin-left: auto; display: flex; gap: 12px; }
.console-bar .kpis b { color: var(--ink); font-weight: 500; }
.stream { list-style: none; margin: 0; padding: 2px 0; display: grid; }
.stream li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.stream li:last-child { border-bottom: 0; }
.stream li.enter { animation: enter .6s cubic-bezier(.2,.7,.2,1); }
@keyframes enter { from { background: var(--accent-soft); transform: translateY(-6px); } to { background: transparent; transform: none; } }
.ch { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.ch svg { width: 16px; height: 16px; }
.s-main { min-width: 0; }
.s-title { display: block; font-weight: 600; font-size: .88rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-route { display: block; font: 400 .72rem/1.5 var(--f-mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-route i { font-style: normal; color: var(--accent); }
.pill { font: 500 .72rem/1 var(--f-body); padding: 6px 8px; border-radius: 999px; white-space: nowrap; background: var(--tint); color: var(--muted); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.q { background: var(--accent-soft); color: var(--accent-ink); }
.pill.cb { background: var(--warn-soft); color: var(--warn); }
.console-note { font: 400 .72rem/1.4 var(--f-body); color: var(--faint); padding: 7px 14px 10px; border-top: 1px solid var(--line); }
@media (max-width: 420px) { .pill { display: none; } .stream li { grid-template-columns: 32px minmax(0, 1fr); } .console-bar .kpis { display: none; } }

/* bizalmi sor */
.trust { background: var(--surface); border-block: 1px solid var(--line); }
.trust .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust-item { padding: 28px 24px; display: grid; gap: 6px; border-right: 1px solid var(--line); }
.trust-item:first-child { padding-left: 0; }
.trust-item:last-child { border-right: 0; }
.trust-item strong { font: 700 var(--t-lg)/1.2 var(--f-display); }
.trust-item span { color: var(--muted); font-size: var(--t-sm); line-height: 1.45; }
.trust-item strong a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.trust-item strong a:hover { color: var(--accent); }
@media (max-width: 860px) { .trust .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust-item { padding: 22px 16px; border-bottom: 1px solid var(--line); } .trust-item:nth-child(odd) { padding-left: 0; } .trust-item:nth-child(even) { border-right: 0; } }
@media (max-width: 480px) { .trust .wrap { grid-template-columns: minmax(0, 1fr); } .trust-item { border-right: 0; padding-left: 0; } }

/* az interakció útja */
.journey { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px; display: grid; align-content: start; gap: 10px; }
.step-n { font: 500 var(--t-xs)/1 var(--f-mono); color: var(--accent-ink); letter-spacing: .08em; display: flex; align-items: center; gap: 8px; }
.step-n .ch { width: 30px; height: 30px; }
.step h3 { font-size: 1.1rem; font-weight: 700; }
.step p { color: var(--muted); font-size: var(--t-sm); line-height: 1.55; }
.step ul { margin: 4px 0 0; padding: 12px 0 0; list-style: none; display: grid; gap: 6px; border-top: 1px solid var(--line); }
.step li { font-size: .88rem; padding-left: 14px; position: relative; color: var(--ink-2); }
.step li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
@media (max-width: 1060px) { .journey { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .journey { grid-template-columns: minmax(0, 1fr); } }

/* útvonal: lépések egy függőleges vonalon, lépésenként egy felület-illusztrációval
   EN: path — steps along a vertical line, each with a small UI illustration */
.path { --path-bg: var(--paper); list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 4vw, 48px); position: relative; }
.tinted .path { --path-bg: var(--tint); }
.path::before { content: ""; position: absolute; left: 50%; top: 28px; bottom: 28px; width: 2px; margin-left: -1px; background: linear-gradient(var(--accent), var(--line-2)); opacity: .45; }
.path-step { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); column-gap: clamp(20px, 3.5vw, 48px); align-items: center; position: relative; }
.path-dot { grid-column: 2; grid-row: 1; justify-self: center; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 8px var(--path-bg); }
.path-dot svg { width: 22px; height: 22px; }
.path-text { grid-column: 1; grid-row: 1; display: grid; gap: 12px; align-content: center; max-width: 470px; justify-self: end; width: 100%; }
.path-visual { grid-column: 3; grid-row: 1; max-width: 470px; width: 100%; }
.path-step:nth-child(even) .path-text { grid-column: 3; justify-self: start; }
.path-step:nth-child(even) .path-visual { grid-column: 1; justify-self: end; }
.path-n { font: 500 var(--t-xs)/1 var(--f-mono); color: var(--accent-ink); letter-spacing: .1em; text-transform: uppercase; }
.path-text h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); font-weight: 700; }
.path-text p { color: var(--muted); font-size: var(--t-md); line-height: 1.55; }
.path-text ul { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.path-text li { font-size: .84rem; padding: 6px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
@media (max-width: 480px) { .path .node .m { display: none; } .path .node { grid-template-columns: auto minmax(0, 1fr); } }
/* TeleMed betegút: fejléc fotóval + vízszintes lépéssor mini-képernyőkkel
   EN: TeleMed patient journey — header with photo + horizontal step row with mini screens */
.pj-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: clamp(36px, 5vw, 56px); }
.pj-head .section-head { margin-bottom: 0; }
.pj-head h2 em { font-style: normal; color: var(--accent); }
.pj-visual { position: relative; border-radius: 24px; overflow: hidden; background: #e9ebee; aspect-ratio: 3 / 2; }
.pj-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pj-call { position: absolute; left: 4%; bottom: 7%; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-lg); }
.pj-call .ring { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; animation: ping 2s infinite; }
.pj-call .ring svg { width: 18px; height: 18px; }
.pj-call b { display: block; font: 600 .9rem/1.2 var(--f-display); }
.pj-call .wave { display: block; margin-top: 5px; width: 92px; height: 8px; background: repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 5px); -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); opacity: .55; }
.pj-routes { position: absolute; right: 3%; top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pj-routes li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); font: 600 .8rem/1 var(--f-display); color: var(--ink-2); position: relative; }
.pj-routes li:nth-child(2) { margin-left: 12px; } .pj-routes li:nth-child(3) { margin-left: 18px; } .pj-routes li:nth-child(4) { margin-left: 8px; }
.pj-routes li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 26px; border-top: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
.pj-routes .ch { width: 28px; height: 28px; border-radius: 8px; }
.pj-routes .ch svg { width: 15px; height: 15px; }
@media (max-width: 900px) { .pj-head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pj-routes { display: none; } }
@media (max-width: 480px) { .pj-routes li { font-size: .78rem; padding: 6px 10px 6px 6px; } .pj-routes .ch { width: 24px; height: 24px; } .pj-call { padding: 8px 12px 8px 8px; } .pj-call .ring { width: 32px; height: 32px; } }

.mini-sent { text-align: center; font: 500 .72rem/1.3 var(--f-body); color: var(--ok); }
/* lépésválasztó + nagy panel / EN: step selector + large panel */
.stepper-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; position: relative; margin-bottom: 18px; }
.stepper-nav::before { content: ""; position: absolute; top: 20px; left: 10%; right: 10%; border-top: 2px dashed color-mix(in srgb, var(--accent) 35%, transparent); }
.stepper-tab { position: relative; display: grid; justify-items: center; align-content: start; gap: 10px; padding: 0 6px 14px; border: 0; background: none; cursor: pointer; font: 600 .9rem/1.3 var(--f-display); color: var(--muted); text-align: center; }
.stepper-tab .n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line-2); color: var(--muted); font: 700 .86rem/1 var(--f-display); box-shadow: 0 0 0 6px var(--paper); transition: background .2s, border-color .2s, color .2s; }
.stepper-tab:hover { color: var(--ink); } .stepper-tab:hover .n { border-color: var(--accent); color: var(--accent-ink); }
.stepper-tab[aria-selected="true"] { color: var(--ink); }
.stepper-tab[aria-selected="true"] .n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.stepper-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 36px; height: 3px; margin-left: -18px; border-radius: 3px; background: var(--accent); }
.stepper-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.stepper-panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(22px, 3.5vw, 44px); border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(160deg, var(--surface) 40%, var(--sky)); box-shadow: var(--shadow); }
.stepper-panel.in { animation: sp-in .3s ease; }
.stepper-panel[hidden] { display: none; }
.stepper-panel + .stepper-panel { margin-top: 16px; }
@keyframes sp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stepper-panel.in { animation: none; } }
.sp-text { display: grid; gap: 14px; align-content: center; justify-items: start; }
.sp-text .ch { width: 46px; height: 46px; border-radius: 12px; }
.sp-text .ch svg { width: 22px; height: 22px; }
.sp-text h3 { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.9rem); font-weight: 700; }
.sp-text p { color: var(--muted); font-size: var(--t-md); line-height: 1.6; }
.sp-next { margin-top: 6px; }
.sp-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-tags li { font-size: .82rem; padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.sp-visual .mock { max-width: 540px; margin-left: auto; box-shadow: var(--shadow-lg); }
.vc .vc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vc img.pip { height: auto; object-fit: cover; padding: 0; background: none; }
.sp-visual .mini-sent { text-align: left; margin-top: 10px; }
@media (max-width: 860px) {
  .stepper-nav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 128px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * clamp(16px, 4vw, 40px)); padding-inline: clamp(16px, 4vw, 40px); }
  .stepper-nav::-webkit-scrollbar { display: none; }
  .stepper-nav::before { left: calc(clamp(16px, 4vw, 40px) + 64px); right: auto; width: calc(128px * 4 + 8px * 4); }
  .stepper-tab { font-size: .8rem; }
  .stepper-panel { grid-template-columns: minmax(0, 1fr); }
  .sp-visual .mock { margin-inline: 0; }
}
/* TeleMed számokban / EN: TeleMed in numbers */
.numbers { background: radial-gradient(60% 80% at 100% 0%, var(--sky), transparent 70%), radial-gradient(50% 70% at 0% 100%, var(--sky), transparent 70%), var(--paper); }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head.center p { margin-inline: auto; }
h2 em { font-style: normal; color: var(--accent); }
.num-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.num-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 22px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); min-width: 0; overflow: hidden; }
.num-ic, .hd-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #38a3e8, var(--accent)); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent); flex: none; }
.num-ic svg, .hd-ic svg { width: 21px; height: 21px; }
.num { font: 700 clamp(1.6rem, 1.2rem + 1vw, 2.05rem)/1.1 var(--f-display); white-space: nowrap; color: var(--accent); letter-spacing: -.01em; }
.num small { display: block; margin-bottom: 4px; font: 600 .82rem/1.2 var(--f-display); color: var(--ink); }
.num-range { position: relative; height: 56px; }
.num-range .bar { position: absolute; left: 0; right: 0; top: 18px; height: 10px; border-radius: 999px; background: var(--accent-soft); }
.num-range .bar i { position: absolute; top: 0; bottom: 0; left: 60%; right: 10%; border-radius: inherit; background: var(--accent); }
.num-range .lbl { position: absolute; top: 36px; font: 500 .72rem/1 var(--f-body); color: var(--muted); transform: translateX(-50%); }
.num-card p { color: var(--muted); font-size: .92rem; line-height: 1.5; flex: 1; }
.num-card .num-chart, .num-card .num-range { align-self: stretch; }
.num-scope { display: inline-block; font: 600 .72rem/1.3 var(--f-body); padding: 5px 9px; border-radius: 999px; background: var(--tint); color: var(--muted); border: 1px solid var(--line); }
.num-scope.all { background: var(--accent-soft); color: var(--accent-ink); }
.num-chart { width: 100%; height: 56px; display: block; }
.num-chart rect { fill: color-mix(in srgb, var(--accent) 30%, transparent); transition: fill .15s; }
.num-chart rect:hover { fill: var(--accent); }
.num-cmp { display: grid; gap: 8px; align-self: stretch; }
.nc-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .74rem; color: var(--muted); }
.nc-bar { height: 10px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.nc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.nc-bar i.avg { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.nc-row b { font: 600 .74rem/1 var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.num-foot { font: 500 .72rem/1.3 var(--f-body); color: var(--faint); letter-spacing: .04em; }
@media (max-width: 1060px) { .num-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .num-grid { grid-template-columns: minmax(0, 1fr); } }

/* TeleMed egészségügyi adatok / EN: TeleMed health data */
.hd-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.hd-intro { display: grid; gap: 28px; }
.hd-intro .section-head { margin-bottom: 0; }
.hd-map { box-shadow: var(--shadow-lg); }
.hd-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hd-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.hd-item h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 6px; }
.hd-item p { color: var(--muted); font-size: .88rem; line-height: 1.55; }
.hd-item.key { grid-column: 1 / -1; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 18px; padding: 20px 22px; border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); background: linear-gradient(120deg, var(--surface) 55%, var(--sky)); }
.hd-item.key .hd-ic { width: 52px; height: 52px; }
.hd-item.key h3 { font-size: 1.12rem; }
.hd-item:not(.key) { padding: 18px; gap: 12px; box-shadow: none; }
.hd-item:not(.key) .hd-ic { width: 38px; height: 38px; background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.hd-item:not(.key) .hd-ic svg { width: 18px; height: 18px; }
.hd-item:not(.key) h3 { font-size: .96rem; }
@media (max-width: 960px) { .hd-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .hd-items { grid-template-columns: minmax(0, 1fr); } .hd-item.key { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px; } .hd-item.key .hd-ic { width: 44px; height: 44px; } }
/* főoldali hős: beérkező megkeresések / EN: homepage hero — incoming requests inbox */
.hero-inbox .wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 3.5vw, 48px); }
.hero-inbox h1 { font-size: clamp(2.1rem, 1rem + 2.1vw, 2.9rem); line-height: 1.05; }
.hero-checks { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hero-checks li { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--ink-2); }
.hero-checks .tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.hero-checks .tick svg { width: 13px; height: 13px; }
.inbox-stage { position: relative; min-width: 0; margin-right: calc(-1 * min(110px, max(0px, (100vw - 1280px) / 2))); }
.inbox-stage::before { content: ""; position: absolute; inset: -10% -6% -12% -8%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 12%, transparent), transparent); z-index: 0; }
.inbox { position: relative; z-index: 1; display: grid; grid-template-columns: 58px minmax(0, .9fr) minmax(0, 1.2fr); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.inbox-nav { display: grid; align-content: start; justify-items: center; gap: 6px; padding: 14px 8px; background: #0f2a43; }
.inbox-nav span { position: relative; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #9fb4c8; }
.inbox-nav span.logo { background: linear-gradient(135deg, #38a3e8, var(--accent)); color: #fff; margin-bottom: 8px; }
.inbox-nav svg { width: 18px; height: 18px; }
.inbox-nav b { position: absolute; top: 2px; right: 0; font: 700 .6rem/1 var(--f-body); padding: 2px 4px; border-radius: 999px; background: #1e4466; color: #d5e3f0; }
.inbox-nav .on { background: rgba(255,255,255,.1); color: #fff; }
.inbox-nav .on b { background: var(--accent); color: #fff; }
.inbox-nav hr { width: 60%; border: 0; border-top: 1px solid rgba(255,255,255,.14); margin: 6px 0; }
.inbox-main { min-width: 0; border-right: 1px solid var(--line); }
.inbox-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px; border-bottom: 1px solid var(--line); font-size: .92rem; }
.inbox-head .live { font: 600 .72rem/1 var(--f-body); color: var(--ok); display: inline-flex; align-items: center; gap: 5px; }
.inbox-head .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.inbox-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.inbox-row.sel { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.inbox-row .ch { width: 30px; height: 30px; }
.inbox-row .txt { min-width: 0; }
.inbox-row .txt b { display: block; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-row .txt small { display: block; font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-row .txt small.hot { color: var(--warn, #b45309); }
.inbox-row time { font: 400 .72rem/1 var(--f-body); color: var(--faint); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inbox-row.new .ch { background: var(--ok); color: #fff; animation: ping 2s infinite; }
@media (prefers-reduced-motion: reduce) { .inbox-row.new .ch { animation: none; } }
.inbox-profile { min-width: 0; padding: 14px 16px 16px; display: grid; gap: 12px; align-content: start; }
.pf-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.pf-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font: 700 .85rem/1 var(--f-display); }
.pf-who b { display: block; font: 700 1rem/1.2 var(--f-display); }
.pf-who small { display: block; font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--line); font-size: .76rem; color: var(--muted); }
.pf-tabs span { padding-bottom: 8px; white-space: nowrap; }
.pf-tabs .on { color: var(--accent-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.pf-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pf-tl li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.pf-tl li.now { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.pf-tl .ch { width: 28px; height: 28px; }
.pf-tl b { display: block; font-size: .78rem; }
.pf-tl small { display: block; font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-ai { padding: 10px 12px; border-radius: 10px; background: linear-gradient(135deg, #f3efff, var(--surface)); border: 1px solid #e4dcfb; }
.pf-ai-h { display: inline-flex; align-items: center; gap: 6px; font: 600 .74rem/1 var(--f-body); color: #6d4fd1; }
.pf-ai-h svg { width: 15px; height: 15px; }
.pf-ai p { margin-top: 6px; font-size: .78rem; line-height: 1.45; color: var(--ink-2); }
.pf-next { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pf-next > span:first-child { font-size: .7rem; color: var(--muted); }
.pf-next b { display: block; font-size: .8rem; color: var(--ink); }
.pf-btn { flex: none; padding: 8px 12px; border-radius: 999px; background: var(--accent); color: #fff; font: 600 .76rem/1 var(--f-display); }
.inbox-note { position: relative; z-index: 1; font: 400 .72rem/1.4 var(--f-body); color: var(--faint); padding: 8px 4px 0; text-align: right; }
@media (max-width: 1240px) { .inbox { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); } .inbox-nav { display: none; } }
@media (max-width: 960px) { .hero-inbox .wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .inbox { grid-template-columns: minmax(0, 1fr); } .inbox-main { border-right: 0; border-bottom: 1px solid var(--line); } .inbox-row:nth-of-type(n+5) { display: none; } }

/* bizalmi kártyák / EN: trust cards */
.trust-cards { margin-top: calc(-1 * clamp(40px, 5vw, 64px)); position: relative; z-index: 2; }
.trust-box { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); }
.tc { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 22px 22px; border-right: 1px solid var(--line); min-width: 0; }
.tc:last-child { border-right: 0; }
.tc-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.tc-ic svg { width: 23px; height: 23px; }
.tc-body { display: grid; gap: 4px; min-width: 0; }
.tc-num { font: 700 clamp(1.35rem, 1rem + .9vw, 1.75rem)/1.1 var(--f-display); color: var(--accent); white-space: nowrap; }
.tc-num small { display: block; font: 600 .78rem/1.3 var(--f-body); color: var(--ink-2); }
.tc-body > span { color: var(--muted); font-size: .86rem; line-height: 1.4; }
.trust-note { margin-top: 12px; text-align: center; font-size: .82rem; color: var(--faint); }
.trust-note a { color: var(--accent-ink); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.trust-note a svg { width: 14px; height: 14px; }
@media (max-width: 960px) { .trust-box { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tc:nth-child(2) { border-right: 0; } .tc:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 520px) { .trust-box { grid-template-columns: minmax(0, 1fr); } .tc { border-right: 0; border-bottom: 1px solid var(--line); } .tc:last-child { border-bottom: 0; } }

/* szakasz halvány fotóval / EN: section with a faded photo */
/* TeleMed hős: kezelői képernyő / EN: TeleMed hero — agent screen */
.hero-tm .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.hero-tm h1 { font-size: clamp(2.3rem, 1.3rem + 2.8vw, 3.4rem); }
.ws { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; min-width: 0; }
.ws::before { content: ""; position: absolute; inset: -40% -30% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 10%, transparent), transparent); pointer-events: none; }
.ws-bar { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: linear-gradient(135deg, var(--accent-soft), var(--surface)); border-bottom: 1px solid var(--line); }
.ws-bar .ring { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; flex: none; animation: ping 2s infinite; }
.ws-bar .ring svg { width: 20px; height: 20px; }
.ws-who { display: grid; gap: 2px; min-width: 0; margin-right: auto; }
.ws-who small { font-size: .74rem; color: var(--accent-ink); font-weight: 600; }
.ws-who b { font: 700 1.12rem/1.2 var(--f-display); }
.ws-who em { font-style: normal; font-size: .8rem; color: var(--muted); }
.ws-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px; font: 600 .84rem/1 var(--f-display); flex: none; }
.ws-btn svg { width: 16px; height: 16px; }
.ws-btn.decline { width: 40px; padding: 0; justify-content: center; background: var(--busy); color: #fff; }
.ws-btn.accept { background: var(--ok); color: #fff; }
.ws-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ws-col { padding: 16px 18px; min-width: 0; display: grid; align-content: start; gap: 10px; }
.ws-col.side { background: var(--tint); border-left: 1px solid var(--line); }
.ws-col h5 { margin: 4px 0 0; font: 600 .7rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.ws-col .chips { margin-top: 0; }
.ws-col .timeline { margin-top: 0; }
.ws-task { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: start; padding: 9px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.ws-task i { width: 16px; height: 16px; margin-top: 2px; border-radius: 5px; border: 2px solid var(--line-2); }
.ws-task.done i { background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; border-color: var(--ok); }
.ws-task.done b { text-decoration: line-through; color: var(--muted); }
.ws-task b { display: block; font-size: .8rem; line-height: 1.3; }
.ws-task small { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; }
.ws-ext { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); font-size: .8rem; font-weight: 600; }
.ws-ext svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 960px) { .hero-tm .wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ws-body { grid-template-columns: minmax(0, 1fr); } .ws-col.side { border-left: 0; border-top: 1px solid var(--line); } .ws-btn.accept { width: 40px; padding: 0; justify-content: center; font-size: 0; gap: 0; } }
/* TeleMed videó: kezelőkártya a fotón / EN: TeleMed video — control card over the photo */
.stage .photo.wide { aspect-ratio: 3 / 2; }
.stage.vstage { padding: 0 0 150px 40px; }
.stage.vstage .float { width: min(340px, 80%); left: 0; right: auto; }
@media (max-width: 560px) { .stage.vstage { padding: 0; } .stage.vstage .float { width: 100%; } }
.vcall .mock-head { justify-content: space-between; }
.vcall-live { display: inline-flex; align-items: center; gap: 6px; font: 600 .74rem/1 var(--f-body); color: var(--busy); font-variant-numeric: tabular-nums; }
.vcall-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--busy); }
.vcall-body { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 14px 16px 10px; }
.vcall-av { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font: 700 .8rem/1 var(--f-display); }
.vcall-who b { display: block; font-size: .92rem; }
.vcall-who small { display: block; font-size: .76rem; color: var(--muted); }
.vcall-body .chip { justify-self: start; }
.vcall-ctrl { display: flex; align-items: center; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--line); }
.vcall-ctrl span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--ink); }
.vcall-ctrl span svg { width: 16px; height: 16px; }
.vcall-ctrl span.end { background: var(--busy); color: #fff; }
.vcall-ctrl em { margin-left: auto; font-style: normal; font-size: .74rem; color: var(--muted); text-align: right; }
/* főoldal: ügy-idővonal, AI-panel, irányítópult, integrációs ábra / EN: homepage — case flow, AI panel, dashboard, integration hub */
.case-flow { box-shadow: var(--shadow-lg); }
.case-flow .tag.ok { background: var(--ok-soft); color: var(--ok); }
.cf-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px 4px; }
.cf-top h4 { margin-right: auto; font-size: 1rem; }
.cf-steps { list-style: none; margin: 0; padding: 10px 16px 16px; display: grid; gap: 0; }
.cf-steps li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; }
.cf-steps li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 46px; bottom: -10px; border-left: 2px dashed color-mix(in srgb, var(--accent) 35%, transparent); }
.cf-steps .ch { width: 36px; height: 36px; }
.cf-steps b { display: block; font-size: .9rem; }
.cf-steps small { display: block; font-size: .8rem; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.cf-steps time { font-size: .74rem; color: var(--faint); white-space: nowrap; padding-top: 3px; }
.cf-steps li.done .ch { background: var(--ok); color: #fff; }
.ai-panel { margin-top: clamp(24px, 3vw, 36px); box-shadow: var(--shadow-lg); }
@media (min-width: 901px) { .ai-panel .ai-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.ai-panel .insight .chips { margin-top: 6px; }
.ai-points { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ai-points li { display: grid; gap: 10px; align-content: start; font-size: .9rem; color: var(--muted); line-height: 1.5; }
.ai-points b { color: var(--ink); }
.ai-points .ch { width: 40px; height: 40px; }
@media (max-width: 900px) { .ai-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ai-points { grid-template-columns: minmax(0, 1fr); } }
.dash { box-shadow: var(--shadow-lg); }
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px 16px 6px; }
.dk { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--tint); min-width: 0; }
.dk small { display: block; font-size: .72rem; color: var(--muted); }
.dk strong { display: block; font: 700 1.45rem/1.15 var(--f-display); margin: 4px 0 2px; }
.dk span { display: block; font-size: .7rem; color: var(--faint); }
.dk span.good { color: var(--ok); }
.dash-chart { padding: 10px 16px 12px; }
.dc-h { font-size: .74rem; color: var(--muted); }
.dc-bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: 8px; }
.dc-bars i { flex: 1; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
.dc-bars i.now { background: var(--accent); }
.dc-x { display: flex; justify-content: space-between; font-size: .68rem; color: var(--faint); margin-top: 4px; }
@media (max-width: 560px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hub { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; max-width: 980px; margin: 0 auto; }
.hub-col { display: grid; gap: 14px; }
.hub-n { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.hub-n svg { grid-row: span 2; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.hub-n b { font-size: .95rem; }
.hub-n small { font-size: .8rem; color: var(--muted); }
.hub-col .hub-n::after { content: ""; position: absolute; top: 50%; left: 100%; width: clamp(24px, 5vw, 72px); border-top: 2px dashed color-mix(in srgb, var(--accent) 40%, transparent); }
.hub-col.right .hub-n::after { left: auto; right: 100%; }
.hub-core { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; width: 190px; padding: 26px 18px; border-radius: 24px; text-align: center; color: #fff; background: linear-gradient(150deg, #38a3e8, var(--accent) 60%, #035a8a); box-shadow: 0 24px 48px -20px color-mix(in srgb, var(--accent) 70%, transparent); }
.hub-logo { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.hub-logo svg { width: 28px; height: 28px; }
.hub-core b { font: 800 1.35rem/1.1 var(--f-display); }
.hub-core small { font-size: .78rem; opacity: .85; }
@media (max-width: 760px) { .hub { grid-template-columns: minmax(0, 1fr); } .hub-core { order: -1; justify-self: center; } .hub-col .hub-n::after { display: none; } }
/* kapcsolat oldal / EN: contact page */
.hero-contact .wrap { display: block; }
.ct-intro { max-width: 720px; }
.hero-contact h1 { font-size: clamp(2.2rem, 1.3rem + 2.4vw, 3.2rem); }
.ct-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 18px; margin-top: clamp(28px, 4vw, 44px); }
.ct-card { display: grid; align-content: start; justify-items: start; gap: 10px; padding: 26px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); min-width: 0; }
.ct-card.main { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: linear-gradient(150deg, var(--surface) 50%, var(--sky)); box-shadow: var(--shadow-lg); }
.ct-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #38a3e8, var(--accent)); flex: none; }
.ct-ic svg { width: 22px; height: 22px; }
.ct-card h2 { font-size: 1.15rem; font-weight: 700; margin-top: 6px; }
.ct-card > p { color: var(--muted); font-size: .92rem; }
.ct-lines { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 10px; width: 100%; }
.ct-lines li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: center; font-size: .98rem; }
.ct-lines svg { width: 18px; height: 18px; color: var(--accent); }
.ct-lines a { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.ct-lines a:hover { color: var(--accent); }
.ct-lines span { color: var(--muted); font-size: .9rem; }
.ct-card .btn { margin-top: 8px; }
.ct-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--accent-ink); text-decoration: none; margin-top: 4px; }
.ct-more svg { width: 15px; height: 15px; }
.ct-company { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.ct-addr { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; }
.ct-addr h2 { font-size: 1.1rem; font-weight: 700; }
.ct-addr p { color: var(--muted); margin-top: 4px; }
.ct-reg { margin: 0; display: grid; gap: 10px; }
.ct-reg div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.ct-reg div:last-child { border-bottom: 0; padding-bottom: 0; }
.ct-reg dt { color: var(--muted); }
.ct-reg dd { margin: 0; font-weight: 600; text-align: right; }
@media (max-width: 960px) { .ct-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ct-card.main { grid-column: 1 / -1; } .ct-company { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } .ct-reg div { flex-direction: column; gap: 2px; } .ct-reg dd { text-align: left; } }
.foot-top .foot-contact { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.foot-contact li { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.foot-contact svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.foot-contact a { color: var(--foot-fg); text-decoration: none; font-weight: 600; }
.pl-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: clamp(32px, 5vw, 56px); }
.pl-head .section-head { margin-bottom: 0; }
.pl-photo { border-radius: 18px; overflow: hidden; aspect-ratio: 1200 / 744; box-shadow: var(--shadow-lg); background: var(--tint-2); }
.pl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .pl-head { grid-template-columns: minmax(0, 1fr); } }
/* állatorvosi céloldal */
.hero-vet .wrap { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 3.5vw, 48px); }
.hero-vet h1 { font-size: clamp(2.1rem, 1.1rem + 2.3vw, 3rem); }
.vet-stage { position: relative; padding: 34px 0 54px; }
.vet-photo { border-radius: 20px; overflow: hidden; aspect-ratio: 1400 / 933; box-shadow: var(--shadow-lg); background: var(--tint-2); margin-left: 96px; margin-right: 40px; }
.vet-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vet-req, .vet-video, .vet-next { position: absolute; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); font-size: .8rem; }
.vet-req { left: 0; top: 0; width: 244px; padding: 10px 12px 4px; font-size: .76rem; }
.vr-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.vr-head b { font: 700 .86rem/1.2 var(--f-display); }
.vr-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.vr-head + .vr-row { border-top: 0; }
.vr-row .ch, .vv-head .ch, .vet-next .ch { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.vr-row .ch svg, .vv-head .ch svg, .vet-next .ch svg { width: 15px; height: 15px; }
.vr-row b { display: block; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-row small { color: var(--muted); font-size: .7rem; }
.vr-row time { font: 500 .7rem/1 var(--f-mono); color: var(--muted); }
.vet-video { right: 0; top: 70px; width: 170px; padding: 10px; background: #0f2236; color: #fff; border-color: #0f2236; }
.vv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.vv-head .ch { background: rgba(255, 255, 255, .14); color: #fff; }
.vv-head b { display: block; font-size: .8rem; }
.vv-head small { color: rgba(255, 255, 255, .7); font: 500 .7rem/1 var(--f-mono); }
.vv-frame { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 520 / 598; background: #c9dbe6; }
.vv-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vv-me { position: absolute; right: 8px; top: 8px; width: 44px; height: 54px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #3aa6e0, #0063a0); color: #fff; font: 700 .78rem/1 var(--f-display); border: 2px solid #fff; }
.vv-ctrl { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.vv-ctrl span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); }
.vv-ctrl span.end { background: #e5484d; }
.vv-ctrl svg { width: 15px; height: 15px; color: #fff; }
.vet-next { right: 30px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; }
.vet-next .ch { border-radius: 50%; background: var(--accent); color: #fff; }
.vet-next small { display: block; color: var(--accent-ink); font-size: .7rem; font-weight: 600; }
.vet-next b { font-size: .84rem; }
.vet-cap { position: absolute; left: 96px; bottom: 18px; margin: 0; font-size: .72rem; color: var(--faint); }
.vf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.vf { padding: 4px 28px; border-left: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.vf:first-child { border-left: 0; padding-left: 0; }
.vf-ic { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 6px; }
.vf-ic svg { width: 26px; height: 26px; }
.vf h3 { font-size: 1.12rem; font-weight: 700; }
.vf p { color: var(--muted); font-size: var(--t-sm); line-height: 1.55; }
.vf-note { display: flex; align-items: center; gap: 14px; margin: 36px 0 0; padding: 14px 18px; border-radius: 12px; background: var(--tint); color: var(--muted); font-size: var(--t-sm); line-height: 1.5; }
.vf-note b { color: var(--ink); }
.vf-note .ch { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--accent-ink); }
.vf-note .ch svg { width: 18px; height: 18px; }
.vet-how-sec { padding-top: 0; }
.vh-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.vh-steps, .vh-who { border-radius: 18px; padding: clamp(24px, 3vw, 36px); display: grid; gap: 12px; align-content: start; }
.vh-steps { background: linear-gradient(135deg, var(--tint) 0%, var(--sky) 100%); }
.vh-who { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.vh-steps h2, .vh-who h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 700; line-height: 1.15; }
.vh-steps > p, .vh-who > p { color: var(--muted); }
.vh-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.vh-list li { position: relative; display: grid; gap: 4px; align-content: start; }
.vh-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--accent); box-shadow: var(--shadow); margin-bottom: 8px; }
.vh-ic svg { width: 20px; height: 20px; }
.vh-list li:not(:last-child)::after { content: ""; position: absolute; left: 58px; right: -8px; top: 23px; border-top: 1px dashed var(--line-2); }
.vh-n { position: absolute; left: 58px; top: 0; font: 600 .78rem/1 var(--f-mono); color: var(--accent-ink); }
.vh-list b { font-family: var(--f-display); }
.vh-t { color: var(--muted); font-size: .85rem; line-height: 1.45; }
.vh-who-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.vh-who-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.vh-who-list .ch { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.vh-who-list .ch svg { width: 19px; height: 19px; }
.vh-who-list b { display: block; font-family: var(--f-display); }
.vh-who-list small { display: block; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.tm-vet-strip { padding-block: 0 clamp(40px, 6vw, 72px); }
.tvs { display: grid; grid-template-columns: 48px minmax(0, 1fr) 22px; gap: 16px; align-items: center; padding: 18px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.tvs:hover { border-color: var(--accent); }
.tvs .ch { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.tvs .ch svg { width: 22px; height: 22px; }
.tvs b { display: block; font: 700 1.05rem/1.3 var(--f-display); }
.tvs small { display: block; color: var(--muted); font-size: var(--t-sm); }
.tvs .arr { width: 20px; height: 20px; color: var(--accent); }
@media (max-width: 1080px) { .vf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; } .vf:nth-child(3) { border-left: 0; padding-left: 0; } .vh-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .hero-vet .wrap { grid-template-columns: minmax(0, 1fr); }
  .vet-stage { padding: 0; }
  .vet-photo { margin: 0; }
  .vet-req { position: relative; width: auto; margin: -40px 14px 0; }
  .vet-video, .vet-next { display: none; }
  .vet-cap { position: static; padding: 8px 14px 0; }
}
@media (max-width: 640px) {
  .vf-grid { grid-template-columns: minmax(0, 1fr); }
  .vf, .vf:nth-child(3) { border-left: 0; padding: 0; }
  .vh-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vh-list li::after { display: none; }
  .vf-note { align-items: flex-start; }
}
.path-note { margin-top: clamp(24px, 4vw, 40px); text-align: center; font: 400 .7rem/1.4 var(--f-body); color: var(--faint); }
@media (max-width: 860px) {
  .path::before { left: 25px; }
  .path-step { grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; row-gap: 18px; align-items: start; }
  .path-dot { grid-column: 1; }
  .path-text, .path-step:nth-child(even) .path-text { grid-column: 2; grid-row: 1; justify-self: start; max-width: none; }
  .path-visual, .path-step:nth-child(even) .path-visual { grid-column: 2; grid-row: 2; justify-self: start; max-width: 520px; }
}
/* illusztráció-elemek / EN: illustration parts */
.mock .row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; font-size: .86rem; }
.mock .row + .row { border-top: 1px solid var(--line); }
.mock .row .ch { width: 30px; height: 30px; }
.mock .row b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock .row small { display: block; color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock .row .m { font: 400 .7rem/1 var(--f-body); color: var(--faint); white-space: nowrap; }
.mock-body > .chips:first-child { margin-top: 0; }
.chip.sel { background: var(--accent); color: var(--on-accent); }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.say { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--tint); font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
.say::before { content: "\201E"; color: var(--accent); font-weight: 700; }
.say::after { content: "\201D"; color: var(--accent); font-weight: 700; }
:lang(en) .say::before { content: "\201C"; }
.note-box { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 9px; font-size: .84rem; color: var(--ink-2); line-height: 1.45; }
.toggle.on i { background: var(--ok); }
.toggle.on i::after { left: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.btn-row span { font: 600 .74rem/1 var(--f-display); padding: 8px 11px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--ink-2); }
.btn-row span.end { margin-left: auto; background: var(--busy); border-color: var(--busy); color: #fff; }
.vc { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #1e3a5f, #0f172a); display: grid; place-items: center; }
.vc .av { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; font: 700 1.3rem/1 var(--f-display); }
.vc .lbl { position: absolute; left: 10px; bottom: 10px; font: 500 .72rem/1 var(--f-body); color: #fff; background: rgba(15,23,42,.55); padding: 5px 7px; border-radius: 5px; }
.vc .pip { position: absolute; right: 10px; bottom: 10px; width: 26%; aspect-ratio: 4 / 3; border-radius: 7px; background: linear-gradient(135deg, #0077b6, #00619a); display: grid; place-items: center; color: #fff; font: 700 .8rem/1 var(--f-display); border: 2px solid rgba(255,255,255,.7); }
.vc .live-dot { position: absolute; left: 10px; top: 10px; font: 500 .72rem/1 var(--f-body); color: #fff; background: var(--busy); padding: 5px 7px; border-radius: 5px; }

/* bemutató blokkok */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.feature.flip > :first-child { order: 2; }
@media (max-width: 920px) { .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); } .feature.flip > :first-child { order: 0; } }
.feature-copy { display: grid; gap: 18px; min-width: 0; }
.feature-copy h2 { font-size: var(--t-xl); font-weight: 700; }
.feature-copy > p { color: var(--muted); font-size: var(--t-lg); line-height: 1.5; }
.checks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; line-height: 1.5; }
.checks li::before { content: ""; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%230077b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.checks b { font-weight: 600; }

/* felület-mockok */
.mock { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
.float .mock, .float .console { box-shadow: var(--shadow-lg); }
.mock-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); font: 500 var(--t-xs)/1.2 var(--f-body); color: var(--muted); }
.mock-head .tag { margin-left: auto; padding: 4px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap; }
.mock-body { padding: 16px; }
.mock-caption { font: 400 .72rem/1.4 var(--f-body); color: var(--faint); padding: 8px 16px 10px; border-top: 1px solid var(--line); }

.flow { display: grid; gap: 8px; font-size: var(--t-sm); }
.node { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.node .k { font: 500 .66rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 7px; border-radius: 5px; background: var(--tint); color: var(--muted); }
.node .k.sch { background: var(--warn-soft); color: var(--warn); }
.node .k.menu { background: var(--accent-soft); color: var(--accent-ink); }
.node .k.q { background: var(--ok-soft); color: var(--ok); }
.node .t { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node .t small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node .m { font: 400 .7rem/1 var(--f-body); color: var(--faint); }
.branch { margin-left: 16px; padding-left: 14px; border-left: 1px dashed var(--line-2); display: grid; gap: 8px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font: 500 .7rem/1 var(--f-body); color: var(--muted); }
.toggle i { width: 28px; height: 16px; border-radius: 999px; background: var(--line-2); position: relative; }
.toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); }

.ticket-top { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.ticket-top h4 { font-size: 1rem; font-weight: 700; }
.ticket-id { font: 500 .72rem/1 var(--f-mono); color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font: 500 .72rem/1 var(--f-body); padding: 6px 8px; border-radius: 6px; background: var(--tint); color: var(--muted); }
.chip.hot { background: var(--warn-soft); color: var(--warn); }
.timeline { list-style: none; margin: 14px 0 0; padding: 0; display: grid; }
.timeline li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding-bottom: 12px; position: relative; }
.timeline li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 1px; background: var(--line-2); }
.timeline .ch { width: 30px; height: 30px; }
.tl-main { min-width: 0; }
.tl-main b { display: block; font-size: .88rem; font-weight: 600; }
.tl-main span { display: block; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.tl-main time { font: 400 .72rem/1 var(--f-body); color: var(--faint); }

.ai-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
@media (max-width: 640px) { .ai-grid { grid-template-columns: minmax(0, 1fr); } }
.transcript { padding: 16px; display: grid; gap: 11px; border-right: 1px solid var(--line); font-size: var(--t-sm); align-content: start; }
@media (max-width: 640px) { .transcript { border-right: 0; border-bottom: 1px solid var(--line); } }
.turn { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; }
.turn .who { font: 500 .72rem/1.8 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.turn.agent .who { color: var(--accent-ink); }
.redact { font: 500 .72rem/1 var(--f-mono); background: var(--tint-2); color: var(--muted); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.insight { padding: 16px; display: grid; gap: 14px; align-content: start; background: var(--tint); }
.insight h5 { margin: 0 0 6px; font: 500 .72rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.insight p { font-size: .88rem; line-height: 1.5; }
.score { display: grid; grid-template-columns: minmax(0, 1fr) 64px 18px; gap: 10px; align-items: center; font-size: .8rem; }
.score + .score { margin-top: 6px; }
.bar { height: 6px; border-radius: 999px; background: var(--tint-2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.score b { font: 500 .72rem/1 var(--f-mono); text-align: right; }
.sentiment { display: inline-flex; gap: 6px; align-items: center; font-size: .84rem; }
.sentiment::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.kpi { padding: 14px 16px; border-right: 1px solid var(--line); min-width: 0; }
.kpi:last-child { border-right: 0; }
.kpi small { display: block; font: 500 .72rem/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.kpi strong { display: block; margin-top: 6px; font: 700 1.35rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.kpi span { display: block; margin-top: 5px; font-size: .72rem; color: var(--muted); }
.kpi span.good { color: var(--ok); }
@media (max-width: 480px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi:nth-child(2) { border-right: 0; } .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
.agent-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 16px; font-size: .88rem; }
.agent-row + .agent-row { border-top: 1px solid var(--line); }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.on { background: var(--busy); } .dot.free { background: var(--ok); } .dot.acw { background: var(--info); } .dot.brk { background: var(--warn); }
.agent-row .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.agent-row .nm small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.agent-row .tm { font: 400 .72rem/1 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.agent-row .act { font: 500 .72rem/1 var(--f-body); padding: 5px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); }

/* iparágak */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tab { font: 600 var(--t-sm)/1 var(--f-display); padding: 12px 18px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); }
.tab:hover { color: var(--ink); border-color: var(--faint); }
.tab[aria-selected="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.panel.sol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.sol-body { padding: clamp(24px, 3.4vw, 44px); display: grid; gap: 14px; align-content: start; min-width: 0; }
.sol-body h3 { font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.sol-body h3 em { font-style: normal; color: var(--accent); }
.sol-body > p { color: var(--muted); }
.sol-uses { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.sol-uses a { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s; }
.sol-uses a:hover { border-color: var(--accent); background: var(--tint); }
.sol-uses .ch { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.sol-uses .ch svg { width: 20px; height: 20px; }
.sol-uses b { display: block; font: 700 .95rem/1.3 var(--f-display); }
.sol-uses small { display: block; color: var(--muted); font-size: .84rem; line-height: 1.4; }
.sol-uses a > svg { width: 18px; height: 18px; color: var(--faint); transition: transform .15s, color .15s; }
.sol-uses a:hover > svg { color: var(--accent); transform: translateX(3px); }
.sol-body .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.sol-visual { position: relative; min-height: 560px; background: var(--tint-2); }
.sol-photo { position: absolute; inset: 0; }
.sol-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sol-mocks { position: absolute; inset: 26px 26px 44px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 12px; pointer-events: none; }
.sol-mocks > :only-child { margin-top: auto; }
.sol-mocks > :first-child:not(:only-child) { order: 2; margin-top: auto; }
.sol-mocks > .sol-kpi { align-self: flex-start; }
.sol-cap { position: absolute; right: 26px; bottom: 14px; margin: 0; font-size: .72rem; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.sol-card, .sol-kpi { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 14px; font-size: .82rem; }
.sol-card { width: min(320px, 100%); }
.sol-kpi { width: min(290px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.sol-kpi .sc-title { grid-column: 1 / -1; margin: 0; }
.sk b { display: block; font: 700 1.3rem/1.1 var(--f-display); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.sk small { color: var(--muted); font-size: .7rem; line-height: 1.3; }
.sk-bars { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 5px; height: 42px; }
.sk-bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--accent); opacity: .85; }
.sc-title { font: 700 .86rem/1.2 var(--f-display); margin-bottom: 6px; }
.sc-head { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 8px; }
.sc-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font: 700 .82rem/1 var(--f-display); }
.sc-av.alt { border-radius: 10px; }
.sc-av svg { width: 18px; height: 18px; }
.sc-who small { display: block; color: var(--muted); font-size: .7rem; }
.sc-who b { display: block; font-size: .92rem; }
.sc-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .78rem; margin-top: 4px; }
.sc-meta svg { width: 14px; height: 14px; }
.sc-tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--line); margin: 10px 0 2px; font-size: .76rem; color: var(--muted); }
.sc-tabs span { padding: 6px 0; }
.sc-tabs .on { color: var(--accent-ink); font-weight: 600; box-shadow: inset 0 -2px var(--accent); }
.sc-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.sc-tabs + .sc-item { border-top: 0; }
.sc-item > svg { width: 28px; height: 28px; padding: 6px; border-radius: 8px; background: var(--tint); color: var(--accent-ink); }
.sc-item b { display: block; font-size: .8rem; }
.sc-item small { display: block; color: var(--muted); font-size: .72rem; }
.sc-btn { font: 600 .72rem/1 var(--f-body); padding: 7px 10px; border-radius: 7px; background: var(--accent); color: var(--on-accent); white-space: nowrap; }
.sc-btn.wide { display: block; text-align: center; margin-top: 12px; padding: 10px; font-size: .8rem; }
.sc-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.sc-title + .sc-row { border-top: 0; }
.sc-row b { flex: 1; min-width: 0; font-weight: 600; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-row > svg { width: 15px; height: 15px; color: var(--accent-ink); }
.sc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.chip.bad { background: #fde8e8; color: #b42318; }
.sc-thumbs { display: flex; align-items: center; gap: 6px; margin: 6px 0 4px; }
.sc-thumbs i { width: 44px; height: 44px; border-radius: 8px; background: linear-gradient(135deg, var(--tint-2), var(--accent-soft)); }
.sc-thumbs span { color: var(--muted); font-size: .72rem; margin-left: 4px; }
@media (max-width: 900px) {
  .panel.sol { grid-template-columns: minmax(0, 1fr); }
  .sol-visual { min-height: 0; background: none; padding-bottom: 8px; }
  .sol-photo { position: relative; aspect-ratio: 16 / 10; }
  .sol-mocks { position: relative; inset: auto; margin: -56px 16px 0; align-items: stretch; }
  .sol-mocks > .sol-kpi { align-self: stretch; }
  .sol-card, .sol-kpi { width: auto; }
  .sol-cap { position: static; text-align: right; color: var(--faint); text-shadow: none; padding: 6px 16px 0; }
}
.more { margin-top: 32px; display: grid; gap: 12px; }
.more h4 { font: 500 var(--t-xs)/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.more li { font-size: var(--t-sm); padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }

/* biztonság */
.sec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sec-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .sec-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sec-grid, .sec-grid.four { grid-template-columns: minmax(0, 1fr); } }
.sec { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 10px; align-content: start; }
.sec .ch { width: 40px; height: 40px; border-radius: 11px; }
.sec .ch svg { width: 20px; height: 20px; }
.sec h3 { font-size: 1.06rem; font-weight: 700; }
.sec p { color: var(--muted); font-size: var(--t-sm); line-height: 1.55; }

/* rólunk */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "v c" "p p"; gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 72px); align-items: center; }
.about-visual { grid-area: v; position: relative; padding: 28px 0 28px 44px; }
.about-photo { border-radius: 18px; overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--shadow-lg); background: #0b2540; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flow-card { position: absolute; left: 0; top: 0; width: 262px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 14px; font-size: .8rem; }
.fc-brand { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.fc-brand svg { width: 28px; height: 28px; flex: none; }
.fc-brand b { display: block; font: 800 .95rem/1 var(--f-display); }
.fc-brand sup { font-size: .55em; }
.fc-brand small { display: block; font: 500 .55rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.fc-call { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.fc-call .ch { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.fc-call .ch svg { width: 16px; height: 16px; }
.fc-call b { display: block; font-size: .82rem; }
.fc-call small { color: var(--muted); font-size: .72rem; }
.fc-call time { font: 500 .74rem/1 var(--f-mono); color: var(--muted); }
.fc-steps { list-style: none; margin: 0; padding: 8px 0 0; display: grid; }
.fc-steps li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0 7px 22px; color: var(--muted); }
.fc-steps li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--line-2); }
.fc-steps li:not(:last-child)::after { content: ""; position: absolute; left: 7.5px; top: calc(50% + 6px); height: calc(100% - 12px); width: 1px; background: var(--line-2); }
.fc-steps li.done, .fc-steps li.now { color: var(--ink); }
.fc-steps li.done::before { background: var(--accent); }
.fc-steps li.now::before { background: var(--surface); box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-soft); }
.fc-steps li.now span { font-weight: 600; }
.fc-steps li.done { background: no-repeat right center / 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2312a46b'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.about-visual .stamp { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 22px 16px 16px; box-shadow: var(--shadow-lg); }
.st-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.st-ic svg { width: 26px; height: 26px; }
.stamp small { display: block; font: 600 .66rem/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.stamp small:last-child { color: var(--muted); }
.stamp b { display: block; font: 800 clamp(2.2rem, 1.7rem + 1.6vw, 3rem)/1 var(--f-display); letter-spacing: -0.03em; color: var(--ink); margin: 2px 0; }
.about-copy { grid-area: c; display: grid; gap: 16px; }
.about-copy h2 { font-size: var(--t-xl); font-weight: 700; }
.about-copy p { color: var(--muted); font-size: var(--t-lg); line-height: 1.55; }
.pillars { grid-area: p; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pillar { display: grid; gap: 6px; align-content: start; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.pl-ic { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 8px; }
.pl-ic svg { width: 22px; height: 22px; }
.pillar b { font-family: var(--f-display); font-weight: 700; }
.pillar > span:last-child { color: var(--muted); font-size: var(--t-sm); line-height: 1.5; }
@media (max-width: 1000px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 920px) { .about { grid-template-columns: minmax(0, 1fr); grid-template-areas: "c" "v" "p"; } }
@media (max-width: 560px) {
  .about-visual { padding: 0; }
  .flow-card { display: none; }
  .about-visual .stamp { left: 12px; bottom: 12px; padding: 10px 16px 10px 10px; }
  .st-ic { width: 40px; height: 40px; }
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pillar { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 14px 16px; }
  .pl-ic { grid-row: span 2; margin: 0; }
}

/* bevezetés */
.steps4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px; }
.st4 { position: relative; display: grid; gap: 4px; align-content: start; padding: 22px 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.st4:not(:last-child)::after { content: ""; position: absolute; top: 74px; right: -45px; width: 46px; height: 28px; background: no-repeat center / 28px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='13' fill='%23fff' stroke='%23b9d5ea'/%3E%3Cpath d='M9 14h10M15 10l4 4-4 4' fill='none' stroke='%230a6aa6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(90deg, var(--line-2) 50%, transparent 0) repeat-x center / 6px 1px; z-index: 1; }
.st4-n { position: absolute; left: 18px; top: 18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font: 700 .95rem/1 var(--f-display); }
.st4-ill { display: block; height: 108px; margin: 0 0 10px 34px; }
.st4-ill svg { width: 100%; height: 100%; }
.st4-ill .s { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; filter: drop-shadow(0 4px 8px rgba(10, 60, 110, .12)); }
.st4-ill .b { fill: var(--accent); opacity: .85; }
.st4-ill .b2 { fill: var(--accent); }
.st4-ill .l { stroke: var(--line-2); stroke-width: 3; stroke-linecap: round; }
.st4-ill .k { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.st4-ill .g { fill: var(--accent-soft); fill-opacity: .6; stroke: var(--accent); stroke-width: 4; }
.st4-ill .w, .st4-ill .w3 { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.st4-ill .w3 { fill: #fff; stroke-width: 0; }
.st4-ill .w2 { fill: var(--surface); }
.st4-ill .p { fill: var(--accent); }
.st4-ill .ok { fill: var(--ok); }
.st4 h3 { font-size: 1.2rem; font-weight: 700; }
.st4-sub { font: 500 .98rem/1.35 var(--f-body); color: var(--ink-2); }
.st4 p { margin-top: 6px; color: var(--muted); font-size: var(--t-sm); line-height: 1.55; }
.rollout-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 28px; }
.rollout-foot p { margin: 0; max-width: 62ch; color: var(--muted); font-size: var(--t-sm); line-height: 1.55; }
@media (max-width: 1080px) { .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .st4::after { display: none; } }
@media (max-width: 600px) { .steps4 { grid-template-columns: minmax(0, 1fr); } .rollout-foot { flex-direction: column; align-items: flex-start; } }

/* kapcsolat */
.cta { background: linear-gradient(180deg, var(--surface) 0%, var(--sky) 100%); border-top: 1px solid var(--line); }
.cta .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 920px) { .cta .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; } .cta .wrap > div:first-child { display: contents; } .cta .eyebrow { justify-self: start; } .cta form { order: 1; margin-top: 28px; } .cta-next { order: 2; max-width: none; } }
.cta h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); font-weight: 800; letter-spacing: -0.025em; margin-top: 16px; }
.cta .lede { color: var(--muted); font-size: var(--t-lg); margin-top: 16px; max-width: 48ch; }
.cta .checks { margin-top: 24px; }
.cta-photo { margin-top: 28px; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; box-shadow: var(--shadow); background: var(--tint-2); }
.cta-photo img { width: 100%; height: 100%; object-fit: cover; }
form { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 14px; box-shadow: var(--shadow-lg); }
form h3 { font-size: 1.2rem; font-weight: 700; }
.cta-next { margin-top: 28px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); max-width: 560px; }
.cta-next h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; }
.cta-next ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: nx; }
.cta-next li { counter-increment: nx; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; }
.cta-next li::before { content: counter(nx); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #38a3e8, var(--accent)); color: #fff; font: 700 .85rem/1 var(--f-display); }
.cta-next li b { font-size: .95rem; }
.cta-next li span { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.cta-who { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; line-height: 1.5; }
.more-fields { border: 1px solid var(--line); border-radius: 12px; background: var(--tint); }
.more-fields summary { cursor: pointer; padding: 12px 14px; font-weight: 600; font-size: .9rem; color: var(--accent-ink); list-style: none; display: flex; align-items: center; gap: 8px; }
.more-fields summary::-webkit-details-marker { display: none; }
.more-fields summary::before { content: "+"; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); font-weight: 700; }
.more-fields[open] summary::before { content: "−"; }
.more-fields > :not(summary) { margin: 0 14px 14px; }
.more-fields .row2 + .field { margin-top: 14px; }
.field { display: grid; gap: 6px; min-width: 0; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 480px) { .row2 { grid-template-columns: minmax(0, 1fr); } }
label { font: 600 .8rem/1.2 var(--f-body); color: var(--ink-2); }
input, select, textarea { font: 400 var(--t-md)/1.4 var(--f-body); color: var(--ink); background: var(--paper); width: 100%; border: 1px solid var(--line-2); border-radius: 9px; padding: 11px 12px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { min-height: 96px; resize: vertical; }
.consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font: 400 .86rem/1.45 var(--f-body); color: var(--muted); }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { font-size: var(--t-sm); color: var(--accent-ink); }
.field.bad input, .field.bad select, .consent.bad { border-color: var(--busy); color: var(--busy); }

footer { border-top: 1px solid var(--line); background: var(--foot); color: var(--foot-muted); padding-block: 56px 32px; font-size: var(--t-sm); }
footer .wrap { display: grid; gap: 32px; }
footer .brand { color: var(--foot-fg); }
footer .brand-sub { color: var(--foot-muted); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 800px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-top > :first-child { grid-column: 1 / -1; } }
.foot-top h4 { font: 700 .95rem/1.2 var(--f-display); color: var(--foot-fg); margin-bottom: 14px; }
.foot-top ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-top a { color: var(--foot-muted); text-decoration: none; font-size: .92rem; transition: color .15s; }
.foot-top a:hover { color: var(--foot-fg); }
.foot-top p { max-width: 38ch; margin-top: 14px; line-height: 1.6; font-size: .92rem; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; padding-top: 22px; border-top: 1px solid var(--foot-line); font-size: .82rem; color: var(--faint); }


/* hang, kép, nyelv */
.innov { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .innov { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: var(--shadow); min-width: 0; }
.card-visual { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: var(--tint-2); overflow: hidden; }
.card-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-visual.ui { background: linear-gradient(160deg, var(--tint) 0%, var(--tint-2) 100%); display: grid; align-content: center; padding: 18px; }
/* blurred photo behind the UI mock + a tint veil for legibility (light/dark) / elmosott fotó a minta-felület mögött + fátyol az olvashatóságért */
.card-visual.ui > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.card-visual.ui.has-bg::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 55%, transparent) 0%, color-mix(in srgb, var(--tint-2) 35%, transparent) 100%); }
.card-visual.ui.has-bg > :not(.bg) { position: relative; z-index: 1; }
/* 16:9 is a minimum here: a longer dialogue grows the panel instead of being clipped (the card clips the corners) / a 16:9 itt minimum */
.card-visual.ui { overflow: visible; min-width: 0; }
.card-visual.ui.has-bg .sub.reply { background: color-mix(in srgb, var(--surface) 90%, transparent); }
.card-body { padding: 22px 24px 24px; display: grid; gap: 10px; align-content: start; }
.card-body .pname { font: 500 var(--t-xs)/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.card-body h3 { font-size: 1.3rem; font-weight: 700; }
.card-body p { color: var(--muted); font-size: var(--t-sm); line-height: 1.55; }
.card-body ul { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.card-body li { font-size: .88rem; padding-left: 14px; position: relative; }
.card-body li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.bubbles { display: grid; gap: 8px; max-width: 440px; width: 100%; margin-inline: auto; }
.bub { max-width: 82%; padding: 9px 12px; border-radius: 12px; font-size: .84rem; line-height: 1.4; background: var(--surface); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.bub small { display: block; font: 500 .72rem/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.bub.bot { justify-self: end; background: var(--accent); color: var(--on-accent); }
.bub.bot small { color: color-mix(in srgb, var(--on-accent) 75%, transparent); }
.bub.sys { justify-self: center; max-width: 100%; background: var(--ok-soft); color: var(--ok); font: 500 .7rem/1.3 var(--f-body); padding: 6px 10px; box-shadow: none; }
.subs { display: grid; gap: 8px; max-width: 460px; width: 100%; margin-inline: auto; }
.sub { background: var(--surface); border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(15,23,42,.08); display: grid; gap: 4px; }
.sub .lang { font: 500 .62rem/1 var(--f-mono); letter-spacing: .08em; color: var(--faint); }
.sub .orig { font-size: .84rem; }
.sub .tr { font-size: .86rem; font-weight: 600; color: var(--accent-ink); }
.sub.reply { border: 1px dashed var(--line-2); box-shadow: none; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.overlay { position: absolute; left: 14px; bottom: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.ov { background: var(--surface); color: var(--ink); border-radius: 10px; padding: 8px 11px; font-size: .78rem; box-shadow: var(--shadow); display: inline-flex; align-items: center; gap: 8px; }
.ov b { font-weight: 600; }
.ov .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--busy); }
.ov.thumbs { padding: 6px; gap: 6px; }
.ov.thumbs i { width: 46px; height: 34px; border-radius: 5px; background: center/cover no-repeat url("../img/snapview.jpg"); display: block; }
.ov.thumbs i:nth-child(2) { background-position: 20% 70%; } .ov.thumbs i:nth-child(3) { background-position: 80% 40%; }

@media (prefers-reduced-motion: reduce) { .live::before, .stream li.enter { animation: none; } }

.nav a, .btn, .brand-sub { white-space: nowrap; }
[hidden] { display: none !important; }

/* ── WordPress ─────────────────────────────────────────────── */
body .wp-site-blocks > * { margin-block: 0; }
.top { top: calc(env(safe-area-inset-top, 0px) + var(--wp-admin--admin-bar--height, 0px)); }
.vx-page { padding: clamp(48px, 7vw, 96px) 16px; min-height: 55vh; }
.vx-page h1 { font-size: var(--t-xl); margin-bottom: 18px; }
.vx-page h2 { font-size: var(--t-lg); }
.vx-page p, .vx-page li { color: var(--ink-2); }
.vx-meta { color: var(--muted); font: 500 var(--t-xs)/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
.vx-posts > li { padding-block: 22px; border-bottom: 1px solid var(--line); }
.consent a { color: var(--accent-ink); }
.form-msg[data-state="ok"] { color: var(--ok); }
.form-msg[data-state="error"] { color: var(--busy); }
.cf-turnstile { margin: 2px 0 4px; }

/* ── Legal pages / Jogi oldalak ───────────────────────────── */
.vx-page .wp-block-post-content > * + * { margin-top: .9em; }
.vx-page .wp-block-post-content > h2 { margin-top: 1.8em; }
.vx-page .wp-block-post-content > .vx-legal-meta + * { margin-top: 1.4em; }
.vx-page h3 { font-size: var(--t-md, 1.15rem); margin-top: 1.6em; }
.vx-page a { color: var(--accent-ink); overflow-wrap: anywhere; }
.vx-legal-meta { color: var(--muted); font-size: var(--t-xs, .85rem); }
.vx-legal-item { padding-left: 1.6em; }
.vx-legal-table { margin: 18px 0 26px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vx-legal-table table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .88rem; }
.vx-legal-table th, .vx-legal-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; color: var(--ink-2); }
.vx-legal-table th { background: var(--surface); color: var(--ink); }
.vx-legal-index li { padding-block: 6px; }
.foot-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }