/* =========================================================================
   AZ ENGINE DESIGN-NYELVE, publikus oldalon.
   Tokenek: web/src/styles/tokens.css (a Sync Mixing admin felületéé).
   Szín SOHA nem kerül a kódba hexben — csak tokenen át.
   ========================================================================= */
@font-face{font-family:'Readex Pro';font-style:normal;font-weight:200 700;font-display:swap;
  src:url('/assets/readex-pro-latin.woff2') format('woff2')}
:root{
  --ink:#0a0a0a; --body:#5B6570; --muted:#98A2AC;
  --line:#E3E8EB; --line-soft:#EFF3F5; --bg:#F4F6F8; --card:#fff; --soft:#F2F5F7; --hover:#F5F8FA;
  --brand:#02DDF7; --brand-hover:#00C9E0; --brand-ink:#0D7F92; --brand-soft:#F2FCFE;
  --on-brand:#04252A; --focus:#9BEBF7;
  --nav:#0E1114; --nav-2:#1A2025; --nav-tx:#A8B3BC; --nav-line:#1C2227;
  --ok-ink:#0F7A52; --ok-bg:#E4F4EC;
  --radius:14px; --header-h:64px;
  --font:'Readex Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
.burok{width:100%;max-width:1180px;margin:0 auto;padding:0 26px}

/* ---- FEJLÉC: sötét sáv, pontosan --header-h magas ---------------------- */
.fejlec{height:var(--header-h);background:var(--nav);display:flex;align-items:center}
.fejlec .burok{display:flex;align-items:center;gap:20px}
.fejlec img{height:30px;width:auto;display:block}
.fejlec nav{margin-left:auto;display:flex;gap:22px}
.fejlec a{color:var(--nav-tx);text-decoration:none;font-size:.8125rem;font-weight:500}
.fejlec a:hover{color:#fff}

/* ---- BEVEZETŐ --------------------------------------------------------- */
.beveto{padding:44px 0 30px}
.jelveny{display:inline-flex;align-items:center;gap:7px;background:var(--brand-soft);
  color:var(--brand-ink);border:1px solid #BFEFF7;border-radius:99px;padding:4px 12px;
  font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px}
.jelveny .pont{width:6px;height:6px;border-radius:50%;background:var(--brand)}
h1{margin:0 0 12px;font-size:2.1rem;line-height:1.2;letter-spacing:-.02em;font-weight:700}
.lead-eros{margin:0 0 12px;font-size:1.0625rem;font-weight:600;color:var(--ink);
  line-height:1.5;letter-spacing:-.01em}
/* Teljes szelesseg (tulaj-keres): a `max-width` folosleges tordelest okozott. */
.lead{margin:0 0 8px;font-size:.9375rem;color:var(--body);line-height:1.7}
.lead:last-of-type{margin-bottom:0}
.chipek{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;
  border-radius:99px;border:1px solid var(--line);background:var(--card);
  font-size:.75rem;font-weight:600;color:var(--body);line-height:1}
.chip em{font-style:normal;font-family:var(--mono);font-size:.6875rem;padding:2px 7px;
  border-radius:99px;background:var(--soft);font-variant-numeric:tabular-nums}

/* ---- KÁRTYÁK ---------------------------------------------------------- */
/* ⚠️ KET OSZLOP (tulaj-dontes). A negy kategoria egymas mellett ~270px-es
   hasabokat adott: a musornevek ket-harom sorba tortek, a szamlista zsufolt
   volt. Igy 2x2-ben allnak, hasabonkent ketszer annyi hellyel. */
.racs{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);padding-bottom:44px}
.demo-kartya{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 1px 2px rgba(14,18,32,.04)}
.k-fej{background:var(--nav);color:#fff;padding:16px 20px 18px;display:flex;align-items:flex-start;gap:14px;
  /* ⚠️ AZONOS MAGASSAG mind a negy kartyan. Az "IDs, jingles & sweepers" cim
     ket sorba torik a negy-oszlopos hasabban, es enelkul annak a kartyanak a
     lejatszoja lejjebb csuszna a tobbinel - a negy kartya egy sorban all,
     tehat az elcsuszas rogton latszik. */
  min-height:132px}
.k-fej h3{margin:0;font-size:1.375rem;font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.2}
/* Egy bekezdes blokkonkent, kiemeles nelkul (tulaj-atirasa 2026-09-09: a
   cim + kiemelt mondat + magyarazat harmas "tul kaoszos" volt). */
.k-szoveg{margin:8px 0 0;font-size:.8125rem;color:var(--nav-tx);line-height:1.6}
.k-tx{min-width:0}
.k-db{margin-left:auto;margin-top:3px;flex:none;font-family:var(--mono);font-size:.72rem;color:var(--nav-tx);
  background:var(--nav-2);border-radius:99px;padding:3px 10px;font-variant-numeric:tabular-nums}
.k-torzs{padding:16px 20px 14px}
/* ⚠️ A kategoria MINDEN szovege a SOTET fejlecben van (tulaj-keres), a cim
   alatt egy kiemelt sor es egy magyarazat. A `min-height` azert kell, mert a
   kartyak parban allnak: kulonbozo hosszu magyarazatoknal a szomszedos kartya
   lejatszoja elcsuszna tole. */
.mix-kartya .k-fej{min-height:0}
/* A teljes musorok kartyaja atér a rácson, ezért a szovege is fusson vegig -
   a `max-width` itt fölöslegesen szűkitene (tulaj-keres). */
.mix-kartya .k-szoveg{max-width:none}

.lejatszo{display:grid;grid-template-columns:auto auto 1fr auto;gap:12px;align-items:center}
.nagy-gomb{width:38px;height:38px;flex:none;border-radius:50%;cursor:pointer;padding:0;border:0;
  background:var(--brand);color:var(--on-brand);display:flex;align-items:center;
  justify-content:center;transition:background .14s,transform .14s}
.nagy-gomb:hover{background:var(--brand-hover)}
.nagy-gomb:active{transform:scale(.94)}
.nagy-gomb .ikon-szunet{display:none}
.demo-kartya.szol .nagy-gomb .ikon-play{display:none}
.demo-kartya.szol .nagy-gomb .ikon-szunet{display:block}
.ido{font-family:var(--mono);font-size:.6875rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
.hullam{display:block;width:100%;height:38px;cursor:pointer;touch-action:none}

/* ---- SZÁMLISTA: az engine tracklist-sorainak ritmusa ------------------- */
.szamok{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.szam{display:grid;grid-template-columns:30px 1fr auto;gap:14px;align-items:center;
  width:100%;padding:10px 20px;border:0;border-bottom:1px solid var(--line-soft);
  background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.szamok li:last-child .szam{border-bottom:0}
.szam:hover{background:var(--hover)}
/* ⚠️ KET SZINT, es ez nem diszites.
   A lap betoltesekor az ELSO sav be van toltve a lejatszoba (az indul el, ha
   valaki a nagy gombra nyom), de MEG NEM SZOL. Egyetlen kijeloles-stilussal ez
   ugy nezett ki, mintha jatszana - a tulaj ezt szova is tette. Ezert:
     .kivalasztott          = betoltve, ez indulna  -> halvany
     .szol .kivalasztott    = eppen szol            -> eros cian */
.szam.kivalasztott{background:var(--hover)}
.szam-sorszam{font-family:var(--mono);font-size:.6875rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
.szam-cim{font-size:.78rem;font-weight:600;line-height:1.35;overflow-wrap:break-word}
.szam.kivalasztott .szam-cim{color:var(--ink)}
.szam-ido{font-family:var(--mono);font-size:.6875rem;color:var(--muted);
  font-variant-numeric:tabular-nums}

/* Ami EPPEN SZOL: eros cian jelzes - ez valik el a fenti "betoltve" allapottol. */
.demo-kartya.szol .szam.kivalasztott{background:var(--brand-soft);
  box-shadow:inset 4px 0 0 var(--brand)}
.demo-kartya.szol .szam.kivalasztott .szam-cim{color:var(--brand-ink);font-weight:700}
.demo-kartya.szol .szam.kivalasztott .szam-sorszam,
.demo-kartya.szol .szam.kivalasztott .szam-ido{color:var(--brand-ink)}

/* ---- ZÁRÓ: sötét CTA-kártya, minden középen ---------------------------
   Egy oszlop: cím → szöveg → gomb → e-mail → válaszidő (tulaj-kérés).
   ⚠️ ITT SZANDEKOSAN NINCS URLAP. Volt egy harom mezos valtozat, de bekuldo
   vegpont nelkul csak latszatot csinalt volna. Ha egyszer lesz vegpont, ITT
   johet vissza - es CSAK 2xx valasz utan szabad sikert irni.
   ------------------------------------------------------------------------ */
.zaro{padding:44px 0 56px}
.cta{position:relative;overflow:hidden;background:var(--nav);border-radius:22px;
  padding:52px 40px;display:flex;flex-direction:column;align-items:center;text-align:center}
/* A halvány ciános derengés alul középen — egy rétegben, hogy a szöveg
   kontrasztja ne romoljon. */
/* ⚠️ A derenges KET retegbol all, es SZANDEKOSAN halvany marad: a szoveg
   feher a sotet lapon, egy erosebb cian folt alatta rontana az olvashatosagot.
   A felso hajszalvonal adja a "kiemelt kartya" erzetet, nem a folt erossege. */
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 90% at 50% 120%, rgba(2,221,247,.30), transparent 68%),
    radial-gradient(38% 62% at 12% 8%, rgba(2,221,247,.14), transparent 70%)}
.cta::after{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(2,221,247,.55),transparent)}
.cta > *{position:relative}
.cta h2{margin:0 0 14px;font-size:1.9rem;line-height:1.2;letter-spacing:-.02em;color:#fff}
.cta p{margin:0;color:var(--nav-tx);font-size:.9375rem;line-height:1.65;max-width:72ch}
.cta-fogomb{display:inline-flex;align-items:center;gap:11px;background:var(--brand);
  color:var(--on-brand);border-radius:12px;padding:16px 28px;text-decoration:none;
  font-weight:700;font-size:1rem;margin-top:26px;
  transition:background .14s,transform .14s}
.cta-fogomb:hover{background:var(--brand-hover);transform:translateY(-1px)}
.cta-masodik{margin-top:12px !important;color:#7C8792 !important;font-size:.875rem !important}
.cta-cim{margin-top:18px !important;font-size:.9375rem}
.cta-cim a{color:var(--brand);text-decoration:none}
.cta-cim a:hover{text-decoration:underline}
.cta-valasz{margin-top:8px !important;font-size:.8125rem;color:#7C8792}

@media (max-width:860px){
  .cta{padding:38px 22px;border-radius:18px}
  .cta h2{font-size:1.5rem}
}

.lablec{background:var(--nav);color:var(--nav-tx);padding:26px 0;font-size:.75rem}
.lablec .nev{color:#fff;font-weight:700;letter-spacing:.06em;margin:0 0 6px}
.lablec p{margin:0 0 3px}
@media (max-width:820px){h1{font-size:1.6rem} .racs{grid-template-columns:1fr}}

/* ---- Mixcloud: teljes musorok ------------------------------------------
   ⚠️ KOZVETLEN IFRAME-EK (tulaj-dontes): a Mixcloud MAR A LAP BETOLTESEKOR
   sutit tesz le, a latogato dontese elott. A lenti suti-sav ezert NEM kapu,
   csak tajekoztatas - ne hidd rola, hogy megvedi az oldalt.
   ------------------------------------------------------------------------ */
/* Tobb levego a kategoria-kartyak es a teljes musorok kozott (tulaj-keres):
   mas tipusu tartalom kovetkezik, a szunet ezt jelzi. */
.mix-kartya{grid-column:1/-1;margin-top:30px}
.mix-racs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(25rem,1fr))}
.mix-keret{display:block;width:100%;height:120px;border:0}
.mix{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}

/* ---- suti-tajekoztato --------------------------------------------------
   ⚠️ TAJEKOZTATAS, NEM HOZZAJARULAS-KERES: a lejatszok tole fuggetlenul
   betoltodnek. Egyetlen "Got it" gomb van; ket gomb azt sugallna, hogy a
   dontesnek kovetkezmenye van.
   ------------------------------------------------------------------------ */
.suti-sav{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:var(--card);
  border-top:1px solid var(--line);box-shadow:0 -8px 34px -16px rgba(14,18,32,.4);
  transform:translateY(100%);transition:transform .22s ease}
.suti-sav.be{transform:none}
.suti-sav .burok{display:flex;gap:22px;align-items:center;padding:14px 26px}
.suti-szoveg{flex:1;min-width:0}
.suti-szoveg b{display:block;font-size:.8125rem;font-weight:700;margin-bottom:2px}
.suti-szoveg p{margin:0;font-size:.75rem;color:var(--body);line-height:1.55}
.suti-gombok{flex:none}
/* ⚠️ TELJES szabaly, nem raepites: a kozos `.gomb` osztaly kikerult a
   stiluslapbol a zaro szekcio atirasakor, es ez a gomb NEMAN a bongeszo
   szurke alapertelmezeset kapta. Igy nem fugg masik szabalytol. */
.suti-gombok .gomb{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand);color:var(--on-brand);border:0;border-radius:10px;
  font:inherit;font-size:.8125rem;font-weight:700;padding:10px 20px;cursor:pointer;
  transition:background .14s}
.suti-gombok .gomb:hover{background:var(--brand-hover)}
.suti-link{background:none;border:0;padding:0;font:inherit;font-size:.75rem;
  color:var(--nav-tx);cursor:pointer;text-decoration:underline}
.suti-link:hover{color:#fff}
:where(a,button):focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
@media (max-width:720px){
  .suti-sav{max-height:70vh;max-height:70dvh;overflow-y:auto}
  .suti-sav .burok{flex-direction:column;align-items:stretch;gap:12px}
  .suti-gombok .gomb{width:100%;justify-content:center}
}

/* ------------------------------------------------------------------------
   Rendelés-gombok (tulaj-kérés, 2026-10-05; terv: docs/terv/demos-rendeles.html)
   A hero alatt az "Order your audio branding", a záró dobozban az "Order online"
   a "Get in touch" mellett (az utóbbi itt másodlagos, körvonalas).
   ------------------------------------------------------------------------ */
.rendel-sor{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:22px}
.rendel-gomb{display:inline-flex;align-items:center;gap:10px;background:var(--brand);color:var(--on-brand);border-radius:12px;padding:14px 24px;text-decoration:none;font-weight:700;font-size:1rem;transition:background .14s,transform .14s}
.rendel-gomb:hover{background:var(--brand-hover);transform:translateY(-1px)}
.rendel-ar{font-size:.875rem;color:var(--body)}
.rendel-ar b{color:var(--ink)}
.cta-gombok{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.cta-gombok .cta-fogomb{margin-top:0}
.cta-fogomb.masodlagos{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.cta-fogomb.masodlagos:hover{background:rgba(255,255,255,.08)}