/* ═══════════════════════════════════════════════════════════════════════
   OfferGO — κοινό φύλλο στυλ για info.html, shop.html, partner.html

   Υπήρχε λόγος που δεν υπήρχε: κάθε σελίδα είχε δικό της <style> και το
   masthead ήταν αντιγραμμένο τρεις φορές. Το ίδιο το info.html το
   παραδεχόταν σε σχόλιο — «IDENTICAL on shop.html and partner.html» — που
   είναι τεκμηρίωση ενός προβλήματος αντί για λύση του. Κάθε οπτική αλλαγή
   γινόταν τρεις φορές, και η πρώτη βιασύνη θα τις έκανε τρεις διαφορετικές
   σελίδες.

   Εδώ μέσα είναι ΜΟΝΟ ό,τι είναι κοινό σε τουλάχιστον δύο σελίδες. Τα
   μοναδικά μπλοκ (QR, τιμοκατάλογος, πλεονεκτήματα) μένουν inline στη
   σελίδα τους, γιατί ένα κοινό αρχείο με κανόνες που χρησιμοποιεί ένας
   μόνο είναι πάλι τρία αρχεία, απλώς σε ένα.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0A0E1A;
  --card: #111927;
  --line: rgba(255, 255, 255, 0.09);
  --cyan: #00D4FF;
  --gold: #FFD700;
  --warm-a: #FF9F00;
  --warm-b: #FF2A85;
  --text: #FFFFFF;
  --muted: #94A3B8;
  /* Οι αποχρώσεις του τόνου. Δηλώνονται εδώ επειδή η ανοιχτή ζώνη πρέπει να
     τις αντιστρέψει: rgba(0,212,255,0.12) πάνω σε λευκό δεν είναι «αχνό
     κυανό», είναι λευκό. */
  --tint:      rgba(0, 212, 255, 0.12);
  --tint-soft: rgba(0, 212, 255, 0.05);
  --tint-line: rgba(0, 212, 255, 0.42);
  --gold-tint: rgba(255, 215, 0, 0.07);
  --gold-line: rgba(255, 215, 0, 0.30);
  /* Το ξεθωριασμένο γκρι των αρνήσεων. Δεν είναι το --muted: επιλέχθηκε
     επίτηδες ΠΙΟ αχνό (μόλις πάνω από το κατώφλι), ώστε οι διαγραμμένες
     λέξεις να μη διεκδικούν την ίδια προσοχή με το κείμενο δίπλα τους. */
  --dim:      rgba(148, 163, 184, 0.78);
  --dim-line: rgba(148, 163, 184, 0.60);

  /* Κλίμακα τυπογραφίας.
     Πριν: h2 στα 24px, δήλωση ήρωα στα 19. Πέντε pixel διαφορά ανάμεσα σε
     «τίτλος» και «κείμενο» σημαίνει ότι τίποτα δεν δηλώνεται — όλα
     ψιθυρίζουν στην ίδια ένταση, και αυτό ήταν το βασικό που έκανε τη
     σελίδα να δείχνει παλιά.

     Το clamp() δένει το μέγεθος στο πλάτος της οθόνης: το μεσαίο όρισμα
     κλιμακώνει, τα άλλα δύο βάζουν πάτωμα και ταβάνι. Γι' αυτό δεν υπάρχει
     καμία media query για μεγέθη γραμματοσειράς σε όλο το αρχείο. */
  --t-hero: clamp(34px, 7.2vw, 64px);
  --t-h2:   clamp(26px, 3.4vw, 38px);
  --t-lead: clamp(16px, 1.5vw, 19px);
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6; -webkit-font-smoothing: antialiased;
  /* Το στρώμα φωτός είναι φαρδύτερο από την οθόνη ώστε να μπορεί να
     μετακινηθεί. Χωρίς αυτό, θα γεννούσε οριζόντιο scrollbar. */
  overflow-x: hidden;
}

a { color: var(--cyan); }
p { margin: 0 0 12px; }
h1 { font-size: var(--t-hero); line-height: 1.03; letter-spacing: -0.035em; font-weight: 900; margin: 0; }
h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.025em; font-weight: 900; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 0 0 5px; }
.lead { font-size: var(--t-lead); }
.muted { color: var(--muted); }
.kicker {
  color: var(--cyan); font-size: 12px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase; margin: 0 0 10px;
}

/* Τρία πλάτη, όχι ένα.
   Πριν, κάθε ενότητα ήταν 940px με 40px κενό και μια γραμμή ανάμεσα: ίδιο
   βάρος παντού σημαίνει ότι τίποτα δεν είναι σημαντικότερο από τίποτα. Το
   κείμενο θέλει στενό μέτρο για να διαβάζεται, οι εικόνες θέλουν αέρα. */
.wrap        { max-width: 940px;  margin: 0 auto; padding: 0 20px; }
.wrap-wide   { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 660px;  margin: 0 auto; padding: 0 20px; }

/* ── Φως περιβάλλοντος ────────────────────────────────────────────────────
   Πριν ήταν ένα σκέτο #0A0E1A από πάνω ως κάτω. Επίπεδο χρώμα σε σκούρη
   σελίδα διαβάζεται σαν φόντο εγγράφου, όχι σαν χώρος.

   Τρεις λάμψεις πίσω από τα πάντα: θερμή αριστερά που αντηχεί το «GO»,
   κυανή δεξιά, ροζ στον πάτο. `fixed`, οπότε το περιεχόμενο περνάει
   μπροστά τους. */
.ambient {
  position: fixed; inset: -25vh -10vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58vw 46vw at 12% 12%, rgba(255, 159, 0, 0.17), transparent 62%),
    radial-gradient(52vw 44vw at 92% 30%, rgba(0, 212, 255, 0.14), transparent 60%),
    radial-gradient(70vw 50vw at 50% 92%, rgba(255, 42, 133, 0.10), transparent 64%);
  will-change: transform;
}

/* Και εδώ το φως ΟΝΤΩΣ κινείται.
   Το `scroll()` δένει την animation στη θέση της σελίδας, όχι στον χρόνο:
   κορυφή 0%, πάτος 100%, και γυρίζει πίσω αν κάνεις scroll πάνω. Δεν είναι
   animation που «παίζει» — είναι φως δεμένο στη θέση.

   Αυτό, και όχι το parallax με στρώματα, είναι που κάνει μια σκούρη σελίδα
   να δείχνει ότι έχει πηγή φωτός. Μηδέν JavaScript, μηδέν listener.

   Το `inset` παραπάνω είναι μεγαλύτερο από την οθόνη γι' αυτόν ακριβώς τον
   λόγο: το στρώμα πρέπει να μπορεί να μετακινηθεί χωρίς να ξεμυτίσει η
   άκρη του. Στο τέλος της διαδρομής καλύπτει ακόμα όλο το κάδρο. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .ambient {
      animation: ambient-drift linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes ambient-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3vw, -16vh, 0) scale(1.16); }
}

/* ── Είσοδος με το scroll ─────────────────────────────────────────────────
   Το «φτάνει το περιεχόμενο» αντί για parallax. Το `view()` δένει την
   animation στη θέση του στοιχείου μέσα στο κάδρο.

   Το @supports είναι το σημαντικό κομμάτι, όχι διακοσμητικό: όπου δεν
   υποστηρίζεται, ο κανόνας δεν εφαρμόζεται ΚΑΘΟΛΟΥ και το στοιχείο είναι
   απλώς ορατό. Δεν υπάρχει περίπτωση να μείνει κάτι αόρατο επειδή ο
   browser είναι παλιός — που είναι ακριβώς ο τρόπος που σπάνε οι
   υλοποιήσεις με IntersectionObserver: βάζουν opacity:0 πρώτα και
   βασίζονται σε JavaScript για να το αφαιρέσει. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise {
      animation: rise-in linear both;
      animation-timeline: view();
      /* Τελειώνει στο 42%, δηλαδή ΠΡΙΝ φτάσει στο κέντρο: αλλιώς ο
         αναγνώστης διαβάζει κάτι που ακόμα κουνιέται. */
      animation-range: entry 15% cover 42%;
    }
  }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ── Masthead ─────────────────────────────────────────────────────────────
   Ίδιο και στις τρεις σελίδες — τώρα κυριολεκτικά, όχι κατά σύμπτωση.
   Σελίδες που ανοίγουν με διαφορετικό chrome διαβάζονται σαν διαφορετικά
   site, που ήταν το πρόβλημα πριν το ενοποιήσουμε. */
/* ── Γυαλί και λάμψη ──────────────────────────────────────────────────────
   Το backdrop-filter ξεχωρίζει μια σύγχρονη επιφάνεια από ένα σκέτο σκούρο
   κουτί: το φόντο ΠΕΡΝΑΕΙ θολωμένο από μέσα, οπότε η κάρτα δείχνει να
   κάθεται πάνω από φως αντί να το κρύβει. Έχει νόημα εδώ ακριβώς επειδή
   από κάτω κινείται το .ambient μαζί με το scroll.

   Το @supports δεν είναι τυπικότητα: όπου δεν υποστηρίζεται, το ημιδιαφανές
   φόντο από μόνο του δίνει γκρίζα, ξεπλυμένη κάρτα — εκεί μένει συμπαγές. */
/* Οι τρεις κοινές επιφάνειες μπαίνουν ΜΕΣΑ στον ίδιο επιλογέα, δεν
   αντιγράφουν τις τιμές: τα βήματα, οι ερωτήσεις και τα στοιχεία επικοινωνίας
   υπάρχουν και στις τρεις σελίδες.

   Χωρίς αυτό, η info είχε γυαλί και οι δύο σελίδες που διαβάζει ο ΜΑΓΑΖΑΤΟΡΑΣ
   έμεναν σε επίπεδο var(--card) — μετρήθηκε: μηδέν χρήσεις glass σε shop και
   partner. Δηλαδή η σελίδα του πελάτη δείχνει καινούρια και η σελίδα που
   πουλάει δείχνει παλιά, που είναι ακριβώς ανάποδα από ό,τι χρειάζεται. */
.glass, .step, details, .contact div {
  background: rgba(22, 28, 40, 0.72); border: 1px solid rgba(255, 255, 255, 0.08);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass, .step, details, .contact div {
    -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px);
  }
}
.glow-cyan { box-shadow: 0 0 54px -12px rgba(0, 212, 255, 0.28); }
.glow-warm { box-shadow: 0 0 54px -12px rgba(255, 159, 0, 0.26); }

/* Η μπάρα κορυφής: λογότυπο αριστερά, καρτέλες στη μέση, ενέργεια δεξιά.
   Ήταν τρεις κεντραρισμένες σειρές — λογότυπο, tagline, καρτέλες — που
   έτρωγαν 250px ύψους πριν ειπωθεί οτιδήποτε, και άφηναν όλη τη φαρδιά
   κορυφή άδεια. Σε φαρδιά οθόνη αυτό δεν διαβάζεται σαν προϊόν, διαβάζεται
   σαν έγγραφο.

   Κάτω από 900px επιστρέφει ακριβώς στη στοιβαγμένη μορφή που είχε: στο
   κινητό μια οριζόντια μπάρα τριών μερών ή στριμώχνεται ή τυλίγεται, και
   τα δύο είναι χειρότερα από το να κεντραριστεί. */
/* ΠΛΕΓΜΑ ΚΑΙ ΟΧΙ space-between, ΚΑΙ Ο ΛΟΓΟΣ ΕΙΝΑΙ ΑΡΙΘΜΗΤΙΚΟΣ: η μπάρα είχε
   τρία παιδιά (λογότυπο, tabs, κουμπί) και το space-between έβγαζε τα tabs στη
   μέση από μόνο του. Με δύο παιδιά το ίδιο κανόνας τα πετάει στη δεξιά άκρη.
   Το `1fr auto 1fr` κρατάει τα tabs στο ΠΡΑΓΜΑΤΙΚΟ κέντρο ανεξάρτητα από το
   πόσα παιδιά υπάρχουν — η τρίτη στήλη μένει άδεια και ισορροπεί την πρώτη. */
.topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 18px; padding: 22px 0 8px;
}
.topbar .lockup { justify-self: start; }
.topbar .tabs { margin-top: 0; }

/* ΤΟ ΚΟΥΜΠΙ ΤΗΣ ΜΠΑΡΑΣ ΑΦΑΙΡΕΘΗΚΕ, ΚΑΙ ΔΕΝ ΞΑΝΑΜΠΑΙΝΕΙ ΧΩΡΙΣ ΑΠΟΦΑΣΗ.
   Ήταν «Άνοιξέ το τώρα» πάνω δεξιά, σε ΚΑΘΕ σελίδα. Τρεις λόγοι που έφυγε:

   1. Η μπάρα ΔΕΝ είναι κολλημένη — φεύγει με το scroll. Άρα το κουμπί
      φαινόταν μόνο στην πρώτη οθόνη, εκεί ακριβώς που υπάρχει ήδη το κουμπί
      του hero, μεγαλύτερο και με κείμενο γύρω του που εξηγεί τι πατάς.
   2. Σε shop και partner ΑΡΑΙΩΝΕ το μήνυμα: δίπλα στα «Κάνε αίτηση μέσα στην
      εφαρμογή» και «Βρες τον κωδικό σου», ένα γενικό «Άνοιξέ το τώρα» δεν
      πρόσθετε επιλογή — πρόσθετε τρίτο κουμπί προς τον ίδιο προορισμό.
   3. Ήταν ήδη κρυμμένο κάτω από 900px. Το κρύψιμο δικαιολογούνταν με σχόλιο
      «υπάρχει μεγάλο μέσα στο hero», που ίσχυε για τρεις σελίδες και ΠΟΤΕ για
      την info.html — και κόστισε: η σελίδα υποδοχής έμεινε χωρίς κανένα
      κουμπί στο κινητό. Χωρίς το κουμπί, οι δύο διατάξεις είναι ίδιες και δεν
      υπάρχει σημείο να αποκλίνουν.

   Αν ποτέ χρειαστεί μόνιμο σημείο εισόδου, το σωστό δεν είναι αυτό το κουμπί
   αλλά ΚΟΛΛΗΤΗ μπάρα — άλλη απόφαση, με δικό της κόστος σε ύψος στο κινητό. */

@media (max-width: 900px) {
  .topbar {
    display: flex; flex-direction: column; justify-content: center;
    gap: 14px; padding: 34px 0 0;
  }
}

header, .masthead { padding: 40px 0 0; text-align: center; }
.lockup { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: var(--text); }
.lockup img { width: 46px; height: 46px; border-radius: 12px; display: block; }
.wordmark { font-size: 29px; font-weight: 900; letter-spacing: -0.8px; line-height: 1; }
.wordmark .go {
  background: linear-gradient(135deg, var(--warm-a), var(--warm-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline {
  color: var(--muted); font-size: 12px; font-weight: 800;
  letter-spacing: 2.4px; text-transform: uppercase; margin: 0 0 20px;
}
.promise { font-size: var(--t-lead); color: var(--muted); max-width: 46ch; margin: 22px auto 0; }

/* Τρία κοινά, τρία pill. Το κείμενο μικραίνει αντί να τυλίγεται ο έλεγχος:
   ένα segmented control σε δύο γραμμές παύει να διαβάζεται σαν ένα πράγμα. */
.tabs {
  display: inline-flex; gap: 4px; margin-top: 20px; padding: 4px;
  border-radius: 14px; background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
}
.tabs a {
  padding: 9px 16px; border-radius: 10px; text-decoration: none;
  color: var(--muted); font-size: 14px; font-weight: 700; white-space: nowrap;
}
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] {
  background: rgba(0, 212, 255, 0.13); color: var(--cyan);
  box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.4);
}
/* Το τρίτο pill δεν είναι «η σελίδα σου»: είναι πρόσκληση σε κάποιον που δεν
   έχει επιχείρηση και δεν ψάχνει τίποτα — αυτός δεν πατάει ό,τι δεν του
   φωνάξει. Παίρνει το θερμό χρώμα της μάρκας (το ίδιο με το GO του λογότυπου)
   και μια ήσυχη λάμψη, ώστε να ξεχωρίζει χωρίς να γίνει δεύτερο κουμπί δίπλα
   στο «Άνοιξέ το τώρα».
   Η λάμψη μπαίνει ΜΟΝΟ όταν δεν είναι η τρέχουσα σελίδα: μέσα στο partner.html
   το «είσαι εδώ» είναι πιο χρήσιμο από την πρόσκληση, και δύο τονισμένα pill
   στην ίδια μπάρα δεν τονίζουν κανένα. */
.tabs a.spark:not([aria-current="page"]) {
  color: var(--warm-a);
  background: rgba(255, 159, 0, 0.10);
  box-shadow: inset 0 0 0 1px rgba(255, 159, 0, 0.32), 0 0 15px rgba(255, 106, 0, 0.14);
}
.tabs a.spark:not([aria-current="page"]):hover {
  color: #FFBB55; background: rgba(255, 159, 0, 0.17);
  box-shadow: inset 0 0 0 1px rgba(255, 159, 0, 0.52), 0 0 22px rgba(255, 106, 0, 0.30);
  animation: none;
}
@media (prefers-reduced-motion: no-preference) {
  .tabs a.spark:not([aria-current="page"]) { animation: sparkPulse 3.8s ease-in-out infinite; }
  @keyframes sparkPulse {
    50% { box-shadow: inset 0 0 0 1px rgba(255, 159, 0, 0.46), 0 0 24px rgba(255, 106, 0, 0.30); }
  }
}
.tabs a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Η δεύτερη λέξη του τρίτου pill φεύγει πριν η μπάρα αγγίξει τις άκρες: με
   το «Πρότεινε επιχείρηση» ολόκληρο τα τρία pill θέλουν 458px, περισσότερα
   απ' όσα δίνει η στήλη κάτω από τα 520 — και στα 320 έβγαζαν οριζόντιο
   scroll. Μένει το ρήμα, που είναι και η πράξη. */
@media (max-width: 520px) { .tab-cut { display: none; } }
@media (max-width: 430px) {
  .tabs { gap: 2px; padding: 3px; }
  .tabs a { padding: 8px 10px; font-size: 12.5px; }
}
/* 320px — το στενότερο τηλέφωνο που κυκλοφορεί ακόμα. Χωρίς αυτό η μπάρα
   είναι 289px σε κουτί 280px: χωράει στην οθόνη αλλά τρώει το περιθώριο. */
@media (max-width: 360px) {
  .tabs a { padding: 8px 6px; font-size: 11.5px; }
}

/* ── Κουμπιά ──────────────────────────────────────────────────────────── */
.cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.btn {
  display: inline-block; padding: 14px 24px; border-radius: 14px;
  font-weight: 700; text-decoration: none; font-size: 15px;
  border: 1.4px solid var(--cyan);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-primary { background: rgba(0, 212, 255, 0.12); color: var(--cyan); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.22); color: var(--text); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 212, 255, 0.16); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ── Τα stores, κρατημένη θέση ────────────────────────────────────────────
   Οι δύο εφαρμογές δεν έχουν δημοσιευτεί ακόμα. Η θέση τους όμως κρατιέται
   από τώρα, ώστε η μέρα που θα βγουν να είναι αλλαγή δύο href και τίποτα
   άλλο — όχι νέα ενότητα, νέο στυλ και νέα διάταξη υπό πίεση.

   Ο διακόπτης είναι ΕΝΑΣ: το data-status στο δοχείο.
     data-status="soon"  → γκρι, ανενεργά, με τη λεζάντα «σύντομα»
     (χωρίς attribute)   → κανονικοί σύνδεσμοι

   Το pointer-events: none είναι που τα κάνει πραγματικά ανενεργά, χωρίς
   γραμμή JavaScript: ένα <a> που απλώς ΔΕΙΧΝΕΙ σβηστό εξακολουθεί να
   πατιέται, και ένα κουμπί που πάει σε 404 είναι χειρότερο από κουμπί που
   δηλώνει ότι δεν ήρθε η ώρα του. Το aria-disabled λέει το ίδιο σε όποιον
   ακούει τη σελίδα αντί να τη βλέπει. */
.stores { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.store {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 10px 18px; border-radius: 12px; text-decoration: none;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
  color: var(--text); line-height: 1.25;
}
.store small { font-size: 10.5px; color: var(--muted); letter-spacing: 0.6px; text-transform: uppercase; }
.store b { font-size: 15px; font-weight: 800; }
.store:hover { border-color: rgba(255, 255, 255, 0.24); }
.store:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.stores[data-status="soon"] .store { opacity: 0.42; pointer-events: none; }
.stores-note { text-align: center; font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.stores:not([data-status="soon"]) + .stores-note { display: none; }

/* ── Λωρίδα εμπιστοσύνης ──────────────────────────────────────────────────
   Στη θέση όπου τα περισσότερα site βάζουν μετρητές («10.000+ χρήστες»).
   Εδώ δεν μπαίνουν νούμερα: το OfferGO ξεκινάει, τα νούμερα θα ήταν
   επινοημένα, και ο επισκέπτης τα διαψεύδει σε δέκα δευτερόλεπτα ανοίγοντας
   τον χάρτη — που πλέον ανοίγει και χωρίς λογαριασμό.

   Αυτά εδώ είναι αληθινά σήμερα, και για τοπικό προϊόν πείθουν περισσότερο
   από μέγεθος που δεν υπάρχει. Όταν υπάρξουν πραγματικοί αριθμοί, μπαίνουν
   εδώ με την ίδια δομή. */
.trust { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: 26px; }
.trust span { color: var(--muted); font-size: 13.5px; }
.trust span::before { content: "✓ "; color: var(--cyan); font-weight: 900; }

/* ── Ζώνη επιχειρηματία ────────────────────────────────────────────────────
   Φωτογραφία αριστερά, επιχείρημα δεξιά. Στο κινητό η εικόνα πάει από πάνω
   και το κείμενο από κάτω — ένα grid, καμία media query για τα μεγέθη. */
.band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px; align-items: center; margin-top: 26px;
}
/* Η εικόνα της ζώνης είναι το ίδιο .frame των shots — όχι στοκ φωτογραφία
   βιτρίνας. Ο επιχειρηματίας ρωτάει «τι θα κάνω εγώ», και η απάντηση είναι η
   οθόνη που θα βλέπει, όχι ένα κατάστημα που δεν είναι το δικό του.
   Δεσμευμένο πλάτος ώστε να μη γίνει το τηλέφωνο ήρωας της ενότητας. */
.band .frame { max-width: 250px; margin: 0 auto; }
.ticks { list-style: none; margin: 16px 0 0; padding: 0; }
.ticks li { color: var(--muted); font-size: 14.5px; padding: 5px 0 5px 24px; position: relative; }
.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 5px;
  color: var(--cyan); font-weight: 900;
}

/* Το hero της αρχικής: κείμενο αριστερά, το κινητό δεξιά. Ίδιο μοτίβο με
   το .hero-split, αλλά χωρίς τη δεξιά κολόνα — η αρχική δεν χρειάζεται
   διακόπτη κοινού, γιατί οι τρεις πόρτες από κάτω ΕΙΝΑΙ ο διακόπτης. */
@media (min-width: 1024px) {
  .home-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    gap: 56px; align-items: center; text-align: left;
  }
  .home-hero .promise { margin-left: 0; margin-right: 0; }
  .home-hero .trust { justify-content: flex-start; }
}

/* ── Ενότητες ─────────────────────────────────────────────────────────────
   Καμία γραμμή ανάμεσά τους. Το `border-top` έκοβε τη σελίδα σε ίσες
   φέτες· εδώ τις χωρίζει το κενό, που δεν τραβάει το μάτι πάνω του.

   ΤΟ ΚΕΝΟ ΗΤΑΝ 76px ΚΑΙ ΜΕΤΡΗΘΗΚΕ ΟΤΙ ΚΟΣΤΙΖΕ. Δύο διαδοχικές ενότητες
   απείχαν 76+76 = 152px, και με μερικά επιπλέον περιθώρια έφτανε τα 253.
   Σε ολόκληρες σελίδες: shop.html 1.423px κενού σε 5.699 — το 25% της
   σελίδας ήταν αέρας, δηλαδή μία στις τέσσερις οθόνες scroll δεν είχε
   τίποτα. customer 19%, partner 17%, info 15%.

   Τώρα κλιμακώνεται με το πλάτος αντί να είναι σταθερό: στο κινητό, όπου
   το scroll κοστίζει περισσότερο και το μάτι έχει μικρότερη απόσταση να
   διανύσει, πέφτει στα 40· σε φαρδιά οθόνη ανεβαίνει ως 60. Το κενό
   εξακολουθεί να χωρίζει — απλώς δεν χωρίζει με κοιλάδα. */
section { padding: clamp(30px, 3.2vw, 46px) 0; }

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

   ΟΙ ΜΕΤΑΒΛΗΤΕΣ ΞΑΝΑΟΡΙΖΟΝΤΑΙ, ΔΕΝ ΓΡΑΦΟΝΤΑΙ ΝΕΟΙ ΚΑΝΟΝΕΣ. Κάθε στοιχείο
   της σελίδας διαβάζει ήδη --text/--muted/--line/--card· αλλάζοντάς τα
   εδώ, όλα τα παιδιά προσαρμόζονται μόνα τους. Ένα δεύτερο σύνολο κανόνων
   ανά στοιχείο θα απέκλινε από το πρώτο μέσα σε μια εβδομάδα.

   ΤΟ ΚΥΑΝΟ ΑΛΛΑΖΕΙ, ΚΑΙ ΕΙΝΑΙ ΥΠΟΧΡΕΩΤΙΚΟ. Το #00D4FF πάνω σε λευκό
   μετριέται 1,88:1 — κάτω από κάθε κατώφλι, ουσιαστικά αόρατο. Το #0369A1
   δίνει 5,7:1 στο ίδιο φόντο. Το ίδιο ισχύει για το χρυσό, που πάνω σε
   ανοιχτό εξαφανίζεται τελείως. */
section.light {
  /* ΓΙΑΤΙ ΕΦΥΓΕ ΤΟ #F4F6FA: σχετική φωτεινότητα 0,92 από το 1,00. Ήταν λευκό
     με τρία ψίγματα μπλε — το μάτι δεν το διάβαζε ως «άλλη επιφάνεια» αλλά ως
     ΤΡΥΠΑ: εκεί που τελειώνει το OfferGO και αρχίζει ένα άσπρο έγγραφο.

     Η ΠΕΤΡΑ #D2DBEA έχει φωτεινότητα 0,70. Απέναντι στο παλιό λευκό μετριέται
     1,29:1 — δηλαδή μετρήσιμα ΑΛΛΗ επιφάνεια, όχι «λίγο πιο γκρι». Και μένει
     ΑΝΟΙΧΤΗ (0,70 έναντι 0,007 του #0A0E1A), άρα ο ρυθμός σκούρο→ανοιχτό δεν
     χάνει τίποτα. Ψυχρή οικογένεια, ίδια με το navy και το κυανό του app.

     ΤΟ ΤΙΜΗΜΑ, ΚΑΙ ΠΛΗΡΩΘΗΚΕ: κατεβάζοντας το φόντο κατά 0,22 φωτεινότητας,
     ΚΑΘΕ τόνος έπρεπε να ξανασκουρύνει. Το παλιό #0369A1 έπεφτε σε 4,26:1 και
     ο χρυσός #92610A σε 3,83:1 — δηλαδή η προηγούμενη παλέτα ΔΕΝ περνάει πάνω
     στην πέτρα. Οι τιμές παρακάτω είναι ξαναμετρημένες, και επαληθεύτηκαν
     ΣΤΟΝ BROWSER πάνω στα πραγματικά στοιχεία, όχι μόνο με αριθμητική. */
  --bg:        #D2DBEA;
  --card:      #E7EDF6;
  --line:      rgba(15, 23, 42, 0.20);
  --text:      #0B1220;
  --muted:     #3E4C5F;
  --cyan:      #075985;
  --gold:      #7C5106;
  --warm-a:    #9A3412;
  --warm-b:    #9F1239;
  /* Οι alpha ΧΑΜΗΛΩΣΑΝ. Πάνω σε πέτρα η απόχρωση ΣΚΟΥΡΑΙΝΕΙ το φόντο αντί να
     το χρωματίζει: στο 0,08 ο χρυσός πάνω στο χρυσό tint έβγαινε 4,33:1. */
  --tint:      rgba(7, 89, 133, 0.10);
  --tint-soft: rgba(7, 89, 133, 0.05);
  --tint-line: rgba(7, 89, 133, 0.46);
  --gold-tint: rgba(124, 81, 6, 0.06);
  --gold-line: rgba(124, 81, 6, 0.42);
  --dim:       #515D6C;
  --dim-line:  rgba(81, 93, 108, 0.60);

  /* ── ΓΙΑΤΙ ΤΟ ΧΡΩΜΑ ΔΕΝ ΜΠΑΙΝΕΙ ΕΔΩ ΑΛΛΑ ΣΕ ::before ───────────────────
     Ο πειρασμός είναι margin-inline: 24px με border-radius: 28px. ΣΠΑΕΙ ΤΗ
     ΣΤΟΙΧΙΣΗ: η ενότητα κάθεται μέσα σε .wrap (940px) ή .wrap-wide (1180px),
     και οριζόντιο margin ή padding στενεύει το κουτί της. Το κείμενο της
     ανοιχτής ζώνης θα ξεκινούσε 24px δεξιότερα από το κείμενο των σκούρων —
     οι τίτλοι θα έπαυαν να στοιχίζονται κάθετα, και αυτό φαίνεται ως λάθος.

     Το ::before είναι absolute, δηλαδή ΕΚΤΟΣ ΡΟΗΣ: αλλάζει ΜΠΟΓΙΑ, ποτέ
     ΔΙΑΤΑΞΗ. Το κουτί της ενότητας μένει bit-for-bit ίδιο με των σκούρων σε
     κάθε πλάτος. Η στοίχιση δεν «διορθώνεται» — δεν χαλάει ποτέ. */
  position: relative;
  z-index: 1;                 /* πάνω από το .ambient, που είναι στο -1 */
  background: transparent;    /* το χρώμα το ζωγραφίζει το ::before */
  color: var(--text);
  padding-block: clamp(34px, 3.6vw, 52px);   /* > ακτίνα: η καμπύλη να μη δαγκώνει λέξη */
  margin-block:  clamp(10px, 1.2vw, 18px);   /* ΚΑΘΕΤΟ μόνο — καμία οριζόντια διάσταση */

  /* Πόσο ξεχειλίζει η πέτρα ΕΞΩ από το κουτί του κειμένου. Το πάτωμα των 20px
     δεν είναι γούστο: είναι ακριβώς το padding του .wrap, οπότε σε στενή οθόνη
     η πέτρα φτάνει ΑΚΡΙΒΩΣ στην άκρη — ούτε σχισμή, ούτε οριζόντιο scroll. */
  --paper-x: clamp(20px, 2.2vw, 34px);
  --paper-r: clamp(18px, 2vw, 28px);
}
section.light::before {
  /* ΤΟ content ΕΙΝΑΙ ΦΕΡΩΝ. Χωρίς έγκυρη τιμή το ψευδοστοιχείο δεν παράγει
     ΚΑΝΕΝΑ κουτί — και τότε το getComputedStyle εξακολουθεί να επιστρέφει
     background και border-radius κανονικά. Δηλαδή ο κανόνας «υπάρχει» και
     δεν ζωγραφίζεται τίποτα. Ακριβώς αυτό συνέβη: η πλάκα έλειπε τελείως
     και έμεναν σκούρα γράμματα πάνω στο σκούρο. */
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0;
  left: calc(-1 * var(--paper-x)); right: calc(-1 * var(--paper-x));
  background: var(--bg);
  border-radius: var(--paper-r);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),   /* φωτισμένη ακμή: η πλάκα πιάνει φως */
    0 16px 40px -28px rgba(3, 10, 26, 0.75);   /* κάθεται πάνω στο σκούρο, δεν είναι κολλημένη */
}
/* Η πέτρα είναι μια μεγάλη πλάκα μελάνι στον εκτυπωτή. */
@media print { section.light::before { display: none; } }
section.light .muted { color: var(--muted); }
.hero { padding: 68px 0 76px; text-align: center; }
.hero h1 { margin: 0 auto; max-width: 15ch; }

/* ── Hero σε δύο στήλες ───────────────────────────────────────────────────
   Το κεντραρισμένο hero δείχνει λεπτό σε φαρδιά οθόνη όσο φαρδύ κι αν
   γίνει το δοχείο: το μάτι δεν έχει τίποτα να πιάσει δεξιά και αριστερά.
   Δεν το λύνει το πλάτος, το λύνει η ασυμμετρία — κείμενο αριστερά, ένα
   πράγμα να κοιτάξεις δεξιά.

   Και κερδίζει κάτι πιο πρακτικό από αισθητική: πριν, το πρώτο στιγμιότυπο
   της εφαρμογής εμφανιζόταν μετά από δύο οθόνες scroll. Τώρα το τηλέφωνο
   είναι δίπλα στον τίτλο, στην πρώτη ματιά.

   Ενεργό μόνο από 1024px και πάνω. Πιο κάτω τα πάντα επιστρέφουν στη
   στοιβαγμένη, κεντραρισμένη μορφή — που στο κινητό είναι η σωστή. */
@media (min-width: 1024px) {
  .hero-split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: 56px; align-items: center; text-align: left;
  }
  .hero-split .hero-copy > * { margin-left: 0; margin-right: 0; }
  .hero-split h1 { max-width: 18ch; }
  .hero-split .promise { margin-left: 0; margin-right: 0; max-width: 44ch; }
  .hero-split .cta,
  .hero-split .stores,
  .hero-split .trust { justify-content: flex-start; }
  .hero-split .stores-note { text-align: left; }
}
}

/* Το μέτρο του κειμένου, ανεξάρτητο από το πλάτος του δοχείου.
   Το δοχείο φάρδυνε για τα οπτικά· οι παράγραφοι δεν πρέπει να φαρδύνουν
   μαζί του — γραμμή 120 χαρακτήρων δεν διαβάζεται, το μάτι χάνει την
   επιστροφή στην επόμενη σειρά. */
.prose { max-width: 68ch; }
/* Δύο ονόματα για το ίδιο πράγμα, επίτηδες: το info.html γράφει <em> γιατί
   είναι έμφαση σε πρόταση, τα shop/partner γράφουν <span class="warm"> σε
   δεύτερη γραμμή τίτλου. Ένας κανόνας, ώστε να μη γεννηθεί δεύτερη
   διαβάθμιση που θα αποκλίνει από την πρώτη. */
.hero h1 em, .warm {
  font-style: normal;
  background: linear-gradient(120deg, var(--warm-a), var(--warm-b) 62%, var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Μακέτα συσκευής (info + shop) ────────────────────────────────────────
   Το πλαίσιο ΕΙΝΑΙ το τηλέφωνο — σώμα, εγκοπή, ανταύγεια στο τζάμι, και
   μια ελαφριά στροφή ώστε η σειρά να διαβάζεται σαν αντικείμενα σε τραπέζι
   αντί για επίπεδες εικόνες. Οι οθόνες είναι SVG, άρα μένουν καθαρές σε
   κάθε μέγεθος. */
.shots {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 34px; margin-top: 46px; perspective: 1400px;
}
.shot { text-align: center; }
.frame {
  position: relative; aspect-ratio: 9 / 19.5; margin-bottom: 18px; padding: 7px;
  border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(155deg, #333D52 0%, #161E2C 46%, #090D16 100%);
  box-shadow:
    0 34px 60px rgba(0, 0, 0, 0.62),
    0 8px 18px rgba(0, 0, 0, 0.45),
    0 0 60px rgba(0, 212, 255, 0.10);
  transform: rotateY(-11deg) rotateX(3deg);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* Ένας κανόνας hover ανά κανόνα θέσης, καθένας ένα επίπεδο βαρύτερος από
   αυτόν που πρέπει να νικήσει.

   Ήταν ένα σκέτο `.frame:hover`, που ζυγίζει (0,2,0) ενώ το
   `.shot:nth-child(2) .frame` ζυγίζει (0,3,0) — κλάση, ψευδοκλάση, κλάση.
   Ο βαρύτερος επιλογέας κερδίζει ό,τι σειρά κι αν έχουν στο αρχείο, οπότε
   σηκωνόταν μόνο το ΠΡΩΤΟ τηλέφωνο: το μόνο χωρίς κανόνα θέσης να
   αντισταθεί. Η σειρά στο αρχείο δεν έφταιγε ποτέ. */
.shot .frame:hover,
.shot:nth-child(2) .frame:hover,
.shot:nth-child(3) .frame:hover {
  transform: rotateY(0deg) rotateX(0deg) translateY(-22px);
}
.frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 23px; display: block; }
.frame::before {
  content: ""; position: absolute; z-index: 2; top: 12px; left: 50%;
  transform: translateX(-50%); width: 72px; height: 7px;
  border-radius: 4px; background: #04070D;
}
.frame::after {
  content: ""; position: absolute; inset: 7px; border-radius: 23px; pointer-events: none;
  background: linear-gradient(118deg,
    rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 40%);
}
.shot h3 { font-size: 16px; margin: 0 0 5px; }
.shot p { font-size: 14px; color: var(--muted); margin: 0; }

/* ── Αριθμημένα βήματα (shop + partner) ──────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 24px; counter-reset: step; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; position: relative; }
.step::before {
  counter-increment: step; content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; margin-bottom: 11px;
  background: rgba(0, 212, 255, 0.12); border: 1px solid rgba(0, 212, 255, 0.42);
  color: var(--cyan); font-weight: 900; font-size: 15px;
}
.step p { font-size: 14px; color: var(--muted); margin: 0; }

/* Τέσσερα βήματα, μία σειρά.
   Το πάτωμα των 230px χωράει μόνο τρία μέσα στα 900px του .wrap, οπότε ένα
   flow τεσσάρων έσπαγε 3+1 — και μια ροή που ξεκινάει ξανά από την αρχή σε
   δεύτερη σειρά δεν διαβάζεται σαν ροή, διαβάζεται σαν λάθος. Χαμηλότερο
   πάτωμα μόνο εδώ· τα shop/partner έχουν τρία και μένουν όπως ήταν. */
.steps-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ── Συχνές ερωτήσεις (shop + partner) ───────────────────────────────── */
details {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 10px;
}
details summary { cursor: pointer; font-weight: 700; font-size: 15px; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "+ "; color: var(--cyan); font-weight: 900; }
details[open] summary::before { content: "− "; }
details p { margin: 10px 0 0; color: var(--muted); font-size: 14.5px; }
details p:last-child { margin-bottom: 0; }

/* ── Σημείωση, επικοινωνία, υποσέλιδο ────────────────────────────────── */
.note {
  background: var(--gold-tint); border: 1px solid var(--gold-line);
  border-radius: 12px; padding: 12px 16px; font-size: 14px; color: var(--muted);
  margin-top: 18px;
}
.note b { color: var(--gold); font-weight: 700; }

.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 20px; }
.contact div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
.contact span { display: block; font-size: 12px; color: var(--muted); letter-spacing: 0.6px; text-transform: uppercase; }
.contact a, .contact strong { font-size: 16px; font-weight: 700; text-decoration: none; }

footer { padding: 28px 0 48px; color: var(--muted); font-size: 13.5px; text-align: center; border-top: 1px solid var(--line); }

/* ── Λιγότερη κίνηση ─────────────────────────────────────────────────────
   Οι δύο νέες animations το σέβονται μέσα από το @media τους παραπάνω.
   Εδώ μένουν οι στροφές των τηλεφώνων και οι μεταβάσεις των κουμπιών. */
@media (prefers-reduced-motion: reduce) {
  .frame, .shot:nth-child(2) .frame, .shot:nth-child(3) .frame { transform: none; transition: none; }
  .btn { transition: none; }
  .ambient { animation: none; }
}

/* ── Εκτύπωση ───────────────────────────────────────────────────────────
   Το `.ambient` φεύγει: ένα στρώμα βαθυχρωμων gradient σε λευκό χαρτί
   είναι ένα φύλλο μελάνι. */
@media print {
  body { background: #fff; color: #000; }
  .ambient { display: none; }
  .btn, .note, footer, nav { display: none; }
  .frame, .contact div { border: 1px solid #000; }
  .muted, .tagline, .shot p, .step p { color: #333; }
  .wordmark .go { -webkit-text-fill-color: #000; color: #000; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ΚΙΝΗΣΗ — γιατί η σελίδα έδειχνε νεκρή

   Δεν έλειπαν animations. ΤΡΕΧΑΝ, μετρημένα με getAnimations(): είκοσι στην
   customer, οκτώ στην αρχική. Το πρόβλημα ήταν ΤΙ τις οδηγούσε.

   Και οι οκτώ της αρχικής είχαν ScrollTimeline ή ViewTimeline. Μια animation
   δεμένη σε scroll timeline δεν ΠΑΙΖΕΙ — σκραμπάρεται. Κουνάς τη σελίδα,
   κουνιέται η σελίδα· σταματάς, παγώνει. Το μάτι δεν το διαβάζει ως κίνηση,
   το διαβάζει ως βάρος. Και με γρήγορο scroll η «είσοδος» τελειώνει πριν
   προλάβεις να τη δεις.

   Το μέτρημα που έκρινε τη δουλειά, στην αρχική στα 375px:

       DocumentTimeline (αυτόνομες) ......... 0
       Scroll/View timeline ................. 8
       hover-gated κανόνες .................. όλοι — στην αφή δεν υπάρχει hover

   Μηδέν αυτοκινούμενο pixel, και τίποτα απολύτως στο load. Η διόρθωση δεν
   είναι «περισσότερες animations», είναι ΑΛΛΟ ΡΟΛΟΪ: ό,τι ακολουθεί τρέχει
   στο DocumentTimeline, δηλαδή μόνο του, και τίποτα δεν κρέμεται από hover.

   Το scroll-linked ΜΕΝΕΙ, ως δίχτυ για όποιον δεν τρέχει JavaScript. Δες
   γιατί, στο .m παρακάτω.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Μία καμπύλη για όλη τη σελίδα. Γρήγορη μπροστά, μαλακή στο τέλος: έτσι
     διαβάζεται ως αντικείμενο που κάθεται, όχι ως opacity που ανεβαίνει. */
  --eo: cubic-bezier(0.22, 0.9, 0.28, 1);
}

/* ── 1. Άφιξη ─────────────────────────────────────────────────────────────
   Ό,τι φαίνεται ήδη στο load μπαίνει κλιμακωτά· ό,τι είναι πιο κάτω μπαίνει
   όταν φτάσεις. Και τα δύο ΠΑΙΖΟΥΝ στον δικό τους χρόνο.

   Το `.m` στο <html> μπαίνει από inline script στο <head>, και ΜΟΝΟ τότε
   κρύβεται οτιδήποτε. Αυτή η σειρά είναι ολόκληρη η ασφάλεια:

     JavaScript κλειστή  → το .m δεν μπαίνει ποτέ → τίποτα δεν κρύβεται,
                           και μένει το scroll-linked που ίσχυε πάντα
     το motion.js πέφτει → το δίχτυ του <head> βγάζει το .m σε 1,2s
     όλα καλά            → πραγματικές, χρονικές animations

   Είναι το αντίστροφο από τη συνηθισμένη υλοποίηση με IntersectionObserver,
   που βάζει opacity:0 στο CSS και ελπίζει ότι θα τρέξει η JavaScript για να
   το βγάλει. Εκεί, μια αποτυχία φόρτωσης αφήνει ΚΕΝΗ σελίδα. Εδώ, μια
   αποτυχία φόρτωσης αφήνει τη σελίδα ακριβώς όπως ήταν πριν. */
.m .rise {
  opacity: 0;
  /* Σκοτώνει το view() παραπάνω: δύο ρολόγια στο ίδιο στοιχείο δίνουν
     σπασμωδική είσοδο, γιατί το ένα σκραμπάρει ό,τι ζωγραφίζει το άλλο. */
  animation: none;
  animation-timeline: auto;
}
.m .rise.m-in {
  animation: arrive 0.62s var(--eo) var(--d, 0s) both;
  animation-timeline: auto;
}
@keyframes arrive {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Τα πλέγματα μπαίνουν ανά πλακίδιο, όχι σαν μπλοκ.
   Το δοχείο κάνει μόνο fade — αλλιώς παιδί και γονιός μετακινούνται μαζί,
   το πλακίδιο διανύει 40px αντί για 20, και η είσοδος δείχνει βιαστική. */
.m .doors.m-in, .m .steps.m-in, .m .shots.m-in,
.m .contact.m-in, .m .chips.m-in, .m .bento.m-in {
  animation: fade-in 0.34s ease both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.m .doors.m-in > *, .m .steps.m-in > *, .m .shots.m-in > *,
.m .contact.m-in > *, .m .chips.m-in > *, .m .bento.m-in > * {
  animation: arrive 0.52s var(--eo) both;
}
.m .doors.m-in > *:nth-child(2), .m .steps.m-in > *:nth-child(2),
.m .shots.m-in > *:nth-child(2), .m .contact.m-in > *:nth-child(2),
.m .chips.m-in > *:nth-child(2), .m .bento.m-in > *:nth-child(2) { animation-delay: 0.08s; }
.m .doors.m-in > *:nth-child(3), .m .steps.m-in > *:nth-child(3),
.m .shots.m-in > *:nth-child(3), .m .contact.m-in > *:nth-child(3),
.m .chips.m-in > *:nth-child(3), .m .bento.m-in > *:nth-child(3) { animation-delay: 0.16s; }
.m .steps.m-in > *:nth-child(4), .m .contact.m-in > *:nth-child(4),
.m .bento.m-in > *:nth-child(4) { animation-delay: 0.24s; }
.m .bento.m-in > *:nth-child(n+5) { animation-delay: 0.32s; }

/* ── 2. Ζωή σε αδράνεια ───────────────────────────────────────────────────
   Αυτό είναι που έλειπε εντελώς. Όλα εδώ τρέχουν στο DocumentTimeline:
   κινούνται χωρίς scroll, χωρίς ποντίκι, χωρίς αφή — άρα υπάρχουν και στο
   κινητό, όπου το hover δεν πρόκειται να συμβεί ποτέ.

   Αργά επίτηδες. Μια σελίδα με πολλά γρήγορα loops δεν δείχνει ζωντανή,
   δείχνει ανήσυχη — και δεν διαβάζεις δίπλα σε κάτι που σπαρταράει. */
@media (prefers-reduced-motion: no-preference) {

  /* Το φως αναπνέει μόνο του, πέρα από τη μετατόπιση που δίνει το scroll.
     Δεύτερο στρώμα σε ψευδοστοιχείο: το .ambient κρατάει το transform του
     scroll timeline, το ::after έχει δικό του ρολόι. Ένα στοιχείο δεν
     μπορεί να τρέχει δύο animations του ίδιου transform σε δύο ρολόγια. */
  .ambient::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(40vw 34vw at 76% 6%, rgba(0, 212, 255, 0.14), transparent 62%),
      radial-gradient(44vw 34vw at 18% 88%, rgba(255, 42, 133, 0.11), transparent 64%);
    animation: breathe 13s ease-in-out infinite;
  }
  @keyframes breathe {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.18) translate3d(-1.5vw, 1.5vh, 0); }
  }

  /* Το «GO» περνάει φως μέσα από το ίδιο του το gradient. Είναι σε κάθε
     σελίδα, πάνω πάνω, και δεν κουνάει τίποτα στη διάταξη: αλλάζει μόνο
     background-position σε κείμενο που ήδη ήταν gradient. */
  .wordmark .go {
    background: linear-gradient(135deg, var(--warm-a), var(--warm-b) 45%, var(--warm-a));
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: go-shimmer 6s ease-in-out infinite;
  }
  @keyframes go-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }

  /* Μια λάμψη περνάει πάνω από το κύριο κουμπί κάθε πέντε δευτερόλεπτα.
     Η παύση είναι το μισό του εφέ: συνεχής σάρωση γίνεται θόρυβος και το
     μάτι τη φιλτράρει. Εδώ σαρώνει το 26% του κύκλου και ησυχάζει. */
  .btn-primary::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -55%;
    width: 40%; pointer-events: none; transform: skewX(-18deg);
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.26), transparent);
    animation: sheen 5.2s ease-in-out infinite;
  }
  @keyframes sheen {
    0%, 62%   { left: -55%; }
    88%, 100% { left: 125%; }
  }

  /* Τα βέλη των πορτών σπρώχνουν. Στην αφή δεν υπάρχει hover, οπότε χωρίς
     αυτό η κάρτα δεν δηλώνει με τίποτα ότι πατιέται. Κλιμακωτά, ώστε οι
     τρεις να μη χτυπάνε σαν μετρονόμος. */
  @keyframes nudge {
    0%, 74%, 100% { transform: translateX(0); }
    86%           { transform: translateX(5px); }
  }

  /* Τα τηλέφωνα επιπλέουν. Η κίνηση μπαίνει στο .shot, ΟΧΙ στο .frame: το
     .frame κρατάει τη στροφή του και το hover του, και μια infinite
     animation πάνω στο ίδιο transform θα τα έτρωγε και τα δύο — το hover
     δεν θα λειτουργούσε ποτέ ξανά.

     Αρνητικά delays: ξεκινάνε ήδη ασυγχρόνιστα, χωρίς να περιμένουν έναν
     ολόκληρο κύκλο για να ξεκολλήσουν μεταξύ τους. */
  .shot { animation: bob 6.6s ease-in-out infinite; }
  .shot:nth-child(2) { animation-delay: -2.2s; }
  .shot:nth-child(3) { animation-delay: -4.4s; }
  @keyframes bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
  }

  /* Μέσα στη μακέτα: το Claim αναπνέει και οι κάρτες σιγοανάβουν με σειρά,
     σαν να φτάνουν. Μόνο box-shadow — καμία διάταξη δεν κουνιέται, και δεν
     πατάει πάνω στους inline κανόνες των σελίδων, που δεν ορίζουν animation
     σε κανένα από τα δύο. */
  .device-cta { animation: cta-breathe 3.6s ease-in-out infinite; }
  @keyframes cta-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.34); }
    50%      { box-shadow: 0 0 22px 2px rgba(0, 212, 255, 0.30); }
  }
  .dcard { animation: card-glow 5.4s ease-in-out infinite; }
  .dcard:nth-of-type(2) { animation-delay: 1.1s; }
  .dcard:nth-of-type(3) { animation-delay: 2.2s; }
  @keyframes card-glow {
    0%, 66%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); }
    33%           { box-shadow: 0 0 16px -2px rgba(0, 212, 255, 0.30); }
  }
}

/* Το ::after του κουμπιού θέλει δοχείο για να έχει πού να σαρώσει. Έξω από
   το @media επίτηδες: με reduced-motion η λάμψη δεν τρέχει, αλλά το κουμπί
   πρέπει να συνεχίσει να κόβει σωστά τις γωνίες του. */
.btn-primary { position: relative; overflow: hidden; }
/* Το βέλος βγαίνει από το markup και μπαίνει εδώ, ώστε να μπορεί να κινηθεί
   χωρίς να σέρνει μαζί του το κείμενο του συνδέσμου. */
/* ── 3. Αφή ───────────────────────────────────────────────────────────────
   Κάθε :hover αυτού του αρχείου είναι νεκρό στο κινητό. Το :active είναι η
   μόνη επιβεβαίωση που παίρνει το δάχτυλο ότι το πάτημα καταγράφηκε. */
.btn:active   { transform: translateY(1px) scale(0.985); }
.store:active { transform: scale(0.97); }
.tabs a:active { color: var(--text); }
.store, .tabs a { transition: transform 0.14s ease, color 0.14s ease, border-color 0.2s ease; }

/* ── 4. Λιγότερη κίνηση ───────────────────────────────────────────────────
   Τα loops του §2 είναι ήδη μέσα σε no-preference. Εδώ μένουν η άφιξη και η
   ανάδραση αφής, που ζουν έξω από εκείνο το μπλοκ. */
@media (prefers-reduced-motion: reduce) {
  .m .rise { opacity: 1; animation: none; }
  .m .rise.m-in, .m .m-in > * { animation: none; }
  .btn:active, .store:active { transform: none; }
}