/* K4 · A pötty – drawn at 1440; 1024–1439 is zoomed proportionally (k4.js); below 1024 the 390 layout. */
:root {
  --k: 1;
  --ink: #15201A; --ink2: #3B4640; --deep: #00432D; --dft: #006745; --teal: #0E6B6B; --layer: #2F8F63; --gond: #58B987; --mint: #8FD4B0; --tint: #E6F4EC; --ttint: #E3F1F1; --grey: #F4F2F3; --blue: #285A8F; --btint: #EEF3F9;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --disp: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", sans-serif;
  --E: cubic-bezier(.15,.85,.35,1); --X: cubic-bezier(.4,0,.9,.55); --S: cubic-bezier(.32,.72,0,1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FFFFFF; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--dft); }
a:hover { color: var(--deep); }
button { font-family: var(--sans); }
input::placeholder { color: var(--ink2); }
h1, h2 { margin: 0; font-family: var(--disp); font-weight: 700; }
h2 { font-size: 64px; line-height: 1; letter-spacing: -.035em; }
p { margin: 0; }
.pg { overflow-x: clip; }
.in { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 64px; }
section, footer { position: relative; }

/* focus: visible rings that follow the pill/circle shape; cards draw a G2 ring in their SVG */
:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; }
.hero :focus-visible, .hib :focus-visible, .ft :focus-visible, .prod :focus-visible { outline-color: var(--mint); }

/* shared buttons (pills stay for buttons, filters, search) */
.btn { display: inline-block; align-self: flex-start; padding: 17px 26px; border-radius: 999px; font-size: 17px; font-weight: 600; line-height: normal; text-decoration: none; }
.btn.dk { background: var(--deep); color: #FFFFFF; }
.btn.dk:hover { color: #FFFFFF; background: var(--dft); }
.btn.wh { background: #FFFFFF; color: var(--deep); }
.btn.wh:hover { color: var(--deep); background: var(--tint); }
.btn.ol { padding: 15px 24px; border: 2px solid var(--mint); color: #FFFFFF; }
.btn.ol:hover { color: #FFFFFF; background: rgba(255,255,255,.1); }
.brow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pill { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--deep); border-radius: 999px; padding: 11px 17px; background: transparent; color: var(--deep); font: 600 17px/1 var(--sans); cursor: pointer; }
.pill.on { background: var(--deep); color: #FFFFFF; }
.pill > i { width: 12px; height: 12px; border-radius: 999px; background: var(--dot); }
.pill.on > i { background: #FFFFFF; }
.pill > span { font-weight: 500; }

/* ---------- hero ---------- */
.hero { height: 900px; overflow: hidden; background: var(--deep); color: #FFFFFF; }
.hero > .in { height: 100%; }
.hd { position: absolute; left: 0; right: 0; top: 0; height: 88px; padding: 0 64px; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 20px; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.logo { height: 34px; width: auto; display: block; }
.dv { width: 1px; height: 30px; background: rgba(255,255,255,.4); }
.bn { font-size: 18px; font-weight: 700; }
.nav { display: flex; gap: 30px; font-size: 16px; font-weight: 500; margin-left: auto; }
.nav a { color: inherit; text-decoration: none; }
.nav a:hover { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.nav a[aria-current] { font-weight: 700; }
.sel { margin-left: 20px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border-radius: 999px; background: #FFFFFF; font-size: 16px; font-weight: 600; color: var(--deep); text-decoration: none; }
.sel span { min-width: 26px; height: 26px; border-radius: 999px; background: var(--tint); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.menu, .mnav { display: none; }
.hl { position: absolute; left: 64px; top: 150px; width: 600px; display: flex; flex-direction: column; gap: 30px; }
.aud { align-self: flex-start; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.12); }
.aud button { display: flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 8px 20px 8px 10px; background: transparent; color: #FFFFFF; font: 600 17px/1 var(--sans); cursor: pointer; }
.aud button.on { background: #FFFFFF; color: var(--deep); }
.aud .ai { width: 26px; height: 26px; flex: none; display: block; }
.hero h1 { font-size: 96px; line-height: .94; letter-spacing: -.04em; }
.hero .hl > p { font-size: 22px; line-height: 1.45; max-width: 540px; text-wrap: pretty; }
.srch { position: relative; display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 8px 0 24px; border-radius: 999px; background: #FFFFFF; max-width: 600px; }
.srch svg { flex: none; }
.srch input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: 400 17px/1 var(--sans); color: var(--ink); padding: 0 8px; }
.srch button { flex: none; padding: 15px 22px; border: 0; border-radius: 999px; background: var(--dft); color: #FFFFFF; font: 600 17px/1.2 var(--sans); cursor: pointer; }
.srch button:hover { background: var(--deep); }
.srch:focus-within { outline: 3px solid var(--mint); outline-offset: 3px; }
.srch input:focus-visible { outline: none; }
.qhint { position: absolute; left: 24px; top: 76px; font-size: 15px; font-weight: 600; color: var(--mint); white-space: nowrap; }
.hf { position: absolute; left: 760px; top: 160px; width: 600px; height: 600px; }
.hdots { position: absolute; inset: 0; }
.hdots i { position: absolute; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 999px; will-change: transform; }
.pre .hdots { visibility: hidden; }
.hcap { position: absolute; left: 760px; width: 600px; top: 745px; text-align: center; font-size: 17px; font-weight: 600; color: var(--mint); }

/* ---------- merge (Összeolvadás) ---------- */
.merge { background: var(--tint); color: var(--deep); padding: 100px 0 90px; }
.mtop { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.mpick { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; }
.mpick button { width: 46px; height: 46px; border-radius: 999px; border: 1.5px solid var(--deep); background: transparent; color: var(--deep); font: 700 16px/1 var(--sans); cursor: pointer; flex: none; }
.mpick button.on { background: var(--deep); color: #FFFFFF; }
.stage { position: relative; height: 440px; margin-top: 40px; }
.lk { position: absolute; left: 0; top: 40px; font-size: 22px; font-weight: 700; }
.mresp i { position: absolute; top: 150px; width: 56px; height: 56px; margin-left: -28px; border-radius: 999px; background: var(--layer); }
.mtx { position: absolute; left: 0; top: 250px; max-width: 520px; font-size: 17px; line-height: 1.5; color: var(--ink); }
.lv { position: absolute; left: 760px; top: 40px; font-size: 22px; font-weight: 700; color: var(--blue); }
.ring { position: absolute; left: 820px; top: 96px; width: 300px; height: 300px; border-radius: 999px; border: 2px dashed var(--blue); }
.disc { position: absolute; left: 850px; top: 126px; width: 240px; height: 240px; border-radius: 999px; background: var(--blue); color: #FFFFFF; display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; font-size: 17px; font-weight: 700; line-height: 1.35; }
.mghost i { position: absolute; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 999px; background: var(--layer); }
.mnote { position: absolute; left: 1140px; top: 180px; width: 172px; font-size: 17px; line-height: 1.5; color: var(--blue); font-weight: 600; }

/* ---------- ten challenges ---------- */
.chs { background: #FFFFFF; color: var(--deep); padding: 100px 0; }
.chrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 200px; margin-top: 48px; }
.chd { flex: none; width: calc(44px + var(--d) * 15px); height: calc(44px + var(--d) * 15px); border-radius: 999px; border: 0; padding: 0; font: 700 20px/1 var(--disp); cursor: pointer; transition: transform calc(320ms * var(--k)) var(--S), box-shadow calc(200ms * var(--k)) ease; }
.chd.on { transform: scale(1.08); box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 7px var(--deep); }
.chd:focus-visible { outline-offset: 9px; }
.cha { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; margin-top: 40px; }
.chl { display: flex; flex-direction: column; gap: 12px; }
.chw { font-size: 22px; font-weight: 700; color: var(--layer); }
.cht { font-family: var(--disp); font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.chr { display: flex; flex-direction: column; gap: 22px; }
.chr p { font-size: 20px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }

/* ---------- 41 dots ---------- */
.cat { background: var(--grey); color: var(--deep); padding: 100px 0; }
.ctop { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.cpills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.mdots { display: grid; grid-template-columns: repeat(14, 56px); justify-content: space-between; row-gap: 20px; margin-top: 48px; }
.mdots i { display: block; width: 56px; height: 56px; border-radius: 999px; }
.cards { display: flex; gap: 20px; margin-top: 56px; min-height: 414px; }

/* card (MMJKartya) */
.kc { position: relative; display: block; flex: none; text-decoration: none; color: var(--ink); outline: none; transition: transform calc(180ms * var(--k)) var(--E); }
.kc:hover { color: var(--ink); }
.kc.hov { transform: translateY(-3px); }
.kc.prs { transform: scale(.98); }
.kc > svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.kc .sh { filter: drop-shadow(0 14px 20px rgba(0,40,25,.16)); transition: filter calc(240ms * var(--k)); }
.kc.hov .sh { filter: drop-shadow(0 26px 30px rgba(0,40,25,.30)); }
.kc.prs .sh { filter: drop-shadow(0 6px 10px rgba(0,40,25,.14)); }
.kc .fr { display: none; }
.kc:focus-visible .fr { display: inline; }
.kc .kic { position: absolute; left: 34px; }
.kc .kb { position: absolute; width: 142px; height: 50px; border-radius: 999px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1px rgba(0,0,0,.07); }
.kc .kb svg { transition: transform calc(220ms * var(--k)) var(--E); }
.kc.hov .kb svg { transform: translate(2px,-2px); }
.kc .kt { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.kc .kn { font-weight: 700; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kc .kf { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.kc .kp { display: flex; flex-direction: column; gap: 6px; flex: 1 0 auto; }
.kc .kp b, .kc .ktm b { font-family: var(--disp); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kc .kp b { line-height: .9; letter-spacing: -.035em; color: var(--deep); }
.kc .kp span, .kc .ktm span { font-size: 14px; font-weight: 600; color: var(--ink2); }
.kc .ktm { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; text-align: right; }
.kc .ktm b { line-height: 1; letter-spacing: -.02em; }

/* ---------- 84 causes ---------- */
.hib { background: var(--deep); color: #FFFFFF; padding: 100px 0; overflow-y: clip; }
.hib > .in { display: grid; grid-template-columns: minmax(0,1fr) 660px; gap: 56px; align-items: center; }
.hibl { display: flex; flex-direction: column; gap: 26px; }
.hibl p { font-size: 22px; line-height: 1.5; text-wrap: pretty; }
.hibr { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; align-items: end; }
.hg { display: flex; flex-direction: column; gap: 16px; }
.hgd { display: grid; grid-template-columns: repeat(6, 20px); gap: 9px; }
.hgd i { display: block; width: 20px; height: 20px; border-radius: 999px; }
.hg > span { font-size: 17px; line-height: 1.35; font-weight: 700; }

/* ---------- free ---------- */
.free { background: #FFFFFF; color: var(--deep); padding: 100px 0; }
.free > .in { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 72px; align-items: center; }
.fdot { display: block; width: 300px; height: 300px; border-radius: 999px; background: var(--mint); }
.fcol { display: flex; flex-direction: column; gap: 26px; }
.fcol p { font-size: 22px; line-height: 1.5; color: var(--ink); max-width: 720px; text-wrap: pretty; }
.fcol .brow { gap: 24px; }
.tl { font-size: 17px; font-weight: 600; color: var(--deep); }

/* ---------- authors ---------- */
.auth { background: var(--grey); color: var(--deep); padding: 100px 0; }
.auth > .in { display: flex; flex-direction: column; gap: 48px; }
.atop { display: grid; grid-template-columns: minmax(0,1fr) 560px; gap: 48px; align-items: end; }
.atop p { font-size: 22px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.aus { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 16px; }
.au { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.aum { width: 132px; height: 132px; border-radius: 999px; background: var(--tint); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
.aun { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.aur { font-size: 15px; color: var(--ink2); line-height: 1.35; margin-top: -8px; }
.refs { font-size: 17px; line-height: 1.7; color: var(--ink2); }

/* ---------- footer ---------- */
.ft { background: var(--deep); color: #FFFFFF; padding: 64px 0 48px; }
.ft > .in { display: flex; flex-direction: column; gap: 40px; }
.ft a { color: inherit; text-decoration: none; }
.ft a:hover { color: inherit; text-decoration: underline; }
.fg { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; font-size: 16px; line-height: 1.5; }
.fi { font-size: 17px; line-height: 1.55; color: var(--tint); max-width: 300px; }
.fc { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.fh { font-weight: 700; color: var(--mint); }
.fb { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.18); }
.fl { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--tint); text-align: right; max-width: 880px; }
.flk { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 20px; font-weight: 600; color: #FFFFFF; }
.miss { background: rgba(143,212,176,.22); border-radius: 8px; padding: 2px 8px; }

/* ---------- product #15 (extra screen on the same route, shown on #meres-15) ---------- */
.prod { display: none; background: var(--deep); color: #FFFFFF; padding: 0 0 96px; }
.prod:target { display: block; }
.pg:has(.prod:target) main { display: none; }
.prod .hd { position: relative; padding: 0; }
.pgrid { display: grid; grid-template-columns: minmax(0,1fr) 560px; gap: 56px; margin-top: 40px; align-items: center; }
.pcol { display: flex; flex-direction: column; gap: 26px; }
.crumb { font-size: 15px; color: var(--tint); }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: inherit; text-decoration: underline; }
.prod h1 { font-size: 56px; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.prod .hook { font-size: 22px; line-height: 1.4; font-weight: 700; color: var(--mint); }
.pcol > p:not(.hook) { font-size: 22px; line-height: 1.5; text-wrap: pretty; }
.pf { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pring { position: relative; width: 560px; height: 560px; }
.pring > i { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 999px; transform: scale(0); }
.pic { position: absolute; left: 130px; top: 130px; width: 300px; height: 300px; }
.pic svg { width: 100%; height: 100%; }
.pring > span { position: absolute; left: 0; right: 0; bottom: -34px; text-align: center; font-size: 17px; font-weight: 600; color: var(--mint); }
.pboxes { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; margin-top: 96px; }
.pstd { background: #FFFFFF; color: var(--ink); padding: 30px 32px; display: flex; flex-direction: column; }
.psh { font-size: 22px; font-weight: 700; padding-bottom: 12px; border-bottom: 6px solid var(--ink); }
.sr { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--grey); font-size: 17px; line-height: 1.4; }
.sr span:first-child { color: var(--ink2); }
.sr span:last-child { font-weight: 600; }
.pside { display: flex; flex-direction: column; gap: 20px; }
.pkm, .pmk { padding: 30px 32px; display: flex; flex-direction: column; gap: 12px; }
.pkm { background: var(--btint); color: var(--blue); }
.pmk { background: var(--tint); color: var(--deep); }
.pkm span:first-child, .pmk span:first-child { font-size: 22px; font-weight: 700; }
.pkm span:last-child, .pmk span:last-child { font-size: 17px; line-height: 1.55; color: var(--ink); }

/* ---------- fixed idea dock ---------- */
.dock { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0,67,45,.16); }
.dock a, .dock button { font: 600 15px/1 var(--sans); padding: 12px 18px; border-radius: 999px; border: 1.5px solid var(--deep); background: transparent; color: var(--deep); text-decoration: none; cursor: pointer; white-space: nowrap; }
.dock a { background: var(--deep); color: #FFFFFF; }
.dock a:hover { color: #FFFFFF; background: var(--dft); }
.dock button[aria-pressed="true"] { background: var(--deep); color: #FFFFFF; }

/* ---------- below 1024: the 390 layout ---------- */
@media (max-width: 1023px) {
  .in { padding: 0 20px; }
  h2 { font-size: 36px; line-height: 1.05; letter-spacing: -.03em; }
  .hero { height: auto; min-height: 800px; padding-bottom: 40px; }
  .hd { position: relative; height: 64px; padding: 0; margin-right: -8px; justify-content: space-between; }
  .hero .nav, .hero .sel, .hero .dv, .hero .bn { display: none; }
  .logo { height: 26px; }
  .menu { display: flex; width: 44px; height: 44px; border-radius: 999px; background: #FFFFFF; border: 0; align-items: center; justify-content: center; cursor: pointer; }
  .mnav:not([hidden]) { display: flex; flex-direction: column; position: absolute; right: 12px; top: 60px; z-index: 5; background: #FFFFFF; padding: 12px 8px; min-width: 240px; }
  .mnav a { color: var(--deep); text-decoration: none; font-size: 17px; font-weight: 600; padding: 12px 16px; border-radius: 999px; }
  .mnav a:hover { background: var(--tint); }
  .hl { position: relative; left: auto; top: auto; width: auto; margin-top: 20px; gap: 20px; }
  .aud button { gap: 8px; padding: 7px 16px 7px 8px; font-size: 16px; }
  .hero h1 { font-size: min(56px, 15vw); line-height: .95; }
  .hero .hl > p { font-size: 17px; line-height: 1.5; }
  .srch { height: 56px; padding: 0 6px 0 18px; }
  .srch input { font-size: 16px; padding: 0 4px; }
  .srch button { padding: 13px 14px; font-size: 15px; }
  .qhint { left: 18px; top: 64px; font-size: 14px; white-space: normal; }
  .hf { position: relative; left: auto; top: auto; width: 300px; height: 300px; margin: 46px auto 0; }
  .hdots i { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  .hcap { position: static; display: block; width: auto; text-align: center; margin-top: 8px; font-size: 15px; }

  .merge { padding: 48px 0 40px; }
  .mtop { flex-direction: column; align-items: flex-start; gap: 20px; }
  .mpick { flex-wrap: wrap; gap: 6px; }
  .mpick span { flex-basis: 100%; }
  .mpick button { width: 38px; height: 38px; font-size: 15px; }
  .stage { height: 560px; margin-top: 28px; }
  .lk, .lv { font-size: 18px; }
  .lk { top: 0; }
  .mresp i { top: 40px; width: 30px; height: 30px; margin-left: -15px; }
  .mtx { top: 92px; font-size: 15px; }
  .lv { left: 0; top: 196px; }
  .ring { left: calc(50% - 120px); top: 240px; width: 240px; height: 240px; }
  .disc { left: calc(50% - 95px); top: 265px; width: 190px; height: 190px; padding: 22px; font-size: 15px; }
  .mghost i { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .mnote { left: 0; right: 0; top: 500px; width: auto; font-size: 15px; }

  .chs { padding: 48px 0 40px; }
  .chrow { flex-wrap: wrap; justify-content: center; height: auto; gap: 14px 12px; margin-top: 28px; padding: 8px 0; }
  .chd { width: calc((44px + var(--d) * 15px) * .55); height: calc((44px + var(--d) * 15px) * .55); font-size: 15px; }
  .chd.on { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--deep); }
  .cha { grid-template-columns: minmax(0,1fr); gap: 18px; margin-top: 28px; }
  .chw { font-size: 17px; }
  .cht { font-size: 26px; }
  .chr p { font-size: 17px; }

  .cat { padding: 48px 0 40px; }
  .ctop { display: contents; }
  .cat > .in { display: flex; flex-direction: column; gap: 20px; }
  .cpills { order: 3; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-right: -20px; padding: 4px 20px 4px 4px; margin-left: -4px; scrollbar-width: none; }
  .cpills::-webkit-scrollbar { display: none; }
  .cp { flex: none; gap: 6px; padding: 10px 16px; font-size: 16px; }
  .cp > i { width: 10px; height: 10px; }
  .mdots { order: 2; grid-template-columns: repeat(9, 28px); row-gap: 10px; margin-top: 0; }
  .mdots i { width: 28px; height: 28px; }
  .cards { order: 4; flex-wrap: wrap; gap: 14px; margin-top: 0; min-height: 0; }

  .hib { padding: 56px 0; }
  .hib > .in { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .hibl { gap: 20px; }
  .hibl p { font-size: 17px; }
  .hibr { gap: 12px; order: -1; }
  .hgd { grid-template-columns: repeat(6, 11px); gap: 5px; }
  .hgd i { width: 11px; height: 11px; }
  .hg { gap: 12px; }
  .hg > span { font-size: 14px; }

  .free { padding: 56px 0; }
  .free > .in { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .fdot { width: 160px; height: 160px; }
  .fcol { gap: 20px; }
  .fcol p { font-size: 17px; }
  .fcol .brow { gap: 16px; }

  .auth { padding: 56px 0; }
  .auth > .in { gap: 32px; }
  .atop { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .atop p { font-size: 17px; }
  .aus { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 12px; }
  .aum { width: 96px; height: 96px; font-size: 20px; }
  .refs { font-size: 15px; }

  .ft { padding: 48px 0 96px; }
  .fg { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .fb { flex-direction: column; align-items: flex-start; gap: 20px; }
  .fl { align-items: flex-start; text-align: left; }
  .flk { justify-content: flex-start; }

  .prod { padding-bottom: 56px; }
  .prod .hd { justify-content: flex-start; }
  .prod .nav { display: none; }
  .pgrid { grid-template-columns: minmax(0,1fr); gap: 40px; margin-top: 20px; }
  .prod h1 { font-size: 34px; }
  .prod .hook, .pcol > p:not(.hook), .pf { font-size: 17px; }
  .pcol { gap: 18px; }
  .pring { width: 300px; height: 300px; margin: 0 auto 34px; }
  .pring > i { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  .pic { left: 70px; top: 70px; width: 160px; height: 160px; }
  .pboxes { grid-template-columns: minmax(0,1fr); gap: 16px; margin-top: 40px; }
  .pstd, .pkm, .pmk { padding: 24px 22px; }
  .sr { grid-template-columns: 96px minmax(0,1fr); font-size: 15px; }
  .pkm span:first-child, .pmk span:first-child, .psh { font-size: 19px; }
  .pkm span:last-child, .pmk span:last-child { font-size: 15px; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .aus { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .fg { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hibr { max-width: 560px; }
  .hgd { grid-template-columns: repeat(6, 16px); gap: 7px; }
  .hgd i { width: 16px; height: 16px; }
}
@media (max-width: 420px) {
  .dock { right: 10px; bottom: 10px; }
  .dock a, .dock button { padding: 11px 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
/* HU · EN nyelvváltó a lebegő vezérlőben */
.dock .lng { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 12px; color: rgba(0,67,45,.45); font: 600 15px/1 var(--sans); white-space: nowrap; }
.dock .lng b { padding: 0 6px; color: var(--deep); font-weight: 600; }
.dock .lng a { padding: 6px 8px; border: 0; background: transparent; color: var(--deep); }
.dock .lng a:hover { background: #E6F4EC; color: var(--deep); }
@media (max-width: 420px) { .dock .lng { padding-left: 8px; font-size: 14px; } .dock .lng a { padding: 6px 7px; } }
.dock .lng a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}