/* ============================================================
   NutraCentral — nordic walking ismeretterjesztő platform
   Módszertan: SMACSS rétegek + funkcionális segédosztályok
   Egységek: clamp() alapú folyékony méretezés
   ============================================================ */

/* ---------- Eric Meyer's Reset CSS v2.0 ---------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* ---------- Alap (base) ---------- */
:root {
  --bg-primary: #0f0f0f;
  --bg-secondary: #161616;
  --bg-tertiary: #1d1d1d;
  --accent: #ffcd46;
  --accent-hover: #ffd966;
  --accent-dark: #d4a82e;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-muted: #999999;
  --line: rgba(255, 255, 255, 0.08);
  --side-w: clamp(240px, 21vw, 300px);
}

* { box-sizing: border-box; }

body {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3rem); line-height: 1.12; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.4rem); }
p  { line-height: 1.7; }

a { color: var(--accent); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--accent-hover); }

strong, b { font-weight: 700; }
em, i { font-style: italic; }

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

::selection { background: var(--accent); color: #0f0f0f; }

/* ---------- Funkcionális segédosztályok ---------- */
.u-mono   { font-family: 'IBM Plex Mono', monospace; }
.u-center { text-align: center; }
.u-muted  { color: var(--text-muted); }
.u-mt2    { margin-top: clamp(1.5rem, 3vw, 2rem); }
.u-offscreen {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Elrendezés (layout) ---------- */
.l-root  { min-height: 100vh; overflow-x: hidden; }
.l-frame { position: relative; }

.l-shell {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
.l-header { grid-area: header; min-width: 0; }
.l-main   { grid-area: main; min-width: 0; }
.l-footer { grid-area: footer; }

@media (min-width: 768px) {
  .l-shell { margin-right: var(--side-w); }
}

/* ---------- Fejléc ---------- */
.l-header {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--line);
}
.head-outer { padding: 0 clamp(1rem, 3vw, 2rem); }
.head-bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  min-height: clamp(64px, 8vw, 84px);
}
.brand {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 0.8rem);
  color: var(--text-primary);
}
.brand:hover { color: var(--text-primary); }
.brand-mark { width: clamp(38px, 4vw, 46px); height: auto; }
.brand-text {
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  letter-spacing: -0.02em;
}
.brand-hl { color: var(--accent); }
.brand-line {
  display: none;
  font-size: clamp(0.65rem, 0.6rem + 0.2vw, 0.75rem);
  color: var(--text-muted);
  margin-left: auto;
}
@media (min-width: 992px) { .brand-line { display: block; } }

.head-toggle { margin-left: auto; }
@media (min-width: 992px) { .head-toggle { margin-left: clamp(1rem, 2vw, 2rem); } }

/* ---------- Oldalsáv (jobb oldali, rögzített) ---------- */
.l-sidebar { position: static; }
.side-panel { display: none; }

@media (min-width: 768px) {
  .l-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: var(--side-w);
    background: var(--bg-secondary);
    border-left: 1px solid var(--line);
    overflow-y: auto;
    z-index: 900;
  }
  .side-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vh, 2.5rem);
    padding: clamp(1.5rem, 3vh, 2.5rem) clamp(1.1rem, 1.8vw, 1.6rem);
  }
  .side-panel { display: block; }
}

/* A modul asztali nézetben sorba rendezi a listát — itt oszlopba állítjuk vissza */
@media (min-width: 768px) {
  .side-nav .side-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }
}
.side-item { width: 100%; }
.side-link {
  --link-pad: clamp(0.55rem, 1vh, 0.75rem) clamp(0.7rem, 1vw, 0.9rem);
  display: block;
  padding: var(--link-pad);
  color: var(--text-secondary);
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
  letter-spacing: 0.03em;
  border-left: 2px solid transparent;
  border-radius: 0 10px 10px 0;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.side-link:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}
.side-link.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--bg-tertiary);
}

.side-head {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  margin-bottom: 0.6rem;
}
.side-text {
  font-size: clamp(0.8rem, 0.78rem + 0.15vw, 0.9rem);
  color: var(--text-muted);
  margin-bottom: 1.1rem;
}

/* ---------- Szakaszok ---------- */
.l-section {
  --sec-bg: var(--bg-secondary);
  background: var(--sec-bg);
  padding: clamp(3.5rem, 5vw + 2rem, 6rem) clamp(1rem, 4vw, 2rem);
}
.l-section:nth-of-type(odd) { --sec-bg: var(--bg-tertiary); }

section.rounded-step {
  border-radius: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 40px) 0 0;
  margin-top: calc(clamp(24px, 4vw, 40px) * -1);
  position: relative;
}

.wrap {
  width: clamp(300px, 100%, 900px);
  margin-inline: auto;
}
.sec-inner { position: relative; }
.sec-head { margin-bottom: clamp(2rem, 4vw, 2.5rem); }
.sec-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.72rem, 0.7rem + 0.15vw, 0.85rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-dark);
  display: block;
  margin-bottom: 0.8rem;
}
.sec-title { margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.sec-lead {
  color: var(--text-secondary);
  max-width: 46rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

/* ---------- Hős-szakasz: kompakt cím + statisztikasáv ---------- */
.sec-introduction {
  text-align: center;
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.hero-sub {
  color: var(--text-secondary);
  max-width: 42rem;
  margin: clamp(1rem, 2vw, 1.5rem) auto clamp(1.5rem, 3vw, 2rem);
}
.hero-actions {
  display: flex;
  gap: clamp(0.8rem, 2vw, 1.2rem);
  justify-content: center;
  flex-wrap: wrap;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  margin-top: clamp(2rem, 4vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.stat-num {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.5rem);
  color: var(--accent);
  display: block;
}
.stat-label {
  font-size: clamp(0.75rem, 0.72rem + 0.2vw, 0.9rem);
  color: var(--text-muted);
}
@media (max-width: 768px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Gombok ---------- */
.btn {
  --btn-bg: transparent;
  --btn-color: var(--text-primary);
  --btn-pad: clamp(0.85rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--btn-bg);
  color: var(--btn-color);
  border: none;
  border-radius: 16px;
  padding: var(--btn-pad);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.btn-primary {
  --btn-bg: var(--accent);
  --btn-color: #0f0f0f;
  font-weight: 700;
}
.btn-primary:hover {
  --btn-bg: var(--accent-hover);
  color: #0f0f0f;
  transform: translateY(-1px);
}
.btn-ghost {
  --btn-color: var(--accent);
  border: 1px solid var(--accent-dark);
}
.btn-ghost:hover { background: rgba(255, 205, 70, 0.08); color: var(--accent-hover); }
.btn-block { width: 100%; }

/* Betöltésjelző a gombokban (loading-animations) */
.spinner {
  border: 3px solid rgba(15, 15, 15, 0.25);
  border-left-color: #0f0f0f;
  border-radius: 50%;
  width: 1.1em;
  height: 1.1em;
  animation: spin 0.9s linear infinite;
  display: none;
}
.btn-ghost .spinner { border-color: rgba(255, 205, 70, 0.25); border-left-color: var(--accent); }
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading { pointer-events: none; opacity: 0.85; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Kártyák (ikon felül, középre zárt) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 24vw, 260px), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.card {
  --card-bg: var(--bg-primary);
  --card-pad: clamp(1.5rem, 3vw, 2rem) clamp(1.2rem, 2vw, 1.5rem);
  text-align: center;
  padding: var(--card-pad);
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.card-icon {
  width: clamp(48px, 5vw, 56px);
  height: clamp(48px, 5vw, 56px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
  background: rgba(255, 205, 70, 0.12);
  color: var(--accent);
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
}
.card-title { margin-bottom: 0.7rem; }
.card-text {
  font-size: clamp(0.85rem, 0.82rem + 0.2vw, 0.95rem);
  color: var(--text-secondary);
}

/* ---------- Galéria (gallery-grid) + csontváz-betöltés ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 26vw, 250px), 1fr));
  gap: clamp(1rem, 2.5vw, 3rem);
}
.ph {
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-primary);
  border: 1px solid var(--line);
}
.ph-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.ph-cap {
  padding: clamp(0.7rem, 1.5vw, 1rem);
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.72rem, 0.7rem + 0.15vw, 0.82rem);
  color: var(--text-muted);
}
.ph.is-wait .ph-img {
  background: linear-gradient(100deg, #1d1d1d 30%, #262626 50%, #1d1d1d 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer {
  to { background-position: -200% 0; }
}

/* ---------- Címkék (útvonalak, termékek) ---------- */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  justify-content: center;
}
.tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.68rem, 0.65rem + 0.15vw, 0.78rem);
  letter-spacing: 0.05em;
  color: var(--accent);
  background: rgba(255, 205, 70, 0.1);
  border: 1px solid rgba(255, 205, 70, 0.25);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
}

/* ---------- Termékkártyák ---------- */
.price-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  color: var(--accent);
  display: block;
  margin: 0.8rem 0 1rem;
}

/* ---------- Lépéslista (oktatás) ---------- */
.step-list {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  counter-reset: lepes;
}
.step {
  --step-pad: clamp(1.5rem, 3vw, 2rem);
  position: relative;
  background: var(--bg-primary);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--step-pad) var(--step-pad) var(--step-pad) clamp(4.2rem, 8vw, 5.5rem);
}
.step::before {
  counter-increment: lepes;
  content: counter(lepes, decimal-leading-zero);
  position: absolute;
  left: clamp(1.1rem, 2vw, 1.6rem);
  top: var(--step-pad);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  color: var(--accent-dark);
}
.step h3 { margin-bottom: 0.6rem; }
.step p { color: var(--text-secondary); font-size: clamp(0.88rem, 0.85rem + 0.2vw, 0.98rem); }

/* ---------- Csapat ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 24vw, 240px), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.team-card {
  text-align: center;
  background: var(--bg-primary);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 2vw, 1.4rem);
}
.team-photo {
  width: clamp(110px, 14vw, 140px);
  height: clamp(110px, 14vw, 140px);
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.1rem;
  border: 2px solid var(--accent-dark);
}
.team-role {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.72rem, 0.7rem + 0.15vw, 0.82rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin: 0.3rem 0 0.8rem;
}
.team-bio { color: var(--text-secondary); font-size: clamp(0.85rem, 0.82rem + 0.2vw, 0.93rem); }

/* ---------- GYIK — lebegő kártyák ---------- */
.faq-wrap { display: block; }
.faq-item {
  background: var(--bg-primary);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.2rem, 2.5vw, 1.5rem);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
  max-width: clamp(300px, 88%, 760px);
}
.faq-item:nth-child(even) { margin-left: auto; }
.faq-item:nth-child(odd)  { margin-right: auto; }
.faq-q {
  font-weight: 700;
  margin-bottom: 0.6rem;
  color: var(--accent-hover);
}
.faq-a { color: var(--text-secondary); font-size: clamp(0.88rem, 0.85rem + 0.2vw, 0.98rem); }

/* ---------- CTA sáv ---------- */
.cta-band {
  text-align: center;
  border: 1px solid rgba(255, 205, 70, 0.3);
  border-radius: 20px;
  background: linear-gradient(140deg, #1d1d1d 0%, #17150e 100%);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.2rem, 3vw, 2.5rem);
}
.cta-band h2 { margin-bottom: 0.8rem; }
.cta-band p { color: var(--text-secondary); margin-bottom: 1.6rem; }

/* ---------- Űrlapok ---------- */
.form-group { margin-bottom: clamp(0.9rem, 1.8vh, 1.2rem); }
.form-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.72rem, 0.7rem + 0.15vw, 0.8rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.form-input, .form-area {
  --field-bg: var(--bg-primary);
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.9rem, 0.87rem + 0.2vw, 1rem);
  padding: clamp(0.6rem, 1.2vh, 0.8rem) clamp(0.7rem, 1vw, 0.9rem);
  transition: border-color 0.2s ease;
}
.form-input:focus, .form-area:focus {
  outline: none;
  border-color: var(--accent-dark);
}
.form-area { min-height: 140px; resize: vertical; }
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  color: var(--text-muted);
  margin: 1rem 0 1.2rem;
  cursor: pointer;
}
.form-check input { margin-top: 0.3em; accent-color: var(--accent); }
.note-ok {
  border: 1px solid rgba(120, 220, 130, 0.4);
  background: rgba(120, 220, 130, 0.08);
  color: #9fe3a6;
  border-radius: 10px;
  padding: clamp(0.8rem, 1.5vw, 1rem) clamp(1rem, 2vw, 1.3rem);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  font-size: clamp(0.85rem, 0.82rem + 0.2vw, 0.95rem);
}

/* ---------- Oldalcím-blokk ---------- */
.page-head {
  text-align: center;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
/* A page-head kevés alsó paddinggal rendelkezik, ezért a rá következő
   rounded-step negatív margója ráúszna a bevezető szövegre — itt kikapcsoljuk
   az átfedést (a kártya-hatás a szakaszok között máshol megmarad). */
.page-head + .rounded-step { margin-top: 0; }
.page-lead {
  color: var(--text-secondary);
  max-width: 44rem;
  margin: clamp(1rem, 2vw, 1.4rem) auto 0;
}

/* ---------- Jogi dokumentumok ---------- */
.doc { max-width: 760px; margin-inline: auto; }
.doc h2 {
  font-size: clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);
  margin: clamp(2rem, 4vw, 2.5rem) 0 0.8rem;
}
.doc p { color: var(--text-secondary); margin-bottom: 1.1rem; }
.doc ul { margin: 0 0 1.1rem 1.2rem; }
.doc li { color: var(--text-secondary); list-style: disc; margin-bottom: 0.4rem; }
.doc-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  color: var(--text-muted);
}

/* ---------- Apró megjegyzés (ismeretterjesztő jelleg) ---------- */
.mini-note {
  text-align: center;
  font-size: clamp(0.72rem, 0.7rem + 0.15vw, 0.8rem);
  color: var(--text-muted);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 4vw, 2rem);
  background: var(--bg-primary);
}
.mini-note a { color: var(--text-muted); text-decoration: underline; }
.mini-note a:hover { color: var(--text-secondary); }

/* ---------- Lábléc: oszlopok + jogi sáv ---------- */
.l-footer {
  background: #0a0a0a;
  color: var(--text-secondary);
  border-top: 1px solid var(--line);
}
.foot-outer { padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem) 0; }
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 20vw, 220px), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: 1100px;
  margin-inline: auto;
}
.foot-brand {
  font-weight: 700;
  font-size: clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}
.foot-tag {
  font-size: clamp(0.72rem, 0.7rem + 0.15vw, 0.8rem);
  letter-spacing: 0.12em;
  color: var(--accent-dark);
  margin-bottom: 0.9rem;
}
.foot-note { font-size: clamp(0.8rem, 0.78rem + 0.15vw, 0.88rem); color: var(--text-muted); }
.foot-head {
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  color: var(--text-primary);
  margin-bottom: 1rem;
}
.foot-list li { margin-bottom: 0.55rem; font-size: clamp(0.82rem, 0.8rem + 0.15vw, 0.9rem); }
.foot-list a { color: var(--text-secondary); }
.foot-list a:hover { color: var(--accent); }
.foot-list--plain li { color: var(--text-muted); }
.foot-line {
  text-align: center;
  font-size: clamp(0.72rem, 0.7rem + 0.15vw, 0.8rem);
  color: var(--text-muted);
  margin-top: clamp(2rem, 4vw, 2.5rem);
  padding-bottom: 1rem;
}
.legal-bar {
  border-top: 1px solid #1f1f1f;
  padding: 1rem;
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.25rem);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: clamp(0.72rem, 0.7rem + 0.15vw, 0.8rem);
}
.legal-bar a { color: var(--text-muted); }
.legal-bar a:hover { color: var(--accent); }
.legal-copy { color: #666; }

/* ---------- Szakasz-módosítók (corporate-professional nevek) ---------- */
.sec-solutions        { --sec-bg: var(--bg-tertiary); }
.sec-visual-portfolio { --sec-bg: var(--bg-secondary); }
.sec-product-line     { --sec-bg: var(--bg-tertiary); }
.sec-inquiries        { --sec-bg: var(--bg-secondary); }
.sec-common-inquiries { --sec-bg: var(--bg-tertiary); }

/* ---------- Űrlap-konténerek és apró elemek ---------- */
.form { display: block; }
.side-form { margin-top: 0.4rem; }
.stat { text-align: center; }
.btn-label { display: inline-block; }

/* ---------- Mobil: vízszintes lapozás a kártyasorokon (swipe-sections) ---------- */
@media (max-width: 768px) {
  .snap-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 0.8rem;
    -webkit-overflow-scrolling: touch;
  }
  .snap-row > * {
    min-width: 82vw;
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

/* ============================================================
   Cookie-hozzájárulás — v1.0_20260710_b43be816
   Az oldal sötét-arany témájához igazítva. Trackerek nélkül.
   ============================================================ */
.cc-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background: #161616;
  border-top: 1px solid rgba(255, 205, 70, 0.35);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
  transform: translateY(110%);
  transition: transform 0.35s ease;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}
.cc-banner.cc-visible { transform: translateY(0); }
.cc-inner { max-width: 1000px; margin-inline: auto; }
.cc-title { font-weight: 700; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); margin-bottom: 0.5rem; }
.cc-desc { font-size: clamp(0.8rem, 0.78rem + 0.15vw, 0.9rem); color: var(--text-secondary); margin-bottom: 1rem; }
.cc-desc a { color: var(--accent); text-decoration: underline; }
.cc-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.cc-btn {
  border-radius: 16px;
  border: 1px solid var(--accent-dark);
  background: transparent;
  color: var(--accent);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(0.82rem, 0.8rem + 0.15vw, 0.9rem);
  padding: 0.65rem 1.3rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.cc-btn:hover { background: rgba(255, 205, 70, 0.1); }
.cc-btn--accept, .cc-btn--reject {
  background: var(--accent);
  border-color: var(--accent);
  color: #0f0f0f;
  font-weight: 700;
}
.cc-btn--accept:hover, .cc-btn--reject:hover { background: var(--accent-hover); }
.cc-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.cc-modal.cc-visible { display: flex; }
.cc-modal-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); }
.cc-modal-box {
  position: relative;
  background: #1a1a1a;
  border: 1px solid var(--line);
  border-radius: 14px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: clamp(1.2rem, 3vw, 1.8rem);
}
.cc-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.cc-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
}
.cc-close:hover { color: var(--text-primary); }
.cc-cat {
  border-top: 1px solid var(--line);
  padding: 0.9rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}
.cc-cat h3 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.cc-cat p { font-size: 0.8rem; color: var(--text-muted); }
.cc-cat input { accent-color: var(--accent); width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; }
.cc-modal-foot { margin-top: 1.2rem; text-align: right; }
.cc-footer-link { cursor: pointer; }

/* ============================================================
   Mobilmenü modul (slide-top) — funkcionális CSS, ne módosítsd
   ============================================================ */
[data-mm-header]{--mm-bg:#ffffff;--mm-text:#333333;--mm-primary:#2563eb;--mm-overlay-bg:rgba(0,0,0,0.5);--mm-transition:0.3s ease}[data-mm-header]{position:relative}[data-mm-toggle]{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:1001}[data-mm-toggle] span{display:block;width:24px;height:2px;background:var(--mm-text);transition:var(--mm-transition)}[data-mm-menu]{position:fixed;top:0;left:0;width:100%;background:var(--mm-bg);transform:translateY(-100%);transition:transform var(--mm-transition);z-index:1100;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;padding:60px 24px 24px;box-shadow:0 4px 20px rgba(0,0,0,0.1)}[data-mm-menu].mm-open{transform:translateY(0)}[data-mm-menu] ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}[data-mm-menu] ul li a{display:block;padding:14px 0;color:var(--mm-text);text-decoration:none;font-size:16px;border-bottom:1px solid rgba(0,0,0,0.08);transition:color var(--mm-transition)}[data-mm-menu] ul li a:hover{color:var(--mm-primary)}[data-mm-close]{position:absolute;top:16px;right:16px;background:none;border:none;font-size:28px;line-height:1;cursor:pointer;color:var(--mm-text);padding:4px 8px}[data-mm-overlay]{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--mm-overlay-bg);opacity:0;visibility:hidden;transition:opacity var(--mm-transition),visibility var(--mm-transition);z-index:1050}[data-mm-overlay].mm-visible{opacity:1;visibility:visible}@media(min-width:768px){[data-mm-toggle]{display:none!important}[data-mm-menu]{position:static!important;width:auto!important;height:auto!important;background:transparent!important;transform:none!important;padding:0!important;overflow:visible!important;flex-direction:row!important;box-shadow:none!important}[data-mm-menu] ul{flex-direction:row;gap:0;align-items:center}[data-mm-menu] ul li a{padding:8px 16px;border-bottom:none;font-size:inherit}[data-mm-close]{display:none!important}[data-mm-overlay]{display:none!important}}@media(prefers-reduced-motion:reduce){[data-mm-menu],[data-mm-overlay],[data-mm-toggle] span{transition:none!important}}

/* A menü színei az oldal palettájához igazítva.
   FONTOS: a [data-mm-menu] (oldalsáv) a fejlécen KÍVÜL van, ezért a
   változókat :root szinten adjuk meg, hogy a menü és az overlay is örökölje
   őket — különben a lecsúszó mobilmenü háttere átlátszó marad. */
:root {
  --mm-bg: #161616;
  --mm-text: #cccccc;
  --mm-primary: #ffcd46;
  --mm-overlay-bg: rgba(0, 0, 0, 0.7);
}
[data-mm-header] {
  --mm-bg: #161616;
  --mm-text: #cccccc;
  --mm-primary: #ffcd46;
  --mm-overlay-bg: rgba(0, 0, 0, 0.7);
}
[data-mm-menu] ul li a { border-bottom-color: rgba(255, 255, 255, 0.08); }
@media (min-width: 768px) {
  /* Az oldalsáv linkjeinek saját megjelenése erősebb szelektorral */
  .side-nav .side-list .side-link {
    padding: var(--link-pad);
    font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
    border-bottom: none;
  }
  .side-nav .side-list .side-link.is-active { color: var(--accent); }
}

/* ---------- Csökkentett mozgás ---------- */
@media (prefers-reduced-motion: reduce) {
  .spinner, .ph.is-wait .ph-img { animation: none; }
  .cc-banner, .btn, .side-link { transition: none; }
}