/* PONT. — smartINDUSTRIES concept site · SHELL styles (SPEC §3) */
:root {
  --ink: #0A0A0A; --bone: #F5F5F5; --red: #F90606; --grey: #8A8A8A; --grey-2: #4A4A4A;
  --ink-rgb: 10, 10, 10; --bone-rgb: 245, 245, 245; --grey-alt: #5E5E5B;
  --k: #0A0A0A; --k-rgb: 10, 10, 10; --red-t: var(--red); /* --k: black in both themes (type on red); --red-t: red as text */
  --line: rgba(var(--bone-rgb), .14); --fg: var(--bone); --fg-2: var(--grey); --fg-3: rgba(var(--bone-rgb), .74);
  --scrim: rgba(var(--ink-rgb), .72); --surface: var(--ink);
  --swift: cubic-bezier(.2, .9, .1, 1); --punch: cubic-bezier(.7, 0, .1, 1); --glide: cubic-bezier(.65, 0, .35, 1);
  --beat: .469s;
  --gx: 64px; --top: 96px; --bot: 136px;
  --f-d: Archivo, "Helvetica Neue", Arial, sans-serif;
  --f-s: "Instrument Serif", "Times New Roman", serif;
  --f-m: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ww: min(56vw, calc((100vh - var(--top) - var(--bot)) * 1.6));
  --wh: calc(var(--ww) / 1.6);
  --wx: calc(100vw - var(--gx) - var(--ww));
  --wy: calc(var(--top) + (100vh - var(--top) - var(--bot) - var(--wh)) / 2);
  color-scheme: dark;
}
/* light theme: the two neutrals trade places (ink is the paper, bone the type); red stays red */
html[data-theme="light"] {
  --ink: #F5F5F5; --bone: #0A0A0A; --ink-rgb: 245, 245, 245; --bone-rgb: 10, 10, 10;
  --grey: #5C5C5C; --grey-2: #B9B9B9; --grey-alt: #A4A4A0; --red-t: #D00000; color-scheme: light;
}
html[data-theme="light"][data-field="2d"] #field { filter: invert(1) hue-rotate(180deg); } /* the canvas fallback draws dark-only */
body.ground-bone { --fg: var(--ink); --fg-2: var(--grey-alt); --fg-3: rgba(var(--ink-rgb), .78); --line: rgba(var(--ink-rgb), .16); --scrim: rgba(var(--bone-rgb), .82); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--bone); }
body { font-family: var(--f-d); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior: none; }
p, h1, h2, h3, h4, ol, ul, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
kbd { font-family: var(--f-m); font-size: 10px; border: 1px solid var(--line); border-radius: 3px; padding: 1px 4px; color: var(--fg-2); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--red); color: var(--ink); }

.skip { position: fixed; left: 16px; top: -60px; z-index: 50; background: var(--bone); color: var(--ink); padding: 10px 14px; font: 600 14px var(--f-d); border-radius: 4px; }
.skip:focus { top: 16px; }

#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; transition: opacity .6s var(--glide); }
/* media box over the window anchor: behind the opaque field canvas normally (keeps the video on-screen for
   autoplay policies); .front = the field can't draw this media → crisp DOM poster, then the playing video */
.media-win { position: fixed; left: 0; top: 0; width: 2px; height: 2px; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .47s var(--glide); }
.media-win.on { opacity: 1; }
.media-win.front { z-index: 1; }
.media-win img, .media-win video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) 50%; display: block; opacity: 0; transition: opacity .47s var(--glide); }
.media-win video { visibility: hidden; }
.media-win video.on { visibility: visible; opacity: .02; }
.media-win:not(.front) video.on, .media-win.front img.ok, .media-win.front video.on.live { opacity: 1; }

/* ---------- status glyphs (CSS, never font glyphs) ---------- */
.st { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; vertical-align: 0; margin-right: 8px; position: relative; top: -1px; }
.st-live { background: var(--red); }
.st-progress { border: 1.5px solid var(--fg); background: linear-gradient(90deg, var(--fg) 50%, transparent 50%); }
.st-concept { border: 1.5px solid var(--fg-2); }

/* ---------- crop marks ---------- */
.crops i { position: fixed; z-index: 5; width: 16px; height: 16px; pointer-events: none; border: 0 solid var(--fg); opacity: .55; }
.crops i:nth-child(1) { left: 24px; top: 24px; border-left-width: 1px; border-top-width: 1px; }
.crops i:nth-child(2) { right: 24px; top: 24px; border-right-width: 1px; border-top-width: 1px; }
.crops i:nth-child(3) { left: 24px; bottom: 24px; border-left-width: 1px; border-bottom-width: 1px; }
.crops i:nth-child(4) { right: 24px; bottom: 24px; border-right-width: 1px; border-bottom-width: 1px; }

/* ---------- HUD ---------- */
.hud { position: fixed; left: 0; right: 0; z-index: 7; color: var(--fg); pointer-events: none; transition: color .3s; }
.hud a, .hud button, .hud nav { pointer-events: auto; }
.hud-top { top: 0; height: 80px; padding: 0 var(--gx); display: flex; align-items: center; gap: 18px; }
.logo { display: inline-flex; align-items: baseline; font-size: 14px; line-height: 1; letter-spacing: .01em; }
.lg-s { font-weight: 300; font-stretch: 110%; }
.lg-i { font-weight: 900; font-stretch: 100%; }
.lg-dot { display: inline-block; width: .3em; height: .3em; border-radius: 50%; background: var(--red); margin-left: .08em; }
.hud-city, .chap-m { font: 500 11px/1 var(--f-m); letter-spacing: .14em; color: var(--fg-2); }
.chap-m { display: none; }
.hud-map { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--f-m); letter-spacing: .14em; padding: 10px 12px; border-radius: 999px; transition: background .2s; }
.hud-map:hover { background: rgba(127, 127, 127, .14); }
.ring { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; position: relative; }
.ring::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--red); }
.hud-cta { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 18px; border: 1px solid var(--line); border-radius: 999px; font: 600 13px/1 var(--f-d); font-stretch: 112%; letter-spacing: .01em; transition: background .25s var(--swift), color .25s, border-color .25s; }
/* language switch (HU ↔ EN): the same quiet mono as the HUD buttons, before the theme toggle */
.hud-lang { margin-left: auto; font: 500 11px/1 var(--f-m); letter-spacing: .14em; color: var(--fg-2); padding: 10px 6px; border-radius: 4px; transition: color .2s; }
.hud-lang:hover { color: var(--fg); }
.hud-lang + .hud-theme { margin-left: 0; }
/* theme toggle: a moon in the dark, a sun in the light; the cut slides off, the rays fan in */
.hud-theme { margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: var(--fg); transition: background .2s; }
.th-ic { width: 20px; height: 20px; overflow: visible; transition: transform .6s var(--swift); }
.th-core, .th-cut, .th-rays { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--swift), opacity .35s; }
.th-rays { transform: scale(.4) rotate(-60deg); opacity: 0; }
html[data-theme="light"] .th-ic { transform: rotate(180deg); }
html[data-theme="light"] .th-core { transform: scale(.52); }
html[data-theme="light"] .th-cut { transform: translate(9px, -9px); }
html[data-theme="light"] .th-rays { transform: none; opacity: 1; }
@media (hover: hover) {
  .hud-theme:hover { background: rgba(127, 127, 127, .14); }
  .hud-theme:hover .th-ic { transform: rotate(-20deg); }
  html[data-theme="light"] .hud-theme:hover .th-ic { transform: rotate(200deg); }
}
.map .hud-theme { margin-left: 0; width: 32px; height: 32px; padding: 0; border-radius: 50%; }
.hud-cta .btn-dot { width: 24px; height: 24px; }
.hud-cta:hover { background: var(--fg); color: var(--surface); border-color: var(--fg); }
body.ground-bone .hud-cta:hover { color: var(--bone); }
.btn-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: none; transition: transform .35s var(--swift); }
.hud-cta:hover .btn-dot, .btn:hover .btn-dot { transform: scale(1.25); }

.hud-bottom { bottom: 0; height: 112px; padding: 0 var(--gx) 34px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; }
.hb-left { min-width: 0; }
.chap { font: 500 12px/1.2 var(--f-m); letter-spacing: .14em; white-space: nowrap; }
.chap .st { margin-right: 6px; }
.tc { margin-top: 6px; font: 400 11px/1.2 var(--f-m); letter-spacing: .1em; color: var(--fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hb-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.hb-btn { font: 500 11px/1 var(--f-m); letter-spacing: .14em; color: var(--fg-2); padding: 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; transition: color .2s; white-space: nowrap; }
.hb-btn:hover, .hb-btn[aria-pressed="true"], .hb-btn[aria-expanded="true"] { color: var(--fg); }
.snd { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.js-sound[aria-pressed="true"] .snd { background: var(--red); border-color: var(--red); }
.js-sound:disabled { opacity: .4; cursor: default; }

/* timeline */
.timeline { display: flex; align-items: end; }
.tl-map { display: none; }
.tl-list { display: flex; align-items: end; }
.tl-tick { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 26px; height: 44px; padding-bottom: 2px; gap: 6px; }
.tl-tick .st { margin: 0; width: 5px; height: 5px; top: 0; }
.tl-tick .st-progress, .tl-tick .st-concept { border-width: 1px; }
.tl-bar { width: 1px; height: 12px; background: var(--fg); opacity: .4; transition: height .35s var(--swift), opacity .2s, background .2s, width .2s; }
.tl-tick:hover .tl-bar, .tl-tick:focus-visible .tl-bar { opacity: 1; height: 18px; }
.tl-tick.is-on .tl-bar { width: 2px; height: 24px; opacity: 1; background: var(--red); }
.tl-lab { position: absolute; bottom: 52px; left: 50%; transform: translate(-50%, 4px); white-space: nowrap; font: 500 10px/1 var(--f-m); letter-spacing: .14em; color: var(--fg); background: var(--surface); padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .25s var(--swift); }
body.ground-bone .tl-lab { background: var(--bone); }
.tl-tick:hover .tl-lab, .tl-tick:focus-visible .tl-lab { opacity: 1; transform: translate(-50%, 0); }
.tl-tick:focus-visible { outline-offset: 0; }

/* dot hit + phone thumb dot */
.dot-hit { position: fixed; left: 0; top: 0; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; z-index: 4; transform: translate(-200px, -200px); }
.dot-hit:focus-visible { outline-offset: 2px; }
.fab-dot { display: none; }

/* shortcuts popover */
.keys { position: fixed; right: var(--gx); bottom: 112px; z-index: 12; width: 300px; padding: 18px 20px; background: rgba(var(--ink-rgb), .94); border: 1px solid rgba(var(--bone-rgb), .14); border-radius: 6px; color: var(--bone); backdrop-filter: blur(8px); }
.keys-h { font: 500 11px/1 var(--f-m); letter-spacing: .14em; color: var(--grey); margin-bottom: 12px; }
.keys dl div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid rgba(var(--bone-rgb), .08); font-size: 13px; }
.keys dt { white-space: nowrap; } .keys dt kbd { color: var(--bone); margin-right: 2px; }
.keys dd { color: var(--grey); text-align: right; }

/* ---------- stage & forms ---------- */
.stage { position: fixed; inset: 0; z-index: 2; touch-action: none; overflow: hidden; outline: none; }
.form { position: absolute; inset: 0; visibility: hidden; opacity: 0; pointer-events: none; color: var(--fg); transition: opacity .22s var(--glide), visibility 0s linear .22s; }
.form.is-active { visibility: visible; opacity: 1; transition: opacity .4s var(--glide) .12s, visibility 0s; }
html:not(.js) .form:target { visibility: visible; opacity: 1; }
html:not(.js) .stage:has(.form:target) .f-pont { visibility: hidden; }
.form a, .form button, .form [tabindex="0"], .form .copy { pointer-events: auto; }
.anchor { position: absolute; pointer-events: none; }
.a-window, .win-ui { position: absolute; left: var(--wx); top: var(--wy); width: var(--ww); height: var(--wh); pointer-events: none; }
.a-dot { position: absolute; left: calc(var(--wx) - 28px); top: calc(var(--wy) + var(--wh) - 8px); width: 16px; height: 16px; }
.wc { position: absolute; width: 14px; height: 14px; border: 0 solid var(--fg); opacity: .6; }
.wc.tl { left: -10px; top: -10px; border-left-width: 1px; border-top-width: 1px; }
.wc.tr { right: -10px; top: -10px; border-right-width: 1px; border-top-width: 1px; }
.wc.bl { left: -10px; bottom: -10px; border-left-width: 1px; border-bottom-width: 1px; }
.wc.br { right: -10px; bottom: -10px; border-right-width: 1px; border-bottom-width: 1px; }
.win-cap { position: absolute; left: 0; top: -30px; font: 500 10px/1 var(--f-m); letter-spacing: .16em; color: var(--fg-2); }

.copy { position: absolute; left: var(--gx); bottom: var(--bot); width: min(34vw, 520px); isolation: isolate; display: flex; flex-direction: column; gap: 14px; }
.copy::before { content: ''; position: absolute; z-index: -1; inset: -30% -35% -25% -45%; background: radial-gradient(closest-side, var(--scrim), rgba(var(--ink-rgb), 0)); pointer-events: none; }
body.ground-bone .copy::before { background: radial-gradient(closest-side, var(--scrim), rgba(var(--bone-rgb), 0)); }
body.ground-bone .f-shapes .copy::before { inset: -50vh -90px -50vh calc(-1 * var(--gx) - 2px); background: linear-gradient(to right, rgba(var(--bone-rgb), .96) 0, rgba(var(--bone-rgb), .96) calc(100% - 90px), rgba(var(--bone-rgb), 0)); }
.kicker { font: 500 11px/1.4 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.kst { color: var(--fg); display: inline-flex; align-items: center; }
.sep { opacity: .6; }
.metric { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.num { font-family: var(--f-d); font-weight: 900; font-stretch: 125%; font-size: clamp(56px, 6vw, 104px); line-height: .86; letter-spacing: -.01em; }
.unit { font: 500 11px/1.3 var(--f-m); letter-spacing: .14em; color: var(--fg-2); }
.serif { font-family: var(--f-s); font-weight: 400; font-size: clamp(28px, 3.4vw, 56px); line-height: 1.05; letter-spacing: -.005em; text-wrap: balance; color: var(--fg); }
.f-stipple .serif, .f-layers .serif { font-size: clamp(26px, 2.7vw, 42px); }
.serif-s { font-size: clamp(24px, 2.4vw, 36px) !important; }
.text { font-size: 15px; line-height: 1.55; color: var(--fg-3); max-width: 46ch; text-wrap: pretty; }
.fine { font-size: 12.5px; line-height: 1.5; color: var(--fg-2); max-width: 52ch; }
.mono-line { font: 500 11px/1.4 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); display: flex; align-items: center; gap: 8px; }
.pip-live { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: blink calc(var(--beat) * 2) steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.tags, .spec { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span, .spec span { font: 500 10px/1 var(--f-m); letter-spacing: .14em; padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--fg-3); }
.quote { padding-left: 16px; border-left: 1px solid var(--line); }
.quote blockquote p { font: italic 400 19px/1.32 var(--f-s); color: var(--fg); text-wrap: pretty; }
.quote figcaption { margin-top: 8px; font: 500 10.5px/1.4 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.stars { color: var(--red-t); letter-spacing: .1em; margin-left: 4px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 4px; }
.lnk { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 14px/1 var(--f-d); font-stretch: 112%; color: var(--fg); border-bottom: 1px solid transparent; }
.lnk span[aria-hidden] { transition: transform .3s var(--swift); }
.lnk:hover span[aria-hidden] { transform: translateX(4px); }
.lnk-want span[aria-hidden] { color: var(--red-t); }
.lnk:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.lnk-plain { min-height: 32px; font-weight: 500; font-size: 13px; color: var(--fg-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 52px; padding: 0 24px; border-radius: 999px; font: 700 15px/1 var(--f-d); font-stretch: 112%; letter-spacing: .01em; transition: transform .3s var(--swift), background .2s, color .2s, border-color .2s; }
.btn:active { transform: scale(.97); }
.btn-red { background: var(--red); color: var(--k); }
.btn-red .btn-dot { background: var(--k); }
.btn-red:hover { background: #ff2a2a; }
.btn-ghost { border: 1px solid var(--line); color: var(--fg); font-weight: 600; }
.btn-ghost:hover { border-color: var(--fg); }
.item { display: none; flex-direction: column; gap: 12px; }
.item.is-on { display: flex; }
.item-title { font: 800 13px/1.2 var(--f-d); font-stretch: 75%; letter-spacing: .12em; text-transform: uppercase; color: var(--fg); display: flex; gap: 10px; }
.item-title .n { font-family: var(--f-m); font-weight: 500; color: var(--red-t); letter-spacing: .1em; }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.legend div { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.legend dt { font: 900 20px/1 var(--f-d); font-stretch: 125%; }
.legend dd { font: 500 10px/1.35 var(--f-m); letter-spacing: .12em; color: var(--fg-2); }
.legend-layers dt { font-size: 14px; font-stretch: 75%; font-weight: 800; letter-spacing: .06em; }
.state { font: 600 14px/1 var(--f-d); font-stretch: 112%; display: flex; align-items: center; }

/* enter choreography (added by SHELL on navigation only — never on first paint) */
.form.enter .copy > *, .form.enter .item.is-on > * { animation: rise .62s var(--swift) both; }
.form.enter .copy > :nth-child(2) { animation-delay: .06s; } .form.enter .copy > :nth-child(3) { animation-delay: .12s; }
.form.enter .copy > :nth-child(4) { animation-delay: .18s; } .form.enter .copy > :nth-child(5) { animation-delay: .24s; }
.form.enter .copy > :nth-child(n+6) { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.item.swap > * { animation: rise .5s var(--swift) both; }

/* ---------- 01 pont ---------- */
.f-pont .status-pill { position: absolute; left: var(--gx); top: 104px; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; font: 500 10.5px/1 var(--f-m); letter-spacing: .14em; color: var(--fg); }
.f-pont .status-pill .st { animation: blink calc(var(--beat) * 2) steps(1) infinite; }
.live-line { position: absolute; right: var(--gx); top: 112px; font: 500 10.5px/1 var(--f-m); letter-spacing: .14em; color: var(--fg-2); }
.nojs-line a { color: var(--fg); border-bottom: 1px solid var(--red); padding-bottom: 2px; margin-left: 6px; }
.lockup { position: absolute; left: var(--gx); top: calc(var(--top) + 12vh); display: flex; flex-direction: column; align-items: flex-start; --ws: clamp(56px, min(12.2vw, 20.5vh), 236px); }
.lk-smart { font-weight: 300; font-stretch: 125%; font-size: calc(var(--ws) * .17); letter-spacing: .52em; line-height: 1; margin: 0 0 calc(var(--ws) * .06) calc(var(--ws) * .045); color: var(--fg); }
.lk-word { display: inline-flex; align-items: baseline; font-weight: 900; font-stretch: 100%; font-size: var(--ws); line-height: .74; letter-spacing: -.012em; padding-top: .02em; }
.wm { transition: color .12s linear; }
.css-dot { display: inline-block; width: .19em; height: .19em; border-radius: 50%; background: var(--red); margin-left: .05em; flex: none; }
body.field-live .f-pont .wm, body.field-live .f-pont .lk-word .css-dot,
body.field-live .start-word, body.field-live .num-grid, body.field-live .quote-type, body.field-live .quote-type .qt, body.field-live .layer-words { color: transparent; }
body.field-live .start-word .css-dot, body.field-live .quote-type .css-dot, body.field-live .lk-word .css-dot { background: transparent; }
.copy-pont { left: var(--gx); bottom: calc(var(--bot) + 36px); width: min(46vw, 640px); gap: 18px; }
.copy-pont .serif { font-size: clamp(32px, 3.6vw, 60px); }
.copy-pont .text { font-size: 16px; max-width: 50ch; }
.ticker { position: absolute; left: 0; right: 0; bottom: 104px; height: 20px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); pointer-events: none; display: none; }
.tk-track { display: flex; width: max-content; animation: tick 38s linear infinite; }
.tk-row { display: flex; gap: 14px; padding-right: 14px; font: 500 10.5px/20px var(--f-m); letter-spacing: .16em; color: var(--fg-2); white-space: nowrap; }
.tk-row i { font-style: normal; color: var(--red-t); }
@keyframes tick { to { transform: translateX(-50%); } }
.tip { position: absolute; right: var(--gx); bottom: calc(var(--bot) + 40px); font: 500 10.5px/1 var(--f-m); letter-spacing: .16em; color: var(--fg-2); }
.tip-m { display: none; }
.cursor-tag { position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none; font: 500 10.5px/1 var(--f-m); letter-spacing: .14em; color: var(--bone); padding: 6px 8px; background: rgba(var(--ink-rgb), .6); border-radius: 3px; opacity: 0; transition: opacity .2s; }
.cursor-tag.on { opacity: 1; }

/* ---------- 05 számok ---------- */
.num-grid { position: absolute; left: calc(var(--wx) + 2vw); top: calc(var(--top) + 6vh); width: calc(var(--ww) - 2vw); height: calc(100vh - var(--top) - var(--bot) - 12vh); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; place-items: center start; font-weight: 900; font-stretch: 125%; font-size: min(9vw, 17vh); line-height: .9; color: var(--fg); }
/* ---------- 06 szolgáltatások ---------- */
.f-shapes .copy { width: min(36vw, 520px); }
.svc-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font: 600 13px/1 var(--f-d); font-stretch: 112%; color: var(--fg); transition: background .2s, color .2s, border-color .2s; }
.svc-tab[aria-selected="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.svc-tab:hover { border-color: var(--fg); }
.shp { width: 10px; height: 10px; display: inline-block; background: currentColor; flex: none; }
.shp-circle { border-radius: 50%; }
.shp-triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.shp-star { clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.shp-cross { clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); }
.svc-tab[aria-selected="true"] .shp { background: var(--red); }
.svc-title { font: 900 clamp(26px, 2.4vw, 36px)/1 var(--f-d); font-stretch: 75%; text-transform: uppercase; letter-spacing: .005em; }
.svc-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.svc-meta span { font: 500 11px/1 var(--f-m); letter-spacing: .12em; padding: 7px 9px; border: 1px solid var(--line); border-radius: 3px; text-transform: uppercase; }
.svc { min-height: 196px; }
/* ---------- 09 velox ---------- */
.layer-words { position: absolute; left: calc(var(--wx) + 4vw); top: var(--wy); width: calc(var(--ww) - 4vw); height: var(--wh); display: flex; flex-direction: column; justify-content: space-around; font-weight: 800; font-stretch: 75%; font-size: min(7.6vw, 11vh); line-height: .9; color: var(--fg); }
/* ---------- 10 koncepciók ---------- */
.pager { display: flex; align-items: center; gap: 4px; }
.pg { min-width: 44px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; font: 600 14px/1 var(--f-d); font-stretch: 112%; color: var(--fg); transition: border-color .2s; }
.pg:hover { border-color: var(--fg); }
.pg-count { font: 500 11px/1 var(--f-m); letter-spacing: .14em; color: var(--fg-2); padding: 0 10px; }
.pg-count b { color: var(--fg); font-weight: 500; }
.f-concepts .item-title { font-size: 22px; font-weight: 900; letter-spacing: .04em; }
.f-concepts .num { font-size: clamp(44px, 4.4vw, 72px); }
/* ---------- 11 reel ---------- */
.js-reel-sound .snd-off { display: none; }
.js-reel-sound[aria-pressed="true"] .snd-on { display: none; }
.js-reel-sound[aria-pressed="true"] .snd-off { display: inline; }
/* ---------- 12 folyamat ---------- */
.steps { position: absolute; left: var(--wx); top: calc(var(--wy) + var(--wh) + 14px); width: var(--ww); display: grid; grid-template-columns: repeat(4, 1fr); }
.step { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 13px/1.1 var(--f-d); font-stretch: 100%; color: var(--fg-2); transition: color .2s; text-align: left; }
.step .n { font: 500 10.5px/1 var(--f-m); letter-spacing: .1em; }
.step.is-on { color: var(--fg); } .step.is-on .n { color: var(--red-t); }
.step:hover { color: var(--fg); }
.chips-static { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-static span { font: 500 10.5px/1 var(--f-m); letter-spacing: .1em; padding: 7px 9px; border: 1px solid var(--line); border-radius: 3px; color: var(--fg-3); }
.chips-static b { font-weight: 700; color: var(--fg); }
/* ---------- 13 ügyfelek ---------- */
.quote-type { position: absolute; left: var(--gx); right: var(--gx); top: calc(var(--top) + 4vh); height: 34vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.qt { display: none; font: italic 400 min(6.4vw, 12vh)/1 var(--f-s); color: var(--fg); text-wrap: balance; max-width: 18ch; }
.qt.is-on { display: block; }
.qt .css-dot { width: .14em; height: .14em; }
.f-quotes .copy { left: 50%; transform: translateX(-50%); width: min(62vw, 760px); align-items: center; text-align: center; bottom: var(--bot); }
.f-quotes .copy::before { inset: -30% -20%; }
.f-quotes .kicker { justify-content: center; }
.f-quotes .item { align-items: center; }
.quote-l { border: 0; padding: 0; }
.quote-l blockquote p { font-size: clamp(22px, 2vw, 30px); line-height: 1.25; }
.quote-l figcaption { margin-top: 14px; }
.f-quotes .pager { gap: 8px; }
/* ---------- 14 eszközök ---------- */
.orbit-labels { position: absolute; left: var(--wx); top: var(--wy); width: var(--ww); height: var(--wh); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 8px; pointer-events: none; }
.ol { pointer-events: auto; font: 500 10.5px/1 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); padding: 6px 8px; border-radius: 3px; background: rgba(var(--ink-rgb), .55); border: 1px solid var(--line); white-space: nowrap; cursor: default; }
.ol-d { display: none; }
.ol:hover, .ol:focus-visible { z-index: 2; }
.ol:hover .ol-d, .ol:focus-visible .ol-d { display: block; position: absolute; left: 0; top: calc(100% + 6px); width: 220px; white-space: normal; text-transform: none; letter-spacing: 0; font: 400 13px/1.4 var(--f-d); color: var(--bone); background: rgba(var(--ink-rgb), .92); border: 1px solid var(--line); padding: 8px 10px; border-radius: 3px; }
.orbit-labels.js-orbit { display: block; left: 0; top: 0; width: 100%; height: 100%; }
.orbit-labels.js-orbit .ol { position: absolute; left: 0; top: 0; transition: opacity .2s; will-change: transform; }
.orbit-labels.js-orbit .ol.back { opacity: .35; }
/* ---------- 15 kezdjük ---------- */
.start-word { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--top) + 4vh); display: flex; align-items: baseline; white-space: nowrap; font-weight: 900; font-stretch: 100%; font-size: min(15vw, 24vh); line-height: .74; letter-spacing: -.01em; color: var(--fg); padding-top: .02em; }
.start-word .css-dot { width: .19em; height: .19em; }
.copy-center { left: 50%; transform: translateX(-50%); width: min(70vw, 780px); align-items: center; text-align: center; bottom: var(--bot); }
.copy-center::before { inset: -25% -20%; }
.copy-center .text { max-width: 54ch; }
.guarantees { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font: 500 10.5px/1.4 var(--f-m); letter-spacing: .14em; color: var(--fg-3); }
.guarantees li { display: flex; align-items: center; gap: 8px; }
.guarantees li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.copy-center .actions { justify-content: center; }
.js-copy-mail .mail { font: 500 14px var(--f-m); letter-spacing: .02em; }
.cp { font-size: 14px; color: var(--fg-2); }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; visibility: hidden; opacity: 0; transition: opacity .3s var(--glide), visibility 0s linear .3s; color: var(--bone); }
.overlay.is-open { visibility: visible; opacity: 1; transition: opacity .35s var(--glide), visibility 0s; }
html:not(.js) .overlay:target { visibility: visible; opacity: 1; z-index: 20; background: var(--ink); overflow: auto; }
body.ov-terkep .stage, body.ov-leirat .stage, body.ov-urlap .stage,
body.ov-terkep .stage .form, body.ov-leirat .stage .form, body.ov-urlap .stage .form { visibility: hidden; opacity: 0; transition: none; }
body.ov-leirat #field { opacity: .08; }
body.ov-leirat .media-win { opacity: 0; }

/* map */
.map { z-index: 6; }
.map-head { position: absolute; left: var(--gx); top: 104px; width: min(30vw, 420px); display: flex; flex-direction: column; gap: 14px; z-index: 1; }
.map-head .serif { font-size: clamp(24px, 2.2vw, 34px); }
.legend-st { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 10.5px/1 var(--f-m); letter-spacing: .14em; color: var(--grey); }
.legend-st span { display: inline-flex; align-items: center; }
.map-nodes { position: absolute; inset: 0; }
.node { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 6px 8px; margin: -16px 0 0 -14px; border-radius: 4px; color: var(--bone); transition: background .2s; }
.node:hover, .node:focus-visible { background: rgba(var(--bone-rgb), .08); }
.nd-dot { grid-row: 1 / span 2; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--bone); background: var(--ink); transition: background .2s, transform .3s var(--swift); }
.node:hover .nd-dot, .node:focus-visible .nd-dot, .node.is-cur .nd-dot { background: var(--red); border-color: var(--red); transform: scale(1.2); }
.nd-n { font: 500 10px/1 var(--f-m); color: var(--grey); margin-right: 7px; letter-spacing: .08em; }
.nd-t { font: 800 13px/1.1 var(--f-d); font-stretch: 85%; letter-spacing: .06em; display: inline-flex; align-items: center; white-space: nowrap; }
.nd-t .st { margin: 0 0 0 7px; width: 6px; height: 6px; }
.nd-d { grid-column: 2; font: 400 10.5px/1.25 var(--f-m); letter-spacing: .06em; color: var(--grey); white-space: nowrap; }
.map:not([data-mode="list"]) { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.map.is-drag { cursor: grabbing; }
.map:not([data-mode="list"]) .node { transition: background .2s, opacity .25s; }
.map:not([data-mode="list"]) .node.back { opacity: 0; pointer-events: none; }
@media (max-width: 599px) { /* small globe: names only near the middle, the rest are points you can still tap */
  .map:not([data-mode="list"]) .nd-d { display: none; }
  .map:not([data-mode="list"]) .node .nd-t { transition: opacity .25s; }
  .map:not([data-mode="list"]) .node.far .nd-t { opacity: 0; }
}
.node.l { grid-template-columns: auto auto; margin-left: 0; transform: translateX(-100%); text-align: right; }
.node.l .nd-dot { grid-column: 2; grid-row: 1 / span 2; margin-right: -14px; }
.node.l .nd-t, .node.l .nd-d { grid-column: 1; grid-row: auto; justify-content: flex-end; }
.node.l .nd-t { grid-row: 1; } .node.l .nd-d { grid-row: 2; }
.node .nd-n-inline { font: 500 10px/1 var(--f-m); color: var(--grey); margin-right: 6px; }
.map-centre { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; }
.mc-t { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: 190px; text-align: center; font: 400 10.5px/1.4 var(--f-m); letter-spacing: .06em; color: var(--grey); }
.map-btns { position: absolute; right: var(--gx); top: 100px; display: flex; gap: 4px; }
.map .hb-btn { color: var(--grey); } .map .hb-btn:hover { color: var(--bone); }
.map[data-mode="list"] { background: rgba(var(--ink-rgb), .9); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.map[data-mode="list"] .map-head { position: relative; left: auto; top: auto; width: auto; max-width: 1180px; margin: 104px auto 24px; padding: 0 var(--gx); }
.map[data-mode="list"] .map-nodes { position: relative; inset: auto; max-width: 1180px; margin: 0 auto 160px; padding: 0 var(--gx); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
.map[data-mode="list"] .node { position: relative; left: 0 !important; top: 0 !important; transform: none !important; margin: 0; padding: 14px 4px; border-top: 1px solid rgba(var(--bone-rgb), .12); border-radius: 0; text-align: left; }
.map[data-mode="list"] .node.l .nd-dot { grid-column: 1; margin: 0; }
.map[data-mode="list"] .node.l .nd-t, .map[data-mode="list"] .node.l .nd-d { grid-column: 2; justify-content: flex-start; }
.map[data-mode="list"] .map-centre { display: none; }
.map[data-mode="list"] .nd-d { white-space: normal; }
.map[data-mode="list"] .node, .map[data-mode="list"] .node.l { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto; justify-items: start; column-gap: 12px; width: 100%; }
.map[data-mode="list"] .node .nd-dot { grid-column: 1; grid-row: 1 / span 2; }
.map[data-mode="list"] .node .nd-t, .map[data-mode="list"] .node .nd-d { grid-column: 2; }

/* leirat */
.leirat { z-index: 9; background: rgba(var(--ink-rgb), .9); overflow-y: auto; overscroll-behavior: contain; }
.lr-doc { max-width: 760px; margin: 0 auto; padding: 112px 24px 180px; }
.lr-head { position: relative; padding-bottom: 40px; border-bottom: 1px solid rgba(var(--bone-rgb), .14); margin-bottom: 8px; }
.lr-head h2 { font: 900 clamp(36px, 5vw, 64px)/1 var(--f-d); margin: 14px 0 12px; }
.lr-head .lg-dot { width: .19em; height: .19em; }
.lr-s { font: italic 400 22px/1.35 var(--f-s); color: var(--fg-3); }
.lr-close { position: absolute; right: -8px; top: -6px; }
.lr-sec { padding: 40px 0 36px; border-bottom: 1px solid rgba(var(--bone-rgb), .1); }
.lr-code { font: 500 11px/1 var(--f-m); letter-spacing: .14em; color: var(--grey); display: flex; align-items: center; gap: 6px; }
.lr-code .st { margin: 0 6px 0 0; }
.lr-sec h3 { font: 800 30px/1.05 var(--f-d); font-stretch: 75%; letter-spacing: .02em; margin: 10px 0 16px; }
.lr-sec h4 { font: 800 18px/1.1 var(--f-d); font-stretch: 75%; letter-spacing: .06em; margin: 22px 0 8px; }
.lr-sec p, .lr-sec li, .lr-sec blockquote p { font: 400 19px/1.5 var(--f-s); color: rgba(var(--bone-rgb), .88); margin-bottom: 10px; }
.lr-sec li { margin-bottom: 6px; padding-left: 18px; position: relative; }
.lr-sec li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.lr-sec ol { counter-reset: s; } .lr-sec ol li::before { counter-increment: s; content: counter(s, decimal-leading-zero); width: auto; height: auto; background: none; font: 500 11px var(--f-m); color: var(--red); top: .45em; }
.lr-sec ol li { padding-left: 28px; }
.lr-sec b { font-family: var(--f-d); font-weight: 700; font-size: 16px; color: var(--bone); }
.lr-sec .lr-k, .lr-m { font: 500 11px/1.6 var(--f-m) !important; letter-spacing: .12em; color: var(--grey) !important; text-transform: uppercase; }
.lr-sec .lr-s { font-size: 28px; line-height: 1.15; color: var(--bone); }
.lr-sec .lr-f { font-size: 15px; color: var(--grey); }
.lr-sec blockquote { margin: 14px 0; padding-left: 16px; border-left: 1px solid var(--red); }
.lr-sec blockquote p { font-style: italic; }
.lr-sec blockquote footer { font: 500 11px/1.4 var(--f-m); letter-spacing: .1em; color: var(--grey); }
.lr-sec a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(var(--bone-rgb), .35); }
.lr-go { margin-top: 8px; } .lr-go a { font: 500 11px/1 var(--f-m) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); text-decoration: none; }
.lr-go a:hover { color: var(--bone); }

/* sheet */
.sheet { z-index: 10; background: var(--ink); overflow-y: auto; overscroll-behavior: contain; --cx: 50%; --cy: 50%; clip-path: circle(0px at var(--cx) var(--cy)); opacity: 1; transition: clip-path .62s var(--punch), visibility 0s linear .62s; }
.sheet.is-open { clip-path: circle(150vmax at var(--cx) var(--cy)); transition: clip-path .78s var(--swift), visibility 0s; }
html:not(.js) .sheet:target { clip-path: none; }
.sh-in { max-width: 1240px; margin: 0 auto; padding: 112px var(--gx) 120px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; }
.sh-aside { display: flex; flex-direction: column; gap: 18px; }
.sh-aside .kicker .lg-dot { width: 7px; height: 7px; margin: 0 4px 0 0; }
.sh-title { font: 400 clamp(52px, 6.4vw, 104px)/.95 var(--f-s); letter-spacing: -.01em; }
.sheet .guarantees { justify-content: flex-start; flex-direction: column; gap: 8px; margin-top: 8px; }
.sh-mail { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mono { font: 500 14px/1.3 var(--f-m); letter-spacing: .02em; }
.sel { user-select: all; -webkit-user-select: all; }
.sh-mail .lnk { min-height: 36px; font-size: 13px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 14px 28px 14px 0; position: relative; font: 600 15px/1.3 var(--f-d); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 2px; top: 12px; font: 400 18px var(--f-m); color: var(--grey); transition: transform .3s var(--swift); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--red-t); }
.faq details p { padding: 0 0 16px; color: var(--fg-3); font-size: 14.5px; line-height: 1.55; }
.sh-form { display: flex; flex-direction: column; gap: 26px; padding-top: 28px; }
.ctx { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px; background: rgba(249, 6, 6, .12); border: 1px solid rgba(249, 6, 6, .5); font: 600 13px/1.2 var(--f-d); }
.ctx[hidden] { display: none; }
.ctx-x { width: 26px; height: 26px; border-radius: 50%; color: var(--bone); font-size: 12px; }
.ctx-x:hover { background: rgba(var(--bone-rgb), .12); }
.chips legend, .fld label:not(.check) { font: 500 11px/1 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin-bottom: 12px; padding: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); font: 600 14px/1 var(--f-d); font-stretch: 105%; transition: background .2s, color .2s, border-color .2s; }
.chip:hover span { border-color: var(--bone); }
.chip input:checked + span { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.chip input:checked + span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-right: 8px; }
.chip input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 3px; }
.fld { display: flex; flex-direction: column; }
.fld label:not(.check) { margin-bottom: 4px; }
.req { color: var(--red-t); margin-left: 2px; }
.opt { text-transform: none; letter-spacing: .04em; }
.fld input[type="text"], .fld input[type="email"], .fld textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(var(--bone-rgb), .28); border-radius: 0; padding: 10px 0 12px; font: 400 19px/1.35 var(--f-d); color: var(--bone); transition: border-color .2s; }
.fld textarea { resize: vertical; min-height: 96px; }
.fld input::placeholder, .fld textarea::placeholder { color: rgba(var(--bone-rgb), .32); }
.fld input:focus, .fld textarea:focus { border-bottom-color: var(--bone); }
.fld input:focus-visible, .fld textarea:focus-visible { outline: none; border-bottom: 2px solid var(--red); }
.fld [aria-invalid="true"] { border-bottom-color: var(--red) !important; }
.err { min-height: 18px; margin-top: 6px; font: 500 12.5px/1.3 var(--f-d); color: #ff4a4a; }
.err:empty { min-height: 0; margin: 0; }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14px; line-height: 1.45; color: var(--fg-3); position: relative; }
.check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.check .box { flex: none; width: 22px; height: 22px; border: 1px solid rgba(var(--bone-rgb), .4); border-radius: 4px; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.check input:checked + .box { background: var(--red); border-color: var(--red); }
.check input:checked + .box::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.check input:focus-visible + .box { outline: 2px solid var(--red); outline-offset: 3px; }
.check input[aria-invalid="true"] + .box { border-color: var(--red); }
.sh-submit { padding-top: 4px; }
.btn-send { height: 58px; padding: 0 30px; font-size: 16px; }
.btn-send[disabled] { opacity: .7; cursor: progress; }
.sh-close { position: fixed; right: var(--gx); top: 22px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); color: var(--bone); font-size: 16px; z-index: 2; transition: background .2s; }
.sh-close:hover { background: rgba(var(--bone-rgb), .1); }
.sh-success { grid-column: 1 / -1; min-height: calc(100vh - 240px); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; gap: 14px; padding-bottom: 40px; }
.sh-success[hidden] { display: none; }
.sx-word { font-weight: 900; font-size: min(12vw, 20vh); line-height: .74; letter-spacing: -.01em; display: flex; align-items: baseline; margin-bottom: auto; margin-top: 4vh; }
.sx-word .lg-dot { width: .19em; height: .19em; }
body.field-live .sheet.done .sx-word { color: transparent; }
body.field-live .sheet.done .sx-word .lg-dot { background: transparent; }
.sh-success .serif { font-size: clamp(32px, 3.6vw, 52px); }
.sh-success .text { max-width: 44ch; }
.sx-mail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.sx-mail .mono { font-size: 18px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 4px; }
.sheet.done { background: transparent; }
body.ov-urlap .hud-cta, body.ov-urlap .hud-map, body.ov-urlap .chap-m, body.ov-terkep .chap-m { visibility: hidden; }
/* sheet open: nothing of the HUD / stage peeks through (clip-path reveal, KÖSZÖNJÜK frame) */
body.ov-urlap .hud-bottom, body.ov-urlap .hud-top > :not(.logo), body.ov-urlap .fab-dot, body.ov-urlap .dot-hit, body.ov-urlap .crops, body.ov-urlap .cursor-tag, body.ov-urlap .keys, body.ov-urlap .media-win { visibility: hidden; opacity: 0; }
.sheet.done .sh-aside, .sheet.done .sh-form { display: none; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 128px; transform: translate(-50%, 10px); z-index: 30; padding: 10px 16px; border-radius: 999px; background: var(--bone); color: var(--ink); font: 500 12px/1 var(--f-m); letter-spacing: .1em; opacity: 0; pointer-events: none; transition: opacity .2s, transform .35s var(--swift); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* bone-ground HUD */
body.ground-bone .crops i { border-color: var(--ink); }
body.ground-bone .hud-cta { border-color: rgba(var(--ink-rgb), .2); }

/* ---------- tablet & phone (< 900 px) ---------- */
@media (max-width: 899px) {
  :root { --gx: 20px; --top: calc(64px + env(safe-area-inset-top)); --bot: calc(84px + env(safe-area-inset-bottom));
    --ww: min(calc(100vw - 32px), calc(40svh * 1.6)); --wh: calc(var(--ww) / 1.6);
    --wx: calc((100vw - var(--ww)) / 2); --wy: max(72px, calc(64px + (100svh - 64px - var(--bot) - 300px - var(--wh)) / 2)); }
  .crops { display: none; }
  .hud-top { height: calc(60px + env(safe-area-inset-top)); gap: 12px; padding-top: env(safe-area-inset-top); }
  .hud-city, .hud-map, .hud-cta { display: none; }
  .chap-m { display: block; margin-left: auto; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; line-height: 1.6; }
  .hud-top .hud-theme { margin-left: 0; width: 44px; height: 44px; margin-right: -10px; }
  .hud-top .hud-lang { margin-left: 0; padding: 14px 4px; }
  .hud-bottom { height: calc(76px + env(safe-area-inset-bottom)); padding: 0 calc(16px + 56px + 12px) calc(10px + env(safe-area-inset-bottom)) 12px; grid-template-columns: 1fr; gap: 0; }
  .hb-left, .hb-right { display: none; }
  .timeline { width: 100%; height: 56px; align-items: center; touch-action: none; }
  .tl-map { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: 6px; border-radius: 50%; border: 1px solid var(--line); }
  .tl-list { flex: 1; justify-content: space-between; height: 44px; }
  .tl-tick { width: auto; flex: 1; height: 44px; }
  .tl-tick .st { display: none; }
  .tl-lab { bottom: 50px; }
  .fab-dot { display: grid; place-items: center; position: fixed; right: 16px; bottom: calc(10px + env(safe-area-inset-bottom)); width: 56px; height: 56px; z-index: 8; border-radius: 50%; }
  .fab-dot i { width: 56px; height: 56px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 6px rgba(249, 6, 6, .14); transition: transform .3s var(--swift); }
  .fab-dot:active i { transform: scale(.9); }
  .keys { display: none; }
  .copy { left: var(--gx); right: var(--gx); width: auto; bottom: var(--bot); gap: 10px; }
  .copy::before { inset: -18% -10% -10% -10%; background: radial-gradient(farthest-side at 50% 60%, var(--scrim), rgba(var(--ink-rgb), 0)); }
  body.ground-bone .f-shapes .copy::before { inset: -72px calc(-1 * var(--gx)) -50svh; background: linear-gradient(to bottom, rgba(var(--bone-rgb), 0), rgba(var(--bone-rgb), .95) 64px); }
  .serif, .f-stipple .serif, .f-layers .serif { font-size: clamp(25px, 7vw, 34px); }
  .num { font-size: clamp(40px, 12vw, 56px); }
  .text { font-size: 14px; line-height: 1.5; }
  .quote blockquote p { font-size: 16px; }
  .actions { gap: 4px 18px; margin-top: 0; }
  .win-cap { top: -20px; font-size: 9px; }
  .wc { width: 10px; height: 10px; }
  .wc.tl, .wc.bl { left: -6px; } .wc.tr, .wc.br { right: -6px; } .wc.tl, .wc.tr { top: -6px; } .wc.bl, .wc.br { bottom: -6px; }
  .a-dot { left: calc(var(--wx) + var(--ww) - 10px); top: calc(var(--wy) + var(--wh) + 14px); }
  /* pont */
  .f-pont .status-pill { top: calc(72px + env(safe-area-inset-top)); left: var(--gx); }
  .live-line { left: var(--gx); right: auto; top: auto; bottom: calc(var(--bot) + 8px); font-size: 9.5px; }
  .lockup { top: var(--lkt, max(128px, 28svh)); --ws: min(calc((100vw - 40px) / 7.1), 15vh); }
  .copy-pont { width: auto; bottom: calc(var(--bot) + 40px); gap: 14px; }
  .copy-pont .serif { font-size: clamp(32px, 9.4vw, 44px); }
  .copy-pont .text { font-size: 15px; }
  .copy-pont .actions { gap: 8px 14px; }
  .btn { height: 48px; padding: 0 20px; font-size: 14px; }
  .tip { display: none; }
  .ticker { display: none; }
  /* forms */
  .f-stipple .quote, .f-stipple .tags { display: none; }
  .num-grid { left: var(--gx); right: var(--gx); width: auto; top: var(--ft, 76px); height: var(--fh, 30svh); font-size: min(15vw, 13svh, calc(var(--fh, 30svh) / 3.4)); }
  .legend dt { font-size: 17px; }
  .f-numbers .text, .f-numbers .fine { display: none; }
  .f-shapes .copy { width: auto; }
  .svc-tab { min-height: 34px; padding: 0 10px; font-size: 12px; }
  .svc { min-height: 0; }
  .svc-title { font-size: 24px; }
  .layer-words { left: var(--gx); width: calc(100vw - 2 * var(--gx)); top: var(--wy); height: var(--wh); font-size: min(11vw, 7svh); }
  .f-layers .legend-layers { display: none; }
  .f-concepts .text, .f-concepts .spec { display: none; }
  .f-concepts .item-title { font-size: 18px; }
  .f-reel .text, .f-reel .fine { display: none; }
  .steps { top: calc(var(--wy) + var(--wh) + 6px); }
  .step { flex-direction: column; gap: 2px; font-size: 11px; text-align: center; min-height: 44px; }
  .f-ball .chips-static, .f-ball .fine { display: none; }
  .quote-type { top: var(--ft, 72px); height: var(--fh, 28svh); }
  .qt { font-size: min(11vw, 7svh, calc(var(--fh, 28svh) / 4.2)); }
  .f-quotes .copy, .copy-center { left: var(--gx); right: var(--gx); width: auto; transform: none; }
  .quote-l blockquote p { font-size: 20px; }
  .orbit-labels .ol { font-size: 9px; padding: 4px 6px; }
  .start-word { top: calc(var(--ft, 96px) + max(0px, var(--fh, 0px) / 2 - .5em)); font-size: min(calc((100vw - 40px) / 6.4), 16svh); }
  .copy-center .text { font-size: 14px; }
  .guarantees { font-size: 9.5px; gap: 6px 12px; }
  .copy-center .fine { display: none; }
  /* overlays */
  .map-head { top: 76px; width: auto; right: var(--gx); }
  .map-btns { top: auto; bottom: calc(var(--bot) + 8px); right: var(--gx); }
  .map[data-mode="list"] .map-head { margin-top: 76px; }
  .map[data-mode="list"] .map-nodes { grid-template-columns: 1fr; margin-bottom: 140px; }
  .map[data-mode="list"] .map-head { left: auto; right: auto; padding: 0 var(--gx); }
  .map[data-mode="list"] .map-btns { position: fixed; bottom: auto; top: 12px; right: var(--gx); z-index: 8; background: var(--ink); border-radius: 4px; }
  .lr-doc { padding: 84px 20px 140px; }
  .lr-head h2 { font-size: min(36px, calc((100vw - 40px) / 10.8)); }
  /* phone LEIRAT: nothing ghosts through behind the body text */
  .leirat { background: rgba(var(--ink-rgb), .97); }
  body.ov-leirat .hud-bottom, body.ov-leirat .fab-dot, body.ov-leirat .dot-hit, body.ov-leirat .crops, body.ov-leirat .cursor-tag { visibility: hidden; opacity: 0; }
  body.ov-leirat #field { opacity: 0; }
  .lr-close { position: static; margin-top: 18px; }
  .lr-sec p, .lr-sec li, .lr-sec blockquote p { font-size: 17px; }
  .sh-in { grid-template-columns: 1fr; gap: 28px; padding: 84px 20px 120px; }
  .sh-title { font-size: clamp(48px, 15vw, 72px); }
  .sh-aside .faq, .sh-aside .sh-mail { order: 3; }
  .sh-aside { display: contents; }
  .sh-aside > .kicker { order: -3; } .sh-title { order: -2; } .sheet .guarantees, .sheet .sh-reply { order: -1; margin-top: 0; }
  .sh-aside > .fine { display: none; }
  .sh-form { order: 0; padding-top: 0; }
  .sh-close { right: 16px; top: 14px; }
  .chip span { min-height: 40px; padding: 0 14px; font-size: 13.5px; }
  .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width: 899px) and (max-height: 760px) {
  .f-stipple .text, .f-layers .text { display: none; }
}
@media (min-width: 900px) and (max-height: 780px) {
  .f-stipple .quote { display: none; }
  .copy-pont .text { display: none; }
}
@media (min-width: 900px) and (pointer: fine) { .ticker { display: block; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; scroll-behavior: auto !important; }
  .tk-track { animation: none; }
  .sheet, .sheet.is-open { transition: clip-path .2s linear, visibility 0s; }
  .form, .form.is-active, .overlay, .overlay.is-open { transition-duration: .15s; transition-delay: 0s; }
  .pip-live, .f-pont .status-pill .st { animation: none; }
  .th-ic, .th-core, .th-cut, .th-rays { transition: none; }
}

/* ---------- integration: slam owns the frame ---------- */
.form.slam > * { opacity: 0 !important; animation: none !important; }
/* bone ground: HUD keeps a clean band over the full-bleed shape grid */
body.ground-bone .hud-top { background: linear-gradient(to bottom, rgba(var(--bone-rgb), .94) 0, rgba(var(--bone-rgb), .94) 62%, rgba(var(--bone-rgb), 0)); }
body.ground-bone .hud-bottom { background: linear-gradient(to top, rgba(var(--bone-rgb), .94) 0, rgba(var(--bone-rgb), .94) 58%, rgba(var(--bone-rgb), 0)); }
body.ground-bone .hud-cta { background: var(--bone); }
@media (max-width: 899px) {
  body.ov-terkep .hud-bottom { background: linear-gradient(to top, var(--ink) 0, var(--ink) 72%, rgba(var(--ink-rgb), 0)); }
}
/* map list mode (any width): the rows scroll under ink HUD bands, never under bare HUD text */
body.ov-terkep:has(.map[data-mode="list"]) .hud-bottom { background: linear-gradient(to top, var(--ink) 0, var(--ink) 72%, rgba(var(--ink-rgb), 0)); }
body.ov-terkep:has(.map[data-mode="list"]) .hud-top { background: linear-gradient(to bottom, var(--ink) 0, var(--ink) 70%, rgba(var(--ink-rgb), 0)); }

/* ================= the four new forms (SPEC-ROOMS §6) ================= */
/* ---------- red ground (ajanlat: the single red-ground form) ---------- */
body.ground-red { --fg: var(--k); --fg-2: rgba(var(--k-rgb), .74); --fg-3: rgba(var(--k-rgb), .88); --line: rgba(var(--k-rgb), .26); --scrim: rgba(249, 6, 6, .9); --surface: var(--red); }
body.ground-red .copy::before { background: radial-gradient(closest-side, rgba(249, 6, 6, .9), rgba(249, 6, 6, 0)); }
body.ground-red :focus-visible { outline-color: var(--k); }
body.ground-red .hud .btn-dot, body.ground-red .tl-tick.is-on .tl-bar { background: var(--k); }
body.ground-red .fab-dot i { background: var(--k); box-shadow: 0 0 0 6px rgba(var(--k-rgb), .16); }
body.ground-red .lnk-want span[aria-hidden], body.ground-red .lnk-room span[aria-hidden] { color: var(--k); }
body.ground-red .hud-top { background: linear-gradient(to bottom, rgba(249, 6, 6, .94) 0, rgba(249, 6, 6, .94) 62%, rgba(249, 6, 6, 0)); }
body.ground-red .hud-bottom { background: linear-gradient(to top, rgba(249, 6, 6, .94) 0, rgba(249, 6, 6, .94) 58%, rgba(249, 6, 6, 0)); }
body.ground-red .tl-lab { background: var(--red); }
/* no-JS / no-field: the red section paints its own ground */
html:not(.js) .f-offer:target, body:not(.field-live) .f-offer.is-active { background: var(--red); }
.btn-ink { background: var(--ink); color: var(--bone); }
.btn-ink:hover { background: #222; }

/* ---------- type box: the field draws the type formation into it; the spans are the fallback ---------- */
.type-box { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin: 0;
  font-weight: 900; line-height: .84; letter-spacing: -.01em; color: var(--fg); white-space: nowrap; pointer-events: none; }
.type-box .wm { display: block; }
.type-box .css-dot { position: relative; top: -.04em; }
body.field-live .type-box, body.field-live .type-box .wm { color: transparent; }
body.field-live .type-box .css-dot { background: transparent; }
.tb-offer { left: 46vw; right: var(--gx); top: calc(var(--top) + 2vh); bottom: calc(var(--bot) + 4vh); font-size: min(10.5vw, 21vh); font-stretch: 125%; }
.tb-who { left: 46vw; right: var(--gx); top: calc(var(--top) + 6vh); height: 40vh; flex-direction: row; align-items: baseline; justify-content: flex-start; font-size: min(12vw, 26vh); }
.tb-faq { left: 52vw; right: var(--gx); top: calc(var(--top) + 1vh); bottom: calc(var(--bot) + 1vh); align-items: center; font-size: min(40vw, 62vh); }
.f-type .a-dot { left: auto; right: calc(var(--gx) + 4px); top: auto; bottom: calc(var(--bot) + 8px); }
.f-offer .copy { width: min(38vw, 560px); gap: 12px; }
.offer-unit b { font: 900 15px/1 var(--f-d); font-stretch: 125%; letter-spacing: 0; color: var(--fg); margin-right: 4px; }
.offer-inc { display: flex; flex-direction: column; gap: 8px; }
.offer-inc ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; font-size: 13.5px; line-height: 1.35; color: var(--fg-3); }
.offer-inc li { display: flex; gap: 8px; align-items: baseline; }
.offer-inc li::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; transform: translateY(-2px); }
.f-who .copy { width: min(38vw, 540px); }
.f-faq .copy { width: min(44vw, 620px); }
.faq-h { font: 600 14px/1.4 var(--f-d); color: var(--fg-2); }
.faq-q { font-size: clamp(26px, 2.5vw, 40px); }
.f-faq .item { min-height: 0; }
.faq-more { gap: 4px 22px; }
.lnk-plain { font-weight: 500; color: var(--fg-2); }

/* ---------- probald: the mini-apps in the window ---------- */
.f-app .copy { width: min(30vw, 440px); }
.app-tabs .svc-tab[aria-selected="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.apps { position: absolute; left: var(--wx); top: var(--wy); width: var(--ww); height: var(--wh); pointer-events: auto; }
.app { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 6px; background: rgba(var(--ink-rgb), .94); container-type: size; overflow: hidden; color: var(--bone);
  font: 400 13px/1.3 var(--f-d); }
.app.item { gap: 0; }
.ap-body { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ap-chrome { flex: none; display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 8px 0 12px; border-bottom: 1px solid var(--line); background: rgba(22, 22, 22, .96); }
.ap-dots { display: flex; gap: 5px; }
.ap-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--bone-rgb), .18); }
.ap-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px/1 var(--f-m); letter-spacing: .04em; color: #8A8A8A; }
.ap-open { flex: none; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(245, 245, 245, .22); color: #F5F5F5; font: 600 12px/1 var(--f-d); text-decoration: none; }
.ap-open:hover { border-color: #F5F5F5; }
.ap-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #1a1a1a; }
.ap-stage iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: transparent; opacity: 0; transition: opacity .5s var(--swift); }
.ap-stage.is-ready iframe { opacity: 1; }
.ap-wait { position: absolute; inset: 0; display: grid; place-items: center; font: 500 11px/1 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.ap-stage.is-ready .ap-wait { display: none; }

@media (max-width: 899px) {
  .type-box { left: var(--gx); right: var(--gx); top: var(--ft, 72px); bottom: auto; height: var(--fh, 30svh); }
  .tb-offer { font-size: min(17vw, calc(var(--fh, 30svh) * .42)); justify-content: center; }
  .tb-who { font-size: min(24vw, calc(var(--fh, 30svh) * .8)); align-items: center; }
  .tb-faq { align-items: center; font-size: min(60vw, calc(var(--fh, 30svh) * .95)); }
  .f-type .a-dot { right: var(--gx); bottom: auto; top: calc(var(--ft, 72px) + var(--fh, 30svh) - 16px); }
  .f-offer .copy, .f-who .copy, .f-faq .copy, .f-app .copy { width: auto; }
  .f-offer .offer-who, .f-offer .copy > .text:not(.offer-who) { display: none; }
  .offer-inc ul { font-size: 12px; gap: 2px 12px; }
  .f-who .who-2 { display: none; }
  .faq-q { font-size: clamp(22px, 6.4vw, 30px); }
  .f-faq .item .text { font-size: 14px; }
  .f-app .app-intro, .f-app .fine { display: none; }
  .f-app .item .text { font-size: 13.5px; }
}
@media (max-width: 899px) and (max-height: 760px) {
  .f-offer .fine, .f-who .fine, .faq-h { display: none; }
  .f-app .item .text { display: none; }
}
@media (min-width: 900px) and (max-height: 820px) { .f-offer .offer-who, .f-who .who-2 { display: none; } }
/* the offer form is always on red: its own tokens (also without JS, when body has no ground class) */
.f-offer { --fg: var(--k); --fg-2: rgba(var(--k-rgb), .74); --fg-3: rgba(var(--k-rgb), .88); --line: rgba(var(--k-rgb), .26); }
.f-offer .copy::before { background: radial-gradient(closest-side, rgba(249, 6, 6, .9), rgba(249, 6, 6, 0)); }
.f-offer :focus-visible { outline-color: var(--k); }
.f-offer .lnk-room span[aria-hidden] { color: var(--k); }
.f-offer .btn-ink { background: var(--k); color: #F5F5F5; } .f-offer .btn-ink:hover { background: #222; }

/* lead submission error (production sheet) */
.sh-err { margin: 0 0 12px; font: 500 14px/1.45 var(--f-b, Archivo), sans-serif; color: var(--red-t); }
.sh-err:focus { outline: none; }