[{"id":"bc13d7f","elType":"section","isInner":false,"settings":{"layout":"full_width","stretch_section":"","column_gap":"no","padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"c926c93","elType":"column","settings":{"_column_size":100,"_inline_size":null,"padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"71354e0","elType":"widget","widgetType":"html","settings":{"html":"\n<style>\nbody { overflow-x: hidden; }\n</style>\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css\">\n\n<style>\n.ndi-wdp * { box-sizing: border-box; }\n.ndi-wdp, .ndi-wdp * { font-family: \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\n.ndi-wdp a { text-decoration: none; }\n.ndi-wdp img { max-width: 100%; display: block; }\n.ndi-wdp ul { list-style: none; }\n.ndi-wdp p { margin: 0; }\n.ndi-wdp h1,.ndi-wdp h2,.ndi-wdp h3,.ndi-wdp h4,.ndi-wdp h5 { margin: 0; }\n\n.ndi-wdp {\n  --blue-50:#eef0fa;--blue-100:#d6dbf2;--blue-200:#aab3e2;--blue-300:#7b87cf;\n  --blue-400:#5060b4;--blue-500:#283582;--blue-600:#222d6f;--blue-700:#1b245a;\n  --blue-800:#141b45;--blue-900:#0d1230;--blue-950:#080b1f;\n  --teal-50:#e7faf5;--teal-100:#c4f3e8;--teal-200:#93e9d6;--teal-300:#5cdcc0;\n  --teal-400:#24d0ae;--teal-500:#18b598;--teal-600:#11947c;--teal-700:#0d7363;\n  --neutral-0:#ffffff;--neutral-25:#fbfcfe;--neutral-50:#f5f7fb;\n  --neutral-100:#eef1f7;--neutral-200:#e1e6f0;--neutral-300:#c9d1e0;\n  --neutral-400:#9aa5bd;--neutral-500:#6b7691;--neutral-600:#4e5870;\n  --neutral-700:#3a4258;--neutral-800:#262d40;--neutral-900:#161a28;\n  --surface-page:#fbfcfe;--surface-subtle:#f5f7fb;--surface-card:#ffffff;\n  --surface-inverse:#283582;--surface-inverse-deep:#0d1230;\n  --text-strong:#0d1230;--text-body:#3a4258;--text-muted:#6b7691;\n  --text-on-dark:#ffffff;--text-on-dark-muted:#b9c2da;\n  --text-accent:#11947c;--text-brand:#283582;\n  --border-subtle:#e1e6f0;--border-default:#c9d1e0;\n  --border-on-dark:rgba(255,255,255,0.14);\n  --accent:#24d0ae;--accent-hover:#18b598;--accent-press:#11947c;\n  --primary:#283582;--primary-hover:#222d6f;\n  --gradient-brand:linear-gradient(135deg,#283582 0%,#18b598 100%);\n  --gradient-hero:linear-gradient(160deg,#1b245a 0%,#283582 55%,#11947c 130%);\n  --gradient-text:linear-gradient(100deg,#283582 0%,#18b598 90%);\n  --glow-teal:rgba(36,208,174,0.35);--glow-blue:rgba(40,53,130,0.40);\n  --shadow-xs:0 1px 2px rgba(20,27,69,0.06);\n  --shadow-sm:0 2px 8px rgba(20,27,69,0.06);\n  --shadow-md:0 8px 24px rgba(20,27,69,0.08);\n  --shadow-lg:0 18px 48px rgba(20,27,69,0.12);\n  --shadow-xl:0 32px 80px rgba(20,27,69,0.16);\n  --radius-xs:6px;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;\n  --radius-xl:32px;--radius-2xl:40px;--radius-pill:999px;\n  --space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;\n  --space-5:1.5rem;--space-6:2rem;--space-7:2.5rem;--space-8:3rem;\n  --space-10:4rem;--space-12:5rem;--space-14:6rem;\n  --section-y:clamp(2.75rem,calc(1.25rem + 6vw),6.75rem);\n  --container-max:1200px;--container-pad:clamp(1.25rem,0.5rem + 3vw,2.5rem);\n  --text-display-xl:clamp(2.75rem,calc(1.6rem + 4.6vw),5rem);\n  --text-display-lg:clamp(2.25rem,calc(1.5rem + 3vw),3.5rem);\n  --text-display-md:clamp(1.85rem,calc(1.4rem + 1.8vw),2.5rem);\n  --text-h3:1.5rem;--text-h4:1.25rem;--text-lead:1.25rem;\n  --text-body:1rem;--text-sm:0.9375rem;--text-xs:0.8125rem;\n  --lh-body:1.65;--lh-heading:1.25;\n  --fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-extrabold:800;\n  --ease-out:cubic-bezier(0.22,1,0.36,1);\n  --ease-in-out:cubic-bezier(0.65,0,0.35,1);\n  --dur-fast:140ms;--dur-base:240ms;\n}\n\n@keyframes ndiFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}\n@keyframes ndiFloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}\n@keyframes ndiFloatC{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}\n.ndi-wdp .ndi-float-a{animation:ndiFloatA 5.5s cubic-bezier(0.65,0,0.35,1) infinite}\n.ndi-wdp .ndi-float-b{animation:ndiFloatB 6.5s cubic-bezier(0.65,0,0.35,1) infinite}\n.ndi-wdp .ndi-float-c{animation:ndiFloatC 5s cubic-bezier(0.65,0,0.35,1) infinite}\n.ndi-wdp .ndi-pill-0{animation:ndiFloatC 6s cubic-bezier(0.65,0,0.35,1) infinite}\n.ndi-wdp .ndi-pill-1{animation:ndiFloatA 7s cubic-bezier(0.65,0,0.35,1) infinite}\n.ndi-wdp .ndi-pill-2{animation:ndiFloatB 6.4s cubic-bezier(0.65,0,0.35,1) infinite}\n.ndi-wdp .ndi-pill-3{animation:ndiFloatC 7.4s cubic-bezier(0.65,0,0.35,1) infinite}\n.ndi-wdp .ndi-tilt{transition:transform .5s cubic-bezier(0.22,1,0.36,1)}\n.ndi-wdp .ndi-hero-visual:hover .ndi-tilt{transform:translateY(-4px)}\n\n.ndi-wdp .ndi-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}\n\n.ndi-wdp .ndi-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;border-radius:var(--radius-pill);border:none;cursor:pointer;text-decoration:none;transition:background 140ms ease,transform 140ms ease,box-shadow 140ms ease;white-space:nowrap;line-height:1}\n.ndi-wdp .ndi-btn:hover{transform:translateY(-1px)}\n.ndi-wdp .ndi-btn:active{transform:translateY(0)}\n.ndi-wdp .ndi-btn-sm{padding:8px 18px;font-size:0.875rem}\n.ndi-wdp .ndi-btn-md{padding:10px 22px;font-size:var(--text-sm)}\n.ndi-wdp .ndi-btn-lg{padding:14px 28px;font-size:1rem}\n.ndi-wdp .ndi-btn-accent{background:var(--accent);color:var(--blue-900)}\n.ndi-wdp .ndi-btn-accent:hover{background:var(--accent-hover);color:var(--blue-900)}\n.ndi-wdp .ndi-btn-primary{background:var(--primary);color:#fff}\n.ndi-wdp .ndi-btn-primary:hover{background:var(--primary-hover);color:#fff}\n.ndi-wdp .ndi-btn-secondary{background:transparent;color:var(--text-strong);border:1.5px solid var(--border-default)}\n.ndi-wdp .ndi-btn-secondary:hover{border-color:var(--primary);color:var(--primary)}\n.ndi-wdp .ndi-btn-ondark{background:rgba(255,255,255,0.12);color:#fff;border:1.5px solid rgba(255,255,255,0.25)}\n.ndi-wdp .ndi-btn-ondark:hover{background:rgba(255,255,255,0.2);color:#fff}\n.ndi-wdp .ndi-btn-full{width:100%;justify-content:center}\n\n.ndi-wdp .ndi-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}\n\n.ndi-wdp .ndi-badge{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:6px 14px;border-radius:var(--radius-pill);border:1.5px solid rgba(36,208,174,0.4);background:rgba(36,208,174,0.08);color:var(--teal-500)}\n.ndi-wdp .ndi-badge-ondark{border-color:rgba(92,220,192,0.5);background:rgba(36,208,174,0.1);color:var(--teal-300)}\n.ndi-wdp .ndi-badge-dot::before{content:\"\";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal-400);flex-shrink:0}\n\n.ndi-wdp .ndi-section-eyebrow{font-size:var(--text-xs);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-accent);margin-bottom:12px}\n.ndi-wdp .ndi-section-title{font-size:var(--text-display-lg);font-weight:800;line-height:1.12;letter-spacing:-0.02em;color:var(--text-strong);margin-bottom:16px}\n.ndi-wdp .ndi-section-title-ondark{color:#fff}\n.ndi-wdp .ndi-section-lead{font-size:var(--text-lead);line-height:var(--lh-body);color:var(--text-muted)}\n\n.ndi-wdp .ndi-flink{color:var(--text-on-dark-muted);transition:color .15s ease;font-size:var(--text-sm)}\n.ndi-wdp .ndi-flink:hover{color:#fff}\n\n.ndi-wdp .ndi-form-group{display:flex;flex-direction:column;gap:6px}\n.ndi-wdp .ndi-form-label{font-size:var(--text-sm);font-weight:600;color:var(--text-strong)}\n.ndi-wdp .ndi-form-input,.ndi-wdp .ndi-form-select,.ndi-wdp .ndi-form-textarea{width:100%;padding:11px 14px;font-size:var(--text-sm);font-family:inherit;color:var(--text-strong);background:var(--surface-page);border:1.5px solid var(--border-default);border-radius:var(--radius-sm);outline:none;transition:border-color 140ms ease,box-shadow 140ms ease}\n.ndi-wdp .ndi-form-input:focus,.ndi-wdp .ndi-form-select:focus,.ndi-wdp .ndi-form-textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(36,208,174,0.18)}\n.ndi-wdp .ndi-form-textarea{resize:vertical}\n\n@media(max-width:1000px){\n  .ndi-wdp .ndi-hero-grid,.ndi-wdp .ndi-ps,.ndi-wdp .ndi-process-grid,.ndi-wdp .ndi-contact-grid{grid-template-columns:1fr !important}\n  .ndi-wdp .ndi-hero-grid{gap:var(--space-10) !important}\n  .ndi-wdp .ndi-services-3,.ndi-wdp .ndi-benefits,.ndi-wdp .ndi-exp{grid-template-columns:1fr 1fr !important}\n  .ndi-wdp .ndi-pricing{grid-template-columns:1fr 1fr !important}\n  .ndi-wdp .ndi-addons{grid-template-columns:1fr !important}\n  .ndi-wdp .ndi-help-strip{flex-direction:column;align-items:flex-start !important}\n  .ndi-wdp .ndi-footer-grid{grid-template-columns:1fr 1fr !important}\n}\n@media(max-width:620px){\n  .ndi-wdp .ndi-nav{display:none !important}\n  .ndi-wdp .ndi-services-3,.ndi-wdp .ndi-benefits,.ndi-wdp .ndi-exp{grid-template-columns:1fr !important}\n  .ndi-wdp .ndi-contact-grid form{grid-template-columns:1fr !important}\n  .ndi-wdp .ndi-pricing{grid-template-columns:1fr !important}\n  .ndi-wdp .ndi-footer-grid{grid-template-columns:1fr !important}\n  .ndi-wdp .ndi-hero-float-cards{display:none !important}\n}\n@media(prefers-reduced-motion:reduce){\n  .ndi-wdp .ndi-float-a,.ndi-wdp .ndi-float-b,.ndi-wdp .ndi-float-c,\n  .ndi-wdp .ndi-pill-0,.ndi-wdp .ndi-pill-1,.ndi-wdp .ndi-pill-2,.ndi-wdp .ndi-pill-3{animation:none}\n}\n</style>"},"elements":[]}]}]},{"id":"48ac75e","elType":"section","isInner":false,"settings":{"layout":"full_width","stretch_section":"section-stretched","column_gap":"no","padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"541ba0d","elType":"column","settings":{"_column_size":100,"_inline_size":null,"padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"aaa45b6","elType":"widget","widgetType":"html","settings":{"html":"<div class=\"ndi-wdp\">\n<header id=\"ndi-header\" style=\"position:sticky;top:0;z-index:50;transition:all 240ms cubic-bezier(0.22,1,0.36,1);background:transparent;border-bottom:1px solid transparent;\">\n  <div style=\"max-width:var(--container-max);margin:0 auto;padding:6px var(--container-pad);display:flex;align-items:center;justify-content:space-between;gap:24px;\">\n    <a href=\"https://media.ndistudio.hu/\" style=\"display:flex;align-items:center;\"><img src=\"https://media.ndistudio.hu/wp-content/uploads/ndi-media-logo.png\" alt=\"NDI Stúdió Media\" style=\"height:46px;width:auto;\"></a>\n    <nav class=\"ndi-nav\" style=\"display:flex;gap:4px;align-items:center;flex:1;justify-content:center;\">\n      <a href=\"#szolgaltatasok\" style=\"padding:8px 14px;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--text-body);border-radius:var(--radius-pill);transition:color 140ms ease;\">Szolgáltatások</a>\n      <a href=\"#folyamat\" style=\"padding:8px 14px;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--text-body);border-radius:var(--radius-pill);transition:color 140ms ease;\">Folyamat</a>\n      <a href=\"#csomagok\" style=\"padding:8px 14px;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--text-body);border-radius:var(--radius-pill);transition:color 140ms ease;\">Csomagok</a>\n    </nav>\n    <a href=\"#kapcsolat\" class=\"ndi-btn ndi-btn-accent ndi-btn-md\">Konzultációt kérek</a>\n  </div>\n</header>\n<script>\n(function(){\n  var h=document.getElementById('ndi-header');\n  if(!h)return;\n  window.addEventListener('scroll',function(){\n    if(window.scrollY>24){\n      h.style.background='rgba(255,255,255,0.82)';\n      h.style.backdropFilter='blur(14px)';\n      h.style.webkitBackdropFilter='blur(14px)';\n      h.style.borderBottom='1px solid var(--border-subtle)';\n      h.style.boxShadow='0 1px 0 rgba(0,0,0,0.06)';\n    } else {\n      h.style.background='transparent';\n      h.style.backdropFilter='none';\n      h.style.webkitBackdropFilter='none';\n      h.style.borderBottom='1px solid transparent';\n      h.style.boxShadow='none';\n    }\n  });\n})();\n</script>\n</div>"},"elements":[]}]}]},{"id":"9a4c78c","elType":"section","isInner":false,"settings":{"layout":"full_width","stretch_section":"section-stretched","column_gap":"no","padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"a79eb52","elType":"column","settings":{"_column_size":100,"_inline_size":null,"padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"6563feb","elType":"widget","widgetType":"html","settings":{"html":"<div class=\"ndi-wdp\">\n<section id=\"top\" style=\"position:relative;overflow:hidden;background:var(--gradient-hero);color:#fff;\">\n  <div style=\"position:absolute;top:-140px;right:-80px;width:520px;height:520px;border-radius:50%;background:var(--glow-teal);filter:blur(100px);pointer-events:none;\"></div>\n  <div style=\"position:absolute;bottom:-180px;left:-140px;width:520px;height:520px;border-radius:50%;background:var(--glow-blue);filter:blur(110px);pointer-events:none;\"></div>\n  <div style=\"position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.07) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(to bottom,#000 0%,transparent 70%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 70%);pointer-events:none;\"></div>\n  <div class=\"ndi-hero-grid\" style=\"position:relative;max-width:var(--container-max);margin:0 auto;padding:var(--space-12) var(--container-pad) var(--space-14);display:grid;grid-template-columns:1.05fr 0.95fr;gap:var(--space-10);align-items:center;\">\n    <div>\n      <span class=\"ndi-badge ndi-badge-ondark ndi-badge-dot\">Weboldalkészítés</span>\n      <h1 style=\"color:#fff;font-size:var(--text-display-xl);font-weight:800;line-height:1.03;letter-spacing:-0.027em;margin:var(--space-5) 0 var(--space-4);\">\n        Modern weboldal, ami nemcsak szép —\n        <span style=\"white-space:nowrap;\"><span style=\"background:linear-gradient(100deg,#5cdcc0,#24d0ae);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;\">ügyfeleket is hoz.</span></span>\n      </h1>\n      <p style=\"font-size:var(--text-lead);line-height:var(--lh-body);color:var(--text-on-dark-muted);max-width:540px;margin:0 0 var(--space-7);\">Gyors, reszponzív és konverzióra optimalizált WordPress weboldalakat készítünk vállalkozásoknak, amelyek mérhetően támogatják az értékesítést.</p>\n      <div style=\"display:flex;gap:14px;flex-wrap:wrap;\">\n        <a href=\"#ajanlat\" class=\"ndi-btn ndi-btn-accent ndi-btn-lg\">Ajánlatot kérek <i class=\"bi bi-arrow-right\"></i></a>\n        <a href=\"#folyamat\" class=\"ndi-btn ndi-btn-ondark ndi-btn-lg\"><i class=\"bi bi-play-circle\"></i> Megnézem a folyamatot</a>\n      </div>\n      <div style=\"display:flex;gap:8px;margin-top:var(--space-8);flex-wrap:nowrap;align-items:center;\">\n        <span style=\"display:inline-flex;align-items:center;gap:6px;font-size:0.8125rem;font-weight:500;color:rgba(255,255,255,0.92);background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-pill);padding:7px 12px;backdrop-filter:blur(6px);white-space:nowrap;\"><i class=\"bi bi-phone\" style=\"color:var(--teal-300);\"></i> Reszponzív design</span>\n        <span style=\"display:inline-flex;align-items:center;gap:6px;font-size:0.8125rem;font-weight:500;color:rgba(255,255,255,0.92);background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-pill);padding:7px 12px;backdrop-filter:blur(6px);white-space:nowrap;\"><i class=\"bi bi-wordpress\" style=\"color:var(--teal-300);\"></i> WordPress fejlesztés</span>\n        <span style=\"display:inline-flex;align-items:center;gap:6px;font-size:0.8125rem;font-weight:500;color:rgba(255,255,255,0.92);background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-pill);padding:7px 12px;backdrop-filter:blur(6px);white-space:nowrap;\"><i class=\"bi bi-lightning-charge\" style=\"color:var(--teal-300);\"></i> Gyors betöltés</span>\n        <span style=\"display:inline-flex;align-items:center;gap:6px;font-size:0.8125rem;font-weight:500;color:rgba(255,255,255,0.92);background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-pill);padding:7px 12px;backdrop-filter:blur(6px);white-space:nowrap;\"><i class=\"bi bi-bullseye\" style=\"color:var(--teal-300);\"></i> Konverzióra optimalizálva</span>\n      </div>\n    </div>\n    <div style=\"position:relative;\">\n      <div class=\"ndi-hero-visual\" style=\"position:relative;min-height:480px;\">\n        <div style=\"position:absolute;inset:8% 4% 4% 8%;border-radius:var(--radius-2xl);background:radial-gradient(120% 120% at 70% 20%,rgba(36,208,174,0.28),transparent 60%);filter:blur(8px);pointer-events:none;\"></div>\n        <div class=\"ndi-tilt\" style=\"position:relative;border-radius:var(--radius-lg);overflow:hidden;background:rgba(255,255,255,0.95);box-shadow:0 40px 80px -24px rgba(5,12,40,0.6);border:1px solid rgba(255,255,255,0.5);backdrop-filter:blur(8px);\">\n          <div style=\"display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--neutral-100);border-bottom:1px solid var(--border-subtle);\">\n            <span style=\"width:11px;height:11px;border-radius:50%;background:#e5484d;display:inline-block;\"></span>\n            <span style=\"width:11px;height:11px;border-radius:50%;background:#f5a623;display:inline-block;\"></span>\n            <span style=\"width:11px;height:11px;border-radius:50%;background:#18b598;display:inline-block;\"></span>\n            <span style=\"flex:1;margin-left:10px;height:24px;border-radius:999px;background:#fff;border:1px solid var(--border-subtle);display:flex;align-items:center;padding:0 12px;font-size:11px;color:var(--text-muted);gap:6px;\"><i class=\"bi bi-lock-fill\" style=\"font-size:10px;color:var(--teal-600);\"></i> ceged.hu</span>\n          </div>\n          <div style=\"padding:18px;\">\n            <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;\">\n              <div style=\"width:70px;height:14px;border-radius:4px;background:var(--blue-500);\"></div>\n              <div style=\"display:flex;gap:8px;\">\n                <div style=\"width:40px;height:8px;border-radius:4px;background:var(--neutral-200);\"></div>\n                <div style=\"width:40px;height:8px;border-radius:4px;background:var(--neutral-200);\"></div>\n                <div style=\"width:40px;height:8px;border-radius:4px;background:var(--neutral-200);\"></div>\n                <div style=\"width:56px;height:18px;border-radius:999px;background:var(--teal-400);\"></div>\n              </div>\n            </div>\n            <div style=\"display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:center;\">\n              <div>\n                <div style=\"width:90%;height:16px;border-radius:4px;background:var(--neutral-800);margin-bottom:8px;\"></div>\n                <div style=\"width:70%;height:16px;border-radius:4px;background:var(--neutral-800);margin-bottom:14px;\"></div>\n                <div style=\"width:100%;height:7px;border-radius:4px;background:var(--neutral-200);margin-bottom:6px;\"></div>\n                <div style=\"width:85%;height:7px;border-radius:4px;background:var(--neutral-200);margin-bottom:16px;\"></div>\n                <div style=\"display:flex;gap:8px;\">\n                  <div style=\"width:84px;height:30px;border-radius:999px;background:var(--gradient-brand);\"></div>\n                  <div style=\"width:84px;height:30px;border-radius:999px;border:1.5px solid var(--border-default);\"></div>\n                </div>\n              </div>\n              <div style=\"height:130px;border-radius:14px;background:var(--gradient-hero);\"></div>\n            </div>\n            <div style=\"display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:16px;\">\n              <div style=\"border-radius:12px;border:1px solid var(--border-subtle);padding:12px;\"><div style=\"width:28px;height:28px;border-radius:8px;background:var(--teal-50);margin-bottom:8px;\"></div><div style=\"width:80%;height:7px;border-radius:4px;background:var(--neutral-200);margin-bottom:5px;\"></div><div style=\"width:60%;height:7px;border-radius:4px;background:var(--neutral-100);\"></div></div>\n              <div style=\"border-radius:12px;border:1px solid var(--border-subtle);padding:12px;\"><div style=\"width:28px;height:28px;border-radius:8px;background:var(--teal-50);margin-bottom:8px;\"></div><div style=\"width:80%;height:7px;border-radius:4px;background:var(--neutral-200);margin-bottom:5px;\"></div><div style=\"width:60%;height:7px;border-radius:4px;background:var(--neutral-100);\"></div></div>\n              <div style=\"border-radius:12px;border:1px solid var(--border-subtle);padding:12px;\"><div style=\"width:28px;height:28px;border-radius:8px;background:var(--teal-50);margin-bottom:8px;\"></div><div style=\"width:80%;height:7px;border-radius:4px;background:var(--neutral-200);margin-bottom:5px;\"></div><div style=\"width:60%;height:7px;border-radius:4px;background:var(--neutral-100);\"></div></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"ndi-hero-float-cards\">\n          <div class=\"ndi-float-a\" style=\"position:absolute;top:-34px;left:-30px;width:200px;background:rgba(255,255,255,0.92);border-radius:var(--radius-md);box-shadow:0 24px 50px -16px rgba(5,12,40,0.45);border:1px solid rgba(255,255,255,0.6);backdrop-filter:blur(14px);padding:14px 16px;\">\n            <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;\"><span style=\"font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;\">Konverzió</span><span style=\"font-size:11px;font-weight:700;color:var(--teal-600);display:inline-flex;align-items:center;gap:3px;\"><i class=\"bi bi-arrow-up-right\"></i> +38%</span></div>\n            <div style=\"display:flex;align-items:flex-end;gap:6px;height:46px;\">\n              <span style=\"flex:1;height:34%;border-radius:4px;background:var(--neutral-200);display:block;\"></span>\n              <span style=\"flex:1;height:52%;border-radius:4px;background:var(--neutral-200);display:block;\"></span>\n              <span style=\"flex:1;height:44%;border-radius:4px;background:var(--neutral-200);display:block;\"></span>\n              <span style=\"flex:1;height:66%;border-radius:4px;background:var(--neutral-200);display:block;\"></span>\n              <span style=\"flex:1;height:58%;border-radius:4px;background:var(--neutral-200);display:block;\"></span>\n              <span style=\"flex:1;height:82%;border-radius:4px;background:var(--gradient-brand);display:block;\"></span>\n              <span style=\"flex:1;height:96%;border-radius:4px;background:var(--gradient-brand);display:block;\"></span>\n            </div>\n          </div>\n          <div class=\"ndi-float-b\" style=\"position:absolute;bottom:-26px;right:-22px;background:rgba(255,255,255,0.94);border-radius:var(--radius-md);box-shadow:0 24px 50px -16px rgba(5,12,40,0.45);border:1px solid rgba(255,255,255,0.6);backdrop-filter:blur(14px);padding:14px 16px;display:flex;gap:12px;align-items:center;\">\n            <span style=\"width:42px;height:42px;border-radius:12px;background:var(--gradient-brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;\"><i class=\"bi bi-people-fill\"></i></span>\n            <div><div style=\"font-size:18px;font-weight:800;color:var(--text-strong);line-height:1;\">+124</div><div style=\"font-size:11px;color:var(--text-muted);\">új érdeklődő / hó</div></div>\n          </div>\n          <div class=\"ndi-float-c\" style=\"position:absolute;top:96px;right:-38px;background:rgba(255,255,255,0.94);border-radius:var(--radius-md);box-shadow:0 24px 50px -16px rgba(5,12,40,0.45);border:1px solid rgba(255,255,255,0.6);backdrop-filter:blur(14px);padding:12px 14px;display:flex;gap:11px;align-items:center;\">\n            <span style=\"position:relative;width:42px;height:42px;border-radius:50%;background:conic-gradient(var(--teal-400) 0 98%,var(--neutral-200) 98% 100%);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;\"><span style=\"width:31px;height:31px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--text-strong);\">98</span></span>\n            <div><div style=\"font-size:12px;font-weight:700;color:var(--text-strong);\">PageSpeed</div><div style=\"font-size:11px;color:var(--text-muted);\">Teljesítmény</div></div>\n          </div>\n        </div>\n        <span class=\"ndi-pill-0\" style=\"position:absolute;top:2%;right:30%;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#fff;background:rgba(36,208,174,0.16);border:1px solid rgba(36,208,174,0.45);border-radius:var(--radius-pill);padding:6px 12px;backdrop-filter:blur(10px);box-shadow:0 8px 24px -8px rgba(5,12,40,0.5);pointer-events:none;\"><i class=\"bi bi-search\" style=\"color:var(--teal-300);\"></i> SEO</span>\n        <span class=\"ndi-pill-1\" style=\"position:absolute;top:44%;left:-13%;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#fff;background:rgba(36,208,174,0.16);border:1px solid rgba(36,208,174,0.45);border-radius:var(--radius-pill);padding:6px 12px;backdrop-filter:blur(10px);box-shadow:0 8px 24px -8px rgba(5,12,40,0.5);pointer-events:none;\"><i class=\"bi bi-lightning-charge-fill\" style=\"color:var(--teal-300);\"></i> Speed</span>\n        <span class=\"ndi-pill-2\" style=\"position:absolute;bottom:16%;left:8%;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#fff;background:rgba(36,208,174,0.16);border:1px solid rgba(36,208,174,0.45);border-radius:var(--radius-pill);padding:6px 12px;backdrop-filter:blur(10px);box-shadow:0 8px 24px -8px rgba(5,12,40,0.5);pointer-events:none;\"><i class=\"bi bi-graph-up-arrow\" style=\"color:var(--teal-300);\"></i> Leads</span>\n        <span class=\"ndi-pill-3\" style=\"position:absolute;bottom:-4%;right:34%;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#fff;background:rgba(36,208,174,0.16);border:1px solid rgba(36,208,174,0.45);border-radius:var(--radius-pill);padding:6px 12px;backdrop-filter:blur(10px);box-shadow:0 8px 24px -8px rgba(5,12,40,0.5);pointer-events:none;\"><i class=\"bi bi-grid-1x2-fill\" style=\"color:var(--teal-300);\"></i> UX</span>\n      </div>\n    </div>\n  </div>\n</section>\n</div>"},"elements":[]}]}]},{"id":"fa30087","elType":"section","isInner":false,"settings":{"layout":"full_width","stretch_section":"","column_gap":"no","padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"c917a2a","elType":"column","settings":{"_column_size":100,"_inline_size":null,"padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"8f10a17","elType":"widget","widgetType":"html","settings":{"html":"<div class=\"ndi-wdp\">\n<section style=\"padding:var(--section-y) 0;background:var(--surface-page);\">\n  <div class=\"ndi-container\">\n    <div style=\"text-align:center;margin-bottom:var(--space-8);\">\n      <p class=\"ndi-section-eyebrow\">A probléma</p>\n      <h2 class=\"ndi-section-title\">Egy elavult weboldal csendben ügyfeleket veszít</h2>\n      <p class=\"ndi-section-lead\" style=\"max-width:640px;margin:0 auto;\">A weboldal ma már nem online névjegykártya, hanem a legfontosabb értékesítési eszközöd. Ha rosszul van felépítve, a marketingre költött minden forint kevesebbet ér.</p>\n    </div>\n    <div class=\"ndi-exp\" style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);\">\n      <div class=\"ndi-card\" style=\"padding:var(--space-6);\">\n        <span style=\"width:52px;height:52px;border-radius:14px;background:var(--neutral-100);color:var(--neutral-500);display:inline-flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;\"><i class=\"bi bi-hourglass-split\"></i></span>\n        <h4 style=\"margin:0 0 8px;font-size:var(--text-h4);color:var(--text-strong);\">Lassú betöltés</h4>\n        <p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Minden plusz másodperc látogatókat és potenciális ügyfeleket veszít.</p>\n      </div>\n      <div class=\"ndi-card\" style=\"padding:var(--space-6);\">\n        <span style=\"width:52px;height:52px;border-radius:14px;background:var(--neutral-100);color:var(--neutral-500);display:inline-flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;\"><i class=\"bi bi-phone-flip\"></i></span>\n        <h4 style=\"margin:0 0 8px;font-size:var(--text-h4);color:var(--text-strong);\">Nem mobilbarát</h4>\n        <p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">A forgalom nagy része mobilról érkezik — egy nem reszponzív oldal azonnal taszít.</p>\n      </div>\n      <div class=\"ndi-card\" style=\"padding:var(--space-6);\">\n        <span style=\"width:52px;height:52px;border-radius:14px;background:var(--neutral-100);color:var(--neutral-500);display:inline-flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;\"><i class=\"bi bi-signpost-split\"></i></span>\n        <h4 style=\"margin:0 0 8px;font-size:var(--text-h4);color:var(--text-strong);\">Nincs irány</h4>\n        <p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Világos struktúra és CTA-k nélkül a látogató nem tudja, mi a következő lépés.</p>\n      </div>\n    </div>\n  </div>\n</section>\n</div>"},"elements":[]}]}]},{"id":"4270800","elType":"section","isInner":false,"settings":{"layout":"full_width","stretch_section":"","column_gap":"no","padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"5e7ad12","elType":"column","settings":{"_column_size":100,"_inline_size":null,"padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"181f3c0","elType":"widget","widgetType":"html","settings":{"html":"<div class=\"ndi-wdp\">\n<section style=\"padding:var(--section-y) 0;background:var(--surface-subtle);\">\n  <div class=\"ndi-container\">\n    <div class=\"ndi-ps\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10);align-items:center;\">\n      <div class=\"ndi-ps-copy\">\n        <p class=\"ndi-section-eyebrow\">A megoldás</p>\n        <h2 class=\"ndi-section-title\">Stratégiai weboldalkészítési <span style=\"background:var(--gradient-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;\">partner</span></h2>\n        <p class=\"ndi-section-lead\">Az NDI Stúdió Media nem sablonból dolgozik. Megértjük az üzleti modelledet, és olyan weboldalt építünk, amely valódi eredményt hoz — nem csak online jelenlétet.</p>\n        <div style=\"margin-top:var(--space-6);\"><a href=\"#ajanlat\" class=\"ndi-btn ndi-btn-primary ndi-btn-lg\">Ajánlatot kérek</a></div>\n      </div>\n      <div style=\"display:flex;flex-direction:column;gap:var(--space-4);\">\n        <div class=\"ndi-card\" style=\"display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-5);\">\n          <span style=\"width:44px;height:44px;flex-shrink:0;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;background:var(--teal-50);color:var(--teal-600);\"><i class=\"bi bi-bullseye\"></i></span>\n          <div><h4 style=\"margin:2px 0 6px;font-size:var(--text-h4);color:var(--text-strong);\">Üzleti célokhoz igazított design</h4><p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Nem csak szépet építünk — a céljaidhoz: ügyfélszerzés, ajánlatkérés, foglalás vagy értékesítés.</p></div>\n        </div>\n        <div class=\"ndi-card\" style=\"display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-5);\">\n          <span style=\"width:44px;height:44px;flex-shrink:0;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;background:var(--teal-50);color:var(--teal-600);\"><i class=\"bi bi-diagram-3\"></i></span>\n          <div><h4 style=\"margin:2px 0 6px;font-size:var(--text-h4);color:var(--text-strong);\">Konverzióra épített struktúra</h4><p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Tudatos oldalfelépítés, erős üzenetek és jól elhelyezett CTA-k, amelyek lépésre ösztönöznek.</p></div>\n        </div>\n        <div class=\"ndi-card\" style=\"display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-5);\">\n          <span style=\"width:44px;height:44px;flex-shrink:0;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;background:var(--teal-50);color:var(--teal-600);\"><i class=\"bi bi-sliders\"></i></span>\n          <div><h4 style=\"margin:2px 0 6px;font-size:var(--text-h4);color:var(--text-strong);\">Technika és marketing összehangolva</h4><p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Sebesség, keresőbarát alapok és mérhetőség — hogy a kampányaid is jobban teljesítsenek.</p></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n</div>"},"elements":[]}]}]},{"id":"3558dae","elType":"section","isInner":false,"settings":{"layout":"full_width","stretch_section":"","column_gap":"no","padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"58e24ce","elType":"column","settings":{"_column_size":100,"_inline_size":null,"padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"208eb09","elType":"widget","widgetType":"html","settings":{"html":"<div class=\"ndi-wdp\">\n<style>\n.ndi-wdp .ndi-svc-card{position:relative;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transform:translateY(0);transition:transform 240ms cubic-bezier(0.22,1,0.36,1),box-shadow 240ms cubic-bezier(0.22,1,0.36,1);overflow:hidden;text-decoration:none;color:inherit;}\n.ndi-wdp .ndi-svc-card:hover{box-shadow:0 24px 60px rgba(27,36,90,0.16);transform:translateY(-6px);}\n.ndi-wdp .ndi-svc-card::before{content:\"\";position:absolute;top:0;left:0;height:4px;width:38%;background:var(--gradient-brand);border-radius:0 0 var(--radius-pill) var(--radius-pill);transition:width 420ms cubic-bezier(0.22,1,0.36,1);}\n.ndi-wdp .ndi-svc-card:hover::before{width:100%;}\n.ndi-wdp .ndi-svc-icon{width:52px;height:52px;border-radius:14px;background:var(--teal-50);color:var(--teal-600);display:inline-flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;transition:background 240ms ease,color 240ms ease;}\n.ndi-wdp .ndi-svc-card:hover .ndi-svc-icon{background:var(--gradient-brand);color:#fff;}\n.ndi-wdp .ndi-svc-link{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-sm);font-weight:600;color:var(--text-accent);margin-top:auto;transition:gap 200ms ease;}\n.ndi-wdp .ndi-svc-card:hover .ndi-svc-link{gap:9px;}\n</style>\n<section id=\"szolgaltatasok\" style=\"padding:var(--section-y) 0;background:var(--surface-page);\">\n  <div class=\"ndi-container\">\n    <div style=\"text-align:center;margin-bottom:var(--space-8);\">\n      <p class=\"ndi-section-eyebrow\">Szolgáltatások</p>\n      <h2 class=\"ndi-section-title\">Mindent, amire egy ütős weboldalhoz szükség van</h2>\n      <p class=\"ndi-section-lead\" style=\"max-width:640px;margin:0 auto;\">A koncepciótól az élesítésig egy helyen — összehangolt design, fejlesztés és technikai háttér.</p>\n    </div>\n    <div class=\"ndi-services-3\" style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);\">\n      <a href=\"#kapcsolat\" class=\"ndi-svc-card\"><span class=\"ndi-svc-icon\"><i class=\"bi bi-building\"></i></span><h4 style=\"margin:0 0 4px;font-size:var(--text-h4);color:var(--text-strong);\">Céges weboldal</h4><p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Professzionális bemutatkozó oldalak, amelyek bizalmat építenek és üzletet hoznak.</p><span class=\"ndi-svc-link\">Részletek <i class=\"bi bi-arrow-right\"></i></span></a>\n      <a href=\"#kapcsolat\" class=\"ndi-svc-card\"><span class=\"ndi-svc-icon\"><i class=\"bi bi-rocket-takeoff\"></i></span><h4 style=\"margin:0 0 4px;font-size:var(--text-h4);color:var(--text-strong);\">Landing oldal</h4><p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Egy célra fókuszáló, kampányra optimalizált oldalak magas konverzióval.</p><span class=\"ndi-svc-link\">Részletek <i class=\"bi bi-arrow-right\"></i></span></a>\n      <a href=\"#kapcsolat\" class=\"ndi-svc-card\"><span class=\"ndi-svc-icon\"><i class=\"bi bi-wordpress\"></i></span><h4 style=\"margin:0 0 4px;font-size:var(--text-h4);color:var(--text-strong);\">WordPress fejlesztés</h4><p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Könnyen kezelhető, skálázható WordPress alapokon — saját kezűleg is frissíthető.</p><span class=\"ndi-svc-link\">Részletek <i class=\"bi bi-arrow-right\"></i></span></a>\n      <a href=\"#kapcsolat\" class=\"ndi-svc-card\"><span class=\"ndi-svc-icon\"><i class=\"bi bi-palette2\"></i></span><h4 style=\"margin:0 0 4px;font-size:var(--text-h4);color:var(--text-strong);\">UX/UI tervezés</h4><p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Átgondolt felhasználói élmény és modern, márkához illő vizuális megjelenés.</p><span class=\"ndi-svc-link\">Részletek <i class=\"bi bi-arrow-right\"></i></span></a>\n      <a href=\"#kapcsolat\" class=\"ndi-svc-card\"><span class=\"ndi-svc-icon\"><i class=\"bi bi-search\"></i></span><h4 style=\"margin:0 0 4px;font-size:var(--text-h4);color:var(--text-strong);\">Keresőbarát alapstruktúra</h4><p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Tiszta felépítés, helyes címkézés és sebesség, amire a SEO építhet.</p><span class=\"ndi-svc-link\">Részletek <i class=\"bi bi-arrow-right\"></i></span></a>\n      <a href=\"#kapcsolat\" class=\"ndi-svc-card\"><span class=\"ndi-svc-icon\"><i class=\"bi bi-gear-wide-connected\"></i></span><h4 style=\"margin:0 0 4px;font-size:var(--text-h4);color:var(--text-strong);\">Technikai beállítások</h4><p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Analitika, követőkódok, biztonság és domain — mindent élesre hangolva.</p><span class=\"ndi-svc-link\">Részletek <i class=\"bi bi-arrow-right\"></i></span></a>\n    </div>\n  </div>\n</section>\n</div>"},"elements":[]}]}]},{"id":"c1a2697","elType":"section","isInner":false,"settings":{"layout":"full_width","stretch_section":"","column_gap":"no","padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"98be0ef","elType":"column","settings":{"_column_size":100,"_inline_size":null,"padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"743e8e5","elType":"widget","widgetType":"html","settings":{"html":"<div class=\"ndi-wdp\">\n<section id=\"folyamat\" style=\"padding:var(--section-y) 0;background:var(--surface-subtle);\">\n  <div class=\"ndi-container\">\n    <div class=\"ndi-process-grid\" style=\"display:grid;grid-template-columns:0.85fr 1.15fr;gap:var(--space-10);\">\n      <div style=\"display:flex;flex-direction:column;gap:var(--space-6);\">\n        <div>\n          <p class=\"ndi-section-eyebrow\">A folyamat</p>\n          <h2 class=\"ndi-section-title\">Így készül el a weboldalad</h2>\n          <p class=\"ndi-section-lead\" style=\"max-width:420px;\">Átlátható, lépésről lépésre vezetett folyamat — végig tudod, hol tartunk és mi a következő lépés.</p>\n        </div>\n        <div style=\"background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5);flex:1;\">\n          <div style=\"display:flex;gap:var(--space-4);align-items:flex-start;\">\n            <span style=\"flex-shrink:0;width:48px;height:48px;border-radius:var(--radius-md);background:linear-gradient(135deg,rgba(40,53,130,0.08),rgba(36,208,174,0.12));display:inline-flex;align-items:center;justify-content:center;font-size:22px;color:var(--teal-600);\"><i class=\"bi bi-compass\"></i></span>\n            <div>\n              <h4 style=\"margin:0 0 6px;font-size:var(--text-h4);font-weight:700;color:var(--text-strong);\">Végig tudod, mire számíthatsz</h4>\n              <p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">A weboldalkészítés nálunk nem káosz, hanem egy jól felépített, követhető folyamat.</p>\n            </div>\n          </div>\n          <div style=\"display:flex;flex-direction:column;gap:var(--space-3);border-top:1px solid var(--border-subtle);padding-top:var(--space-4);\">\n            <div style=\"display:flex;align-items:center;gap:var(--space-3);\">\n              <span style=\"flex-shrink:0;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--teal-50);display:inline-flex;align-items:center;justify-content:center;font-size:17px;color:var(--teal-600);\"><i class=\"bi bi-people\"></i></span>\n              <span style=\"font-size:var(--text-sm);font-weight:600;color:var(--text-strong);\">Átlátható együttműködés</span>\n            </div>\n            <div style=\"display:flex;align-items:center;gap:var(--space-3);\">\n              <span style=\"flex-shrink:0;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--teal-50);display:inline-flex;align-items:center;justify-content:center;font-size:17px;color:var(--teal-600);\"><i class=\"bi bi-clipboard-check\"></i></span>\n              <span style=\"font-size:var(--text-sm);font-weight:600;color:var(--text-strong);\">Tudatos tervezés</span>\n            </div>\n            <div style=\"display:flex;align-items:center;gap:var(--space-3);\">\n              <span style=\"flex-shrink:0;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--teal-50);display:inline-flex;align-items:center;justify-content:center;font-size:17px;color:var(--teal-600);\"><i class=\"bi bi-rocket-takeoff\"></i></span>\n              <span style=\"font-size:var(--text-sm);font-weight:600;color:var(--text-strong);\">Zökkenőmentes kivitelezés</span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"ndi-steps\">\n        <div style=\"display:flex;gap:var(--space-5);padding-bottom:var(--space-5);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-5);\">\n          <div style=\"flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--gradient-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;\">1</div>\n          <div><h4 style=\"margin:0 0 4px;font-size:var(--text-h4);color:var(--text-strong);\">Konzultáció</h4><p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Megismerjük a vállalkozásod, a célközönséget és az elvárt üzleti eredményt.</p></div>\n        </div><div style=\"display:flex;gap:var(--space-5);padding-bottom:var(--space-5);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-5);\">\n          <div style=\"flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--gradient-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;\">2</div>\n          <div><h4 style=\"margin:0 0 4px;font-size:var(--text-h4);color:var(--text-strong);\">Célok és struktúra</h4><p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Meghatározzuk az oldal célját, felépítését és a fő konverziós útvonalakat.</p></div>\n        </div><div style=\"display:flex;gap:var(--space-5);padding-bottom:var(--space-5);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-5);\">\n          <div style=\"flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--gradient-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;\">3</div>\n          <div><h4 style=\"margin:0 0 4px;font-size:var(--text-h4);color:var(--text-strong);\">Design</h4><p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Megtervezzük a modern, márkához illő megjelenést — előbb vázlat, majd kész UI.</p></div>\n        </div><div style=\"display:flex;gap:var(--space-5);padding-bottom:var(--space-5);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-5);\">\n          <div style=\"flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--gradient-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;\">4</div>\n          <div><h4 style=\"margin:0 0 4px;font-size:var(--text-h4);color:var(--text-strong);\">Fejlesztés</h4><p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Legyártjuk a gyors, reszponzív és könnyen kezelhető WordPress oldalt.</p></div>\n        </div><div style=\"display:flex;gap:var(--space-5);padding-bottom:var(--space-5);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-5);\">\n          <div style=\"flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--gradient-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;\">5</div>\n          <div><h4 style=\"margin:0 0 4px;font-size:var(--text-h4);color:var(--text-strong);\">Tesztelés</h4><p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Sebesség, mobilnézet, űrlapok és linkek — minden ellenőrizve élesítés előtt.</p></div>\n        </div><div style=\"display:flex;gap:var(--space-5);padding-bottom:var(--space-5);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-5);\">\n          <div style=\"flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--gradient-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;\">6</div>\n          <div><h4 style=\"margin:0 0 4px;font-size:var(--text-h4);color:var(--text-strong);\">Élesítés</h4><p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Domain, hosting és követőkódok beállítása, majd a weboldal élesítése.</p></div>\n        </div><div style=\"display:flex;gap:var(--space-5);\">\n          <div style=\"flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--gradient-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;\">7</div>\n          <div><h4 style=\"margin:0 0 4px;font-size:var(--text-h4);color:var(--text-strong);\">Mérés és optimalizálás</h4><p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--lh-body);\">Figyeljük a teljesítményt és finomhangolunk a jobb eredményekért.</p></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n</div>"},"elements":[]}]}]},{"id":"96a0f8f","elType":"section","isInner":false,"settings":{"layout":"full_width","stretch_section":"","column_gap":"no","padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"a315a28","elType":"column","settings":{"_column_size":100,"_inline_size":null,"padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"5aa43ed","elType":"widget","widgetType":"html","settings":{"html":"<div class=\"ndi-wdp\">\n<section style=\"padding:var(--section-y) 0;background:var(--gradient-hero);color:#fff;position:relative;overflow:hidden;\">\n  <div style=\"position:absolute;top:-100px;left:45%;width:420px;height:420px;border-radius:50%;background:var(--glow-teal);filter:blur(110px);pointer-events:none;\"></div>\n  <div class=\"ndi-container\" style=\"position:relative;\">\n    <div style=\"text-align:center;margin-bottom:var(--space-8);\">\n      <p class=\"ndi-section-eyebrow\" style=\"color:var(--teal-300);\">Előnyök</p>\n      <h2 class=\"ndi-section-title ndi-section-title-ondark\">Amit egy NDI weboldal tud</h2>\n    </div>\n    <div class=\"ndi-benefits\" style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);\">\n      <div style=\"background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-lg);padding:var(--space-6);backdrop-filter:blur(12px);\">\n        <span style=\"width:48px;height:48px;border-radius:13px;background:rgba(36,208,174,0.16);color:var(--teal-300);display:inline-flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;\"><i class=\"bi bi-lightning-charge\"></i></span>\n        <h4 style=\"color:#fff;font-size:var(--text-h4);margin:0 0 6px;\">Gyors betöltés</h4>\n        <p style=\"margin:0;font-size:var(--text-sm);color:var(--text-on-dark-muted);line-height:var(--lh-body);\">Optimalizált kód és képek a villámgyors élményért.</p>\n      </div><div style=\"background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-lg);padding:var(--space-6);backdrop-filter:blur(12px);\">\n        <span style=\"width:48px;height:48px;border-radius:13px;background:rgba(36,208,174,0.16);color:var(--teal-300);display:inline-flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;\"><i class=\"bi bi-phone\"></i></span>\n        <h4 style=\"color:#fff;font-size:var(--text-h4);margin:0 0 6px;\">Mobilbarát kialakítás</h4>\n        <p style=\"margin:0;font-size:var(--text-sm);color:var(--text-on-dark-muted);line-height:var(--lh-body);\">Minden eszközön tökéletes — telefonon, tableten, desktopon.</p>\n      </div><div style=\"background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-lg);padding:var(--space-6);backdrop-filter:blur(12px);\">\n        <span style=\"width:48px;height:48px;border-radius:13px;background:rgba(36,208,174,0.16);color:var(--teal-300);display:inline-flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;\"><i class=\"bi bi-stars\"></i></span>\n        <h4 style=\"color:#fff;font-size:var(--text-h4);margin:0 0 6px;\">Modern megjelenés</h4>\n        <p style=\"margin:0;font-size:var(--text-sm);color:var(--text-on-dark-muted);line-height:var(--lh-body);\">2026-os, prémium dizájn, amely megkülönböztet a versenytársaktól.</p>\n      </div><div style=\"background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-lg);padding:var(--space-6);backdrop-filter:blur(12px);\">\n        <span style=\"width:48px;height:48px;border-radius:13px;background:rgba(36,208,174,0.16);color:var(--teal-300);display:inline-flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;\"><i class=\"bi bi-ui-checks-grid\"></i></span>\n        <h4 style=\"color:#fff;font-size:var(--text-h4);margin:0 0 6px;\">Könnyű WordPress admin</h4>\n        <p style=\"margin:0;font-size:var(--text-sm);color:var(--text-on-dark-muted);line-height:var(--lh-body);\">Magad is frissítheted a tartalmat — technikai tudás nélkül.</p>\n      </div><div style=\"background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-lg);padding:var(--space-6);backdrop-filter:blur(12px);\">\n        <span style=\"width:48px;height:48px;border-radius:13px;background:rgba(36,208,174,0.16);color:var(--teal-300);display:inline-flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;\"><i class=\"bi bi-cursor\"></i></span>\n        <h4 style=\"color:#fff;font-size:var(--text-h4);margin:0 0 6px;\">Konverzióra optimalizált CTA-k</h4>\n        <p style=\"margin:0;font-size:var(--text-sm);color:var(--text-on-dark-muted);line-height:var(--lh-body);\">Tudatosan elhelyezett gombok, amelyek lépésre ösztönöznek.</p>\n      </div><div style=\"background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-lg);padding:var(--space-6);backdrop-filter:blur(12px);\">\n        <span style=\"width:48px;height:48px;border-radius:13px;background:rgba(36,208,174,0.16);color:var(--teal-300);display:inline-flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;\"><i class=\"bi bi-arrows-angle-expand\"></i></span>\n        <h4 style=\"color:#fff;font-size:var(--text-h4);margin:0 0 6px;\">Skálázható felépítés</h4>\n        <p style=\"margin:0;font-size:var(--text-sm);color:var(--text-on-dark-muted);line-height:var(--lh-body);\">Az oldal együtt nő a vállalkozásoddal — bővíthető bármikor.</p>\n      </div>\n    </div>\n  </div>\n</section>\n</div>"},"elements":[]}]}]},{"id":"be2f588","elType":"section","isInner":false,"settings":{"layout":"full_width","stretch_section":"","column_gap":"no","padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"319fb7a","elType":"column","settings":{"_column_size":100,"_inline_size":null,"padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"6fc6f9c","elType":"widget","widgetType":"html","settings":{"html":"<div class=\"ndi-wdp\">\n<section id=\"csomagok\" style=\"padding:var(--section-y) 0;background:var(--surface-page);\">\n  <div class=\"ndi-container\">\n    <div style=\"text-align:center;margin-bottom:var(--space-6);\">\n      <p class=\"ndi-section-eyebrow\">Csomagok</p>\n      <h2 class=\"ndi-section-title\">Mennyibe kerül egy üzleti weboldal elkészítése?</h2>\n      <p class=\"ndi-section-lead\" style=\"max-width:680px;margin:0 auto;\">Minden vállalkozás más szakaszban jár, ezért csomagjainkat rugalmasan alakítottuk ki. Az árak tájékoztató jellegűek — a pontos ajánlat a céljaidtól függ.</p>\n    </div>\n    <div style=\"display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin:var(--space-6) 0 var(--space-8);\">\n      <span style=\"display:inline-flex;align-items:center;gap:8px;font-size:var(--text-sm);font-weight:600;color:var(--text-body);\"><i class=\"bi bi-check-circle-fill\" style=\"color:var(--teal-500);\"></i> átlátható díjak</span>\n      <span style=\"display:inline-flex;align-items:center;gap:8px;font-size:var(--text-sm);font-weight:600;color:var(--text-body);\"><i class=\"bi bi-check-circle-fill\" style=\"color:var(--teal-500);\"></i> nincs rejtett költség</span>\n      <span style=\"display:inline-flex;align-items:center;gap:8px;font-size:var(--text-sm);font-weight:600;color:var(--text-body);\"><i class=\"bi bi-check-circle-fill\" style=\"color:var(--teal-500);\"></i> cégedre szabott ajánlat</span>\n    </div>\n    <div class=\"ndi-pricing\" style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);align-items:stretch;\">\n      <div style=\"position:relative;display:flex;flex-direction:column;border-radius:var(--radius-xl);padding:var(--space-6);background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);\">\n        <h3 style=\"color:var(--text-strong);font-size:var(--text-h3);margin:0 0 2px;\">Start</h3>\n        <div style=\"font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-4);\">Bemutatkozó weboldal</div>\n        <div style=\"font-size:1.6rem;font-weight:800;color:var(--text-brand);line-height:1.1;\">180.000 – 280.000 Ft</div>\n        <div style=\"font-size:12px;color:var(--text-muted);margin-bottom:var(--space-4);display:inline-flex;align-items:center;gap:6px;\"><i class=\"bi bi-clock\"></i> 5–10 munkanap</div>\n        <div style=\"height:1px;background:var(--border-subtle);margin:0 0 var(--space-4);\"></div>\n        <ul style=\"margin:0 0 var(--space-5);padding:0;display:flex;flex-direction:column;gap:9px;flex:1;\">\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> 1–3 aloldal elkészítése</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> Reszponzív, mobilbarát design</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> Bemutatkozás &amp; szolgáltatások oldal</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> Kapcsolati űrlap beállítása</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> Alap SEO + Google Maps</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> SSL beállítás, 1 kör módosítás</li>\n        </ul>\n        <p style=\"font-size:12.5px;color:var(--text-muted);line-height:1.45;margin:0 0 var(--space-5);\">Induló vállalkozásoknak, egyéni vállalkozóknak és szolgáltatóknak.</p>\n        <a href=\"#ajanlat\" class=\"ndi-btn ndi-btn-secondary ndi-btn-md ndi-btn-full\">Konzultációt kérek</a>\n      </div>\n      <div style=\"position:relative;display:flex;flex-direction:column;border-radius:var(--radius-xl);padding:var(--space-6);background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);\">\n        <h3 style=\"color:var(--text-strong);font-size:var(--text-h3);margin:0 0 2px;\">Landing oldal</h3>\n        <div style=\"font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-4);\">Kampányhoz vagy hirdetéshez</div>\n        <div style=\"font-size:1.6rem;font-weight:800;color:var(--text-brand);line-height:1.1;\">220.000 – 280.000 Ft</div>\n        <div style=\"font-size:12px;color:var(--text-muted);margin-bottom:var(--space-4);display:inline-flex;align-items:center;gap:6px;\"><i class=\"bi bi-clock\"></i> 5–12 munkanap</div>\n        <div style=\"height:1px;background:var(--border-subtle);margin:0 0 var(--space-4);\"></div>\n        <ul style=\"margin:0 0 var(--space-5);padding:0;display:flex;flex-direction:column;gap:9px;flex:1;\">\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> Hosszú, fókuszált landing oldal</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> Figyelemfelkeltő nyitószekció</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> Értékajánlat + bizalmi elemek</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> Ajánlatkérő / feliratkozó űrlap</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> Erős CTA-gombok</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> Meta / Google Ads mérés</li>\n        </ul>\n        <p style=\"font-size:12.5px;color:var(--text-muted);line-height:1.45;margin:0 0 var(--space-5);\">Egy szolgáltatás, termék vagy kampány célzott bemutatására.</p>\n        <a href=\"#ajanlat\" class=\"ndi-btn ndi-btn-secondary ndi-btn-md ndi-btn-full\">Konzultációt kérek</a>\n      </div>\n      <div style=\"position:relative;display:flex;flex-direction:column;border-radius:var(--radius-xl);padding:var(--space-6);background:var(--gradient-hero);border:1px solid rgba(36,208,174,0.4);box-shadow:var(--shadow-xl);transform:translateY(-8px);\">\n        <span style=\"position:absolute;top:16px;right:16px;font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:#06241e;background:var(--teal-400);padding:4px 10px;border-radius:999px;\">Legnépszerűbb</span>\n        <h3 style=\"color:#fff;font-size:var(--text-h3);margin:0 0 2px;\">Business</h3>\n        <div style=\"font-size:var(--text-sm);color:var(--text-on-dark-muted);margin-bottom:var(--space-4);\">Professzionális céges weboldal</div>\n        <div style=\"font-size:1.6rem;font-weight:800;color:var(--teal-300);line-height:1.1;\">350.000 – 750.000 Ft</div>\n        <div style=\"font-size:12px;color:var(--text-on-dark-muted);margin-bottom:var(--space-4);display:inline-flex;align-items:center;gap:6px;\"><i class=\"bi bi-clock\"></i> 3–4 hét</div>\n        <div style=\"height:1px;background:rgba(255,255,255,0.14);margin:0 0 var(--space-4);\"></div>\n        <ul style=\"margin:0 0 var(--space-5);padding:0;display:flex;flex-direction:column;gap:9px;flex:1;\">\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:rgba(255,255,255,0.92);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-300);flex-shrink:0;margin-top:1px;\"></i> 4–10 aloldal, egyedi arculat</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:rgba(255,255,255,0.92);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-300);flex-shrink:0;margin-top:1px;\"></i> Szolgáltatás- és termékbemutató oldalak</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:rgba(255,255,255,0.92);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-300);flex-shrink:0;margin-top:1px;\"></i> Időpontfoglaló + hírlevélkezelés</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:rgba(255,255,255,0.92);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-300);flex-shrink:0;margin-top:1px;\"></i> Blog / hírek modul</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:rgba(255,255,255,0.92);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-300);flex-shrink:0;margin-top:1px;\"></i> Sebesség + keresőoptimalizálás</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:rgba(255,255,255,0.92);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-300);flex-shrink:0;margin-top:1px;\"></i> Google / Meta bekötés, 2 kör módosítás, betanítás</li>\n        </ul>\n        <p style=\"font-size:12.5px;color:var(--text-on-dark-muted);line-height:1.45;margin:0 0 var(--space-5);\">KKV-knak, akik komolyabb online jelenlétet és több érdeklődőt szeretnének.</p>\n        <a href=\"#ajanlat\" class=\"ndi-btn ndi-btn-accent ndi-btn-md ndi-btn-full\">Konzultációt kérek</a>\n      </div>\n      <div style=\"position:relative;display:flex;flex-direction:column;border-radius:var(--radius-xl);padding:var(--space-6);background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);\">\n        <h3 style=\"color:var(--text-strong);font-size:var(--text-h3);margin:0 0 2px;\">Webshop</h3>\n        <div style=\"font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-4);\">Online értékesítéshez</div>\n        <div style=\"font-size:1.6rem;font-weight:800;color:var(--text-brand);line-height:1.1;\">900.000 – 1.800.000 Ft</div>\n        <div style=\"font-size:12px;color:var(--text-muted);margin-bottom:var(--space-4);display:inline-flex;align-items:center;gap:6px;\"><i class=\"bi bi-clock\"></i> 4–10 hét</div>\n        <div style=\"height:1px;background:var(--border-subtle);margin:0 0 var(--space-4);\"></div>\n        <ul style=\"margin:0 0 var(--space-5);padding:0;display:flex;flex-direction:column;gap:9px;flex:1;\">\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> Webshop alapbeállítás + kategóriák</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> Kosár és pénztár oldal</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> Fizetési &amp; szállítási módok</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> 10–30 termék feltöltése</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> Rendelési e-mailek + kuponrendszer</li>\n          <li style=\"display:flex;gap:9px;font-size:var(--text-sm);color:var(--text-body);line-height:1.35;\"><i class=\"bi bi-check-lg\" style=\"color:var(--teal-500);flex-shrink:0;margin-top:1px;\"></i> Készletkezelés, 2 kör módosítás</li>\n        </ul>\n        <p style=\"font-size:12.5px;color:var(--text-muted);line-height:1.45;margin:0 0 var(--space-5);\">Vállalkozásoknak, akik termékeket szeretnének online értékesíteni.</p>\n        <a href=\"#ajanlat\" class=\"ndi-btn ndi-btn-secondary ndi-btn-md ndi-btn-full\">Konzultációt kérek</a>\n      </div>\n    </div>\n    <h3 style=\"text-align:center;font-size:var(--text-h3);color:var(--text-strong);margin:var(--space-12) 0 var(--space-6);\">Kiegészítő szolgáltatások</h3>\n    <div class=\"ndi-addons\" style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);\">\n      <div class=\"ndi-card\" style=\"padding:var(--space-6);display:flex;flex-direction:column;\"><div style=\"display:flex;align-items:center;gap:12px;margin-bottom:var(--space-3);\"><span style=\"width:44px;height:44px;border-radius:12px;background:var(--teal-50);color:var(--teal-600);display:inline-flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;\"><i class=\"bi bi-wrench-adjustable\"></i></span><div><h4 style=\"margin:0;font-size:var(--text-h4);color:var(--text-strong);\">Karbantartási csomag</h4><div style=\"font-size:var(--text-sm);font-weight:700;color:var(--text-brand);\">25.000 – 50.000 Ft</div></div></div><ul style=\"margin:0;padding:0;display:flex;flex-direction:column;gap:7px;\"><li style=\"display:flex;gap:8px;font-size:var(--text-sm);color:var(--text-body);\"><i class=\"bi bi-dot\" style=\"color:var(--teal-500);\"></i> Rendszerfrissítések</li><li style=\"display:flex;gap:8px;font-size:var(--text-sm);color:var(--text-body);\"><i class=\"bi bi-dot\" style=\"color:var(--teal-500);\"></i> Biztonsági mentés / helyreállítás</li><li style=\"display:flex;gap:8px;font-size:var(--text-sm);color:var(--text-body);\"><i class=\"bi bi-dot\" style=\"color:var(--teal-500);\"></i> Hibajavítás</li></ul></div>\n      <div class=\"ndi-card\" style=\"padding:var(--space-6);display:flex;flex-direction:column;\"><div style=\"display:flex;align-items:center;gap:12px;margin-bottom:var(--space-3);\"><span style=\"width:44px;height:44px;border-radius:12px;background:var(--teal-50);color:var(--teal-600);display:inline-flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;\"><i class=\"bi bi-graph-up-arrow\"></i></span><div><h4 style=\"margin:0;font-size:var(--text-h4);color:var(--text-strong);\">SEO optimalizálás</h4><div style=\"font-size:var(--text-sm);font-weight:700;color:var(--text-brand);\">120.000 – 250.000 Ft</div></div></div><ul style=\"margin:0;padding:0;display:flex;flex-direction:column;gap:7px;\"><li style=\"display:flex;gap:8px;font-size:var(--text-sm);color:var(--text-body);\"><i class=\"bi bi-dot\" style=\"color:var(--teal-500);\"></i> Technikai SEO audit</li><li style=\"display:flex;gap:8px;font-size:var(--text-sm);color:var(--text-body);\"><i class=\"bi bi-dot\" style=\"color:var(--teal-500);\"></i> Kulcsszókutatás</li><li style=\"display:flex;gap:8px;font-size:var(--text-sm);color:var(--text-body);\"><i class=\"bi bi-dot\" style=\"color:var(--teal-500);\"></i> Optimalizálás</li></ul></div>\n      <div class=\"ndi-card\" style=\"padding:var(--space-6);display:flex;flex-direction:column;\"><div style=\"display:flex;align-items:center;gap:12px;margin-bottom:var(--space-3);\"><span style=\"width:44px;height:44px;border-radius:12px;background:var(--teal-50);color:var(--teal-600);display:inline-flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;\"><i class=\"bi bi-pencil-square\"></i></span><div><h4 style=\"margin:0;font-size:var(--text-h4);color:var(--text-strong);\">Szövegírás csomag</h4><div style=\"font-size:var(--text-sm);font-weight:700;color:var(--text-brand);\">25.000 – 50.000 Ft</div></div></div><ul style=\"margin:0;padding:0;display:flex;flex-direction:column;gap:7px;\"><li style=\"display:flex;gap:8px;font-size:var(--text-sm);color:var(--text-body);\"><i class=\"bi bi-dot\" style=\"color:var(--teal-500);\"></i> SEO-barát szövegírás</li><li style=\"display:flex;gap:8px;font-size:var(--text-sm);color:var(--text-body);\"><i class=\"bi bi-dot\" style=\"color:var(--teal-500);\"></i> Egyedi, értékes tartalom</li><li style=\"display:flex;gap:8px;font-size:var(--text-sm);color:var(--text-body);\"><i class=\"bi bi-dot\" style=\"color:var(--teal-500);\"></i> Feltöltés</li></ul></div>\n    </div>\n    <div class=\"ndi-help-strip\" style=\"margin-top:var(--space-8);display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;background:var(--surface-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-6) var(--space-7);\">\n      <div><h4 style=\"margin:0 0 4px;font-size:var(--text-h4);color:var(--text-strong);\">Nem tudod, melyik csomag illik hozzád?</h4><p style=\"margin:0;font-size:var(--text-sm);color:var(--text-muted);\">Beszéljük át a céljaid — ingyenes, kötelezettségmentes konzultáció.</p></div>\n      <a href=\"#ajanlat\" class=\"ndi-btn ndi-btn-primary ndi-btn-lg\">Konzultációt kérek <i class=\"bi bi-arrow-right\"></i></a>\n    </div>\n  </div>\n</section>\n</div>"},"elements":[]}]}]},{"id":"8c755ba","elType":"section","isInner":false,"settings":{"layout":"full_width","stretch_section":"","column_gap":"no","padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"bad474b","elType":"column","settings":{"_column_size":100,"_inline_size":null,"padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"b47a7d0","elType":"widget","widgetType":"html","settings":{"html":"<div class=\"ndi-wdp\">\n<section style=\"padding:var(--section-y) 0 0;\">\n  <div class=\"ndi-container\">\n    <div style=\"position:relative;overflow:hidden;border-radius:var(--radius-2xl);background:var(--gradient-brand);color:#fff;padding:var(--space-12) var(--space-10);text-align:center;\">\n      <div style=\"position:absolute;top:-80px;right:-40px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,0.14);filter:blur(70px);pointer-events:none;\"></div>\n      <div style=\"position:relative;\">\n        <h2 style=\"font-size:var(--text-display-md);color:#fff;font-weight:800;margin:0 0 var(--space-4);\">Készítsünk weboldalt, amely dolgozik érted.</h2>\n        <p style=\"font-size:var(--text-lead);color:rgba(255,255,255,0.9);max-width:600px;margin:0 auto var(--space-7);\">Mondd el, mire van szükséged, és személyre szabott ajánlatot készítünk.</p>\n        <a href=\"#ajanlat\" class=\"ndi-btn ndi-btn-accent ndi-btn-lg\">Kérj ajánlatot weboldaladra <i class=\"bi bi-arrow-right\"></i></a>\n      </div>\n    </div>\n  </div>\n</section>\n</div>"},"elements":[]}]}]},{"id":"34811c7","elType":"section","isInner":false,"settings":{"layout":"full_width","stretch_section":"","column_gap":"no","padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"0604990","elType":"column","settings":{"_column_size":100,"_inline_size":null,"padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"b82c2b1","elType":"widget","widgetType":"html","settings":{"html":"<div class=\"ndi-wdp\">\n<section id=\"ajanlat\" style=\"padding:var(--section-y) 0;background:var(--surface-page);\">\n  <div class=\"ndi-container\">\n    <div class=\"ndi-contact-grid\" style=\"display:grid;grid-template-columns:0.9fr 1.1fr;gap:var(--space-10);align-items:start;\">\n      <div>\n        <p class=\"ndi-section-eyebrow\">Ajánlatkérés</p>\n        <h2 class=\"ndi-section-title\">Kérj ajánlatot a weboldaladra</h2>\n        <p class=\"ndi-section-lead\" style=\"max-width:460px;\">Néhány adat, és személyre szabott ajánlattal jelentkezünk. Nem kötelez semmire.</p>\n        <div style=\"display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-7);\">\n          <div style=\"display:flex;align-items:center;gap:12px;\"><span style=\"width:44px;height:44px;border-radius:12px;background:var(--teal-50);color:var(--teal-600);display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;\"><i class=\"bi bi-clock\"></i></span><span style=\"font-weight:600;color:var(--text-strong);\">Válasz 1 munkanapon belül</span></div>\n          <div style=\"display:flex;align-items:center;gap:12px;\"><span style=\"width:44px;height:44px;border-radius:12px;background:var(--teal-50);color:var(--teal-600);display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;\"><i class=\"bi bi-shield-check\"></i></span><span style=\"font-weight:600;color:var(--text-strong);\">Nincs rejtett költség</span></div>\n          <div style=\"display:flex;align-items:center;gap:12px;\"><span style=\"width:44px;height:44px;border-radius:12px;background:var(--teal-50);color:var(--teal-600);display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;\"><i class=\"bi bi-chat-dots\"></i></span><span style=\"font-weight:600;color:var(--text-strong);\">Ingyenes első konzultáció</span></div>\n        </div>\n      </div>\n      <div class=\"ndi-card\" style=\"padding:var(--space-7);\">\n        <div id=\"ndi-form-success\" style=\"display:none;text-align:center;padding:var(--space-8) 0;\">\n          <i class=\"bi bi-check-circle-fill\" style=\"font-size:48px;color:var(--teal-500);\"></i>\n          <h3 style=\"margin:var(--space-4) 0 8px;color:var(--text-strong);\">Köszönjük!</h3>\n          <p style=\"color:var(--text-muted);margin:0;\">Hamarosan elküldjük személyre szabott ajánlatunkat.</p>\n        </div>\n        <form id=\"ndi-quote-form\" style=\"display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);\" onsubmit=\"ndiFormSubmit(event)\">\n          <div class=\"ndi-form-group\"><label class=\"ndi-form-label\">Név</label><input class=\"ndi-form-input\" type=\"text\" placeholder=\"Teljes neved\" required></div>\n          <div class=\"ndi-form-group\"><label class=\"ndi-form-label\">Weboldal típusa</label><select class=\"ndi-form-select\"><option>Céges weboldal</option><option>Landing oldal</option><option>Webáruház</option><option>Meglévő oldal megújítása</option><option>Egyéb</option></select></div>\n          <div class=\"ndi-form-group\"><label class=\"ndi-form-label\">Email</label><input class=\"ndi-form-input\" type=\"email\" placeholder=\"te@ceged.hu\" required></div>\n          <div class=\"ndi-form-group\"><label class=\"ndi-form-label\">Telefonszám</label><input class=\"ndi-form-input\" type=\"tel\" placeholder=\"+36 …\"></div>\n          <div class=\"ndi-form-group\" style=\"grid-column:span 2;\"><label class=\"ndi-form-label\">Üzenet</label><textarea class=\"ndi-form-textarea\" rows=\"4\" placeholder=\"Mesélj röviden a projektről…\"></textarea></div>\n          <div style=\"grid-column:span 2;\"><button type=\"submit\" class=\"ndi-btn ndi-btn-accent ndi-btn-lg ndi-btn-full\">Ajánlatot kérek <i class=\"bi bi-send\"></i></button></div>\n        </form>\n      </div>\n    </div>\n  </div>\n</section>\n<script>\nfunction ndiFormSubmit(e){\n  e.preventDefault();\n  document.getElementById('ndi-quote-form').style.display='none';\n  document.getElementById('ndi-form-success').style.display='block';\n}\n</script>\n</div>"},"elements":[]}]}]},{"id":"55a8afd","elType":"section","isInner":false,"settings":{"layout":"full_width","stretch_section":"","column_gap":"no","padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"5f7bd76","elType":"column","settings":{"_column_size":100,"_inline_size":null,"padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":false}},"elements":[{"id":"cbaf938","elType":"widget","widgetType":"html","settings":{"html":"<div class=\"ndi-wdp\">\n<footer id=\"kapcsolat\" style=\"background:var(--surface-inverse-deep);color:var(--text-on-dark-muted);\">\n  <div class=\"ndi-footer-grid\" style=\"max-width:var(--container-max);margin:0 auto;padding:var(--space-12) var(--container-pad) var(--space-7);display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:var(--space-8);\">\n    <div>\n      <img src=\"https://media.ndistudio.hu/wp-content/uploads/ndi-media-logo-white.png\" alt=\"NDI Stúdió Media\" style=\"height:46px;width:auto;margin-bottom:var(--space-4);\">\n      <p style=\"margin:0;max-width:380px;font-size:var(--text-sm);line-height:var(--lh-body);\">Digitális megoldások vállalkozásoknak: webfejlesztés, online marketing, eDM kampányok, videós és vizuális tartalomgyártás, valamint márkaépítés egy kézben.</p>\n      <div style=\"display:flex;gap:10px;margin-top:var(--space-5);\">\n        <a href=\"#\" style=\"width:40px;height:40px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.08);color:#fff;font-size:18px;\"><i class=\"bi bi-facebook\"></i></a>\n        <a href=\"#\" style=\"width:40px;height:40px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.08);color:#fff;font-size:18px;\"><i class=\"bi bi-linkedin\"></i></a>\n      </div>\n    </div>\n    <div>\n      <h5 style=\"color:#fff;font-size:var(--text-sm);letter-spacing:0.08em;text-transform:uppercase;margin:0 0 var(--space-4);\">Gyorslinkek</h5>\n      <ul style=\"list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;\">\n        <li><a href=\"https://media.ndistudio.hu/weboldalkeszites-uj/\" class=\"ndi-flink\">Weboldalkészítés</a></li>\n        <li><a href=\"https://media.ndistudio.hu/adatkezelesi-tajekoztato/\" class=\"ndi-flink\">Adatkezelési tájékoztató</a></li>\n        <li><a href=\"https://media.ndistudio.hu/impresszum/\" class=\"ndi-flink\">Impresszum</a></li>\n      </ul>\n    </div>\n    <div>\n      <h5 style=\"color:#fff;font-size:var(--text-sm);letter-spacing:0.08em;text-transform:uppercase;margin:0 0 var(--space-4);\">Kapcsolat</h5>\n      <ul style=\"list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;font-size:var(--text-sm);\">\n        <li><i class=\"bi bi-building\" style=\"margin-right:8px;color:var(--teal-300);\"></i>NDI Stúdió Informatikai Kft.</li>\n        <li><i class=\"bi bi-geo-alt\" style=\"margin-right:8px;color:var(--teal-300);\"></i>1121 Bp, Fülemile út 12-18.</li>\n        <li><i class=\"bi bi-envelope\" style=\"margin-right:8px;color:var(--teal-300);\"></i>info@ndistudio.hu</li>\n        <li><i class=\"bi bi-telephone\" style=\"margin-right:8px;color:var(--teal-300);\"></i>+361 920-6690</li>\n      </ul>\n    </div>\n  </div>\n  <div style=\"border-top:1px solid rgba(255,255,255,0.1);\">\n    <div style=\"max-width:var(--container-max);margin:0 auto;padding:var(--space-5) var(--container-pad);display:flex;justify-content:space-between;font-size:var(--text-xs);flex-wrap:wrap;gap:8px;\">\n      <span>© 2026 NDI Stúdió Informatikai Kft. Minden jog fenntartva.</span>\n      <span>Stratégia · Kreatív · Mérhető eredmény</span>\n    </div>\n  </div>\n</footer>\n</div>"},"elements":[]}]}]}]