:root {
  color-scheme: light dark;
  /* világos téma (alap) */
  --bg: #f4f6fa; --surface: #ffffff; --surface-sunken: #e9edf5; --surface-overlay: #ffffff;
  --line: #d3dae8; --line-strong: #7c8aa8;
  --ink: #0a1020; --ink-muted: #46536f; --ink-subtle: #58657f;
  --brand: #ffb400; --brand-hover: #e6a100; --brand-text: #8a5800; --brand-shine: #c47d00; --on-brand: #0a1020;
  --wire: #e69500;
  --accent: #0b6fa8; --on-accent: #ffffff; --success: #0f8a5f; --danger: #b3261e; --focus-ring: #0b6fa8; --focus-glow: rgba(11,111,168,.25);
  --glow-s: rgba(230,149,0,.35); --glow-m: rgba(230,149,0,.3); --glow-l: rgba(230,149,0,.4);
  --shadow-glow: 0 0 0 1px rgba(230,149,0,.55), 0 8px 32px -4px rgba(230,149,0,.5);
  --font-display: "Space Grotesk", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 9999px;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070b14; --surface: #0e1626; --surface-sunken: #0a1020; --surface-overlay: #16213a;
    --line: #24324f; --line-strong: #5b6f99;
    --ink: #f2f5fb; --ink-muted: #a3b0c8; --ink-subtle: #8494b3;
    --brand: #ffb400; --brand-hover: #ffca47; --brand-text: #ffc233; --brand-shine: #ffe08a; --on-brand: #0a1020;
    --wire: #ffb400;
    --accent: #3fb6f0; --on-accent: #06101f; --success: #34d399; --danger: #ff7a70; --focus-ring: #3fb6f0; --focus-glow: rgba(63,182,240,.3);
    --glow-s: rgba(255,180,0,.6); --glow-m: rgba(255,180,0,.55); --glow-l: rgba(255,224,138,.9);
    --shadow-glow: 0 0 0 1px rgba(255,180,0,.5), 0 8px 40px -4px rgba(255,180,0,.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070b14; --surface: #0e1626; --surface-sunken: #0a1020; --surface-overlay: #16213a;
  --line: #24324f; --line-strong: #5b6f99;
  --ink: #f2f5fb; --ink-muted: #a3b0c8; --ink-subtle: #8494b3;
  --brand: #ffb400; --brand-hover: #ffca47; --brand-text: #ffc233; --brand-shine: #ffe08a; --on-brand: #0a1020;
  --wire: #ffb400;
  --accent: #3fb6f0; --on-accent: #06101f; --success: #34d399; --danger: #ff7a70; --focus-ring: #3fb6f0; --focus-glow: rgba(63,182,240,.3);
  --glow-s: rgba(255,180,0,.6); --glow-m: rgba(255,180,0,.55); --glow-l: rgba(255,224,138,.9);
  --shadow-glow: 0 0 0 1px rgba(255,180,0,.5), 0 8px 40px -4px rgba(255,180,0,.45);
}
:root[data-theme="light"] { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: var(--line); }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-sm); }
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- szöveg ---------- */
.eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-subtle); }
.eyebrow-dark { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--on-brand); }
.text-shine { background-image: linear-gradient(100deg, var(--brand-text) 35%, var(--brand-shine) 50%, var(--brand-text) 65%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 5s linear infinite; }
.mask { display: block; overflow: hidden; padding: .1em 0 .14em; margin: -.1em 0 -.14em; }
.rise { display: block; animation: rise 1.1s var(--ease-out) both; }
.ea-in { animation: fade-up .9s var(--ease-out) both; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--wire); animation: ping 2s var(--ease-out) infinite; }

/* ---------- navigáció ---------- */
.navlink { position: relative; padding: 8px 0; font: 500 12px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); transition: color .16s; }
.navlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--wire); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
.navlink:hover { color: var(--ink); }
.navlink:hover::after { transform: scaleX(1); }
.navphone { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/20px var(--font-mono); letter-spacing: .02em; color: var(--brand-text); transition: color .16s; }
.navphone:hover { color: var(--brand-hover); }

/* ---------- gombok ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; min-height: 48px; border-radius: var(--radius-pill); font: 700 15px/20px var(--font-sans); letter-spacing: .01em; border: 1px solid transparent; overflow: hidden; transition: transform .32s var(--ease-spring), box-shadow .32s var(--ease-out), background-color .16s, border-color .16s, color .16s; }
.btn .ico { width: 18px; height: 18px; transition: transform .32s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); }
.btn-primary:hover { background: var(--brand-hover); box-shadow: var(--shadow-glow); transform: translateY(-2px); }
.btn-primary:hover::after { transform: translateX(120%); transition: transform .7s var(--ease-out); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--brand-text); color: var(--brand-text); transform: translateY(-2px); }
.btn-dark { background: var(--on-brand); color: #ffb400; }
.btn-dark:hover { box-shadow: 0 14px 30px -10px rgba(10,16,32,.7); transform: translateY(-2px); }

/* ---------- hero: egyvonalas kapcsolási rajz ---------- */
.hero-grid { position: absolute; left: 0; right: 0; bottom: 0; height: 600px; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 70%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 70%, #000 20%, transparent 75%); }
.dg { position: relative; aspect-ratio: 1200 / 380; }
.dg svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dg .w { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dg .base { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s var(--ease-in-out) forwards; animation-delay: var(--d, 0s); }
.dg .live { stroke: var(--wire); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 5px var(--glow-s)); animation: draw var(--t, .6s) var(--ease-in-out) forwards; animation-delay: var(--l, 1s); }
.dg .pulse { stroke: var(--brand-shine); stroke-width: 3.5; stroke-dasharray: .03 .97; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 6px var(--glow-l)); animation: travel 4.2s linear infinite, fade .5s forwards; animation-delay: var(--p, 5s), var(--p, 5s); }
.dg .sym { fill: var(--bg); stroke: var(--line-strong); stroke-width: 2; animation: lightstroke .4s forwards; animation-delay: var(--l, 2s); }
.dg .mt { fill: var(--ink-subtle); font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .06em; animation: lighttext .4s forwards; animation-delay: var(--l, 2s); }
.dg .contact { fill: var(--bg); stroke: var(--line-strong); stroke-width: 2; }
.dg .blade { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; transform-box: view-box; transform: rotate(-32deg); animation: close .55s var(--ease-spring) both; animation-delay: var(--b, 1.4s); }
.dg .junction { fill: var(--wire); opacity: 0; animation: fade .3s forwards; animation-delay: var(--l, 2.6s); }
.dg .term { fill: var(--bg); stroke: var(--line-strong); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform .4s var(--ease-spring); animation: lightterm .5s forwards; animation-delay: var(--l, 4.3s); }
.dl { position: absolute; font: 500 12px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-subtle); animation: fade .8s both; animation-delay: .6s; }
.lk { position: absolute; left: 76%; width: 24%; transform: translateY(-50%); animation: fade .7s both; animation-delay: var(--l, 4.2s); }
.lk-t { display: block; font: 600 22px/26px var(--font-display); letter-spacing: -.01em; color: var(--ink); transition: color .16s; }
.lk-s { display: block; margin-top: 4px; font: 500 11px/16px var(--font-mono); letter-spacing: .06em; color: var(--ink-subtle); }
.lk:hover .lk-t { color: var(--brand-text); }
.dg:has(.lk1:hover) .t1, .dg:has(.lk2:hover) .t2, .dg:has(.lk3:hover) .t3, .dg:has(.lk4:hover) .t4 { transform: scale(1.7); }
.mlist { position: relative; }
.mlist::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; background: var(--wire); opacity: .7; }
.mlist a { position: relative; display: block; padding: 14px 0 14px 40px; }
.mlist a::before { content: ""; position: absolute; left: 0; top: 24px; width: 16px; height: 16px; border-radius: 50%; background: var(--wire); box-shadow: 0 0 14px var(--glow-m); }

/* ---------- kábeljelölő címke ---------- */
.tag { position: relative; display: inline-flex; align-items: center; padding: 5px 12px 5px 28px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface-overlay); font: 500 11px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.tag::before { content: ""; position: absolute; left: 9px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--bg); }

/* ---------- szolgáltatások: az áram lefelé folyik ---------- */
.svc { position: relative; }
.svc:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 78px; height: 100%; width: 2px; background: var(--line); transition: background-color .5s var(--ease-out); }
.svc:hover::before { background: var(--wire); }
.node { position: absolute; left: 0; top: 70px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg); transition: background-color .3s, border-color .3s, box-shadow .4s; z-index: 1; }
.svc:hover .node { background: var(--wire); border-color: var(--wire); box-shadow: 0 0 0 6px var(--glow-s), 0 0 20px var(--glow-m); }
.svc h3 { transition: color .2s; }
.svc:hover h3 { color: var(--brand-text); }
.wlink { position: relative; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; font: 700 14px/20px var(--font-sans); color: var(--brand-text); }
.wlink::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 1px; background: var(--brand-text); transition: width .5s var(--ease-out); }
.wlink:hover::after, .svc:hover .wlink::after { width: 100%; }
.wlink .ico { width: 16px; height: 16px; transition: transform .32s var(--ease-out); }
.wlink:hover .ico { transform: translate(2px, -2px); }

/* ---------- típustábla (E.ON) ---------- */
.plate { position: relative; background: var(--brand); color: var(--on-brand); border-radius: var(--radius-lg); padding: 44px 28px; box-shadow: inset 0 0 0 8px var(--brand), inset 0 0 0 9px rgba(10,16,32,.4); }
.screw { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe08a, #c98a00); box-shadow: inset 0 0 0 1px rgba(10,16,32,.45); }
.screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 1.5px; margin-top: -.75px; background: rgba(10,16,32,.6); transform: rotate(-35deg); }
.screw.s1 { left: 20px; top: 20px; } .screw.s2 { right: 20px; top: 20px; } .screw.s3 { left: 20px; bottom: 20px; } .screw.s4 { right: 20px; bottom: 20px; }
.spec { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; }
.spec dt { font: 500 12px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; flex: none; }
.spec .lead { flex: 1; min-width: 12px; border-bottom: 2px dotted rgba(10,16,32,.45); transform: translateY(-4px); }
.spec dd { font: 600 19px/26px var(--font-display); letter-spacing: -.01em; text-align: right; }
@media (min-width: 768px) { .plate { padding: 64px 72px; } }

/* ---------- cégbélyegző ---------- */
.stamp { position: relative; display: inline-block; padding: 12px 20px; border: 2px solid var(--brand-text); border-radius: 6px; color: var(--brand-text); text-align: center; transform: rotate(-5deg); opacity: .92; }
.stamp::before { content: ""; position: absolute; inset: 3px; border: 1px solid var(--brand-text); border-radius: 3px; opacity: .7; }

/* ---------- kapcsolat ---------- */
.bigphone { display: inline-block; font: 600 clamp(36px, 8.6vw, 120px)/1 var(--font-display); letter-spacing: -.04em; color: var(--ink); transition: color .3s; }
.bigphone::after { content: ""; display: inline-block; width: .11em; height: .11em; margin-left: .14em; border-radius: 50%; background: var(--brand); animation: ping 2s var(--ease-out) infinite; }
.bigphone:hover { color: var(--brand-text); }
.field { position: relative; }
.field input, .field textarea { width: 100%; padding: 24px 16px 8px; background: var(--surface-sunken); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-md); font: 500 16px/24px var(--font-sans); transition: border-color .16s, box-shadow .32s; }
.field textarea { min-height: 120px; resize: vertical; }
.field label { position: absolute; left: 17px; top: 15px; color: var(--ink-subtle); font: 500 16px/24px var(--font-sans); pointer-events: none; transform-origin: left top; transition: transform .32s var(--ease-out), color .16s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-glow); }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.78); color: var(--brand-text); }

/* ---------- segédek ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hero-h1 { font-size: clamp(32px, 9vw, 96px); line-height: 1.05; letter-spacing: -.04em; }

/* ---------- ajánlatkérő: kismegszakító-tábla ---------- */
.qgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.panel { margin: 0; padding: 0; min-width: 0; border: 0; }
.brk-row { position: relative; }
.brk { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; width: 100%; padding: 18px 56px 18px 0; text-align: left; border-radius: var(--radius-md); }
.sw { position: relative; flex: none; width: 64px; height: 36px; border-radius: 6px; background: var(--surface-overlay); border: 1.5px solid var(--line-strong); transition: background-color .3s, border-color .3s, box-shadow .4s; }
.knob { position: absolute; left: 3px; top: 3px; width: 26px; height: 27px; border-radius: 4px; background: var(--ink-subtle); transition: transform .45s var(--ease-spring), background-color .3s; }
.brk[aria-checked="true"] .sw { background: var(--wire); border-color: var(--wire); box-shadow: 0 0 22px -2px var(--glow-m); }
.brk[aria-checked="true"] .knob { transform: translateX(28px); background: var(--on-brand); }
.brk:hover .sw { border-color: var(--brand-text); }
.brk-txt { min-width: 0; }
.brk-t { display: block; font: 600 clamp(20px, 5.4vw, 28px)/1.15 var(--font-display); letter-spacing: -.015em; transition: color .2s; }
.brk-s { display: block; margin-top: 4px; font: 500 12px/18px var(--font-mono); letter-spacing: .04em; color: var(--ink-subtle); }
.brk[aria-checked="true"] .brk-t { color: var(--brand-text); }
.brk-row + .brk-row { border-top: 1px solid var(--line); }
/* vezeték a gombtól a gyűjtősínig */
.wire { position: absolute; right: 12px; top: 0; bottom: 0; width: 28px; pointer-events: none; }
.wire i { position: absolute; background: var(--line-strong); }
.wire .h { left: -2px; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.wire .v { right: 0; top: 0; bottom: 0; width: 2px; }
.brk-row:first-child .wire .v { top: 50%; }
.brk-row:last-child .wire .v { bottom: 50%; }
.wire i::after { content: ""; position: absolute; inset: 0; background: var(--wire); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.wire .v::after { transform: scaleY(0); transform-origin: center; }
.brk-row.on .wire .h::after { transform: scaleX(1); }
.brk-row.on .wire .v::after { transform: scaleY(1); transition-delay: .25s; }
.wire .v { background: var(--line-strong); }
/* a gyűjtősín a leghosszabb úton megy az űrlap felé */
.qform { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-top: 28px; border-top: 2px solid var(--line-strong); }
.q-sum { display: flex; align-items: baseline; gap: 16px; padding-bottom: 8px; }
.q-count { flex: none; min-width: 1ch; font: 600 clamp(48px, 12vw, 72px)/1 var(--font-display); letter-spacing: -.04em; color: var(--ink-subtle); transition: color .3s, text-shadow .4s; font-variant-numeric: tabular-nums; }
.q-sum.on .q-count { color: var(--brand-text); text-shadow: 0 0 28px var(--glow-m); }
.q-label { font: 500 15px/24px var(--font-sans); color: var(--ink-muted); }
.q-status { flex: 1 1 260px; max-width: 420px; font: 500 14px/22px var(--font-sans); color: var(--ink-subtle); }
.q-status.err { color: var(--danger); }
.quote .field input, .quote .field textarea { background: var(--surface); }

/* bekapcsolási lüktetés beküldéskor */
.quote.surge .wire .h::after, .quote.surge .wire .v::after { animation: surge 1.6s var(--ease-in-out); }
.quote.surge .q-count { animation: surge-t 1.6s var(--ease-in-out); }
/* egyszeri jelzés: az első kapcsoló megbillen */
.quote.seen .brk-row:first-child .knob { animation: nudge 1.1s var(--ease-spring) .5s 1; }

@media (min-width: 1024px) {
  .brk { padding-right: 32px; }
  .wire { right: -58px; width: 80px; }
  .qgrid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 56px; align-items: start; }
  .qform { padding: 8px 0 0 56px; border-top: 0; border-left: 2px solid var(--line-strong); }
}
@media (max-width: 420px) {
  .brk { gap: 14px; padding-right: 44px; }
  .sw { width: 56px; }
  .brk[aria-checked="true"] .knob { transform: translateX(20px); }
}

/* ---------- lebegő ajánlat gomb ---------- */
.fab { position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 22px 12px 18px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font: 700 15px/20px var(--font-sans); letter-spacing: .01em; white-space: nowrap; box-shadow: 0 10px 28px -8px rgba(10,16,32,.55); animation: fab-breathe 3.2s ease-in-out infinite; transition: transform .32s var(--ease-spring), background-color .16s; }
.fab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--accent); opacity: 0; transform: scale(1); will-change: transform, opacity; animation: fab-ring 3.2s ease-out infinite; pointer-events: none; }
.fab .ico { width: 20px; height: 20px; }
.fab:hover { transform: translateY(-2px) scale(1.03); }
.fab:active { transform: scale(.97); }
.fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
footer { padding-bottom: 88px; }
@media (max-width: 380px) { .fab { padding: 12px 18px 12px 14px; font-size: 14px; } }

.spec dd { min-width: 0; }
@media (max-width: 520px) {
  .spec { flex-wrap: wrap; row-gap: 2px; }
  .spec .lead { display: none; }
  .spec dd { width: 100%; text-align: left; }
}
@keyframes fab-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }
@keyframes fab-glow { 0%, 100% { opacity: 0; } 50% { opacity: .5; } }
@keyframes fab-ring { 0% { transform: scale(1); opacity: 0; } 10% { opacity: .5; } 75%, 100% { transform: scale(1.14, 1.42); opacity: 0; } }
@keyframes surge { 0%, 100% { filter: none; } 30% { filter: drop-shadow(0 0 8px var(--wire)) brightness(1.5); } }
@keyframes surge-t { 30% { transform: scale(1.12); } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(12px); } 70% { transform: translateX(4px); } }

/* ---------- kiegészítő utility-k ---------- */
.gap-y-8{row-gap:2rem}.pt-16{padding-top:4rem}
@media (min-width:768px){.md\:pt-24{padding-top:6rem}.md\:mt-12{margin-top:3rem}}

/* ---------- villanykapcsoló (téma) ---------- */
.nav-tools { display: flex; align-items: center; gap: 16px; }
.lsw { position: relative; flex: none; width: 34px; height: 46px; padding: 0; border-radius: 7px; background: var(--surface); border: 1.5px solid var(--line-strong); box-shadow: inset 0 0 0 3px var(--bg); perspective: 120px; transition: border-color .2s, box-shadow .2s; }
.lsw:hover { border-color: var(--brand-text); }
.lsw .rk { position: absolute; left: 7px; right: 7px; top: 7px; bottom: 7px; border-radius: 4px; background: linear-gradient(var(--wire) 0 50%, var(--surface-sunken) 50% 100%); border: 1px solid var(--line-strong); transform-origin: center; transform: rotateX(-24deg); transition: transform .35s var(--ease-spring), background .3s; }
.lsw[aria-checked="false"] .rk { transform: rotateX(24deg); background: linear-gradient(var(--surface-sunken) 0 50%, var(--ink-subtle) 50% 100%); }
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .5s ease, color .5s ease, border-color .5s ease, fill .5s ease, stroke .5s ease, box-shadow .5s ease !important; }
@media (max-width: 420px) { .nav-tools { gap: 10px; } .navphone { font-size: 13px; } }

/* ---------- szövegkiemelés (hero): a szöveg színe nem változik, csak a háttere ---------- */
.hl { --hl: #ffd23f; padding: 0 .12em; margin: 0 -.12em; background-image: linear-gradient(var(--hl), var(--hl)); background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 80%; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: hl-in 1s var(--ease-out) 1.1s forwards; }
:root[data-theme="dark"] .hl { --hl: #2f6bff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hl { --hl: #2f6bff; } }
@keyframes hl-in { to { background-size: 100% 80%; } }

/* ---------- fotók ---------- */
.photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ph { margin: 0; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-overlay); aspect-ratio: 3 / 2; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.credit { text-decoration: underline; text-underline-offset: 2px; }
.credit:hover { color: var(--brand-text); }
@media (min-width: 768px) { .photos { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; } .ph { aspect-ratio: auto; height: 380px; } }

/* ---------- hero: asztali nézeten a kapcsolási rajz már betöltéskor teljes egészében látszik ---------- */
.hero-wrap { padding-top: 56px; }
@media (min-width: 768px) { .hero-wrap { padding-top: 80px; } }
@media (min-width: 1024px) {
  .hero-wrap { padding-top: 32px; }
  .hero-top { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 32px; align-items: end; }
  .hero-h1 { font-size: min(4.8vw, 66px); }
  .hero-top .hero-side { display: block; margin: 0 0 6px; }
  .hero-top .hero-cta { margin-top: 24px; justify-content: flex-start; }
  /* az ábra a nézet magasságához igazodik, hogy ne lógjon ki az első képernyőről */
  .dg { max-width: max(720px, calc((100vh - 400px) * 3.158)); max-width: max(720px, calc((100svh - 400px) * 3.158)); margin-left: auto; margin-right: auto; }
}

/* ---------- animációk ---------- */
@keyframes rise {
  from { transform: translateY(110%); }
  to { transform: none; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes shine {
  from { background-position: 150% 0; }
  to { background-position: -100% 0; }
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 var(--glow-s); }
  80%, 100% { box-shadow: 0 0 0 10px transparent; }
}
@keyframes draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes travel {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes close {
  from { transform: rotate(-32deg); }
  to { transform: rotate(0deg); stroke: var(--wire); }
}
@keyframes lightstroke {
  to { stroke: var(--wire); }
}
@keyframes lighttext {
  to { fill: var(--brand-text); }
}
@keyframes lightterm {
  to { fill: var(--wire); stroke: var(--wire); filter: drop-shadow(0 0 8px var(--glow-s)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .dg .pulse { display: none; }
  .fab { animation: none !important; }
  .fab::before { inset: -6px; transform: none !important; animation: fab-glow 3.2s ease-in-out infinite !important; }
}

/* ---------- Tailwind 3.4.17 utility réteg (a design system configjával fordítva) ---------- */
.absolute{position:absolute}.relative{position:relative}.isolate{isolation:isolate}.z-20{z-index:20}.mx-auto{margin-left:auto;margin-right:auto}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.min-w-0{min-width:0}.min-w-\[240px\]{min-width:240px}.max-w-\[1020px\]{max-width:1020px}.max-w-\[360px\]{max-width:360px}.max-w-\[380px\]{max-width:380px}.max-w-\[440px\]{max-width:440px}.max-w-\[460px\]{max-width:460px}.max-w-page{max-width:1200px}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-between{justify-content:space-between}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-12{column-gap:3rem}.gap-x-6{column-gap:1.5rem}.gap-x-8{column-gap:2rem}.gap-y-10{row-gap:2.5rem}.gap-y-12{row-gap:3rem}.gap-y-2{row-gap:.5rem}.gap-y-6{row-gap:1.5rem}.overflow-hidden{overflow:hidden}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-line{border-color:var(--line)}.border-line-strong{border-color:var(--line-strong)}.bg-bg{background-color:var(--bg)}.bg-surface-sunken{background-color:var(--surface-sunken)}.px-4{padding-left:1rem;padding-right:1rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-16{padding-bottom:4rem}.pb-2{padding-bottom:.5rem}.pl-10{padding-left:2.5rem}.pt-14{padding-top:3.5rem}.pt-3{padding-top:.75rem}.pt-8{padding-top:2rem}.font-display{font-family:var(--font-display)}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[14px\]{font-size:14px}.text-\[17px\]{font-size:17px}.text-\[18px\]{font-size:18px}.text-\[20px\]{font-size:20px}.text-\[22px\]{font-size:22px}.text-\[24px\]{font-size:24px}.text-\[32px\]{font-size:32px}.text-\[40px\]{font-size:40px}.text-\[60px\]{font-size:60px}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-\[16px\]{line-height:16px}.leading-\[18px\]{line-height:18px}.leading-\[22px\]{line-height:22px}.leading-\[24px\]{line-height:24px}.leading-\[26px\]{line-height:26px}.leading-\[28px\]{line-height:28px}.leading-\[30px\]{line-height:30px}.leading-\[40px\]{line-height:40px}.leading-\[44px\]{line-height:44px}.leading-\[58px\]{line-height:58px}.tracking-\[-0\.01em\]{letter-spacing:-.01em}.tracking-\[-0\.025em\]{letter-spacing:-.025em}.tracking-\[-0\.02em\]{letter-spacing:-.02em}.tracking-\[-0\.03em\]{letter-spacing:-.03em}.tracking-\[-0\.04em\]{letter-spacing:-.04em}.tracking-\[\.06em\]{letter-spacing:.06em}.tracking-\[\.14em\]{letter-spacing:.14em}.text-brand-text{color:var(--brand-text)}.text-ink{color:var(--ink)}.text-ink-muted{color:var(--ink-muted)}.text-ink-subtle{color:var(--ink-subtle)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:text-brand-text:hover{color:var(--brand-text)}
@media (min-width:640px){.sm\:text-\[88px\]{font-size:88px}.sm\:leading-\[84px\]{line-height:84px}}
@media (min-width:768px){.md\:mt-14{margin-top:3.5rem}.md\:mt-16{margin-top:4rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:border-b{border-bottom-width:1px}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:py-24{padding-top:6rem;padding-bottom:6rem}.md\:pb-20{padding-bottom:5rem}.md\:pb-24{padding-bottom:6rem}.md\:pl-14{padding-left:3.5rem}.md\:pt-20{padding-top:5rem}.md\:text-\[44px\]{font-size:44px}.md\:text-\[56px\]{font-size:56px}.md\:text-\[60px\]{font-size:60px}.md\:text-\[64px\]{font-size:64px}.md\:leading-\[50px\]{line-height:50px}.md\:leading-\[60px\]{line-height:60px}.md\:leading-\[62px\]{line-height:62px}.md\:leading-\[68px\]{line-height:68px}}
@media (min-width:1024px){.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-6{grid-column:span 6/span 6}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:col-span-8{grid-column:span 8/span 8}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:justify-end{justify-content:flex-end}.lg\:gap-16{gap:4rem}.lg\:pt-3{padding-top:.75rem}}
@media (min-width:1280px){.xl\:text-\[112px\]{font-size:112px}.xl\:leading-\[104px\]{line-height:104px}}