/* ───────────────────────── limebowl — η βιτρίνα ─────────────────────────
   Τα τρία χρώματα είναι της μάρκας (brand/LimeBowl.pdf) και είναι ΤΑ ΙΔΙΑ
   με του `lib/theme.dart`. Όποιος αλλάξει το ένα, αλλάζει και το άλλο:
   εικονίδιο και σελίδα με διαφορετικό λαχανί είναι ορατή ασυμφωνία.

   Ο κανόνας του λαχανιού ισχύει και εδώ: **γέμισμα πάνω στο ανοιχτό,
   γράμμα μόνο πάνω στο μελάνι.** Λαχανί κείμενο σε κρεμ δίνει 1,08:1.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --lime: #D1EF5F;
  --lime-deep: #BADC45;
  --lime-soft: #EDF8C2;
  --ink: #161616;
  --ink-2: #202020;
  --ink-3: #2B2B2B;
  --cream: #EEEAE5;
  --paper: #FFFFFF;
  --line: #E4E0D9;
  --rule: #D8D3CB;
  --rail: #CCC6BD;
  --muted: #5C5955;
  --on-ink-muted: #8B8784;
  /* ⚠️ ΟΡΙΟ, ΟΧΙ ΚΕΙΜΕΝΟ. Το 3:1 που περνά είναι το κατώφλι του WCAG για
     ΠΕΡΙΓΡΑΜΜΑΤΑ χειριστηρίων (1.4.11). Ως κείμενο δίνει 3,0:1 πάνω στο
     κρεμ — κάτω από το 4,5:1 που θέλει η ανάγνωση. Για αχνό κείμενο
     υπάρχει το --muted. */
  --control: #8A867E;

  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 64px);
  --r: 20px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: Commissioner, ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* Οι επιφάνειες που ΔΕΝ ζωγραφίσαμε κουβαλούν κι αυτές τον σχεδιασμό. */
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: var(--rail) var(--cream); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--rail); border-radius: 99px; border: 3px solid var(--cream); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 2px; }

.shell { width: min(1240px, 100% - var(--gutter) * 2); margin-inline: auto; }

/* 🐞 Τα στοιχεία ενός grid έχουν `min-width: auto`, δηλαδή ΔΕΝ συρρικνώνονται
   κάτω από το εγγενές πλάτος του περιεχομένου τους. Μια λήψη 660px έκανε τη
   στήλη 660px φαρδιά, η σελίδα ξεπερνούσε την οθόνη του κινητού και κάθε
   παράγραφος κοβόταν στα δεξιά. Το `min-width: 0` είναι η άδεια να μικρύνουν. */
.hero .shell > *, .ink .split > *, .two > * { min-width: 0; }

/* ── Πλοήγηση ───────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.top .shell { display: flex; align-items: center; gap: 28px; padding: 14px 0; }
/* Το λογότυπο είναι ΕΙΚΟΝΑ, όχι κείμενο σε γραμματοσειρά. Τα γράμματά του
   είναι στρογγυλεμένα και σχεδιασμένα· καμία γραμματοσειρά με ελληνικά δεν
   τα αναπαράγει, και η πλησιέστερη απομίμηση φαίνεται αμέσως δίπλα στο
   εικονίδιο της εφαρμογής. Το `alt` κρατά το όνομα αναγνώσιμο. */
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { height: 27px; width: auto; }
.wordmark--sm img { height: 21px; }
.top nav { display: flex; gap: 24px; margin-left: 10px; font-size: 15px; font-weight: 600; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--ink); }
.top .btn { margin-left: auto; }
@media (max-width: 720px) { .top nav { display: none; } }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ink); color: var(--paper);
  padding: 13px 24px; border-radius: 999px;
  font-weight: 800; font-size: 15px; text-decoration: none;
  border: 2px solid var(--ink);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 2px 6px rgba(22,22,22,.12);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(22,22,22,.20); }
.btn:active { transform: translateY(0); }
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: none; }
.btn--ghost:hover { background: var(--paper); }

/* ── Τυπογραφία ─────────────────────────────────────────────── */
/* 1.12 και όχι 1.04: το λαχανί πλακίδιο έχει ύψος, και με στριμωγμένες
   αράδες ακουμπούσε τα γράμματα της από πάνω σειράς. */
h1, h2, h3 { line-height: 1.12; letter-spacing: -.035em; font-weight: 900; text-wrap: balance; }
h1 { font-size: clamp(40px, 5.4vw, 72px); }
h2 { font-size: clamp(31px, 4.1vw, 52px); }
h3 { font-size: clamp(19px, 2vw, 23px); letter-spacing: -.02em; line-height: 1.2; }
p { text-wrap: pretty; }
.lead { font-size: clamp(18px, 1.5vw, 21px); color: var(--muted); max-width: 46ch; }
h2 + .lead, h1 + .lead { margin-top: 22px; }
/* Λαχανί πλακίδιο πίσω από ΜΙΑ λέξη ή μία κοντή φράση — ποτέ κάτι που
   σπάει σε δεύτερη σειρά. Όταν έσπαγε, τα δύο πλακίδια κάθονταν το ένα
   πάνω στο άλλο με διαφορετικό πλάτος και έβγαινε σκαλοπάτι. Το `nowrap`
   το κάνει αδύνατο αντί να το αφήνει στην τύχη του μήκους της λέξης. */
.mark-lime {
  background: var(--lime);
  padding: .04em .16em;
  border-radius: 10px;
  white-space: nowrap;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

section { padding-block: clamp(56px, 7vw, 104px); }
.section-head { max-width: 54ch; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head p { margin-top: 18px; color: var(--muted); font-size: 18px; }

/* ── Ήρωας ──────────────────────────────────────────────────── */
.hero .shell { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(56px, 7vw, 96px); }
.hero p.lead { margin-top: 24px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .beta { margin-top: 18px; font-size: 14px; color: var(--muted); }
.shot {
  border-radius: 34px; overflow: hidden; border: 1px solid var(--line);
  /* Σκιά σε ΤΡΙΑ στρώματα, με μετατόπιση. Ένα μόνο θόλωμα 70px πίσω από
     περίγραμμα 1px είναι το προεπιλεγμένο «κάρτα που αιωρείται» — φαίνεται
     ίδιο σε κάθε σελίδα που βγήκε από μηχανή. */
  box-shadow:
    0 1px 2px rgba(22, 22, 22, .07),
    0 10px 20px -8px rgba(22, 22, 22, .16),
    0 26px 40px -26px rgba(22, 22, 22, .26);
  background: var(--paper);
  /* Η λήψη είναι ολόκληρη οθόνη κινητού. Χωρίς ταβάνι, τραβάει το πλέγμα
     σε ύψος και ο τίτλος πέφτει κάτω από τη μέση — δηλαδή ο επισκέπτης
     βλέπει κενό πριν διαβάσει τι είναι αυτό. */
  max-height: min(68vh, 620px); object-fit: cover; object-position: top center;
  width: 100%; height: auto;
  /* Το κόψιμο στη μέση μιας κάρτας μοιάζει με σφάλμα. Η λήψη σβήνει στα
     τελευταία εικονοστοιχεία, ώστε να διαβάζεται ως «η οθόνη συνεχίζει». */
  -webkit-mask-image: linear-gradient(#000 84%, transparent 100%);
  mask-image: linear-gradient(#000 84%, transparent 100%);
}
@media (max-width: 880px) {
  .hero .shell { grid-template-columns: 1fr; }
  .shot { max-width: 380px; margin-inline: auto; }
}

/* ── Τα δύο ονόματα: η απόδειξη ─────────────────────────────── */
.pairs { display: grid; gap: 14px; }
.pair {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(12px, 2vw, 28px);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(16px, 2.2vw, 24px) clamp(18px, 2.4vw, 30px);
}
.pair > span:first-of-type { text-align: right; }
.pair span { font-size: clamp(16px, 1.7vw, 21px); font-weight: 700; }
.pair .op { font-size: clamp(22px, 2.6vw, 32px); font-weight: 900; width: 2.2em; height: 2.2em; display: grid; place-items: center; border-radius: 50%; flex: none; }
.pair .op.same { background: var(--lime); }
.pair .op.diff { background: var(--ink); color: var(--paper); }
.pair .why { grid-column: 1 / -1; font-size: 15px; color: var(--muted); text-align: center; margin-top: 10px; }
@media (max-width: 620px) {
  .pair { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; }
  .pair > span:first-of-type { text-align: center; }
  .pair .op { width: 1.9em; height: 1.9em; }
  .pair .why { text-align: center; margin-top: 6px; }
}

/* ── Βήματα ─────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.step { background: var(--paper); padding: clamp(22px, 2.6vw, 34px); }
.step h3 { margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 16px; }
.step .n { display: block; font-size: 13px; font-weight: 900; color: var(--muted); margin-bottom: 14px; letter-spacing: .04em; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ── Μελανένια ενότητα ──────────────────────────────────────── */
.ink { background: var(--ink); color: var(--paper); }
.ink h2 { color: var(--paper); }
.ink .lead, .ink p { color: var(--on-ink-muted); }
.ink .split { display: grid; grid-template-columns: 1fr 440px; gap: clamp(32px, 5vw, 76px); align-items: center; }
.ink .mark-lime { background: var(--lime); color: var(--ink); }
.facts { margin-top: 34px; display: grid; gap: 1px; background: var(--ink-3); border-radius: 16px; overflow: hidden; }
.fact { background: var(--ink-2); padding: 18px 22px; display: flex; gap: 16px; align-items: baseline; }
.fact b { color: var(--lime); font-size: 19px; font-weight: 900; min-width: 4.5ch; }
.fact span { color: var(--paper); font-size: 16px; }
@media (max-width: 880px) { .ink .split { grid-template-columns: 1fr; } }

/* Απόσπασμα οθόνης, όχι ολόκληρο κινητό: δεν χρειάζεται μάσκα ούτε ταβάνι,
   γιατί κόβει μόνο του σε καθαρό σημείο. */
.shot--crop { max-height: none; -webkit-mask-image: none; mask-image: none; border-radius: 24px; }

/* ── Η λίστα ────────────────────────────────────────────────── */
.two { display: grid; grid-template-columns: 420px 1fr; gap: clamp(32px, 5vw, 76px); align-items: center; }
.two.flip { grid-template-columns: 1fr 420px; }
@media (max-width: 880px) { .two, .two.flip { grid-template-columns: 1fr; } }

/* ── Απόρρητο ───────────────────────────────────────────────── */
.keeps { display: grid; gap: 12px; margin-top: 30px; }
.keep { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; }
.keep svg { flex: none; margin-top: 3px; }

/* ── Υποσέλιδο ──────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding-block: 48px; font-size: 15px; }
footer .shell { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 24px; margin-left: auto; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
.small { font-size: 14px; color: var(--muted); }

/* Μία στιγμή κίνησης, από ορατή αφετηρία — όχι είσοδος σε κάθε ενότητα. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise .7s cubic-bezier(.16,1,.3,1) both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  @keyframes rise { from { opacity: .55; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}