/* andabrowser.com: turkiz paletta, "csak interaktiv" szerep (Design - layout szal, 2026-10-18;
   forras: design/andavision-design/web/andabrowser/meres-turkiz-csak-interaktiv.txt, 0 kontraszt-bukas).
   A turkiz (--interactive) csak az interakcioe: link, CTA-kitoltes, fokusz-jel, a hamburger kozepso sava.
   A szoveg es a feluletek monokromok (enyhe turkiz arnyalattal); az elvalaszto egyszinu --line.
   A tobbi szabaly az andavision.com-tol orokolt; a takaritas kulon kor. */

@font-face {
  font-family: 'AndaVision Sans';
  src: url(/assets/fonts/andavision-sans.be9b97d49c.woff2) format('woff2');
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: 'AndaVision Serif';
  src: url(/assets/fonts/andavision-serif.540ebd3ba5.woff2) format('woff2');
  font-weight: 400 500;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  /* Szin-tokenek: a Design meres-keszlete, valtoztatas nelkul (vilagos). */
  --bg: #F1F6F6;
  --surface: #ffffff;
  --fg: #1b1f1f;
  --muted: #5a6060;
  --line: #868B8C;
  --eyebrow: #5a6060;
  --interactive: #007070;
  --interactive-hover: color-mix(in oklab, #007070 85%, black 15%);
  --on-interactive: #ffffff;
  --focus: #1b1f1f;
  --control-border: #6a7070;
  --hover-surface: #DCE8E8;
  --card-bg: color-mix(in oklab, var(--interactive) 8%, var(--bg));
  --card-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 8px 20px rgb(0 0 0 / 0.07);
  --header-shadow: var(--card-shadow);
  /* A mobil menu-panel arnyeka: a fejlec-arnyek retegei negativ spread-del (spread = eltolas - elmosas), igy felfele
     nem fut ki a fejlec also soraira, csak lefele latszik. */
  --menu-shadow: 0 1px 2px -1px rgb(0 0 0 / 0.05), 0 8px 20px -12px rgb(0 0 0 / 0.07);
  /* A hamburger kozepso sava (.menu-icon .lm) az interakcio szine. A var() a sajat elemen oldodik fel,
     ezert a sotet blokkban nem kell megismetelni: ott a sotet --interactive-t veszi. */
  --logo-accent: var(--interactive);
  /* Elvalaszto vonal: egyszinu --line (a ketszinu kek/zold az andavision.com-e). Hatterkepkent marad,
     mert igy a meglevo .site-footer / .footer-bottom szabalyok valtozatlanul hasznaljak. */
  --valaszto: linear-gradient(var(--line), var(--line));

  --card-radius: 12px;
  --sans: 'AndaVision Sans', system-ui, sans-serif;
  --serif: 'AndaVision Serif', Georgia, serif;
  --gutter: clamp(20px, 4.6vw, 88px);
  --space: clamp(64px, 8vw, 120px);

  /* A ragados fejlec magassaga. A scroll-padding-top hasznalja, hogy a
     horgony-ugras ne a fejlec ala vigye a celt. Merve, nem becsulve -- a
     smoke-teszt oda is figyel, hogy egyezzen a valodi magassaggal. */
  --header-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Szin-tokenek: a Design meres-keszlete, valtoztatas nelkul (sotet). */
    --bg: #161E1F;
    --surface: #21292A;
    --fg: #e6ebea;
    --muted: #b2b9b8;
    --line: #7d8483;
    --eyebrow: #b2b9b8;
    --interactive: #359D9C;
    --interactive-hover: color-mix(in oklab, #359D9C 85%, white 15%);
    --on-interactive: #161E1F;
    --focus: #e6ebea;
    --control-border: #8e9594;
    --hover-surface: #1C2E2E;
    --card-bg: color-mix(in oklab, var(--interactive) 8%, var(--bg));
    --card-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 2px 4px rgb(0 0 0 / 0.3), 0 12px 28px rgb(0 0 0 / 0.35);
    --header-shadow: 0 4px 8px rgb(0 0 0 / 0.5), 0 16px 32px rgb(0 0 0 / 0.45);
    --menu-shadow: 0 4px 8px -4px rgb(0 0 0 / 0.5), 0 16px 32px -16px rgb(0 0 0 / 0.45);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* A hidden attributum mindig nyerjen: a display-t allito szabalyok kulonben
   felulirnak a bongeszo sajat [hidden] szabalyat. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  /* A ragados fejlec ala ne csusszon be a horgony celja (#services, #projects,
     #contact). Toresponttonkent mas a fejlec magassaga, ezert valtozobol. */
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 18px/1.55 var(--sans);
}

@media (min-width: 1921px) {
  body {
    max-width: 1920px;
    margin-inline: auto;
  }
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  overflow-wrap: break-word;
  /* A hosszu magyar es nemet osszetett szavak a cimben: elobb nyelvi elvalasztas,
     es csak vegso esetben tordeles a szo belsejeben. */
  hyphens: auto;
  text-wrap: balance;
}

h1 {
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 80px);
  letter-spacing: -0.055em;
  /* 20ch, nem 14: a rovidebb sorhossz a hosszu osszetett szavakat szo kozben
     torte el (szoftverfejleszt-es, Softwareentwickl-ung, developm-ent). Merve a
     hat oldal x harom nyelv x ket szelesseg matrixban: 14ch -> 8 szo kozbeni
     tores, 18ch -> 6, 20ch -> 2. A 22ch sem jobb, ezert a 20 a legkisebb ertek,
     ami a minimumot hozza. */
  max-width: 20ch;
  margin-bottom: 28px;
}

h2 {
  font-size: clamp(30px, 3.5vw, 52px);
  max-width: 22ch;
}

h3 {
  font-size: clamp(24px, 2vw, 30px);
  letter-spacing: -0.02em;
}

p {
  max-width: 65ch;
  overflow-wrap: anywhere;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a,
button {
  touch-action: manipulation;
}

/* Fokusz: 3 px monokrom korvonal 5 px tavolsagban, mellette 2 px interakcio-jel. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 5px;
  box-shadow: 0 0 0 2px var(--interactive);
}

section {
  scroll-margin-top: 24px;
}

.muted {
  color: var(--muted);
}

/* Szoveges link: a szoveg szine a jel, alahuzas nelkul (Sandor 2026-10-23: "maga a szoveg szine legyen mas, igy
   mar latszik, hogy az link"). Korabban monokrom szoveg volt turkiz alahuzassal. Hover es lenyomva a sotetebb
   (sotet modban vilagosabb) --interactive-hover. Billentyuzettel a fokuszgyuru (a:focus-visible) a jel. */
.text-link,
.email,
.site-footer a {
  color: var(--interactive);
  text-decoration: none;
}

.text-link:hover,
.email:hover,
.site-footer a:hover,
.text-link:active,
.email:active,
.site-footer a:active {
  color: var(--interactive-hover);
}

/* A link a kornyezo szoveg meretet veszi fel: a mondat vegen ne legyen kisebb a mondatnal. Tordelodhet: nowrap-pal
   a letoltes-kartyak "Telepites lepesrol lepesre ..." linkje 519-900 px kozott 40-70 px-rel tullogott (kartya-mero). */
.text-link {
  font-size: inherit;
  display: inline-block;
}

/* CTA-gomb: kitoltott (az andavision.com-on korvonalas volt). */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 50px;
  padding: 14px 20px;
  /* Kitoltott CTA (andabrowser.com, Design 2026-10-18): turkiz toltes, a felirat --on-interactive
     (vilagos 5.91:1, sotet 5.21:1). A Design CTA-merese utan finomodik. */
  color: var(--on-interactive);
  background: var(--interactive);
  border: 1px solid var(--interactive);
  box-shadow: inset 0 -3px 0 var(--interactive);
  font: 400 16px/1.2 var(--sans);
  text-decoration: none;
  white-space: nowrap;
}

.button:hover {
  /* A kitoltesen a --hover-surface (vilagos) a feher felirattal olvashatatlan lenne. */
  background: var(--interactive-hover);
  border-color: var(--interactive-hover);
  box-shadow: inset 0 -3px 0 var(--interactive-hover);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin-bottom: 24px;
}

.tag {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.index {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 28px;
}

.skip {
  position: absolute;
  left: 20px;
  top: 0;
  z-index: 30;
  padding: 12px;
  background: var(--bg);
  color: var(--fg);
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* Fejlec */
.site-header {
  position: sticky;
  top: 0;
  /* A .skip 30-as; a fejlec alatta, de a tartalom folott. */
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 26px;
  /* Teljes szelesseg: margo helyett padding. Margoval a ket szelso savban
     atlatszana a fejlec alatt elgordulo tartalom. */
  padding: 10px var(--gutter);
  background: var(--bg);
  /* Zold elvalaszto vonal helyett ugyanaz az arnyek, ami a kartyakon (Sandor
     2026-10-07). A token kozos: ha a kartya-arnyek valtozik, a fejlec koveti. */
  box-shadow: var(--header-shadow);
}

/* andabrowser.com: a marka jel + szoveges szovedjegy. A link nem alahuzott (az altalanos a-szabaly alahuzna,
   a res-szel egyutt), a jel es a szoveg kozti rest a gap adja, es fuggolegesen kozepre allnak. */
.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding-block: 4px;
  text-decoration: none;
}

.logo {
  display: block;
  width: auto;
  height: 20px;
}

.logo .lt {
  fill: var(--logo-ai);
}

.logo .lm {
  fill: var(--logo-accent);
}

.logo .ls {
  fill: none;
  stroke: var(--logo-ai);
}

/* A menu (nav + nyelvvalto) kozos burka: asztalon nem doboz, a ket gyereke kozvetlenul a fejlec soraban all;
   keskenyen ez a lebego panel (lent, a toresponti blokkban). */
.site-menu {
  display: contents;
}

.site-nav {
  display: flex;
  gap: 24px;
  margin-inline-start: auto;
}

/* Nav (Sandor 2026-10-07): alahuzas nelkul, csak a szin valt; nyugalomban --fg, hover --eyebrow, lenyomva --interactive-hover. */
.site-nav a {
  font-size: 14px;
  padding: 6px 0;
  white-space: nowrap;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--eyebrow);
}

.site-nav a:active {
  color: var(--interactive-hover);
}

.lang-group {
  display: flex;
  gap: 2px;
}

/* A nyelvvalto sima link ugyanarra a slugra a masik nyelven (nyelvenkenti statikus oldalak), JS nelkul is mukodik.
   A merete es a kepe a korabbi gombe: 38 x 44 px-es cel, 1 px atlatszo keret, kozepre igazitott felirat. */
.lang-group a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  min-width: 38px;
  min-height: 44px;
  padding: 6px;
  border: 1px solid transparent;
  text-decoration: none;
}

/* A navbar gombjain nincs keret, aktivan es hoverkor sem (Sandor 2026-10-07).
   Az aktiv nyelvet igy az also vonal es a felkover jeloli -- a fokusz-korvonal
   (a:focus-visible) nem keret, az marad: billentyuvel az az egyetlen jel. */
.lang-group a[aria-current='true'] {
  box-shadow: inset 0 -3px 0 var(--interactive);
  font-weight: 600;
}

.lang-group a:hover,
.menu-toggle:hover {
  background: var(--hover-surface);
}

/* Keskeny nezet: hamburger + lebego panel (Sandor 2026-10-23). A toresponthoz merve: a marka + az 5 link + a 3
   nyelv-gomb a leghosszabb (nemet) nyelven, a felkover aktiv linkkel 684.6 px tartalom + 2 gutter (4.6vw); ez 754
   px-tol fer el egy sorban. A +16 px tartalek a sorban is legalabb 16 px (a gutter a szelesseggel no): 772 px-tol
   asztali sor, alatta panel. */
@media (max-width: 771px) {
  .site-header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .brand {
    margin-inline-end: auto;
  }

  /* JS nelkul a menu a fejlecen belul, a marka alatt all, tordelve. */
  .site-menu {
    display: block;
    flex-basis: 100%;
  }

  .site-nav {
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
  }

  html.js .menu-toggle {
    display: inline-flex;
  }

  /* JS-sel lebego panel a ragados fejlec alatt: az oldal nem mozdul. A teteje az egyszinu elvalaszto (hatterkep:
     mindket motorban pontosan 2 eszkoz-pixel), az alja a viewport alja, belul gorgetheto. */
  html.js .site-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 2px 0 12px;
    background: var(--valaszto) top left / 100% 2px no-repeat, var(--bg);
    /* Nem a --header-shadow: annak az elmosasa nagyobb az eltolasanal, igy felfele a fejlec also soraira futna (a
       vonal-mero latta: egy idegen sor a valaszto folott). A clip-path Firefoxban a vonal elso sorat vagta le. */
    box-shadow: var(--menu-shadow);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html.js .site-menu:not(.open) {
    display: none;
  }

  html.js .site-nav {
    flex-direction: column;
    gap: 0;
  }

  /* Sorok: teljes szelesseg, 48 px, a gutterrel behuzva. A fokusz-jel befele (a panel gorgetese levagna a kulsot). */
  html.js .site-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--gutter);
    font-size: 17px;
  }

  html.js .site-nav a:focus-visible {
    outline-offset: -6px;
    box-shadow: inset 0 0 0 2px var(--interactive);
  }

  /* A harom nyelv a panel aljan, egy sorban; az aktiv jele a szokott also inset-sav. JS nelkul is (a menu ott a
     fejlecben all, tordelve). */
  .lang-group {
    gap: 4px;
  }

  html.js .lang-group {
    padding: 8px var(--gutter) 0;
  }

  .lang-group a {
    min-width: 48px;
    min-height: 48px;
    font-size: 15px;
  }
}

/* Szoveg helyett ikon (Sandor 2026-10-07). A 24px-es racs azert nem 22, mert
   24-en 1 racs-egyseg = 1 CSS px, tehat minden egesz DPR-en egesz eszkoz-pixelre
   esik: tiszta pixel-arany DPR1-en 97.9% a 22px 85.1%-aval szemben (a design-szal
   merese). A 44px-es erintesi cel valtozatlan. */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  border-color: transparent;
  color: var(--eyebrow);
}

.menu-icon {
  display: block;
  width: 24px;
  height: 24px;
}

/* A kozepso sav kek, a ket szelso zold -- ez a markajel sajat szerkezete: a
   logo harom idoma lt / lm / lt, vagyis zold / kek / zold. A nyiras a kozepso
   savot nem mozditja (dx=0 az y=12-n), tehat a kek pont a doles tengelyere esik.
   FIGYELEM: a .logo .lm FILL-t allit, ez STROKE-ot -- kulon szabaly kell. */
.menu-icon .lm {
  stroke: var(--logo-accent);
}

/* Nyugalomban a hamburger, nyitva a zaro X. Az aria-expanded a gombon ul
   (main.js), tehat ehhez nem kell uj JS. */
.menu-toggle .menu-icon-zar {
  display: none;
}

.menu-toggle[aria-expanded='true'] .menu-icon:not(.menu-icon-zar) {
  display: none;
}

.menu-toggle[aria-expanded='true'] .menu-icon-zar {
  display: block;
}

/* Tartalom */
main > * {
  margin-inline: var(--gutter);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 10%;
  align-items: center;
  min-height: 690px;
  padding-block: var(--space);
}

.hero-copy {
  min-width: 0;
}

.intro {
  font-size: clamp(18px, 1.6vw, 22px);
  max-width: 46ch;
  color: var(--muted);
}

.diagram {
  border: 1px solid var(--line);
  padding: 40px;
}

.diagram-number {
  display: block;
  margin-bottom: 28px;
  font-size: 12px;
  color: var(--muted);
}

.diagram h2 {
  font-size: 32px;
  line-height: 1.25;
}

.diagram ol {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

.diagram li {
  display: flex;
  gap: 18px;
  padding: 16px 0;
  font-size: 16px;
}

.diagram li > span:first-child {
  color: var(--muted);
  font-size: 12px;
  padding-top: 4px;
}

.diagram p {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 0;
}

.services,
.process,
.section-block {
  padding-block: var(--space);
}

.services {
  padding-bottom: calc(var(--space) / 2);
}

.process {
  padding-top: calc(var(--space) / 2);
}

/* Elvalaszto vonalak egy helyen. A .product sajat szabalyt kap, mert ket
   vonalat visel (felul es alul). */
.diagram li,
.services,
.section-block,
.development,
.stack-list li,
.contact-direct,
.contact-direct .company,
.cta-band,
.site-footer,
.footer-bottom {
  background-image: var(--valaszto);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: top left;
}

.section-head {
  max-width: 790px;
  margin-bottom: 48px;
}

/* A Projektek-bevezeto csak fejlecbol all: a fejlec also margoja ott a szekcio
   sajat also paddingjara ulne ra. */
.projects-intro .section-head {
  margin-bottom: 0;
}

.section-head p:last-child:not(.eyebrow) {
  color: var(--muted);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* Kartya a vonalas elvalasztas helyett (Sandor 2026-10-05). A toltes a zold
   (--line) halvany keverese a lap hatterevel, ezert mindket modban helyes, es a
   szoveg kontrasztja megmarad. Telt zold nem johet szoba: merve a halvany szoveg
   1,93:1 lenne vilagosban es 1,40 sotetben. */
.service {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-width: 0;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background: var(--card-bg);
  padding: 24px 22px 26px;
}

/* A sorszam az ikon MELLETT all, nem alatta (Sandor 2026-10-05). Ezert a
   .index egy sor: ikon + szam, es nem nyulik vegig a kartyan. */
.service .index,
.steps .index {
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* Szolgaltatas-ikon (design-szal, sajat rajz, 24-es racs, 2 egyseg vonal).
   A sorszam oszlopaban all, folotte. Monokrom: a kek ezen az oldalon azt jelenti,
   hogy "ez kattinthato", a kartya pedig nem az. Kivetel az AI-kartya, ott a zold
   a szerep-szin. A szin currentColorbol jon. */
.service .svc-icon {
  display: block;
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--fg);
}

/* A folyamat harom lepese ugyanazt a kezelest kapja, mint a szolgaltatasok:
   az ikon a sorszam folott all, monokromban; az AI-lepes zold. */
.steps .svc-icon {
  display: block;
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--fg);
}

/* A link ne nyuljon ki a racs-oszlop szelessegere (kulonben a kattinthato terulet is). */
.service > .text-link {
  justify-self: start;
}

.service p {
  font-size: 17px;
  color: var(--muted);
}

.service h3 {
  max-width: 22ch;
}

.service .summary {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Nyithato reszlet: nativ disclosure, kenyelmes erintesi cellal. */
.detail {
  font-size: 15px;
}

.detail summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  color: var(--fg);
  list-style: none;
}

.detail summary::-webkit-details-marker {
  display: none;
}

.detail summary::before {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--interactive);
  border-bottom: 2px solid var(--interactive);
  transform: rotate(45deg) translate(-2px, -2px);
}

.detail[open] summary::before {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.detail summary:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.detail summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 5px;
  box-shadow: 0 0 0 2px var(--interactive);
}

.detail p {
  margin: 4px 0 12px;
  color: var(--muted);
}

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.steps li {
  min-width: 0;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background: var(--card-bg);
  padding: 24px 22px 26px;
}

.steps p {
  font-size: 17px;
  color: var(--muted);
}

.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px 7%;
  padding-block: 64px;
  background-image: var(--valaszto), var(--valaszto);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: top left, bottom left;
}

/* Ket termek-szekcio egymas alatt: az elso also es a masodik felso vonala NEM esik ugyanarra
   a ket pixelre -- a ket elem nem fedi egymast, a hatterkepeik szomszedos sorokra kerulnek.
   Merve mindket motorban: a masodik felso vonalaval 4 festett sor lenne (a keretes regi
   valtozatban a kivetel-szabaly miatt 1 volt). Ezert a masodik csak az alsot viseli. A meret
   es az ismetles az alapszabaly egy-egy erteke, ami egy retegre is ervenyes. */
.product + .product {
  background-image: var(--valaszto);
  background-position: bottom left;
}

.product-copy {
  min-width: 0;
}

.product-copy > p {
  color: var(--muted);
}

.product-shot {
  min-width: 0;
  align-self: center;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.product-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 899;
  /* A felvetel sajat hatterszine: toltes elott ez foglalja a helyet, ne villanjon. */
  background: #303842;
}

.product-shot figcaption {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.product-shot-page {
  margin-block: 0 var(--space);
}

.development {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding-top: 24px;
  font-size: 15px;
}

.development p {
  max-width: 70ch;
  margin: 0;
}

/* Cegblokk: andavision.com nagy, alatta kicsi a nev, a cim a nevnel kicsit nagyobb. */
.company p {
  margin: 0;
}

.company .wordmark {
  font-size: clamp(30px, 3.8vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.06em;
  margin-bottom: 16px;
}

.company .owner {
  font-size: 12px;
  margin-bottom: 6px;
}

.company .address {
  font-size: 15px;
  line-height: 1.5;
}

/* Jogi oldalak: egy hasab, olvashato sorhossz. */
.legal-body {
  max-width: 68ch;
  padding-bottom: var(--space);
}

.legal-body h2 {
  font-size: clamp(24px, 2.2vw, 32px);
  margin-top: 40px;
  margin-bottom: 12px;
}

.legal-body p {
  margin-bottom: 12px;
}

.legal-body .address {
  font-size: 1rem;
}

.legal-body > p:last-child {
  margin-top: 32px;
  font-size: 15px;
}

/* Technologia-lista: fonevi felsorolas, nem kartya. */
.stack-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
  max-width: 70ch;
  font-size: 17px;
}

.stack-list li {
  padding-top: 16px;
}

.future {
  margin-top: calc(var(--space) / 2);
}

/* Ideiglenes kephely: jol lathatoan nem vegleges tartalom. A kep beerkezesekor
   a figure helyere <img> kerul, ez a szabaly pedig torolheto. */
/* AI-adatut (design-szal, web/abrak/adatut.css). A KERET hordozza az allitast:
   a harom allomas belul van, kivul nincs semmi -- se felho-ikon, se kifele
   mutato nyil. A keretet ezert nem szabad elhagyni. */
.av-adatut {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 22px 22px;
  position: relative;
}

/* A keret cimkeje a vonalon ul: ami belul van, az a hazon belul marad. */
.av-adatut-cim {
  position: absolute;
  top: 0;
  left: 22px;
  transform: translateY(-50%);
  background: var(--bg);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.av-adatut ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  align-items: start;
}

.av-allomas {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: start;
}

.av-allomas-jel {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--fg);
}

.av-allomas-jel .svc-icon {
  width: 28px;
  height: 28px;
  display: block;
}

.av-allomas h3 {
  margin: 4px 0 2px;
  font-size: 17px;
  font-weight: 600;
}

.av-allomas p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* Nyil: telefonon lefele mutat, asztalon jobbra. */
.av-nyil {
  display: grid;
  place-items: center;
  color: var(--control-border);
  height: 26px;
}

.av-nyil .abra-jel {
  width: 14px;
  height: 28px;
  transform: rotate(90deg);
}

@media (min-width: 760px) {
  .av-adatut ol {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 16px;
    align-items: start;
  }

  .av-allomas {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .av-nyil {
    height: 48px;
    align-self: start;
  }

  .av-nyil .abra-jel {
    width: 16px;
    height: 34px;
    transform: none;
  }
}

/* Kephely: kep nelkul nem latszik (Sandor 2026-10-23: ne legyen felkesz latvany); amint kep vagy video kerul bele,
   magatol megjelenik. A regi szaggatott helyorzo-keret es a belso nev-felirat (data-slot) megszunt. */
.media-slot {
  margin: 16px 0 0;
}

.media-slot:empty {
  display: none;
}

.media-slot img,
.media-slot video {
  display: block;
  width: 100%;
  height: auto;
}

.media-slot figcaption {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}

/* Onallo (nem kartyan beluli) kephely: ne uralja a szekciot. */
.section-block > .media-slot,
.page-hero + .media-slot {
  max-width: 900px;
  margin-inline: auto;
}

/* Aloldal-fejlec alatti kephely: ugyanaz a hely, mint a Dymite felveteleje. */
.page-hero + .media-slot {
  margin-bottom: var(--space);
}

.slot-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 800px) {
  .slot-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Kapcsolat */
.contact {
  padding-block: 64px 90px;
}

.contact h2 {
  font-size: clamp(36px, 5vw, 74px);
  max-width: 19ch;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

.contact-form {
  min-width: 0;
}

.form-intro {
  color: var(--muted);
}

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 20px;
}

.field {
  min-width: 0;
}

.field.wide {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--control-border);
  border-radius: 0;
  background: var(--form-bg);
  color: var(--fg);
  font: 17px/1.5 var(--sans);
}

.field textarea {
  resize: vertical;
  min-height: 140px;
}

.field input:hover,
.field textarea:hover {
  border-color: var(--fg);
}

/* Hibas mezo: vastag monokrom keret, felkialtojel, szoveges magyarazat. */
.field [aria-invalid='true'] {
  border: 2px solid var(--fg);
  padding: 11px;
}

.field-error {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.field-error > span:first-child {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  font-weight: 600;
}

/* Csapdamezo: a latogatonak lathatatlan, a robot kitolti. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.submit {
  margin-top: 26px;
}

.submit[disabled] {
  cursor: progress;
  opacity: 0.7;
}

.form-status {
  margin: 20px 0;
  padding: 18px;
  border: 2px solid var(--fg);
  background: var(--surface);
  scroll-margin-top: 28px;
}

.form-status strong {
  font-size: 18px;
}

.form-status p {
  margin: 8px 0 0;
  font-size: 16px;
}

.form-status .text-link {
  margin-top: 12px;
}

.form-status[data-state='success'] {
  border-left: 6px solid var(--interactive);
}

.contact-direct {
  min-width: 0;
  padding-top: 24px;
}

.contact-direct .email {
  display: inline-block;
  margin-bottom: 30px;
  font-size: clamp(20px, 2vw, 29px);
  white-space: nowrap;
}

.contact-direct > p:not(.eyebrow) {
  font-size: 17px;
  color: var(--muted);
}

.contact-direct .company {
  margin-top: 32px;
  padding-top: 24px;
}

.contact-direct .company .wordmark {
  font-size: 36px;
}

/* Aloldalak */
.page-hero {
  padding-block: var(--space) calc(var(--space) / 2);
  max-width: 1100px;
}

.page-hero h1 {
  max-width: 20ch;
  font-size: clamp(40px, 5vw, 76px);
}

.page-hero.legal h1 {
  max-width: none;
}

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

section.cards {
  padding-bottom: var(--space);
}

.card {
  min-width: 0;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background: var(--card-bg);
  padding: 24px 22px 26px;
}

.card h2 {
  font-size: clamp(26px, 2.4vw, 34px);
}

.card p {
  font-size: 17px;
  color: var(--muted);
}

/* ------------------------------------------------------------------------------------------------
   andabrowser.com P0 komponensek. A kartya-rendszer elve: toltes + arnyek, nincs keret; kiemeles
   sullyal, nem szinnel. Az orokolt toresek (.cards: <=800 px 2 oszlop, <=520 px 1) ezekre is hatnak. */

/* Hero kepernyokeppel: desktopon szoveg + kep ket oszlopban, a kep a szelesebb. <=800 px-en az orokolt
   .hero szabaly egy oszlopra valt, a kep a CTA ALA kerul (a DOM-sorrend miatt). */
.hero--shot {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 6%;
}

.hero-platforms {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.hero-shot {
  display: block;
  min-width: 0;
}

.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* App-ablak keret CSS-bol (Design 2. kor, .ablak): kartya-toltes + arnyek, halvany cimsav harom ponttal. Nulla bajt,
   nincs uj keres; a kep a keretben. */
.ablak {
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background-color: var(--card-bg);
  padding: 10px;
}

.ablak-sav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px 10px;
}

.pont {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--control-border);
  opacity: 0.5;
}

.ablak-cim {
  flex: 1;
  height: 10px;
  margin-left: 10px;
  border-radius: 5px;
  background-color: var(--control-border);
  opacity: 0.25;
}

/* A telefon-valtozat (Design .telefon): 800 px alatt az allo Android-kep latszik, cimsav nelkul, keskeny kozepre
   allitott keretben (240 px kep + 2 x 10 px keret); teljes szelessegben 700 px-nel magasabb lenne. */
@media (max-width: 799px) {
  .hero-shot {
    justify-self: center;
    width: min(100%, 260px);
  }

  .ablak-sav {
    display: none;
  }
}

/* Kezdolap: kiemelt sav a hero alatt (Sandor 2026-10-23). A kartya toltese es arnyeka, teljes tartalom-szelesseg,
   a nagy h2-meret (a .card h2 kisebb merete itt felulirva). Most csak szoveg, korlatozott sorhosszal, igy kep nelkul
   is kesz; a kesobbi rovid video masodik oszlopkent kerul melle. */
.highlight {
  margin-bottom: calc(var(--space) / 2);
  padding: clamp(28px, 4vw, 56px);
}

.highlight .eyebrow {
  margin-bottom: 16px;
}

.highlight h2 {
  font-size: clamp(30px, 3.5vw, 52px);
  margin-bottom: 20px;
}

.highlight p:not(.eyebrow) {
  max-width: 60ch;
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--fg);
}

.highlight .highlight-link {
  margin: 20px 0 0;
}

/* Szeles kartyan egy hasabban a jobb fele uresen maradna: a cim balra, a szoveg es a link jobbra kerul. */
@media (min-width: 1000px) {
  .highlight {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 96px);
    align-items: start;
  }

  .highlight .eyebrow {
    grid-column: 1 / -1;
  }

  .highlight h2 {
    grid-column: 1;
    grid-row: 2 / span 2;
    margin-bottom: 0;
  }

  .highlight p:not(.eyebrow) {
    grid-column: 2;
  }
}

/* 404: a kezdolap- es a sugo-link egy sorban. */
.notfound-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* Bizalmi sor: egy mondat + link, sullyal kiemelve. */
.trust {
  padding-bottom: calc(var(--space) / 2);
}

.trust p {
  max-width: none;
  font-size: 18px;
  font-weight: 600;
}

.features,
.download-summary {
  padding-bottom: var(--space);
}

.features h2,
.download-summary h2 {
  margin-bottom: 28px;
}

.features .cards + .cards {
  margin-top: 20px;
}

/* Harom oszlopos kartya-racs: 3 -> 2 (<=800 px) -> 1 (<=520 px), az orokolt .cards toresekkel. */
.cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* A ket kisebb kartya (palettak, privat ablak). */
.card--kicsi {
  padding: 18px 20px 20px;
}

.card--kicsi h3 {
  font-size: 20px;
}

/* Letoltes-osszefoglalo kartyaja a fooldalon. */
.mini-card {
  min-width: 0;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background-color: var(--card-bg);
  padding: 18px 20px 20px;
}

.mini-card h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.mini-card p {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Figyelmeztetes / megjegyzes (Design 2. kor, .figyelem): bal oldali --line sav, nem riaszto szin, nem rejtett. */
.note {
  border-left: 3px solid var(--line);
  padding: 10px 0 10px 14px;
  color: var(--fg);
  font-size: 15px;
  font-weight: 500;
}

/* SHA256 es tarsai: monospace, barhol torheto (64 jel 360 px-en is), egy kattintasra kijelolheto JS nelkul is. */
.hash {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 14px;
  overflow-wrap: anywhere;
  user-select: all;
}

/* Letoltes oldal: ugro-linkek, platform-kartyak (Design 2. kor: asztalon egymas mellett), kiadasi mezok. */
.jump {
  margin-top: 24px;
}

.jump .tag {
  margin: 0;
}

.jump .link-list {
  margin-top: 8px;
}

.platforms {
  padding-bottom: calc(var(--space) / 2);
}

/* 640 px alatt a harom platform-kartya egy hasabban: ket ~223 px-es hasabban (519x480) a szoveg nagyon tordelt, es a
   rovidebb kartya alja ures maradt. (.cards.platforms: a fekvo, alacsony nezet ketoszlopos .cards-szabalyat is veri.) */
@media (max-width: 639px) {
  .cards.platforms {
    grid-template-columns: minmax(0, 1fr);
  }
}

.platform h3 {
  font-size: 18px;
  margin: 18px 0 6px;
}

.platform p {
  font-size: 16px;
}

/* A cimke-oszlop legfeljebb a szelesseg fele (fit-content): auto-val a hosszu cimke ("SHA256 ellenorzo-osszeg")
   keskeny kartyan 20 px-et hagyott az erteknek, es az "Android 8.0+" kilogott (kartya-mero, 519x480). */
.release {
  display: grid;
  grid-template-columns: fit-content(50%) minmax(0, 1fr);
  gap: 4px 12px;
  margin: 12px 0 16px;
  font-size: 14px;
}

.release dt {
  color: var(--muted);
}

.release dd {
  margin: 0;
  min-width: 0;
}

/* Sugo: kerdes-valasz, szamozott lepesek, parancsok. */
.faq {
  margin-bottom: 8px;
}

.faq .detail {
  font-size: 17px;
}

.lepesek {
  margin: 0 0 16px;
  padding-left: 1.4em;
}

.lepesek li {
  margin-bottom: 8px;
}

/* Felsorolas a szovegben (adatvedelem: a bongeszo kapcsolatai). Sajat jelolo a --muted szinbol (nem a UA disc-je),
   a behuzas 20 px, a sorkoz a bekezdeseke (12 px). A potty kozepe az elso sor kozepen (18 px x 1.55 / 2). */
.lista {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.lista li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
}

.lista li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: calc(0.775em - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--muted);
}

pre,
code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 14px;
}

/* A parancs tordelodik: a 390-es nezetben a 336 px-es parancs a 311 px-es dobozban csak oldalra gorgetve latszott
   vegig, pedig ezt kell masolni. A pre-wrap a sortoreseket es a szokozoket megtartja, az anywhere a hosszu szot is
   tori; a masolt szoveg valtozatlan (a tores csak megjelenites). */
pre {
  margin: 8px 0 16px;
  padding: 12px 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 8px;
  background-color: var(--surface);
}

/* Jogi es sugo-szoveg alcimei (adatvedelem: a bongeszo / a weboldal alatt). */
.legal-body h3 {
  font-size: 20px;
  margin: 24px 0 8px;
}

/* Fooldal: GYIK a letoltes-osszefoglalo alatt. */
.home-faq {
  max-width: 68ch;
  padding-bottom: var(--space);
}

.home-faq h2 {
  margin-bottom: 16px;
}

.home-faq .detail {
  font-size: 17px;
}

/* Jellemzok oldal (/features/): szakaszonkent cim + bevezeto + tetelek (nev, platform-cimke, mondat) + kep-helyorzo. */
.jellemzo-szakasz {
  max-width: 72ch;
  padding-bottom: calc(var(--space) / 2);
}

.jellemzo-szakasz h2 {
  font-size: clamp(24px, 2.2vw, 32px);
  margin: 0 0 8px;
}

.jellemzo-lead {
  color: var(--muted);
  margin-bottom: 20px;
}

/* Szakaszon beluli alcim (Anda Security > Tartalomszures): kisebb a szakaszcimnel, a ket csoport kozti levego jelzi a
   hatart. */
.jellemzo-alcim {
  font-size: clamp(19px, 1.6vw, 22px);
  margin: 8px 0 12px;
}

.jellemzok {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.jellemzok li {
  margin-bottom: 16px;
}

.jellemzok p {
  margin: 0;
}

/* Szeles nezetben egy hasabban a lap jobb fele uresen maradt: a tetelek ket hasabban (CSS columns), a szakaszcim es a
   bevezeto folotte. Nem racs: soronkenti racsban egy hosszu tetel melle nagy hezag jutott (1280-on ~300 px); a hasabok
   kiegyenlitodnek, az olvasasi sorrend lefele, aztan jobbra. */
@media (min-width: 1000px) {
  /* A szakasz egy hasabban 72ch-ra volt korlatozva; ket hasabbal a teljes tartalom-szelesseg (a bevezeto p-je 65ch). */
  .jellemzo-szakasz {
    max-width: none;
  }

  .jellemzok {
    column-count: 2;
    column-gap: clamp(40px, 5vw, 96px);
  }

  .jellemzok li {
    break-inside: avoid;
  }
}

/* Nev + cimke-csoport: ha a csoport nem fer a nev melle, egyben a nev ala kerul; cimken belul nincs tores (.tag nowrap). */
.jellemzo-nev {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.cimkek {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
}

.jellemzo-nev .tag {
  color: var(--muted);
  font-size: 11px;
}

/* "Asztalon: kovetkezo verzio" (a desktop 0100-ig): ugyanaz a .tag, halvanyabban -- vekonyabb betu, a platform-cimkenel
   halvanyabb szin (90%: merve 4.76:1 vilagosban, 7.0 sotetben; a 86% mar 4.43 lenne). A kiadaskor a
   features.tag.soon cimkek egyutt kivehetok. */
.jellemzo-nev .tag--soon {
  font-weight: 400;
  color: color-mix(in oklab, var(--muted) 90%, var(--bg));
}

.jellemzo-szakasz .media-slot {
  max-width: 480px;
}

.jellemzo-cta {
  padding-bottom: var(--space);
}

/* Fooldal: link a Jellemzokre az "Amit tud" kartyai alatt. */
.features-more {
  margin: 20px 0 0;
}

/* Kezdolap: az alapito uzenete (kartya). A kartya ES a szoveg a tartalom teljes szelesseget tolti ki (mint a bizalmi
   sor es a kartya-racs; Sandor 2026-10-19: a sorhossz asztalon hosszu, ez az o dontese). A cim asztalon egy sorban
   (az orokolt h2 22ch-s korlatja itt ki; keskenyen a balance tordel). Szemelyes level: a szoveg a torzs-szinben es
   -mereten (a .card p es a .detail p halvany, kisebb betuje itt felulirva); az alairas kisebb, jobbra zart. */
.founder {
  margin-bottom: var(--space);
  padding: 28px 28px 22px;
}

.founder h2 {
  max-width: none;
  font-size: clamp(26px, 2.6vw, 36px);
  margin-bottom: 14px;
}

.founder p,
.founder .detail p {
  max-width: none;
  margin: 0 0 14px;
  font-size: 17px;
  color: var(--fg);
}

.founder .detail {
  font-size: 17px;
}

.founder .signature {
  margin: 18px 0 6px;
  text-align: right;
  font-size: 15px;
  color: var(--muted);
}

/* A nav aktiv eleme (aria-current a main.js-bol): sullyal, nem szinnel. */
.site-nav a[aria-current='page'] {
  color: var(--fg);
  font-weight: 600;
}

/* Arculati szalag (design-szal, web/grafikak/szalag.css). Csempezett CSS-hatter,
   nem pozicionalt reteg: a csempe fix 260 px, ezert a savok vastagsaga minden
   blokkmeretnel azonos -- a 0,34:1 es a 4,61:1 arany egyarant helyes marad.
   Nulla plusz keres. A savok vastagsaga 26/14/5 px, vagyis a jel 58/31/11%-a,
   ugyanaz a ritmus, mint a cimke-jelen. */
.av-szalag {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cline x1='94' y1='-60' x2='-286' y2='320' stroke='%231980E6' stroke-width='26' opacity='0.04'/%3E%3Cline x1='354' y1='-60' x2='-26' y2='320' stroke='%231980E6' stroke-width='26' opacity='0.04'/%3E%3Cline x1='188' y1='-60' x2='-192' y2='320' stroke='%2360B007' stroke-width='14' opacity='0.045'/%3E%3Cline x1='448' y1='-60' x2='68' y2='320' stroke='%2360B007' stroke-width='14' opacity='0.045'/%3E%3Cline x1='256' y1='-60' x2='-124' y2='320' stroke='%231980E6' stroke-width='5' opacity='0.03'/%3E%3Cline x1='516' y1='-60' x2='136' y2='320' stroke='%231980E6' stroke-width='5' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 260px 260px;
  background-position: right top;
}

/* Sotet mod: ugyanaz a rajz, 0,6-os fedettseggel. Merve a valodi szoveg alatt:
   azonos fedettseg sotet hatteren erosebbnek latszik, ezert kell kulon keszlet.
   A kapcsolo szandekosan csak a medialekerdezes -- az oldal nem hasznal
   data-theme attributumot. */
@media (prefers-color-scheme: dark) {
  .av-szalag {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cline x1='94' y1='-60' x2='-286' y2='320' stroke='%231980E6' stroke-width='26' opacity='0.024'/%3E%3Cline x1='354' y1='-60' x2='-26' y2='320' stroke='%231980E6' stroke-width='26' opacity='0.024'/%3E%3Cline x1='188' y1='-60' x2='-192' y2='320' stroke='%2360B007' stroke-width='14' opacity='0.027'/%3E%3Cline x1='448' y1='-60' x2='68' y2='320' stroke='%2360B007' stroke-width='14' opacity='0.027'/%3E%3Cline x1='256' y1='-60' x2='-124' y2='320' stroke='%231980E6' stroke-width='5' opacity='0.018'/%3E%3Cline x1='516' y1='-60' x2='136' y2='320' stroke='%231980E6' stroke-width='5' opacity='0.018'/%3E%3C/svg%3E");
  }
}

@media (max-width: 640px) {
  /* Telefonon kisebb csempe, hogy a leptek ne higuljon fel. */
  .av-szalag {
    background-size: 190px 190px;
  }
}

.boundary {
  padding: 48px;
  margin-bottom: var(--space);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  /* background-color, NEM a background rovidites: a rovidites nullazna a
     hattekepet, tehat kiutne a ra tett .av-szalag csempet. */
  background-color: var(--card-bg);
}

.boundary > :last-child {
  margin-bottom: 0;
}

.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.cta-band {
  padding-block: 64px 90px;
}

.cta-band h2 {
  font-size: clamp(36px, 5vw, 74px);
  max-width: 19ch;
}

.cta-band .email {
  font-size: 18px;
}

/* Lablec */
.site-footer {
  margin-inline: var(--gutter);
  padding-block: 48px 24px;
}

.footer-top {
  display: flex;
  gap: 32px;
  justify-content: space-between;
  margin-bottom: 50px;
}

.footer-note {
  font-size: 15px;
  color: var(--muted);
}

/* Nyelv-sor a lablecben (a nyelvek a sajat nevukon): menu nyitasa nelkul is felfedezheto. Az aktiv nyelv nem link-
   szinu, hanem a szoveg szine, felkoveren (mint a nav aktiv eleme). */
.footer-lang {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 16px;
  font-size: 15px;
}

.site-footer .footer-lang a[aria-current='true'] {
  color: var(--fg);
  font-weight: 600;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 24px;
  font-size: 12px;
  color: var(--muted);
}

.footer-bottom p {
  margin: 0;
}

/* A lablec linksora tordelodik: a 6 link (+ Jellemzok) 360-384 px-en egy sorban kilogna (merve: 8-72 px). */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/* Az andavision.com-tol orokolt kapcsolat-szabalyok (ezen az oldalon nincs .contact-*; a takaritas kulon kor). */
@media (max-width: 1150px) {
  .contact-layout {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .contact-direct .email {
    font-size: 20px;
  }

  .contact-direct .company .wordmark {
    font-size: 30px;
  }
}

@media (max-width: 1100px) {
  .hero {
    gap: 6%;
    min-height: 600px;
  }

  .diagram {
    padding: 28px;
  }

  .service-grid {
    gap: 24px;
  }
}

@media (max-width: 800px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    gap: 42px;
    padding-block: 56px;
  }

  .hero h1 {
    max-width: 20ch;
  }

  .intro {
    max-width: 55ch;
  }

  .diagram {
    padding: 20px;
  }

  .diagram-number {
    margin-bottom: 14px;
  }

  .diagram h2 {
    font-size: 24px;
    max-width: 28ch;
  }

  .diagram p {
    font-size: 14px;
  }

  .diagram ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .diagram li {
    display: block;
    padding: 16px 0;
  }

  .diagram li > span:first-child {
    display: block;
    margin-bottom: 8px;
  }

  .service-grid,
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .product {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .development {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .development p:not(.tag) {
    grid-column: 1;
  }

  .steps {
    gap: 24px;
  }

  .steps h3 {
    font-size: 26px;
  }

  .steps p {
    font-size: 16px;
  }

  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

@media (max-width: 520px) {
  body {
    font-size: 17px;
  }

  :root {
    --header-h: 52px;
  }

  .site-header {
    column-gap: 8px;
    padding-block: 4px;
  }

  .brand {
    margin-inline-end: auto;
  }

  .logo {
    height: 18px;
  }

  .hero {
    padding-block: 44px;
    gap: 36px;
  }

  .hero h1 {
    font-size: 40px;
    max-width: 20ch;
  }

  .hero .eyebrow {
    font-size: 10px;
    letter-spacing: 0.1em;
    margin-bottom: 18px;
  }

  .intro {
    font-size: 18px;
  }

  .actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-top: 26px;
  }

  .button {
    font-size: 15px;
    padding: 13px 16px;
    gap: 18px;
  }

  .diagram {
    padding: 24px;
  }

  .diagram {
    padding: 16px;
  }

  .diagram ol {
    gap: 10px;
    margin: 14px 0;
  }

  .diagram li {
    font-size: 14px;
    padding: 10px 0;
  }

  .diagram h2 {
    font-size: 22px;
  }

  .service-grid,
  .cards,
  .steps,
  .fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .section-head {
    margin-bottom: 30px;
  }

  /* Csak a belso tavolsag valtozik: az oszlop-felosztas a 2026-10-05-os
     ikon+sorszam valtozas ota az alapszabalyban egy oszlop. */
  .service {
    padding-bottom: 20px;
  }

  .service .index {
    margin-bottom: 20px;
  }

  .product {
    padding-block: 48px;
  }

  .product-shot {
    padding: 8px;
  }

  .product-shot figcaption {
    font-size: 11px;
  }

  .contact,
  .cta-band {
    padding-block: 40px;
  }

  .contact-direct .email {
    font-size: 20px;
  }

  .company .wordmark,
  .contact-direct .company .wordmark {
    font-size: 34px;
  }

  .boundary {
    padding: 24px;
  }

  .footer-top {
    flex-direction: column;
  }

  .footer-bottom {
    gap: 20px;
  }
}

/* Keves magassag: a terkoz, a dekoracio es a hero-betumeret csokken. A tartalom nem vesz el:
   a szolgaltatasok, a reszletek es az urlap valtozatlanul elerhetok. Cel: 844x390-en a fejlec
   es a hero egyutt kb. 360 CSS px, a fo CTA gorgetes nelkul lathato. */
@media (max-height: 500px) {
  :root {
    --space: 40px;
    --header-h: 52px;
  }

  .site-header {
    padding-block: 4px;
    gap: 12px;
  }

  .logo {
    height: 17px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 0;
    padding-block: 16px 24px;
  }

  /* A nagy folyamatabra helyet a szoveg es az akcio kapja. */
  .hero .diagram {
    display: none;
  }

  .hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 0 28px;
    align-items: start;
  }

  .hero-copy .eyebrow {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 10px;
  }

  .hero-copy h1 {
    grid-column: 1;
    grid-row: 2;
    font-size: clamp(28px, 4.6vw, 40px);
    max-width: 20ch;
    margin-bottom: 0;
  }

  .hero-copy .intro {
    grid-column: 2;
    grid-row: 1 / 3;
    font-size: 16px;
  }

  .hero-copy .actions {
    grid-column: 2;
    grid-row: 3;
    margin-top: 14px;
  }

  .section-head {
    margin-bottom: 24px;
  }

  .services,
  .process,
  .section-block,
  .contact,
  .cta-band,
  .product {
    padding-block: 32px;
  }

  .boundary {
    padding: 24px;
    margin-bottom: 32px;
  }

  .site-footer {
    padding-block: 32px 16px;
  }

  .footer-top {
    margin-bottom: 24px;
  }
}

/* Fekvo telefon: a szolgaltatasok es a lepesek ket hasabban, rovid sorokkal. */
@media (max-width: 900px) and (max-height: 500px) {
  .service-grid,
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
  }

  /* Fekvoben a MAGASSAG szuk, nem a szelesseg: csak a fuggoleges padding
     csokken. A vizszintes nulla a kartya-atallas (2026-10-05) elotti, vonalas
     elrendezesbol maradt itt -- kartyan a szoveg igy a kartya szelere ert ki. */
  .service {
    padding: 16px 22px 18px;
  }

  .service .index {
    margin-bottom: 12px;
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}