/* FlowLab – a közös stílus "labor" változata: kockás laborfüzet, hűvösebb kiemelés */
:root {
  --paper: #F2F5F5;
  --paper-2: #E5ECEE;
  --sage: #D3DFE3;
  --accent: #1F5F7A;
  --accent-hover: #174A5F;
  --accent-soft: #DCE9EF;
  --grid: rgba(31, 95, 122, .07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #121D21; --paper-2: #182730; --sage: #1E2F37; --accent: #7EC0DA; --accent-hover: #A0D2E6; --accent-ink: #0B171C; --accent-soft: #1A3441; --grid: rgba(126, 192, 218, .06); }
}
:root[data-theme="dark"] { --paper: #121D21; --paper-2: #182730; --sage: #1E2F37; --accent: #7EC0DA; --accent-hover: #A0D2E6; --accent-ink: #0B171C; --accent-soft: #1A3441; --grid: rgba(126, 192, 218, .06); }
body {
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.section--tint { background: color-mix(in srgb, var(--paper-2) 88%, transparent); }
.brand .lab-mark { width: 30px; height: 30px; }

/* Hero folyamatábra */
.lab-hero { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 96px); }
.lab-hero h1 { max-width: 20ch; }
.flow { margin-top: 40px; width: 100%; height: auto; display: block; }
.flow .node rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.flow .node.is-ai rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.flow .node text { font-family: var(--font-head); font-weight: 600; font-size: 15px; fill: var(--ink); }
.flow .node text.sub { font-family: var(--font-body); font-weight: 400; font-size: 12.5px; fill: var(--ink-2); }
.flow .edge { stroke: var(--ink-2); stroke-width: 1.5; fill: none; }
.flow .dot { fill: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .flow .dot { animation: travel 5.5s linear infinite; offset-rotate: 0deg; }
  @keyframes travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
}
.flow-caption { font-size: .92rem; color: var(--ink-2); margin-top: 12px; }
.flow-mobile { display: none; }
@media (max-width: 760px) { .flow { display: none; } .flow-mobile { display: block; } }
.flow-mobile ol { list-style: none; padding: 0; margin: 28px 0 0; counter-reset: f; }
.flow-mobile li { counter-increment: f; position: relative; padding: 12px 14px 12px 52px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper); margin-bottom: 26px; font-family: var(--font-head); font-weight: 600; }
.flow-mobile li span { display: block; font-family: var(--font-body); font-weight: 400; font-size: .9rem; color: var(--ink-2); }
.flow-mobile li::before { content: counter(f); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: .85rem; }
.flow-mobile li:not(:last-child)::after { content: ""; position: absolute; left: 26px; bottom: -27px; width: 2px; height: 26px; background: var(--ink-2); }
.flow-mobile li.is-ai { border-color: var(--accent); background: var(--accent-soft); }

/* Elvek */
.principles { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.principles li { margin: 0; border-top: 3px solid var(--accent); padding-top: 16px; }
.principles h3 { margin-bottom: .4em; }
.principles p { margin: 0; color: var(--ink-2); font-size: .97em; }
@media (max-width: 820px) { .principles { grid-template-columns: 1fr; gap: 24px; } }

/* SOP-demó */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); margin-top: 32px; align-items: start; }
@media (max-width: 900px) { .demo { grid-template-columns: 1fr; } }
.demo textarea { min-height: 300px; font-size: .97rem; line-height: 1.6; }
.demo .counter { font-size: .85rem; color: var(--ink-2); text-align: right; margin-top: 4px; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.demo-actions .linkbtn { background: none; border: 0; padding: 4px 0; color: var(--accent); font: inherit; font-size: .95rem; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.demo-out { min-height: 200px; }
.demo-empty { border: 2px dashed var(--line); border-radius: var(--radius-m); padding: 28px; color: var(--ink-2); background: var(--paper); }
.demo-out .indexcard { transform: none; padding: 18px 20px 16px 56px; }
.demo-out .indexcard h3 { font-size: 1.15rem; line-height: 30px; margin-bottom: 0; }
.demo-out .indexcard .goal { font-family: var(--font-body); font-weight: 400; font-size: .9rem; line-height: 30px; margin: 0 0 0; color: #4A5A57; }
.demo-out .indexcard ol { counter-reset: s; }
.demo-out .indexcard li { line-height: 1.5; padding: 6px 0; font-size: .93rem; counter-increment: s; }
.demo-out .indexcard li::before { content: counter(s); top: 6px; left: -40px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #1F5F7A; color: #fff; font-size: .78rem; display: grid; place-items: center; }
.demo-out .indexcard li::after { display: none; }
.demo-out .indexcard li em { display: block; font-style: normal; font-family: var(--font-body); font-weight: 400; font-size: .82rem; color: #4A5A57; }
.demo-out .indexcard li { animation: none; }
.demo-lists { margin-top: 22px; display: grid; gap: 18px; }
.demo-lists h4 { font-family: var(--font-head); font-size: 1.02rem; margin: 0 0 6px; }
.demo-lists ul { margin: 0; font-size: .95rem; }
.badge { display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: .8rem; padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--accent); color: var(--accent); margin-bottom: 12px; }
.badge--warn { border-color: var(--warn); color: var(--warn); }

/* Esettanulmány-lista */
.cases { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--line); }
.cases li { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.cases h3 { margin: 0 0 4px; }
.cases p { margin: 0; color: var(--ink-2); font-size: .97em; }
.cases .state { font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--ink-2); }
@media (max-width: 640px) { .cases li { grid-template-columns: 1fr; } }

/* Esettanulmány-oldal */
.case-steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 0; }
.case-steps > li { margin: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.case-steps > li > h2 { font-size: 1.35rem; margin: 0; }
@media (max-width: 760px) { .case-steps > li { grid-template-columns: 1fr; gap: 8px; } }
.kpi { width: 100%; border-collapse: collapse; font-size: .95em; }
.kpi th, .kpi td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.kpi th { font-family: var(--font-head); font-weight: 600; }
.kpi td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sample-flag { display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: .78rem; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--warn) 20%, transparent); }
.scenarios { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.scenarios li { margin: 0; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); }
.scenarios li strong { font-family: var(--font-head); display: block; }
.case-steps > li > div { min-width: 0; }
.demo-out .indexcard { background-image: linear-gradient(90deg, transparent 39px, var(--card-margin) 39px, var(--card-margin) 41px, transparent 41px); }
.demo-out .indexcard .goal { line-height: 1.5; margin: 4px 0 10px; }
.demo-out .indexcard h3 { line-height: 1.3; }
.demo-out .indexcard li { border-top: 1px solid var(--card-rule); padding: 8px 0; }
.demo-out .indexcard li::before { top: 9px; }

/* ========== Végleges színvilág (labor): Kobalt és barack ========== */
/* Színpaletta (labor): Kobalt és barack */
:root { --paper: #F6F8FF; --paper-2: #EBEFFC; --sage: #FFF1E8; --ink: #151A3D; --ink-2: #50557A; --line: #D6DCEE; --accent: #2747D6; --accent-hover: #1C36AB; --accent-ink: #FFFFFF; --accent-soft: #E3E8FF; --band: #9FE5D0; --band-ink: #151A3D; --band-rule: #2747D6; --deep: #151A3D; --deep-ink: #FFF7F1; --deep-ink-2: #B9BCD6; --deep-accent: #FFB38A; --focus: #0B7A75; --grid: rgba(39,71,214,.07); color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0F1330; --paper-2: #161B3F; --sage: #171C3C; --ink: #F6F3FA; --ink-2: #AEB2D0; --line: #2A3060; --accent: #8EA2FF; --accent-hover: #AAB9FF; --accent-ink: #0E1230; --accent-soft: #222B5C; --band: #7FD6BE; --band-ink: #151A3D; --band-rule: #2747D6; --deep: #1B2150; --deep-ink: #FFF7F1; --deep-ink-2: #B9BCD6; --deep-accent: #FFB38A; --focus: #7FD8D2; --grid: rgba(142,162,255,.06); color-scheme: dark; } }
:root[data-theme="dark"] { --paper: #0F1330; --paper-2: #161B3F; --sage: #171C3C; --ink: #F6F3FA; --ink-2: #AEB2D0; --line: #2A3060; --accent: #8EA2FF; --accent-hover: #AAB9FF; --accent-ink: #0E1230; --accent-soft: #222B5C; --band: #7FD6BE; --band-ink: #151A3D; --band-rule: #2747D6; --deep: #1B2150; --deep-ink: #FFF7F1; --deep-ink-2: #B9BCD6; --deep-accent: #FFB38A; --focus: #7FD8D2; --grid: rgba(142,162,255,.06); color-scheme: dark; }