<style id="elementor-post-3575">.elementor-3575 .elementor-element.elementor-element-c6a3668{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3575 .elementor-element.elementor-element-1e6abf2.elementor-element{--flex-grow:0;--flex-shrink:0;}@media(max-width:1440px){.elementor-3575 .elementor-element.elementor-element-1e6abf2{width:var( --container-widget-width, 1008.33px );max-width:1008.33px;--container-widget-width:1008.33px;--container-widget-flex-grow:0;}}</style>{"id":3575,"date":"2023-11-27T12:21:47","date_gmt":"2023-11-27T12:21:47","guid":{"rendered":"https:\/\/sophie.mauvestudio.co\/?page_id=6"},"modified":"2026-11-01T19:59:01","modified_gmt":"2026-11-01T18:59:01","slug":"homepage","status":"publish","type":"page","link":"https:\/\/nuancecreative.hu\/en\/","title":{"rendered":"Homepage"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3575\" class=\"elementor elementor-3575\">\n\t\t\t\t<div data-animation-type=\"block\" class=\"elementor-element elementor-element-c6a3668 e-con-full e-flex e-con e-parent\" data-id=\"c6a3668\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;none&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c8728dc elementor-widget elementor-widget-html\" data-id=\"c8728dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mauve_hidepaged&quot;:&quot;false&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Montserrat:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<div class=\"particle-system-wrapper\">\r\n  <style>\r\n    .particle-system-wrapper {\r\n      --paper: #000000;\r\n      --paper-2: #18181b;\r\n      --ink: #f8f6f0;\r\n      --gold-accent: #e59d5c;\r\n      --dim: #7a7a80;\r\n\r\n      position: relative;\r\n      width: 100%;\r\n      height: 100vh;\r\n      min-height: 550px;\r\n      overflow: hidden;\r\n      background: var(--paper);\r\n      font-family: 'Montserrat', sans-serif;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .particle-system-wrapper * { box-sizing: border-box; }\r\n\r\n    .particle-system-wrapper #ps-stage {\r\n      position: absolute;\r\n      inset: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n\r\n    .particle-system-wrapper canvas {\r\n      display: block;\r\n      touch-action: none;\r\n      width: 100% !important;\r\n      height: 100% !important;\r\n    }\r\n\r\n    .particle-system-wrapper .veil {\r\n      position: absolute;\r\n      inset: 0;\r\n      pointer-events: none;\r\n      background:\r\n        radial-gradient(80% 60% at 50% 30%, rgba(229, 157, 92, 0.08), transparent 70%),\r\n        radial-gradient(100% 80% at 50% 90%, rgba(0, 0, 0, 0.8), transparent 85%);\r\n      z-index: 2;\r\n    }\r\n\r\n    .particle-system-wrapper header {\r\n      position: absolute;\r\n      top: 0; left: 0; right: 0;\r\n      z-index: 5;\r\n      display: flex;\r\n      align-items: flex-start;\r\n      justify-content: flex-end;\r\n      padding: 20px 20px 0;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .particle-system-wrapper .progress-dots {\r\n      display: none;\r\n    }\r\n\r\n    .particle-system-wrapper .caption {\r\n      position: absolute;\r\n      left: 20px;\r\n      right: 20px;\r\n      bottom: 175px;\r\n      z-index: 5;\r\n      max-width: 100%;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .particle-system-wrapper .caption .idx {\r\n      font-size: 9px;\r\n      letter-spacing: 0.18em;\r\n      text-transform: uppercase;\r\n      color: var(--gold-accent);\r\n      font-weight: 600;\r\n      margin-bottom: 4px;\r\n      display: block;\r\n      transition: opacity .3s ease;\r\n    }\r\n\r\n    .particle-system-wrapper .caption h1 {\r\n      font-family: 'Fraunces', serif;\r\n      font-weight: 500;\r\n      font-size: clamp(21px, 6vw, 40px);\r\n      line-height: 1.1;\r\n      letter-spacing: -0.01em;\r\n      margin: 0 0 6px;\r\n      color: var(--ink);\r\n      transition: opacity .3s ease;\r\n    }\r\n\r\n    .particle-system-wrapper .caption p {\r\n      margin: 0;\r\n      font-size: 12px;\r\n      line-height: 1.45;\r\n      color: #a1a1aa;\r\n      transition: opacity .3s ease;\r\n    }\r\n\r\n    .particle-system-wrapper .cta-block {\r\n      display: block;\r\n      position: absolute;\r\n      left: 20px;\r\n      right: 20px;\r\n      bottom: 15px;\r\n      z-index: 5;\r\n      max-width: 100%;\r\n      text-align: left;\r\n      pointer-events: auto;\r\n    }\r\n    .particle-system-wrapper .cta-eyebrow { display: block; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-accent); font-weight: 600; margin-bottom: 4px; }\r\n    .particle-system-wrapper .cta-desc { margin: 0 0 8px; font-size: 11px; line-height: 1.4; color: #a1a1aa; }\r\n    .particle-system-wrapper .cta-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 7px; border: 1px solid var(--gold-accent); background: rgba(229, 157, 92, 0.05); color: var(--ink); font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; }\r\n\r\n    .particle-system-wrapper .segmented {\r\n      position: absolute;\r\n      left: 20px;\r\n      right: 20px;\r\n      bottom: 115px;\r\n      transform: none;\r\n      z-index: 5;\r\n      display: flex;\r\n      gap: 3px;\r\n      background: rgba(24, 24, 27, 0.85);\r\n      border: 1px solid rgba(255, 255, 255, 0.1);\r\n      border-radius: 999px;\r\n      padding: 4px;\r\n      backdrop-filter: blur(8px);\r\n      -webkit-backdrop-filter: blur(8px);\r\n      max-width: 100%;\r\n      overflow-x: auto;\r\n      justify-content: space-between;\r\n    }\r\n\r\n    .particle-system-wrapper .seg {\r\n      appearance: none;\r\n      border: none;\r\n      cursor: pointer;\r\n      font-family: 'Montserrat', sans-serif;\r\n      font-size: 15px;\r\n      font-weight: 600;\r\n      letter-spacing: 0.04em;\r\n      color: var(--dim);\r\n      background: transparent;\r\n      padding: 6px 8px;\r\n      border-radius: 999px;\r\n      transition: color .3s ease, background .3s ease;\r\n      white-space: nowrap;\r\n      flex: 1;\r\n      text-align: center;\r\n    }\r\n\r\n    .particle-system-wrapper .seg.active {\r\n      color: #ffffff;\r\n      background: var(--gold-accent);\r\n      box-shadow: 0 0 10px rgba(229, 157, 92, 0.4);\r\n    }\r\n\r\n    .particle-system-wrapper .loading {\r\n      position: absolute;\r\n      inset: 0;\r\n      z-index: 10;\r\n      background: var(--paper);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-family: 'Montserrat', sans-serif;\r\n      font-size: 11px;\r\n      letter-spacing: 0.18em;\r\n      color: var(--dim);\r\n      text-transform: uppercase;\r\n      transition: opacity .6s ease;\r\n    }\r\n\r\n    @media (min-width: 768px) {\r\n      .particle-system-wrapper header { padding: 34px 42px 0; }\r\n      .particle-system-wrapper .progress-dots { display: flex; gap: 7px; align-items: center; pointer-events: auto; cursor: pointer; }\r\n      .particle-system-wrapper .progress-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--dim); transition: background .35s ease, border-color .35s ease, transform .35s ease; }\r\n      .particle-system-wrapper .progress-dots span.active { background: var(--gold-accent); border-color: var(--gold-accent); transform: scale(1.3); box-shadow: 0 0 10px rgba(229, 157, 92, 0.6); }\r\n\r\n      .particle-system-wrapper .caption { left: 42px; right: auto; bottom: 70px; max-width: 420px; }\r\n      .particle-system-wrapper .caption .idx { font-size: 10px; margin-bottom: 10px; }\r\n      .particle-system-wrapper .caption h1 { font-size: clamp(28px, 4.4vw, 48px); margin: 0 0 10px; }\r\n      .particle-system-wrapper .caption p { font-size: 13px; max-width: 340px; }\r\n\r\n      .particle-system-wrapper .cta-block {\r\n        display: block;\r\n        position: absolute;\r\n        left: auto;\r\n        right: 42px;\r\n        bottom: 44px;\r\n        z-index: 5;\r\n        max-width: 280px;\r\n        text-align: left;\r\n        pointer-events: auto;\r\n      }\r\n      .particle-system-wrapper .cta-eyebrow { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-accent); font-weight: 600; margin-bottom: 10px; }\r\n      .particle-system-wrapper .cta-desc { margin: 0 0 16px; font-size: 12px; line-height: 1.6; color: #a1a1aa; }\r\n      .particle-system-wrapper .cta-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 7px; border: 1px solid var(--gold-accent); background: rgba(229, 157, 92, 0.05); color: var(--ink); font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; }\r\n\r\n      .particle-system-wrapper .segmented { left: 50%; right: auto; bottom: 34px; transform: translateX(-50%); padding: 5px; gap: 2px; max-width: 94vw; }\r\n      .particle-system-wrapper .seg { padding: 10px 16px; font-size: 11px; flex: unset; }\r\n    }\r\n\r\n    @supports (height: 100dvh) {\r\n      .particle-system-wrapper { height: 100dvh; }\r\n    }\r\n\r\n    \/* ===== Nagyobb, olvashat\u00f3bb bet\u0171m\u00e9retek (fel\u00fcl\u00edrj\u00e1k a fentieket) ===== *\/\r\n\r\n    \/* Mobil *\/\r\n    .particle-system-wrapper .caption { bottom: 220px; }\r\n    .particle-system-wrapper .caption .idx { font-size: 12px; margin-bottom: 6px; }\r\n    .particle-system-wrapper .caption h1 { font-size: clamp(26px, 7.5vw, 40px); margin: 0 0 8px; }\r\n    .particle-system-wrapper .caption p { font-size: 15px; line-height: 1.5; }\r\n\r\n    .particle-system-wrapper .segmented { bottom: 160px; }\r\n    .particle-system-wrapper .seg { font-size: 13px; padding: 9px 6px; }\r\n\r\n    .particle-system-wrapper .cta-block { bottom: 16px; }\r\n    .particle-system-wrapper .cta-eyebrow { font-size: 11px; margin-bottom: 6px; }\r\n    .particle-system-wrapper .cta-desc { font-size: 13px; line-height: 1.45; margin: 0 0 10px; }\r\n    .particle-system-wrapper .cta-btn { font-size: 12px; padding: 10px 16px; }\r\n\r\n    .particle-system-wrapper .loading { font-size: 13px; }\r\n\r\n    \/* Tablet \u00e9s Desktop *\/\r\n    @media (min-width: 768px) {\r\n      .particle-system-wrapper .caption { max-width: 500px; bottom: 70px; }\r\n      .particle-system-wrapper .caption .idx { font-size: 13px; margin-bottom: 12px; }\r\n      .particle-system-wrapper .caption h1 { font-size: clamp(34px, 4.8vw, 58px); margin: 0 0 14px; }\r\n      .particle-system-wrapper .caption p { font-size: 17px; line-height: 1.6; max-width: 440px; }\r\n\r\n      .particle-system-wrapper .cta-block { max-width: 340px; bottom: 44px; }\r\n      .particle-system-wrapper .cta-eyebrow { font-size: 13px; margin-bottom: 12px; }\r\n      .particle-system-wrapper .cta-desc { font-size: 15px; line-height: 1.6; margin: 0 0 18px; }\r\n      .particle-system-wrapper .cta-btn { font-size: 13px; padding: 13px 22px; }\r\n\r\n      .particle-system-wrapper .segmented { bottom: 34px; }\r\n      .particle-system-wrapper .seg { font-size: 13px; padding: 11px 20px; }\r\n    }\r\n\r\n    \/* ===== MOBIL ELRENDEZ\u00c9S: a r\u00e9szecskehalmaz fel\u00fcl, a sz\u00f6veg alatta (csak 767 px alatt, az asztali n\u00e9zet nem v\u00e1ltozik) ===== *\/\r\n    @media (max-width: 767px) {\r\n      .particle-system-wrapper {\r\n        display: flex;\r\n        flex-direction: column;\r\n        height: auto;\r\n        min-height: 100vh;\r\n        min-height: 100dvh;\r\n      }\r\n\r\n      \/* a r\u00e9szecske-sz\u00ednpad saj\u00e1t, fix magass\u00e1g\u00fa s\u00e1vot kap a lap tetej\u00e9n *\/\r\n      .particle-system-wrapper #ps-stage {\r\n        position: relative;\r\n        inset: auto;\r\n        flex: none;\r\n        width: 100%;\r\n        height: clamp(250px, 38vh, 350px);\r\n        margin-top: 56px;\r\n      }\r\n      \/* v\u00edzszintes h\u00faz\u00e1s forgat, a f\u00fcgg\u0151leges ujjmozdulat viszont g\u00f6rgeti az oldalt *\/\r\n      .particle-system-wrapper canvas { touch-action: pan-y; }\r\n\r\n      \/* a sz\u00f6veges blokkok a norm\u00e1l elrendez\u00e9sben, egym\u00e1s alatt *\/\r\n      .particle-system-wrapper .caption,\r\n      .particle-system-wrapper .segmented,\r\n      .particle-system-wrapper .cta-block {\r\n        position: relative;\r\n        left: auto;\r\n        right: auto;\r\n        bottom: auto;\r\n        transform: none;\r\n        margin-left: 20px;\r\n        margin-right: 20px;\r\n        max-width: none;\r\n      }\r\n      .particle-system-wrapper .caption { margin-top: 18px; min-height: 240px; }\r\n      .particle-system-wrapper .segmented { margin-top: 14px; flex: none; }\r\n      .particle-system-wrapper .cta-block { margin-top: 24px; margin-bottom: 28px; }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"loading\" id=\"ps-loading\">Loading<\/div>\r\n  <div id=\"ps-stage\"><\/div>\r\n  <div class=\"veil\"><\/div>\r\n\r\n  <header>\r\n    <div class=\"progress-dots\" id=\"ps-dots\">\r\n      <span class=\"active\" data-i=\"0\"><\/span>\r\n      <span data-i=\"1\"><\/span>\r\n      <span data-i=\"2\"><\/span>\r\n      <span data-i=\"3\"><\/span>\r\n    <\/div>\r\n  <\/header>\r\n\r\n  <div class=\"caption\">\r\n    <span class=\"idx\" id=\"ps-capIdx\">01 \u2014 K\u00c1OSZ<\/span>\r\n    <h1 id=\"ps-capTitle\">Van egy j\u00f3 v\u00e1llalkoz\u00e1sod. De a m\u00e1rk\u00e1d is ezt mutatja?<\/h1>\r\n    <p id=\"ps-capBody\">Lehet, hogy m\u00e1r van log\u00f3d, weboldalad, Instagram-oldalad \u00e9s t\u00f6bb sz\u00e1z \u00f6tleted. M\u00e9gis valahogy nem \u00e1ll \u00f6ssze a k\u00e9p. Nem tudod pontosan megfogalmazni, mi hi\u00e1nyzik, csak \u00e9rzed, hogy enn\u00e9l t\u00f6bb is lehetne benne..<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"segmented\" id=\"ps-segmented\">\r\n    <button class=\"seg active\" data-i=\"0\">K\u00e1osz<\/button>\r\n    <button class=\"seg\" data-i=\"1\">Gondolkod\u00e1s<\/button>\r\n    <button class=\"seg\" data-i=\"2\">Mag<\/button>\r\n    <button class=\"seg\" data-i=\"3\">Rendszer<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"cta-block\" id=\"ps-cta\">\r\n    <span class=\"cta-eyebrow\">A sz\u00e9p m\u00e9g nem strat\u00e9gia.<\/span>\r\n    <p class=\"cta-desc\">A m\u00e1rk\u00e1d t\u00f6bb, mint amit l\u00e1tnak bel\u0151le. A strat\u00e9gia, a kommunik\u00e1ci\u00f3 \u00e9s a vizu\u00e1lis megjelen\u00e9s akkor m\u0171k\u00f6dik igaz\u00e1n, ha minden ugyanazt az ir\u00e1nyt er\u0151s\u00edti.<\/p>\r\n    <button class=\"cta-btn\" type=\"button\">BESZ\u00c9LJ\u00dcNK R\u00d3LA \u2192<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n<script>\r\n(function() {\r\n  function createRng(seed) {\r\n    let s = seed >>> 0;\r\n    return () => {\r\n      s ^= s << 13;\r\n      s ^= s >>> 17;\r\n      s ^= s << 5;\r\n      return ((s >>> 0) % 1000000) \/ 1000000;\r\n    };\r\n  }\r\n\r\n  const TAU = Math.PI * 2;\r\n\r\n  \/\/ G\u00f6mb: v\u00e9kony h\u00e9j, a p\u00f3lusokn\u00e1l s\u0171r\u0171bb (a csatolt k\u00e9p alapj\u00e1n)\r\n  function spherePositions(count, scale) {\r\n    const rng = createRng(9137);\r\n    const out = new Float32Array(count * 3);\r\n    const baseRadius = 3.6 * scale;\r\n\r\n    for (let i = 0; i < count; i++) {\r\n      const azimuth = rng() * TAU;\r\n      const u = rng();\r\n      \/\/ egyenletes fel\u00fcleti \u00e9s sz\u00f6g szerinti mintav\u00e9tel kever\u00e9ke -> s\u0171r\u0171bb p\u00f3lusok\r\n      const polar = Math.acos(2 * u - 1) * 0.45 + (1 - u) * Math.PI * 0.55;\r\n      const r = baseRadius * (0.95 + Math.pow(rng(), 2.2) * 0.05);\r\n\r\n      out[i * 3]     = r * Math.sin(polar) * Math.cos(azimuth);\r\n      out[i * 3 + 1] = r * Math.cos(polar);\r\n      out[i * 3 + 2] = r * Math.sin(polar) * Math.sin(azimuth);\r\n    }\r\n    return out;\r\n  }\r\n\r\n  function brainPositions(count, scale) {\r\n    const rng = createRng(7703);\r\n    const out = new Float32Array(count * 3);\r\n    const rank = new Float32Array(count);\r\n    const S = scale * 1.0;\r\n\r\n    const RX = 3.0, RY = 2.4, RZ = 2.0;\r\n    const HEMI_GAP = 0.2;\r\n\r\n    function foldNoise(nx, ny, nz) {\r\n      return (\r\n        Math.sin(nx * 9 + ny * 7) * 0.035 +\r\n        Math.sin(ny * 11 - nz * 8) * 0.025 +\r\n        Math.sin(nz * 13 + nx * 10 - ny * 6) * 0.018 +\r\n        Math.sin((nx + ny + nz) * 15) * 0.012\r\n      );\r\n    }\r\n\r\n    for (let i = 0; i < count; i++) {\r\n      const mode = rng();\r\n      let x = 0, y = 0, z = 0, importance = 0.3;\r\n\r\n      if (mode < 0.80) {\r\n        const side = rng() < 0.5 ? -1 : 1;\r\n        const phi = rng() * TAU;\r\n        const costheta = 2 * rng() - 1;\r\n        const theta = Math.acos(costheta);\r\n\r\n        let nx = Math.sin(theta) * Math.cos(phi);\r\n        const ny = Math.cos(theta);\r\n        const nz = Math.sin(theta) * Math.sin(phi);\r\n        nx = side * Math.abs(nx);\r\n\r\n        const shell = rng() < 0.82;\r\n        const rho = shell ? 0.96 + Math.pow(rng(), 0.6) * 0.04 : 0.22 + Math.pow(rng(), 0.7) * 0.62;\r\n        const fold = foldNoise(nx * 3, ny * 3, nz * 3);\r\n        const r = rho * (1 + (shell ? fold : fold * 0.25));\r\n\r\n        x = (nx * RX + side * HEMI_GAP) * r * S;\r\n        y = (ny * RY * r + 0.2) * S;\r\n        z = (nz * RZ) * r * S;\r\n\r\n        const fissure = Math.exp(-Math.pow(x \/ (0.55 * S), 2)) * Math.max(0, y \/ (RY * S));\r\n        y -= fissure * 0.55 * S;\r\n        x += side * fissure * 0.18 * S;\r\n\r\n        importance = shell ? 0.72 + rng() * 0.28 : 0.1 + rng() * 0.15;\r\n      } else if (mode < 0.90) {\r\n        const a = rng() * TAU;\r\n        const b = Math.acos(2 * rng() - 1);\r\n        const shell = rng() < 0.88;\r\n        const rho = shell ? 0.92 + rng() * 0.08 : 0.3 + Math.pow(rng(), 0.7) * 0.55;\r\n        const folia = (Math.sin(a * 20) + Math.sin(b * 16)) * 0.025;\r\n        const r = rho * (1 + (shell ? folia : folia * 0.2));\r\n\r\n        x = Math.sin(b) * Math.cos(a) * 1.25 * r * S;\r\n        y = (-1.6 + Math.cos(b) * 0.95 * r) * S;\r\n        z = (-0.95 + Math.sin(b) * Math.sin(a) * 1.05 * r) * S;\r\n        importance = shell ? 0.7 + rng() * 0.3 : 0.15;\r\n      } else {\r\n        const t = rng();\r\n        const rad = (0.2 + (1 - t) * 0.22) * Math.sqrt(rng()) * S;\r\n        const ang = rng() * TAU;\r\n        x = Math.cos(ang) * rad;\r\n        y = (-1.4 - t * 2.0) * S;\r\n        z = Math.sin(ang) * rad - 0.3 * S;\r\n        importance = 0.55 + rng() * 0.25;\r\n      }\r\n\r\n      out[i * 3] = x;\r\n      out[i * 3 + 1] = y;\r\n      out[i * 3 + 2] = z;\r\n      rank[i] = importance;\r\n    }\r\n    return { positions: out, rank };\r\n  }\r\n\r\n  function dnaPositions(count, scale) {\r\n    const rng = createRng(4421);\r\n    const out = new Float32Array(count * 3);\r\n    const turns = 5.8;\r\n    const halfHeight = 4.6 * scale;\r\n    const radius = 1.45 * scale;\r\n\r\n    for (let i = 0; i < count; i++) {\r\n      let t = i \/ count + (rng() - 0.5) * 0.012;\r\n      t = Math.min(1, Math.max(0, t));\r\n      const y = -halfHeight + t * halfHeight * 2;\r\n      const angle = t * turns * TAU;\r\n      const mode = rng();\r\n      let x, z;\r\n\r\n      if (mode < 0.36) {\r\n        const r = radius * (0.95 + rng() * 0.1);\r\n        x = Math.cos(angle) * r;\r\n        z = Math.sin(angle) * r;\r\n      } else if (mode < 0.72) {\r\n        const r = radius * (0.95 + rng() * 0.1);\r\n        x = Math.cos(angle + Math.PI) * r;\r\n        z = Math.sin(angle + Math.PI) * r;\r\n      } else {\r\n        const u = rng();\r\n        const ax = Math.cos(angle) * radius, az = Math.sin(angle) * radius;\r\n        const bx = Math.cos(angle + Math.PI) * radius, bz = Math.sin(angle + Math.PI) * radius;\r\n        x = ax + (bx - ax) * u;\r\n        z = az + (bz - az) * u;\r\n      }\r\n\r\n      out[i * 3] = x + (rng() - 0.5) * 0.05 * scale;\r\n      out[i * 3 + 1] = y;\r\n      out[i * 3 + 2] = z + (rng() - 0.5) * 0.05 * scale;\r\n    }\r\n    return out;\r\n  }\r\n\r\n  function pointOnFrame(rng, width, depth, y) {\r\n    const side = Math.floor(rng() * 4);\r\n    if (side === 0) return [-width \/ 2 + rng() * width, y, -depth \/ 2];\r\n    if (side === 1) return [-width \/ 2 + rng() * width, y, depth \/ 2];\r\n    if (side === 2) return [-width \/ 2, y, -depth \/ 2 + rng() * depth];\r\n    return [width \/ 2, y, -depth \/ 2 + rng() * depth];\r\n  }\r\n\r\n  function structurePositions(count, scale) {\r\n    const rng = createRng(1553);\r\n    const out = new Float32Array(count * 3);\r\n    const levels = [\r\n      { y: -3.2, w: 8.5, d: 5.8 },\r\n      { y: -1.1, w: 9.5, d: 4.4 },\r\n      { y: 1.0, w: 7.2, d: 6.4 },\r\n      { y: 3.1, w: 5.4, d: 3.8 },\r\n    ];\r\n\r\n    for (let i = 0; i < count; i++) {\r\n      const mode = rng();\r\n      let x = 0, y = 0, z = 0;\r\n\r\n      if (mode < 0.5) {\r\n        const level = levels[Math.floor(rng() * levels.length)];\r\n        [x, y, z] = pointOnFrame(rng, level.w, level.d, level.y);\r\n        if (rng() < 0.46) {\r\n          const pull = rng() * 0.82;\r\n          x *= 1 - pull;\r\n          z *= 1 - pull;\r\n        }\r\n      } else if (mode < 0.72) {\r\n        y = -4.0 + rng() * 8;\r\n        const taper = 1 - ((y + 4.0) \/ 8) * 0.38;\r\n        const corner = Math.floor(rng() * 4);\r\n        x = (corner % 2 === 0 ? -1 : 1) * 3.2 * taper;\r\n        z = (corner < 2 ? -1 : 1) * 2.0 * taper;\r\n      } else {\r\n        y = -4.2 + Math.round(rng() * 16) * (8.4 \/ 16);\r\n        const edge = Math.floor(rng() * 4);\r\n        const u = (rng() - 0.5) * 2.0;\r\n        x = edge < 2 ? u : (edge === 2 ? -1.0 : 1.0);\r\n        z = edge < 2 ? (edge === 0 ? -1.0 : 1.0) : u;\r\n      }\r\n\r\n      const jitter = 0.025 * scale;\r\n      out[i * 3] = x * scale + (rng() - 0.5) * jitter;\r\n      out[i * 3 + 1] = y * scale + (rng() - 0.5) * jitter;\r\n      out[i * 3 + 2] = z * scale + (rng() - 0.5) * jitter;\r\n    }\r\n    return out;\r\n  }\r\n\r\n  function buildTargets(count, scale = 1) {\r\n    const sphere = spherePositions(count, scale);\r\n    const { positions: brain, rank } = brainPositions(count, scale);\r\n    const dna = dnaPositions(count, scale);\r\n    const structure = structurePositions(count, scale);\r\n    return { targets: [sphere, brain, dna, structure], rank };\r\n  }\r\n\r\n  const wrapper = document.querySelector('.particle-system-wrapper');\r\n  const stage = wrapper.querySelector('#ps-stage');\r\n\r\n  let width = stage.clientWidth || window.innerWidth;\r\n  let height = stage.clientHeight || window.innerHeight;\r\n\r\n  const isMobile = width < 768;\r\n  const COUNT = isMobile ? 10000 : 40000;\r\n  const SCALE = 0.95;\r\n  const { targets, rank } = buildTargets(COUNT, SCALE);\r\n  const STATE_COUNT = targets.length;\r\n\r\n  const scene = new THREE.Scene();\r\n  const camera = new THREE.PerspectiveCamera(40, width \/ height, 0.1, 200);\r\n\r\n  const zDist = isMobile ? 19.5 : 16;\r\n  const cameraTargets = [\r\n    { x: 0,   y: 0,     z: zDist },\r\n    { x: 0,   y: 0.2,   z: zDist - 2.5 },\r\n    { x: 1.2, y: 0.4,   z: zDist - 1 },\r\n    { x: 0,   y: -0.4,  z: zDist + 2 },\r\n  ];\r\n  camera.position.set(cameraTargets[0].x, cameraTargets[0].y, cameraTargets[0].z);\r\n\r\n  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, powerPreference: \"high-performance\" });\r\n  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\n  renderer.setSize(width, height);\r\n  stage.appendChild(renderer.domElement);\r\n\r\n  \/\/ Kisebb, \u00e9lesebb pont\r\n  function makeDotTexture() {\r\n    const c = document.createElement('canvas');\r\n    c.width = c.height = 64;\r\n    const ctx = c.getContext('2d');\r\n    const g = ctx.createRadialGradient(32, 32, 0, 32, 32, 32);\r\n    g.addColorStop(0, 'rgba(255,255,255,1.0)');\r\n    g.addColorStop(0.55, 'rgba(255,255,255,0.95)');\r\n    g.addColorStop(0.8, 'rgba(255,225,190,0.25)');\r\n    g.addColorStop(1, 'rgba(0,0,0,0)');\r\n    ctx.fillStyle = g;\r\n    ctx.fillRect(0, 0, 64, 64);\r\n    return new THREE.CanvasTexture(c);\r\n  }\r\n\r\n  const geometry = new THREE.BufferGeometry();\r\n  const base = new Float32Array(targets[0]);\r\n  const current = new Float32Array(targets[0]);\r\n  geometry.setAttribute('position', new THREE.BufferAttribute(current, 3));\r\n\r\n  const baseColors = new Float32Array(COUNT * 3);\r\n  const colors = new Float32Array(COUNT * 3);\r\n  const sphereDim = new Float32Array(COUNT);\r\n\r\n  function smoothstep(t) {\r\n    return t * t * (3 - 2 * t);\r\n  }\r\n  \/\/ alul feh\u00e9r, fel\u00fcl narancs, arany szikr\u00e1kkal\r\n  const gradientStops = [\r\n    { p: 0.0,  c: new THREE.Color(0xffffff) },\r\n    { p: 0.42, c: new THREE.Color(0xdfe3ea) },\r\n    { p: 0.60, c: new THREE.Color(0xe8862c) },\r\n    { p: 0.85, c: new THREE.Color(0xf5a14a) },\r\n    { p: 1.0,  c: new THREE.Color(0xf7b27a) },\r\n  ];\r\n  function sampleGradient(t) {\r\n    t = Math.max(0, Math.min(1, t));\r\n    for (let i = 0; i < gradientStops.length - 1; i++) {\r\n      const a = gradientStops[i], b = gradientStops[i + 1];\r\n      if (t <= b.p) {\r\n        const localT = (t - a.p) \/ (b.p - a.p);\r\n        return a.c.clone().lerp(b.c, smoothstep(localT));\r\n      }\r\n    }\r\n    return gradientStops[gradientStops.length - 1].c.clone();\r\n  }\r\n\r\n  for (let i = 0; i < COUNT; i++) {\r\n    const y = targets[0][i * 3 + 1];\r\n    const normY = Math.max(0, Math.min(1, (y + 3.8) \/ 7.6));\r\n    const col = sampleGradient(normY);\r\n\r\n    \/\/ s\u00f6t\u00e9tebb egyenl\u00edt\u0151, f\u00e9nyesebb p\u00f3lusok (csak a g\u00f6mb \u00e1llapotban)\r\n    sphereDim[i] = 0.3 + 0.7 * Math.pow(Math.abs(2 * normY - 1), 0.8);\r\n\r\n    baseColors[i * 3] = col.r;\r\n    baseColors[i * 3 + 1] = col.g;\r\n    baseColors[i * 3 + 2] = col.b;\r\n\r\n    colors[i * 3] = col.r;\r\n    colors[i * 3 + 1] = col.g;\r\n    colors[i * 3 + 2] = col.b;\r\n  }\r\n  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));\r\n\r\n  const material = new THREE.PointsMaterial({\r\n    size: isMobile ? 0.07 : 0.045,\r\n    map: makeDotTexture(),\r\n    transparent: true,\r\n    vertexColors: true,\r\n    depthWrite: false,\r\n    blending: THREE.AdditiveBlending,\r\n    opacity: 1.0,\r\n  });\r\n\r\n  const points = new THREE.Points(geometry, material);\r\n  scene.add(points);\r\n\r\n  const wobRng = createRng(3301);\r\n  const freqX = new Float32Array(COUNT), freqY = new Float32Array(COUNT), freqZ = new Float32Array(COUNT);\r\n  const phaseX = new Float32Array(COUNT), phaseY = new Float32Array(COUNT), phaseZ = new Float32Array(COUNT);\r\n  const twinkleSpeed = new Float32Array(COUNT);\r\n  const twinklePhase = new Float32Array(COUNT);\r\n\r\n  for (let i = 0; i < COUNT; i++) {\r\n    freqX[i] = 0.3 + wobRng() * 0.5;\r\n    freqY[i] = 0.3 + wobRng() * 0.5;\r\n    freqZ[i] = 0.3 + wobRng() * 0.5;\r\n    phaseX[i] = wobRng() * TAU;\r\n    phaseY[i] = wobRng() * TAU;\r\n    phaseZ[i] = wobRng() * TAU;\r\n\r\n    twinkleSpeed[i] = 2.0 + wobRng() * 4.0;\r\n    twinklePhase[i] = wobRng() * TAU;\r\n  }\r\n\r\n  let rotY = 0, rotX = 0;\r\n  let dragDeltaY = 0, dragDeltaX = 0;\r\n  let dragging = false, lastX = 0, lastY = 0;\r\n\r\n  const raycaster = new THREE.Raycaster();\r\n  const mouseScreen = new THREE.Vector2(-999, -999);\r\n  const mouseWorld = new THREE.Vector3(-999, -999, -999);\r\n  const mousePlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);\r\n  let isMouseOver = false;\r\n\r\n  window.addEventListener('pointermove', (e) => {\r\n    const rect = renderer.domElement.getBoundingClientRect();\r\n    const x = e.clientX - rect.left;\r\n    const y = e.clientY - rect.top;\r\n\r\n    if (x >= 0 && x <= rect.width && y >= 0 && y <= rect.height) {\r\n      mouseScreen.x = (x \/ rect.width) * 2 - 1;\r\n      mouseScreen.y = -(y \/ rect.height) * 2 + 1;\r\n      isMouseOver = true;\r\n    } else {\r\n      isMouseOver = false;\r\n    }\r\n\r\n    if (dragging) {\r\n      const dx = e.clientX - lastX;\r\n      const dy = e.clientY - lastY;\r\n      lastX = e.clientX; lastY = e.clientY;\r\n      dragDeltaY += dx * 0.003;\r\n      dragDeltaX = Math.max(-0.6, Math.min(0.6, dragDeltaX + dy * 0.0025));\r\n    }\r\n  });\r\n\r\n  renderer.domElement.addEventListener('pointerdown', (e) => {\r\n    dragging = true;\r\n    lastX = e.clientX; lastY = e.clientY;\r\n  });\r\n  window.addEventListener('pointerup', () => (dragging = false));\r\n\r\n  const resizeObserver = new ResizeObserver(() => {\r\n    width = stage.clientWidth;\r\n    height = stage.clientHeight;\r\n    camera.aspect = width \/ height;\r\n    camera.updateProjectionMatrix();\r\n    renderer.setSize(width, height);\r\n  });\r\n  resizeObserver.observe(stage);\r\n\r\n  const captions = [\r\n    { idx: '01 \u2014 K\u00c1OSZ', title: 'Van egy j\u00f3 v\u00e1llalkoz\u00e1sod. De a m\u00e1rk\u00e1d is ezt mutatja?', body: 'Lehet, hogy m\u00e1r van log\u00f3d, weboldalad, Instagram-oldalad \u00e9s sz\u00e1z \u00f6tleted. M\u00e9gis valahogy nem \u00e1ll \u00f6ssze a k\u00e9p. Nem tudod pontosan megfogalmazni, mi hi\u00e1nyzik, csak \u00e9rzed, hogy enn\u00e9l t\u00f6bb is lehetne benne.' },\r\n    { idx: '02 \u2014 GONDOLKOD\u00c1S', title: 'Nem a sz\u00ednekkel \u00e9s bet\u0171t\u00edpusokkal kell kezden\u00fcnk.', body: 'Hanem azzal, hogy mit akarsz k\u00e9pviselni, kikhez besz\u00e9lsz, \u00e9s mi\u00e9rt t\u00e9ged v\u00e1lasszanak. Mert hi\u00e1ba sz\u00e9p valami, ha nincs m\u00f6g\u00f6tte egy\u00e9rtelm\u0171 gondolat.' },\r\n    { idx: '03 \u2014 MAG', title: 'Mi van benned, ami m\u00e1sban nincs?', body: 'Nem kell hangosabbnak lenned mindenkin\u00e9l. Azt kell megtal\u00e1lnunk, amit\u0151l a m\u00e1rk\u00e1d felismerhet\u0151, hiteles \u00e9s val\u00f3ban a ti\u00e9d.' },\r\n    { idx: '04 \u2014 RENDSZER', title: 'V\u00e9gre \u00f6ssze\u00e1ll a k\u00e9p.', body: 'A strat\u00e9gi\u00e1d, a szavaid, az arculatod \u00e9s a weboldalad nem n\u00e9gy k\u00fcl\u00f6n t\u00f6rt\u00e9netet mes\u00e9lnek. Hanem ugyanazt er\u0151s\u00edtik. Ett\u0151l lesz a m\u00e1rk\u00e1d t\u00f6bb egym\u00e1s mell\u00e9 rakott sz\u00e9p elemn\u00e9l..' },\r\n  ];\r\n\r\n  let progress = 0;\r\n  let stateIndex = 0;\r\n\r\n  function setCaption(i) {\r\n    const capIdx = wrapper.querySelector('#ps-capIdx');\r\n    const capTitle = wrapper.querySelector('#ps-capTitle');\r\n    const capBody = wrapper.querySelector('#ps-capBody');\r\n    [capIdx, capTitle, capBody].forEach((el) => (el.style.opacity = 0));\r\n    setTimeout(() => {\r\n      capIdx.textContent = captions[i].idx;\r\n      capTitle.textContent = captions[i].title;\r\n      capBody.textContent = captions[i].body;\r\n      [capIdx, capTitle, capBody].forEach((el) => (el.style.opacity = 1));\r\n    }, 150);\r\n    wrapper.querySelectorAll('.seg').forEach((el) => el.classList.remove('active'));\r\n    wrapper.querySelector(`.seg[data-i=\"${i}\"]`).classList.add('active');\r\n  }\r\n\r\n  function applyBasePositions(p) {\r\n    const idxA = Math.min(STATE_COUNT - 1, Math.floor(p \/ 100));\r\n    const idxB = Math.min(STATE_COUNT - 1, idxA + 1);\r\n    const localT = p \/ 100 - idxA;\r\n\r\n    const burst = Math.sin(localT * Math.PI) * 1.5;\r\n\r\n    const a = targets[idxA];\r\n    const b = targets[idxB];\r\n\r\n    for (let i = 0; i < COUNT * 3; i += 3) {\r\n      const ax = a[i], ay = a[i + 1], az = a[i + 2];\r\n      const bx = b[i], by = b[i + 1], bz = b[i + 2];\r\n\r\n      let x = ax + (bx - ax) * localT;\r\n      let y = ay + (by - ay) * localT;\r\n      let z = az + (bz - az) * localT;\r\n\r\n      if (burst > 0.01) {\r\n        const dist = Math.hypot(x, y, z) || 1;\r\n        const dirX = x \/ dist, dirY = y \/ dist, dirZ = z \/ dist;\r\n        x += dirX * burst * (0.8 + Math.sin(i) * 0.4);\r\n        y += dirY * burst * (0.8 + Math.cos(i) * 0.4);\r\n        z += dirZ * burst * (0.8 + Math.sin(i * 2) * 0.4);\r\n      }\r\n\r\n      base[i] = x; base[i + 1] = y; base[i + 2] = z;\r\n    }\r\n\r\n    const camA = cameraTargets[idxA];\r\n    const camB = cameraTargets[idxB];\r\n    camera.position.x = camA.x + (camB.x - camA.x) * localT;\r\n    camera.position.y = camA.y + (camB.y - camA.y) * localT;\r\n    camera.position.z = camA.z + (camB.z - camA.z) * localT;\r\n\r\n    const nearest = localT < 0.5 ? idxA : idxB;\r\n    if (nearest !== stateIndex) {\r\n      stateIndex = nearest;\r\n      setCaption(nearest);\r\n    }\r\n  }\r\n\r\n  let wheelTarget = 0, wheelAccum = 0, snapLocked = false;\r\n  const SNAP_THRESHOLD = 25, SNAP_COOLDOWN = 600;\r\n\r\n  wrapper.addEventListener('wheel', (e) => {\r\n    const isLastState = stateIndex === STATE_COUNT - 1;\r\n    const isScrollingDown = e.deltaY > 0;\r\n    if (isLastState && isScrollingDown) return;\r\n\r\n    const isFirstState = stateIndex === 0;\r\n    const isScrollingUp = e.deltaY < 0;\r\n    if (isFirstState && isScrollingUp) return;\r\n\r\n    e.preventDefault();\r\n    if (snapLocked) return;\r\n    wheelAccum += e.deltaY;\r\n\r\n    if (Math.abs(wheelAccum) > SNAP_THRESHOLD) {\r\n      const dir = wheelAccum > 0 ? 1 : -1;\r\n      wheelAccum = 0;\r\n      const nextIndex = Math.min(STATE_COUNT - 1, Math.max(0, stateIndex + dir));\r\n      if (nextIndex !== stateIndex || wheelTarget !== nextIndex * 100) {\r\n        wheelTarget = nextIndex * 100;\r\n        snapLocked = true;\r\n        setTimeout(() => { snapLocked = false; }, SNAP_COOLDOWN);\r\n      }\r\n    }\r\n  }, { passive: false });\r\n\r\n  \/\/ \u00c9rint\u00e9s: az els\u0151\/utols\u00f3 \u00e1llapotban nem blokkolja az oldalg\u00f6rget\u00e9st\r\n  let touchStartY = 0;\r\n  wrapper.addEventListener('touchstart', (e) => {\r\n    if (e.touches.length === 1) {\r\n      touchStartY = e.touches[0].clientY;\r\n    }\r\n  }, { passive: true });\r\n\r\n  wrapper.addEventListener('touchmove', (e) => {\r\n    if (e.touches.length !== 1) return;\r\n    const touchEndY = e.touches[0].clientY;\r\n    const diffY = touchStartY - touchEndY;\r\n\r\n    const isLastState = stateIndex === STATE_COUNT - 1;\r\n    const isFirstState = stateIndex === 0;\r\n\r\n    if (isLastState && diffY > 0) return;\r\n    if (isFirstState && diffY < 0) return;\r\n\r\n    if (Math.abs(diffY) > 10) {\r\n      e.preventDefault();\r\n    }\r\n  }, { passive: false });\r\n\r\n  wrapper.addEventListener('touchend', (e) => {\r\n    const touchEndY = e.changedTouches[0].clientY;\r\n    const diffY = touchStartY - touchEndY;\r\n\r\n    const isLastState = stateIndex === STATE_COUNT - 1;\r\n    const isFirstState = stateIndex === 0;\r\n\r\n    if (isLastState && diffY > 0) return;\r\n    if (isFirstState && diffY < 0) return;\r\n\r\n    if (Math.abs(diffY) > 35 && !snapLocked) {\r\n      const dir = diffY > 0 ? 1 : -1;\r\n      const nextIndex = Math.min(STATE_COUNT - 1, Math.max(0, stateIndex + dir));\r\n      if (nextIndex !== stateIndex) {\r\n        wheelTarget = nextIndex * 100;\r\n        snapLocked = true;\r\n        setTimeout(() => { snapLocked = false; }, SNAP_COOLDOWN);\r\n      }\r\n    }\r\n  }, { passive: true });\r\n\r\n  wrapper.querySelector('#ps-segmented').addEventListener('click', (e) => {\r\n    const btn = e.target.closest('.seg');\r\n    if (!btn) return;\r\n    wheelTarget = parseInt(btn.dataset.i, 10) * 100;\r\n  });\r\n\r\n  const clock = new THREE.Clock();\r\n  const tempMatrix = new THREE.Matrix4();\r\n  const inverseMatrix = new THREE.Matrix4();\r\n  const localMouse = new THREE.Vector3();\r\n\r\n  function animate() {\r\n    requestAnimationFrame(animate);\r\n    const t = clock.getElapsedTime();\r\n\r\n    progress += (wheelTarget - progress) * 0.08;\r\n    applyBasePositions(progress);\r\n\r\n    const wobAmp = 0.04 * SCALE;\r\n\r\n    if (isMouseOver) {\r\n      raycaster.setFromCamera(mouseScreen, camera);\r\n      raycaster.ray.intersectPlane(mousePlane, mouseWorld);\r\n\r\n      tempMatrix.makeRotationFromEuler(points.rotation);\r\n      inverseMatrix.copy(tempMatrix).invert();\r\n      localMouse.copy(mouseWorld).applyMatrix4(inverseMatrix);\r\n    }\r\n\r\n    const colorArr = geometry.attributes.color.array;\r\n    const repelRadius = 2.2;\r\n    const repelStrength = 1.4;\r\n\r\n    \/\/ az egyenl\u00edt\u0151 s\u00f6t\u00e9t\u00edt\u00e9se a g\u00f6mb \u00e1llapotb\u00f3l kil\u00e9pve fokozatosan elt\u0171nik\r\n    const dimFade = Math.max(0, 1 - progress \/ 60);\r\n\r\n    for (let i = 0; i < COUNT; i++) {\r\n      const i3 = i * 3;\r\n\r\n      let px = base[i3] + Math.sin(t * freqX[i] + phaseX[i]) * wobAmp;\r\n      let py = base[i3 + 1] + Math.cos(t * freqY[i] + phaseY[i]) * wobAmp;\r\n      let pz = base[i3 + 2] + Math.sin(t * freqZ[i] + phaseZ[i]) * wobAmp;\r\n\r\n      if (isMouseOver) {\r\n        const dx = px - localMouse.x;\r\n        const dy = py - localMouse.y;\r\n        const dz = pz - localMouse.z;\r\n        const distSq = dx * dx + dy * dy + dz * dz;\r\n\r\n        if (distSq < repelRadius * repelRadius && distSq > 0.0001) {\r\n          const dist = Math.sqrt(distSq);\r\n          const force = (1 - dist \/ repelRadius) * repelStrength;\r\n          px += (dx \/ dist) * force;\r\n          py += (dy \/ dist) * force;\r\n          pz += (dz \/ dist) * force;\r\n        }\r\n      }\r\n\r\n      current[i3] = px;\r\n      current[i3 + 1] = py;\r\n      current[i3 + 2] = pz;\r\n\r\n      const spark = Math.pow(Math.sin(t * twinkleSpeed[i] + twinklePhase[i]) * 0.5 + 0.5, 3.0);\r\n      const boost = 1.3 + spark * 1.2;\r\n      const dimK = 1 + (sphereDim[i] - 1) * dimFade;\r\n      const bb = boost * dimK;\r\n\r\n      colorArr[i3]     = Math.min(1.0, baseColors[i3] * bb);\r\n      colorArr[i3 + 1] = Math.min(1.0, baseColors[i3 + 1] * bb);\r\n      colorArr[i3 + 2] = Math.min(1.0, baseColors[i3 + 2] * bb);\r\n    }\r\n\r\n    geometry.attributes.position.needsUpdate = true;\r\n    geometry.attributes.color.needsUpdate = true;\r\n\r\n    rotY += 0.002;\r\n    points.rotation.y = rotY + dragDeltaY;\r\n    points.rotation.x = rotX + dragDeltaX;\r\n\r\n    renderer.render(scene, camera);\r\n  }\r\n\r\n  requestAnimationFrame(animate);\r\n\r\n  const loading = wrapper.querySelector('#ps-loading');\r\n  setTimeout(() => {\r\n    loading.style.opacity = 0;\r\n    setTimeout(() => (loading.style.display = 'none'), 600);\r\n  }, 300);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-58d48d5 e-con e-atomic-element e-flexbox-base e-default-div e-912fa14 \" data-id=\"58d48d5\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"58d48d5\">\n    \t\t<div data-animation-type=\"block\" class=\"elementor-element elementor-element-8eb66d8 animated-slow animation_type_block elementor-invisible elementor-widget elementor-widget-html\" data-id=\"8eb66d8\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;ms_ani_slideInDownSmooth&quot;,&quot;mauve_hidepaged&quot;:&quot;false&quot;,&quot;_animation_type&quot;:&quot;block&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"utf-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n<title>NUANCE \u2014 Before the Brand<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Montserrat:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n  html, body { margin: 0; padding: 0; background: #f8f6f0; }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"nuance-thinking\">\r\n\r\n  <div class=\"ambient-background\">\r\n    <div class=\"blob blob-1\"><\/div>\r\n    <div class=\"blob blob-2\"><\/div>\r\n    <div class=\"blob blob-3\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"nuance-thinking__inner\">\r\n    <h2 class=\"nuance-thinking__title\">\r\n      Nem t\u00f6bb \u00f6tletre van sz\u00fcks\u00e9ged.<br>\r\n      <span class=\"nuance-thinking__title-line\" data-split-wrapper><span class=\"nt-source-text\" data-nt-source>Hanem a megfelel\u0151 ir\u00e1nyra.<\/span><span class=\"nt-chars\" data-nt-chars aria-hidden=\"true\"><\/span><\/span>\r\n    <\/h2>\r\n\r\n    <div class=\"nuance-thinking__desc\">\r\n      <p class=\"nuance-thinking__desc-p nuance-thinking__desc-p--lead\">\r\n        Az AI ma m\u00e1r pillanatok alatt gener\u00e1l log\u00f3t, headline-okat, moodboardot vagy ak\u00e1r egy teljes weboldalt. A lehet\u0151s\u00e9gek sz\u00e1ma v\u00e9gtelen. Azt\u00e1n valahogy m\u00e9gis ott tal\u00e1lod magad, hogy nem tudod, melyik ir\u00e1nyba indulj, mit kellene v\u00e1ltoztatnod, vagy mi\u00e9rt nem \u00e1ll \u00f6ssze az eg\u00e9sz. <strong>Mert att\u00f3l, hogy valami j\u00f3l n\u00e9z ki, m\u00e9g nem biztos, hogy m\u0171k\u00f6dik is.<\/strong>\r\n      <\/p>\r\n      <p class=\"nuance-thinking__desc-p\">\r\n        Att\u00f3l, hogy j\u00f3 vagy abban, amit csin\u00e1lsz, m\u00e9g nem biztos, hogy ez a m\u00e1rk\u00e1db\u00f3l is l\u00e1tszik. Te tudod, mit\u0151l j\u00f3 a v\u00e1llalkoz\u00e1sod. \u00c9n pedig seg\u00edtek ezt m\u00e1soknak is megmutatni.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <a href=\"https:\/\/nuancecreative.hu\/rolam\/\" class=\"nuance-thinking__btn\">\r\n      N\u00c9ZD MEG, HOGYAN DOLGOZOM\r\n      <span class=\"nuance-thinking__arrow\">\u2197<\/span>\r\n    <\/a>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n.nuance-thinking {\r\n  --nt-bg: #f8f6f0;\r\n  --nt-ink: #0a0a0c;\r\n  --nt-dim: #3f3f46;\r\n  --nt-accent: #d59256;\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 1;\r\n  width: 100%;\r\n  height: 100vh;\r\n  background: var(--nt-bg);\r\n  overflow: hidden;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 120px 24px;\r\n  box-sizing: border-box;\r\n  font-family: 'Montserrat', sans-serif;\r\n}\r\n.nuance-thinking * { box-sizing: border-box; }\r\n\r\n.ambient-background {\r\n  position: absolute;\r\n  inset: 0;\r\n  overflow: hidden;\r\n  pointer-events: none;\r\n  z-index: 0;\r\n}\r\n.blob {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  filter: blur(70px);\r\n  mix-blend-mode: multiply;\r\n  will-change: transform, opacity;\r\n}\r\n.blob-1 {\r\n  width: 55vw; height: 55vw; max-width: 750px; max-height: 750px;\r\n  background: #d59256; top: -5%; left: -5%;\r\n  animation: blobActive1 8s ease-in-out infinite alternate;\r\n}\r\n.blob-2 {\r\n  width: 48vw; height: 48vw; max-width: 620px; max-height: 620px;\r\n  background: #e8ab6f; bottom: -10%; right: -5%;\r\n  animation: blobActive2 10s ease-in-out infinite alternate;\r\n}\r\n.blob-3 {\r\n  width: 40vw; height: 40vw; max-width: 500px; max-height: 500px;\r\n  background: #c17b3e; top: 25%; left: 25%;\r\n  animation: blobActive3 7s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes blobActive1 {\r\n  0%   { transform: translate3d(0, 0, 0) scale(0.95); opacity: 0.45; }\r\n  100% { transform: translate3d(22%, 18%, 0) scale(1.25); opacity: 0.75; }\r\n}\r\n@keyframes blobActive2 {\r\n  0%   { transform: translate3d(0, 0, 0) scale(1.2); opacity: 0.65; }\r\n  100% { transform: translate3d(-25%, -15%, 0) scale(0.9); opacity: 0.35; }\r\n}\r\n@keyframes blobActive3 {\r\n  0%   { transform: translate3d(0, 0, 0) scale(0.85); opacity: 0.3; }\r\n  100% { transform: translate3d(18%, -22%, 0) scale(1.2); opacity: 0.7; }\r\n}\r\n\r\n.nuance-thinking__inner {\r\n  position: relative;\r\n  z-index: 1;\r\n  max-width: 1100px;\r\n  margin: 0 auto;\r\n  text-align: center;\r\n}\r\n\r\n.nuance-thinking__title {\r\n  font-family: 'Fraunces', serif;\r\n  font-weight: 400;\r\n  font-size: clamp(52px, 8.5vw, 85px);\r\n  line-height: 0.92;\r\n  letter-spacing: -0.03em;\r\n  color: var(--nt-ink);\r\n  margin: 0 0 32px;\r\n}\r\n\r\n\/* --- Bet\u0171nk\u00e9nti anim\u00e1ci\u00f3 --- *\/\r\n.nuance-thinking__title-line {\r\n  display: inline-block;\r\n  position: relative; \/* a l\u00e1thatatlan forr\u00e1s-span ehhez pozicion\u00e1l\u00f3dik *\/\r\n}\r\n\r\n\/* A TranslatePress ezt a span-t l\u00e1tja egyetlen ford\u00edthat\u00f3 sz\u00f6vegk\u00e9nt.\r\n   Vizu\u00e1lisan elrejtve, de a DOM-ban jelen van, ez\u00e9rt ford\u00edthat\u00f3 marad,\r\n   \u00e9s nem foglal helyet \/ nem okoz duplik\u00e1ci\u00f3t vagy extra h\u00e9zagot. *\/\r\n.nt-source-text {\r\n  position: absolute !important;\r\n  width: 1px !important;\r\n  height: 1px !important;\r\n  margin: -1px !important;\r\n  padding: 0 !important;\r\n  overflow: hidden !important;\r\n  clip: rect(0, 0, 0, 0) !important;\r\n  white-space: nowrap !important;\r\n  border: 0 !important;\r\n}\r\n\r\n\/* Ide ker\u00fclnek a JS \u00e1ltal gener\u00e1lt, anim\u00e1lt karakter-span-ek. *\/\r\n.nt-chars { display: inline-block; }\r\n\r\n.nuance-thinking__title-line .char {\r\n  display: inline-block;\r\n  opacity: 0;\r\n  transform: translateY(0.5em) rotate(4deg);\r\n  filter: blur(6px);\r\n  transition:\r\n    opacity 0.6s cubic-bezier(.2,.7,.2,1),\r\n    transform 0.7s cubic-bezier(.2,.7,.2,1),\r\n    filter 0.6s cubic-bezier(.2,.7,.2,1);\r\n}\r\n.nuance-thinking__title-line .char--space {\r\n  width: 0.28em;\r\n}\r\n.nuance-thinking__title-line.is-revealed .char {\r\n  opacity: 1;\r\n  transform: translateY(0) rotate(0deg);\r\n  filter: blur(0);\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .nuance-thinking__title-line .char {\r\n    transition: none;\r\n    opacity: 1;\r\n    transform: none;\r\n    filter: none;\r\n  }\r\n}\r\n\r\n\/* --- Le\u00edr\u00f3 sz\u00f6veg --- *\/\r\n.nuance-thinking__desc {\r\n  font-size: clamp(15px, 1.5vw, 20px);\r\n  line-height: 1.65;\r\n  color: var(--nt-dim);\r\n  max-width: 780px;          \/* sz\u00e9lesebb blokk (volt: 520px) *\/\r\n  margin: 0 auto 48px;\r\n  font-weight: 400;\r\n}\r\n.nuance-thinking__desc-p {\r\n  margin: 0;\r\n}\r\n.nuance-thinking__desc-p--lead {\r\n  margin-bottom: 18px;       \/* kis t\u00e9rk\u00f6z a k\u00e9t r\u00e9sz k\u00f6z\u00f6tt *\/\r\n}\r\n.nuance-thinking__desc strong {\r\n  font-weight: 600;\r\n  color: var(--nt-ink);\r\n}\r\n\r\n.nuance-thinking__btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  padding: 18px 38px;\r\n  border-radius: 999px;\r\n  background: var(--nt-ink);\r\n  color: #ffffff;\r\n  font-family: 'Montserrat', sans-serif;\r\n  font-size: 11px;\r\n  font-weight: 600;\r\n  letter-spacing: 0.15em;\r\n  text-decoration: none;\r\n  text-transform: uppercase;\r\n  transition: background .35s ease, box-shadow .35s ease, transform .25s ease;\r\n}\r\n.nuance-thinking__arrow {\r\n  display: inline-block;\r\n  font-size: 16px;\r\n  font-weight: 400;\r\n  color: var(--nt-accent);\r\n  transition: transform .35s ease;\r\n}\r\n.nuance-thinking__btn:hover {\r\n  background: #1a1a1e;\r\n  box-shadow: 0 10px 30px rgba(213, 146, 86, 0.32);\r\n  transform: translateY(-2px);\r\n}\r\n.nuance-thinking__btn:hover .nuance-thinking__arrow {\r\n  transform: translate(3px, -3px);\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .nuance-thinking {\r\n    padding: 100px 20px;\r\n    height: auto;\r\n    min-height: 100vh;\r\n  }\r\n  .nuance-thinking__title {\r\n    font-size: clamp(42px, 12vw, 64px);\r\n    line-height: 1;\r\n    margin-bottom: 24px;\r\n  }\r\n  .nuance-thinking__desc {\r\n    font-size: 15px;\r\n    margin-bottom: 40px;\r\n  }\r\n  .nuance-thinking__btn {\r\n    padding: 16px 32px;\r\n    font-size: 11px;\r\n  }\r\n  .blob { filter: blur(50px); }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n  var STAGGER_MS = 28; \/\/ egy bet\u0171 \u00e9s a k\u00f6vetkez\u0151 indul\u00e1sa k\u00f6zti id\u0151\r\n\r\n  function splitIntoChars(text, container) {\r\n    container.textContent = '';\r\n    var frag = document.createDocumentFragment();\r\n    var charIndex = 0;\r\n    Array.from(text).forEach(function (ch) {\r\n      var span = document.createElement('span');\r\n      if (ch === ' ') {\r\n        span.className = 'char char--space';\r\n        span.textContent = '\\u00A0';\r\n      } else {\r\n        span.className = 'char';\r\n        span.textContent = ch;\r\n        span.style.transitionDelay = (charIndex * STAGGER_MS) + 'ms';\r\n        charIndex++;\r\n      }\r\n      frag.appendChild(span);\r\n    });\r\n    container.appendChild(frag);\r\n  }\r\n\r\n  function initSplitReveal() {\r\n    var wrappers = document.querySelectorAll('[data-split-wrapper]');\r\n    if (!wrappers.length) return;\r\n\r\n    var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n    wrappers.forEach(function (wrapper) {\r\n      var source = wrapper.querySelector('[data-nt-source]');\r\n      var charsContainer = wrapper.querySelector('[data-nt-chars]');\r\n      if (!source || !charsContainer) return;\r\n\r\n      function rebuild() {\r\n        \/\/ Mindig a TranslatePress \u00e1ltal t\u00e9nylegesen megjelen\u00edtett\r\n        \/\/ (aktu\u00e1lis nyelv\u0171) sz\u00f6veget olvassuk ki.\r\n        splitIntoChars(source.textContent, charsContainer);\r\n      }\r\n\r\n      \/\/ Els\u0151 render az indul\u00f3 (pl. magyar) sz\u00f6veggel.\r\n      rebuild();\r\n\r\n      if (prefersReduced) {\r\n        wrapper.classList.add('is-revealed');\r\n      } else if ('IntersectionObserver' in window) {\r\n        var io = new IntersectionObserver(function (entries) {\r\n          entries.forEach(function (entry) {\r\n            if (entry.isIntersecting) {\r\n              wrapper.classList.add('is-revealed');\r\n              io.unobserve(entry.target);\r\n            }\r\n          });\r\n        }, { threshold: 0.4 });\r\n        io.observe(wrapper);\r\n      } else {\r\n        wrapper.classList.add('is-revealed');\r\n      }\r\n\r\n      \/\/ Csak ezt az egy, kis, ford\u00edthat\u00f3 span-t figyelj\u00fck \u2014 nem a body-t \u2014\r\n      \/\/ hogy ha a TranslatePress lecser\u00e9li a sz\u00f6veg\u00e9t (nyelvv\u00e1lt\u00e1s),\r\n      \/\/ a karakter-anim\u00e1ci\u00f3 az \u00daJ, leford\u00edtott sz\u00f6veggel \u00e9p\u00fclj\u00f6n \u00fajra.\r\n      if ('MutationObserver' in window) {\r\n        var mo = new MutationObserver(function () {\r\n          rebuild();\r\n        });\r\n        mo.observe(source, {\r\n          characterData: true,\r\n          childList: true,\r\n          subtree: true\r\n        });\r\n      }\r\n    });\r\n  }\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', initSplitReveal);\r\n  } else {\r\n    initSplitReveal();\r\n  }\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-b5f646e e-con e-atomic-element e-flexbox-base e-default-div e-971df7c \" data-id=\"b5f646e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"b5f646e\">\n    \t\t<div class=\"elementor-element elementor-element-1e6abf2 elementor-widget-laptop__width-initial elementor-widget elementor-widget-html\" data-id=\"1e6abf2\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mauve_hidepaged&quot;:&quot;false&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Montserrat:wght@400;500;600;700;800&display=swap');\r\n\r\n  .ncs-services{\r\n    --ncs-bg:#08080a;\r\n    --ncs-bg-card:#101013;\r\n    --ncs-line:#1c1c1f;\r\n    --ncs-text-primary:#f5f5f7;\r\n    --ncs-text-secondary:#f5f5f7;\r\n    --ncs-text-tertiary:#a1a1aa;\r\n    --ncs-badge-bg:#0a0a0c;\r\n    --ncs-badge-border:#2a2a2e;\r\n    --ncs-tag-bg:#131316;\r\n    --ncs-accent:#d59256;\r\n    --ncs-tag-text:#e7c9a4;\r\n    --ncs-font-serif:'Fraunces', serif;\r\n    --ncs-font-sans:'Montserrat', sans-serif;\r\n    --ncs-radius-pill:999px;\r\n\r\n    display:block;\r\n    background:var(--ncs-bg);\r\n    color:var(--ncs-text-primary);\r\n    font-family:var(--ncs-font-sans);\r\n    -webkit-font-smoothing:antialiased;\r\n    padding:100px 6vw 140px;\r\n    position:relative;\r\n    overflow:visible !important;\r\n  }\r\n\r\n  .ncs-services *{ box-sizing:border-box; }\r\n\r\n  .ncs-services::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    top:0; left:0; right:0; height:1px;\r\n    background:linear-gradient(90deg, transparent, var(--ncs-line) 20%, var(--ncs-line) 80%, transparent);\r\n  }\r\n\r\n  .ncs-head{\r\n    display:flex;\r\n    justify-content:space-between;\r\n    align-items:flex-end;\r\n    gap:32px;\r\n    margin-bottom:80px;\r\n    max-width:1400px;\r\n    margin-left:auto;\r\n    margin-right:auto;\r\n  }\r\n\r\n  .ncs-eyebrow{\r\n    display:flex;\r\n    align-items:center;\r\n    gap:10px;\r\n    font-family:var(--ncs-font-sans);\r\n    font-weight:600;\r\n    font-size:12px;\r\n    letter-spacing:.14em;\r\n    text-transform:uppercase;\r\n    color:var(--ncs-accent);\r\n    margin-bottom:18px;\r\n  }\r\n\r\n  .ncs-head h2{\r\n    font-family:var(--ncs-font-serif);\r\n    font-optical-sizing:auto;\r\n    font-size:clamp(34px, 4vw, 58px);\r\n    font-weight:600;\r\n    letter-spacing:-0.01em;\r\n    line-height:1.08;\r\n    max-width:640px;\r\n    margin:0;\r\n    color: var(--ncs-text-primary);\r\n  }\r\n\r\n  .ncs-head p{\r\n    color:var(--ncs-text-primary);\r\n    max-width:340px;\r\n    font-size:15px;\r\n    line-height:1.6;\r\n    padding-bottom:6px;\r\n    margin:0;\r\n  }\r\n\r\n  \/* ============ STICKY STACK ============ *\/\r\n  .ncs-list{\r\n    max-width:1400px;\r\n    margin:0 auto;\r\n    position:relative;\r\n  }\r\n\r\n  .ncs-card{\r\n    position: sticky;\r\n    top: 100px; \/* Itt \u00e1ll meg a k\u00e1rtya a k\u00e9perny\u0151 tetej\u00e9t\u0151l sz\u00e1m\u00edtva *\/\r\n    display: grid;\r\n    grid-template-columns: 70px minmax(220px, 320px) 1fr minmax(260px, 340px);\r\n    align-items: center;\r\n    gap: 40px;\r\n    background: var(--ncs-bg-card);\r\n    border: 1px solid var(--ncs-line);\r\n    border-radius: 32px;\r\n    box-shadow: 0 20px 40px rgba(0,0,0,0.6);\r\n    padding: 48px 48px;\r\n    margin-bottom: 40px; \/* Biztos\u00edtja a g\u00f6rget\u00e9si t\u00e1vols\u00e1got a k\u00e1rty\u00e1k k\u00f6z\u00f6tt *\/\r\n  }\r\n\r\n  \/* --- number badge --- *\/\r\n  .ncs-badge{\r\n    width:56px;\r\n    height:36px;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    background:var(--ncs-badge-bg);\r\n    border:1px solid var(--ncs-badge-border);\r\n    border-radius:10px;\r\n    font-family:var(--ncs-font-sans);\r\n    font-weight:600;\r\n    font-size:13px;\r\n    color:var(--ncs-text-primary);\r\n    letter-spacing:.03em;\r\n  }\r\n\r\n  \/* --- mockup frame --- *\/\r\n  .ncs-mockup{\r\n    position:relative;\r\n    aspect-ratio:16\/10.5;\r\n    border-radius:16px;\r\n    overflow:hidden;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    isolation:isolate;\r\n  }\r\n\r\n  .ncs-mockup-inner{ position:absolute; inset:0; }\r\n\r\n  .ncs-mockup-label{\r\n    position:absolute;\r\n    bottom:14px;\r\n    left:16px;\r\n    font-family:var(--ncs-font-sans);\r\n    font-weight:600;\r\n    font-size:10px;\r\n    letter-spacing:.08em;\r\n    text-transform:uppercase;\r\n    opacity:.75;\r\n    z-index:2;\r\n  }\r\n\r\n  \/* mockup 001 \u2014 Web Design *\/\r\n  .ncs-mockup-001{ background:linear-gradient(160deg,#151516,#0c0c0d); }\r\n  .ncs-mockup-001 .ncs-grid{\r\n    position:absolute; inset:14%;\r\n    display:grid;\r\n    grid-template-columns:1.3fr 1fr;\r\n    grid-template-rows:1fr 1fr;\r\n    gap:8px;\r\n    border-radius:10px;\r\n    overflow:hidden;\r\n  }\r\n  .ncs-mockup-001 .ncs-cell{border-radius:6px;}\r\n  .ncs-mockup-001 .ncs-c1{background:#ff5a1f;grid-row:1\/3;display:flex;align-items:flex-end;padding:10px;color:#1a0a03;font-size:9px;font-weight:700;}\r\n  .ncs-mockup-001 .ncs-c2{background:#e8ff5b;}\r\n  .ncs-mockup-001 .ncs-c3{background:#1f9d55;}\r\n  .ncs-mockup-001 .ncs-stand{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);width:26%;height:6%;background:#2a2a2c;border-radius:4px;}\r\n\r\n  \/* mockup 002 \u2014 Social Media *\/\r\n  .ncs-mockup-002{ background:linear-gradient(150deg,#1c3fae,#0d1c52); }\r\n  .ncs-mockup-002 .ncs-mcard{\r\n    position:absolute; width:52%; height:70%; top:15%; left:24%;\r\n    background:#f5f5f2; border-radius:10px;\r\n    box-shadow:0 20px 40px rgba(0,0,0,.35);\r\n    transform:rotate(-4deg);\r\n    display:flex; align-items:center; justify-content:center;\r\n  }\r\n  .ncs-mockup-002 .ncs-mcard span{ font-size:38px; font-weight:800; color:#0d1c52; letter-spacing:-0.03em; }\r\n  .ncs-mockup-002 .ncs-ring{ position:absolute; width:22%; aspect-ratio:1; border:7px solid #d5d9c9; border-radius:50%; top:6%; right:16%; }\r\n  .ncs-mockup-002 .ncs-dot{ position:absolute; width:14px; height:14px; border-radius:50%; background:#c7ff5b; top:9%; right:24%; }\r\n\r\n  \/* mockup 003 \u2014 Marketing *\/\r\n  .ncs-mockup-003{ background:radial-gradient(120% 100% at 30% 20%, #ff6a2b, #7a1207 70%); }\r\n  .ncs-mockup-003 .ncs-beam{\r\n    position:absolute; inset:0;\r\n    background:repeating-linear-gradient(115deg, rgba(0,0,0,0) 0 18px, rgba(0,0,0,.18) 18px 20px);\r\n    mix-blend-mode:multiply;\r\n  }\r\n  .ncs-mockup-003 .ncs-board{\r\n    position:absolute; left:8%; right:8%; bottom:14%; height:34%;\r\n    background:rgba(10,4,2,.55);\r\n    border:1px solid rgba(255,255,255,.15);\r\n    border-radius:6px;\r\n    display:flex; align-items:center; padding:0 5%;\r\n  }\r\n  .ncs-mockup-003 .ncs-board span{ font-family:var(--ncs-font-sans); font-weight:600; font-size:10px; letter-spacing:.1em; color:#ffd9c2; text-transform:uppercase; }\r\n\r\n  \/* mockup 004 \u2014 Brand Identity *\/\r\n  .ncs-mockup-004{ background:linear-gradient(160deg,#232326,#101012); }\r\n  .ncs-mockup-004 .ncs-watch{\r\n    position:absolute; width:34%; aspect-ratio:0.86;\r\n    background:#0a0a0b;\r\n    border:3px solid #3a3a3d;\r\n    border-radius:26%;\r\n    top:50%; left:50%; transform:translate(-50%,-50%);\r\n    display:flex; align-items:center; justify-content:center;\r\n    box-shadow:0 12px 30px rgba(0,0,0,.5);\r\n  }\r\n  .ncs-mockup-004 .ncs-watch span{ font-family:var(--ncs-font-sans); font-weight:700; color:var(--ncs-accent); font-size:15px; letter-spacing:.05em; }\r\n  .ncs-mockup-004 .ncs-crown{ position:absolute; width:5%; height:10%; background:#3a3a3d; border-radius:2px; top:44%; left:calc(50% + 17%); }\r\n\r\n  \/* mockup 005 \u2014 Content *\/\r\n  .ncs-mockup-005{ background:linear-gradient(160deg,#f5f5f2,#e4e4de); }\r\n  .ncs-mockup-005 .ncs-cols{ position:absolute; inset:12%; display:grid; grid-template-columns:1fr 1fr; gap:10%; }\r\n  .ncs-mockup-005 .ncs-lines span{ display:block; height:6px; background:#0c0c0d; border-radius:3px; margin-bottom:9px; opacity:.85; }\r\n  .ncs-mockup-005 .ncs-lines span:nth-child(1){width:100%;}\r\n  .ncs-mockup-005 .ncs-lines span:nth-child(2){width:78%;}\r\n  .ncs-mockup-005 .ncs-lines span:nth-child(3){width:88%;}\r\n  .ncs-mockup-005 .ncs-lines span:nth-child(4){width:60%;}\r\n  .ncs-mockup-005 .ncs-swatch{ background:#ff5a1f; border-radius:8px; height:100%; }\r\n\r\n  \/* --- text content --- *\/\r\n  .ncs-text h3{\r\n    font-family:var(--ncs-font-serif);\r\n    font-size:clamp(24px, 2.2vw, 32px);\r\n    font-weight:600;\r\n    letter-spacing:-0.01em;\r\n    margin:0 0 14px;\r\n    color: var(--ncs-text-primary);\r\n  }\r\n  .ncs-text p{\r\n    font-family:var(--ncs-font-sans);\r\n    color:var(--ncs-text-primary);\r\n    font-size:15px;\r\n    line-height:1.65;\r\n    max-width:46ch;\r\n    margin:0;\r\n  }\r\n\r\n  \/* --- categories --- *\/\r\n  .ncs-categories .ncs-cat-label{\r\n    font-family:var(--ncs-font-sans);\r\n    font-weight:600;\r\n    font-size:11px;\r\n    letter-spacing:.14em;\r\n    text-transform:uppercase;\r\n    color:var(--ncs-text-tertiary);\r\n    margin-bottom:14px;\r\n    display:block;\r\n  }\r\n  .ncs-tag-list{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }\r\n  .ncs-tag{\r\n    padding:8px 14px;\r\n    background:var(--ncs-tag-bg);\r\n    border:1.5px solid var(--ncs-accent);\r\n    border-radius:var(--ncs-radius-pill);\r\n    font-family:var(--ncs-font-sans);\r\n    font-weight:500;\r\n    font-size:12.5px;\r\n    color:var(--ncs-tag-text);\r\n    white-space:nowrap;\r\n    transition:background .3s ease, color .3s ease;\r\n  }\r\n  .ncs-tag:hover{ background:var(--ncs-accent); color:#1a1006; }\r\n\r\n  \/* ============ RESPONSIVE ============ *\/\r\n  @media (max-width:1024px){\r\n    .ncs-card{\r\n      grid-template-columns:56px minmax(200px,280px) 1fr;\r\n      grid-template-areas:\r\n        \"badge mockup mockup\"\r\n        \"badge text text\"\r\n        \". cats cats\";\r\n      row-gap:22px;\r\n      padding:44px 36px;\r\n    }\r\n    .ncs-badge{grid-area:badge; align-self:start;}\r\n    .ncs-mockup{grid-area:mockup;}\r\n    .ncs-text{grid-area:text;}\r\n    .ncs-categories{grid-area:cats;}\r\n  }\r\n\r\n  @media (max-width:768px){\r\n    .ncs-services{padding:80px 6vw 56px;}\r\n    .ncs-head{flex-direction:column;align-items:flex-start;margin-bottom:56px;}\r\n    .ncs-list{padding-bottom:0;}\r\n    .ncs-card{\r\n      position:static;\r\n      transform:none !important;\r\n      filter:none !important;\r\n      grid-template-columns:1fr;\r\n      grid-template-areas:\r\n        \"mockup\"\r\n        \"meta\"\r\n        \"text\"\r\n        \"cats\";\r\n      row-gap:16px;\r\n      padding:28px 22px;\r\n      margin-bottom:20px;\r\n      box-shadow:0 12px 28px rgba(0,0,0,.35);\r\n      border-radius:24px;\r\n    }\r\n    .ncs-mockup{grid-area:mockup; aspect-ratio:16\/11;}\r\n    .ncs-badge{grid-area:meta; width:48px; height:32px;}\r\n    .ncs-text{grid-area:text;}\r\n    .ncs-categories{grid-area:cats;}\r\n    .ncs-tag{padding:10px 16px; font-size:13px;}\r\n  }\r\n<\/style>\r\n\r\n<section class=\"ncs-services\">\r\n  <div class=\"ncs-head\">\r\n    <div>\r\n      <div class=\"ncs-eyebrow\">Megold\u00e1sok<\/div>\r\n      <h2>Miben keresel megold\u00e1st?<\/h2>\r\n    <\/div>\r\n    <p>Van, hogy tudod, mit szeretn\u00e9l, csak nem tudod, hogyan val\u00f3s\u00edtsd meg. M\u00e1skor m\u00e1r mindened megvan, m\u00e9gsem m\u0171k\u00f6dik \u00fagy, ahogy elk\u00e9pzelted. <\/p>\r\n  <\/div>\r\n\r\n  <div class=\"ncs-list\" id=\"ncsRowList\"><\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  var NCS_SERVICES = [\r\n    {\r\n      id: \"01\",\r\n      title: \"J\u00f3, amit csin\u00e1lok. De ezt m\u00e1sok mi\u00e9rt nem l\u00e1tj\u00e1k? \",\r\n      description: \"Tudod, hogy \u00e9rt\u00e9ket adsz. Ismered a szakm\u00e1dat, j\u00f3 vagy abban, amit csin\u00e1lsz, m\u00e9gis neh\u00e9z megfogalmaznod, mit\u0151l vagy m\u00e1s, mint a t\u00f6bbiek. Itt kezd\u00fcnk rendet tenni. Tiszt\u00e1zzuk, mit k\u00e9pvisel a m\u00e1rk\u00e1d, kikhez szeretn\u00e9l sz\u00f3lni, mi k\u00fcl\u00f6nb\u00f6ztet meg a versenyt\u00e1rsaidt\u00f3l, \u00e9s mi\u00e9rt pont t\u00e9ged \u00e9rdemes v\u00e1lasztani. Mert ha te sem tudod egy\u00e9rtelm\u0171en elmondani, mit\u0151l vagy m\u00e1s, ne v\u00e1rd, hogy m\u00e1sok majd kital\u00e1lj\u00e1k.\",\r\n      tags: [\"Pozicion\u00e1l\u00e1s \", \"M\u00e1rkastrat\u00e9gia \", \"C\u00e9lcsoport \", \"Differenci\u00e1l\u00e1s \", \"M\u00e1rkair\u00e1ny \"],\r\n      mockup: \"001\"\r\n    },\r\n    {\r\n      id: \"02\",\r\n      title: \"Tudom, mit akarok mondani. Csak nem tudom j\u00f3l elmondani\",\r\n      description: \"Ha minden fel\u00fcleten m\u00e1shogy besz\u00e9l a m\u00e1rk\u00e1d, az embereknek neh\u00e9z lesz meg\u00e9rteni\u00fck, ki vagy. \u00d6sszerakjuk a legfontosabb \u00fczeneteidet, kommunik\u00e1ci\u00f3s ir\u00e1nyaidat \u00e9s azt a hangot, amin a m\u00e1rk\u00e1d term\u00e9szetesen tud megsz\u00f3lalni.\",\r\n      tags: [\"Kommunik\u00e1ci\u00f3s ir\u00e1ny\", \"Hangnem\", \"M\u00e1rkakommunik\u00e1ci\u00f3\", \"VTartalmi pill\u00e9rek\"],\r\n      mockup: \"004\"\r\n    },\r\n    {\r\n      id: \"03\",\r\n      title: \"A mostani arculatom m\u00e1r nem \u00e9n vagyok\",\r\n      description: \"Lehet, hogy egyszer m\u0171k\u00f6d\u00f6tt. Csak k\u00f6zben a v\u00e1llalkoz\u00e1sod tov\u00e1bbl\u00e9pett. Megkeress\u00fck, mi maradjon, mi v\u00e1ltozzon, \u00e9s olyan vizu\u00e1lis rendszert \u00e9p\u00edt\u00fcnk, ami nemcsak sz\u00e9p, hanem v\u00e9gre azt mutatja, ahol most tartasz\",\r\n      tags: [\"Vizu\u00e1lis rendszer\", \"\u00dajratervez\u00e9s\", \"Arculatfriss\u00edt\u00e9s\", \"Vizu\u00e1lis identit\u00e1s\"],\r\n      mockup: \"002\"\r\n    },\r\n    {\r\n      id: \"04\",\r\n      title: \"A weboldalam sz\u00e9p, de valahogy m\u00e9gsem dolgozik helyettem\",\r\n      description: \"Nem az a k\u00e9rd\u00e9s, hogy j\u00f3l n\u00e9z-e ki. Hanem hogy n\u00e9h\u00e1ny m\u00e1sodperc alatt \u00e9rthet\u0151v\u00e9 v\u00e1lik-e, mit k\u00edn\u00e1lsz, kinek \u00e9s mi\u00e9rt \u00e9rdemes t\u00e9ged v\u00e1lasztani. A strukt\u00far\u00e1t\u00f3l \u00e9s UX-t\u0151l a vizu\u00e1lis megjelen\u00e9sig olyan weboldalt \u00e9p\u00edt\u00fcnk, ami a m\u00e1rk\u00e1d r\u00e9szek\u00e9nt m\u0171k\u00f6dik.\",\r\n      tags: [\"Webdesign\", \"UI\", \"UX\", \"Digit\u00e1lis \u00e9lm\u00e9ny\", \"Websz\u00f6veg\"],\r\n      mockup: \"003\"\r\n    },\r\n    {\r\n      id: \"05\",\r\n      title: \"Minden \u00faj kamp\u00e1nyn\u00e1l megint kital\u00e1ljuk, hogyan n\u00e9zz\u00fcnk ki.\",\r\n      description: \"Ha minden poszt, kamp\u00e1ny vagy \u00faj anyag egy \u00fajabb mini-branding projekt, hi\u00e1nyzik valami a rendszerb\u0151l. Kialak\u00edtjuk azt a kreat\u00edv ir\u00e1nyt \u00e9s vizu\u00e1lis keretet, amib\u0151l k\u00e9s\u0151bb k\u00f6nnyebb, gyorsabb \u00e9s k\u00f6vetkezetesebb tartalmakat k\u00e9sz\u00edteni.\",\r\n      tags: [\"Kamp\u00e1ny strat\u00e9gia\", \"Kreat\u00edv koncepci\u00f3\", \"Social\", \"Kamp\u00e1nytervez\u00e9s\"],\r\n      mockup: \"005\"\r\n    }\r\n  ];\r\n\r\n  var NCS_MOCKUPS = {\r\n    \"001\": '\\\r\n      <div class=\"ncs-mockup-inner\">\\\r\n        <div class=\"ncs-grid\">\\\r\n          <div class=\"ncs-cell ncs-c1\">Web Design<\/div>\\\r\n          <div class=\"ncs-cell ncs-c2\"><\/div>\\\r\n          <div class=\"ncs-cell ncs-c3\"><\/div>\\\r\n        <\/div>\\\r\n        <div class=\"ncs-stand\"><\/div>\\\r\n      <\/div>\\\r\n      <span class=\"ncs-mockup-label\" style=\"color:#f5f5f5\">Product \/ UI<\/span>',\r\n    \"002\": '\\\r\n      <div class=\"ncs-mockup-inner\">\\\r\n        <div class=\"ncs-ring\"><\/div>\\\r\n        <div class=\"ncs-dot\"><\/div>\\\r\n        <div class=\"ncs-mcard\"><span>SM<\/span><\/div>\\\r\n      <\/div>\\\r\n      <span class=\"ncs-mockup-label\" style=\"color:#eef1ff\">Campaign Post<\/span>',\r\n    \"003\": '\\\r\n      <div class=\"ncs-mockup-inner\">\\\r\n        <div class=\"ncs-beam\"><\/div>\\\r\n        <div class=\"ncs-board\"><span>Subway (Metro) Billboard \u2014 001<\/span><\/div>\\\r\n      <\/div>\\\r\n      <span class=\"ncs-mockup-label\" style=\"color:#ffe3d1\">Out-of-Home<\/span>',\r\n    \"004\": '\\\r\n      <div class=\"ncs-mockup-inner\">\\\r\n        <div class=\"ncs-watch\"><span>004<\/span><\/div>\\\r\n        <div class=\"ncs-crown\"><\/div>\\\r\n      <\/div>\\\r\n      <span class=\"ncs-mockup-label\" style=\"color:#d7d7da\">Identity System<\/span>',\r\n    \"005\": '\\\r\n      <div class=\"ncs-mockup-inner\">\\\r\n        <div class=\"ncs-cols\">\\\r\n          <div class=\"ncs-lines\">\\\r\n            <span><\/span><span><\/span><span><\/span><span><\/span>\\\r\n          <\/div>\\\r\n          <div class=\"ncs-swatch\"><\/div>\\\r\n        <\/div>\\\r\n      <\/div>\\\r\n      <span class=\"ncs-mockup-label\" style=\"color:#1a1a1a\">Editorial<\/span>'\r\n  };\r\n\r\n  var list = document.getElementById('ncsRowList');\r\n  if (!list) return;\r\n\r\n  \/\/ L\u00e9trehozzuk a k\u00e1rty\u00e1kat n\u00f6vekv\u0151 z-index-szel, hogy a k\u00f6vetkez\u0151 mindig r\u00e1\u00fasszon az el\u0151z\u0151re\r\n  list.innerHTML = NCS_SERVICES.map(function(item, i){\r\n    return '\\\r\n    <article class=\"ncs-card\" data-id=\"' + item.id + '\" style=\"z-index:' + (i + 1) + '; top:' + (100 + (i * 15)) + 'px;\">\\\r\n      <div class=\"ncs-badge\">' + item.id + '<\/div>\\\r\n      <div class=\"ncs-mockup ncs-mockup-' + item.mockup + '\">' + NCS_MOCKUPS[item.mockup] + '<\/div>\\\r\n      <div class=\"ncs-text\">\\\r\n        <h3>' + item.title + '<\/h3>\\\r\n        <p>' + item.description + '<\/p>\\\r\n      <\/div>\\\r\n      <div class=\"ncs-categories\">\\\r\n        <span class=\"ncs-cat-label\">Categories<\/span>\\\r\n        <div class=\"ncs-tag-list\">' + item.tags.map(function(t){ return '<span class=\"ncs-tag\">' + t + '<\/span>'; }).join('') + '<\/div>\\\r\n      <\/div>\\\r\n    <\/article>';\r\n  }).join('');\r\n\r\n  \/\/ Automatikusan kiszedi az esetleges rejtett overflow tulajdons\u00e1gokat a sz\u00fcl\u0151kt\u0151l (pl. Elementorban)\r\n  function ncsFixAncestorOverflow(el){\r\n    var node = el.parentElement;\r\n    while (node && node !== document.body && node !== document.documentElement) {\r\n      var cs = window.getComputedStyle(node);\r\n      if (cs.overflowY === 'hidden' || cs.overflowY === 'clip' || cs.overflow === 'hidden' || cs.overflow === 'clip') {\r\n        node.style.overflowY = 'visible';\r\n        if (cs.overflow === 'hidden' || cs.overflow === 'clip') {\r\n          node.style.overflow = 'visible';\r\n        }\r\n      }\r\n      node = node.parentElement;\r\n    }\r\n  }\r\n\r\n  var ncsSection = document.querySelector('.ncs-services');\r\n  if (ncsSection) ncsFixAncestorOverflow(ncsSection);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-2561fb7 e-con e-atomic-element e-flexbox-base e-default-div e-59d5b6e \" data-id=\"2561fb7\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"2561fb7\">\n    \t\t<div class=\"elementor-element elementor-element-d42efe4 elementor-widget elementor-widget-html\" data-id=\"d42efe4\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mauve_hidepaged&quot;:&quot;false&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,wght@0,300..900;1,300..900&family=Montserrat:wght@400;500;600;700;800&display=swap');\r\n\r\n.nuance-portfolio {\r\n  --np-bg: #f8f6f0;\r\n  --np-ink: #0a0a0c;\r\n  --np-accent: #d59256;\r\n  --np-muted: rgba(10,10,12,0.5);\r\n  background: var(--np-bg);\r\n  color: var(--np-ink);\r\n  padding: 120px 0 140px;\r\n  overflow: hidden;\r\n  box-sizing: border-box;\r\n}\r\n.nuance-portfolio *,\r\n.nuance-portfolio *::before,\r\n.nuance-portfolio *::after { box-sizing: inherit; }\r\n\r\n.np-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 40px; }\r\n\r\n\/* ---------- Header ---------- *\/\r\n.np-header { text-align: center; margin-bottom: 64px; }\r\n.np-eyebrow {\r\n  display: inline-block;\r\n  font-family: 'Montserrat', sans-serif;\r\n  font-weight: 800;\r\n  font-size: 12px;\r\n  letter-spacing: 0.28em;\r\n  text-transform: uppercase;\r\n  color: var(--np-accent);\r\n  margin-bottom: 18px;\r\n}\r\n.np-heading {\r\n  font-family: 'Fraunces', serif;\r\n  font-weight: 480;\r\n  font-style: normal;\r\n  font-size: clamp(36px, 5.4vw, 68px);\r\n  line-height: 1.05;\r\n  letter-spacing: -0.01em;\r\n  margin: 0 0 40px;\r\n  color: var(--np-ink);\r\n}\r\n.np-heading em {\r\n  font-style: italic;\r\n  font-weight: 340;\r\n  color: var(--np-accent);\r\n}\r\n\r\n.np-filters {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 22px;\r\n  flex-wrap: wrap;\r\n  justify-content: center;\r\n}\r\n.np-filter-btn {\r\n  font-family: 'Montserrat', sans-serif;\r\n  font-weight: 600;\r\n  font-size: 13px;\r\n  letter-spacing: 0.05em;\r\n  text-transform: uppercase;\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 8px 4px;\r\n  color: var(--np-muted);\r\n  position: relative;\r\n  transition: color 0.35s ease;\r\n}\r\n.np-filter-btn::after {\r\n  content: '';\r\n  position: absolute;\r\n  left: 0; right: 0; bottom: 0;\r\n  height: 1px;\r\n  background: var(--np-accent);\r\n  transform: scaleX(0);\r\n  transform-origin: center;\r\n  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n.np-filter-btn:hover { color: var(--np-ink); }\r\n.np-filter-btn.active { color: var(--np-ink); }\r\n.np-filter-btn.active::after { transform: scaleX(1); }\r\n.np-filter-divider {\r\n  width: 22px;\r\n  height: 1px;\r\n  background: rgba(10,10,12,0.18);\r\n  display: inline-block;\r\n}\r\n@media (max-width: 640px) {\r\n  .np-filter-divider { display: none; }\r\n  .np-filters { gap: 14px 20px; }\r\n}\r\n\r\n\/* ---------- Carousel ---------- *\/\r\n.np-carousel {\r\n  position: relative;\r\n  width: 100%;\r\n  padding: 60px 0 30px;\r\n  perspective: 1600px;\r\n  perspective-origin: 50% 50%;\r\n  cursor: grab;\r\n  user-select: none;\r\n  -webkit-user-select: none;\r\n  touch-action: pan-y;\r\n}\r\n.np-carousel.is-dragging { cursor: grabbing; }\r\n.np-carousel.is-dragging .np-card { transition: none !important; }\r\n\r\n.np-track {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 28px;\r\n  width: max-content;\r\n  will-change: transform;\r\n  transform-style: preserve-3d;\r\n}\r\n\r\n.np-card {\r\n  position: relative;\r\n  flex: 0 0 auto;\r\n  width: 300px;\r\n  aspect-ratio: 3 \/ 4;\r\n  border-radius: 24px;\r\n  overflow: hidden;\r\n  background: #1a1a1a;\r\n  transform-style: preserve-3d;\r\n  will-change: transform, opacity;\r\n  transition: opacity 0.15s linear;\r\n  box-shadow: 0 30px 60px -20px rgba(10,10,12,0.35);\r\n}\r\n.np-card.is-hidden { display: none; }\r\n\r\n.np-card-img {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  pointer-events: none;\r\n  -webkit-user-drag: none;\r\n  draggable: false;\r\n}\r\n\r\n.np-card-overlay {\r\n  position: absolute;\r\n  left: 0; right: 0; bottom: 0;\r\n  height: 55%;\r\n  background: linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,0.75) 70%, rgba(10,10,12,0.9) 100%);\r\n  pointer-events: none;\r\n}\r\n\r\n.np-card-text {\r\n  position: absolute;\r\n  left: 24px;\r\n  right: 24px;\r\n  bottom: 22px;\r\n  pointer-events: none;\r\n}\r\n.np-card-title {\r\n  font-family: 'Fraunces', serif;\r\n  font-weight: 560;\r\n  font-size: 21px;\r\n  color: #fff;\r\n  margin: 0 0 4px;\r\n  letter-spacing: -0.01em;\r\n}\r\n.np-card-cat {\r\n  font-family: 'Montserrat', sans-serif;\r\n  font-weight: 500;\r\n  font-size: 12px;\r\n  letter-spacing: 0.04em;\r\n  color: rgba(255,255,255,0.68);\r\n  margin: 0;\r\n}\r\n\r\n@media (max-width: 780px) {\r\n  .np-card { width: 220px; }\r\n  .np-track { gap: 18px; }\r\n  .np-container { padding: 0 20px; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"nuance-portfolio\">\r\n  <div class=\"np-container\">\r\n    <div class=\"np-header\">\r\n      <span class=\"np-eyebrow\">Kiemelt munk\u00e1k<\/span>\r\n      <h2 class=\"np-heading\">N\u00e9h\u00e1ny m\u00e1rka, amit egy\u00fctt  <em>Form\u00e1ltunk<\/em><\/h2>\r\n      <div class=\"np-filters\" id=\"npFilters\" role=\"tablist\" aria-label=\"Filter portfolio by category\">\r\n        <button class=\"np-filter-btn active\" data-filter=\"all\" role=\"tab\" aria-selected=\"true\">Minden<\/button>\r\n        <span class=\"np-filter-divider\" aria-hidden=\"true\"><\/span>\r\n        <button class=\"np-filter-btn\" data-filter=\"web\" role=\"tab\" aria-selected=\"false\">Web Design<\/button>\r\n        <span class=\"np-filter-divider\" aria-hidden=\"true\"><\/span>\r\n        <button class=\"np-filter-btn\" data-filter=\"branding\" role=\"tab\" aria-selected=\"false\">M\u00e1rka\u00e9p\u00edt\u00e9s<\/button>\r\n        <span class=\"np-filter-divider\" aria-hidden=\"true\"><\/span>\r\n        <button class=\"np-filter-btn\" data-filter=\"3d\" role=\"tab\" aria-selected=\"false\">rebrand<\/button>\r\n        <span class=\"np-filter-divider\" aria-hidden=\"true\"><\/span>\r\n        <button class=\"np-filter-btn\" data-filter=\"3d\" role=\"tab\" aria-selected=\"false\">NYOMTATOTT<\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"np-carousel\" id=\"npCarousel\">\r\n      <div class=\"np-track\" id=\"npTrack\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n  var root = document.currentScript.previousElementSibling;\r\n  if (!root || !root.classList || !root.classList.contains('nuance-portfolio')) {\r\n    root = document.querySelector('.nuance-portfolio');\r\n  }\r\n  var carousel = root.querySelector('#npCarousel');\r\n  var track = root.querySelector('#npTrack');\r\n  var filterBar = root.querySelector('#npFilters');\r\n\r\n  var projects = [\r\n    { title: 'Luminal Studio',    cat: 'web',      label: 'Web Design \/ 3D',        seed: 'luminal-studio-11' },\r\n    { title: 'Aura Identity',     cat: 'branding', label: 'Branding & Identity',    seed: 'aura-identity-22' },\r\n    { title: 'Vortex Campaign',   cat: '3d',       label: 'Social Media \/ Motion',  seed: 'vortex-campaign-33' },\r\n    { title: 'Kinetix App',       cat: 'web',      label: 'UI\/UX & Web Design',     seed: 'kinetix-app-44' },\r\n    { title: 'Elysian Editorial', cat: 'branding', label: 'Brand Collateral',       seed: 'elysian-editorial-55' },\r\n    { title: 'Neura AI',          cat: 'branding', label: 'Brand & Digital Ads',    seed: 'neura-ai-66' }\r\n  ];\r\n\r\n  projects.forEach(function (p) {\r\n    var card = document.createElement('div');\r\n    card.className = 'np-card';\r\n    card.dataset.cat = p.cat;\r\n    card.innerHTML =\r\n      '<img decoding=\"async\" class=\"np-card-img\" src=\"https:\/\/picsum.photos\/seed\/' + p.seed + '\/600\/800\" alt=\"' + p.title + '\" draggable=\"false\">' +\r\n      '<div class=\"np-card-overlay\"><\/div>' +\r\n      '<div class=\"np-card-text\">' +\r\n        '<p class=\"np-card-title\">' + p.title + '<\/p>' +\r\n        '<p class=\"np-card-cat\">' + p.label + '<\/p>' +\r\n      '<\/div>';\r\n    track.appendChild(card);\r\n  });\r\n\r\n  var cards = Array.prototype.slice.call(track.querySelectorAll('.np-card'));\r\n\r\n  \/* ---------------- 3D arc rendering ---------------- *\/\r\n  function renderArc() {\r\n    var cRect = carousel.getBoundingClientRect();\r\n    var centerX = cRect.left + cRect.width \/ 2;\r\n    var half = cRect.width \/ 2 || 1;\r\n\r\n    cards.forEach(function (card) {\r\n      if (card.classList.contains('is-hidden')) return;\r\n      var rect = card.getBoundingClientRect();\r\n      var cardCenter = rect.left + rect.width \/ 2;\r\n      var norm = (cardCenter - centerX) \/ half;\r\n      var clamped = Math.max(-1.5, Math.min(1.5, norm));\r\n      var absD = Math.min(Math.abs(clamped), 1);\r\n\r\n      var scale = 1.08 - absD * 0.23;\r\n      var rotateY = clamped * -26;\r\n      var translateZ = -absD * 140;\r\n      var opacity = 1 - absD * 0.3;\r\n\r\n      card.style.transform =\r\n        'translateZ(' + translateZ.toFixed(1) + 'px) rotateY(' + rotateY.toFixed(2) + 'deg) scale(' + scale.toFixed(3) + ')';\r\n      card.style.opacity = opacity.toFixed(3);\r\n      card.style.zIndex = Math.round((1 - absD) * 100);\r\n    });\r\n  }\r\n\r\n  \/* ---------------- Drag \/ momentum physics ---------------- *\/\r\n  var posX = 0;\r\n  var velocity = 0;\r\n  var isDragging = false;\r\n  var dragStartX = 0;\r\n  var dragStartPos = 0;\r\n  var lastMoveX = 0;\r\n  var lastMoveT = 0;\r\n  var rafId = null;\r\n  var FRICTION = 0.945;\r\n  var VELOCITY_STOP = 0.03;\r\n  var EDGE_STIFFNESS = 0.35;\r\n\r\n  function bounds() {\r\n    var trackWidth = track.scrollWidth;\r\n    var containerWidth = carousel.clientWidth;\r\n    var maxTravel = Math.max(0, trackWidth - containerWidth);\r\n    var edgePad = containerWidth \/ 2 - (cards[0] ? cards[0].offsetWidth \/ 2 : 0);\r\n    return { min: -maxTravel - edgePad, max: edgePad };\r\n  }\r\n\r\n  function applyTransform() {\r\n    track.style.transform = 'translateX(' + posX.toFixed(2) + 'px)';\r\n    renderArc();\r\n  }\r\n\r\n  function clampWithRubberBand(value) {\r\n    var b = bounds();\r\n    if (value > b.max) return b.max + (value - b.max) * EDGE_STIFFNESS;\r\n    if (value < b.min) return b.min + (value - b.min) * EDGE_STIFFNESS;\r\n    return value;\r\n  }\r\n\r\n  function settleToBounds() {\r\n    var b = bounds();\r\n    if (posX > b.max) { posX += (b.max - posX) * 0.18; }\r\n    else if (posX < b.min) { posX += (b.min - posX) * 0.18; }\r\n  }\r\n\r\n  function loop() {\r\n    var b = bounds();\r\n    var outOfBounds = posX > b.max || posX < b.min;\r\n\r\n    if (!isDragging) {\r\n      if (Math.abs(velocity) > VELOCITY_STOP) {\r\n        posX += velocity;\r\n        velocity *= FRICTION;\r\n      } else {\r\n        velocity = 0;\r\n      }\r\n      if (outOfBounds) {\r\n        settleToBounds();\r\n        velocity *= 0.7;\r\n      }\r\n    }\r\n\r\n    applyTransform();\r\n\r\n    if (isDragging || Math.abs(velocity) > VELOCITY_STOP || outOfBounds) {\r\n      rafId = requestAnimationFrame(loop);\r\n    } else {\r\n      rafId = null;\r\n    }\r\n  }\r\n\r\n  function startLoop() {\r\n    if (!rafId) rafId = requestAnimationFrame(loop);\r\n  }\r\n\r\n  function getX(e) {\r\n    return (e.touches && e.touches.length) ? e.touches[0].clientX : e.clientX;\r\n  }\r\n\r\n  function onPointerDown(e) {\r\n    if (e.button !== undefined && e.button !== 0) return;\r\n    isDragging = true;\r\n    velocity = 0;\r\n    carousel.classList.add('is-dragging');\r\n    var x = getX(e);\r\n    dragStartX = x;\r\n    dragStartPos = posX;\r\n    lastMoveX = x;\r\n    lastMoveT = performance.now();\r\n    startLoop();\r\n    window.addEventListener('mousemove', onPointerMove);\r\n    window.addEventListener('mouseup', onPointerUp);\r\n    window.addEventListener('touchmove', onPointerMove, { passive: false });\r\n    window.addEventListener('touchend', onPointerUp);\r\n  }\r\n\r\n  function onPointerMove(e) {\r\n    if (!isDragging) return;\r\n    if (e.cancelable) e.preventDefault();\r\n    var x = getX(e);\r\n    var delta = x - dragStartX;\r\n    var target = dragStartPos + delta;\r\n    posX = clampWithRubberBand(target);\r\n\r\n    var now = performance.now();\r\n    var dt = now - lastMoveT;\r\n    if (dt > 0) {\r\n      velocity = (x - lastMoveX) \/ dt * 16.7; \/* normalize to ~60fps px\/frame *\/\r\n    }\r\n    lastMoveX = x;\r\n    lastMoveT = now;\r\n  }\r\n\r\n  function onPointerUp() {\r\n    if (!isDragging) return;\r\n    isDragging = false;\r\n    carousel.classList.remove('is-dragging');\r\n    startLoop();\r\n    window.removeEventListener('mousemove', onPointerMove);\r\n    window.removeEventListener('mouseup', onPointerUp);\r\n    window.removeEventListener('touchmove', onPointerMove);\r\n    window.removeEventListener('touchend', onPointerUp);\r\n  }\r\n\r\n  carousel.addEventListener('mousedown', onPointerDown);\r\n  carousel.addEventListener('touchstart', onPointerDown, { passive: true });\r\n  carousel.addEventListener('dragstart', function (e) { e.preventDefault(); });\r\n\r\n  \/* ---------------- Filtering ---------------- *\/\r\n  filterBar.addEventListener('click', function (e) {\r\n    var btn = e.target.closest('.np-filter-btn');\r\n    if (!btn) return;\r\n    var filter = btn.dataset.filter;\r\n\r\n    Array.prototype.forEach.call(filterBar.querySelectorAll('.np-filter-btn'), function (b) {\r\n      var active = b === btn;\r\n      b.classList.toggle('active', active);\r\n      b.setAttribute('aria-selected', active ? 'true' : 'false');\r\n    });\r\n\r\n    cards.forEach(function (card) {\r\n      var show = filter === 'all' || card.dataset.cat === filter;\r\n      card.classList.toggle('is-hidden', !show);\r\n    });\r\n\r\n    \/* Recenter after filtering so remaining cards stay in bounds *\/\r\n    posX = clampWithRubberBand(posX);\r\n    velocity = 0;\r\n    startLoop();\r\n  });\r\n\r\n  \/* ---------------- Init ---------------- *\/\r\n  function centerCarousel() {\r\n    var target = (carousel.clientWidth - track.scrollWidth) \/ 2;\r\n    posX = clampWithRubberBand(target);\r\n    applyTransform();\r\n  }\r\n\r\n  window.addEventListener('resize', function () {\r\n    posX = clampWithRubberBand(posX);\r\n    applyTransform();\r\n  });\r\n\r\n  if (document.fonts && document.fonts.ready) {\r\n    document.fonts.ready.then(function () {\r\n      requestAnimationFrame(centerCarousel);\r\n    });\r\n  }\r\n  requestAnimationFrame(centerCarousel);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-57499b8 e-con e-atomic-element e-flexbox-base e-default-div e-dcd443e \" data-id=\"57499b8\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"57499b8\">\n    \t\t<div class=\"elementor-element elementor-element-375a733 elementor-widget elementor-widget-html\" data-id=\"375a733\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mauve_hidepaged&quot;:&quot;false&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"utf-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n<title>NUANCE \u2014 Particle Sphere Scroll Section<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Montserrat:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n  html, body { margin:0; padding:0; background:#f8f6f0; }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"nuance-sphere\">\r\n  <div class=\"nuance-sphere__pin\" id=\"nsPin\">\r\n\r\n    <div class=\"ambient-background\">\r\n      <div class=\"blob blob-1\"><\/div>\r\n      <div class=\"blob blob-2\"><\/div>\r\n      <div class=\"blob blob-3\"><\/div>\r\n    <\/div>\r\n\r\n    <canvas class=\"nuance-sphere__canvas\" id=\"nsCanvas\"><\/canvas>\r\n\r\n    <!-- F\u00e1zis 1: bal c\u00edm -->\r\n    <div class=\"ns-phase1 ns-side ns-side--left\" id=\"nsLeft\">\r\n      <h2>Egy m\u00e1rka akkor m\u0171k\u00f6dik,<br>ha minden ugyanazt az ir\u00e1nyt <em>er\u0151s\u00edti.<\/em><\/h2>\r\n    <\/div>\r\n\r\n    <!-- F\u00e1zis 1: jobb le\u00edr\u00e1s -->\r\n    <div class=\"ns-phase1 ns-side ns-side--right\" id=\"nsRight\">\r\n      <p><strong>A strat\u00e9gia<\/strong> meghat\u00e1rozza, merre tartasz. <br> <strong>A kommunik\u00e1ci\u00f3<\/strong> elmondja, mi\u00e9rt \u00e9rdemes t\u00e9ged v\u00e1lasztani. <br> <strong>A vizu\u00e1lis megjelen\u00e9s<\/strong> felismerhet\u0151v\u00e9 tesz, a digit\u00e1lis fel\u00fcleteid pedig seg\u00edtenek kapcsolatba l\u00e9pni veled.<\/span><\/p>\r\n    <\/div>\r\n\r\n    <!-- F\u00e1zis 2: k\u00f6z\u00e9ps\u0151 c\u00edm -->\r\n    <div class=\"ns-phase2 ns-center\" id=\"nsCenter\">\r\n      <h2>A gondolatt\u00f3l<br>a M\u00e1rk\u00e1ig.<\/h2>\r\n      <p> A m\u00e1rk\u00e1d nem csak abb\u00f3l \u00e1ll, amit az emberek l\u00e1tnak bel\u0151le. Ugyanilyen fontos, mit k\u00e9pvisel, hogyan sz\u00f3lal meg, \u00e9s hogyan kapcsol\u00f3dnak \u00f6ssze ezek a r\u00e9szletek.<\/span><\/p>\r\n    <\/div>\r\n\r\n    <!-- 4 lebeg\u0151 pill -->\r\n    <div class=\"ns-pill\" id=\"pillUx\" data-x1=\"34\" data-y1=\"41\" data-x2=\"6\" data-y2=\"8\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><path d=\"M12 2l3 7 7 1-5.5 5 1.5 7-6-3.5L6 22l1.5-7L2 10l7-1z\"\/><\/svg>\r\n      MIT K\u00c9PVISELSZ?\r\n    <\/div>\r\n    <div class=\"ns-pill\" id=\"pillDev\" data-x1=\"66\" data-y1=\"41\" data-x2=\"94\" data-y2=\"8\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><path d=\"M4 6h16M4 12h10M4 18h16\" stroke-linecap=\"round\"\/><\/svg>\r\n      HOGYAN JUT EL M\u00c1SOKHOZ?\r\n    <\/div>\r\n    <div class=\"ns-pill\" id=\"pillBrand\" data-x1=\"33\" data-y1=\"70\" data-x2=\"6\" data-y2=\"92\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><circle cx=\"9\" cy=\"9\" r=\"5\"\/><circle cx=\"15\" cy=\"15\" r=\"5\"\/><\/svg>\r\n      MIT MUTATSZ MAGADB\u00d3L?\r\n    <\/div>\r\n    <div class=\"ns-pill\" id=\"pill3d\" data-x1=\"67\" data-y1=\"70\" data-x2=\"94\" data-y2=\"92\">\r\n      <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><path d=\"M12 2l9 5v10l-9 5-9-5V7z\"\/><path d=\"M3 7l9 5 9-5M12 12v10\"\/><\/svg>\r\n      MIT MONDASZ?\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  .nuance-sphere {\r\n    position: relative;\r\n    z-index: 2;\r\n    margin-top: 0;\r\n    height: 220vh;\r\n    border-radius: 40px 40px 0 0;\r\n    background: #f8f6f0;\r\n    font-family: 'Montserrat', sans-serif;\r\n  }\r\n\r\n  .nuance-sphere__pin {\r\n    position: sticky;\r\n    top: 0;\r\n    height: 100dvh;\r\n    height: 100vh;\r\n    overflow: hidden;\r\n    border-radius: 40px 40px 0 0;\r\n  }\r\n\r\n  \/* --- Ambient h\u00e1tt\u00e9r (bal 1-es blob lejjebb tolva, hogy fent feh\u00e9r maradjon) --- *\/\r\n  .ambient-background {\r\n    position: absolute;\r\n    inset: 0;\r\n    overflow: hidden;\r\n    pointer-events: none;\r\n    z-index: 0;\r\n  }\r\n  .blob {\r\n    position: absolute;\r\n    border-radius: 50%;\r\n    filter: blur(85px);\r\n    mix-blend-mode: multiply;\r\n    will-change: transform, opacity;\r\n  }\r\n  .blob-1 {\r\n    width: 55vw; height: 55vw; max-width: 750px; max-height: 750px;\r\n    background: #d59256; top: 15%; left: -10%; \/* Lejebb helyezve a tetej\u00e9t\u0151l *\/\r\n    animation: blobBreathing1 14s ease-in-out infinite alternate;\r\n  }\r\n  .blob-2 {\r\n    width: 48vw; height: 48vw; max-width: 620px; max-height: 620px;\r\n    background: #e8ab6f; bottom: -10%; right: -5%;\r\n    animation: blobBreathing2 18s ease-in-out infinite alternate;\r\n  }\r\n  .blob-3 {\r\n    width: 40vw; height: 40vw; max-width: 500px; max-height: 500px;\r\n    background: #c17b3e; top: 30%; left: 30%;\r\n    animation: blobBreathing3 20s ease-in-out infinite alternate;\r\n  }\r\n  @keyframes blobBreathing1 {\r\n    0% { transform: translate3d(0,0,0) scale(0.9); opacity:0.2; }\r\n    50% { opacity:0.5; }\r\n    100% { transform: translate3d(10%,8%,0) scale(1.05); opacity:0.3; }\r\n  }\r\n  @keyframes blobBreathing2 {\r\n    0% { transform: translate3d(0,0,0) scale(1.05); opacity:0.55; }\r\n    50% { opacity:0.2; }\r\n    100% { transform: translate3d(-15%,-8%,0) scale(0.92); opacity:0.5; }\r\n  }\r\n  @keyframes blobBreathing3 {\r\n    0% { transform: translate3d(0,0,0) scale(0.85); opacity:0.15; }\r\n    60% { opacity:0.45; }\r\n    100% { transform: translate3d(8%,-15%,0) scale(1.08); opacity:0.2; }\r\n  }\r\n\r\n  \/* --- R\u00e9szecskeg\u00f6mb canvas --- *\/\r\n  .nuance-sphere__canvas {\r\n    position: absolute;\r\n    top: 50%; left: 50%;\r\n    width: min(56vw, 620px);\r\n    height: min(56vw, 620px);\r\n    transform: translate(-50%, -50%);\r\n    z-index: 1;\r\n    will-change: transform, opacity, filter;\r\n  }\r\n\r\n  \/* --- F\u00e1zis 1 sz\u00f6vegek (bal \/ jobb) --- *\/\r\n  .ns-side {\r\n    position: absolute;\r\n    top: 8%;\r\n    z-index: 3;\r\n    max-width: 600px;\r\n    will-change: opacity, transform;\r\n  }\r\n  .ns-side--left { left: 6%; text-align: left; }\r\n  .ns-side--right { right: 6%; text-align: right; }\r\n\r\n  .ns-side h2 {\r\n    font-family: 'Fraunces', serif;\r\n    font-weight: 400;\r\n    font-size: clamp(24px, 2.6vw, 34px);\r\n    line-height: 1.15;\r\n    letter-spacing: -0.01em;\r\n    color: #0a0a0c;\r\n    margin: 0;\r\n  }\r\n  .ns-side h2 em { font-style: normal; font-weight: 600; }\r\n\r\n  .ns-side p {\r\n    font-size: clamp(13px, 1.1vw, 20px);\r\n    line-height: 1.6;\r\n    color: #0a0a0c;\r\n    margin: 0;\r\n  }\r\n  .ns-side p span { color: #a1a1aa; }\r\n\r\n  \/* --- F\u00e1zis 2 k\u00f6z\u00e9ps\u0151 c\u00edm --- *\/\r\n  .ns-center {\r\n    position: absolute;\r\n    top: 50%; left: 50%;\r\n    transform: translate(-50%, calc(-50% + 20px));\r\n    z-index: 3;\r\n    text-align: center;\r\n    max-width: 90vw;\r\n    opacity: 0;\r\n    will-change: opacity, transform;\r\n  }\r\n  .ns-center h2 {\r\n    font-family: 'Fraunces', serif;\r\n    font-weight: 400;\r\n    font-size: clamp(34px, 6vw, 76px);\r\n    line-height: 1.05;\r\n    letter-spacing: -0.02em;\r\n    color: #0a0a0c;\r\n    margin: 0 0 18px;\r\n  }\r\n  .ns-center p {\r\n    font-size: clamp(14px, 1.6vw, 18px);\r\n    line-height: 1.6;\r\n    color: #0a0a0c;\r\n    margin: 0;\r\n  }\r\n  .ns-center p span { color: #a1a1aa; }\r\n\r\n  \/* --- Lebeg\u0151 pill gombok --- *\/\r\n  .ns-pill {\r\n    position: absolute;\r\n    top: 0; left: 0;\r\n    z-index: 4;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 12px 20px;\r\n    border-radius: 999px;\r\n    background: rgba(248, 246, 240, 0.75);\r\n    backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    border: 1px solid rgba(10, 10, 12, 0.1);\r\n    color: #0a0a0c;\r\n    font-family: 'Montserrat', sans-serif;\r\n    font-size: clamp(12px, 1.1vw, 14.5px);\r\n    font-weight: 500;\r\n    white-space: nowrap;\r\n    transform: translate(-50%, -50%);\r\n    will-change: left, top;\r\n  }\r\n  .ns-pill svg { flex: 0 0 auto; opacity: 0.75; }\r\n\r\n  \/* --- Reszponz\u00edv \/ Mobil optimaliz\u00e1l\u00e1s --- *\/\r\n  @media (max-width: 860px) {\r\n    .nuance-sphere { height: 180vh; }\r\n    .ns-side {\r\n      max-width: 88vw;\r\n      top: 5%;\r\n      left: 6% !important;\r\n      right: auto !important;\r\n      text-align: left !important;\r\n    }\r\n    .ns-side--right {\r\n      top: 18%; \/* Elcs\u00fasztatva, hogy ne l\u00f3gjanak egym\u00e1sba mobilon *\/\r\n    }\r\n    .ns-side h2 { font-size: clamp(20px, 5vw, 26px); }\r\n    .ns-side p { font-size: 12px; }\r\n    \r\n    .nuance-sphere__canvas { \r\n      width: min(65vw, 320px); \r\n      height: min(65vw, 320px); \r\n      top: 55%;\r\n    }\r\n    .ns-center h2 { font-size: clamp(26px, 7vw, 38px); }\r\n    .ns-center p { font-size: 13px; }\r\n    .ns-pill { padding: 8px 12px; font-size: 10.5px; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n  const pin = document.getElementById('nsPin');\r\n  const section = document.querySelector('.nuance-sphere');\r\n  const canvas = document.getElementById('nsCanvas');\r\n  const ctx = canvas.getContext('2d');\r\n\r\n  const left = document.getElementById('nsLeft');\r\n  const right = document.getElementById('nsRight');\r\n  const center = document.getElementById('nsCenter');\r\n  const pills = [\r\n    document.getElementById('pillUx'),\r\n    document.getElementById('pillDev'),\r\n    document.getElementById('pillBrand'),\r\n    document.getElementById('pill3d'),\r\n  ];\r\n\r\n  function createRng(seed) {\r\n    let s = seed >>> 0;\r\n    return () => {\r\n      s ^= s << 13; s ^= s >>> 17; s ^= s << 5;\r\n      return ((s >>> 0) % 1000000) \/ 1000000;\r\n    };\r\n  }\r\n  const rng = createRng(4242);\r\n\r\n  const COLOR_STOPS = [\r\n    { r: 213, g: 146, b: 86 }, \r\n    { r: 193, g: 123, b: 62 }, \r\n    { r: 110, g: 68,  b: 35 }, \r\n  ];\r\n  function sampleWarmColor(t) {\r\n    const seg = t * (COLOR_STOPS.length - 1);\r\n    const i = Math.min(COLOR_STOPS.length - 2, Math.floor(seg));\r\n    const localT = seg - i;\r\n    const a = COLOR_STOPS[i], b = COLOR_STOPS[i + 1];\r\n    return {\r\n      r: a.r + (b.r - a.r) * localT,\r\n      g: a.g + (b.g - a.g) * localT,\r\n      b: a.b + (b.b - a.b) * localT,\r\n    };\r\n  }\r\n  const SPRITE_STEPS = 16;\r\n  const sprites = [];\r\n  for (let i = 0; i < SPRITE_STEPS; i++) {\r\n    const col = sampleWarmColor(i \/ (SPRITE_STEPS - 1));\r\n    const sc = document.createElement('canvas');\r\n    sc.width = sc.height = 24;\r\n    const sctx = sc.getContext('2d');\r\n    const g = sctx.createRadialGradient(12, 12, 0, 12, 12, 12);\r\n    g.addColorStop(0, `rgba(${col.r | 0}, ${col.g | 0}, ${col.b | 0}, 1)`);\r\n    g.addColorStop(0.55, `rgba(${col.r | 0}, ${col.g | 0}, ${col.b | 0}, 0.65)`);\r\n    g.addColorStop(1, `rgba(${col.r | 0}, ${col.g | 0}, ${col.b | 0}, 0)`);\r\n    sctx.fillStyle = g;\r\n    sctx.fillRect(0, 0, 24, 24);\r\n    sprites.push(sc);\r\n  }\r\n\r\n  const POINT_COUNT = 3800;\r\n  const points = [];\r\n  for (let i = 0; i < POINT_COUNT; i++) {\r\n    const azimuth = rng() * Math.PI * 2;\r\n    const costheta = 2 * rng() - 1;\r\n    const theta = Math.acos(costheta);\r\n    const nearShell = rng() < 0.46;\r\n    const r = nearShell ? 0.86 + rng() * 0.14 : Math.cbrt(rng()) * 0.9;\r\n\r\n    points.push({\r\n      x: Math.sin(theta) * Math.cos(azimuth) * r,\r\n      y: Math.cos(theta) * r,\r\n      z: Math.sin(theta) * Math.sin(azimuth) * r,\r\n      baseSize: nearShell ? 1.7 + rng() * 2.1 : 0.9 + rng() * 1.5,\r\n      colorIdx: Math.min(SPRITE_STEPS - 1, Math.floor(rng() * SPRITE_STEPS)),\r\n      nfx: 0.15 + rng() * 0.3, nfy: 0.15 + rng() * 0.3, nfz: 0.15 + rng() * 0.3,\r\n      npx: rng() * Math.PI * 2, npy: rng() * Math.PI * 2, npz: rng() * Math.PI * 2,\r\n      namp: 0.025 + rng() * 0.035,\r\n    });\r\n  }\r\n\r\n  function resizeCanvas() {\r\n    const rect = canvas.getBoundingClientRect();\r\n    const dpr = Math.min(window.devicePixelRatio || 1, 2);\r\n    canvas.width = rect.width * dpr;\r\n    canvas.height = rect.height * dpr;\r\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\r\n  }\r\n  window.addEventListener('resize', resizeCanvas);\r\n  resizeCanvas();\r\n\r\n  let rotation = 0;\r\n  const sortBuffer = new Array(POINT_COUNT);\r\n\r\n  function drawSphere(t) {\r\n    const w = canvas.clientWidth, h = canvas.clientHeight;\r\n    ctx.clearRect(0, 0, w, h);\r\n    const cx = w \/ 2, cy = h \/ 2;\r\n    const radius = Math.min(w, h) * 0.46;\r\n\r\n    const cosR = Math.cos(rotation), sinR = Math.sin(rotation);\r\n\r\n    for (let i = 0; i < POINT_COUNT; i++) {\r\n      const p = points[i];\r\n      const nx = p.x + Math.sin(t * p.nfx + p.npx) * p.namp;\r\n      const ny = p.y + Math.cos(t * p.nfy + p.npy) * p.namp;\r\n      const nz = p.z + Math.sin(t * p.nfz + p.npz) * p.namp;\r\n\r\n      const x = nx * cosR - nz * sinR;\r\n      const z = nx * sinR + nz * cosR;\r\n\r\n      let o = sortBuffer[i];\r\n      if (!o) { o = {}; sortBuffer[i] = o; }\r\n      o.x = x; o.y = ny; o.z = z;\r\n      o.baseSize = p.baseSize; o.colorIdx = p.colorIdx;\r\n    }\r\n\r\n    sortBuffer.sort((a, b) => a.z - b.z);\r\n\r\n    ctx.save();\r\n    for (let i = 0; i < POINT_COUNT; i++) {\r\n      const o = sortBuffer[i];\r\n      const depth = (o.z + 1) \/ 2;\r\n\r\n      const perspective = 0.7 + depth * 0.55;\r\n      const px = cx + o.x * radius * perspective;\r\n      const py = cy + o.y * radius * perspective;\r\n\r\n      const sizeScale = 0.4 + depth * 1.35;\r\n      const s = o.baseSize * sizeScale * (radius \/ 230);\r\n      const alpha = depth < 0.5\r\n        ? 0.1 + (depth \/ 0.5) * 0.25        \r\n        : 0.35 + ((depth - 0.5) \/ 0.5) * 0.6; \r\n\r\n      ctx.globalAlpha = alpha;\r\n      ctx.drawImage(sprites[o.colorIdx], px - s \/ 2, py - s \/ 2, s, s);\r\n    }\r\n    ctx.restore();\r\n    ctx.globalAlpha = 1;\r\n  }\r\n\r\n  function clamp(v, min, max) { return Math.max(min, Math.min(max, v)); }\r\n  function rangeProgress(p, start, end) { return clamp((p - start) \/ (end - start), 0, 1); }\r\n  function lerp(a, b, t) { return a + (b - a) * t; }\r\n  function ease(t) { return t * t * (3 - 2 * t); }\r\n\r\n  function getProgress() {\r\n    const rect = section.getBoundingClientRect();\r\n    const scrollable = section.offsetHeight - window.innerHeight;\r\n    if (scrollable <= 0) return 0;\r\n    return clamp(-rect.top \/ scrollable, 0, 1);\r\n  }\r\n\r\n  function applyFrame() {\r\n    const raw = getProgress();\r\n    const p = ease(raw);\r\n\r\n    const fadeOut = 1 - rangeProgress(p, 0, 0.35);\r\n    left.style.opacity = fadeOut;\r\n    right.style.opacity = fadeOut;\r\n    left.style.transform = `translateY(${lerp(0, -14, 1 - fadeOut)}px)`;\r\n    right.style.transform = `translateY(${lerp(0, -14, 1 - fadeOut)}px)`;\r\n\r\n    const fadeIn = rangeProgress(p, 0.28, 0.85);\r\n    center.style.opacity = fadeIn;\r\n    center.style.transform = `translate(-50%, calc(-50% + ${lerp(24, 0, fadeIn)}px))`;\r\n\r\n    const sphereT = rangeProgress(p, 0, 1);\r\n    const sphereScale = lerp(1, 0.86, sphereT);\r\n    const sphereOpacity = lerp(1, 0.55, sphereT);\r\n    const sphereBlur = lerp(0, 1.5, sphereT);\r\n    canvas.style.transform = `translate(-50%, -50%) scale(${sphereScale})`;\r\n    canvas.style.opacity = sphereOpacity;\r\n    canvas.style.filter = `blur(${sphereBlur}px)`;\r\n\r\n    for (const pill of pills) {\r\n      const x1 = parseFloat(pill.dataset.x1);\r\n      const y1 = parseFloat(pill.dataset.y1);\r\n      const x2 = parseFloat(pill.dataset.x2);\r\n      const y2 = parseFloat(pill.dataset.y2);\r\n      pill.style.left = lerp(x1, x2, p) + 'vw';\r\n      pill.style.top = lerp(y1, y2, p) + 'vh';\r\n    }\r\n  }\r\n\r\n  let ticking = false;\r\n  function onScroll() {\r\n    if (!ticking) {\r\n      ticking = true;\r\n      requestAnimationFrame(() => { applyFrame(); ticking = false; });\r\n    }\r\n  }\r\n  window.addEventListener('scroll', onScroll, { passive: true });\r\n  window.addEventListener('resize', onScroll);\r\n\r\n  const clock0 = performance.now();\r\n  function animate(now) {\r\n    const t = (now - clock0) \/ 1000;\r\n    rotation += 0.0025;\r\n    drawSphere(t);\r\n    requestAnimationFrame(animate);\r\n  }\r\n  requestAnimationFrame(animate);\r\n  applyFrame();\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-35925a1 e-con e-atomic-element e-flexbox-base e-default-div e-4a02532 \" data-id=\"35925a1\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"35925a1\">\n    \t\t<div class=\"elementor-element elementor-element-53fc1df elementor-widget elementor-widget-html\" data-id=\"53fc1df\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mauve_hidepaged&quot;:&quot;false&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Montserrat:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<section class=\"nuance-brandcompass\">\r\n  <div class=\"nbc-wrap\">\r\n\r\n    <!-- Bal oldal: k\u00e9p. Csere: \u00edrd be a k\u00e9p c\u00edm\u00e9t a data-src attrib\u00fatumba (\u00fcresen a k\u00e9phely l\u00e1tszik). -->\r\n    <div class=\"nbc-media nbc-r\">\r\n      <div class=\"nbc-img\" data-src=\"\" data-alt=\"Brand Compass vizu\u00e1l\">\r\n        <span class=\"nbc-ph-label\">Brand Compass \u00b7 online tananyag<\/span>\r\n        <span class=\"nbc-ph-note\">K\u00e9p helye \u00b7 4:5<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Jobb oldal: tartalom -->\r\n    <div class=\"nbc-content nbc-r\">\r\n      <p class=\"nbc-eyebrow\">HAMAROSAN \u00c9RKEZIK \u00b7 DIGIT\u00c1LIS TANANYAG<\/p>\r\n      <h2 class=\"nbc-title\">Brand Compass<\/h2>\r\n      <p class=\"nbc-lead\">Online, vide\u00f3s tananyag a saj\u00e1t m\u00e1rk\u00e1d fel\u00e9p\u00edt\u00e9s\u00e9hez.<\/p>\r\n      <p class=\"nbc-text\">Nem konzult\u00e1ci\u00f3 \u00e9s nem szem\u00e9lyes program: egy tananyag, amit \u00f6n\u00e1ll\u00f3an, a saj\u00e1t temp\u00f3dban viszel v\u00e9gig. K\u00f6zben a saj\u00e1t m\u00e1rk\u00e1don dolgozol, \u00edgy nem csak meg\u00e9rted, hogyan \u00e1ll \u00f6ssze a teljes k\u00e9p, hanem r\u00f6gt\u00f6n alkalmazod is.<\/p>\r\n\r\n      <ul class=\"nbc-facts\">\r\n        <li>Online vide\u00f3s tananyag<\/li>\r\n        <li>\u00d6n\u00e1ll\u00f3an, saj\u00e1t temp\u00f3ban<\/li>\r\n        <li>Let\u00f6lthet\u0151 seg\u00e9danyagokkal<\/li>\r\n        <li>A saj\u00e1t m\u00e1rk\u00e1don dolgozol<\/li>\r\n      <\/ul>\r\n\r\n      <p class=\"nbc-text\">\u00c1tl\u00e1tod a m\u00e1rka eg\u00e9sz\u00e9t, \u00e9rted az egyes ter\u00fcletek m\u0171k\u00f6d\u00e9s\u00e9t, \u00e9s megl\u00e1tod, hogyan f\u00fcggenek \u00f6ssze.<\/p>\r\n\r\n      <p class=\"nbc-status\"><span aria-hidden=\"true\"><\/span>HAMAROSAN<\/p>\r\n      <p class=\"nbc-sub\">M\u00e9g nem v\u00e1s\u00e1rolhat\u00f3. Iratkozz fel, \u00e9s els\u0151k\u00e9nt sz\u00f3lok, amikor elindul. A r\u00e9szleteket is elk\u00fcld\u00f6m, hogy tudd, mire sz\u00e1m\u00edthatsz.<\/p>\r\n\r\n      <form class=\"nbc-form\" novalidate>\r\n        <label class=\"nbc-vh\" for=\"nbc-email\">E-mail-c\u00edm<\/label>\r\n        <div class=\"nbc-row\">\r\n          <input id=\"nbc-email\" type=\"email\" name=\"email\" placeholder=\"E-mail-c\u00edm\" autocomplete=\"email\" required>\r\n          <button type=\"submit\" class=\"nbc-btn\">K\u00e9rek \u00e9rtes\u00edt\u00e9st <span aria-hidden=\"true\">\u2197<\/span><\/button>\r\n        <\/div>\r\n        <input class=\"nbc-hp\" type=\"text\" name=\"website\" tabindex=\"-1\" autocomplete=\"off\" aria-hidden=\"true\">\r\n        <label class=\"nbc-consent\">\r\n          <input type=\"checkbox\" name=\"consent\" required>\r\n          <span>Hozz\u00e1j\u00e1rulok, hogy a Brand Compass indul\u00e1s\u00e1r\u00f3l e-mailben \u00e9rtes\u00edtsetek. <a class=\"nbc-privacy\" href=\"#\" data-nbc-privacy>Adatkezel\u00e9si t\u00e1j\u00e9koztat\u00f3<\/a><\/span>\r\n        <\/label>\r\n        <p class=\"nbc-msg\" role=\"status\" aria-live=\"polite\"><\/p>\r\n      <\/form>\r\n\r\n      <details class=\"nbc-more\">\r\n        <summary>Tov\u00e1bbi r\u00e9szletek<\/summary>\r\n        <p>Vide\u00f3s leck\u00e9k, amelyeket a saj\u00e1t temp\u00f3dban n\u00e9zhetsz meg, \u00e9s let\u00f6lthet\u0151 seg\u00e9danyagok, amelyekkel k\u00f6zben a saj\u00e1t m\u00e1rk\u00e1dat \u00e9p\u00edted. Te d\u00f6nt\u00f6d el, mikor \u00e9s mennyit haladsz.<\/p>\r\n        <!-- K\u00e9s\u0151bb b\u0151v\u00edthet\u0151: ide \u00fajabb bekezd\u00e9sek vagy lista ker\u00fclhetnek. -->\r\n      <\/details>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <style>\r\n    .nuance-brandcompass {\r\n      --bg: #fffdf9; --ink: #0a0a0c; --dim: #3f3f46; --line: #e2ded6; --acc: #E59E5C;\r\n      --serif: 'Fraunces', serif; --sans: 'Montserrat', sans-serif;\r\n      position: relative; width: 100%; background: var(--bg); color: var(--ink);\r\n      font-family: var(--sans); font-size: 17px; line-height: 1.7; overflow: hidden; -webkit-font-smoothing: antialiased;\r\n    }\r\n    .nuance-brandcompass *, .nuance-brandcompass *::before, .nuance-brandcompass *::after { box-sizing: border-box; }\r\n    .nuance-brandcompass .nbc-wrap {\r\n      max-width: 1320px; margin: 0 auto; padding: clamp(80px, 10vw, 150px) 5vw;\r\n      display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2.2vw; row-gap: 48px; align-items: center;\r\n    }\r\n    .nuance-brandcompass .nbc-media { grid-column: 1 \/ 7; }\r\n    .nuance-brandcompass .nbc-content { grid-column: 8 \/ 13; }\r\n\r\n    \/* k\u00e9phely \u2013 k\u00e9s\u0151bb k\u00f6nnyen cser\u00e9lhet\u0151 *\/\r\n    .nuance-brandcompass .nbc-img { position: relative; width: 100%; aspect-ratio: 4 \/ 5; overflow: hidden;\r\n      border: 1px dashed rgba(229,158,92,.8); border-radius: 4px;\r\n      background: radial-gradient(70% 55% at 30% 20%, rgba(229,158,92,.16), transparent 65%), linear-gradient(150deg, #fff, #f5f0e8); }\r\n    .nuance-brandcompass .nbc-ph-label { position: absolute; left: 18px; top: 16px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }\r\n    .nuance-brandcompass .nbc-ph-note { position: absolute; right: 18px; bottom: 14px; font-family: var(--serif); font-size: 15px; color: var(--acc); }\r\n    .nuance-brandcompass .nbc-img.nbc-has { border: 0; aspect-ratio: auto; background: #f3f1ec; }\r\n    .nuance-brandcompass .nbc-img.nbc-has img { display: block; width: 100%; height: auto; max-width: 100%; margin: 0; }\r\n\r\n    \/* tipogr\u00e1fia \u2013 a t\u00e9ma fel\u00fcl\u00edr\u00e1sa ellen v\u00e9dve *\/\r\n    .nuance-brandcompass .nbc-eyebrow { margin: 0 0 22px !important; padding-left: 38px; position: relative; font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--ink) !important; }\r\n    .nuance-brandcompass .nbc-eyebrow::before { content: \"\"; position: absolute; left: 0; top: .8em; width: 26px; height: 1px; background: var(--acc); }\r\n    .nuance-brandcompass h2.nbc-title {\r\n      margin: 0 0 24px !important; padding: 0 !important;\r\n      font-family: var(--serif) !important; font-weight: 400 !important; font-style: normal !important;\r\n      font-size: clamp(44px, 6vw, 88px) !important; line-height: .98 !important; letter-spacing: -0.03em !important;\r\n      color: var(--ink) !important; text-transform: none !important;\r\n    }\r\n    .nuance-brandcompass .nbc-lead { margin: 0 0 20px !important; padding: 0 !important; max-width: 22em; font-family: var(--serif) !important; font-weight: 400 !important; font-style: normal; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink) !important; }\r\n    .nuance-brandcompass .nbc-facts { list-style: none !important; margin: 0 0 26px !important; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; max-width: 520px; }\r\n    .nuance-brandcompass .nbc-facts li { list-style: none !important; display: flex; gap: 12px; align-items: baseline; margin: 0 !important; padding: 11px 0 !important; border-top: 1px solid var(--line); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink); }\r\n    .nuance-brandcompass .nbc-facts li::before { content: \"\"; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); transform: translateY(-1px); }\r\n    .nuance-brandcompass .nbc-text { margin: 0 0 26px !important; max-width: 46ch; color: var(--dim) !important; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.7; }\r\n    .nuance-brandcompass .nbc-status { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px !important; padding: 7px 16px 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .15em; color: var(--ink) !important; }\r\n    .nuance-brandcompass .nbc-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }\r\n    .nuance-brandcompass .nbc-sub { margin: 0 0 26px !important; max-width: 46ch; color: var(--dim) !important; font-size: 15px; line-height: 1.7; }\r\n\r\n    \/* \u0171rlap *\/\r\n    .nuance-brandcompass .nbc-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\r\n    .nuance-brandcompass .nbc-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }\r\n    .nuance-brandcompass .nbc-row { display: flex; gap: 10px; flex-wrap: wrap; }\r\n    .nuance-brandcompass input[type=\"email\"] {\r\n      flex: 1 1 220px; min-width: 0; height: 52px; margin: 0 !important; padding: 0 22px !important; border: 1px solid var(--line) !important; border-radius: 999px !important;\r\n      background: #fff !important; color: var(--ink) !important; font-family: var(--sans) !important; font-size: 15px !important; box-shadow: none !important;\r\n      transition: border-color .3s ease;\r\n    }\r\n    .nuance-brandcompass input[type=\"email\"]:focus { outline: none; border-color: var(--acc) !important; }\r\n    .nuance-brandcompass button.nbc-btn {\r\n      -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 12px; height: 52px; margin: 0 !important; padding: 0 30px !important; cursor: pointer;\r\n      border: 0 !important; border-radius: 999px !important; background: var(--ink) !important; color: #fff !important; box-shadow: none !important;\r\n      font-family: var(--sans) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .15em !important; text-transform: uppercase !important;\r\n      transition: background .35s ease, box-shadow .35s ease, transform .25s ease;\r\n    }\r\n    .nuance-brandcompass button.nbc-btn span { font-size: 16px; font-weight: 400; color: var(--acc); transition: transform .35s ease; }\r\n    .nuance-brandcompass button.nbc-btn:hover { background: #1a1a1e !important; box-shadow: 0 10px 30px rgba(213,146,86,.32) !important; transform: translateY(-2px); }\r\n    .nuance-brandcompass button.nbc-btn:hover span { transform: translate(3px, -3px); }\r\n    .nuance-brandcompass button.nbc-btn[disabled] { opacity: .5; cursor: default; transform: none; }\r\n    .nuance-brandcompass button:focus-visible, .nuance-brandcompass input:focus-visible, .nuance-brandcompass summary:focus-visible, .nuance-brandcompass a:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }\r\n    .nuance-brandcompass .nbc-consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--dim); cursor: pointer; }\r\n    .nuance-brandcompass .nbc-consent input { flex: none; width: 18px; height: 18px; margin: 3px 0 0 !important; accent-color: var(--acc); }\r\n    .nuance-brandcompass .nbc-privacy { color: var(--ink) !important; border-bottom: 1px solid var(--acc); text-decoration: none !important; }\r\n    .nuance-brandcompass .nbc-msg { min-height: 1.6em; margin: 12px 0 0 !important; font-size: 14px; color: var(--dim) !important; }\r\n    .nuance-brandcompass .nbc-msg.nbc-err { color: #8a3b1c !important; }\r\n\r\n    \/* tov\u00e1bbi r\u00e9szletek *\/\r\n    .nuance-brandcompass .nbc-more { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 16px; }\r\n    .nuance-brandcompass .nbc-more summary { cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); display: flex; justify-content: space-between; align-items: center; }\r\n    .nuance-brandcompass .nbc-more summary::-webkit-details-marker { display: none; }\r\n    .nuance-brandcompass .nbc-more summary::after { content: \"+\"; font-size: 20px; font-weight: 400; color: var(--acc); transition: transform .3s ease; }\r\n    .nuance-brandcompass .nbc-more[open] summary::after { transform: rotate(45deg); }\r\n    .nuance-brandcompass .nbc-more p { margin: 14px 0 0 !important; max-width: 46ch; color: var(--dim) !important; font-size: 15px; line-height: 1.7; }\r\n\r\n    \/* bel\u00e9p\u0151 anim\u00e1ci\u00f3 *\/\r\n    .nuance-brandcompass .nbc-r { opacity: 0; transform: translateY(32px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }\r\n    .nuance-brandcompass .nbc-r.nbc-in { opacity: 1; transform: none; }\r\n\r\n    @media (max-width: 860px) {\r\n      .nuance-brandcompass .nbc-media, .nuance-brandcompass .nbc-content { grid-column: 1 \/ 13; }\r\n      .nuance-brandcompass .nbc-wrap { padding-left: 22px; padding-right: 22px; row-gap: 36px; }\r\n      .nuance-brandcompass .nbc-row { flex-direction: column; }\r\n      .nuance-brandcompass .nbc-facts { max-width: none; }\r\n      .nuance-brandcompass button.nbc-btn { justify-content: center; width: 100%; }\r\n    }\r\n    @media (max-width: 420px) { .nuance-brandcompass .nbc-facts { grid-template-columns: 1fr; } }\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .nuance-brandcompass .nbc-r { opacity: 1; transform: none; transition: none; }\r\n      .nuance-brandcompass button.nbc-btn, .nuance-brandcompass button.nbc-btn span, .nuance-brandcompass .nbc-more summary::after { transition: none; }\r\n    }\r\n  <\/style>\r\n\r\n  <script>\r\n  (function () {\r\n    var root = document.querySelector('.nuance-brandcompass');\r\n    if (!root || root.getAttribute('data-ready')) return;\r\n    root.setAttribute('data-ready', '1');\r\n\r\n    \/* BE\u00c1LL\u00cdT\u00c1S \u2013 t\u00f6ltsd ki a megl\u00e9v\u0151 rendszer adataival:\r\n       endpoint: az \u0171rlapfeldolgoz\u00f3\/h\u00edrlev\u00e9lrendszer c\u00edme, ahov\u00e1 a feliratkoz\u00e1s POST k\u00e9r\u00e9sben megy.\r\n       privacyUrl: az adatkezel\u00e9si t\u00e1j\u00e9koztat\u00f3 oldala.\r\n       Am\u00edg az endpoint \u00fcres, a feliratkoz\u00e1s NEM t\u00f6rt\u00e9nik meg \u00e9s nem t\u00e1rol\u00f3dik semmi. *\/\r\n    var CONFIG = { endpoint: '', privacyUrl: '' };\r\n\r\n    var priv = root.querySelector('[data-nbc-privacy]');\r\n    if (priv) {\r\n      if (CONFIG.privacyUrl) { priv.setAttribute('href', CONFIG.privacyUrl); priv.setAttribute('target', '_blank'); priv.setAttribute('rel', 'noopener'); }\r\n      else { priv.removeAttribute('href'); }\r\n    }\r\n\r\n    \/* K\u00e9p cser\u00e9je: ha a data-src ki van t\u00f6ltve, a k\u00e9p a k\u00e9phely hely\u00e9re ker\u00fcl *\/\r\n    var box = root.querySelector('.nbc-img'), src = (box.getAttribute('data-src') || '').trim();\r\n    if (src) {\r\n      var im = document.createElement('img');\r\n      im.src = src; im.alt = box.getAttribute('data-alt') || ''; im.loading = 'lazy';\r\n      box.innerHTML = ''; box.appendChild(im); box.classList.add('nbc-has');\r\n    }\r\n\r\n    \/* Feliratkoz\u00e1s \u2013 csak val\u00f3di integr\u00e1ci\u00f3 v\u00e1lasza ut\u00e1n jelez sikert *\/\r\n    var form = root.querySelector('.nbc-form'), msg = root.querySelector('.nbc-msg'), btn = root.querySelector('.nbc-btn');\r\n    function say(t, err) { msg.textContent = t; msg.classList.toggle('nbc-err', !!err); }\r\n\r\n    form.addEventListener('submit', function (e) {\r\n      e.preventDefault();\r\n      var email = form.elements.email.value.trim();\r\n      if (form.elements.website.value) return; \/* botcsapda *\/\r\n      if (!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)) { say('K\u00e9rlek, adj meg egy \u00e9rv\u00e9nyes e-mail-c\u00edmet.', true); form.elements.email.focus(); return; }\r\n      if (!form.elements.consent.checked) { say('A feliratkoz\u00e1shoz k\u00e9rj\u00fck, fogadd el az adatkezel\u00e9si t\u00e1j\u00e9koztat\u00f3t.', true); return; }\r\n      if (!CONFIG.endpoint) { say('A feliratkoz\u00e1s m\u00e9g nincs bek\u00f6tve, ez\u00e9rt most nem tudtuk elmenteni a c\u00edmedet.', true); return; }\r\n\r\n      btn.disabled = true; say('K\u00fcld\u00e9s\u2026', false);\r\n      var data = new FormData(form);\r\n      fetch(CONFIG.endpoint, { method: 'POST', body: data, headers: { 'Accept': 'application\/json' } })\r\n        .then(function (res) {\r\n          if (!res.ok) throw new Error('HTTP ' + res.status);\r\n          say('K\u00f6sz\u00f6n\u00f6m, megkaptam a feliratkoz\u00e1sodat.', false);\r\n          form.reset();\r\n        })\r\n        .catch(function () { say('Nem siker\u00fclt a feliratkoz\u00e1s. K\u00e9rlek, pr\u00f3b\u00e1ld meg \u00fajra k\u00e9s\u0151bb.', true); })\r\n        .then(function () { btn.disabled = false; });\r\n    });\r\n\r\n    \/* Bel\u00e9p\u0151 anim\u00e1ci\u00f3 *\/\r\n    var els = root.querySelectorAll('.nbc-r');\r\n    var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    if ('IntersectionObserver' in window && !reduce) {\r\n      var io = new IntersectionObserver(function (es) {\r\n        es.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('nbc-in'); io.unobserve(e.target); } });\r\n      }, { threshold: 0.12, rootMargin: '0px 0px -6% 0px' });\r\n      Array.prototype.forEach.call(els, function (el) { io.observe(el); });\r\n    } else {\r\n      Array.prototype.forEach.call(els, function (el) { el.classList.add('nbc-in'); });\r\n    }\r\n  })();\r\n  <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-8c6e73b e-con e-atomic-element e-flexbox-base e-default-div e-eb4370e \" data-id=\"8c6e73b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"8c6e73b\">\n    \t\t<div class=\"elementor-element elementor-element-57096a5 elementor-widget elementor-widget-html\" data-id=\"57096a5\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mauve_hidepaged&quot;:&quot;false&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Montserrat:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<section class=\"nuance-services-dark\">\r\n  <canvas class=\"nsd-fx\" aria-hidden=\"true\"><\/canvas>\r\n\r\n  <div class=\"nsd-wrap\">\r\n    <header class=\"nsd-head\">\r\n      <h2 class=\"nsd-title nsd-r\">Minden a hely\u00e9re ker\u00fcl.<\/h2>\r\n      <p class=\"nsd-intro nsd-r\">Att\u00f3l f\u00fcgg\u0151en, hol tart a m\u00e1rk\u00e1d, m\u00e1shol \u00e9rdemes elkezdeni. N\u00e9zz\u00fck meg, min kell v\u00e1ltoztatni, \u00e9s mit \u00e9rdemes tov\u00e1bb\u00e9p\u00edteni.<\/p>\r\n    <\/header>\r\n\r\n    <div class=\"nsd-grid\">\r\n      <!-- 01 -->\r\n      <div class=\"nsd-card nsd-r\" tabindex=\"0\" role=\"group\" aria-label=\"M\u00e1rkastrat\u00e9gia. Enterrel vagy r\u00e1utal\u00e1ssal ford\u00edtsd meg a k\u00e1rty\u00e1t.\">\r\n        <div class=\"nsd-inner\">\r\n          <div class=\"nsd-face nsd-front\">\r\n            <p class=\"nsd-n\">01 \u00b7 M\u00e1rkastrat\u00e9gia<\/p>\r\n            <h3 class=\"nsd-q\">J\u00f3 a v\u00e1llalkoz\u00e1sod. De vil\u00e1gos m\u00e1soknak is, mi\u00e9rt t\u00e9ged v\u00e1lasszanak?<\/h3>\r\n            <span class=\"nsd-hint\" aria-hidden=\"true\">\u21bb<\/span>\r\n          <\/div>\r\n          <div class=\"nsd-face nsd-back\">\r\n            <div class=\"nsd-glow\" aria-hidden=\"true\"><i><\/i><i><\/i><\/div>\r\n            <p class=\"nsd-n\">M\u00e1rkastrat\u00e9gia<\/p>\r\n            <p class=\"nsd-a\">Tiszt\u00e1bb ir\u00e1ny. Pontosabb pozicion\u00e1l\u00e1s. Tudatosabb d\u00f6nt\u00e9sek.<\/p>\r\n            <a class=\"nsd-cta\" href=\"#\" data-nsd-link=\"0\">Tudj meg t\u00f6bbet <span>\u2197<\/span><\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 02 -->\r\n      <div class=\"nsd-card nsd-r\" tabindex=\"0\" role=\"group\" aria-label=\"M\u00e1rkakommunik\u00e1ci\u00f3. Enterrel vagy r\u00e1utal\u00e1ssal ford\u00edtsd meg a k\u00e1rty\u00e1t.\">\r\n        <div class=\"nsd-inner\">\r\n          <div class=\"nsd-face nsd-front\">\r\n            <p class=\"nsd-n\">02 \u00b7 M\u00e1rkakommunik\u00e1ci\u00f3<\/p>\r\n            <h3 class=\"nsd-q\">Tudod, mit k\u00e9pviselsz. De ezt a kommunik\u00e1ci\u00f3d is megmutatja?<\/h3>\r\n            <span class=\"nsd-hint\" aria-hidden=\"true\">\u21bb<\/span>\r\n          <\/div>\r\n          <div class=\"nsd-face nsd-back\">\r\n            <div class=\"nsd-glow\" aria-hidden=\"true\"><i><\/i><i><\/i><\/div>\r\n            <p class=\"nsd-n\">M\u00e1rkakommunik\u00e1ci\u00f3<\/p>\r\n            <p class=\"nsd-a\">Saj\u00e1t hang. Vil\u00e1gos \u00fczenetek. K\u00f6vetkezetes tartalom.<\/p>\r\n            <a class=\"nsd-cta\" href=\"#\" data-nsd-link=\"1\">Tudj meg t\u00f6bbet <span>\u2197<\/span><\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 03 -->\r\n      <div class=\"nsd-card nsd-r\" tabindex=\"0\" role=\"group\" aria-label=\"Arculat \u00e9s digit\u00e1lis megjelen\u00e9s. Enterrel vagy r\u00e1utal\u00e1ssal ford\u00edtsd meg a k\u00e1rty\u00e1t.\">\r\n        <div class=\"nsd-inner\">\r\n          <div class=\"nsd-face nsd-front\">\r\n            <p class=\"nsd-n\">03 \u00b7 Arculat \u00e9s digit\u00e1lis megjelen\u00e9s<\/p>\r\n            <h3 class=\"nsd-q\">Itt az ideje, hogy a m\u00e1rk\u00e1d ne csak j\u00f3l n\u00e9zzen ki, hanem \u00f6ssze is \u00e1lljon.<\/h3>\r\n            <span class=\"nsd-hint\" aria-hidden=\"true\">\u21bb<\/span>\r\n          <\/div>\r\n          <div class=\"nsd-face nsd-back\">\r\n            <div class=\"nsd-glow\" aria-hidden=\"true\"><i><\/i><i><\/i><\/div>\r\n            <p class=\"nsd-n\">Arculat \u00e9s digit\u00e1lis megjelen\u00e9s<\/p>\r\n            <p class=\"nsd-a\">Felismerhet\u0151 arculat. \u00c1tgondolt weboldal. Egys\u00e9ges vizu\u00e1lis vil\u00e1g.<\/p>\r\n            <a class=\"nsd-cta\" href=\"#\" data-nsd-link=\"2\">Tudj meg t\u00f6bbet <span>\u2197<\/span><\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <style>\r\n    .nuance-services-dark {\r\n      --bg: #0b0a09; --ink: #f5f2ec; --mut: rgba(245,242,236,0.6); --line: rgba(245,242,236,0.16); --acc: #E59E5C;\r\n      --serif: 'Fraunces', serif; --sans: 'Montserrat', sans-serif;\r\n      position: relative; isolation: isolate; width: 100%; background: var(--bg); color: var(--ink);\r\n      font-family: var(--sans); font-size: 16px; line-height: 1.6; overflow: hidden; -webkit-font-smoothing: antialiased;\r\n    }\r\n    .nuance-services-dark *, .nuance-services-dark *::before, .nuance-services-dark *::after { box-sizing: border-box; }\r\n    .nuance-services-dark::before { content: \"\"; position: absolute; inset: 0; z-index: 0; pointer-events: none;\r\n      background: radial-gradient(55% 40% at 12% 8%, rgba(229,158,92,0.12), transparent 65%), radial-gradient(50% 30% at 90% 85%, rgba(229,158,92,0.05), transparent 70%); }\r\n    .nuance-services-dark .nsd-fx { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }\r\n    .nuance-services-dark .nsd-wrap { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: clamp(90px, 11vw, 160px) 5vw; }\r\n\r\n    .nuance-services-dark .nsd-head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 84px); }\r\n    .nuance-services-dark h2.nsd-title {\r\n      margin: 0 0 24px !important; padding: 0 !important;\r\n      font-family: var(--serif) !important; font-weight: 400 !important; font-style: normal !important;\r\n      font-size: clamp(40px, 6.4vw, 92px) !important; line-height: 0.98 !important; letter-spacing: -0.03em !important;\r\n      color: var(--ink) !important; text-transform: none !important;\r\n    }\r\n    .nuance-services-dark p.nsd-intro { margin: 0 !important; max-width: 48ch; color: var(--mut) !important; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; }\r\n\r\n    \/* k\u00e1rty\u00e1k *\/\r\n    .nuance-services-dark .nsd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }\r\n    .nuance-services-dark .nsd-card { perspective: 1400px; outline: none; cursor: pointer; }\r\n    .nuance-services-dark .nsd-inner { display: grid; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.16,.8,.3,1); min-height: clamp(340px, 30vw, 420px); }\r\n    .nuance-services-dark .nsd-card.is-flipped .nsd-inner, .nuance-services-dark .nsd-card:focus-within .nsd-inner { transform: rotateY(180deg); }\r\n    @media (hover: hover) { .nuance-services-dark .nsd-card:hover .nsd-inner { transform: rotateY(180deg); } }\r\n    .nuance-services-dark .nsd-card:focus-visible .nsd-front { outline: 2px solid var(--acc); outline-offset: 4px; }\r\n\r\n    .nuance-services-dark .nsd-face {\r\n      grid-area: 1 \/ 1; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;\r\n      padding: clamp(24px, 2.6vw, 38px); border: 1px solid var(--line); border-radius: 18px;\r\n      -webkit-backface-visibility: hidden; backface-visibility: hidden; background: rgba(255,255,255,0.025);\r\n    }\r\n    .nuance-services-dark .nsd-back { transform: rotateY(180deg); background: #0f0d0b; }\r\n    .nuance-services-dark .nsd-n { margin: 0 0 24px !important; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--acc) !important; position: relative; z-index: 1; }\r\n    .nuance-services-dark h3.nsd-q {\r\n      margin: 0 !important; padding: 0 !important; position: relative; z-index: 1;\r\n      font-family: var(--serif) !important; font-weight: 400 !important; font-style: normal !important; text-transform: none !important;\r\n      font-size: clamp(24px, 2.4vw, 34px) !important; line-height: 1.16 !important; letter-spacing: -0.015em !important; color: var(--ink) !important;\r\n    }\r\n    .nuance-services-dark .nsd-hint { margin-top: 24px; font-size: 18px; color: var(--mut); position: relative; z-index: 1; }\r\n    .nuance-services-dark p.nsd-a {\r\n      margin: 0 0 28px !important; position: relative; z-index: 1;\r\n      font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.18; letter-spacing: -0.015em; color: var(--ink) !important;\r\n    }\r\n    .nuance-services-dark a.nsd-cta {\r\n      align-self: flex-start; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px;\r\n      padding: 13px 26px; border: 1px solid var(--acc); border-radius: 999px; color: var(--ink) !important; text-decoration: none !important;\r\n      font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;\r\n      transition: background .35s ease, transform .25s ease;\r\n    }\r\n    .nuance-services-dark a.nsd-cta span { color: var(--acc); transition: transform .35s ease; }\r\n    .nuance-services-dark a.nsd-cta:hover { background: rgba(229,158,92,0.14); transform: translateY(-2px); }\r\n    .nuance-services-dark a.nsd-cta:hover span { transform: translate(3px, -3px); }\r\n    .nuance-services-dark a.nsd-cta:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }\r\n\r\n    \/* h\u00e1toldali narancsos f\u00e9nyfolt \u2013 a hero elmosott foltjaival azonos megold\u00e1s *\/\r\n    .nuance-services-dark .nsd-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }\r\n    .nuance-services-dark .nsd-glow i { position: absolute; display: block; border-radius: 50%; filter: blur(60px); mix-blend-mode: screen; opacity: .5; animation-play-state: paused; will-change: transform; }\r\n    .nuance-services-dark .nsd-glow i:nth-child(1) { width: 70%; aspect-ratio: 1; background: #d59256; top: -25%; left: -20%; animation: nsdA 8s ease-in-out infinite alternate; }\r\n    .nuance-services-dark .nsd-glow i:nth-child(2) { width: 55%; aspect-ratio: 1; background: #c17b3e; bottom: -25%; right: -15%; animation: nsdB 10s ease-in-out infinite alternate; }\r\n    .nuance-services-dark .nsd-card.is-flipped .nsd-glow i, .nuance-services-dark .nsd-card:focus-within .nsd-glow i { animation-play-state: running; }\r\n    @media (hover: hover) { .nuance-services-dark .nsd-card:hover .nsd-glow i { animation-play-state: running; } }\r\n    @keyframes nsdA { 0% { transform: translate3d(0,0,0) scale(.95); } 100% { transform: translate3d(22%,18%,0) scale(1.2); } }\r\n    @keyframes nsdB { 0% { transform: translate3d(0,0,0) scale(1.15); } 100% { transform: translate3d(-25%,-15%,0) scale(.9); } }\r\n\r\n    \/* bel\u00e9p\u0151 anim\u00e1ci\u00f3 *\/\r\n    .nuance-services-dark .nsd-r { opacity: 0; transform: translateY(32px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }\r\n    .nuance-services-dark .nsd-r.nsd-in { opacity: 1; transform: none; }\r\n\r\n    @media (max-width: 960px) { .nuance-services-dark .nsd-grid { grid-template-columns: 1fr; } .nuance-services-dark .nsd-inner { min-height: 300px; } }\r\n    @media (max-width: 520px) { .nuance-services-dark .nsd-wrap { padding-left: 22px; padding-right: 22px; } .nuance-services-dark .nsd-glow i { filter: blur(45px); } }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .nuance-services-dark .nsd-r { opacity: 1; transform: none; transition: none; }\r\n      .nuance-services-dark .nsd-inner, .nuance-services-dark a.nsd-cta, .nuance-services-dark a.nsd-cta span { transition: none; }\r\n      .nuance-services-dark .nsd-glow i { animation: none; }\r\n    }\r\n  <\/style>\r\n\r\n  <script>\r\n  (function () {\r\n    var root = document.querySelector('.nuance-services-dark');\r\n    if (!root || root.getAttribute('data-ready')) return;\r\n    root.setAttribute('data-ready', '1');\r\n\r\n    \/* CTA-LINKEK \u2013 a h\u00e1rom k\u00e1rtya c\u00e9loldala (a megl\u00e9v\u0151 szolg\u00e1ltat\u00e1si oldalak\/szekci\u00f3k c\u00edme).\r\n       \u00dcresen hagyva a link # marad, kital\u00e1lt URL nincs. *\/\r\n    var LINKS = ['', '', ''];\r\n    Array.prototype.forEach.call(root.querySelectorAll('[data-nsd-link]'), function (a) {\r\n      var u = LINKS[parseInt(a.getAttribute('data-nsd-link'), 10)];\r\n      if (u) a.setAttribute('href', u);\r\n    });\r\n\r\n    \/* Megford\u00edt\u00e1s \u00e9rint\u00e9ssel \u00e9s billenty\u0171zettel (eg\u00e9rrel a CSS :hover kezeli) *\/\r\n    Array.prototype.forEach.call(root.querySelectorAll('.nsd-card'), function (card) {\r\n      card.addEventListener('click', function (e) {\r\n        if (e.target.closest('a')) return;\r\n        card.classList.toggle('is-flipped');\r\n      });\r\n      card.addEventListener('keydown', function (e) {\r\n        if ((e.key === 'Enter' || e.key === ' ') && e.target === card) {\r\n          e.preventDefault();\r\n          card.classList.toggle('is-flipped');\r\n        }\r\n        if (e.key === 'Escape') card.classList.remove('is-flipped');\r\n      });\r\n    });\r\n\r\n    var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n    \/* Bel\u00e9p\u0151 anim\u00e1ci\u00f3 *\/\r\n    var els = root.querySelectorAll('.nsd-r');\r\n    if ('IntersectionObserver' in window && !reduce) {\r\n      var io = new IntersectionObserver(function (es) {\r\n        es.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('nsd-in'); io.unobserve(e.target); } });\r\n      }, { threshold: 0.12, rootMargin: '0px 0px -6% 0px' });\r\n      Array.prototype.forEach.call(els, function (el) { io.observe(el); });\r\n    } else {\r\n      Array.prototype.forEach.call(els, function (el) { el.classList.add('nsd-in'); });\r\n    }\r\n\r\n    \/* R\u00e9szecskeh\u00e1tt\u00e9r \u2013 apr\u00f3, \u00e1ttetsz\u0151, lass\u00fa; csak l\u00e1that\u00f3 szekci\u00f3n\u00e1l fut *\/\r\n    var cv = root.querySelector('.nsd-fx'), ctx = cv.getContext('2d');\r\n    var dpr = Math.min(window.devicePixelRatio || 1, 2), W = 0, H = 0, pts = [], raf = 0, visible = true;\r\n\r\n    function size() {\r\n      W = root.clientWidth; H = root.clientHeight;\r\n      cv.width = W * dpr; cv.height = H * dpr;\r\n      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\r\n      var n = W < 760 ? 26 : 52; pts = [];\r\n      for (var i = 0; i < n; i++) {\r\n        var z = Math.random();\r\n        pts.push({ x: Math.random() * W, y: Math.random() * H, r: 0.6 + z * 1.4,\r\n          vx: (Math.random() - 0.5) * 0.1 * (0.4 + z), vy: -(0.03 + z * 0.16),\r\n          o: 0.12 + z * 0.32, ph: Math.random() * 6.283, c: Math.random() < 0.55 ? '229,158,92' : '245,238,226' });\r\n      }\r\n    }\r\n    function draw(t, move) {\r\n      ctx.clearRect(0, 0, W, H);\r\n      for (var i = 0; i < pts.length; i++) {\r\n        var p = pts[i];\r\n        if (move) {\r\n          p.x += p.vx; p.y += p.vy;\r\n          if (p.y < -8) { p.y = H + 8; p.x = Math.random() * W; }\r\n          if (p.x < -8) p.x = W + 8; else if (p.x > W + 8) p.x = -8;\r\n        }\r\n        var fl = 0.75 + 0.25 * Math.sin(t * 0.0007 + p.ph);\r\n        ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, 6.283);\r\n        ctx.fillStyle = 'rgba(' + p.c + ',' + (p.o * fl).toFixed(3) + ')'; ctx.fill();\r\n      }\r\n    }\r\n    function loop(t) { draw(t, true); raf = requestAnimationFrame(loop); }\r\n    function start() { if (!raf && !reduce) raf = requestAnimationFrame(loop); }\r\n    function stop() { if (raf) { cancelAnimationFrame(raf); raf = 0; } }\r\n\r\n    size(); draw(0, false); start();\r\n    var rt; window.addEventListener('resize', function () { clearTimeout(rt); rt = setTimeout(function () { size(); draw(0, false); }, 150); });\r\n    document.addEventListener('visibilitychange', function () { if (document.hidden) stop(); else if (visible) start(); });\r\n    if ('IntersectionObserver' in window) {\r\n      new IntersectionObserver(function (es) { visible = es[0].isIntersecting; if (visible && !document.hidden) start(); else stop(); }).observe(root);\r\n    }\r\n  })();\r\n  <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-9cc0297 e-con e-atomic-element e-flexbox-base e-default-div e-9cc0297-8626807 \" data-id=\"9cc0297\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9cc0297\">\n    \t\t<div class=\"elementor-element elementor-element-5dbe45d elementor-widget elementor-widget-html\" data-id=\"5dbe45d\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;mauve_hidepaged&quot;:&quot;false&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* CSS scopes all classes with .ncs-cta- to prevent theme conflicts *\/\r\n.ncs-cta-section {\r\n  position: relative;\r\n  width: 100%;\r\n  min-height: 100vh;\r\n  background: #0a0a0a;\r\n  overflow: hidden;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 120px 20px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.ncs-cta-canvas {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 1;\r\n  pointer-events: none;\r\n  display: block;\r\n}\r\n\r\n.ncs-cta-content {\r\n  position: relative;\r\n  z-index: 2;\r\n  max-width: 900px;\r\n  margin: 0 auto;\r\n  text-align: center;\r\n  color: #ffffff;\r\n}\r\n\r\n.ncs-cta-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 10px 26px;\r\n  border-radius: 999px;\r\n  background: rgba(255, 255, 255, 0.04);\r\n  border: 1px solid rgba(213, 146, 86, 0.45);\r\n  backdrop-filter: blur(14px);\r\n  -webkit-backdrop-filter: blur(14px);\r\n  box-shadow: 0 0 24px rgba(213, 146, 86, 0.18), inset 0 1px 0 rgba(255,255,255,0.06);\r\n  font-family: 'Montserrat', sans-serif;\r\n  font-weight: 700;\r\n  font-size: 12px;\r\n  letter-spacing: 0.14em;\r\n  color: #f0c49a;\r\n  text-transform: uppercase;\r\n  margin-bottom: 36px;\r\n  white-space: nowrap;\r\n}\r\n\r\n.ncs-cta-headline {\r\n  font-family: 'Montserrat', sans-serif;\r\n  font-weight: 800;\r\n  text-transform: uppercase;\r\n  font-size: clamp(42px, 8vw, 108px);\r\n  line-height: 0.94;\r\n  letter-spacing: -0.02em;\r\n  color: #ffffff;\r\n  margin: 0 0 28px;\r\n}\r\n\r\n.ncs-cta-headline .ncs-cta-accent {\r\n  color: #d59256;\r\n}\r\n\r\n.ncs-cta-subtitle {\r\n  font-family: 'Montserrat', sans-serif;\r\n  font-weight: 400;\r\n  font-size: clamp(15px, 1.4vw, 18px);\r\n  line-height: 1.65;\r\n  color: rgba(255, 255, 255, 0.5);\r\n  max-width: 600px;\r\n  margin: 0 auto 48px;\r\n}\r\n\r\n.ncs-cta-buttons {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 18px;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.ncs-cta-btn {\r\n  font-family: 'Montserrat', sans-serif;\r\n  font-weight: 700;\r\n  font-size: 13px;\r\n  letter-spacing: 0.08em;\r\n  text-transform: uppercase;\r\n  text-decoration: none !important;\r\n  padding: 19px 42px;\r\n  border-radius: 999px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, color 0.35s ease;\r\n  cursor: pointer;\r\n  border: none;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.ncs-cta-btn-primary {\r\n  background: #ffffff;\r\n  color: #0a0a0a !important;\r\n  box-shadow: 0 0 0 rgba(255,255,255,0);\r\n}\r\n\r\n.ncs-cta-btn-primary:hover {\r\n  transform: translateY(-2px) scale(1.02);\r\n  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.15);\r\n}\r\n\r\n.ncs-cta-btn-secondary {\r\n  background: rgba(255, 255, 255, 0.04);\r\n  color: #ffffff !important;\r\n  border: 1px solid rgba(255, 255, 255, 0.22);\r\n  backdrop-filter: blur(14px);\r\n  -webkit-backdrop-filter: blur(14px);\r\n}\r\n\r\n.ncs-cta-btn-secondary:hover {\r\n  transform: translateY(-2px) scale(1.02);\r\n  background: rgba(255, 255, 255, 0.08);\r\n  border-color: rgba(213, 146, 86, 0.5);\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  .ncs-cta-section { padding: 90px 18px; }\r\n  .ncs-cta-buttons { flex-direction: column; width: 100%; }\r\n  .ncs-cta-btn { width: 100%; justify-content: center; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"ncs-cta-section\">\r\n  <div class=\"ncs-cta-content\">\r\n    <div class=\"ncs-cta-badge\">\u26a1 JELENLEG KORL\u00c1TOZOTT SZ\u00c1MBAN V\u00c1LLALOK \u00daJ PROJEKTEKET<\/div>\r\n\r\n    <h2 class=\"ncs-cta-headline\">\r\n      \u00c9P\u00cdTS\u00dcNK<br>\r\n      VALAMI<br>\r\n      <span class=\"ncs-cta-accent\">NEM MINDENNAPIT.<\/span>\r\n    <\/h2>\r\n\r\n    <p class=\"ncs-cta-subtitle\">\r\n      A j\u00f3 \u00f6tletb\u0151l akkor lesz igaz\u00e1n j\u00f3 m\u00e1rka, amikor megtal\u00e1ljuk benne azt, ami csak r\u00e1d jellemz\u0151. \u00c9n seg\u00edtek ezt form\u00e1ba \u00f6nteni.\r\n    <\/p>\r\n\r\n    <div class=\"ncs-cta-buttons\">\r\n      <a href=\"#\" class=\"ncs-cta-btn ncs-cta-btn-primary\">KEZDJ\u00dcK EL!<\/a>\r\n      <a href=\"#\" class=\"ncs-cta-btn ncs-cta-btn-secondary\">N\u00c9ZD MEG A MUNK\u00c1IM \u2192<\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function () {\r\n  function ncsCtaBoot() {\r\n    if (typeof window.THREE === 'undefined') {\r\n      var existing = document.querySelector('script[data-ncs-three]');\r\n      if (existing) {\r\n        existing.addEventListener('load', ncsCtaStart);\r\n        return;\r\n      }\r\n      var s = document.createElement('script');\r\n      s.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js';\r\n      s.setAttribute('data-ncs-three', '1');\r\n      s.onload = ncsCtaStart;\r\n      document.head.appendChild(s);\r\n    } else {\r\n      ncsCtaStart();\r\n    }\r\n  }\r\n\r\n  function ncsCtaStart() {\r\n    var sections = document.querySelectorAll('.ncs-cta-section');\r\n    sections.forEach(function (section) {\r\n      if (section.dataset.ncsCtaInit) return;\r\n      section.dataset.ncsCtaInit = '1';\r\n      ncsCtaInitScene(section);\r\n    });\r\n  }\r\n\r\n  \/\/ Soft radial dot texture\r\n  function makeDotTexture(THREE) {\r\n    var c = document.createElement('canvas');\r\n    c.width = c.height = 64;\r\n    var ctx = c.getContext('2d');\r\n    var g = ctx.createRadialGradient(32, 32, 0, 32, 32, 32);\r\n    g.addColorStop(0, 'rgba(255,255,255,1.0)');\r\n    g.addColorStop(0.35, 'rgba(255,255,255,0.9)');\r\n    g.addColorStop(0.65, 'rgba(229,169,92,0.4)');\r\n    g.addColorStop(1, 'rgba(0,0,0,0)');\r\n    ctx.fillStyle = g;\r\n    ctx.fillRect(0, 0, 64, 64);\r\n    return new THREE.CanvasTexture(c);\r\n  }\r\n\r\n  \/\/ Height-driven gradient: silver\/white in the troughs, gold on the crests\r\n  \/\/ (matches the HERO screenshot's banding). Built once as a lookup table.\r\n  function buildGradientLUT(THREE) {\r\n    var STEPS = 128;\r\n    var stops = [\r\n      { p: 0.00, c: new THREE.Color(0xffffff) }, \/\/ white spark (troughs)\r\n      { p: 0.32, c: new THREE.Color(0xe0e0e0) }, \/\/ silver\r\n      { p: 0.60, c: new THREE.Color(0xd59256) }, \/\/ brand gold\r\n      { p: 1.00, c: new THREE.Color(0xe5a95c) }  \/\/ warm rich gold (crests)\r\n    ];\r\n    function smoothstep(t) { return t * t * (3 - 2 * t); }\r\n    var lut = new Float32Array(STEPS * 3);\r\n    for (var i = 0; i < STEPS; i++) {\r\n      var t = i \/ (STEPS - 1);\r\n      var col = stops[stops.length - 1].c;\r\n      for (var s = 0; s < stops.length - 1; s++) {\r\n        var a = stops[s], b = stops[s + 1];\r\n        if (t <= b.p) {\r\n          var lt = (t - a.p) \/ (b.p - a.p);\r\n          col = a.c.clone().lerp(b.c, smoothstep(lt));\r\n          break;\r\n        }\r\n      }\r\n      lut[i * 3] = col.r;\r\n      lut[i * 3 + 1] = col.g;\r\n      lut[i * 3 + 2] = col.b;\r\n    }\r\n    return { lut: lut, steps: STEPS };\r\n  }\r\n\r\n  function ncsCtaInitScene(section) {\r\n    var THREE = window.THREE;\r\n    var width = section.clientWidth || window.innerWidth;\r\n    var height = section.clientHeight || window.innerHeight;\r\n\r\n    var scene = new THREE.Scene();\r\n\r\n    var camera = new THREE.PerspectiveCamera(55, width \/ height, 1, 3000);\r\n    camera.position.set(0, 110, 290);\r\n    camera.lookAt(0, 0, 0);\r\n\r\n    var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });\r\n    renderer.setSize(width, height);\r\n    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));\r\n    renderer.domElement.className = 'ncs-cta-canvas';\r\n    section.insertBefore(renderer.domElement, section.firstChild);\r\n\r\n    \/\/ Ultra-dense particle grid (HERO particle dust style)\r\n    var cols = 130;\r\n    var rows = 90;\r\n    var spacing = 3.6;\r\n    var count = cols * rows;\r\n\r\n    var positions = new Float32Array(count * 3);\r\n    var colors = new Float32Array(count * 3); \/\/ live buffer, written fresh every frame\r\n    var baseX = new Float32Array(count);\r\n    var baseZ = new Float32Array(count);\r\n    var twinkleSpeed = new Float32Array(count);\r\n    var twinklePhase = new Float32Array(count);\r\n\r\n    var idx = 0;\r\n    for (var r = 0; r < rows; r++) {\r\n      for (var c = 0; c < cols; c++) {\r\n        var x = (c - cols \/ 2) * spacing;\r\n        var z = (r - rows \/ 2) * spacing;\r\n\r\n        positions[idx * 3] = x;\r\n        positions[idx * 3 + 1] = 0;\r\n        positions[idx * 3 + 2] = z;\r\n\r\n        baseX[idx] = x;\r\n        baseZ[idx] = z;\r\n\r\n        twinkleSpeed[idx] = 1.5 + Math.random() * 3.5;\r\n        twinklePhase[idx] = Math.random() * Math.PI * 2;\r\n\r\n        idx++;\r\n      }\r\n    }\r\n\r\n    var geometry = new THREE.BufferGeometry();\r\n    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));\r\n    geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));\r\n\r\n    var gradient = buildGradientLUT(THREE);\r\n\r\n    \/\/ Particle material calibrated to match HERO dust\r\n    var material = new THREE.PointsMaterial({\r\n      size: 2.8, \/\/ sparkle size, tuned for camera Z=290\r\n      vertexColors: true,\r\n      map: makeDotTexture(THREE),\r\n      transparent: true,\r\n      opacity: 0.85,\r\n      sizeAttenuation: true,\r\n      blending: THREE.AdditiveBlending,\r\n      depthWrite: false\r\n    });\r\n\r\n    var points = new THREE.Points(geometry, material);\r\n    scene.add(points);\r\n\r\n    \/\/ Mouse tilt interaction\r\n    var mouseX = 0, mouseY = 0;\r\n    var rotX = 0, rotY = 0;\r\n\r\n    function onMouseMove(e) {\r\n      var rect = section.getBoundingClientRect();\r\n      mouseX = ((e.clientX - rect.left) \/ rect.width) * 2 - 1;\r\n      mouseY = ((e.clientY - rect.top) \/ rect.height) * 2 - 1;\r\n    }\r\n    section.addEventListener('mousemove', onMouseMove);\r\n\r\n    var clock = new THREE.Clock();\r\n    var posAttr = geometry.attributes.position;\r\n    var colorAttr = geometry.attributes.color;\r\n    var arr = posAttr.array;\r\n    var colorArr = colorAttr.array;\r\n    var LUT = gradient.lut;\r\n    var STEPS = gradient.steps;\r\n\r\n    function animate() {\r\n      requestAnimationFrame(animate);\r\n      var t = clock.getElapsedTime();\r\n\r\n      for (var i = 0; i < count; i++) {\r\n        var i3 = i * 3;\r\n        var x = baseX[i];\r\n        var z = baseZ[i];\r\n\r\n        \/\/ Smooth wave motion (original sweep preserved)\r\n        var wy =\r\n          Math.sin(x * 0.045 + t * 0.75) * 12 +\r\n          Math.cos(z * 0.045 + t * 0.55) * 12;\r\n        arr[i3 + 1] = wy;\r\n\r\n        \/\/ Height -> color, sampled fresh each frame from the LUT\r\n        \/\/ (never from a previously-written value, so there's no\r\n        \/\/ frame-to-frame drift\/saturation)\r\n        var normY = Math.max(0, Math.min(1, (wy + 24) \/ 48));\r\n        var lutIdx = (normY * (STEPS - 1)) | 0;\r\n        var lr = LUT[lutIdx * 3], lg = LUT[lutIdx * 3 + 1], lb = LUT[lutIdx * 3 + 2];\r\n\r\n        \/\/ Subtle sparkle twinkle, applied on top of the LUT base color\r\n        var spark = Math.pow(Math.sin(t * twinkleSpeed[i] + twinklePhase[i]) * 0.5 + 0.5, 2.5);\r\n        var boost = 0.85 + spark * 0.4;\r\n\r\n        colorArr[i3] = Math.min(1.0, lr * boost);\r\n        colorArr[i3 + 1] = Math.min(1.0, lg * boost);\r\n        colorArr[i3 + 2] = Math.min(1.0, lb * boost);\r\n      }\r\n\r\n      posAttr.needsUpdate = true;\r\n      colorAttr.needsUpdate = true;\r\n\r\n      \/\/ Mouse interactive rotation\r\n      rotY += (mouseX * 0.15 - rotY) * 0.04;\r\n      rotX += (-mouseY * 0.08 - rotX) * 0.04;\r\n      points.rotation.y = rotY;\r\n      points.rotation.x = rotX;\r\n\r\n      renderer.render(scene, camera);\r\n    }\r\n    animate();\r\n\r\n    function onResize() {\r\n      var w = section.clientWidth || window.innerWidth;\r\n      var h = section.clientHeight || window.innerHeight;\r\n      camera.aspect = w \/ h;\r\n      camera.updateProjectionMatrix();\r\n      renderer.setSize(w, h);\r\n    }\r\n    window.addEventListener('resize', onResize);\r\n  }\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', ncsCtaBoot);\r\n  } else {\r\n    ncsCtaBoot();\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Loading 01 \u2014 K\u00c1OSZ Van egy j\u00f3 v\u00e1llalkoz\u00e1sod. De a m\u00e1rk\u00e1d is ezt mutatja? Lehet, hogy m\u00e1r van log\u00f3d, weboldalad, Instagram-oldalad \u00e9s t\u00f6bb sz\u00e1z \u00f6tleted. M\u00e9gis valahogy nem \u00e1ll \u00f6ssze&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-3575","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nuancecreative.hu\/en\/wp-json\/wp\/v2\/pages\/3575","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nuancecreative.hu\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nuancecreative.hu\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nuancecreative.hu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nuancecreative.hu\/en\/wp-json\/wp\/v2\/comments?post=3575"}],"version-history":[{"count":346,"href":"https:\/\/nuancecreative.hu\/en\/wp-json\/wp\/v2\/pages\/3575\/revisions"}],"predecessor-version":[{"id":4650,"href":"https:\/\/nuancecreative.hu\/en\/wp-json\/wp\/v2\/pages\/3575\/revisions\/4650"}],"wp:attachment":[{"href":"https:\/\/nuancecreative.hu\/en\/wp-json\/wp\/v2\/media?parent=3575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nuancecreative.hu\/en\/wp-json\/wp\/v2\/categories?post=3575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nuancecreative.hu\/en\/wp-json\/wp\/v2\/tags?post=3575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}