/* =============================================================================
   CORGANIZE — a PUBLIKUS felület egyetlen design-forrása.
   Használja: landing, jogi oldalak, blog, és minden jövőbeli aloldal.

   MIÉRT EZ A FÁJL LÉTEZIK
   A tokenek korábban KÉT helyen éltek: a landing inline <style>-jában és a
   legal.css-ben — külön-külön leírva. Ezért csúszott szét a két felület, és
   ezért nem lehetett „egy helyen változtatok, mindenhol változik" módon
   dolgozni. Mostantól MINDEN publikus oldal ezt tölti be, és CSAK az
   oldal-specifikus különbséget írja felül.

   SZABÁLYOK
   1. Új színt, méretet, árnyékot NE írj közvetlenül az oldalba — előbb ide,
      tokenként. Ha egy érték csak egy helyen kell, valószínűleg nem token.
   2. A komponens-osztályok (.cg-*) prefixesek, hogy ne ütközzenek az oldalak
      saját osztályaival (a landing sok saját osztályt használ).
   3. SZÁNDÉKOSAN VILÁGOS-ONLY. A publikus oldal marketinganyag, egy elkötelezett
      látvánnyal; a sötét mód az APPBAN él (web/src/index.css). Ne vezess be ide
      sötét változatot külön döntés nélkül.
   4. Az élő kalauz a PLATFORM-ADMIN Design guide fülén él (belső dokumentum,
      nincs publikus címe) — ha ide új komponens kerül, oda is vedd fel.

   Kapcsolódó: docs/DESIGN-GUIDE.md (app), docs/BRAND-NAMING.md (szövegek).
   ========================================================================== */

:root {
  /* --- MÁRKA-SZÍNEK ------------------------------------------------------- */
  --cg-blue: #2E7CF6;
  --cg-cyan: #24C4F4;
  --cg-green: #3BD98A;
  --cg-green-2: #23B573;
  --cg-navy: #0E1B2A;

  /* Gradiensek — a márka vizuális aláírása. A kék a TERMÉK, a zöld az
     EREDMÉNY (kész, megoldva) jelentésű; ne cseréld fel őket. */
  --cg-grad-blue: linear-gradient(92deg, var(--cg-blue) 0%, var(--cg-cyan) 100%);
  --cg-grad-green: linear-gradient(92deg, var(--cg-green) 0%, var(--cg-green-2) 100%);

  /* --- SEMLEGESEK --------------------------------------------------------- */
  /* A szürkék ENYHÉN KÉK árnyalatúak (nem tiszta szürke) — így ülnek meg a
     márka-kék mellett. Ez választás, nem véletlen. */
  --cg-ink: #10203A;        /* főszöveg, címsorok */
  --cg-ink-2: #5F6B7D;      /* másodlagos szöveg, leírások */
  --cg-ink-3: #8A94A6;      /* halvány: lábjegyzet, meta */
  --cg-bg: #FBFBFD;         /* oldal-háttér */
  --cg-card: #F4F6F9;       /* kártya / kiemelt sáv */
  --cg-white: #FFFFFF;
  --cg-line: rgba(16, 32, 58, .10);
  --cg-line-strong: rgba(16, 32, 58, .16);

  /* --- TIPOGRÁFIA --------------------------------------------------------- */
  /* Display: Space Grotesk (címsorok, logó-szöveg). Body: rendszer-stack —
     gyors, natív érzet, nincs betöltési villanás a folyószövegen. */
  --cg-font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cg-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Helvetica, Arial, sans-serif;

  /* Típus-skála (mobil-first; a nagy méretek clamp-pel nőnek) */
  --cg-t-hero: clamp(2.4rem, 6vw, 4rem);
  --cg-t-h1: clamp(2rem, 4.5vw, 3rem);
  --cg-t-h2: clamp(1.5rem, 3vw, 2.125rem);
  --cg-t-h3: 1.25rem;
  --cg-t-body: 1rem;
  --cg-t-small: .875rem;
  --cg-t-tiny: .78rem;

  /* --- TÉR, FORMA, ÁRNYÉK ------------------------------------------------- */
  --cg-max: 1080px;         /* tartalom-szélesség (a landing mérete) */
  --cg-max-text: 720px;     /* hosszú folyószöveg (jogi, blog) — olvashatóság */
  --cg-gap: 22px;           /* alap oldalsó margó */
  --cg-sec: clamp(56px, 9vw, 104px);  /* szekciók közti függőleges tér */

  --cg-r-sm: 8px;
  --cg-r: 14px;             /* az alap forma — kártya, mező, doboz */
  --cg-r-lg: 22px;
  --cg-r-pill: 980px;

  --cg-shadow: 0 1px 2px rgba(16, 32, 58, .04), 0 8px 24px -12px rgba(16, 32, 58, .18);
  --cg-shadow-lg: 0 2px 6px rgba(16, 32, 58, .06), 0 24px 60px -24px rgba(16, 32, 58, .30);
}

/* =============================================================================
   ALAP
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}
body {
  font-family: var(--cg-font-body);
  font-size: var(--cg-t-body);
  line-height: 1.6;
  background: var(--cg-bg);
  color: var(--cg-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: rgba(46, 124, 246, .18); }

h1, h2, h3, h4 { font-family: var(--cg-font-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: var(--cg-t-h1); }
h2 { font-size: var(--cg-t-h2); }
h3 { font-size: var(--cg-t-h3); letter-spacing: -.015em; }

a { color: var(--cg-blue); }

/* Billentyűzetes fókusz — MINDIG látszódjon (akadálymentesség). */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--cg-blue);
  outline-offset: 2px;
  border-radius: var(--cg-r-sm);
}

/* =============================================================================
   ELRENDEZÉS
   ========================================================================== */
.cg-wrap { max-width: var(--cg-max); margin: 0 auto; padding-inline: var(--cg-gap); }
.cg-wrap-text { max-width: var(--cg-max-text); margin: 0 auto; padding-inline: var(--cg-gap); }
.cg-section { padding-block: var(--cg-sec); }

/* Szekció-fejléc: eyebrow + cím + alcím. Ez a leggyakoribb minta az oldalon. */
.cg-eyebrow {
  display: inline-block; margin-bottom: 12px;
  font-size: var(--cg-t-tiny); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cg-blue);
}
.cg-lead { font-size: 1.0625rem; color: var(--cg-ink-2); max-width: 62ch; }

/* =============================================================================
   GOMBOK
   ========================================================================== */
.cg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: var(--cg-t-small);
  padding: 11px 22px; border-radius: var(--cg-r-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: opacity .2s ease, background .2s ease, border-color .2s ease, transform .12s ease;
}
.cg-btn:active { transform: translateY(1px); }
.cg-btn-primary { background: var(--cg-grad-blue); color: #fff; }
.cg-btn-primary:hover { opacity: .88; }
.cg-btn-green { background: var(--cg-grad-green); color: #fff; }
.cg-btn-green:hover { opacity: .88; }
/* A másodlagos gomb FEHÉR kitöltésű, nem áttetsző. Áttetszően a szürke
   lap-háttéren szinte eltűnt: se felülete, se súlya nem volt, csak egy vékony
   keret lebegett a semmiben. A fehér kitöltés elemeli a laptól, és a kártyákon
   (ahol amúgy is fehér a háttér) a keret adja a formáját. */
.cg-btn-ghost { background: var(--cg-white); color: var(--cg-ink); border-color: var(--cg-line-strong); }
.cg-btn-ghost:hover { background: var(--cg-card); border-color: var(--cg-ink-3); }
.cg-btn-white { background: #fff; color: var(--cg-ink); box-shadow: var(--cg-shadow); }
.cg-btn-white:hover { opacity: .9; }
.cg-btn-lg { padding: 14px 28px; font-size: 1rem; }

/* =============================================================================
   JELÖLÉSEK
   ========================================================================== */
.cg-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--cg-t-tiny); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--cg-r-pill);
  background: rgba(46, 124, 246, .10); color: var(--cg-blue);
}
.cg-badge-green { background: rgba(59, 217, 138, .14); color: var(--cg-green-2); }
.cg-badge-neutral { background: var(--cg-card); color: var(--cg-ink-2); }

.cg-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--cg-t-small); color: var(--cg-ink-2);
  padding: 7px 14px; border-radius: var(--cg-r-pill);
  background: var(--cg-white); border: 1px solid var(--cg-line);
  box-shadow: var(--cg-shadow);
}

/* =============================================================================
   KÁRTYÁK
   ========================================================================== */
.cg-card {
  background: var(--cg-white); border: 1px solid var(--cg-line);
  border-radius: var(--cg-r); padding: 26px;
}
.cg-card-soft { background: var(--cg-card); border-color: transparent; }
.cg-card-lift { box-shadow: var(--cg-shadow); }
.cg-card h3 { margin-bottom: 8px; }
.cg-card p { color: var(--cg-ink-2); font-size: var(--cg-t-small); }
/* Ikon-chip a kártya tetejére (megoldás-aloldalak „mit kapsz" rácsa). Egy
   rácson belül MINDEN kártya MÁS színt kap (tulaj-döntés, 2026-07-22): a
   fele-fele kék/zöld osztás jelentésnek látszott, pedig nem volt az — a
   színek itt megkülönböztetnek, nem jelentenek. Hat árnyalat van; ha hatnál
   több kártya kell, ott már úgyis rossz a rács. */
.cg-card-ic { width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: rgba(46,124,246,.10); color: var(--cg-blue);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.cg-card-ic.cyan { background: rgba(36,196,244,.14); color: #0E9CC9; }
.cg-card-ic.green { background: rgba(59,217,138,.16); color: var(--cg-green-2); }
.cg-card-ic.amber { background: #FDF0DC; color: #A96A12; }
.cg-card-ic.violet { background: rgba(124,92,252,.12); color: #7C5CFC; }
.cg-card-ic.rose { background: rgba(242,92,138,.12); color: #E0447A; }
.cg-card-ic svg { width: 20px; height: 20px; }

/* Rács: automatikusan tördel, nem kell média-lekérdezés minden oldalra. */
.cg-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* =============================================================================
   FEJLÉC (nav)
   ========================================================================== */
.cg-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 251, 253, .72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--cg-line);
}
/* A fejléc 56px magas volt, a benne lévő gomb 11px+11px belső térközzel ~40px —
   így alig maradt levegő fölötte-alatta. Magasabb sáv + laposabb gomb. */
.cg-nav-in {
  max-width: var(--cg-max); margin: 0 auto; padding: 0 var(--cg-gap);
  height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* A fejléc-gomb kisebb, mint a lapon belüli gombok: ott cselekvésre hív, itt
   csak jelen van. */
.cg-nav-links .cg-btn { padding: 8px 18px; font-size: 13.5px; }
/* LOGÓ. Alapesetben a SZÓMÁRKA (corganize-logo.svg) — az már tartalmazza a
   nevet, ezért NEM teszünk mellé külön szöveget. A négyzetes ikon csak ott, ahol
   nincs hely a szómárkának (favicon, mobil-fejléc, app-ikon). */
.cg-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.cg-logo img { display: block; height: 24px; width: auto; }
.cg-logo-icon img { height: 28px; width: 28px; }
.cg-logo b { font-family: var(--cg-font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; color: var(--cg-ink); }
.cg-nav-links { display: flex; align-items: center; gap: 26px; }
/* ⚠️ A `:not(.cg-btn)` KELL. Enélkül ez a szabály (specifikusság 0,2,0) legyőzi a
   `.cg-btn-primary` (0,1,0) fehér szövegszínét, és a fejléc-gomb kék gradiensén
   SÖTÉT szöveg marad — olvashatatlanul. A gomb a saját színeit hozza. */
.cg-nav-links a:not(.cg-btn) { color: var(--cg-ink-2); text-decoration: none; font-size: 13.5px; transition: color .2s ease; }
.cg-nav-links a:not(.cg-btn):hover { color: var(--cg-ink); }
@media (max-width: 720px) { .cg-nav-links a:not(.cg-btn):not(.cg-lang a) { display: none; } }

/* =============================================================================
   MOBIL MENÜ (hamburger)
   2026-07-28-ig a fenti szabály 720px alatt eltüntette a fejléc szöveges
   linkjeit, és NEM tett a helyükre semmit: a Funkciók / Árak / Blog / Belépés
   menüpontok telefonon elérhetetlenek voltak. A gombot és a lenyíló panelt a
   /nav.js injektálja (a CSP miatt külön fájl, nem inline script).
   ========================================================================== */
.cg-burger { display: none; }
.cg-mnav { display: none; }

@media (max-width: 720px) {
  .cg-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 38px; height: 38px; padding: 0 9px; margin-right: 2px;
    background: none; border: 1px solid var(--cg-line); border-radius: 10px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .cg-burger span {
    display: block; height: 1.5px; width: 100%; border-radius: 2px;
    background: var(--cg-ink); transition: transform .2s ease, opacity .15s ease;
  }
  /* Nyitva X-szé áll össze — enélkül a látogató nem tudja, hogy ugyanaz a gomb zárja. */
  .cg-nav-open .cg-burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .cg-nav-open .cg-burger span:nth-child(2) { opacity: 0; }
  .cg-nav-open .cg-burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .cg-nav-open .cg-mnav {
    display: flex; flex-direction: column;
    padding: 6px var(--cg-gap) 14px;
    border-top: 1px solid var(--cg-line);
    background: rgba(251, 251, 253, .96);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
  /* Nagy, ujjal is eltalálható sorok — a 13.5px-es asztali link itt kevés. */
  .cg-mnav a {
    padding: 13px 2px; font-size: 15px; text-decoration: none;
    color: var(--cg-ink); border-bottom: 1px solid var(--cg-line);
  }
  .cg-mnav a:last-child { border-bottom: 0; }
}
/* A panel nyitva tartja a helyét, de az oldal ne csússzon mögötte. */
body.cg-nav-locked { overflow: hidden; }

/* KESKENY MOBIL: a megmaradó elemek (logó + hamburger + CTA + nyelvváltó)
   360px-en nem fértek el egymás mellett — kisebb térközök, laposabb gomb. */
@media (max-width: 480px) {
  .cg-nav-in { padding-inline: 14px; gap: 8px; }
  .cg-nav-links { gap: 8px; }
  .cg-nav-links .cg-btn { padding: 7px 12px; font-size: 12px; }
  .cg-logo img { height: 20px; }
  .cg-lang a { padding: 4px 9px; font-size: 11px; }
  .cg-burger { width: 34px; height: 34px; padding: 0 8px; }
}

/* NYELVVÁLTÓ. Mindig látszik, mobilon is: ha a látogató rossz nyelvre került,
   ez az egyetlen kiút. Ezért van kivéve a fenti elrejtés alól. */
.cg-lang { display: inline-flex; border: 1px solid var(--cg-line-strong);
  border-radius: var(--cg-r-pill); overflow: hidden; flex: none; }
.cg-lang a { font-size: 12px; font-weight: 600; letter-spacing: .03em;
  padding: 5px 11px; color: var(--cg-ink-2); text-decoration: none; }
.cg-lang a.on { background: var(--cg-ink); color: #fff; }

/* =============================================================================
   LÁBLÉC — sitemap-lábléc
   Az előző lábléc EGYETLEN sor volt (márka + 4 link). Amíg egy oldal volt,
   elég; több aloldalnál viszont a lábléc a másodlagos navigáció — ott keresi
   a látogató az árakat, a blogot és a jogi oldalakat.
   ========================================================================== */
.cg-foot { border-top: 1px solid var(--cg-line); background: var(--cg-white); margin-top: var(--cg-sec); }
.cg-foot-in { max-width: var(--cg-max); margin: 0 auto; padding: 56px var(--cg-gap) 0; }
/* A márka-hasáb szélesebb, mellette NÉGY link-oszlop (termék, megoldások,
   ágazatok, cég). Négynél többet ne tegyél ide: a lábléc navigáció, nem
   tartalomjegyzék. */
.cg-foot-cols {
  display: grid; gap: 40px 28px;
  grid-template-columns: 1.5fr repeat(4, 1fr);
}
@media (max-width: 1000px) { .cg-foot-cols { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 720px) { .cg-foot-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .cg-foot-cols { grid-template-columns: 1fr; } }

.cg-foot-brand .cg-logo { margin-bottom: 12px; }
.cg-foot-tag { font-family: var(--cg-font-display); font-size: 1rem; color: var(--cg-ink); margin-bottom: 8px; }
.cg-foot-desc { font-size: var(--cg-t-small); color: var(--cg-ink-2); max-width: 34ch; }

.cg-foot-col h4 {
  font-family: var(--cg-font-body); font-size: var(--cg-t-tiny); font-weight: 700;
  letter-spacing: .10em; text-transform: uppercase; color: var(--cg-ink-3);
  margin-bottom: 14px;
}
.cg-foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cg-foot-col a { font-size: var(--cg-t-small); color: var(--cg-ink-2); text-decoration: none; }
.cg-foot-col a:hover { color: var(--cg-ink); }

.cg-foot-bar {
  max-width: var(--cg-max); margin: 0 auto; padding: 24px var(--cg-gap) 32px; margin-top: 44px;
  border-top: 1px solid var(--cg-line);
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: var(--cg-t-tiny); color: var(--cg-ink-3);
}
.cg-foot-bar a { color: var(--cg-ink-3); text-decoration: none; }
.cg-foot-bar a:hover { color: var(--cg-ink); }
.cg-foot-legal { display: flex; gap: 18px; flex-wrap: wrap; }


/* =============================================================================
   KAPCSOLAT-OLDAL. Űrlap + elérhetőség-panel. Azért a KÖZÖS fájlban van és nem
   az oldalban, mert az űrlap-mezők mintája a jövőbeli publikus oldalakon
   (ajánlatkérés, hírlevél, demó-igénylés) ugyanez lesz.
   ========================================================================== */
.cg-kp-head { padding-block: clamp(48px, 7vw, 76px) 8px; text-align: center; }
.cg-kp-head h1 { font-size: var(--cg-t-h1); }
.cg-kp-head .cg-lead { margin: 14px auto 0; }

/* Két hasáb: űrlap + elérhetőségek */
/* stretch (2026-07-28, tulaj-kérés): az űrlap és az elérhetőség-panel
   ugyanakkora magas. */
.cg-kp-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 48px);
  align-items: stretch; margin-top: 40px; }
@media (max-width: 900px) { .cg-kp-grid { grid-template-columns: 1fr; } }

.cg-kp-form { background: var(--cg-white); border: 1px solid var(--cg-line);
  border-radius: var(--cg-r-lg); padding: clamp(24px, 3vw, 34px); box-shadow: var(--cg-shadow); }
.cg-kp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .cg-kp-row { grid-template-columns: 1fr; } }
.cg-kp-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.cg-kp-field label { font-size: var(--cg-t-tiny); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--cg-ink-3); }
.cg-kp-field input, .cg-kp-field select, .cg-kp-field textarea {
  font: inherit; font-size: var(--cg-t-small); color: var(--cg-ink);
  padding: 11px 14px; border: 1px solid var(--cg-line-strong);
  border-radius: var(--cg-r-sm); background: var(--cg-bg); width: 100%;
}
.cg-kp-field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.cg-kp-field input:focus, .cg-kp-field select:focus, .cg-kp-field textarea:focus {
  outline: none; border-color: var(--cg-blue); background: var(--cg-white);
  box-shadow: 0 0 0 3px rgba(46,124,246,.15);
}
.cg-kp-consent { display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--cg-t-small); color: var(--cg-ink-2); line-height: 1.5; margin: 4px 0 20px; }
.cg-kp-consent input { margin-top: 3px; width: 15px; height: 15px; flex: none; }

/* Elérhetőségek: EGY panel, nem doboz-halom. A telefonszám a leghangsúlyosabb
   elem, mert a magyar ügyfél azt keresi; alatta az email, legalul halkan a cégadat. */
.cg-kp-side { background: var(--cg-white); border: 1px solid var(--cg-line);
  border-radius: var(--cg-r-lg); padding: clamp(24px, 3vw, 32px); box-shadow: var(--cg-shadow);
  display: flex; flex-direction: column; }
/* az utolsó blokk (üzemeltető) tapadjon a panel aljára, ha a bal hasáb magasabb */
.cg-kp-side .cg-kp-block:last-child { margin-top: auto; padding-top: 26px; }

.cg-kp-block + .cg-kp-block { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--cg-line); }
/* Az angol kapcsolat-oldalon nincs telefonos blokk (a magyar képviselet csak a
   magyar oldalra való), ezért ott az Email az első blokk — annak nem kell
   felső elválasztó. */
.cg-kp-first { padding-top: 0; border-top: 0; }
.cg-kp-label { font-size: var(--cg-t-tiny); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cg-ink-3); margin-bottom: 12px; }

/* Telefon: nagy, kattintható, ez a fő cselekvés ezen az oldalon */
.cg-kp-phone { display: inline-block; font-family: var(--cg-font-display); font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem); letter-spacing: -.02em;
  color: var(--cg-ink); text-decoration: none; }
.cg-kp-phone:hover { color: var(--cg-blue); }
.cg-kp-hours { font-size: var(--cg-t-small); color: var(--cg-ink-2); margin-top: 6px; }

.cg-kp-person { display: flex; align-items: center; gap: 13px; margin-top: 18px; }
.cg-kp-av { width: 42px; height: 42px; border-radius: 50%; background: var(--cg-grad-blue);
  color: #fff; font-family: var(--cg-font-display); font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; flex: none; }
.cg-kp-person .nm { display: block; font-size: 14px; font-weight: 600; color: var(--cg-ink); }
.cg-kp-person .ro { display: block; font-size: var(--cg-t-tiny); color: var(--cg-ink-3); }

/* Email-sorok */
.cg-kp-mails { display: flex; flex-direction: column; gap: 12px; }
.cg-kp-mail .t { font-size: var(--cg-t-tiny); color: var(--cg-ink-3); display: block; }
.cg-kp-mail a { font-size: var(--cg-t-small); font-weight: 600; text-decoration: none; }
.cg-kp-mail a:hover { text-decoration: underline; }

/* Cégadat: halk lábjegyzet, nem kártya */
.cg-kp-co { font-size: var(--cg-t-small); color: var(--cg-ink-2); line-height: 1.65; }
.cg-kp-co b { color: var(--cg-ink); }
.cg-kp-co dl { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.cg-kp-co dt { font-size: var(--cg-t-tiny); color: var(--cg-ink-3); }
.cg-kp-co dd { font-size: var(--cg-t-small); color: var(--cg-ink); line-height: 1.5; }


/* =============================================================================
   HOSSZÚ DOKUMENTUM (jogi oldalak, szabályzatok).
   A régi `legal/legal.css` SAJÁT tokenkészletet tartott (--blue, --ink, --max…),
   külön leírva — ezért csúszott el a jogi oldal a landingtől. Itt már NINCS
   token, csak a hosszú folyószöveg tördelése a közös tokenekből.
   ========================================================================== */



.cg-doc-head { padding-block: clamp(44px, 6vw, 68px) 0; }
.cg-doc-head h1 { font-size: var(--cg-t-h1); margin: 10px 0 12px; }
.cg-doc-head .cg-lead { margin-bottom: 24px; }

.cg-doc-meta { background: var(--cg-card); border-radius: var(--cg-r); padding: 18px 20px;
  font-size: var(--cg-t-small); color: var(--cg-ink-2); line-height: 1.7; }
.cg-doc-meta b { color: var(--cg-ink); }

/* Tartalomjegyzék: hosszú jogi szövegnél ez a legfontosabb navigáció. */
.cg-doc-toc { border: 1px solid var(--cg-line); border-radius: var(--cg-r);
  padding: 20px 22px; margin: 26px 0 8px; }
.cg-doc-toc b { display: block; font-size: var(--cg-t-tiny); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cg-ink-3); margin-bottom: 12px; }
.cg-doc-toc ol { margin: 0 0 0 18px; columns: 2; column-gap: 30px; }
.cg-doc-toc li { font-size: var(--cg-t-small); margin-bottom: 8px; break-inside: avoid; }
.cg-doc-toc a { text-decoration: none; }
.cg-doc-toc a:hover { text-decoration: underline; }
@media (max-width: 620px) { .cg-doc-toc ol { columns: 1; } }

.cg-doc-body { padding-bottom: var(--cg-sec); }
.cg-doc-body h2 { font-size: 1.3125rem; margin: 40px 0 14px; padding-top: 22px;
  border-top: 1px solid var(--cg-line); scroll-margin-top: 76px; }
.cg-doc-body h2:first-of-type { border-top: none; padding-top: 0; }
.cg-doc-body h3 { font-size: 1rem; margin: 26px 0 8px; scroll-margin-top: 76px; }
.cg-doc-body p { margin-bottom: 15px; line-height: 1.75; }
.cg-doc-body ul, .cg-doc-body ol { margin: 0 0 18px 22px; }
.cg-doc-body li { margin-bottom: 9px; line-height: 1.7; }

/* Kiemelt figyelmeztetés (a kétféle szerepünk magyarázata) */
.cg-doc-note { background: rgba(46,124,246,.06); border: 1px solid rgba(46,124,246,.22);
  border-radius: var(--cg-r); padding: 18px 20px; margin: 24px 0; }
.cg-doc-note p:last-child { margin-bottom: 0; }
.cg-doc-note b { color: var(--cg-ink); }

/* Táblázat: az adatfeldolgozók listája. Kis kijelzőn külön görgethető. */
.cg-doc-table { overflow-x: auto; margin-bottom: 22px; -webkit-overflow-scrolling: touch; }
.cg-doc-table table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: var(--cg-t-small); }
.cg-doc-table th, .cg-doc-table td { border: 1px solid var(--cg-line); padding: 11px 13px;
  text-align: left; vertical-align: top; }
.cg-doc-table th { background: var(--cg-card); font-weight: 600; }

/* Definíciós blokk */
.cg-doc-defs { border-left: 3px solid var(--cg-line); padding-left: 18px; margin-bottom: 18px;
  font-size: var(--cg-t-small); color: var(--cg-ink-2); }
.cg-doc-defs b { color: var(--cg-ink); }


/* =============================================================================
   BELÉPÉSI TÖLCSÉR (corganize.com/signup és a ROOT /login).
   Ezek REACT-oldalak, de a PUBLIKUS arculatot viselik: a látogató a landingről
   érkezik, és a legérzékenyebb pillanatban nem szabad más világba lépnie.
   Az app saját stíluslapja (web/src/index.css) MÁS kéket és MÁS betűt használ.

   ⚠️ A TENANT saját belépője (cegem.corganize.com/login) NEM ide tartozik: az
   az ÜGYFÉL arculatát viseli, és ez szándékos — neki az a cég belső rendszere.
   ========================================================================== */
/* --- Kétoldalas elrendezés: űrlap + bizalom-oldal --------------------------
   Az eddigi képernyő egy középre tett kártya volt üres háttéren. Így elveszett
   minden érv: aki idáig eljutott, itt már semmit nem lát abból, amiért jött. */
.cg-au { min-height: 100vh; display: grid; grid-template-columns: 1fr 460px; }
@media (max-width: 940px) { .cg-au { grid-template-columns: 1fr; min-height: 0; } }

/* A tartalom FÜGGŐLEGESEN ÉS VÍZSZINTESEN is középen: az űrlap-kártya fix
   szélességű, e nélkül a bal szélre tapadna. */
.cg-au-main { display: flex; flex-direction: column; align-items: center;
  padding: 26px clamp(22px, 5vw, 64px) 48px; }
.cg-au-main > .cg-au-top { width: 100%; }
.cg-au-main > main, .cg-au-main > form { margin-block: auto; }
.cg-au-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(28px, 5vw, 52px); }
.cg-au-lang { display: flex; border: 1px solid var(--cg-line-strong); border-radius: var(--cg-r-pill); overflow: hidden; }
.cg-au-lang button { border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 600; letter-spacing: .03em; padding: 6px 12px; color: var(--cg-ink-2); }
.cg-au-lang button.cg-on { background: var(--cg-ink); color: #fff; }

.cg-au-box { width: 100%; max-width: 440px; margin: 0 auto; }
.cg-au-box h1 { font-size: clamp(1.6rem, 3vw, 2.125rem); margin-bottom: 10px; }
.cg-au-box .cg-lead { margin-bottom: 30px; }

/* --- Lépések ------------------------------------------------------------- */
.cg-st { margin-bottom: 14px; }
.cg-st-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cg-st-n { width: 24px; height: 24px; border-radius: 8px; flex: none;
  background: var(--cg-card); color: var(--cg-ink-3);
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cg-st.cg-on .cg-st-n { background: var(--cg-grad-blue); color: #fff; }
.cg-st.cg-done .cg-st-n { background: var(--cg-grad-green); color: #fff; }
.cg-st-t { font-size: var(--cg-t-tiny); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cg-ink-3); }
.cg-st.cg-on .cg-st-t { color: var(--cg-ink); }

/* Kész lépés: összecsukva, az értékkel */
.cg-st-done-row { display: flex; align-items: center; gap: 11px; padding: 12px 15px;
  background: var(--cg-white); border: 1px solid rgba(59,217,138,.45); border-radius: var(--cg-r); }
.cg-st-done-row .cg-v { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--cg-ink); }
.cg-st-done-row .cg-k { display: block; font-family: var(--cg-font-body); font-size: var(--cg-t-tiny);
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--cg-ink-3); margin-bottom: 2px; }
.cg-st-done-row .cg-v.cg-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.cg-st-done-row .cg-ed { font-size: 12.5px; color: var(--cg-blue); font-weight: 600; cursor: pointer; }
.cg-st-ok { width: 20px; height: 20px; border-radius: 50%; background: var(--cg-grad-green);
  flex: none; display: flex; align-items: center; justify-content: center; }
.cg-st-ok svg { width: 11px; height: 11px; color: #fff; }

/* Mezők */
.cg-fld { margin-bottom: 15px; }
.cg-fld label { display: block; font-size: var(--cg-t-tiny); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--cg-ink-3); margin-bottom: 7px; }
.cg-fld input { width: 100%; font: inherit; font-size: 15px; color: var(--cg-ink);
  padding: 12px 15px; border: 1px solid var(--cg-line-strong); border-radius: var(--cg-r-sm);
  background: var(--cg-white); transition: border-color .15s, box-shadow .15s; }
.cg-fld input:focus { outline: none; border-color: var(--cg-blue); box-shadow: 0 0 0 3px rgba(46,124,246,.15); }
.cg-fld .cg-hint { font-size: var(--cg-t-tiny); color: var(--cg-ink-3); margin-top: 6px; }
.cg-fld-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 460px) { .cg-fld-2 { grid-template-columns: 1fr; } }

/* Cím-előnézet: a mező és a végződés EGY doboznak látsszon.
   `align-items: stretch` KELL, különben a végződés a saját magasságára húzódik
   és elcsúszik a mezőhöz képest — a két elem eltérő sormagassággal dolgozik. */
.cg-url-row { display: flex; align-items: stretch; }
.cg-url-row input { border-radius: var(--cg-r-sm) 0 0 var(--cg-r-sm); border-right: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cg-url-suf { display: flex; align-items: center; flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px;
  color: var(--cg-ink-2); background: var(--cg-card); border: 1px solid var(--cg-line-strong);
  border-left: 0; border-radius: 0 var(--cg-r-sm) var(--cg-r-sm) 0; padding: 0 14px; white-space: nowrap; }
/* Fókuszban a keret a TELJES dobozt fogja körbe, ne csak a bal felét. */
.cg-url-row:focus-within input { box-shadow: none; }
.cg-url-row:focus-within { border-radius: var(--cg-r-sm); box-shadow: 0 0 0 3px rgba(46,124,246,.15); }
.cg-url-row:focus-within input, .cg-url-row:focus-within .cg-url-suf { border-color: var(--cg-blue); }
.cg-free { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cg-t-tiny);
  font-weight: 600; color: var(--cg-green-2); margin-top: 8px; }
.cg-free i { width: 6px; height: 6px; border-radius: 50%; background: var(--cg-green-2); display: block; }

/* ÁSZF + gomb */
.cg-terms { display: flex; gap: 10px; align-items: flex-start; font-size: var(--cg-t-small);
  color: var(--cg-ink-2); line-height: 1.5; margin: 6px 0 20px; }
.cg-terms input { margin-top: 3px; width: 15px; height: 15px; flex: none; }
.cg-au-submit { width: 100%; }
.cg-au-alt { text-align: center; font-size: var(--cg-t-small); color: var(--cg-ink-2); margin-top: 20px; }
.cg-au-alt a { font-weight: 600; text-decoration: none; }
.cg-au-alt a:hover { text-decoration: underline; }
/* A captcha-jelzés a gomb alatt, KÖZÉPEN: az a védelem az egész űrlapra
   vonatkozik, nem egy mezőre. Balra igazítva mezőhöz tartozó lábjegyzetnek
   látszott. */











.cg-sent { margin-top: 26px; padding-top: 26px; border-top: 1px dashed var(--cg-line-strong); text-align: center; }
.cg-sent-ic { width: 44px; height: 44px; border-radius: 13px; background: rgba(59,217,138,.16);
  color: var(--cg-green-2); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.cg-sent b { display: block; font-family: var(--cg-font-display); font-size: 1.0625rem; margin-bottom: 6px; }
.cg-sent p { font-size: var(--cg-t-small); color: var(--cg-ink-2); line-height: 1.6; }
.cg-sent-hint { margin-top: 8px; font-size: var(--cg-t-tiny); color: var(--cg-ink-3); }

.cg-au-cap { display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: var(--cg-t-tiny); color: var(--cg-ink-3); text-align: center; margin-top: 14px; }
.cg-au-cap svg { color: var(--cg-ink-3); flex: none; }

/* --- Bizalom-oldal ------------------------------------------------------- */
.cg-au-side { background: var(--cg-navy); color: #EEF3F9;
  padding: clamp(34px, 4vw, 52px) clamp(28px, 3vw, 44px); display: flex; flex-direction: column; }
.cg-au-side h2 { color: #fff; font-size: 1.375rem; margin-bottom: 26px; }
.cg-au-pts { display: flex; flex-direction: column; gap: 20px; }
.cg-au-pt { display: flex; gap: 13px; align-items: flex-start; }
.cg-au-pt-ic { width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: rgba(255,255,255,.09); color: #5FB4FF;
  display: flex; align-items: center; justify-content: center; }
.cg-au-pt b { display: block; font-size: 14.5px; color: #fff; margin-bottom: 3px; }
.cg-au-pt span { font-size: 13px; color: #93A3B5; line-height: 1.55; }
.cg-au-quote { margin-top: auto; padding-top: 32px; }
.cg-au-quote p { font-family: var(--cg-font-display); font-size: 1.0625rem; line-height: 1.5;
  color: #EEF3F9; margin-bottom: 12px; }
.cg-au-quote span { font-size: var(--cg-t-tiny); color: #93A3B5; }
@media (max-width: 940px) { .cg-au-quote { margin-top: 32px; } }

/* --- Belépés (root): profil-kereső --------------------------------- */
/* EGYOSZLOPOS változat: ahol nincs bizalom-panel (üzemeltetői belépő). */
.cg-au-solo { grid-template-columns: 1fr; }
.cg-au-solo .cg-au-main { min-height: 100vh; justify-content: center; }

/* Egyszer használatos kód: ritkított, nagy, középre zárt — így ellenőrizhető
   szemmel, hogy jól gépelted-e be. */
.cg-otp { text-align: center; font-size: 22px !important; letter-spacing: .28em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.cg-wf { max-width: 440px; margin: 0 auto; }
/* A fejrész KÖZÉPRE zárt: itt egyetlen mező van, a bal széllel kezdődő címsor
   mellett nagy üresség maradt. A mezők és a címkék viszont balra maradnak —
   középre zárt űrlap-címkét nehezebb végigolvasni. */
.cg-wf h1 { text-align: center; }
.cg-wf > .cg-lead { text-align: center; margin: 0 auto 26px; }
/* Lábjegyzet-sáv a kártya alatt: a vissza-link balra, a jogi linkek jobbra.
   Egymás alá tömörítve a három elem egyetlen szöveg-kupacnak látszott. */
.cg-au-foot { width: 100%; max-width: 440px; margin: 22px auto 0;
  padding-top: 16px; border-top: 1px solid var(--cg-line);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: var(--cg-t-tiny); }
.cg-au-foot a { color: var(--cg-ink-3); text-decoration: none; }
.cg-au-foot a:hover { color: var(--cg-ink); }
.cg-au-foot-legal { display: flex; gap: 14px; }
.cg-wf-ex { background: var(--cg-card); border-radius: var(--cg-r); padding: 15px 17px;
  font-size: var(--cg-t-small); color: var(--cg-ink-2); line-height: 1.6; margin-top: 18px; }
.cg-wf-ex b { color: var(--cg-ink); }
.cg-wf-or { display: flex; align-items: center; gap: 14px; margin: 22px 0;
  font-size: var(--cg-t-tiny); color: var(--cg-ink-3); }
.cg-wf-or::before, .cg-wf-or::after { content: ""; flex: 1; height: 1px; background: var(--cg-line); }
.cg-wf-goog { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-size: var(--cg-t-small); font-weight: 600; color: var(--cg-ink);
  background: var(--cg-white); border: 1px solid var(--cg-line-strong);
  border-radius: var(--cg-r-pill); padding: 12px; cursor: pointer; }
.cg-wf-goog:hover { background: var(--cg-card); }
/* ⚠️ A Google-logó SVG-jén nincs width/height attribútum, csak viewBox — ilyenkor
   a böngésző a rendelkezésre álló helyre nyújtja. Méret nélkül a fél oldalt
   kitöltötte. A `flex: none` is kell, különben a flex-sorban is nyúlna. */
.cg-wf-goog svg { width: 18px; height: 18px; flex: none; }

/* =============================================================================
   COOKIEBOT CONSENT-BANNER — MOBIL-KORLÁTOZÁS
   Ez az EGYETLEN hely, ahol idegen (harmadik feles) markupot stílusozunk, ezért
   külön blokk és külön indoklás jár neki.

   MIÉRT KELL: a Cookiebot „Multilevel" banner-típusa (fejléc + hosszú szöveg +
   4 kategória-kapcsoló + 3 gomb egymás alatt) telefonon 661 px magas lett egy
   677 px-es képernyőn, vagyis KITAKARTA A TELJES OLDALT — a látogató nem látta,
   mihez járul hozzá. A banner saját szabálya (`max-height: calc(100% - 16px)`)
   éppen a képernyő tetejéig engedi felnőni.

   MIT CSINÁL: 700 px alatt alsó lapkává („bottom sheet") teszi a képernyő
   ALSÓ 70%-ában; a szöveg + kapcsolók görgethető részbe kerülnek, a gombok
   mindig látszanak. Fölötte marad az oldal, tehát látszik, hova érkezett.

   ⚠️ FONTOS
   - A `!important` itt NEM lustaság: a Cookiebot saját, betöltéskor injektált
     stíluslapja ellen dolgozunk, az pedig utánunk kerül a dokumentumba.
   - A Cookiebot a bannert `left/top: 50%` + `transform: translate(-50%,-50%)`
     párossal centrálja. Ezért a `transform: none` KELL, magában a bottom/left
     felülírás nem elég — a doboz elcsúszna a képernyőről.
   - A `70dvh` a `70vh` UTÁN áll: a mobil böngészők eltűnő címsávja miatt a
     `vh` túl nagy, a `dvh` a valós látható magasság. A sorrend a visszaesés
     (régi böngésző a `dvh`-t eldobja, marad a `vh`).
   - Ez csak VÉDŐHÁLÓ. A gyökér-javítás a Cookiebot-fiókban van: ott a
     Multilevel helyett egyszintű bannert kell választani. Ha az megtörtént, ez
     a blokk akkor is maradjon — egy fiók-beli visszaállítás után is véd.
   ========================================================================== */
@media (max-width: 700px) {
  #CybotCookiebotDialog {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 70vh !important;
    max-height: 70dvh !important;
    border-radius: 12px 12px 0 0 !important;
  }
  /* A belső burkoló örökli a plafont, különben a flex-oszlop kilógna belőle. */
  #CybotCookiebotDialog .CybotCookiebotDialogContentWrapper { max-height: inherit !important; }
  /* A szöveg + kapcsolók görögnek, nem a gombok tolódnak le a képernyőről. */
  #CybotCookiebotDialogBody,
  #CybotCookiebotDialogTabContent { overflow-y: auto !important; }
}

/* --- Kapcsolat: ikonos elérhetőség-sorok (tulaj-mockup, 2026-07-28) -------- */
.kp-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; }
.kp-row:last-child { padding-bottom: 2px; }
.kp-row + .kp-row { border-top: 1px solid var(--cg-line); }
.kp-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; background: #EEF4FC; display: flex; align-items: center; justify-content: center; }
.kp-ic svg { width: 20px; height: 20px; stroke: var(--cg-blue); }
.kp-rt { font-size: 15px; font-weight: 700; margin-bottom: 2px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.kp-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; color: var(--cg-blue); background: #EEF4FC; border-radius: 99px; padding: 2px 7px; text-transform: uppercase; }
.kp-tag.soon { color: var(--cg-ink-3); background: var(--cg-card); }
.kp-avail { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #27AE60; }
.kp-dot { width: 6px; height: 6px; border-radius: 50%; background: #3DDC7A; }
.kp-rd { font-size: 13px; color: var(--cg-ink-2); line-height: 1.5; }
.kp-rlink { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--cg-blue); text-decoration: none; }
.kp-rlink:hover { text-decoration: underline; }
.kp-invoice { display: flex; align-items: center; gap: 9px; margin-top: 16px; background: #EEF4FC; border-radius: 10px; padding: 10px 13px; font-size: 12.5px; color: var(--cg-ink-2); }
.kp-invoice svg { width: 15px; height: 15px; stroke: var(--cg-blue); flex: none; }