hutoczky · hutoczky · Jul 10, 2026 · Jul 10, 2026 · Jul 10, 2026
diff --git a/docs/scifi-ui/index.html b/docs/scifi-ui/index.html
@@ -45,6 +45,7 @@
   <link rel="stylesheet" href="./styles/splash.css?v=20251025-splash1">
 </head>
 <body id="top" class="theme-lcars">
+  <a class="skip-link" href="#main-content">Ugrás a tartalomhoz</a>
   <div id="splash" aria-live="polite" aria-label="Üdvözlő animáció">
     <div class="splash-panel">
       <div class="art" role="img" aria-label="Üdvözlő grafika"></div>
@@ -64,17 +65,17 @@
     </nav>
   </header>
 
-  <main class="container shell">
+  <main id="main-content" class="container shell">
     <i class="decor decor-left" aria-hidden="true"></i>
     <i class="decor decor-right" aria-hidden="true"></i>
 
     <section class="hero">
       <h1 class="title" data-glitch="FORMÁZÁS A JÖVŐBŐL">FORMÁZÁS A JÖVŐBŐL</h1>
-      <p class="subtitle">Modern rendszerkarbantartó GUI formázáshoz, USB-készítéshez, diagnosztikához és Linux / Bazzite workflow-khoz.</p>
+      <p class="subtitle">Rendszerkarbantartó GUI formázáshoz, USB-készítéshez és diagnosztikához — Windows, Linux / Bazzite rendszerekre.</p>
       <div class="cta-row">
         <a href="#downloads" class="pill lg">LIGHT LETÖLTÉSE</a>
-        <a href="#features" class="pill lg alt">FUNKCIÓK MEGTEKINTÉSE</a>
-        <a href="#docs" class="pill lg accent">PRO DOKUMENTÁCIÓ</a>
+        <a href="#pro" class="pill lg alt">PRO ELŐFIZETÉS</a>
+        <a href="#features" class="pill lg accent">FUNKCIÓK</a>
       </div>
     </section>
 
@@ -118,9 +119,7 @@ <h3>GitHub megnyitása</h3>
 
     <section id="pro" class="panel">
       <h2 class="panel-title">FormatX Suite Pro</h2>
-      <p><strong>FormatX Suite Pro – céges előfizetés interaktív demo checkouttal</strong></p>
-      <p>A FormatX Suite Pro a prémium kiadás modern rendszerkarbantartó, diagnosztikai és vállalati workflow funkciókkal.</p>
-      <p>A céges előfizetés gépszám alapú, havi vagy éves ciklussal választható. Az alábbi checkout felület egy biztonságos bemutató: kliensoldali ellenőrzést ad, de nem továbbít és nem tárol élő fizetési adatot.</p>
+      <p>Prémium kiadás céges előfizetéssel: diagnosztika, workflow-automatizálás és skálázható licencelés. Havi vagy éves számlázással, 2 hónap kedvezmény éves csomagoknál.</p>
 
       <div class="download-grid" style="margin-top:1rem">
         <div class="card span-8">
@@ -134,10 +133,10 @@ <h3>Mit tartalmaz a Pro</h3>
           </ul>
         </div>
         <div class="card span-4">
-          <h3>Fizetés és előfizetés</h3>
-          <p class="meta">Demo checkout • havi vagy éves előfizetés</p>
-          <p>Az új checkout szekció holografikus rendelésösszegzést, fizetési mód választót és demó kártyaellenőrzést ad. A megadott adatok kizárólag a böngészőben maradnak.</p>
-          <a class="pill lg accent card-cta" href="#payment">CHECKOUT ELŐNÉZET</a>
+          <h3>Enterprise</h3>
+          <p class="meta">Egyedi ajánlat • dedikált onboarding • nagyvállalati skálázás</p>
+          <p>Egyedi megfelelőségi igényekhez és nagyobb gépparkhoz személyre szabott ajánlat.</p>
+          <a class="pill lg accent card-cta" href="./support.html">EGYEDI AJÁNLAT KÉRÉSE</a>
         </div>
       </div>
 
@@ -161,25 +160,6 @@ <h3>Technician Team</h3>
           <a class="pill lg card-cta billing-plan-trigger" href="#payment" data-plan="technician_team" aria-label="Technician Team előfizetés indítása">ELŐFIZETÉS INDÍTÁSA</a>
         </div>
       </div>
-
-      <div class="download-grid" style="margin-top:1rem">
-        <div class="card span-8">
-          <h3>Céges árazás</h3>
-          <p class="meta">Backend-validált csomagárak • 2 hónap kedvezmény éves számlázásnál</p>
-          <ul>
-            <li><strong>Business Lite:</strong> 19 900 Ft / hó • 199 000 Ft / év</li>
-            <li><strong>Business Pro:</strong> 49 900 Ft / hó • 499 000 Ft / év</li>
-            <li><strong>Technician Team:</strong> 99 900 Ft / hó • 999 000 Ft / év</li>
-            <li><strong>Enterprise:</strong> 199 000 Ft / hó-tól • egyedi ajánlat</li>
-          </ul>
-        </div>
-        <div class="card span-4">
-          <h3>Enterprise</h3>
-          <p class="meta">Egyedi ajánlat • dedikált onboarding • nagyvállalati skálázás</p>
-          <p>Nagyobb környezethez és egyedi megfelelőségi igényekhez személyre szabott ajánlat érhető el.</p>
-          <a class="pill lg accent card-cta" href="./support.html">EGYEDI AJÁNLAT KÉRÉSE</a>
-        </div>
-      </div>
     </section>
 
     <section id="features" class="panel">
@@ -250,22 +230,18 @@ <h2 class="panel-title">Betöltő ikonok</h2>
     </section>
 
     <section id="docs" class="panel">
-      <h2 class="panel-title">Dokumentáció</h2>
-      <p><strong>FormatX Suite Pro dokumentáció és előfizetési információk</strong></p>
-      <p>Ez a szekció a FormatX Suite Pro csomagjaihoz és a kliensoldali demo checkout folyamathoz kapcsolódó információkat tartalmazza.</p>
-      <p>A Light és Pro tartalom külön szerepel, így a vállalati ügyfelek gyorsan megtalálják a számukra fontos adatokat.</p>
+      <h2 class="panel-title">Demo checkout</h2>
       <div id="payment" class="card span-12 checkout-card">
         <div class="checkout-intro">
           <div>
-            <p class="checkout-kicker">Demo checkout // nincs élő terhelés</p>
-            <h3>Fizetés és előfizetés</h3>
-            <p>A lenti felület a végső rendelési élményt modellezi: csomagválasztás, rendelésösszegzés, fizetési módok és kliensoldali kártyaellenőrzés egyetlen, reszponzív sci-fi panelben.</p>
+            <p class="checkout-kicker">1. LÉPÉS // megrendelés részletei</p>
+            <h3>Előfizetés indítása</h3>
+            <p>Válassz csomagot és számlázási ciklust, add meg a céges adatokat, majd erősítsd meg a megrendelést. A megadott adatok kizárólag a böngészőben maradnak — nincs élő terhelés.</p>
           </div>
-          <div class="checkout-status" aria-label="Checkout információk">
-            <span class="checkout-status-pill">Böngészőn belüli demo</span>
-            <span class="checkout-status-pill">Éves díjnál 2 hónap kedvezmény</span>
+          <div class="checkout-status" aria-label="Checkout állapot">
+            <span class="checkout-status-pill">Demo mód</span>
+            <span class="checkout-status-pill">Éves díjnál 2 hó kedvezmény</span>
             <span class="checkout-status-pill">Fogadó cím privát marad</span>
-            <span class="checkout-status-pill">Billentyűzettel is bejárható</span>
           </div>
         </div>
 
@@ -533,8 +509,15 @@ <h4 id="payment-confirmation-title">Átutalási visszajelző űrlap</h4>
   </main>
 
   <footer class="container footer">
-    <div class="copyright">© 2026 FormatX Project<br>Developed by Hutóczky József</div>
-    <a href="#top" class="back-to-top">Vissza a tetejére</a>
+    <div class="footer-row">
+      <div class="copyright">© 2026 FormatX Project — Hutóczky József</div>
+      <nav class="footer-nav" aria-label="Jogi és support linkek">
+        <a href="./support.html">Support</a>
+        <a href="./terms.html">ÁSZF</a>
+        <a href="./privacy.html">Privacy</a>
+        <a href="#top" class="back-to-top">↑ Tetejére</a>
+      </nav>
+    </div>
   </footer>
 
   <noscript>

diff --git a/docs/scifi-ui/privacy.html b/docs/scifi-ui/privacy.html
@@ -7,12 +7,22 @@
   <link rel="stylesheet" href="./styles/site.css">
 </head>
 <body class="theme-lcars">
+  <header class="site-header container">
+    <nav aria-label="Navigáció">
+      <a class="pill sm" href="./index.html">← Főoldal</a>
+    </nav>
+  </header>
   <main class="container shell">
     <section class="panel">
       <h1 class="panel-title">Privacy</h1>
       <div class="card span-12">
         <p>A checkout felület jelenleg demo módban működik: a céges és fizetési adatok kliensoldali ellenőrzésre szolgálnak, és nem kerülnek elküldésre vagy eltárolásra. A FormatX publikus honlap nem kér be és nem tárol élő bankkártyaadatokat.</p>
         <p>A végleges produkciós adatkezelési tájékoztatót az üzemeltetőnek kell közzétennie az éles indulás előtt.</p>
+        <div style="display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem;">
+          <a class="pill lg" href="./index.html">← Főoldalra</a>
+          <a class="pill lg alt" href="./terms.html">ÁSZF / Terms</a>
+          <a class="pill lg alt" href="./support.html">Support</a>
+        </div>
       </div>
     </section>
   </main>

diff --git a/docs/scifi-ui/styles/site.css b/docs/scifi-ui/styles/site.css
@@ -74,7 +74,7 @@ body {
 @media (max-width: 980px) { .decor { display: none } }
 
 /* ===== Hős sáv ===== */
-.hero { margin: 1.25rem 0 2rem }
+.hero { margin: 1.75rem 0 2.5rem }
 .title {
   font-family: var(--font-title);
   font-weight: 900;
@@ -125,8 +125,8 @@ body {
 
 /* ===== LCARS stílusú belső panel ===== */
 .panel {
-  margin-top: 1.6rem;
-  padding: 1rem .85rem 1.25rem;
+  margin-top: 2rem;
+  padding: 1.25rem 1rem 1.5rem;
   border: 3px solid var(--panel-line);
   border-radius: var(--radius);
   background: color-mix(in oklab, var(--panel) 95%, black);
@@ -138,9 +138,9 @@ body {
   pointer-events: none;
 }
 .panel-title {
-  margin: .1rem 1.1rem .9rem;
+  margin: .15rem 1.1rem 1rem;
   font-family: var(--font-title);
-  font-size: clamp(1.2rem, 2.5vw, 1.65rem);
+  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
   letter-spacing: 1px;
   color: var(--accent);
 }
@@ -156,12 +156,12 @@ body {
   border: 2px solid color-mix(in oklab, var(--panel-line) 70%, transparent);
   border-radius: 20px;
   background: color-mix(in oklab, var(--panel) 92%, black);
-  padding: .95rem 1.1rem .9rem;
+  padding: 1.1rem 1.25rem 1rem;
   box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--panel-line) 18%, transparent);
 }
-.card h3 { margin: 0 0 .3rem; font-weight: 800; letter-spacing: .6px }
+.card h3 { margin: 0 0 .35rem; font-size: 1.1rem; font-weight: 800; letter-spacing: .6px }
 .card .meta { margin: 0; color: #9ab3c9; font-family: var(--font-mono) }
-.card-cta { display: inline-block; margin-top: .75rem }
+.card-cta { display: inline-block; margin-top: .85rem }
 
 /* ===== Checkout ===== */
 .checkout-card {
@@ -384,6 +384,9 @@ body {
   flex-wrap: wrap;
   gap: .75rem;
   align-items: center;
+  padding-top: 1rem;
+  margin-top: .5rem;
+  border-top: 1px solid color-mix(in oklab, var(--panel-line) 22%, transparent);
 }
 .pill:disabled {
   cursor: not-allowed;
@@ -428,11 +431,13 @@ body {
 .span-4  { grid-column: span 12 }
 .span-6  { grid-column: span 12 }
 .span-3  { grid-column: span 12 }
+.span-2  { grid-column: span 12 }
 @media (min-width: 880px) {
   .span-8 { grid-column: span 8 }
   .span-6 { grid-column: span 6 }
   .span-4 { grid-column: span 4 }
   .span-3 { grid-column: span 3 }
+  .span-2 { grid-column: span 2 }
   .checkout-layout {
     grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
     align-items: start;
@@ -448,9 +453,16 @@ body {
 /* ===== Alsó chipek és lábléc ===== */
 .chips { display: flex; gap: .85rem; padding: .25rem 1.1rem 0; flex-wrap: wrap }
 .footer {
-  display: flex; justify-content: space-between; align-items: center;
-  padding: 1.25rem 0 3rem; font-family: var(--font-mono);
+  display: flex; flex-direction: column; gap: .85rem;
+  padding: 1.5rem 0 3rem; font-family: var(--font-mono);
 }
+.footer-row {
+  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem;
+}
+.footer-nav { display: flex; gap: 1rem; flex-wrap: wrap }
+.footer-nav a { color: var(--muted); text-decoration: none; font-size: .9rem }
+.footer-nav a:hover { color: var(--accent) }
+.footer-nav a:focus-visible { outline: var(--focus-ring); outline-offset: 2px }
 .back-to-top {
   color: var(--accent); text-decoration: none;
   border-bottom: 2px solid color-mix(in oklab, var(--accent) 70%, transparent);
@@ -460,6 +472,15 @@ body {
 
 /* ===== Kisegítő ===== */
 .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
+.skip-link { position: absolute; top: -100%; left: .5rem; padding: .5rem 1rem; background: var(--accent); color: #0a0c0f; font-weight: 700; border-radius: 0 0 8px 8px; z-index: 100; text-decoration: none }
+.skip-link:focus { top: 0 }
+
+/* ===== Prózai olvashatóság ===== */
+.panel > p,
+.panel > ul,
+.panel > ol,
+.card > p,
+.card > ul { max-width: 72ch }
 
 /* ===== Fedvény effektek ===== */
 #fx-scanlines, #fx-vignette, #fx-noise { pointer-events: none; position: fixed; inset: 0; z-index: 1 }
@@ -575,12 +596,13 @@ h1, h2, h3 { text-transform: uppercase }
 }
 @media (max-width: 520px) {
   .subtitle { font-size: .95rem }
-  .footer { flex-direction: column; gap: .5rem }
+  .footer-row { flex-direction: column; align-items: flex-start }
   .checkout-card { padding: 1rem }
   .checkout-intro { flex-direction: column }
   .choice-grid { grid-template-columns: minmax(0, 1fr) }
   .field,
   .field-group,
   .field-checkbox,
   .checkout-block { padding-inline: .9rem }
+  .checkout-actions { border-top: none; padding-top: .5rem }
 }
diff --git a/docs/scifi-ui/support.html b/docs/scifi-ui/support.html
@@ -7,6 +7,11 @@
   <link rel="stylesheet" href="./styles/site.css">
 </head>
 <body class="theme-lcars">
+  <header class="site-header container">
+    <nav aria-label="Navigáció">
+      <a class="pill sm" href="./index.html">← Főoldal</a>
+    </nav>
+  </header>
   <main class="container shell">
     <section class="panel">
       <h1 class="panel-title">Enterprise és support</h1>

diff --git a/docs/scifi-ui/terms.html b/docs/scifi-ui/terms.html
@@ -7,12 +7,22 @@
   <link rel="stylesheet" href="./styles/site.css">
 </head>
 <body class="theme-lcars">
+  <header class="site-header container">
+    <nav aria-label="Navigáció">
+      <a class="pill sm" href="./index.html">← Főoldal</a>
+    </nav>
+  </header>
   <main class="container shell">
     <section class="panel">
       <h1 class="panel-title">Terms / ÁSZF</h1>
       <div class="card span-12">
         <p>A jelenlegi checkout felület bemutató célú. Ez az oldal a FormatX Suite Pro előfizetéses feltételeinek és a későbbi éles checkout jogi alapjainak helye.</p>
         <p>A végleges produkciós jogi tartalmat az üzemeltetőnek kell feltöltenie az éles indulás előtt.</p>
+        <div style="display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem;">
+          <a class="pill lg" href="./index.html">← Főoldalra</a>
+          <a class="pill lg alt" href="./privacy.html">Privacy</a>
+          <a class="pill lg alt" href="./support.html">Support</a>
+        </div>
       </div>
     </section>
   </main>