diff --git a/scripts/site_gates.py b/scripts/site_gates.py
new file mode 100644
index 0000000..10a936b
--- /dev/null
+++ b/scripts/site_gates.py
@@ -0,0 +1,128 @@
+# -*- coding: utf-8 -*-
+"""TASK-D3 site gates — mechanical checks against the static site's known failure mode:
+silent per-page drift. Run from the repo root:  python scripts/site_gates.py
+
+Gates (all must pass; non-zero exit on any failure):
+  1. BOM        — every website/*.html begins with EF BB BF (byte-checked)
+  2. emoji      — zero emoji/pictographs in website/*.html (codepoint ranges; NEVER grep —
+                  Windows grep false-negatives multibyte emoji, proven in D0)
+  3. nav        — the <nav>…</nav> and <footer>…</footer> blocks of all pages are identical
+                  after stripping the active-link marker
+  4. analytics  — the umami snippet is present on every public page (nonpublic draft exempt)
+  5. no-CDN     — zero fonts.googleapis.com / fonts.gstatic.com references
+  6. banned     — zero legacy hexes / 999px radius / box-shadow in pages + site.css
+  7. style      — zero embedded <style> blocks in pages (everything lives in site.css)
+  8. cachebust  — every site.css / icons.svg reference carries ?v=<N>
+"""
+import io, os, re, sys
+
+ROOT = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+W = os.path.join(ROOT, "website")
+
+PAGES = ["index.html", "kapcsolat.html", "alkalmazasok.html", "technologiak.html",
+         "biztonsagimentes.html", "gyik.html", "szolgaltatasok-nonpublic.html"]
+ANALYTICS_EXEMPT = {"szolgaltatasok-nonpublic.html"}
+ANALYTICS_MARK = "https://stats.felhom.eu/script.js"
+
+BANNED = ["fonts.googleapis.com", "fonts.gstatic.com",
+          "#0d1117", "#161b22", "#1c2128", "#30363d", "#238636", "#da3633", "#d29922",
+          "border-radius: 999px", "box-shadow"]
+
+fails = []
+
+
+def fail(msg):
+    fails.append(msg)
+    print("FAIL:", msg)
+
+
+def is_emoji(ch):
+    o = ord(ch)
+    return any(a <= o <= b for a, b in [
+        (0x1F000, 0x1FAFF),  # pictographs, emoticons, transport, symbols-ext, cards
+        (0x2600, 0x27BF),    # misc symbols + dingbats (incl. ✓ ✗ ★ ⚠ — sprite icons instead)
+        (0x2300, 0x23FF),    # misc technical (⏱ ⏳ ⌛ …)
+        (0x2B00, 0x2BFF),    # ⭐ etc.
+        (0xFE00, 0xFE0F),    # variation selectors
+        (0x1F1E6, 0x1F1FF),  # regional indicators
+    ])
+
+
+def norm_block(b):
+    b = b.replace(' class="active"', "")
+    b = re.sub(r'\s*aria-current="[^"]*"', "", b)
+    return b
+
+
+pages = {}
+for p in PAGES:
+    path = os.path.join(W, p)
+    raw = io.open(path, "rb").read()
+    # gate 1: BOM
+    if raw[:3] != b"\xef\xbb\xbf":
+        fail("%s: missing UTF-8 BOM (first bytes: %s)" % (p, raw[:3].hex()))
+    pages[p] = raw.decode("utf-8-sig")
+
+# gate 2: emoji
+total_emoji = 0
+for p, s in pages.items():
+    hits = [(i, ch) for i, ch in enumerate(s) if is_emoji(ch)]
+    if hits:
+        total_emoji += len(hits)
+        sample = " ".join(ch for _, ch in hits[:10])
+        fail("%s: %d emoji (%s ...)" % (p, len(hits), sample))
+if total_emoji:
+    print("  emoji total: %d" % total_emoji)
+
+# gate 3: nav + footer consistency
+ref_nav = ref_footer = None
+for p, s in pages.items():
+    nm = re.search(r"<nav>.*?</nav>", s, re.DOTALL)
+    fm = re.search(r"<footer>.*?</footer>", s, re.DOTALL)
+    if not nm or not fm:
+        fail("%s: missing <nav> or <footer>" % p)
+        continue
+    nav, foot = norm_block(nm.group(0)), norm_block(fm.group(0))
+    if ref_nav is None:
+        ref_nav, ref_footer, ref_page = nav, foot, p
+    else:
+        if nav != ref_nav:
+            fail("%s: <nav> differs from %s (after active-marker normalization)" % (p, ref_page))
+        if foot != ref_footer:
+            fail("%s: <footer> differs from %s" % (p, ref_page))
+
+# gate 4: analytics presence
+for p, s in pages.items():
+    if p in ANALYTICS_EXEMPT:
+        continue
+    if ANALYTICS_MARK not in s:
+        fail("%s: analytics snippet missing (%s)" % (p, ANALYTICS_MARK))
+
+# gate 5+6: banned strings in pages + site.css
+targets = dict(pages)
+css_path = os.path.join(W, "assets", "site.css")
+if os.path.exists(css_path):
+    targets["assets/site.css"] = io.open(css_path, encoding="utf-8").read()
+for name, s in targets.items():
+    low = s.lower()
+    for pat in BANNED:
+        c = low.count(pat.lower())
+        if c:
+            fail("%s: banned %r ×%d" % (name, pat, c))
+
+# gate 7: no embedded style blocks
+for p, s in pages.items():
+    c = len(re.findall(r"<style[\s>]", s))
+    if c:
+        fail("%s: %d embedded <style> block(s)" % (p, c))
+
+# gate 8: cache-busting on shared assets
+for p, s in pages.items():
+    for m in re.finditer(r"/assets/(site\.css|icons\.svg)([^\"'#\s>]*)", s):
+        if not m.group(2).startswith("?v="):
+            fail("%s: %s referenced without ?v= (got %r)" % (p, m.group(1), m.group(0)))
+
+if fails:
+    print("\nSITE GATES FAILED: %d problem(s)" % len(fails))
+    sys.exit(1)
+print("site gates OK — BOM, emoji=0, nav/footer consistent, analytics present, no CDN, no legacy tokens, no <style>, cache-busted assets")
diff --git a/website/assets/fonts/jbm-latin-ext.woff2 b/website/assets/fonts/jbm-latin-ext.woff2
new file mode 100644
index 0000000..82f9668
Binary files /dev/null and b/website/assets/fonts/jbm-latin-ext.woff2 differ
diff --git a/website/assets/fonts/jbm-latin.woff2 b/website/assets/fonts/jbm-latin.woff2
new file mode 100644
index 0000000..4d09cda
Binary files /dev/null and b/website/assets/fonts/jbm-latin.woff2 differ
diff --git a/website/assets/fonts/pjs-latin-ext.woff2 b/website/assets/fonts/pjs-latin-ext.woff2
new file mode 100644
index 0000000..f82597c
Binary files /dev/null and b/website/assets/fonts/pjs-latin-ext.woff2 differ
diff --git a/website/assets/fonts/pjs-latin.woff2 b/website/assets/fonts/pjs-latin.woff2
new file mode 100644
index 0000000..a180dc4
Binary files /dev/null and b/website/assets/fonts/pjs-latin.woff2 differ
diff --git a/website/assets/icons.svg b/website/assets/icons.svg
new file mode 100644
index 0000000..0940a1f
--- /dev/null
+++ b/website/assets/icons.svg
@@ -0,0 +1,72 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+<symbol id="i-hard-drive" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 16h.01" /> <path d="M2.212 11.577a2 2 0 0 0-.212.896V18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5.527a2 2 0 0 0-.212-.896L18.55 5.11A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" /> <path d="M21.946 12.013H2.054" /> <path d="M6 16h.01" /></symbol>
+<symbol id="i-cpu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v2" /> <path d="M12 2v2" /> <path d="M17 20v2" /> <path d="M17 2v2" /> <path d="M2 12h2" /> <path d="M2 17h2" /> <path d="M2 7h2" /> <path d="M20 12h2" /> <path d="M20 17h2" /> <path d="M20 7h2" /> <path d="M7 20v2" /> <path d="M7 2v2" /> <rect x="4" y="4" width="16" height="16" rx="2" /> <rect x="8" y="8" width="8" height="8" rx="1" /></symbol>
+<symbol id="i-memory-stick" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 12v-2" /> <path d="M12 18v-2" /> <path d="M16 12v-2" /> <path d="M16 18v-2" /> <path d="M2 11h1.5" /> <path d="M20 18v-2" /> <path d="M20.5 11H22" /> <path d="M4 18v-2" /> <path d="M8 12v-2" /> <path d="M8 18v-2" /> <rect x="2" y="6" width="20" height="10" rx="2" /></symbol>
+<symbol id="i-thermometer" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z" /></symbol>
+<symbol id="i-triangle-alert" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /> <path d="M12 9v4" /> <path d="M12 17h.01" /></symbol>
+<symbol id="i-lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2" /> <path d="M7 11V7a5 5 0 0 1 10 0v4" /></symbol>
+<symbol id="i-cloud" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" /></symbol>
+<symbol id="i-square" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" /></symbol>
+<symbol id="i-rotate-cw" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" /> <path d="M21 3v5h-5" /></symbol>
+<symbol id="i-file-text" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /> <path d="M14 2v5a1 1 0 0 0 1 1h5" /> <path d="M10 9H8" /> <path d="M16 13H8" /> <path d="M16 17H8" /></symbol>
+<symbol id="i-external-link" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6" /> <path d="M10 14 21 3" /> <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></symbol>
+<symbol id="i-shield" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /></symbol>
+<symbol id="i-server" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="8" x="2" y="2" rx="2" ry="2" /> <rect width="20" height="8" x="2" y="14" rx="2" ry="2" /> <line x1="6" x2="6.01" y1="6" y2="6" /> <line x1="6" x2="6.01" y1="18" y2="18" /></symbol>
+<symbol id="i-layout-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="7" x="3" y="3" rx="1" /> <rect width="7" height="7" x="14" y="3" rx="1" /> <rect width="7" height="7" x="14" y="14" rx="1" /> <rect width="7" height="7" x="3" y="14" rx="1" /></symbol>
+<symbol id="i-settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /> <circle cx="12" cy="12" r="3" /></symbol>
+<symbol id="i-bell" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.268 21a2 2 0 0 0 3.464 0" /> <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" /></symbol>
+<symbol id="i-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /> <path d="m6 6 12 12" /></symbol>
+<symbol id="i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5" /></symbol>
+<symbol id="i-pencil" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" /> <path d="m15 5 4 4" /></symbol>
+<symbol id="i-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /> <path d="M12 16v-4" /> <path d="M12 8h.01" /></symbol>
+<symbol id="i-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V3" /> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /> <path d="m7 10 5 5 5-5" /></symbol>
+<symbol id="i-upload" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12" /> <path d="m17 8-5-5-5 5" /> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /></symbol>
+<symbol id="i-trash-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 11v6" /> <path d="M14 11v6" /> <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /> <path d="M3 6h18" /> <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></symbol>
+<symbol id="i-wrench" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z" /></symbol>
+<symbol id="i-link" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /> <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></symbol>
+<symbol id="i-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34" /> <circle cx="11" cy="11" r="8" /></symbol>
+<symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14" /> <path d="M12 5v14" /></symbol>
+<symbol id="i-chevron-down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></symbol>
+<symbol id="i-play" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" /></symbol>
+<symbol id="i-pause" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="14" y="3" width="5" height="18" rx="1" /> <rect x="5" y="3" width="5" height="18" rx="1" /></symbol>
+<symbol id="i-boxes" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" /> <path d="m7 16.5-4.74-2.85" /> <path d="m7 16.5 5-3" /> <path d="M7 16.5v5.17" /> <path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" /> <path d="m17 16.5-5-3" /> <path d="m17 16.5 4.74-2.85" /> <path d="M17 16.5v5.17" /> <path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" /> <path d="M12 8 7.26 5.15" /> <path d="m12 8 4.74-2.85" /> <path d="M12 13.5V8" /></symbol>
+<symbol id="i-brick-wall" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" /> <path d="M12 9v6" /> <path d="M16 15v6" /> <path d="M16 3v6" /> <path d="M3 15h18" /> <path d="M3 9h18" /> <path d="M8 15v6" /> <path d="M8 3v6" /></symbol>
+<symbol id="i-building-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 12h4" /> <path d="M10 8h4" /> <path d="M14 21v-3a2 2 0 0 0-4 0v3" /> <path d="M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2" /> <path d="M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16" /></symbol>
+<symbol id="i-camera" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z" /> <circle cx="12" cy="13" r="3" /></symbol>
+<symbol id="i-chart-column" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v16a2 2 0 0 0 2 2h16" /> <path d="M18 17V9" /> <path d="M13 17V5" /> <path d="M8 17v-3" /></symbol>
+<symbol id="i-circle-help" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /> <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /> <path d="M12 17h.01" /></symbol>
+<symbol id="i-clapperboard" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12.296 3.464 3.02 3.956" /> <path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3z" /> <path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /> <path d="m6.18 5.276 3.1 3.899" /></symbol>
+<symbol id="i-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /> <path d="M12 6v6l4 2" /></symbol>
+<symbol id="i-code" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 18 6-6-6-6" /> <path d="m8 6-6 6 6 6" /></symbol>
+<symbol id="i-coins" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.744 17.736a6 6 0 1 1-7.48-7.48" /> <path d="M15 6h1v4" /> <path d="m6.134 14.768.866-.5 2 3.464" /> <circle cx="16" cy="8" r="6" /></symbol>
+<symbol id="i-construction" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="6" width="20" height="8" rx="1" /> <path d="M17 14v7" /> <path d="M7 14v7" /> <path d="M17 3v3" /> <path d="M7 3v3" /> <path d="M10 14 2.3 6.3" /> <path d="m14 6 7.7 7.7" /> <path d="m8 6 8 8" /></symbol>
+<symbol id="i-container" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 7.7c0-.6-.4-1.2-.8-1.5l-6.3-3.9a1.72 1.72 0 0 0-1.7 0l-10.3 6c-.5.2-.9.8-.9 1.4v6.6c0 .5.4 1.2.8 1.5l6.3 3.9a1.72 1.72 0 0 0 1.7 0l10.3-6c.5-.3.9-1 .9-1.5Z" /> <path d="M10 21.9V14L2.1 9.1" /> <path d="m10 14 11.9-6.9" /> <path d="M14 19.8v-8.1" /> <path d="M18 17.5V9.4" /></symbol>
+<symbol id="i-database" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3" /> <path d="M3 5V19A9 3 0 0 0 21 19V5" /> <path d="M3 12A9 3 0 0 0 21 12" /></symbol>
+<symbol id="i-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" /> <circle cx="12" cy="12" r="3" /></symbol>
+<symbol id="i-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" /></symbol>
+<symbol id="i-gamepad-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" x2="10" y1="11" y2="11" /> <line x1="8" x2="8" y1="9" y2="13" /> <line x1="15" x2="15.01" y1="12" y2="12" /> <line x1="18" x2="18.01" y1="10" y2="10" /> <path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z" /></symbol>
+<symbol id="i-globe" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /> <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /> <path d="M2 12h20" /></symbol>
+<symbol id="i-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" /> <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /></symbol>
+<symbol id="i-image" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2" /> <circle cx="9" cy="9" r="2" /> <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" /></symbol>
+<symbol id="i-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" /> <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" /> <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" /></symbol>
+<symbol id="i-lightbulb" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" /> <path d="M9 18h6" /> <path d="M10 22h4" /></symbol>
+<symbol id="i-mail" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" /> <rect x="2" y="4" width="20" height="16" rx="2" /></symbol>
+<symbol id="i-map" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z" /> <path d="M15 5.764v15" /> <path d="M9 3.236v15" /></symbol>
+<symbol id="i-message-square" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" /></symbol>
+<symbol id="i-monitor" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2" /> <line x1="8" x2="16" y1="21" y2="21" /> <line x1="12" x2="12" y1="17" y2="21" /></symbol>
+<symbol id="i-package" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z" /> <path d="M12 22V12" /> <polyline points="3.29 7 12 12 20.71 7" /> <path d="m7.5 4.27 9 5.15" /></symbol>
+<symbol id="i-paperclip" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" /></symbol>
+<symbol id="i-radio-tower" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.9 16.1C1 12.2 1 5.8 4.9 1.9" /> <path d="M7.8 4.7a6.14 6.14 0 0 0-.8 7.5" /> <circle cx="12" cy="9" r="2" /> <path d="M16.2 4.8c2 2 2.26 5.11.8 7.47" /> <path d="M19.1 1.9a9.96 9.96 0 0 1 0 14.1" /> <path d="M9.5 18h5" /> <path d="m8 22 4-11 4 11" /></symbol>
+<symbol id="i-rocket" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" /> <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09" /> <path d="M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z" /> <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05" /></symbol>
+<symbol id="i-shield-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /> <path d="m9 12 2 2 4-4" /></symbol>
+<symbol id="i-siren" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18v-6a5 5 0 1 1 10 0v6" /> <path d="M5 21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-1a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2z" /> <path d="M21 12h1" /> <path d="M18.5 4.5 18 5" /> <path d="M2 12h1" /> <path d="M12 2v1" /> <path d="m4.929 4.929.707.707" /> <path d="M12 12v6" /></symbol>
+<symbol id="i-sliders-horizontal" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 5H3" /> <path d="M12 19H3" /> <path d="M14 3v4" /> <path d="M16 17v4" /> <path d="M21 12h-9" /> <path d="M21 19h-5" /> <path d="M21 5h-7" /> <path d="M8 10v4" /> <path d="M8 12H3" /></symbol>
+<symbol id="i-smartphone" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" /> <path d="M12 18h.01" /></symbol>
+<symbol id="i-sprout" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9.536V7a4 4 0 0 1 4-4h1.5a.5.5 0 0 1 .5.5V5a4 4 0 0 1-4 4 4 4 0 0 0-4 4c0 2 1 3 1 5a5 5 0 0 1-1 3" /> <path d="M4 9a5 5 0 0 1 8 4 5 5 0 0 1-8-4" /> <path d="M5 21h14" /></symbol>
+<symbol id="i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" /></symbol>
+<symbol id="i-stethoscope" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 2v2" /> <path d="M5 2v2" /> <path d="M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1" /> <path d="M8 15a6 6 0 0 0 12 0v-3" /> <circle cx="20" cy="10" r="2" /></symbol>
+<symbol id="i-target" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /> <circle cx="12" cy="12" r="6" /> <circle cx="12" cy="12" r="2" /></symbol>
+<symbol id="i-tv" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m17 2-5 5-5-5" /> <rect width="20" height="15" x="2" y="7" rx="2" /></symbol>
+<symbol id="i-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /> <path d="M16 3.128a4 4 0 0 1 0 7.744" /> <path d="M22 21v-2a4 4 0 0 0-3-3.87" /> <circle cx="9" cy="7" r="4" /></symbol>
+<symbol id="i-zap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" /></symbol>
+</svg>
diff --git a/website/assets/site.css b/website/assets/site.css
new file mode 100644
index 0000000..0ed77ef
--- /dev/null
+++ b/website/assets/site.css
@@ -0,0 +1,2022 @@
+/* ============================================================
+   felhom.eu — site.css v1 (design system v2, TASK-D3)
+   One shared stylesheet for all seven pages. Canonical tokens:
+   documentation/design/design-system.md. Bump ?v= in the pages
+   whenever this file or icons.svg changes (nginx expires 7d).
+   ============================================================ */
+
+/* --- Vendored fonts (self-hosted; latin-ext is mandatory for ő/ű) --- */
+@font-face {
+    font-family: 'Plus Jakarta Sans';
+    font-style: normal;
+    font-weight: 400 800;
+    font-display: swap;
+    src: url('/assets/fonts/pjs-latin.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+    font-family: 'Plus Jakarta Sans';
+    font-style: normal;
+    font-weight: 400 800;
+    font-display: swap;
+    src: url('/assets/fonts/pjs-latin-ext.woff2') format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 400 500;
+    font-display: swap;
+    src: url('/assets/fonts/jbm-latin.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 400 500;
+    font-display: swap;
+    src: url('/assets/fonts/jbm-latin-ext.woff2') format('woff2');
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* --- Design system v2 tokens (verbatim from design-system.md) --- */
+:root {
+  --bg-0: #0A1220;   --bg-1: #0F1B2E;   --bg-2: #16263F;
+  --line: #22344F;   --line-soft: #1A2A42;
+  --text-1: #EDF2F9; --text-2: #94A6BF; --text-3: #5E7392;
+  --blue: #0083D8;   --blue-bright: #2EA8F5; --blue-dim: rgba(0,131,216,.13);
+  --warn: #E0A93E;   --warn-dim: rgba(224,169,62,.12);
+  --crit: #E5534B;   --crit-dim: rgba(229,83,75,.12);
+  --radius: 2px;
+  --font-ui: 'Plus Jakarta Sans', -apple-system, sans-serif;
+  --font-data: 'JetBrains Mono', monospace;
+}
+
+/* --- Reset & base --- */
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body {
+    font-family: var(--font-ui);
+    background: var(--bg-0);
+    color: var(--text-1);
+    line-height: 1.6;
+    min-height: 100vh;
+}
+:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 1px; }
+
+.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
+
+/* --- Inline icon (vendored Lucide sprite, stroke = currentColor) --- */
+.ico {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    vertical-align: -0.18em;
+}
+.ico-sm { width: 14px; height: 14px; }
+/* Feature-tile icon: a 2px-radius bg-2 square, muted stroke — replaces the emoji tiles. */
+.icon-tile {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    background: var(--bg-2);
+    border-radius: var(--radius);
+    color: var(--text-2);
+}
+.icon-tile .ico { width: 24px; height: 24px; }
+/* Comparison marks: presence = blue, absence = muted (exception-color: x is not an error). */
+.ico-yes { color: var(--blue-bright); }
+.ico-no { color: var(--text-3); }
+
+/* --- Navigation --- */
+nav {
+    position: fixed;
+    top: 0; left: 0; right: 0;
+    padding: 20px 0;
+    background: rgba(10, 18, 32, 0.92);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--line);
+    z-index: 200;
+}
+nav .container { display: flex; justify-content: space-between; align-items: center; }
+.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
+.logo img { height: 40px; width: auto; }
+.logo-text { font-size: 1.5rem; font-weight: 700; color: var(--blue-bright); letter-spacing: -0.02em; }
+.nav-links { display: flex; gap: 32px; list-style: none; }
+.nav-links a {
+    color: var(--text-2);
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 0.95rem;
+    transition: color 0.2s ease;
+}
+.nav-links a:hover,
+.nav-links a.active { color: var(--blue-bright); }
+
+/* --- Two-tone heading (brand signature): accent span is solid blue-bright --- */
+h1 span, h2 span, h3 span, h4 span { color: var(--blue-bright); }
+
+/* --- Section headers / content sections --- */
+.section-header { text-align: center; margin-bottom: 56px; }
+.section-header h2 { font-size: 2.2rem; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em; }
+.section-header p { color: var(--text-2); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }
+.content-section { padding: 80px 0; }
+.content-section.alt-bg { background: var(--bg-1); }
+
+/* --- Page header (subpages) --- */
+.page-header { padding: 140px 0 60px; text-align: center; }
+.page-header h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin-bottom: 16px; letter-spacing: -0.02em; }
+.page-header p { font-size: 1.1rem; color: var(--text-2); max-width: 700px; margin: 0 auto; }
+
+/* --- Buttons --- */
+.cta-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--blue);
+    color: #fff;
+    padding: 15px 32px;
+    border: 1px solid var(--blue);
+    border-radius: var(--radius);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 1rem;
+    transition: background 0.2s ease, border-color 0.2s ease;
+}
+.cta-button:hover { background: var(--blue-bright); border-color: var(--blue-bright); }
+.cta-button-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: transparent;
+    color: var(--blue-bright);
+    padding: 14px 28px;
+    border: 1px solid var(--blue);
+    border-radius: var(--radius);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 1rem;
+    transition: background 0.2s ease;
+}
+.cta-button-secondary:hover { background: var(--blue-dim); }
+
+/* --- Panel/card --- */
+.card {
+    background: var(--bg-1);
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    padding: 32px;
+    transition: border-color 0.3s ease;
+}
+.card:hover { border-color: var(--blue); }
+
+/* --- CTA section (subpages) --- */
+.cta-section { padding: 80px 0; text-align: center; }
+.cta-section h2 { font-size: 2rem; font-weight: 700; margin-bottom: 16px; }
+.cta-section p { color: var(--text-2); font-size: 1.1rem; max-width: 600px; margin: 0 auto 32px; }
+
+/* --- Footer --- */
+footer {
+    padding: 40px 0;
+    border-top: 1px solid var(--line);
+    text-align: center;
+}
+footer p { color: var(--text-2); font-size: 0.9rem; }
+
+/* --- Hamburger & mobile menu --- */
+.hamburger {
+    display: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+    z-index: 200;
+    -webkit-tap-highlight-color: transparent;
+}
+.hamburger-box {
+    width: 28px;
+    height: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.hamburger-line {
+    display: block;
+    width: 100%;
+    height: 2px;
+    background: var(--text-1);
+    border-radius: var(--radius);
+    transition: transform 0.3s ease, opacity 0.3s ease;
+    transform-origin: center;
+}
+.hamburger.is-active .hamburger-line:nth-child(1) { transform: translateY(9px) rotate(45deg); }
+.hamburger.is-active .hamburger-line:nth-child(2) { opacity: 0; }
+.hamburger.is-active .hamburger-line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
+.mobile-overlay {
+    display: none;
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 140;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+.mobile-overlay.is-visible { opacity: 1; }
+
+@media (max-width: 900px) {
+    .hamburger { display: block; }
+    .nav-links {
+        display: flex;
+        flex-direction: column;
+        position: fixed;
+        top: 0;
+        right: -280px;
+        width: 280px;
+        height: 100vh;
+        height: 100dvh;
+        background: var(--bg-1);
+        border-left: 1px solid var(--line);
+        padding: 80px 32px 32px;
+        gap: 0;
+        z-index: 150;
+        transition: right 0.3s ease;
+        overflow-y: auto;
+    }
+    .nav-links.is-open { right: 0; }
+    .nav-links li { border-bottom: 1px solid var(--line-soft); }
+    .nav-links a { display: block; padding: 16px 0; font-size: 1.05rem; }
+    .mobile-overlay { display: block; pointer-events: none; }
+    .mobile-overlay.is-visible { pointer-events: auto; }
+    body.menu-open { overflow: hidden; }
+}
+
+@media (max-width: 600px) {
+    .section-header h2 { font-size: 1.8rem; }
+    .content-section { padding: 60px 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { animation: none !important; transition: none !important; }
+}
+
+
+/* ================= page: index ================= */
+.page-index .hero {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            padding: 120px 0 80px;
+        }
+.page-index .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
+.page-index .hero-text h1 {
+            font-size: clamp(2.5rem, 5vw, 3.5rem);
+            font-weight: 700;
+            line-height: 1.1;
+            margin-bottom: 24px;
+            letter-spacing: -0.03em;
+        }
+.page-index .hero-text p { font-size: 1.2rem; color: var(--text-2); margin-bottom: 32px; max-width: 500px; }
+.page-index .hero-visual { display: flex; justify-content: center; align-items: center; }
+.page-index .hero-visual img {
+            max-width: 380px;
+            width: 100%;
+            height: auto;
+            
+            animation: float 6s ease-in-out infinite;
+        }
+@keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-15px); }
+        }
+.page-index .beta-badge {
+            display: inline-block;
+            background: var(--blue-dim);
+            color: var(--blue-bright);
+            padding: 6px 12px;
+            border-radius: var(--radius);
+            font-size: 0.75rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            margin-bottom: 16px;
+        }
+.page-index .problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
+.page-index .problem-card {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 32px;
+            transition: border-color 0.3s ease, transform 0.3s ease;
+        }
+.page-index .problem-card:hover { border-color: var(--blue);  }
+.page-index .problem-icon { font-size: 2.5rem; margin-bottom: 20px; }
+.page-index .problem-card h3 { font-size: 1.2rem; margin-bottom: 12px; color: var(--text-1); }
+.page-index .problem-card p { color: var(--text-2); font-size: 0.95rem; }
+.page-index .service-list { display: grid; gap: 20px; }
+.page-index .service-item {
+            display: grid;
+            grid-template-columns: auto 1fr auto;
+            gap: 24px;
+            align-items: center;
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 28px 32px;
+            transition: border-color 0.3s ease;
+        }
+.page-index .service-item:hover { border-color: var(--blue); }
+.page-index .service-number {
+            font-family: var(--font-data);
+            font-size: 0.9rem;
+            color: var(--blue-bright);
+            background: var(--blue-dim);
+            padding: 8px 14px;
+            border-radius: var(--radius);
+            font-weight: 500;
+        }
+.page-index .service-content h3 { font-size: 1.15rem; margin-bottom: 6px; }
+.page-index .service-content p { color: var(--text-2); font-size: 0.95rem; }
+.page-index .service-icon { font-size: 1.8rem; }
+.page-index .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
+.page-index .why-card {
+            padding: 40px;
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            position: relative;
+            overflow: hidden;
+        }
+.page-index .why-card::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0;
+            width: 4px; height: 100%;
+            background: var(--blue);
+        }
+.page-index .why-card h3 { font-size: 1.3rem; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
+.page-index .why-card p { color: var(--text-2); font-size: 1rem; line-height: 1.7; }
+.page-index .apps-showcase {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+            gap: 20px;
+            margin-bottom: 48px;
+        }
+.page-index .app-category-preview {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 24px;
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+.page-index .app-category-preview:hover { border-color: var(--blue);  }
+.page-index .app-category-preview .cat-icon { font-size: 2rem; display: block; margin-bottom: 12px; }
+.page-index .app-category-preview h3 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; color: var(--text-1); }
+.page-index .app-category-preview p { font-size: 0.8rem; color: var(--text-2); line-height: 1.4; }
+.page-index .apps-cta { text-align: center; }
+.page-index .apps-cta .apps-count { font-size: 1.1rem; color: var(--text-2); margin-bottom: 24px; }
+.page-index .apps-cta .apps-count strong { color: var(--blue-bright); }
+.page-index .backup-content {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 60px;
+            align-items: center;
+        }
+.page-index .backup-text h2 {
+            font-size: 2.2rem;
+            font-weight: 700;
+            margin-bottom: 20px;
+            letter-spacing: -0.02em;
+        }
+.page-index .backup-text p {
+            color: var(--text-2);
+            font-size: 1.1rem;
+            line-height: 1.7;
+            margin-bottom: 24px;
+        }
+.page-index .backup-visual { display: flex; flex-direction: column; gap: 16px; }
+.page-index .backup-rule-mini {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 20px 24px;
+            transition: border-color 0.3s ease;
+        }
+.page-index .backup-rule-mini:hover { border-color: var(--blue); }
+.page-index .backup-rule-mini .number {
+            font-family: var(--font-data);
+            font-size: 2rem;
+            font-weight: 700;
+            min-width: 50px;
+         color: var(--blue-bright);}
+.page-index .backup-rule-mini .rule-text h4 { font-size: 1rem; margin-bottom: 4px; color: var(--text-1); }
+.page-index .backup-rule-mini .rule-text p { font-size: 0.85rem; color: var(--text-2); margin: 0; }
+.page-index .contact { padding: 100px 0; text-align: center; }
+.page-index .contact-box {
+            max-width: 600px;
+            margin: 0 auto;
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 48px;
+        }
+.page-index .contact-box h2 { font-size: 2rem; margin-bottom: 16px; }
+.page-index .contact-box p { color: var(--text-2); margin-bottom: 32px; }
+.page-index .contact-methods { display: flex; flex-direction: column; gap: 16px; }
+.page-index .contact-link {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+            padding: 16px 24px;
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            color: var(--text-1);
+            text-decoration: none;
+            font-weight: 500;
+            transition: border-color 0.2s ease, background 0.2s ease;
+        }
+.page-index .contact-link:hover { border-color: var(--blue); background: var(--blue-dim); }
+.page-index .process-steps {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 32px;
+            position: relative;
+        }
+.page-index .process-step {
+            text-align: center;
+            position: relative;
+        }
+.page-index .step-number {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--blue-dim);
+            border: 2px solid var(--blue);
+            font-family: var(--font-data);
+            font-size: 1.2rem;
+            font-weight: 700;
+            color: var(--blue-bright);
+            margin-bottom: 20px;
+        }
+.page-index .process-step h3 {
+            font-size: 1.1rem;
+            margin-bottom: 10px;
+            color: var(--text-1);
+        }
+.page-index .process-step p {
+            color: var(--text-2);
+            font-size: 0.9rem;
+            line-height: 1.6;
+        }
+.page-index .process-connector {
+            display: none;
+        }
+@media (min-width: 901px) {
+    .page-index .process-connector {
+                display: block;
+                position: absolute;
+                top: 28px;
+                right: -20px;
+                color: var(--blue);
+                font-size: 1.2rem;
+                z-index: 1;
+            }
+    .page-index .process-step:last-child .process-connector {
+                display: none;
+            }
+}
+@media (max-width: 900px) {
+    .page-index .hero-content { grid-template-columns: 1fr; text-align: center; }
+    .page-index .hero-text p { margin-left: auto; margin-right: auto; }
+    .page-index .hero-visual { order: -1; }
+    .page-index .hero-visual img { max-width: 280px; }
+    .page-index .why-grid { grid-template-columns: 1fr; }
+    .page-index .service-item { grid-template-columns: 1fr; text-align: center; gap: 16px; }
+    .page-index .backup-content { grid-template-columns: 1fr; gap: 40px; }
+    .page-index .backup-text { text-align: center; }
+}
+@media (max-width: 600px) {
+    .page-index .hero { padding: 100px 0 60px; }
+    .page-index .contact-box { padding: 32px 24px; }
+}
+@media (max-width: 900px) {
+    body.menu-open {
+                overflow: hidden;
+            }
+}
+
+
+/* ================= page: kapcsolat ================= */
+.page-kapcsolat .contact-layout {
+            display: grid;
+            grid-template-columns: 1fr 380px;
+            gap: 60px;
+            align-items: start;
+        }
+.page-kapcsolat .contact-form-card {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 40px;
+        }
+.page-kapcsolat .form-group {
+            margin-bottom: 24px;
+        }
+.page-kapcsolat .form-group label {
+            display: block;
+            font-size: 0.9rem;
+            font-weight: 600;
+            color: var(--text-1);
+            margin-bottom: 8px;
+        }
+.page-kapcsolat .form-group label .required {
+            color: var(--blue-bright);
+            margin-left: 2px;
+        }
+.page-kapcsolat .form-group input, .page-kapcsolat .form-group select, .page-kapcsolat .form-group textarea {
+            width: 100%;
+            padding: 14px 16px;
+            background: var(--bg-0);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            color: var(--text-1);
+            font-family: inherit;
+            font-size: 0.95rem;
+            transition: border-color 0.2s ease;
+            outline: none;
+        }
+.page-kapcsolat .form-group input:focus, .page-kapcsolat .form-group select:focus, .page-kapcsolat .form-group textarea:focus {
+            border-color: var(--blue);
+            
+        }
+.page-kapcsolat .form-group input::placeholder, .page-kapcsolat .form-group textarea::placeholder {
+            color: var(--text-3);
+        }
+.page-kapcsolat .form-group input.error, .page-kapcsolat .form-group select.error, .page-kapcsolat .form-group textarea.error {
+            border-color: var(--crit);
+            
+        }
+.page-kapcsolat .form-group .error-message {
+            color: var(--crit);
+            font-size: 0.8rem;
+            margin-top: 6px;
+            display: none;
+        }
+.page-kapcsolat .form-group .error-message.visible {
+            display: block;
+        }
+.page-kapcsolat .form-group select {
+            appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 16px center;
+            padding-right: 40px;
+            cursor: pointer;
+        }
+.page-kapcsolat .form-group select option {
+            background: var(--bg-0);
+            color: var(--text-1);
+        }
+.page-kapcsolat .form-group textarea {
+            resize: vertical;
+            min-height: 140px;
+        }
+.page-kapcsolat .form-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+        }
+.page-kapcsolat .file-upload-zone {
+            border: 2px dashed var(--line);
+            border-radius: var(--radius);
+            padding: 32px 24px;
+            text-align: center;
+            cursor: pointer;
+            transition: border-color 0.2s ease, background 0.2s ease;
+            position: relative;
+        }
+.page-kapcsolat .file-upload-zone:hover, .page-kapcsolat .file-upload-zone.dragover {
+            border-color: var(--blue);
+            background: var(--blue-dim);
+        }
+.page-kapcsolat .file-upload-zone input[type="file"] {
+            position: absolute;
+            inset: 0;
+            opacity: 0;
+            cursor: pointer;
+        }
+.page-kapcsolat .upload-icon {
+            font-size: 2rem;
+            margin-bottom: 12px;
+        }
+.page-kapcsolat .upload-text {
+            color: var(--text-2);
+            font-size: 0.9rem;
+            line-height: 1.6;
+        }
+.page-kapcsolat .upload-text strong {
+            color: var(--blue-bright);
+        }
+.page-kapcsolat .upload-hint {
+            color: var(--text-3);
+            font-size: 0.8rem;
+            margin-top: 8px;
+        }
+.page-kapcsolat .file-list {
+            margin-top: 16px;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+.page-kapcsolat .file-item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            background: var(--bg-0);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 10px 14px;
+            font-size: 0.85rem;
+        }
+.page-kapcsolat .file-item .file-icon {
+            font-size: 1.2rem;
+            flex-shrink: 0;
+        }
+.page-kapcsolat .file-item .file-info {
+            flex: 1;
+            min-width: 0;
+        }
+.page-kapcsolat .file-item .file-name {
+            color: var(--text-1);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+.page-kapcsolat .file-item .file-size {
+            color: var(--text-3);
+            font-size: 0.75rem;
+        }
+.page-kapcsolat .file-item .file-remove {
+            background: none;
+            border: none;
+            color: var(--text-3);
+            cursor: pointer;
+            font-size: 1.1rem;
+            padding: 4px;
+            border-radius: var(--radius);
+            transition: color 0.2s ease, background 0.2s ease;
+            flex-shrink: 0;
+        }
+.page-kapcsolat .file-item .file-remove:hover {
+            color: var(--crit);
+            background: var(--crit-dim);
+        }
+.page-kapcsolat .file-total-size {
+            font-size: 0.8rem;
+            color: var(--text-3);
+            margin-top: 8px;
+            text-align: right;
+        }
+.page-kapcsolat .file-total-size.warning {
+            color: var(--warn);
+        }
+.page-kapcsolat .file-total-size.error-text {
+            color: var(--crit);
+        }
+.page-kapcsolat .submit-button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            width: 100%;
+            background: var(--blue);
+            color: white;
+            padding: 16px 32px;
+            border: none;
+            border-radius: var(--radius);
+            font-family: inherit;
+            font-weight: 600;
+            font-size: 1.05rem;
+            cursor: pointer;
+            transition: transform 0.2s ease, opacity 0.2s ease;
+            
+        }
+.page-kapcsolat .submit-button:hover:not(:disabled) {
+            
+            
+        }
+.page-kapcsolat .submit-button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+.page-kapcsolat .submit-button .spinner {
+            display: none;
+            width: 18px;
+            height: 18px;
+            border: 2px solid rgba(255,255,255,0.3);
+            border-top-color: white;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+.page-kapcsolat .submit-button.loading .spinner { display: block; }
+.page-kapcsolat .submit-button.loading .btn-text { display: none; }
+@keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+.page-kapcsolat .form-status {
+            display: none;
+            padding: 16px 20px;
+            border-radius: var(--radius);
+            font-size: 0.9rem;
+            margin-bottom: 24px;
+            line-height: 1.5;
+        }
+.page-kapcsolat .form-status.success {
+            display: block;
+            background: var(--blue-dim);
+            border: 1px solid var(--blue);
+            color: var(--blue);
+        }
+.page-kapcsolat .form-status.error-state {
+            display: block;
+            background: var(--crit-dim);
+            border: 1px solid var(--crit);
+            color: var(--crit);
+        }
+.page-kapcsolat .contact-sidebar {
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+            position: sticky;
+            top: 120px;
+        }
+.page-kapcsolat .sidebar-card {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 28px;
+        }
+.page-kapcsolat .sidebar-card h3 {
+            font-size: 1.1rem;
+            font-weight: 600;
+            margin-bottom: 16px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+.page-kapcsolat .sidebar-card h3 .icon {
+            font-size: 1.3rem;
+        }
+.page-kapcsolat .sidebar-card p {
+            color: var(--text-2);
+            font-size: 0.9rem;
+            line-height: 1.7;
+            margin-bottom: 12px;
+        }
+.page-kapcsolat .sidebar-card p:last-child {
+            margin-bottom: 0;
+        }
+.page-kapcsolat .sidebar-card a {
+            color: var(--blue-bright);
+            text-decoration: none;
+            font-weight: 500;
+            transition: color 0.2s ease;
+        }
+.page-kapcsolat .sidebar-card a:hover {
+            color: var(--text-1);
+        }
+.page-kapcsolat .sidebar-list {
+            list-style: none;
+            margin: 0;
+        }
+.page-kapcsolat .sidebar-list li {
+            display: flex;
+            align-items: flex-start;
+            gap: 10px;
+            padding: 8px 0;
+            color: var(--text-2);
+            font-size: 0.9rem;
+            line-height: 1.5;
+        }
+.page-kapcsolat .sidebar-list li .li-icon {
+            flex-shrink: 0;
+            margin-top: 2px;
+        }
+.page-kapcsolat .direct-email {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 14px 18px;
+            background: var(--bg-0);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            color: var(--text-1);
+            text-decoration: none;
+            font-weight: 500;
+            font-size: 0.9rem;
+            transition: border-color 0.2s ease, background 0.2s ease;
+        }
+.page-kapcsolat .direct-email:hover {
+            border-color: var(--blue);
+            background: var(--blue-dim);
+        }
+.page-kapcsolat .checkbox-group {
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
+            margin-bottom: 24px;
+        }
+.page-kapcsolat .checkbox-group input[type="checkbox"] {
+            width: 18px;
+            height: 18px;
+            margin-top: 2px;
+            accent-color: var(--blue);
+            flex-shrink: 0;
+            cursor: pointer;
+        }
+.page-kapcsolat .checkbox-group label {
+            font-size: 0.85rem;
+            color: var(--text-2);
+            line-height: 1.5;
+            cursor: pointer;
+        }
+.page-kapcsolat .checkbox-group label a {
+            color: var(--blue-bright);
+            text-decoration: none;
+        }
+.page-kapcsolat .checkbox-group label a:hover {
+            text-decoration: underline;
+        }
+@media (max-width: 900px) {
+    .page-kapcsolat .contact-layout {
+                grid-template-columns: 1fr;
+                gap: 40px;
+            }
+    .page-kapcsolat .contact-sidebar {
+                position: static;
+                order: -1;
+            }
+}
+@media (max-width: 600px) {
+    .page-kapcsolat .contact-form-card { padding: 24px; }
+    .page-kapcsolat .form-row { grid-template-columns: 1fr; gap: 0; }
+    .page-kapcsolat .sidebar-card { padding: 20px; }
+}
+@media (max-width: 900px) {
+    body.menu-open {
+                overflow: hidden;
+            }
+}
+
+
+/* ================= page: alkalmazasok ================= */
+.page-alkalmazasok .disclaimer-banner {
+            background: var(--blue-dim);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 24px 32px;
+            margin: 0 auto 48px;
+            max-width: 760px;
+            text-align: left;
+        }
+.page-alkalmazasok .disclaimer-banner h3 { font-size: 1rem; color: var(--blue-bright); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
+.page-alkalmazasok .disclaimer-banner ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
+.page-alkalmazasok .disclaimer-banner li { color: var(--text-2); font-size: 0.9rem; position: relative; padding-left: 24px; line-height: 1.5; }
+.page-alkalmazasok .disclaimer-banner li::before { content: '✓'; color: var(--blue); font-weight: bold; position: absolute; left: 0; top: 0; }
+.page-alkalmazasok .disclaimer-banner li strong { color: var(--text-1); }
+.page-alkalmazasok .disclaimer-banner a { color: var(--blue-bright); }
+.page-alkalmazasok .category-section { margin-bottom: 64px; }
+.page-alkalmazasok .category-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
+.page-alkalmazasok .category-icon { font-size: 1.8rem; }
+.page-alkalmazasok .category-header h2 { font-size: 1.5rem; font-weight: 600; color: var(--text-1); }
+.page-alkalmazasok .category-header .app-count { background: var(--bg-1); color: var(--text-2); padding: 4px 12px; border-radius: var(--radius); font-size: 0.8rem; font-weight: 500; }
+.page-alkalmazasok .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
+.page-alkalmazasok .app-card {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            overflow: hidden;
+            transition: all 0.3s ease;
+            display: flex;
+            flex-direction: column;
+        }
+.page-alkalmazasok .app-card:hover { border-color: var(--blue);   }
+.page-alkalmazasok .app-card-header { display: flex; align-items: center; gap: 16px; padding: 20px; border-bottom: 1px solid var(--line); }
+.page-alkalmazasok .app-logo { width: 48px; height: 48px; border-radius: var(--radius); object-fit: contain; background: var(--bg-1); padding: 6px; flex-shrink: 0; }
+.page-alkalmazasok .app-title-area h3 { font-size: 1.1rem; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
+.page-alkalmazasok .app-title-area .app-tagline { font-size: 0.8rem; color: var(--text-3); }
+.page-alkalmazasok .app-card-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
+.page-alkalmazasok .app-description { color: var(--text-2); font-size: 0.9rem; line-height: 1.6; margin-bottom: 16px; flex-grow: 1; }
+.page-alkalmazasok .app-features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
+.page-alkalmazasok .app-feature { background: var(--blue-dim); color: var(--blue-bright); padding: 4px 10px; border-radius: var(--radius); font-size: 0.75rem; font-weight: 500; }
+.page-alkalmazasok .app-screenshot { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-1); cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease; }
+.page-alkalmazasok .app-screenshot:hover { opacity: 0.9; transform: scale(1.02); }
+.page-alkalmazasok .lightbox-overlay {
+            display: none;
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: rgba(0, 0, 0, 0.95);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            padding: 20px;
+        }
+.page-alkalmazasok .lightbox-overlay.active { display: flex; }
+.page-alkalmazasok .lightbox-close {
+            position: absolute;
+            top: 20px; right: 24px;
+            background: none;
+            border: none;
+            color: var(--text-2);
+            font-size: 2rem;
+            cursor: pointer;
+            padding: 8px;
+            line-height: 1;
+            transition: color 0.2s ease;
+            z-index: 1002;
+        }
+.page-alkalmazasok .lightbox-close:hover { color: var(--text-1); }
+.page-alkalmazasok .lightbox-content {
+            position: relative;
+            max-width: 90vw;
+            max-height: 80vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+.page-alkalmazasok .lightbox-image {
+            max-width: 100%;
+            max-height: 80vh;
+            object-fit: contain;
+            border-radius: var(--radius);
+            
+        }
+.page-alkalmazasok .lightbox-nav {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            color: var(--text-1);
+            font-size: 1.5rem;
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            cursor: pointer;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: all 0.2s ease;
+            z-index: 1001;
+        }
+.page-alkalmazasok .lightbox-nav:hover { background: var(--blue); border-color: var(--blue); }
+.page-alkalmazasok .lightbox-nav:disabled { opacity: 0.3; cursor: not-allowed; }
+.page-alkalmazasok .lightbox-nav:disabled:hover { background: var(--bg-1); border-color: var(--line); }
+.page-alkalmazasok .lightbox-prev { left: -60px; }
+.page-alkalmazasok .lightbox-next { right: -60px; }
+.page-alkalmazasok .lightbox-counter {
+            margin-top: 16px;
+            color: var(--text-2);
+            font-size: 0.9rem;
+            text-align: center;
+        }
+.page-alkalmazasok .lightbox-dots {
+            display: flex;
+            gap: 8px;
+            margin-top: 12px;
+            justify-content: center;
+        }
+.page-alkalmazasok .lightbox-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: var(--line);
+            border: none;
+            cursor: pointer;
+            transition: background 0.2s ease;
+        }
+.page-alkalmazasok .lightbox-dot:hover { background: var(--text-3); }
+.page-alkalmazasok .lightbox-dot.active { background: var(--blue-bright); }
+@media (max-width: 768px) {
+    .page-alkalmazasok .lightbox-nav {
+                width: 40px;
+                height: 40px;
+                font-size: 1.2rem;
+            }
+    .page-alkalmazasok .lightbox-prev { left: 10px; }
+    .page-alkalmazasok .lightbox-next { right: 10px; }
+    .page-alkalmazasok .lightbox-content {
+                max-width: 95vw;
+            }
+}
+.page-alkalmazasok .app-card-footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px 20px;
+            border-top: 1px solid var(--line);
+            background: var(--bg-1);
+        }
+.page-alkalmazasok .github-link {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: var(--text-2);
+            text-decoration: none;
+            font-size: 0.85rem;
+            font-weight: 500;
+            transition: color 0.2s ease;
+        }
+.page-alkalmazasok .github-link:hover { color: var(--blue-bright); }
+.page-alkalmazasok .github-link img { width: 18px; height: 18px; opacity: 0.7; }
+.page-alkalmazasok .open-source-badge {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            color: var(--blue);
+            font-size: 0.8rem;
+            font-weight: 500;
+        }
+.page-alkalmazasok .open-source-badge img { width: 14px; height: 14px; }
+.page-alkalmazasok .stats-section {
+            padding: 60px 0;
+            background: var(--bg-1);
+            border-top: 1px solid var(--line);
+            border-bottom: 1px solid var(--line);
+        }
+.page-alkalmazasok .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 32px;
+            text-align: center;
+        }
+.page-alkalmazasok .stat-item h3 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 8px;
+         color: var(--blue-bright);}
+.page-alkalmazasok .stat-item p { color: var(--text-2); font-size: 0.95rem; }
+@media (max-width: 768px) {
+    .page-alkalmazasok .disclaimer-banner { padding: 20px; }
+    .page-alkalmazasok .app-grid { grid-template-columns: 1fr; }
+}
+@media (max-width: 900px) {
+    body.menu-open {
+                overflow: hidden;
+            }
+}
+
+
+/* ================= page: technologiak ================= */
+.page-technologiak .toc-nav {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 24px 32px;
+            margin-bottom: 48px;
+        }
+.page-technologiak .toc-nav h3 {
+            font-size: 0.85rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--text-3);
+            margin-bottom: 16px;
+        }
+.page-technologiak .toc-links {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px 24px;
+            list-style: none;
+        }
+.page-technologiak .toc-links a {
+            color: var(--blue-bright);
+            text-decoration: none;
+            font-size: 0.95rem;
+            font-weight: 500;
+            transition: color 0.2s ease;
+        }
+.page-technologiak .toc-links a:hover { color: var(--text-1); }
+.page-technologiak .info-card {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 40px;
+            margin-bottom: 32px;
+        }
+.page-technologiak .info-card:last-child { margin-bottom: 0; }
+.page-technologiak .info-card h3 { 
+            font-size: 1.4rem; 
+            margin-bottom: 20px; 
+            color: var(--text-1);
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+.page-technologiak .info-card h3 .icon { font-size: 1.6rem; }
+.page-technologiak .info-card p { 
+            color: var(--text-2); 
+            font-size: 1rem; 
+            line-height: 1.8; 
+            margin-bottom: 16px; 
+        }
+.page-technologiak .info-card p:last-child { margin-bottom: 0; }
+.page-technologiak .highlight-box {
+            background: var(--blue-dim);
+            border: 1px solid var(--blue);
+            border-radius: var(--radius);
+            padding: 20px 24px;
+            margin: 20px 0;
+        }
+.page-technologiak .highlight-box p { color: var(--text-1); margin: 0; }
+.page-technologiak .highlight-box strong { color: var(--blue-bright); }
+.page-technologiak .warning-box {
+            background: var(--bg-1);
+            border: 1px solid var(--warn);
+            border-radius: var(--radius);
+            padding: 20px 24px;
+            margin: 20px 0;
+        }
+.page-technologiak .warning-box p { color: var(--text-1); margin: 0; }
+.page-technologiak .feature-list {
+            list-style: none;
+            margin: 20px 0;
+        }
+.page-technologiak .feature-list li {
+            color: var(--text-2);
+            font-size: 0.95rem;
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
+            margin-bottom: 12px;
+            line-height: 1.6;
+        }
+.page-technologiak .feature-list li::before {
+            content: '✓';
+            color: var(--blue);
+            font-weight: bold;
+            flex-shrink: 0;
+            margin-top: 2px;
+        }
+.page-technologiak .feature-list.cons li::before {
+            content: '✗';
+            color: var(--warn);
+        }
+.page-technologiak .comparison-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 24px;
+            margin-top: 32px;
+        }
+.page-technologiak .comparison-card {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 32px;
+            transition: border-color 0.3s ease, transform 0.3s ease;
+            position: relative;
+        }
+.page-technologiak .comparison-card:hover { 
+            border-color: var(--blue); 
+             
+        }
+.page-technologiak .comparison-card.recommended {
+            border-color: var(--blue-bright);
+        }
+.page-technologiak .comparison-card.recommended::before {
+            content: '★ Ajánlott';
+            position: absolute;
+            top: -12px;
+            left: 24px;
+            background: var(--blue);
+            color: white;
+            padding: 4px 12px;
+            border-radius: var(--radius);
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+.page-technologiak .comparison-card .card-icon { font-size: 2.5rem; margin-bottom: 16px; }
+.page-technologiak .comparison-card h3 { font-size: 1.3rem; margin-bottom: 8px; color: var(--text-1); }
+.page-technologiak .comparison-card .subtitle { font-size: 0.9rem; color: var(--blue-bright); margin-bottom: 16px; }
+.page-technologiak .comparison-card p { color: var(--text-2); font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px; }
+.page-technologiak .use-case-tag {
+            display: inline-block;
+            background: var(--blue-dim);
+            color: var(--blue-bright);
+            padding: 4px 10px;
+            border-radius: var(--radius);
+            font-size: 0.8rem;
+            font-weight: 500;
+            margin-right: 8px;
+            margin-bottom: 8px;
+        }
+.page-technologiak .hardware-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 24px;
+        }
+.page-technologiak .hardware-card {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            overflow: hidden;
+            transition: border-color 0.3s ease, transform 0.3s ease;
+        }
+.page-technologiak .hardware-card:hover { border-color: var(--blue);  }
+.page-technologiak .hardware-card-header {
+            background: var(--blue-dim);
+            padding: 24px;
+            border-bottom: 1px solid var(--line);
+            text-align: center;
+        }
+.page-technologiak .hardware-card-header .hw-icon { font-size: 3rem; margin-bottom: 12px; }
+.page-technologiak .hardware-card-header h3 { font-size: 1.2rem; margin-bottom: 4px; }
+.page-technologiak .hardware-card-header .hw-subtitle { font-size: 0.85rem; color: var(--text-3); }
+.page-technologiak .hardware-card-body { padding: 24px; }
+.page-technologiak .hardware-card-body p { color: var(--text-2); font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px; }
+.page-technologiak .spec-list { list-style: none; margin: 16px 0; }
+.page-technologiak .spec-list li {
+            display: flex;
+            justify-content: space-between;
+            padding: 8px 0;
+            border-bottom: 1px solid var(--line);
+            font-size: 0.9rem;
+        }
+.page-technologiak .spec-list li:last-child { border-bottom: none; }
+.page-technologiak .spec-list .spec-label { color: var(--text-3); }
+.page-technologiak .spec-list .spec-value { color: var(--text-1); font-weight: 500; }
+.page-technologiak .price-range {
+            text-align: center;
+            margin-top: 16px;
+            padding-top: 16px;
+            border-top: 1px solid var(--line);
+        }
+.page-technologiak .price-range .label { font-size: 0.8rem; color: var(--text-3); margin-bottom: 4px; }
+.page-technologiak .price-range .price { font-size: 1.3rem; font-weight: 700; color: var(--blue-bright); }
+.page-technologiak .stack-diagram {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 40px;
+            margin: 32px 0;
+        }
+.page-technologiak .stack-diagram h3 { text-align: center; font-size: 1.2rem; margin-bottom: 32px; color: var(--text-2); }
+.page-technologiak .stack-layers {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            max-width: 600px;
+            margin: 0 auto;
+        }
+.page-technologiak .stack-layer { display: flex; align-items: center; gap: 16px; }
+.page-technologiak .layer-label { width: 120px; font-size: 0.8rem; color: var(--text-3); text-align: right; flex-shrink: 0; }
+.page-technologiak .layer-content {
+            flex: 1;
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 16px 20px;
+            text-align: center;
+            font-weight: 500;
+            transition: all 0.3s ease;
+        }
+.page-technologiak .layer-content:hover { border-color: var(--blue); transform: scale(1.02); }
+.page-technologiak .layer-content.highlight { background: var(--blue-dim); border-color: var(--blue); }
+.page-technologiak .layer-content .layer-name { font-size: 1rem; color: var(--text-1); margin-bottom: 4px; }
+.page-technologiak .layer-content .layer-tech { font-size: 0.8rem; color: var(--text-3); }
+.page-technologiak .network-flow {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 16px;
+            flex-wrap: wrap;
+            margin: 24px 0;
+        }
+.page-technologiak .flow-node {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 16px 24px;
+            text-align: center;
+            min-width: 120px;
+        }
+.page-technologiak .flow-node .node-icon { font-size: 1.5rem; margin-bottom: 8px; }
+.page-technologiak .flow-node .node-label { font-size: 0.85rem; color: var(--text-1); font-weight: 500; }
+.page-technologiak .flow-node .node-tech { font-size: 0.75rem; color: var(--text-3); }
+.page-technologiak .flow-arrow { font-size: 1.2rem; color: var(--blue); }
+@media (max-width: 900px) {
+    .page-technologiak .toc-links { flex-direction: column; gap: 8px; }
+    .page-technologiak .layer-label { width: 80px; font-size: 0.7rem; }
+    .page-technologiak .network-flow { flex-direction: column; }
+    .page-technologiak .flow-arrow { transform: rotate(90deg); }
+}
+@media (max-width: 600px) {
+    .page-technologiak .info-card { padding: 24px; }
+}
+@media (max-width: 900px) {
+    body.menu-open {
+                overflow: hidden;
+            }
+}
+
+
+/* ================= page: biztonsagimentes ================= */
+.page-biztonsagimentes .info-card {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 40px;
+            margin-bottom: 32px;
+        }
+.page-biztonsagimentes .info-card:last-child { margin-bottom: 0; }
+.page-biztonsagimentes .info-card h3 { 
+            font-size: 1.4rem; 
+            margin-bottom: 20px; 
+            color: var(--text-1);
+        }
+.page-biztonsagimentes .info-card p { 
+            color: var(--text-2); 
+            font-size: 1rem; 
+            line-height: 1.8; 
+            margin-bottom: 16px; 
+        }
+.page-biztonsagimentes .info-card p:last-child { margin-bottom: 0; }
+.page-biztonsagimentes .highlight-box {
+            background: var(--blue-dim);
+            border: 1px solid var(--blue);
+            border-radius: var(--radius);
+            padding: 20px 24px;
+            margin: 20px 0;
+        }
+.page-biztonsagimentes .highlight-box p { color: var(--text-1); margin: 0; }
+.page-biztonsagimentes .highlight-box strong { color: var(--blue-bright); }
+.page-biztonsagimentes .backup-rule {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            gap: 32px;
+            align-items: start;
+            margin-bottom: 40px;
+        }
+.page-biztonsagimentes .backup-rule:last-child { margin-bottom: 0; }
+.page-biztonsagimentes .rule-number {
+            font-family: var(--font-data);
+            font-size: 3rem;
+            font-weight: 700;
+            line-height: 1;
+            min-width: 80px;
+            text-align: center;
+         color: var(--blue-bright);}
+.page-biztonsagimentes .rule-content h3 { font-size: 1.3rem; margin-bottom: 12px; color: var(--text-1); }
+.page-biztonsagimentes .rule-content p { color: var(--text-2); font-size: 1rem; line-height: 1.7; margin-bottom: 12px; }
+.page-biztonsagimentes .rule-content p:last-child { margin-bottom: 0; }
+.page-biztonsagimentes .example-box {
+            background: var(--bg-0);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 16px 20px;
+            margin-top: 16px;
+        }
+.page-biztonsagimentes .example-box .label {
+            font-size: 0.75rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--blue-bright);
+            margin-bottom: 8px;
+        }
+.page-biztonsagimentes .example-box p { margin: 0; font-size: 0.95rem; }
+.page-biztonsagimentes .methods-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 24px;
+        }
+.page-biztonsagimentes .method-card {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 32px;
+            transition: border-color 0.3s ease, transform 0.3s ease;
+        }
+.page-biztonsagimentes .method-card:hover { border-color: var(--blue);  }
+.page-biztonsagimentes .method-icon { font-size: 2.5rem; margin-bottom: 20px; }
+.page-biztonsagimentes .method-card h3 { font-size: 1.2rem; margin-bottom: 12px; color: var(--text-1); }
+.page-biztonsagimentes .method-card p { color: var(--text-2); font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px; }
+.page-biztonsagimentes .method-pros { list-style: none; margin: 16px 0; }
+.page-biztonsagimentes .method-pros li {
+            color: var(--text-2);
+            font-size: 0.9rem;
+            display: flex;
+            align-items: flex-start;
+            gap: 8px;
+            margin-bottom: 8px;
+        }
+.page-biztonsagimentes .method-pros li::before {
+            content: '✓';
+            color: var(--blue);
+            font-weight: bold;
+            flex-shrink: 0;
+        }
+.page-biztonsagimentes .method-cons li::before {
+            content: '⚠';
+            color: var(--warn);
+        }
+.page-biztonsagimentes .backup-diagram {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 40px;
+            text-align: center;
+            margin: 48px 0;
+        }
+.page-biztonsagimentes .backup-diagram h3 { font-size: 1.2rem; margin-bottom: 32px; color: var(--text-2); }
+.page-biztonsagimentes .diagram-visual {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 24px;
+            flex-wrap: wrap;
+        }
+.page-biztonsagimentes .diagram-node {
+            background: var(--bg-1);
+            border: 2px solid var(--line);
+            border-radius: var(--radius);
+            padding: 20px 28px;
+            text-align: center;
+            min-width: 140px;
+            transition: all 0.3s ease;
+        }
+.page-biztonsagimentes .diagram-node:hover { border-color: var(--blue); transform: scale(1.05); }
+.page-biztonsagimentes .diagram-node.primary { border-color: var(--blue-bright); background: var(--blue-dim); }
+.page-biztonsagimentes .diagram-node .icon { font-size: 2rem; margin-bottom: 8px; }
+.page-biztonsagimentes .diagram-node .label { font-size: 0.9rem; font-weight: 600; color: var(--text-1); }
+.page-biztonsagimentes .diagram-node .sublabel { font-size: 0.75rem; color: var(--text-3); margin-top: 4px; }
+.page-biztonsagimentes .diagram-arrow { font-size: 1.5rem; color: var(--blue); }
+@media (max-width: 900px) {
+    .page-biztonsagimentes .backup-rule { grid-template-columns: 1fr; gap: 16px; text-align: center; }
+    .page-biztonsagimentes .rule-number { font-size: 2.5rem; }
+    .page-biztonsagimentes .diagram-visual { flex-direction: column; }
+    .page-biztonsagimentes .diagram-arrow { transform: rotate(90deg); }
+}
+@media (max-width: 600px) {
+    .page-biztonsagimentes .info-card { padding: 24px; }
+}
+@media (max-width: 900px) {
+    body.menu-open {
+                overflow: hidden;
+            }
+}
+
+
+/* ================= page: gyik ================= */
+.page-gyik .faq-toc {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 24px 32px;
+            margin-bottom: 60px;
+        }
+.page-gyik .faq-toc h3 {
+            font-size: 0.85rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--text-3);
+            margin-bottom: 16px;
+        }
+.page-gyik .faq-toc-links {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+            list-style: none;
+        }
+.page-gyik .faq-toc-links a {
+            display: inline-block;
+            padding: 8px 16px;
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            color: var(--text-2);
+            text-decoration: none;
+            font-size: 0.9rem;
+            font-weight: 500;
+            transition: all 0.2s ease;
+        }
+.page-gyik .faq-toc-links a:hover {
+            border-color: var(--blue);
+            color: var(--blue-bright);
+            background: var(--blue-dim);
+        }
+.page-gyik .faq-category {
+            margin-bottom: 64px;
+        }
+.page-gyik .faq-category-header {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            margin-bottom: 24px;
+            padding-bottom: 16px;
+            border-bottom: 1px solid var(--line);
+        }
+.page-gyik .faq-category-icon {
+            font-size: 1.8rem;
+        }
+.page-gyik .faq-category-header h2 {
+            font-size: 1.6rem;
+            font-weight: 700;
+            letter-spacing: -0.02em;
+        }
+.page-gyik .faq-item {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            margin-bottom: 12px;
+            overflow: hidden;
+            transition: border-color 0.3s ease;
+        }
+.page-gyik .faq-item:hover {
+            border-color: rgba(0,131,216,0.4);
+        }
+.page-gyik .faq-question {
+            width: 100%;
+            background: none;
+            border: none;
+            color: var(--text-1);
+            font-family: inherit;
+            font-size: 1rem;
+            font-weight: 600;
+            text-align: left;
+            padding: 20px 24px;
+            cursor: pointer;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 16px;
+            transition: background 0.2s ease;
+        }
+.page-gyik .faq-question:hover {
+            background: var(--blue-dim);
+        }
+.page-gyik .faq-chevron {
+            flex-shrink: 0;
+            width: 20px;
+            height: 20px;
+            color: var(--blue-bright);
+            transition: transform 0.3s ease;
+        }
+.page-gyik .faq-item.open .faq-chevron {
+            transform: rotate(180deg);
+        }
+.page-gyik .faq-answer {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.4s ease, padding 0.3s ease;
+        }
+.page-gyik .faq-item.open .faq-answer {
+            max-height: 600px;
+        }
+.page-gyik .faq-answer-inner {
+            padding: 0 24px 20px;
+            color: var(--text-2);
+            font-size: 0.95rem;
+            line-height: 1.7;
+        }
+.page-gyik .faq-answer-inner p {
+            margin-bottom: 12px;
+        }
+.page-gyik .faq-answer-inner p:last-child {
+            margin-bottom: 0;
+        }
+.page-gyik .faq-answer-inner strong {
+            color: var(--text-1);
+        }
+.page-gyik .faq-answer-inner a {
+            color: var(--blue-bright);
+            text-decoration: none;
+        }
+.page-gyik .faq-answer-inner a:hover {
+            text-decoration: underline;
+        }
+@media (max-width: 900px) {
+    .page-gyik .faq-toc-links { flex-direction: column; gap: 8px; }
+}
+@media (max-width: 600px) {
+    .page-gyik .faq-question { padding: 16px 20px; font-size: 0.95rem; }
+    .page-gyik .faq-answer-inner { padding: 0 20px 16px; }
+}
+@media (max-width: 900px) {
+    body.menu-open {
+                overflow: hidden;
+            }
+}
+
+
+/* ================= page: szolgaltatasok ================= */
+.page-szolgaltatasok .draft-banner {
+            background: var(--bg-1);
+            border: 1px solid var(--warn);
+            border-radius: var(--radius);
+            padding: 20px 28px;
+            margin-bottom: 48px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            max-width: 700px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+.page-szolgaltatasok .draft-banner .draft-icon { font-size: 1.5rem; flex-shrink: 0; }
+.page-szolgaltatasok .draft-banner p { color: var(--text-2); font-size: 0.9rem; line-height: 1.5; }
+.page-szolgaltatasok .draft-banner strong { color: var(--warn); }
+.page-szolgaltatasok .pricing-note {
+            background: var(--blue-dim);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 24px 32px;
+            margin-bottom: 48px;
+            max-width: 800px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+.page-szolgaltatasok .pricing-note p { color: var(--text-2); font-size: 0.95rem; line-height: 1.6; }
+.page-szolgaltatasok .pricing-note strong { color: var(--text-1); }
+.page-szolgaltatasok .service-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+            gap: 24px;
+            margin-bottom: 16px;
+        }
+.page-szolgaltatasok .service-card {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 28px;
+            transition: border-color 0.3s ease, transform 0.3s ease;
+            display: flex;
+            flex-direction: column;
+        }
+.page-szolgaltatasok .service-card:hover { border-color: var(--blue);  }
+.page-szolgaltatasok .service-card-header {
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            margin-bottom: 16px;
+        }
+.page-szolgaltatasok .service-card-icon {
+            font-size: 2rem;
+            line-height: 1;
+            flex-shrink: 0;
+        }
+.page-szolgaltatasok .service-card-badge {
+            font-size: 0.7rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            padding: 4px 10px;
+            border-radius: var(--radius);
+            flex-shrink: 0;
+        }
+.page-szolgaltatasok .badge-onetime {
+            background: var(--blue-dim);
+            color: var(--blue);
+            border: 1px solid var(--blue-dim);
+        }
+.page-szolgaltatasok .badge-monthly {
+            background: var(--blue-dim);
+            color: var(--blue-bright);
+            border: 1px solid rgba(0,131,216,0.3);
+        }
+.page-szolgaltatasok .badge-ondemand {
+            background: var(--warn-dim);
+            color: var(--warn);
+            border: 1px solid var(--warn-dim);
+        }
+.page-szolgaltatasok .badge-free {
+            background: var(--blue-dim);
+            color: var(--blue);
+            border: 1px solid var(--blue-dim);
+        }
+.page-szolgaltatasok .service-card h3 {
+            font-size: 1.15rem;
+            font-weight: 600;
+            margin-bottom: 10px;
+            color: var(--text-1);
+        }
+.page-szolgaltatasok .service-card .description {
+            color: var(--text-2);
+            font-size: 0.9rem;
+            line-height: 1.6;
+            flex-grow: 1;
+            margin-bottom: 16px;
+        }
+.page-szolgaltatasok .service-card .includes {
+            list-style: none;
+            margin-bottom: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+.page-szolgaltatasok .service-card .includes li {
+            color: var(--text-2);
+            font-size: 0.85rem;
+            display: flex;
+            align-items: flex-start;
+            gap: 8px;
+            line-height: 1.4;
+        }
+.page-szolgaltatasok .service-card .includes li::before {
+            content: '✓';
+            color: var(--blue);
+            font-weight: bold;
+            flex-shrink: 0;
+            margin-top: 1px;
+        }
+.page-szolgaltatasok .service-card .price-box {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 14px 18px;
+            margin-top: auto;
+        }
+.page-szolgaltatasok .price-box .price-label {
+            font-size: 0.75rem;
+            color: var(--text-3);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            margin-bottom: 4px;
+        }
+.page-szolgaltatasok .price-box .price-value {
+            font-family: var(--font-data);
+            font-size: 1.3rem;
+            font-weight: 600;
+            color: var(--blue-bright);
+        }
+.page-szolgaltatasok .price-box .price-unit {
+            font-size: 0.8rem;
+            color: var(--text-2);
+            font-family: 'Plus Jakarta Sans', sans-serif;
+        }
+.page-szolgaltatasok .price-box .price-note {
+            font-size: 0.78rem;
+            color: var(--text-3);
+            margin-top: 4px;
+            line-height: 1.4;
+        }
+.page-szolgaltatasok .package-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 24px;
+            margin-top: 48px;
+        }
+.page-szolgaltatasok .package-card {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 32px 28px;
+            transition: border-color 0.3s ease, transform 0.3s ease;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+        }
+.page-szolgaltatasok .package-card:hover { border-color: var(--blue);  }
+.page-szolgaltatasok .package-card.featured {
+            border-color: var(--blue);
+            
+        }
+.page-szolgaltatasok .package-card.featured::before {
+            content: '★ Legnépszerűbb';
+            position: absolute;
+            top: -12px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--blue);
+            color: white;
+            font-size: 0.75rem;
+            font-weight: 600;
+            padding: 4px 16px;
+            border-radius: var(--radius);
+            white-space: nowrap;
+        }
+.page-szolgaltatasok .package-card .package-icon {
+            font-size: 2.5rem;
+            margin-bottom: 16px;
+        }
+.page-szolgaltatasok .package-card h3 {
+            font-size: 1.4rem;
+            font-weight: 700;
+            margin-bottom: 8px;
+        }
+.page-szolgaltatasok .package-card .package-tagline {
+            color: var(--text-2);
+            font-size: 0.9rem;
+            margin-bottom: 20px;
+            line-height: 1.5;
+        }
+.page-szolgaltatasok .package-card .package-price {
+            font-family: var(--font-data);
+            font-size: 2rem;
+            font-weight: 700;
+            color: var(--blue-bright);
+            margin-bottom: 4px;
+        }
+.page-szolgaltatasok .package-card .package-price-note {
+            font-size: 0.8rem;
+            color: var(--text-3);
+            margin-bottom: 24px;
+        }
+.page-szolgaltatasok .package-card .package-features {
+            list-style: none;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            flex-grow: 1;
+            margin-bottom: 24px;
+        }
+.page-szolgaltatasok .package-card .package-features li {
+            color: var(--text-2);
+            font-size: 0.88rem;
+            display: flex;
+            align-items: flex-start;
+            gap: 10px;
+            line-height: 1.4;
+        }
+.page-szolgaltatasok .package-card .package-features li::before {
+            content: '✓';
+            color: var(--blue);
+            font-weight: bold;
+            flex-shrink: 0;
+        }
+.page-szolgaltatasok .package-card .package-features li.na {
+            color: var(--text-3);
+        }
+.page-szolgaltatasok .package-card .package-features li.na::before {
+            content: '–';
+            color: var(--text-3);
+        }
+.page-szolgaltatasok .package-cta {
+            display: block;
+            text-align: center;
+            padding: 12px 24px;
+            border-radius: var(--radius);
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 0.95rem;
+            transition: all 0.2s ease;
+            margin-top: auto;
+        }
+.page-szolgaltatasok .package-cta-secondary {
+            background: transparent;
+            color: var(--blue-bright);
+            border: 2px solid var(--blue);
+        }
+.page-szolgaltatasok .package-cta-secondary:hover { background: var(--blue); color: white; }
+.page-szolgaltatasok .package-cta-primary {
+            background: var(--blue);
+            color: white;
+            border: none;
+            
+        }
+.page-szolgaltatasok .package-cta-primary:hover {   }
+.page-szolgaltatasok .domain-section {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 48px;
+            align-items: center;
+        }
+.page-szolgaltatasok .domain-text h2 {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 16px;
+            letter-spacing: -0.02em;
+        }
+.page-szolgaltatasok .domain-text p {
+            color: var(--text-2);
+            font-size: 1rem;
+            line-height: 1.7;
+            margin-bottom: 16px;
+        }
+.page-szolgaltatasok .domain-visual {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+.page-szolgaltatasok .domain-example {
+            background: var(--bg-1);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 20px 24px;
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+.page-szolgaltatasok .domain-example .domain-icon {
+            font-size: 1.5rem;
+            flex-shrink: 0;
+        }
+.page-szolgaltatasok .domain-example .domain-url {
+            font-family: var(--font-data);
+            font-size: 0.95rem;
+            color: var(--blue-bright);
+        }
+.page-szolgaltatasok .domain-example .domain-desc {
+            font-size: 0.82rem;
+            color: var(--text-3);
+            margin-top: 2px;
+        }
+.page-szolgaltatasok .process-timeline {
+            display: flex;
+            flex-direction: column;
+            gap: 0;
+            max-width: 700px;
+            margin: 0 auto;
+            position: relative;
+        }
+.page-szolgaltatasok .process-timeline::before {
+            content: '';
+            position: absolute;
+            left: 24px;
+            top: 40px;
+            bottom: 40px;
+            width: 2px;
+            background: var(--line);
+        }
+.page-szolgaltatasok .process-step {
+            display: flex;
+            align-items: flex-start;
+            gap: 24px;
+            padding: 20px 0;
+        }
+.page-szolgaltatasok .step-number {
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            background: var(--bg-1);
+            border: 2px solid var(--blue);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-family: var(--font-data);
+            font-weight: 700;
+            font-size: 1rem;
+            color: var(--blue-bright);
+            flex-shrink: 0;
+            position: relative;
+            z-index: 1;
+        }
+.page-szolgaltatasok .step-content h4 {
+            font-size: 1.05rem;
+            font-weight: 600;
+            margin-bottom: 6px;
+            color: var(--text-1);
+        }
+.page-szolgaltatasok .step-content p {
+            color: var(--text-2);
+            font-size: 0.9rem;
+            line-height: 1.5;
+        }
+.page-szolgaltatasok .cta-box {
+            background: var(--blue-dim);
+            border: 1px solid var(--line);
+            border-radius: var(--radius);
+            padding: 48px;
+        }
+.page-szolgaltatasok .cta-box h2 {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-bottom: 16px;
+        }
+.page-szolgaltatasok .cta-box p {
+            color: var(--text-2);
+            font-size: 1.05rem;
+            margin-bottom: 32px;
+            max-width: 500px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+.page-szolgaltatasok .cta-buttons {
+            display: flex;
+            gap: 16px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+@media (max-width: 768px) {
+    .page-szolgaltatasok .package-grid { grid-template-columns: 1fr; }
+    .page-szolgaltatasok .domain-section { grid-template-columns: 1fr; gap: 32px; }
+    .page-szolgaltatasok .service-grid { grid-template-columns: 1fr; }
+}
+@media (max-width: 1024px) and (min-width: 769px) {
+    .page-szolgaltatasok .package-grid { grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 900px) {
+    body.menu-open {
+                overflow: hidden;
+            }
+}