/* ==========================================================================
   DRONES360 Germany — saját réteg a Bootstrap 5.3 fölött
   --------------------------------------------------------------------------
   Az ELRENDEZÉST a Bootstrap adja (container, row/col, d-flex, utility-k).
   Ez a fájl csak a DESIGN-t és a saját komponenseket tartalmazza.
   A bootstrap.min.css UTÁN töltődik be.

   1 Tokenek            5 Hero
   2 Alapok, container  6 Saját komponensek
   3 Gombok             7 Regisztráció (CSS-only váltó)
   4 Fejléc, navigáció  8 GYIK (details) · 9 Lábléc
   ========================================================================== */

/* 1 — Design tokenek ====================================================== */

:root {
  --background:        oklch(98.5% .006 220);
  --foreground:        oklch(21% .045 250);
  --card:              oklch(100% 0 0);
  --muted:             oklch(95.5% .008 230);
  --muted-foreground:  oklch(50% .03 250);
  --border:            oklch(90% .014 240);

  --primary:            oklch(34% .11 255);
  --primary-foreground: oklch(98.5% .005 240);
  --secondary:          oklch(95% .03 205);
  --secondary-foreground: oklch(32% .08 245);
  --accent:             oklch(70% .13 195);
  --accent-foreground:  oklch(20% .05 250);
  --eco:                oklch(72% .17 145);
  --eco-foreground:     oklch(19% .05 150);
  --signal:             oklch(72% .18 55);
  --signal-foreground:  oklch(20% .05 60);
  --destructive:        oklch(57.7% .245 27.325);

  --deep:             oklch(22% .06 258);
  --deep-foreground:  oklch(97% .01 220);
  --deep-muted:       oklch(75% .03 220);

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Barlow", ui-sans-serif, system-ui, sans-serif;

  --gradient-hero:   linear-gradient(115deg, oklch(22% .06 258) 0%, oklch(28% .09 245) 55%, oklch(36% .09 210) 100%);
  --gradient-accent: linear-gradient(90deg, oklch(70% .13 195), oklch(72% .17 145));
  --shadow-card: 0 1px 2px oklch(22% .06 258/.06), 0 12px 32px -12px oklch(22% .06 258/.18);
  --shadow-lift: 0 2px 4px oklch(22% .06 258/.08), 0 24px 48px -18px oklch(22% .06 258/.3);

  /* A Bootstrap átállítása a projekt színeire és betűire */
  --bs-body-bg:            var(--background);
  --bs-body-color:         var(--foreground);
  --bs-body-font-family:   var(--font-body);
  --bs-border-color:       var(--border);
  --bs-border-radius:      .5rem;
  --bs-link-color:         inherit;
  --bs-link-hover-color:   inherit;
  --bs-emphasis-color:     var(--foreground);
}

/* 2 — Alapok és container ================================================= */

/* A ragadós fejléc ne takarja ki a horgonyra ugrott szekció tetejét */
html { scroll-padding-top: 5.5rem; }

body { font-family: var(--font-body); line-height: 1.6; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; text-wrap: balance; }

/* A terv 72rem-mel dolgozik a Bootstrap 1320px-e helyett */
@media (min-width: 1200px) { .container { max-width: 72rem; } }
@media (min-width: 1400px) { .container { max-width: 72rem; } }

a { color: inherit; }
a:hover { color: inherit; }

/* height:auto nélkül a HTML width/height attribútuma kényszeríti ki a kép
   pixelmagasságát — a Bootstrap ezt csak az .img-fluid-nál állítja be. */
img { max-width: 100%; height: auto; }

.icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-lg { width: 1.25rem; height: 1.25rem; }
.icon-sm { width: .875rem; height: .875rem; }

.skip-link {
  position: absolute; left: .5rem; top: -3rem; z-index: 1100;
  background: var(--accent); color: var(--accent-foreground);
  padding: .625rem 1rem; border-radius: .5rem; font-weight: 600; text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: .5rem; color: var(--accent-foreground); }

/* Szekciók ---------------------------------------------------------------- */

.section-sm { padding-block: 2rem; }
.section    { padding-block: 3rem; }
.section-lg { padding-block: 4rem; }
@media (min-width: 992px) {
  .section-sm { padding-block: 2.5rem; }
  .section    { padding-block: 4rem; }
  .section-lg { padding-block: 6rem; }
}

.section-card { background: var(--card); }
.section-deep { background-image: var(--gradient-hero); color: var(--deep-foreground); }

.eyebrow {
  font-family: var(--font-display);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in oklch, var(--accent-foreground) 70%, transparent);
}
.section-deep .eyebrow { color: var(--accent); }

.section-title { font-size: 1.875rem; font-weight: 700; }
@media (min-width: 576px) { .section-title { font-size: 2.25rem; } }
@media (min-width: 992px) { .section-title { font-size: 2.7rem; line-height: 1.1; } }

.section-title-sm { font-size: 1.5rem; font-weight: 700; }
@media (min-width: 576px) { .section-title-sm { font-size: 1.875rem; } }

.section-lead { color: var(--muted-foreground); line-height: 1.65; }
@media (min-width: 576px) { .section-lead { font-size: 1.125rem; } }
.section-deep .section-lead { color: var(--deep-muted); }
.section-lead .strong { font-weight: 600; color: var(--foreground); }
.section-deep .section-lead .strong { color: var(--deep-foreground); }

.text-gradient {
  background-image: var(--gradient-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.muted { color: var(--muted-foreground); }
.section-deep .muted { color: var(--deep-muted); }
.link-underline { text-decoration: underline; font-weight: 600; }

/* 3 — Gombok ============================================================== */
/* A Bootstrap .btn alapja marad, csak a variánsok a sajátjaink.             */

.btn { font-weight: 600; --bs-btn-border-radius: .5rem; }

.btn-accent {
  --bs-btn-color: var(--accent-foreground);
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--accent-foreground);
  --bs-btn-hover-bg: color-mix(in oklch, var(--accent) 90%, black);
  --bs-btn-hover-border-color: color-mix(in oklch, var(--accent) 90%, black);
  --bs-btn-active-bg: color-mix(in oklch, var(--accent) 85%, black);
  --bs-btn-active-color: var(--accent-foreground);
  box-shadow: var(--shadow-card);
}

.btn-eco {
  --bs-btn-color: var(--eco-foreground);
  --bs-btn-bg: var(--eco);
  --bs-btn-border-color: var(--eco);
  --bs-btn-hover-color: var(--eco-foreground);
  --bs-btn-hover-bg: color-mix(in oklch, var(--eco) 90%, black);
  --bs-btn-hover-border-color: color-mix(in oklch, var(--eco) 90%, black);
  --bs-btn-active-bg: color-mix(in oklch, var(--eco) 85%, black);
  --bs-btn-active-color: var(--eco-foreground);
  box-shadow: var(--shadow-card);
}

.btn-brand {
  --bs-btn-color: var(--primary-foreground);
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--primary-foreground);
  --bs-btn-hover-bg: color-mix(in oklch, var(--primary) 90%, white);
  --bs-btn-hover-border-color: color-mix(in oklch, var(--primary) 90%, white);
  --bs-btn-active-color: var(--primary-foreground);
  box-shadow: var(--shadow-card);
}

.btn-line {
  --bs-btn-color: var(--foreground);
  --bs-btn-bg: var(--background);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--foreground);
  --bs-btn-hover-bg: var(--secondary);
  --bs-btn-hover-border-color: var(--border);
}

.btn-deep {
  --bs-btn-color: var(--deep-foreground);
  --bs-btn-bg: color-mix(in oklch, var(--deep-foreground) 10%, transparent);
  --bs-btn-border-color: color-mix(in oklch, var(--deep-foreground) 30%, transparent);
  --bs-btn-hover-color: var(--deep-foreground);
  --bs-btn-hover-bg: color-mix(in oklch, var(--deep-foreground) 20%, transparent);
  --bs-btn-hover-border-color: color-mix(in oklch, var(--deep-foreground) 30%, transparent);
}

/* A terv nagy CTA-mérete (3,25rem magas) */
.btn-xl {
  --bs-btn-padding-y: .75rem;
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: .75rem;
  min-height: 3.25rem;
}

/* 4 — Fejléc és navigáció ================================================= */
/* Standard Bootstrap navbar (navbar-expand-lg + collapse).
   Itt csak a terv színei és térközei.                                      */

.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: color-mix(in oklch, var(--background) 90%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
  backdrop-filter: blur(12px);
}

.brand-mark {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: .75rem; background: var(--primary); color: var(--primary-foreground);
  flex: none;
}
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
@media (min-width: 576px) { .brand-name { font-size: 1.125rem; } }
.brand-tag  { font-size: .6875rem; color: var(--muted-foreground); }
@media (min-width: 576px) { .brand-tag { font-size: .75rem; } }
.brand-accent { color: var(--accent); }

/* A navbar változóinak átállítása a projektre */
.navbar {
  --bs-navbar-color: var(--muted-foreground);
  --bs-navbar-hover-color: var(--foreground);
  --bs-navbar-active-color: var(--foreground);
  --bs-navbar-padding-y: 0;
  --bs-navbar-brand-padding-y: 0;
}
.navbar .nav-link {
  padding: .5rem .75rem; border-radius: .375rem;
  font-size: .875rem; font-weight: 500;
  transition: background-color .2s, color .2s;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus { background: var(--muted); }

.navbar-toggler {
  border-color: var(--border); padding: .5rem .625rem;
  color: var(--foreground);
}
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem color-mix(in oklch, var(--accent) 25%, transparent); }

/* A lenyitott menü kap egy kis levegőt és elválasztó vonalat */
@media (max-width: 991.98px) {
  .navbar-collapse {
    margin-top: .75rem; padding-top: .75rem;
    border-top: 1px solid var(--border);
  }
  .navbar .nav-link { padding: .625rem .75rem; }
}

/* 5 — Hero ================================================================ */

.hero-title {
  font-size: 2.25rem; font-weight: 700; line-height: 1.05;
  /* A hosszú szavak (pl. "Drohnentechnologie") egyben maradnak —
     címsorban nincs elválasztás. */
  overflow-wrap: normal;
  hyphens: none;
}
@media (min-width: 576px) { .hero-title { font-size: 3rem; } }
@media (min-width: 992px) { .hero-title { font-size: 3.25rem; } }

.hero-lead { font-size: 1.125rem; font-weight: 600; line-height: 1.5; color: var(--deep-foreground); max-width: 36rem; }
@media (min-width: 576px) { .hero-lead { font-size: 1.25rem; } }

.hero-meta { font-size: .875rem; color: var(--deep-muted); }
.hero-meta a { color: var(--accent); font-weight: 600; }

.hero-media { position: relative; }
.hero-media img {
  width: 100%; border-radius: 1rem; object-fit: cover;
  border: 1px solid color-mix(in oklch, var(--deep-foreground) 15%, transparent);
  box-shadow: var(--shadow-lift);
}

/* A két útvonal-kártya: Trainer (accent) és Lernende (eco) —
   ugyanaz a színkód, mint a hozzájuk tartozó gomboknál. */
.path-teaser {
  --teaser-color: var(--accent);
  display: flex; flex-direction: column; height: 100%;
  border-radius: 1rem; padding: 1.5rem;
  border: 1px solid color-mix(in oklch, var(--teaser-color) 45%, transparent);
  background: color-mix(in oklch, var(--teaser-color) 8%, transparent);
}
.path-teaser-eco { --teaser-color: var(--eco); }
.path-teaser-label {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: .8125rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--teaser-color);
}
.path-teaser-title { font-size: 1.5rem; font-weight: 700; color: var(--deep-foreground); }
@media (min-width: 576px) { .path-teaser-title { font-size: 1.75rem; } }
.path-teaser-facts li { display: flex; align-items: center; gap: .625rem; color: var(--deep-muted); }
.path-teaser-facts li + li { margin-top: .375rem; }
.path-teaser-facts .icon { color: var(--teaser-color); }
.path-teaser-facts .is-free { color: var(--deep-foreground); font-weight: 600; }
.path-teaser-note { font-size: .8125rem; line-height: 1.45; color: var(--deep-muted); }

/* 6 — Saját komponensek =================================================== */

.tag {
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--background); padding: .375rem .75rem;
  font-size: .75rem; font-weight: 500; color: var(--muted-foreground);
}
.tag-deep {
  border-color: color-mix(in oklch, var(--deep-foreground) 25%, transparent);
  background: color-mix(in oklch, var(--deep-foreground) 8%, transparent);
  color: var(--deep-foreground); font-size: .8125rem;
}

.card-icon {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: .5rem; background: var(--secondary); color: var(--secondary-foreground);
}

/* Tréner-üzenet: „Flexibel. Kostenfrei. Praxisnah.” + három alátámasztó mondat */
.claim { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
@media (min-width: 576px) { .claim { font-size: 1.75rem; } }

.benefit-list li { display: flex; align-items: flex-start; gap: .75rem; line-height: 1.5; color: var(--deep-muted); }
.benefit-list li + li { margin-top: .75rem; }
.benefit-list strong { color: var(--deep-foreground); }
.benefit-icon {
  display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem;
  border-radius: .5rem; background: color-mix(in oklch, var(--accent) 20%, transparent); color: var(--accent);
}

/* Tréner-tények: időszak + a program két építőköve (önálló tanulás / élő alkalmak) */
.fact-line {
  display: flex; align-items: center; gap: .625rem;
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 700;
}
.fact-line .icon { color: var(--accent); }

.format-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
@media (min-width: 576px) { .format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.format-item {
  border-radius: .75rem; padding: 1rem;
  border: 1px solid color-mix(in oklch, var(--deep-foreground) 15%, transparent);
  background: color-mix(in oklch, var(--deep-foreground) 6%, transparent);
}
.format-title { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.format-title span { color: var(--accent); }
.format-item p { font-size: .8125rem; line-height: 1.5; color: var(--deep-muted); }

/* „Das erwartet Sie / dich” kártya: kép + pipás lista */
.expect-card {
  border: 1px solid var(--border); border-radius: 1rem; overflow: hidden;
  background: var(--card); box-shadow: var(--shadow-card);
}
.expect-card-deep {
  border-color: color-mix(in oklch, var(--deep-foreground) 15%, transparent);
  background: color-mix(in oklch, var(--deep-foreground) 6%, transparent);
  box-shadow: none;
}
.expect-img { display: block; width: 100%; height: 10rem; object-fit: cover; }
@media (min-width: 992px) { .expect-img { height: 12rem; } }
.expect-body { padding: 1.25rem 1.5rem 1.5rem; }
.expect-title { font-size: 1.125rem; font-weight: 700; }

.check-list li { display: flex; align-items: flex-start; gap: .625rem; padding-block: .3125rem; line-height: 1.5; }
.check-list .check {
  display: grid; place-items: center; flex: none; width: 1.375rem; height: 1.375rem; margin-top: .0625rem;
  border-radius: 999px; background: color-mix(in oklch, var(--eco) 18%, transparent); color: var(--eco-foreground);
}
.check-list .check .icon { width: .8125rem; height: .8125rem; stroke-width: 3; }
.section-deep .check-list .check { background: color-mix(in oklch, var(--accent) 20%, transparent); color: var(--accent); }

/* Workshop-időpontok: egyetlen kompakt lista a korábbi öt kártya helyett */
.schedule {
  border: 1px solid var(--border); border-radius: 1rem; overflow: hidden;
  background: var(--card); box-shadow: var(--shadow-card);
}
.schedule-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1rem; padding: .875rem 1.25rem;
}
.schedule-row + .schedule-row { border-top: 1px solid var(--border); }
.schedule-date { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; }
.schedule-day {
  padding: .125rem .5rem; border-radius: .375rem;
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--secondary); color: var(--secondary-foreground);
}
.schedule-slots { display: flex; flex-direction: column; gap: .375rem; }
.slot-pill {
  border-radius: 999px; padding: .25rem .75rem; white-space: nowrap; font-size: .8125rem;
  border: 1px solid color-mix(in oklch, var(--eco) 40%, transparent);
  background: color-mix(in oklch, var(--eco) 12%, transparent);
}
.slot-pill strong { font-family: var(--font-display); }
.slot-pill span { color: var(--muted-foreground); }

.contact-link { color: var(--accent); font-weight: 600; }

.partners {
  border: 1px solid var(--border); border-radius: 1rem;
  background: var(--card); padding: 2rem 1.5rem;
}
.partners img { height: 3rem; width: auto; max-width: 140px; object-fit: contain; }
.partners-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center; gap: 1.5rem; padding: 1.5rem;
}
@media (min-width: 576px) { .partners-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.partners-grid li { display: flex; justify-content: center; }
/* A logófájlok négyzetesek, sok üres térrel — ezért kell a nagyobb magasság */
.partners-grid img { height: 4.25rem; max-width: 100%; }

/* 7 — Regisztráció ======================================================== */

.form-panel {
  border: 1px solid var(--border); border-radius: 1rem;
  background: var(--background); padding: 1.5rem;
}
@media (min-width: 576px) { .form-panel { padding: 2rem; } }

.form-card {
  border-radius: 1rem; padding: 1.5rem; background: var(--card); color: var(--foreground);
  border: 1px solid color-mix(in oklch, var(--deep-foreground) 15%, transparent);
}

.form-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.form-title-sm { font-size: 1.125rem; }

/* TRAINER / TEILNEHMER választókártyák: <label> a rejtett rádiógombokhoz */
.path-card {
  display: block; height: 100%;
  border: 2px solid var(--border); border-radius: 1rem;
  background: var(--card); padding: 1rem 1.125rem; cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color .2s, background-color .2s, transform .25s, box-shadow .25s;
}
.path-card:hover { border-color: color-mix(in oklch, var(--accent) 50%, transparent); transform: translateY(-2px); }
.path-card .card-icon { background: var(--primary); color: var(--primary-foreground); }
.path-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: .04em; }
.path-text  { font-size: .8125rem; line-height: 1.4; color: var(--muted-foreground); }

.path-input:checked + .path-card {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 10%, transparent);
}
.path-input:focus-visible + .path-card { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Maga a váltó: tiszta CSS, semmi JavaScript ------------------------- */
/* A bejelölt rádiógomb dönti el, melyik mezőcsoport, cím és gombfelirat
   látszik, és melyik tűnik el.                                             */

.only-trainer, .only-participant { display: none; }

#registration:has(#path-trainer:checked) .only-trainer         { display: revert; }
#registration:has(#path-participant:checked) .only-participant { display: revert; }

#registration:has(#path-trainer:checked)     #participant-fields { display: none; }
#registration:has(#path-participant:checked) #trainer-fields     { display: none; }

/* A küldés gomb színe a választással együtt vált */
#registration:has(#path-trainer:checked) #registration-submit {
  --bs-btn-color: var(--accent-foreground);
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: color-mix(in oklch, var(--accent) 90%, black);
  --bs-btn-hover-border-color: color-mix(in oklch, var(--accent) 90%, black);
  --bs-btn-hover-color: var(--accent-foreground);
}

/* Űrlapmezők -------------------------------------------------------------- */

.form-label { font-size: .875rem; font-weight: 500; margin-bottom: .375rem; }
.form-control, .form-select { font-size: .875rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem color-mix(in oklch, var(--accent) 25%, transparent);
}
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem color-mix(in oklch, var(--accent) 25%, transparent);
}
.form-check-label { font-size: .875rem; }
.form-check-label a { font-weight: 500; text-decoration: underline; }

.req { color: var(--destructive); }
.field-hint  { font-size: .75rem; color: var(--muted-foreground); }
.field-error { font-size: .75rem; font-weight: 500; color: var(--destructive); margin-top: .25rem; }
.has-error .form-control,
.has-error .form-select { border-color: var(--destructive); }
.form-status { font-size: .875rem; font-weight: 500; color: var(--destructive); }

.form-success .icon { width: 3rem; height: 3rem; color: var(--eco); }
.form-success h3 { font-size: 1.5rem; font-weight: 700; }
.form-success p  { font-size: .875rem; color: var(--muted-foreground); }

/* Intézményi űrlap: csak a két gomb valamelyikére kattintva nyílik le.
   JavaScript nélkül a :target nyitja ki, JavaScripttel az .is-open. */
.inst-panel:not(:target):not(.is-open) { display: none; }

/* 8 — FAQ: natív <details>, semmi JavaScript ============================== */

.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { text-decoration: underline; }
.faq-item summary .icon { color: var(--muted-foreground); transition: transform .2s; }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.faq-answer { padding-bottom: 1rem; font-size: .875rem; line-height: 1.65; color: var(--muted-foreground); }
.faq-answer a { color: var(--foreground); font-weight: 600; text-decoration: underline; }

.faq-group-title {
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground);
  margin-bottom: .25rem;
}

/* 9 — Lábléc ============================================================== */

.site-footer {
  background-image: var(--gradient-hero); color: var(--deep-foreground);
  border-top: 1px solid color-mix(in oklch, var(--deep-foreground) 10%, transparent);
}
.site-footer .brand-mark { width: 2.75rem; height: 2.75rem; background: var(--accent); color: var(--accent-foreground); }
.footer-brand-name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
.footer-claim { font-size: .875rem; font-weight: 600; }
.footer-meta  { font-size: .875rem; color: var(--deep-muted); }
.footer-meta a { color: var(--accent); font-weight: 600; }

.footer-badge {
  padding: .625rem 1rem; border-radius: .5rem;
  border: 1px solid color-mix(in oklch, var(--deep-foreground) 25%, transparent);
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}

.footer-heading { font-family: var(--font-display); font-size: .875rem; font-weight: 700;
                  letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.footer-links { font-size: .875rem; color: var(--deep-muted); }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--deep-foreground); }

.footer-disclaimer {
  border: 1px solid color-mix(in oklch, var(--deep-foreground) 15%, transparent);
  background: color-mix(in oklch, var(--deep-foreground) 6%, transparent);
  border-radius: .75rem; padding: 1.25rem;
  font-size: .75rem; line-height: 1.65; color: var(--deep-muted);
}
.footer-copyright { font-size: .75rem; color: var(--deep-muted); }


/* 10 — Mobil korrekciók ================================================== */

@media (max-width: 991.98px) {
  .navbar-brand { white-space: normal; min-width: 0; }
}

@media (max-width: 359.98px) {
  .hero-title { font-size: 1.75rem; }
  .section-title { font-size: 1.5rem; }
}