:root{
  --ink:#16232B;
  --ink-70:#4B5A62;
  --ink-45:#7C888E;
  --paper:#F2F4F1;
  --card:#FFFFFF;
  --berry:#C72A2C;
  --leaf:#3E7440;
  --line:rgba(22,35,43,.13);
  --wrap:1040px;
  --display:"General Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --util:"Satoshi","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--display);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}

/* header */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--wrap);margin:0 auto;padding:22px 22px 10px;
}
.brand img{height:26px;width:auto}
.bar-nav{display:flex;gap:22px;font-family:var(--util);font-size:14px}
.bar-nav a{color:var(--ink-70);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.bar-nav a:hover{color:var(--ink);border-bottom-color:var(--berry)}

/* hero */
.hero{max-width:var(--wrap);margin:0 auto;padding:56px 22px 40px}
.eyebrow{
  font-family:var(--util);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-45);margin:0 0 18px;
}
.hero-h{
  font-size:clamp(38px,7vw,68px);line-height:1.04;letter-spacing:-.03em;
  font-weight:600;margin:0 0 22px;max-width:14ch;
}
.hero-p{max-width:52ch;color:var(--ink-70);margin:0;font-size:18px}

/* app list */
.apps{max-width:var(--wrap);margin:0 auto;padding:20px 22px 70px}
.app-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.app-link{
  display:grid;grid-template-columns:132px 1fr;gap:26px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:26px 28px;text-decoration:none;
  transition:border-color .18s ease, transform .18s ease;
}
.app-link:hover{border-color:rgba(199,42,44,.45);transform:translateY(-2px)}
.app-link:focus-visible{outline:2px solid var(--berry);outline-offset:3px}
.app-gr{
  font-family:var(--util);font-weight:700;font-size:13px;letter-spacing:.22em;
  color:var(--ink-45);writing-mode:horizontal-tb;padding-top:6px;
}
.app-kind{
  display:block;font-family:var(--util);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45);margin-bottom:6px;
}
.app-name{font-size:30px;letter-spacing:-.02em;font-weight:600;margin:0 0 6px}
.app-tag{margin:0 0 10px;font-size:19px;color:var(--ink)}
.app-origin{margin:0 0 14px;font-size:15px;color:var(--ink-70);max-width:58ch}
.app-status{
  display:inline-block;font-family:var(--util);font-size:12px;letter-spacing:.08em;
  color:var(--leaf);border:1px solid rgba(62,116,64,.35);border-radius:999px;padding:3px 12px;
}

/* inner pages */
.page{max-width:720px;margin:0 auto;padding:48px 22px 72px}
.page-h{font-size:clamp(32px,5vw,46px);letter-spacing:-.025em;font-weight:600;margin:0 0 14px}
.page-gr{
  display:block;font-family:var(--util);font-size:13px;font-weight:700;
  letter-spacing:.24em;color:var(--ink-45);margin-bottom:10px;
}
.lede{font-size:21px;color:var(--ink);margin:0 0 18px;max-width:46ch}
.origin-note{
  margin:0 0 22px;padding-left:16px;border-left:2px solid var(--berry);
  color:var(--ink-70);font-size:16px;max-width:52ch;
}
.status-line{color:var(--ink-70);margin:0 0 28px}
.page h2{font-size:20px;letter-spacing:-.01em;margin:34px 0 8px;font-weight:600}
.page p{margin:0 0 14px;color:var(--ink-70)}
.page a{color:var(--berry)}
.big-link{font-size:22px;margin:0 0 26px}
.big-link a{text-decoration:none;border-bottom:2px solid rgba(199,42,44,.3)}
.rule{border:0;border-top:1px solid var(--line);margin:44px 0 30px}

.page-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.btn{
  display:inline-block;font-family:var(--util);font-size:15px;text-decoration:none;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  border-radius:999px;padding:11px 22px;
}
.btn:hover{background:#0E181E}
.btn-quiet{background:transparent;color:var(--ink)}
.btn-quiet:hover{background:rgba(22,35,43,.06)}
.btn:focus-visible{outline:2px solid var(--berry);outline-offset:3px}

/* footer */
.foot{background:var(--ink);color:var(--paper);margin-top:20px}
.foot-in{
  max-width:var(--wrap);margin:0 auto;padding:44px 22px 52px;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;align-items:start;
}
.foot-logo{height:24px;width:auto}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:15px}
.foot-list a{color:rgba(242,244,241,.78);text-decoration:none}
.foot-list a:hover{color:#fff}
.foot-meta{font-family:var(--util);font-size:14px;color:rgba(242,244,241,.7)}
.foot-meta a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.foot-meta p{margin:10px 0 0}

@media (max-width:720px){
  .app-link{grid-template-columns:1fr;gap:10px;padding:22px}
  .app-gr{padding-top:0}
  .foot-in{grid-template-columns:1fr;gap:22px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* legal block on app pages */
.legal{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.legal h2{margin-top:0}
.legal-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.legal-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.legal-list a{color:var(--ink);text-decoration:none;font-size:17px}
.legal-list a:hover{color:var(--berry)}
.legal-list span{font-family:var(--util);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-45)}
.legal-todo{color:var(--ink-70)}


/* ── Εικονίδια εφαρμογών στη λίστα ─────────────────────────────
   Μπαίνει ΣΤΟ ΤΕΛΟΣ του assets/style.css.

   Η .app-link είναι grid δύο στηλών (132px | 1fr). Η .app-head είναι
   ένα ΚΑΙΝΟΥΡΓΙΟ κουτί που μπαίνει στην πρώτη στήλη και κρατά μέσα του
   το εικονίδιο και την ελληνική λέξη. Έτσι το grid μένει δύο στηλών
   και δεν χαλάει τίποτα από όσα ήδη δουλεύουν.                        */

.app-head{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
}
.app-icon{
  width:96px; height:96px;
  border-radius:22.37%;              /* η αναλογία των εικονιδίων iOS */
  border:1px solid var(--line);
}

/* Στο κινητό η κάρτα γίνεται μονόστηλη, οπότε βάζουμε το εικονίδιο
   δίπλα στη λέξη αντί από πάνω, για να μη μακραίνει η κάρτα. */
@media (max-width:720px){
  .app-head{flex-direction:row; align-items:center; gap:14px}
  .app-icon{width:64px; height:64px}
}