/* AquaLog bemutatóoldal (web /aqualog, PWA /alkalmazas/aqualog; lib/aqualog_bemutato.php, js/aqualog-bemutato.js).
   Élő oldal: görgetésvezérelt telefonképernyők, parallax-rétegek, kilógó jelzések, hullámos szekcióváltók, animált grafikon és
   mini-grafikák. A mozgás csak akkor indul, ha a JS a gyökérre teszi az `aql--mozgas` osztályt (csökkentett mozgásnál nem teszi);
   nélküle minden tartalom statikusan, teljes egészében látszik. Színek a közös tokenekből; oldalsó hangsúlycsík nincs (§27). */

.aql {
  --aql-papir: var(--td-hatter, var(--aq-paper, #F5F3EC));
  --aql-feher: var(--td-felulet, #fff);
  --aql-mely: #0F3038;
  --aql-zold: #22605C;
  --aql-noveny: #3F7050;
  --aql-menta: #9FD3C9;
  --aql-szoveg: var(--td-szoveg, var(--aq-text));
  --aql-halk: var(--td-halk, var(--aq-muted));
  --aql-teal: var(--td-teal-szoveg, var(--aq-accent-sotet));
  --aql-teal-halvany: var(--td-teal-halvany, #E3F1EE);
  --aql-keret: var(--td-keret, var(--aq-line));
  overflow: clip; background: var(--aql-papir); color: var(--aql-szoveg);
}
.aql-keret { width: var(--shell, min(1180px, calc(100% - 32px))); margin: 0 auto; }
.aql--app .aql-keret { width: auto; margin: 0; padding: 0 var(--app-gutter, 16px); }
.aql .ikon { flex: none; width: 1.15em; height: 1.15em; }
.aql p { line-height: 1.6; }
.aql h3 { margin: 0 0 6px; font-size: 1.15rem; line-height: 1.3; }

/* ---------- Szekciók és hullámos váltók ---------- */
.aql-szekcio { position: relative; padding: 0 0 clamp(56px, 7vw, 96px); }
.aql-szekcio--papir { background: var(--aql-papir); }
.aql-szekcio--feher { background: var(--aql-feher); }
.aql-szekcio--mely { background: radial-gradient(60% 80% at 80% 20%, rgba(159, 211, 201, .16), transparent 60%), var(--aql-mely); color: #fff; }
.aql-szekcio--zold { background: radial-gradient(60% 90% at 15% 30%, rgba(159, 211, 201, .22), transparent 60%), var(--aql-zold); color: #fff; }
.aql-hullam { position: relative; height: clamp(44px, 6vw, 92px); overflow: hidden; pointer-events: none; }
.aql-hullam svg { position: absolute; left: -6%; bottom: -1px; width: 112%; height: 100%; }
.aql-hullam-alap--papir { background: var(--aql-papir); }
.aql-hullam-alap--feher { background: var(--aql-feher); }
.aql-hullam-alap--mely { background: var(--aql-mely); }
.aql-hullam-alap--zold { background: var(--aql-zold); }
.aql-hullam--papir path { fill: var(--aql-papir); }
.aql-hullam--feher path { fill: var(--aql-feher); }
.aql-hullam--mely path { fill: var(--aql-mely); }
.aql-hullam--zold path { fill: var(--aql-zold); }
.aql-hullam .aql-hullam__hatso { opacity: .45; }
.aql-szekcio > .aql-hullam:first-child { margin-bottom: clamp(12px, 2vw, 28px); }

/* ---------- Szekciófej: nagy sorszám, felcím, kiemelt cím ---------- */
.aql-fej { position: relative; margin-bottom: 18px; }
.aql-fej__szam { position: absolute; top: -.42em; left: -.06em; z-index: 0; font-size: clamp(5rem, 3.5rem + 6vw, 9rem); font-weight: 900; line-height: 1; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 2px rgba(60, 148, 141, .22); pointer-events: none; }
.aql-szekcio--mely .aql-fej__szam, .aql-szekcio--zold .aql-fej__szam { -webkit-text-stroke-color: rgba(159, 211, 201, .25); }
.aql-fej__felcim { position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: var(--aql-teal-halvany); color: var(--aql-teal); font-size: .8125rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.aql-fej__ikon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--aq-accent-sotet); color: #fff; }
.aql-fej__ikon .ikon { width: 17px; height: 17px; }
.aql-szekcio--mely .aql-fej__felcim, .aql-szekcio--zold .aql-fej__felcim { background: rgba(255, 255, 255, .12); color: var(--aql-menta); }
.aql-szekcio--mely .aql-fej__ikon, .aql-szekcio--zold .aql-fej__ikon { background: var(--aql-menta); color: var(--aql-mely); }
.aql-fej h2 { position: relative; margin: 0; font-size: clamp(2rem, 1.25rem + 2.7vw, 3.5rem); line-height: 1.06; letter-spacing: -.032em; text-wrap: balance; }
.aql-szekcio--mely .aql-fej h2, .aql-szekcio--zold .aql-fej h2 { color: #fff; }
.aql-kiemel { background: linear-gradient(transparent 60%, rgba(159, 211, 201, .65) 60%, rgba(159, 211, 201, .65) 90%, transparent 90%) no-repeat 0 0 / 100% 100%; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.aql-kiemel--vilagos { background-image: linear-gradient(transparent 62%, rgba(159, 211, 201, .42) 62%, rgba(159, 211, 201, .42) 92%, transparent 92%); }
.aql-szekcio--mely .aql-kiemel, .aql-szekcio--zold .aql-kiemel { background-image: linear-gradient(transparent 62%, rgba(159, 211, 201, .38) 62%, rgba(159, 211, 201, .38) 92%, transparent 92%); }
.aql-bevezeto { max-width: 62ch; margin: 0 0 8px; color: var(--aql-halk); font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); }
.aql-szekcio--mely .aql-bevezeto, .aql-szekcio--zold p { color: rgba(255, 255, 255, .84); }

/* ---------- Bevezető ---------- */
.aql-hos { position: relative; padding: clamp(40px, 6vw, 80px) 0 0; overflow: hidden; color: #fff;
  background: radial-gradient(60% 80% at 85% 15%, rgba(159, 211, 201, .3), transparent 62%), linear-gradient(155deg, var(--aql-mely) 0%, var(--aql-zold) 58%, var(--aql-noveny) 100%); }
.aql-hos__belso { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.aql-hos__felcim { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--aql-menta); font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.aql-logo { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 255, 255, .14); }
.aql-logo .ikon { width: 20px; height: 20px; color: #fff; }
.aql-hos__cim { margin: 0 0 18px; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.04em; color: #fff; text-wrap: balance; }
.aql-hos__lead { max-width: 54ch; margin: 0 0 22px; color: rgba(255, 255, 255, .88); font-size: clamp(1.04rem, 1rem + .3vw, 1.2rem); }
.aql-hos__jelek { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.aql-hos__jelek li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .9rem; font-weight: 700; }
.aql-hos__jelek .ikon { color: var(--aql-menta); }
.aql-hos > .aql-hullam { margin-top: -10px; }

/* Buborékok (a víz élete) és lüktető fényfoltok. */
.aql-buborekok { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aql-buborekok i { position: absolute; bottom: -40px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .45); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .05) 60%); opacity: 0; }
.aql-buborekok i:nth-child(1) { left: 6%; } .aql-buborekok i:nth-child(2) { left: 14%; width: 8px; height: 8px; }
.aql-buborekok i:nth-child(3) { left: 27%; width: 20px; height: 20px; } .aql-buborekok i:nth-child(4) { left: 39%; width: 10px; height: 10px; }
.aql-buborekok i:nth-child(5) { left: 52%; } .aql-buborekok i:nth-child(6) { left: 63%; width: 22px; height: 22px; }
.aql-buborekok i:nth-child(7) { left: 74%; width: 9px; height: 9px; } .aql-buborekok i:nth-child(8) { left: 83%; }
.aql-buborekok i:nth-child(9) { left: 91%; width: 18px; height: 18px; } .aql-buborekok i:nth-child(10) { left: 97%; width: 7px; height: 7px; }
.aql-folt { position: absolute; z-index: 0; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(159, 211, 201, .55), transparent 68%); filter: blur(10px); pointer-events: none; }
.aql-folt--1 { right: -6%; top: -4%; } .aql-folt--2 { left: 4%; bottom: 0; width: 240px; height: 240px; background: radial-gradient(circle, rgba(224, 164, 58, .35), transparent 68%); }
.aql-folt--3 { left: 50%; top: 50%; margin: -210px 0 0 -210px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(159, 211, 201, .45), transparent 66%); }
.aql-folt--4 { left: 50%; top: 50%; margin: -210px 0 0 -210px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(63, 112, 80, .28), transparent 66%); }

/* ---------- Felhívás ---------- */
.aql-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.aql-cta .gomb { min-height: 56px; padding: 0 26px; border-radius: 16px; font-size: 1.04rem; }
.aql-cta__fo { position: relative; background: #fff; color: var(--aql-zold); box-shadow: 0 12px 30px rgba(13, 26, 23, .28); }
.aql-cta__fo:hover { background: #EAF4F0; color: var(--aql-zold); }
.aql-cta__masod { border: 2px solid rgba(255, 255, 255, .7); background: transparent; color: #fff; }
.aql-cta__masod:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }
.aql-cta__letoltes { border: 0; cursor: pointer; }
.aql-cta__letoltes[hidden] { display: none; }
.aql-cta .aql-cta__letoltes:not([hidden]) { flex: 1 1 100%; min-height: 66px; font-size: 1.18rem; }
.aql-cta .aql-cta__letoltes:not([hidden]) .ikon { width: 24px; height: 24px; }
.aql-cta .aql-cta__letoltes:not([hidden]) ~ .gomb { flex: 1 1 0; min-width: 0; padding: 0 10px; justify-content: center; font-size: 1rem; }
.aql-cta .aql-cta__letoltes:not([hidden]) ~ .aql-cta__fo { border: 2px solid rgba(255, 255, 255, .7); background: transparent; color: #fff; box-shadow: none; animation: none; }
.aql-cta .aql-cta__letoltes:not([hidden]) ~ .aql-cta__fo:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }
.aql-cta__letoltes:not([hidden]) ~ a[data-aqualog-belepes] .ikon { display: none; }
.aql-cta__megj { flex-basis: 100%; margin: 4px 0 0; color: rgba(255, 255, 255, .76); font-size: .875rem; }
.aql-cta__info { display: flex; gap: 10px; max-width: 560px; margin: 0; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; }
.aql-cta__info .ikon { margin-top: 3px; }

/* ---------- Telefon ---------- */
.aql-tel { width: min(76vw, 290px); margin: 0; container-type: inline-size; }
.aql-tel__keret { position: relative; padding: 3.1cqw; border-radius: 15.5cqw; background: linear-gradient(145deg, #23302D, #0B1513 45%, #1A2623); box-shadow: 0 34px 70px rgba(6, 20, 18, .42), 0 6px 16px rgba(6, 20, 18, .3), inset 0 0 0 1.5px #3A4A46; }
.aql-tel__keret::before { content: ""; position: absolute; right: -3px; top: 120px; width: 3px; height: 64px; border-radius: 0 3px 3px 0; background: #1F2B28; }
.aql-tel__keret::after { content: ""; position: absolute; left: -3px; top: 96px; width: 3px; height: 40px; border-radius: 3px 0 0 3px; background: #1F2B28; box-shadow: 0 54px 0 #1F2B28; }
.aql-tel__allapot { position: relative; display: flex; align-items: center; justify-content: space-between; height: 9cqw; padding: 0 7.5cqw; border-radius: 12.5cqw 12.5cqw 0 0; background: #fff; color: #0D1A17; font-size: max(7px, 3.8cqw); font-weight: 800; }
.aql-tel__allapot::before { content: ""; position: absolute; left: 50%; top: 1.7cqw; width: 26cqw; height: 6.8cqw; margin-left: -13cqw; border-radius: 4cqw; background: #0B1513; }
.aql-tel__jelek { display: inline-flex; align-items: center; gap: 3px; }
.aql-tel__jelek i { display: block; width: 3px; border-radius: 1px; background: #0D1A17; }
.aql-tel__jelek i:nth-child(1) { height: 4px; } .aql-tel__jelek i:nth-child(2) { height: 6px; } .aql-tel__jelek i:nth-child(3) { height: 8px; }
.aql-tel__jelek b { display: block; width: 18px; height: 9px; margin-left: 4px; border: 1.5px solid #0D1A17; border-radius: 3px; background: linear-gradient(90deg, #0D1A17 70%, transparent 70%) no-repeat 1px 1px / calc(100% - 2px) calc(100% - 2px); }
.aql-tel__fej, .aql-tel__lab { display: block; width: 100%; height: auto; background: #fff; }
.aql-tel__lab { border-radius: 0 0 12.5cqw 12.5cqw; }
.aql-tel__kepernyo { position: relative; overflow: hidden; aspect-ratio: 390 / 690; background: #F2F5F2; }
.aql-tel__tartalom { display: block; width: 100%; height: auto; will-change: transform; }

/* Koppintásjelzők a képernyőn (dekoráció). */
.aql-erintes { position: absolute; z-index: 2; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: rgba(255, 255, 255, .55); border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 0 0 0 rgba(43, 117, 112, .5), 0 4px 12px rgba(13, 26, 23, .25); opacity: 0; pointer-events: none; }
.aql-erintes--a { left: 26%; top: 22%; } .aql-erintes--b { left: 72%; top: 34%; } .aql-erintes--c { left: 50%; top: 58%; }
.aql-erintes--d { left: 30%; top: 74%; } .aql-erintes--e { left: 78%; top: 82%; } .aql-erintes--f { left: 64%; top: 12%; }

/* Lebegő jelzések (kilógnak a szekcióból, parallaxszal mozognak). */
.aql-jelzes { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px 10px 10px; border-radius: 16px;
  background: #fff; color: #0D1A17; box-shadow: 0 18px 40px rgba(13, 26, 23, .22), 0 2px 6px rgba(13, 26, 23, .1); font-size: .9rem; line-height: 1.25; white-space: nowrap; translate: 0 var(--par, 0px); }
.aql-jelzes > .ikon { width: 34px; height: 34px; padding: 8px; border-radius: 11px; background: #E3F1EE; color: #22605C; }
.aql-jelzes span { display: grid; }
.aql-jelzes small { color: #5B6B66; font-size: .78rem; font-weight: 600; }
.aql-jelzes--siker > .ikon { background: #DCEFE2; color: #2E7D4F; }
.aql-jelzes--figyel > .ikon { background: #FBEBD3; color: #9A5B12; }

/* ---------- Kérdés → válasz ---------- */
.aql-kerdesek { padding-top: clamp(40px, 6vw, 72px); text-align: center; }
.aql-kerdesek .aql-fej, .aql-kerdesek .aql-bevezeto { margin-left: auto; margin-right: auto; }
.aql-kerdesek .aql-bevezeto { max-width: 60ch; }
.aql-parbeszed { display: grid; gap: 14px; max-width: 980px; margin: 30px auto 0; padding: 0; list-style: none; text-align: left; }
.aql-parbeszed li { display: grid; gap: 8px; }
.aql-kerdes { justify-self: start; margin: 0; padding: 12px 16px; border-radius: 18px 18px 18px 6px; background: var(--aql-feher); box-shadow: 0 6px 18px rgba(13, 26, 23, .08); font-weight: 700; }
.aql-valasz { display: flex; align-items: center; gap: 10px; justify-self: end; margin: 0; padding: 12px 16px; border-radius: 18px 18px 6px 18px; background: var(--aq-accent-sotet); color: #fff; box-shadow: 0 10px 24px rgba(43, 117, 112, .3); }
.aql-valasz .ikon { width: 20px; height: 20px; }

/* ---------- Funkciók ---------- */
.aql-funkcio__racs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
.aql-funkcio__szinpad { position: relative; z-index: 3; display: grid; place-items: center; min-height: 520px; }
.aql-funkcio__szinpad > div, .aql-funkcio__szinpad > figure { position: relative; z-index: 2; }
.aql-funkcio__szoveg > p { margin: 0 0 18px; color: var(--aql-halk); font-size: 1.06rem; max-width: 56ch; }
.aql-pontok { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.aql-pontok li { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; line-height: 1.4; }
.aql-pontok .ikon { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--aql-teal-halvany); color: var(--aql-teal); }

/* Animált grafikon a telefonban (Elemzések). */
.aql-graf { display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 0; font-family: inherit; color: #14211E; }
.aql-graf__idok { display: flex; gap: 5px; }
.aql-graf__idok span { padding: 5px 9px; border: 1px solid #DCE5DF; border-radius: 9px; background: #fff; font-size: 10.5px; font-weight: 700; }
.aql-graf__idok .aql-graf__aktiv { border-color: #0F7C74; background: #0F7C74; color: #fff; }
.aql-graf__kartya { padding: 10px; border: 1px solid #E1E8E3; border-radius: 16px; background: #fff; }
.aql-graf__parameterek { display: flex; gap: 4px; margin-bottom: 8px; }
.aql-graf__parameterek span { flex: 1; padding: 5px 0; border-radius: 8px; background: #F0F4F1; color: #4C5E58; font-size: 11px; font-weight: 800; text-align: center; transition: background .35s, color .35s; }
.aql-graf__parameterek .aql-graf__aktiv { background: #E3F1EE; color: #0F6D66; box-shadow: inset 0 0 0 1.5px #0F7C74; }
.aql-graf__fej { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.aql-graf__fej p { margin: 0; font-size: 12px; line-height: 1; }
.aql-graf__fej b { font-size: 26px; font-weight: 900; letter-spacing: -.02em; }
.aql-graf__jel { padding: 4px 9px; border-radius: 999px; background: #E3F1EE; color: #0F6D66; font-size: 10.5px; font-weight: 800; transition: background .35s, color .35s; }
.aql-graf__jel--figyel { background: #FBEBD3; color: #8A520F; }
.aql-graf__jel--valtozo { background: #FFF4CC; color: #7A5C00; }
.aql-graf__al { margin: 4px 0 2px; color: #5B6B66; font-size: 10.5px; line-height: 1.35; }
.aql-graf__svg { display: block; width: 100%; height: auto; overflow: visible; }
.aql-graf__racs line { stroke: #E7ECE8; stroke-width: 1; }
.aql-graf__tengely text { fill: #7A8A84; font-size: 9px; text-anchor: end; }
.aql-graf__zona { fill: rgba(63, 160, 120, .14); stroke: rgba(63, 160, 120, .5); stroke-width: 1; stroke-dasharray: 4 3; transition: y .8s cubic-bezier(.3, .8, .2, 1), height .8s cubic-bezier(.3, .8, .2, 1); }
.aql-graf__terulet { fill: rgba(15, 124, 116, .1); }
.aql-graf__vonal { fill: none; stroke: #0F7C74; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.aql-graf__pont { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #0F7C74; }
.aql-graf__savjel { display: inline-block; width: 14px; height: 8px; border-radius: 2px; background: rgba(63, 160, 120, .25); }
[data-aql-graf-pontok] circle { fill: #0F7C74; stroke: #fff; stroke-width: 1.6; }
[data-aql-graf-pontok] circle:last-child { animation: aql-pont-pulzus 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.aql-graf__jelmagyarazat { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; padding: 0; list-style: none; color: #5B6B66; font-size: 10px; font-weight: 700; }
.aql-graf__jelmagyarazat li { display: inline-flex; align-items: center; gap: 5px; }
.aql-graf__statok { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.aql-graf__statok p { display: grid; margin: 0; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid #E1E8E3; text-align: center; line-height: 1.15; }
.aql-graf__statok b { font-size: 17px; font-weight: 900; }
.aql-graf__statok small { color: #5B6B66; font-size: 10px; font-weight: 700; }

/* Fogyó flakon (Adagolás). */
.aql-flakon { position: absolute; z-index: 4; right: -4%; bottom: 12%; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; background: #fff; color: #0D1A17; box-shadow: 0 18px 40px rgba(13, 26, 23, .22); }
.aql-flakon p { display: grid; margin: 0; line-height: 1.25; font-size: .9rem; }
.aql-flakon small { color: #5B6B66; font-size: .78rem; font-weight: 600; }
.aql-flakon__test { position: relative; width: 28px; height: 46px; border: 2px solid #22605C; border-radius: 6px 6px 8px 8px; overflow: hidden; }
.aql-flakon__test::before { content: ""; position: absolute; left: 8px; top: -2px; width: 8px; height: 5px; background: #22605C; }
.aql-flakon__test i { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, #E0A43A, #C9822B); }

/* ---------- Eszközök ---------- */
.aql-laptop__kijelzo { padding: 2.2% 2.2% 3%; border-radius: 18px 18px 6px 6px; background: linear-gradient(160deg, #26332F, #0B1513); box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 0 0 1.5px #3A4A46; }
.aql-laptop__kijelzo img { display: block; width: 100%; height: auto; border-radius: 6px; }
.aql-laptop__talp { display: block; width: 116%; height: 16px; margin-left: -8%; border-radius: 0 0 22px 22px; background: linear-gradient(180deg, #C9D2CE, #8E9A95); box-shadow: 0 16px 30px rgba(0, 0, 0, .35); }
.aql-tablet img { display: block; width: 100%; height: auto; border-radius: 16px; }
.aql-szinkron { position: absolute; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--aql-menta); box-shadow: 0 0 0 0 rgba(159, 211, 201, .7); }

/* ---------- Csempék mini-grafikával ---------- */
.aql-racs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; margin: 28px 0 0; padding: 0; list-style: none; }
.aql-csempe { position: relative; display: flex; flex-direction: column; padding: 18px 20px 22px; border: 1px solid var(--aql-keret); border-radius: 24px; background: var(--aql-feher);
  box-shadow: 0 1px 0 rgba(13, 26, 23, .03); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.aql-csempe:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(13, 26, 23, .12); }
.aql-csempe p { margin: 0; color: var(--aql-halk); font-size: .95rem; }
.aql-csempe__grafika { display: grid; align-content: center; gap: 8px; height: 168px; margin: 0 0 16px; padding: 14px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, #EEF6F3, #E3EFEA); color: #14211E; }
.aql-csempe__ikon { display: grid; place-items: center; width: 48px; height: 48px; margin: -40px 0 10px 4px; border: 4px solid var(--aql-feher); border-radius: 15px; background: var(--aq-accent-sotet); color: #fff; position: relative; z-index: 1; }
.aql-csempe__ikon .ikon { width: 22px; height: 22px; }
.aql-csempe:hover .aql-csempe__ikon .ikon { animation: aql-ringat .6s ease; }
.aql-mini-ikon { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: #fff; color: #22605C; }
.aql-mini-ikon .ikon { width: 16px; height: 16px; }
.aql-mini-ikon--viz { background: #DDEFF6; color: #1F6E8C; } .aql-mini-ikon--zold { background: #DCEFE2; color: #2E7D4F; }
.aql-mini-naplo p, .aql-mini-eszkoz p { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 8px; border-radius: 12px; background: rgba(255, 255, 255, .8); color: #14211E; font-size: 12.5px; }
.aql-mini-naplo small, .aql-mini-eszkoz small { margin-left: auto; color: #5B6B66; font-size: 11px; font-weight: 700; }
.aql-mini-teendo p { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .8); color: #14211E; font-size: 12.5px; }
.aql-mini-teendo i { position: relative; flex: none; width: 20px; height: 20px; border: 2px solid #9AAAA2; border-radius: 6px; background: #fff; }
.aql-mini-teendo i::after { content: "✓"; position: absolute; inset: -2px; display: grid; place-items: center; border-radius: 6px; background: #22605C; color: #fff; font-size: 12px; font-style: normal; font-weight: 900; transform: scale(0); }
.aql-mini-viz { grid-template-columns: auto 1fr; align-items: center; gap: 18px; }
.aql-mini-viz__tartaly { position: relative; width: 110px; height: 110px; border: 3px solid #22605C; border-top-width: 0; border-radius: 0 0 14px 14px; overflow: hidden; background: #fff; }
.aql-mini-viz__viz { position: absolute; left: 0; right: 0; bottom: 0; height: 80%; background: linear-gradient(180deg, #7CC4D6, #2B8FA8); }
.aql-mini-viz__hullam { position: absolute; left: -50%; width: 200%; height: 14px; bottom: calc(80% - 7px); border-radius: 45%; background: #7CC4D6; }
.aql-mini-viz p { display: grid; margin: 0; color: #14211E; }
.aql-mini-viz b { font-size: 34px; font-weight: 900; line-height: 1; }
.aql-mini-viz small { color: #5B6B66; font-size: 12px; font-weight: 700; }
.aql-mini-eszkoz p { flex-wrap: wrap; }
.aql-mini-eszkoz p > i { flex-basis: 100%; height: 6px; border-radius: 999px; background: #DCE5DF; overflow: hidden; }
.aql-mini-eszkoz p > i em { display: block; width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3C948D, #22605C); }
.aql-mini-eszkoz p:last-child > i em { width: 38%; background: linear-gradient(90deg, #E0A43A, #C9822B); }
.aql-mini-kiadas { grid-template-columns: 112px 1fr; align-items: center; gap: 16px; }
.aql-mini-kiadas svg { width: 112px; height: 112px; transform: rotate(-90deg); }
.aql-mini-kiadas circle { fill: none; stroke-width: 6.5; }
.aql-mini-kiadas__alap { stroke: #DCE5DF; }
.aql-mini-kiadas__s1 { stroke: #22605C; stroke-dasharray: 46 54; }
.aql-mini-kiadas__s2 { stroke: #E0A43A; stroke-dasharray: 30 70; stroke-dashoffset: -46; }
.aql-mini-kiadas__s3 { stroke: #7CC4D6; stroke-dasharray: 24 76; stroke-dashoffset: -76; }
.aql-mini-kiadas ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; font-weight: 700; }
.aql-mini-kiadas li { display: flex; align-items: center; gap: 7px; }
.aql-mini-kiadas li i { width: 10px; height: 10px; border-radius: 3px; }
.aql-mini-kiadas__j1 { background: #22605C; } .aql-mini-kiadas__j2 { background: #E0A43A; } .aql-mini-kiadas__j3 { background: #7CC4D6; }
.aql-mini-mustra { justify-items: center; text-align: center; }
.aql-mini-mustra__csillagok { display: flex; gap: 6px; margin: 0; }
.aql-mini-mustra__csillagok .ikon { width: 30px; height: 30px; color: #E0A43A; fill: #E0A43A; }
.aql-mini-mustra p:last-child { display: grid; margin: 0; }
.aql-mini-mustra b { font-size: 30px; font-weight: 900; line-height: 1.1; }
.aql-mini-mustra small { color: #5B6B66; font-size: 12px; font-weight: 700; }
.aql-mini-tema { grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.aql-mini-tema__kartya { display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: #fff; color: #14211E; box-shadow: 0 8px 18px rgba(13, 26, 23, .1); }
.aql-mini-tema__kartya small { color: #5B6B66; font-size: 12px; font-weight: 700; }
.aql-mini-tema__kartya i { height: 8px; margin-top: 6px; border-radius: 999px; background: linear-gradient(90deg, #3C948D 60%, #DCE5DF 60%); }
.aql-mini-tema__kapcsolo { position: relative; width: 54px; height: 30px; border-radius: 999px; background: #C9D4CF; }
.aql-mini-tema__kapcsolo i { position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.aql-mini-szinkron { grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.aql-mini-szinkron__gep { width: 84px; height: 56px; border: 4px solid #22303A; border-radius: 8px; background: linear-gradient(160deg, #E3F1EE, #fff); box-shadow: 0 8px 0 -4px #9AAAA2; }
.aql-mini-szinkron__tel { width: 36px; height: 66px; border: 4px solid #22303A; border-radius: 10px; background: linear-gradient(160deg, #E3F1EE, #fff); }
.aql-mini-szinkron__ut { position: relative; height: 4px; border-radius: 999px; background: repeating-linear-gradient(90deg, #9FD3C9 0 8px, transparent 8px 14px); }
.aql-mini-szinkron__ut i { position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #22605C; opacity: 0; }

/* ---------- Telepítés ---------- */
.aql-telepites__racs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
.aql-telepites__szoveg > p { margin: 0 0 18px; font-size: 1.08rem; max-width: 54ch; }
.aql-helyzetek { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.aql-helyzetek li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-weight: 700; }
.aql-helyzetek .ikon { color: var(--aql-menta); }
.aql-telepites .app-letoltes { display: grid; gap: 12px; }
.aql-telepites .app-letoltes__cim { margin: 0; color: #fff; font-size: 1.05rem; font-weight: 800; }
.aql-telepites .app-letoltes__gombok { display: flex; flex-wrap: wrap; gap: 12px; }
.aql-telepites .app-letoltes__gomb { display: inline-flex; flex-direction: row; align-items: center; gap: 12px; min-height: 62px; padding: 8px 22px 8px 8px; border: 0; border-radius: 18px; background: #fff; color: #0D1A17; font-weight: 800; box-shadow: 0 14px 30px rgba(0, 0, 0, .25); cursor: pointer; transition: transform .2s; }
.aql-telepites .app-letoltes__gomb:hover { transform: translateY(-3px); }
.aql-telepites .app-letoltes__kor { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #0D1A17; color: #fff; }
.aql-telepites .app-letoltes__kor .ikon { width: 24px; height: 24px; }
.aql-telepites .app-letoltes__gomb small { font-size: 1.05rem; font-weight: 800; }
.aql-telepites__szinpad { position: relative; z-index: 3; display: grid; place-items: center; min-height: 560px; }
.aql-telepites__szinpad > div { position: relative; z-index: 2; }
.aql-pulzus { position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; border: 2px solid rgba(159, 211, 201, .5); }
.aql-tel--telepites { width: min(68vw, 280px); }

/* ---------- Árazás ---------- */
.aql-arazas .aql-fej { text-align: center; }
.aql-arazas .aql-fej__szam { display: none; }
.aql-periodus { display: flex; width: max-content; max-width: 100%; margin: 0 auto 26px; padding: 5px; border-radius: 999px; background: var(--aql-teal-halvany); }
.aql-periodus button { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--aql-szoveg); font: inherit; font-weight: 800; cursor: pointer; }
.aql-periodus button small { padding: 3px 8px; border-radius: 999px; background: #E0A43A; color: #2B1B05; font-size: .75rem; font-weight: 800; }
.aql-periodus button[aria-pressed="true"] { background: var(--aql-feher); box-shadow: 0 4px 14px rgba(13, 26, 23, .12); }
.aql-arak { display: grid; gap: 20px; max-width: 980px; margin: 0 auto; }
.aql-ar { position: relative; display: flex; flex-direction: column; padding: 30px 28px; border: 1px solid var(--aql-keret); border-radius: 28px; background: var(--aql-papir); }
.aql-ar__nev { margin: 0 0 6px; font-size: 1.05rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--aql-teal); }
.aql-ar__osszeg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.aql-ar__osszeg b { font-size: clamp(2.4rem, 2rem + 1.6vw, 3.4rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.aql-ar__osszeg span { color: var(--aql-halk); font-weight: 700; }
.aql-arazas[data-aql-periodus="havi"] .aql-ar__osszeg--eves, .aql-arazas[data-aql-periodus="eves"] .aql-ar__osszeg--havi { display: none; }
.aql-ar__kinek { margin: 0 0 20px; color: var(--aql-halk); font-weight: 600; }
.aql-ar__lista { display: grid; gap: 11px; flex: 1; margin: 0 0 24px; padding: 20px 0 0; border-top: 1px solid var(--aql-keret); list-style: none; }
.aql-ar__lista li { display: flex; gap: 10px; font-weight: 700; line-height: 1.4; }
.aql-ar__lista .ikon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--aql-teal-halvany); color: var(--aql-teal); }
.aql-ar__gomb { width: 100%; min-height: 54px; border: 2px solid var(--aq-accent-sotet); border-radius: 16px; background: transparent; color: var(--aql-teal); font-weight: 800; }
.aql-ar__gomb:hover { background: var(--aq-accent-sotet); color: #fff; }
.aql-ar--plus { border: 0; background: linear-gradient(155deg, var(--aql-mely), var(--aql-zold) 70%, var(--aql-noveny)); color: #fff; box-shadow: 0 30px 70px rgba(15, 48, 56, .35); }
.aql-ar--plus .aql-ar__nev { color: var(--aql-menta); }
.aql-ar--plus .aql-ar__osszeg span, .aql-ar--plus .aql-ar__kinek { color: rgba(255, 255, 255, .8); }
.aql-ar--plus .aql-ar__lista { border-top-color: rgba(255, 255, 255, .18); }
.aql-ar--plus .aql-ar__lista .ikon { background: rgba(255, 255, 255, .16); color: #fff; }
.aql-ar__gomb--plus { border-color: #fff; background: #fff; color: var(--aql-zold); }
.aql-ar__gomb--plus:hover { background: #EAF4F0; color: var(--aql-zold); }
.aql-ar__szalag { position: absolute; top: -15px; right: 24px; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 14px; border-radius: 999px; background: #E0A43A; color: #2B1B05; font-size: .8125rem; font-weight: 900; box-shadow: 0 8px 20px rgba(224, 164, 58, .4); }
.aql-ar__megj { margin: 12px 0 0; color: rgba(255, 255, 255, .72); font-size: .82rem; }
.aql-garancia { display: flex; align-items: center; gap: 20px; max-width: 980px; margin: 26px auto 0; padding: 22px 26px; border-radius: 24px; background: var(--aql-teal-halvany); }
.aql-garancia h3 { margin-bottom: 4px; font-size: 1.2rem; }
.aql-garancia p { margin: 0; color: var(--aql-halk); }
.aql-garancia__ikon { position: relative; display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 20px; background: var(--aq-accent-sotet); color: #fff; }
.aql-garancia__ikon .ikon { width: 32px; height: 32px; }
.aql-proba { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 980px; margin: 22px auto 0; padding: 14px 22px; border: 1px solid var(--aql-keret); border-radius: 18px; background: var(--aql-feher); color: var(--aql-szoveg); }
.aql-proba > .ikon { flex: none; width: 24px; height: 24px; color: var(--aql-teal); }
.aql-tamogato h3 { font-size: 1.05rem; line-height: 1.4; }
@media (max-width: 640px) { .aql-proba { align-items: flex-start; justify-content: flex-start; padding: 14px 16px; } }

/* ---------- GYIK ---------- */
.aql-gyik__racs { display: grid; gap: 26px; }
.aql-gyik__bal > p { margin: 0; color: var(--aql-halk); font-size: 1.05rem; max-width: 40ch; }
.aql-gyik__lista { display: grid; gap: 12px; }
.aql-gyik__elem { border: 1px solid var(--aql-keret); border-radius: 20px; background: var(--aql-feher); transition: box-shadow .25s, border-color .25s; }
.aql-gyik__elem[open] { border-color: var(--aq-accent-sotet); box-shadow: 0 16px 36px rgba(13, 26, 23, .1); }
.aql-gyik__elem summary { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 18px 10px 12px; font-size: 1.06rem; font-weight: 800; cursor: pointer; list-style: none; }
.aql-gyik__elem summary::-webkit-details-marker { display: none; }
.aql-gyik__elem summary > span:nth-child(2) { flex: 1; }
.aql-gyik__ikon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--aql-teal-halvany); color: var(--aql-teal); }
.aql-gyik__ikon .ikon { width: 22px; height: 22px; }
.aql-gyik__jel { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--aql-papir); }
.aql-gyik__jel::before, .aql-gyik__jel::after { content: ""; position: absolute; left: 9px; top: 15px; width: 14px; height: 2px; border-radius: 2px; background: var(--aql-teal); transition: transform .3s; }
.aql-gyik__jel::after { transform: rotate(90deg); }
.aql-gyik__elem[open] .aql-gyik__jel::after { transform: rotate(0); }
.aql-gyik__elem p { margin: 0; padding: 0 22px 20px 70px; color: var(--aql-halk); }
.aql-gyik__elem summary:focus-visible { outline: 3px solid var(--aq-accent-vilagos); outline-offset: 2px; border-radius: 20px; }

/* ---------- Záró ---------- */
.aql-zaro { position: relative; overflow: hidden; padding: 0 0 clamp(48px, 6vw, 80px); color: #fff;
  background: radial-gradient(60% 100% at 85% 40%, rgba(159, 211, 201, .25), transparent 60%), var(--aql-mely); }
.aql-zaro__belso { position: relative; z-index: 1; display: grid; gap: 30px; align-items: center; }
.aql-zaro h2 { margin: 0 0 24px; color: #fff; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.aql-zaro__tel { display: grid; place-items: center; }
.aql-tel--zaro { width: min(62vw, 260px); }

/* ---------- Szélesebb kijelzők ---------- */
@media (min-width: 760px) {
  .aql-arak { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .aql-parbeszed li { grid-template-columns: 1fr 1fr; align-items: center; }
  .aql-parbeszed .aql-valasz { justify-self: start; }
}
@media (min-width: 960px) {
  .aql:not(.aql--app) .aql-hos__belso { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 40px; }
  .aql:not(.aql--app) .aql-funkcio__racs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
  .aql:not(.aql--app) .aql-funkcio--fordit .aql-funkcio__szinpad { order: 2; }
  .aql:not(.aql--app) .aql-funkcio__szinpad { min-height: 640px; }
  .aql:not(.aql--app) .aql-funkcio .aql-tel { width: 300px; }
  .aql:not(.aql--app) .aql-telepites__racs { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; }
  .aql:not(.aql--app) .aql-gyik__racs { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
  .aql:not(.aql--app) .aql-gyik__bal { position: sticky; top: 110px; }
  .aql:not(.aql--app) .aql-zaro__belso { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
}
@media (max-width: 959px) {
  .aql-jelzes { font-size: .8rem; padding: 8px 12px 8px 8px; }
  .aql-jelzes > .ikon { width: 28px; height: 28px; padding: 6px; }
  .aql-garancia { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .aql-funkcio__szinpad, .aql-telepites__szinpad { min-height: 480px; }
  .aql-gyik__elem p { padding-left: 22px; }
}

/* ---------- Mozgás (csak .aql--mozgas alatt; a JS csökkentett mozgásnál nem kapcsolja be) ---------- */
.aql--mozgas [data-aql-lat] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.aql--mozgas [data-aql-lat].aql-lat { opacity: 1; transform: none; }
.aql--mozgas .aql-parbeszed li:nth-child(2) { transition-delay: .1s; } .aql--mozgas .aql-parbeszed li:nth-child(3) { transition-delay: .2s; }
.aql--mozgas .aql-racs .aql-csempe:nth-child(4n+2) { transition-delay: .08s; } .aql--mozgas .aql-racs .aql-csempe:nth-child(4n+3) { transition-delay: .16s; } .aql--mozgas .aql-racs .aql-csempe:nth-child(4n) { transition-delay: .24s; }
.aql--mozgas .aql-parbeszed .aql-valasz { opacity: 0; transform: translateX(-12px) scale(.96); transition: opacity .5s .45s, transform .5s .45s cubic-bezier(.2, .8, .2, 1); }
.aql--mozgas .aql-parbeszed .aql-lat .aql-valasz { opacity: 1; transform: none; }
.aql--mozgas .aql-tel__tartalom[data-aql-gorget="auto"] { animation: aql-auto-gorget 22s ease-in-out infinite; }
.aql--mozgas .aql-erintes { animation: aql-koppint 5.4s ease-out infinite; }
.aql--mozgas .aql-erintes--k2 { animation-delay: 1.8s; } .aql--mozgas .aql-erintes--k3 { animation-delay: 3.6s; }
.aql--mozgas .aql-jelzes { animation: aql-lebeg 6s ease-in-out infinite; }
.aql--mozgas .aql-jelzes:nth-of-type(2n) { animation-duration: 7.5s; animation-delay: -2s; }
.aql--mozgas .aql-buborekok i { animation: aql-buborek 11s linear infinite; }
.aql--mozgas .aql-buborekok i:nth-child(2n) { animation-duration: 14s; animation-delay: -4s; }
.aql--mozgas .aql-buborekok i:nth-child(3n) { animation-duration: 9s; animation-delay: -7s; }
.aql--mozgas .aql-buborekok i:nth-child(5n) { animation-duration: 16s; animation-delay: -2s; }
.aql--mozgas .aql-folt { animation: aql-lukt 7s ease-in-out infinite; }
.aql--mozgas .aql-hullam__elso { animation: aql-hullam 9s ease-in-out infinite alternate; }
.aql--mozgas .aql-hullam__hatso { animation: aql-hullam 12s ease-in-out infinite alternate-reverse; }
.aql--mozgas .aql-cta__fo { animation: aql-gomb-pulzus 2.8s ease-in-out infinite; }
.aql--mozgas .aql-flakon__test i { animation: aql-flakon 6s ease-in-out infinite; }
.aql--mozgas .aql-pulzus { animation: aql-gyuru 3.6s ease-out infinite; }
.aql--mozgas .aql-pulzus--2 { animation-delay: 1.8s; }
.aql--mozgas .aql-szinkron { animation: aql-pont-gyuru 2.4s ease-out infinite; }
.aql--mozgas .aql-szinkron--2 { animation-delay: 1.2s; }
.aql--mozgas .aql-garancia__ikon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: aql-pajzs 2.6s ease-out infinite; }
.aql--mozgas .aql-ar--plus { animation: aql-plus-feny 4s ease-in-out infinite; }
.aql--mozgas .aql-csempe__ikon { transform: scale(.6); opacity: 0; transition: transform .6s .25s cubic-bezier(.3, 1.6, .5, 1), opacity .3s .25s; }
.aql--mozgas .aql-lat .aql-csempe__ikon { transform: none; opacity: 1; }
/* Mini-grafikák: csak látható csempében futnak. */
.aql--mozgas .aql-csempe:not(.aql-lat) .aql-csempe__grafika * { animation-play-state: paused !important; }
.aql--mozgas .aql-mini-naplo p { animation: aql-sor 7.5s ease-in-out infinite; }
.aql--mozgas .aql-mini-naplo p:nth-child(2) { animation-delay: .35s; } .aql--mozgas .aql-mini-naplo p:nth-child(3) { animation-delay: .7s; }
.aql--mozgas .aql-mini-teendo i::after { animation: aql-pipa 6s ease-in-out infinite; }
.aql--mozgas .aql-mini-teendo p:nth-child(2) i::after { animation-delay: .8s; } .aql--mozgas .aql-mini-teendo p:nth-child(3) i::after { animation-delay: 1.6s; }
.aql--mozgas .aql-mini-viz__viz { animation: aql-viz 6s ease-in-out infinite; }
.aql--mozgas .aql-mini-viz__hullam { animation: aql-viz-hullam 6s ease-in-out infinite, aql-viz-mozog 2.2s linear infinite; }
.aql--mozgas .aql-mini-eszkoz p > i em { animation: aql-csik 5s ease-in-out infinite; transform-origin: left; }
.aql--mozgas .aql-mini-kiadas__s1 { animation: aql-fank1 5s ease-in-out infinite; }
.aql--mozgas .aql-mini-kiadas__s2 { animation: aql-fank2 5s ease-in-out infinite; }
.aql--mozgas .aql-mini-kiadas__s3 { animation: aql-fank3 5s ease-in-out infinite; }
.aql--mozgas .aql-mini-mustra__csillagok .ikon { animation: aql-csillag 4.5s ease-in-out infinite; }
.aql--mozgas .aql-mini-mustra__csillagok .ikon:nth-child(2) { animation-delay: .15s; } .aql--mozgas .aql-mini-mustra__csillagok .ikon:nth-child(3) { animation-delay: .3s; }
.aql--mozgas .aql-mini-mustra__csillagok .ikon:nth-child(4) { animation-delay: .45s; } .aql--mozgas .aql-mini-mustra__csillagok .ikon:nth-child(5) { animation-delay: .6s; }
.aql--mozgas .aql-mini-tema { animation: aql-tema-hatter 6s ease-in-out infinite; }
.aql--mozgas .aql-mini-tema__kartya { animation: aql-tema-kartya 6s ease-in-out infinite; }
.aql--mozgas .aql-mini-tema__kapcsolo { animation: aql-tema-kapcsolo 6s ease-in-out infinite; }
.aql--mozgas .aql-mini-tema__kapcsolo i { animation: aql-tema-gomb 6s ease-in-out infinite; }
.aql--mozgas .aql-mini-szinkron__ut i { animation: aql-szinkron-ut 2.4s ease-in-out infinite; }
.aql--mozgas .aql-mini-szinkron__ut i:nth-child(2) { animation-delay: .8s; } .aql--mozgas .aql-mini-szinkron__ut i:nth-child(3) { animation-delay: 1.6s; }

@keyframes aql-auto-gorget { 0%, 8% { transform: translateY(0); } 46%, 56% { transform: translateY(calc(var(--tav, 600px) * -1)); } 94%, 100% { transform: translateY(0); } }
@keyframes aql-koppint { 0%, 8% { opacity: 0; transform: scale(.4); box-shadow: 0 0 0 0 rgba(43, 117, 112, .5), 0 4px 12px rgba(13, 26, 23, .25); } 12% { opacity: 1; transform: scale(1); } 22% { opacity: 1; transform: scale(.86); } 34% { opacity: 0; transform: scale(1.1); box-shadow: 0 0 0 26px rgba(43, 117, 112, 0), 0 4px 12px rgba(13, 26, 23, 0); } 100% { opacity: 0; } }
@keyframes aql-lebeg { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes aql-buborek { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .9; } 50% { transform: translate(10px, -55vh); } 90% { opacity: .7; } 100% { opacity: 0; transform: translate(-8px, -110vh); } }
@keyframes aql-lukt { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes aql-hullam { from { transform: translateX(-2.5%) scaleY(1); } to { transform: translateX(2.5%) scaleY(1.18); } }
@keyframes aql-gomb-pulzus { 0%, 100% { box-shadow: 0 12px 30px rgba(13, 26, 23, .28), 0 0 0 0 rgba(255, 255, 255, .55); } 50% { box-shadow: 0 12px 30px rgba(13, 26, 23, .28), 0 0 0 12px rgba(255, 255, 255, 0); } }
@keyframes aql-flakon { 0%, 100% { height: 62%; } 70% { height: 18%; } 80% { height: 18%; } }
@keyframes aql-gyuru { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes aql-pont-gyuru { 0% { box-shadow: 0 0 0 0 rgba(159, 211, 201, .7); } 100% { box-shadow: 0 0 0 26px rgba(159, 211, 201, 0); } }
@keyframes aql-pajzs { 0% { box-shadow: 0 0 0 0 rgba(43, 117, 112, .55); } 100% { box-shadow: 0 0 0 22px rgba(43, 117, 112, 0); } }
@keyframes aql-plus-feny { 0%, 100% { box-shadow: 0 30px 70px rgba(15, 48, 56, .35), 0 0 0 0 rgba(159, 211, 201, 0); } 50% { box-shadow: 0 30px 70px rgba(15, 48, 56, .35), 0 0 0 6px rgba(159, 211, 201, .35); } }
@keyframes aql-pont-pulzus { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.6); } }
@keyframes aql-ringat { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg) scale(1.1); } 60% { transform: rotate(10deg); } }
@keyframes aql-sor { 0%, 4% { opacity: 0; transform: translateX(-18px); } 12%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateX(18px); } }
@keyframes aql-pipa { 0%, 12% { transform: scale(0); } 20%, 80% { transform: scale(1); } 90%, 100% { transform: scale(0); } }
@keyframes aql-viz { 0%, 12% { height: 80%; } 40%, 50% { height: 50%; } 80%, 100% { height: 80%; } }
@keyframes aql-viz-hullam { 0%, 12% { bottom: calc(80% - 7px); } 40%, 50% { bottom: calc(50% - 7px); } 80%, 100% { bottom: calc(80% - 7px); } }
@keyframes aql-viz-mozog { from { transform: translateX(0); } to { transform: translateX(25%); } }
@keyframes aql-csik { 0% { transform: scaleX(0); } 30%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes aql-fank1 { 0%, 5% { stroke-dasharray: 0 100; } 30%, 85% { stroke-dasharray: 46 54; } 100% { stroke-dasharray: 0 100; } }
@keyframes aql-fank2 { 0%, 15% { stroke-dasharray: 0 100; } 40%, 85% { stroke-dasharray: 30 70; } 100% { stroke-dasharray: 0 100; } }
@keyframes aql-fank3 { 0%, 25% { stroke-dasharray: 0 100; } 50%, 85% { stroke-dasharray: 24 76; } 100% { stroke-dasharray: 0 100; } }
@keyframes aql-csillag { 0%, 8% { transform: scale(.4) rotate(-30deg); opacity: .2; } 18%, 85% { transform: none; opacity: 1; } 100% { transform: scale(.4); opacity: .2; } }
@keyframes aql-tema-hatter { 0%, 40% { background: linear-gradient(160deg, #EEF6F3, #E3EFEA); } 50%, 90% { background: linear-gradient(160deg, #10201D, #0B1513); } 100% { background: linear-gradient(160deg, #EEF6F3, #E3EFEA); } }
@keyframes aql-tema-kartya { 0%, 40% { background: #fff; color: #14211E; } 50%, 90% { background: #1B2B27; color: #EEF4F0; } 100% { background: #fff; color: #14211E; } }
@keyframes aql-tema-kapcsolo { 0%, 40% { background: #C9D4CF; } 50%, 90% { background: #3C948D; } 100% { background: #C9D4CF; } }
@keyframes aql-tema-gomb { 0%, 40% { transform: none; } 50%, 90% { transform: translateX(24px); } 100% { transform: none; } }
@keyframes aql-szinkron-ut { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }

/* ---------- Finomítások (2. kör QA) ---------- */
.aql-kerdesek { padding-bottom: 0; }
.aql-kerdesek .aql-parbeszed { margin-bottom: clamp(36px, 5vw, 64px); }
.aql-fej:has(> .aql-fej__szam:not(:empty)) { padding-top: clamp(4rem, 2.8rem + 4.6vw, 7.2rem); }
.aql-fej__szam { top: 0; line-height: .82; }
.aql .aql-jelzes, .aql .aql-flakon { color: #0D1A17; }
.aql .aql-jelzes small, .aql .aql-flakon small { color: #5B6B66; }
.aql-telepites .app-letoltes__gomb small { color: #0D1A17; }
.aql-ar__lista { align-content: start; }
.aql-racs { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .aql-racs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .aql:not(.aql--app) .aql-racs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 960px) {
}

/* =====================================================================================================================
   3. kör (projektgazdai kérés, 2026-10-22): a jelzések a telefonhoz (bevezetőben a monitor + telefon csoporthoz) zárnak,
   a csoport görgetésre perspektivikusan dől (váltakozó irányban), a jelzések előrébb lebegnek; a laptop görgetésre kinyílik,
   a tablet és a telefon hozzá zár; finomabb buborékok; görgetésvezérelt kiemelés; GYIK-rajz és -animáció.
   ===================================================================================================================== */

/* ---------- Döntött telefoncsoport, rögzített jelzésekkel ---------- */
.aql-tel-csoport { --irany: 1; position: relative; transform-style: preserve-3d;
  transform: perspective(1500px) rotateY(calc(var(--irany) * (16deg + (var(--p, .5) - .5) * -22deg))) rotateX(calc((var(--p, .5) - .5) * 12deg)) rotateZ(calc(var(--irany) * -1.2deg)); }
/* jobbra = a telefon a szövegtől balra áll, és jobbra, a szöveg felé fordul; balra = fordítva. */
.aql-tel-csoport--jobbra { --irany: 1; }
.aql-tel-csoport--balra { --irany: -1; }
.aql-tel-csoport > .aql-jelzes, .aql-tel-csoport > .aql-flakon { position: absolute; right: auto; bottom: auto; translate: 0 0 70px; }
.aql-hely--bal-fent { left: -36%; top: 13%; }
.aql-hely--bal-lent { left: -38%; top: 66%; }
.aql-hely--jobb-fent { left: 72%; top: 10%; }
.aql-hely--jobb-lent { left: 70%; top: 68%; }
.aql-funkcio__szinpad { perspective: 1500px; }
.aql-funkcio__szinpad > .aql-tel-csoport { z-index: 2; }

/* ---------- Bevezető: asztali monitor + telefon ---------- */
.aql-hos__szinpad { position: relative; display: grid; place-items: center; padding: 20px 0 70px; perspective: 1700px; }
.aql-hos-csoport { position: relative; width: min(100%, 620px); transform-style: preserve-3d;
  transform: rotateY(calc(-12deg + (var(--p, .5) - .5) * 26deg)) rotateX(calc(5deg + (var(--p, .5) - .5) * -10deg)); }
.aql-monitor { margin: 0 0 0 0; width: 86%; }
.aql-monitor__kijelzo { padding: 1.8%; border-radius: 16px; background: linear-gradient(155deg, #2A3834, #0B1513 55%, #1B2724); box-shadow: 0 40px 80px rgba(4, 16, 14, .5), inset 0 0 0 1.5px #3A4A46; }
.aql-monitor__kijelzo img { display: block; width: 100%; height: auto; border-radius: 6px; }
.aql-monitor__nyak { display: block; width: 13%; height: 54px; margin: 0 auto; background: linear-gradient(90deg, #8E9A95, #C9D2CE 50%, #8E9A95); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.aql-monitor__talp { display: block; width: 38%; height: 12px; margin: 0 auto; border-radius: 8px 8px 12px 12px; background: linear-gradient(180deg, #D3DBD7, #8E9A95); box-shadow: 0 18px 30px rgba(0, 0, 0, .35); }
.aql-hos-csoport .aql-hos__elso { position: absolute; z-index: 2; right: -4%; bottom: -8%; width: 33%; transform: translateZ(80px) rotateY(-6deg); }
.aql-hos-csoport .aql-tel { width: 100%; }
.aql-hos-csoport > .aql-jelzes { position: absolute; z-index: 3; translate: 0 0 120px; }
.aql-hely--hos1 { left: -6%; top: 58%; }
.aql-hely--hos2 { left: 34%; top: -9%; }
.aql-hely--hos3 { left: 62%; top: 22%; }

/* ---------- Eszközök: a laptop görgetésre kinyílik, a tablet és a telefon hozzá zár ---------- */
.aql-eszkozok__szinpad { position: relative; z-index: 3; display: grid; place-items: center; margin-top: 36px; padding: 0 0 clamp(60px, 9vw, 120px); perspective: 1800px; }
.aql-gep { position: relative; width: min(84%, 820px); transform-style: preserve-3d;
  transform: rotateX(calc(10deg + (1 - var(--nyit, 1)) * 14deg)) rotateY(calc((var(--p, .5) - .5) * -16deg)); }
.aql-gep__fedel { position: relative; transform-origin: 50% 100%; transform-style: preserve-3d; transform: rotateX(calc((1 - var(--nyit, 1)) * -96deg)); }
.aql-gep__fedel .aql-laptop__kijelzo { backface-visibility: hidden; }
.aql-gep__fedel::after { content: ""; position: absolute; inset: 0; border-radius: 18px 18px 6px 6px; background: radial-gradient(circle at 50% 45%, #4A5B56 0 4%, transparent 4.5%), linear-gradient(160deg, #3A4A46, #151F1C); transform: rotateY(180deg); backface-visibility: hidden; }
.aql-gep .aql-tablet { position: absolute; z-index: 2; left: -11%; bottom: -16%; width: 29%; margin: 0;
  transform: translate3d(calc((1 - var(--nyit, 1)) * -70%), 0, 90px) rotateY(calc(16deg + (var(--p, .5) - .5) * 14deg)) rotateZ(-5deg); opacity: calc(.15 + var(--nyit, 1) * .85); }
.aql-gep .aql-eszkozok__tel { position: absolute; z-index: 3; right: -8%; bottom: -22%; width: 22%;
  transform: translate3d(calc((1 - var(--nyit, 1)) * 80%), 0, 130px) rotateY(calc(-18deg + (var(--p, .5) - .5) * -14deg)) rotateZ(4deg); opacity: calc(.15 + var(--nyit, 1) * .85); }
.aql-gep .aql-eszkozok__tel .aql-tel { width: 100%; }
.aql-gep .aql-szinkron--1 { left: 20%; top: 96%; } .aql-gep .aql-szinkron--2 { right: 16%; top: 92%; }

/* ---------- Letöltés gombok: hoverkor is látható ikon ---------- */
.aql-telepites .app-letoltes__gomb:hover .app-letoltes__kor, .aql-telepites .app-letoltes__gomb:focus-visible .app-letoltes__kor { border-color: transparent; background: var(--aq-accent-sotet); color: #fff; }

/* ---------- Finomabb buborékok: apró, lágy fénypöttyök és néhány elmosott fényfolt ---------- */
.aql-buborekok i { width: 6px; height: 6px; border: 0; background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .95), rgba(190, 232, 224, .5) 45%, rgba(159, 211, 201, 0) 72%); box-shadow: 0 0 10px rgba(159, 211, 201, .45); }
.aql-buborekok i:nth-child(2n) { width: 4px; height: 4px; }
.aql-buborekok i:nth-child(3) , .aql-buborekok i:nth-child(6), .aql-buborekok i:nth-child(9) { width: 34px; height: 34px; background: radial-gradient(circle, rgba(159, 211, 201, .32), rgba(159, 211, 201, 0) 70%); box-shadow: none; filter: blur(3px); }
.aql--mozgas .aql-buborekok i { animation-name: aql-buborek-finom; }
@keyframes aql-buborek-finom { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: .75; } 35% { transform: translate(8px, -38vh); } 65% { transform: translate(-6px, -72vh); opacity: .55; } 100% { opacity: 0; transform: translate(4px, -112vh); } }

/* ---------- Görgetésvezérelt kiemelés (visszagörgetve visszahúzódik); a bevezetőben betöltéskor fut ---------- */
.aql--mozgas .aql-kiemel { background-size: calc(var(--kp, 0) * 100%) 100%; }
.aql--mozgas .aql-hos .aql-kiemel { background-size: 100% 100%; animation: aql-kiemel-be 1.2s .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes aql-kiemel-be { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

/* ---------- GYIK: rajz és animált nyitás ---------- */
.aql-rajz { display: block; width: min(100%, 380px); height: auto; margin-top: 26px; overflow: visible; }
.aql-rajz__arnyek { fill: rgba(15, 48, 56, .1); }
.aql-rajz__viz { fill: #D9EFEA; }
.aql-rajz__hullamvonal { fill: #BFE3DB; }
.aql-rajz__homok { fill: #E8D9B5; }
.aql-rajz__noveny { fill: none; stroke: #3F7050; stroke-width: 4; stroke-linecap: round; }
.aql-rajz__noveny--2 { stroke: #5C9068; }
.aql-rajz__ko { fill: #A9B5AE; }
.aql-rajz__hal-test { fill: #E0A43A; } .aql-rajz__hal-farok { fill: #C9822B; } .aql-rajz__hal-szem { fill: #0D1A17; }
.aql-rajz__hal-csik { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.aql-rajz__hal { transform: translate(70px, 150px); }
.aql-rajz__buborek { fill: none; stroke: #7CC4D6; stroke-width: 1.6; }
.aql-rajz__keret { fill: none; stroke: #22605C; stroke-width: 3; }
.aql-rajz__fedo { fill: #22605C; }
.aql-rajz__tel-test { fill: #0F3038; } .aql-rajz__tel-kepernyo { fill: #F2F7F5; } .aql-rajz__tel-sziget { fill: #0F3038; }
.aql-rajz__kerdes rect { fill: #fff; stroke: #DCE5DF; } .aql-rajz__kerdes text { fill: #14211E; font-size: 12px; font-weight: 800; text-anchor: middle; }
.aql-rajz__valasz rect:first-child { fill: #2B7570; } .aql-rajz__valasz path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.aql-rajz__vonal { fill: rgba(255, 255, 255, .7); }
.aql-rajz__grafikon rect { fill: #fff; stroke: #DCE5DF; } .aql-rajz__grafikon path { fill: none; stroke: #2B7570; stroke-width: 2.6; stroke-linecap: round; }
.aql-rajz__kerdojel circle { fill: #E0A43A; } .aql-rajz__kerdojel text { fill: #2B1B05; font-size: 28px; font-weight: 900; text-anchor: middle; }
.aql--mozgas .aql-rajz__hal { animation: aql-rajz-hal 9s ease-in-out infinite; }
.aql--mozgas .aql-rajz__buborek { animation: aql-rajz-buborek 3.6s ease-in infinite; transform-box: fill-box; }
.aql--mozgas .aql-rajz__buborek--2 { animation-delay: 1.2s; } .aql--mozgas .aql-rajz__buborek--3 { animation-delay: 2.3s; }
.aql--mozgas .aql-rajz__kerdojel { animation: aql-rajz-lebeg 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.aql--mozgas .aql-rajz__kerdes { animation: aql-rajz-buborek-be 6s ease-in-out infinite; transform-box: fill-box; transform-origin: 100% 100%; }
.aql--mozgas .aql-rajz__valasz { animation: aql-rajz-buborek-be 6s .8s ease-in-out infinite; transform-box: fill-box; transform-origin: 0 100%; }
.aql--mozgas .aql-rajz__grafikon path { stroke-dasharray: 80; animation: aql-rajz-vonal 6s 1.4s ease-in-out infinite; }
.aql--mozgas .aql-rajz__noveny { animation: aql-rajz-ring 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.aql--mozgas .aql-rajz__noveny--2 { animation-delay: -2s; }
/* A hal balra néz (feje az origónál): jobbra úszva tükrözve (+60 px, hogy helyben forduljon), balra úszva eredeti állásban. */
@keyframes aql-rajz-hal { 0% { transform: translate(120px, 150px) scaleX(-1); } 45% { transform: translate(200px, 132px) scaleX(-1); } 50% { transform: translate(140px, 133px) scaleX(1); } 95% { transform: translate(60px, 151px) scaleX(1); } 100% { transform: translate(60px, 150px) scaleX(1); } }
@keyframes aql-rajz-buborek { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-110px); opacity: 0; } }
@keyframes aql-rajz-lebeg { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-8px) rotate(6deg); } }
@keyframes aql-rajz-buborek-be { 0%, 6% { opacity: 0; transform: scale(.6); } 14%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes aql-rajz-vonal { 0%, 10% { stroke-dashoffset: 80; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 80; } }
@keyframes aql-rajz-ring { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.aql-gyik__elem { overflow: hidden; }
.aql-gyik__elem summary { transition: background .25s; }
.aql-gyik__elem summary:hover { background: rgba(60, 148, 141, .05); }
.aql-gyik__elem summary:hover .aql-gyik__ikon .ikon { animation: aql-ringat .6s ease; }
.aql-gyik__ikon { transition: background .3s, color .3s, transform .3s; }
.aql-gyik__elem[open] .aql-gyik__ikon { background: var(--aq-accent-sotet); color: #fff; transform: rotate(-8deg) scale(1.06); }
.aql-gyik__jel { transition: background .3s, transform .4s cubic-bezier(.3, 1.4, .5, 1); }
.aql-gyik__elem[open] .aql-gyik__jel { background: var(--aq-accent-sotet); transform: rotate(180deg); }
.aql-gyik__elem[open] .aql-gyik__jel::before, .aql-gyik__elem[open] .aql-gyik__jel::after { background: #fff; }

/* ---------- Kis kijelzők ---------- */
@media (max-width: 959px) {
  .aql-hely--bal-fent, .aql-hely--bal-lent { left: -14%; } .aql-hely--jobb-fent, .aql-hely--jobb-lent { left: 54%; }
  .aql-tel-csoport { transform: perspective(1500px) rotateY(calc(var(--irany) * (10deg + (var(--p, .5) - .5) * -14deg))) rotateX(calc((var(--p, .5) - .5) * 8deg)); }
  .aql-hely--hos1 { left: -2%; } .aql-hely--hos3 { left: 46%; top: 30%; }
}
@media (max-width: 520px) {
  .aql-hos-csoport { width: 100%; }
  .aql-hos-csoport > .aql-jelzes { display: none; }
  .aql-hos-csoport > .aql-jelzes.aql-hely--hos1, .aql-hos-csoport > .aql-jelzes.aql-hely--hos3 { display: flex; }
  .aql-hely--hos3 { left: 30%; top: 2%; }
  .aql-hos__szoveg { display: flex; flex-direction: column; }
  .aql-hos__jelek { order: 1; margin: 20px 0 0; }
}
@media (max-width: 600px) {
  .aql-hely--jobb-fent, .aql-hely--jobb-lent { left: auto; right: -9%; }
  .aql-hely--bal-fent, .aql-hely--bal-lent { left: -9%; }
  .aql-tel-csoport > .aql-jelzes, .aql-tel-csoport > .aql-flakon { max-width: 64vw; white-space: normal; }
}
@media (max-width: 600px) { .aql-gep { width: 74%; } .aql-gep .aql-eszkozok__tel { right: -12%; width: 24%; } .aql-gep .aql-tablet { left: -14%; width: 30%; } }