/* ==========================================================================
   Snippet-variánsok – „ElektroMax" (ev-*) kinézetek
   Az mgy2 sablon stílusa, a globális színpalettára (--brand-*) kötve.
   Csak akkor töltődik be, ha egy oldalon ilyen variáns szerepel.
   ========================================================================== */

.ev-section { padding: 5.5rem 0; }
.ev-section-alt { background-color: var(--brand-light, #eef1f7); }

.ev-eyebrow {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-primary, #00182a);
  background: var(--brand-accent, #ffdb0a);
  padding: .35rem .9rem;
  border-radius: var(--ui-radius-pill, 999px);
  margin-bottom: 1rem;
}

/* Kártya */
.ev-card {
  position: relative;
  padding: 2rem 1.75rem;
  border: var(--ui-card-border-width, 1px) solid var(--ui-card-border, rgba(var(--brand-primary-rgb, 0, 24, 42), .1));
  border-radius: var(--ui-radius, 1rem);
  background: var(--ui-card-bg, #fff);
  color: var(--ui-card-color, inherit);
  box-shadow: var(--ui-card-shadow, none);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ev-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ui-shadow-md, 0 18px 45px rgba(var(--brand-primary-rgb, 0, 24, 42), .12));
  border-color: transparent;
}
.ev-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--ui-radius, 1rem);
  background: var(--ui-card-icon-bg, rgba(var(--brand-accent-rgb, 255, 219, 10), .16));
  color: var(--ui-card-icon-color, var(--brand-primary, #00182a));
  font-size: 1.5rem;
}
.ev-card h3, .ev-card h4, .ev-card h5 { color: var(--ui-card-heading, inherit); }

.ev-card-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--brand-primary, #00182a);
  text-decoration: none;
}
.ev-card-link:hover { color: var(--brand-accent-600, #e0c109); }

/* Címke (tag) */
.ev-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-primary, #00182a);
  background: rgba(var(--brand-primary-rgb, 0, 24, 42), .07);
  padding: .25rem .6rem;
  border-radius: var(--ui-radius-sm, .4rem);
}

/* ==========================================================================
   Hero – „ElektroMax" variáns (nagy háttérkép + overlay)
   ========================================================================== */
.ev-hero {
  position: relative;
  min-height: 88vh;
  padding-top: 7rem;
  padding-bottom: 5rem;
  background-color: var(--brand-primary, #00182a);
  background-image:
    linear-gradient(100deg, rgba(var(--brand-primary-rgb, 0, 24, 42), .96) 0%, rgba(var(--brand-primary-rgb, 0, 24, 42), .86) 45%, rgba(var(--brand-primary-rgb, 0, 24, 42), .55) 100%);
  background-size: cover;
  background-position: center right;
  overflow: hidden;
}
.ev-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(var(--brand-primary-rgb, 0, 24, 42), .85) 0%, rgba(var(--brand-primary-rgb, 0, 24, 42), 0) 35%);
  pointer-events: none;
}
.ev-hero h1 { color: #fff; }
.ev-hero .display-3 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; }

.ev-badge {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1rem;
  border-radius: var(--ui-radius-pill, 999px);
  background: rgba(var(--brand-accent-rgb, 255, 219, 10), .15);
  border: 1px solid rgba(var(--brand-accent-rgb, 255, 219, 10), .45);
  color: var(--brand-accent, #ffdb0a);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .03em;
}
.ev-accent { color: var(--brand-accent, #ffdb0a); }

.ev-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--ui-radius-sm, .8rem);
  background: var(--brand-accent, #ffdb0a);
  color: var(--brand-primary, #00182a);
  font-size: 1.25rem;
}

.ev-hero-card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(14px);
  border-radius: var(--ui-radius, 1rem);
  padding: 1.75rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .3);
}
.ev-hero-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--ui-radius-sm, .8rem);
  background: rgba(var(--brand-accent-rgb, 255, 219, 10), .2);
  color: var(--brand-accent, #ffdb0a);
  font-size: 1.35rem;
}
.ev-hero-card-phone {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--brand-accent, #ffdb0a);
  text-decoration: none;
  letter-spacing: .02em;
}
.ev-hero-card-phone:hover { color: #fff; }

/* ==========================================================================
   További ElektroMax variánsok
   ========================================================================== */

/* Jellemzők csempe */
.ev-feature {
  background: var(--ui-card-bg, var(--brand-light, #eef1f7));
  border: var(--ui-card-border-width, 1px) solid var(--ui-card-border, rgba(var(--brand-primary-rgb, 0, 24, 42), .06));
  border-radius: var(--ui-radius, 1rem);
  padding: 1.5rem;
  height: 100%;
  color: var(--ui-card-color, inherit);
  box-shadow: var(--ui-card-shadow, none);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ev-feature:hover { transform: translateY(-5px); box-shadow: var(--ui-shadow-md, 0 18px 45px rgba(var(--brand-primary-rgb, 0, 24, 42), .12)); }
.ev-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: var(--ui-radius-sm, .9rem);
  background: var(--brand-primary, #00182a);
  color: var(--brand-accent, #ffdb0a);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

/* Statisztika kártya */
.ev-stat {
  background: var(--ui-card-bg, #fff);
  border: var(--ui-card-border-width, 1px) solid var(--ui-card-border, rgba(var(--brand-primary-rgb, 0, 24, 42), .08));
  border-left: 4px solid var(--brand-accent, #ffdb0a);
  border-radius: var(--ui-radius-sm, .85rem);
  padding: 1rem 1.1rem;
  color: var(--ui-card-color, inherit);
  box-shadow: var(--ui-card-shadow, none);
}

/* CTA sáv */
.ev-cta { background: var(--brand-accent, #ffdb0a); color: var(--brand-primary, #00182a); }
.ev-btn-dark {
  background-color: var(--brand-primary, #00182a);
  border-color: var(--brand-primary, #00182a);
  color: #fff;
  border-radius: var(--ui-btn-radius, var(--ui-radius-pill, 999px));
}
.ev-btn-dark:hover { background-color: var(--brand-primary-700, #293d4c); border-color: var(--brand-primary-700, #293d4c); color: #fff; }

/* GYIK kártyás accordion */
.ev-accordion .accordion-item {
  border: var(--ui-card-border-width, 1px) solid var(--ui-card-border, rgba(var(--brand-primary-rgb, 0, 24, 42), .1));
  border-radius: var(--ui-radius-sm, .85rem) !important;
  margin-bottom: .7rem;
  overflow: hidden;
  background: var(--ui-card-bg, #fff);
}
.ev-accordion .accordion-button {
  font-weight: 600;
  color: var(--brand-primary, #00182a);
  background: #fff;
}
.ev-accordion .accordion-button:not(.collapsed) { background: var(--brand-primary, #00182a); color: #fff; }
.ev-accordion .accordion-button:focus { box-shadow: none; }

/* Munkatárs csempe */
.ev-team { text-align: inherit; }
.ev-team-photo {
  overflow: hidden;
  background: var(--brand-light, #eef1f7);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  border: 3px solid var(--brand-accent, #ffdb0a);
}
.ev-team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-team-placeholder { font-size: 2.2rem; color: #8a97a4; }
.ev-team-photo--circle { border-radius: 50%; }
.ev-team-photo--rounded { border-radius: var(--ui-radius-lg, 18px); }
.ev-team-photo--square { border-radius: 0; }
.ev-team-photo--portrait { border-radius: var(--ui-radius-sm, .6rem); }
.ev-team-photo--sm { width: 88px; height: 88px; }
.ev-team-photo--md { width: 120px; height: 120px; }
.ev-team-photo--lg { width: 160px; height: 160px; }
.ev-team-photo--portrait.ev-team-photo--sm { width: 88px; height: 110px; }
.ev-team-photo--portrait.ev-team-photo--md { width: 120px; height: 150px; }
.ev-team-photo--portrait.ev-team-photo--lg { width: 160px; height: 200px; }
.ev-team-contacts { display: flex; flex-direction: column; gap: .3rem; margin: 0; font-size: .9rem; }
.ev-team-contacts li { display: flex; gap: .5rem; align-items: flex-start; }
.ev-team-contacts i { color: var(--brand-primary, #00182a); margin-top: .2rem; }
.ev-team-contacts a { color: var(--brand-primary, #00182a); font-weight: 600; }

/* ==========================================================================
   SZAKCIÓ-HÁTTÉR (pure CSS) – szín, minta, animáció
   A snippetek `bg` / `bg_pattern` / `bg_animated` mezőiből a `sectionBg()`
   segédfüggvény állítja elő az osztályokat. Minden szín a globális palettából
   (--brand-*) származik, így követi a beállított színeket.

   Rétegek (hátulról előre):
     1. a szekció background-color-ja  → a választott szín
     2. ::after  → az ANIMÁCIÓ (blobs / aurora), z-index:-2
     3. ::before → a MINTA (dots/grid/…),          z-index:-1
     4. a tartalom (<div class="container">)        z-index:1
   Így a minta és az animáció egyszerre is megjelenhet, és a szöveg mindig
   a dekoráció fölött marad.
   ========================================================================== */

.sbg {
  position: relative;
  isolation: isolate;
  background-color: var(--brand-bg, #ffffff);
  /* A minta „tintája”: világos alapon a szövegszín, sötéten világos.
     A láthatóság kedvéért elég erős (a minták kicsi, ismétlődő elemek). */
  --sbg-line: rgba(var(--brand-text-rgb, 31, 41, 51), .22);
}
.sbg > .container,
.sbg > .container-fluid {
  position: relative;
  z-index: 1;
}

/* --- Színek ---------------------------------------------------------------- */
.sbg--white      { background-color: var(--brand-bg, #ffffff); }
.sbg--light      { background-color: var(--brand-surface, #eef1f7); }
.sbg--navy       { background-color: var(--brand-primary, #00182a); }
.sbg--secondary  { background-color: var(--brand-secondary, #4d5d6a); }
.sbg--accent     { background-color: var(--brand-accent, #ffdb0a); }
.sbg--none       { background-color: transparent; }

/* Sötét háttereken a törzsszöveg világos, és a minta „tintája” is világos. */
.sbg--navy, .sbg--secondary {
  color: var(--brand-on-primary, #ffffff);
  --sbg-line: rgba(255, 255, 255, .20);
}
.sbg--accent { color: var(--brand-on-accent, #00182a); }

/* ==========================================================================
   Minták (pure CSS gradiens-technikák) – a szekció background-image-én.
   A mintaválaszték a klasszikus CSS „pattern” technikákra épül
   (hard-stop repeating-*-gradientek), ezért blend/filter nélkül is élesek,
   és világos és sötét háttéren egyaránt működnek.
   A minta színe: --sbg-line (világos alapon sötét, sötéten világos).
   ========================================================================== */
/* Halftone pöttyök */
.sbg--pattern-dots {
  background-image: radial-gradient(var(--sbg-line) 1.7px, transparent 1.8px);
  background-size: 20px 20px;
}
/* Rács */
.sbg--pattern-grid {
  background-image:
    linear-gradient(var(--sbg-line) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--sbg-line) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}
/* Ferde csíkok */
.sbg--pattern-stripes {
  background-image: repeating-linear-gradient(45deg, var(--sbg-line) 0 2px, transparent 2px 14px);
}
/* Sugarak (conic) */
.sbg--pattern-rays {
  background-image: repeating-conic-gradient(from 0deg, var(--sbg-line) 0 4deg, transparent 4deg 15deg);
}
/* Koncentrikus körök */
.sbg--pattern-rings {
  background-image: repeating-radial-gradient(circle at 50% 50%, var(--sbg-line) 0 2px, transparent 2px 18px);
  background-size: 60px 60px;
}
/* Cikkcakk / hullám */
.sbg--pattern-waves {
  background-image:
    repeating-linear-gradient(45deg, var(--sbg-line) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(-45deg, var(--sbg-line) 0 2px, transparent 2px 12px);
}

/* ==========================================================================
   Animált hátterek (pure CSS keyframes)
   ========================================================================== */

/* --- Blobs: morpholó, forgó színfoltok --------------------------------------
   A border-radius „morph” + folyamatos „spin” technika (fancy-border-radius,
   ahogy a klasszikus CSS blob demók): két nagy, eltolt, LEKEREKÍTETT folt
   lassan alakot vált (border-radius animáció), miközben forog. A foltok éles
   kontúrúak – ez adja a jellegzetes „blob” hatást. A ::before és ::after
   rétegen vannak, a szekció háttere fölött, a tartalom alatt (z-index: -1). */
.sbg--anim-blobs { overflow: hidden; }
.sbg--anim-blobs::before,
.sbg--anim-blobs::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 65vmax;
  height: 65vmax;
  border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
  pointer-events: none;
  will-change: border-radius, transform;
}
.sbg--anim-blobs::before {
  left: -24vmin;
  top: -24vmin;
  transform-origin: 55% 55%;
  background: var(--brand-accent, #ffdb0a);
  opacity: .32;
  animation: sbg-morph 15s linear infinite alternate, sbg-spin 20s linear infinite;
}
.sbg--anim-blobs::after {
  width: 58vmax;
  height: 58vmax;
  right: -16vmin;
  bottom: -26vmin;
  transform-origin: 20% 20%;
  background: var(--brand-secondary, #4d5d6a);
  opacity: .5;
  animation: sbg-morph 10s linear infinite alternate, sbg-spin 26s linear infinite reverse;
}
/* Világos alapon visszafogottabb foltok – a sötét szöveg olvasható marad. */
.sbg--white.sbg--anim-blobs::before,
.sbg--white.sbg--anim-blobs::after,
.sbg--light.sbg--anim-blobs::before,
.sbg--light.sbg--anim-blobs::after,
.sbg--none.sbg--anim-blobs::before,
.sbg--none.sbg--anim-blobs::after,
.sbg--accent.sbg--anim-blobs::before,
.sbg--accent.sbg--anim-blobs::after {
  opacity: .18;
}
@keyframes sbg-morph {
  0%   { border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; }
  100% { border-radius: 40% 60%; }
}
@keyframes sbg-spin {
  to { transform: rotate(1turn); }
}

/* --- Aurora: lassan mozgó gradienssáv -------------------------------------- */
/* Az aurora egy teljes szélességű színsáv, ezért mindig sötét alapra és
   világos szövegre vált – így a felirat garantáltan olvasható. */
.sbg--anim-aurora {
  overflow: hidden;
  background-color: var(--brand-primary, #00182a);
  color: var(--brand-on-primary, #ffffff);
}
/* Az aurora sötét alapú, ezért a címsorok is világosak legyenek (a fix
   sötét cím-szín különben eltűnne a színátmenet sötét részein).
   KIVÉTEL: a saját VILÁGOS hátterű kártyákon belül (pl. .card-service,
   .contact-card, .team-member) a címek maradjanak sötétek – különben fehér
   lenne fehér kártyán. A sötét panelek (.about-visual) maradnak világosak. */
.sbg--anim-aurora h1, .sbg--anim-aurora h2, .sbg--anim-aurora h3,
.sbg--anim-aurora h4, .sbg--anim-aurora h5, .sbg--anim-aurora h6 {
  color: var(--brand-on-primary, #ffffff);
}
.sbg--anim-aurora :is(.card-service, .contact-card, .team-member, .accordion-item):not(.on-dark) h1,
.sbg--anim-aurora :is(.card-service, .contact-card, .team-member, .accordion-item):not(.on-dark) h2,
.sbg--anim-aurora :is(.card-service, .contact-card, .team-member, .accordion-item):not(.on-dark) h3,
.sbg--anim-aurora :is(.card-service, .contact-card, .team-member, .accordion-item):not(.on-dark) h4,
.sbg--anim-aurora :is(.card-service, .contact-card, .team-member, .accordion-item):not(.on-dark) h5,
.sbg--anim-aurora :is(.card-service, .contact-card, .team-member, .accordion-item):not(.on-dark) h6 {
  color: var(--brand-text, #1f2933);
}
/* A sötét panelen (about-visual) a világos címek maradjanak. */
.sbg--anim-aurora .about-visual h1,
.sbg--anim-aurora .about-visual h2,
.sbg--anim-aurora .about-visual h3 { color: var(--brand-on-primary, #ffffff); }
.sbg--anim-aurora .section-label { color: var(--brand-on-primary, #ffffff); background: rgba(255,255,255,.16); }
.sbg--anim-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: linear-gradient(120deg,
    var(--brand-primary, #00182a) 0%,
    var(--brand-secondary, #4d5d6a) 28%,
    var(--brand-accent, #ffdb0a) 50%,
    var(--brand-secondary, #4d5d6a) 72%,
    var(--brand-primary, #00182a) 100%);
  background-size: 300% 300%;
  animation: sbg-aurora 18s ease-in-out infinite;
}
@keyframes sbg-aurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Animált háttéren a minta visszafogottabb, hogy ne legyen zsúfolt. */
.sbg--anim-blobs.sbg--pattern-dots,
.sbg--anim-blobs.sbg--pattern-grid,
.sbg--anim-blobs.sbg--pattern-stripes,
.sbg--anim-blobs.sbg--pattern-rays,
.sbg--anim-blobs.sbg--pattern-rings,
.sbg--anim-blobs.sbg--pattern-waves,
.sbg--anim-aurora.sbg--pattern-dots,
.sbg--anim-aurora.sbg--pattern-grid,
.sbg--anim-aurora.sbg--pattern-stripes,
.sbg--anim-aurora.sbg--pattern-rays,
.sbg--anim-aurora.sbg--pattern-rings,
.sbg--anim-aurora.sbg--pattern-waves {
  --sbg-line: rgba(255, 255, 255, .12);
}

/* Akadálymentesítés: csökkentett mozgásnál az animációk leállnak. */
@media (prefers-reduced-motion: reduce) {
  .sbg--anim-blobs::before,
  .sbg--anim-blobs::after,
  .sbg--anim-aurora::after {
    animation: none;
  }
}

/* ==========================================================================
   Paletta-segédosztályok (badge, háttér, szöveg)
   A globális tokenekre (--brand-*) kötve, a Bootstrap .text-bg-* / .bg-* /
   .text-* mintájára. Használhatók az `html_block` snippetben (kód módban),
   mert osztálynevek – a sanitizer az inline `var()`-t kiszűrné, az osztályt
   viszont megtartja. A háttér !important, hogy a Bootstrap .text-bg-primary /
   .bg-primary fölé írjon.

   Példa:
     <span class="badge rounded-pill text-bg-accent">Kiemelt</span>
     <div class="bg-primary text-on-primary">…</div>
   ========================================================================== */
.text-bg-accent   { background-color: var(--brand-accent) !important;   color: var(--brand-on-accent) !important; }
.text-bg-primary  { background-color: var(--brand-primary) !important;  color: var(--brand-on-primary) !important; }
.text-bg-secondary{ background-color: var(--brand-secondary) !important;color: var(--brand-on-secondary) !important; }
.text-bg-surface  { background-color: var(--brand-surface) !important;  color: var(--brand-text) !important; }
.text-bg-body     { background-color: var(--brand-bg) !important;       color: var(--brand-text) !important; }

.bg-accent    { background-color: var(--brand-accent) !important; }
.bg-primary   { background-color: var(--brand-primary) !important; }
.bg-secondary { background-color: var(--brand-secondary) !important; }
.bg-surface   { background-color: var(--brand-surface) !important; }
.bg-body      { background-color: var(--brand-bg) !important; }

.text-on-accent    { color: var(--brand-on-accent) !important; }
.text-on-primary   { color: var(--brand-on-primary) !important; }
.text-on-secondary { color: var(--brand-on-secondary) !important; }
.text-brand        { color: var(--brand-text) !important; }
.text-accent       { color: var(--brand-accent) !important; }
.text-primary { color: var(--brand-primary) !important; }
.text-secondary { color: var(--brand-secondary) !important; }

/* Árnyék nélküli, lapos badge a paletta-színekkel. */
.badge-accent { background-color: var(--brand-accent) !important; color: var(--brand-on-accent) !important; }




/* ==========================================================================
   Hero box / home hero – további variánsok (hb-*, hero--*)
   ========================================================================== */

/* Hero box – kép + szöveg */
.hb-media {
  border-radius: var(--ui-radius, 1rem);
  overflow: hidden;
  border: var(--ui-card-border-width, 1px) solid var(--ui-card-border, var(--brand-border));
  box-shadow: var(--ui-card-shadow, none);
  background: var(--brand-surface);
}
.hb-media img { width: 100%; height: auto; display: block; object-fit: cover; }
.hb-media-empty {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; font-size: 3rem; color: var(--brand-muted, #8a97a4);
}

/* Hero box – letisztult */
.hb--minimal { background: var(--brand-bg); }
.hb-minimal-inner { max-width: 820px; }
.hb-minimal-title { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; }
.hb-mark {
  color: var(--brand-accent);
  border-bottom: .14em solid var(--brand-accent);
}

/* Kezdőlap hero – kép + szöveg */
.hero--split .hero-media {
  border-radius: var(--ui-radius, 1rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--ui-shadow-lg, 0 18px 45px rgba(0, 0, 0, .3));
}
.hero--split .hero-media img { width: 100%; height: auto; display: block; object-fit: cover; }
.hero--split .hero-media-empty {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; font-size: 3rem; color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .05);
}
.hero-split-list li { color: var(--sos-on-dark, #fff); }
.hero-split-list i { color: var(--brand-accent); }

/* Kezdőlap hero – középre igazított */
.hero--center { text-align: center; }
.hero--center .hero-center-inner { max-width: 900px; }
.hero--center .lead { max-width: 44rem; }

/* ==========================================================================
   Szolgáltatás-kártyák – „Kiemelt + lista" variáns (sc-*)
   ========================================================================== */
.sc-featured {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  border-radius: var(--ui-radius, 1rem);
  padding: 2.25rem 2rem;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: var(--ui-shadow-md, 0 18px 45px rgba(var(--brand-primary-rgb, 0, 24, 42), .12));
}
.sc-featured h3, .sc-featured p { color: inherit; }
.sc-featured-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: var(--ui-radius, 1rem);
  background: var(--brand-accent); color: var(--brand-on-accent);
  font-size: 1.6rem; margin-bottom: 1.25rem;
}
.sc-list { display: grid; gap: 1rem; }
.sc-list-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem 1.25rem;
  background: var(--ui-card-bg, var(--brand-bg));
  border: var(--ui-card-border-width, 1px) solid var(--ui-card-border, var(--brand-border));
  border-radius: var(--ui-radius, 1rem);
  box-shadow: var(--ui-card-shadow, none);
  height: 100%;
}
.sc-list-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--ui-radius-sm, .75rem);
  background: rgba(var(--brand-accent-rgb, 255, 219, 10), .18);
  color: var(--brand-primary); font-size: 1.1rem;
}
.sc-list-item p { color: var(--brand-secondary); font-size: .95rem; }

/* ==========================================================================
   CTA sáv – „Letisztult sáv" variáns (cta-bar)
   ========================================================================== */
.cta-bar { background: var(--brand-primary); color: var(--brand-on-primary); }
.cta-bar-title { color: var(--brand-on-primary); }
.cta-bar-text { color: var(--brand-on-primary); opacity: .82; max-width: 48rem; }

/* ==========================================================================
   Vélemények (testimonials) – ts-*
   ========================================================================== */
.ts-card, .ts-mini {
  background: var(--ui-card-bg, var(--brand-bg));
  border: var(--ui-card-border-width, 1px) solid var(--ui-card-border, var(--brand-border));
  border-radius: var(--ui-radius, 1rem);
  box-shadow: var(--ui-card-shadow, var(--ui-shadow-sm, none));
  padding: 1.75rem;
  margin: 0;
  color: var(--ui-card-color, inherit);
}
.ts-stars { display: flex; gap: .15rem; color: var(--brand-accent); font-size: .95rem; margin-bottom: .75rem; }
.ts-quote { font-size: 1.02rem; color: var(--ui-card-color, var(--brand-text)); margin: 0 0 1.25rem; }
.ts-mini-quote { font-size: .95rem; color: var(--ui-card-color, var(--brand-text)); margin: 0 0 1rem; }
.ts-author { display: flex; align-items: center; gap: .75rem; }
.ts-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto;
  border: 2px solid var(--brand-accent);
}
.ts-avatar--empty {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-surface); color: var(--brand-muted, #8a97a4);
  font-size: 1.2rem;
}
.ts-name { display: block; font-weight: 700; color: var(--ui-card-heading, var(--brand-text)); line-height: 1.2; }
.ts-role { display: block; font-size: .85rem; color: var(--ui-card-color, var(--brand-secondary)); opacity: .85; }

/* Vélemények – kiemelt idézet */
.ts-lead { max-width: 820px; margin: 0 auto; }
.ts-lead-mark { display: inline-flex; color: var(--brand-accent); font-size: 3rem; line-height: 1; }
.ts-lead-quote {
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.35; font-weight: 500;
  color: var(--brand-text); margin: 1rem 0 1.5rem;
}
.ts-lead-author { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.ts-lead-author .ts-avatar { width: 56px; height: 56px; }

/* Sötét háttéren (sbg--navy / sbg--secondary) a vélemény-kártyák olvashatók. */
.sbg--navy .ts-card, .sbg--secondary .ts-card,
.sbg--navy .ts-mini, .sbg--secondary .ts-mini { color: var(--brand-on-primary); }
.sbg--navy .ts-name, .sbg--secondary .ts-name { color: var(--brand-on-primary); }
.sbg--navy .ts-role, .sbg--secondary .ts-role { color: rgba(255, 255, 255, .7); }

/* Gombok primary (márka) hátteren: a kontraszt-színt használják, így minden
   témában olvashatók (pl. CTA sáv, kiemelt szolgáltatás-kártya). */
.btn-on-primary {
  background-color: var(--brand-on-primary);
  border-color: var(--brand-on-primary);
  color: var(--brand-primary);
}
.btn-on-primary:hover, .btn-on-primary:focus {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--brand-on-accent);
}
.btn-outline-on-primary {
  background: transparent;
  border: 2px solid var(--brand-on-primary);
  color: var(--brand-on-primary);
}
.btn-outline-on-primary:hover, .btn-outline-on-primary:focus {
  background: var(--brand-on-primary);
  border-color: var(--brand-on-primary);
  color: var(--brand-primary);
}

/* Nyelvváltó (HU | EN) – minden témában a szöveg színét örökli, ezért
   világos és sötét háttéren is olvasható. Az aktív nyelv rövid kódja látszik. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .7rem;
  border: 1px solid currentColor;
  border-radius: var(--ui-radius-pill, 50rem);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  opacity: .82;
  transition: opacity .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.lang-switch:hover,
.lang-switch:focus {
  opacity: 1;
  color: var(--brand-accent);
  border-color: var(--brand-accent);
  text-decoration: none;
}