website: the redesigned home page, staged at /preview/ (noindex)

Part C. The live home page is NOT touched: every CSS rule added is a new class
under .page-index, so index.html renders byte-for-byte as before.

website/preview/index.html  (BOM + CRLF, noindex, Disallow: /preview/)
  Ten sections, ten different layout families. The three repeats the audit found
  are gone: why-grid ran 3x and apps-showcase 2x.
    - hero: a real dashboard screenshot instead of the logo, sized by its content
      instead of a forced 100vh band, no infinite float animation, and a sentence
      made of four facts instead of "Professzionalis ... telepites es uzemeltetes".
    - the ten capability cards become three labelled clusters. Their TEXT is
      verbatim: the audit's own finding was that the writing is right and the
      layout is wrong, so only the layout moved. Every hedge ("ha van") survives.
    - NEW "Ki all mogotte" with the operator's photo and five approved sentences.
    - the 3 cloud-problem cards + the 4 own-server cards merge into ONE two-column
      comparison. No new claim about any competitor: all four left-hand sentences
      already existed on the page.
    - the two tile walls (10 + 7 tiles duplicating pages that already exist) shrink
      to a two-item band that keeps the app names and the links.
    - section headers are left-aligned and varied, not 11x centred-two-words-plus-
      one-blue-word.

  Em dashes in the page's own copy: 18 -> 0. Deliberately kept: the 6 in <title>,
  meta description, OG, Twitter and JSON-LD (operator decision at STOP 1 - indexed
  strings deserve their own pass), and 1 in the shared footer, which gate 3 requires
  to be identical across all 14 pages. Both stated, neither swept silently.

  JetBrains Mono is no longer fetched. Exactly 13 characters were loading 31 KB:
  the 1..5 process badges, the 01..05 service numbers, and - the audit missed this
  at first and it is corrected in the file - the 3/2/1 of the backup rule.

assets/operator-portrait.webp  720x900, 93 KB
  Cropped from an original that stays OUTSIDE this public repo. All metadata
  stripped and VERIFIED BY READ-BACK: 0 EXIF tags, 0 GPS IFD entries, and none of
  EXIF/XMP/ICCP/samsung/SM-A705FN/2023:10:18 appear anywhere in the bytes. Built by
  re-writing the pixels into a fresh image, so the source info dict cannot travel.
  Honest correction to the brief's premise: this photo had NO GPS tag to begin with.

scripts/site_gates.py
  preview/index.html registered in NO_TWIN, with the reason. It cannot go in TWINS:
  gate 3 wants its nav identical to index.html's (globe -> / and /en/) while the
  twin check wants a pair's globe pointing at the pair's own URLs. The English twin
  is written in the same commit as the switch, as a real twin. Everything else still
  runs on the preview - BOM, emoji, nav/footer, globe, analytics, CDN, tokens,
  cache-busting, dash-language, viewer, tail.

site_gates.py green. The builder (kept in the session scratchpad) writes BOM + CRLF
and asserts both: it first wrote LF and turned the nav/footer gate red for the
preview, which is exactly the trap this CHANGELOG's morning entry records.

website/assets/site.css

@@ -2206,3 +2206,136 @@ footer a:hover, footer a:focus-visible { text-decoration: underline; }
 .legal-version { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); }
 .legal-callout { padding: 16px; border: 1px solid var(--blue); border-radius: var(--radius); }
 .nowrap { white-space: nowrap; }
+
+/* ================= page: index — 2026-10-10 redesign =================
+   NEW classes only. Nothing above this block is modified, so index.html renders
+   exactly as before until it is switched over. Audit + rationale:
+   documentation/audits/redesign-2026-10-10/AUDIT.md
+   Dials: DESIGN_VARIANCE 6, MOTION_INTENSITY 3, VISUAL_DENSITY 4. Motion is CSS
+   hover/focus only; nothing animates on load, so there is nothing for
+   prefers-reduced-motion to undo beyond the global rule already in this file. */
+
+/* --- section heads: left-aligned, no centred two-word-plus-blue-tail rhythm --- */
+.page-index .sec-head { max-width: 46rem; margin-bottom: 44px; }
+.page-index .sec-head h2 {
+    font-size: clamp(1.7rem, 3.2vw, 2.2rem); font-weight: 700;
+    letter-spacing: -0.02em; margin-bottom: 12px;
+}
+.page-index .sec-head p { color: var(--text-2); font-size: 1.05rem; max-width: 42rem; }
+.page-index .sec-head.is-wide { max-width: none; }
+
+/* --- lede (replaces .hero): content-sized, not a forced 100vh band --- */
+.page-index .lede { padding: 128px 0 72px; }
+.page-index .lede-grid {
+    display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center;
+}
+.page-index .lede-text h1 {
+    font-size: clamp(2.3rem, 4.6vw, 3.3rem); font-weight: 700; line-height: 1.1;
+    letter-spacing: -0.03em; margin-bottom: 20px;
+}
+.page-index .lede-text p { font-size: 1.15rem; color: var(--text-2); margin-bottom: 28px; max-width: 30rem; }
+.page-index .lede-shot { margin: 0; }
+.page-index .lede-shot img {
+    width: 100%; height: auto; display: block;
+    border: 1px solid var(--line); border-radius: var(--radius);
+}
+.page-index .lede-shot figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--text-3); }
+
+/* --- capabilities, grouped into three clusters instead of ten equal cards --- */
+.page-index .caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 36px; }
+.page-index .caps-group h3 {
+    font-size: 0.95rem; font-weight: 700; color: var(--text-1);
+    padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
+}
+.page-index .caps-list { list-style: none; display: grid; gap: 22px; }
+.page-index .caps-item h4 {
+    display: flex; gap: 10px; align-items: flex-start;
+    font-size: 1.02rem; font-weight: 600; color: var(--text-1); margin-bottom: 6px;
+}
+.page-index .caps-item h4 svg { flex: 0 0 auto; margin-top: 3px; color: var(--blue-bright); }
+.page-index .caps-item p { color: var(--text-2); font-size: 0.93rem; line-height: 1.65; }
+
+/* --- who is behind it --- */
+.page-index .who { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
+.page-index .who-photo { margin: 0; }
+.page-index .who-photo img {
+    width: 100%; height: auto; display: block;
+    border: 1px solid var(--line); border-radius: var(--radius);
+}
+.page-index .who-text h2 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); font-weight: 700; margin-bottom: 20px; letter-spacing: -0.02em; }
+.page-index .who-text p { color: var(--text-2); font-size: 1.05rem; line-height: 1.75; margin-bottom: 16px; max-width: 38rem; }
+.page-index .who-text p:last-child { margin-bottom: 0; }
+.page-index .who-text strong { color: var(--text-1); font-weight: 600; }
+
+/* --- the process, as a flow without number badges --- */
+.page-index .flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
+.page-index .flow-step { padding: 0 20px; border-left: 1px solid var(--line); }
+.page-index .flow-step:first-child { padding-left: 0; border-left: 0; }
+.page-index .flow-step h3 { font-size: 1.02rem; font-weight: 600; color: var(--text-1); margin-bottom: 8px; }
+.page-index .flow-step p { color: var(--text-2); font-size: 0.9rem; line-height: 1.6; }
+
+/* --- the comparison that replaces problem-grid + the second why-grid --- */
+.page-index .vs { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
+.page-index .vs-head, .page-index .vs-row { display: grid; grid-template-columns: 1fr 1fr; }
+/* deliberately NOT uppercase + tracked: that is the eyebrow signature taste-skill
+   S4.7 rations, and Hungarian accented capitals read badly. */
+.page-index .vs-head > div {
+    padding: 16px 24px; font-size: 0.92rem; font-weight: 700; background: var(--bg-2);
+}
+.page-index .vs-head > div:first-child { color: var(--text-3); }
+.page-index .vs-head > div:last-child { color: var(--blue-bright); }
+.page-index .vs-row { border-top: 1px solid var(--line-soft); }
+.page-index .vs-row > div { padding: 20px 24px; font-size: 0.97rem; line-height: 1.6; }
+.page-index .vs-row > div:first-child { color: var(--text-3); }
+.page-index .vs-row > div:last-child { color: var(--text-2); border-left: 1px solid var(--line-soft); }
+.page-index .vs-row strong { color: var(--text-1); font-weight: 600; }
+
+/* --- the compact band that replaces the two tile walls --- */
+.page-index .band { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
+.page-index .band-item { border-left: 2px solid var(--blue); padding-left: 24px; }
+.page-index .band-item h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; color: var(--text-1); }
+.page-index .band-item p { color: var(--text-2); font-size: 0.95rem; line-height: 1.65; margin-bottom: 16px; }
+.page-index .band-item strong { color: var(--blue-bright); font-weight: 600; }
+
+/* --- closed test: two notes plus the limits, which get the weight --- */
+.page-index .test-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
+.page-index .test-note { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--bg-1); }
+.page-index .test-note h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; color: var(--text-1); }
+.page-index .test-note p { color: var(--text-2); font-size: 0.93rem; line-height: 1.65; }
+.page-index .limits {
+    border: 1px solid var(--warn); border-radius: var(--radius);
+    background: var(--warn-dim); padding: 24px 28px;
+}
+.page-index .limits h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-1); margin-bottom: 12px; }
+.page-index .limits p { color: var(--text-2); font-size: 0.95rem; line-height: 1.7; }
+.page-index .limits strong { color: var(--text-1); font-weight: 600; }
+
+/* --- the 3-2-1 figures, off the mono font (R6b: 13 characters were loading 31 KB) --- */
+.page-index .rule-num {
+    font-family: var(--font-ui); font-size: 2rem; font-weight: 700;
+    min-width: 50px; color: var(--blue-bright);
+}
+
+/* --- one closing call to action --- */
+.page-index .close-cta { text-align: center; }
+.page-index .close-cta p { font-size: 1.05rem; color: var(--text-2); margin-bottom: 24px; }
+.page-index .close-cta p strong { color: var(--text-1); font-weight: 600; }
+
+@media (max-width: 900px) {
+    .page-index .lede { padding: 104px 0 56px; }
+    .page-index .lede-grid { grid-template-columns: 1fr; gap: 36px; }
+    .page-index .lede-text p { max-width: none; }
+    .page-index .caps { grid-template-columns: 1fr; gap: 36px; }
+    .page-index .who { grid-template-columns: 1fr; gap: 28px; }
+    .page-index .who-photo { max-width: 260px; }
+    .page-index .flow { grid-template-columns: 1fr; gap: 20px; }
+    .page-index .flow-step { padding: 0 0 0 20px; border-left: 1px solid var(--line); }
+    .page-index .flow-step:first-child { padding-left: 20px; border-left: 1px solid var(--line); }
+    .page-index .band { grid-template-columns: 1fr; }
+    .page-index .test-grid { grid-template-columns: 1fr; }
+}
+@media (max-width: 600px) {
+    .page-index .vs-head > div, .page-index .vs-row > div { padding: 14px 16px; font-size: 0.9rem; }
+    .page-index .limits { padding: 20px; }
+}
+.page-index .close-cta { text-align: center; margin-top: 40px; }