/* =====================================================================
   NP Partners Kft. — Liquid Glass design system
   Plain CSS · no frameworks · light frosted-glass over green/blue mesh
   Sections:
     1. Design tokens (:root)
     2. Reset & base
     3. Accessibility helpers (skip link, focus, sr-only)
     4. Background mesh / decorative blobs
     5. Glass + Soft-UI surface primitives
     6. Buttons & CTA system
     7. Navigation (sticky glass bar + brand logos + lang switch)
     8. Mobile menu
     9. Layout / sections / rhythm
    10. Hero (abstract brand visual)
    11. Section-specific components
    12. Forms
    13. Footer
    14. Bilingual visibility (HU / EN)
    15. Motion / reveal / reduced-motion
    16. Responsive
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   Light Liquid Glass: whitish base, rich green/blue mesh behind glass.
   Palette honours the brief: "fehér szerű, lehet zöld, kék" so a green
   brand logo reads cleanly in the top region.
   --------------------------------------------------------------------- */
:root {
  /* Base / backdrop */
  --color-bg: #EAF3EE;            /* soft mint-white page base */
  --color-bg-2: #E2EEF6;          /* cool blue-white for alternating bands */

  /* Glass surfaces (light frosted) — more opaque so panels clearly lift off the backdrop */
  --glass: rgba(255, 255, 255, 0.80);
  --glass-2: rgba(255, 255, 255, 0.66);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-edge: rgba(13, 46, 38, 0.10);   /* subtle outer hairline for definition */
  --glass-hi: rgba(255, 255, 255, 0.95);   /* top inner highlight edge */

  /* Soft-UI tonal surface (same hue family as page) */
  --soft-bg: #E8F1EB;
  --soft-light: rgba(255, 255, 255, 0.95);
  --soft-dark: rgba(120, 150, 138, 0.45);

  /* Text */
  --color-text: #0C2A22;          /* deep green-slate — strong contrast */
  --color-heading: #082019;
  --color-text-muted: #3F5A50;    /* >=4.5:1 on glass/white */

  /* Brand (bright tones — used for fills, icons, large/decorative elements) */
  --color-primary: #0E9E6B;       /* emerald green */
  --color-primary-hover: #0B814F;
  --color-primary-soft: rgba(14, 158, 107, 0.12);
  --color-secondary: #1F6FE5;     /* engineering blue */
  --color-secondary-hover: #1559c4;
  --color-accent: #B5852B;        /* trust-gold — fills / borders / icons only */
  --color-accent-soft: rgba(181, 133, 43, 0.14);

  /* CTA fills tuned so white text stays >=4.5:1 (AA) */
  --cta-from: #0B8457;
  --cta-to: #0A7250;
  --cta-from-hover: #0A7250;
  --cta-to-hover: #08613F;

  /* "Ink" tones — accessible small-text colors on the light backdrop (>=4.5:1) */
  --ink-green: #0A6E45;
  --ink-blue: #1657C9;
  --ink-gold: #7A5A12;

  /* Mesh blob colors — gently toned down (soft, not vivid) */
  --blob-green: rgba(16, 185, 129, 0.40);
  --blob-blue: rgba(46, 120, 255, 0.32);
  --blob-teal: rgba(13, 184, 166, 0.30);
  --blob-mint: rgba(150, 240, 205, 0.38);

  /* Dark surface tokens (for the dramatic CTA contrast moment) */
  --dark-1: #06231B;
  --dark-2: #0A2E48;
  --dark-text: #EAF6F0;
  --dark-muted: #A9C6BC;
  --dark-glass: rgba(255, 255, 255, 0.10);
  --dark-glass-border: rgba(255, 255, 255, 0.20);

  /* Shadows — soft, diffuse, large radius (glass character) */
  --shadow-glass: 0 26px 52px rgba(8, 40, 32, 0.20);
  --shadow-glass-sm: 0 14px 30px rgba(8, 40, 32, 0.15);
  --shadow-soft: 8px 8px 18px var(--soft-dark), -8px -8px 18px var(--soft-light);
  --shadow-soft-pressed: inset 5px 5px 11px var(--soft-dark), inset -5px -5px 11px var(--soft-light);
  --ring: 0 0 0 3px rgba(31, 111, 229, 0.45);

  /* Type scale — modular 1.25, base 16px */
  --font-heading: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-display: clamp(1.9rem, 5.4vw, 3.3rem);

  /* Easing — expressive "liquid" curves */
  --ease-glass: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Even, perceptible curve for hover shadows — the front-loaded ease-glass made
     a 600ms box-shadow fade look instant; this spreads it across the full 600ms. */
  --ease-shadow: cubic-bezier(0.4, 0, 0.2, 1);

  /* Spacing (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --space-section: clamp(34px, 4vw, 58px);

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Layout */
  --container: 1160px;

  /* Z-index scale */
  --z-blobs: 0;
  --z-base: 1;
  --z-nav: 50;
  --z-menu: 60;
  --z-skip: 70;
}

/* ---------------------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* offset for sticky nav on anchor jumps */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: break-word;
  font-feature-settings: "ss01", "cv01";
}
h1 { font-size: var(--text-display); letter-spacing: -0.035em; line-height: 1.04; }
h2 { font-size: clamp(2rem, 4.2vw, 2.85rem); }
h3 { font-size: var(--text-xl); letter-spacing: -0.02em; }
h4 { font-size: var(--text-lg); }

p { max-width: 68ch; text-wrap: pretty; }

a { color: var(--ink-blue); text-decoration: none; transition: color 300ms var(--ease-out); }
a:hover { color: var(--color-secondary-hover); }

img { max-width: 100%; display: block; height: auto; }

ul, ol { list-style: none; padding: 0; margin: 0; }

button { font-family: inherit; cursor: pointer; }

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

/* Custom scrollbar (don't leave default) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--color-bg-2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-pill);
  border: 3px solid var(--color-bg-2);
}
::selection { background: var(--color-primary-soft); color: var(--color-heading); }

/* ---------------------------------------------------------------------
   3. ACCESSIBILITY HELPERS
   --------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: var(--z-skip);
  background: var(--color-heading);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  transition: top 180ms ease-out;
}
.skip-link:focus { top: var(--space-4); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   4. BACKGROUND MESH / DECORATIVE BLOBS
   The rich backdrop glass refracts. Fixed, behind everything.
   --------------------------------------------------------------------- */
.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: var(--z-blobs);
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(58% 48% at 14% 6%, var(--blob-mint), transparent 60%),
    radial-gradient(52% 46% at 90% 10%, var(--blob-blue), transparent 62%),
    radial-gradient(60% 52% at 82% 88%, var(--blob-green), transparent 60%),
    radial-gradient(48% 42% at 6% 92%, var(--blob-teal), transparent 60%),
    radial-gradient(40% 38% at 50% 50%, rgba(255,255,255,0.55), transparent 70%),
    var(--color-bg);
}
/* Fine grain overlay — premium "frosted" texture so large light areas don't look flat */
.bg-mesh::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: multiply;
}
.bg-mesh::before {
  /* faint engineering grid to add tech texture under the glass */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(8, 40, 32, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 40, 32, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 75%);
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.55;
  will-change: transform;
}
.blob--1 { width: 460px; height: 460px; left: -120px; top: -80px;
  background: var(--blob-green); animation: drift1 22s ease-in-out infinite; }
.blob--2 { width: 520px; height: 520px; right: -140px; top: 6%;
  background: var(--blob-blue); animation: drift2 27s ease-in-out infinite; }
.blob--3 { width: 400px; height: 400px; left: 40%; bottom: -120px;
  background: var(--blob-teal); animation: drift1 30s ease-in-out infinite reverse; }

@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 50px) scale(1.08); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, 40px) scale(1.05); }
}

/* ---------------------------------------------------------------------
   5. SURFACE PRIMITIVES — glass + soft-ui
   --------------------------------------------------------------------- */
.glass {
  background: linear-gradient(150deg, var(--glass), var(--glass-2));
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-hi);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px rgba(255,255,255,0.18);
  position: relative;
}
/* Fallback when backdrop-filter unsupported: lean on a more solid surface */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-strong); }
}

.soft {
  background: var(--soft-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(255,255,255,0.5);
}

/* small badge / pill used for eyebrow labels & tags */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-green);
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.66));
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 8px 18px rgba(8,40,32,0.10);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); flex: none; }

/* ---------------------------------------------------------------------
   6. BUTTONS / CTA SYSTEM (consistent everywhere)
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-base);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  min-height: 48px;
  position: relative;
  overflow: hidden;
  transition: transform 600ms var(--ease-glass), box-shadow 600ms var(--ease-shadow),
              background-color 500ms ease-out, color 400ms ease-out;
  text-align: center;
  line-height: 1.2;
}
.btn svg, .btn span { position: relative; z-index: 1; }
.btn svg { width: 20px; height: 20px; flex: none; }
/* light sheen sweep on hover (premium glass) */
.btn--primary::before {
  content: ""; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
  transition: left 600ms var(--ease-out);
}
.btn--primary:hover::before { left: 140%; }

.btn--primary {
  background: linear-gradient(135deg, var(--cta-from), var(--cta-to));
  color: #fff;
  box-shadow: 0 14px 28px rgba(10, 114, 80, 0.35);
}
.btn--primary:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--cta-from-hover), var(--cta-to-hover));
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(10, 114, 80, 0.42);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--color-heading);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-glass-sm);
}
.btn--ghost:hover {
  color: var(--color-heading);
  background: var(--glass-strong);
  transform: translateY(-2px);
}

.btn--block { width: 100%; }

/* ---------------------------------------------------------------------
   7. NAVIGATION
   --------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--container), calc(100% - var(--space-6)));
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px; /* uniform: language toggle's right gap equals its top/bottom gap */
  background: linear-gradient(135deg, rgba(255,255,255,0.80), rgba(255,255,255,0.62));
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-hi);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-glass-sm);
  transition: box-shadow 600ms var(--ease-shadow), background-color 400ms ease, padding 400ms ease;
}
.nav.is-scrolled { box-shadow: 0 14px 34px rgba(8,40,32,0.18); }

/* brand logos */
.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}
.nav__logo { display: flex; align-items: center; border-radius: var(--radius-sm); min-height: 36px; padding: 0 4px; }
.nav__logo img,
.nav__logo svg { height: 30px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-2);   /* menu items a little further apart */
  margin-left: auto;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: -0.01em;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  position: relative;
  isolation: isolate;
  transition: color 350ms var(--ease-out);
  white-space: nowrap;
}
/* elegant frosted-glass pill that scales + fades in on hover/focus */
.nav__link::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.62));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 16px rgba(8,40,32,0.12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: scale(0.8);
  transition: opacity 350ms var(--ease-out), transform 450ms var(--ease-glass);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--ink-green); }
.nav__link:hover::before, .nav__link:focus-visible::before { opacity: 1; transform: scale(1); }
.nav__link.is-active { color: var(--ink-green); }
.nav__link.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 16px; height: 3px; border-radius: 3px; background: var(--color-primary);
}

/* language toggle — single button that opens the other language */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.72);
  color: var(--color-heading);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 9px 13px;          /* same vertical size as the menu items */
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  transition: background-color 500ms ease, transform 500ms var(--ease-out), box-shadow 600ms var(--ease-shadow);
}
.lang-toggle:hover { background: #fff; transform: translateY(-1px); box-shadow: var(--shadow-glass-sm); }
.lang-toggle .flag { width: 22px; height: 15px; border-radius: 3px; flex: none; box-shadow: 0 1px 2px rgba(0,0,0,.25); }

/* hamburger */
.nav__toggle {
  display: none;
  flex: none;
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.6);
  align-items: center; justify-content: center;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: ""; display: block; width: 22px; height: 2px;
  background: var(--color-heading); border-radius: 2px;
  transition: transform 240ms ease, opacity 200ms ease;
}
.nav__toggle span::before { position: absolute; transform: translateY(-7px); }
.nav__toggle span::after { position: absolute; transform: translateY(7px); }
.nav__toggle span { position: relative; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); }

/* Top-right Széchenyi support logo (64px tall, visible without scroll) */
.support-logo {
  position: fixed;
  top: 80px;          /* sits clearly BELOW the floating nav (never overlapping it) */
  right: 24px;
  z-index: 45;        /* below the nav (50) — nav/menu always win pointer events */
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  background: #fff;
  box-shadow: 0 10px 28px rgba(8, 40, 32, 0.18);
  border: 1px solid var(--glass-edge);
  transition: transform 200ms ease-out, box-shadow 600ms var(--ease-shadow);
}
.support-logo:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(8, 40, 32, 0.24); }
.support-logo img { height: 78px; width: auto; display: block; }

/* ---------------------------------------------------------------------
   8. MOBILE MENU
   --------------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: none;
  flex-direction: column;
  padding: calc(var(--space-9) + 10px) var(--space-5) var(--space-7);
  background: linear-gradient(160deg, rgba(255,255,255,0.85), rgba(226,238,246,0.85));
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  overflow-y: auto;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-heading);
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--glass-edge);
  min-height: 56px;
  display: flex; align-items: center;
}
.mobile-menu a:hover { color: var(--ink-green); }
.mobile-menu .mm-close {
  position: absolute; top: var(--space-5); right: var(--space-5);
  width: 48px; height: 48px; border-radius: var(--radius-md);
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.7);
  font-size: 1.5rem; color: var(--color-heading); line-height: 1;
}

/* ---------------------------------------------------------------------
   9. LAYOUT / SECTIONS / RHYTHM
   --------------------------------------------------------------------- */
.container { width: min(var(--container), calc(100% - var(--space-6))); margin-inline: auto; }
.container--narrow { max-width: 820px; }

main { position: relative; z-index: var(--z-base); }

section { padding-block: var(--space-section); position: relative; }

/* Alternating band tones build the section-to-section rhythm */
/* Section rhythm via EDGE-FADED tints (no hard panel edges) — sections stay
   transparent over the continuous fixed mesh and only get a soft colour wash
   that fades to nothing at top and bottom, so transitions read as seamless. */
.band--tint::after,
.band--solid::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.band--tint::after {
  background: linear-gradient(180deg, transparent 0%, rgba(31,111,229,0.07) 22%,
              rgba(16,185,129,0.06) 78%, transparent 100%);
}
.band--solid::after {
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.50) 20%,
              rgba(255,255,255,0.50) 80%, transparent 100%);
}

.section-head { max-width: 720px; margin-bottom: var(--space-6); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p.lead { color: var(--color-text-muted); font-size: var(--text-lg); margin-top: var(--space-3); }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------------------------------------------------------------------
   10. HERO — abstract brand visual
   --------------------------------------------------------------------- */
.hero {
  padding-top: 124px; /* clears the thinner floating nav + support logo */
  padding-bottom: var(--space-6);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); /* 60% / 40% */
  gap: var(--space-7);
  align-items: center;
}
.hero__copy { max-width: 600px; }
.hero h1 { margin: var(--space-3) 0; }
.hero__lead { font-size: var(--text-base); line-height: 1.6; color: var(--color-text-muted); margin-bottom: var(--space-5); max-width: 56ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero__highlight {
  background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* trust strip under hero copy */
.hero__trust {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  margin-top: var(--space-5);
}
.hero__trust .ht {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: 0.95rem; color: var(--color-text-muted); font-weight: 600;
}
.hero__trust .ht svg { width: 26px; height: 26px; color: var(--color-primary); flex: none; }

/* the visual — liquid-glass framed placeholder (final nyitókép arrives later) */
.hero__visual { position: relative; }
.hero__frame {
  padding: 14px;
  border-radius: var(--radius-xl);
}
/* soft colour halo bleeding from behind the frame (static, no spin) */
.hero__frame::before {
  content: ""; position: absolute; inset: -8% -6% -12% -6%; z-index: -1;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(50% 50% at 25% 20%, rgba(16,185,129,0.45), transparent 60%),
    radial-gradient(55% 55% at 85% 85%, rgba(46,120,255,0.42), transparent 62%);
  filter: blur(40px);
  opacity: 0.9;
}
.hero__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(16,185,129,0.30), transparent 60%),
    radial-gradient(120% 90% at 95% 100%, rgba(46,120,255,0.30), transparent 60%),
    linear-gradient(150deg, #f3faf6, #e7f1f9);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px rgba(13,46,38,0.06);
}
/* subtle static abstract brand motif inside the placeholder */
.hero__media svg { width: 62%; height: auto; opacity: 0.9; }
.hero__media-badge {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: var(--text-sm); font-weight: 700; color: var(--ink-gold);
  background: rgba(255,255,255,0.82);
  border: 1px dashed rgba(181,133,43,0.55);
  padding: 6px 12px; border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero__media-badge svg { width: 15px; height: 15px; opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Interactive robot-arm panel (plain SVG, FABRIK IK in script.js) --- */
.hero__media--3d {
  aspect-ratio: 1 / 1;
  /* soft blue-grey studio so the white cobot arm reads with clear contrast */
  background:
    radial-gradient(110% 75% at 50% 2%, #f3f7fc, transparent 56%),
    radial-gradient(95% 70% at 80% 26%, rgba(31,111,229,0.12), transparent 60%),
    linear-gradient(180deg, #dde6f1 0%, #c6d2e2 64%, #b3c1d6 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 0 0 1px rgba(13,46,38,0.05);
}
/* soft studio floor band at the bottom of the panel */
.hero__media--3d::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(80,100,135,0.22));
}
.hero__spotlight {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 45% at 58% 14%, rgba(255,255,255,0.6), transparent 60%);
}
.hero__robot {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; display: block;
}
/* Caption sitting ON TOP of the panel (overlaid at the top edge) */
.panel-caption {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: clamp(14px, 3.4vw, 24px) clamp(16px, 4vw, 28px);
  pointer-events: none;
}
.panel-caption__az {
  font-weight: 800; line-height: 0.9; letter-spacing: -0.02em;
  font-size: clamp(30px, 6vw, 46px);
  background: linear-gradient(135deg, #0E9E6B, #1f6fe5);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.panel-caption__sub {
  font-weight: 600; color: #2a3850;
  font-size: clamp(12px, 1.55vw, 15px);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* empty hero visual placeholder (robot arm moved to the About A→Z panel) */
.hero__media--placeholder { position: relative; }
.hero__media--placeholder .placeholder-tag { position: relative; z-index: 1; }

/* placeholder note used where real photo will go */
.placeholder-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: 700;
  color: var(--ink-gold); background: var(--color-accent-soft);
  border: 1px dashed rgba(181,133,43,0.5);
  padding: 4px 10px; border-radius: var(--radius-pill);
}

/* ---------------------------------------------------------------------
   11. SECTION COMPONENTS
   --------------------------------------------------------------------- */

/* About — split layout with stat tiles */
.about__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); align-items: stretch; }
.about__text p + p { margin-top: var(--space-4); }
.about__text .lead { font-size: var(--text-lg); color: var(--color-heading); font-weight: 600; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.stat {
  --accent: var(--color-primary);
  --mx: 50%; --my: 0%;
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--space-6) var(--space-5);
  text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform 600ms var(--ease-glass), box-shadow 600ms var(--ease-shadow);
}
.stat:nth-child(2) { --accent: var(--color-secondary); }
.stat:nth-child(3) { --accent: #0FB5A6; }
.stat:nth-child(4) { --accent: var(--color-accent); }
/* glowing orb bleeding from the top-right corner */
.stat__glow {
  position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%);
  filter: blur(8px);
  opacity: 0.7;
  transition: transform 600ms var(--ease-glass), opacity 600ms ease;
}
/* gradient ring border revealed on hover */
.stat::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 75%, transparent), transparent 50%, color-mix(in srgb, var(--color-secondary) 45%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 600ms ease;
}
/* pointer spotlight */
.stat::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(255,255,255,0.6), transparent 60%);
  opacity: 0; transition: opacity 500ms ease;
}
.stat__icon {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--color-secondary)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 18px color-mix(in srgb, var(--accent) 32%, transparent);
  margin-bottom: 2px;
}
.stat__icon svg { width: 22px; height: 22px; }
.stat__num {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--color-secondary) 80%, var(--accent)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label { color: var(--color-text-muted); font-size: 0.92rem; }
.stat:hover { transform: translateY(-6px); box-shadow: 0 38px 64px rgba(8,40,32,0.22); }
.stat:hover::after { opacity: 1; }
.stat:hover::before { opacity: 1; }
.stat:hover .stat__glow { transform: scale(1.25); opacity: 0.9; }

/* The 2×2 stat grid stays exactly as designed; the interactive robot arm just
   floats on TOP of the A→Z panel with a transparent background, its base resting
   on the panel rim and the arm rising above the panel's top edge. */
/* overflow:visible lets the arm rise above the top edge, but it also let the
   top-right corner glow spill outside the rounded panel. Pulling the glow fully
   inside the panel box (its transparent gradient tail never reaches the edges)
   keeps the corner glow tidily clipped like every other tile, while the robot —
   a separate element sitting ABOVE the panel — stays fully visible. */
.stat--robot { overflow: visible; }
.stat--robot .stat__glow { top: -8px; right: -8px; }
.stat__robot {
  position: absolute;
  left: 50%;
  bottom: 100%;                /* base sits exactly on the panel's top edge */
  transform: translateX(-50%);
  width: 168px;
  aspect-ratio: 1 / 1;
  z-index: 4;
  pointer-events: none;        /* never blocks panel hover */
}
.stat__robot .hero__robot { width: 100%; height: 100%; display: block; overflow: visible; }

/* Services — feature cards w/ icon */
.cards { display: grid; gap: var(--space-5); }
.card {
  --mx: 50%; --my: 0%;
  --accent: var(--color-primary);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 600ms var(--ease-glass), box-shadow 600ms var(--ease-shadow), border-color 400ms ease;
}
/* elegant gradient-ring border that reveals on hover/focus (replaces the old top line) */
.card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 70%, transparent), transparent 45%, color-mix(in srgb, var(--color-secondary) 55%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 500ms ease;
}
/* pointer-tracked spotlight (liquid-glass highlight) + soft accent corner glow */
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(260px circle at var(--mx) var(--my), rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%);
  opacity: 0; transition: opacity 500ms ease;
}
.card__icon {
  width: 60px; height: 60px; border-radius: 18px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--color-secondary)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 22px color-mix(in srgb, var(--accent) 35%, transparent);
  margin-bottom: var(--space-2);
  transition: transform 600ms var(--ease-glass);
}
.card__icon svg { width: 30px; height: 30px; color: #fff; }
.card h3 { font-size: var(--text-lg); }
.card p { color: var(--color-text-muted); font-size: 0.97rem; }
.card:hover, .card:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 40px 70px rgba(8,40,32,0.24);
}
.card:hover::after, .card:focus-within::after { opacity: 1; }
.card:hover::before, .card:focus-within::before { opacity: 1; }
.card:hover .card__icon, .card:focus-within .card__icon { transform: translateY(-3px) scale(1.05); }
/* accent rotation gives related-but-distinct cards within one family */
.card:nth-child(3n+2) { --accent: var(--color-secondary); }
.card:nth-child(3n)   { --accent: var(--color-accent); }

/* References — placeholder showcase */
.ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.ref-card {
  aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-5);
  position: relative; overflow: hidden;
}
.ref-card::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(14,158,107,0.22), transparent 60%),
    radial-gradient(120% 90% at 100% 100%, rgba(31,111,229,0.20), transparent 60%);
}
.ref-card__icon { position: absolute; top: var(--space-5); left: var(--space-5); }
.ref-card__icon svg { width: 40px; height: 40px; color: var(--color-primary-hover); opacity: 0.85; }
.ref-card h3 { position: relative; font-size: var(--text-lg); }

/* Why us — soft-ui reason tiles (second surface treatment) */
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.reason {
  --mx: 50%; --my: 0%;
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  position: relative; isolation: isolate; overflow: hidden;
  transition: box-shadow 600ms var(--ease-shadow), transform 600ms var(--ease-glass);
}
.reason::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(255,255,255,0.6), transparent 60%);
  opacity: 0; transition: opacity 500ms ease;
}
.reason__badge {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, var(--color-secondary)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 22px rgba(14,158,107,0.30);
}
.reason__badge svg { width: 26px; height: 26px; color: #fff; }
.reason h3 { font-size: var(--text-lg); }
.reason p { color: var(--color-text-muted); font-size: 0.96rem; }
.reason:hover { transform: translateY(-6px); box-shadow: 0 38px 64px rgba(8,40,32,0.22); }
.reason:hover::before { opacity: 1; }

/* Contact */
.contact__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-7); align-items: start; }
.contact__info { padding: var(--space-7); }
.contact__list { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-5); }
.contact__item { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact__item .ci-icon {
  width: 46px; height: 46px; border-radius: var(--radius-md); flex: none;
  display: grid; place-items: center;
  background: var(--color-primary-soft); border: 1px solid rgba(14,158,107,0.25);
}
.contact__item .ci-icon svg { width: 22px; height: 22px; color: var(--color-primary-hover); }
.contact__item .ci-label { font-size: var(--text-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.contact__item a { font-weight: 600; color: var(--color-heading); display: inline-block; padding: 11px 0; min-height: 24px; }
.contact__item a:hover { color: var(--ink-green); }

.map-wrap {
  margin-top: var(--space-6);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass-sm);
  aspect-ratio: 16 / 9;
  background: var(--color-bg-2);
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Grants / Pályázataink */
.grant-card {
  padding: var(--space-7);
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-6); align-items: center;
  border-left: 4px solid var(--color-accent);
}
.grant-card__seal {
  width: 84px; height: 84px; border-radius: var(--radius-md);
  display: grid; place-items: center; flex: none;
  background: var(--color-accent-soft); border: 1px solid rgba(181,133,43,0.35);
}
.grant-card__seal svg { width: 44px; height: 44px; color: var(--color-accent); }
.grant-card__id { font-family: var(--font-heading); font-weight: 700; color: var(--ink-gold); letter-spacing: 0.02em; }
.grant-card h3 { margin: var(--space-2) 0; }

/* Final CTA */
/* Process / How-we-work timeline (glass steps with connector + numbered badge) */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); position: relative; }
.step {
  --mx: 50%; --my: 0%;
  padding: var(--space-6) var(--space-5);
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform 500ms var(--ease-glass), box-shadow 600ms var(--ease-shadow);
}
.step::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(255,255,255,0.5), transparent 62%);
  opacity: 0; transition: opacity 320ms ease;
}
.step:hover { transform: translateY(-6px); box-shadow: 0 32px 56px rgba(8,40,32,0.20); }
.step:hover::before { opacity: 1; }
.step__num {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 800; font-size: var(--text-lg); color: #fff;
  background: linear-gradient(135deg, var(--cta-from), var(--color-secondary));
  box-shadow: 0 10px 22px rgba(10,114,80,0.35);
}
.step h3 { font-size: var(--text-lg); }
.step p { color: var(--color-text-muted); font-size: 0.95rem; }
/* connector arrows between steps on wide screens */
.step:not(:last-child)::after {
  content: ""; position: absolute; top: calc(var(--space-6) + 26px); right: calc(var(--space-5) * -1);
  width: var(--space-5); height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-primary) 0 6px, transparent 6px 12px);
  opacity: 0.6; z-index: 3;
}

/* Final CTA — a FULL-BLEED dark band that belongs to the page flow (not a
   floating panel). Soft top/bottom fades blend it into the light page + footer. */
.final-cta {
  position: relative;
  text-align: center;
  color: var(--dark-text);
  margin-top: var(--space-7);
  padding-block: clamp(56px, 8vw, 104px);
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 12% 6%, rgba(16,185,129,0.32), transparent 60%),
    radial-gradient(60% 85% at 92% 98%, rgba(46,120,255,0.34), transparent 60%),
    linear-gradient(140deg, var(--dark-1), var(--dark-2));
}
/* feather the top + bottom edges so the band melts into the light page above
   and the footer below — no hard seam */
.final-cta::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 110px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, var(--color-bg), transparent);
  opacity: 0.85;
}
.final-cta::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(231,241,246,0.92), transparent);
}
.final-cta__panel {
  position: relative; z-index: 3;
  text-align: center;
}
/* soft conic sheen sweeping the dark band */
.final-cta__sheen {
  content: ""; position: absolute; inset: -40%; z-index: 1; pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255,255,255,0.08) 60deg, transparent 140deg);
  animation: sweep 16s linear infinite;
}
.final-cta__panel .eyebrow { color: #BFF3DE; background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); }
.final-cta__panel .eyebrow .dot { background: #6EE7B7; }
.final-cta__panel h2 { margin-bottom: var(--space-3); color: #fff; }
.final-cta__panel p { margin: 0 auto var(--space-6); color: var(--dark-muted); font-size: var(--text-lg); }
.final-cta .hero__cta { justify-content: center; }
/* on dark, the ghost button needs a light translucent surface */
.final-cta__panel .btn--ghost {
  background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.35);
}
.final-cta__panel .btn--ghost:hover { background: rgba(255,255,255,0.22); color: #fff; }
@keyframes sweep { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   12. FORMS
   --------------------------------------------------------------------- */
.form { padding: var(--space-7); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-weight: 600; font-size: 0.95rem; color: var(--color-heading); }
.field .req { color: var(--ink-green); }

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(14,158,107,0.22);
}
/* custom select arrow (no default browser styling) */
.field select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230C2A22' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-8);
}
.field--check { flex-direction: row; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-5); margin-bottom: var(--space-5); }
.field--check input { width: 24px; height: 24px; min-height: 0; margin-top: 2px; accent-color: var(--color-primary); flex: none; }
.field--check label { font-weight: 500; font-size: 0.9rem; color: var(--color-text-muted); }

.field .err-msg { color: #b3261e; font-size: 0.85rem; font-weight: 600; display: none; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179,38,30,0.18); }
.field.has-error .err-msg { display: block; }

.form__status {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  display: none;
}
.form__status.is-ok { display: block; background: var(--color-primary-soft); color: var(--color-primary-hover); border: 1px solid rgba(14,158,107,0.3); }

/* ---------------------------------------------------------------------
   13. FOOTER
   --------------------------------------------------------------------- */
.footer {
  position: relative; z-index: var(--z-base);
  margin-top: var(--space-section);
  padding: var(--space-8) 0 var(--space-6);
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(226,238,246,0.7));
  border-top: 1px solid var(--glass-border);
}
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7); }
.footer__brand img, .footer__brand svg { height: 48px; width: auto; margin-bottom: var(--space-4); }
.footer__brand p { color: var(--color-text-muted); font-size: 0.95rem; }
.footer h3 { font-size: var(--text-base); margin-bottom: var(--space-4); }
.card p a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__nav a { display: flex; align-items: center; color: var(--color-text-muted); padding: var(--space-2) 0; min-height: 44px; font-weight: 500; }
.footer__nav a:hover { color: var(--ink-green); }
.footer__bottom {
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid var(--glass-edge);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  color: var(--color-text-muted); font-size: 0.88rem;
}

/* Project subpage body (character-exact docx content) */
.project-body p { max-width: 72ch; margin-bottom: var(--space-4); color: var(--color-text); }
.project-body p:last-child { margin-bottom: 0; }
.project-facts div { padding: var(--space-3) 0; border-bottom: 1px dashed var(--glass-edge); }
.project-facts div:last-child { border-bottom: none; }
.project-facts strong { color: var(--color-heading); }

/* ---------------------------------------------------------------------
   14. BILINGUAL VISIBILITY
   Default document lang="hu" → English nodes hidden, gracefully no-JS.
   --------------------------------------------------------------------- */
html[lang="hu"] [data-lang="en"] { display: none !important; }
html[lang="en"] [data-lang="hu"] { display: none !important; }

/* ---------------------------------------------------------------------
   15. MOTION — reveal on scroll
   --------------------------------------------------------------------- */
/* Reveals are only hidden when JS is active (html.js); without JS everything
   stays visible, so content never depends on the observer firing. */
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
  will-change: opacity, transform;
}
html.js .reveal.is-visible { opacity: 1; transform: none; }

/* Panel icon tiles fade + settle in when their panel reveals */
html.js .reveal .card__icon,
html.js .reveal .reason__badge,
html.js .reveal .stat__icon,
html.js .reveal .step__num {
  opacity: 0; transform: scale(0.7) translateY(6px);
}
html.js .reveal.is-visible .card__icon,
html.js .reveal.is-visible .reason__badge,
html.js .reveal.is-visible .stat__icon,
html.js .reveal.is-visible .step__num {
  animation: icon-pop 1100ms var(--ease-glass) 150ms both;
}
@keyframes icon-pop {
  0%   { opacity: 0; transform: scale(0.7) translateY(6px) rotate(-6deg); }
  60%  { opacity: 1; transform: scale(1.06) translateY(0) rotate(0); }
  100% { opacity: 1; transform: none; }
}

/* "Lottie-like" elegant self-drawing of the line icons (slow, ~1.4s, on reveal) */
html.js .reveal :is(.card__icon, .reason__badge, .stat__icon, .ci-icon) svg :is(path, line, polyline, polygon, circle, rect) {
  stroke-dasharray: 240; stroke-dashoffset: 240;
}
html.js .reveal.is-visible :is(.card__icon, .reason__badge, .stat__icon, .ci-icon) svg :is(path, line, polyline, polygon, circle, rect) {
  animation: icon-draw 4000ms var(--ease-out) 300ms forwards;
}
@keyframes icon-draw { to { stroke-dashoffset: 0; } }

/* Stat numbers rise + fade with a staggered cascade */
html.js .reveal .stat__num { opacity: 0; transform: translateY(12px) scale(0.96); }
html.js .reveal.is-visible .stat__num { animation: num-in 800ms var(--ease-glass) both; }
html.js .reveal.is-visible .stat:nth-child(2) .stat__num { animation-delay: 130ms; }
html.js .reveal.is-visible .stat:nth-child(3) .stat__num { animation-delay: 260ms; }
html.js .reveal.is-visible .stat:nth-child(4) .stat__num { animation-delay: 390ms; }
@keyframes num-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  html.js .reveal .card__icon,
  html.js .reveal .reason__badge,
  html.js .reveal .stat__icon,
  html.js .reveal .step__num,
  html.js .reveal .stat__num { opacity: 1; transform: none; }
  html.js .reveal svg :is(path, line, polyline, polygon, circle, rect) { stroke-dashoffset: 0 !important; }
}

/* ---------------------------------------------------------------------
   16. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  /* On mobile/tablet the hero copy comes FIRST and the opening visual sits below
     it at 80% width. */
  .hero__visual { width: 80%; max-width: 480px; margin-inline: auto; order: 0; }
  .about__grid { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .grid--3, .cards.grid--3 { grid-template-columns: repeat(2, 1fr); }
  .reasons { grid-template-columns: repeat(2, 1fr); }
  .ref-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:not(:last-child)::after { display: none; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  /* logo on the far left, language toggle + hamburger grouped on the far right,
     with a little extra breathing room on the right edge */
  .nav { padding: 6px 14px 6px 6px; justify-content: space-between; }
  .nav__brand { margin-right: auto; }
  .nav__logo { min-height: 44px; }
  .nav__logo img, .nav__logo svg { height: 32px; }
  .lang-toggle { min-height: 44px; } /* tap-target on mobile */
  /* support logo stays on the right, directly below the floating nav */
  .support-logo { top: 76px; right: 16px; left: auto; transform: none; }
  .support-logo:hover { transform: translateY(-2px); }
  /* clear the fixed nav + support logo, plus ~30px extra breathing room */
  .hero { padding-top: 170px; }
}
@media (max-width: 380px) {
  .support-logo img { height: 52px; }
}

@media (max-width: 640px) {
  :root { --space-section: 52px; }
  .grid--2, .grid--3, .cards.grid--3, .reasons, .ref-grid,
  .stat-grid, .form__row, .steps { grid-template-columns: 1fr; }
  .hero { padding-top: 170px; }
  .hero__cta .btn { width: 100%; }
  .grant-card { grid-template-columns: 1fr; text-align: left; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .contact__info, .form, .final-cta__panel { padding: var(--space-5); }
  h1 { letter-spacing: -0.01em; }
}

/* Slightly larger tap spacing on coarse pointers */
@media (pointer: coarse) {
  .nav__link { padding: var(--space-3) var(--space-3); }
}

/* =====================================================================
   17. PERGOLA MARKETING PAGE  (reuses the Liquid Glass system)
   Components: hero split, on-brand image placeholders, product rows,
   feature lists, comparison table, use-case grid, FAQ, homepage teaser.
   ===================================================================== */

/* On-brand image placeholder — same frosted media look as the hero frame,
   labelled with the exact PDF page/photo that belongs in each slot. */
.media-ph {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(16,185,129,0.22), transparent 60%),
    radial-gradient(120% 90% at 95% 100%, rgba(46,120,255,0.22), transparent 60%),
    linear-gradient(150deg, #f3faf6, #e7f1f9);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 0 0 1px rgba(13,46,38,0.06);
}
.media-ph__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.media-ph__inner svg { width: 46px; height: 46px; color: var(--color-primary); opacity: 0.85; }
.media-ph__ref {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: 700; color: var(--ink-gold);
  background: var(--color-accent-soft);
  border: 1px dashed rgba(181,133,43,0.5);
  padding: 4px 12px; border-radius: var(--radius-pill);
}
.media-ph--tall { aspect-ratio: 3 / 4; }
.media-ph--wide { aspect-ratio: 16 / 9; }

/* Pergola hero: copy + lifestyle image, same split rhythm as the home hero */
.phero__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-7);
  align-items: center;
}
.phero__copy { max-width: 620px; }
.phero__trust {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5);
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--glass-edge);
  font-size: 0.9rem; color: var(--color-text-muted); font-weight: 600;
}
.phero__trust span { display: inline-flex; align-items: center; gap: var(--space-2); }
.phero__trust svg { width: 18px; height: 18px; color: var(--color-primary); flex: none; }

/* Trust / quality fact tiles (factory credentials) */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.fact { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.fact svg { width: 24px; height: 24px; color: var(--color-primary); flex: none; margin-top: 2px; }
.fact span { font-weight: 600; color: var(--color-text); font-size: 0.96rem; }

/* Product rows — alternating image / copy */
.prod {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-7);
}
.prod + .prod { margin-top: var(--space-6); }
.prod--rev .prod__media { order: 2; }
.prod__tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-weight: 800; letter-spacing: 0.02em;
  font-size: var(--text-sm); color: var(--ink-green);
  background: var(--color-primary-soft); border: 1px solid rgba(14,158,107,0.25);
  padding: 5px 14px; border-radius: var(--radius-pill); margin-bottom: var(--space-3);
}
.prod__body h3 { font-size: clamp(1.5rem, 3vw, 1.95rem); }
.prod__body p { color: var(--color-text-muted); margin-top: var(--space-3); }

/* Check-mark feature lists */
.feat-list { display: grid; gap: var(--space-2); margin: var(--space-5) 0; }
.feat-list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text); font-size: 0.96rem; }
.feat-list li svg { width: 20px; height: 20px; color: var(--color-primary); flex: none; margin-top: 2px; }

/* Benefit pillars (solution mechanism / four-in-one) */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.pillar { padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.pillar__icon {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, var(--color-secondary)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 22px rgba(14,158,107,0.28);
  margin-bottom: var(--space-2);
}
.pillar__icon svg { width: 26px; height: 26px; }
.pillar h3 { font-size: var(--text-lg); }
.pillar p { color: var(--color-text-muted); font-size: 0.95rem; }

/* Problem checklist */
.problem-list { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.problem-list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text); }
.problem-list li svg { width: 22px; height: 22px; color: var(--color-accent); flex: none; margin-top: 2px; }

/* Comparison table */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.cmp-table caption { text-align: left; color: var(--color-text-muted); font-size: var(--text-sm); padding-bottom: var(--space-3); }
.cmp-table th, .cmp-table td { padding: var(--space-4); text-align: left; border-bottom: 1px solid var(--glass-edge); vertical-align: top; }
.cmp-table thead th { background: var(--color-primary-soft); color: var(--color-heading); font-weight: 700; white-space: nowrap; }
.cmp-table tbody th { font-family: var(--font-heading); font-weight: 800; color: var(--ink-green); white-space: nowrap; }
.cmp-table tbody tr:hover { background: rgba(255,255,255,0.45); }

/* Use-case grid */
.usecases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.usecase { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.usecase__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--color-secondary), var(--color-primary));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 18px rgba(31,111,229,0.25); }
.usecase__icon svg { width: 24px; height: 24px; }
.usecase h3 { font-size: var(--text-lg); }
.usecase p { color: var(--color-text-muted); font-size: 0.95rem; }

/* FAQ — accessible native disclosure */
.faq { display: grid; gap: var(--space-4); max-width: 880px; }
.faq__item { padding: 0; overflow: hidden; }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-heading); font-weight: 700; font-size: var(--text-lg); color: var(--color-heading);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .faq__chev { width: 22px; height: 22px; flex: none; color: var(--color-primary); transition: transform 300ms var(--ease-out); }
.faq__item[open] summary .faq__chev { transform: rotate(180deg); }
.faq__item .faq__a { padding: 0 var(--space-6) var(--space-5); color: var(--color-text-muted); }

/* Homepage pergola teaser band */
.teaser__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-7); align-items: center; padding: var(--space-7); }
.teaser__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-5); }
.teaser__chips span {
  font-size: var(--text-sm); font-weight: 600; color: var(--ink-green);
  background: var(--color-primary-soft); border: 1px solid rgba(14,158,107,0.22);
  padding: 5px 12px; border-radius: var(--radius-pill);
}

@media (max-width: 1024px) {
  .phero__grid { grid-template-columns: 1fr; }
  /* Match the homepage: hero copy first, opening visual below it at 80% width */
  .phero__media { width: 80%; max-width: 480px; margin-inline: auto; order: 0; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .usecases { grid-template-columns: repeat(2, 1fr); }
  .teaser__grid { grid-template-columns: 1fr; }
  .teaser__media { order: -1; }
}
@media (max-width: 720px) {
  .prod { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5); }
  .prod--rev .prod__media { order: 0; }
  .prod__media { order: -1; }
  .pillars, .facts, .usecases { grid-template-columns: 1fr; }
  .faq__item summary { padding: var(--space-4) var(--space-5); font-size: var(--text-base); }
  .faq__item .faq__a { padding: 0 var(--space-5) var(--space-5); }
}

/* Real images dropped into the placeholders (see KEPEK_LEIRAS.md). The figure keeps
   its frosted frame + aspect ratio; the image covers it. If a file is missing the
   onerror handler removes the broken <img>, leaving the clean frosted frame. */
.media-ph { padding: 0; }
.media-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.media-ph__inner { padding: var(--space-5); }
/* For labelled infographics / technical drawings: show the whole image (no crop)
   centred on the frame — used with a frame aspect-ratio that matches the file. */
.media-ph--contain img { object-fit: contain; padding: 2px; }

/* Image header for accessory cards */
.card__media {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-md);
  overflow: hidden; margin-bottom: var(--space-2);
  background: linear-gradient(150deg, #f3faf6, #e7f1f9);
  box-shadow: inset 0 0 0 1px rgba(13,46,38,0.06);
}
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__media.is-contain img { object-fit: contain; padding: 4px; }

/* =====================================================================
   18. PERGOLA PAGE SCOPE  (body.pergola-page)
   Smaller gaps between sections; full-width titles and copy; 16px body text.
   ===================================================================== */
/* Smaller gaps between content sections — but NOT the hero, which must keep its
   large top padding to clear the fixed nav + support panel. */
.pergola-page section:not(.hero) { padding-block: clamp(20px, 2.4vw, 32px); }
.pergola-page .section-head { max-width: none; margin-bottom: var(--space-5); }
.pergola-page p { max-width: none; }
.pergola-page .section-head p.lead,
.pergola-page .hero__lead,
.pergola-page .lead,
.pergola-page p,
.pergola-page .prod__body p,
.pergola-page .pillar p,
.pergola-page .usecase p,
.pergola-page .feat-list li,
.pergola-page .problem-list li,
.pergola-page .fact span,
.pergola-page .faq__item .faq__a,
.pergola-page .cmp-table td,
.pergola-page .cmp-table th { font-size: 1rem; }
.pergola-page .hero__lead { max-width: none; }
/* Contact details (phone / e-mail / address), site-wide: each title+value pair
   sits tight together; a clear but small gap separates the three pairs. The
   link keeps a >=40px tap area that extends BELOW the value, so tightening the
   pair never shrinks the touch target. */
.contact__list { gap: var(--space-3); margin-top: var(--space-4); }
.contact__item { align-items: flex-start; }
.contact__item .ci-label { margin-bottom: 1px; }
.contact__item a { padding: 0 0 14px; min-height: 0; }