/* ITHOME-CSS-VERSION: 4-contact-form-1 */
/* ============================================================
   ITHome — Public site CSS (Φάση 3.5, βήμα 1)
   Πηγή αλήθειας: ithome-phase1-mockup-v4.html (ΚΛΕΙΔΩΜΕΝΟ).
   Τα χρώματα/tokens ΔΕΝ ορίζονται εδώ — έρχονται από tokens.css.

   ΕΥΡΟΣ ΒΗΜΑΤΟΣ 1: κέλυφος (header/nav/footer) + κοινά atoms
   (κουμπιά, eyebrow, icons, reveal, grain) που ξαναχρησιμοποιούν
   ΟΛΑ τα templates των βημάτων 2–4. Τα page-specific modules
   (hero/mesh, trust, steps, panels/ports, service grid, φόρμα)
   έρχονται μαζί με το αντίστοιχο template, ώστε κάθε βήμα να
   έχει μικρό, ελέγξιμο diff.

   ΔΕΝ φορτώνεται στο admin — το admin.css είναι ανεξάρτητο και
   χρησιμοποιεί system fonts, οπότε δεν κατεβάζει webfonts τζάμπα.
   ============================================================ */

/* ── 1. Self-hosted γραμματοσειρές ───────────────────────────
   ΓΙΑΤΙ όχι Google Fonts CDN (όπως είχε το mockup): κλειδωμένη
   προδιαγραφή "self-hosted", κανόνας "καμία εξωτερική υπηρεσία
   χωρίς έγκριση", και GDPR — το CDN στέλνει την IP του επισκέπτη
   στην Google χωρίς συναίνεση.

   font-display:swap = "δείξε αμέσως το fallback, άλλαξε μόλις
   κατέβει η γραμματοσειρά" — αποφεύγει το αόρατο κείμενο (FOIT)
   και το τιμωρεί το Lighthouse.

   ΑΝ ΛΕΙΠΟΥΝ ΤΑ ΑΡΧΕΙΑ: δεν σπάει τίποτα. Ο browser αγνοάει το
   @font-face και πέφτει στο system-ui του stack (tokens.css).
   ─────────────────────────────────────────────────────────── */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/inter-800.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-500.woff2') format('woff2'); }

/* ── 2. Βάση ─────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.6;
    transition: background .15s ease, color .15s ease;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: inherit; }
svg { display: block; }
p { margin: 0 0 1em; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.025em;
    margin: 0;
}

/* ⚠️ ΚΡΙΣΙΜΟ — γιατί padding-left/right και ΟΧΙ το shorthand:
   Το `padding: 0 20px` όριζε ΚΑΙ padding-top/bottom = 0. Επειδή το
   `.wrap` είναι κλάση (specificity 0,1,0) και το `section` στοιχείο
   (0,0,1), το `.wrap` ΝΙΚΟΥΣΕ — κάθε <section class="wrap"> έμενε με
   μηδενικό κάθετο κενό, όσο κι αν άλλαζε το `section { padding }`.
   Έτσι όλες οι ενότητες φαίνονταν κολλητές.
   Με τα longhand, το `.wrap` ορίζει ΜΟΝΟ οριζόντιο padding και το
   κάθετο μένει στο `section`. ΜΗΝ το ξαναγυρίσεις σε shorthand. */
.wrap { max-width: 1120px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.muted { color: var(--ink-muted); }

/* ΦΑΣΗ 3.6β — περισσότερος κατακόρυφος αέρας. Ήταν 2.75/6.5vw/6rem·
   σε πλατιές οθόνες οι ενότητες έμοιαζαν στοιβαγμένες. */
/* ══ ΚΑΘΕΤΟΣ ΡΥΘΜΟΣ (Φάση 3.6β) ══════════════════════════════
   ΤΟ ΠΡΟΒΛΗΜΑ ΠΟΥ ΛΥΝΕΙ: τα κενά είχαν γραφτεί ad-hoc σε κάθε
   module (0, 2.4em, 2.6rem, 9rem…). Αποτέλεσμα: άλλα στοιχεία
   κολλημένα, άλλα με τεράστιο χάσμα — μη αναγνωρίσιμος ρυθμός.

   ΤΡΙΑ ΕΠΙΠΕΔΑ, τίποτα άλλο:
     --gap-section  κενό ΜΕΤΑΞΥ ενοτήτων (padding του <section>)
     --gap-block    κενό ΜΕΤΑΞΥ μπλοκ μέσα στην ίδια ενότητα
     --gap-item     κενό ΜΕΤΑΞΥ καρτών (το υπάρχον grid gap)

   Ορίζονται εδώ και όχι στο tokens.css: το tokens.css μοιράζεται
   με το admin, και αυτά αφορούν μόνο το δημόσιο site.
   ΡΥΘΜΙΣΗ: αν θες γενικά πιο αραιά/πυκνά, άλλαξε ΜΟΝΟ αυτές
   τις τρεις τιμές — όλη η σελίδα ακολουθεί. */
:root {
    --gap-section: clamp(3.5rem, 5.5vw, 5.5rem);
    --gap-block:   clamp(2.25rem, 3.4vw, 3.4rem);
    --gap-item:    1.1em;
}

section { padding: var(--gap-section) 0; position: relative; z-index: 2; }

/* ⚠️ ΑΔΙΑΒΛΗΤΟΣ ΚΑΝΟΝΑΣ — ΜΗΝ ΤΟΝ ΣΒΗΣΕΙΣ
   Ο παραπάνω κανόνας `section` έχει specificity 0,0,1 και χάνει από
   ΟΠΟΙΑΔΗΠΟΤΕ κλάση ορίζει padding (.wrap, .reveal, οτιδήποτε μπει
   στο μέλλον). Αποτέλεσμα: οι ενότητες κολλούσαν μεταξύ τους.
   Ο κανόνας από κάτω είναι `section.wrap` → specificity 0,1,1, που
   νικάει κάθε απλή κλάση. Δουλεύει ανεξάρτητα από σειρά γραφής. */
section.wrap {
    padding-top: var(--gap-section);
    padding-bottom: var(--gap-section);
}

/* Ορατό focus ring για πληκτρολόγιο — WCAG 2.4.7. Το :focus-visible
   το δείχνει ΜΟΝΟ σε πλοήγηση με Tab, όχι σε κλικ με ποντίκι. */
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

/* Skip link — WCAG 2.4.1. Δεν υπήρχε στο mockup (τα mockups δεν
   πλοηγούνται), αλλά είναι βασική απαίτηση προσβασιμότητας: ο
   χρήστης πληκτρολογίου προσπερνά το μενού με ένα Tab. */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accent); color: var(--accent-on);
    padding: .7em 1.2em; border-radius: 0 0 var(--radius) 0;
    font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Ορατό μόνο σε screen reader. ΓΙΑΤΙ ΟΧΙ display:none — το display:none
   βγάζει το στοιχείο και από το accessibility tree, δηλαδή δεν το
   διαβάζει ΚΑΝΕΙΣ. Το clip-path το κρύβει οπτικά κρατώντας το
   ανακοινώσιμο. */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── 3. Icons ────────────────────────────────────────────── */
.icon {
    width: 1.15em; height: 1.15em; flex: none;
    stroke: currentColor; stroke-width: 1.6; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
    color: var(--ink-muted);
}
.icon-fill { fill: currentColor; stroke: none; }
.icon-lg { width: 1.7rem; height: 1.7rem; }
.tag-mono { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; }

/* ── 4. Grain overlay (υπογραφή Φάσης 1) ─────────────────── */
.grain {
    position: fixed; inset: 0; pointer-events: none; z-index: 1;
    opacity: var(--grain-opacity);
    filter: url(#grainFilter);
    mix-blend-mode: overlay;
}

/* ── 5. Scroll reveal ────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Χωρίς JS, το .reveal θα έμενε αόρατο για πάντα. Το <html> παίρνει
   class="no-js" από τον server και το public.js τη σβήνει αμέσως. */
.no-js .reveal { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    * { animation-duration: .001ms !important; }
}

/* ── 6. Eyebrow ──────────────────────────────────────────── */
/* Επικεφαλίδα ενότητας (eyebrow + h2). Το h2 είχε inline style
   margin-top:.6em μέσα στο home.php — έφυγε εδώ, ώστε το styling
   να ζει σε ένα σημείο και όχι μισό στο PHP. */
.section-h { margin: .55em 0 0; }

.eyebrow {
    font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent-text); font-weight: 500;
    display: inline-flex; align-items: center; gap: .55em;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    padding: .35em .8em; border-radius: 20px;
}
.eyebrow .dot { width: .4em; height: .4em; border-radius: 50%; background: var(--accent-text); }

/* ── 7. Κουμπιά ──────────────────────────────────────────── */
.btn {
    font-family: var(--font-display); font-weight: 700; font-size: .9375rem;
    padding: .85em 1.5em; border-radius: var(--radius);
    border: 1px solid transparent;
    display: inline-flex; align-items: center; gap: .5em;
    cursor: pointer; text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--accent-on); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.btn-primary:hover { box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 55%, transparent); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }

/* ── 8. Header ───────────────────────────────────────────── */
/* ΣΗΜΕΙΩΣΗ: το mockup ΔΕΝ έχει sticky/glass header — είναι απλό
   background:var(--bg) με border-bottom. Το --surface-glass token
   ορίζεται αλλά μένει αχρησιμοποίητο. Το κρατάω πιστό στο mockup. */
/* ⚠️ z-index 30, ΟΧΙ 2 — ΜΗΝ το κατεβάσεις.
   Τα <section> έχουν κι αυτά z-index:2. Με ίδια τιμή νικάει ό,τι
   έρχεται αργότερα στο DOM, δηλαδή τα sections — και το ανοιχτό
   mobile μενού (position:absolute κάτω από το header) περνούσε ΠΙΣΩ
   από το hero. Αυτό ήταν το «προβληματικό mobile nav». */
header.site { border-bottom: 1px solid var(--line); background: var(--bg); position: relative; z-index: 30; }
.site-header-inner { display: flex; align-items: center; gap: 1.5em; padding: 1.1em 0; }

.logo {
    font-weight: 800; font-size: 1.2rem; text-decoration: none;
    display: flex; align-items: center; gap: .55em; letter-spacing: -.02em;
    flex: none;
}
.logo .tag {
    font-family: var(--font-mono); font-size: .68rem;
    background: var(--accent); color: var(--accent-on);
    padding: .15em .45em; border-radius: 5px; letter-spacing: .02em;
}

nav.primary { display: flex; gap: 1.7em; margin-left: 1em; font-size: .9rem; font-weight: 500; }
nav.primary a { text-decoration: none; color: var(--ink-muted); }
nav.primary a:hover { color: var(--ink); }
nav.primary a[aria-current="page"] { color: var(--ink); }

/* ── Ομάδα με υπομενού (Φάση 3.6γ) ───────────────────────
   Το label είναι ΣΥΝΔΕΣΜΟΣ στην κατηγορία, το βελάκι ΚΟΥΜΠΙ που
   ανοίγει τη λίστα. Δύο ξεχωριστά στοιχεία, γιατί ένα στοιχείο δεν
   μπορεί να κάνει και τα δύο με πληκτρολόγιο. */
.nav-group { position: relative; display: flex; align-items: center; gap: .15em; }
.nav-group-link { text-decoration: none; color: var(--ink-muted); }
.nav-group.is-active > .nav-group-link { color: var(--ink); }
.nav-group-toggle {
    background: none; border: 0; padding: .15em; margin: 0; cursor: pointer;
    color: var(--ink-muted); line-height: 0; border-radius: 4px;
}
.nav-group-toggle .icon { width: .95rem; height: .95rem; transition: transform .2s ease; }
.nav-group-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-group:hover .nav-group-toggle, .nav-group-toggle:hover { color: var(--ink); }

.nav-sub {
    position: absolute; top: calc(100% + .7em); left: -.9em;
    min-width: 240px; padding: .5em;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    display: flex; flex-direction: column;
    /* Κρυφό αλλά ΟΧΙ display:none — το display δεν κάνει transition
       και το άνοιγμα θα ήταν απότομο. */
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 5;
}
/* Ανοίγει με hover ΚΑΙ με πληκτρολόγιο (focus-within) ΚΑΙ με κλικ
   στο κουμπί (.is-open από το JS) — και οι τρεις τρόποι. */
.nav-group:hover > .nav-sub,
.nav-group:focus-within > .nav-sub,
.nav-group.is-open > .nav-sub {
    opacity: 1; visibility: visible; transform: translateY(0);
}
/* Αόρατη γέφυρα: αλλιώς το ποντίκι «πέφτει» στο κενό ανάμεσα στο
   label και το πάνελ, και το μενού κλείνει πριν προλάβεις. */
.nav-group::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: .8em;
}
.nav-sub a {
    padding: .55em .7em; border-radius: 6px; font-size: .875rem;
    color: var(--ink-muted); white-space: nowrap;
}
.nav-sub a:hover { background: var(--bg); color: var(--ink); }
.nav-sub a[aria-current="page"] { color: var(--accent-text); }
/* Η υπογράμμιση του κύριου nav δεν έχει νόημα μέσα στο πάνελ. */
.nav-sub a::after { display: none !important; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 1em; }

.lang-toggle { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-muted); display: flex; gap: .4em; align-items: center; }
.lang-toggle a { text-decoration: none; color: var(--ink-muted); }
.lang-toggle a:hover { color: var(--ink); }
.lang-toggle [data-active] { color: var(--ink); font-weight: 700; }
.lang-toggle .sep { opacity: .4; }

/* Theme toggle — δεν υπήρχε σαν στοιχείο header στο mockup (εκεί
   ζούσε στη γκρι μπάρα προεπισκόπησης), αλλά η κλειδωμένη
   προδιαγραφή ζητά toggle στο δημόσιο site. Στυλ ευθυγραμμισμένο
   με το .lang-toggle ώστε να μη «φωνάζει». */
.theme-toggle {
    background: transparent; border: 1px solid var(--line); color: var(--ink-muted);
    border-radius: 8px; padding: .45em; cursor: pointer; line-height: 0;
    display: inline-flex; transition: border-color .15s ease, color .15s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-muted); }
.theme-toggle .icon { width: 1.05rem; height: 1.05rem; color: inherit; }
/* Δείξε ήλιο σε dark (="πάτα για light") και φεγγάρι σε light. */
.theme-toggle .i-sun { display: block; }
.theme-toggle .i-moon { display: none; }
[data-theme="light"] .theme-toggle .i-sun { display: none; }
[data-theme="light"] .theme-toggle .i-moon { display: block; }

/* Mobile nav — προσθήκη πέρα από το mockup: εκεί το μενού απλά
   εξαφανιζόταν κάτω από 760px (αποδεκτό σε mockup, όχι σε live
   site). Υλοποίηση με button + aria-expanded, χωρίς βιβλιοθήκη. */
.nav-toggle { display: none; background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: .45em; cursor: pointer; line-height: 0; }
.nav-toggle .icon { width: 1.15rem; height: 1.15rem; color: inherit; }

@media (max-width: 760px) {
    nav.primary {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; gap: 0; margin-left: 0;
        background: var(--bg); border-bottom: 1px solid var(--line);
        padding: .5em 20px 1.2em;
        /* Με τα υπομενού ανοιχτά η λίστα ξεπερνά το ύψος της οθόνης.
           Χωρίς αυτό, τα τελευταία στοιχεία γίνονται απρόσιτα. */
        max-height: calc(100vh - 100%); overflow-y: auto;
        /* Ομαλή κύλιση σε iOS. */
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
    }
    nav.primary.is-open { display: flex; }
    nav.primary > a,
    .nav-group { padding: .8em 0; border-top: 1px solid var(--line); font-size: 1rem; }

    /* ── Υπομενού = accordion, ΟΧΙ hover ──────────────────
       Στο κινητό δεν υπάρχει hover: το πρώτο tap θα «κολλούσε» σε
       ψεύτικο hover state και το δεύτερο θα ακολουθούσε τον σύνδεσμο.
       Εδώ το βελάκι ανοίγει/κλείνει και ο σύνδεσμος πλοηγεί. */
    .nav-group { padding-bottom: 0; flex-wrap: wrap; }
    .nav-group-link { flex: 1; padding: 0 0 .8em; }
    .nav-group-toggle {
        /* Μεγάλη επιφάνεια αφής — 24px είναι κάτω από το ελάχιστο
           που συνιστά το WCAG για στόχους δακτύλου. */
        padding: .2em .6em; margin: -.2em -.6em .6em 0;
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .nav-sub {
        position: static; width: 100%; min-width: 0;
        background: none; border: 0; box-shadow: none;
        border-radius: 0; padding: 0 0 .5em .9em;
        margin-left: .2em; border-left: 2px solid var(--line);
        /* Στο κινητό δεν υπάρχει hover/focus-within — ΜΟΝΟ .is-open. */
        display: none; opacity: 1; visibility: visible; transform: none;
        transition: none;
    }
    .nav-group:hover > .nav-sub,
    .nav-group:focus-within > .nav-sub { display: none; }
    .nav-group.is-open > .nav-sub { display: flex; }
    .nav-group::after { display: none; }
    .nav-sub a { padding: .6em 0; font-size: .95rem; }

    /* Το CTA ΔΕΝ εξαφανίζεται πια — μετακομίζει στο τέλος του μενού,
       όπου παραμένει προσβάσιμο. Πριν έλειπε τελείως από κινητό, που
       είναι ακριβώς η συσκευή απ' όπου καλεί κάποιος. */
    .header-cta { display: none; }
    .nav-cta { display: block; margin-top: 1em; text-align: center; }

    .nav-toggle { display: inline-flex; }
    .site-header-inner { gap: .75em; }
}
/* Το CTA μέσα στο μενού υπάρχει μόνο σε κινητό. */
.nav-cta { display: none; }

/* ── 9. Footer ─────────────────────────────────────────────
   ΞΑΝΑΓΡΑΦΤΗΚΕ ΣΤΗ ΦΑΣΗ 4.5.

   ΤΙ ΕΦΤΑΙΓΕ: οι τέσσερις στήλες είχαν άνιση ποσότητα περιεχομένου
   (2 γραμμές έναντι 10), οπότε το footer φαινόταν κρεμασμένο δεξιά
   με μεγάλο κενό κάτω από τις μεσαίες στήλες. Το περιεχόμενο
   ξαναμοιράστηκε στο layout.php· εδώ μένει η τυπογραφική δουλειά.

   ΤΡΕΙΣ ΔΙΟΡΘΩΣΕΙΣ ΠΟΥ ΜΕΤΡΑΝΕ:
   1. align-items: start — χωρίς αυτό τα grid items τεντώνονται στο
      ύψος της ψηλότερης στήλης (stretch είναι το προεπιλεγμένο) και
      κάθε εσωτερικό κενό μεγαλώνει μαζί τους.
   2. Ζεύγη ετικέτα/τιμή σε <dl> με grid δύο στηλών αντί για δύο
      χωριστές γραμμές — μισό ύψος, και σημασιολογικά σωστό
      (ορισμός → τιμή, ακριβώς αυτό που είναι).
   3. Σταθερός κάθετος ρυθμός παντού: το ίδιο row-gap σε links και
      σε ζεύγη, ώστε οι στήλες να «κουμπώνουν» οπτικά μεταξύ τους. */
footer.site { border-top: 1px solid var(--line); padding: 3.25rem 0 2rem; margin-top: 2rem; position: relative; z-index: 2; }

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr .85fr .85fr 1.2fr;
    gap: 2.5em 2em;
    align-items: start;
    margin-bottom: 2.25em;
}

/* Οι στήλες links γίνονται flex ώστε το κενό να ελέγχεται από ΕΝΑ
   gap αντί για margin-bottom σε κάθε <a> (που άφηνε και ένα
   περιττό κενό στο τελευταίο στοιχείο). */
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: .55em; }
.footer-col--brand { gap: 1.1em; }

footer.site h4 {
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-muted); margin: 0 0 .35em;
}
footer.site a { display: block; text-decoration: none; color: var(--ink); font-size: .9rem; margin: 0; }
footer.site a:hover { color: var(--accent-text); }
.footer-about { max-width: 34ch; font-size: .875rem; margin: 0; }

/* Ζεύγη ετικέτα/τιμή (έδρα, ωράριο, τηλέφωνα, email).
   grid-template-columns: auto 1fr → η ετικέτα παίρνει ακριβώς το
   πλάτος που χρειάζεται, η τιμή όλο το υπόλοιπο. Οι ετικέτες
   στοιχίζονται μεταξύ τους χωρίς σταθερό πλάτος γραμμένο με το χέρι
   — άρα δεν σπάει αν αλλάξει λέξη ή γλώσσα. */
.footer-meta {
    display: grid; grid-template-columns: auto 1fr;
    gap: .45em .9em; margin: 0; width: 100%;
}
.footer-meta dt {
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em;
    text-transform: uppercase; line-height: 1.7; white-space: nowrap;
}
.footer-meta dd { margin: 0; font-size: .875rem; line-height: 1.5; }
.footer-meta dd a { display: inline; font-size: inherit; }
.footer-meta dd a:hover { text-decoration: underline; }

.footer-bottom {
    border-top: 1px solid var(--line); padding-top: 1.4em;
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .8em 1.5em; flex-wrap: wrap;
    font-size: .75rem; color: var(--ink-muted);
}
/* Credit αναδόχου. ΤΙ ΕΦΤΑΙΓΕ: το <span> ήταν block-level περιεχόμενο
   μέσα σε flex container και έσπαγε σε δύο γραμμές («Σχεδιασμός &
   Ανάπτυξη» πάνω, «MyeliTech» κάτω), ενώ το copyright απέναντι ήταν
   μία — ασύμμετρο. Τώρα μένει σε μία γραμμή. */
.footer-credit { display: inline-flex; align-items: baseline; gap: .4em; white-space: nowrap; }
.footer-credit a { display: inline; font-size: inherit; margin: 0; color: var(--accent-text); }
.footer-credit a:hover { text-decoration: underline; }

@media (max-width: 940px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.25em 2em; }
}
@media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; }
    /* Στενή οθόνη: η ετικέτα πάνω από την τιμή διαβάζεται καλύτερα
       από δύο κολλητές στήλες σε 320px. */
    .footer-meta { grid-template-columns: 1fr; gap: .15em; }
    .footer-meta dt { margin-top: .5em; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .footer-credit { white-space: normal; }
}

/* ── 10. Main ────────────────────────────────────────────── */
.site-main { flex: 1 0 auto; }

/* Το προσωρινό μπλοκ για γυμνά h1/div αφαιρέθηκε στο βήμα 4 —
   κάθε δημόσια σελίδα βγάζει πλέον κανονικά <section>. */

/* ============================================================
   ΒΗΜΑ 2 — Modules Αρχικής
   Αυτούσια από το mockup Φάσης 1 (#page-home), με μόνες προσθήκες
   όσα χρειάστηκαν επειδή το mockup δεν είχε πραγματικά links.
   ============================================================ */

/* ── Hero + gradient mesh ────────────────────────────────── */
/* Το hero παίρνει λίγο παραπάνω από τις υπόλοιπες ενότητες:
   είναι η πρώτη εντύπωση και χρειάζεται περιθώριο γύρω του. */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
section.hero { padding-top: calc(var(--gap-section) * 1.15); padding-bottom: calc(var(--gap-section) * 1.15); }
.hero-mesh {
    position: absolute; inset: -25%; pointer-events: none;
    opacity: var(--mesh-opacity); filter: blur(90px); z-index: 0;
    background:
        radial-gradient(circle at 18% 24%, var(--accent) 0%, transparent 42%),
        radial-gradient(circle at 82% 6%, var(--violet) 0%, transparent 38%),
        radial-gradient(circle at 65% 78%, var(--accent) 0%, transparent 34%);
}
/* ΦΑΣΗ 3.6β: η κάρτα επικοινωνίας έφυγε στο footer, άρα το hero έχει
   πλέον ΕΝΑ παιδί. Περιορίζουμε ρητά το κείμενο στο αριστερό ~58%:
   το δεξί 42% μένει ελεύθερο για το particle «Mantzos», που σχεδιάζεται
   με alignRight / widthRatio 0.46 (hero-net.js). Χωρίς αυτό, το κείμενο
   θα απλωνόταν σε όλο το πλάτος και θα πατούσε το animation. */
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 58%); gap: 2.5em; align-items: end; }
.hero h1 { font-size: clamp(2.15rem, 4.8vw + 1rem, 3.65rem); margin: .55em 0 .4em; }
.hero .lede { font-size: 1.0625rem; color: var(--ink-muted); max-width: 44ch; }
.hero-ctas { display: flex; gap: .8em; margin-top: 1.9em; flex-wrap: wrap; }

@media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; } }

/* ΝΕΚΡΟΣ ΚΩΔΙΚΑΣ ΑΦΑΙΡΕΘΗΚΕ (post-audit, 23/07/2026): το μπλοκ
   .status-card / .status-head / .status-dot / .status-row (~18 γραμμές)
   και το @keyframes pulse-ring / .pulse. Η κάρτα επικοινωνίας του hero
   μετακινήθηκε στο footer στη Φάση 3.6β και τα CSS της έμειναν πίσω
   αχρησιμοποίητα. Καμία αναφορά σε PHP/JS — επιβεβαιώθηκε με grep. */

/* ── Κείμενο σελίδας ─────────────────────────────────────── */
/* ΝΕΟ (δεν υπήρχε στο mockup): το mockup δεν είχε ελεύθερο κείμενο από
   τη βάση. Συντηρητικό μέγιστο πλάτος ~68 χαρακτήρες — πάνω από αυτό το
   μάτι δυσκολεύεται να βρει την επόμενη γραμμή. */
/* ΦΑΣΗ 3.6β — «αναπνοή» για το κείμενο της αρχικής.
   ΤΟ ΠΡΟΒΛΗΜΑ: ήταν το μοναδικό στοιχείο χωρίς οπτικό σώμα, ανάμεσα
   στο hero (mesh + border-bottom) και στα trust cards (surface + border)
   — έμοιαζε «κολλημένο» ανάμεσά τους.
   Η ΛΥΣΗ: λεπτή κάθετη γραμμή accent αντί για τέταρτο κουτί. Δίνει
   δομή χωρίς να προσθέτει οπτικό θόρυβο σε σελίδα που ήδη έχει
   κάρτες, βήματα και panels. */
.prose {
    max-width: 70ch;
    /* Μεγαλύτερο από το σώμα κειμένου: αυτή είναι η εισαγωγή της
       σελίδας, όχι απλή παράγραφος. Το μέγεθος τη διαχωρίζει από
       τα μικρά κείμενα των καρτών που ακολουθούν. */
    font-size: 1.0625rem; line-height: 1.8;
    border-left: 2px solid var(--accent);
    padding-left: clamp(1.5rem, 3vw, 2.6rem);
}
.prose p { margin: 0 0 1.4em; }
.prose p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .prose { padding-left: 1.1rem; font-size: 1rem; } }

/* Το μπλοκ κειμένου είναι στενό (70ch) ενώ οι κάρτες από κάτω πιάνουν
   όλο το πλάτος. ΔΕΝ χρειάζεται επιπλέον padding: το κενό μεταξύ
   ενοτήτων είναι ήδη 2 × --gap-section (κάτω του ενός + πάνω του
   επόμενου). Προηγούμενη έκδοση πρόσθετε 9rem ΠΑΝΩ σε αυτό — 
   συνολικά ~16rem, χάσμα αντί για αναπνοή. */
section.home-intro { padding-bottom: var(--gap-section); }
.prose p { color: var(--ink-muted); }

/* ── Trust ───────────────────────────────────────────────── */
.trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-item); margin-top: 0; }
.trust > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7em; display: flex; gap: 1.1em; }
.trust h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: .4em; letter-spacing: -.01em; }
.trust p { margin: 0; }

@media (max-width: 640px) { .trust { grid-template-columns: 1fr; } }

/* ── Steps ───────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-item); margin-top: var(--gap-block); }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5em; }
.step .n { color: var(--accent-text); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .05em; }
.step h3 { font-size: 1.1rem; margin: .5em 0 .35em; letter-spacing: -.01em; }
.step p { margin: 0; }

@media (max-width: 700px) { .steps { grid-template-columns: 1fr; } }

/* ── Patch-panel: ενότητα υπηρεσιών ──────────────────────── */
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-item); margin-top: var(--gap-block); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6em; }
.panel-head { display: flex; align-items: center; gap: .7em; margin-bottom: 1.2em; padding-bottom: 1em; border-bottom: 1px solid var(--line); }
.panel-head .icon { color: var(--accent-text); }
.panel-head h3 { font-size: 1.05rem; letter-spacing: -.01em; flex: 1; }
.panel-head .count { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-muted); flex: none; }

/* ΝΕΟ: στο mockup ο τίτλος κατηγορίας ήταν απλό κείμενο. Εδώ γίνεται
   link προς τη σελίδα κατηγορίας — χωρίς οπτική διαφορά. */
.panel-link { text-decoration: none; color: inherit; }
.panel-link:hover { color: var(--accent-text); }

.ports { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5em; }
.port {
    display: flex; align-items: center; gap: .6em;
    padding: .8em .85em; border-radius: 8px;
    background: var(--bg); border: 1px solid var(--line);
    text-decoration: none; color: var(--ink); font-size: .84375rem;
    transition: border-color .15s ease, transform .15s ease;
}
.port:hover { border-color: var(--accent-text); transform: translateY(-1px); }

@media (max-width: 760px) { .panels { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .ports { grid-template-columns: 1fr; } }

/* ── Πελατολόγιο (Φάση 4.5) ──────────────────────────────
   ΓΙΑΤΙ ΕΙΚΟΝΙΔΙΟ ΚΛΑΔΟΥ ΚΑΙ ΟΧΙ ΛΟΓΟΤΥΠΟ: δεν έχουμε λογότυπα των
   πελατών ούτε άδεια χρήσης τους. Το εικονίδιο παίρνει χρώμα από
   currentColor, άρα δουλεύει σωστά και σε light και σε dark theme —
   κάτι που ένα PNG λογότυπο με δικό του φόντο ΔΕΝ κάνει.

   ΓΙΑΤΙ auto-fill ΚΑΙ ΟΧΙ ΣΤΑΘΕΡΕΣ ΣΤΗΛΕΣ: το πλήθος των πελατών
   αλλάζει από το admin. Με σταθερές 3 ή 4 στήλες, κάθε νέος πελάτης
   θα άλλαζε τη διάταξη απρόβλεπτα. Το auto-fill κρατά σταθερό το
   ΠΛΑΤΟΣ της κάρτας και προσαρμόζει το πλήθος στηλών στην οθόνη. */
.clients-intro { margin-top: .8em; max-width: 62ch; }

.clients {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--gap-item);
    margin-top: var(--gap-block);
}

.client-card {
    position: relative;
    display: flex; align-items: flex-start; gap: .85em;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.2em 1.3em;
    text-decoration: none; color: inherit;
}
.client-icon { color: var(--accent-text); margin-top: .05em; }

/* min-width: 0 — χωρίς αυτό, ένα μακρύ όνομα χωρίς κενά κάνει το
   flex item να ξεχειλίσει αντί να τυλιχτεί. Κλασική παγίδα flexbox. */
.client-body { display: flex; flex-direction: column; gap: .28em; min-width: 0; }
.client-name { font-weight: 700; font-size: .95rem; letter-spacing: -.01em; line-height: 1.35; }
.client-desc { font-size: .8125rem; line-height: 1.45; }

/* Το βελάκι «ανοίγει αλλού». Χώρος γι' αυτό εξασφαλίζεται με το
   padding-right της κάρτας-συνδέσμου παρακάτω. */
.client-ext {
    position: absolute; top: .95em; right: 1em;
    font-size: .85rem; color: var(--ink-muted);
    transition: color .15s ease, transform .15s ease;
}
a.client-card { padding-right: 2.4em; }
a.client-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent-text) 55%, var(--line));
    box-shadow: 0 14px 40px color-mix(in srgb, var(--accent) 22%, transparent),
                0 0 0 1px color-mix(in srgb, var(--accent-text) 20%, transparent);
}
a.client-card:hover .client-ext { color: var(--accent-text); transform: translate(1px, -1px); }
a.client-card:hover .client-name { color: var(--accent-text); }

/* Πληκτρολόγιο: το outline πρέπει να φαίνεται καθαρά, WCAG. */
a.client-card:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

@media (max-width: 520px) { .clients { grid-template-columns: 1fr; } }

/* ── CTA band ────────────────────────────────────────────── */
.cta-band {
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: calc(var(--radius) * 1.4); padding: 2.4em; margin-top: var(--gap-block);
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.4em; flex-wrap: wrap;
}
.cta-band::before {
    content: ""; position: absolute; inset: -40%;
    background: radial-gradient(circle at 85% 20%, var(--accent), transparent 55%);
    opacity: var(--mesh-opacity); filter: blur(60px); pointer-events: none;
}
.cta-band h3 { position: relative; font-size: 1.3rem; letter-spacing: -.015em; }
.cta-band .btn { position: relative; }

/* ============================================================
   ΒΗΜΑ 3 — Σελίδες Κατηγορίας & Υπηρεσίας
   Υπηρεσία: αυτούσιο από το mockup (#page-service).
   Κατηγορία: δεν υπάρχει στο mockup — σύνθεση από τα ίδια
   κλειδωμένα στοιχεία (καμία νέα οπτική γλώσσα).
   ============================================================ */

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb-bar { padding-top: 1.6rem; }
.breadcrumb { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: .5em; align-items: center; }
.breadcrumb a { text-decoration: none; color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { opacity: .45; }
.breadcrumb [aria-current="page"] { color: var(--ink); }

/* ── Hero κατηγορίας / υπηρεσίας ─────────────────────────── */
/* Μικρότερο padding-top από το γενικό `section`: από πάνω υπάρχει ήδη
   η μπάρα breadcrumb, αλλιώς θα έμενε τεράστιο κενό. */
.service-hero { padding-top: clamp(1.4rem, 3vw, 2.4rem); }
.service-hero h1 { font-size: clamp(1.9rem, 3.2vw + 1rem, 2.7rem); margin: .5em 0 .5em; }
.service-hero .lede { font-size: 1.0625rem; max-width: 60ch; margin: 0; }

/* ── Grid σελίδας υπηρεσίας ──────────────────────────────── */
.service-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.6em; margin-top: 1em; align-items: start; }
@media (max-width: 820px) { .service-grid { grid-template-columns: 1fr; } }

/* Επικεφαλίδα στήλης: <h2> για σωστή ιεραρχία επικεφαλίδων (SEO/
   screen readers), αλλά στο μέγεθος που είχε το mockup. */
.col-h { font-size: 1.05rem; margin: 2em 0 1em; letter-spacing: -.01em; }
.service-main > .col-h:first-child { margin-top: 0; }
.service-main > p { max-width: 68ch; }

/* ── Checklist ───────────────────────────────────────────── */
.checklist { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: .7em; }
.checklist li { display: flex; gap: .7em; align-items: flex-start; font-size: .9375rem; }
.checklist li .icon { color: var(--accent-text); margin-top: .15em; }

/* ── Chips ───────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .6em; }
.chip {
    font-family: var(--font-mono); font-size: .7rem;
    border: 1px solid var(--line); border-radius: 20px;
    padding: .4em .9em; color: var(--ink-muted); text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--accent-text); color: var(--ink); }

/* ── FAQ σε σελίδα υπηρεσίας ─────────────────────────────── */
.faq-item { border-top: 1px solid var(--line); padding: 1.1em 0; font-size: .9375rem; }
.faq-item .q { font-weight: 700; margin-bottom: .4em; display: flex; gap: .6em; }
.faq-item .q .tag-mono { color: var(--accent-text); flex: none; padding-top: .15em; }
.faq-a { margin: 0; }
.faq-all { margin-top: 1.2em; font-size: .8125rem; }
.faq-all a { color: var(--accent-text); text-decoration: none; }
.faq-all a:hover { text-decoration: underline; }

/* ── Δεξιά στήλη ─────────────────────────────────────────── */
.service-side { display: grid; gap: 1.1em; }
.service-media { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); display: block; }

.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6em; }
.side-h { font-size: 1.05rem; margin-bottom: .7em; letter-spacing: -.01em; }
.side-p { font-size: .875rem; }
.side-btn { width: 100%; justify-content: center; margin-top: .6em; }

/* Στο κινητό η κάρτα CTA είναι πιο χρήσιμη πριν από τα FAQ. */
@media (max-width: 820px) {
    .service-grid { display: flex; flex-direction: column; }
    .service-side { order: -1; }
}

/* ── Σελίδα κατηγορίας: κάρτες υπηρεσιών ─────────────────── */
/* Ίδιο "δέρμα" με τα .panel/.step της αρχικής — surface, line, radius. */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-item); margin-top: var(--gap-block); }
.cat-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.6em;
    text-decoration: none; color: var(--ink);
    display: flex; flex-direction: column; gap: .5em;
    transition: border-color .15s ease, transform .15s ease;
}
.cat-card:hover { border-color: var(--accent-text); transform: translateY(-2px); }
.cat-card .icon-lg { color: var(--accent-text); margin-bottom: .3em; }
.cat-card h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.cat-card p { margin: 0; font-size: .875rem; }
.cat-card-more { margin-top: auto; padding-top: .8em; font-family: var(--font-mono); font-size: .7rem; color: var(--accent-text); }

@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cat-grid { grid-template-columns: 1fr; } }

/* Το cta-band χρησιμοποιεί <h2> εδώ (ιεραρχία), ίδιο look με το h3. */
.cta-band-h { position: relative; font-size: 1.3rem; letter-spacing: -.015em; }

/* ============================================================
   ΒΗΜΑ 4 — Υπόλοιπες σελίδες
   ============================================================ */

/* ── Επικοινωνία ─────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.6em; align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

.info-row { display: flex; justify-content: space-between; gap: 1em; padding: .75em 0; border-top: 1px solid var(--line); font-size: .9375rem; }
.info-row:first-of-type { border-top: none; }
.info-row > span:last-child { text-align: right; }

.contact-actions { display: flex; gap: .8em; flex-wrap: wrap; margin-top: .6em; }
.contact-actions .icon { color: currentColor; }

.map-link { margin: 1.2em 0 0; font-size: .8125rem; }
.map-link a { color: var(--accent-text); text-decoration: none; }
.map-link a:hover { text-decoration: underline; }

/* ── FAQ listing ─────────────────────────────────────────── */
.faq-list { max-width: 76ch; }
.faq-list .faq-item:first-of-type { border-top: none; }
/* Στη λίστα FAQ η ερώτηση είναι <h2> (ιεραρχία), αλλά κρατά ακριβώς το
   ίδιο μέγεθος/βάρος με το .q της σελίδας υπηρεσίας. */
.faq-list h2.q { font-size: .9375rem; font-weight: 700; letter-spacing: 0; line-height: 1.5; margin: 0 0 .4em; }

/* ── 404 ─────────────────────────────────────────────────── */
.error-page { text-align: center; padding-top: clamp(3rem, 8vw, 6rem); }
.error-page h1 { font-size: clamp(1.9rem, 3.2vw + 1rem, 2.7rem); margin: .5em 0 .4em; }
.error-page .lede { max-width: 46ch; margin: 0 auto; font-size: 1.0625rem; }
.error-page .hero-ctas { justify-content: center; }

/* ============================================================
   ΒΗΜΑ 5 — Micro-polish (Φάση 3.5)
   ΜΟΝΟ κίνηση & βάθος. Ίδια χρώματα, ίδια τυπογραφία, ίδια δομή.
   Καθαρά CSS (transforms/opacity) — μηδέν JS, μηδέν επίπτωση στο
   Lighthouse. Κάθε animation ακυρώνεται στο prefers-reduced-motion
   στο τέλος του μπλοκ.
   Όλα ΠΡΟΣΘΗΚΕΣ: καμία υπάρχουσα γραμμή δεν αλλάζει — οι νέοι
   κανόνες υπερισχύουν όπου χρειάζεται λόγω σειράς (cascade).
   ============================================================ */

/* ── 1. Το mesh «αναπνέει» ───────────────────────────────
   Αργή μετατόπιση/κλίμακα (24s) στο ήδη υπάρχον gradient. Δεν
   αλλάζει χρώματα ή opacity — μόνο μετακινεί ανεπαίσθητα τα
   φώτα ώστε το hero να μη μοιάζει «παγωμένο». */
@keyframes mesh-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    33%  { transform: translate3d(2%, -1.5%, 0) scale(1.05); }
    66%  { transform: translate3d(-1.5%, 1%, 0) scale(1.02); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
.hero-mesh { animation: mesh-drift 24s ease-in-out infinite; will-change: transform; }
.cta-band::before { animation: mesh-drift 30s ease-in-out infinite; will-change: transform; }

/* ── 2. Staggered reveal ─────────────────────────────────
   Τώρα όλες οι κάρτες εμφανίζονται μαζί. Δίνουμε κλιμακωτή
   καθυστέρηση στα άμεσα παιδιά των grids ώστε να «χτίζονται»
   διαδοχικά. Καθαρά CSS: το JS απλώς βάζει .is-visible όπως πριν,
   το delay είναι δικό μας. nth-child μέχρι 6 (μεγαλύτερο grid).
   Το transition-delay ισχύει ΜΟΝΟ στη μετάβαση προς is-visible·
   στην αντίστροφη δεν έχει ορατή επίδραση εδώ. */
.panels > .panel,
.steps > .step,
.trust > div,
.cat-grid > .cat-card,
.ports > .port { transition: opacity .6s ease, transform .6s ease, border-color .15s ease, box-shadow .25s ease; }

.reveal .panel:nth-child(1), .reveal.panel:nth-child(1),
.reveal .cat-card:nth-child(1), .reveal .step:nth-child(1) { transition-delay: 0ms; }
.reveal .panel:nth-child(2), .reveal .cat-card:nth-child(2), .reveal .step:nth-child(2) { transition-delay: 70ms; }
.reveal .panel:nth-child(3), .reveal .cat-card:nth-child(3), .reveal .step:nth-child(3) { transition-delay: 140ms; }
.reveal .cat-card:nth-child(4) { transition-delay: 210ms; }
.reveal .cat-card:nth-child(5) { transition-delay: 280ms; }
.reveal .cat-card:nth-child(6) { transition-delay: 350ms; }

/* Μικρή αρχική μετατόπιση στις ίδιες τις κάρτες μέσα σε .reveal
   ενότητα (ώστε το stagger να φαίνεται — αλλιώς όλες ξεκινούν από
   την ίδια θέση). Ουδέτερο όταν το reveal γίνει visible. */
.reveal:not(.is-visible) .panel,
.reveal:not(.is-visible) .cat-card,
.reveal:not(.is-visible) .step,
.reveal:not(.is-visible) .client-card,
.reveal:not(.is-visible) .trust > div { opacity: 0; transform: translateY(14px); }
.reveal.is-visible .panel,
.reveal.is-visible .cat-card,
.reveal.is-visible .step,
.reveal.is-visible .client-card,
.reveal.is-visible .trust > div { opacity: 1; transform: translateY(0); }

/* ── 3. Βάθος στις κάρτες (hover) ────────────────────────
   Αναβάθμιση των υπαρχόντων hover: πλουσιότερη σκιά + λεπτό
   φωτεινό accent halo + πιο αισθητό ανασήκωμα. Χρησιμοποιεί
   color-mix με τα ήδη κλειδωμένα tokens — κανένα νέο χρώμα. */
.panel, .cat-card, .step, .trust > div, .side-card, .client-card {
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.panel:hover, .cat-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent-text) 55%, var(--line));
    box-shadow: 0 14px 40px color-mix(in srgb, var(--accent) 22%, transparent),
                0 0 0 1px color-mix(in srgb, var(--accent-text) 20%, transparent);
}

/* ── 4. Gradient border που ανάβει ───────────────────────
   Τα primary κουμπιά αποκτούν ένα accent→violet «φωτεινό» επίπεδο
   που εμφανίζεται στο hover. Υλοποίηση με ψευδοστοιχείο ώστε να
   μην πειράξουμε το ίδιο το κουμπί. */
.btn-primary { position: relative; isolation: isolate; }
.btn-primary::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    padding: 1px; z-index: -1;
    background: linear-gradient(120deg, var(--accent-text), var(--violet));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .25s ease;
}
.btn-primary:hover::after { opacity: 1; }

/* Το ίδιο «ανάβει» στο cta-band border. */
.cta-band { transition: border-color .3s ease, box-shadow .3s ease; }
.cta-band:hover {
    border-color: color-mix(in srgb, var(--accent-text) 45%, var(--line));
    box-shadow: 0 20px 50px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ── (5) Sticky glass header: ΑΦΑΙΡΕΘΗΚΕ κατόπιν απόφασης.
   Το header ξαναγίνεται απλό (position:relative, αδιαφανές) όπως
   στη βασική δήλωση header.site πιο πάνω. Το --surface-glass token
   μένει ορισμένο αλλά αχρησιμοποίητο, όπως ήταν στο mockup. */

/* ── 6. Underline animation στο nav ──────────────────────
   Γραμμή accent που «τρέχει» από αριστερά στο hover των link του
   μενού. Δεν αλλάζει το χρώμα κειμένου (αυτό μένει όπως ήταν). */
nav.primary a { position: relative; }
nav.primary a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.35em; height: 2px;
    background: var(--accent-text); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
nav.primary a:hover::after,
nav.primary a[aria-current="page"]::after { transform: scaleX(1); }
/* Στο mobile (κάθετο μενού) η γραμμή θα ήταν άσχημη — την κρύβουμε. */
@media (max-width: 760px) { nav.primary a::after { display: none; } }

/* ── Καθολικό reduced-motion switch για το βήμα 5 ────────
   Όποιος έχει "λιγότερη κίνηση" στο λειτουργικό: σβήνουμε ΟΛΑ τα
   παραπάνω animations/transitions. Τα hover states βάθους μένουν
   (είναι στιγμιαία, όχι κίνηση), αλλά χωρίς drift/stagger. */
@media (prefers-reduced-motion: reduce) {
    .hero-mesh, .cta-band::before { animation: none; }
    .reveal .panel, .reveal .cat-card, .reveal .step, .reveal .trust > div { transition-delay: 0ms !important; }
    nav.primary a::after { transition: none; }
}

/* ============================================================
   ΒΗΜΑ 7 — Hero network animation (canvas)
   Το <canvas> κάθεται ΠΙΣΩ από το κείμενο του hero (z-index 0,
   content z-index 1) → το κείμενο μένει 100% ευανάγνωστο, το
   animation δεν το «πατάει» ποτέ.
   ΜΟΝΟ desktop, ΜΟΝΟ όποιος δεν έχει reduced-motion.
   ============================================================ */
.hero-net {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none; display: block;
}

/* Ήπιο scrim ΠΙΣΩ από το κείμενο για ευκρίνεια — αφήνει το ghost
   «Mantzos» να φαίνεται γύρω, σβήνει το πίσω μέρος του τίτλου. */
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 46% 60% at 30% 50%,
        var(--bg) 0%, var(--bg) 16%, transparent 66%);
}
/* ── Ζώνη κίνησης εσωτερικών σελίδων (Φάση 3.6) ──────────
   ΤΟ ΠΡΟΒΛΗΜΑ: η `.service-hero` ήταν σκέτο <section> — χωρίς
   position:relative, χωρίς overflow:hidden, χωρίς ύψος. Δεν υπήρχε
   καμία στρώση για να μπει canvas από πίσω.

   Η `.page-hero` μπαίνει ΜΟΝΟ όταν η σελίδα έχει σχήμα (βλ.
   public_net_shape_for). Σελίδα χωρίς σχήμα — π.χ. η /faq/ — μένει
   ακριβώς όπως ήταν, μηδέν οπτική διαφορά. */
.page-hero {
    position: relative;
    overflow: hidden;
    /* Χωρίς ελάχιστο ύψος η ζώνη είναι ~150px (τίτλος + lede) και το
       σχήμα βγαίνει πολύ μικρό για να αναγνωριστεί. */
    min-height: 300px;
}
/* Το περιεχόμενο πάνω από το canvas. Χωρίς αυτό, το canvas (που είναι
   πρώτο παιδί) θα σκέπαζε τον τίτλο. */
.page-hero > *:not(.hero-net) { position: relative; z-index: 1; }

/* Το canvas καταλαμβάνει το ΔΕΞΙ μισό, όπως το «Mantzos» στην αρχική:
   το κείμενο μένει αριστερά και δεν πατιέται ποτέ. */
.page-hero .hero-net {
    left: auto; right: 0; width: 46%;
    /* Λίγο μέσα από τα άκρα ώστε το σχήμα να μην ακουμπά την κορυφή. */
    top: 6%; height: 88%;
}
/* Ήπιο scrim: σβήνει το σχήμα εκεί που πλησιάζει το κείμενο, ώστε ο
   τίτλος να μένει ευανάγνωστος. Ίδια αρχή με το .hero::after. */
.page-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(to right,
        var(--bg) 0%, var(--bg) 34%, transparent 62%);
}
@media (max-width: 900px) {
    /* Στενή οθόνη: το κείμενο χρειάζεται όλο το πλάτος. */
    .page-hero { min-height: 0; }
    .page-hero .hero-net { display: none; }
}

/* Κινητό: κρύβεται τελείως (και το JS δεν τρέχει καν). */
@media (max-width: 760px) { .hero-net { display: none; } }
/* Λιγότερη κίνηση: κανένα animation. */
@media (prefers-reduced-motion: reduce) { .hero-net { display: none; } }

/* ============================================================
   ΦΑΣΗ 4 — Φόρμα επικοινωνίας
   Χρησιμοποιεί ΜΟΝΟ υπάρχοντα tokens και τις τρεις μεταβλητές
   κάθετου ρυθμού. Καμία νέα οπτική γλώσσα: τα πεδία δανείζονται
   το «δέρμα» των καρτών (surface + line + radius).
   ============================================================ */

.contact-form-intro { max-width: 60ch; margin-top: -.4em; }

/* ⚠️ HONEYPOT — ΜΗΝ ΤΟ ΑΛΛΑΞΕΙΣ ΣΕ display:none
   Κάποια bots αγνοούν πεδία με display:none ακριβώς επειδή είναι το
   προφανές κόλπο. Το πεδίο εδώ είναι ΠΡΑΓΜΑΤΙΚΑ στη σελίδα και
   ορατό στο DOM — απλώς μετακινημένο εκτός οθόνης. Ο άνθρωπος δεν
   το φτάνει ποτέ (tabindex="-1"), το bot το βλέπει και το γεμίζει. */
.hp-field {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}

.contact-form { margin-top: 1.2em; display: grid; gap: 1.1em; max-width: 640px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1em; align-items: start; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: .45em; }
.field > span { font-size: .8125rem; color: var(--ink-muted); font-weight: 500; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
    font: inherit; font-size: .9375rem;
    color: var(--ink); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: .75em .9em; width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 8em; line-height: 1.6; }

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Το κουτάκι συναίνεσης είναι ΟΡΙΖΟΝΤΙΟ (κουτί δίπλα στο κείμενο) —
   align-items:start ώστε να μένει στη γραμμή του κειμένου όταν αυτό
   τυλίγεται σε δύο σειρές. */
.field--check { flex-direction: row; align-items: flex-start; gap: .7em; }
.field--check input { margin-top: .25em; width: 1.05em; height: 1.05em; flex: none; accent-color: var(--accent); }
.field--check > span { font-size: .875rem; line-height: 1.55; color: var(--ink-muted); font-weight: 400; }
.field--check a { color: var(--accent-text); }

.form-actions { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; margin-top: .2em; }
.form-required-note { font-size: .75rem; }

/* Μηνύματα αποτελέσματος. Το χρώμα ΔΕΝ είναι το μόνο σήμα: υπάρχει
   και εικονίδιο ✓ στην επιτυχία και λίστα στα σφάλματα — WCAG 1.4.1
   («χρήση χρώματος»), για όποιον δεν ξεχωρίζει πράσινο από κόκκινο. */
.form-note {
    display: flex; align-items: flex-start; gap: .6em;
    padding: .9em 1.1em; border-radius: var(--radius);
    border: 1px solid var(--line); background: var(--surface);
    font-size: .9375rem; margin: 1.2em 0 0;
}
.form-note--ok { border-color: color-mix(in srgb, var(--accent-text) 55%, var(--line)); }
.form-note--ok .icon { color: var(--accent-text); margin-top: .15em; }
.form-note--error { border-color: color-mix(in srgb, var(--violet) 60%, var(--line)); }
.form-note--error ul { margin: 0; padding-left: 1.2em; }
.form-note--error li + li { margin-top: .3em; }