/* =============================================================================
   CORGANIZE — LANDING-KOMPONENSEK

   MIÉRT KÜLÖN FÁJL, ÉS NEM A corganize.css-BEN
   A DESIGN-GUIDE-WEB 2. szabálya azt mondja, az oldalaknak nincs saját stílusuk,
   minden a közös fájlba megy. A szabály CÉLJA az, hogy a tokenek egy helyen
   legyenek — az teljesül: tokent EBBEN A FÁJLBAN NEM DEFINIÁLUNK, mind a
   corganize.css-ből jön, és csak fogyasztjuk őket.
   Amiért mégis külön fájl: az itteni komponensek (termék-makettek, telefon,
   szerkesztő-vászon, súgó-előnézet) CSAK a landingen kellenek. A jogi oldalnak
   és a blognak semmi köze hozzájuk, fölösleges lenne letölteniük.

   SORREND: előbb corganize.css (tokenek + .cg-* komponensek), utána ez.
   ============================================================================= */







/* --- Hero ---------------------------------------------------------------- */
.hero { padding-block: clamp(64px, 9vw, 104px) 0; text-align: center; position: relative; }
.hero::before {
  content: ""; position: absolute; inset: -40px 0 auto; height: 620px; z-index: -1;
  background-image: radial-gradient(circle, rgba(46,124,246,.11) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 66% 62% at 50% 34%, #000 0%, transparent 74%);
  mask-image: radial-gradient(ellipse 66% 62% at 50% 34%, #000 0%, transparent 74%);
}
.hero h1 { font-size: var(--cg-t-hero); letter-spacing: -.03em; line-height: 1.04; }
.grad { background: var(--cg-grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { max-width: 640px; margin: 24px auto 0; font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.5; color: var(--cg-ink-2); }
.hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.hero-trust { margin-top: 20px; font-size: var(--cg-t-small); color: var(--cg-ink-3); }

/* --- Termék-ablak (a „platform-kép") ------------------------------------- */
/* MIÉRT KÓDBÓL: a valódi képernyőkép elavul, kilóg belőle a teszt-adat, és
   minden nyelvhez új kell. Ez a keret bármikor átcserélhető igazi képre — a
   szerkezet és a méret ugyanaz marad. */
.shot { background: var(--cg-white); border: 1px solid var(--cg-line);
  border-radius: var(--cg-r-lg); overflow: hidden; box-shadow: var(--cg-shadow-lg); text-align: left; }
.shot-bar { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px;
  background: #FAFBFC; border-bottom: 1px solid var(--cg-line); }
.shot-dot { width: 10px; height: 10px; border-radius: 50%; background: #E2E6EB; }
.shot-url { margin-left: 12px; flex: 1; max-width: 300px; height: 23px; border-radius: 7px;
  background: #EEF1F5; font-size: 11px; color: var(--cg-ink-3);
  display: flex; align-items: center; justify-content: center; }
.hero-shot { max-width: 940px; margin: 56px auto 0; }

/* --- APP-KRÓM: a valódi felület fejléce és fülsávja -----------------------
   A makett mostantól a TÉNYLEGES nézetet követi (fejléc → fülsáv → aloldal-fülsáv
   → tartalom), nem egy általánosított doboz. Így amit a landingen lát a látogató,
   azt kapja belépés után is. */
.app-top { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 46px;
  background: var(--cg-white); border-bottom: 1px solid var(--cg-line); }
.app-top .brandmark { font-family: var(--cg-font-display); font-weight: 700;
  font-size: 13px; letter-spacing: -.02em; color: var(--cg-ink); }
.app-top .sp { flex: 1; }
.app-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px;
  padding: 3px 9px; border-radius: 99px; background: rgba(59,217,138,.14); color: var(--cg-green-2); }
.app-chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--cg-green-2); display: block; }
.app-who { font-size: 11.5px; color: var(--cg-ink-2); }

.app-tabs { display: flex; justify-content: center; gap: 3px; padding: 9px 12px;
  background: var(--cg-white); border-bottom: 1px solid var(--cg-line);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.app-tabs::-webkit-scrollbar { display: none; }
/* MOBIL: a 6 fül középre zárva mindkét szélén levágódott, ÉS a levágott bal
   szélhez görgetni sem lehetett (a középre zárt overflow így viselkedik) —
   balra zárva a sáv normálisan görgethető. */
@media (max-width: 640px) { .app-tabs { justify-content: flex-start; } }
.app-tabs span { font-size: 11.5px; color: var(--cg-ink-3); padding: 6px 11px; border-radius: 9px;
  white-space: nowrap; }
.app-tabs span.on { background: var(--cg-white); color: var(--cg-ink); font-weight: 600;
  border: 1px solid var(--cg-line); box-shadow: 0 1px 2px rgba(16,32,58,.05); }
.app-tabs.sub { background: #FAFBFC; }
.app-body { background: var(--cg-bg); padding: 16px; }

/* Mappalista — a márka legjellemzőbb képe: tananyag és hivatalos irat EGY helyen.
   A „fa" BELSŐ szakszó: a látogatónak mappa van (tulaj-döntés). */
.tree { padding: 14px; display: flex; flex-direction: column; gap: 6px;
  background: var(--cg-white); border: 1px solid var(--cg-line); border-radius: 14px; }
.tree-head { display: flex; align-items: center; gap: 10px;
  padding: 2px 4px 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cg-ink-3); }
.tree-head .sp { flex: 1; }
.mini-btn { font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  padding: 5px 11px; border-radius: 8px; background: var(--cg-blue); color: #fff; }
.mini-btn.ghost { background: var(--cg-card); color: var(--cg-ink-2); }
.grip { display: flex; flex-direction: column; gap: 2px; flex: none; opacity: .45; }
.grip i { display: block; width: 2px; height: 2px; border-radius: 50%; background: var(--cg-ink-3);
  box-shadow: 4px 0 0 var(--cg-ink-3); }
.kebab { flex: none; color: var(--cg-ink-3); font-size: 13px; letter-spacing: -1px; }
.row { display: flex; align-items: center; gap: 11px; padding: 11px 14px;
  border: 1px solid var(--cg-line); border-radius: 11px; background: var(--cg-white);
  font-size: 14px; }
.row.vault { background: #FEF6EC; border-color: #F0D9B5; color: #A96A12; }
.row.ind { margin-left: 30px; }
.row.ind2 { margin-left: 58px; }
.row.ind3 { margin-left: 86px; }
.row.lesson { border-style: dashed; }
.row.lesson .ico { color: var(--cg-blue); }
.shared { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px;
  padding: 3px 8px; border-radius: 99px; background: rgba(46,124,246,.1); color: var(--cg-blue); }
.row b { font-weight: 600; }
.row .sp { flex: 1; }
.pill { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px; background: var(--cg-card); color: var(--cg-ink-2); }
.pill.amber { background: #FDF0DC; color: #A96A12; }
.pill.green { background: rgba(59,217,138,.16); color: var(--cg-green-2); }
.cnt { font-size: 12px; color: var(--cg-ink-3); font-variant-numeric: tabular-nums; }
.dot-s { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-s.ok { background: var(--cg-green); }
.dot-s.mid { background: #F2A93B; }
.ico { width: 17px; height: 17px; flex: none; color: var(--cg-ink-3); }
.row.vault .ico { color: #C98A2E; }
/* MOBIL: a mappafa-makett 30–86px-es behúzásai keskeny kijelzőn a sor felét
   elvitték — felezett behúzás, a húzás-fogantyú (ott úgysem funkció) elrejtve. */
@media (max-width: 640px) {
  .row { gap: 8px; padding: 10px 11px; font-size: 13px; }
  .row.ind { margin-left: 14px; }
  .row.ind2 { margin-left: 28px; }
  .row.ind3 { margin-left: 42px; }
  .grip { display: none; }
}

/* --- „Ismerős?" cetlik -------------------------------------------------
   A szétszórtságot nem elmondani kell, hanem MEGMUTATNI. Ezek a valódi
   fájlnevek és kérdések, amikkel a cégek élnek. A zöld pipa jelzi, hogy a
   Corganize-ban ezek a helyükre kerülnek. */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
  max-width: 720px; margin: 32px auto 0; }
.chip { display: inline-flex; align-items: center; gap: 8px;
  background: var(--cg-white); border: 1px solid var(--cg-line);
  border-radius: 10px; padding: 8px 13px; font-size: 12.5px; color: var(--cg-ink-2);
  box-shadow: var(--cg-shadow); }
.chip-ok { width: 15px; height: 15px; border-radius: 50%; background: var(--cg-grad-green);
  flex: none; display: flex; align-items: center; justify-content: center; }
.chip-ok svg { width: 8px; height: 8px; color: #fff; }
/* A cetli PROBLÉMA-változata (megoldás-aloldalak „Ismerős?" blokkja): borostyán
   ✗ a zöld pipa helyén — a fájdalompont jele, amit a lap végére megoldunk. */
.chip-x { width: 15px; height: 15px; border-radius: 50%; background: #FDF0DC;
  flex: none; display: flex; align-items: center; justify-content: center; }
.chip-x svg { width: 8px; height: 8px; color: #A96A12; }

/* A gondolat zárómondata ne olvadjon bele a bekezdésbe. Saját text-align kell:
   nem minden szülő-szekció középre zárt, az auto-margó csak a dobozt centrálja. */
.punch { display: block; max-width: 30ch; margin: 22px auto 0; text-align: center;
  font-family: var(--cg-font-display);
  font-size: clamp(1.15rem, 2.1vw, 1.5rem); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.35; text-wrap: balance; }
.punch em { font-style: normal; background: var(--cg-grad-blue);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Aloldali változat: cetlik nélkül önálló kijelentés — szélesebben, nagyobban
   fut, hogy ne két sorba tört apró mondatnak látsszon. */
.punch-wide { max-width: 46ch; font-size: clamp(1.3rem, 2.6vw, 1.9rem); }

/* --- Váltakozó feature-szekciók ------------------------------------------ */
.feat { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 72px);
  align-items: center; }
.feat.flip .feat-tx { order: 2; }
.feat-tx h2 { margin-bottom: 14px; }
.feat-tx .cg-lead { margin-bottom: 22px; }
.feat-list { display: flex; flex-direction: column; gap: 13px; list-style: none; }
.feat-list li { display: flex; gap: 11px; align-items: flex-start;
  font-size: 14.5px; color: var(--cg-ink-2); line-height: 1.5; }
.feat-list b { color: var(--cg-ink); font-weight: 600; }
.tick { width: 20px; height: 20px; border-radius: 6px; background: var(--cg-grad-green);
  flex: none; margin-top: 2px; display: flex; align-items: center; justify-content: center; }
.tick svg { width: 11px; height: 11px; color: #fff; }
@media (max-width: 880px) {
  .feat { grid-template-columns: 1fr; }
  .feat.flip .feat-tx { order: 0; }
}

/* --- Belső panel-makettek ------------------------------------------------- */
.panel { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.pl-title { font-family: var(--cg-font-display); font-size: 15px; font-weight: 700; }
.pl-sub { font-size: 12.5px; color: var(--cg-ink-3); margin-top: -6px; }
.daycard { border: 1px solid var(--cg-line); border-radius: 12px; padding: 13px 15px; }
.daycard .dh { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; }
.daycard .dl { font-size: 12.5px; color: var(--cg-ink-2); margin-top: 7px; }
.bar { height: 5px; border-radius: 3px; background: #E9EDF2; overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; border-radius: 3px; background: var(--cg-grad-green); }

/* Dokumentum → lecke átalakulás */
.conv { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.conv-card { border: 1px solid var(--cg-line); border-radius: 12px; padding: 14px;
  font-size: 12px; color: var(--cg-ink-2); background: var(--cg-white); min-height: 128px; }
.conv-card .ct { font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--cg-ink-3); margin-bottom: 9px; }
.lines i { display: block; height: 6px; border-radius: 3px; background: #EEF1F5; margin-bottom: 6px; }
.lines.tidy i { background: #DDE7F7; }
.conv-arrow { width: 34px; height: 34px; border-radius: 50%; background: var(--cg-grad-blue);
  color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
@media (max-width: 560px) { .conv { grid-template-columns: 1fr; }
  .conv-arrow { transform: rotate(90deg); margin: 0 auto; } }


/* --- Telefon-makett (mobilos tanulás) ------------------------------------ */
/* A telefon a MELLETTE lévő szöveg magasságának 85%-a. A rács sorát a szöveg-hasáb
   határozza meg; a `align-self: stretch` miatt a kép-hasábnak lesz konkrét magassága,
   így a százalék értelmezhető. Egy hasábba rendeződve (mobil) ez nem működne, ott
   visszaáll automatikusra. */
.phone-wrap { display: flex; justify-content: center; align-items: center; align-self: stretch; }
.phone { width: 224px; height: 85%; background: var(--cg-white); border: 8px solid var(--cg-navy);
  border-radius: 34px; overflow: hidden; box-shadow: var(--cg-shadow-lg);
  display: flex; flex-direction: column; }
.phone .ph-screen { flex: 1; overflow: hidden; }
@media (max-width: 880px) {
  .phone-wrap { align-self: auto; }
  .phone { height: auto; }
}
.phone-notch { width: 78px; height: 16px; background: var(--cg-navy);
  border-radius: 0 0 12px 12px; margin: 0 auto; }
.ph-screen { padding: 12px; display: flex; flex-direction: column; gap: 8px;
  position: relative; padding-bottom: 20px; }
.ph-top { display: flex; align-items: center; gap: 8px; }
.ph-back { width: 24px; height: 24px; border-radius: 8px; background: var(--cg-card);
  color: var(--cg-ink-2); display: flex; align-items: center; justify-content: center; flex: none; }
.ph-title { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.ph-toc { border: 1px solid var(--cg-line); border-radius: 10px; padding: 8px 10px; }
.ph-toc b { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--cg-ink-3); margin-bottom: 6px; }
.ph-toc span { display: block; font-size: 11px; color: var(--cg-ink-2); margin-bottom: 4px; }
.ph-toc span.on { color: var(--cg-blue); font-weight: 600; }
.ph-size { display: flex; align-items: center; gap: 7px; border: 1px solid var(--cg-line);
  border-radius: 99px; padding: 5px 10px; align-self: flex-start; }
.ph-size i { font-style: normal; font-weight: 700; color: var(--cg-ink-2); }
.ph-size i.s { font-size: 10px; }
.ph-size i.m { font-size: 13px; color: var(--cg-blue); }
.ph-size i.l { font-size: 16px; }
.ph-txt i { display: block; height: 6px; border-radius: 3px; background: #EEF1F5; margin-bottom: 6px; }
.ph-bar { height: 4px; border-radius: 2px; background: #E9EDF2; overflow: hidden; }
.ph-bar i { display: block; height: 100%; width: 62%; background: var(--cg-grad-green); }
.ph-prog { font-size: 9.5px; color: var(--cg-ink-3); }

/* AI-asszisztens: a valódi appban is LEBEGŐ GOMB a jobb alsó sarokban. Nem
   foglal helyet a leckéből, de mindig kéznél van. */
.ph-fab { position: absolute; right: 11px; bottom: 11px;
  width: 34px; height: 34px; border-radius: 50%; background: var(--cg-grad-blue);
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px -4px rgba(46,124,246,.55); }


/* --- Behozatal-riport (a valódi import-ablak) ---------------------------- */
.imp { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.imp-drop { border: 2px dashed rgba(46,124,246,.4); background: rgba(46,124,246,.05);
  border-radius: 12px; padding: 18px; text-align: center; }
.imp-drop b { display: block; font-size: 13px; color: var(--cg-ink); }
.imp-drop span { font-size: 11.5px; color: var(--cg-ink-3); }
.imp-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px;
  padding: 9px 12px; border: 1px solid var(--cg-line); border-radius: 10px; }
.imp-row .sp { flex: 1; }
.imp-row .st { font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 99px; }
.imp-row .st.ok { background: rgba(59,217,138,.16); color: var(--cg-green-2); }
.imp-row .st.warn { background: #FDF0DC; color: #A96A12; }
.imp-row .st.run { background: rgba(46,124,246,.12); color: var(--cg-blue); }
.imp-row .st.run::before { content: ""; display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; background: var(--cg-blue); margin-right: 6px; vertical-align: middle; }
.imp-sum { display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--cg-ink-3); padding: 2px 4px; }
.imp-sum b { color: var(--cg-ink); }

/* --- Lecke-szerkesztő (a valódi WYSIWYG nézet) --------------------------- */
.ed-tools { display: flex; align-items: center; gap: 3px; padding: 8px 12px;
  border-bottom: 1px solid var(--cg-line); background: #FAFBFC; flex-wrap: wrap; }
.ed-tools b, .ed-tools span { font-size: 11.5px; color: var(--cg-ink-2);
  padding: 4px 8px; border-radius: 7px; }
.ed-tools b { font-weight: 700; }
.ed-tools i { font-style: italic; font-size: 11.5px; color: var(--cg-ink-2); padding: 4px 8px; }
.ed-tools .sep { width: 1px; height: 15px; background: var(--cg-line); margin: 0 5px; padding: 0; }
.ed-tools .on { background: var(--cg-white); border: 1px solid var(--cg-line); color: var(--cg-ink); }
.ed-page { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.ed-h1 { font-family: var(--cg-font-display); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.ed-meta { font-size: 11.5px; color: var(--cg-ink-3); margin-top: -8px; }
.ed-h2 { font-family: var(--cg-font-display); font-size: 13.5px; font-weight: 700; margin-top: 4px; }
.ed-p { font-size: 12.5px; color: var(--cg-ink-2); line-height: 1.6; }
.ed-steps { display: flex; flex-direction: column; gap: 7px; }
.ed-step { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--cg-ink-2); }
.ed-step em { font-style: normal; flex: none; width: 18px; height: 18px; border-radius: 5px;
  background: var(--cg-card); color: var(--cg-blue); font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.ed-img { height: 76px; border-radius: 9px; background: linear-gradient(135deg,#E8F1FF,#F4F6F9);
  border: 1px solid var(--cg-line); display: flex; align-items: center; justify-content: center;
  color: var(--cg-ink-3); font-size: 11px; }
.ed-draft { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px; background: rgba(46,124,246,.1); color: var(--cg-blue); }

/* --- Belső chat (a valódi Üzenetek-nézet két hasábja) -------------------- */
.chat { display: grid; grid-template-columns: 176px 1fr; min-height: 372px; }
.chat-list { border-right: 1px solid var(--cg-line); padding: 12px 10px; display: flex;
  flex-direction: column; gap: 4px; background: #FCFDFE; }
.chat-list .ch { font-size: 12.5px; font-weight: 700; padding: 2px 6px 8px; }
.chat-p { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 9px; }
.chat-p.on { background: rgba(46,124,246,.08); }
.av { width: 24px; height: 24px; border-radius: 50%; flex: none; color: #fff;
  font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.av.b { background: var(--cg-grad-blue); }
.av.g { background: #8B7B6B; }
.chat-p b { font-size: 11.5px; font-weight: 600; display: block; }
.chat-p span { font-size: 10.5px; color: var(--cg-ink-3); }
.chat-thread { padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.bub { max-width: 78%; font-size: 12.5px; line-height: 1.45; padding: 9px 13px; border-radius: 13px; }
.bub.them { align-self: flex-start; background: var(--cg-card); border-bottom-left-radius: 4px; }
.bub.me { align-self: flex-end; background: var(--cg-grad-blue); color: #fff; border-bottom-right-radius: 4px; }
.chat-in { margin-top: auto; display: flex; align-items: center; gap: 8px; }
.chat-in div { flex: 1; height: 30px; border-radius: 99px; background: #EEF1F5;
  font-size: 11px; color: var(--cg-ink-3); display: flex; align-items: center; padding: 0 13px; }
.chat-in span { width: 30px; height: 30px; border-radius: 50%; background: var(--cg-grad-blue);
  flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
@media (max-width: 520px) { .chat { grid-template-columns: 1fr; } .chat-list { display: none; } }

/* --- Saját domain -------------------------------------------------------- */
.dom { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.dom-line { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--cg-line); border-radius: 11px; font-size: 13px; }
.dom-line.on { border-color: rgba(59,217,138,.5); background: rgba(59,217,138,.06); }
.dom-line code { font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--cg-ink); }
.dom-line .sp { flex: 1; }
.ok-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--cg-grad-green);
  flex: none; display: flex; align-items: center; justify-content: center; }
.ok-dot svg { width: 10px; height: 10px; color: #fff; }

/* AI-válasz buborék */
.qa { display: flex; flex-direction: column; gap: 11px; }
.q { align-self: flex-end; max-width: 84%; background: var(--cg-grad-blue); color: #fff;
  padding: 11px 15px; border-radius: 15px; border-bottom-right-radius: 5px; font-size: 13.5px; }
.a { align-self: flex-start; max-width: 90%; background: var(--cg-card); color: var(--cg-ink);
  padding: 11px 15px; border-radius: 15px; border-bottom-left-radius: 5px; font-size: 13.5px; line-height: 1.5; }
.src { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--cg-green-2); background: rgba(59,217,138,.1);
  border: 1px solid rgba(59,217,138,.28); padding: 4px 11px; border-radius: 99px; }


/* --- Publikus súgó (help center) ---------------------------------------- */
.hc-hero { background: linear-gradient(160deg,#E9F2FF 0%,#F7F9FC 70%); padding: 26px 22px 22px;
  text-align: center; border-bottom: 1px solid var(--cg-line); }
.hc-brand { font-family: var(--cg-font-display); font-size: 12px; font-weight: 700;
  color: var(--cg-ink-2); letter-spacing: .04em; margin-bottom: 12px; }
.hc-hero h4 { font-family: var(--cg-font-display); font-size: 17px; font-weight: 700;
  letter-spacing: -.02em; margin-bottom: 12px; }
.hc-search { max-width: 300px; margin: 0 auto; height: 34px; border-radius: 99px;
  background: var(--cg-white); border: 1px solid var(--cg-line); display: flex;
  align-items: center; gap: 8px; padding: 0 14px; font-size: 12px; color: var(--cg-ink-3);
  box-shadow: var(--cg-shadow); }
.hc-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; }
.hc-cat { border: 1px solid var(--cg-line); border-radius: 11px; padding: 13px 12px; }
.hc-cat b { display: block; font-size: 12px; margin-bottom: 3px; }
.hc-cat span { font-size: 11px; color: var(--cg-ink-3); }
.hc-cat-ic { width: 26px; height: 26px; border-radius: 8px; background: rgba(46,124,246,.1);
  color: var(--cg-blue); display: flex; align-items: center; justify-content: center; margin-bottom: 9px; }
.hc-others { border-top: 1px solid var(--cg-line); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px; background: #FAFBFC; }
.hc-o { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.hc-o code { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--cg-ink-2); }
.hc-o .sp { flex: 1; }
@media (max-width: 520px) { .hc-cats { grid-template-columns: 1fr; } }

/* --- Összehasonlító táblázat --------------------------------------------- */
.cmp-wrap { overflow-x: auto; margin-top: 40px; }
.cmp { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 14.5px; }
.cmp th, .cmp td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--cg-line); }
.cmp thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cg-ink-3); font-weight: 700; }
.cmp tbody th { font-weight: 600; color: var(--cg-ink); }
.cmp .us { background: rgba(46,124,246,.045); }
.cmp thead .us { color: var(--cg-blue); }
.cmp .yes { color: var(--cg-green-2); font-weight: 700; }
.cmp .no { color: var(--cg-ink-3); }

/* --- Lépések (valódi sorrend, ezért számozott) --------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.step { background: var(--cg-white); border: 1px solid var(--cg-line);
  border-radius: var(--cg-r-lg); padding: 30px 28px; }
/* Fehér sávban a fehér kártya eltűnt (fehér a fehéren) — ott a kártya kapja
   a halvány hátteret, a kontraszt megfordul. */
.band-white .step { background: var(--cg-card); border-color: transparent; }
/* A sorszám a márka-kék gradiensén: szürke chipként a három fehér kártya
   egyetlen színtelen sorrá olvadt össze. */
.step-n { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; background: var(--cg-grad-blue);
  font-family: var(--cg-font-display); font-weight: 700; font-size: 14px;
  color: #fff; margin-bottom: 16px; }
.step h3 { margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--cg-ink-2); line-height: 1.55; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }

/* --- Sötét sáv (biztonság) ----------------------------------------------- */
.dark { background: var(--cg-navy); color: #EEF3F9; border-radius: var(--cg-r-lg);
  padding: clamp(48px, 7vw, 84px) clamp(24px, 4vw, 56px); }
.dark h2 { color: #fff; }
.dark .cg-lead { color: #93A3B5; }
.dark .cg-eyebrow { color: #5FB4FF; }
.dark .cg-grid { margin-top: 38px; }
.dark .cg-card { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.1); }
.dark .cg-card h3 { color: #fff; }
.dark .cg-card p { color: #93A3B5; }

/* --- Árazás -------------------------------------------------------------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.price { border: 1px solid var(--cg-line); border-radius: var(--cg-r-lg); padding: 30px 26px;
  background: var(--cg-white); display: flex; flex-direction: column; gap: 14px; }
.price.on { border-color: var(--cg-blue); box-shadow: var(--cg-shadow); position: relative; }
.price-amt { font-family: var(--cg-font-display); font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.price-amt small { font-size: 14px; font-weight: 500; color: var(--cg-ink-3); letter-spacing: 0; }
.price ul { list-style: none; display: flex; flex-direction: column; gap: 9px;
  font-size: 13.5px; color: var(--cg-ink-2); }
.price li::before { content: "✓"; color: var(--cg-green-2); font-weight: 700; margin-right: 8px; }
@media (max-width: 880px) { .price-grid { grid-template-columns: 1fr; } }
/* KIEGÉSZÍTŐK. A termékben ezek kapcsolók a Beállításokban, ezért a lapon is
   kapcsoló-sorok, nem kártyák. Nincs külső keret: a doboz a dobozban lapos volt. */
.addons { margin-top: 44px; }
.addons-head { text-align: center; max-width: 620px; margin: 0 auto 26px; }
.addons-head h3 { font-size: 1.375rem; margin-bottom: 8px; }
.addons-head p { font-size: var(--cg-t-small); color: var(--cg-ink-2); line-height: 1.6; }

.addon-list { background: var(--cg-white); border: 1px solid var(--cg-line);
  border-radius: var(--cg-r-lg); overflow: hidden; box-shadow: var(--cg-shadow); }
.addon { display: flex; align-items: center; gap: 16px; padding: 20px 24px; }
.addon + .addon { border-top: 1px solid var(--cg-line); }

.addon-ic { width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: rgba(46,124,246,.1); color: var(--cg-blue);
  display: flex; align-items: center; justify-content: center; }
.addon-tx { flex: 1; min-width: 0; }
.addon-tx b { display: block; font-size: 15px; margin-bottom: 3px; }
.addon-tx span { font-size: 13px; color: var(--cg-ink-2); line-height: 1.5; }
.addon-pr { flex: none; text-align: right; font-size: 12.5px; color: var(--cg-ink-3);
  white-space: nowrap; }
.addon-pr b { display: block; font-size: 14px; color: var(--cg-ink); }

/* Kapcsoló-jel: bekapcsolható, nem kötelező */
.addon-sw { flex: none; width: 40px; height: 23px; border-radius: 99px;
  background: var(--cg-grad-blue); position: relative; }
.addon-sw::after { content: ""; position: absolute; top: 2.5px; right: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(14,18,32,.25); }
.addon.off .addon-sw { background: #D6D9E4; }
.addon.off .addon-sw::after { right: auto; left: 3px; }
.addon.off .addon-ic { background: var(--cg-card); color: var(--cg-ink-3); }

@media (max-width: 620px) {
  .addon { flex-wrap: wrap; gap: 12px; padding: 18px; }
  .addon-tx { flex: 1 1 100%; order: 3; }
  .addon-pr { margin-left: auto; }
}

/* --- Próbaidő-sáv az árak FÖLÖTT ---------------------------------------
   A vevő először azt akarja tudni, mibe kerül kipróbálni, csak utána, hogy
   mibe kerül használni. Ezért ez a sáv megelőzi a csomagokat. */
.trial { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--cg-navy); color: #EEF3F9; border-radius: var(--cg-r-lg);
  padding: 24px 28px; margin-top: 30px; }
.trial-n { font-family: var(--cg-font-display); font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700; letter-spacing: -.02em; color: #fff; flex: none; }
.trial-tx { flex: 1; min-width: 260px; }
.trial-tx b { display: block; color: #fff; font-size: 1.0625rem; margin-bottom: 4px; }
.trial-tx span { font-size: var(--cg-t-small); color: #93A3B5; line-height: 1.55; }

/* --- Fizetési sáv az árak alatt ---------------------------------------- */
.pay { margin-top: 26px; display: flex; align-items: center; justify-content: center;
  gap: 22px; flex-wrap: wrap; padding: 18px 22px; background: var(--cg-white);
  border: 1px solid var(--cg-line); border-radius: var(--cg-r); }
.pay-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--cg-ink-2); }
.pay-item b { color: var(--cg-ink); font-weight: 600; }
/* Színes ikon-chipek: a sáv szürkén elveszett a fehér kártyán. A kék a
   fizetés-cselekvés, a zöld az eredmény („nincs kockázat") — a márka szerint. */
.pay-ic { width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center; }
.pay-ic.b { background: rgba(46,124,246,.12); color: var(--cg-blue); }
.pay-ic.g { background: rgba(59,217,138,.16); color: var(--cg-green-2); }
.pay-sep { width: 1px; height: 20px; background: var(--cg-line); }
@media (max-width: 720px) { .pay-sep { display: none; } .pay { gap: 12px; flex-direction: column; align-items: flex-start; } }

/* --- GYIK ----------------------------------------------------------------
   Fehér kártyák a szürke lapon: a korábbi, csak vonallal elválasztott lista
   beleolvadt a háttérbe. */
.faq { max-width: var(--cg-max-text); margin: 36px auto 0;
  display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--cg-white); border: 1px solid var(--cg-line);
  border-radius: var(--cg-r); padding: 18px 22px; transition: border-color .2s, box-shadow .2s; }
.faq details:hover { border-color: var(--cg-line-strong); }
.faq details[open] { box-shadow: var(--cg-shadow); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 15.5px; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cg-ink-3); font-size: 20px; flex: none;
  line-height: 1; transition: color .2s; }
.faq details[open] summary::after { content: "–"; color: var(--cg-blue); }
.faq p { margin-top: 12px; font-size: 14.5px; color: var(--cg-ink-2); line-height: 1.65; }

.faq-more { text-align: center; margin-top: 28px; }
.faq-more p { font-size: var(--cg-t-small); color: var(--cg-ink-2); margin-bottom: 14px; }

/* --- Záró CTA ------------------------------------------------------------ */
/* ZÁRÓ CTA. Saját, teljes szélességű sávot kap: a lap alján a szürke háttéren
   ülő szöveg nem vált el az előtte lévő GYIK-től. A halvány kék a márka
   „cselekvés" jelentése; a sötét sáv a biztonságé marad, azt nem ismételjük. */
.final { text-align: center; background: #EAF2FE;
  border-top: 1px solid var(--cg-line); padding-block: clamp(56px, 8vw, 96px); }
/* A `.cg-foot` alapból felső margót visz (egyszínű lapon az adja a levegőt).
   A záró sáv után viszont ez CSÍKOT nyitna a két blokk között, ezért itt nullázzuk. */
.final + .cg-foot { margin-top: 0; }
.final h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
.final p { margin: 18px auto 0; max-width: 560px; font-size: clamp(16px, 2vw, 19px); color: var(--cg-ink-2); }


/* =============================================================================
   ÁR-OLDAL (/arak, /pricing)
   Tokent NEM definiál, mind a corganize.css-ből jön. Csak az ár-oldal saját
   komponensei: csomag-kártyák, kredit-panel, fizetési módok, szolgáltatás-kártyák.
   ============================================================================= */
.ar-head { padding-block: clamp(44px, 6vw, 72px) 0; text-align: center; }
.ar-head h1 { font-size: var(--cg-t-h1); }
.ar-head .cg-lead { margin: 14px auto 0; }

/* --- Ciklus-váltó ------------------------------------------------------- */
.cyc { display: inline-flex; align-items: center; gap: 4px; margin-top: 26px;
  background: var(--cg-white); border: 1px solid var(--cg-line); border-radius: var(--cg-r-pill); padding: 4px; }
.cyc button { border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: var(--cg-t-small); font-weight: 600; color: var(--cg-ink-2);
  padding: 8px 18px; border-radius: var(--cg-r-pill); }
.cyc button.on { background: var(--cg-ink); color: #fff; }
.cyc .save { font-size: var(--cg-t-tiny); font-weight: 700; color: var(--cg-green-2);
  background: rgba(59,217,138,.16); border-radius: var(--cg-r-pill); padding: 3px 9px; margin-left: 4px; }

/* --- Csomag-kártyák ----------------------------------------------------- */
/* EGYFORMA MAGASSÁG: az `align-items: start` miatt minden kártya a saját
   tartalmához zsugorodott, és lépcsőzetesen álltak. Alapból nyújtjuk őket, a
   gomb pedig `margin-top: auto`-val a kártya aljára ül — így a három gomb
   egy vonalban van, akkor is, ha eltérő hosszú a lista. */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; align-items: stretch; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
.plan { background: var(--cg-white); border: 1px solid var(--cg-line); border-radius: var(--cg-r-lg);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 16px; }
/* A KIEMELT csomag kicsit magasabb és keretes — de nem hangosabb: egy
   „legnépszerűbb" felirat elég, nem kell színes háttér is. */
.plan.on { border-color: var(--cg-blue); box-shadow: var(--cg-shadow-lg); position: relative; }
/* ⚠️ A jelvény KÉT SORBA tört és RÁCSÚSZOTT a csomag nevére. Rövidebb szöveg,
   `white-space: nowrap`, és a kiemelt kártya felül több teret kap neki. */
.plan.on { padding-top: 38px; }
.plan-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--cg-grad-blue); color: #fff; font-size: var(--cg-t-tiny); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 14px;
  border-radius: var(--cg-r-pill); white-space: nowrap; box-shadow: var(--cg-shadow); }
.plan h2 { font-size: 1.25rem; }
.plan-sub { font-size: var(--cg-t-small); color: var(--cg-ink-2); margin-top: -10px; }
.plan-price { font-family: var(--cg-font-display); font-size: 2.125rem; font-weight: 700;
  letter-spacing: -.03em; line-height: 1; }
.plan-price small { font-family: var(--cg-font-body); font-size: 14px; font-weight: 500;
  color: var(--cg-ink-3); letter-spacing: 0; }
.plan-gbp { font-size: var(--cg-t-tiny); color: var(--cg-ink-3); margin-top: -10px; }
.plan-people { display: flex; align-items: center; gap: 9px; padding: 12px 14px;
  background: var(--cg-card); border-radius: var(--cg-r); font-size: var(--cg-t-small); }
.plan-people b { font-size: 15px; }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.plan > .cg-btn { margin-top: auto; }
.plan li { display: flex; gap: 10px; align-items: flex-start; color: var(--cg-ink-2); line-height: 1.5; }
.plan li b { color: var(--cg-ink); font-weight: 600; }
.tick { width: 18px; height: 18px; border-radius: 5px; background: var(--cg-grad-green);
  flex: none; margin-top: 1px; display: flex; align-items: center; justify-content: center; }
.tick svg { width: 10px; height: 10px; color: #fff; }
.tick.off { background: var(--cg-card); }
.tick.off::after { content: ""; width: 7px; height: 1.5px; background: var(--cg-ink-3); border-radius: 1px; }

/* --- Mérő-sávos csomagkártyák (a tulaj jóváhagyott mockupja, 2026-07-28:
   docs/design-tervek/arak-terv-tulaj.html). A számszerű különbség (fő, kredit,
   tárhely) VIZUÁLISAN látszik, a listák pedig öröklődnek („Minden, ami az
   Indulóban"), nem ismétlik egymást. ------------------------------------- */
.pl-meters { background: var(--cg-card); border-radius: var(--cg-r); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.pl-meter .mh { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 5px; }
.pl-meter .mh b { font-size: 14px; }
.pl-lab { display: flex; align-items: center; gap: 6px; color: var(--cg-ink-2); }
.pl-lab svg { width: 14px; height: 14px; stroke: var(--cg-blue); flex: none; }
.pl-bar { height: 7px; background: #E2E8F1; border-radius: 99px; overflow: hidden; }
.pl-fill { height: 100%; border-radius: 99px; background: var(--cg-grad-blue); }
.pl-inherit { display: flex; align-items: center; gap: 8px; background: #EEF7F0; border: 1px dashed #BFE3C8; color: #20713A; font-size: 12.5px; font-weight: 600; border-radius: 10px; padding: 9px 12px; }
.pl-inherit svg { flex: none; }
/* a „plusz" sorok pipája kék: ez az, amiért többet fizetsz */
.plan li.plus .tick { background: var(--cg-grad-blue); }
/* Egyedi fejlesztés: szaggatott sáv, nem pipás sor — extra, nem beépített rész. */
.pl-extra { display: flex; align-items: center; gap: 8px; border: 1px dashed #C9D4E6; background: #F8FAFD; color: var(--cg-ink-2); font-size: 12.5px; border-radius: 10px; padding: 9px 12px; }
.pl-extra svg { flex: none; width: 14px; height: 14px; stroke: var(--cg-blue); }
.pl-extra b { color: var(--cg-ink); }
.pl-micro { text-align: center; font-size: 11.5px; color: var(--cg-ink-3); margin-top: 8px; }
/* Próba-magyarázó sáv a hero alatt: a 990 Ft-os mechanika EGY helyen, tisztán. */
.trial-band { display: flex; gap: 14px; align-items: flex-start; background: var(--cg-white); border: 1px solid var(--cg-line); border-left: 4px solid var(--cg-blue); border-radius: 12px; padding: 14px 18px; margin: 22px auto 0; max-width: 680px; text-align: left; }
.trial-band svg { flex: none; margin-top: 2px; color: var(--cg-blue); }
.trial-band p { font-size: 13.5px; color: var(--cg-ink-2); margin: 0; }
.trial-band b { color: var(--cg-ink); }

/* --- Egyedi: külön sáv, nem oszlop -------------------------------------- */
.custom { display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--cg-navy); color: #EEF3F9; border-radius: var(--cg-r-lg);
  padding: 30px 32px; margin-top: 20px; }
.custom-tx { flex: 1; min-width: 280px; }
.custom-tx h3 { color: #fff; font-size: 1.25rem; margin-bottom: 8px; }
.custom-tx p { font-size: var(--cg-t-small); color: #93A3B5; line-height: 1.6; max-width: 62ch; }

/* --- Kredit ------------------------------------------------------------- */
.cred-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 48px);
  align-items: center; }
@media (max-width: 880px) { .cred-hero { grid-template-columns: 1fr; } }
.cred-card { background: var(--cg-white); border: 1px solid var(--cg-line);
  border-radius: var(--cg-r-lg); padding: 26px; box-shadow: var(--cg-shadow); }
.cred-bar { height: 10px; border-radius: 5px; background: var(--cg-card); overflow: hidden; margin: 14px 0 10px; }
.cred-bar i { display: block; height: 100%; border-radius: 5px; background: var(--cg-grad-blue); }
.cred-legend { display: flex; justify-content: space-between; font-size: var(--cg-t-tiny); color: var(--cg-ink-3); }
.cred-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.cred-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.cred-row .sp { flex: 1; border-bottom: 1px dotted var(--cg-line-strong); }
.cred-row b { font-variant-numeric: tabular-nums; }

.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 34px; }
.rule { background: var(--cg-white); border: 1px solid var(--cg-line); border-radius: var(--cg-r); padding: 20px; }
.rule b { display: block; font-size: 14.5px; margin-bottom: 5px; }
.rule span { font-size: 13px; color: var(--cg-ink-2); line-height: 1.55; }

/* --- Táblázatok --------------------------------------------------------- */
.tbl-wrap { overflow-x: auto; margin-top: 26px; }
.tbl { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 14.5px;
  background: var(--cg-white); border: 1px solid var(--cg-line); border-radius: var(--cg-r); overflow: hidden; }
.tbl th { text-align: left; font-size: var(--cg-t-tiny); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--cg-ink-3); padding: 14px 18px; border-bottom: 1px solid var(--cg-line); }
.tbl td { padding: 15px 18px; border-bottom: 1px solid var(--cg-line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl .num b { font-size: 15px; }
.tbl .huf { display: block; font-size: 12px; color: var(--cg-ink-3); font-weight: 500; }

/* A TÁBLÁZAT SZÍNEI. Korábban két szürke hasáb volt, és a lap közepén nagy
   semleges foltot adott: szürke fejléc, szürke leírás, szürke ár. Most a
   művelet ikont kap (a fajtájához illő színnel), a kredit-szám a márka kékje,
   és a sorok fölött nincs szürke sáv. Az ÁR a fontos szám, az legyen a legerősebb. */
.tbl { box-shadow: var(--cg-shadow); }
.tbl th { background: transparent; color: var(--cg-ink-3); }
.tbl th.num { text-align: right; }
.tbl tbody tr:hover { background: #FCFDFF; }
.tbl td b { font-size: 15px; color: var(--cg-ink); }
.tbl .td-d { display: block; margin-top: 4px; margin-left: 36px; font-size: 13px;
  color: var(--cg-ink-2); line-height: 1.5; }
/* Ikon-chip a művelet előtt */
.ti { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; flex: none;
  align-items: center; justify-content: center; vertical-align: -7px; margin-right: 10px; }
.ti.blue { background: rgba(46,124,246,.10); color: var(--cg-blue); }
.ti.green { background: rgba(59,217,138,.16); color: var(--cg-green-2); }
.ti.amber { background: #FDF0DC; color: #A96A12; }
/* A kredit-szám a márka kékje, nagyobb — ez a sor lényege. */
.tbl .num b { font-family: var(--cg-font-display); font-size: 1.0625rem; color: var(--cg-blue);
  letter-spacing: -.01em; }
.tbl .huf { display: block; margin-top: 3px; font-size: 12px; color: var(--cg-ink-3); font-weight: 500; }

/* Fehér sáv a lap közepén: a technikai rész kapja a legtisztább felületet. */
.band-white { background: var(--cg-white); border-block: 1px solid var(--cg-line); }
.band-white .tbl { box-shadow: none; }

/* Kiemelt példa */
.example { margin-top: 22px; background: rgba(46,124,246,.06); border: 1px solid rgba(46,124,246,.22);
  border-radius: var(--cg-r); padding: 22px 24px; }
.example b { color: var(--cg-ink); }
.example p { font-size: 14.5px; color: var(--cg-ink-2); line-height: 1.65; }
.example .big { font-family: var(--cg-font-display); font-size: 1.25rem; font-weight: 700;
  color: var(--cg-ink); margin-top: 10px; display: block; }

/* --- Bővítés-sorok ------------------------------------------------------ */
.ext { background: var(--cg-white); border: 1px solid var(--cg-line);
  border-radius: var(--cg-r-lg); overflow: hidden; margin-top: 26px; box-shadow: var(--cg-shadow); }
.ext-row { display: flex; align-items: center; gap: 16px; padding: 20px 24px; }
.ext-row + .ext-row { border-top: 1px solid var(--cg-line); }
.ext-ic { width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: rgba(46,124,246,.1); color: var(--cg-blue);
  display: flex; align-items: center; justify-content: center; }
.ext-tx { flex: 1; min-width: 0; }
.ext-tx b { display: block; font-size: 15px; margin-bottom: 3px; }
.ext-tx span { font-size: 13px; color: var(--cg-ink-2); line-height: 1.5; }
.ext-pr { flex: none; text-align: right; white-space: nowrap; }
.ext-pr b { display: block; font-size: 15px; }
.ext-pr span { font-size: 12px; color: var(--cg-ink-3); }
@media (max-width: 620px) {
  .ext-row { flex-wrap: wrap; gap: 12px; padding: 18px; }
  .ext-tx { flex: 1 1 100%; order: 3; }
  .ext-pr { margin-left: auto; }
}

/* --- Segítünk elindulni -------------------------------------------------
   SZÍNES kártyák: ez a lap egyetlen olyan része, ahol EMBERI segítséget kínálunk,
   nem szoftvert. A halvány színsáv és az ikon elemeli a többi, technikai
   blokktól. A kék a termék-cselekvés, a zöld az eredmény — a márka szabálya. */
.serv { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
@media (max-width: 760px) { .serv { grid-template-columns: 1fr; } }
.serv-card { border-radius: var(--cg-r-lg); padding: 30px 28px;
  display: flex; flex-direction: column; gap: 10px; border: 1px solid transparent; }
.serv-card.blue { background: linear-gradient(165deg, #E9F2FF 0%, #F6F9FE 65%); border-color: rgba(46,124,246,.22); }
.serv-card.green { background: linear-gradient(165deg, #E6F9F0 0%, #F5FCF9 65%); border-color: rgba(59,217,138,.32); }
.serv-ic { width: 46px; height: 46px; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; margin-bottom: 4px; color: #fff; }
.serv-card.blue .serv-ic { background: var(--cg-grad-blue); }
.serv-card.green .serv-ic { background: var(--cg-grad-green); }
.serv-card h3 { margin-bottom: 0; }
.serv-price { font-family: var(--cg-font-display); font-size: 1.625rem; font-weight: 700;
  letter-spacing: -.025em; }
.serv-price small { font-family: var(--cg-font-body); font-size: 13px; font-weight: 500; color: var(--cg-ink-3); }
.serv-card p { font-size: 14px; color: var(--cg-ink-2); line-height: 1.6; }
.serv-card .cg-btn { margin-top: auto; align-self: flex-start; }

/* --- Fizetési módok ----------------------------------------------------- */
.pay { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (max-width: 880px) { .pay { grid-template-columns: 1fr; } }
.pay-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-top: 20px;
  font-size: 14.5px; color: var(--cg-ink-2); }
.pay-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.pay-methods { background: var(--cg-white); border: 1px solid var(--cg-line);
  border-radius: var(--cg-r-lg); padding: 26px; box-shadow: var(--cg-shadow); }
.pay-lbl { display: flex; align-items: center; gap: 10px; font-size: var(--cg-t-tiny); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cg-ink-3); margin-bottom: 16px; }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 8px; }
.pm { display: flex; align-items: center; gap: 9px; padding: 13px 15px; font-size: 13.5px;
  color: var(--cg-ink); border: 1px solid var(--cg-line); border-radius: var(--cg-r); background: var(--cg-white); }
.pm-stripe { font-size: 12px; font-weight: 700; letter-spacing: -.01em; color: #fff;
  background: #635BFF; border-radius: 5px; padding: 4px 10px; }
/* A kártya-logók: nagyobb jel, szűkebb csempe. Korábban 140px-es rácsban
   álltak apró logóval, ezért a csempe nagy része üres volt. */
.pm-grid.cards { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.pm-grid.cards .pm { justify-content: center; padding: 10px 8px; }
.pm-grid.cards svg { width: auto; height: 24px; }
.pm-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cg-line);
  font-size: 12.5px; color: var(--cg-ink-3); line-height: 1.55; }

/* --- GYIK --------------------------------------------------------------- */
.faq { max-width: var(--cg-max-text); margin: 30px auto 0; display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--cg-white); border: 1px solid var(--cg-line);
  border-radius: var(--cg-r); padding: 18px 22px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 15.5px; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cg-ink-3); font-size: 20px; }
.faq details[open] summary::after { content: "–"; color: var(--cg-blue); }
.faq p { margin-top: 11px; font-size: 14.5px; color: var(--cg-ink-2); line-height: 1.65; }

/* ZÁRÓ BLOKK. Halvány kék helyett a márka SÖTÉT alapja: ez a lap utolsó
   cselekvés-pontja, és a fehér sávok után egy sötét blokk zárja le a lapot.
   A pontminta ugyanaz a motívum, mint a landing heroján — összeköti a kettőt.
   ⚠️ NINCS felső margó: az előtte lévő szekciónak már van alsó térköze. */
.final { text-align: center; position: relative; overflow: hidden;
  background: var(--cg-navy); color: #EEF3F9;
  padding-block: clamp(56px, 7vw, 92px); }
.final::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.10) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 0%, transparent 75%);
}
.final > * { position: relative; }
.final h2 { color: #fff; }
.final p { color: #93A3B5; }
.final h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.final p { margin: 16px auto 0; max-width: 540px; font-size: 17px; color: var(--cg-ink-2); }
.final .cg-btn { margin-top: 26px; }

/* A LAP RITMUSA. Az alap szekció-térköz (--cg-sec, akár 104px) a landinghez
   készült, ahol nagy képek vannak. Itt sok RÖVID blokk követi egymást, és
   ugyanaz a térköz köztük már üres sávnak látszik. */
.cg-section { padding-block: clamp(44px, 5.5vw, 68px); }
.band-white + .cg-section, .cg-section + .band-white { padding-top: clamp(44px, 5.5vw, 68px); }


/* Kompakt „elfogadott fizetési módok" sor a főoldali árlista alatt
   (tulaj-kérés, 2026-07-28). A részletes változat az /arak Fizetés-szekciója. */
.pay-mini { display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; margin-top: 22px; color: var(--cg-ink-3); font-size: 12px; }
.pay-mini svg { display: block; opacity: .85; }
.pay-mini .sep { width: 1px; height: 14px; background: var(--cg-line-strong); }