/* NisosGO — δημόσια σελίδα.
 *
 * Η παλέτα βγαίνει από τη φωτογραφία του hero, όχι από πρότυπο: ασβεστωμένος
 * τοίχος, βαθύ γαλάζιο του κόλπου, ξερή ελιά, και το κοβάλτιο των γραμμών
 * διαδρομής — που είναι το ίδιο accent με την κονσόλα. Η σελίδα και το προϊόν
 * μιλούν με την ίδια φωνή· σε σελίδα προϊόντος αυτό είναι το ζητούμενο.
 */

:root {
  --paper:   #F6F4EF;   /* ασβέστης */
  --surface: #FFFFFF;
  --ink:     #0F1F2C;   /* η σκιά στον τοίχο */
  --muted:   #5A6672;
  --scrub:   #7C7657;   /* ξερή ελιά */
  --line:    #E2DFD7;
  --sea:     #0C7C93;
  --deep:    #08536B;
  --accent:  #1F5FE0;   /* το κοβάλτιο των διαδρομών */
  --accent-ink: #14409B;

  --sans: "IBM Plex Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* Οι γραμματοσειρές σερβίρονται από **εμάς**, όχι από το Google: ο ίδιος κανόνας
   που γράφτηκε για την κονσόλα. Αν λείπουν τα woff2, το stack πέφτει στο
   σύστημα — η σελίδα δεν σπάει, αλλάζει χαρακτήρα. Βλ. landing/README.md. */
/* IBM Plex, τοπικά. Καμία κλήση στο Google: η γραμματοσειρά δεν επιτρέπεται να
   εξαφανίζεται όταν φταρνιστεί το DNS, και ένα δημόσιο site δεν στέλνει κάθε
   επισκέπτη σε τρίτον. Ίδιος κανόνας με την κονσόλα.

   **Ένα αρχείο ανά υποσύνολο, δηλωμένο δύο φορές.** Το IBM Plex Sans του Google
   είναι variable: το ίδιο woff2 καλύπτει 400 και 600, όπως το δηλώνει και το ίδιο
   το Google. Δύο αντίγραφα θα ήταν 45KB πεταμένα.

   Το ελληνικό υποσύνολο δεν είναι προαιρετικό — τα ονόματα των στάσεων είναι
   ελληνικά, και χωρίς αυτό πέφτουν σε γραμματοσειρά συστήματος μέσα στην ίδια
   πρόταση. */
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/plex-sans-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/plex-sans-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/plex-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }

/* Η κολλητή κεφαλίδα σκεπάζει ό,τι φέρνει ένα άγκιστρο. Το `scroll-padding`
   κρατά τον τίτλο ορατό αντί να τον κρύβει πίσω από τη μπάρα. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 4px;
}
.skip:focus { left: 12px; top: 12px; z-index: 100; }

/* ── κεφαλίδα ─────────────────────────────────────────────────────── */

/* Κολλητή, και **στερεώνει** μόλις φύγει το hero. Πάνω από τη φωτογραφία είναι
   διάφανη γιατί η εικόνα είναι το επιχείρημα· πάνω από κείμενο θα ήταν
   αδιάβαστη. Ο διακόπτης γίνεται με `IntersectionObserver`, όχι με ακρόαση
   κύλισης: το δεύτερο τρέχει σε κάθε καρέ για μια ερώτηση με δύο απαντήσεις. */
/* Κολλητή, και **στερεώνει** μόλις φύγει η κορυφή. Πάνω από τη φωτογραφία μένει
   διάφανη γιατί η εικόνα είναι το επιχείρημα· πάνω από κείμενο θα ήταν
   αδιάβαστη. Η μπάρα πιάνει όλο το πλάτος, το περιεχόμενό της κρατά το πλέγμα
   της σελίδας. */
/* Σταθερά σκούρα, σε κάθε θέση κύλισης.
 *
 * Η πρώτη εκδοχή ήταν διάφανη στην κορυφή και στερέωνε στο σκρολ. Δύο
 * καταστάσεις σημαίνουν δύο σετ χρωμάτων για σήμα, συνδέσμους και κουμπιά, και
 * ο φρουρός που τις εναλλάσσει είχε `rootMargin: -8px`: ένα στοιχείο ενός pixel
 * στο y=0 δεν τέμνεται **ποτέ** με ρίζα κατεβασμένη κατά 8, οπότε η σελίδα
 * ξεκινούσε ήδη «scrolled» και η ανοιχτή εκδοχή δεν εμφανιζόταν ποτέ.
 *
 * Μία κατάσταση δεν έχει τι να χαλάσει, και πάνω από ξεπλυμένη φωτογραφία η
 * σκούρη μπάρα δίνει στη σελίδα αρχή. */
.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--ink);
}
.top .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  max-width: var(--wrap); margin: 0 auto;
  padding: 18px var(--gutter);
  transition: padding .22s ease;
}
/* Η μπάρα κρατά **σταθερό ύψος**. Μικραίνοντας στο σκρολ, άλλαζε το `--topH`
   από το οποίο κρέμεται το αρνητικό περιθώριο του hero, οπότε το hero
   μετακινιόταν και άφηνε λωρίδα από κάτω μέσα από την οποία φαινόταν η επόμενη
   ενότητα. Ένα ύψος που αλλάζει είναι κινούμενος στόχος για ό,τι μετριέται
   πάνω του, και το κέρδος ήταν έντεκα pixel. */
/* Η κεφαλίδα κάθεται πάνω από το hero χωρίς να το σπρώχνει κάτω.
 *
 * Το `--topH` το γράφει η σελίδα από τη **μετρημένη** μπάρα. Υπολογισμένο σε
 * CSS από γραμματοσειρά και padding έβγαινε 70px ενώ η πραγματική ήταν 72:
 * το ύψος το ορίζει το ψηλότερο παιδί, που εδώ είναι το κουμπί με
 * `min-height: 46px`, όχι το σήμα. Δύο pixel κενό κάτω από το hero, και η
 * επόμενη ενότητα έμπαινε στο πρώτο καρέ. */
.hero { margin-top: calc(-1 * var(--topH, 72px)); }

/* Το σήμα είναι το μόνο πράγμα που κουβαλά ταυτότητα πάνω από φωτογραφία, οπότε
   έχει μέγεθος τίτλου και όχι ετικέτας. Το `GO` παίρνει το γαλάζιο του κόλπου —
   ένα χρώμα που υπάρχει στην ίδια την εικόνα, όχι δανεισμένο. */
/* Το σήμα σε μέγεθος τίτλου και όχι ετικέτας. Σκούρο, γιατί η κεφαλίδα κάθεται
   πάνω στο ξεπλυμένο λευκό της φωτογραφίας. */
.mark {
  display: inline-block;
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 600; letter-spacing: -.035em; line-height: 1;
  color: #fff;
}
.mark:hover { color: #fff; }
.mark b { font-weight: 600; color: #8FD3E8; }

.nav { display: flex; align-items: center; gap: 8px; }
.navlink {
  padding: 0 14px; min-height: 46px;
  display: inline-flex; align-items: center;
  font-weight: 600; font-size: 16px; color: #fff;
}
.navlink:hover { color: #8FD3E8; }

/* ── κουμπιά ──────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px;
  border: 1px solid transparent; border-radius: 4px;
  font: inherit; font-weight: 600; font-size: 16px;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn.solid { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.solid:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
/* Το `.ghost` ζει μόνο μέσα στη σκούρη μπάρα, οπότε έχει ένα σετ χρωμάτων. */
.btn.ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn.ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; border-color: #fff; }
.btn.plain { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.plain:hover { border-color: var(--ink); color: var(--ink); }

/* ── hero ─────────────────────────────────────────────────────────── */

/* Ακριβώς μία οθόνη, ούτε λιγότερο ούτε περισσότερο.
 *
 * Η πρώτη εκδοχή είχε `min(88vh, 780px)`: σε οθόνη 940px το πλαφόν των 780
 * κέρδιζε, οπότε έμενε λωρίδα από κάτω και η επόμενη ενότητα έμπαινε στο πρώτο
 * καρέ. Ένα πλαφόν σε ύψος hero λύνει το πρόβλημα των πολύ ψηλών οθονών και το
 * δημιουργεί σε όλες τις υπόλοιπες.
 *
 * `svh` και όχι `vh`: στο κινητό το `vh` μετρά την οθόνη **χωρίς** τη μπάρα του
 * περιηγητή, οπότε το hero βγαίνει πιο ψηλό από ό,τι φαίνεται και η σελίδα
 * αναπηδά μόλις η μπάρα κρυφτεί. Το `vh` μένει ως εφεδρεία για παλιότερους. */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--deep);
}
/* Το `z-index` δεν είναι διακοσμητικό εδώ. Το `::before` παράγεται ως **πρώτο**
   παιδί, οπότε χωρίς επίπεδα η `<img>` — που έρχεται μετά στο DOM — ζωγραφιζόταν
   από πάνω του και η σκίαση δεν φαινόταν καθόλου: λευκά γράμματα σε ασβεστωμένο
   χωριό, και κανένα σφάλμα πουθενά. */
.hero img.bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%;
}
.hero::before, .hero::after { z-index: 1; }
/* Δύο σκιάσεις σε **δύο άξονες**, όχι μία.
 *
 * Η πρώτη εκδοχή είχε μόνο κατακόρυφη βαθμίδα από κάτω, και το κείμενο έπεφτε
 * πάνω στο ασβεστωμένο χωριό: λευκά γράμματα σε λευκούς τοίχους. Το πρόβλημα
 * δεν ήταν η ένταση αλλά η **κατεύθυνση** — το φως της φωτογραφίας είναι
 * αριστερά, εκεί όπου κάθεται και το κείμενο.
 *
 * Η οριζόντια σκιάζει την αριστερή στήλη και σβήνει στο 62%, ώστε ο κόλπος να
 * μείνει άθικτος: το τιρκουαζί είναι ο λόγος που επιλέχθηκε αυτή η εικόνα, και
 * ένα ενιαίο σκούρο πέπλο θα το έκανε γκρι. */
/* **Λευκό πέπλο, όχι σκούρο.** Η προηγούμενη εκδοχή σκοτείνιαζε την αριστερή
 * πλευρά για να σηκώσει λευκά γράμματα. Δούλευε, αλλά έκανε τη φωτογραφία
 * φόντο νύχτας σε μεσημεριάτικο νησί. Με ξεπλυμένο λευκό η εικόνα κρατά το φως
 * της, το κείμενο γίνεται σκούρο πάνω σε ανοιχτό, και τα πάνελ δεξιά κάθονται
 * σε ουρανό αντί σε σκιά.
 *
 * Το σημείο θραύσης είναι το τέλος της στήλης κειμένου και όχι το μέσο της
 * εικόνας: η πρώτη ρύθμιση έσβηνε νωρίς και η δεξιά άκρη των γραμμών έπεφτε σε
 * φωτεινό χωριό, μετρημένη στο 2,26:1. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    /* Το πέπλο ήταν .97 και έσβηνε το νησί: ο δρόμος, οι στάσεις και τα σπίτια
       χάνονταν σε ομίχλη, δηλαδή σβηνόταν ακριβώς αυτό που δείχνει η εικόνα.
       Στο .80 το τοπίο διαβάζεται και το σκούρο κείμενο κρατά την αντίθεσή του,
       επειδή το κείμενο είναι σκούρο πάνω σε ανοιχτό και όχι το αντίστροφο. */
    linear-gradient(to right, rgba(248, 249, 250, .82) 0%,
                              rgba(248, 249, 250, .78) 32%,
                              rgba(248, 249, 250, .58) 46%,
                              rgba(248, 249, 250, .16) 58%,
                              rgba(248, 249, 250, 0) 68%),
    linear-gradient(to top,   rgba(248, 249, 250, .42) 0%,
                              rgba(248, 249, 250, .06) 22%,
                              rgba(248, 249, 250, 0) 40%);
}
.hero::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 140px;
  background: linear-gradient(to bottom, rgba(248, 249, 250, .8), rgba(248, 249, 250, 0));
}

/* Δύο στήλες: λόγος αριστερά, απόδειξη δεξιά. */
.hero .wrap {
  position: relative; z-index: 2; width: 100%;
  display: grid; align-items: center; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  padding-block: clamp(20px, 3.2vw, 40px);
}
.hero .col { max-width: 560px; }
.hero .lede { margin-bottom: 0; }

.hero .btn.plain { background: rgba(255, 255, 255, .78); }

/* Το `--muted` είναι φτιαγμένο για συμπαγές λευκό, όχι για φωτογραφία. Πάνω στο
   ξεπλυμένο τοπίο μετρήθηκε **1,99:1**, δηλαδή αποτυγχάνει, ενώ το ίδιο χρώμα
   περνά άνετα στις ενότητες παρακάτω. Το δευτερεύον κείμενο του hero παίρνει
   δικό του, σκουρότερο τόνο: το ίδιο token σε δύο υπόβαθρα δεν είναι το ίδιο
   πρόβλημα. */
.hero .lede, .hero .feats span { color: #1C2832; }

/* Τρία χαρακτηριστικά με εικονίδιο σε κύκλο. Το εικονίδιο δεν είναι στολίδι:
   δίνει στο μάτι σημείο προσγείωσης σε τρεις σειρές που αλλιώς διαβάζονται ως
   ένα μπλοκ κειμένου. */
/* Τα κενά είναι σφιχτά επίτηδες: με το προηγούμενο ρυθμό η στήλη ξεπερνούσε την
   οθόνη κατά 35px και το hero μεγάλωνε πέρα από τη μία οθόνη που ζητήθηκε. */
.feats { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 13px; }
.feats li { display: flex; align-items: flex-start; gap: 13px; }
.feats .ic {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--accent);
  box-shadow: 0 2px 10px -4px rgba(15, 31, 44, .3);
}
.feats .ic svg { width: 20px; height: 20px; }
.feats b { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.feats span { display: block; font-size: 15px; color: var(--muted); }

/* ── τα πάνελ ─────────────────────────────────────────────────────── */

.panes { display: grid; gap: 16px; align-content: center; }
.pane {
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(226, 223, 215, .9);
  border-radius: 10px;
  box-shadow: 0 24px 60px -30px rgba(10, 30, 45, .55);
  overflow: hidden;
  font-size: 13px;
}
.pane-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px 11px;
}
.pane-head b { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }

.chips { display: flex; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px; font-style: normal; font-size: 12px;
  background: var(--paper); color: var(--muted);
}
.chip em { font-style: normal; font-family: var(--mono); font-size: 11.5px; }
.chip.on { background: #E8F0FE; color: var(--accent-ink); }
.chip.ok { background: #E5F6ED; color: #157E57; }
.chip.off { background: #EFEDE8; color: var(--muted); }

.seg { display: inline-flex; padding: 2px; border-radius: 6px; background: var(--paper); }
.seg i {
  font-style: normal; font-size: 12px; padding: 4px 10px; border-radius: 4px;
  color: var(--muted);
}
.seg i.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15,31,44,.14); }

.pane table { width: 100%; border-collapse: collapse; }
.pane th {
  text-align: left; font-weight: 600; font-size: 11.5px; color: var(--muted);
  padding: 8px 15px; border-block: 1px solid var(--line);
  background: #FCFBF9;
}
.pane td { padding: 9px 15px; border-bottom: 1px solid rgba(226, 223, 215, .6); }
.pane tbody tr:last-child td { border-bottom: 0; }
.pane .r { text-align: right; }
.pane .m { font-family: var(--mono); font-size: 12.5px; }
.pane .dim { color: var(--muted); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; }
.dot.ok { background: #157E57; }
.dot.off { background: #C3BFB6; }
.dot.warn { background: #C97A0C; }

/* Η μπάρα ενέργειας κάτω από το ποσοστό, όχι δίπλα: το νούμερο διαβάζεται, η
   μπάρα συγκρίνεται, και σε στήλη 60px δεν χωράνε και τα δύο σε μία γραμμή. */
.pane u { display: block; height: 3px; border-radius: 2px; background: var(--line); margin-top: 4px; }
.pane u::before {
  content: ""; display: block; height: 100%; width: var(--w); border-radius: 2px;
  background: var(--accent);
}
.pane u.low::before { background: #C97A0C; }

.pane .foot {
  margin: 0; padding: 10px 15px 12px; font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--line); background: #FCFBF9;
}

@media (max-width: 1080px) {
  .hero .wrap { grid-template-columns: 1fr; align-items: end; }
  /* Σε μία στήλη ο πίνακας του στόλου θα ζητούσε μισή οθόνη για να διαβαστεί.
     Μένει το ένα πάνελ που λέει κάτι με πέντε γραμμές. */
  .panes .fleet { display: none; }
}
@media (max-width: 720px) {
  .panes { display: none; }
}

h1 {
  margin: 0 0 20px;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.06;
  letter-spacing: -.032em;
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}
/* Το «one screen» δεν σπάει στη μέση. Με `text-wrap: balance` και μόνο, η φράση
   έσπαγε ανάμεσα στο «one» και στο «screen», που είναι ακριβώς οι δύο λέξεις
   που πρέπει να διαβαστούν μαζί. */
h1 em { font-style: normal; color: var(--accent); white-space: nowrap; }

.lede {
  margin: 0 0 30px;
  max-width: 46ch;
  font-size: clamp(17px, 2vw, 20px);
  color: var(--muted);
}

.cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Η ταινία αριθμών αφαιρέθηκε μαζί με το CSS της. Τα μεγέθη ήταν της υπηρεσίας
   στην Αστυπάλαια, μετρημένα στο σύστημα που αντικαθιστούμε, και ακόμη κι έτσι
   δηλωμένα διαβάζονταν σαν δικές μας επιδόσεις. Νεκρός κανόνας σε φύλλο στυλ
   είναι κώδικας που κάποιος θα προσπαθήσει να συντηρήσει. */

/* ── ενότητες πάνω στη γραμμή διαδρομής ───────────────────────────── */

section { padding-block: clamp(56px, 8vw, 104px); }

/* Η υπογραφή της σελίδας: μια λεπτή γραμμή διαδρομής με στάσεις, ίδια με τις
   γραμμές πάνω στη φωτογραφία. Δεν είναι διακόσμηση — είναι το σχήμα του
   προϊόντος: διαδρομή με στάσεις. Αριθμημένοι δείκτες θα ήταν το γενικό. */
.route { position: relative; }
.route .wrap { position: relative; }
.route .wrap::before {
  content: ""; position: absolute;
  left: calc(var(--gutter) - 21px); top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(var(--accent), rgba(31, 95, 224, .12));
}
.stop { position: relative; }
.stop::before {
  content: ""; position: absolute;
  left: -26px; top: 11px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--accent);
}
.stop.last::before { background: var(--accent); }

h2 {
  margin: 0 0 12px;
  font-size: clamp(27px, 3.6vw, 38px);
  line-height: 1.15; letter-spacing: -.025em; font-weight: 600;
  text-wrap: balance;
}
.sub { margin: 0 0 40px; max-width: 56ch; color: var(--muted); font-size: 18px; }

.cards {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
/* Τέσσερις κάρτες σε πλέγμα τριών σπάνε 3+1, που διαβάζεται σαν κάτι ξέχασε τη
   θέση του. Δύο επί δύο είναι ισορροπημένο και αφήνει τις παραγράφους να
   αναπνεύσουν. */
@media (min-width: 900px) {
  .cards.four { grid-template-columns: repeat(2, 1fr); }
}
.card {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 24px 22px 26px;
}
.card h3 {
  margin: 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -.01em;
}
.card p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.card .tag {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sea);
}

/* ── στιγμιότυπα ──────────────────────────────────────────────────── */

.shots { display: grid; gap: 30px; }
figure { margin: 0; }
/* Πλαίσιο παραθύρου: τρεις κουκκίδες και μια μπάρα. Το στιγμιότυπο μόνο του
   πλέει· το πλαίσιο λέει «αυτό είναι λογισμικό» χωρίς λεζάντα. */
.frame {
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: var(--surface);
  box-shadow: 0 18px 40px -22px rgba(15, 31, 44, .35);
}
.frame .chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: #FAF9F6;
}
.frame .chrome i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--line); flex: none;
}
.frame .chrome span {
  margin-left: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.frame img { width: 100%; }
figcaption {
  margin-top: 12px; font-size: 15px; color: var(--muted); max-width: 62ch;
}

/* ── κλείσιμο ─────────────────────────────────────────────────────── */

.close {
  background: var(--deep);
  background-image: linear-gradient(160deg, var(--sea), var(--deep) 62%);
  color: #fff;
}
.close h2 { color: #fff; max-width: 18ch; }
.close .sub { color: rgba(255, 255, 255, .82); }
.close .btn.plain { color: #fff; border-color: rgba(255, 255, 255, .55); }
.close .btn.plain:hover { border-color: #fff; color: #fff; }

footer {
  padding-block: 36px;
  border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--muted);
}
footer .wrap {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  align-items: center;
}
footer .mark {
  color: var(--ink); text-shadow: none; font-size: 28px;
}
footer .mark:hover { color: var(--ink); }
footer .mark b { color: var(--sea); }
footer .tagline { margin: 0; }
/* Οι σύνδεσμοι στην άλλη άκρη: το σήμα και η περιγραφή είναι ταυτότητα, οι
   σύνδεσμοι είναι ενέργεια, και δεν διαβάζονται ως συνέχεια της πρότασης. */
.foot { margin-left: auto; display: flex; flex-wrap: wrap; gap: 18px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--ink); }

/* ── στενές οθόνες ────────────────────────────────────────────────── */

.route.alt { background: var(--surface); border-block: 1px solid var(--line); }

@media (max-width: 860px) {
  /* Σε στενή οθόνη η μπάρα κρατά μόνο τη μία ενέργεια που μετράει. Το «Log in»
     και το «Create account» υπάρχουν και τα δύο στο υποσέλιδο, οπότε δεν
     χάνονται· απλώς δεν στριμώχνονται τρία κουμπιά σε 360 pixel. */
  .navlink, .nav .btn.ghost { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .top { background: var(--ink); }
  body.scrolled .top { background: var(--ink); }
  .mark { text-shadow: none; }
  /* Στο κινητό η κεφαλίδα είναι συμπαγής και μένει στη ροή, οπότε το hero
     παίρνει ό,τι απομένει από την οθόνη αντί για ολόκληρη. */
  .hero { margin-top: 0; min-height: calc(100svh - 78px); padding-top: 160px; }
  .top .btn { min-height: 42px; padding: 0 16px; font-size: 15px; }
  .foot { margin-left: 0; }
  /* Η γραμμή διαδρομής φεύγει στα στενά: σε μία στήλη οι στάσεις πέφτουν
     πάνω στο κείμενο και η μεταφορά γίνεται εμπόδιο. */
  .route .wrap::before { display: none; }
  .stop::before { display: none; }
}