/* ==========================================================================
   NETDOKTOR BRAND LAYER - szekcio- es komponensvariansok
   --------------------------------------------------------------------------
   Eredet: NEW CLEAN IMPLEMENTATION.

   Ez a reteg a Generic Clean Shell komponenseire epulo, NetDoktor-specifikus
   VARIANSOKAT tartalmaz (`nd-` prefix). A shell alaposztalyait nem irja at:
   minden varians a megfelelo `gs-` osztaly melle kerul.

   Status: GENERIC CLEAN SHELL DERIVATIVE (a shell komponenseire epulo,
   ebben a korben irt sajat arculati reteg).
   ========================================================================== */

/* ============================================ 1. HEXAGON HATTER-MOTIVUM
   NETDOKTOR PROPRIETARY VISUAL CONCEPT - megtartott designelem.
   Az implementacio UJ: sajat generalt mintazat, sajat geometria.
   A motivum mindig dekorativ hatterreteg, soha nem hordoz tartalmat.        */

.nd-hex {
  position: relative;
  isolation: isolate;
  background-image: var(--nd-gradient-hero);
  color: var(--text-inverse);
}
.nd-hex::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--nd-hex-pattern);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.nd-hex :where(h1, h2, h3, h4) { color: inherit; }
.nd-hex .gs-section__eyebrow { color: rgba(255, 255, 255, 0.82); }
/* Minden halvanyitott szovegszerep vilagos hatteren SOTET, sotet hatteren
   VILAGOS kell legyen - kulonben a bevezeto szoveg olvashatatlanna valik. */
.nd-hex .gs-section__lead,
.nd-hex .gs-hero__lead,
.nd-hex .gs-card__text,
.nd-hex .gs-text-secondary,
.nd-hex .gs-text-muted,
.nd-hex p { color: rgba(255, 255, 255, 0.88); }

/* Vilagosabb savvaltozat a lap alsóbb kiemelt szekciojahoz. */
.nd-hex--band { background-image: var(--nd-gradient-band); }

/* Halvany valtozat vilagos hatteren: a motivum csak sejlik. */
.nd-hex--light {
  background-image: none;
  background-color: var(--surface-alt);
  color: var(--text-primary);
}
.nd-hex--light::before { opacity: 0.55; filter: invert(1) saturate(0) brightness(0.35); }

/* Felso fenyudvar - a mert radialis kiemeles megfeleloje. */
.nd-glow { position: relative; isolation: isolate; }
.nd-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--nd-glow-top);
  pointer-events: none;
}

/* =========================================================== 2. FEJLEC
   A shell fejlece atlatszo alapon indul a heron, es gorgetesre valik
   tomorre. A `data-gs-scrolled` allapotot a shell navigation modulja adja. */

.nd-header {
  background: transparent;
  border-block-end-color: transparent;
}
.nd-header .gs-header__brand { color: var(--text-inverse); }
.nd-header .gs-nav__link     { color: rgba(255, 255, 255, 0.88); }
.nd-header .gs-nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }
.nd-header .gs-nav__link[aria-current="page"] { color: #fff; }
.nd-header .gs-nav-toggle    { color: var(--text-inverse); }
.nd-header .gs-nav-toggle:hover { background: rgba(255, 255, 255, 0.16); }

.nd-header[data-gs-scrolled="true"] {
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-block-end-color: var(--border-subtle);
}
.nd-header[data-gs-scrolled="true"] .gs-header__brand { color: var(--nd-deep-700); }
.nd-header[data-gs-scrolled="true"] .gs-nav__link { color: #2f2f2f; }
.nd-header[data-gs-scrolled="true"] .gs-nav__link:hover { color: var(--nd-deep-700); background: var(--color-primary-soft); }
.nd-header[data-gs-scrolled="true"] .gs-nav__link[aria-current="page"] { color: var(--nd-deep-700); }
.nd-header[data-gs-scrolled="true"] .gs-nav-toggle { color: var(--nd-ink-900); }
.nd-header[data-gs-scrolled="true"] .gs-nav-toggle:hover { background: var(--color-primary-soft); }

/* A markajel helyorzo alakzata - a vegleges logo kulon jovahagyott asset lesz. */
.nd-brandmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--nd-gradient-primary);
  color: #fff;
}
.nd-header[data-gs-scrolled="true"] .nd-brandmark { background: var(--nd-gradient-primary); }
.nd-brand-text { font-weight: 800; letter-spacing: -0.03em; }

/* ============================================================== 3. GOMBOK
   Mert karakter: pill alak, atmenetes kitoltes, 48 px magassag.            */

.gs-btn { border-radius: var(--radius-pill); font-weight: 600; }
.gs-btn:not(.gs-btn--sm):not(.gs-btn--lg) { --gs-btn-height: 3rem; }

.nd-btn-primary {
  background-image: var(--nd-gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(12, 92, 122, 0.22);
}
.nd-btn-primary:hover { background-image: linear-gradient(135deg, #094a63 0%, #128aa5 100%); color: #fff; }

.nd-btn-accent {
  background-image: var(--nd-gradient-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(246, 133, 31, 0.26);
}
.nd-btn-accent:hover { background-image: linear-gradient(135deg, var(--nd-warm-600) 0%, var(--nd-warm-700) 100%); color: #fff; }

/* Sotet hatteren allo, attetsző korvonalas gomb - teli kitoltessel,
   hogy ne legyen olvashatatlan atlatszo allapota. */
.nd-btn-on-dark {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.nd-btn-on-dark:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }

/* ================================================================ 4. HERO */

.nd-hero { min-height: clamp(30rem, 22rem + 22vw, 41.5rem); }
.nd-hero .gs-hero__content { max-width: 40rem; }
.nd-hero .gs-hero__title { font-weight: 800; letter-spacing: -0.025em; }

.nd-hero__grid {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 64rem) {
  .nd-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-2xl); }
}

.nd-hero__figure {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: rgba(255, 255, 255, 0.08);
}
.nd-hero__figure img { width: 100%; height: auto; display: block; }

/* A hero-csuszka a shell slider komponensere epul, teljes szelessegu
   diakkal. A magassagot a tartalom adja, ezert nincs kesoi meretvaltozas. */
.nd-hero .gs-slider__slide { flex: 0 0 100%; }
.nd-hero .gs-slider__viewport { overflow-x: auto; }
.nd-hero .gs-slider__controls { margin-block-start: var(--space-md); }
.nd-hero .gs-slider__dot { background: rgba(255, 255, 255, 0.45); }
.nd-hero .gs-slider__dot[aria-current="true"] { background: #fff; }

/* ========================================================== 5. KARTYAK
   Mert karakter: 16 px sarok, halvany kek keret, melykek lagy arnyek.      */

.nd-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  background: var(--surface);
}
.nd-card .gs-card__body { --gs-card-padding: 1.625rem 1.375rem 1.5rem; }
.nd-card.gs-card--interactive:hover { box-shadow: 0 20px 48px rgba(12, 92, 122, 0.18); }

/* 5.1 szolgaltatas-kartya: szines ikonfej */
.nd-card--service .gs-card__icon {
  background: var(--nd-gradient-primary);
  color: #fff;
  border-radius: var(--radius-md);
}

/* 5.2 tulajdonsag-kartya: halvany tonus, keret nelkul */
.nd-card--feature {
  background: linear-gradient(135deg, rgba(12, 92, 122, 0.10), rgba(27, 181, 207, 0.16));
  border-color: transparent;
  box-shadow: none;
}

/* 5.3 hir-kartya: media + meta */
.nd-card--news .gs-card__media { aspect-ratio: 2 / 1; }
.nd-card--news .gs-card__meta { color: var(--nd-deep-700); font-weight: 600; }

/* 5.4 info-kartya: vizszintes, ikon bal oldalt */
.nd-card--info .gs-card__body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: start;
}

/* 5.5 referencia / velemeny kartya */
.nd-card--quote {
  border: 0;
  background: rgba(255, 255, 255, 0.10);
  box-shadow: none;
  color: inherit;
}
.nd-card--quote blockquote { margin: 0; font-size: var(--font-size-lg); line-height: var(--line-height-normal); }
.nd-card--quote figcaption { margin-block-start: var(--space-sm); font-weight: 700; }
.nd-card--quote .nd-quote-role { display: block; font-weight: 400; opacity: 0.8; font-size: var(--font-size-sm); }

/* ====================================================== 6. IKONBLOKKOK */

.nd-iconblock {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: start;
}
.nd-iconblock__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.nd-iconblock__icon > svg { width: 1.35rem; height: 1.35rem; }
/* A cim es a leiras kulon sorban all akkor is, ha a markupban <span>
   elemek (a szemantikat a kornyezo lista/heading adja, nem a display). */
.nd-iconblock__title { display: block; margin: 0 0 var(--space-3xs); font-size: var(--font-size-md); font-weight: 700; }
.nd-iconblock__text  { display: block; margin: 0; font-size: var(--font-size-sm); opacity: 0.86; }

/* Vilagos hatteren allo valtozat.
   A `nd-section-mist` UGYANUGY vilagos felulet, mint a `nd-section-light`, csak
   halvany kek arnyalatu. Korabban kimaradt innen, ezert a benne allo ikonok a
   sotet valtozatot kaptak: FEHER ikon vilagos hatteren, azaz gyakorlatilag
   lathatatlanul (merve: kompozitalt hatter rgb(241,246,247), ikon #fff).
   Ez a fooldal "Miert kivetel" blokkjanak 3 tetelet erintette.

   A szin SZEMANTIKUS tokenbol jon (`--color-primary`), nem a nyers markaszinbol
   (`--nd-deep-700`). Utobbi mindket temaban fix #0c5c7a, ezert sotet temaban
   sotet ikon allt volna a sotet #1d2c44 hatteren (merve: 1,89 kontraszt).
   A `--color-primary` sotet temaban vilagosra fordul, igy mindket temaban
   olvashato marad. */
.nd-section-light .nd-iconblock__icon,
.nd-section-mist  .nd-iconblock__icon { background: var(--color-primary-soft); color: var(--color-primary); }

/* ============================================================ 7. STATOK */

.nd-stats {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
.nd-stat { text-align: center; }
.nd-stat__value {
  display: block;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--nd-deep-700);
}
.nd-hex .nd-stat__value { color: #fff; }
.nd-stat__label { display: block; margin-block-start: var(--space-3xs); font-size: var(--font-size-sm); color: var(--text-muted); }
.nd-hex .nd-stat__label { color: rgba(255, 255, 255, 0.8); }

/* ====================================================== 8. LOGOSAV */

.nd-logostrip {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 45%), 1fr));
  align-items: center;
}
.nd-logostrip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xs);
  min-height: 4.5rem;
}
.nd-logostrip__item img {
  max-width: 100%;
  height: auto;
  /* Egyseges megjelenes vegyes logoknal; hoverre teljes szinben. */
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter var(--duration-base) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}
.nd-logostrip__item:hover img { filter: none; opacity: 1; }

/* ================================================================ 9. CTA */

.nd-cta {
  background: transparent;
  border-radius: 0;
  padding-block: var(--section-space-y);
}
.nd-cta .gs-cta__title { font-weight: 800; letter-spacing: -0.02em; }
.nd-cta .gs-cta__text  { color: rgba(255, 255, 255, 0.86); }

/* ============================================================ 10. GYIK */

.nd-faq .gs-accordion__trigger { font-weight: 700; font-size: var(--font-size-lg); }
.nd-faq .gs-accordion__trigger:hover { color: var(--nd-deep-700); }
.nd-faq .gs-accordion__item { border-color: var(--border-subtle); }
.nd-faq .gs-accordion { border-block-start-color: var(--border-subtle); }

/* ========================================================== 11. LABLEC */

.nd-footer { background-image: var(--nd-gradient-footer); }
.nd-footer .gs-footer__title { color: rgba(255, 255, 255, 0.95); }
.nd-footer .gs-footer__link:hover { color: #fff; }

/* ============================================== 12. SZEKCIO-VALTOZATOK */

.nd-section-tint  { background: var(--color-primary-soft); }
.nd-section-mist  { background: var(--surface-alt); }
.nd-section-light { background: var(--surface); }

/* Szekciofejlec kiemelt valtozat. */
.nd-section-head .gs-section__eyebrow { font-weight: 700; }
.nd-section-head h2 { font-weight: 800; letter-spacing: -0.02em; }

/* ======================================== 13. MOZGAS-ERZEKENYSEG (a11y) */

@media (prefers-reduced-motion: reduce) {
  .nd-hex::before,
  .nd-glow::before { transition: none; }
  .nd-logostrip__item img { transition: none; }
}

/* ==========================================================================
   IDEIGLENES: KEP NELKULI KARTYA- ES HERO-VALTOZAT
   A szemely/orvos vizualok eltavolitasa utan. A vegleges vizualis elemeket
   (sajat kepek vagy SVG-ikonok) a megrendelo adja meg kesobb; addig a
   kartyak kep nelkul, de rendezetten jelennek meg.
   ========================================================================== */

/* Hero: figura nelkul ne maradjon ures masodik oszlop. */
.nd-hero__grid--single { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) {
  .nd-hero__grid--single { grid-template-columns: minmax(0, 1fr); }
}

/* Kep nelkuli kartya: a fejlec kapjon egy kis levegot, hogy ne tunjon
   csonkanak, es a racsban a kartyak egyseges magassaguak maradjanak. */
.gs-card:not(:has(.gs-card__media)) > .gs-card__body { padding-block-start: 1.75rem; }
.gs-card:not(:has(.gs-card__media)) { justify-content: flex-start; }

/* ==========================================================================
   Referenciák — konkurens szoftverek logói
   Eredet: NEW CLEAN IMPLEMENTATION. A kártya-design változatlan; ez csak a
   logó vizuális helye a kártyán belül.

   Miért világos alátét: a jóváhagyott logók háttere átlátszó, és több logó
   fekete/sötét tintás (Meditor, URSULA, Visual SZOLGA, Praxis Plus,
   PraxisPro, Nucleus). Sötét kártyán ezek olvashatatlanok lennének, ezért a
   logó saját, világos lapon ül — mindkét színsémában azonosan.
   ========================================================================== */
.nd-ref-logo {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 2;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border-block-end: 1px solid var(--border-subtle);
}

.nd-ref-logo img {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;   /* nincs vagas, nincs torzulas */
}

/* A kartya felul lekerekitett, ezert a lap koveti a kartya sarkat. */
.gs-card > .nd-ref-logo:first-child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

@media (min-width: 48rem) {
  .nd-ref-logo { padding: 1.125rem 1.5rem; }
}

/* ==========================================================================
   Partner logó marquee — „Együttműködő intézmények és szolgáltatók"
   Eredet: NEW CLEAN IMPLEMENTATION.

   A szekció designja (sötét sáv, eyebrow, cím) változatlan; ez csak a
   logósor megjelenítése.

   Miért világos logótartó: mind a 33 jóváhagyott partnerlogó háttere
   átlátszó, és 25 közülük túlnyomóan sötét tintás. Sötét sávon ezek
   olvashatatlanok. Az asset tartalmát nem módosítjuk, csak a hátteret
   adjuk alá.
   ========================================================================== */
.nd-marquee {
  /* Sebesség-token: ennyi másodperc jut egy logóra. A ciklusidőt a CSS
     számolja ebből és a darabszámból (33 × 2,7s ≈ 89s desktopon,
     33 × 3,2s ≈ 106s mobilon). A darabszámot a JS írja be. */
  --nd-marquee-sec-per-item: 2.7;
  --nd-marquee-count: 33;
  --nd-marquee-gap: 2.5rem;
  --nd-marquee-item: 9.5rem;

  position: relative;
  margin-block-start: var(--space-lg, 2rem);
}

.nd-marquee__viewport {
  overflow: hidden;
  /* Finom belépés/kilépés a két szélen. Szándékosan keskeny sáv, hogy ne
     takarjon ki logót. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.nd-marquee__viewport:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

.nd-marquee__track {
  display: flex;
  align-items: center;
  /* FIGYELEM: itt szandekosan NEM `gap` van. A `gap` az utolso elem utan nem
     tesz kozt, ezert a track szelessege nem pontosan ket periodus, es a
     -50%-os eltolas fel `gap`-nyit elcsuszna — ez lathato mikro-ugras a
     loop illesztesenel. Elemenkenti `margin-inline-end`-del a -50% pontosan
     egy periodus. */
  margin: 0;
  padding: 0;
  list-style: none;
  inline-size: max-content;
}

/* Az animáció csak akkor indul, ha a JS megkettőzte a listát — enélkül
   látható visszaugrás keletkezne. */
.nd-marquee[data-nd-marquee-ready="true"] .nd-marquee__track {
  animation-name: nd-marquee-scroll;
  animation-duration: calc(var(--nd-marquee-count) * var(--nd-marquee-sec-per-item) * 1s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

@keyframes nd-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Nyugodt megtekintés: egérrel fölé állva és billentyűzet-fókusszal is. */
.nd-marquee:hover .nd-marquee__track,
.nd-marquee:focus-within .nd-marquee__track {
  animation-play-state: paused;
}

.nd-marquee__item {
  flex: 0 0 auto;
  inline-size: var(--nd-marquee-item);
  margin-inline-end: var(--nd-marquee-gap);
}

/* Világos logótartó: egységes méretérzet vegyes alakú logóknál. */
.nd-marquee__holder {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 1;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(11, 58, 77, .12);
}

.nd-marquee__holder img {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;   /* eredeti képarány, nincs vágás */
}

/* Mobil: kisebb tartó, valamivel nyugodtabb tempó. */
@media (max-width: 47.999rem) {
  .nd-marquee {
    --nd-marquee-sec-per-item: 3.2;
    --nd-marquee-gap: 1.5rem;
    --nd-marquee-item: 7.5rem;
  }
  .nd-marquee__holder { padding: 0.75rem 0.875rem; border-radius: 0.625rem; }
}

/* Kötelező: mozgáscsökkentés esetén nincs automatikus animáció.
   A sáv ilyenkor kézzel, vízszintesen görgethető. */
@media (prefers-reduced-motion: reduce) {
  .nd-marquee[data-nd-marquee-ready="true"] .nd-marquee__track { animation: none; }
  .nd-marquee__viewport {
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
}

/* JS nélkül: statikus, görgethető sáv (nincs ugrás). */
.nd-marquee:not([data-nd-marquee-ready="true"]) .nd-marquee__viewport {
  overflow-x: auto;
  scrollbar-width: thin;
}

/* ==========================================================================
   Partner szekció — VILÁGOS arculati változat
   Eredet: NEW CLEAN IMPLEMENTATION.

   Ez a szekció szándékosan világos blokk: fehér háttér, kék/türkiz eyebrow,
   sötét főcím, eredeti színű logók — sötét sémában SEM fordul át.
   Ezért itt nem a séma-függő `--surface` / `--text-primary` tokeneket
   használjuk, hanem a rögzített márka-tokeneket.

   A marquee működése (geometria, sebesség, loop, szünet, reduced-motion)
   ÉRINTETLEN: alább kizárólag a logótartó díszítése kerül le, a doboz
   mérete és belső térköze változatlan, ezért a ciklusidő és a px/mp
   sebesség bitre ugyanaz marad.
   ========================================================================== */
.nd-partners {
  background: #ffffff;
  color: var(--nd-ink-900, #16303d);
}

.nd-partners .gs-section__eyebrow { color: var(--nd-deep-700, #0c5c7a); }

.nd-partners h2 { color: var(--nd-ink-900, #16303d); }

.nd-partners .gs-section__lead,
.nd-partners p { color: var(--nd-ink-600, #3f5560); }

/* A logók közvetlenül a fehér felületen futnak: nincs kártya, keret,
   árnyék vagy lekerekített doboz. A doboz MÉRETE marad — csak a
   díszítése tűnik el. */
.nd-partners .nd-marquee__holder {
  background: none;
  box-shadow: none;
  border: 0;
  border-radius: 0;
}

/* Az oldalsó elhalványodás maszk, nem festett réteg: az alatta lévő fehér
   szekcióháttér látszik át, ezért sem fekete, sem szürke folt nem marad. */

/* Sötét sémában is világos marad — ez tudatos arculati döntés. */

[data-color-scheme="dark"] .nd-partners {
  background: #ffffff;
  color: var(--nd-ink-900, #16303d);
}
[data-color-scheme="dark"] .nd-partners .gs-section__eyebrow { color: var(--nd-deep-700, #0c5c7a); }
[data-color-scheme="dark"] .nd-partners h2 { color: var(--nd-ink-900, #16303d); }
[data-color-scheme="dark"] .nd-partners .nd-marquee__holder {
  background: none;
  box-shadow: none;
  border-radius: 0;
}

/* ==========================================================================
   Orvos app / Páciens app — kiemelt belépési pontok a hero alatt
   Eredet: NEW CLEAN IMPLEMENTATION.

   Két azonos méretű, fekvő kártya: balra cím + alcím + nyíl, jobbra a
   fénykép. Nem reklámbanner, hanem két termék-belépési pont.

   A háttértónusok `color-mix`-szel a márka-tokenekből és az aktuális
   felületszínből származnak, ezért világos és sötét sémában is helyesen
   viselkednek — nincs ad-hoc hardcode.
   ========================================================================== */
.nd-appcards { padding-block: clamp(1.5rem, 3vw, 2.5rem); }

.nd-appcards__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Egyforma magassag akkor is, ha mobilon egymas ala kerulnek. */
  grid-auto-rows: 1fr;
  gap: clamp(0.875rem, 2vw, 1.5rem);
  align-items: stretch;
}

@media (min-width: 48rem) {
  .nd-appcards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.nd-appcard {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40%;
  align-items: stretch;
  min-block-size: 11rem;
  border-radius: 1.25rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--nd-appcard-bg, var(--surface-alt));
}

@media (min-width: 30rem) { .nd-appcard { grid-template-columns: minmax(0, 1fr) 42%; } }

/* Arculati tónusok */
.nd-appcard--doctor {
  --nd-appcard-bg: linear-gradient(120deg,
      color-mix(in srgb, var(--nd-deep-500, #1bb5cf) 16%, var(--surface)) 0%,
      color-mix(in srgb, var(--nd-deep-500, #1bb5cf) 5%,  var(--surface)) 100%);
  --nd-appcard-accent: var(--nd-deep-600, #17a0bf);
}

.nd-appcard--patient {
  --nd-appcard-bg: linear-gradient(120deg,
      color-mix(in srgb, var(--nd-warm-500, #ff9e42) 18%, var(--surface)) 0%,
      color-mix(in srgb, var(--nd-warm-500, #ff9e42) 5%,  var(--surface)) 100%);
  --nd-appcard-accent: var(--nd-warm-600, #f6851f);
}

.nd-appcard__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  padding: clamp(1rem, 2.6vw, 1.75rem);
  min-inline-size: 0;
}

.nd-appcard__title {
  margin: 0;
  font-size: clamp(1.0625rem, 2.4vw, 1.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.nd-appcard__title span { display: block; }

.nd-appcard__lead {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: clamp(0.8125rem, 1.4vw, 0.9375rem);
  line-height: 1.4;
  color: var(--text-secondary);
}

.nd-appcard__arrow {
  flex: 0 0 auto;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  color: var(--nd-appcard-accent);
  transition: transform .2s var(--ease-standard, ease);
}

/* --- Kép ---------------------------------------------------------------- */
.nd-appcard__media {
  position: relative;
  min-inline-size: 0;
  /* Nincs sajat `overflow: hidden`: a kartya mar vag, es kulonben a
     negativan eltolt ikonjelveny levagodna a media bal szelen. */
}

.nd-appcard__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;          /* eredeti kepararny megtartva, csak kivagas */
  display: block;
}

.nd-appcard--doctor  .nd-appcard__media img { object-position: 50% 16%; }
.nd-appcard--patient .nd-appcard__media img { object-position: 52% 14%; }

/* Lágy átmenet a kártya tónusa és a fotó között — nem takarja az arcot. */
.nd-appcard__media::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 38%;
  background: linear-gradient(to right,
      color-mix(in srgb, var(--nd-appcard-accent) 12%, var(--surface)) 0%,
      transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Ikonjelvény a fotó bal alsó sarkában */
.nd-appcard__badge {
  position: absolute;
  inset-block-end: 0.875rem;
  inset-inline-start: -1.375rem;
  z-index: 2;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 0.75rem;
  background: var(--nd-appcard-accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(11, 58, 77, .22);
}

.nd-appcard__badge svg { inline-size: 1.375rem; block-size: 1.375rem; }

@media (max-width: 29.999rem) {
  .nd-appcard { min-block-size: 8.5rem; }
  .nd-appcard__badge {
    inline-size: 2.25rem; block-size: 2.25rem;
    inset-inline-start: -1.125rem; inset-block-end: 0.625rem;
  }
  .nd-appcard__badge svg { inline-size: 1.125rem; block-size: 1.125rem; }
}

/* --- Interakció ---------------------------------------------------------
   A kártya TELJES felülete hivatkozás (`<a class="nd-appcard">`), ezért a
   hover-emelés, a nyíl elmozdulása és a fókuszgyűrű a teljes kártyára hat. */
a.nd-appcard {
  cursor: pointer;
  transition: transform .24s var(--ease-standard, ease),
              box-shadow .24s var(--ease-standard, ease);
}

a.nd-appcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(11, 58, 77, .18);
}

a.nd-appcard:hover .nd-appcard__arrow { transform: translateX(4px); }

/* Erintes: nagyon finom visszajelzes, layout shift nelkul. */
a.nd-appcard:active { transform: translateY(-2px); }

a.nd-appcard:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  a.nd-appcard, .nd-appcard__arrow { transition: none; }
  a.nd-appcard:hover { transform: none; }
  a.nd-appcard:hover .nd-appcard__arrow { transform: none; }
}

/* ==========================================================================
   Téma-kapcsoló (világos / sötét)
   Eredet: NEW CLEAN IMPLEMENTATION.
   Kompakt ikonvezérlő; a fejlécben az Előjegyzés CTA előtt, mobilon a
   fiók fejlécében.
   ========================================================================== */
.nd-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.375rem;
  block-size: 2.375rem;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--duration-fast, .16s) var(--ease-standard, ease),
              border-color var(--duration-fast, .16s) var(--ease-standard, ease),
              color var(--duration-fast, .16s) var(--ease-standard, ease);
}

.nd-theme-toggle svg { inline-size: 1.125rem; block-size: 1.125rem; }

.nd-theme-toggle:hover { background: rgba(255, 255, 255, 0.16); }

.nd-theme-toggle:focus-visible {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 2px;
}

/* Görgetett, tömör fejlécen a világos háttérhez igazodik. */
.nd-header[data-gs-scrolled="true"] .nd-theme-toggle { color: var(--nd-ink-900, #16303d); }
.nd-header[data-gs-scrolled="true"] .nd-theme-toggle:hover {
  background: var(--color-primary-soft);
  border-color: var(--border-subtle);
}

/* Sötét témában a tömör fejléc is sötét, ezért a világos ikon marad. */
:root[data-color-scheme="dark"] .nd-header[data-gs-scrolled="true"] .nd-theme-toggle {
  color: var(--text-primary);
}

/* A fiók fejlécében: a bezáró X mellett, de tőle jól elkülönülve. */
.gs-drawer__head .nd-theme-toggle {
  color: var(--text-secondary);
  margin-inline-start: auto;
  margin-inline-end: 0.5rem;
}
.gs-drawer__head .nd-theme-toggle:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .nd-theme-toggle { transition: none; }
}

/* ==========================================================================
   Hero carousel — 5 tartalmi dia
   Eredet: NEW CLEAN IMPLEMENTATION. Nincs slider-konyvtar, nincs legacy kod.

   A diak EGY racscellaban allnak egymason, ezert a magassagot a LEGMAGASABB
   dia adja: valtaskor nincs elmozdulas (layout shift), es semmi nem vagodik le.
   ========================================================================== */
.nd-hcar { position: relative; }

.nd-hcar__stack {
  display: grid;
  grid-template-areas: "slide";
  align-items: start;
}

.nd-hcar__slide {
  grid-area: slide;
  min-inline-size: 0;
  opacity: 0;
  visibility: hidden;          /* a rejtett diak linkjei kikerulnek a tab-sorbol */
  transform: translateY(6px);
  transition: opacity .55s var(--ease-standard, ease),
              transform .55s var(--ease-standard, ease),
              visibility 0s linear .55s;
}

.nd-hcar__slide[data-active="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.nd-hcar__title {
  margin: 0 0 var(--space-sm, 1rem);
  font-size: var(--font-size-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: inherit;
  text-wrap: balance;
}

.nd-hcar__title span { display: block; }

.nd-hcar__list {
  margin: 0 0 var(--space-md, 1.5rem);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.nd-hcar__item {
  display: grid;
  grid-template-columns: 1.375rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: start;
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.nd-hcar__check {
  display: grid;
  place-items: center;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  margin-block-start: 0.0625rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.nd-hcar__check svg { inline-size: 0.8125rem; block-size: 0.8125rem; }

/* --- Vezerlok ------------------------------------------------------------ */
.nd-hcar__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: var(--space-md, 1.5rem);
  padding: 0;
  list-style: none;
}

.nd-hcar__dot {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
}

/* A tenyleges pont a gombon belul: nagy tapfelulet, kicsi jel. */
.nd-hcar__dot::before {
  content: "";
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  transition: background-color .2s var(--ease-standard, ease),
              inline-size .2s var(--ease-standard, ease);
}

.nd-hcar__dot:hover::before { background: rgba(255, 255, 255, 0.75); }

.nd-hcar__dot[aria-current="true"]::before {
  inline-size: 1.5rem;
  background: #fff;
}

.nd-hcar__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* --- Mobil --------------------------------------------------------------- */
@media (max-width: 47.999rem) {
  .nd-hcar__title { font-size: clamp(1.625rem, 6.2vw, 2.25rem); }
  .nd-hcar__item  { font-size: 0.9375rem; }
  .nd-hcar__dot   { inline-size: 2rem; block-size: 2rem; }
}

/* --- Mozgascsokkentes ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nd-hcar__slide {
    transition: none;
    transform: none;
  }
  .nd-hcar__dot::before { transition: none; }
}

/* ==========================================================================
   Hero vizuál — doktornő + háttér-hexagon
   Eredet: NEW CLEAN IMPLEMENTATION. Nincs legacy asset, nincs legacy CSS.

   Retegsorrend (a `z-index` szandekosan a hero sajat halmozasi kontextusan
   belul marad, ezert nem nyul bele a globalis reteg-terkepbe):
       hero hatter  ->  hexagon (0)  ->  doktorno (1)  ->  szoveges tartalom
   ========================================================================== */
.nd-herofig {
  position: relative;
  display: none;                 /* mobilon kulon szabaly kapcsolja be */
  align-self: end;               /* az alak a hero aljahoz fut */
  justify-self: center;
  inline-size: 100%;
  min-inline-size: 0;
  isolation: isolate;
}

/* --- A háttér-hexagon ---------------------------------------------------- */
.nd-herofig__hex {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 0;                    /* a doktorno MOGE */
  inline-size: min(118%, 34rem);
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.28);
  /* Nagyon finom fuggoleges lebegtetes — kizarolag CSS transform,
     nincs JS, es nem valt ki layoutot. */
  animation: nd-hexfloat 12s ease-in-out infinite;
  will-change: transform;
}

.nd-herofig__hex svg { inline-size: 100%; block-size: 100%; display: block; }

@keyframes nd-hexfloat {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(0, -6px, 0); }
  50%  { transform: translate3d(0, 0, 0); }
  75%  { transform: translate3d(0, 6px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* --- A doktornő ---------------------------------------------------------- */
.nd-herofig__img {
  position: relative;
  z-index: 1;                    /* a hexagon FOLE */
  display: block;
  /* A doboz a KEPRE simul: nincs levelszekreny-hatas, es a kepararny
     definicio szerint valtozatlan (nincs `object-fit`-re szukseg). */
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: 34rem;
  margin-inline: auto;
  /* A doktorno SZANDEKOSAN nem animalt. */
}

/* --- Desktop: ketoszlopos hero ------------------------------------------- */
@media (min-width: 64rem) {
  .nd-hero__grid--figure {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-2xl);
    align-items: end;
  }
  .nd-herofig { display: block; }
  /* Az alak a hero ALSO szelehez fut ki (a hero also belso terkozet
     negativ margoval nyeljuk el), es ugy van meretezve, hogy a teteje a
     (heron atlatszo) fejlec ALATT kezdodjon. */
  .nd-herofig { margin-block-end: -4rem; }
  .nd-herofig__img { max-block-size: 36rem; }
}

@media (min-width: 90rem) {
  /* A magassag SZANDEKOSAN nem no tovabb: 36rem az a legnagyobb ertek,
     amellyel az alak teteje meg a fejlec ALATT marad. Szeles kepernyon
     csak a hattergrafika lesz nagyobb. */
  .nd-herofig__hex { inline-size: min(118%, 40rem); }
}

/* --- Mobil / tablet: az alak NEM jelenik meg -----------------------------
   Ugyfelkeres: a doktorno kizarolag desktopon (>= 64rem) lathato. A `.nd-herofig`
   alapertelmezese `display: none`, ezert itt nincs kulon szabaly — a 64rem-es
   medialekerdezes kapcsolja be. Igy mobilon a hero tartalma valtozatlan:
   cim -> pontok -> CTA -> indikatorok -> statisztika. */

/* --- Sötét séma: a hexagon kontrasztja ----------------------------------- */
:root[data-color-scheme="dark"] .nd-herofig__hex { color: rgba(255, 255, 255, 0.22); }

/* --- Mozgáscsökkentés ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nd-herofig__hex { animation: none; }
}

/* --- A hero racs explicit elrendezese az alakkal -------------------------
   A `nd-stats` sav a `gs-hero__content` MELLE, onallo racselemkent kerult,
   hogy mobilon a doktorno MEG ELOTTE jelenjen meg (a kert prioritas szerint:
   cim -> pontok -> CTA -> doktorno -> statisztika).                        */
@media (min-width: 64rem) {
  .nd-hero__grid--figure > .gs-hero__content { grid-column: 1; grid-row: 1; }
  .nd-hero__grid--figure > .nd-stats         { grid-column: 1; grid-row: 2; align-self: start; }
  .nd-hero__grid--figure > .nd-herofig       { grid-column: 2; grid-row: 1 / 3; align-self: end; }
}

/* ==========================================================================
   Fejléc-márkajel — a hivatalos NetDoktor logó
   A logófájl (`netdoktor-logo.svg`) az EGYETLEN jóváhagyott legacy brand
   asset. Színt nem hordoz, ezért CSS-maszkkal jelenítjük meg: így a logó
   pontosan azt a színt veszi fel, amit eddig a szöveges márkajel — átlátszó
   fejlécen fehér, görgetett (tömör) fejlécen mélykék. Ez nem a logó
   színeinek önkényes módosítása, hanem a szín nélküli vektor megjelenítése.
   ========================================================================== */
.nd-brand__logo {
  display: block;
  /* A hivatalos lockup aránya: 934.54 : 216.21 */
  aspect-ratio: 934.54 / 216.21;
  block-size: 2.5rem;
  inline-size: auto;
  background-color: currentColor;
  -webkit-mask-image: url("/assets/approved/logo/netdoktor-logo.svg");
          mask-image: url("/assets/approved/logo/netdoktor-logo.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left center;
          mask-position: left center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

@media (max-width: 47.999rem) {
  .nd-brand__logo { block-size: 2.125rem; }
}

@media (max-width: 22.5rem) {
  .nd-brand__logo { block-size: 1.875rem; }
}

/* A markajel szine a FEJLEC ALLAPOTAHOZ igazodik, nem a temahoz:
     - atlatszo fejlec a heron  -> a hatter mindig a turkiz szinatmenet -> FEHER
     - gorgetett, tomor fejlec  -> a hatter mindig vilagos              -> MELYKEK
   Igy sotet temaban sem valik olvashatatlanna. A szabaly kizarolag a
   logora vonatkozik; a navigacio szineihez nem nyul. */
.nd-header .nd-brand__logo { background-color: #ffffff; }
.nd-header[data-gs-scrolled="true"] .nd-brand__logo { background-color: var(--nd-deep-700, #0c5c7a); }

/* ==========================================================================
   Lakossági oldal — hero + saját komponensek
   Eredet: NEW CLEAN IMPLEMENTATION. A regi oldalrol csak a SZOVEG szarmazik.
   ========================================================================== */
.nd-lakhero__content { max-inline-size: 46rem; }

.nd-lakhero__eyebrow { color: var(--nd-warm-500, #ff9e42); letter-spacing: .08em; }

.nd-lakhero__title {
  margin-block: 0 var(--space-md, 1.5rem);
  font-size: clamp(2.25rem, 1.2rem + 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.03em;
}
.nd-lakhero__title span { display: block; }
.nd-lakhero__accent { color: var(--nd-warm-500, #ff9e42); }

.nd-lakhero__lead { max-inline-size: 34rem; }

.nd-lakhero__actions { flex-wrap: wrap; gap: var(--space-sm, 1rem); }

/* Vilagos, korvonalas masodlagos CTA a sotet-turkiz heron. */
.nd-btn-on-light {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--nd-deep-700, #0c5c7a);
}
.nd-btn-on-light:hover { background: #f2fafc; border-color: #f2fafc; color: var(--nd-deep-800, #0d4c66); }

/* --- Ertekelesi sor ------------------------------------------------------ */
.nd-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  margin-block: var(--space-md, 1.5rem) 0;
  font-size: clamp(.9375rem, 1.4vw, 1.0625rem);
  color: rgba(255, 255, 255, 0.92);
}
.nd-rating__stars { color: var(--nd-warm-500, #ff9e42); letter-spacing: .12em; font-size: 1.125em; }

/* --- Store-gombok --------------------------------------------------------
   SAJAT komponens: sem az Apple, sem a Google markajelzeset NEM rajzoljuk
   ujra. Amint a hivatalos badge-asset rendelkezesre all, ez a blokk arra
   cserelheto.                                                              */
.nd-store {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-block-start: var(--space-md, 1.5rem);
}

.nd-store__btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-block-size: 3.25rem;
  padding: .5rem 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: .75rem;
  background: rgba(9, 32, 43, 0.72);
  color: #fff;
  text-decoration: none;
  transition: background-color .18s var(--ease-standard, ease),
              border-color .18s var(--ease-standard, ease),
              transform .18s var(--ease-standard, ease);
}
.nd-store__btn:hover { background: rgba(9, 32, 43, 0.9); border-color: rgba(255,255,255,.6); transform: translateY(-2px); }
.nd-store__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.nd-store__ico { display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; flex: 0 0 auto; }
.nd-store__ico svg { inline-size: 1.5rem; block-size: 1.5rem; }
.nd-store__txt { display: grid; line-height: 1.15; }
.nd-store__small { font-size: .6875rem; opacity: .82; }
.nd-store__name { font-size: 1rem; font-weight: 700; }

/* --- Split blokk --------------------------------------------------------- */
.nd-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg, 2rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .nd-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-2xl, 4rem); }
}
.nd-split__text h2 { margin-block: .25rem var(--space-sm, 1rem); }
.nd-split__text p { margin-block-end: var(--space-sm, 1rem); max-inline-size: 40rem; }

.nd-split__panel {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 16px);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.nd-split__panel-title { margin-block: 0 .5rem; font-size: 1.125rem; }
.nd-split__panel-lead { margin-block: 0 var(--space-sm, 1rem); color: var(--text-secondary); }

/* --- Pipas lista --------------------------------------------------------- */
.nd-checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: .625rem; }
.nd-checklist li {
  display: grid;
  grid-template-columns: 1.625rem minmax(0, 1fr);
  gap: .625rem;
  align-items: start;
  line-height: 1.45;
}
.nd-checklist__mark {
  display: grid; place-items: center;
  inline-size: 1.625rem; block-size: 1.625rem;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--nd-deep-700, #0c5c7a);
}
.nd-checklist__mark svg { inline-size: .9375rem; block-size: .9375rem; }
:root[data-color-scheme="dark"] .nd-checklist__mark { color: var(--nd-deep-500, #1bb5cf); }

/* --- Letoltes savon a store-gombok ---------------------------------------- */
.nd-download { display: grid; gap: var(--space-lg, 2rem); align-items: center; }
@media (min-width: 55rem) { .nd-download { grid-template-columns: minmax(0, 1fr) auto; } }
.nd-download .nd-store { margin-block-start: 0; }

@media (prefers-reduced-motion: reduce) {
  .nd-store__btn { transition: none; }
  .nd-store__btn:hover { transform: none; }
}
.nd-rating--plain { margin-block-start: .375rem; color: rgba(255,255,255,.86); font-size: .9375rem; }

/* Lablec-kozeli kiegeszito magyarazo szoveg (a lakossagi oldal zaro savjaban).
   Sajat osztaly, hogy az oldalon 0 inline stilus maradjon. */
.nd-footnote {
  opacity: 0.86;
  max-inline-size: 24rem;
}

/* --------------------------------------------------------------------------
   IDEIGLENES fejlesztesi tajekoztato a hero aljan  (.nd-devnotice)
   --------------------------------------------------------------------------
   EZ EGY ATMENETI ELEM. Eltavolitas a fejlesztes lezarasakor, KET lepesben:
     1) perl tools/devnotice-build.pl --remove   (kiszedi minden oldalrol)
     2) ez a CSS-blokk torolheto                 (semmi mas nem hivatkozik ra)

   Megvalositas: `position: absolute`, ezert NEM lesz a hero flex-sora
   masodik eleme, nem tolja el a meglevo tartalmat es nem noveli a hero
   magassagat sem. A hero meglevo `padding-block: var(--space-2xl)` also
   savjaban ul, a tartalom alatt.

   Szin: szandekosan literal feher-arnyalat, nem `--text-inverse` -- a hero
   hattere mindket temaban ugyanaz a turkiz gradiens, es a `.nd-hex p`
   szabaly is igy oldja meg. Igy sotet temaban sem fordul at olvashatatlanra.
   -------------------------------------------------------------------------- */
.gs-hero .nd-devnotice {
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--space-sm, 1rem);
  z-index: 2;
  margin: 0;
  padding-inline: var(--space-md, 1.5rem);
  /* A base.css `p { max-width: var(--measure) }` szabalya kulonben ~65ch-re
     szukitene, es a kozepre igazitas NEM a herohoz, hanem ehhez a szuk
     dobozhoz igazodna (merve: 513px / 1425px helyett, 456px-es eltolodas). */
  max-inline-size: none;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
  color: rgba(255, 255, 255, 0.82);
  /* Sose fogjon el kattintast a hero CTA-i vagy a slider pontjai elol. */
  pointer-events: none;
}

.gs-hero .nd-devnotice__lead {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

/* Keskeny kepernyon a szoveg tobb sorba tordel; ott kap a hero annyi also
   belso terkozt, amennyit a tajekoztato tenylegesen elfoglal -- se tobbet.
   `:has()` nelkuli motoron a hero valtozatlan marad, a szoveg pedig a
   meglevo 4rem-es also paddingben fer el. */
@media (max-width: 47.999rem) {
  /* 320 px-en a szoveg 3 sor (merve 59 px). A meglevo 4rem-es also padding
     mellett csak 8 px maradt a hero tartalma alatt -- ez keves a kert
     vizualis elkulonuleshez. A +2rem pontosan annyi, hogy ~20 px lelegzet
     legyen; ennel tobbel nem noveljuk a hero magassagat. */
  .gs-hero:has(.nd-devnotice) { padding-block-end: calc(var(--space-2xl) + 2rem); }
}

@media (prefers-contrast: more) {
  .gs-hero .nd-devnotice      { color: rgba(255, 255, 255, 0.92); }
  .gs-hero .nd-devnotice__lead { color: #fff; }
}

/* A fooldali hero jobb oldalan all a doktorno-figura. Merve: a szoveg savjaban
   a kep pixeleinek atlagos luminanciaja 0,758 (a feher kopeny), ott a
   tajekoztato kontrasztja 1,01-1,20:1 volt -- gyakorlatilag olvashatatlan.
   Ezert CSAK az ilyen heroknal kap a szoveg egy lagy, el nelkuli lezaro
   arnyalatot. Ez NEM doboz: nincs kerete, sarka es lathato hatara -- a hero
   also elenek finom sotetedesekent olvasodik, es a szoveg szelessegeben
   teljesen atlatszoba fut ki. A tobbi 60 oldal erintetlen marad. */
.gs-hero:has(.nd-herofig) .nd-devnotice::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block: -1rem -1.75rem;
  z-index: -1;
  background-image: radial-gradient(
    118% 150% at 50% 74%,
    rgba(11, 58, 77, 0.88) 0%,
    rgba(11, 58, 77, 0.66) 46%,
    rgba(11, 58, 77, 0) 80%
  );
  pointer-events: none;
}

/* ==========================================================================
   NETDOKTOR APP-MOCKUP  (.nd-appmock)  —  KOZOS, UJRAFELHASZNALHATO KOMPONENS
   --------------------------------------------------------------------------
   Egyetlen implementacio ket helyre:
     1) /lakossagi-szolgaltatasok  — hero jobb oldal
     2) /                          — a "Kinek ajanljuk" (#kinek) szekcio kepe

   Az asset transzparens hatteru, ezert SZANDEKOSAN nincs rajta hatter, keret,
   arnyek es lekerekites: a telefonok kozvetlenul a szekcio hatteren "lebegnek".
   ========================================================================== */

.nd-appmock {
  display: block;
  inline-size: 100%;
  block-size: auto;
  /* A natív szelesseg 1150px; e fole nem nagyitjuk, hogy ne legyen eletlen. */
  max-inline-size: min(100%, 1150px);
  /* Csak transform animal -> nincs layout shift es nincs ujrarajzolt elrendezes. */
  animation: nd-float 7s ease-in-out infinite;
  will-change: transform;
}

/* Nagyon finom fuggoleges lebegtetes. EGYETLEN keyframes szolgal ki minden
   mockupot; az amplitudo ket custom property-vel allithato, ezert nem kell
   minden elemhez kulon animaciot irni.
     --nd-float-up   : mennyit emelkedik   (alap 6px)
     --nd-float-down : mennyit sullyed     (alap 5px)
   Nincs zoom, forgas, oldalirany vagy pattogas. */
@keyframes nd-float {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(calc(var(--nd-float-up, 6px) * -1)); }
  50%  { transform: translateY(0); }
  75%  { transform: translateY(var(--nd-float-down, 5px)); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nd-appmock,
  .nd-platmock { animation: none; transform: none; }
}

/* -------------------------------------------------- 1. LAKOSSAGI HERO ---- */
/* A hero ket oszlopra bomlik: balra a valtozatlan szoveges blokk, jobbra a
   mockup. Mobilon egy oszlop, es a mockup a szoveg ALA kerul (forras-sorrend). */

.nd-lakhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
}
.nd-lakhero__media {
  display: flex;
  justify-content: center;
  min-inline-size: 0;
}
/* Mobilon szandekosan kisebb: a hero szovege marad az elsodleges tartalom. */
.nd-lakhero__media .nd-appmock { max-inline-size: min(100%, 26rem); }

@media (min-width: 48rem) {
  .nd-lakhero__media .nd-appmock { max-inline-size: min(100%, 30rem); }
}
@media (min-width: 64rem) {
  .nd-lakhero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: var(--space-xl); }
  .nd-lakhero__media { justify-content: flex-end; }
  .nd-lakhero__media .nd-appmock { max-inline-size: min(100%, 40rem); }
}
@media (min-width: 90rem) {
  .nd-lakhero__media .nd-appmock { max-inline-size: min(100%, 44rem); }
}

/* ------------------------------------------- 2. FOOLDALI #kinek SZEKCIO --- */
/* A meglevo `.gs-split` elrendezes valtozatlan; csak a kep kap sajat kezelest,
   mert a regi kartyakeretes megjelenest a transzparens asset nem viseli el. */
.nd-appmock--split { max-inline-size: min(100%, 34rem); margin-inline: auto; }

/* ==========================================================================
   NETDOKTOR PLATFORM-MOCKUP  (.nd-platmock)  —  monitor + tablet + telefon
   --------------------------------------------------------------------------
   UGYANAZT a `nd-float` keyframes-et hasznalja, mint a `.nd-appmock`; csak az
   amplitudot es a ciklusidot allitja at a ket custom property-vel. Igy nincs
   duplikalt animacios kod.

   Szandekosan VISSZAFOGOTTABB, mint a telefonos mockup: ez nagyobb, nehezebb
   vizualis elem, amin a sok mozgas olcso hatast keltene.
     amplitudo : -4px ... +4px   (a telefonosnal -6 / +5)
     ciklus    : 8,5s            (a telefonosnal 7s)

   Az asset transzparens hatteru, ezert nem kap sajat hatteret, keretet,
   arnyekot vagy lekerekitest — a szekcio/kartya hatteren all.
   ========================================================================== */

.nd-platmock {
  --nd-float-up: 4px;
  --nd-float-down: 4px;
  animation: nd-float 8.5s ease-in-out infinite;
  will-change: transform;
}

/* A `.gs-split` kontextusban (fooldal) az elem sajat kepkent all: itt kell a
   meretezes is. A kartyakban (`.gs-card__media > img`) a shell mar beallitja
   a `width/height/object-fit` erteket, azt nem irjuk felul. */
.gs-split__media > .nd-platmock {
  display: block;
  inline-size: 100%;
  block-size: auto;
  /* Natív szelesseg 1461px; e fole nem nagyitunk, hogy ne legyen eletlen. */
  max-inline-size: min(100%, 1461px);
}

/* Kartyan belul: a mockup sose nojon aranytalanra. Egyelemu `gs-grid--3`
   racsban a kartya teljes szelessegure nyulik (merve 1235px szeles), es ott
   az 1,49-es kepararany 827px magas media-dobozt adna. A magassagot ezert
   korlatozzuk -- es `contain`-re valtunk, hogy maga a korlat SE vaghassa le
   a keszulekeket. A tobboszlopos kartyak (merve 395x265) a korlat alatt
   maradnak, ezert azok megjelenese valtozatlan. */
.gs-card__media:has(> .nd-platmock) { max-block-size: 26rem; }
.gs-card__media > .nd-platmock { object-fit: contain; }

/* ==========================================================================
   NETDOKTOR IKONRENDSZER  (.nd-ico)
   --------------------------------------------------------------------------
   Ket ikonstilus el egymas mellett, SZANDEKOSAN nem keverve:

   1) SAJAT KONTUROS ikonok — inline `<svg fill="none" stroke="currentColor">`.
      Ott hasznaljuk, ahol a csomagokban nincs szemantikailag pontos jel
      (pl. terkep-pin, semleges irodaepulet).

   2) CSOMAG-IKONOK — kulon SVG fajlok `assets/approved/icons/`-ban, CSS-maszkkal
      megjelenitve. A maszk miatt a szin `currentColor`-bol jon, tehat light/dark
      temaban automatikusan helyes, es nem kell inline-olni a markupba.
      (Ugyanaz a technika, mint a fejlec logojanal.)

   Forras: a megrendelo altal atadott ket EPS csomag. LEGACY asset: 0.
   ========================================================================== */

/* --- A GLOBALIS `svg { fill: currentColor }` SZUK HATOKORU JAVITASA -------
   A shell base.css-ben `svg { fill: currentColor }` all. Ez CSS-kent ERŐSEBB,
   mint a jelolonyelvi `fill="none"` prezentacios attributum, ezert minden
   olyan ikon KITOLTOTT FOLTKENT jelent meg, amelyik a kontur-megjelenest az
   svg-tag `fill="none"` attributumara bizta (merve: 57 db, 3 oldalon).

   A javitas ATTRIBUTUM-SZURT: kizarolag azokra az elemekre hat, amelyek maguk
   deklaraljak a `fill="none"`-t, tehat pontosan a szerzoi szandekot allitja
   helyre. Nem erinti a logot (CSS-mask, nem <svg> tag), a temagombot (a JS a
   PATH-ra teszi a fill="none"-t, nem az svg-re), es egyetlen olyan grafikat
   sem, amely nem deklaralja ezt az attributumot. */
svg[fill="none"] { fill: none; }

/* --- A kozos ikonkomponens ------------------------------------------------ */
.nd-ico {
  display: inline-block;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: none;
  background-color: currentColor;
  -webkit-mask-image: var(--nd-ico);
          mask-image: var(--nd-ico);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Csak a ténylegesen hasznalt ikonok. */
.nd-ico--mail      { --nd-ico: url("/assets/approved/icons/mail.svg"); }
.nd-ico--phone     { --nd-ico: url("/assets/approved/icons/phone.svg"); }
.nd-ico--documents { --nd-ico: url("/assets/approved/icons/documents.svg"); }
.nd-ico--gear      { --nd-ico: url("/assets/approved/icons/gear.svg"); }
.nd-ico--monitor   { --nd-ico: url("/assets/approved/icons/monitor.svg"); }
.nd-ico--lock      { --nd-ico: url("/assets/approved/icons/lock.svg"); }

/* A kapcsolati kartya hatszog-tartojaban a ket stilus optikai sulya egyezzen:
   a konturos ikon 17px-es, a maszkolt ikon kicsit kisebb, mert az teli felulet. */
.nd-wz__contact-icon .nd-ico { inline-size: 1rem; block-size: 1rem; }

/* Kartya-ikontartoban (gs-card__icon) a maszkolt ikon a meglevo meretrendszert
   koveti; nem adunk uj hover-viselkedest semmilyen kartyanak. */
.gs-card__icon .nd-ico,
.nd-iconblock__icon .nd-ico { inline-size: 1.375rem; block-size: 1.375rem; }