/* =========================================================
   HelixSoft – Business OS landing
   Brand: coral #F7444E, teal #78BCC4 (a logóból)
   ========================================================= */

/* ---------- Betűtípusok: saját szerverről (assets/fonts, a Google Fonts latin + latin-ext fájljai) ----------
   Bricolage és Instrument Sans: font-display: optional + a HTML-ben preload, így betöltéskor nem tördelődik újra
   a szöveg (nincs layout shift). Ha új betűvastagság/tengely kell, a fájlokat újra le kell tölteni. */
/* Bricolage Grotesque · latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: optional;
  src: url(assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bricolage Grotesque · latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: optional;
  src: url(assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Doto · latin-ext */
@font-face {
  font-family: 'Doto';
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url(assets/fonts/doto-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Doto · latin */
@font-face {
  font-family: 'Doto';
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url(assets/fonts/doto-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Sans · latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: optional;
  src: url(assets/fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Sans · latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: optional;
  src: url(assets/fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand */
  --coral: #F7444E;
  --coral-deep: #C42730;      /* szöveg krém háttéren (AA) */
  --coral-tint: #FCD5D7;
  --teal: #78BCC4;
  --teal-deep: #1F6A73;       /* szöveg krém háttéren (AA) */
  --teal-tint: #D4EBEE;

  /* Neutrals */
  --cream: #F2EFE9;
  --cream-2: #E8E3D9;
  --paper: #FBFAF7;
  --ink: #141712;
  --ink-2: #23271F;
  --ink-3: #31362D;
  --muted: #54594F;
  --muted-on-ink: #B4B8AE;
  --line: rgba(20, 23, 18, .14);
  --line-on-ink: rgba(242, 239, 233, .16);

  /* Type */
  --f-display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --f-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-dots: "Doto", "Courier New", monospace;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 20px;
  --radius-sm: 12px;
  /* Szekciótérköz: erős (eltérő háttér) és halvány (hasonló háttér) határokra */
  --section-y: clamp(56px, 6vw, 88px);
  --section-y-soft: clamp(40px, 3.5vw, 56px);

  /* Motion */
  --ease: cubic-bezier(.22, .8, .24, 1);
  --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-variation-settings: "wdth" 92;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--cream); padding: 10px 16px; border-radius: 999px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 880px; }

/* Dotted grid (Nolo) */
.hero, .story, .systems, .faq, .cases {
  background-image: radial-gradient(rgba(20, 23, 18, .16) 1.2px, transparent 1.3px);
  background-size: 28px 28px;
}

/* ---------- Typography ---------- */
.display {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 75, "opsz" 96;
  font-weight: 800;
  font-size: clamp(48px, 9vw, 120px);
  line-height: .95;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.display--md { font-size: clamp(36px, 5.6vw, 72px); line-height: 1; }
.display--sm { font-size: clamp(30px, 4vw, 52px); line-height: 1.02; }
.h2 {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 75, "opsz" 96;
  font-weight: 800;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 80;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
}
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.eyebrow {
  display: inline-block;
  font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--coral-deep); margin-bottom: 16px;
}
.eyebrow--teal { color: var(--teal); }
.dots-word {
  font-family: var(--f-dots); font-weight: 900; color: var(--teal-deep);
  letter-spacing: .02em; font-size: .92em;
}
.dots-word--sm { font-size: 18px; color: var(--coral); }
/* LED-kijelző hatás: sötét panel, vastagított pontok */
.dots-word--panel {
  display: inline-block; vertical-align: .06em;
  background: var(--ink); color: var(--teal);
  padding: .06em .22em .1em; border-radius: .16em;
  box-shadow: .07em .07em 0 var(--coral);
  font-size: .86em; line-height: 1.05;
}
/* Minden pontozott (Doto) szöveg egységesen vastagított pontokkal */
.dots-word, .os-card__title, .tax__num, .stack__layer span,
.why-card__num {
  -webkit-text-stroke: .04em currentColor; paint-order: stroke fill;
}
.hl-teal { color: var(--teal); }

.section-head { max-width: 900px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head .lead { margin-top: 20px; }
.section-head--light .lead { color: var(--muted-on-ink); }
/* Cím + gomb egy sorban; ha a gomb a cím alá törik, fölötte és alatta azonos (--row-gap) a térköz */
.section-head--row { --row-gap: clamp(28px, 4vw, 40px); display: flex; align-items: end; justify-content: space-between; gap: var(--row-gap) 24px; max-width: none; flex-wrap: wrap; margin-bottom: var(--row-gap); }

/* ---------- Buttons & pills ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--f-display); font-variation-settings: "wdth" 85; font-weight: 700; font-size: 17px;
  text-decoration: none; cursor: pointer; line-height: 1.1;
  transition: transform .2s var(--ease), background-color .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { box-shadow: 0 8px 0 -2px var(--coral); }
.btn--coral { background: var(--coral); color: var(--ink); border-color: var(--ink); }
.btn--coral:hover { box-shadow: 4px 4px 0 var(--ink); }
.btn--outline { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { box-shadow: 4px 4px 0 var(--ink); }
.btn--sm { min-height: 44px; padding: 10px 20px; font-size: 16px; }
.btn--lg { min-height: 56px; padding: 16px 32px; font-size: 19px; }
.btn--block { width: 100%; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--ink);
  font-size: 16px; font-weight: 500; text-decoration: none; line-height: 1.2;
  text-align: center; text-wrap: balance;
  transition: background-color .2s, transform .2s var(--ease);
}
.pill--coral { background: var(--coral-tint); }
.pill--teal { background: var(--teal-tint); }
.pill--coral-solid { background: var(--coral); color: var(--ink); }
.pill--outline { background: var(--paper); }
a.pill:hover { background: var(--ink); color: var(--cream); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  text-decoration-color: var(--coral);
}
.link-arrow:hover { color: var(--coral-deep); }
.link-arrow--light { color: var(--cream); }
.link-arrow--light:hover { color: var(--coral); }

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  /* Meleg törtfehér (a kártyák színe): elválik a krém háttértől, de nem üt el tőle; a logó jól látszik rajta */
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  transition: box-shadow .3s;
}
.nav.is-scrolled { box-shadow: 0 6px 0 -2px rgba(20, 23, 18, .08); }
.nav__inner { display: flex; align-items: center; gap: 24px; height: var(--nav-h); }
.nav__logo img { height: 38px; width: auto; }
.nav__links { display: flex; gap: 4px; margin-left: auto; }
.nav__cta { white-space: nowrap; }
.nav__link {
  padding: 10px 12px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 16px;
  transition: background-color .2s;
}
.nav__link:hover { background: var(--cream); }
.nav__link--accent { background: var(--coral-tint); }
.nav__link--accent:hover { background: var(--coral); }
.nav__toggle {
  display: none; margin-left: auto; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px;
  border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); cursor: pointer;
  font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 13px;
}
.nav__toggle-icon { width: 16px; height: 10px; position: relative; }
.nav__toggle-icon::before, .nav__toggle-icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .25s var(--ease), top .25s var(--ease);
}
.nav__toggle-icon::before { top: 0; }
.nav__toggle-icon::after { top: 8px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon::before { top: 4px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon::after { top: 4px; transform: rotate(-45deg); }
.mobile-menu { border-top: 1px solid var(--line); background: var(--paper); }
.mobile-menu nav { display: flex; flex-direction: column; padding-block: 12px 24px; }
.mobile-menu a:not(.btn) {
  font-family: var(--f-display); font-variation-settings: "wdth" 75; font-weight: 800; font-size: 34px;
  text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--line);
}
.mobile-menu .btn { margin-top: 20px; }

/* A hosszabb fejléc-CTA miatt a menü korábban vált „Menü” gombra */
@media (max-width: 1240px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
}

/* ---------- HERO ---------- */
.hero { position: relative; height: 230vh; }
.hero__sticky { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); min-height: 560px; overflow: hidden; display: flex; flex-direction: column; }
.hero__copy { text-align: center; padding-top: clamp(32px, 8vh, 96px); position: relative; z-index: 3; }
.hero__hook {
  max-width: 42ch; margin: 24px auto 0;
  font-family: var(--f-display); font-variation-settings: "wdth" 85; font-weight: 700;
  font-size: clamp(21px, 2.4vw, 32px); line-height: 1.2; text-wrap: balance;
}
.hero__hook mark { background: linear-gradient(transparent 58%, var(--coral-tint) 58%); color: inherit; padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero__sub { max-width: 52ch; margin: 14px auto 0; color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); text-wrap: balance; }
.hero__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.hero__stage { position: relative; flex: 1; }

.chaos {
  --bg: var(--ink);
  position: absolute; left: 50%; top: 50%;
  width: clamp(170px, 19vw, 250px);
  padding: 16px; border-radius: 16px; border: 2px solid var(--ink);
  background: var(--bg); color: #fff;
  box-shadow: 6px 6px 0 var(--ink);
  font-size: 14px; line-height: 1.35;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.chaos--light { background: var(--paper); color: var(--ink); }
.chaos--error { background: #fff; color: var(--ink); border-color: var(--coral); box-shadow: 6px 6px 0 var(--coral); }
.chaos--error .chaos__ico { background: var(--coral); color: var(--ink); }
.chaos--note { background: #FFE58A; color: var(--ink); font-family: var(--f-display); font-weight: 700; font-size: 20px; width: clamp(150px, 15vw, 200px); transform: translate(-50%, -50%) rotate(-4deg); }
.chaos__head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 10px; }
.chaos__head--dark { color: var(--ink); }
.chaos__ico {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 4px; border-radius: 7px;
  background: rgba(255, 255, 255, .2); font-size: 11px; font-weight: 700;
}
.chaos__ico--dark { background: var(--ink); color: var(--cream); }
.chaos__file { background: rgba(255, 255, 255, .14); border-radius: 8px; padding: 6px 8px; margin-top: 6px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chaos__mail { background: #fff; color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.chaos__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 13px; }
.chaos__row .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }
.chaos--wa { background: #0B5C4B; }
.chaos__ico--wa { background: #25D366; color: #0B3B30; }
.chaos__bubble { background: #fff; color: var(--ink); border-radius: 10px 10px 10px 2px; padding: 6px 10px; margin-top: 6px; font-size: 13px; max-width: 92%; }
.chaos__bubble--me { background: #D9FDD3; border-radius: 10px 10px 2px 10px; margin-left: auto; width: fit-content; }
.chaos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.chaos__grid span { height: 24px; background: var(--cream-2); border-radius: 4px; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.chaos__grid .err { background: var(--coral-tint); color: var(--coral-deep); }
.chaos__cap { margin-top: 8px; font-size: 13px; color: var(--muted); }
.badge {
  position: absolute; top: -14px; right: -14px; background: var(--coral); color: var(--ink);
  border: 2px solid var(--ink); font-weight: 700; font-size: 13px; border-radius: 999px; padding: 4px 9px;
}

.os-card {
  z-index: 4;
  position: absolute; left: 50%; top: 50%;
  width: clamp(280px, 28vw, 360px);
  padding: 22px; border-radius: 24px; border: 2px solid var(--ink);
  background: var(--ink); color: var(--cream);
  box-shadow: 8px 8px 0 var(--teal);
  text-align: center;
  transform: translate(-50%, -50%) scale(.6); opacity: 0;
  will-change: transform, opacity;
}
.os-card img { margin: 0 auto 10px; width: 56px; height: auto; }
.os-card__title { font-family: var(--f-dots); font-weight: 900; font-size: 34px; letter-spacing: .02em; color: var(--teal); line-height: 1.1; }
/* Rétegek: alul az adat, rajta a rendszereid, felül az AI */
.os-layers { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 16px; }
.os-layer { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 8px; border-radius: 12px; }
.os-layer > span:not(.os-layer__label) { font-size: 12.5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.os-layer__label { width: 100%; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-on-ink); margin-bottom: 1px; }
.os-layer--ai { border: 1.5px dashed rgba(247, 68, 78, .7); }
.os-layer--ai > span:not(.os-layer__label) { background: rgba(247, 68, 78, .18); border: 1px solid var(--coral); }
.os-layer--apps { background: var(--ink-2); border: 1px solid var(--line-on-ink); }
.os-layer--apps > span:not(.os-layer__label) { background: var(--ink-3); border: 1px solid var(--line-on-ink); }
.os-layer--data { background: var(--teal); color: var(--ink); font-weight: 700; font-size: 13.5px; padding: 9px; }
.os-card__status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: pulse 2s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }

/* ---------- STATEMENT ---------- */
.statement { background: var(--ink); color: var(--cream); padding-block: var(--section-y); text-align: center; }
.statement__lead { font-family: var(--f-display); font-variation-settings: "wdth" 85; font-weight: 600; font-size: clamp(24px, 3vw, 36px); line-height: 1.3; text-wrap: balance; }
.statement__sub { margin: 28px auto 0; max-width: 60ch; color: var(--muted-on-ink); font-size: 18px; }
.statement__sub strong { color: var(--coral); }

/* ---------- LOGOS ---------- */
.logos { padding-block: var(--section-y) var(--section-y-soft); overflow: hidden; }
/* Azonos háttér miatt a logósáv és a történet között kisebb térköz elég */
.logos + .story { padding-top: var(--section-y-soft); }
.logos__head { text-align: center; margin-bottom: 48px; }
.logos__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.proof-stats {
  display: inline-grid; grid-template-columns: repeat(3, auto); margin-top: 28px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--ink);
}
.proof-stats li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px clamp(16px, 3vw, 36px); }
.proof-stats li + li { border-left: 1.5px solid var(--line); }
.proof-stats strong {
  font-family: var(--f-display); font-variation-settings: "wdth" 75; font-weight: 800;
  font-size: clamp(34px, 4vw, 48px); line-height: 1; color: var(--coral-deep); font-variant-numeric: tabular-nums;
}
.proof-stats li:nth-child(2) strong { color: var(--teal-deep); }
.proof-stats span { font-size: 14px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.25; }
.marquee { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; gap: 16px; padding-right: 16px; flex: none; animation: marquee 110s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
/* Ügyfél logók: egységes szürke tónus, a fehér háttér "eltűnik" (multiply), rámutatásra eredeti szín */
.client-logo {
  flex: none; display: grid; place-items: center; width: 190px; height: 88px; padding: 14px 22px;
  border: 1.5px solid var(--line); border-radius: 16px; background: #fff;
}
.client-logo img {
  max-width: 100%; max-height: 46px; width: auto; height: auto; object-fit: contain;
  mix-blend-mode: multiply; filter: grayscale(1) contrast(1.05); opacity: .78;
  transition: filter .3s, opacity .3s;
}
.client-logo:hover img { filter: none; opacity: 1; }
.client-logo--square img { max-height: 62px; }
/* Ügyfél-sáv: logónként beállított magasság (--h), hogy a széles és a négyzetes logók egyforma súlyúak legyenek */
.marquee .client-logo img { height: var(--h, 40px); max-height: none; }
/* Fehér/sötét hátterű logók: invertálva lesznek sötétek a világos kártyán */
.client-logo--invert img, .client-logo--invert:hover img { filter: invert(1) grayscale(1); }
/* Sötét hátterű kép (pl. JPG): invertálás után a szürke háttér kifehérítése */
.client-logo--darkbg img, .client-logo--darkbg:hover img { filter: invert(1) grayscale(1) brightness(1.15) contrast(1.6); }
/* Halvány, világosszürke logók: gamma-sötétítés (index.html #logo-darken SVG szűrő), a fehér fehér marad */
.client-logo--faint img { filter: url(#logo-darken); opacity: .9; }
.client-logo--invert:hover img { opacity: 1; }

/* ---------- STORY ---------- */
.story { padding-block: var(--section-y); }
.story__intro { text-align: center; margin-bottom: 56px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.story__intro .display { max-width: 18ch; }
.story__board { position: relative; background: var(--ink); color: var(--cream); border-radius: 28px; padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px); }
.story__line { position: absolute; left: 50%; top: 40px; bottom: 40px; width: 2px; background: var(--line-on-ink); transform: translateX(-50%); }
.story__row { position: relative; display: grid; grid-template-columns: 1fr 72px 1fr; align-items: center; gap: clamp(16px, 3vw, 40px); padding-block: clamp(36px, 6vw, 72px); }
.story__big { font-family: var(--f-display); font-variation-settings: "wdth" 78; font-weight: 800; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.05; text-align: center; text-wrap: balance; }
.story__small { color: var(--muted-on-ink); font-size: 17px; text-align: center; max-width: 44ch; margin-inline: auto; }
.story__small strong { color: var(--coral); }
.story__mark { width: 52px; height: 54px; margin: 0 auto; display: grid; place-items: center; background: var(--ink); padding: 6px; }
.story__mark img { width: 100%; height: auto; filter: grayscale(1) brightness(1.6); opacity: .55; transition: filter .5s, opacity .5s; }
.story__row.is-in .story__mark img { filter: none; opacity: 1; }
.story__row--flip .story__big { order: 3; }
.story__row--flip .story__small { order: 1; }
.story__row--flip .story__mark { order: 2; }

/* ---------- TAX ---------- */
.tax { padding-block: var(--section-y); background: var(--paper); border-block: 1.5px solid var(--line); }
.tax__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: clamp(48px, 6vw, 80px); }
.tax__steps li { border-top: 2px solid var(--ink); padding-top: 20px; }
.tax__num { font-family: var(--f-dots); font-weight: 900; font-size: 40px; color: var(--coral); line-height: 1; }
.tax__steps h3 { font-family: var(--f-display); font-variation-settings: "wdth" 80; font-weight: 700; font-size: 26px; margin: 12px 0 8px; }
.tax__steps p { color: var(--muted); }

.calc { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; background: var(--teal-tint); border: 2px solid var(--ink); border-radius: 28px; padding: clamp(24px, 4vw, 48px); }
.calc__inputs { display: flex; flex-direction: column; gap: 28px; }
.field-range label { display: block; font-weight: 600; margin-bottom: 10px; }
.field-range__row { display: flex; align-items: center; gap: 16px; }
.field-range output {
  flex: none; min-width: 92px; text-align: center; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--cream);
  font-family: var(--f-display); font-variation-settings: "wdth" 80; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums;
}
input[type="range"] { flex: 1; appearance: none; -webkit-appearance: none; height: 44px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(var(--coral), var(--coral)) 0 / var(--fill, 50%) 100% no-repeat, var(--paper); border: 1.5px solid var(--ink); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--ink); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--coral); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--ink); border: 3px solid var(--paper); box-shadow: 0 0 0 1.5px var(--ink); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); border: 3px solid var(--paper); }
.calc__hint { font-size: 15px; color: var(--muted); }

.receipt {
  position: relative; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; padding: 28px;
  font-family: "Courier New", ui-monospace, monospace; box-shadow: 8px 8px 0 var(--ink);
  -webkit-mask: radial-gradient(circle at 10px 100%, transparent 8px, #000 8.5px) -10px 100% / 20px 51% repeat-x, linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat;
          mask: radial-gradient(circle at 10px 100%, transparent 8px, #000 8.5px) -10px 100% / 20px 51% repeat-x, linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat;
  padding-bottom: 36px;
}
.receipt__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 2px dashed var(--ink); }
.receipt__title { font-weight: 700; font-size: 22px; letter-spacing: .2em; }
.receipt__meta { font-size: 13px; color: var(--muted); }
.receipt__lines { margin: 0; padding: 16px 0; border-bottom: 2px dashed var(--ink); display: flex; flex-direction: column; gap: 10px; }
.receipt__lines div { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.receipt__lines dd { margin: 0; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.receipt__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 18px 0 8px; }
.receipt__total strong { white-space: nowrap; }
.receipt__total span { font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .08em; }
.receipt__total strong { font-family: var(--f-display); font-variation-settings: "wdth" 75; font-weight: 800; font-size: clamp(40px, 5vw, 56px); color: var(--coral-deep); line-height: 1; font-variant-numeric: tabular-nums; }
.receipt__stamp {
  display: inline-block; margin: 8px 0 14px; padding: 4px 12px; border: 2.5px solid var(--coral); color: var(--coral-deep);
  font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; transform: rotate(-4deg); border-radius: 4px;
}
.receipt__note { font-size: 12.5px; color: var(--muted); margin-bottom: 20px; font-family: var(--f-body); }
.receipt .btn { font-family: var(--f-display); }

/* ---------- SYSTEMS ---------- */
.systems { padding-block: var(--section-y); }
.systems__card { background: var(--teal); border: 2px solid var(--ink); border-radius: 28px; padding: clamp(32px, 6vw, 80px); text-align: center; }
.systems__card .display { max-width: 16ch; margin-inline: auto; }
.systems__lead { max-width: 60ch; margin: 24px auto 0; font-size: clamp(17px, 1.5vw, 20px); }
.systems__questions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 860px; margin: 40px auto; text-align: left; }
.systems__questions li { display: flex; align-items: center; gap: 14px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 16px; padding: 16px 20px; font-weight: 600; font-size: 17px; }
.q-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--coral); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 20px; border: 1.5px solid var(--ink); }
.systems__quote { margin: 0 auto; max-width: 780px; background: var(--ink); color: var(--cream); border-radius: 20px; padding: clamp(24px, 4vw, 40px); }
.systems__quote p { font-family: var(--f-display); font-variation-settings: "wdth" 78; font-weight: 800; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; text-wrap: balance; }
.systems__quote footer { margin-top: 16px; color: var(--muted-on-ink); font-size: 17px; }
.systems__whatif { margin-top: 40px; display: flex; flex-direction: column; gap: 10px; font-weight: 600; font-size: clamp(17px, 1.6vw, 20px); }
.systems__whatif span { color: var(--ink); margin-right: 6px; }

/* ---------- START (Audit CTA) ---------- */
/* A „Kezdjük itt” gomb fölött és alatt azonos (--start-gap) térköz */
.start { --start-gap: clamp(40px, 5vw, 56px); background: var(--coral); padding-block: var(--section-y) var(--start-gap); text-align: center; border-block: 2px solid var(--ink); }
.start .display { max-width: 20ch; margin-inline: auto; }
.start .lead { color: var(--ink); margin: 20px auto 0; }
.start__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 48px 0 var(--start-gap); text-align: left; }
.start__steps li { position: relative; background: var(--paper); border: 2px solid var(--ink); border-radius: 20px; padding: 28px 24px 24px; }
.start__steps li:not(:last-child)::after {
  content: "→"; position: absolute; right: -16px; top: 50%; transform: translate(50%, -50%); z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--cream); display: grid; place-items: center; font-size: 16px;
}
/* Nolo-stílusú lépéskártya: szám + cím, nagybetűs alcím, leírás, félkövér "amit kapsz" sor */
.start__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.start__num { font-family: var(--f-dots); font-weight: 900; font-size: 30px; line-height: 1; color: var(--coral); -webkit-text-stroke: .04em currentColor; paint-order: stroke fill; padding-top: 2px; }
.start__steps h3 { font-family: var(--f-display); font-variation-settings: "wdth" 80; font-weight: 800; font-size: 28px; margin: 0; line-height: 1.05; }
.start__sub { display: block; margin-top: 6px; font-family: var(--f-display); font-variation-settings: "wdth" 85; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.start__steps .start__out { margin-top: 12px; color: var(--ink); font-weight: 700; }
/* Alapítók az 1. lépésben: fotók + név, hogy látsszon, kivel beszél a látogató */
.start__founders { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 14px; border-radius: 14px; background: var(--cream); border: 1.5px solid var(--line); font-size: 14.5px; line-height: 1.3; color: var(--ink-3); }
.start__founders strong { color: var(--ink); }
.start__founders-photos { display: flex; flex: none; }
.start__founders-photos .avatar { width: 44px; height: 44px; }
.start__founders-photos .avatar + .avatar { margin-left: -12px; }

/* ---------- SERVICES ---------- */
.services { padding-block: var(--section-y); }
.services__list { display: flex; flex-direction: column; gap: 20px; }
.service {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px);
  background: var(--paper); border: 2px solid var(--ink); border-radius: 28px; padding: clamp(28px, 4.5vw, 56px);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.service:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.service--flagship { background: var(--ink); color: var(--cream); grid-template-columns: 1fr 1fr; }
.service--flagship:hover { box-shadow: 6px 6px 0 var(--coral); }
.service__label { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--teal); }
.service__quote { font-family: var(--f-display); font-variation-settings: "wdth" 80; font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; text-wrap: pretty; }
.service--flagship .service__quote { color: var(--cream); }
.service__body h4 { font-family: var(--f-display); font-variation-settings: "wdth" 85; font-weight: 800; font-size: 22px; margin-bottom: 10px; color: var(--coral-deep); }
.service--flagship .service__body h4 { color: var(--coral); font-size: 26px; }
.service__body p { color: var(--muted); margin-bottom: 16px; }
.service--flagship .service__body p { color: var(--muted-on-ink); }
.ticks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ticks li { position: relative; padding-left: 32px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141712' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.service--flagship .link-arrow { color: var(--cream); }

/* ---------- METHOD ---------- */
.method { background: var(--ink); color: var(--cream); padding-block: var(--section-y); }
.method__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 96px); }
.method__visual { position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; }
.stack { display: flex; flex-direction: column; gap: 10px; perspective: 900px; }
.stack__layer {
  display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: 16px;
  border: 1.5px solid var(--line-on-ink); background: var(--ink-2);
  font-family: var(--f-display); font-variation-settings: "wdth" 80; font-weight: 700; font-size: clamp(20px, 2vw, 26px);
  color: rgba(242, 239, 233, .45);
  transform: rotateX(18deg) scale(.96); transform-origin: center bottom;
  transition: background-color .5s var(--ease), color .5s, transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
.stack__layer span { font-family: var(--f-dots); font-weight: 900; font-size: 22px; color: inherit; }
.stack__layer.is-built { color: var(--cream); border-color: rgba(120, 188, 196, .5); background: var(--ink-3); transform: rotateX(0) scale(1); }
.stack__layer.is-active { background: var(--teal); color: var(--ink); border-color: var(--teal); box-shadow: 6px 6px 0 var(--coral); }
.stack__caption { display: flex; align-items: center; gap: 10px; margin-top: 20px; color: var(--muted-on-ink); font-weight: 600; }

.method__steps { display: flex; flex-direction: column; }
.mstep { padding-block: clamp(32px, 6vh, 64px); border-top: 1px solid var(--line-on-ink); opacity: .45; transition: opacity .5s; }
.mstep.is-active { opacity: 1; }
.mstep__num { display: inline-block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--teal); margin-bottom: 12px; }
.mstep h3 { font-family: var(--f-display); font-variation-settings: "wdth" 78; font-weight: 800; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; margin-bottom: 14px; text-wrap: balance; }
.mstep p { color: var(--muted-on-ink); }
.mstep p + p { margin-top: 14px; }
.mstep__highlight { background: rgba(120, 188, 196, .12); border-left: 4px solid var(--teal); padding: 16px 18px; border-radius: 0 12px 12px 0; color: var(--cream) !important; }
.mstep__highlight strong { color: var(--teal); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips > span { font-size: 14px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-on-ink); background: var(--ink-2); }
.method__outro { text-align: center; margin-top: clamp(48px, 8vw, 96px); padding-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--line-on-ink); display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 3vw, 44px); }
/* Előtte / Utána: a módszer lezárása */
.ba { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 16px; width: 100%; max-width: 900px; text-align: left; }
.ba__col { border-radius: 20px; padding: clamp(20px, 3vw, 28px); }
.ba__col--before { background: var(--ink-2); border: 1.5px solid var(--line-on-ink); }
.ba__col--after { background: var(--teal); color: var(--ink); border: 2px solid var(--teal); box-shadow: 6px 6px 0 var(--coral); }
.ba__label { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ba__col--before .ba__label { color: var(--muted-on-ink); }
.ba ul { display: flex; flex-direction: column; gap: 10px; }
.ba li { position: relative; padding-left: 30px; font-weight: 600; line-height: 1.35; }
.ba li::before { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.ba__col--before li { color: var(--muted-on-ink); text-decoration: line-through; text-decoration-color: rgba(247, 68, 78, .7); }
.ba__col--before li::before { content: "×"; background: rgba(247, 68, 78, .2); color: var(--coral); }
.ba__col--after li::before { content: "✓"; background: var(--ink); color: var(--teal); }
/* A „Utána” kártya 6px-es árnyékát kiegyenlítjük, így a cím fölött és alatt szemre azonos a térköz */
.ba + .display { margin-top: 6px; }
.ba__arrow { align-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--coral); color: var(--ink); font-weight: 800; font-size: 20px; }

/* ---------- WHY ---------- */
.why { padding-block: var(--section-y); }
.why__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.why-card { grid-column: span 2; background: var(--paper); border: 2px solid var(--ink); border-radius: 24px; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 12px; }
.why-card--wide { grid-column: span 3; }
.why-card--teal { background: var(--teal-tint); }
.why-card--ink { background: var(--ink); color: var(--cream); }
.why-card__num { font-family: var(--f-dots); font-weight: 900; font-size: 36px; line-height: 1; color: var(--coral); }
.why-card h3 { font-family: var(--f-display); font-variation-settings: "wdth" 78; font-weight: 800; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; }
.why-card p { color: var(--muted); }
.why-card--ink p { color: var(--muted-on-ink); }
.why-card p strong { color: var(--ink); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.compare__col { border-radius: 14px; padding: 16px; border: 1.5px solid var(--ink); }
.compare__col--them { background: var(--paper); }
.compare__col--them li { text-decoration: line-through; text-decoration-color: var(--coral); color: var(--muted); }
.compare__col--us { background: var(--ink); color: var(--cream); }
.compare__label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.compare__col--us .compare__label { color: var(--teal); }
.compare li { font-size: 15px; padding: 3px 0; }
.timeline-bars { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
.tbar { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.tbar__label { font-weight: 600; font-size: 15px; }
.tbar__val { font-family: var(--f-display); font-variation-settings: "wdth" 80; font-weight: 800; font-size: 20px; grid-row: 1; grid-column: 2; }
.tbar__track { grid-column: 1 / -1; height: 18px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--cream); overflow: hidden; }
.tbar__fill { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 1.4s var(--ease); }
.is-in .tbar__fill { width: var(--w); }
.tbar__fill--grey { background: repeating-linear-gradient(45deg, #9A9E94 0 8px, #B6BAB0 8px 16px); }
.tbar__fill--coral { background: var(--coral); }

/* ---------- DOGFOOD ---------- */
.dogfood { padding-block: 0 var(--section-y); }
.dogfood__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.proof { border-top: 2px solid var(--ink); padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.proof__ico { width: 56px; height: 56px; border-radius: 16px; background: var(--coral-tint); border: 1.5px solid var(--ink); display: grid; place-items: center; margin-bottom: 6px; }
.proof:nth-child(2) .proof__ico { background: var(--teal-tint); }
.proof:nth-child(3) .proof__ico { background: #FFE58A; }
.proof h3 { font-family: var(--f-display); font-variation-settings: "wdth" 80; font-weight: 800; font-size: 26px; line-height: 1.1; }
.proof p { color: var(--muted); }

/* ---------- RESULTS ---------- */
.results { background: var(--ink); color: var(--cream); padding-block: var(--section-y); }
/* Valós eredmények: világos kártya, mint a logók feletti számsáv (sötét alapon korall árnyékkal) */
.result-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 24px; box-shadow: 8px 8px 0 var(--coral);
  overflow: hidden;
}
/* subgrid: a szám, a leírás és az ügyfélnév soronként egy vonalban van a cellák között */
.result-stats li { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 6px; padding: clamp(20px, 2.6vw, 32px); }
.result-stats li + li { border-left: 1.5px solid var(--line); }
.result-stats strong {
  font-family: var(--f-display); font-variation-settings: "wdth" 75; font-weight: 800;
  font-size: clamp(30px, 3.2vw, 46px); line-height: 1; color: var(--coral-deep); text-wrap: balance;
}
.result-stats li:nth-child(even) strong { color: var(--teal-deep); }
.result-stats span { font-size: 15px; font-weight: 600; color: var(--ink-3); line-height: 1.35; }
.result-stats a, .result-stats em {
  align-self: end; justify-self: start; padding-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-style: normal; color: var(--muted);
}
.result-stats a { text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.result-stats a:hover { color: var(--coral-deep); }
.testimonial { margin: clamp(48px, 6vw, 80px) auto 0; max-width: 900px; text-align: center; }
.testimonial blockquote { margin: 0; font-family: var(--f-display); font-variation-settings: "wdth" 85; font-weight: 600; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; text-wrap: balance; }
.testimonial figcaption { margin-top: 24px; display: inline-flex; align-items: center; gap: 12px; color: var(--muted-on-ink); text-align: left; }
.testimonial figcaption strong { color: var(--cream); }
.avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--ink); font-weight: 700; border: 2px solid var(--ink); font-size: 15px; }
.avatar--coral { background: var(--coral); }
img.avatar { object-fit: cover; object-position: 50% 25%; padding: 0; }
.avatar--teal { background: var(--teal); }

/* ---------- CASES ---------- */
.cases { padding-block: var(--section-y); }
.cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case { background: var(--paper); border: 2px solid var(--ink); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.case:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.case__visual { aspect-ratio: 16 / 10; border-bottom: 2px solid var(--ink); overflow: hidden; }
.case__visual--img { background: #05081a; }
.case__visual--img img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .5s var(--ease); }
.case:hover .case__visual--img img { transform: scale(1.03); }
.case__visual--logo {
  display: grid; place-items: center; background-color: var(--c);
  background-image: radial-gradient(rgba(20, 23, 18, .22) 1.2px, transparent 1.3px); background-size: 16px 16px;
}
.case__logo { display: grid; place-items: center; width: 64%; height: 56%; min-height: 0; background: #fff; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink); padding: 14px 20px; }
.case__logo { position: relative; }
/* Sötét alapú logópanel: világos pontrács, korall árnyék a fehér csempén */
.case__visual--dark { background-image: radial-gradient(rgba(242, 239, 233, .2) 1.2px, transparent 1.3px); }
.case__visual--dark .case__logo { box-shadow: 5px 5px 0 var(--coral); }
.case__logo img { position: absolute; inset: 14px 20px; width: calc(100% - 40px); height: calc(100% - 28px); object-fit: contain; }
.case__tag { align-self: flex-start; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--cream); color: var(--ink); border: 1.5px solid var(--ink); }
.case__result { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 2px; }
.case__result strong { font-family: var(--f-display); font-variation-settings: "wdth" 75; font-weight: 800; font-size: clamp(34px, 3.4vw, 46px); line-height: 1; color: var(--coral-deep); }
.case__result span { font-weight: 600; font-size: 14.5px; color: var(--ink-3); }
.case__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.case__body h3 { font-family: var(--f-display); font-variation-settings: "wdth" 85; font-weight: 800; font-size: 22px; }
.case__body p { color: var(--muted); font-size: 15.5px; }
.case__body p strong { color: var(--ink); }
.case__body .link-arrow { margin-top: auto; }

/* ---------- ESETTANULMÁNYOK ALOLDAL ---------- */
.nav__link--current { background: var(--ink); color: var(--cream); }
.nav__link--current:hover { background: var(--ink-3); }
.cs-hero {
  padding-block: clamp(56px, 8vw, 104px) 32px; text-align: center;
  background-image: radial-gradient(rgba(20, 23, 18, .16) 1.2px, transparent 1.3px); background-size: 28px 28px;
}
.cs-hero .lead { margin: 20px auto 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cs-hero--fill { min-height: calc(100vh - var(--nav-h)); display: grid; align-content: center; }
.cs-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.cs-list { padding-block: 24px var(--section-y); }
.cs-case {
  background: var(--paper); border: 2px solid var(--ink); border-radius: 28px; box-shadow: 6px 6px 0 var(--ink);
  padding: clamp(20px, 3.5vw, 40px); margin-bottom: 32px; scroll-margin-top: calc(var(--nav-h) + 20px);
}
.cs-case__top { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
.cs-case__intro { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cs-case__num { font-family: var(--f-dots); font-weight: 900; font-size: 34px; line-height: 1; color: var(--coral); -webkit-text-stroke: .04em currentColor; paint-order: stroke fill; }
.cs-case__intro h2 { font-family: var(--f-display); font-variation-settings: "wdth" 78; font-weight: 800; font-size: clamp(34px, 4vw, 52px); line-height: 1; text-wrap: balance; }
.cs-case__intro p { color: var(--muted); font-size: clamp(16px, 1.4vw, 18px); max-width: 38ch; text-wrap: pretty; }
.cs-case__visual { aspect-ratio: 16 / 10; border: 2px solid var(--ink); border-radius: 18px; overflow: hidden; }
.cs-case__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 24px; }
.cs-case__chips li { padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--cream); font-size: 14px; font-weight: 600; }
.cs-case__chips li strong { color: var(--coral-deep); }
.cs-case__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); border-top: 1.5px solid var(--line); padding-top: 24px; }
.cs-case__cols h3 { font-family: var(--f-display); font-variation-settings: "wdth" 80; font-weight: 800; font-size: 22px; margin-bottom: 8px; }
.cs-case__cols p { color: var(--muted); font-size: 16px; }
.cs-case__cols p strong { color: var(--ink); }
.cs-case:last-child { margin-bottom: 0; }

/* ---------- ADATKEZELÉSI TÁJÉKOZTATÓ ---------- */
.legal-hero {
  padding-block: clamp(56px, 8vw, 104px) 24px;
  background-image: radial-gradient(rgba(20, 23, 18, .16) 1.2px, transparent 1.3px); background-size: 28px 28px;
}
.legal-hero .lead { margin-top: 20px; }
.legal-meta { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--muted); }
.legal { padding-block: 24px var(--section-y); }
.legal-toc { background: var(--paper); border: 2px solid var(--ink); border-radius: 20px; padding: 20px 24px; margin-bottom: 40px; }
.legal-toc__title { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--coral-deep); margin-bottom: 8px; }
.legal-toc ol { list-style: decimal; padding-left: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; }
.legal-toc a { display: inline-block; padding: 4px 0; text-decoration: none; font-weight: 600; }
.legal-toc a:hover { color: var(--coral-deep); text-decoration: underline; }
.legal-body h2 {
  font-family: var(--f-display); font-variation-settings: "wdth" 80; font-weight: 800; font-size: clamp(26px, 3vw, 34px); line-height: 1.1;
  margin: 48px 0 16px; scroll-margin-top: calc(var(--nav-h) + 20px);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li, .legal-body dd { color: var(--ink-3); }
.legal-body p + p { margin-top: 12px; }
.legal-body a, .link-inline { text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 3px; }
.link-inline { background: none; border: 0; padding: 0; cursor: pointer; }
.legal-company { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0 0 16px; border: 2px solid var(--ink); border-radius: 18px; overflow: hidden; background: var(--paper); }
.legal-company div { padding: 14px 18px; border-bottom: 1.5px solid var(--line); }
.legal-company div:nth-child(odd) { border-right: 1.5px solid var(--line); }
.legal-company dt { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.legal-company dd { margin: 2px 0 0; font-weight: 700; color: var(--ink); }
.legal-card { scroll-margin-top: calc(var(--nav-h) + 20px); background: var(--paper); border: 2px solid var(--ink); border-radius: 18px; padding: 20px 22px; margin-bottom: 14px; }
.legal-card h3 { font-family: var(--f-display); font-variation-settings: "wdth" 85; font-weight: 800; font-size: 20px; margin-bottom: 10px; }
.legal-card dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.legal-card dl div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
.legal-card dt { font-size: 13px; font-weight: 700; color: var(--coral-deep); padding-top: 2px; }
.legal-card dd { margin: 0; font-size: 15.5px; }
.legal-list { list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.todo { background: #FFE58A; color: var(--ink); padding: 0 4px; border-radius: 4px; font-size: .9em; font-weight: 600; }
.final-cta .lead a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- KARRIER ALOLDAL ---------- */
.career-hero__cta { margin-top: 28px; }
.career { padding-block: 24px var(--section-y); }
.job { background: var(--paper); border: 2px solid var(--ink); border-radius: 28px; box-shadow: 6px 6px 0 var(--ink); padding: clamp(24px, 4vw, 48px); }
.job__head { padding-bottom: 20px; border-bottom: 1.5px solid var(--line); margin-bottom: 20px; }
.job__label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--coral-deep); }
.job__label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: pulse 2s infinite; }
.job__head h2 { font-family: var(--f-display); font-variation-settings: "wdth" 78; font-weight: 800; font-size: clamp(34px, 4.4vw, 54px); line-height: 1; margin: 10px 0 16px; }
.job__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.job__meta li { padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--cream); font-size: 14px; font-weight: 600; }
.job__intro { font-size: clamp(16px, 1.4vw, 18px); color: var(--ink-3); }
.job__block { margin-top: 28px; }
.job__block h3 { font-family: var(--f-display); font-variation-settings: "wdth" 80; font-weight: 800; font-size: 24px; margin-bottom: 12px; }
.ticks--light li { color: var(--ink-3); }
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.perk-card { border: 2px solid var(--ink); border-radius: 24px; padding: clamp(22px, 3vw, 32px); background: var(--teal-tint); }
.perk-card--fun { background: var(--coral-tint); }
.perk-card h3 { font-family: var(--f-display); font-variation-settings: "wdth" 80; font-weight: 800; font-size: 24px; margin-bottom: 12px; }
.perk-card ul { display: flex; flex-direction: column; gap: 10px; list-style: disc; padding-left: 20px; color: var(--ink-3); }
.perk-card strong { color: var(--ink); }
.hiring-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.hiring-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--paper); font-size: 15px; color: var(--muted); }
.hiring-steps li > span { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--cream); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; }
.hiring-steps strong { display: block; color: var(--ink); }
/* Fájlfeltöltés az űrlap stílusában */
.field__label { font-weight: 600; font-size: 15px; }
.field__hint { font-size: 13.5px; color: var(--muted); }
.file-field { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 6px 6px 6px 6px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }
.file-field input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.field .file-field__btn { flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: 6px 16px; white-space: nowrap; border-radius: 999px; background: var(--ink); color: var(--cream); font-weight: 600; font-size: 14px; cursor: pointer; }
.file-field__name { font-size: 14.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-field:focus-within { box-shadow: 0 0 0 3px var(--teal); }
.field.has-error .file-field { border-color: var(--coral-deep); box-shadow: 0 0 0 3px var(--coral-tint); }

/* ---------- FIT ---------- */
.fit { padding-block: var(--section-y); background: var(--paper); border-block: 1.5px solid var(--line); }
.fit__types { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.fit-type { border: 2px solid var(--ink); border-radius: 24px; padding: clamp(24px, 3.5vw, 40px); background: var(--cream); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.fit-type h3 { font-family: var(--f-display); font-variation-settings: "wdth" 78; font-weight: 800; font-size: clamp(28px, 3vw, 38px); line-height: 1.05; }
.fit-type p { color: var(--muted); }
.fit__lists { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.fit-list { border-radius: 24px; padding: clamp(24px, 3.5vw, 40px); border: 2px solid var(--ink); }
.fit-list h3 { font-family: var(--f-display); font-variation-settings: "wdth" 80; font-weight: 800; font-size: 26px; margin-bottom: 16px; }
.fit-list ul { display: flex; flex-direction: column; gap: 10px; }
.fit-list li { position: relative; padding-left: 32px; }
.fit-list li::before { position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; border: 1.5px solid var(--ink); }
.fit-list--yes { background: var(--teal-tint); }
.fit-list--yes li::before { content: "✓"; background: var(--teal); }
.fit-list--no { background: var(--cream); }
.fit-list--no li::before { content: "×"; background: var(--coral-tint); }

/* ---------- TEAM ---------- */
.team { padding-block: var(--section-y); }
.team__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.person { display: grid; grid-template-columns: 200px 1fr; gap: 28px; background: var(--paper); border: 2px solid var(--ink); border-radius: 28px; padding: 24px; align-items: start; }
/* Fotó: sötét keret + márkaszínű (korall/türkiz) eltolt blokk, mint az oldal többi kártyáján */
.person__photo {
  aspect-ratio: 4 / 5; border-radius: 18px; border: 2px solid var(--ink); background: var(--c);
  display: grid; place-items: center; overflow: hidden; box-shadow: 6px 6px 0 var(--c);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); }
/* Fotó + alatta a LinkedIn gomb egy oszlopban */
.person__media { display: flex; flex-direction: column; gap: 22px; }
.person__linkedin {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px;
  border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); text-decoration: none; font-weight: 600; font-size: 15px;
  transition: background-color .2s, color .2s;
}
.person__linkedin:hover { background: var(--ink); color: var(--cream); }
.person__body h3 { font-family: var(--f-display); font-variation-settings: "wdth" 78; font-weight: 800; font-size: 34px; line-height: 1; }
.person__role { font-weight: 600; color: var(--coral-deep); margin: 8px 0 12px; font-size: 15px; }
.person__body p:not(.person__role) { color: var(--muted); font-size: 16px; }
.worked { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.worked__label { text-align: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.worked__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 620px; }

/* ---------- FAQ ---------- */
.faq { padding-block: var(--section-y); border-top: 1.5px solid var(--line); }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--paper); border: 2px solid var(--ink); border-radius: 18px; overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 24px; min-height: 64px;
  font-family: var(--f-display); font-variation-settings: "wdth" 85; font-weight: 700; font-size: clamp(19px, 1.8vw, 22px);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--teal-tint); border: 1.5px solid var(--ink); display: grid; place-items: center; font-size: 20px; transition: transform .25s var(--ease), background-color .25s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--coral); }
.faq details p { padding: 0 24px 22px; color: var(--muted); max-width: 70ch; }

/* ---------- CONTACT ---------- */
.contact { background: var(--ink); color: var(--cream); padding-block: var(--section-y); }
.contact__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact__intro { position: sticky; top: calc(var(--nav-h) + 32px); }
.contact__intro .lead { color: var(--muted-on-ink); margin-top: 20px; }
.next-steps { margin-top: 36px; display: flex; flex-direction: column; gap: 16px; }
.next-steps li { display: flex; gap: 16px; align-items: flex-start; }
.next-steps li > span { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--teal); color: var(--ink); display: grid; place-items: center; font-weight: 800; font-family: var(--f-display); }
.next-steps strong { display: block; color: var(--cream); }
.next-steps div { color: var(--muted-on-ink); font-size: 16px; }
.contact__people { display: flex; align-items: center; margin-top: 36px; }
.contact__people .avatar + .avatar { margin-left: -12px; }
.contact__people-text { margin-left: 14px; color: var(--muted-on-ink); font-weight: 600; }

.lead-form { position: relative; background: var(--cream); color: var(--ink); border-radius: 28px; padding: clamp(24px, 4vw, 44px); border: 2px solid var(--cream); box-shadow: 10px 10px 0 var(--coral); display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field label, .field legend { font-weight: 600; font-size: 15px; padding: 0; }
.req { color: var(--coral-deep); }
.opt { font-weight: 400; color: var(--muted); }
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--ink); background: var(--paper);
  font-size: 16px; transition: border-color .2s, box-shadow .2s;
}
.field select { appearance: none; -webkit-appearance: none; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141712' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; padding-right: 42px; cursor: pointer; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--teal); }
.field input::placeholder, .field textarea::placeholder { color: #7A7E74; }
.field.has-error input, .field.has-error select { border-color: var(--coral-deep); box-shadow: 0 0 0 3px var(--coral-tint); }
.field__error { color: var(--coral-deep); font-size: 14px; font-weight: 600; min-height: 0; }
.field__error:empty { display: none; }

.chips--select label { position: relative; cursor: pointer; }
.chips--select input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips--select span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--ink);
  background: var(--paper); font-size: 15px; font-weight: 500; transition: background-color .2s, color .2s;
}
.chips--select { margin-top: 0; }
.chips--select input:checked + span { background: var(--teal); }
.chips--select input:checked + span::before { content: "✓"; margin-right: 6px; font-weight: 800; }
.field__other { margin-top: 4px; }
.field__other[hidden] { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.chips--select input:focus-visible + span { outline: 3px solid var(--coral); outline-offset: 2px; }

.field--check .check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 14.5px; color: var(--muted); cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--ink); cursor: pointer; }
.form-foot { text-align: center; font-size: 14px; color: var(--muted); }
.btn.is-loading { opacity: .7; pointer-events: none; }

.form-success { position: absolute; inset: 0; background: var(--cream); border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 40px; }
.form-success[hidden] { display: none; }
.form-success__ico { width: 72px; height: 72px; border-radius: 50%; background: var(--teal); border: 2px solid var(--ink); display: grid; place-items: center; font-size: 34px; font-weight: 800; }
.form-success h3 { font-family: var(--f-display); font-variation-settings: "wdth" 78; font-weight: 800; font-size: 40px; }
.form-success p { color: var(--muted); max-width: 40ch; }

/* ---------- FINAL CTA ---------- */
.final-cta { background: var(--coral); padding-block: var(--section-y); text-align: center; border-top: 2px solid var(--ink); }
.final-cta .lead { color: var(--ink); margin: 24px auto 36px; }

/* ---------- FOOTER ---------- */
.footer { background: var(--ink); color: var(--muted-on-ink); padding-block: 72px 32px; font-size: 15px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 40px; }
.footer__logo { height: 34px; width: auto; margin-bottom: 18px; }
.footer__brand p { max-width: 38ch; }
/* Kapacitás: szűkösség kiemelése (korall keret, LED-dátum) */
.footer__capacity {
  margin-top: 24px; max-width: 420px; padding: 20px 22px; border: 2px solid var(--coral); border-radius: 20px;
  background: rgba(247, 68, 78, .08); box-shadow: 6px 6px 0 var(--coral); display: flex; flex-direction: column; gap: 8px;
}
.footer__capacity-label { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.footer__capacity-date { font-family: var(--f-dots); font-weight: 900; font-size: clamp(40px, 5vw, 56px); line-height: 1; color: var(--cream); -webkit-text-stroke: .04em currentColor; paint-order: stroke fill; }
.footer__capacity p { color: var(--muted-on-ink); max-width: none; }
.footer__capacity p strong { color: var(--cream); }
.footer__capacity .link-arrow { align-self: flex-start; }
.pulse--coral { background: var(--coral); box-shadow: 0 0 0 0 rgba(247, 68, 78, .6); animation-name: pulse-coral; }
@keyframes pulse-coral { 70% { box-shadow: 0 0 0 10px rgba(247, 68, 78, 0); } 100% { box-shadow: 0 0 0 0 rgba(247, 68, 78, 0); } }
.footer__h { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--cream); margin-bottom: 14px; }
.footer ul { display: flex; flex-direction: column; gap: 4px; }
.footer a { text-decoration: none; display: inline-block; padding: 6px 0; }
.footer a:hover { color: var(--teal); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer__cookie { background: none; border: 0; padding: 6px 0; cursor: pointer; }
.footer__cookie:hover { color: var(--teal); }
.footer__agents { flex-basis: 100%; font-size: 13px; opacity: .75; }
.footer__agents code { font-size: 12px; }
.footer .footer__agents a { display: inline; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.footer__h--spaced { margin-top: 24px; }
.footer__addr { font-style: normal; display: flex; flex-direction: column; gap: 6px; }
.footer__addr strong { color: var(--cream); }
.footer .footer__social { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.footer__social a {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--line-on-ink); color: var(--cream); transition: background-color .2s, color .2s, border-color .2s;
}
.footer__social a:hover { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-on-ink); }

/* ---------- STICKY MOBILE CTA ---------- */
.sticky-cta {
  position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 90;
  display: none; justify-content: center; align-items: center; gap: 8px; min-height: 54px; border-radius: 999px;
  background: var(--coral); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--f-display); font-variation-settings: "wdth" 85; font-weight: 800; font-size: 18px; text-decoration: none;
  transform: translateY(140%); transition: transform .35s var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }

/* ---------- SÜTI-SÁV (main.js hozza létre) ---------- */
.consent {
  position: fixed; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 150;
  width: min(420px, calc(100% - 32px)); padding: 20px 22px;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--ink);
  animation: consent-in .4s var(--ease);
}
.consent__title { font-family: var(--f-display); font-variation-settings: "wdth" 85; font-weight: 800; font-size: 19px; line-height: 1.2; }
.consent__text { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.consent__text a { color: var(--ink); font-weight: 600; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
@keyframes consent-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }

/* ---------- REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- HALVÁNY SZEKCIÓHATÁROK ----------
   Hasonló hátterű (fehér ↔ krém) vagy kártyás szekciók között a kártya kerete már elválaszt,
   ezért ott kisebb (--section-y-soft) a térköz. */
.story { padding-bottom: var(--section-y-soft); }
.tax { padding-block: var(--section-y-soft); }
.systems { padding-top: var(--section-y-soft); }
.cases { padding-bottom: var(--section-y-soft); }
.fit { padding-block: var(--section-y-soft); }
.team { padding-block: var(--section-y-soft); }
.faq { padding-top: var(--section-y-soft); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .why-card, .why-card--wide { grid-column: span 3; }
  .why-card--ink { grid-column: 1 / -1; }
  .person { grid-template-columns: 1fr; }
  .person__media { max-width: 220px; }
}

@media (max-width: 900px) {
  .calc, .method__grid, .contact__grid, .service, .service--flagship { grid-template-columns: 1fr; }
  .method__visual { position: relative; top: 0; display: none; }
  /* Rétegvizuál nélkül a lépések külön kártyák, hogy elváljanak a bevezetőtől */
  .method__steps { gap: 14px; }
  .mstep {
    opacity: 1; padding: 22px 20px; border: 1.5px solid var(--line-on-ink); border-left: 4px solid var(--teal);
    border-radius: 18px; background: var(--ink-2);
  }
  .mstep__num { background: var(--teal); color: var(--ink); padding: 5px 12px; border-radius: 999px; font-size: 12px; }
  .contact__intro { position: static; }
  .tax__steps, .start__steps, .dogfood__grid, .cases__grid { grid-template-columns: 1fr; }
  .cs-case__top, .cs-case__cols { grid-template-columns: 1fr; }
  .perks, .hiring-steps { grid-template-columns: 1fr; }
  .ba { grid-template-columns: 1fr; }
  .ba__arrow { justify-self: center; transform: rotate(90deg); }
  .legal-toc ol, .legal-company { grid-template-columns: 1fr; }
  .legal-company div:nth-child(odd) { border-right: 0; }
  .legal-card dl div { grid-template-columns: 1fr; gap: 2px; }
  .start__steps li:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -16px; transform: translate(50%, 50%); }
  .result-stats { grid-template-columns: 1fr 1fr; }
  .result-stats li:nth-child(3) { border-left: 0; }
  .result-stats li:nth-child(n+3) { border-top: 1.5px solid var(--line); }
  .fit__types, .fit__lists, .team__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .sticky-cta { display: inline-flex; }
}

@media (max-width: 720px) {
  :root { --section-y: 56px; }
  body { font-size: 16px; }
  .hero { height: 190vh; }
  .hero__copy { padding-top: 28px; }
  .hero__br { display: none; }
  .hero__pills .btn { font-size: 17px; padding: 14px 22px; white-space: nowrap; }
  .chaos { width: 150px; padding: 12px; font-size: 12px; box-shadow: 4px 4px 0 var(--ink); }
  .chaos--note { font-size: 16px; width: 130px; }
  .chaos__file, .chaos__mail, .chaos__row, .chaos__bubble { font-size: 11.5px; }
  .chaos[data-hide-mobile] { display: none; }
  .os-card { width: min(400px, calc(100vw - 32px)); padding: 16px; }
  .os-card img { width: 38px; margin-bottom: 6px; }
  .os-card__title { font-size: 27px; }
  /* Logó oszlop: a kártya széle és a logó, valamint a logó és a szöveg között azonos (20px) hely; a vonal a logó közepén fut */
  .story__board { border-radius: 20px; padding-inline: 20px; }
  .story__line { left: 40px; }
  .story__row, .story__row--flip { grid-template-columns: 1fr; padding-left: 60px; gap: 12px; text-align: left; }
  .story__row .story__big, .story__row .story__small { text-align: left; order: initial !important; margin: 0; }
  .story__mark { position: absolute; left: 0; top: clamp(36px, 6vw, 72px); width: 40px; height: 42px; padding: 3px; margin: 0; order: initial !important; }
  .systems__questions { grid-template-columns: 1fr; }
  .why-card, .why-card--wide, .why-card--ink { grid-column: 1 / -1; }
  .compare { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .result-stats { box-shadow: 6px 6px 0 var(--coral); }
  .result-stats li { padding: 18px 16px; }
  .result-stats strong { font-size: 26px; }
  .result-stats span { font-size: 13.5px; }
  .client-logo { width: 150px; height: 72px; padding: 12px 16px; }
  .client-logo img { max-height: 38px; }
  .client-logo--square img { max-height: 50px; }
  .marquee .client-logo img { height: calc(var(--h, 40px) * .8); }
  .footer__grid { grid-template-columns: 1fr; }
  .footer { padding-bottom: 100px; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee { flex-wrap: wrap; justify-content: center; mask-image: none; -webkit-mask-image: none; }
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter); }
  .marquee__track[aria-hidden="true"] { display: none; }
  .hero { height: auto; }
  .hero__sticky { position: relative; top: 0; height: auto; min-height: 0; }
  .hero__stage { height: 440px; flex: none; }
  .chaos { display: none; }
  .os-card { opacity: 1; transform: translate(-50%, -50%); }
}

/* Kötőjeles szavak (pl. AI-t) ne törjenek ketté */
.nw { white-space: nowrap; }