/* =====================================================================
   Humera · v23 · φόντα (?bg), ανεξάρτητα από τη σχεδίαση
   0 Κανένα · 2 Σήμα (όπως στη v22) · 5 Σήμα + Ζώνες · 6 Χρώματα ενοτήτων · 7 Χρωματιστό πλαίσιο
   8 Πλευρική ζώνη · 9 Μετάβαση
   Απόδοση: καμία θόλωση, κανένα blend, καμία υφή. Το σήμα είναι στατική μάσκα· η «Μετάβαση» κινεί μόνο transform
   μέσω scroll-timeline (στον compositor), οπότε δεν προκαλεί νέο σχεδιασμό σελίδας στο scroll.
   ===================================================================== */
html[data-d="3"] { --alt: #EAEEF2; --markc: #6F63A8; --s1: #E6F1EE; --s2: #EEEAF5; --s3: #E8EDF4; --s4: #F2ECEF; --frame: #8C95B8; --side: #E9E6F2; }
html[data-d="4"] { --alt: #F1F2F3; --markc: #1A1D21; --s1: #E5F0E9; --s2: #FBEDE6; --s3: #E7EEF7; --s4: #EEF0F1; --frame: #2E8B5B; --side: #E5F0E9; }
html[data-d="5"] { --alt: #E2E6EB; --markc: #0E1A3C; --s1: #E3E8EE; --s2: #E9EEF0; --s3: #EFEBE6; --s4: #E6E9F2; --frame: #0E1A3C; --side: #DFE5EC; }

/* ---------- 2 · Σήμα ---------- */
html[data-bg="2"] .env::after, html[data-bg="9"] .env::after { content: ''; display: block; position: absolute; right: -9vw; bottom: -12vh; width: min(92vh, 64vw); aspect-ratio: 420 / 430;
  background: var(--markc); opacity: .055; -webkit-mask: url("mark.svg") center / contain no-repeat; mask: url("mark.svg") center / contain no-repeat; }
@media (max-width: 900px) { html[data-bg="2"] .env::after, html[data-bg="9"] .env::after { width: 120vw; right: -40vw; bottom: -6vh; } }

/* ---------- 5 · Σήμα + Ζώνες: εναλλασσόμενος τόνος, και το σήμα ζει μέσα στις ζώνες ---------- */
html[data-bg="5"] main > section:nth-of-type(even) { position: relative; isolation: isolate; overflow: clip; background: var(--alt); padding-bottom: calc(var(--sec) * .7); }
html[data-bg="5"] main > section:nth-of-type(even)::after { content: ''; position: absolute; z-index: -1; top: 6%; right: -6vw; height: 88%; aspect-ratio: 420 / 430;
  background: var(--markc); opacity: .06; -webkit-mask: url("mark.svg") center / contain no-repeat; mask: url("mark.svg") center / contain no-repeat; pointer-events: none; }
html[data-bg="5"] main > section:nth-of-type(odd):not(:first-child)::after { content: ''; position: absolute; z-index: -1; left: -10vw; bottom: 0; height: 40%; aspect-ratio: 420 / 430;
  background: var(--markc); opacity: .035; -webkit-mask: url("mark.svg") center / contain no-repeat; mask: url("mark.svg") center / contain no-repeat; pointer-events: none; }
html[data-bg="5"] main > section:nth-of-type(odd):not(:first-child) { position: relative; isolation: isolate; overflow: clip; }

/* ---------- 6 · Χρώματα ενοτήτων: κάθε ενότητα το δικό της απαλό χρώμα, ίδια φωτεινότητα παντού ---------- */
html[data-bg="6"] main > section:nth-of-type(4n+2) { background: var(--s1); }
html[data-bg="6"] main > section:nth-of-type(4n+3) { background: var(--s2); }
html[data-bg="6"] main > section:nth-of-type(4n+4) { background: var(--s3); }
html[data-bg="6"] main > section:nth-of-type(4n+5) { background: var(--s4); }
html[data-bg="6"] main > section:not(:first-child) { padding-bottom: calc(var(--sec) * .7); }
html[data-bg="6"] main > section.contact { background: var(--page); padding-bottom: 0; }

/* ---------- 7 · Χρωματιστό πλαίσιο: η σελίδα είναι ένα φωτεινό φύλλο μέσα σε χρωματιστό πλαίσιο ---------- */
html[data-bg="7"] .env, html[data-bg="7"] body { background: var(--frame); }
html[data-bg="7"] main { background: var(--page); margin: 0 clamp(10px, 1.6vw, 24px); border-radius: 0 0 36px 36px; padding-bottom: clamp(48px, 7vh, 80px); }
html[data-bg="7"] footer { padding-top: clamp(24px, 4vh, 40px); }
html[data-bg="7"] .legal, html[data-bg="7"] .legal :is(p, strong, a, span) { color: rgba(255,255,255,.82) !important; }
@media (max-width: 900px) { html[data-bg="7"] main { margin: 0 8px; border-radius: 0 0 24px 24px; } }

/* ---------- 8 · Πλευρική ζώνη: χρωματιστή στήλη στα αριστερά κάθε ενότητας, ευθυγραμμισμένη με το πλέγμα ---------- */
html[data-bg="8"] main > section:not(:first-child) { --edge: calc((100% - min(var(--content), 100% - 2 * var(--gutter))) / 2 + min(var(--content), 100% - 2 * var(--gutter)) * .25 - 16px);
  background: linear-gradient(90deg, var(--side) 0 var(--edge), transparent var(--edge)); padding-bottom: calc(var(--sec) * .6); }
@media (max-width: 900px) { html[data-bg="8"] main > section:not(:first-child) { background: linear-gradient(180deg, var(--side) 0 6px, transparent 6px); } }

/* ---------- 9 · Μετάβαση: το χρώμα της σελίδας αλλάζει απαλά από πάνω προς τα κάτω καθώς κυλάς ---------- */
html[data-bg="9"] .env { background: var(--page); }
html[data-bg="9"] .env::before { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; height: 400%; pointer-events: none;
  background: linear-gradient(180deg, var(--page) 0%, var(--s3) 30%, var(--s2) 55%, var(--s1) 80%, var(--page) 100%); will-change: transform; }
@supports (animation-timeline: scroll()) {
  html[data-bg="9"] .env::before { animation: bg9 linear both; animation-timeline: scroll(root); }
  @keyframes bg9 { to { transform: translateY(-75%); } }
}
@media (prefers-reduced-motion: reduce) { html[data-bg="9"] .env::before { animation: none; } }
html[data-bg="9"] .env::after { z-index: 1; }

html[data-bg="0"] [data-bp="0"], html[data-bg="2"] [data-bp="2"], html[data-bg="5"] [data-bp="5"], html[data-bg="6"] [data-bp="6"], html[data-bg="7"] [data-bp="7"], html[data-bg="8"] [data-bp="8"], html[data-bg="9"] [data-bp="9"] { opacity: 1; background: #fff; color: #0E1A3C; border-radius: 999px; }
.lab__b a { padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.lab { flex-wrap: wrap; max-width: calc(100vw - 24px); }