/* ==========================================================================
 * theme/css/theme.css — GLOBAL CSS του frontend.
 * Φορτώνεται αυτόματα σε ΚΑΘΕ σελίδα (κάθε .css του theme/css/ μπαίνει μόνο του,
 * αλφαβητικά, μετά το Bootstrap και πριν τα per-page assets).
 * Εδώ ζει μόνο το «κέλυφος»: header, μενού, footer, container. Το styling των
 * blocks έρχεται από τον PageBuilder (frontend.css + scoped ce CSS).
 * ======================================================================== */

:root {
  /* Ύψος header: ακολουθεί το λογότυπο. Αν μεγαλώσεις το `.nq-brand img`
     πιο κάτω, ανέβασε κι αυτό — αλλιώς το λογότυπο ακουμπά στις άκρες. */
  --nq-header-h: 88px;
  /* Ίδιο με το .container του Bootstrap (xxl) ώστε header/footer να ευθυγραμμίζονται
     ΑΚΡΙΒΩΣ με το περιεχόμενο που βγάζει ο PageBuilder. Αλλάζοντας το εδώ, αλλάζει
     μόνο το κέλυφος — το Bootstrap μένει όπως είναι. */
  --nq-max: 1320px;
  --nq-fg: #111827;
  --nq-muted: #6b7280;
  --nq-line: #e5e7eb;
  --nq-accent: var(--volgh-primary, #4f46e5);
  /* ΣΚΟΥΡΟ ΚΕΛΥΦΟΣ: το header ακολουθεί το hero και το footer, ώστε το site να
     διαβάζεται σαν ένα κομμάτι. Για λευκό header, άλλαξε ΜΟΝΟ αυτές τις τρεις. */
  --nq-header-bg: #0b0f1a;
  --nq-header-fg: #e8ebf3;
  --nq-header-line: rgba(255, 255, 255, .1);
}

body.nq-front { margin: 0; color: var(--nq-fg); }

/* ΚΑΜΙΑ ΟΡΙΖΟΝΤΙΑ ΚΥΛΙΣΗ — ΠΟΤΕ.
   ---------------------------------------------------------------------------
   Οι full-bleed ενότητες μέσα σε περιεχόμενο χρήστη χρησιμοποιούν το κλασικό
   `width:100vw; margin-inline:calc(50% - 50vw)`. Το `100vw` όμως μετρά ΚΑΙ τη
   μπάρα κύλισης: σε desktop με ορατή μπάρα (~15px) η ενότητα βγαίνει πιο φαρδιά
   από το ορατό πλάτος και η σελίδα αποκτά οριζόντια κύλιση.
   `clip` (ΟΧΙ `hidden`): κόβει την υπερχείλιση ΧΩΡΙΣ να φτιάχνει scroll
   container — άρα το `position: sticky` της κεφαλίδας συνεχίζει να δουλεύει.
   Αυτό πιάνει και κάθε μελλοντική ενότητα με το ίδιο κόλπο. */
html { overflow-x: clip; }
#nq-main { min-height: 40vh; }
/* Σελίδες χωρίς builder (σκέτο HTML): παίρνουν container + λίγο αέρα, ώστε να μην
   κολλάνε στην άκρη της οθόνης. Οι builder σελίδες ΔΕΝ τυλίγονται — φτιάχνουν
   μόνες τους το layout τους (full-bleed sections κ.λπ.). */
#nq-main.nq-boxed .nq-content { padding-block: 40px; }

.nq-container { width: 100%; max-width: var(--nq-max); margin-inline: auto; padding-inline: 12px; }

/* ───────────────────────────── Top bar ─────────────────────────────────── */
.nq-topbar { background: #111827; color: #e5e7eb; font-size: 13px; }
.nq-topbar .nq-nav { justify-content: flex-end; gap: 14px; }
.nq-topbar .nq-nav-link { color: #d1d5db; padding: 7px 0; }
.nq-topbar .nq-nav-link:hover { color: #fff; }

/* ───────────────────────────── Header ──────────────────────────────────── */
.nq-header { background: var(--nq-header-bg); border-bottom: 1px solid var(--nq-header-line); position: sticky; top: 0; z-index: 900; }
.nq-header-in { display: flex; align-items: center; gap: 20px; min-height: var(--nq-header-h); }

/* ── Σκούρο κέλυφος: κείμενο, σύνδεσμοι, burger, υπομενού ─────────────────
   ΠΡΟΣΟΧΗ ΣΤΟΝ ΣΤΟΧΟ: τα κομμάτια της κεφαλίδας ΔΕΝ ζουν όλα μέσα στο
   `#header`. Ο σκελετός βάζει το μενού σε αδελφό `<nav>` και τη λεπτή γραμμή σε
   `#Bottom_header`. Με στόχο `header > #header` τα links του μενού έμεναν
   σκούρα πάνω σε σκούρο — τεχνικά σωστά, πρακτικά αόρατα.
   Στόχος είναι πλέον ΟΛΟ το `<header>` του σκελετού. */
header, .nq-header, .nq-sticky { color: var(--nq-header-fg); }
header .nq-nav-link,
.nq-header .nq-nav-link,
.nq-sticky .nq-nav-link { color: rgba(232, 235, 243, .8); }
header .nq-nav-link:hover,
.nq-header .nq-nav-link:hover,
.nq-sticky .nq-nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
header .nq-nav-item.is-current > .nq-nav-link,
.nq-header .nq-nav-item.is-current > .nq-nav-link,
.nq-sticky .nq-nav-item.is-current > .nq-nav-link { color: #fff; }
header .nq-burger,
.nq-header .nq-burger,
.nq-sticky .nq-burger { background: transparent; border-color: rgba(255, 255, 255, .24); }
header .nq-burger span,
.nq-header .nq-burger span,
.nq-sticky .nq-burger span { background: #fff; }
/* Υπομενού και πτυσσόμενο μενού κινητού: σκούρα, αλλιώς θα άνοιγαν λευκά κουτιά. */
header .nq-subnav, .nq-header .nq-subnav, .nq-sticky .nq-subnav,
header .nq-nav-wrap.is-open, .nq-header .nq-nav-wrap.is-open, .nq-sticky .nq-nav-wrap.is-open {
  background: #0f1424; border-color: var(--nq-header-line); }

/* ── ΤΟ ΦΟΝΤΟ ΤΗΣ ΚΕΦΑΛΙΔΑΣ ΜΠΑΙΝΕΙ ΕΔΩ, ΜΙΑ ΦΟΡΑ ─────────────────────────
   Ήταν καρφωμένο ανά μπάρα (#Top_header, header > #header, > nav, > #Bottom_header)
   σε τρία αρχεία, οπότε ΚΑΘΕ νέα γραμμή που πρόσθετε ο builder έβγαινε άβαφη
   πάνω στο λευκό <body>. Τώρα βάφεται το ίδιο το <header> και οι μπάρες κρατούν
   μόνο τη ΔΙΑΦΟΡΑ τους (γραμμές, ύψη, δικό τους χρώμα αν χρειαστεί).
   ΣΤΟΧΟΣ ΑΜΕΣΟ ΠΑΙΔΙ ΤΟΥ BODY: σκέτο `header` πιάνει και τα <header> που βγάζουν
   blocks μέσα στο περιεχόμενο (π.χ. .nq-services-prime__head). */
body.nq-front > header { background: var(--nq-header-bg); }

/* Σελίδα ΜΕ πρότυπο: η γραμμή του λογότυπου. ΔΕΝ γίνεται sticky: μέσα στο
   <header> του σκελετού θα ξεκολλούσε μόλις αυτό έβγαινε από την οθόνη — το
   «κολλητό» είναι δουλειά της ζώνης «Sticky header». Φόντο δεν κρατά — το
   κληρονομεί από το <header> (βλ. από πάνω). */
/* ⚠️ ΕΙΔΙΚΟΤΗΤΑ — ΠΡΟΕΠΙΛΟΓΗ, ΟΧΙ ΕΝΤΟΛΗ (2026-08-10)
   Η γραμμή μπαίνει σε `:where()`, δηλαδή με ειδικότητα 0,0,0. Ο builder γράφει τις
   ρυθμίσεις της γραμμής ως `#header { … }` (1,0,0)· με στόχο `header > #header`
   (1,0,1) το theme ΝΙΚΟΥΣΕ ΠΑΝΤΑ, οπότε το «Bottom Border» του builder δεν είχε
   ΚΑΜΙΑ ορατή επίδραση — χωρίς κανένα σφάλμα, απλώς δεν εφαρμοζόταν.
   Το `position` ΔΕΝ μπαίνει εδώ: είναι σκελετός (άγκυρα για το μενού που πέφτει
   από κάτω), όχι εμφάνιση — αν το έσβηνε ο builder θα έσπαγε η διάταξη. */
:where(header > #header) { border-bottom: 1px solid var(--nq-header-line); }
header > #header { position: relative; }
/* ── Μενού ως ΚΑΤΑΚΟΡΥΦΗ ΛΙΣΤΑ (block «Menu» → Διάταξη: λίστα) ─────────────
   Για στήλη υποσέλιδου ή πλαϊνή στήλη. Κρατά ΜΟΝΟ τη διάταξη· χρώματα και
   αποστάσεις τα δίνει το περιβάλλον (π.χ. `.nq-fcol a` στο υποσέλιδο), ώστε το
   ίδιο block να δείχνει σωστά όπου κι αν μπει. */
.nq-menu-stack .nq-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0;
  list-style: none; margin: 0; padding: 0; }
.nq-menu-stack .nq-nav-link { display: block; }
/* Υπομενού: στο υποσέλιδο δεν αιωρείται — απλώς μπαίνει μέσα. */
.nq-menu-stack .nq-nav .nq-nav { padding-left: 12px; }

/* ── Breadcrumbs ──────────────────────────────────────────────────────────
   Ο διαχωριστής μπαίνει με ::before και custom property, ΟΧΙ ως στοιχείο της
   λίστας: ένα ψεύτικο <li> το διαβάζει ο αναγνώστης οθόνης σαν βήμα διαδρομής. */
.nq-crumbs-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.5; }
.nq-crumb { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.nq-crumb + .nq-crumb::before { content: var(--nq-crumb-sep, "›"); opacity: .45; }
.nq-crumb a { color: inherit; text-decoration: none; opacity: .72; }
.nq-crumb a:hover { opacity: 1; text-decoration: underline; }
.nq-crumb.is-current { font-weight: 600; }
/* Σε στενή οθόνη οι μεγάλοι τίτλοι έσπρωχναν τη διαδρομή σε τρεις σειρές. */
@media (max-width: 575.98px) {
  .nq-crumbs-list { font-size: 12.5px; gap: 6px; }
  .nq-crumb.is-current { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.nq-brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.nq-brand img { max-height: 60px; width: auto; display: block; }
.nq-brand-txt { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
/* ── Ποιο λογότυπο δείχνει ────────────────────────────────────────────────
   ΔΥΟ άξονες, και οι δύο με CSS (χωρίς JS, χωρίς «πήδημα» του header):
     πλάτος οθόνης → οριζόντιο (desktop) ή τετράγωνο (<576px)
     φόντο κελύφους → κανονικό (.nq-on-light) ή για σκούρο (.nq-on-dark)
   Και τα τέσσερα αρχεία είναι στο markup· ο browser κατεβάζει μόνο όποιο
   εμφανίζεται — το display:none δεν ζητά εικόνα.
   ΠΡΟΣΟΧΗ: όλα ξεκινούν κρυφά και ανοίγουν ΡΗΤΑ. Αν αφήσεις κάποιο «default
   ορατό», σε κάποιον συνδυασμό θα δεις δύο λογότυπα το ένα δίπλα στο άλλο. */
.nq-brand img { display: none; }
.nq-brand .nq-brand-wide.nq-on-light { display: block; }

:is(.nq-header, header, .nq-sticky) .nq-brand .nq-brand-wide.nq-on-light { display: none; }
:is(.nq-header, header, .nq-sticky) .nq-brand .nq-brand-wide.nq-on-dark  { display: block; }

/* Σε στενή οθόνη το οριζόντιο δίνει τη θέση του στο τετράγωνο — ΜΟΝΟ αν υπάρχει
   τετράγωνο. Το `:has(.nq-brand-icon)` είναι ο φύλακας: χωρίς αυτό, σε
   εγκατάσταση που έχει ορίσει μόνο οριζόντιο λογότυπο, το header στο κινητό
   έμενε ΑΔΕΙΟ (κρύβαμε το οριζόντιο και δεν υπήρχε τι να μπει στη θέση του). */
@media (max-width: 575px) {
  .nq-brand:has(.nq-brand-icon) .nq-brand-wide.nq-on-light { display: none; }
  .nq-brand:has(.nq-brand-icon) .nq-brand-icon.nq-on-light { display: block; }
  :is(.nq-header, header, .nq-sticky) .nq-brand:has(.nq-brand-icon) .nq-brand-wide.nq-on-dark { display: none; }
  :is(.nq-header, header, .nq-sticky) .nq-brand:has(.nq-brand-icon) .nq-brand-icon.nq-on-light { display: none; }
  :is(.nq-header, header, .nq-sticky) .nq-brand:has(.nq-brand-icon) .nq-brand-icon.nq-on-dark  { display: block; }
  .nq-brand img { max-height: 46px; }
}

.nq-nav-wrap { margin-left: auto; }
.nq-nav { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nq-nav-item { position: relative; }
.nq-nav-link { display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--nq-fg);
  padding: 10px 14px; border-radius: 8px; font-size: 15px; line-height: 1.2; white-space: nowrap; }
.nq-nav-link:hover { color: var(--nq-accent); background: rgba(0, 0, 0, .035); }
.nq-nav-item.is-current > .nq-nav-link { color: var(--nq-accent); font-weight: 600; }
.nq-nav-ico { font-size: 15px; opacity: .8; }
.nq-nav-caret { font-size: 13px; opacity: .6; }

/* Υπομενού: hover σε desktop, click σε mobile (βλ. .nq-open από το theme.js).
   🔴 ΜΟΝΟ :hover εδώ (2026-08-20): ο server βάζει `nq-open` στον ενεργό κλάδο
   (is-current-parent) για το accordion του κινητού. Όταν το `nq-open` άνοιγε το
   dropdown ΚΑΙ εδώ, κάθε φρέσκο φόρτωμα σελίδας που ανήκει σε υπομενού έδειχνε
   το dropdown ΑΝΟΙΧΤΟ στο desktop μέχρι το πρώτο κλικ. Στο ≤991.98 το `nq-open`
   το χειρίζεται ο κανόνας του drawer πιο κάτω (display:block). */
.nq-subnav { list-style: none; margin: 0; padding: 6px; position: absolute; top: 100%; left: 0; min-width: 220px;
  background: #fff; border: 1px solid var(--nq-line); border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 24, 40, .12);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s, transform .16s, visibility .16s; z-index: 20; }
.nq-nav-item:hover > .nq-subnav { opacity: 1; visibility: visible; transform: translateY(0); }
/* Το υπομενου 2ου επιπεδου ανοιγει ΑΡΙΣΤΕΡΑ, οχι δεξια (2026-09-07).
   Ηταν `left: 100%` — δηλαδη πεταγοταν δεξια απο το dropdown του 1ου επιπεδου.
   Επειδη το μενου ειναι δεξια στοιχισμενο, δεν χωραει ΠΟΤΕ: μετρηθηκε
   document.scrollWidth 1537 σε viewport 1440 (+97) και 1173 σε 1024 (+149),
   δηλαδη ΟΡΙΖΟΝΤΙΑ ΚΥΛΙΣΗ σε ΚΑΘΕ σελιδα του site.
   Δεν φαινοταν στην αρχικη μονο κατα τυχη — εκει το ιδιο υπομενου επεφτε λιγα
   pixel μεσα στο viewport.
   🔴 ΚΑΙ ΟΤΑΝ ΕΙΝΑΙ ΚΛΕΙΣΤΟ ΜΕΤΡΑΕΙ: κρυβεται με `visibility: hidden`,
   που ΔΕΝ το βγαζει απο τη ροη υπολογισμου του scrollWidth (σε αντιθεση με το
   `display: none`). Γι' αυτο η μπαρα κυλισης υπηρχε χωρις να αγγιξει κανεις το
   μενου. Με `right: 100%` το υπομενου καθεται 891..1111 σε viewport 1440 και
   το scrollWidth πεφτει στο 1437. */
.nq-subnav .nq-subnav { top: -7px; left: auto; right: 100%; }
.nq-subnav .nq-nav-link { padding: 8px 12px; font-size: 14.5px; }
.nq-subnav .nq-nav-caret { margin-left: auto; transform: rotate(-90deg); }
.nq-sub-toggle { display: none; }

/* Burger (mobile) */
.nq-burger { display: none; width: 42px; height: 42px; margin-left: auto; border: 1px solid var(--nq-line);
  background: #fff; border-radius: 9px; cursor: pointer; padding: 0; }
.nq-burger span { display: block; width: 18px; height: 2px; margin: 3px auto; background: var(--nq-fg); border-radius: 2px;
  transition: transform .2s, opacity .2s; }
.nq-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nq-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nq-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 991.98px) {
  .nq-burger { display: block; }
  .nq-nav-wrap { position: fixed; inset: var(--nq-header-h) 0 auto 0; background: #fff; border-bottom: 1px solid var(--nq-line);
    max-height: calc(100dvh - var(--nq-header-h)); overflow: auto; padding: 8px 16px 18px;
    display: none; margin-left: 0; }
  .nq-nav-wrap.is-open { display: block; }
  /* Με πρότυπο, το μενού κρέμεται από το ΙΔΙΟ το header (top:100%) και όχι από
     σταθερό offset — αλλιώς με top bar από πάνω θα έπεφτε πάνω στο header. */
  #header .nq-nav-wrap { position: absolute; inset: 100% 0 auto 0; max-height: 70dvh; }
  .nq-nav { flex-direction: column; align-items: stretch; gap: 0; }
  .nq-nav-item { border-bottom: 1px solid var(--nq-line); }
  .nq-nav-link { padding: 13px 4px; }
  /* Σε mobile ο γονέας ανοίγει με το κουμπί, ώστε το ίδιο το link να παραμένει κλικαρίσιμο. */
  .nq-has-sub > .nq-sub-toggle { display: block; position: absolute; top: 4px; right: 0; width: 44px; height: 44px;
    border: 0; background: none; cursor: pointer; }
  .nq-subnav { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none;
    padding: 0 0 6px 14px; display: none; min-width: 0; }
  .nq-nav-item.nq-open > .nq-subnav { display: block; }
  .nq-nav-item:hover > .nq-subnav { display: none; }
  .nq-nav-item.nq-open:hover > .nq-subnav { display: block; }
  .nq-subnav .nq-nav-caret { transform: none; }
}

/* ─────────────────────── Sticky header (ζώνη Sticky_header) ────────────── */
/* Δεν είναι το header με position:sticky — είναι ΞΕΧΩΡΙΣΤΗ μπάρα που εμφανίζεται
   όταν το κανονικό header βγει από την οθόνη (theme/js/modules/sticky-header.js).
   Έτσι δουλεύει και μέσα στο <header> του σκελετού, όπου το sticky ξεκολλάει. */
/* ΠΡΟΕΠΙΛΟΓΗ ΦΟΝΤΟΥ: ΛΕΥΚΟ (ιδιοκτήτης 2026-08-23 — «ο sticky να έχει bg άσπρο»).
   Ήταν `var(--nq-header-bg)`, που σε αυτό το theme λύνει σε **#0b0f1a**, δηλαδή
   σχεδόν μαύρο: μια κολλητή μπάρα που περνά πάνω από λευκό περιεχόμενο έβγαινε
   σκούρα πλακέτα. Το `--nq-sticky-bg` μένει ως λαβή, ώστε ένα theme να το
   αλλάξει χωρίς να πειράξει αυτό το αρχείο.
   ⚠️ Το Skin/Styling εξακολουθεί να υπερισχύει (γράφει με `!important`). */
.nq-sticky { position: fixed; inset: 0 0 auto 0; z-index: 950; background: var(--nq-sticky-bg, #fff);
  /* ΧΩΡΙΣ ΓΡΑΜΜΗ ΚΑΤΩ (ιδιοκτητης, 2026-09-07). Ηταν
     `border-bottom: 1px solid var(--nq-line)`. Το εγραψε ως
     `0px solid var(--nq-line)` — λειτουργικα ταυτοσημο με `0`, οποτε γραφεται
     σκετο. Το `--nq-line` μενει διαθεσιμο αν ποτε επιστρεψει η γραμμη.
     ΙΣΧΥΕΙ ΣΕ ΟΛΑ ΤΑ ΠΛΑΤΗ: ο κανονας δοθηκε χωρις media query, σε αντιθεση με
     τα υπολοιπα αιτηματα του ιδιου γυρου που ελεγαν ρητα «στο mobile». */
  border-bottom: 0; box-shadow: 0 6px 20px rgba(16, 24, 40, .07);
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .22s ease, opacity .22s ease, visibility .22s; }
.nq-sticky.is-on { transform: translateY(0); opacity: 1; visibility: visible; }
/* ⚠️ ΕΔΩ ΔΕΝ ΜΠΑΙΝΕΙ ΧΡΩΜΑ ΜΕ `!important` (δοκιμάστηκε 2026-08-23 και
   αφαιρέθηκε αμέσως, με σωστή παρατήρηση του ιδιοκτήτη): ένας τέτοιος κανόνας
   έκανε τη μπάρα λευκή αλλά ΑΚΥΡΩΝΕ το Skin ως σημείο ελέγχου — καμία μετέπειτα
   ρύθμιση φόντου δεν θα φαινόταν. Η προεπιλογή πιο πάνω (`--nq-sticky-bg`) αρκεί·
   ό,τι χρώμα θέλει το site το ορίζει το Skin. */
.nq-sticky .nq-header-in { min-height: 66px; }        /* λίγο χαμηλότερη από το κανονικό */
.nq-sticky .nq-brand img { max-height: 44px; }
/* ── Η STICKY ΩΣ ΓΡΑΜΜΗ ΤΟΥ BUILDER (2026-08-09) ──────────────────────────
   Όταν την ΙΔΙΑ τη γραμμή `#Sticky_header` τη βάφει το `.nq-sticky` (υποδοχή
   κελύφους, PageBuilder::shellSlots), το `.nq-header-in` δεν υπάρχει πια — το
   περιεχόμενο είναι ΣΤΗΛΕΣ. Τα τρία που έδινε εκείνο (container, κάθετο
   κεντράρισμα, ύψος) μπαίνουν εδώ, στο πλέγμα.
   ⚠️ Το `justify-content:space-between` ΔΕΝ χρειάζεται: οι στήλες έχουν πλάτη. */
/* ⚠️ ΕΙΔΙΚΟΤΗΤΑ: το `.nq-sticky` (0,1,0) ΧΑΝΕΙ από το `.pb-row-box{position:relative}`
   του frontend.css — ίδια ειδικότητα, αλλά εκείνο φορτώνεται ΜΕΤΑ (το τυπώνει ο
   PageBuilder μέσα στο σώμα). Αποτέλεσμα: η μπάρα έμενε στη ροή, κυλούσε με τη
   σελίδα και φούσκωνε την κεφαλίδα από 127px σε 194px. Χρειάζεται id + κλάση. */
header > #Sticky_header.nq-sticky {
  position: fixed; inset: 0 0 auto 0; z-index: 950;
  transform: translateY(-100%); opacity: 0; visibility: hidden;
}
header > #Sticky_header.nq-sticky.is-on { transform: translateY(0); opacity: 1; visibility: visible; }

#Sticky_header.nq-sticky > .pb-row {
  width: 100%; max-width: var(--nq-max); margin-inline: auto; padding-inline: 12px;
  align-items: center; min-height: 66px;
}
/* ΔΕΝ μπαίνει `margin-left:auto` στο μενού: η θέση ανήκει στη ΣΤΗΛΗ (πεδίο
   «Οριζόντια στοίχιση» της στήλης), όχι σε κανόνα CSS που αγνοεί τον builder. */
@media print { .nq-sticky { display: none; } }

/* ───────────────────────────── Footer ──────────────────────────────────── */
.nq-footer { margin-top: 60px; border-top: 1px solid var(--nq-line); background: #f9fafb; }
.nq-footer-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 22px; }
.nq-footer-nav .nq-nav { gap: 2px; }
.nq-footer-nav .nq-nav-link { padding: 6px 10px; font-size: 14px; color: var(--nq-muted); }
.nq-copy { margin: 0; color: var(--nq-muted); font-size: 14px; }

/* ─────────────────── Τυπογραφία περιεχομένου (σελίδες κειμένου) ────────── */
/* Ισχύει για σελίδες χωρίς builder: τίτλος, εισαγωγή, παράγραφοι. Κρατά το ίδιο
   μέτρο ανάγνωσης με το hero (~62ch) ώστε το site να διαβάζεται ενιαία. */
.nq-content h1 { margin: 0 0 18px; font-size: clamp(30px, 4vw, 46px); line-height: 1.12;
  letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }
.nq-content h2 { margin: 44px 0 14px; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.25;
  letter-spacing: -.02em; font-weight: 700; }
.nq-content p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: var(--nq-muted); max-width: 62ch; }
/* Η πρώτη παράγραφος μετά από h1 είναι η «εισαγωγή» — λίγο μεγαλύτερη και σκούρα. */
.nq-content h1 + p { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--nq-fg); margin-bottom: 26px; }
.nq-content a { color: var(--nq-accent); }

/* ───────────────────────────── 404 ─────────────────────────────────────── */
.nq-404 { text-align: center; padding: 80px 16px; }
.nq-404 h1 { font-size: 72px; margin: 0 0 6px; letter-spacing: -.04em; }
.nq-404 p { color: var(--nq-muted); }

/* ─────────────────────── Μπάρα συντάκτη (logged-in) ────────────────────── */
.nq-editbar { position: fixed; left: 14px; bottom: 14px; z-index: 1000; display: flex; align-items: center; gap: 12px;
  background: rgba(17, 24, 39, .92); color: #fff; padding: 8px 14px; border-radius: 999px; font-size: 13px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28); backdrop-filter: blur(4px); }
.nq-editbar a { color: #c7d2fe; text-decoration: none; }
.nq-editbar a:hover { color: #fff; text-decoration: underline; }
.nq-editbar-t { opacity: .85; }
@media print { .nq-editbar { display: none; } }

/* ─────────── Γέφυρα Bootstrap → skin ────────────────────────────────────
   Το Bootstrap βάφει το body με var(--bs-body-bg), που είναι λευκό και ΔΕΝ
   περνά από τις Γενικές Ρυθμίσεις. Αποτέλεσμα: όποιο φόντο κι αν οριστεί στο
   skin, το body έμενε λευκό. Εδώ δένουμε τα δύο tokens του Bootstrap πάνω στα
   δικά μας, ώστε το χρώμα να έχει ΜΙΑ πηγή: το skin.
   Καμία σταθερή τιμή — αλλάζεις το skin, αλλάζει το site. */
:root {
  --bs-body-bg: var(--volgh-background);
  --bs-body-color: var(--nq-fg);
}

/* ═══════════════════════════════════════════════════════════════════
   ΦΟΝΤΟ ΜΕ ΣΩΜΑΤΙΔΙΑ — ΟΛΕΣ ΟΙ ΣΕΛΙΔΕΣ (2026-09-07)
   Προσαρμογη του παραδοτεου `webbox-particles.css` στη δικη μας cascade.
   Μπαινει ΕΔΩ και οχι σε νεο module: το 40-base.css φορτωνεται ηδη σε καθε
   σελιδα, οποτε δεν χρειαζεται νεα εγγραφη αρχειου ουτε δευτερο bundle.

   ΤΙ ΑΛΛΑΞΕ ΑΠΟ ΤΟ ΠΑΡΑΔΟΤΕΟ, ΚΑΙ ΓΙΑΤΙ:

   1. ΑΦΑΙΡΕΘΗΚΕ ΤΟ `html, body { background: #050505 }`. Θα αλλαζε σιωπηλα το
      φοντο ΚΑΘΕ σελιδας του site. Το `body` μας ειναι ηδη μαυρο και το φοντο
      το δινει το ιδιο το layer οπου χρειαζεται.

   2. ΔΕΝ ΓΡΑΦΤΗΚΕ ΤΟ `.wbx-page-content { z-index: 1 }`. Δεν εχουμε τετοιο
      wrapper· το αντιστοιχο ειναι το <main>, που ειναι `position: static`. Αν
      του δινοταν `z-index: 1`, στις ΑΛΛΕΣ σελιδες ο header ειναι `z-index:
      auto` και θα περναγε ΑΠΟ ΚΑΤΩ απο το περιεχομενο — σπασμενο μενου. Δεν
      χρειαζεται ομως καθολου: οι ενοτητες μας ειναι ηδη `position: relative`,
      αρα ζωγραφιζονται στο βημα των τοποθετημενων στοιχειων, ΜΕΤΑ το layer που
      ερχεται πρωτο στο DOM. Ο κανονας θα μπει ΜΟΝΟ αν μετρηθει οτι χρειαζεται.

   3. 🔴 ΣΤΟ ΚΙΝΗΤΟ ΤΟ LAYER ΜΕΝΕΙ ΔΙΑΦΑΝΟ. Εκει υπαρχει ηδη το σταθερο
      `video.nq-mobile-fixed-page-video` (`position: fixed; z-index: 0`) και ο
      ιδιοκτητης ζητησε να συνυπαρξουν. Με το αδιαφανες `#050505` του
      παραδοτεου, το layer θα εκρυβε το video ΟΛΟΚΛΗΡΟ.

   4. ΤΟ LAYER ΜΕΝΕΙ ΚΑΤΩ ΑΠΟ ΤΟ VIDEO, ΟΧΙ ΠΑΝΩ — διαφορα απο την προταση που
      μου ηρθε, με μετρησιμο λογο. Το video ζει ΜΕΣΑ στο <main>. Ενα layer που
      ειναι ΕΞΩ απο το <main> ΔΕΝ γινεται να μπει αναμεσα στο video και στο
      κειμενο: μολις το <main> παρει z-index, ΟΛΟ του το υποδεντρο —
      video ΚΑΙ κειμενο μαζι — ανεβαινει ως ενιαια μοναδα πανω απο το layer.
      Η στοιβαξη που δουλευει ειναι: σωματιδια → video (50% διαφανο) → κειμενο.
      Και τα δυο φαινονται, με το video να χρωματιζει τα σωματιδια απο πανω.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --wbx-particle-1: #116cff;
  --wbx-particle-2: #5257ff;
  --wbx-particle-3: #7557ff;
  --wbx-particle-4: #9b7cff;
  /* ΤΟ ΦΟΝΤΟ ΗΡΕΜΙΑΣ ΤΟΥ LAYER. Πηγε #050505 → #000 (ιδιοκτητης, 2026-09-07):
     «το bg να γινεται πιο μαυρο στο default του». Στην ηρεμια το
     `--wbx-dot-glow` ειναι 0, αρα το tint εχει opacity 0 και δεν συμμετεχει —
     ο,τι φαινεται ειναι ΚΑΘΑΡΑ αυτη η τιμη.
     Ταυτιζεται πλεον με το φοντο του `body`. Μενει γραμμενη ρητα και δεν
     σβηνεται: το layer ειναι fixed και καλυπτει ολο το viewport, οποτε
     εγγυαται σταθερη βαση ανεξαρτητα απο το τι εχει η καθε σελιδα απο κατω. */
  --wbx-particles-bg: #000;
}
/* 🔴 ΤΟ @property ΕΙΝΑΙ Ο ΛΟΓΟΣ ΠΟΥ ΤΟ ΠΕΡΑΣΜΑ ΓΙΝΕΤΑΙ ΟΜΑΛΟ — ΜΗΝ ΤΟ ΣΒΗΣΕΙΣ.
   Μια ΑΔΗΛΩΤΗ custom property ειναι για τον browser σκετο κειμενο: αλλαζει
   καρφι, χωρις ενδιαμεσες τιμες, οσα `transition` κι αν γραφτουν. Δηλωμενη ως
   `<color>`, γινεται animatable και το transition δουλευει κανονικα.
   Το `inherits: true` ειναι επισης απαραιτητο: η τιμη γραφεται στο
   `.wbx-particles` απο το JS, αλλα τη ΔΙΑΒΑΖΕΙ το `::before`. */
@property --wbx-dot-color {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 255, 255, .14);
}
/* Η ΦΩΤΕΙΝΟΤΗΤΑ ΤΩΝ ΚΟΥΚΚΙΔΩΝ, 0..1. Τη γραφει το JS ακολουθωντας ΤΗΝ ΙΔΙΑ
   καμπυλη που φουσκωνει τα σωματιδια, οποτε φως και φουσκωμα κινουνται μαζι.
   🔴 ΕΠΙΤΗΔΕΣ ΧΩΡΙΣ transition — σε αντιθεση με το --wbx-dot-color απο πανω.
   Εκει το JS δινει ΜΙΑ τιμη ανα ενοτητα και το CSS κανει το ταξιδι· εδω το JS
   δινει ηδη ολα τα ενδιαμεσα. Ενα transition θα προσθετε καθυστερηση πανω σε
   μια κινηση που ηδη τρεχει, και θα πολεμουσε την καμπυλη. */
@property --wbx-dot-glow {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.wbx-particles {
  /* Η μεταβλητη γραφεται ΕΔΩ απο το webbox-particles.js, καθε φορα που μια
     ενοτητα περναει το κεντρο του viewport (κυκλικα στην παλετα). Αρα το
     transition πρεπει να ειναι ΕΔΩ, οχι στο ::before — το ψευδοστοιχειο απλως
     κληρονομει μια τιμη που ηδη κινειται. */
  transition: --wbx-dot-color 1.1s ease;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--wbx-particles-bg);
  pointer-events: none;
}
/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 🔴 Η ΟΡΑΤΗ ΕΝΤΑΣΗ ΤΩΝ ΚΟΥΚΚΙΔΩΝ ΕΙΝΑΙ ΓΙΝΟΜΕΝΟ ΔΥΟ ΤΙΜΩΝ         ║
   ║    ΣΕ ΔΥΟ ΔΙΑΦΟΡΕΤΙΚΑ ΑΡΧΕΙΑ. ΔΕΝ ΕΙΣΑΙ ΜΟΝΟΣ ΣΕ ΑΥΤΟ.           ║
   ╚══════════════════════════════════════════════════════════════════╝
     ① `DOT_ALPHA` στο `theme/js/webbox-particles.js`  — τωρα **.20**
        (μπαινει μεσα στο `--wbx-dot-color` που γραφει το JS)
     ② `opacity` του `::before` εδω κατω           — .48 οθονη / .68 κινητο

     ΟΡΑΤΟ ΑΠΟΤΕΛΕΣΜΑ = ① × ②  →  οθονη .096 · κινητο .136

   ΤΟ ΙΔΙΟ ① ΤΡΟΦΟΔΟΤΕΙ ΚΑΙ ΤΗΝ ΑΠΟΧΡΩΣΗ ΤΟΥ ΦΟΝΤΟΥ (`.wbx-particles-tint`,
   συντελεστης .11). Αρα αλλαγη του ① μετακινει ΤΡΙΑ πραγματα ταυτοχρονα:
   κουκκιδες οθονης, κουκκιδων κινητου, και αποχρωση φοντου.

   ⚠️ ΤΙ ΠΗΓΕ ΣΤΡΑΒΑ ΜΙΑ ΦΟΡΑ (2026-09-07), ΓΙΑ ΝΑ ΜΗΝ ΞΑΝΑΓΙΝΕΙ:
   Το αιτημα «οι κουκκιδες λιγοτερο ορατες» εφτασε ΤΑΥΤΟΧΡΟΝΑ σε δυο agents.
   Ο ενας κατεβασε το ①, ο αλλος το ②, καθενας σωστα — αλλα επειδη
   ΠΟΛΛΑΠΛΑΣΙΑΖΟΝΤΑΙ, η μειωση βγηκε 39% αντι για τα ~22% που θα εδινε η
   καθεμια. Το ② επανηλθε και κρατηθηκε μονο το ①.
   ΚΑΝΟΝΑΣ: για καθε αιτημα ΕΝΤΑΣΗΣ, συνεννοηση ΠΡΙΝ την αλλαγη τιμης. */
/* Το πλεγμα κουκκιδων. `isolation: isolate` στον γονια το κραταει μεσα. */
.wbx-particles::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  /* ΤΟ ΕΦΕΔΡΙΚΟ ΧΡΩΜΑ ΣΤΟ var() ΔΕΝ ΠΕΡΙΣΣΕΥΕΙ: οπου δεν υποστηριζεται το
     `@property` (παλιοτερα Safari), η μεταβλητη ειναι αδηλωτη και ΑΟΡΙΣΤΗ
     ωσπου να τρεξει το JS. Χωρις εφεδρικη τιμη, ολη η δηλωση `background-image`
     θα ηταν ακυρη και το πλεγμα κουκκιδων ΔΕΝ θα ζωγραφιζοταν καθολου. */
  background-image: radial-gradient(circle, var(--wbx-dot-color, rgba(255, 255, 255, .14)) 0 1px, transparent 1.25px);
  background-size: 18px 18px;
  /* ΗΡΕΜΙΑ .48 → ΚΟΡΥΦΩΣΗ .90. Το `.42` ειναι το ποσο ανεβαινει.
     🔴 Η ΚΙΝΗΣΗ ΓΙΝΕΤΑΙ ΣΤΟ opacity ΚΑΙ ΟΧΙ ΣΤΟ ΧΡΩΜΑ, ΓΙΑ ΛΟΓΟ ΚΟΣΤΟΥΣ:
     το χρωμα των κουκκιδων ζει μεσα στο `background-image`. Αλλαγη του σε καθε
     καρε θα αναγκαζε τον browser να ΞΑΝΑΖΩΓΡΑΦΙΣΕΙ ολη την επιφανεια της
     οθονης 60 φορες το δευτερολεπτο — ακριβως η παγιδα του `filter: blur` που
     ξηλωσαμε. Το `opacity` το χειριζεται ο compositor χωρις επανασχεδιαση.
     (Το ΧΡΩΜΑ αλλαζει μια φορα ανα ενοτητα, εκει το κοστος ειναι αμελητεο.) */
  /* ΒΗΜΑ ΚΛΙΜΑΚΩΣΗΣ .42 → .32 (ιδιοκτητης, 2026-09-07: «οι τελειες να μην
     γινονται τοσο light στην κλιμακωση, ενα τονο κατω»). Η ΒΑΣΗ .48 ΔΕΝ
     αγγιζεται — αλλο η ηρεμια, αλλο η διαδρομη.
     Κορυφωση: .48 + (.60 × .32) = .672 (ηταν .732). */
  /* 🔴 ΤΟ ΔΕΥΤΕΡΟ ΓΙΝΟΜΕΝΟ ΣΒΗΝΕΙ ΤΙΣ ΚΟΥΚΚΙΔΕΣ ΜΕΣΑ ΣΤΗ ΖΩΝΗ ΤΟΝΟΥ
     (ιδιοκτητης, 2026-09-07: «οι κουκκιδες να εχουν το ιδιο χρωμα με το bg»).

     ΓΙΑΤΙ ΣΒΗΣΙΜΟ ΚΑΙ ΟΧΙ ΒΑΨΙΜΟ ΣΤΟ ΧΡΩΜΑ ΤΟΥ ΦΟΝΤΟΥ: μια κουκκιδα βαμμενη
     ΑΚΡΙΒΩΣ στο χρωμα του φοντου της ειναι αορατη — τα δυο δινουν πανομοιοτυπα
     εικονοστοιχεια. Ομως ο τονος ειναι ΜΕΤΑΒΛΗΤΟΣ: στα ενδιαμεσα σταδια το
     φοντο ΔΕΝ ειναι #080a12, ειναι καπου αναμεσα στο μαυρο και σε αυτο. Καρφωτο
     χρωμα θα ηταν ΟΡΑΤΟ σε ολη τη μεταβαση και θα εξαφανιζοταν μονο στην
     κορυφωση — τρεμοπαιγμα ακριβως εκει που θελουμε ομαλοτητα. Με το γινομενο,
     οι κουκκιδες χανονται ΑΝΑΛΟΓΙΚΑ, σε καθε ενδιαμεση τιμη.

     ΚΑΙ ΔΕΥΤΕΡΟΣ ΛΟΓΟΣ: το χρωμα των κουκκιδων το γραφει το JS και αλλαζει σε
     καθε ενοτητα. Κλειδωμα σε σταθερο χρωμα θα εβαζε το CSS να παλευει με τιμη
     που γραφεται δυναμικα — η ιδια συγκρουση που εχει ηδη κοστισει δυο φορες.
     Με το opacity, ΚΑΝΕΙΣ δεν αγγιζει το χρωμα. */
  opacity: calc((.48 + var(--wbx-dot-glow, 0) * .32) * (1 - var(--wbx-bg-tone, 0)));
}
/* Η ΑΠΟΧΡΩΣΗ ΤΟΥ ΦΟΝΤΟΥ ΑΝΑ ΕΝΟΤΗΤΑ (ιδιοκτητης, 2026-09-07): «γινεται να
   κανει το ιδιο με τις κουκκιδες το bg;»

   ΓΙΑΤΙ ΞΕΧΩΡΙΣΤΟ ΣΤΟΙΧΕΙΟ ΚΑΙ ΟΧΙ background ΣΤΟ ΙΔΙΟ ΤΟ LAYER: το
   `.wbx-particles` πιανει ολο το viewport. Αλλαγη του `background-color` του σε
   καθε καρε θα ξαναζωγραφιζε ολη την οθονη 60 φορες το δευτερολεπτο. Εδω
   κινειται ΜΟΝΟ το `opacity`, που το χειριζεται ο compositor χωρις
   επανασχεδιαση — ιδιο σκεπτικο με τις κουκκιδες και με το `filter: blur` που
   ξηλωσαμε.

   🔴 z-index: -1 ΚΑΙ ΟΧΙ 0. Το `::before` (κουκκιδες) ειναι z-index 0 και, ως
   ψευδοστοιχειο, μετραει ΠΡΩΤΟ παιδι — αρα με ισο z-index το <span>, που
   ερχεται μετα, θα ζωγραφιζοταν ΠΑΝΩ στις κουκκιδες και θα τις θολωνε. Το
   ζητουμενο ειναι να χρωματιστει το ΦΟΝΤΟ, δηλαδη κατω απο αυτες.
   Το -1 μενει μεσα στο layer χαρη στο `isolation: isolate` του γονια, και
   ζωγραφιζεται ΠΑΝΩ απο το δικο του `background-color: #050505`.
   Τελικη σειρα: #050505 → αποχρωση → κουκκιδες → σωματιδια → βινιετα.

   ΤΟ ΝΟΥΜΕΡΟ ΒΓΑΙΝΕΙ ΑΠΟ ΠΟΛΛΑΠΛΑΣΙΑΣΜΟ, ΔΕΝ ΕΙΝΑΙ ΑΥΘΑΙΡΕΤΟ: το
   `--wbx-dot-color` κουβαλαει ηδη alpha .26 απο το JS, αρα η πραγματικη
   καλυψη στην κορυφωση ειναι ο συντελεστης × .26.
     .10 → .026  πρακτικα αορατο (η αρχικη προταση)
     .40 → .104  πρωτη εκδοχη, «εφτανε πολυ light» κατα τον ιδιοκτητη
     .22 → .057  δευτερη εκδοχη, «συνεχιζει στην κορυφωση να ειναι πολυ light»
     .11 → .029  ΤΩΡΑ — μολις διακριτο πεπλο στην κορυφωση
   🔴 ΟΠΟΙΟΣ ΑΛΛΑΞΕΙ ΤΟ alpha ΣΤΟ JS ΑΛΛΑΖΕΙ ΚΑΙ ΑΥΤΟ — πολλαπλασιαζονται.
   🔴 ΚΑΙ ΤΟ ΑΝΤΙΣΤΡΟΦΟ, ΠΟΥ ΕΙΝΑΙ Η ΠΑΓΙΔΑ: το `--wbx-dot-color` το
   ΜΟΙΡΑΖΟΝΤΑΙ η αποχρωση του φοντου ΚΑΙ οι κουκκιδες.
   ΣΗΜΕΙΩΣΗ ΓΙΑ ΤΟ ΠΟΥ ΕΙΜΑΣΤΕ: το εφε ΥΠΑΡΧΕΙ μονο στην κορυφωση — σε ηρεμια
   το `--wbx-dot-glow` ειναι ~0, αρα το tint ειναι κυριολεκτικα αορατο. Καθε
   παραπονο για «πολυ light» αφορα εξ ορισμου την κορυφη, και η μονη βιδα ειναι
   αυτος ο συντελεστης. Κατω απο ~.08 το εφε παυει να διαβαζεται· εκει το σωστο
   ερωτημα δεν ειναι «ποσο λιγοτερο» αλλα «το θελουμε καθολου;». Οταν ζητηθει «λιγοτερο
   φοντο», η διορθωση ειναι ΜΟΝΟ αυτος ο συντελεστης· κατεβασμα του alpha θα
   ξεθωριαζε και τις κουκκιδες, που δεν το ζητησε κανεις. */
.wbx-particles-tint {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--wbx-dot-color, #5257ff);
  /* ΣΥΝΤΕΛΕΣΤΗΣ .11 → .15 («το svg bg να κλιμακωνεται λιγο ακομα»).
     Καλυψη στην κορυφωση: .60 × .15 × alpha .20 = 1.80% (ηταν 1.32%). */
  opacity: calc(var(--wbx-dot-glow, 0) * .15);
  pointer-events: none;
}
/* ΤΟΝΟΣ ΦΟΝΤΟΥ ΑΝΑ ΕΝΟΤΗΤΑ (ιδιοκτητης, 2026-09-07): η ζωνη «Τουρισμος στην
   Κερκυρα» βαφει ΟΛΟ το φοντο #080910 οσο βρισκεται στο κατω μισο της οθονης,
   και επανερχεται ομαλα μολις ανεβει πανω απο τη μεση.

   ΤΟ ΧΡΩΜΑ ΖΕΙ ΕΔΩ, ΤΟ «ΠΟΣΟ» ΣΤΟ JS. Η μεταβλητη `--wbx-bg-tone` ειναι σκετος
   αριθμος 0..1 — αρα η αποχρωση αλλαζει απο CSS, χωρις κωδικα, και μια δευτερη
   κλαση μπορει καποτε να δωσει αλλο χρωμα σε αλλη ενοτητα.

   ΧΩΡΙΣ ΣΥΝΤΕΛΕΣΤΗ, ΣΕ ΑΝΤΙΘΕΣΗ ΜΕ ΤΟ tint: εκει το χρωμα κουβαλαει δικο του
   alpha και πολλαπλασιαζεται· εδω το #080910 ειναι αδιαφανο, οποτε στο 1
   βλεπεις ΑΚΡΙΒΩΣ αυτο το χρωμα. Η μεταβλητη μπαινει αυτουσια.

   🔴 ΚΑΘΕΤΑΙ ΠΑΝΩ ΑΠΟ ΤΟ tint, ΟΧΙ ΑΠΟ ΚΑΤΩ. Και τα δυο ειναι `z-index: -1`,
   οποτε αποφασιζει η σειρα στο DOM και το tone ερχεται δευτερο. ΣΥΝΕΠΕΙΑ: οσο
   ο τονος δυναμωνει, ΣΚΕΠΑΖΕΙ την αποχρωση της ενοτητας. Ειναι λογικο για
   αυτη τη ζωνη — εχει ηδη δικο της συμπαγες #080910 και θελει επιπεδο χρωμα,
   οχι δυο στρωσεις — αλλα καταγραφεται ρητα: αν καποτε ζητηθει να φαινονται
   ΚΑΙ ΤΑ ΔΥΟ, το tone θελει `z-index: -2` και ο γονιος κραταει το isolate.

   ΤΟ prefers-reduced-motion ΔΕΝ ΕΧΕΙ ΕΔΩ ΤΙ ΝΑ ΣΒΗΣΕΙ: δεν υπαρχει CSS
   transition — την εξομαλυνση (0.70s) την κανει το JS. Το χρωμα ειναι χρωμα
   ενοτητας, οχι διακοσμηση κινησης, οποτε σωστα παραμενει. Αν ζητηθει ακαριαιο,
   ειναι αλλαγη στο JS. */
.wbx-particles-tone {
  position: absolute;
  z-index: -1;
  inset: 0;
  /* ΤΟ ΧΡΩΜΑ ΕΙΝΑΙ ΜΕΤΡΗΜΕΝΟ ΑΠΟ ΤΗΝ ΕΙΚΟΝΑ, ΟΧΙ ΕΠΙΛΕΓΜΕΝΟ (2026-09-07):
     «το background πρεπει να ειναι ιδιο με τις ακρες της φωτογραφιας».
     Πηγη: `theme/assets/demo5/hotel-availability-webbox-visual.webp` (1040×1040).
     Δειγματοληψια ολου του περιγραμματος, 2px μεσα, ~830 δειγματα:
       μεσος ορος  rgb(8, 10, 18) = **#080a12**  ← αυτο μπηκε
       συχνοτερο   rgb(7, 8, 14)  = #07080e  (228 δειγματα)
       γωνιες      (5,6,15) (7,8,14) (8,12,20) (8,9,17)
     Ηταν #080910, δηλαδη απειχε 1-2 μοναδες ανα καναλι — η αλλαγη ειναι
     πρακτικα αορατη, αλλα τωρα η τιμη ΞΑΝΑΒΓΑΙΝΕΙ αν αλλαξει η εικονα.

     ⚠️ ΟΙ ΔΥΟ ΕΙΚΟΝΕΣ ΤΗΣ ΖΩΝΗΣ ΘΕΛΟΥΝ ΔΙΑΦΟΡΕΤΙΚΟ ΦΟΝΤΟ — ΔΕΝ ΛΥΝΕΤΑΙ ΕΔΩ.
     Το `hosting-visual.webp` της ιδιας ζωνης εχει ΚΑΘΑΡΟ ΜΑΥΡΟ περιγραμμα
     (rgb 0,0,0 σε 690/690 δειγματα). Με ενα χρωμα φοντου δεν «εξαφανιζονται»
     και οι δυο. Αν ζητηθει, ο σωστος δρομος ειναι να ξαναβγει η δευτερη εικονα
     με το ιδιο φοντο — οχι συμβιβασμος στο CSS, που θα χαλαγε και τις δυο. */
  background: #080a12;
  opacity: var(--wbx-bg-tone, 0);
  pointer-events: none;
}

/* Η σκουρα βινιετα, ΠΑΝΩ απο τα σωματιδια (z-index 2 > canvas 1).

   🔴 ΜΕΝΕΙ ΚΑΙ ΜΕ ΜΑΥΡΟ ΦΟΝΤΟ — ΜΗΝ ΤΗ ΒΓΑΛΕΙΣ ΩΣ «ΑΧΡΗΣΤΗ». Οταν το φοντο
   εγινε #000, η προφανης σκεψη ειναι οτι μαυρο πανω σε μαυρο δεν κανει τιποτα.
   Ισχυει ΜΟΝΟ για το φοντο. Η βινιετα ειναι `z-index: 2`, δηλαδη ΠΑΝΩ απο τον
   καμβα (1) και απο τις κουκκιδες (0) — αρα ο ρολος της δεν ηταν ποτε να
   σκουρυνει το φοντο, αλλα να ΣΒΗΝΕΙ ΤΑ ΣΩΜΑΤΙΔΙΑ ΚΑΙ ΤΙΣ ΚΟΥΚΚΙΔΕΣ προς τις
   ακρες. Αυτο συνεχιζει να δουλευει ακριβως το ιδιο. */
/* ΤΟ ΛΕΥΚΟ ΣΤΡΩΜΑ — ΟΜΑΛΗ ΜΕΤΑΒΑΣΗ ΟΛΟΥ ΤΟΥ ΦΟΝΤΟΥ ΣΕ ΑΝΟΙΧΤΟ
   (ιδιοκτητης, 2026-09-08): «το svg bg και τελειες υπαρχουν ουτως η αλλως σε
   ολη τη σελιδα — εμεις θελουμε smooth transition απο μαυρο bg σε ασπρο,
   τελιες και γραμματα το αντιθετο».

   ΙΔΙΟΣ ΜΗΧΑΝΙΣΜΟΣ ΜΕ ΤΟ `.wbx-particles-tone`, ΑΛΛΗ ΜΕΤΑΒΛΗΤΗ: το JS γραφει
   `--wbx-bg-light` 0..1 με την ιδια εξομαλυνση, οταν μια ενοτητα `.wbx-light`
   περναει κατω απο τη μεση της οθονης. Δεν υπαρχει CSS transition εδω — την
   ομαλοτητα τη δινει το JS, οπως και στον τονο.

   🔴 z-index: 0 ΚΑΙ ΟΧΙ -1, ΣΕ ΑΝΤΙΘΕΣΗ ΜΕ ΤΟ tone. Το tone βαφει ΦΟΝΤΟ, αρα
   πρεπει να μεινει ΚΑΤΩ απο τις κουκκιδες. Εδω το ζητουμενο ειναι να ΓΥΡΙΣΟΥΝ
   ΚΑΙ ΟΙ ΚΟΥΚΚΙΔΕΣ: μαυρες πανω σε λευκο. Με ισο z-index (0) αποφασιζει η
   σειρα στο DOM, και το <span> ερχεται ΜΕΤΑ το `::before` — αρα το σκεπαζει.
   Παραμενει ομως ΚΑΤΩ απο τον καμβα (z-index 1), ωστε τα σωματιδια να
   συνεχιζουν να πετανε και μεσα στη λευκη ζωνη.

   ΤΟ ΠΛΕΓΜΑ ΕΙΝΑΙ ΤΟ ΙΔΙΟ, ΟΧΙ ΠΑΡΟΜΟΙΟ: 18px βημα και ιδιο σχημα κουκκιδας
   με το `::before`, και τα δυο `inset: 0` στον ιδιο γονια — αρα ΙΔΙΑ ΑΡΧΗ
   ΑΞΟΝΩΝ. Οι κουκκιδες δεν μετατοπιζονται καθως γινεται η εναλλαγη· απλως
   αλλαζουν χρωμα. Αν αλλαξει το βημα στο `::before`, πρεπει να αλλαξει ΚΑΙ ΕΔΩ.

   ⚠️ ΤΟ ΛΕΥΚΟ ΕΙΝΑΙ ΚΑΘΟΛΙΚΟ, ΟΧΙ ΤΗΣ ΕΝΟΤΗΤΑΣ. Οσο ειναι στο 1, ΟΛΟ το
   viewport ειναι λευκο — αρα καθε γειτονικη ενοτητα που φαινεται ταυτοχρονα
   δειχνει τα λευκα της κειμενα πανω σε λευκο. Δουλευει εδω επειδη η ζωνη
   «Η Διαδικασια» ειναι ψηλη και πιανει μονη της την οθονη. Πριν μπει η κλαση
   σε κοντη ενοτητα, θελει ελεγχο. */
.wbx-particles-light {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-color: #ffffff;
  /* ΔΙΑΔΡΟΜΗ ΤΟΥ alpha: .11 → **.075** (ιδιοκτητης, 2026-09-08: «οι τελιες στο
     ασπρο φοντο να γινουν λιγο πιο light ωστε να μη φαινονται τοσο πολυ»).

     ΓΙΑΤΙ ΤΟ .11 ΕΒΓΑΙΝΕ ΠΙΟ ΔΥΝΑΤΟ ΑΠΟ ΤΙΣ ΣΚΟΥΡΕΣ ΚΟΥΚΚΙΔΕΣ, ΑΝ ΚΑΙ ΜΟΙΑΖΕΙ
     ΜΙΚΡΟ: οι σκουρες ειναι ΓΙΝΟΜΕΝΟ δυο τιμων — `DOT_ALPHA` .20 (JS) επι
     `opacity` .48 του `::before` = **.096** πραγματικη καλυψη. Εδω ΔΕΝ υπαρχει
     δευτερος συντελεστης: το `opacity` του στρωματος ειναι η μεταβλητη της
     μεταβασης (0..1), αρα στην κορυφωση το alpha βγαινει αυτουσιο. Δηλαδη
     .11 > .096 — και μαυρο σε λευκο διαβαζεται ΕΝΤΟΝΟΤΕΡΑ απο λευκο σε μαυρο.
     Το .075 το φερνει σαφως κατω απο το σκουρο πλεγμα.

     🔴 ΕΔΩ ΑΛΛΑΖΕΙ ΜΟΝΟ ΑΥΤΟ ΤΟ ΝΟΥΜΕΡΟ. Καμια σχεση με το `DOT_ALPHA` του JS,
     που αφορα το ΣΚΟΥΡΟ πλεγμα ολου του site. */
  background-image: radial-gradient(circle, rgba(0, 0, 0, .075) 0 1px, transparent 1.25px);
  background-size: 18px 18px;
  opacity: var(--wbx-bg-light, 0);
  pointer-events: none;
}
.wbx-particles::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 32%, rgba(0, 0, 0, .24) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .14));
  /* 🔴 Η ΒΙΝΙΕΤΑ ΣΒΗΝΕΙ ΟΣΟ ΜΠΑΙΝΕΙ Ο ΤΟΝΟΣ ΤΗΣ ΖΩΝΗΣ (ιδιοκτητης,
     2026-09-07: «δεν παιρνει 100% το χρωμα»).

     ΤΟ ΠΡΟΒΛΗΜΑ ΗΤΑΝ ΣΕΙΡΑ ΖΩΓΡΑΦΙΚΗΣ, ΟΧΙ ΤΙΜΗ: η στοιβαξη ειναι
       tone (-1) → κουκκιδες (0) → καμβας (1) → **βινιετα (2)**
     Ακομη κι οταν το `--wbx-bg-tone` εφτανε 1.000, ο χρηστης ΔΕΝ εβλεπε
     #080910 — εβλεπε #080910 σκοτεινιασμενο εως 24% στην περιφερεια απο τη
     βινιετα που καθεται απο πανω. Το κεντρο εβγαινε σωστο, οι ακρες οχι.

     Η ΛΥΣΗ ΔΕΝ ΕΙΝΑΙ ΝΑ ΑΝΕΒΕΙ ΤΟ tone ΠΑΝΩ ΑΠΟ ΤΗ ΒΙΝΙΕΤΑ: θα σκεπαζε και
     τον καμβα, δηλαδη μεσα σε ολη τη ζωνη τα σωματιδια θα εξαφανιζονταν και θα
     εμενε επιπεδο χρωμα. Το εμποδιο ειναι η βινιετα, οχι η σειρα.

     ΔΕΝ ΧΡΕΙΑΖΕΤΑΙ ΔΙΚΟ ΤΗΣ transition: ακολουθει ΤΗΝ ΙΔΙΑ μεταβλητη με τον
     τονο, αρα ειναι εξ ορισμου συγχρονισμενη μαζι του — σβηνει με τον ιδιο
     ρυθμο που μπαινει το χρωμα και επιστρεφει με τον ιδιο ρυθμο που φευγει. */
  /* ΚΑΙ ΓΙΑ ΤΟ ΛΕΥΚΟ ΣΤΡΩΜΑ, ΓΙΑ ΤΟΝ ΙΔΙΟ ΑΚΡΙΒΩΣ ΛΟΓΟ (2026-09-08): η
     βινιετα καθεται ΠΑΝΩ απ' ολα (z-index 2), οποτε χωρις αυτο το λευκο θα
     εβγαινε σκουρο εως 24% στην περιφερεια — «δεν παιρνει 100% το χρωμα»,
     το ιδιο συμπτωμα με τον τονο. Το `max()` κρατα οποιο απο τα δυο ειναι
     ενεργο· δεν αθροιζονται, γιατι δεν συνυπαρχουν ποτε. */
  opacity: calc(1 - max(var(--wbx-bg-tone, 0), var(--wbx-bg-light, 0)));
}
/* ΤΑ ΣΩΜΑΤΙΔΙΑ ΠΙΟ ΔΙΑΚΡΙΤΙΚΑ (ιδιοκτητης, 2026-09-07): opacity .55.
   Μπαινει στο CANVAS, οχι στο layer: το layer κουβαλαει και το πλεγμα
   κουκκιδων (::before) και τη βινιετα (::after) — με opacity στο layer θα
   ξεθωριαζαν και αυτα, ενω ζητηθηκαν πιο διακριτικα ΤΑ ΣΩΜΑΤΙΔΙΑ.
   Στο κινητο τα σωματιδια πεφτουν πανω στο video, οποτε το .55 βοηθαει και
   εκει να μην «πνιγει» το ενα το αλλο. Η ενταση ρυθμιζεται και απο το JS
   (globalAlpha .96 και το glow) — αν χρειαστει λεπτομερεστερος ελεγχος ανα
   μεγεθος σωματιδιου, γινεται εκει· εδω ειναι ενιαιο και αμεσο. */
.wbx-particles canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .55;
/* 🔴 ΕΔΩ ΗΤΑΝ `filter: blur(1.5px)` ΚΑΙ ΞΗΛΩΘΗΚΕ — ΜΗΝ ΤΟ ΞΑΝΑΒΑΛΕΙΣ.
     Μπηκε 2026-09-07 για τις «μαλακες ακρες» και ηταν ΛΑΘΟΣ ΕΡΓΑΛΕΙΟ:

     ΚΟΣΤΟΣ. Το `filter` σε στοιχειο που ΞΑΝΑΖΩΓΡΑΦΙΖΕΤΑΙ ΚΑΘΕ ΚΑΡΕ δεν
     υπολογιζεται μια φορα — ο compositor το ξαναπερναει σε ΟΛΗ την επιφανεια,
     60 φορες το δευτερολεπτο. Σε κινητο ειναι ενα full-screen περασμα πανω σε
     καμβα που ηδη ζωγραφιζει, και κλιμακωνεται με το ΜΕΓΕΘΟΣ ΤΗΣ ΟΘΟΝΗΣ.

     ΑΠΟΤΕΛΕΣΜΑ. Το θολωμα ηταν ΣΤΑΘΕΡΟ 1.5px για ολα: ετρωγε τα μικρα
     σωματιδια των 4px και μολις που φαινοταν στα μεγαλα των 10px.

     ΑΝΤΙΚΑΤΑΣΤΑΘΗΚΕ ΑΠΟ ΤΟ ΣΧΕΔΙΟ: το `webbox-particles.js` γεμιζει πλεον το
     σωμα με `createRadialGradient` — ιδιο πληθος γεμισματων ανα καρε, αρα το
     κοστος ΔΕΝ εξαρταται απο την οθονη, και η ακρη ειναι ΑΝΑΛΟΓΙΚΗ: το μικρο
     παιρνει μαλακη ακρη 55% της ακτινας του, τα μεγαλα κοβονται στα 2.2px ωστε
     να μη γινουν συννεφα.

     ΑΝ ΞΑΝΑΖΗΤΗΘΟΥΝ ΠΙΟ ΜΑΛΑΚΕΣ ΑΚΡΕΣ, η ρυθμιση ειναι ΕΚΕΙ, οχι εδω.
     Το `opacity` απο κατω μενει: ειναι ιδιοτητα του compositor, οχι φιλτρο,
     και δεν κοστιζει ανα καρε. */
}
/* Ενοτητα που πρεπει να αποκαλυψει το animation. Χρησιμοποιειται ΜΟΝΟ οπου
   υπαρχει αδιαφανο φοντο που πρεπει να φυγει — δεν μπαινει προληπτικα. */
.wbx-particles-visible {
  background-color: transparent;
}

/* 🔴 ΤΟ ΣΩΜΑ ΤΗΣ ΣΕΛΙΔΑΣ ΠΡΕΠΕΙ ΝΑ ΕΙΝΑΙ **ΤΟΠΟΘΕΤΗΜΕΝΟ**, ΑΛΛΙΩΣ ΤΟ
   ΣΤΡΩΜΑ ΤΟ ΣΚΕΠΑΖΕΙ ΟΛΟΚΛΗΡΟ (μετρηθηκε 2026-09-09 στην /kataskevi-istoselidon,
   id=10: η σελιδα εβγαινε ΤΕΛΕΙΩΣ μαυρη με μονο τις κουκκιδες).

   ΓΙΑΤΙ: το `.wbx-particles` ειναι ΠΡΩΤΟ ΠΑΙΔΙ του `body`, `fixed`, `z-index: 0`
   και ΑΔΙΑΦΑΝΟ (`--wbx-particles-bg: #000`). Τα τοποθετημενα στοιχεια με
   z-index 0/auto ζωγραφιζονται στο **βημα 8**, ΜΕΤΑ απο ολο το αστατο (static)
   περιεχομενο, που ζωγραφιζεται στα βηματα 4-7. Αρα:
     header (position: relative) -> βημα 8, ΜΕΤΑ το στρωμα -> φαινεται
     footer  (z-index: 2)        -> πανω απ' ολα            -> φαινεται
     main / #Breadcrumbs (static)-> βηματα 4-7, ΠΡΙΝ το στρωμα -> ΚΡΥΒΟΝΤΑΙ
   Στις σελιδες Demo 5 δεν φαινοταν γιατι ΕΚΕΙ καθε `.pb-section` ειναι
   `position: relative` απο μονη της. Οι υπολοιπες σελιδες δεν εχουν τιποτα.

   🔴 ΧΩΡΙΣ `z-index` - ΜΗΝ ΤΟ ΠΡΟΣΘΕΣΕΙΣ.
   Σκετο `position: relative` ΔΕΝ φτιαχνει stacking context. Δυο πραγματα
   κρεμονται απο αυτο:
   α) το `.nq-sec-bgvideo` (`z-index: -1`) πρεπει να ξεφευγει απο το `main` και
      να πεφτει ΚΑΤΩ απο τις κουκκιδες. Με z-index στο `main`, το βιντεο θα
      παγιδευοταν μεσα του και θα ζωγραφιζοταν ΠΑΝΩ απο το στρωμα.
   β) στις σελιδες ΕΚΤΟΣ Demo 5 το `header` ειναι `z-index: auto`. Ενα `main`
      με z-index θα το βυθιζε κατω απο το περιεχομενο.
   Επαληθευτηκε: `main` -> `position: relative`, `z-index: auto`, κανενας
   `position: absolute` απογονος δεν αλλαζει containing block (0 ευρηματα σε
   /kataskevi-istoselidon και /nea-arxiki-demo5).

   Το `:has()` κραταει τον κανονα δεμενο με το στρωμα: αν καποτε το
   `.wbx-particles` φυγει απο μια σελιδα, φευγει μαζι και το `relative`. */
body:has(.wbx-particles) > main,
body:has(.wbx-particles) > #Breadcrumbs {
  position: relative;
}
/* ΚΙΝΗΤΟ — ΠΙΟ ΕΜΦΑΝΕΙΣ ΚΟΥΚΚΙΔΕΣ ΣΤΗΝ ΗΡΕΜΙΑ (ιδιοκτητης, 2026-09-07):
   ηρεμια .48 → **.68**, δηλαδη οι κουκκιδες διαβαζονται χωρις να χρειαστει να
   περασει ενοτητα απο το κεντρο.

   🔴 ΤΟ ΒΗΜΑ ΤΟΥ ΠΑΛΜΟΥ ΜΙΚΡΑΙΝΕΙ ΜΑΖΙ, .42 → .28, ΚΑΙ ΕΙΝΑΙ ΑΠΑΡΑΙΤΗΤΟ.
   Με το ιδιο .42 η κορυφωση θα εβγαινε .68 + .42 = 1.10. Το opacity κοβεται
   στο 1, οποτε ο παλμος θα ΕΦΤΑΝΕ ΣΤΟ ΤΑΒΑΝΙ πριν την κορυφη του και θα
   επιπεδωνε — η κινηση θα σταματουσε να φαινεται ακριβως εκει που πρεπει να
   φαινεται περισσοτερο. Με .28 η κορυφωση ειναι .96: μενει περιθωριο.

   ΤΟ ΕΥΡΟΣ ΤΟΥ ΠΑΛΜΟΥ ΜΙΚΡΑΙΝΕΙ ΟΝΤΩΣ (.42 → .28) και ειναι σωστο: οσο πιο
   φωτεινη η ηρεμια, τοσο λιγοτερο δρομο εχει να κανει το φως για να διαβαστει.

   ΤΟ ΧΡΩΜΑ ΔΕΝ ΑΓΓΙΖΕΤΑΙ ΕΔΩ. Δυο βιδες ελεγχουν την ιδια αισθηση — το alpha
   του χρωματος (JS) και το opacity του layer (CSS). Συμφωνηθηκε με τον Agent 2
   να μενει το responsive αποκλειστικα στο CSS και το χρωμα στο JS, ωστε να
   ξερουμε παντα ποιο νουμερο φταιει. */
/* ΚΙΝΗΤΟ — ΜΕΓΑΛΥΤΕΡΗ ΚΛΙΜΑΚΩΣΗ ΣΤΗΝ ΑΠΟΧΡΩΣΗ ΤΟΥ ΦΟΝΤΟΥ (ιδιοκτητης,
   2026-09-07): συντελεστης .11 → **.22**, διπλασια ανοδος στις ενοτητες.

   ΠΡΑΓΜΑΤΙΚΗ ΚΑΛΥΨΗ ΣΤΗΝ ΚΟΡΥΦΩΣΗ = ταβανι glow (.60) × συντελεστης × alpha
   χρωματος (.20):
     οθονη   .60 × .11 × .20 = **1.32%**   (αμεταβλητο)
     κινητο  .60 × .22 × .20 = **2.64%**

   ΓΙΑΤΙ ΑΥΤΗ Η ΑΛΛΑΓΗ ΕΙΝΑΙ ΑΣΦΑΛΗΣ, σε αντιθεση με την προηγουμενη που
   διπλασιασε κατα λαθος τη μειωση: ειναι RESPONSIVE, και το responsive ειναι
   αποκλειστικα CSS — το `DOT_ALPHA` του JS ειναι ενιαιο για ολες τις
   αναλυσεις. Δεν υπαρχει δευτερη βιδα να συγκρουστει.

   ΤΟ ΗΡΕΜΟ ΔΕΝ ΑΛΛΑΖΕΙ: το tint ειναι γινομενο με το `--wbx-dot-glow`, που
   στην ηρεμια ειναι 0. Αρα αυξανεται ΜΟΝΟ η κορυφωση, οχι η βαση.

   ⚠️ ΑΝ ΒΓΕΙ ΒΑΡΥ ΣΤΟ ΚΙΝΗΤΟ, ΨΑΞΕ ΤΟ ΑΘΡΟΙΣΜΑ: εκει το πλεγμα κουκκιδων εχει
   ηδη υψηλοτερη βαση (.68 εναντι .48), οποτε φοντο και κουκκιδες φωτιζουν μαζι
   πιο εντονα. Το tint μονο του μπορει να μη φταιει. */
@media (max-width: 767.98px) {
  .wbx-particles-tint {
    /* ΣΥΝΤΕΛΕΣΤΗΣ .22 → .30 στον ιδιο γυρο. Πραγματικη καλυψη στην κορυφωση:
       .60 × .30 × alpha .20 = **3.6%** (ηταν 2.64%). */
    /* ΚΙΝΗΤΟ, ΙΔΙΑ ΑΥΞΗΣΗ ΑΝΑΛΟΓΙΑΣ: .30 → .40.
       Καλυψη στην κορυφωση: .60 × .40 × .20 = 4.80% (ηταν 3.60%). */
    opacity: calc(var(--wbx-dot-glow, 0) * .40);
  }
}

@media (max-width: 767.98px) {
  .wbx-particles::before {
    /* ΒΗΜΑ ΠΑΛΜΟΥ .28 → .36 (ιδιοκτητης, 2026-09-07: «λιγο μεγαλυτερη
       κλιμακωση στο κινητο»). Η ΒΑΣΗ .68 ΔΕΝ ΑΓΓΙΖΕΤΑΙ — ζητηθηκε μεγαλυτερη
       ΔΙΑΔΡΟΜΗ, οχι πιο ορατες κουκκιδες στην ηρεμια.
       Κορυφωση: .68 + (ταβανι glow .60 × .36) = **.896** — μενει περιθωριο ως
       το 1, αρα ο παλμος δεν επιπεδωνει. */
    /* ΚΙΝΗΤΟ: βημα .36 → .27, ιδια μειωση αναλογιας με την οθονη.
       Κορυφωση: .68 + (.60 × .27) = .842 (ηταν .896). */
    /* Ιδιο γινομενο με την οθονη — βλ. σχολιο στον βασικο κανονα. */
    opacity: calc((.68 + var(--wbx-dot-glow, 0) * .27) * (1 - var(--wbx-bg-tone, 0)));
  }
}

/* ΤΟ ΔΙΑΦΑΝΟ LAYER ΣΤΟ ΚΙΝΗΤΟ ΞΗΛΩΘΗΚΕ (2026-09-07).
   Υπηρχε για εναν ΜΟΝΟ λογο: να φαινεται απο κατω το σταθερο video, οταν ο
   ιδιοκτητης ηθελε να συνυπαρχουν. Ζητησε μετα να βγει το video τελειως απο το
   κινητο, οποτε το layer δεν εχει τι να αποκαλυψει — και χωρις φοντο εδειχνε
   το μαυρο του `body` αντι για το δικο του `--wbx-particles-bg`, δηλαδη
   ΔΙΑΦΟΡΕΤΙΚΟ φοντο σε κινητο και οθονη χωρις λογο.
   Τωρα το layer ειναι ενιαιο παντου. Αν επιστρεψει το video, ξαναμπαινει. */
/* Χωρις κινηση: το canvas μενει, απλα το JS δεν το κινει — στατικη συνθεση.
   🔴 ΗΤΑΝ .85 ΚΑΙ ΕΓΙΝΕ ΛΑΘΟΣ ΜΕ ΤΗ ΜΕΙΩΣΗ: με βαση πλεον .55, το .85 θα εκανε
   τη στατικη συνθεση ΠΙΟ ΕΝΤΟΝΗ απο την κανονικη — το αντιθετο απο το νοημα
   του reduced-motion. Παει .5, δηλαδη λιγο πιο ηπιο απο την κανονικη. */
@media (prefers-reduced-motion: reduce) {
  .wbx-particles canvas {
    opacity: .5;
  }
  /* Και η αλλαγη χρωματος των κουκκιδων ειναι κινηση: γινεται ακαριαια. */
  .wbx-particles {
    transition: none;
  }
  /* Η αποχρωση του φοντου ειναι καθαρα διακοσμητικη κινηση — σβηνει τελειως.
     Δεν μενει σε σταθερη τιμη: ενα μονιμο χρωματιστο πεπλο σε ολη την οθονη
     δεν ειναι «η στατικη εκδοχη» του εφε, ειναι αλλο εφε. */
  .wbx-particles-tint {
    opacity: 0;
  }
}