/* ─────────────────────────────────────────────────────────────────────────────
   KYVOGEN — εταιρικό site. ΦΩΤΕΙΝΟ θέμα (spyros 10/09: «στα αντίθετα χρώματα, στο λευκό»).
   Ίδιο σύμπαν με το CEIOS (γραμματοσειρές, eyebrows, boot, κουμπιά, κυανός κόμβος), αντίθετο έδαφος:
   το CEIOS ζει στο κενό, η KYVOGEN στο χαρτί — «στο χαρτί, το φως είναι μελάνι» (CONCEPT §2.2).
   Κάθε χρώμα ρητό και ΜΟΝΟ από τα tokens του SPEC §3 (ή rgba τους). Γεωμετρία ισομετρική/εξαγωνική,
   όχι τροχιακή· περισσότερος αέρας, hairlines, το gradient με φειδώ. Σχόλια: τι ΚΑΙ γιατί — τα μαθήματα
   του CEIOS με τον αριθμό τους (LESSONS n).
───────────────────────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;   /* inputs/scrollbars ανοιχτά και σε συσκευές με dark mode (LESSONS 86, αντεστραμμένο για το φως) */
  --paper:#FFFFFF; --bg:#F7F6FB; --surface:#FFFFFF; --panel:#F1EEF9; --panel-2:#EAE5F6;
  --line:#E6E2F2; --line-2:#D6CFEA;
  --ink:#1A1033; --muted:#4B4270; --dim:#6B5FA0;   /* #6B5FA0: 5.2:1 σε #F7F6FB, 5.6:1 σε #FFFFFF — μετρημένο με αριθμό, όχι «περίπου» (LESSONS 80) */
  --blue:#4F7CF7; --violet:#8B5CF6; --fuchsia:#C026D3;
  /* Κυανό: ΤΡΙΑ επίπεδα (έλεγχος 1 10/09 — K1). Το #0891B2 ΔΕΝ είναι AA ως κείμενο (3.68:1 σε λευκό, 3.42:1 σε #F7F6FB) — ήταν το χρώμα
     όλων των μικρών mono labels. Κείμενο = ΜΟΝΟ --cyan-text #0E7490 (5.36:1 λευκό / 4.98:1 #F7F6FB)· --cyan-ink μένει για γραμμές,
     τελείες, καρφίτσες, γλυφικά· --cyan-node για κόμβους. Το σχόλιο του SPEC §3 «--cyan-ink (cyan for TEXT on white)» χρειάζεται την ίδια διόρθωση.
     Ο έλεγχος 1 μέτρησε ΜΟΝΟ την κυανή οικογένεια — τα χρώματα των στρωμάτων (--l-*) μετρήθηκαν στον έλεγχο 2 (H1), βλ. --l-*-t παρακάτω. */
  --cyan:#22D3EE; --cyan-ink:#0891B2; --cyan-text:#0E7490;
  --cyan-node:#67E8F9;                  /* κόμβοι/τελείες ΜΟΝΟ, ποτέ κείμενο */
  --pale:#E9D5FF; --pale-2:#F3E8FF;
  --gen:linear-gradient(135deg,#4F7CF7,#8B5CF6 50%,#C026D3);   /* το gradient «γένεσης»: ξεκινά ΜΠΛΕ, τελειώνει φούξια — πιο ψυχρό/δομικό από το CEIOS */
  /* --gen-t = το ίδιο gradient με 14% μελάνι από πάνω, ΜΟΝΟ για επιφάνειες που φέρουν λευκό κείμενο (κουμπιά, EN/EL) — έλεγχος 1 10/09 (K1):
     λευκό 11–14px bold πάνω στο σκέτο --gen μετρούσε 3.78:1 στο μπλε άκρο· με το μελάνι 4.69 (μπλε) / 5.2 (βιολετί) / 5.1 (φούξια). */
  --gen-t:linear-gradient(rgba(26,16,51,.14),rgba(26,16,51,.14)),linear-gradient(135deg,#4F7CF7,#8B5CF6 50%,#C026D3);
  /* παράγωγα — ΜΟΝΟ από τα tokens του SPEC §3, τίποτα καινούργιο σε χρώμα (CONCEPT §2.1) */
  --sh-1:0 1px 2px rgba(26,16,51,.05),0 6px 18px rgba(79,124,247,.08);   /* κάρτα σε ηρεμία */
  --sh-2:0 18px 40px rgba(139,92,246,.18);                               /* hover-lift: η «λάμψη» του CEIOS ως σκιά */
  --sh-p:0 8px 24px rgba(139,92,246,.28);                                /* primary κουμπί */
  --ring:0 0 0 3px rgba(139,92,246,.25);                                 /* focus / invalid ring */
  --l-field:#0E7490; --l-field-fill:#22D3EE;                             /* στρώμα ΠΕΔΙΟ: στροκ/τελείες · γέμισμα */
  --l-data:#4F7CF7; --l-intel:#8B5CF6; --l-ui:#C026D3;                   /* ΔΕΔΟΜΕΝΑ · ΝΟΗΜΟΣΥΝΗ · ΔΙΕΠΑΦΕΣ — ΜΟΝΟ γραμμές, τελείες, πλάκες, καλώδια· ΠΟΤΕ κείμενο */
  /* Κείμενο ανά στρώμα (έλεγχος 2 10/09 — H1): τα --l-* ως 10.5–11px labels (.ltxt .n, .g-lbl) μετρούσαν 3.30 (μπλε) / 3.70 (βιολετί) / 4.11 (φούξια) σε
     --panel — ΟΧΙ AA. Τα --l-*-t είναι η ίδια απόχρωση ~15% προς το μελάνι, μετρημένα σε --panel / --bg / λευκό: data #4466D0 4.52/4.81/5.18 ·
     intel #7B51DB 4.54/4.83/5.20 · ui #B424C8 4.55/4.85/5.21 · field = --cyan-text 4.68/4.98/5.36. Καμία opacity πάνω τους (στο .9 πέφτουν σε 3.80–4.04).
     Στα .layer / .bom-g: --lc = στροκ (--l-*), --lct = κείμενο (--l-*-t). */
  --l-field-t:#0E7490; --l-data-t:#4466D0; --l-intel-t:#7B51DB; --l-ui-t:#B424C8;
  /* ισομετρικό πλέγμα ως ΣΤΑΤΙΚΟ μοτίβο (τρεις οικογένειες γραμμών 0°/60°/120°) — CSS, όχι καμβάς· το ίδιο σε origin/contact/log */
  --iso:repeating-linear-gradient(0deg,rgba(139,92,246,.07) 0 1px,transparent 1px 36px),
        repeating-linear-gradient(60deg,rgba(139,92,246,.07) 0 1px,transparent 1px 36px),
        repeating-linear-gradient(120deg,rgba(139,92,246,.07) 0 1px,transparent 1px 36px);
  --max:1200px; --r:18px; --pad:120px;   /* padding ενοτήτων 120 (CEIOS 96): πιο ήρεμο, πιο «υποδομή» (CONCEPT §1.5) */
  /* Geologica / Manrope / JetBrains Mono: ΟΛΕΣ με ελληνικά γλυφά. ΠΟΤΕ Unbounded — κάθε ελληνικός τίτλος έπεφτε
     ΣΙΩΠΗΛΑ σε γραμματοσειρά συστήματος και κανείς δεν το είδε μέχρι το EL toggle (LESSONS 1) */
  --font-d:'Geologica',system-ui,sans-serif; --font-b:'Manrope',system-ui,sans-serif; --font-m:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}   /* iOS landscape μεγέθυνε μόνο του το κείμενο (LESSONS 86) */
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font-b);overflow-x:hidden;min-height:100vh}
/* Σε κινητό το παρατεταμένο πάτημα επέλεγε λέξεις και το Android πετούσε «αναζήτηση Google» (panos 10/09).
   Σελίδα παρουσίασης = δεν επιλέγεται τίποτα, εκτός από τα πεδία της φόρμας (LESSONS 15) */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text}
::selection{background:rgba(139,92,246,.25);color:var(--ink)}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
/* Η μπλε λάμψη του Android σε κάθε tap έσπαγε το φως (LESSONS 17)· ΜΑΖΙ με :active ανάδραση (μπλοκ αφής στο τέλος).
   .layer έχει tap handler χωρίς να είναι a/button — ξέφευγε από τη λίστα (έλεγχος 1 10/09 — M8)· οι πλακέτες κλάδων/προϊόντων δεν έχουν handler (11/09) */
a,button,canvas,summary,.layer{-webkit-tap-highlight-color:transparent}
/* Διπλό tap σε iOS = ζουμ σελίδας· manipulation = tap+pinch ναι, double-tap-zoom όχι (LESSONS 16). Και οι σύνδεσμοι nav/footer/mailto/CEIOS —
   το CEIOS τους είχε ξεχάσει, εδώ όχι (έλεγχος 1 10/09 — M11/K17) */
.btn,.lang button,.burger,.half,.chips .chip,.pp,.layer,.station,.hire,summary,#latcv,.nav nav a,footer li a,.ct-alt a,.cx-brand,.brand{touch-action:manipulation}
h1,h2,h3{margin:0;font-family:var(--font-d);text-wrap:balance;letter-spacing:-.01em;color:var(--ink)}   /* balance: όχι ορφανή λέξη (LESSONS 86) */
p{margin:0}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.wrap{width:min(var(--max),calc(100% - 40px));margin:0 auto}
/* Eyebrow σε --cyan-text (AA — K1· ποτέ #67E8F9 ή #0891B2 ως κείμενο σε λευκό)· η γραμμή μπροστά σβήνει προς τα δεξιά */
.eyebrow{font:600 11px/1 var(--font-m);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan-text);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--cyan-text),transparent);flex:none}
.hi{background:var(--gen);-webkit-background-clip:text;background-clip:text;color:transparent}   /* gradient κείμενο: μόνο ≥26px (CONCEPT §2.2) */
.hic{background:linear-gradient(93deg,#0891B2,#4F7CF7);-webkit-background-clip:text;background-clip:text;color:transparent}   /* ψυχρή παραλλαγή, ΜΙΑ φορά (anatomy h2) */
/* Skip link: αόρατο μέχρι το focus — ο χρήστης πληκτρολογίου προσπερνά boot/nav με ένα Tab */
.skip{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 14px;border-radius:10px;background:var(--ink);color:var(--paper);font:700 13px/1 var(--font-b)}
.skip:focus{top:12px}
.defs{position:absolute;width:0;height:0;overflow:hidden}   /* τα <defs> ΜΙΑ φορά, χωρίς style="" (CSP §4.5)· το url(#kg) μένει attribute (LESSONS 51) */
/* Hint διάδρασης: λέει ό,τι μπορεί ΟΝΤΩΣ η συσκευή (το JS βάζει το .touch κείμενο — LESSONS 14).
   Το σήμα μπροστά = μικρό εξάγωνο (η σιλουέτα του κύβου), όχι ο κύκλος του CEIOS */
.hint{margin-top:14px;font:600 10.5px/1.5 var(--font-m);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;align-items:flex-start;gap:8px}   /* flex-start: σε δίγραμμο hint (EL ανατομίας) το εξάγωνο οδηγεί την ΠΡΩΤΗ γραμμή, δεν αιωρείται ανάμεσα στις δύο (έλεγχος 2 10/09 — D-09) */
.hint::before{content:"";width:11px;height:12px;flex:none;margin-top:2px;background:var(--cyan-ink);opacity:.75;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}   /* 2px = (15.75px γραμμή − 12px) / 2: κεντραρισμένο στη γραμμή 1 */

/* ── σύμπαν (2D καμβάς, ισομετρικό πλέγμα — ο hero κρατά το ΜΟΝΟ WebGL context της σελίδας, CONCEPT §2.4) ── */
#universe{position:fixed;inset:0;z-index:0;width:100%;height:100%;height:100lvh;display:block;pointer-events:none}   /* 100lvh: η γραμμή διεύθυνσης του κινητού δεν προκαλεί resize/ξαναγέννηση (LESSONS 45)· υπό ?nofx=1 ζωγραφίζει ΕΝΑ στατικό καρέ (fx.js), δεν κρύβεται (έλεγχος 1 10/09 — K15) */
/* Πέπλο: ανοιχτές ακτινικές (μπλε πάνω-δεξιά, κυανό κάτω-αριστερά) και σβήσιμο προς --bg — μεταφράζεται, δεν αντιστρέφεται (CONCEPT §2.2) */
.veil{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(1200px 700px at 70% -10%,rgba(79,124,247,.10),transparent 60%),
             radial-gradient(900px 600px at 10% 110%,rgba(34,211,238,.06),transparent 60%),
             linear-gradient(180deg,rgba(247,246,251,0),rgba(247,246,251,.55) 40%,rgba(247,246,251,.85))}
.page{position:relative;z-index:1}

/* ── nav: ανοιχτό «γυαλί» 66px (CONCEPT §2.2)· στόχοι αφής ≥40px (LESSONS 21) ── */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  background:rgba(247,246,251,.72);border-bottom:1px solid var(--line);transition:background .3s,box-shadow .3s}
.nav.scrolled{background:rgba(247,246,251,.86);box-shadow:0 10px 30px rgba(26,16,51,.06)}   /* πυκνότερο γυαλί + σκιά μετά τα 40px */
.nav .wrap{display:flex;align-items:center;gap:22px;height:66px}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{width:38px;height:38px;flex:none;filter:drop-shadow(0 4px 10px rgba(139,92,246,.25))}   /* drop-shadow ΜΟΝΟ σε στατικό SVG (LESSONS 50) */
.brand>span{display:grid;gap:5px}
.brand .w{font:700 19px/1 var(--font-d);letter-spacing:.24em;color:var(--ink)}
.brand .by{font:600 8.5px/1 var(--font-m);letter-spacing:.22em;color:var(--dim);text-transform:uppercase;white-space:nowrap}   /* nowrap στη ΒΑΣΗ (έλεγχος 2 10/09 — L2): ήταν μόνο ≤340, οπότε στα 360/390 το «SOFTWARE DEVELOPMENT» τύλιγε σε δύο γραμμές ενώ στα 320 ήταν μία· τα μεγέθη ανά breakpoint στα ≤430/≤340 */
.nav nav{display:flex;gap:26px;margin-left:auto}
.nav nav a{position:relative;font:600 13px/1 var(--font-b);color:var(--muted);letter-spacing:.02em;transition:color .2s,transform .2s}
.nav nav a.on{color:var(--ink)}
.nav nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--gen)}
.lang{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;gap:2px;background:var(--paper)}
.lang button{border:0;background:transparent;font:600 11px/1 var(--font-m);letter-spacing:.1em;padding:7px 10px;border-radius:999px;color:var(--dim);transition:background .2s,color .2s}   /* 600, όχι 700: η JetBrains Mono φορτώνει 400/600 — το 700 έβγαινε συνθετικό/θολό (έλεγχος 1 10/09 — K11) */
.lang button.on{background:var(--gen-t);color:var(--paper);box-shadow:0 4px 12px rgba(139,92,246,.30)}   /* --gen-t: λευκό 11px AA πάνω στο gradient (K1) */
.burger{display:none;margin-left:auto;background:var(--paper);border:1px solid var(--line-2);border-radius:10px;width:40px;height:40px;position:relative}
.burger i{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);border-radius:2px;top:13px}
.burger i:nth-child(2){top:19px}.burger i:nth-child(3){top:25px}

/* ── κουμπιά: primary = gradient + λευκό + ΧΡΩΜΑΤΙΣΤΗ σκιά (όχι λάμψη)· ghost = λευκό + hairline (CONCEPT §2.2) ── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:14px;font:700 14px/1 var(--font-b);letter-spacing:.02em;
  border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background .2s;white-space:nowrap;
  transform:translate(var(--mx,0px),var(--my,0px))}   /* --mx/--my = μαγνητική έλξη προς τον κέρσορα, από ελατήριο rAF που αυτοτερματίζεται (LESSONS 57) */
.btn-p{background:var(--gen-t);color:var(--paper);box-shadow:var(--sh-p),inset 0 0 0 1px rgba(255,255,255,.18)}   /* --gen-t: λευκό 14px bold AA σε ΟΛΟ το gradient (K1) */
.btn-g{background:var(--paper);border-color:var(--line-2);color:var(--ink);box-shadow:var(--sh-1)}
.btn .ar{transition:transform .2s}
.lift{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}   /* το hover-lift ΜΟΝΟ στο μπλοκ hover:hover (LESSONS 18) */

/* ── HERO «Πλέγμα γένεσης»: η δήλωση χωρά ΟΛΟΚΛΗΡΗ στο fold 1366×768, και στα ελληνικά (LESSONS 58).
   Το hero ΚΑΤΕΧΕΙ το fold (έλεγχος 1 10/09 — D2): min-height = viewport − nav, περιεχόμενο κεντραρισμένο — στα 1440×900 τελείωνε στα
   695px και ο τίτλος της επόμενης ενότητας κοβόταν από το κάτω άκρο· στα 1366×768 (702px) η δήλωση+CTA+HUD+πλέγμα χωρούν ακριβώς.
   ::before = λευκό ακτινικό πίσω από τη στήλη κειμένου: οι έντονες κατακόρυφες του σύμπαντος περνούσαν μέσα από το «SYSTEM ONLINE» (D13). ── */
.hero{padding:22px 0 52px;position:relative;display:grid;align-content:center;min-height:min(calc(100vh - 66px),1000px);min-height:min(calc(100svh - 66px),1000px)}   /* οροφή 1000px: σε 4K/ψηλά παράθυρα (και στα ψηλά screenshots) το hero δεν γίνεται 2000px κενού */
.hero::before{content:"";position:absolute;left:0;top:0;width:62%;height:100%;pointer-events:none;
  background:radial-gradient(58% 56% at 38% 46%,rgba(247,246,251,.96),rgba(247,246,251,.6) 55%,rgba(247,246,251,0) 100%)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;position:relative;z-index:1}
.hero h1{font-size:clamp(31px,4.3vw,56px);line-height:1.06;font-weight:800;margin:18px 0 18px}
.hero .sub{font-size:clamp(16px,1.35vw,19px);color:var(--muted);max-width:56ch;line-height:1.65}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hud{margin-top:38px;display:flex;flex-wrap:wrap;gap:10px 26px;font:600 11px/1 var(--font-m);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hud>span{display:inline-flex;align-items:center}
.hud .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.22);margin-right:8px;animation:blink 2.4s infinite}   /* δακτύλιος αντί για λάμψη */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.hud small{letter-spacing:.08em;text-transform:none;font-family:var(--font-b);font-weight:500}   /* χωρίς opacity: .85 έριχνε το --dim στο 3.8:1 (έλεγχος 1 10/09 — D8/K1) */
/* Ροή HUD: μία γραμμή· .on μπαίνει από κάτω, .out φεύγει προς τα πάνω — transform μόνο (LESSONS 49) */
.hud .feed{display:inline-block;position:relative;min-width:min(460px,100%);max-width:100%;height:14px;overflow:hidden;vertical-align:bottom}
.hud .feed span{position:absolute;left:0;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(120%);opacity:0;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .45s}
.hud .feed span.on{transform:none;opacity:1}
.hud .feed span.out{transform:translateY(-120%);opacity:0}
.wd{display:inline-block;animation:rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--wd,0s)}   /* λέξεις του τίτλου· το .hi ανεβαίνει ως ΕΝΑ μπλοκ (LESSONS 8) */

/* Το πλέγμα: halo, poster και καμβάς στο ΙΔΙΟ κελί grid (poster κάτω, καμβάς πάνω) — ποτέ κενό fold (LESSONS 41/46)·
   ρητό μέγεθος καμβά, αλλιώς μένει 300×150 (LESSONS 43) */
.lat{position:relative;width:100%;max-width:520px;margin:-14px auto 0;display:grid;justify-items:center;row-gap:12px}
.lat .halo{grid-area:1/1;place-self:center;width:60%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(139,92,246,.10),rgba(79,124,247,.04) 45%,transparent 70%);transition:opacity .9s;animation:breathe 6s ease-in-out infinite}   /* απλό radial, χωρίς blend/blur (LESSONS 50)· 60%/.10 αντί 84%/.14: το λιλά έπνιγε τις ακμές, τώρα φαίνεται λευκό πίσω τους (έλεγχος 1 10/09 — D1) */
.lat .halo.pulse{opacity:.6}   /* κύμα γένεσης: 1 → .6 σε .9″ */
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.lat .poster{grid-area:1/1;width:100%;aspect-ratio:1;display:block;transition:opacity .6s ease}
.lat.lit .poster{opacity:0}   /* το πρώτο καρέ του καμβά κρύβει το poster — ως τότε ο επισκέπτης βλέπει την ΙΔΙΑ δομή (ίδια προβολή, ίδιο u) */
#latcv{grid-area:1/1;position:relative;width:100%;aspect-ratio:1;display:block;cursor:crosshair}
.lat .hint{margin-top:0;text-align:center}
.lat .ro{font:600 10.5px/1 var(--font-m);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}   /* ένδειξη GEN n · m CUBES (DOM, textContent — LESSONS 73) */
.lat .ro b{color:var(--cyan-text);font-weight:600}
.rule{height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.45),rgba(34,211,238,.35),transparent)}

/* ── ενότητες: 120px αέρας· οι λωρίδες (.band) βάφουν ΔΙΚΟ τους αδιαφανές έδαφος (κρύβουν το σύμπαν) — ποτέ 100vw (ξεφεύγει κατά το scrollbar) ── */
section{padding:var(--pad) 0;position:relative}
main section{scroll-margin-top:24px}
main:focus{outline:none}   /* το <main id="top" tabindex="-1"> παίρνει focus ΜΟΝΟ από το skip link (Safari/VoiceOver κρατούσαν το focus στον σύνδεσμο και το επόμενο Tab γύριζε στο nav — έλεγχος 2 10/09 L7)· δεν θέλουμε ring σε προγραμματικό focus */
.band{background:var(--bg)}
.sec-h{display:grid;gap:14px;max-width:820px;margin-bottom:46px}
.sec-h .eyebrow{justify-self:start}
.sec-h h2{font-size:clamp(26px,3.4vw,44px);line-height:1.12;font-weight:700}
.sec-h p{color:var(--muted);font-size:17px;line-height:1.65;max-width:62ch;text-wrap:pretty}   /* pretty: όχι ορφανή λέξη στην τελευταία γραμμή («does.» στο reach.p — έλεγχος 2 10/09 D-08)· προοδευτικό, όπου δεν υποστηρίζεται αγνοείται */
.sec-h .hint{margin-top:6px}
/* ── REACH «Πού ταιριάζει»: το επίπεδο εδάφους. Η κλίμακα διαβάζεται από το ΕΥΡΟΣ («φτιαγμένο για»), ποτέ από αριθμούς (SPEC §1) ── */
.reach{overflow:hidden}
.reach .wrap{position:relative;z-index:1}
.ground{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* ΕΝΑ pseudo-element = ισομετρικό «πάτωμα»: πλέγμα 72px σε προοπτική, μάσκα ώστε να σβήνει μακριά/κοντά· --gy = παράλλαξη scroll (JS, ±24px, transform μόνο).
   1.5px (έλεγχος 1 10/09 — D10: το 1px/.10 δεν φαινόταν καθόλου στα 1440). Το επίπεδο ξεκινά ΠΙΣΩ από το πλέγμα καρτών (έλεγχος 2 10/09 — D-06): με top:6%/
   bottom:-20%, άξονα 62° και μάσκα 22–88% η προοπτική συμπίεζε το πάτωμα σε λωρίδα ~40px ΚΑΤΩ από το hint — οι έξι κάρτες κάθονταν σε σκέτο #F7F6FB.
   Τώρα: 220% ψηλό, άξονας = το κάτω άκρο της ενότητας, 50°/1400px → η μακρινή άκρη προβάλλεται στο ~35% της ενότητας (κάτω από τον τίτλο, στο ύψος του
   «Built for») και οι κοντινές γραμμές περνούν ΚΑΤΩ από τις κάρτες (46px βήμα κοντά, ~21px μακριά)· η μάσκα σβήνει και τα δύο άκρα (10% μακριά, 8% κοντά ≈
   το κάτω padding) ώστε τίποτα να μην κόβεται στο όριο της λωρίδας. Alpha .15 (≤ .18): οι κάρτες πρέπει να «σηκώνονται» από πάνω του, όχι να παλεύουν μαζί του. */
.ground::before{content:"";position:absolute;left:-30%;right:-30%;top:-120%;bottom:0;
  background:repeating-linear-gradient(0deg,rgba(139,92,246,.15) 0 1.5px,transparent 1.5px 72px),repeating-linear-gradient(90deg,rgba(139,92,246,.15) 0 1.5px,transparent 1.5px 72px);
  transform:perspective(1400px) rotateX(50deg) translateY(var(--gy,0px));transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,var(--ink) 10%,var(--ink) 92%,transparent);mask-image:linear-gradient(180deg,transparent,var(--ink) 10%,var(--ink) 92%,transparent)}
.built{font:600 10.5px/1 var(--font-m);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:12px;margin:-18px 0 18px}   /* «φτιαγμένο για», ποτέ «μας εμπιστεύονται» */
.built::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
/* Πλακέτες κλάδων (11/09): λευκά pills με το γλυφικό-κύβο και ΜΟΝΟ το όνομα του κλάδου — καμία δυνατότητα προϊόντος (spyros 11/09, LESSONS 111).
   Τυλίγουν φυσικά (flex-wrap): η οριζόντια λωρίδα με snap του κινητού δεν χρειάζεται πια. Χωρίς handler → χωρίς .on/hint (LESSONS 92). */
.sectors{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.sector{display:inline-flex;align-items:center;gap:12px;padding:11px 20px 11px 13px;border-radius:999px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1);
  font:600 14px/1.3 var(--font-b);color:var(--ink);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.sector .cg{width:30px;height:30px;flex:none}
.sector .cg .nd{transition:fill .25s}
.sector.open{background:transparent;border-style:dashed;border-color:var(--line-2);box-shadow:none;color:var(--muted)}   /* ανοιχτή θέση: κάθε επιχείρηση με συνεργεία/στόλο/εργοτάξια */
/* Gradient περίγραμμα 1.5px μέσω mask-composite: σβηστό σε ηρεμία, ανάβει στο hover (.face) / .lit (.pp) */
.face::before,.pp::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--gen);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  opacity:0;transition:opacity .25s;pointer-events:none}

/* ── NAME PLATE «KYVO · GEN»: το όνομα ΚΑΙ τι σημαίνει (LESSONS 59)· το όνομα ΔΕΝ μεταφράζεται (LESSONS 10) ── */
.plate-sec{padding-top:calc(var(--pad) - 20px)}
.acro{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:26px;justify-items:center}
.half{background:transparent;border:1px solid transparent;border-radius:var(--r);padding:20px 26px;display:grid;justify-items:center;gap:8px;text-align:center;
  transition:background .25s,border-color .25s,transform .25s}
.half.kyvo{justify-self:end}.half.gen{justify-self:start}
/* Το αρχικό (K, G) σε gradient, το υπόλοιπο σε μελάνι: το <b> «κόβεται» στο κείμενο, το span βάφει από πάνω με --ink */
.half b{font:800 clamp(44px,7vw,92px)/1 var(--font-d);letter-spacing:.06em;background:var(--gen);-webkit-background-clip:text;background-clip:text;color:transparent}
.half b span{color:var(--ink)}
.half .et{font:600 15px/1.3 var(--font-b);color:var(--muted)}
.half .df{font:600 11px/1.4 var(--font-m);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);max-width:40ch;text-wrap:balance}   /* και οι δύο επεξηγήσεις ΠΑΝΤΑ ορατές· 40ch (όχι 30): το ch ΔΕΝ μετρά το letter-spacing .16em — «structure · the building block» (30 χαρ. = 38ch) τύλιγε σε δύο γραμμές μόνο κάτω από το KYVO και η πλακέτα έγερνε 7px (έλεγχος 2 10/09 — D-07)· ≤430 ξανά 30ch ώστε να τυλίγει κεντραρισμένο (D12) */
.plate-sec .hint{justify-content:center;text-align:center}   /* το hint κάτω από ΚΕΝΤΡΑΡΙΣΜΕΝΗ πλακέτα — αριστερά έμοιαζε ξεκάρφωτο (έλεγχος 1 10/09 — D12)· text-align για το δίγραμμο EL σε κινητό */
.half.on{background:var(--panel);border-color:var(--line)}
.half.kyvo.on{transform:translateY(-2px)}
.mark-anim{width:120px;height:120px;display:block}
.mark-anim .hx{stroke-dasharray:300;stroke-dashoffset:0}
.mark-anim .sp{stroke-dasharray:60;stroke-dashoffset:0}
.mark-anim .nd{transform-origin:50px 52px;stroke:var(--cyan);stroke-width:0;stroke-opacity:0}
/* KYVO = το σήμα ιχνηλατείται (εξάγωνο, μετά οι ακτίνες)· GEN = ο κόμβος «σκάει» με κυανό δακτύλιο (stroke-width, όχι r — το r δεν
   εμψυχώνεται παντού). Hover ΜΟΝΟ με δείκτη (μπλοκ hover:hover)· το tap βάζει .on από το JS. Το GEN είναι ΜΕΤΑ το σήμα → :has() */
.half.kyvo.on+.mark-anim .hx{animation:trace .9s cubic-bezier(.2,.7,.2,1)}
.half.kyvo.on+.mark-anim .sp{animation:tracesp .5s .7s cubic-bezier(.2,.7,.2,1) backwards}
.acro:has(.gen.on) .mark-anim .nd{animation:npop .55s cubic-bezier(.2,.9,.3,1.4)}
@keyframes trace{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
@keyframes tracesp{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes npop{0%{transform:scale(.3);stroke-width:0;stroke-opacity:.9}60%{transform:scale(1.25);stroke-width:10;stroke-opacity:.5}100%{transform:scale(1);stroke-width:16;stroke-opacity:0}}

/* ── THESIS: τρεις αρχές = οι τρεις ορατές έδρες ΕΝΟΣ ισομετρικού κύβου (πάνω κεντραρισμένη / αριστερά / δεξιά) ── */
.faces{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.hex-bg{position:absolute;left:50%;top:50%;width:620px;height:620px;transform:translate(-50%,-50%);pointer-events:none;z-index:0}   /* τα paths του έχουν vector-effect="non-scaling-stroke" (index.html): στα 6.2× το 1.2 μονάδων γινόταν 7px λιλά «σωλήνας Υ» ανάμεσα στις κάρτες — τώρα hairline 1.2px/1px, σχέδιο όχι στοιχείο (έλεγχος 2 10/09 — D-04) */
/* --sk = κλίση της έδρας, --fc = χρώμα της (μπλε / βιολετί / φούξια) ως 2px γραμμή στην κορυφή (inset shadow, όχι border — το gradient
   περίγραμμα του hover κάθεται ακριβώς πάνω της). --sk μένει 0° ΚΑΙ σε desktop (έλεγχος 1 10/09 — D3): η κλίση 2° έκανε τη χρωματιστή
   κορυφή διαγώνια πάνω σε ορθογώνια κάρτα — «κολλημένη στραβά», όχι «έδρα κύβου». Η ιδέα του κύβου μένει στο .hex-bg και στα χρώματα. */
.face{--sk:0deg;--fc:var(--blue);position:relative;z-index:1;padding:26px 24px 22px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);
  box-shadow:var(--sh-1),inset 0 2px 0 var(--fc);transform:skewY(var(--sk))}
.face>*{transform:skewY(calc(var(--sk) * -1))}   /* το κείμενο αντι-στρεβλώνεται κατά το ίδιο, ώστε να μένει οριζόντιο */
.face.top{grid-column:1/-1;justify-self:center;width:min(100%,48%)}
.face.left{--fc:var(--violet)}
.face.right{--fc:var(--fuchsia)}
.face .k{font:600 10.5px/1 var(--font-m);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.face h3{font-size:20px;line-height:1.3;margin-top:16px}
.face p{margin-top:10px;color:var(--muted);font-size:14.5px;line-height:1.6}
/* Χωρίς .cq («Στην πράξη: …») και .pr (mono γραμμή απόδειξης) από 11/09: απαριθμούσαν συμπεριφορές/δυνατότητες του CEIOS (spyros 11/09, LESSONS 111) */
/* Η αποκάλυψη ΔΙΑΤΗΡΕΙ την κλίση: δικό της keyframe με το --sk (αλλιώς η έδρα «τινάζεται» 2° όταν τελειώσει το rise) */
.face.rv.in{animation-name:risek}
@keyframes risek{from{opacity:0;transform:translateY(22px) skewY(var(--sk))}to{opacity:1;transform:skewY(var(--sk))}}

/* ── ANATOMY «Ανατομία ενός λειτουργικού συστήματος»: εκρηγνυόμενη ισομετρική στοίβα 4 πλακών, ΚΑΘΑΡΟ CSS 3D (CONCEPT §2.5) ──
   Οι πλάκες είναι absolute μέσα στη ΣΤΟΙΒΑ (όχι μέσα στο li) ώστε να μοιράζονται ΜΙΑ αφετηρία και να «κλείνουν» σε έναν κύβο· τα
   κείμενα ρέουν κανονικά στη δεξιά στήλη (4 σειρές, ίδια σειρά με τις πλάκες: Διεπαφές πάνω → Πεδίο κάτω). Χωρίς perspective =
   παράλληλη προβολή: rotateX(60°) rotateZ(45°) → ρόμβος. --p: 0 = κλειστό, 1 = ανεπτυγμένο· CSS default 1 → reduced-motion / JS-off
   βλέπουν ΟΛΕΣ τις ετικέτες. Το JS το γράφει με style.setProperty (CSSOM — CSP-safe), μόνο όταν |Δ|>.005 (LESSONS 73). */
.anat{background:var(--panel)}   /* το έδαφος της λωρίδας ώστε οι λευκές πλάκες να διαβάζονται */
.anat-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:48px;align-items:center}   /* η στοίβα παίρνει ~64%: 380px πλάκες + ≥330px κείμενο (στα 1440 η στήλη κειμένου έπεφτε στα 230px και τύλιγε κάθε κουκκίδα) */
.stack-wrap{position:relative}
/* Κάθε πλάκα στη ΣΕΙΡΑ της ετικέτας της (έλεγχος 1 10/09 — D4): οι 4 πλάκες κάθονταν σε 64px βήματα στη μέση ενώ οι ετικέτες απλώνονταν σε 740px —
   «04 · Διεπαφές» 180px πάνω από την πάνω πλάκα, καμία σχέση ορατή. Τώρα το app.js (μπλοκ 14) μετρά το κέντρο κάθε .ltxt και γράφει --oy στο .layer·
   η πλάκα μεταφράζεται κατά --oy·--p (0 = κλειστός κύβος στο κέντρο, 1 = δίπλα στην ετικέτα της) και ένα hairline .ltxt::before τη δείχνει.
   Χωρίς JS/μέτρηση: --oy = (1.5−i)·--gap με --gap 150px ≈ το ύψος μιας ετικέτας. --sx 176 (όχι 190): αφήνει 44px για το hairline ως την ετικέτα. */
.stack{--p:1;--gap:150px;--pw:260px;--sx:176px;--lead:58px;list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:380px minmax(0,1fr);column-gap:24px;row-gap:10px;min-height:440px;align-content:center}
.layer{grid-column:2;position:static;padding:12px 14px;border-radius:12px;transition:background .35s}   /* static: η πλάκα του τοποθετείται ως προς τη ΣΤΟΙΒΑ· χωρίς opacity transition — το κείμενο δεν θαμπώνει πια (M1) */
.layer[data-l="field"]{--i:0;--z:1;--lc:var(--l-field);--lct:var(--l-field-t);--lf:rgba(34,211,238,.12);--lf2:rgba(34,211,238,.22)}
.layer[data-l="data"]{--i:1;--z:2;--lc:var(--l-data);--lct:var(--l-data-t);--lf:rgba(79,124,247,.12);--lf2:rgba(79,124,247,.22)}
.layer[data-l="intel"]{--i:2;--z:3;--lc:var(--l-intel);--lct:var(--l-intel-t);--lf:rgba(139,92,246,.12);--lf2:rgba(139,92,246,.22)}
.layer[data-l="ui"]{--i:3;--z:4;--lc:var(--l-ui);--lct:var(--l-ui-t);--lf:rgba(192,38,211,.12);--lf2:rgba(192,38,211,.22)}
/* Το translateY εφαρμόζεται ΠΡΙΝ τις περιστροφές (χώρος γονέα)· --oy (JS) ή (1.5−i)·gap (CSS default) κρατά τη στοίβα κεντραρισμένη όσο ανοίγει· z-index = η πάνω πλάκα πάνω */
.plate{position:absolute;left:calc(var(--sx) - var(--pw) / 2);top:calc(50% - var(--pw) / 2);width:var(--pw);height:var(--pw);z-index:var(--z);
  background:var(--lf);border:1.5px solid var(--lc);border-radius:6px;box-shadow:inset 0 2px 0 var(--paper),0 10px 24px rgba(26,16,51,.06);
  transform:translateY(calc(var(--oy,calc((1.5 - var(--i)) * var(--gap))) * var(--p))) rotateX(60deg) rotateZ(45deg);
  transition:transform .25s ease-out,background .3s,border-width .2s,opacity .35s}
/* ΧΩΡΙΣ opacity στο κείμενο (έλεγχος 2 10/09 — H1): το floor .8 του K6 έριχνε το «02 · Data» στο 2.55:1 πριν ανοίξει η στοίβα — και το --lct στο .9 μετρά
   3.80. Την είσοδο την κάνει ΜΟΝΟ το translateX· το κείμενο ενός επιπέδου είναι πάντα πλήρες (LESSONS 87). */
.ltxt{position:relative;transform:translateX(calc((1 - var(--p)) * 28px));transition:transform .3s ease-out;transition-delay:calc(var(--i) * 60ms)}   /* μπαίνει από το πλάι, η κάτω πρώτη */
/* hairline από τη δεξιά κορυφή της πλάκας ως την ετικέτα της — στο χρώμα του επιπέδου, ανάβει με --p (D4) */
.ltxt::before{content:"";position:absolute;left:calc(-1 * var(--lead));top:50%;width:calc(var(--lead) - 8px);height:1px;background:var(--lc);opacity:calc(.9 * var(--p));transition:opacity .3s}
.ltxt .n{display:block;font:600 11px/1 var(--font-m);letter-spacing:.16em;text-transform:uppercase;color:var(--lct)}   /* --lct, όχι --lc: 11px σε --panel, AA μετρημένο (H1) */
.ltxt h3{font-size:18px;margin-top:8px;transition:color .3s}
.ltxt p{margin-top:4px;color:var(--muted);font-size:14px;line-height:1.55}
.ltxt ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}
.ltxt li{font:500 13px/1.45 var(--font-b);color:var(--muted);display:flex;gap:9px;align-items:flex-start}
.ltxt li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lc);margin-top:6px;flex:none}
/* Επιθεώρηση: .on από tap (JS) ή hover (μπλοκ hover:hover) — η πλάκα ανάβει, ΟΙ ΠΛΑΚΕΣ των αδελφών σβήνουν στο .45, το κείμενό τους ΟΧΙ (έλεγχος 2 10/09 — M1):
   το opacity .45 σε ολόκληρο το .layer έριχνε το --muted στο 2.18:1 και το h3 στο 2.89 — και στην αφή το .on μένει μέχρι tap εκτός, δηλαδή τα 3/4 της ενότητας
   κάτω από AA επ' αόριστον. Ίδιο μοτίβο με το intel list του CEIOS: η ενεργή γραμμή ανάβει, οι άλλες δεν σβήνουν (LESSONS 87/88). */
.layer.on{background:rgba(255,255,255,.55)}
.layer.on .plate{background:var(--lf2);border-width:2px}
.layer.on h3{color:var(--ink)}
.stack:has(.layer.on) .layer:not(.on) .plate{opacity:.45}
.stack:has(.layer.on) .layer:not(.on) .ltxt::before{opacity:.3}
/* Δύο διακεκομμένες «γραμμές διαύλου» ανάμεσα στις πλάκες· είναι li (έγκυρο μέσα σε ol). Η ροή = translateY του ::before (compositor, LESSONS 49 —
   έλεγχος 1 10/09 K16: το background-position ξαναζωγράφιζε). Το ύψος ΜΕΝΕΙ transition (όχι scaleY): 2px στοιχείο = ασήμαντο layout, ενώ το scaleY
   θα ζούλαγε τις παύλες σε 1px όσο ανοίγει η στοίβα. --span = απόσταση πάνω↔κάτω πλάκας (JS, D4)· χωρίς JS 3·--gap. */
.bus{position:absolute;left:calc(var(--sx) - 30px);top:50%;width:2px;height:calc(var(--span,calc(3 * var(--gap))) * var(--p) + 120px);transform:translateY(-50%);z-index:0;opacity:.8;overflow:hidden;transition:height .25s ease-out}
.bus::before{content:"";position:absolute;left:0;top:-22px;width:2px;height:calc(100% + 22px);background:repeating-linear-gradient(180deg,rgba(139,92,246,.45) 0 5px,transparent 5px 11px);animation:busflow 2.4s linear infinite}
.bus.b{left:calc(var(--sx) + 30px)}
.bus.b::before{animation-delay:-1.2s}
@keyframes busflow{to{transform:translateY(22px)}}
/* ── BUILD «Τι χτίζουμε» — ΦΥΛΛΟ ΠΡΟΔΙΑΓΡΑΦΩΝ (details/summary: δουλεύει ΧΩΡΙΣ JS). Στήλη δείκτη ΣΤΑΘΕΡΟΥ πλάτους 56px ώστε EL/EN
   να στοιχίζονται ίδια (LESSONS 5). Hover = η κίνηση .pro-row του CEIOS: φόντο + 2px gradient μπάρα αριστερά ── */
.sheet{display:grid;border-bottom:1px solid var(--line)}
.sheet .row{border-top:1px solid var(--line);position:relative}
/* padding-left 14px ΜΟΝΙΜΑ (έλεγχος 1 10/09 — D9/M3): η 2px μπάρα στο left:0 σχεδιαζόταν ΠΑΝΩ στο «0» του δείκτη («|01»)· στην αφή το hover
   που μετακινούσε το padding δεν έρχεται ποτέ. Το hover πια μετακινεί τα παιδιά με transform, όχι το padding (K16, LESSONS 49). */
.sheet summary{display:grid;grid-template-columns:56px minmax(0,.36fr) 1fr auto 24px;gap:0 18px;align-items:baseline;padding:22px 18px 22px 14px;cursor:pointer;list-style:none;position:relative;transition:background .25s ease}
.sheet summary>*{transition:transform .25s ease}
.sheet summary::-webkit-details-marker{display:none}
.sheet summary::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;background:var(--gen);transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.sheet .idx{font:600 11px/1.6 var(--font-m);letter-spacing:.14em;color:var(--dim)}
.sheet summary h3{font-size:17px;line-height:1.35}
.sheet .sum{color:var(--muted);font-size:14.5px;line-height:1.55}
.sheet .more{font:600 10.5px/1.6 var(--font-m);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-text);white-space:nowrap}   /* ένδειξη αφής: «υπάρχει κάτι από κάτω» */
.sheet .chev{width:8px;height:8px;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(-45deg);justify-self:end;align-self:center;transition:transform .25s}
.sheet .row[open] summary::before{transform:scaleY(1)}
.sheet .row[open] .idx{color:var(--cyan-text)}   /* συμπαγές, όχι gradient κείμενο: στα 11px το μπλε άκρο #4F7CF7 μετρούσε 3.78:1 σε λευκό — gradient text μόνο ≥26px (.hi, CONCEPT §2.2 · έλεγχος 2 10/09 — H1) */
.sheet .row[open] .chev{transform:rotate(45deg)}
.sheet .body{display:grid;grid-template-columns:1fr 120px;gap:24px;align-items:center;padding:0 18px 26px 88px}   /* 88 = 14 + 56 + 18: οι κουκκίδες κάτω από τον τίτλο */
.sheet .body ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sheet .body li{font:500 14px/1.5 var(--font-b);color:var(--muted);display:flex;gap:10px;align-items:flex-start}
.sheet .body li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gen);margin-top:8px;flex:none}
/* Το γλυφικό σχεδιάζεται (dasharray) όταν ανοίγει η γραμμή· το url(#kg) μένει attribute στο SVG (LESSONS 51) */
.sheet .glyph{width:64px;height:64px;justify-self:center}
.sheet .glyph path{stroke-dasharray:340;stroke-dashoffset:340;transition:stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1) .1s}
.sheet .row[open] .glyph path{stroke-dashoffset:0}

/* ── PRODUCTS «Προϊόντα» (spyros 11/09): μία κάρτα CEIOS + μία ουδέτερη θέση. ΜΟΝΟ μέσα στο .ceios-panel ζουν τα --cx-* (βιολετί→ματζέντα
   του CEIOS)· ποτέ --gen μέσα, ποτέ --cx-* έξω (CONCEPT §2.1). Το mock παράθυρο (χάρτης/πρόγραμμα/σύνοψη) και η «οικογένεια» έφυγαν (LESSONS 111). ── */
.products{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:18px;align-items:stretch}
.product{position:relative;display:grid;gap:16px;align-content:start;justify-items:start;padding:28px 30px 30px;border-radius:24px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1)}
.ceios-panel{--cx-a:#7C3AED;--cx-b:#A855F7;--cx-c:#D946EF;--cx-grad:linear-gradient(93deg,#7C3AED,#A855F7 55%,#D946EF);
  --cx-line:rgba(124,58,237,.30);--cx-sh:0 18px 44px rgba(124,58,237,.16);   /* ο πλανήτης-αδελφός, με τα δικά του χρώματα, ΜΟΝΟ εδώ */
  /* --cx-grad-t: το gradient του CEIOS για επιφάνειες με ΛΕΥΚΟ κείμενο (CTA) — 14% μελάνι και χωρίς το ματζέντα άκρο (έλεγχος 1 10/09 — K5):
     λευκό 9–14px πάνω στο #D946EF μετρούσε 3.46:1, στο #A855F7 3.96:1· με το μελάνι το άκρο #A855F7 δίνει 4.88:1, το #7C3AED 5.7:1 */
  --cx-grad-t:linear-gradient(rgba(26,16,51,.14),rgba(26,16,51,.14)),linear-gradient(93deg,#7C3AED,#A855F7 85%);
  border-color:var(--line-2);box-shadow:var(--cx-sh)}
.cx-brand{display:flex;align-items:center;gap:12px;transition:transform .2s}   /* ΑΚΡΙΒΩΣ το brand του nav του CEIOS — ο δεσμός της οικογένειας γίνεται κυριολεκτικός */
.cx-brand svg{width:38px;height:38px;flex:none;filter:drop-shadow(0 4px 10px rgba(124,58,237,.25))}
.cx-brand>span{display:grid;gap:5px}
.cx-brand .w{font:700 19px/1 var(--font-d);letter-spacing:.24em;color:var(--ink)}
.cx-brand .by{font:600 8.5px/1 var(--font-m);letter-spacing:.22em;color:var(--dim);text-transform:uppercase}
.cx-full{font:600 11px/1.5 var(--font-m);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}   /* το όνομα του προϊόντος — δεν μεταφράζεται (LESSONS 10) */
.product .p-desc{font-size:16.5px;line-height:1.6;color:var(--muted);max-width:44ch;text-wrap:pretty}
.product .btn{margin-top:6px}
.ceios-panel .btn-p{background:var(--cx-grad-t);box-shadow:0 8px 24px rgba(124,58,237,.28),inset 0 0 0 1px rgba(255,255,255,.18)}   /* το CTA φορά το gradient του CEIOS (έκδοση κειμένου, K5), όχι της KYVOGEN */
/* Ουδέτερη θέση: διακεκομμένο περίγραμμα, διάφανο έδαφος, γλυφικό μόνο περίγραμμα — ΧΩΡΙΣ όνομα (SPEC §1) */
.product.more{border-style:dashed;border-color:var(--line-2);background:transparent;box-shadow:none}
.product.more .cg{width:56px;height:56px;display:block}
.product.more h3{font-size:18px;color:var(--muted)}
.product.more p{color:var(--dim);font-size:14.5px;line-height:1.6;max-width:36ch}

/* ── ORIGIN «Προέλευση» — η προέλευση ως απόδειξη, ΜΟΝΟ με τις φράσεις του SPEC §1· λευκή λωρίδα με στατικό ισομετρικό μοτίβο στο δεξί μισό.
   Το «ημερολόγιο ημέρας» δεξιά έφυγε 11/09 (μιμούνταν συμβάντα του προϊόντος — LESSONS 111)· έλεγχος 3 11/09 (LESSONS 113): η λωρίδα ΔΕΝ μένει μισή —
   με μία στήλη .sec-h (max 820px) το δεξί ~45% της λωρίδας ήταν κενό πάνω στο μοτίβο και διάβαζε ως «κάτι ήταν εδώ». Τώρα grid 1.1fr .9fr (όπως .products):
   κείμενο αριστερά, ΠΛΑΚΕΤΑ ΚΛΙΜΑΚΑΣ δεξιά πάνω στο μοτίβο — λευκή πλάκα, mono σειρές με το εξάγωνο του .hint, ίδια γραμματική με την πλακέτα ταυτότητας·
   οι ΜΟΝΕΣ «μετρήσεις» της σελίδας (δεκάδες / εκατοντάδες / πραγματικά — όχι αριθμοί). Σε μία στήλη (≤980) κάτω από το κείμενο, πλήρες πλάτος. ── */
.org{background:var(--paper);overflow:hidden}
.org::before{content:"";position:absolute;inset:0;background:var(--iso);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 45%,var(--ink) 75%);mask-image:linear-gradient(90deg,transparent 45%,var(--ink) 75%)}
.org .wrap{position:relative}
.org-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.org .sec-h{margin-bottom:0}
.org-plate{justify-self:end;width:min(100%,420px);padding:22px 24px 20px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line-2);box-shadow:var(--sh-1)}
.org-plate .plate-t{display:block;font:600 10px/1 var(--font-m);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.facts{list-style:none;margin:0;padding:0;display:grid}
.facts li{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid var(--line);font:600 11px/1.5 var(--font-m);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan-text)}   /* --cyan-text: AA (87)· καμία opacity στο κείμενο· στα 320 η μακρύτερη EL σειρά τυλίγει σε δύο γραμμές — γι' αυτό flex-start */
.facts li:first-child{border-top:0;padding-top:0}
.facts li::before{content:"";width:11px;height:12px;flex:none;margin-top:2px;background:var(--cyan-ink);opacity:.75;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}   /* το εξάγωνο του .hint· 2px = (16.5px γραμμή − 12px) / 2 */
.org .fn{padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--dim);line-height:1.55}
/* ── APPROACH «Πώς δουλεύουμε» — ράγα με 4 σταθμούς. Το φως προχωρά με το scroll (--p, JS, transform μόνο)· CSS default --p:1 και
   όλοι .lit στο HTML → reduced-motion / JS-off = πλήρως φωτισμένο. Το .light κάθεται ΔΕΞΙΑ και μετατοπίζεται κατά (p−1)·--rw:
   χωρίς JS (--rw άγνωστο) μένει στο τέλος της ράγας — που είναι και το σωστό για p=1 ── */
.method{background:var(--bg)}
.rail-wrap{position:relative;padding-top:22px}
.rail-line{position:absolute;left:0;right:0;top:66px;height:2px;background:var(--line-2);z-index:0}   /* 66 = 22 (padding) + 22 (η σειρά .n του αριθμού) + 22 (μισό εξάγωνο 44px) — με 44 η ράγα περνούσε από την ΠΑΝΩ κορυφή των εξαγώνων και το φως στην άκρη καθόταν 22px πάνω από τους κόμβους (έλεγχος 2 10/09 — D-05)· η κάθετη παραλλαγή ≤760 έχει δικό της left:21px */
.rail-line::after{content:"";position:absolute;inset:0;background:var(--gen);transform:scaleX(var(--p,1));transform-origin:left;transition:transform .25s ease-out}
.rail-line .light{position:absolute;right:0;top:50%;width:10px;height:10px;border-radius:50%;background:var(--cyan-node);box-shadow:0 0 0 2px var(--cyan-ink),0 0 0 6px rgba(34,211,238,.18);
  transform:translate(calc((var(--p,1) - 1) * var(--rw,0px) + 50%),-50%);transition:transform .25s ease-out}
.stations{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.station{display:grid;justify-items:start;align-content:start}
.station .n{display:block;height:22px;font:600 11px/1 var(--font-m);letter-spacing:.16em;color:var(--dim)}
/* Δύο περιγράμματα: .h0 γκρι με γέμισμα --bg (κρύβει τη ράγα πίσω από το εξάγωνο), .h1 gradient που ανάβει στο .lit (url(#kg) = attribute, LESSONS 51) */
.station .hx{width:44px;height:44px;display:block;margin-left:-2px}
.station .hx .h0{fill:var(--bg);transition:stroke .4s}
.station .hx .h1{opacity:0;transition:opacity .5s}
.station .hx .nd{opacity:0;transform-origin:50px 51px;transform:scale(.4);transition:opacity .4s,transform .5s cubic-bezier(.2,.9,.3,1.4)}
.station h3{font-size:22px;line-height:1.2;margin-top:16px;color:var(--muted);transition:color .5s}
/* Το κείμενο ΔΕΝ θαμπώνει πριν φτάσει το φως (έλεγχος 1 10/09 — D7/K6): opacity .55 στο --muted = 2.7:1, κάτω από AA, και έκρυβε περιεχόμενο
   πίσω από εφέ. «Άσβηστος» σταθμός = γκρι εξάγωνο χωρίς κόμβο + h3 σε --muted (8.4:1)· το σώμα κειμένου πάντα πλήρες. */
.station p{margin-top:10px;color:var(--muted);font-size:14.5px;line-height:1.6}
.station p+p{margin-top:6px}
.station.lit .hx .h1{opacity:1}
.station.lit .hx .nd{opacity:1;transform:scale(1)}
.station.lit h3{color:var(--ink)}

/* ── TECHNOLOGY — ΚΑΤΑΛΟΓΟΣ ΥΛΙΚΩΝ (bill of materials). Στήλη ετικέτας ΣΤΑΘΕΡΟΥ πλάτους 120px (χωρά «ΝΟΗΜΟΣΥΝΗ», LESSONS 5).
   Καλωδιωμένο: πλακέτα με data-link ανάβει την αρχή #pp-<link> και το JS τραβά ένα <line> στο .wires (μετράται ΜΟΝΟ σε εκείνο το
   συμβάν — LESSONS 72/73)· τα καλώδια κρύβονται σε κινητό ── */
.bom-wrap{position:relative}
.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.wires line{fill:none;stroke-width:1;stroke-dasharray:1200;stroke-dashoffset:1200;opacity:0;transition:stroke-dashoffset .35s ease-out,opacity .2s}
.wires line.on{opacity:1;stroke-dashoffset:0}
.wires .w-eu{stroke:var(--l-data)}.wires .w-off{stroke:var(--l-field)}.wires .w-ai{stroke:var(--l-intel)}.wires .w-sec{stroke:var(--l-ui)}
.bom{display:grid;border-bottom:1px solid var(--line)}
.bom-g{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
.bom-g[data-l="field"]{--lc:var(--l-field);--lct:var(--l-field-t)}.bom-g[data-l="data"]{--lc:var(--l-data);--lct:var(--l-data-t)}.bom-g[data-l="intel"]{--lc:var(--l-intel);--lct:var(--l-intel-t)}.bom-g[data-l="ui"]{--lc:var(--l-ui);--lct:var(--l-ui-t)}
.g-lbl{font:600 10.5px/1 var(--font-m);letter-spacing:.18em;text-transform:uppercase;color:var(--lct);padding-top:11px;white-space:nowrap}   /* --lct: 10.5px σε --bg, AA μετρημένο (H1)· η τελεία της πλακέτας μένει --lc */
.chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
/* ΜΟΝΟ το κουμπί είναι πλακέτα — ένα επίπεδο ανά selector (LESSONS 28)· τα ονόματα τεχνολογιών ΔΕΝ μεταφράζονται (LESSONS 10) */
.chips .chip{display:inline-flex;align-items:center;gap:9px;max-width:100%;padding:9px 13px;border-radius:999px;border:1px solid var(--line-2);background:var(--paper);
  font:600 13px/1.2 var(--font-b);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .2s,box-shadow .2s,transform .2s,background .2s}
.chips .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lc);flex:none}
.chips .chip.on,.chips .chip.lit,.chips .chip[aria-pressed="true"]{border-color:var(--lc);box-shadow:0 0 0 3px rgba(139,92,246,.14);background:var(--paper)}
.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.pp{--lc:var(--violet);position:relative;padding:20px 20px 22px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform .22s,box-shadow .22s,border-color .22s}
#pp-eu{--lc:var(--l-data)}#pp-off{--lc:var(--l-field)}#pp-ai{--lc:var(--l-intel)}#pp-sec{--lc:var(--l-ui)}
.pp .st{display:block;font:600 10px/1.5 var(--font-m);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);transition:color .25s}   /* η ψυχρή λεπτομέρεια: «Region · EU-Frankfurt» */
.pp h3{font-size:17px;margin-top:10px}
.pp p{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.6}
.pp.lit{border-color:transparent;box-shadow:var(--sh-2)}
.pp.lit::before{opacity:1}
.pp.lit .st{color:var(--cyan-text)}

/* ── COMPANY — ΠΛΑΚΕΤΑ ΤΑΥΤΟΤΗΤΑΣ: ΜΟΝΟ τα γεγονότα του SPEC §1. 3D tilt (--rx/--ry) μόνο με fine pointer (LESSONS 33/57)· υδατογράφημα =
   το σήμα στα 420px, opacity .06, ο κόμβος αναπνέει με transform (όχι filter — LESSONS 50) ── */
#company{overflow:hidden}   /* το υδατογράφημα σε κινητό έβγαινε 70px έξω από το viewport και το iOS άφηνε τη σελίδα να σέρνεται πλάγια (έλεγχος 1 10/09 — M4) */
.idplate{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
/* ύψος = το ύψος της πλακέτας (όχι σταθερά 420px): τα «V» του σήματος έβγαιναν πάνω/κάτω από την πλάκα σαν ξένο σχήμα (έλεγχος 1 10/09 — D15) */
.wm{position:absolute;left:-70px;top:0;height:100%;max-height:420px;width:auto;aspect-ratio:1;opacity:.06;pointer-events:none;z-index:0}
.wm .nd{transform-origin:50px 52px;animation:nbreathe 4s ease-in-out infinite}
@keyframes nbreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}   /* ζούσε στο μπλοκ CEIOS ως 11/09· εδώ πια, δίπλα στον μόνο χρήστη του */
.stage{perspective:1400px;position:relative;z-index:1}
.panel{position:relative;padding:26px 28px;border-radius:22px;border:1px solid var(--line-2);background:var(--paper);box-shadow:var(--sh-1);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .12s ease-out}
.idlog{margin:0;display:grid;gap:11px}
.idlog>div{display:grid;grid-template-columns:128px 1fr;gap:14px;align-items:baseline}   /* 128px: χωρά και το «ΠΡΩΤΟ ΠΡΟΪΟΝ» (ως 11/09 «ΠΡΩΤΟ ΣΥΣΤΗΜΑ», η μακρύτερη ετικέτα — γι' αυτό τα 128) — ίδια αφετηρία σε EL/EN (LESSONS 5) */
.idlog dt{font:600 10.5px/1.6 var(--font-m);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idlog dd{margin:0;font:600 13px/1.6 var(--font-m);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);overflow-wrap:anywhere}
.idlog dd.ok{color:var(--cyan-text)}
.idlog .caret{display:inline-block;width:7px;height:12px;background:var(--cyan);vertical-align:-2px;margin-left:5px;animation:blink 1s steps(1) infinite}
/* Οι σειρές είναι ορατές by default· το .type (JS, στην αποκάλυψη) τις κρύβει για να «γραφτούν» με .on — ΠΡΟΣΘΕΤΙΚΟ (LESSONS 38),
   δίχτυ .shown στο 1,5″ που τις επαναφέρει με το ζόρι (LESSONS 39) */
.type .idlog>div{opacity:0;transform:translateX(-8px);transition:opacity .35s ease,transform .35s ease}
.type .idlog>div.on{opacity:1;transform:none}
.type.shown .idlog>div{opacity:1!important;transform:none!important}
.values{display:grid;gap:18px;position:relative;z-index:1}
.val h3{font-size:17px}
.val p{margin-top:6px;color:var(--muted);font-size:14.5px;line-height:1.6}
.hire{display:inline-flex;align-items:center;gap:10px;justify-self:start;margin-top:6px;padding:13px 20px;border-radius:14px;border:1px solid var(--line-2);background:var(--paper);box-shadow:var(--sh-1);
  font:700 14px/1 var(--font-b);color:var(--ink);transition:transform .18s ease,box-shadow .18s ease,border-color .2s}   /* ghost κουμπί με βέλος → mailto */
.hire .ar{transition:transform .2s}
.hire-sub{display:block;font-size:12.5px;color:var(--dim);line-height:1.5;margin-top:-8px}

/* ── CONTACT — ζώνη CTA + φόρμα. Λευκή πλάκα με ΣΤΑΤΙΚΟ ισομετρικό μοτίβο στο αριστερό 55% (CSS, όχι καμβάς)· το conic sweep του
   CEIOS κόπηκε — πολύ δυνατό σε λευκό. Το αίτημα ΠΟΤΕ δεν χάνεται σιωπηλά: /api/contact → αλλιώς mailto (LESSONS 64) ── */
.ct{background:var(--bg)}
.cta-band{position:relative;overflow:hidden;padding:56px 48px;border-radius:28px;border:1px solid var(--line-2);
  background:linear-gradient(135deg,rgba(79,124,247,.10),var(--paper) 45%,rgba(192,38,211,.06));box-shadow:0 40px 100px rgba(26,16,51,.10),inset 0 0 0 1px var(--paper)}
.cta-band::before{content:"";position:absolute;inset:0;background:var(--iso);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,var(--ink) 20%,transparent 55%);mask-image:linear-gradient(90deg,var(--ink) 20%,transparent 55%)}
.cta-band>*{position:relative}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.ct-grid>div{display:grid;gap:14px;justify-items:start}
.cta-band h2{font-size:clamp(26px,3.2vw,40px);font-weight:800;line-height:1.12;max-width:18ch}
.cta-band p{color:var(--muted);max-width:52ch;font-size:16px;line-height:1.65}
.ct-alt{font-size:14.5px}
.ct-alt a,.form .ok a{color:var(--cyan-text);font-weight:700;text-decoration:underline;text-decoration-color:rgba(8,145,178,.35);text-underline-offset:3px}   /* ορατός δρόμος επικοινωνίας ΚΑΙ χωρίς JS (LESSONS 85) */
/* Μίνι πλέγμα: 6 κύβοι + ο 7ος κρυφός (dasharray)· στην επιτυχία (.grown) σχεδιάζεται ο 7ος και ο κόμβος πάλλεται κυανός — «η δομή σας μόλις ξεκίνησε» */
.ct-mini{width:90px;height:90px;display:block;margin-top:12px}
.ct-mini .hexes{opacity:.9}.ct-mini .spokes{opacity:.55}   /* οι 6 έτοιμοι κύβοι: ήρεμοι, το url(#kg) μένει attribute (LESSONS 51) */
.ct-mini .c7{stroke-dasharray:130;stroke-dashoffset:130;transition:stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1)}
.ct-mini .c7.sp{stroke-dasharray:40;stroke-dashoffset:40;transition-delay:.4s}
.ct-mini .ring{opacity:.5;transform-origin:50px 50px}
.ct-mini .nd{transform-origin:50px 50px}
.grown .c7{stroke-dashoffset:0}
.grown .nd{animation:ctpulse 1s cubic-bezier(.2,.7,.2,1)}
.grown .ring{animation:ctring 1s ease-out}
@keyframes ctpulse{0%{transform:scale(1)}40%{transform:scale(1.6)}100%{transform:scale(1)}}
@keyframes ctring{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
/* Φόρμα: όνομα|εταιρεία σε μία σειρά, email/μήνυμα πλήρες πλάτος· λευκά πεδία, hairline, focus ring --ring */
.form{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.form input,.form textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);font:500 14px/1.4 var(--font-b);outline:none;
  transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.form input::placeholder,.form textarea::placeholder{color:var(--dim);opacity:1}
.form input[type="email"],.form textarea,.form .ct-priv,.form .err,.form .ok{grid-column:1/-1}
.form textarea{resize:vertical;min-height:120px;font-family:var(--font-b)}
.form input:focus,.form textarea:focus{border-color:var(--violet);box-shadow:var(--ring)}
.form input[aria-invalid="true"],.form textarea[aria-invalid="true"]{border-color:var(--fuchsia);box-shadow:0 0 0 3px rgba(192,38,211,.20)}   /* το σφάλμα δείχνει ΠΟΙΟ πεδίο (LESSONS 66) */
/* Honeypot: εκτός οθόνης, εκτός tab, εκτός a11y-tree — ΜΕΣΩ κλάσης, όχι style="" (CSP §4.5, LESSONS 65/75) */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.form .btn{justify-self:start;grid-column:1/-1}
.form .btn:disabled{opacity:.6;cursor:progress}   /* όσο περιμένει το /api/contact */
.form .ct-priv{font-size:12.5px;color:var(--dim);line-height:1.5}   /* .form .ct-priv (0,2,0): το .cta-band p (0,1,1) νικούσε και το τύπωνε ως δεύτερη παράγραφο 16px (έλεγχος 1 10/09 — D14) */
.form .err{padding:12px 16px;border-radius:12px;background:rgba(192,38,211,.08);border:1px solid rgba(192,38,211,.35);color:var(--ink);font-weight:600;font-size:14px}
.form .ok{display:none;padding:14px 16px;border-radius:12px;background:rgba(34,211,238,.10);border:1px solid var(--cyan-ink);color:var(--ink);font-weight:600;outline:none;line-height:1.5}   /* outline:none: παίρνει focus προγραμματικά (LESSONS 69) */
/* ΑΚΡΙΒΩΣ ένα μήνυμα επιτυχίας: .sent → ct.ok, .sent.alt → ct.okmail (άνοιξε mailto). Στο .alt τα πεδία ΜΕΝΟΥΝ ορατά (έλεγχος 1 10/09 — K18):
   αν δεν υπάρχει mail handler ο επισκέπτης πρέπει να μπορεί να αντιγράψει το κείμενό του ή να ξαναδοκιμάσει */
.form.sent:not(.alt) .ok:not(.alt){display:block}
.form.sent.alt .ok.alt{display:block}
.form.sent:not(.alt) input,.form.sent:not(.alt) textarea,.form.sent:not(.alt) button,.form.sent .err,.form.sent:not(.alt) .ct-priv{display:none}

/* ── FOOTER: ΜΙΑ συνεχής λίστα σε κινητό (LESSONS 24)· Privacy/Terms = «#» μέχρι την ολοκλήρωση της σύστασης (SPEC §1) ── */
footer{padding:48px 0 40px;border-top:1px solid var(--line);background:var(--bg)}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;align-items:start}
.brand.sm{gap:10px;margin-bottom:12px}
.brand.sm svg{width:30px;height:30px;filter:none}
.brand.sm .w{font-size:15px}
footer .fb{font:600 11px/1.8 var(--font-m);letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
footer .fb b{color:var(--ink);font-weight:600}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer li a{color:var(--muted);font-size:14px;transition:color .2s}
footer .bottom{grid-column:1/-1;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:600 11px/1 var(--font-m);letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
/* ── reveal — ΠΡΟΣΘΕΤΙΚΟ μόνο: κάθε στοιχείο πλήρως ορατό σε ηρεμία· ο observer απλώς παίζει ένα rise καθώς πλησιάζει (LESSONS 38).
   Τίποτα δεν παρκάρει αόρατο (thumbnails, κρυφές καρτέλες, browsers χωρίς IO, JS off βλέπουν την ολοκληρωμένη σελίδα) ── */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* fill-mode backwards (ΟΧΙ both): το «both» κρατούσε για πάντα το transform:none του keyframe και νικούσε το hover-lift (LESSONS 39) */
.rv.in{animation:rise .75s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--d,0s)}
/* 🛡️ ΔΙΧΤΥ: το «backwards» κρατά το στοιχείο στο opacity:0 όσο περιμένει την έναρξη· αν το animation δεν ξεκινήσει ποτέ (παγωμένο
   timeline, κρυφή καρτέλα), το JS βάζει .shown στο 1,2″ και το επαναφέρει με το ζόρι — περιεχόμενο ΠΟΤΕ κρυμμένο από εφέ (LESSONS 39).
   ΧΩΡΙΣ transform:none!important εδώ (διαφορά από το CEIOS): οι έδρες της θέσης (skew) και η πλακέτα ταυτότητας (tilt) έχουν ΔΙΚΟ
   τους transform ηρεμίας που δεν πρέπει να σβήσει· το animation:none αρκεί, αφού μαζί του φεύγει και το transform του keyframe */
.rv.shown{animation:none!important;opacity:1!important}

/* ── boot: ΛΕΥΚΟ overlay, το σήμα σχεδιάζεται σε gradient και ΓΙΝΕΤΑΙ ο πρώτος κύβος του hero (CONCEPT §2.6): το JS θέτει --bx/--by/--bs
   στο .in (CSSOM, transform μόνο). Σβήνει ΜΟΝΟ ΤΟΥ από CSS ακόμη χωρίς JS (LESSONS 40)· click = skip, μία φορά ανά session ── */
#boot{position:fixed;inset:0;z-index:100;background:var(--paper);display:grid;place-items:center;transition:opacity .7s ease,visibility .7s;cursor:pointer;
  animation:bootoff .7s ease 2.6s forwards}   /* δίχτυ ασφαλείας: σβήνει μόνο του ακόμα και χωρίς JS */
@keyframes bootoff{to{opacity:0;visibility:hidden;pointer-events:none}}
#boot.off{opacity:0;visibility:hidden;pointer-events:none}
#boot .in{display:grid;justify-items:center}
/* Συνέχεια boot→hero (έλεγχος 2 10/09 — D-01): το σήμα ΜΕΝΕΙ κεντραρισμένο όσο παίζει το boot. Πριν, το --bx/--by/--bs γραφόταν στο .in μόλις μετρηθεί ο
   καμβάς (≈0 ms) και χωρίς transition — σήμα ΚΑΙ οι τρεις γραμμές κάθονταν 1,55″ πάνω από τη θέση του πλέγματος (x≈1060 στα 1440, κενό το αριστερό 2/3·
   στο κινητό προς την κορυφή) και διάβαζε ως χαλασμένος loader, όχι ως «το σήμα γίνεται ο πρώτος κύβος». Τώρα το fx.js γράφει τις τιμές στο 'bootoff' και
   βάζει .go: ΜΟΝΟ το σήμα ταξιδεύει στον κύβο gen-0 (.6″), οι γραμμές σβήνουν πρώτες (.25″), το overlay ξεθωριάζει παράλληλα (.7″, .off). Χωρίς μέτρηση ή
   με καμβά εκτός οθόνης δεν μπαίνει .go = απλό κεντραρισμένο cross-fade (CONCEPT §2.6). Υπό RM το boot αφαιρείται από το JS. */
#boot svg{width:110px;height:110px;filter:drop-shadow(0 10px 24px rgba(139,92,246,.30));transform-origin:50% 50%}   /* σκιά, όχι λάμψη· στατικό SVG (LESSONS 50)· origin = το κέντρο του σήματος */
#boot.go svg{transform:translate(var(--bx,0px),var(--by,0px)) scale(var(--bs,1));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
#boot.go .ln{opacity:0;transition:opacity .25s}
#boot .st{stroke-dasharray:270;stroke-dashoffset:270;animation:drawin 1s cubic-bezier(.2,.7,.2,1) forwards}   /* 270 ≈ περίμετρος του εξαγώνου */
#boot .st.b{stroke-dasharray:50;stroke-dashoffset:50;animation-delay:.18s}   /* κάθε ακτίνα ≈ 44 μονάδες — το dash ανά υπο-διαδρομή */
@keyframes drawin{to{stroke-dashoffset:0}}
#boot .cr{opacity:0;transform-origin:50px 52px;animation:pop .5s .85s cubic-bezier(.2,.9,.3,1.4) forwards}
@keyframes pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
#boot .ln{margin-top:22px;font:600 11px/1.9 var(--font-m);letter-spacing:.26em;color:var(--dim);text-transform:uppercase;text-align:center;min-height:44px}
#boot .ln b{color:var(--cyan-text);font-weight:600}
#boot .ln i{display:inline-block;width:7px;height:12px;background:var(--cyan);vertical-align:-2px;margin-left:4px;animation:blink 1s steps(1) infinite}

/* ── halo δείκτη + grain. Halo: λιλά ακτινικό σε multiply ΠΑΝΩ από τη σελίδα (φως που «βάφει» το χαρτί), όχι screen (CONCEPT §2.2)·
   grain: ΣΚΟΥΡΟΣ θόρυβος (rect default = μαύρο) σε opacity .03 (≤ .035, SPEC §3), ίδιο data-URI feTurbulence, κανένας εξωτερικός πόρος ── */
#halo{position:fixed;left:0;top:0;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:3;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(139,92,246,.10),rgba(79,124,247,.04) 42%,transparent 70%);mix-blend-mode:multiply;opacity:0;transition:opacity .5s}
@media (hover:hover) and (pointer:fine){#halo.on{opacity:1}}
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.03;background-size:200px 200px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.9'/></svg>")}

/* ── hover ΜΟΝΟ όπου υπάρχει δείκτης: στην αφή το iOS «κολλάει» το :hover μετά το tap — κάρτες έμεναν σηκωμένες, κουμπιά φωτεινότερα (LESSONS 18) ── */
@media (hover:hover){
  .nav nav a:hover{color:var(--ink);transform:translateY(-1px)}
  .btn:hover{transform:translate(var(--mx,0px),calc(var(--my,0px) - 3px))}
  .btn-p:hover{box-shadow:0 14px 34px rgba(139,92,246,.36),inset 0 0 0 1px rgba(255,255,255,.28);filter:brightness(1.05)}
  .btn-g:hover{border-color:var(--violet);box-shadow:var(--sh-2)}
  .btn:hover .ar,.hire:hover .ar{transform:translateX(4px)}
  .ceios-panel .btn-p:hover{box-shadow:0 14px 34px rgba(124,58,237,.36),inset 0 0 0 1px rgba(255,255,255,.28)}
  .lift:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
  .sector:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
  .sector:hover .cg .nd{fill:var(--cyan)}   /* ο κόμβος του γλυφικού γίνεται κυανός */
  .sector.open:hover{border-color:var(--violet);box-shadow:none}
  .half:hover{background:var(--panel);border-color:var(--line)}
  .half.kyvo:hover{transform:translateY(-2px)}
  .half.kyvo:hover+.mark-anim .hx{animation:trace .9s cubic-bezier(.2,.7,.2,1)}
  .half.kyvo:hover+.mark-anim .sp{animation:tracesp .5s .7s cubic-bezier(.2,.7,.2,1) backwards}
  .acro:has(.gen:hover) .mark-anim .nd{animation:npop .55s cubic-bezier(.2,.9,.3,1.4)}
  .face:hover{transform:skewY(var(--sk)) translateY(-6px);box-shadow:var(--sh-2),inset 0 2px 0 var(--fc)}   /* η κλίση ΜΕΝΕΙ στο lift */
  .face:hover::before{opacity:1}
  .layer:hover{background:rgba(255,255,255,.55)}
  .layer:hover .plate{background:var(--lf2);border-width:2px}
  .layer:hover h3{color:var(--ink)}
  .stack:has(.layer:hover) .layer:not(:hover):not(.on) .plate{opacity:.45}   /* μόνο η πλάκα, ποτέ το κείμενο (M1) */
  .stack:has(.layer:hover) .layer:not(:hover):not(.on) .ltxt::before{opacity:.3}
  .sheet summary:hover{background:linear-gradient(90deg,rgba(139,92,246,.06),transparent 70%)}
  .sheet summary:hover>*:not(.chev){transform:translateX(6px)}   /* transform, όχι padding-left (K16, LESSONS 49) */
  .sheet summary:hover::before{transform:scaleY(1)}
  .cx-brand:hover{transform:translateY(-1px)}
  .ceios-panel.lift:hover{box-shadow:0 22px 48px rgba(124,58,237,.22)}   /* η σκιά του CEIOS και στο lift — όχι η λιλά της KYVOGEN μέσα στην κάρτα του */
  .station:hover h3{color:var(--ink)}
  .chips .chip:hover{border-color:var(--lc);transform:translateY(-2px);box-shadow:var(--sh-1)}
  .pp:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
  .hire:hover{transform:translateY(-3px);border-color:var(--violet);box-shadow:var(--sh-2)}
  .ct-alt a:hover{text-decoration-color:var(--cyan-ink)}
  .lang button:not(.on):hover{color:var(--ink)}
  footer li a:hover{color:var(--ink)}
}
/* ── Αφή: ανάδραση «πατήθηκε» χωρίς hover (LESSONS 17/18)· το halo δεν υπάρχει καν — 560×560 layer με blend που ποτέ δεν ανάβει (LESSONS 19) ── */
@media (hover:none){
  .btn:active,.hire:active{transform:translateY(1px) scale(.98);filter:brightness(.96);transition-duration:.08s}
  .lang button:active,.chips .chip:active,.burger:active{filter:brightness(.94)}
  .face:active,.pp:active{box-shadow:var(--sh-2);transition-duration:.08s}
  .half:active{background:var(--panel)}
  .layer:active{background:rgba(255,255,255,.55)}
  .sheet summary:active{background:linear-gradient(90deg,rgba(139,92,246,.08),transparent 70%)}
  #halo{display:none}
}

/* ── responsive. 1440: το .wrap πιάνει τα 1200· 1200: η στοίβα στενεύει ── */
@media (max-width:1200px){
  .stack{grid-template-columns:340px minmax(0,1fr);--sx:160px;--pw:230px;--lead:55px}   /* --sx 160: η δεξιά κορυφή (160+163) αφήνει χώρο για το hairline ως την ετικέτα (364+14) */
  .principles{gap:12px}
}
@media (max-width:980px){
  /* ΟΛΑ τα grids μία στήλη (LESSONS 63)· το πλέγμα πρώτο, 62vw ψηλό (CONCEPT §2.3). Χωρίς min-height fold (D2) — σε κινητό/tablet το ύψος το ορίζει το περιεχόμενο */
  .hero{padding:28px 0 44px;min-height:0;display:block}
  .hero::before{display:none}   /* το λευκό ακτινικό (D13) είναι για τη στήλη κειμένου του desktop */
  .hero .wrap{grid-template-columns:1fr;gap:26px}
  .lat{order:-1;max-width:none;margin:0}
  .lat .poster,#latcv{aspect-ratio:auto;height:62vw;max-height:440px}
  .lat .halo{width:52vw;max-width:360px}
  .acro{grid-template-columns:1fr;row-gap:8px}   /* οι μισές στοιβάζονται, το σήμα ανάμεσα */
  .half.kyvo,.half.gen{justify-self:center}
  .mark-anim{width:88px;height:88px}
  .faces{grid-template-columns:1fr;gap:16px}
  .face{--sk:0deg}   /* απλές στοιβαγμένες κάρτες, χωρίς κλίση· η χρωματιστή πάνω γραμμή μένει */
  .face.top{width:100%}
  .hex-bg{display:none}
  .anat-grid{grid-template-columns:1fr;gap:28px}
  /* Η στοίβα πάνω, τα κείμενα από κάτω. Ζώνη 290px (όχι 380): ρόμβος 180px → 127px ψηλός, κέντρα 84…216px, κάτω άκρο 280 — 190px νεκρού
     εδάφους ανάμεσα σε hint και πλάκες διάβαζε ως σπασμένη ενότητα (έλεγχος 1 10/09 — M6). Το JS ΔΕΝ γράφει --oy εδώ (CSS defaults). */
  .stack{grid-template-columns:1fr;--pw:180px;--gap:44px;--sx:50%;min-height:0;padding-top:290px;align-content:start}
  .layer{grid-column:1}
  .ltxt::before{display:none}   /* το hairline δείχνει προς την πλάκα δίπλα — σε μία στήλη δεν υπάρχει «δίπλα» */
  .plate{top:60px}
  .bus{top:150px}
  .stack:has(.layer.on) .layer:not(.on) .plate{opacity:.6}   /* μόνο η πλάκα (M1): το .6 σε κείμενο = 2.98:1 */
  .ground::before{top:-10%}   /* σε μία στήλη η ενότητα είναι ~720px ψηλή: με -120% η μακρινή άκρη έμπαινε πίσω από τον τίτλο· -10% → ξεκινά στο ~51%, κάτω από τον τίτλο (D-06) */
  .sheet summary{grid-template-columns:40px 1fr 24px;gap:6px 12px;align-items:start;padding:18px 0 18px 12px}   /* 12px: ο δείκτης ξεκινά ΜΕΤΑ τη μπάρα των 2px (M3) */
  .sheet summary h3{grid-column:2}
  .sheet .sum{grid-column:2}
  .sheet .more{grid-column:2}
  .sheet .chev{grid-column:3;grid-row:1;margin-top:6px}
  .sheet .body{grid-template-columns:1fr;padding:0 0 22px 64px}   /* 64 = 12 + 40 + 12 */
  .sheet .glyph{grid-row:1;justify-self:start;width:48px;height:48px}   /* γλυφικό ΠΑΝΩ από τις κουκκίδες */
  .products{grid-template-columns:minmax(0,1fr)}   /* minmax(0,1fr), ποτέ σκέτο 1fr (LESSONS 26) */
  .product{padding:22px 20px 24px}
  .org-grid{grid-template-columns:minmax(0,1fr);gap:28px}   /* η πλακέτα κλίμακας κάτω από το κείμενο, πλήρες πλάτος (LESSONS 113) */
  .org-plate{justify-self:stretch;width:100%}
  .stations{grid-template-columns:1fr 1fr;gap:26px 22px}
  .bom-g{grid-template-columns:100px 1fr;gap:12px}
  .wires{display:none}   /* τα καλώδια κρύβονται· το tap ανάβει την πλάκα και τη φέρνει στην οθόνη (LESSONS 29) */
  .principles{grid-template-columns:1fr 1fr}
  .idplate{grid-template-columns:1fr;gap:30px}
  .wm{left:auto;right:-16px;top:0;height:auto;width:min(300px,60%)}   /* μέσα στο viewport (M4)· ύψος από το aspect-ratio, όχι από την ψηλή στοιβαγμένη πλακέτα */
  .stage{perspective:none}.panel{transform:none!important}   /* χωρίς λεπτό δείκτη το tilt δεν έχει νόημα (LESSONS 33) */
  .ct-grid{grid-template-columns:1fr;gap:30px}
  .ct-mini{display:none}
  .cta-band{padding:36px 22px}
  .form{grid-template-columns:1fr}
  .form input,.form textarea{font-size:16px}   /* iOS Safari: πεδίο <16px = ζουμ σε όλη τη σελίδα στο focus που ΔΕΝ επιστρέφει (LESSONS 20) */
  .form .btn{justify-self:stretch;justify-content:center}   /* full-width κουμπί, κεντραρισμένη ετικέτα (LESSONS 30) */
  .form .err{order:-1}   /* το μήνυμα ΠΑΝΩ από τα πεδία, όχι κάτω από το πληκτρολόγιο (LESSONS 67) */
  /* Μενού κινητού: κλείνει με πάτημα εκτός/Escape από το JS (LESSONS 22/83)· στόχοι ≥40px (LESSONS 21) */
  .nav nav{display:none;position:absolute;left:0;right:0;top:66px;flex-direction:column;gap:0;background:rgba(247,246,251,.97);border-bottom:1px solid var(--line);padding:10px 20px 16px;box-shadow:0 20px 40px rgba(26,16,51,.08)}
  .nav nav.open{display:flex}
  .nav nav a{padding:14px 0;font-size:15px}
  .nav nav a.on::after{bottom:8px;width:22px;right:auto}
  .burger{display:block;width:44px;height:44px;flex:none}
  .burger i{left:12px;right:12px;top:15px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:27px}
  .nav .lang{margin-left:auto;flex:none}.lang button{padding:0 12px;min-height:40px}
  section{padding:64px 0}
  .plate-sec{padding-top:44px}
  .sec-h{margin-bottom:30px}
  main section{scroll-margin-top:32px}   /* οι σύνδεσμοι «προσγείωναν» την ενότητα ΚΑΤΩ από το sticky nav (LESSONS 23) */
  /* Footer: ΜΙΑ συνεχής λίστα — μηδενικό gap + ίσο padding ανά σύνδεσμο = σωστό μέγεθος αφής (LESSONS 24) */
  footer .wrap{grid-template-columns:1fr;gap:0}
  footer .wrap>div:first-child{margin-bottom:22px}
  footer ul{gap:0}
  footer li a{display:block;padding:9px 0}
  footer .bottom{flex-direction:column;align-items:flex-start;gap:8px;letter-spacing:.08em}   /* το space-between έκοβε το δεύτερο στην άκρη */
}
@media (max-width:760px){
  /* Ράγα ΚΑΘΕΤΗ στα αριστερά: το φως κατεβαίνει, τα εξάγωνα κάθονται πάνω της */
  .rail-wrap{padding:0 0 0 0}
  .rail-line{top:0;bottom:0;left:21px;right:auto;width:2px;height:auto}
  .rail-line::after{transform:scaleY(var(--p,1));transform-origin:top}
  .rail-line .light{right:auto;left:50%;top:auto;bottom:0;transform:translate(-50%,calc((var(--p,1) - 1) * var(--rw,0px) + 50%))}
  .stations{grid-template-columns:1fr;gap:26px}
  .station{grid-template-columns:44px 1fr;column-gap:16px;align-items:start}
  .station .hx{grid-row:1/4;margin:0}
  .station .n{grid-column:2;height:auto}
  .station h3{grid-column:2;margin-top:4px}
  .station p{grid-column:2}
  .station p+p{margin-top:4px}
}
@media (max-width:640px){
  .hero h1 .hi{display:inline}   /* ρέει inline: χωρίς ορφανό «for»/«τον» πριν του· η άνοδος γίνεται fade (LESSONS 9) */
  .hero .cta .btn{flex:1 1 auto;justify-content:center}   /* τα δύο CTA ίδιο πλάτος (LESSONS 30) */
  .product .btn,.hire{justify-self:stretch;justify-content:center}   /* ίδια γλώσσα με τα CTA του hero και το Send της φόρμας — τα κοντά αριστερά pills έμοιαζαν ξένα (έλεγχος 2 10/09 — M-06) */
}
@media (max-width:600px){
  .principles{grid-template-columns:1fr}
  .bom-g{grid-template-columns:1fr;gap:8px}   /* η ετικέτα πάνω από τις πλακέτες */
  .g-lbl{padding-top:0}
  /* Πλακέτες σε ~250px λωρίδα: ΔΥΟ γραμμές με «…» — το line-clamp δουλεύει ΜΟΝΟ με display:-webkit-box (LESSONS 6) */
  .chips .chip{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.25;text-align:left}
  .chips .chip::before{display:none}   /* το -webkit-box δεν είναι flex: η κουκκίδα θα έπεφτε σε δική της γραμμή */
  /* ΧΩΡΙΣ στένεμα της στήλης dt στα 104px (έλεγχος 1 10/09 — M1): η μακρύτερη ετικέτα (τότε «ΠΡΩΤΟ ΣΥΣΤΗΜΑ», από 11/09 «ΠΡΩΤΟ ΠΡΟΪΟΝ») γινόταν «ΠΡΩΤΟ ΣΥΣΤΗ…»
     στο ένα σημείο που η εταιρεία λέει τα γεγονότα της (LESSONS 5). Στα 390 η πλάκα έχει ~298px: 128 + 14 + 156 χωρούν· κάτω από 360 στοιβάζεται (κανόνας ≤360). */
  .stations{gap:22px}
}
@media (max-width:430px){
  .eyebrow{font-size:10px;letter-spacing:.16em}   /* το eyebrow του hero χωρά σε ΜΙΑ γραμμή στα 390/360 (έλεγχος 1 10/09 — M9/K12)· στα 320 τυλίγει χωρίς ορφανό «·» (nbsp) */
  .half b{font-size:clamp(40px,13vw,56px)}
  .half{padding:14px 16px}
  .sec-h h2{font-size:clamp(24px,7vw,30px)}
  .sector{padding:10px 16px 10px 11px;font-size:13.5px}
  .lat .hint{font-size:10px;letter-spacing:.1em}
  .stack{padding-top:264px;--pw:160px;--gap:40px}   /* ρόμβος 160 → 113px ψηλός, κέντρα 75…195, κάτω άκρο 252 (M6) */
  .plate{top:55px}.bus{top:135px}
  /* 360–430 (έλεγχος 2 10/09 — L2): με το nowrap στη βάση το brand πλαταίνει στα ~166px· για να χωρούν brand + EN/EL + burger στα 360 (wrap 320px):
     .by 8px/.18em (≈125px) και pill padding 10 (≈81px) → 166 + 10 + 81 + 10 + 44 = 311 ≤ 320. Στα 390 (wrap 350, gap 22): 335 ≤ 350. */
  .brand .by{font-size:8px;letter-spacing:.18em}
  .lang button{padding:0 10px}
  .half .df{max-width:30ch}   /* σε στενή οθόνη τυλίγει κεντραρισμένο (D12)· στα desktop 40ch = μία γραμμή (D-07) */
}
@media (max-width:360px){
  /* 320px: brand + γλώσσα + μενού δεν χωρούσαν και το burger συρρικνωνόταν σε λωρίδα (LESSONS 25) */
  .nav .wrap{gap:10px}
  .brand{gap:9px}.brand svg{width:32px;height:32px}
  .brand .w{font-size:16px;letter-spacing:.2em}
  .hud .feed{min-width:100%}
  .idlog>div{grid-template-columns:1fr;gap:2px}   /* ετικέτα πάνω από την τιμή */
}
@media (max-width:340px){
  .wrap{width:calc(100% - 32px)}
  .half b{font-size:40px}
  .cta-band{padding:30px 16px}
  .brand .by{font-size:7.5px;letter-spacing:.16em}   /* 320: το «SOFTWARE DEVELOPMENT» τύλιγε σε δύο γραμμές κάτω από το wordmark (έλεγχος 1 10/09 — M10)· το nowrap ζει πια στη βάση (L2) */
  /* 320: το nav ξεχείλωνε 4px (scrollWidth 324) και το burger έχανε το δεξί του περίγραμμα (έλεγχος 2 10/09 — M-01): brand 155 + 10 + lang 89 + 10 + burger 44 = 308 > wrap 288.
     Τώρα brand ≈151 (σήμα 28) + 8 + lang ≈71 (padding 8, pill 2) + 8 + 44 ≈ 282 ≤ 288. Διόρθωση ΔΙΑΤΑΞΗΣ, ΟΧΙ html{overflow-x:hidden}: αυτό θα σταματούσε τη
     διάδοση του overflow του body στο viewport, το body θα γινόταν scroll container και το sticky nav θα έπαυε να κολλά (ίδιο δίδαγμα με το M4). */
  .nav .wrap{gap:8px}
  .brand svg{width:28px;height:28px}
  .lang{padding:2px}.lang button{padding:0 8px}
}

/* ── ?qa=1 (app.js βάζει html.qa): ΟΛΑ τα transitions/animations στην ΤΕΛΙΚΗ τους κατάσταση — για headless screenshots (έλεγχος 1 10/09 — M12):
   με --virtual-time-budget το Edge πάγωνε τη ροή HUD μισοσβησμένη (και, ως 11/09, το mock παράθυρο και το ημερολόγιο στη μέση) — ΟΧΙ σφάλματα
   του site, αλλά κάθε reviewer θα τα κυνηγούσε. Μόνο QA· δεν αλλάζει τίποτα για επισκέπτες. ── */
html.qa *,html.qa *::before,html.qa *::after{transition:none!important;animation-duration:0s!important;animation-delay:0s!important}

/* ── reduced-motion: όλα τα animations/transitions off, οι καμβάδες στατικοί (JS)· το boot ΦΕΥΓΕΙ (LESSONS 84) ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}   /* και οι άγκυρες (nav, footer, skip, CTA) χωρίς κινούμενο scroll — το JS το σεβόταν ήδη (behavior:'auto'), το CSS όχι (έλεγχος 2 10/09 — L1, LESSONS 23/84) */
  /* ΕΞΑΙΡΕΣΗ: το δίχτυ ασφαλείας του boot πρέπει να σβήνει και εδώ — αλλιώς χωρίς JS το overlay μένει για πάντα (LESSONS 40) */
  #boot{animation:bootoff .2s ease .3s forwards!important}
  .lat .poster{opacity:1}   /* υπό RM ο καμβάς ζωγραφίζει ένα καρέ· το poster πίσω του είναι το ίδιο σχήμα — ποτέ κενό (LESSONS 46) */
  .lat.lit .poster{opacity:0}
}