{"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-09-12T14:58:15","modified_gmt":"2026-09-12T12:58:15","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; \/* Megemelve, hogy elf\u00e9rjen alatt a segmented \u00e9s a cta-block *\/\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, 32px);\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: 11.5px;\r\n      line-height: 1.45;\r\n      color: #a1a1aa;\r\n      transition: opacity .3s ease;\r\n    }\r\n\r\n    \/* Mobilon is megjelen\u00edtve a CTA blokk, a gombok alatt egym\u00e1s al\u00e1 rendezve *\/\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    \/* St\u00e1dium v\u00e1lt\u00f3 gombok alul (mobilon a CTA felett) *\/\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: 9px;\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    \/* Tablet \u00e9s Desktop n\u00e9zet *\/\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  <\/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 KOMPLEXIT\u00c1S<\/span>\r\n    <h1 id=\"ps-capTitle\">Ahol minden \u00f6tlet megsz\u00fcletik.<\/h1>\r\n    <p id=\"ps-capBody\">\u00d6tletek, lehet\u0151s\u00e9gek, f\u00e9lmondatok \u00e9s kapcsol\u00f3d\u00e1sok. M\u00e9g nem kell, hogy minden a hely\u00e9n legyen. El\u0151sz\u00f6r csak n\u00e9zz\u00fck meg, mi van el\u0151tt\u00fcnk.<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"segmented\" id=\"ps-segmented\">\r\n    <button class=\"seg active\" data-i=\"0\">Komplexit\u00e1s<\/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\">AHOL A STRAT\u00c9GIA FORM\u00c1T \u00d6LT.<\/span>\r\n    <p class=\"cta-desc\">Strat\u00e9gi\u00e1b\u00f3l \u00e9p\u00edtek karakteres m\u00e1rk\u00e1kat azoknak a v\u00e1llalkoz\u00e1soknak, akik \u00e9rzik, hogy a jelenlegi megjelen\u00e9s\u00fck m\u00e1r nem t\u00fckr\u00f6zi azt, ahol val\u00f3j\u00e1ban tartanak.<\/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  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 polar = Math.acos(2 * rng() - 1);\r\n      const r = baseRadius * (0.9 + Math.pow(rng(), 1.8) * 0.1);\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 : 28000;\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  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.38, 'rgba(255,255,255,0.98)');\r\n    g.addColorStop(0.65, 'rgba(255,225,190,0.5)');\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\r\n  function smoothstep(t) {\r\n    return t * t * (3 - 2 * t);\r\n  }\r\n  const gradientStops = [\r\n    { p: 0.0,  c: new THREE.Color(0xffffff) },\r\n    { p: 0.24, c: new THREE.Color(0xe8f1fb) },\r\n    { p: 0.55, c: new THREE.Color(0xe8862c) },\r\n    { p: 1.0,  c: new THREE.Color(0xffb03b) },\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    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.12 : 0.08,\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 KOMPEXIT\u00c1S', title: 'Ahol minden \u00f6tlet megsz\u00fcletik.', body: '\u00d6tletek, lehet\u0151s\u00e9gek, f\u00e9lmondatok \u00e9s kapcsol\u00f3d\u00e1sok. M\u00e9g nem kell, hogy minden a hely\u00e9n legyen. El\u0151sz\u00f6r csak n\u00e9zz\u00fck meg, mi van el\u0151tt\u00fcnk.' },\r\n    { idx: '02 \u2014 GONDOLKOD\u00c1S', title: 'Ahol elkezd \u00f6ssze\u00e1llni a k\u00e9p.', body: 'Megn\u00e9zz\u00fck, mi fontos, mi nem, \u00e9s mi az, amit\u0151l a m\u00e1rk\u00e1d val\u00f3ban a ti\u00e9d lehet. A kezdeti zajb\u00f3l lassan kirajzol\u00f3dik egy ir\u00e1ny.' },\r\n    { idx: '03 \u2014 MAG', title: 'Ahol kirajzol\u00f3dik az ir\u00e1ny.', body: 'A sok \u00f6tlet \u00e9s r\u00e9szlet m\u00f6g\u00f6tt megtal\u00e1ljuk azt, ami val\u00f3ban fontos. Azt a gondolatot \u00e9s karaktert, amire az eg\u00e9sz m\u00e1rka \u00e9p\u00fclhet.' },\r\n    { idx: '04 \u2014 RENDSZER', title: 'Ahol az \u00f6tletb\u0151l m\u00e1rka lesz.', body: 'A strat\u00e9gia, az arculat \u00e9s a m\u00e1rka minden megjelen\u00e9se egyetlen j\u00f3l m\u0171k\u00f6d\u0151 rendszerr\u00e9 \u00e1ll \u00f6ssze.' },\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 (Touch) vez\u00e9rl\u00e9s jav\u00edtva: Ha v\u00e9ge a st\u00e1diumoknak, nem blokkolja a lenti g\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    \/\/ Ha az els\u0151\/utols\u00f3 st\u00e1diumban vagyunk \u00e9s kifel\u00e9 scrollolna a felhaszn\u00e1l\u00f3, engedj\u00fck az alap\u00e9rtelmezett oldalg\u00f6rget\u00e9st\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    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.15 + spark * 1.1;\r\n\r\n      colorArr[i3] = Math.min(1.0, baseColors[i3] * boost);\r\n      colorArr[i3 + 1] = Math.min(1.0, baseColors[i3 + 1] * boost);\r\n      colorArr[i3 + 2] = Math.min(1.0, baseColors[i3 + 2] * boost);\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-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      A m\u00e1rka\u00e9p\u00edt\u00e9s els\u0151<br>\r\n      <span class=\"nuance-thinking__title-line\" data-reveal-text>l\u00e9p\u00e9se a Gondolkod\u00e1s.<\/span>\r\n    <\/h2>\r\n\r\n    <p class=\"nuance-thinking__desc\">\r\n      Egy er\u0151s m\u00e1rka t\u00f6bbr\u0151l sz\u00f3l ann\u00e1l, mint hogy j\u00f3l n\u00e9z ki. El\u0151sz\u00f6r azt keresem, mit k\u00e9pvisel a v\u00e1llalkoz\u00e1sod, kikhez szeretn\u00e9l sz\u00f3lni, \u00e9s mi az, ami val\u00f3ban megk\u00fcl\u00f6nb\u00f6ztet m\u00e1sokt\u00f3l. Ebb\u0151l a gondolkod\u00e1sb\u00f3l sz\u00fcletik meg az a vizu\u00e1lis identit\u00e1s, amelynek nemcsak karaktere, hanem c\u00e9lja is van.\r\n    <\/p>\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, 120px);\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\/* --- Eg\u00e9sz mondatos megjelen\u00e9si anim\u00e1ci\u00f3 ---\r\n   Nincs bet\u0171nk\u00e9nti DOM-felbont\u00e1s: a span tartalma\r\n   \u00e9rintetlen, egybef\u00fcgg\u0151 sz\u00f6veg marad -> a TranslatePress\r\n   egyetlen ford\u00edthat\u00f3 stringk\u00e9nt kezeli. *\/\r\n.nuance-thinking__title-line {\r\n  display: inline-block;\r\n  opacity: 0;\r\n  transform: translateY(0.4em) rotate(1.5deg);\r\n  filter: blur(10px);\r\n  transition:\r\n    opacity 0.9s cubic-bezier(.2,.7,.2,1),\r\n    transform 0.9s cubic-bezier(.2,.7,.2,1),\r\n    filter 0.9s cubic-bezier(.2,.7,.2,1);\r\n}\r\n.nuance-thinking__title-line.is-revealed {\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 {\r\n    transition: none;\r\n    opacity: 1;\r\n    transform: none;\r\n    filter: none;\r\n  }\r\n}\r\n\r\n.nuance-thinking__desc {\r\n  font-size: clamp(15px, 1.5vw, 18px);\r\n  line-height: 1.65;\r\n  color: var(--nt-dim);\r\n  max-width: 520px;\r\n  margin: 0 auto 48px;\r\n  font-weight: 400;\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  function initReveal() {\r\n    var targets = document.querySelectorAll('[data-reveal-text]');\r\n    if (!targets.length) return;\r\n\r\n    var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n    if (prefersReduced) {\r\n      targets.forEach(function (el) { el.classList.add('is-revealed'); });\r\n      return;\r\n    }\r\n\r\n    if ('IntersectionObserver' in window) {\r\n      var observer = new IntersectionObserver(function (entries) {\r\n        entries.forEach(function (entry) {\r\n          if (entry.isIntersecting) {\r\n            entry.target.classList.add('is-revealed');\r\n            observer.unobserve(entry.target);\r\n          }\r\n        });\r\n      }, { threshold: 0.4 });\r\n\r\n      targets.forEach(function (el) { observer.observe(el); });\r\n    } else {\r\n      targets.forEach(function (el) { el.classList.add('is-revealed'); });\r\n    }\r\n  }\r\n\r\n  if (document.readyState === 'loading') {\r\n    document.addEventListener('DOMContentLoaded', initReveal);\r\n  } else {\r\n    initReveal();\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-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>\u00d6t ter\u00fclet, egy gondolkod\u00e1sm\u00f3d: el\u0151sz\u00f6r \u00e9rts\u00fck meg, mi nem m\u0171k\u00f6dik, azt\u00e1n kezdj\u00fcnk el rajta v\u00e1ltoztatni.<\/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: \"Web Design\",\r\n      description: \"Egy j\u00f3 weboldal nem att\u00f3l m\u0171k\u00f6dik, hogy minden inform\u00e1ci\u00f3 \u00f6mlesztve rajta van. Hanem att\u00f3l, hogy mire a l\u00e1togat\u00f3 eljut a kapcsolatfelv\u00e9telig, m\u00e1r azt \u00e9rzi: Igen, pont ezt kerestem,ez KELL nekem. Ezt a logik\u00e1t \u00e9p\u00edtem fel a designban \u00e9s a m\u0171k\u00f6d\u00e9sben is.\",\r\n      tags: [\"Wordpress\", \"Weboldal\", \"Web Design\", \"Webshop\", \"Reszponz\u00edv Design\"],\r\n      mockup: \"001\"\r\n    },\r\n    {\r\n      id: \"02\",\r\n      title: \"M\u00e1rka\u00e9p\u00edt\u00e9s\",\r\n      description: \"Lehet egy m\u00e1rk\u00e1d, ami j\u00f3l n\u00e9z ki, m\u00e9gis minden alkalommal \u00fajra ki kell tal\u00e1lni, hogyan jelenjen meg. Itt rakjuk rendbe az alapokat, a pozicion\u00e1l\u00e1st\u00f3l \u00e9s a m\u00e1rka karakter\u00e9t\u0151l a vizu\u00e1lis rendszerig, hogy v\u00e9gre legyen egy stabil ir\u00e1ny, amib\u0151l \u00f6n\u00e1ll\u00f3an is tudsz tov\u00e1bb\u00e9p\u00edtkezni.\",\r\n      tags: [\"M\u00e1rkastrat\u00e9gia\", \"Arculattervez\u00e9s\", \"Log\u00f3\", \"Vizu\u00e1lis identit\u00e1s\", \"M\u00e1rkarendszer\"],\r\n      mockup: \"004\"\r\n    },\r\n    {\r\n      id: \"03\",\r\n      title: \"Rebrand\",\r\n      description: \"Van m\u00e1r egy m\u00e1rk\u00e1d. Van weboldalad. Tal\u00e1n m\u00e9g szereted is valamennyire. Csak valahogy m\u00e1r nem \u00e9rzed a saj\u00e1todnak. Vagy egyszer\u0171en kin\u0151tted. Ilyenkor nem mindent kezd\u00fcnk el\u00f6lr\u0151l, hanem megn\u00e9zz\u00fck, mi maradjon, mi v\u00e1ltozzon, \u00e9s hogyan lehet bel\u0151le egy olyan m\u00e1rka, amiben v\u00e9gre magadra ismersz.\",\r\n      tags: [\"M\u00e1rkafriss\u00edt\u00e9s\", \"\u00dajratervez\u00e9s\", \"Arculatfriss\u00edt\u00e9s\", \"Weboldal\", \"Vizu\u00e1lis identit\u00e1s\"],\r\n      mockup: \"002\"\r\n    },\r\n    {\r\n      id: \"04\",\r\n      title: \"Kamp\u00e1nyok & kommunik\u00e1ci\u00f3\",\r\n      description: \"Van egy term\u00e9ked, szolg\u00e1ltat\u00e1sod vagy \u00f6tleted, csak m\u00e9g nem tudod, hogyan lehetne igaz\u00e1n megmozgatni vele az embereket? Egy\u00fctt kital\u00e1ljuk a kamp\u00e1ny ir\u00e1ny\u00e1t, fel\u00e9p\u00edtj\u00fck a kommunik\u00e1ci\u00f3j\u00e1t, \u00e9s megtervezz\u00fck hozz\u00e1 azokat a tartalmakat \u00e9s hirdet\u00e9seket, amelyek \u00e9letre keltik.\",\r\n      tags: [\"Kamp\u00e1ny\u00f6tlet\", \"Kamp\u00e1nytervez\u00e9s\", \"K\u00f6z\u00f6ss\u00e9gi m\u00e9dia\", \"Hirdet\u00e9sek\", \"Kreat\u00edv koncepci\u00f3\"],\r\n      mockup: \"003\"\r\n    },\r\n    {\r\n      id: \"05\",\r\n      title: \"M\u00e1rkaanyagok\",\r\n      description: \"A m\u00e1rka nem csak a weboldaladon jelenik meg. Ott van egy prezent\u00e1ci\u00f3ban, egy aj\u00e1nlatban, egy n\u00e9vjegyen, egy kiadv\u00e1nyban, egy csomagol\u00e1son vagy ak\u00e1r egy esem\u00e9nyen is. Ezeket \u00fagy tervezem meg, hogy b\u00e1rhol tal\u00e1lkozzanak vele, ugyanazt a m\u00e1rk\u00e1t \u00e9rezz\u00e9k m\u00f6g\u00f6tte.\",\r\n      tags: [\"Nyomtatott anyagok\", \"Esem\u00e9nyanyagok\", \"Kiadv\u00e1ny\", \"Csomagol\u00e1s\", \"N\u00e9vjegy\"],\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-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-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>Az \u00f6tleteknek strukt\u00fara kell.<br>A m\u00e1rk\u00e1dnak pedig egy saj\u00e1t <em>ir\u00e1ny.<\/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>Sok j\u00f3 \u00f6tletb\u0151l nem mindig \u00e1ll \u00f6ssze egy j\u00f3 m\u00e1rka. <span>Seg\u00edtek rendet tenni k\u00f6z\u00f6tt\u00fck, megtal\u00e1lni, mi az, ami igaz\u00e1n fontos, \u00e9s ebb\u0151l olyan rendszert \u00e9p\u00edteni, amivel m\u00e1r k\u00f6nnyebb tov\u00e1bbmenni.<\/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 strat\u00e9gia, az \u00f6tletek \u00e9s a felismer\u00e9sek v\u00e9g\u00fcl form\u00e1t kapnak. \u00cdgy sz\u00fcletik meg egy olyan vizu\u00e1lis vil\u00e1g, ami nemcsak j\u00f3l n\u00e9z ki, hanem v\u00e9gre \u00e9rthet\u0151en megmutatja, ki vagy \u00e9s mit k\u00e9pviselsz.<\/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      M\u00c1RKASTRAT\u00c9GIA\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      VIZU\u00c1LIS IDENTIT\u00c1S\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      WEB & DIGIT\u00c1LIS\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      KREAT\u00cdV IR\u00c1NY\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: 380px;\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, 15px);\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-0aa3aba e-con e-atomic-element e-flexbox-base e-a052aac \" data-id=\"0aa3aba\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"0aa3aba\">\n    \t\t<div class=\"elementor-element elementor-element-961a750 elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"961a750\" 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\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&display=swap');\r\n\r\n\r\n\r\n  .ncs-testimonials {\r\n\r\n    --ncs-bg: #0a0a0c;\r\n\r\n    --ncs-card-bg: #131316;\r\n\r\n    --ncs-border: rgba(255,255,255,0.12);\r\n\r\n    --ncs-accent: #d59256;\r\n\r\n    --ncs-text: #ffffff;\r\n\r\n    --ncs-text-dim: rgba(255,255,255,0.55);\r\n\r\n\r\n\r\n    position: relative;\r\n\r\n    background: var(--ncs-bg);\r\n\r\n    overflow: hidden;\r\n\r\n    height: 100vh;\r\n\r\n    min-height: 620px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n  }\r\n\r\n\r\n\r\n  .ncs-testimonials * { box-sizing: border-box; }\r\n\r\n\r\n\r\n  .ncs-testi-bg {\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: center;\r\n\r\n    pointer-events: none;\r\n\r\n    z-index: 1;\r\n\r\n  }\r\n\r\n\r\n\r\n  .ncs-testi-bgtext {\r\n\r\n    font-family: 'Montserrat', sans-serif;\r\n\r\n    font-weight: 800;\r\n\r\n    text-transform: uppercase;\r\n\r\n    color: rgba(255, 255, 255, 0.6);\r\n\r\n    font-size: clamp(3.5rem, 14vw, 13rem);\r\n\r\n    letter-spacing: 0.01em;\r\n\r\n    white-space: nowrap;\r\n\r\n    display: flex;\r\n\r\n  }\r\n\r\n\r\n\r\n  .ncs-testi-bgtext .ncs-letter {\r\n\r\n    display: inline-block;\r\n\r\n    opacity: 0;\r\n\r\n    transform: translateY(0.4em);\r\n\r\n    will-change: transform, opacity;\r\n\r\n  }\r\n\r\n\r\n\r\n  .ncs-testi-cards {\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    z-index: 2;\r\n\r\n  }\r\n\r\n\r\n\r\n  .ncs-testi-card {\r\n\r\n    position: absolute;\r\n\r\n    width: min(320px, 78vw);\r\n\r\n    background: var(--ncs-card-bg);\r\n\r\n    border: 1px solid var(--ncs-border);\r\n\r\n    border-radius: 20px;\r\n\r\n    padding: 28px 26px 22px;\r\n\r\n    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.65);\r\n\r\n    will-change: transform;\r\n\r\n  }\r\n\r\n\r\n\r\n  .ncs-testi-quote-mark {\r\n\r\n    font-family: 'Fraunces', serif;\r\n\r\n    font-size: 2.6rem;\r\n\r\n    line-height: 1;\r\n\r\n    color: var(--ncs-accent);\r\n\r\n    margin-bottom: 6px;\r\n\r\n  }\r\n\r\n\r\n\r\n  .ncs-testi-quote {\r\n\r\n    font-family: 'Fraunces', serif;\r\n\r\n    font-style: italic;\r\n\r\n    font-weight: 400;\r\n\r\n    font-size: 1.05rem;\r\n\r\n    line-height: 1.5;\r\n\r\n    color: rgba(255,255,255,0.92);\r\n\r\n    margin: 0 0 22px;\r\n\r\n  }\r\n\r\n\r\n\r\n  .ncs-testi-footer {\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    justify-content: space-between;\r\n\r\n    gap: 12px;\r\n\r\n    padding-top: 16px;\r\n\r\n    border-top: 1px solid rgba(255,255,255,0.08);\r\n\r\n  }\r\n\r\n\r\n\r\n  .ncs-testi-author {\r\n\r\n    display: flex;\r\n\r\n    flex-direction: column;\r\n\r\n    gap: 3px;\r\n\r\n  }\r\n\r\n\r\n\r\n  .ncs-testi-name {\r\n\r\n    font-family: 'Montserrat', sans-serif;\r\n\r\n    font-size: 0.78rem;\r\n\r\n    font-weight: 700;\r\n\r\n    letter-spacing: 0.06em;\r\n\r\n    text-transform: uppercase;\r\n\r\n    color: var(--ncs-text);\r\n\r\n  }\r\n\r\n\r\n\r\n  .ncs-testi-role {\r\n\r\n    font-family: 'Montserrat', sans-serif;\r\n\r\n    font-size: 0.72rem;\r\n\r\n    font-weight: 500;\r\n\r\n    color: var(--ncs-text-dim);\r\n\r\n  }\r\n\r\n\r\n\r\n  .ncs-testi-logo {\r\n\r\n    font-family: 'Montserrat', sans-serif;\r\n\r\n    font-weight: 700;\r\n\r\n    font-size: 0.68rem;\r\n\r\n    letter-spacing: 0.08em;\r\n\r\n    text-transform: uppercase;\r\n\r\n    color: rgba(255,255,255,0.38);\r\n\r\n    white-space: nowrap;\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* card column placement *\/\r\n\r\n  .ncs-testi-card[data-col=\"left\"]   { left: 6%; }\r\n\r\n  .ncs-testi-card[data-col=\"center\"] { left: 50%; transform: translateX(-50%); }\r\n\r\n  .ncs-testi-card[data-col=\"right\"]  { right: 6%; }\r\n\r\n\r\n\r\n  @media (max-width: 900px) {\r\n\r\n    .ncs-testi-card { width: min(280px, 82vw); }\r\n\r\n    .ncs-testi-card[data-col=\"left\"]   { left: 4%; }\r\n\r\n    .ncs-testi-card[data-col=\"right\"]  { right: 4%; }\r\n\r\n  }\r\n\r\n\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n\r\n    .ncs-testimonials { height: auto; min-height: 0; padding: 80px 5vw; }\r\n\r\n    .ncs-testi-bg { position: relative; padding-bottom: 40px; }\r\n\r\n    .ncs-testi-bgtext .ncs-letter { opacity: 1; transform: none; }\r\n\r\n    .ncs-testi-cards {\r\n\r\n      position: relative;\r\n\r\n      display: grid;\r\n\r\n      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\r\n\r\n      gap: 24px;\r\n\r\n    }\r\n\r\n    .ncs-testi-card { position: relative !important; inset: auto; left: auto !important; right: auto !important; transform: none !important; }\r\n\r\n  }\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<section class=\"ncs-testimonials\">\r\n\r\n  <div class=\"ncs-testi-bg\">\r\n\r\n    <h2 class=\"ncs-testi-bgtext\" aria-hidden=\"true\" id=\"ncs-testi-bgtext\">V\u00c9LEM\u00c9NYEK<\/h2>\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <div class=\"ncs-testi-cards\" id=\"ncs-testi-cards\">\r\n\r\n\r\n\r\n    <div class=\"ncs-testi-card\" data-col=\"left\" data-speed=\"0.85\" data-start=\"4\" style=\"top:6%;\">\r\n\r\n      <div class=\"ncs-testi-quote-mark\">&ldquo;<\/div>\r\n\r\n      <p class=\"ncs-testi-quote\">\u00c9letemben kev\u00e9s igaz\u00e1n inspir\u00e1l\u00f3 emberrel tal\u00e1lkoztam \u00e9s Te ebbe a kev\u00e9sbe tartozol. Nemcsak szakmailag, hanem emberileg is. Ritka az, amikor valaki ennyire tiszt\u00e1n l\u00e1t, \u00e9rez es alkot egyszerre.<\/p>\r\n\r\n      <div class=\"ncs-testi-footer\">\r\n\r\n        <div class=\"ncs-testi-author\">\r\n\r\n          <span class=\"ncs-testi-name\">V\u00f6r\u00f6s Szimonetta<\/span>\r\n\r\n          <span class=\"ncs-testi-role\">Silent Shapes<\/span>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"ncs-testi-logo\">Radius<\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <div class=\"ncs-testi-card\" data-col=\"center\" data-speed=\"1.15\" data-start=\"0\" style=\"top:32%;\">\r\n\r\n      <div class=\"ncs-testi-quote-mark\">&ldquo;<\/div>\r\n\r\n      <p class=\"ncs-testi-quote\">I absolutely loved the work you did for me and I\u2019ve truly appreciated your passion and attention to detail.Your talent and execution really stood out to me.<\/p>\r\n\r\n      <div class=\"ncs-testi-footer\">\r\n\r\n        <div class=\"ncs-testi-author\">\r\n\r\n          <span class=\"ncs-testi-name\">Chelsea Miller<\/span>\r\n\r\n          <span class=\"ncs-testi-role\">Van der Vows<\/span>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"ncs-testi-logo\">Alt+Shift<\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <div class=\"ncs-testi-card\" data-col=\"right\" data-speed=\"0.7\" data-start=\"7\" style=\"top:12%;\">\r\n\r\n      <div class=\"ncs-testi-quote-mark\">&ldquo;<\/div>\r\n\r\n      <p class=\"ncs-testi-quote\">Az \u00e9n fejemben egy egyszer\u0171 mondhatni \"primit\u00edv\" webshop volt, hogy jaj \u00e9n nem akarom t\u00falbonyol\u00edtani, meg nem kell semmi extra. Azt\u00e1n elk\u00fcldted az els\u0151 terveket, mindent, nekem meg leesett az \u00e1llam.<\/p>\r\n\r\n      <div class=\"ncs-testi-footer\">\r\n\r\n        <div class=\"ncs-testi-author\">\r\n\r\n          <span class=\"ncs-testi-name\">Keszthelyi R\u00e9ka<\/span>\r\n\r\n          <span class=\"ncs-testi-role\">iliclothes<\/span>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"ncs-testi-logo\">ACME<\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <div class=\"ncs-testi-card\" data-col=\"left\" data-speed=\"1.3\" data-start=\"11\" style=\"top:56%;\">\r\n\r\n      <div class=\"ncs-testi-quote-mark\">&ldquo;<\/div>\r\n\r\n      <p class=\"ncs-testi-quote\">MI K\u00d6SZ\u00d6NJ\u00dcK HOGY VAGY NEK\u00dcNK\u2764\ufe0f\u2764\ufe0f\u2764\ufe0f\u2764\ufe0f\u2764\ufe0f Soha kedvesebb emberrel m\u00e9g nem dolgoztam egy\u00fctt. N\u00e9lk\u00fcled nem siker\u00fclt volna!!\ud83e\udd79\u2665\ufe0f<\/p>\r\n\r\n      <div class=\"ncs-testi-footer\">\r\n\r\n        <div class=\"ncs-testi-author\">\r\n\r\n          <span class=\"ncs-testi-name\">Balogh-Farkas Anna<\/span>\r\n\r\n          <span class=\"ncs-testi-role\">Amelianne Beauty & Beyond<\/span>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"ncs-testi-logo\">Norr Studio<\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <div class=\"ncs-testi-card\" data-col=\"center\" data-speed=\"0.95\" data-start=\"15\" style=\"top:62%;\">\r\n\r\n      <div class=\"ncs-testi-quote-mark\">&ldquo;<\/div>\r\n\r\n      <p class=\"ncs-testi-quote\">WOW.\ud83d\ude0d\ud83d\ude0d Nagyon naggyyyon tetszik, szuper lett, \u00e9s a gondolatod m\u00f6g\u00f6tte is tetszik.\ud83d\ude0a<\/p>\r\n\r\n      <div class=\"ncs-testi-footer\">\r\n\r\n        <div class=\"ncs-testi-author\">\r\n\r\n          <span class=\"ncs-testi-name\">T\u00f3th Vivien<\/span>\r\n\r\n          <span class=\"ncs-testi-role\">Lunelle Aesthetic<\/span>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"ncs-testi-logo\">Fielding &amp; Co.<\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <div class=\"ncs-testi-card\" data-col=\"right\" data-speed=\"1.05\" data-start=\"19\" style=\"top:56%;\">\r\n\r\n      <div class=\"ncs-testi-quote-mark\">&ldquo;<\/div>\r\n\r\n      <p class=\"ncs-testi-quote\">Anita k\u00e9sz\u00edtette a v\u00e1llalkoz\u00e1som teljes arculat\u00e1t a log\u00f3t\u00f3l kezdve eg\u00e9szen a weboldalig. Elk\u00e9peszt\u0151 munk\u00e1t v\u00e9gzett, \u00e1lmodni sem mertem volna ennyire profi \u00e9s eleg\u00e1ns v\u00e9geredm\u00e9nyr\u0151l. A k\u00f6z\u00f6s munka is nagyon k\u00f6nnyen ment, mindig minden k\u00e9rd\u00e9semre v\u00e1laszt kaptam. Csak aj\u00e1nlani tudom.\ud83d\ude0d<\/p>\r\n\r\n      <div class=\"ncs-testi-footer\">\r\n\r\n        <div class=\"ncs-testi-author\">\r\n\r\n          <span class=\"ncs-testi-name\">Beck Mirella<\/span>\r\n\r\n          <span class=\"ncs-testi-role\">Mirelle Beauty<\/span>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"ncs-testi-logo\">Vantage<\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n\r\n(function () {\r\n\r\n  function ncsInit() {\r\n\r\n    var section = document.querySelector('.ncs-testimonials');\r\n\r\n    if (!section) return;\r\n\r\n\r\n\r\n    \/\/ Split background text into letter spans for reveal animation\r\n\r\n    var bgText = document.getElementById('ncs-testi-bgtext');\r\n\r\n    if (bgText && !bgText.dataset.split) {\r\n\r\n      var raw = bgText.textContent;\r\n\r\n      bgText.textContent = '';\r\n\r\n      raw.split('').forEach(function (ch) {\r\n\r\n        var span = document.createElement('span');\r\n\r\n        span.className = 'ncs-letter';\r\n\r\n        span.textContent = ch === ' ' ? '\\u00A0' : ch;\r\n\r\n        bgText.appendChild(span);\r\n\r\n      });\r\n\r\n      bgText.dataset.split = '1';\r\n\r\n    }\r\n\r\n\r\n\r\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\r\n\r\n      return; \/\/ static fallback handled entirely by CSS\r\n\r\n    }\r\n\r\n\r\n\r\n    if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\r\n\r\n      return;\r\n\r\n    }\r\n\r\n    gsap.registerPlugin(ScrollTrigger);\r\n\r\n\r\n\r\n    var letters = bgText.querySelectorAll('.ncs-letter');\r\n\r\n    var cards = section.querySelectorAll('.ncs-testi-card');\r\n\r\n    var vh = window.innerHeight;\r\n\r\n\r\n\r\n    \/\/ starting stack position: below the viewport, slight column-based offset\r\n\r\n    cards.forEach(function (card) {\r\n\r\n      gsap.set(card, { yPercent: 140, opacity: 0 });\r\n\r\n    });\r\n\r\n\r\n\r\n    var tl = gsap.timeline({\r\n\r\n      scrollTrigger: {\r\n\r\n        trigger: section,\r\n\r\n        start: 'top top',\r\n\r\n        end: '+=400%',\r\n\r\n        scrub: 1,\r\n\r\n        pin: true,\r\n\r\n        anticipatePin: 1\r\n\r\n      }\r\n\r\n    });\r\n\r\n\r\n\r\n    \/\/ reveal the giant background type WHILE the cards are already drifting \u2014\r\n\r\n    \/\/ spread across a large share of the pinned scroll so both animations run concurrently\r\n\r\n    tl.to(letters, {\r\n\r\n      opacity: 1,\r\n\r\n      y: 0,\r\n\r\n      duration: 3,\r\n\r\n      ease: 'power1.out',\r\n\r\n      stagger: { each: 1.4, from: 'start' }\r\n\r\n    }, 0);\r\n\r\n\r\n\r\n    \/\/ float each card up through the frame at its own depth\/speed\r\n\r\n    cards.forEach(function (card) {\r\n\r\n      var speed = parseFloat(card.getAttribute('data-speed')) || 1;\r\n\r\n      var start = parseFloat(card.getAttribute('data-start')) || 0;\r\n\r\n      var duration = 22 \/ speed;\r\n\r\n\r\n\r\n      tl.fromTo(card,\r\n\r\n        { yPercent: 140, opacity: 0 },\r\n\r\n        {\r\n\r\n          yPercent: -160,\r\n\r\n          opacity: 1,\r\n\r\n          ease: 'none',\r\n\r\n          duration: duration,\r\n\r\n          onStart: function () { gsap.to(card, { opacity: 1, duration: 1.2, overwrite: false }); }\r\n\r\n        },\r\n\r\n        start * 0.6\r\n\r\n      );\r\n\r\n\r\n\r\n      \/\/ fade out near the top of its travel\r\n\r\n      tl.to(card, { opacity: 0, duration: 3, ease: 'power1.in' }, start * 0.6 + duration - 3);\r\n\r\n    });\r\n\r\n\r\n\r\n    ScrollTrigger.refresh();\r\n\r\n  }\r\n\r\n\r\n\r\n  function ncsLoadScript(src, cb) {\r\n\r\n    var s = document.createElement('script');\r\n\r\n    s.src = src;\r\n\r\n    s.onload = cb;\r\n\r\n    document.head.appendChild(s);\r\n\r\n  }\r\n\r\n\r\n\r\n  function ncsBoot() {\r\n\r\n    if (typeof gsap === 'undefined') {\r\n\r\n      ncsLoadScript('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js', function () {\r\n\r\n        ncsLoadScript('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js', ncsInit);\r\n\r\n      });\r\n\r\n    } else if (typeof ScrollTrigger === 'undefined') {\r\n\r\n      ncsLoadScript('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js', ncsInit);\r\n\r\n    } else {\r\n\r\n      ncsInit();\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n\r\n  if (document.readyState === 'loading') {\r\n\r\n    document.addEventListener('DOMContentLoaded', ncsBoot);\r\n\r\n  } else {\r\n\r\n    ncsBoot();\r\n\r\n  }\r\n\r\n})();\r\n\r\n<\/script> \r\n\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-d1e9461 e-con e-atomic-element e-flexbox-base e-87fdfb2 \" data-id=\"d1e9461\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d1e9461\">\n    \t\t<div class=\"elementor-element elementor-element-f1a2d75 elementor-hidden-desktop elementor-hidden-laptop elementor-hidden-tablet elementor-widget elementor-widget-html\" data-id=\"f1a2d75\" 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=Montserrat:wght@500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&display=swap');\r\n\r\n  .ncs-mobile-testimonials {\r\n    --ncs-bg: #0a0a0c;\r\n    --ncs-card-bg: #131316;\r\n    --ncs-border: rgba(255,255,255,0.12);\r\n    --ncs-accent: #d59256;\r\n    --ncs-text: #ffffff;\r\n    --ncs-text-dim: rgba(255,255,255,0.55);\r\n\r\n    background: var(--ncs-bg);\r\n    padding: 50px 0;\r\n    overflow: hidden;\r\n    font-family: 'Montserrat', sans-serif;\r\n  }\r\n\r\n  .ncs-mobile-testimonials * { box-sizing: border-box; }\r\n\r\n  .ncs-mob-header {\r\n    padding: 0 20px 24px;\r\n    text-align: center;\r\n  }\r\n\r\n  .ncs-mob-title {\r\n    font-weight: 800;\r\n    text-transform: uppercase;\r\n    color: rgba(255, 255, 255, 0.7);\r\n    font-size: 2.2rem;\r\n    letter-spacing: 0.05em;\r\n    margin: 0;\r\n  }\r\n\r\n  .ncs-mob-slider {\r\n    display: flex;\r\n    gap: 16px;\r\n    overflow-x: auto;\r\n    scroll-snap-type: x mandatory;\r\n    padding: 0 20px 20px;\r\n    scrollbar-width: none; \/* Firefox *\/\r\n    -webkit-overflow-scrolling: touch;\r\n  }\r\n\r\n  .ncs-mob-slider::-webkit-scrollbar {\r\n    display: none; \/* Chrome, Safari, Opera *\/\r\n  }\r\n\r\n  .ncs-mob-card {\r\n    flex: 0 0 85%;\r\n    max-width: 320px;\r\n    background: var(--ncs-card-bg);\r\n    border: 1px solid var(--ncs-border);\r\n    border-radius: 20px;\r\n    padding: 24px 20px 20px;\r\n    box-shadow: 0 20px 40px rgba(0,0,0,0.5);\r\n    scroll-snap-align: center;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n  }\r\n\r\n  .ncs-mob-quote-mark {\r\n    font-family: 'Fraunces', serif;\r\n    font-size: 2.2rem;\r\n    line-height: 1;\r\n    color: var(--ncs-accent);\r\n    margin-bottom: 4px;\r\n  }\r\n\r\n  .ncs-mob-quote {\r\n    font-family: 'Fraunces', serif;\r\n    font-style: italic;\r\n    font-weight: 400;\r\n    font-size: 0.95rem;\r\n    line-height: 1.5;\r\n    color: rgba(255,255,255,0.92);\r\n    margin: 0 0 20px;\r\n  }\r\n\r\n  .ncs-mob-footer {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 12px;\r\n    padding-top: 14px;\r\n    border-top: 1px solid rgba(255,255,255,0.08);\r\n  }\r\n\r\n  .ncs-mob-author {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 2px;\r\n  }\r\n\r\n  .ncs-mob-name {\r\n    font-size: 0.75rem;\r\n    font-weight: 700;\r\n    letter-spacing: 0.06em;\r\n    text-transform: uppercase;\r\n    color: var(--ncs-text);\r\n  }\r\n\r\n  .ncs-mob-role {\r\n    font-size: 0.68rem;\r\n    font-weight: 500;\r\n    color: var(--ncs-text-dim);\r\n  }\r\n\r\n  .ncs-mob-logo {\r\n    font-weight: 700;\r\n    font-size: 0.65rem;\r\n    letter-spacing: 0.08em;\r\n    text-transform: uppercase;\r\n    color: rgba(255,255,255,0.38);\r\n    white-space: nowrap;\r\n  }\r\n<\/style>\r\n\r\n<section class=\"ncs-mobile-testimonials\">\r\n  <div class=\"ncs-mob-header\">\r\n    <h2 class=\"ncs-mob-title\">V\u00e9lem\u00e9nyek<\/h2>\r\n  <\/div>\r\n\r\n  <div class=\"ncs-mob-slider\">\r\n\r\n    <div class=\"ncs-mob-card\">\r\n      <div>\r\n        <div class=\"ncs-mob-quote-mark\">&ldquo;<\/div>\r\n        <p class=\"ncs-mob-quote\">\u00f6sz\u00f6n\u00f6m sz\u00e9pen Anita \ud83d\udc96\r\n\r\nHighly recommend Anita for anyone looking for thoughtful, intentional graphic design. Even with a major time difference, we made it work seamlessly. Anita is so attentive and truly cares about the story behind each design, which makes the entire experience, and the final product, so much more heartfelt.\r\n\r\nReally love my logo \ud83e\udda2\ud83e\udebd\ud83e\udd0d<\/p>\r\n      <\/div>\r\n      <div class=\"ncs-mob-footer\">\r\n        <div class=\"ncs-mob-author\">\r\n          <span class=\"ncs-mob-name\">Chelsea Miller<\/span>\r\n          <span class=\"ncs-mob-role\">Van der Vows<\/span>\r\n        <\/div>\r\n        <div class=\"ncs-mob-logo\">Radius<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ncs-mob-card\">\r\n      <div>\r\n        <div class=\"ncs-mob-quote-mark\">&ldquo;<\/div>\r\n        <p class=\"ncs-mob-quote\">\u00c9letemben kev\u00e9s igaz\u00e1n inspir\u00e1l\u00f3 emberrel tal\u00e1lkoztam \u00e9s Te ebbe a kev\u00e9sbe tartozol. Nemcsak szakmailag, hanem emberileg is. Ritka az, amikor valaki ennyire tiszt\u00e1n l\u00e1t, \u00e9rez es alkot egyszerre<\/p>\r\n      <\/div>\r\n      <div class=\"ncs-mob-footer\">\r\n        <div class=\"ncs-mob-author\">\r\n          <span class=\"ncs-mob-name\">V\u00f6r\u00f6s Szimonetta<\/span>\r\n          <span class=\"ncs-mob-role\">Silent Shapes<\/span>\r\n        <\/div>\r\n        <div class=\"ncs-mob-logo\">Alt+Shift<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ncs-mob-card\">\r\n      <div>\r\n        <div class=\"ncs-mob-quote-mark\">&ldquo;<\/div>\r\n        <p class=\"ncs-mob-quote\">Az \u00e9n fejemben egy egyszer\u0171 mondhatni \"primit\u00edv\" webshop volt, hogy jaj \u00e9n nem akarom t\u00falbonyol\u00edtani, meg nem kell semmi extra. Azt\u00e1n elk\u00fcldted az els\u0151 terveket, mindent, nekem meg leesett az \u00e1llam. <\/p>\r\n      <\/div>\r\n      <div class=\"ncs-mob-footer\">\r\n        <div class=\"ncs-mob-author\">\r\n          <span class=\"ncs-mob-name\">Keszthelyi R\u00e9ka<\/span>\r\n          <span class=\"ncs-mob-role\">iliclothes<\/span>\r\n        <\/div>\r\n        <div class=\"ncs-mob-logo\">ACME<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ncs-mob-card\">\r\n      <div>\r\n        <div class=\"ncs-mob-quote-mark\">&ldquo;<\/div>\r\n        <p class=\"ncs-mob-quote\">MI K\u00d6SZ\u00d6NJ\u00dcK HOGY VAGY NEK\u00dcNK\u2764\ufe0f\u2764\ufe0f\u2764\ufe0f\u2764\ufe0f\u2764\ufe0f Soha kedvesebb emberrel m\u00e9g nem dolgoztam egy\u00fctt. N\u00e9lk\u00fcled nem siker\u00fclt volna!!\ud83e\udd79\u2665\ufe0f<\/p>\r\n      <\/div>\r\n      <div class=\"ncs-mob-footer\">\r\n        <div class=\"ncs-mob-author\">\r\n          <span class=\"ncs-mob-name\">Balogh-Farkas Anna<\/span>\r\n          <span class=\"ncs-mob-role\">Amelianne Beauty & Beyond<\/span>\r\n        <\/div>\r\n        <div class=\"ncs-mob-logo\">Norr Studio<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ncs-mob-card\">\r\n      <div>\r\n        <div class=\"ncs-mob-quote-mark\">&ldquo;<\/div>\r\n        <p class=\"ncs-mob-quote\"WOW.\ud83d\ude0d\ud83d\ude0d Nagyon naggyyyon tetszik, szuper lett, \u00e9s a gondolatod m\u00f6g\u00f6tte is tetszik.\ud83d\ude0a<\/p>\r\n      <\/div>\r\n      <div class=\"ncs-mob-footer\">\r\n        <div class=\"ncs-mob-author\">\r\n          <span class=\"ncs-mob-name\">T\u00f3th Vivien<\/span>\r\n          <span class=\"ncs-mob-role\">Lunelle Aesthetic<\/span>\r\n        <\/div>\r\n        <div class=\"ncs-mob-logo\">Fielding &amp; Co.<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ncs-mob-card\">\r\n      <div>\r\n        <div class=\"ncs-mob-quote-mark\">&ldquo;<\/div>\r\n        <p class=\"ncs-mob-quote\">Anita k\u00e9sz\u00edtette a v\u00e1llalkoz\u00e1som teljes arculat\u00e1t a log\u00f3t\u00f3l kezdve eg\u00e9szen a weboldalig. Elk\u00e9peszt\u0151 munk\u00e1t v\u00e9gzett, \u00e1lmodni sem mertem volna ennyire profi \u00e9s eleg\u00e1ns v\u00e9geredm\u00e9nyr\u0151l. A k\u00f6z\u00f6s munka is nagyon k\u00f6nnyen ment, mindig minden k\u00e9rd\u00e9semre v\u00e1laszt kaptam. Csak aj\u00e1nlani tudom.\ud83d\ude0d<\/p>\r\n      <\/div>\r\n      <div class=\"ncs-mob-footer\">\r\n        <div class=\"ncs-mob-author\">\r\n          <span class=\"ncs-mob-name\">Beck Mirella<\/span>\r\n          <span class=\"ncs-mob-role\">Mirelle Beauty<\/span>\r\n        <\/div>\r\n        <div class=\"ncs-mob-logo\">Vantage<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\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-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 KOMPLEXIT\u00c1S Ahol minden \u00f6tlet megsz\u00fcletik. \u00d6tletek, lehet\u0151s\u00e9gek, f\u00e9lmondatok \u00e9s kapcsol\u00f3d\u00e1sok. M\u00e9g nem kell, hogy minden a hely\u00e9n legyen. El\u0151sz\u00f6r csak n\u00e9zz\u00fck meg, mi van el\u0151tt\u00fcnk. Komplexit\u00e1s Gondolkod\u00e1s&#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":228,"href":"https:\/\/nuancecreative.hu\/en\/wp-json\/wp\/v2\/pages\/3575\/revisions"}],"predecessor-version":[{"id":4143,"href":"https:\/\/nuancecreative.hu\/en\/wp-json\/wp\/v2\/pages\/3575\/revisions\/4143"}],"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}]}}