:root {
  /* Ίδιο χρώμα με το φόντο των εικόνων, ώστε να "δένουν" χωρίς ορατές άκρες */
  --navy: #0b2637;
  --gold: #d6b46f;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* Μέγιστο μέγεθος 1059x691 όπως το πρωτότυπο (εικόνες στο φυσικό τους μέγεθος).
   Σε μικρότερες οθόνες όλη η κάρτα μικραίνει αναλογικά — ποτέ δεν μεγαλώνει, άρα δεν θολώνει. */
.card {
  position: relative;
  width: min(1059px, 100vw, calc(100vh * 1059 / 691));
  aspect-ratio: 1059 / 691;
  background: var(--navy);
  container-type: inline-size;
  overflow: hidden;
}

/* 1cqw = 1/100 του πλάτους της κάρτας (10.59px στο πλήρες μέγεθος) */
.title {
  position: absolute;
  left: 0; right: 0;
  top: 16.62cqw;
  text-align: center;
  color: var(--gold);
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 2.55cqw;
  letter-spacing: 0.32em;
  padding-left: 0.32em;
  line-height: 1;
}

/* Θέσεις/πλάτη σε % του 1059x691 — στο πλήρες μέγεθος αντιστοιχούν ακριβώς στα pixel των εικόνων */
.logo { position: absolute; display: block; height: auto; }
.logo.crafterra { left: 8.215%;  top: 45.441%; width: 23.796%; } /* 252px, PNG 2x */
.logo.mastorino { left: 6.893%;  top: 78.726%; width: 26.912%; } /* 285px, PNG 2x */
.logo.paintcube { left: 39.188%; top: 53.690%; width: 20.585%; } /* 218px */
.logo.chofee    { left: 68.744%; top: 48.915%; width: 23.796%; } /* 252px */
.logo.elire     { left: 69.688%; top: 65.702%; width: 22.285%; } /* 236px */

/* Εμφάνιση με fade-in και ανέβασμα: πρώτα ο τίτλος, μετά τα λογότυπα ένα-ένα */
.title, .logo { animation: fade-up 1.2s ease-out both; }
.logo.crafterra { animation-delay: 0.35s; }
.logo.mastorino { animation-delay: 0.5s; }
.logo.paintcube { animation-delay: 0.65s; }
.logo.chofee    { animation-delay: 0.8s; }
.logo.elire     { animation-delay: 0.95s; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .title, .logo { animation: none; }
}

/* Κινητά: τα λογότυπα σε στήλη, ώστε τίτλος και λογότυπα να διαβάζονται */
@media (max-width: 640px) {
  body { align-items: flex-start; }
  .card {
    width: 100%;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 64px 16px;
  }
  .title {
    position: static;
    font-size: 21px;
    letter-spacing: 0.22em;
    padding-left: 0.22em;
    line-height: 1.6;
    margin-bottom: 16px;
  }
  /* Οι σύνδεσμοι γύρω από τα λογότυπα πιάνουν όλο το πλάτος, ώστε το max-width να μετρά σωστά */
  .card > a { display: flex; justify-content: center; width: 100%; }
  .logo { position: static; max-width: 80%; }
  .logo.crafterra { width: 220px; }
  .logo.mastorino { width: 285px; }
  .logo.paintcube { width: 190px; }
  .logo.chofee    { width: 230px; }
  .logo.elire     { width: 210px; }
}