/* ─────────────────────────────────────────────────────────────────────────────
   CEIOS — marketing site. Single committed visual world: the Cosmic Depth
   (deep void ground, violet→magenta→cyan axons). Every color is explicit.
   Tokens = the platform palette (web/app/globals.css dark set) so product & site match.
───────────────────────────────────────────────────────────────────────────── */
:root{
  color-scheme: dark;
  --void:#05030D; --bg:#0D0719; --surface:#130C22; --panel:#171029; --line:#2A1F45; --line-2:#3A2C5E;
  --text:#EFEAFE; --muted:#B4A8D4; --dim:#8A7BAE;   /* #8A7BAE: ≥4.8:1 σε όλα τα φόντα (AA για μικρό mono) */
  --violet:#7C3AED; --violet-2:#8B5CF6; --lilac:#A78BFA; --magenta:#D946EF; --cyan:#22D3EE; --cyan-2:#0891B2;
  --axon:linear-gradient(93deg,#7C3AED,#A855F7 55%,#D946EF);
  --glow-v:0 0 40px rgba(139,92,246,.35); --glow-c:0 0 32px rgba(34,211,238,.28);
  /* Tektur (09/09): γωνιώδης, φαρδιά, τεχνολογική — «πιο φουτουριστική και επιβλητική» (panos).
     ΚΡΙΣΙΜΟ: υποστηρίζει ΕΛΛΗΝΙΚΑ· η προηγούμενη (Unbounded) ΔΕΝ τα είχε, οπότε κάθε ελληνικός
     τίτλος έπεφτε σιωπηλά σε γραμματοσειρά συστήματος. Manrope & JetBrains Mono: ελληνικά ✓. */
  --font-d:'Geologica',system-ui,sans-serif; --font-b:'Manrope',system-ui,sans-serif; --font-m:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --max:1200px; --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--text);font:16px/1.6 var(--font-b);overflow-x:hidden;min-height:100vh}
/* Σε κινητό το παρατεταμένο πάτημα επέλεγε λέξεις και το Android πετούσε «αναζήτηση Google»
   (panos 10/09). Σελίδα παρουσίασης = δεν επιλέγεται τίποτα, εκτός από τα πεδία της φόρμας. */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text}
::selection{background:rgba(217,70,239,.35);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
/* Διπλό tap σε κουμπί/καρτέλα στο iOS = ζουμ της σελίδας· manipulation = tap+pinch ναι, double-tap-zoom όχι */
.btn,.tab,.lang button,.burger,.acro span,.ind>span,.chips span{touch-action:manipulation}
h1,h2,h3{margin:0;font-family:var(--font-d);text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
.wrap{width:min(var(--max),calc(100% - 40px));margin:0 auto}
.eyebrow{font:600 11px/1 var(--font-m);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}
.hi{background:var(--axon);-webkit-background-clip:text;background-clip:text;color:transparent}
.hic{background:linear-gradient(93deg,#22D3EE,#A78BFA);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── background universe (canvas) ─────────────────────────────────────────── */
#universe{position:fixed;inset:0;z-index:0;width:100%;height:100%;height:100lvh;display:block;pointer-events:none}   /* 100lvh: η γραμμή διεύθυνσης του κινητού δεν προκαλεί resize */
.veil{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(1200px 700px at 70% -10%,rgba(124,58,237,.22),transparent 60%),
             radial-gradient(900px 600px at 10% 110%,rgba(34,211,238,.10),transparent 60%),
             linear-gradient(180deg,rgba(5,3,13,.35),rgba(5,3,13,.55) 40%,rgba(5,3,13,.85))}
.page{position:relative;z-index:1}

/* ── nav ───────────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  background:rgba(13,7,25,.55);border-bottom:1px solid rgba(42,31,69,.7)}
.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;filter:drop-shadow(0 0 10px rgba(139,92,246,.5))}
.brand .w{font:700 19px/1 var(--font-d);letter-spacing:.24em;color:var(--text)}
.brand .by{font:600 8.5px/1 var(--font-m);letter-spacing:.22em;color:var(--dim);margin-top:5px;text-transform:uppercase}
.nav nav{display:flex;gap:26px;margin-left:auto}
.nav nav a{font:600 13px/1 var(--font-b);color:var(--muted);letter-spacing:.02em;transition:color .2s,transform .2s}
.lang{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;gap:2px;background:rgba(19,12,34,.7)}
.lang button{border:0;background:transparent;font:700 11px/1 var(--font-m);letter-spacing:.1em;padding:7px 10px;border-radius:999px;color:var(--dim);transition:all .2s}
.lang button.on{background:var(--axon);color:#fff;box-shadow:0 0 14px rgba(217,70,239,.35)}
.burger{display:none;margin-left:auto;background:transparent;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(--text);border-radius:2px;top:13px}
.burger i:nth-child(2){top:19px}.burger i:nth-child(3){top:25px}

/* ── buttons (hover-lift, the CEIOS house move) ────────────────────────────── */
.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 = μαγνητική έλξη προς τον κέρσορα */
.btn-p{background:var(--axon);color:#fff;box-shadow:0 8px 24px rgba(124,58,237,.35),inset 0 0 0 1px rgba(255,255,255,.15)}
.btn-g{background:rgba(19,12,34,.6);border-color:var(--line-2);color:var(--text)}
.btn .ar{transition:transform .2s}
@media (hover:hover){.lift:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 24px rgba(139,92,246,.25)}}

/* ── πλακέτα ταυτότητας (09/09, ιδέα panos): το όνομα και ΤΙ ΣΗΜΑΙΝΕΙ, πριν από όλα ──── */
.plate{padding:52px 0 0}
.plate-in{display:flex;align-items:center;gap:16px}
.pmark{width:clamp(46px,5vw,64px);height:clamp(46px,5vw,64px);flex:none;filter:drop-shadow(0 0 14px rgba(139,92,246,.55))}
.pname{display:grid;gap:4px}
/* ⭐ ΚΛΙΜΑΚΑ ΚΑΙ ΜΕ ΤΟ ΥΨΟΣ, ΟΧΙ ΜΟΝΟ ΜΕ ΤΟ ΠΛΑΤΟΣ (panos 11/09: σύγκρισε laptop με
   την οθόνη του Σπύρου). ΟΛΑ τα breakpoints της σελίδας ήταν max-width — ένα laptop
   1400×720 έπαιρνε τα ΙΔΙΑ μεγέθη με οθόνη 1600×1000, οπότε ο τίτλος έτρωγε την πρώτη
   οθόνη και τα CTA έμεναν κάτω από τη γραμμή του ορίζοντα. Το min(vw,vh) κάνει τον
   τύπο να υπακούει στη ΜΙΚΡΟΤΕΡΗ διάσταση — εκεί που πραγματικά στριμώχνεται. */
.pname span{font:800 clamp(34px,min(5.4vw,8.2vh),66px)/.92 var(--font-d);letter-spacing:.15em;color:var(--text);text-shadow:0 0 26px rgba(167,139,250,.35)}
.pname small{font:600 10px/1 var(--font-m);letter-spacing:.34em;text-transform:uppercase;color:var(--dim);padding-left:3px}
.acro{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin-top:20px}
.acro span{display:inline-flex;align-items:baseline;font:600 11.5px/1 var(--font-m);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  padding:9px 13px;border-radius:11px;border:1px solid transparent;transition:color .22s,background .22s,border-color .22s,transform .22s}
.acro b{font:800 20px/1 var(--font-d);background:var(--axon);-webkit-background-clip:text;background-clip:text;color:transparent;margin-right:1px;letter-spacing:0}
.acro i{width:1px;height:15px;background:var(--line-2);flex:none}
@media (hover:hover){.acro span:hover{color:var(--text);background:rgba(124,58,237,.14);border-color:rgba(167,139,250,.35);transform:translateY(-2px)}}
@media (max-width:640px){
  /* Το χρωματιστό τμήμα ρέει inline: δεν αφήνει ορφανό «for»/«το» πριν του (η άνοδος γίνεται fade — ο transform δεν ισχύει σε inline) */
  .hero h1 .hi{display:inline}
  /* Τα δύο CTA στοιχίζονται: ίδιο πλάτος, κεντραρισμένη ετικέτα */
  .hero .cta .btn{flex:1 1 auto;justify-content:center}
  .plate{padding:34px 0 0}
  .acro span{padding:7px 9px;font-size:10.5px;letter-spacing:.1em}.acro b{font-size:17px}.acro i{display:none}
}

/* ── hero ──────────────────────────────────────────────────────────────────── */
/* 09/09: μικρότερος τίτλος/padding ώστε ΟΛΗ η θέση («Not another ERP…actually runs») να χωρά
   στην πρώτη οθόνη — πριν κοβόταν στη μέση σε τυπικό laptop. */
.hero{padding:22px 0 52px;position:relative}
/* Ο πυρήνας ανεβαίνει ψηλά (panos 09/09: «να βλέπουν το CEIOS ΚΑΙ αυτό το wow μόλις ανοίξει») */
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.hero .orb{margin-top:-14px}
.hero h1{font-size:clamp(31px,min(4.3vw,6.6vh),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}
/* ⭐ ΚΟΝΤΗ ΟΘΟΝΗ (laptop): σφίγγει ΜΟΝΟ ο κατακόρυφος ρυθμός — κανένα στοιχείο δεν
   φεύγει, κανένα δεν μικραίνει δυσανάλογα. Στόχος: τα δύο CTA να είναι ΜΕΣΑ στην
   πρώτη οθόνη, γιατί εκεί γίνεται η δουλειά. Μόνο σε desktop πλάτη — κάτω από 980px
   η διάταξη είναι ήδη κάθετη και έχει δικούς της κανόνες. */
@media (min-width:981px) and (max-height:840px){
  .plate{padding:30px 0 0}
  .acro{margin-top:13px}
  .hero{padding:12px 0 34px}
  .hero h1{margin:12px 0 12px}
  .hero .cta{margin-top:20px}
  .hero .orb{margin-top:-6px}
  .orb{max-width:400px}
  .hud{margin-top:22px}
}
@media (min-width:981px) and (max-height:720px){
  .plate{padding:18px 0 0}
  .acro{margin-top:10px}
  .hero{padding:8px 0 26px}
  .orb{max-width:330px}
}
.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 b{color:var(--cyan);font-weight:600}
.hud .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);margin-right:8px;animation:blink 2.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.hud small{opacity:.85;letter-spacing:.08em;text-transform:none;font-family:var(--font-b);font-weight:500}

/* orbital mark (hero visual) */
.orb{position:relative;aspect-ratio:1;max-width:520px;margin:0 auto;display:grid;place-items:center}
.orb svg{width:100%;height:100%;overflow:visible}
.orb .ring{fill:none;stroke-linecap:round}   /* το stroke=url(#axg) είναι attribute στο SVG — σε εξωτερικό CSS το #fragment δεν είναι αξιόπιστο */
.orb .ring.a{stroke-width:2.2;opacity:.9;transform-origin:50% 50%;animation:spin 26s linear infinite}
.orb .ring.b{stroke-width:1.6;opacity:.65;transform-origin:50% 50%;animation:spin 40s linear infinite reverse}
.orb .ring.c{stroke-width:1.1;opacity:.45;transform-origin:50% 50%;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.orb .core{filter:drop-shadow(0 0 18px rgba(217,70,239,.7)) drop-shadow(0 0 40px rgba(124,58,237,.5))}
.orb .core-in{animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}
.orb .node{fill:#e9d5ff;filter:drop-shadow(0 0 6px #c4b5fd)}
.orb .node.c{fill:#67e8f9;filter:drop-shadow(0 0 8px #22d3ee)}
.orb .tag{font:600 9.5px/1 var(--font-m);fill:var(--dim);letter-spacing:.16em}
/* Ο πυρήνας του hero είναι πλέον καμβάς (makeCore) — ΧΩΡΙΣ ρητό μέγεθος ο καμβάς μένει 300×150 (intrinsic). */
#orbcv{width:100%;height:100%;display:block;cursor:crosshair;touch-action:manipulation}
.orb .halo{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.28),rgba(217,70,239,.12) 40%,transparent 70%);z-index:-1;animation:breathe 5s ease-in-out infinite}   /* χωρίς filter:blur — GPU blur pass κάθε καρέ, οπτικά ίδιο */

/* ── sections ──────────────────────────────────────────────────────────────── */
section{padding:96px 0;position:relative}
.sec-h{display:grid;gap:14px;max-width:820px;margin-bottom:46px}
.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}
.rule{height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.45),rgba(34,211,238,.35),transparent)}

/* thesis: ERP vs CEIOS */
.thesis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tcard{position:relative;padding:26px 24px;border-radius:var(--r);background:linear-gradient(180deg,rgba(23,16,41,.85),rgba(19,12,34,.75));border:1px solid var(--line);transition:transform .2s,box-shadow .2s,border-color .2s}
.tcard .k{font:600 10.5px/1 var(--font-m);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);display:flex;justify-content:space-between}
.tcard .k b{color:var(--magenta);font-weight:600}
/* «Πριν → Τώρα»: η ΔΙΑΓΡΑΜΜΙΣΗ επανήλθε (panos 09/09: «καλύτερα όπως ήταν — απλά να είναι
   ξεκάθαρο») — το παλιό μοντέλο τελειώνει, το νέο το αντικαθιστά. Σαφήνεια χωρίς φλυαρία:
   το βέλος → μπροστά από τη νέα πρόταση δηλώνει ρητά τη μετάβαση.
   ⚠️ ΜΑΘΗΜΑ: ΜΗΝ ξαναχρησιμοποιηθεί η κλάση .lbl εδώ — ανήκει στις ετικέτες του χάρτη-mockup
   (position:absolute) και οι ετικέτες πετάγονταν έξω από τις κάρτες. */
/* Η διαγραφή πιο διακριτική (panos 10/09: «πιο subtle, πιο απαλή»): λεπτή γραμμή, χαμηλή ένταση. */
/* .38/1px ήταν ΥΠΕΡΒΟΛΙΚΑ διακριτικό — «οριακά νομίζεις ότι είναι τίτλος» (panos 10/09). Ενδιάμεσο. */
.tcard .was{margin-top:18px;color:var(--dim);opacity:.85;font-size:14px;text-decoration:line-through;text-decoration-color:rgba(217,70,239,.55);text-decoration-thickness:1.2px}
.tcard .now{margin-top:9px;font:700 20px/1.3 var(--font-d);letter-spacing:-.01em;display:flex;align-items:flex-start;gap:9px}
.tcard .now::before{content:"→";color:var(--cyan);font:700 17px/1.55 var(--font-b);flex:none;text-shadow:0 0 10px rgba(34,211,238,.6)}
.tcard .why{margin-top:12px;color:var(--muted);font-size:14.5px;line-height:1.6}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pil{padding:26px;border-radius:var(--r);background:rgba(19,12,34,.7);border:1px solid var(--line);transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.pil::after{content:"";position:absolute;inset:auto -40% -60% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.22),transparent 65%);pointer-events:none;transition:opacity .3s;opacity:.6}
.pil .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(124,58,237,.35),rgba(34,211,238,.2));border:1px solid rgba(167,139,250,.35);box-shadow:inset 0 0 20px rgba(139,92,246,.2)}
.pil .ic svg{width:22px;height:22px;stroke:#e9d5ff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pil h3{font-size:17px;margin-top:18px;font-weight:700}
.pil p{margin-top:10px;color:var(--muted);font-size:14.5px;line-height:1.62}
.pil ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.pil li{font:500 12.5px/1.4 var(--font-b);color:var(--dim);display:flex;gap:8px;align-items:flex-start}
.pil li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);margin-top:6px;flex:none}

/* tour: tabs + tilting panel */
.tour{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
.tabs{display:grid;gap:8px}
.tab{display:flex;gap:14px;align-items:flex-start;text-align:left;padding:16px 18px;border-radius:14px;background:transparent;border:1px solid transparent;transition:all .2s}
.tab .n{font:600 11px/1 var(--font-m);color:var(--dim);letter-spacing:.14em;margin-top:5px;min-width:44px}
.tab b{display:block;font:700 15.5px/1.25 var(--font-d);letter-spacing:-.01em}
.tab span{display:block;color:var(--muted);font-size:13.5px;margin-top:6px;line-height:1.5}
.tab.on{background:linear-gradient(180deg,rgba(124,58,237,.18),rgba(23,16,41,.7));border-color:rgba(167,139,250,.45);box-shadow:inset 0 0 0 1px rgba(199,175,255,.15),0 0 26px rgba(139,92,246,.18)}
.tab.on .n{color:var(--cyan)}
.stage{perspective:1400px}
/* Το panel είναι grid: bar πάνω, και ΟΛΑ τα views στο ίδιο κελί (grid-area 2/1) → το ύψος = το ψηλότερο view,
   τίποτα δεν κόβεται σε κινητό (πριν τα views ήταν absolute και το panel ζούσε μόνο από min-height). */
.panel{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:22px;border:1px solid rgba(167,139,250,.35);background:linear-gradient(180deg,rgba(23,16,41,.92),rgba(13,7,25,.92));
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(124,58,237,.18),inset 0 0 0 1px rgba(255,255,255,.04);overflow:hidden;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .12s ease-out;min-height:430px}
.panel .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);font:600 11px/1 var(--font-m);letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.panel .bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}.panel .bar i:first-child{background:var(--magenta)}.panel .bar i:nth-child(2){background:var(--lilac)}.panel .bar i:nth-child(3){background:var(--cyan)}
.panel .bar span{margin-left:auto}
.view{grid-row:2;grid-column:1;position:relative;padding:18px;opacity:0;transform:translateY(8px) scale(.985);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.view.on{opacity:1;transform:none;pointer-events:auto}
.view[data-v="map"]{min-height:380px}
/* mock: map */
.mmap{position:absolute;inset:18px;border-radius:14px;overflow:hidden;container-type:size;background:
  radial-gradient(600px 300px at 30% 20%,rgba(124,58,237,.18),transparent 60%),
  repeating-linear-gradient(0deg,rgba(167,139,250,.10) 0 1px,transparent 1px 34px),
  repeating-linear-gradient(90deg,rgba(167,139,250,.10) 0 1px,transparent 1px 34px),#0f0a1e}
.mmap svg{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--magenta);box-shadow:0 0 0 3px rgba(217,70,239,.25),0 0 18px rgba(217,70,239,.8);transform:translate(-50%,-50%)}
.pin.c{background:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.25),0 0 18px rgba(34,211,238,.8)}
.pin::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid currentColor;color:inherit;opacity:0;animation:radar 2.2s ease-out infinite}
.pin.c::after{border-color:var(--cyan)}.pin:not(.c)::after{border-color:var(--magenta)}
@keyframes radar{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.3);opacity:0}}
/* Κίνηση με transform (compositor), ΟΧΙ left/top (layout+paint του χάρτη 60×/δευτ.) — 36cqw/26cqh = η ίδια διαδρομή (22→58%, 64→38%) */
.van{position:absolute;left:22%;top:64%;transform:translate(-50%,-50%);width:28px;height:14px;border-radius:5px;background:linear-gradient(90deg,#e9d5ff,#c4b5fd);box-shadow:0 0 14px rgba(196,181,253,.9);animation:drive 9s ease-in-out infinite alternate}
@keyframes drive{from{transform:translate(-50%,-50%)}to{transform:translate(calc(36cqw - 50%),calc(-26cqh - 50%))}}
.view:not(.on) *{animation-play-state:paused}   /* κρυφή καρτέλα = καμία κίνηση (έτρεχαν και σε opacity:0) */
.lbl{position:absolute;font:600 10px/1 var(--font-m);letter-spacing:.1em;color:var(--muted);background:rgba(13,7,25,.75);padding:5px 8px;border-radius:7px;border:1px solid var(--line);transform:translate(-50%,10px)}
/* mock: schedule */
.msched{display:grid;gap:10px}
.mrow{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center}
.mrow .who{font:600 12.5px/1.2 var(--font-b);color:var(--muted)}
.mrow .who small{display:block;font:500 10.5px/1 var(--font-m);color:var(--dim);margin-top:4px;letter-spacing:.08em}
.mrow .lane{position:relative;height:38px;border-radius:10px;background:rgba(23,16,41,.7);border:1px solid var(--line);overflow:hidden}
/* Οι πλακέτες ΔΕΝ πατάνε η μία την άλλη (panos 09/09): το κείμενο κόβεται με «…» μέσα στο
   δικό της πλάτος — τα ελληνικά είναι πιο μακριά από τα αγγλικά και ξεχείλιζαν πάνω στη διπλανή. */
.chip{position:absolute;top:6px;bottom:6px;border-radius:8px;padding:0 10px;display:block;line-height:26px;
  font:700 11px/26px var(--font-b);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.chip.v{background:var(--axon)}.chip.c{background:linear-gradient(90deg,#0891B2,#22D3EE)}.chip.o{background:linear-gradient(90deg,#b45309,#f59e0b)}
/* minmax(0,1fr): χωρίς αυτό οι στήλες ΔΕΝ συρρικνώνονται κάτω από το κείμενό τους και οι
   ώρες στοιβάζονταν η μία πάνω στην άλλη («08:0010:0012:00»). */
.msched .ax{display:grid;grid-template-columns:120px repeat(6,minmax(0,1fr));font:600 10px/1 var(--font-m);color:var(--dim);letter-spacing:.06em}
.msched .ax span{overflow:hidden;white-space:nowrap}
.msched .ax span:first-child{visibility:hidden}
@media (max-width:680px){
  /* ⚠️ Χθεσινό bug: είχα δώσει ΚΑΙ στο .mrow τις 6 στήλες του άξονα, οπότε η λωρίδα έπαιρνε
     το 1/6 του πλάτους και οι πλακέτες έδειχναν ένα γράμμα («Κ», «Σ..»). Η λωρίδα = 1fr. */
  .mrow{grid-template-columns:80px 1fr;gap:6px}
  .msched .ax{grid-template-columns:80px repeat(6,minmax(0,1fr));gap:6px;font-size:9px;letter-spacing:0}
  .mrow .who{font-size:11.5px}.mrow .who small{font-size:9.5px;letter-spacing:0}
  /* Σε τηλέφωνο η λωρίδα είναι ~250px: οι πλακέτες γίνονται ψηλότερες και το κείμενο
     σπάει σε ΔΥΟ γραμμές (με «…» στο τέλος) αντί να κόβεται στην πρώτη λέξη. */
  .mrow .lane{height:46px}
  /* ΠΡΑΓΜΑΤΙΚΟ κόψιμο στις 2 γραμμές: το line-clamp δουλεύει ΜΟΝΟ με display:-webkit-box (με flex ήταν νεκρός κώδικας) */
  .chip{top:5px;bottom:5px;font-size:10px;line-height:1.2;padding:6px 7px 0;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
}
@media (max-width:340px){
  /* 320px: κάθε δεύτερη ώρα (η ορατή απλώνεται πάνω από την κρυφή) — αλλιώς κόβονται σε «08:0» */
  .msched .ax span{overflow:visible}.msched .ax span:nth-child(odd){visibility:hidden}
}
/* mock: phone */
.mphone{width:230px;margin:0 auto;border-radius:30px;border:1px solid rgba(167,139,250,.4);background:#0D0719;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 40px rgba(124,58,237,.25);padding:14px 12px 18px;position:relative}
.mphone::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:64px;height:6px;border-radius:6px;background:var(--line-2)}
.mphone .ph{margin-top:14px;display:flex;align-items:center;justify-content:space-between;font:700 12px/1 var(--font-d);letter-spacing:.12em}
.mphone .ph small{font:600 9px/1 var(--font-m);color:var(--cyan);letter-spacing:.14em}
.task{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(23,16,41,.85);border:1px solid var(--line);display:flex;gap:10px;align-items:center}
.task .cb{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--lilac);display:grid;place-items:center;flex:none}
.task.done .cb{background:var(--axon);border-color:transparent}
.task.done .cb::after{content:"✓";font:800 11px/1 var(--font-b);color:#fff}
.task b{display:block;font:700 12px/1.2 var(--font-b)}.task span{display:block;font:500 10px/1 var(--font-m);color:var(--dim);margin-top:4px;letter-spacing:.06em}
.shot{margin-top:12px;height:74px;border-radius:12px;background:linear-gradient(135deg,#2A1A56,#0891B2 70%,#22D3EE);position:relative;overflow:hidden}
.shot::after{content:"📍 GPS · 10:42";position:absolute;left:8px;bottom:7px;font:600 9.5px/1 var(--font-m);color:#fff;background:rgba(5,3,13,.6);padding:5px 7px;border-radius:6px}
.mphone .off{margin-top:12px;font:600 9.5px/1 var(--font-m);letter-spacing:.12em;color:var(--dim);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.mphone .off i{width:7px;height:7px;border-radius:50%;background:#f59e0b;box-shadow:0 0 8px #f59e0b}
/* mock: intelligence */
.mint{display:grid;gap:12px}
.brief{padding:16px 18px;border-radius:14px;background:rgba(23,16,41,.8);border:1px solid var(--line)}
.brief .t{display:flex;align-items:center;gap:10px;font:700 13px/1 var(--font-d);letter-spacing:.04em}
.brief .ai{font:600 9px/1 var(--font-m);letter-spacing:.14em;padding:5px 8px;border-radius:999px;background:linear-gradient(90deg,rgba(124,58,237,.35),rgba(34,211,238,.25));border:1px solid rgba(167,139,250,.4);color:#e9d5ff}
.brief ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.brief li{display:flex;gap:10px;font-size:13px;color:var(--muted);line-height:1.5}
.brief li i{flex:none;width:8px;height:8px;border-radius:50%;margin-top:7px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.brief li i.w{background:#f59e0b;box-shadow:0 0 8px #f59e0b}.brief li i.r{background:var(--magenta);box-shadow:0 0 8px var(--magenta)}
.brief li b{color:var(--text)}
.spark{display:flex;gap:6px;align-items:flex-end;height:44px;margin-top:6px}
.spark i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--cyan),rgba(34,211,238,.25));animation:grow 1.4s ease-out both}
@keyframes grow{from{transform:scaleY(.2);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}

/* intelligence section */
.intel{position:relative}
.intel .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
/* Ο ΔΙΣΚΟΣ ΖΕΙ ΜΕΣΑ ΣΤΗ ΣΕΛΙΔΑ, ΔΕΝ ΚΑΘΕΤΑΙ ΠΑΝΩ ΤΗΣ (panos 10/09).
   Πριν: πλαίσιο 1px + φόντο που έκλεινε στο rgba(13,7,25,.9) — δηλαδή ΣΧΕΔΟΝ ΑΔΙΑΦΑΝΟ.
   Έκοβε το σύμπαν του #universe και διαβαζόταν ως μαύρη πλακέτα με περίγραμμα.
   Τώρα: κανένα περίγραμμα, καμία σκιά, και η λάμψη σβήνει σε ΠΛΗΡΗ ΔΙΑΦΑΝΕΙΑ πριν
   φτάσει στην άκρη — άρα δεν υπάρχει όριο να δει το μάτι. Τα αστέρια περνούν από πίσω. */
#synapse{width:100%;aspect-ratio:1.15;display:block;border:0;box-shadow:none;
  background:radial-gradient(56% 56% at 50% 46%,rgba(124,58,237,.20),rgba(124,58,237,.07) 46%,rgba(124,58,237,0) 74%)}
.intel ol{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:14px}
/* ΣΤΑΘΕΡΗ πρώτη στήλη, όχι «auto» (panos 09/09: «να είναι το ίδιο στοιχισμένα και στα ελληνικά»).
   Κάθε <li> είναι ΔΙΚΟ ΤΟΥ grid: με «auto» η στήλη έπαιρνε το πλάτος της ΔΙΚΗΣ ΤΟΥ ετικέτας,
   οπότε 06:30 / LIVE / ΔΕΥ / ΡΩΤΑ έδιναν τέσσερις διαφορετικές αφετηρίες τίτλου. Στα αγγλικά
   τύχαινε να έχουν παρόμοιο πλάτος και δεν φαινόταν· στα ελληνικά φάνηκε αμέσως. */
.intel li{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:start}   /* 64px: χωρά και το «ΡΩΤΗΣΤΕ» */
.intel li .n{white-space:nowrap}
.intel li .n{font:600 11px/1 var(--font-m);letter-spacing:.14em;color:var(--cyan);margin-top:6px}
.intel li b{display:block;font:700 15.5px/1.3 var(--font-d)}.intel li span{display:block;color:var(--muted);font-size:14.5px;margin-top:5px;line-height:1.55}
/* 09/09: όταν ο πυρήνας εκπέμπει μια απόφαση, ανάβει Η ΑΝΤΙΣΤΟΙΧΗ γραμμή — το οπτικό
   σταματά να είναι διακόσμηση και γίνεται εξήγηση του τι κάνει το σύστημα. */
.intel li{border-radius:12px;padding:6px 10px;margin:-6px -10px;transition:background .45s ease,box-shadow .45s ease}
.intel li.lit{background:linear-gradient(90deg,rgba(124,58,237,.20),rgba(34,211,238,.06) 70%,transparent);box-shadow:inset 0 0 0 1px rgba(167,139,250,.35)}
.intel li.lit .n{color:#67e8f9;text-shadow:0 0 10px rgba(34,211,238,.8)}
.intel .hint{margin-top:14px;font:600 10.5px/1 var(--font-m);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:8px}
.intel .hint::before{content:"";width:16px;height:16px;border-radius:50%;border:1px solid var(--cyan);box-shadow:0 0 10px rgba(34,211,238,.5);flex:none}

/* ── «ΠΡΟ-» band: η διαφοροποίηση σε 5 ρήματα (panos 09/09) ───────────────────
   Το πρόθεμα βάφεται με το axon gradient ώστε το λογοπαίγνιο να διαβάζεται με τη ματιά,
   και κάθε γραμμή κουβαλά ΠΡΑΓΜΑΤΙΚΟ παράδειγμα του συστήματος σε mono — όχι διαφημιστικό. */
.pro{display:grid}
.pro-row{position:relative;display:grid;grid-template-columns:minmax(190px,.34fr) 1fr;gap:26px;padding:24px 20px 24px 0;border-top:1px solid var(--line);align-items:baseline;transition:background .25s ease,padding-left .25s ease}
.pro-row:last-child{border-bottom:1px solid var(--line)}
.pro-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--axon);transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.2,.7,.2,1);border-radius:2px}
.pro-row b{font:800 clamp(23px,2.9vw,38px)/1 var(--font-d);letter-spacing:-.02em;color:var(--text);white-space:nowrap}
.pro-row p{color:var(--muted);font-size:15px;line-height:1.6;max-width:56ch}
.pro-row .ex{display:inline-block;margin-top:10px;font:600 11.5px/1.5 var(--font-m);letter-spacing:.06em;color:var(--cyan);background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.25);border-radius:8px;padding:5px 10px}
@media (hover:hover){
  .pro-row:hover{background:linear-gradient(90deg,rgba(124,58,237,.10),transparent 70%);padding-left:18px}
  .pro-row:hover::before{transform:scaleY(1)}
  .pro-row:hover .ex{background:rgba(34,211,238,.14);box-shadow:0 0 18px rgba(34,211,238,.2)}
}
@media (max-width:760px){
  .pro-row{grid-template-columns:1fr;gap:10px;padding:20px 0}
  .pro-row b{white-space:normal}
}

/* industries + scale */
.ind{display:flex;flex-wrap:wrap;gap:12px}
/* Μόνο το ΕΞΩΤΕΡΙΚΟ span είναι πλακέτα· το εσωτερικό (data-i) είναι απλό κείμενο — το «.ind span» τα έπιανε ΚΑΙ τα δύο = διπλή πλακέτα (έλεγχος κινητού 10/09) */
.ind>span{padding:12px 18px;border-radius:999px;border:1px solid var(--line-2);background:rgba(19,12,34,.6);font:600 13.5px/1 var(--font-b);color:var(--muted);transition:all .2s;display:inline-flex;align-items:center;gap:10px}
.ind>span i{width:8px;height:8px;border-radius:50%;background:var(--axon);box-shadow:0 0 10px rgba(217,70,239,.7)}
.scale{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.sc{padding:22px;border-radius:var(--r);border:1px solid var(--line);background:rgba(19,12,34,.6)}
.sc b{display:block;font:800 22px/1 var(--font-d);letter-spacing:-.01em}.sc b.g{background:linear-gradient(93deg,#22D3EE,#A78BFA);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc span{display:block;color:var(--dim);font:600 11px/1.4 var(--font-m);letter-spacing:.12em;text-transform:uppercase;margin-top:10px}
.sc p{color:var(--muted);font-size:13.5px;margin-top:10px;line-height:1.55}

/* cta */
.cta-band{border-radius:28px;border:1px solid rgba(167,139,250,.35);position:relative;overflow:hidden;padding:56px 48px;
  background:linear-gradient(135deg,rgba(124,58,237,.28),rgba(13,7,25,.7) 45%,rgba(34,211,238,.16));box-shadow:0 40px 100px rgba(0,0,0,.5),0 0 80px rgba(124,58,237,.18)}
.cta-band::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(217,70,239,.25),transparent 30%,rgba(34,211,238,.2),transparent 60%);animation:spin 18s linear infinite;pointer-events:none;opacity:.6}
.cta-band>*{position:relative}
.cta-band h2{font-size:clamp(26px,3.6vw,46px);font-weight:800;max-width:16ch}
.cta-band p{color:var(--muted);max-width:56ch;margin-top:14px;font-size:17px}
.form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-top:28px;max-width:760px}
.form input{padding:14px 16px;border-radius:12px;border:1px solid var(--line-2);background:rgba(13,7,25,.7);color:var(--text);font:500 14px/1 var(--font-b);outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.form input:focus{border-color:var(--lilac);box-shadow:0 0 0 3px rgba(124,58,237,.25),0 0 14px rgba(139,92,246,.35)}
.form .ok{grid-column:1/-1;display:none;padding:14px 16px;border-radius:12px;background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.4);color:#a5f3fc;font-weight:600;outline:none}
.form .err{grid-column:1/-1;padding:12px 16px;border-radius:12px;background:rgba(217,70,239,.12);border:1px solid rgba(217,70,239,.45);color:#f5d0fe;font-weight:600;font-size:14px}
.form input[aria-invalid="true"]{border-color:var(--magenta);box-shadow:0 0 0 3px rgba(217,70,239,.22)}
.form.sent .ok{display:block}.form.sent input,.form.sent button,.form.sent .err{display:none}

/* footer */
footer{padding:48px 0 40px;border-top:1px solid var(--line)}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;align-items:start}
footer .fb{font:600 11px/1.8 var(--font-m);letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
footer .fb b{color:var(--text);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{margin-top:34px;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 — ADDITIVE only: every element is fully visible at rest; the observer merely
   plays a rise-in as it approaches the viewport. Nothing is ever parked invisible
   (thumbnails, hidden tabs and browsers without IO all see the finished page). */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* fill-mode backwards (ΟΧΙ both): το «both» κρατούσε για πάντα το transform:none του keyframe και
   νικούσε το hover-lift των καρτών — με backwards το animation αφήνει το στοιχείο μόλις τελειώσει. */
.rv.in{animation:rise .75s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--d,0s)}
/* 🛡️ ΔΙΧΤΥ: το «backwards» κρατά το στοιχείο στο opacity:0 όσο περιμένει την έναρξη. Αν για
   οποιονδήποτε λόγο το animation δεν ξεκινήσει (παγωμένο timeline, κρυφή καρτέλα τη στιγμή της
   δημιουργίας, εξωτικός browser), το κείμενο θα έμενε ΜΟΝΙΜΑ αόρατο. Το JS βάζει .shown λίγο
   αργότερα και το επαναφέρει με το ζόρι — περιεχόμενο ΠΟΤΕ κρυμμένο από εφέ. */
.rv.shown{animation:none!important;opacity:1!important;transform:none!important}

/* ── boot sequence (once per visit; never blocks: auto-off at 1.9s, click skips) ── */
#boot{position:fixed;inset:0;z-index:100;background:var(--void);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 svg{width:110px;height:110px;filter:drop-shadow(0 0 22px rgba(139,92,246,.65))}
/* ⭐ ΑΝΤΙΘΕΤΕΣ ΠΕΡΙΣΤΡΟΦΕΣ, ΚΑΙ ΠΡΟΣΓΕΙΩΣΗ ΣΤΗ ΘΕΣΗ (panos 11/09: «οι 2 κύκλοι να
   περιστρέφονται με αντίθετες κατευθύνσεις»). Κάθε τόξο κάνει ΑΚΡΙΒΩΣ μία πλήρη
   στροφή — το εξωτερικό +360°, το εσωτερικό −360° — ώστε και τα δύο να καταλήξουν
   στον ΑΚΡΙΒΗ προσανατολισμό του λογοτύπου: ατόφιο στην αρχή, ατόφιο στο τέλος.
   Το .mk κρατά ΜΟΝΟ το ξεδίπλωμα (opacity+scale)· η περιστροφή ζει στα παιδιά, αλλιώς
   οι δύο κινήσεις θα πολλαπλασιάζονταν και το σήμα δεν θα προσγειωνόταν σωστά.
   ⏱️ 1,5″ < 1,95″ που ζει το boot (app.js) → προλαβαίνει να σταθεί ακίνητο πριν σβήσει.
   ΜΗΝ ανέβει η διάρκεια χωρίς να ανέβει και το setTimeout(off) στο app.js.
   transform-box: χωρίς αυτό ο άξονας δεν είναι το κέντρο σε μερικά Safari. */
#boot .mk{animation:bootin 1.5s cubic-bezier(.5,0,.15,1) forwards;
  transform-box:view-box;transform-origin:32px 32px}
@keyframes bootin{0%{opacity:0;transform:scale(.84)}22%{opacity:1}100%{opacity:1;transform:scale(1)}}
#boot .ro,#boot .ri{transform-box:view-box;transform-origin:32px 32px;
  animation:1.5s cubic-bezier(.5,0,.15,1) forwards}
#boot .ro{animation-name:bootcw}
#boot .ri{animation-name:bootccw}
@keyframes bootcw{to{transform:rotate(360deg)}}
@keyframes bootccw{to{transform:rotate(-360deg)}}
#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);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}

/* ── cursor halo + film grain ─────────────────────────────────────────────── */
#halo{position:fixed;left:0;top:0;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(139,92,246,.16),rgba(217,70,239,.06) 42%,transparent 70%);mix-blend-mode:screen;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:.045;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>")}

/* ── nav on scroll + active section ───────────────────────────────────────── */
.nav.scrolled{background:rgba(13,7,25,.84);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.nav nav a{position:relative}
.nav nav a.on{color:var(--text)}
.nav nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--axon);box-shadow:0 0 10px rgba(217,70,239,.6)}

/* ── 🎭 ΠΑΡΑΔΟΣΗ ΣΚΥΤΑΛΗΣ ΜΑΡΚΑΣ — μία ταυτότητα κάθε φορά (panos 10/09) ─────
   Πρόβλημα: στην πρώτη οθόνη το σήμα και η λέξη CEIOS φαίνονταν ΔΥΟ φορές, με
   60 εικονοστοιχεία διαφορά — η μικρή εκδοχή αδυνάτιζε τη μεγάλη.
   Λύση: όσο η πλακέτα ταυτότητας είναι ορατή, η μπάρα ΠΑΥΕΙ να είναι μπάρα
   (διάφανη, χωρίς γραμμή, το σύμπαν περνά από πίσω) και ΔΕΝ δείχνει σήμα.
   Μόλις η πλακέτα φύγει, ντύνεται και το μικρό σήμα μπαίνει συρταρωτά.
   ⚠️ Ο χώρος του σήματος ΜΕΝΕΙ δεσμευμένος (visibility, όχι display) → η
   πλοήγηση δεν μετακινείται ποτέ. Πλοήγηση και γλώσσα ΔΕΝ κρύβονται ΠΟΤΕ:
   είναι τα πρώτα που ψάχνει ο επισκέπτης, και το EN/EL είναι κρίσιμο εδώ. */
.nav{transition:background .4s ease,border-color .4s ease,box-shadow .4s ease,
  backdrop-filter .4s ease,-webkit-backdrop-filter .4s ease}
.nav .brand{transition:opacity .38s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.nav.plate-on,.nav.plate-on.scrolled{background:transparent;border-bottom-color:transparent;box-shadow:none;
  backdrop-filter:blur(0px) saturate(100%);-webkit-backdrop-filter:blur(0px) saturate(100%)}
.nav.plate-on .brand{opacity:0;transform:translateX(-14px);visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){.nav,.nav .brand{transition:none}}

/* ── hero live feed + word rise ───────────────────────────────────────────── */
.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)}

/* mobile */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr}.orb{max-width:340px;order:-1}
  .thesis,.pillars{grid-template-columns:1fr}
  .tour{grid-template-columns:1fr}.stage{perspective:none}.panel{transform:none!important;min-height:400px}
  .intel .wrap{grid-template-columns:1fr}
  .scale{grid-template-columns:1fr 1fr}
  .sc b{overflow-wrap:anywhere;line-height:1.12}   /* δίγραμμοι τίτλοι (ελληνικά) ακουμπούσαν με line-height 1 */
  /* Στο κινητό οι δύο στήλες συνδέσμων πέφτουν η μία κάτω από την άλλη· με το grid-gap
     ανάμεσά τους έμοιαζαν με δύο ξένες λίστες και ένα κενό στη μέση (panos 09/09).
     Μηδενικό gap + ίσο padding ανά σύνδεσμο = ΜΙΑ συνεχής λίστα, με σωστό μέγεθος αφής. */
  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}
  /* «© 2026 KYVOGEN» και «Designed & built in Athens» δεν χωρούν σε μία γραμμή σε τηλέφωνο
     — το space-between τα κρατούσε δίπλα-δίπλα και το δεύτερο κοβόταν στην άκρη. */
  footer .bottom{flex-direction:column;align-items:flex-start;gap:8px;letter-spacing:.08em}
  .form{grid-template-columns:1fr}
  /* iOS Safari: πεδίο <16px = ζουμ σε όλη τη σελίδα στο focus που ΔΕΝ επιστρέφει — 16px το αποτρέπει (desktop μένει 14px) */
  .form input{font-size:16px}
  .form .btn{justify-content:center}   /* full-width κουμπί στο κινητό — κεντραρισμένη ετικέτα */
  .form .err{order:-1}                 /* το μήνυμα ΠΑΝΩ από τα πεδία, όχι κάτω από το πληκτρολόγιο */
  .nav nav{display:none;position:absolute;left:0;right:0;top:66px;flex-direction:column;gap:0;background:rgba(13,7,25,.96);border-bottom:1px solid var(--line);padding:10px 20px 16px}
  .nav nav.open{display:flex}.nav nav a{padding:12px 0;font-size:15px}
  .burger{display:block}
  .nav .lang{margin-left:auto}
  /* Στόχοι αφής ≥40px στη μπάρα (burger 40, γλώσσα 25px πριν) — το ύψος 66px της μπάρας τα χωρά */
  .burger{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}
  .lang{flex:none}.lang button{padding:0 12px;min-height:40px}
  .nav nav a{padding:14px 0}
  section{padding:64px 0}.hero{padding:56px 0 40px}
  .cta-band{padding:36px 22px}
  /* Οι σύνδεσμοι του μενού «προσγείωναν» την ενότητα ΚΑΤΩ από το sticky nav (padding 64px < nav 67px) — ίδιος αέρας με desktop (~30px) */
  main section{scroll-margin-top:32px}
}
@media (max-width:360px){
  /* 320px: brand + γλώσσα + μενού δεν χωρούσαν και το burger συρρικνωνόταν σε λωρίδα */
  .nav .wrap{gap:10px}
  .brand{gap:9px}.brand svg{width:32px;height:32px}
}
@media (max-width:600px){
  .scale{grid-template-columns:1fr}   /* 2 στήλες σε 360-430px ξεχείλωναν (Unbounded 22px, μονολεκτικοί τίτλοι) */
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* ΕΞΑΙΡΕΣΗ: το δίχτυ ασφαλείας του boot πρέπει να σβήνει και εδώ — αλλιώς χωρίς JS το overlay μένει για πάντα */
  #boot{animation:bootoff .2s ease .3s forwards!important}
}

/* ── ΒΟΗΘΟΣ AI (panos 09/09): «να αναφέρεται ότι υπάρχει σε web ΚΑΙ app και
      λύνει απορίες/προβλήματα στους χρήστες, πάντα». Δείχνουμε τι λέει, όχι τι υπόσχεται. */
.asst{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.chips span{font:600 10.5px/1 var(--font-m);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(34,211,238,.32);border-radius:999px;padding:8px 13px;background:rgba(34,211,238,.06)}
.chat{display:flex;flex-direction:column;gap:11px;padding:20px;border:1px solid rgba(167,139,250,.22);border-radius:22px;background:linear-gradient(180deg,rgba(124,58,237,.10),rgba(13,7,25,.55));box-shadow:0 0 55px rgba(124,58,237,.16)}
.bub{font-size:13.5px;line-height:1.62;padding:12px 15px;border-radius:15px;max-width:90%;color:var(--text)}
.bub.me{align-self:flex-end;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);border-bottom-right-radius:5px}
.bub.ai{align-self:flex-start;background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(217,70,239,.13));border:1px solid rgba(167,139,250,.30);border-bottom-left-radius:5px}
.bub.ai b{display:block;font:700 9.5px/1 var(--font-m);letter-spacing:.2em;color:var(--cyan);margin-bottom:6px}
@media(max-width:860px){.asst{grid-template-columns:1fr;gap:30px}}

/* ── Αφή (έλεγχος κινητού 10/09): καμία μπλε λάμψη Android, ανάδραση «πατήθηκε», το hover ΜΟΝΟ όπου υπάρχει
   δείκτης — στην αφή το iOS «κολλάει» το :hover μετά το tap (chips σηκωμένα 3px, κουμπιά φωτεινότερα). ── */
a,button,canvas{-webkit-tap-highlight-color:transparent}
@media (hover:none){
  .btn:active{transform:translateY(1px) scale(.98);filter:brightness(1.1);transition-duration:.08s}
  .tab:active{background:rgba(23,16,41,.6);border-color:var(--line)}
  .lang button:active,.ind>span:active{filter:brightness(1.15)}
  #halo{display:none}   /* 560×560 layer με mix-blend-mode που ποτέ δεν ανάβει σε αφή */
}
@media (hover:hover){
  .nav nav a:hover{color:var(--text);transform:translateY(-1px)}
  .btn:hover{transform:translate(var(--mx,0px),calc(var(--my,0px) - 3px))}
  .btn-p:hover{box-shadow:0 14px 34px rgba(217,70,239,.45),inset 0 0 0 1px rgba(255,255,255,.25);filter:brightness(1.08)}
  .btn-g:hover{border-color:var(--lilac);box-shadow:0 0 22px rgba(139,92,246,.35)}
  .btn:hover .ar{transform:translateX(4px)}
  .tcard:hover,.pil:hover{border-color:rgba(167,139,250,.55)}.pil:hover::after{opacity:1}
  .tab:not(.on):hover{background:rgba(23,16,41,.6);border-color:var(--line)}   /* :not(.on): το μπλοκ είναι ΜΕΤΑ το .tab.on στο αρχείο */
  .ind>span:hover{color:var(--text);border-color:var(--lilac);transform:translateY(-3px);box-shadow:0 0 18px rgba(139,92,246,.3)}
  footer li a:hover{color:var(--text)}
}