/* ============================================================
   nm-home.css — a főoldal (.nm) közös utility-jei
   A korábbi nm-redesign.css-ből kiemelve (Fázis 2). A design-tokeneket
   a nm-tokens.css adja; ezt a fájlt CSAK a homepage (layout_index) linkeli.
   ============================================================ */

/* ---------- container ---------- */
.nm-container { width: 100%; max-width: var(--nm-container); margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }

/* ---------- section base ---------- */
.nm-section { padding: clamp(64px, 8vw, 104px) 0; position: relative; }
.nm-section-head { max-width: 760px; }
.nm-section-head.nm-center { margin: 0 auto; text-align: center; }
.nm-section-head h2 { font-size: clamp(28px, 3.6vw, 44px); margin-top: 14px; }
.nm-section-head .nm-lead { margin-top: 16px; }

/* ---------- buttons ---------- */
.nm-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--nm-font-display); font-weight: 600; font-size: 16px;
  padding: 15px 26px; border-radius: 999px; line-height: 1;
  transition: transform .2s var(--nm-ease), box-shadow .25s var(--nm-ease), background .2s, color .2s;
  white-space: nowrap; cursor: pointer; border: 0;
}
.nm-btn svg { width: 18px; height: 18px; }
.nm-btn-primary { background: var(--nm-primary); color: var(--nm-primary-ink); box-shadow: var(--nm-shadow-primary); }
.nm-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -16px rgba(225,85,84,.7); color: #fff; }
.nm-btn-ghost { background: transparent; color: var(--nm-ink); border: 1.5px solid var(--nm-line); }
.nm-btn-ghost:hover { border-color: var(--nm-ink); transform: translateY(-2px); }
.nm-btn-lg { padding: 18px 32px; font-size: 17px; }

/* ---------- eyebrow ---------- */
.nm-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--nm-font-display); font-weight: 600; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--nm-primary);
}
.nm-eyebrow::before { content:""; width: 26px; height: 2px; background: var(--nm-primary); border-radius: 2px; }

/* ---------- text helpers ---------- */
.nm-lead { font-size: 19px; color: var(--nm-ink-soft); }
.nm-hl { color: var(--nm-primary); }
.nm-cta { display:flex; gap: 14px; flex-wrap: wrap; }

/* ---------- cards ---------- */
.nm-cards-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.nm-card { background: var(--nm-surface); border:1px solid var(--nm-line); border-radius: var(--nm-radius); padding: 30px; transition: transform .25s var(--nm-ease), box-shadow .25s var(--nm-ease), border-color .25s; }
.nm-card:hover { transform: translateY(-6px); box-shadow: var(--nm-shadow); border-color: transparent; }
.nm-card-ic { width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--nm-primary) 12%,transparent);color:var(--nm-primary);margin-bottom:20px; }
.nm-card-ic svg { width:27px;height:27px; }
.nm-card h3 { font-size: 21px; }
.nm-card p { font-size: 15.5px; color: var(--nm-ink-soft); margin-top: 10px; }
.nm-card-link { display:inline-flex; gap:7px; align-items:center; margin-top:18px; font-family:var(--nm-font-display); font-weight:600; font-size:15px; color: var(--nm-primary); }
.nm-card-link svg { width:16px; height:16px; transition: transform .2s var(--nm-ease); }
.nm-card:hover .nm-card-link svg { transform: translateX(4px); }

/* ---------- scroll reveal ---------- */
.nm-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--nm-ease), transform .7s var(--nm-ease); margin-bottom:40px; }
.nm-reveal.nm-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .nm-reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .nm-cards-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Homepage — HERO (content_index_hero.php-ből kiszervezve, Fázis 2d)
   ============================================================ */
.nm-hero { position: relative; overflow: hidden; background: var(--nm-bg); }
.nm-hero h1 { font-family: var(--nm-font-display); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; margin: 0; color: var(--nm-ink); }
/* Tokenek + alap tipográfia: nm-tokens.css .nm{} (a hero wrapper mostantól "nm nm-hero").
   A .nm-container / .nm-btn / .nm-eyebrow / .nm-hl közös utility-ket a nm-home.css teteje adja
   — itt már nem duplikáljuk (Fázis 2d, mély de-dup). */

/* ---------- parallax FX ---------- */
.nm-fx { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.nm-fx-layer { position:absolute; will-change: transform; }
.nm-blob { display:block; border-radius:50%; filter: blur(64px); }
.nm-blob.nm-b-red  { width:440px; height:440px; opacity:.5;  background: radial-gradient(circle, color-mix(in srgb,var(--nm-primary) 75%, transparent), transparent 68%); animation: nm-drift1 15s var(--nm-ease) infinite; }
.nm-blob.nm-b-navy { width:400px; height:400px; opacity:.42; background: radial-gradient(circle, color-mix(in srgb,var(--nm-navy) 65%, transparent), transparent 68%); animation: nm-drift2 19s var(--nm-ease) infinite; }
.nm-blob.nm-b-gold { width:280px; height:280px; opacity:.4;  background: radial-gradient(circle, color-mix(in srgb,var(--nm-accent) 70%, transparent), transparent 66%); animation: nm-drift1 17s var(--nm-ease) infinite reverse; }

.nm-fx-grid { position:absolute; inset:-18%; will-change:transform;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--nm-ink) 34%, transparent) 1.2px, transparent 0);
  background-size: 32px 32px; opacity:.14;
  -webkit-mask-image: radial-gradient(125% 100% at 62% 0%, #000 28%, transparent 74%);
  mask-image: radial-gradient(125% 100% at 62% 0%, #000 28%, transparent 74%); }

.nm-net { position:absolute; inset:-6%; width:112%; height:112%; opacity:.42; will-change:transform;
  -webkit-mask-image: linear-gradient(100deg, transparent 6%, #000 34%);
  mask-image: linear-gradient(100deg, transparent 6%, #000 34%); }
.nm-net polyline { fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray: 9 15; }
.nm-net .nm-route-a polyline { stroke: var(--nm-primary); animation: nm-dash 5s linear infinite; }
.nm-net .nm-route-b polyline { stroke: var(--nm-navy); animation: nm-dash 7s linear infinite reverse; }
.nm-net .nm-stn { fill: var(--nm-surface); stroke-width:2.6; }
.nm-net .nm-route-a .nm-stn { stroke: var(--nm-primary); }
.nm-net .nm-route-b .nm-stn { stroke: var(--nm-navy); }

@keyframes nm-dash { to { stroke-dashoffset: -48; } }
@keyframes nm-drift1 { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(26px,-22px) scale(1.06);} }
@keyframes nm-drift2 { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-30px,18px) scale(1.08);} }

/* ---------- hero layout ---------- */
.nm-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center; padding: 72px 0 92px; }
/* a grid-item alapertelmezett min-width:auto-ja miatt a nem toro kod-mock szethuzta az oldalt mobilon */
.nm-grid > * { min-width: 0; }
.nm-hero h1 { font-size: clamp(33px, 4.4vw, 56px); }
.nm-lead { font-size: 19px; color: var(--nm-ink-soft); margin-top: 24px; }
.nm-cta { display:flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

/* clients logos */
.nm-clients { margin-top: 44px; }
.nm-cl-label { font-family: var(--nm-font-display); font-weight: 600; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--nm-ink-soft); margin-bottom: 16px; }
.nm-cl-row { display:flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.nm-cl-chip { background: var(--nm-surface); border: 1px solid var(--nm-line); border-radius: 12px; padding: 11px 18px; font-family: var(--nm-font-display); font-weight: 700; font-size: 15px; color: var(--nm-ink); box-shadow: var(--nm-shadow-sm); white-space: nowrap; }
.nm-cl-chip span { color: var(--nm-primary); }

/* ---------- hero visual: code mock ---------- */
.nm-mock { background: var(--nm-surface); border-radius: var(--nm-radius-lg); box-shadow: var(--nm-shadow); border: 1px solid var(--nm-line); overflow: hidden; }
.nm-mock-bar { display:flex; align-items:center; gap: 8px; padding: 14px 16px; border-bottom:1px solid var(--nm-line); background: var(--nm-surface-2); }
.nm-mock-dot { width:11px; height:11px; border-radius:50%; }
.nm-mock-url { margin-left: 12px; flex:1; background: var(--nm-surface); border:1px solid var(--nm-line); border-radius: 8px; height: 26px; display:flex; align-items:center; padding:0 12px; font-size:12px; color: var(--nm-ink-soft); font-family: var(--nm-font-body); }
.nm-code { font-family: "SFMono-Regular", ui-monospace, Menlo, monospace; font-size: 14px; line-height: 1.85; padding: 22px 24px; background: #06243f; color:#cfe3f5; overflow-x: auto; }
.nm-code .nm-ln { display:block; white-space:pre; }
.nm-code .nm-k { color:#7cc1ff; } .nm-code .nm-s { color:#ffd27a; } .nm-code .nm-c { color:#5e7d9c; } .nm-code .nm-f { color:#9ae6b4; } .nm-code .nm-t { color:#ff9aa6; }

.nm-float { position:absolute; background: var(--nm-surface); border-radius: 16px; box-shadow: var(--nm-shadow); border:1px solid var(--nm-line); padding: 14px 16px; display:flex; gap:12px; align-items:center; }
.nm-fic { width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto; }
.nm-fic svg { width:20px; height:20px; }
.nm-ft { display:block; font-family:var(--nm-font-display); font-weight:700; font-size:15px; line-height:1.1; }
.nm-fd { display:block; font-size:12.5px; color:var(--nm-ink-soft); margin-top:2px; }

@keyframes nm-floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-12px);} }
.nm-floaty { animation: nm-floaty 6s var(--nm-ease) infinite; }
.nm-floaty.nm-d1 { animation-delay: -2s; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .nm-grid { grid-template-columns: 1fr; gap: 36px; padding: 44px 0 56px; text-align:center; }
  .nm-lead { margin-left:auto; margin-right:auto; }
  .nm-cta, .nm-cl-row { justify-content:center; }
}
@media (max-width: 540px){
  .nm-float { display:none; }
  .nm-cl-chip { padding: 10px 14px; font-size: 14px; }
  .nm-code { font-size: 12px; padding: 16px 14px; }
  .nm-mock-url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}
@media (prefers-reduced-motion: reduce){
  .nm-blob, .nm-net polyline, .nm-floaty { animation: none !important; }
}

/* ============================================================
   Homepage — PROBLEMS (content_index_problems.php-ből kiszervezve, Fázis 2d)
   ============================================================ */
.nm-problems { background: var(--nm-bg); }
.nm-problems .nm-cards-3 { margin-top: 54px; }
/* finom stagger a kártyák megjelenésekor */
.nm-problems .nm-card:nth-child(2) { transition-delay: .08s; }
.nm-problems .nm-card:nth-child(3) { transition-delay: .16s; }

.nm-prob-callout {
  margin-top: 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  background: var(--nm-surface-2);
  border: 1px solid var(--nm-line);
  border-radius: var(--nm-radius);
  padding: 28px 32px;
}
.nm-prob-callout p { font-size: 18px; max-width: 62ch; }
.nm-prob-callout strong { font-weight: 700; }
.nm-prob-callout .nm-btn { flex: 0 0 auto; }
/* 320-360px-es kijelzon a nowrap gombszoveg szelesebb a viewportnal (~366px) es szethuzta
   az oldalt — kis kepernyon hadd torjon a szoveg. A flex-shrink+max-width is KELL: a flex-item
   alapmerete a max-content (egysoros) szelesseg, shrink nelkul a white-space:normal onmagaban
   nem tordel. (375px-tol kifer, ott marad az egysoros alak.) */
@media (max-width: 374px) {
  .nm-prob-callout .nm-btn { white-space: normal; line-height: 1.3; flex-shrink: 1; max-width: 100%; }
}

/* ============================================================
   Homepage — SOLUTIONS (content_index_solutions.php-ből kiszervezve, Fázis 2d)
   ============================================================ */
.nm-solutions { background: var(--nm-bg); }
.nm-solutions .nm-cards-3 { margin-top: 54px; }
/* oszloponkénti stagger a soron belül (3-as ritmus) */
.nm-solutions .nm-card:nth-child(3n+2) { transition-delay: .08s; }
.nm-solutions .nm-card:nth-child(3n+3) { transition-delay: .16s; }
.nm-solutions .nm-card { display: flex; flex-direction: column; }
.nm-solutions .nm-card .nm-card-link { margin-top: auto; padding-top: 16px; }

/* ============================================================
   Homepage — WHY (content_index_why.php-ből kiszervezve, Fázis 2d)
   ============================================================ */
.nm-why { background: var(--nm-dark); color: var(--nm-dark-ink); }
.nm-why h2 { color: #fff; }
/* eyebrow aranyban a sötét sávon */
.nm-why .nm-eyebrow { color: var(--nm-accent); }
.nm-why .nm-eyebrow::before { background: var(--nm-accent); }
.nm-why .nm-section-head { max-width: 640px; }

.nm-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 44px; }
.nm-why-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--nm-radius);
  padding: 28px;
  display: flex; gap: 16px; align-items: flex-start;
  transition: transform .3s var(--nm-ease), background .3s;
}
.nm-why-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); }
.nm-why-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--nm-accent) 18%, transparent); color: var(--nm-accent); display: grid; place-items: center; }
.nm-why-ic svg { width: 22px; height: 22px; }
.nm-why-card h3 { color: #fff; font-size: 18px; margin: 0 0 6px; }
.nm-why-card p { color: var(--nm-dark-soft); font-size: 15px; }

@media (max-width: 760px){ .nm-why-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Homepage — CTA (content_index_cta.php-ből kiszervezve, Fázis 2d)
   ============================================================ */
.nm-quote { background: var(--nm-bg); }
.nm-quote-grid { display: grid; grid-template-columns: 1fr .92fr; gap: 54px; align-items: center; }

.nm-quote-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; margin-bottom:120px; }
.nm-quote-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--nm-ink); background: var(--nm-surface); border: 1px solid var(--nm-line); padding: 9px 16px; border-radius: 999px; box-shadow: var(--nm-shadow-sm); }
.nm-quote-chip svg { width: 15px; height: 15px; color: var(--nm-primary); }

/* ---- "adatáramlás" grafika (B): a rendszerek összekötve, animált pontokkal ---- */
.nm-flow { margin-top: 38px; max-width: 470px; padding: 24px 22px 20px; background: var(--nm-surface); border: 1px solid var(--nm-line); border-radius: 18px; box-shadow: var(--nm-shadow-sm); }
.nm-flow-cap { display: flex; align-items: center; gap: 8px; font-family: var(--nm-font-display); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--nm-ink-soft); margin-bottom: 20px; }
.nm-flow-cap b { width: 7px; height: 7px; border-radius: 50%; background: var(--nm-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nm-primary) 20%, transparent); animation: nm-flow-pulse 2.4s var(--nm-ease) infinite; }
.nm-flow-track { position: relative; display: flex; align-items: flex-start; justify-content: space-between; }
.nm-flow-line { position: absolute; left: 23px; right: 23px; top: 23px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #e15554, #F76B1C); opacity: .5; }
.nm-flow-dot { position: absolute; top: 50%; margin-top: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--nm-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nm-primary) 22%, transparent); animation: nm-flow-move 3.2s linear infinite; }
.nm-flow-dot.d2 { animation-delay: 1.07s; }
.nm-flow-dot.d3 { animation-delay: 2.14s; }
.nm-flow-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 11px; flex: 1; min-width: 0; }
.nm-flow-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--nm-surface); border: 1.5px solid var(--nm-line); display: grid; place-items: center; color: var(--nm-primary); }
.nm-flow-ic svg { width: 22px; height: 22px; }
.nm-flow-label { font-family: var(--nm-font-display); font-size: 12px; font-weight: 600; color: var(--nm-ink-soft); }

@keyframes nm-flow-move { 0% { left: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes nm-flow-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .nm-flow-dot, .nm-flow-cap b { animation: none; } .nm-flow-dot { opacity: 0; } }

/* ---- form kártya ---- */
.nm-form-card { background: var(--nm-surface); border: 1px solid var(--nm-line); border-radius: 20px; box-shadow: var(--nm-shadow); padding: 32px; }
.nm-form-card h3 { font-size: 22px; }
.nm-fsub { font-size: 14.5px; color: var(--nm-ink-soft); margin: 6px 0 22px; }
.nm-field { margin-bottom: 15px; }
.nm-field label { display: block; font-family: var(--nm-font-display); font-size: 13px; font-weight: 600; color: var(--nm-ink); margin-bottom: 6px; }
.nm-field input, .nm-field textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--nm-line); border-radius: 10px; font-family: var(--nm-font-body); font-size: 15px; color: var(--nm-ink); background: #fff; transition: border-color .2s; }
.nm-field input:focus, .nm-field textarea:focus { outline: none; border-color: var(--nm-primary); }
.nm-field textarea { resize: none; overflow: hidden; min-height: 108px; max-height: 420px; }
.nm-form-error { background: color-mix(in srgb, var(--nm-primary) 10%, #fff); border: 1px solid color-mix(in srgb, var(--nm-primary) 35%, transparent); color: var(--nm-primary); font-size: 14px; border-radius: 10px; padding: 11px 14px; margin-bottom: 14px; }
.nm-form-card .nm-btn { width: 100%; justify-content: center; margin-top: 6px; margin-bottom:15px; }
.nm-form-card .nm-btn[disabled] { cursor: default; }
.nm-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff; display: inline-block; animation: nm-spin .7s linear infinite; }
@keyframes nm-spin { to { transform: rotate(360deg); } }
.nm-form-privacy { font-size: 12px; color: var(--nm-ink-soft); text-align: center; margin-top: 15px; line-height: 1.5; }
.nm-form-privacy a { color: var(--nm-primary); }
.nm-form-success { text-align: center; padding: 18px 0; }
.nm-form-success h3 { color: var(--nm-primary); font-size: 22px; }
.nm-form-success p { color: var(--nm-ink-soft); margin-top: 8px; }

/* honeypot mező elrejtése */
.nm-quote input[name="csali"] { display: none !important; }

@media (max-width: 860px){ .nm-quote-grid { grid-template-columns: 1fr; gap: 36px; } .nm-flow { max-width: none; } }
@media (max-width: 420px){ .nm-flow-ic { width: 40px; height: 40px; } .nm-flow-label { font-size: 11px; } }
.nm-editor-wrap { border:1px solid #ece6d6; border-radius:12px; overflow:hidden; background:#fff; }
.nm-editor-tb { display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:6px 8px; border-bottom:1px solid #ece6d6; background:#FDFBF4; }
.nm-editor-tb button { display:inline-flex; align-items:center; justify-content:center; min-width:30px; min-height:28px; border:1px solid transparent; background:transparent; border-radius:6px; padding:3px 8px; cursor:pointer; font-size:14px; color:#1c1c1e; line-height:1.25; }
.nm-editor-tb button:hover { background:#f0e9d8; }
.nm-editor-tb button.is-active { background:var(--nm-primary,#e15554); color:#fff; }
.nm-editor-tb button svg { display:block; }
.nm-editor .ProseMirror { min-height:120px; max-height:420px; overflow-y:auto; padding:12px 14px; outline:none; font-size:15px; line-height:1.6; color:#1c1c1e; }
.nm-editor .ProseMirror > * { margin:0 0 8px; }
.nm-editor .ProseMirror > *:last-child { margin-bottom:0; }
.nm-editor .ProseMirror ul, .nm-editor .ProseMirror ol { padding-left:22px; }

/* ============================================================
   Homepage — CLIENTS (content_index_clients.php-ből kiszervezve, Fázis 2d)
   ============================================================ */
.nm-refs { background: var(--nm-surface-2); }
.nm-refs-head { text-align: center; max-width: 820px; margin: 0 auto; }
.nm-refs-head h2 { font-size: clamp(24px, 3vw, 38px); margin-top: 12px; }
.nm-refs-head .nm-lead { margin-top: 14px; font-size: 17px; }
.nm-refs-cta { margin-top: 18px; }
.nm-refs-cta a { color: var(--nm-primary, #e15554); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
.nm-refs-cta a:hover { border-bottom-color: currentColor; }

/* a logók fehér kártyán — tisztán mutatnak a beige sávon */
.nm-refs-card {
  margin-top: 40px;
  background: var(--nm-surface);
  border: 1px solid var(--nm-line);
  border-radius: var(--nm-radius);
  box-shadow: var(--nm-shadow-sm);
  padding: 30px 0;
  overflow: hidden;
}