@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ===== tokens/colors.css ===== */
/* ============================================================
   DunaDoktor — Color tokens
   Derived directly from the brand mark: medical blue cross,
   the sky, the green hills of the Dunakanyar, the Danube
   (river navy) and the white animals.
   ============================================================ */

:root {
  /* --- Brand primitives (sampled from the logo) --- */
  --brand-blue:        #0073fe; /* medical cross */
  --brand-sky:         #79b3e9; /* sky over the river */
  --brand-green:       #196c22; /* hills of the Danube Bend */
  --brand-forest:      #093a0e; /* deep forest / shadowed hill */
  --brand-river:       #0f2d4a; /* the Danube */
  --brand-white:       #ffffff;
  --brand-black:       #000000;

  /* --- Primary: medical blue (trust, care) --- */
  --blue-50:   #eaf3ff;
  --blue-100:  #d2e6ff;
  --blue-200:  #a6ccff;
  --blue-300:  #6faaff;
  --blue-400:  #3a8bff;
  --blue-500:  #0073fe;
  --blue-600:  #005fd6;
  --blue-700:  #004cad;
  --blue-800:  #003c8a;
  --blue-900:  #002f6b;

  /* --- Ink / navy: the river, used as the primary dark anchor --- */
  --ink-50:    #eef2f6;
  --ink-100:   #d4dde7;
  --ink-200:   #a7b8c9;
  --ink-300:   #6e87a1;
  --ink-400:   #3f5b78;
  --ink-500:   #1c4067;
  --ink-600:   #143350;
  --ink-700:   #0f2d4a; /* brand river */
  --ink-800:   #0a2138;
  --ink-900:   #061626;

  /* --- Green: nature, livestock, outdoors --- */
  --green-50:  #ecf6ed;
  --green-100: #cfe8d2;
  --green-200: #9fd0a6;
  --green-300: #5ba868;
  --green-400: #2e8638;
  --green-500: #196c22; /* brand green */
  --green-600: #135a1b;
  --green-700: #0e4715;
  --green-800: #093a0e; /* brand forest */
  --green-900: #052807;

  /* --- Sky: soft accent / tints --- */
  --sky-100:   #e4f0fb;
  --sky-200:   #c2def4;
  --sky-300:   #a8cff0;
  --sky-400:   #79b3e9; /* brand sky */
  --sky-500:   #5497dc;

  /* --- Neutrals: cool slate, tuned toward the navy --- */
  --neutral-0:    #ffffff;
  --neutral-50:   #f6f8fa;
  --neutral-100:  #edf1f5;
  --neutral-200:  #dce3eb;
  --neutral-300:  #c2ccd6;
  --neutral-400:  #97a4b2;
  --neutral-500:  #6b7888;
  --neutral-600:  #4c5765;
  --neutral-700:  #364049;
  --neutral-800:  #232a32;
  --neutral-900:  #141a20;

  /* --- Semantic status --- */
  --success-50:  #ecf6ed;
  --success-500: #196c22;
  --success-700: #0e4715;
  --warning-50:  #fdf3e2;
  --warning-500: #e8930c;
  --warning-700: #a3650a;
  --danger-50:   #fbeaea;
  --danger-500:  #d64545;
  --danger-700:  #a02f2f;
  --info-50:     #eaf3ff;
  --info-500:    #0073fe;

  /* ===========================================================
     Semantic aliases — reach for these in components/screens
     =========================================================== */

  /* Text */
  --text-strong:   var(--ink-700);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--neutral-400);
  --text-inverse:  var(--neutral-0);
  --text-link:     var(--blue-600);
  --text-brand:    var(--blue-600);
  --text-success:  var(--success-700);
  --text-danger:   var(--danger-700);

  /* Surfaces */
  --surface-page:        var(--neutral-50);
  --surface-card:        var(--neutral-0);
  --surface-sunken:      var(--neutral-100);
  --surface-raised:      var(--neutral-0);
  --surface-brand:       var(--blue-500);
  --surface-brand-hover: var(--blue-600);
  --surface-brand-soft:  var(--blue-50);
  --surface-ink:         var(--ink-700);
  --surface-ink-soft:    var(--ink-50);
  --surface-nature:      var(--green-500);
  --surface-nature-soft: var(--green-50);
  --surface-sky:         var(--sky-100);

  /* Borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--blue-500);

  /* Interaction */
  --focus-ring:     var(--blue-400);
  --overlay-scrim:  rgba(6, 22, 38, 0.55); /* ink-900 @ 55% */
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   DunaDoktor — Typography tokens
   Display: Bricolage Grotesque  ·  Body/UI: Public Sans
   ============================================================ */

:root {
  /* Families */
  --font-display: 'Bricolage Grotesque', 'Public Sans', system-ui, sans-serif;
  --font-body:    'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* Type scale (1.250 major-third, rem) */
  --text-2xs:  0.6875rem;  /* 11px */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.75rem;    /* 28px */
  --text-3xl:  2.1875rem;  /* 35px */
  --text-4xl:  2.75rem;    /* 44px */
  --text-5xl:  3.4375rem;  /* 55px */
  --text-6xl:  4.25rem;    /* 68px */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* Semantic roles */
  --display-font:    var(--font-display);
  --display-weight:  var(--weight-bold);
  --display-tracking: var(--tracking-tight);
  --heading-font:    var(--font-display);
  --heading-weight:  var(--weight-semibold);
  --body-font:       var(--font-body);
  --eyebrow-tracking: var(--tracking-caps);
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   DunaDoktor — Spacing & sizing tokens
   4px base grid.
   ============================================================ */

:root {
  --space-0:   0;
  --space-1:   0.25rem;  /* 4 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */
  --space-32:  8rem;     /* 128 */

  /* Layout */
  --container-sm:  640px;
  --container-md:  820px;
  --container-lg:  1080px;
  --container-xl:  1240px;
  --gutter:        var(--space-6);
  --section-y:     var(--space-24);

  /* Control heights (min 44px touch targets on mobile) */
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;
}

/* ===== tokens/radius.css ===== */
/* ============================================================
   DunaDoktor — Radius & elevation tokens
   Friendly but professional: medium rounding, soft cool-navy
   shadows (never pure black).
   ============================================================ */

:root {
  /* Corner radii */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* Shadows — tinted with the river navy, low-spread, layered */
  --shadow-xs:  0 1px 2px rgba(10, 33, 56, 0.06);
  --shadow-sm:  0 1px 2px rgba(10, 33, 56, 0.06),
                0 2px 6px rgba(10, 33, 56, 0.07);
  --shadow-md:  0 2px 4px rgba(10, 33, 56, 0.06),
                0 8px 20px rgba(10, 33, 56, 0.09);
  --shadow-lg:  0 4px 8px rgba(10, 33, 56, 0.07),
                0 18px 40px rgba(10, 33, 56, 0.12);
  --shadow-xl:  0 8px 16px rgba(10, 33, 56, 0.08),
                0 30px 64px rgba(10, 33, 56, 0.16);

  /* Focus ring as a reusable box-shadow */
  --ring-focus: 0 0 0 3px rgba(58, 139, 255, 0.45);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    320ms; /* @kind other */
}

/* ===== tokens/base.css ===== */
/* ============================================================
   DunaDoktor — Base element defaults
   Applied on top of the tokens. Keep light: just enough to make
   raw HTML look on-brand.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); }
h4 { font-size: var(--text-xl);  font-weight: var(--weight-semibold); }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--blue-700); }

strong, b { font-weight: var(--weight-semibold); color: var(--text-strong); }

small { font-size: var(--text-sm); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-xs);
}

::selection { background: var(--sky-200); color: var(--ink-800); }

hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-8) 0; }

/* Eyebrow / overline utility */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-brand);
}

/* ===== site.css ===== */
/* ============================================================
   DunaDoktor weboldal — site layout styles.
   Builds on the design-system tokens (styles.css). Component-level
   visuals come from the DS primitives; this file is page scaffolding.
   ============================================================ */

.site { min-height: 100vh; display: flex; flex-direction: column; }
.container {
  width: 100%; max-width: var(--container-xl);
  margin: 0 auto; padding-inline: var(--space-6);
}
.container--narrow { max-width: var(--container-md); }
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--tint { background: var(--surface-sunken); }
.section--sky { background: var(--sky-100); }
.section--green { background: var(--green-50); }
.section--ink { background: var(--ink-700); color: #fff; }

.eyebrow { display: inline-block; }
.section__head { max-width: 56ch; margin-bottom: var(--space-10); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 10px 0 12px; }
.section__head p { font-size: var(--text-lg); color: var(--text-muted); margin: 0; }
.section--ink .section__head h2 { color: #fff; }
.section--ink .section__head p { color: var(--ink-200); }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.hdr__bar { display: flex; align-items: center; gap: var(--space-6); height: 72px; }
.hdr__brand { display: flex; align-items: center; gap: 10px; cursor: pointer; background: none; border: 0; padding: 0; }
.hdr__brand img { width: 40px; height: 40px; object-fit: contain; }
.hdr__brand b { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--ink-700); }
.hdr__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hdr__link {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  color: var(--ink-600); background: none; border: 0; cursor: pointer;
  padding: 8px 14px; border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hdr__link:hover { background: var(--blue-50); color: var(--blue-700); }
.hdr__link--active { color: var(--blue-700); background: var(--blue-50); }
.hdr__cta { margin-left: 8px; display: flex; align-items: center; gap: 8px; }
.hdr__burger { display: none; margin-left: auto; }
.hdr__mobile { display: none; }

@media (max-width: 880px) {
  .hdr__nav, .hdr__cta { display: none; }
  .hdr__burger { display: inline-flex; }
  .hdr__mobile {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px var(--space-6) 20px; border-top: 1px solid var(--border-subtle);
    background: #fff;
  }
  .hdr__mobile .hdr__link { text-align: left; font-size: var(--text-base); padding: 12px 14px; }
  .hdr__mobile-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__eyebrow { color: var(--sky-400); }
.hero h1 { font-size: clamp(2.2rem, 5.2vw, 3.75rem); line-height: 1.04; margin: 14px 0 18px; }
.hero__lead { font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.55; margin: 0 0 14px; }
.hero__sub { font-size: var(--text-base); line-height: 1.6; margin: 0 0 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__actions--center { justify-content: center; }
.hero__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.hero__media { width: 100%; aspect-ratio: 4 / 3.4; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--ink-600); }
.hero__media image-slot { width: 100%; height: 100%; display: block; }

/* Variant A — navy panel */
.hero--a { background: var(--ink-700); color: #fff; }
.hero--a h1 { color: #fff; }
.hero--a .hero__lead { color: var(--ink-100); }
.hero--a .hero__sub { color: var(--ink-200); }
.hero--a .hero__phone { color: #fff; }
.hero--a .section { padding-block: clamp(3.5rem, 6vw, 5.5rem); }

/* Variant B — immersive full-bleed image, centered content + frosted facts bar */
.hero--b { position: relative; isolation: isolate; min-height: clamp(600px, 90vh, 820px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hero--b .hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--ink-700); }
.hero--b .hero__bg image-slot { width: 100%; height: 100%; display: block; }
.hero--b::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(6,22,38,0.30) 0%, rgba(6,22,38,0.62) 60%, rgba(6,22,38,0.86) 100%);
}
.hero--b__inner { color: #fff; max-width: 860px; padding-block: clamp(3rem, 8vw, 6rem); margin-inline: auto; }
.hero--b__inner .hero__eyebrow { color: var(--sky-300); }
.hero--b h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4.25rem); text-shadow: 0 2px 30px rgba(6,22,38,0.4); }
.hero--b .hero__lead { color: rgba(255,255,255,0.94); max-width: 54ch; margin-inline: auto; }
.hero-b-facts {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  background: rgba(255,255,255,0.10); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.18);
}
.hero-b-facts__row { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 4rem); padding-block: 18px; flex-wrap: wrap; }
.hero-b-fact { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: var(--text-sm); text-decoration: none; }
.hero-b-fact svg { color: var(--sky-300); }
a.hero-b-fact:hover { color: var(--sky-200); }
@media (max-width: 560px) { .hero-b-facts__row { gap: 14px; padding-block: 14px; } }

/* Variant C — light & airy */
.hero--c { background: linear-gradient(180deg, var(--green-50) 0%, var(--surface-page) 100%); }
.hero--c .hero__eyebrow { color: var(--green-600); }
.hero--c h1 { color: var(--ink-700); }
.hero--c .hero__lead { color: var(--neutral-700); }
.hero--c .hero__sub { color: var(--text-muted); }
.hero--c .hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { aspect-ratio: 16 / 11; order: -1; }
  .hero--a .hero__media, .hero--c .hero__media { order: 0; }
}

/* ---------- Grids ---------- */
.grid { display: grid; gap: var(--space-5); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .grid--3 { grid-template-columns: 1fr; } .grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid--4 { grid-template-columns: 1fr; } }

/* Why cards */
.why-card { display: flex; flex-direction: column; gap: 12px; }
.why-card__icon {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-50); color: var(--blue-600);
}
.why-card h3 { font-size: var(--text-lg); margin: 0; color: var(--ink-700); }
.why-card p { font-size: var(--text-sm); color: var(--text-body); margin: 0; line-height: 1.55; }

/* Process steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); counter-reset: step; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-6); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; }
.step__num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--blue-500); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display);
  font-weight: 700; font-size: 1.1rem; margin-bottom: 14px;
}
.step h3 { font-size: var(--text-lg); margin: 0 0 6px; color: var(--ink-700); }
.step p { font-size: var(--text-sm); color: var(--text-body); margin: 0; line-height: 1.5; }
.section--ink .step h3 { color: #fff; }
.section--ink .step p { color: var(--ink-200); }
.section--ink .step__num { background: var(--sky-400); color: var(--ink-800); }

/* Town chips */
.towns { display: flex; flex-wrap: wrap; gap: 8px; }
.town {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  color: var(--ink-700); background: #fff; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill); padding: 7px 14px;
}
.town--more { background: var(--ink-700); color: #fff; border-color: var(--ink-700); }

/* CTA band */
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); color: #fff; margin: 0 0 8px; }
.cta-band p { color: var(--ink-200); margin: 0; font-size: var(--text-lg); }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------- Services page ---------- */
.svc-group { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--border-subtle); }
.svc-group:first-of-type { border-top: 0; }
.svc-group__grid { display: grid; grid-template-columns: 320px 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 880px) { .svc-group__grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.svc-group__aside { position: sticky; top: 96px; }
.svc-group__icon {
  width: 60px; height: 60px; border-radius: var(--radius-lg); display: flex;
  align-items: center; justify-content: center; margin-bottom: 16px;
}
.svc-group__aside h2 { font-size: var(--text-3xl); margin: 0 0 14px; }
.svc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.svc-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); color: var(--text-body); line-height: 1.5; }
.svc-list li svg { color: var(--green-500); flex: none; margin-top: 2px; }
.svc-sections { display: flex; flex-direction: column; gap: var(--space-8); }
.svc-section h3 { font-size: var(--text-xl); color: var(--ink-700); margin: 0 0 8px; }
.svc-section p { margin: 0; color: var(--text-body); line-height: 1.7; }

/* ---------- Pricing ---------- */
.price-callout { display: flex; flex-direction: column; }
.price-callout__row {
  display: flex; justify-content: space-between; gap: var(--space-6); align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--border-subtle);
}
.price-callout__row:last-child { border-bottom: 0; }
.price-callout__towns { font-size: var(--text-sm); color: var(--text-body); line-height: 1.5; }
.price-callout__fee { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--blue-600); white-space: nowrap; }
.price-table { display: flex; flex-direction: column; }
.price-table__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.price-table__head h3 { margin: 0; font-size: var(--text-2xl); color: var(--ink-700); }
.price-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: 11px 0; border-bottom: 1px solid var(--border-subtle); }
.price-row:last-of-type { border-bottom: 0; }
.price-row__label { font-size: var(--text-sm); color: var(--text-body); }
.price-row__price { font-weight: 600; font-size: var(--text-sm); color: var(--ink-700); white-space: nowrap; }
.price-foot { font-size: var(--text-xs); color: var(--text-muted); margin-top: 12px; line-height: 1.5; }

/* ---------- About ---------- */
.about-lead { font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.5; color: var(--ink-700); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.about-body { font-size: var(--text-lg); line-height: 1.75; color: var(--text-body); }
.team-member { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 720px) { .team-member { grid-template-columns: 1fr; gap: var(--space-5); } }
.team-member__photo { width: 100%; aspect-ratio: 1; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); background: var(--ink-600); }
.team-member__photo image-slot { width: 100%; height: 100%; display: block; }
.team-member h3 { font-size: var(--text-2xl); margin: 0 0 4px; color: var(--ink-700); }
.team-member__role { color: var(--blue-600); font-weight: 600; font-size: var(--text-sm); margin: 0 0 14px; }
.team-member__bio { color: var(--text-body); line-height: 1.7; margin: 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-item { display: flex; gap: 14px; align-items: flex-start; }
.contact-item__icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--blue-50); color: var(--blue-600); display: flex; align-items: center; justify-content: center; flex: none; }
.contact-item__k { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 2px; }
.contact-item__v { font-size: var(--text-lg); color: var(--ink-700); font-weight: 600; margin: 0; text-decoration: none; }
a.contact-item__v:hover { color: var(--blue-600); }
.contact-item__note { font-size: var(--text-sm); color: var(--text-muted); margin: 2px 0 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.form-stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* ---------- Footer ---------- */
.ftr { background: var(--ink-800); color: var(--ink-200); padding-block: var(--space-12) var(--space-8); margin-top: auto; }
.ftr__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr; gap: var(--space-8); }
@media (max-width: 820px) { .ftr__grid { grid-template-columns: 1fr; gap: var(--space-8); } }
.ftr__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ftr__brand img { width: 38px; height: 38px; }
.ftr__brand b { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: #fff; letter-spacing: -0.02em; }
.ftr p { font-size: var(--text-sm); line-height: 1.6; margin: 0 0 6px; }
.ftr h4 { color: #fff; font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 14px; font-family: var(--font-body); font-weight: 700; }
.ftr__links { display: flex; flex-direction: column; gap: 8px; }
.ftr__links button { background: none; border: 0; color: var(--ink-200); text-align: left; cursor: pointer; padding: 0; font-size: var(--text-sm); font-family: var(--font-body); }
.ftr__links button:hover { color: #fff; }
.ftr__contact a { color: var(--sky-400); text-decoration: none; font-weight: 600; }
.ftr__contact a:hover { color: #fff; }
.ftr__bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: var(--space-10); padding-top: var(--space-6); font-size: var(--text-xs); color: var(--ink-300); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }

/* ---------- Hero variant switcher (preview chrome, not part of the site) ---------- */
.variant-switch {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 80; display: flex; align-items: center; gap: 6px;
  background: rgba(15,45,74,0.94); backdrop-filter: blur(8px);
  border-radius: var(--radius-pill); padding: 6px 6px 6px 16px; box-shadow: var(--shadow-lg);
}
.variant-switch__label { color: rgba(255,255,255,0.7); font-size: var(--text-xs); font-weight: 600; margin-right: 4px; }
.variant-switch button {
  border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm);
  width: 34px; height: 34px; border-radius: 50%; background: transparent; color: rgba(255,255,255,0.8);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.variant-switch button:hover { background: rgba(255,255,255,0.12); color: #fff; }
.variant-switch button.is-active { background: var(--blue-500); color: #fff; }

/* Entrance animation — opacity stays 1 at all times (so screenshots, print,
   PDF and frozen-frame captures always show content); we animate only a
   subtle slide. */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: dd-rise var(--dur-slow) var(--ease-out) both; }
  @keyframes dd-rise { from { transform: translateY(12px); } to { transform: none; } }
}

/* ===== Design-system components (extracted from injected JS) ===== */
.dd-btn { --_bg: var(--blue-500); --_fg:#fff; --_bd: transparent; --_bgh: var(--blue-600);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:var(--weight-semibold);
  border:1.5px solid var(--_bd); border-radius:var(--radius-md);
  background:var(--_bg); color:var(--_fg); cursor:pointer; text-decoration:none;
  white-space:nowrap; line-height:1;
  transition:background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.dd-btn:hover { background:var(--_bgh); }
.dd-btn:active { transform:translateY(1px); }
.dd-btn:focus-visible { outline:none; box-shadow:var(--ring-focus); }
.dd-btn--sm { height:var(--control-sm); padding:0 14px; font-size:var(--text-sm); }
.dd-btn--md { height:var(--control-md); padding:0 20px; font-size:var(--text-base); }
.dd-btn--lg { height:var(--control-lg); padding:0 26px; font-size:var(--text-lg); }
.dd-btn--block { display:flex; width:100%; }
.dd-btn--primary { --_bg:var(--blue-500); --_fg:#fff; --_bgh:var(--blue-600); }
.dd-btn--nature { --_bg:var(--green-500); --_fg:#fff; --_bgh:var(--green-600); }
.dd-btn--secondary { --_bg:#fff; --_fg:var(--ink-700); --_bd:var(--border-default); --_bgh:var(--neutral-50); }
.dd-btn--secondary:hover { border-color:var(--border-strong); }
.dd-btn--ghost { --_bg:transparent; --_fg:var(--blue-600); --_bd:transparent; --_bgh:var(--blue-50); }

.dd-iconbtn { display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid transparent; border-radius:var(--radius-md); background:transparent;
  color:var(--ink-600); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.dd-iconbtn:hover { background:var(--neutral-100); color:var(--ink-700); }
.dd-iconbtn--md { width:var(--control-md); height:var(--control-md); }

.dd-card { background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.dd-card--pad { padding:var(--space-6); }

.dd-alert { display:flex; gap:12px; align-items:flex-start; border-radius:var(--radius-md);
  padding:14px 16px; border:1px solid transparent; font-family:var(--font-body); }
.dd-alert__icon { flex:none; margin-top:1px; }
.dd-alert__body { font-size:var(--text-sm); color:var(--text-body); line-height:1.5; }
.dd-alert__title { font-weight:var(--weight-semibold); color:var(--ink-700); margin-bottom:2px; }
.dd-alert--info { background:var(--info-50); border-color:var(--blue-200); }
.dd-alert--info .dd-alert__icon { color:var(--blue-600); }
.dd-alert--success { background:var(--success-50); border-color:var(--green-200); }
.dd-alert--success .dd-alert__icon { color:var(--green-600); }
.dd-alert--warning { background:var(--warning-50); border-color:#f3d199; }
.dd-alert--warning .dd-alert__icon { color:var(--warning-700); }

.dd-badge { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-body);
  font-weight:var(--weight-semibold); font-size:var(--text-xs); line-height:1; letter-spacing:0.01em;
  padding:5px 10px; border-radius:var(--radius-pill); border:1px solid transparent; }
.dd-badge--brand { background:var(--blue-50); color:var(--blue-700); }
.dd-badge--nature { background:var(--green-50); color:var(--green-700); }

.dd-service { display:flex; flex-direction:column; gap:var(--space-3);
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--space-6);
  text-align:left; width:100%; cursor:pointer; text-decoration:none;
  transition:box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.dd-service:hover { box-shadow:var(--shadow-md); border-color:var(--blue-300); transform:translateY(-2px); }
.dd-service__icon { width:52px; height:52px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; }
.dd-service__icon--blue { background:var(--blue-50); color:var(--blue-600); }
.dd-service__icon--nature { background:var(--green-50); color:var(--green-600); }
.dd-service__icon--sky { background:var(--sky-100); color:var(--ink-600); }
.dd-service h3 { font-family:var(--font-display); font-weight:var(--weight-semibold); font-size:var(--text-xl); color:var(--ink-700); margin:0; }
.dd-service p { color:var(--text-body); font-size:var(--text-sm); margin:0; line-height:1.55; }
.dd-service__more { margin-top:auto; display:inline-flex; align-items:center; gap:6px; color:var(--blue-600); font-weight:var(--weight-semibold); font-size:var(--text-sm); }

.dd-field { display:flex; flex-direction:column; gap:6px; }
.dd-field__label { font-family:var(--font-body); font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--ink-700); }
.dd-field__req { color:var(--danger-500); margin-left:2px; }
.dd-field__wrap { position:relative; display:flex; align-items:center; }
.dd-field__icon { position:absolute; left:14px; color:var(--neutral-400); pointer-events:none; display:flex; }
.dd-field__chev { position:absolute; right:14px; color:var(--neutral-500); pointer-events:none; display:flex; }
.dd-input, .dd-textarea, .dd-select { width:100%; box-sizing:border-box; font-family:var(--font-body);
  font-size:var(--text-base); color:var(--ink-700); background:#fff; border:1.5px solid var(--border-default);
  border-radius:var(--radius-md);
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.dd-input, .dd-select { height:var(--control-md); padding:0 14px; }
.dd-input--icon { padding-left:42px; }
.dd-select { padding-right:40px; appearance:none; cursor:pointer; }
.dd-textarea { min-height:110px; resize:vertical; padding:12px 14px; line-height:1.5; }
.dd-input::placeholder, .dd-textarea::placeholder { color:var(--neutral-400); }
.dd-input:hover, .dd-textarea:hover, .dd-select:hover { border-color:var(--border-strong); }
.dd-input:focus, .dd-textarea:focus, .dd-select:focus { outline:none; border-color:var(--blue-500); box-shadow:var(--ring-focus); }

/* image-slot replaced by <img> in static build */
.hero__media img, .hero--b .hero__bg img, .team-member__photo img { width:100%; height:100%; display:block; object-fit:cover; }

/* mobile menu: hidden until toggled, then vertical full-width stack */
.hdr__mobile { display:none; }
@media (max-width: 880px) {
  .hdr__mobile { display:none; }
  .hdr__mobile.is-open {
    display:flex; flex-direction:column; gap:4px;
    padding:10px var(--space-6) 18px;
    border-top:1px solid var(--border-subtle); background:#fff;
  }
  .hdr__mobile .hdr__link {
    display:block; width:100%; text-align:left;
    font-size:var(--text-base); padding:13px 14px;
  }
  .hdr__mobile-cta { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
}

/* Fix: mobilon ne ragadjon meg az oldalsáv (átfedés a törzsszöveggel) */
@media (max-width: 880px) {
  .svc-group__aside { position: static; top: auto; }
  .svc-group { margin-bottom: var(--space-8); }
}

/* Facebook CTA a kapcsolat oldalon */
.fb-cta { display:flex; align-items:center; gap:14px; text-decoration:none;
  background:#1877f2; color:#fff; border-radius:var(--radius-lg);
  padding:14px 18px; box-shadow:var(--shadow-sm);
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.fb-cta:hover { background:#1466d6; transform:translateY(-1px); }
.fb-cta__icon { flex:none; display:flex; }
.fb-cta__text { display:flex; flex-direction:column; line-height:1.3; flex:1; }
.fb-cta__text strong { font-size:var(--text-base); }
.fb-cta__text span { font-size:var(--text-sm); color:rgba(255,255,255,.85); }
.fb-or { display:flex; align-items:center; text-align:center; gap:12px;
  color:var(--text-muted); font-size:var(--text-sm); margin:18px 0; }
.fb-or::before, .fb-or::after { content:""; flex:1; height:1px; background:var(--border-subtle); }