:root{
  --navy:#062b63;
  --navy-dark:#031a3f;
  --yellow:#ffd427;
  --red:#ef1f2f;
  --green:#2f8f22;
  --white:#ffffff;
  --ink:#0b2b59;
}

/* Βασικές ρυθμίσεις */
*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  min-height:100%;
  width:100%;
  overflow-x:hidden;
  background:var(--navy);
  font-family:Arial, Helvetica, sans-serif;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  max-width:100%;
}

.site{
  width:100%;
  min-height:100vh;
}

/* =====================================================
   ΕΚΔΟΣΗ ΥΠΟΛΟΓΙΣΤΗ / LAPTOP
   ===================================================== */

.desktop-stage{
  position:relative;
  width:100%;
  max-width:1920px;
  margin:0 auto;
  overflow:visible; 
 background:var(--navy);
}

.desktop-image{
  display:block;
  width:100%;
  height:auto;
}

/* Λογότυπο desktop */
.desktop-logo{
  position:absolute;
  z-index:20;

  left:35%;
  top:1%;
  width:28%;
  height:auto;
  max-height:none;
  object-fit:contain;
    pointer-events:none;
}

/* Ενεργές περιοχές συνδέσμων επάνω στη μακέτα */
.hotspot{
  position:absolute;
  z-index:30;
  display:block;
  border-radius:18px;
  outline-offset:4px;
}

.hotspot:focus-visible{
  outline:4px solid var(--white);
  box-shadow:0 0 0 8px rgba(255,212,39,.85);
}

/* Κουμπί Είσοδος */
.entry{
  left:25.6%;
  top:42.7%;
  width:20.4%;
  height:9.6%;
}

/* Κουμπί Κλείσε θέση σήμερα */
.contact{
  left:48.2%;
  top:42.7%;
  width:23.6%;
  height:9.6%;
}

/* 30 χρόνια επιτυχίες */
.more{
  left:74.6%;
  top:60.3%;
  width:17.6%;
  height:6.1%;
}

/* Facebook */
.facebook{
  left:75%;
  top:92.4%;
  width:3.2%;
  height:5.4%;
}

/* Instagram */
.instagram{
  left:79%;
  top:92.4%;
  width:3.2%;
  height:5.4%;
}

/* Η mobile έκδοση κρύβεται στον υπολογιστή */
.mobile-layout{
  display:none;
}

/* =====================================================
   TABLET ΚΑΙ ΚΙΝΗΤΑ
   ===================================================== */

@media (max-width:820px){

  /* Κρύβεται η μεγάλη desktop μακέτα */
  .desktop-stage{
    display:none;
  }

  /* Εμφανίζεται η κάθετη mobile έκδοση */
  .mobile-layout{
    display:block;
    width:100%;
    background:var(--white);
    color:var(--ink);
  }

  /* Πάνω μπλε ενότητα */
  .mobile-hero{
    position:relative;
    overflow:hidden;

    min-height:100svh;
    width:100%;

    padding:28px 18px 30px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    gap:16px;

    text-align:center;
    color:var(--white);

    background:
      radial-gradient(
        circle at 50% 12%,
        rgba(41,110,194,.48),
        transparent 35%
      ),
      linear-gradient(
        180deg,
        #062e69 0%,
        #0b4b98 55%,
        #031a3f 100%
      );
  }

  /* Λογότυπο κινητού */
  .mobile-logo-wrap{
    position:relative;
    z-index:5;

    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;
    min-height:120px;

    margin:0 auto;
    overflow:visible;
  }

  .mobile-logo-image{
    display:block;

    width:min(94vw,620px);
    height:auto;
    max-height:none;

    object-fit:contain;
    object-position:center;

    transform:none;
  }

  .mobile-subtitle{
    position:relative;
    z-index:5;

    margin-top:0;

    font-size:clamp(.95rem,4vw,1.2rem);
    font-weight:500;

    text-transform:uppercase;
    letter-spacing:.08em;
  }

  .mobile-small-groups{
    position:relative;
    z-index:5;

    font-size:clamp(1rem,4.5vw,1.25rem);
    font-weight:700;
  }

  /* Χειρόγραφο σλόγκαν */
  .mobile-hand,
  .mobile-dreams{
    position:relative;
    z-index:5;

    font-family:
      "Segoe Print",
      "Bradley Hand",
      "Comic Sans MS",
      cursive;

    font-weight:700;
    text-shadow:0 3px 10px rgba(0,0,0,.28);
  }

  .mobile-hand{
    margin:4px auto;

    font-size:clamp(1.45rem,6.5vw,2.15rem);
    line-height:1.2;

    transform:rotate(-3deg);
  }

  .mobile-hand b{
    color:var(--yellow);
  }

  /* Πλαίσιο Βαμβακόπουλου */
  .mobile-branch{
    position:relative;
    z-index:5;

    width:100%;
    padding:16px;

    border:2px solid rgba(255,212,39,.5);
    border-radius:22px;

    background:rgba(2,22,54,.82);
    box-shadow:0 16px 36px rgba(0,0,0,.24);
  }

  .mobile-branch small,
  .mobile-branch strong,
  .mobile-branch span{
    display:block;
  }

  .mobile-branch small{
    color:var(--yellow);
    font-size:1rem;
    font-weight:800;
  }

  .mobile-branch strong{
    margin:4px 0;

    font-size:clamp(1.55rem,7vw,2.2rem);
    line-height:1.1;
  }

  .mobile-branch span{
    font-size:clamp(.95rem,4vw,1.1rem);
    font-weight:700;
  }

  /* Κουμπιά κινητού */
  .mobile-actions{
    position:relative;
    z-index:5;

    display:grid;
    grid-template-columns:1fr;
    gap:12px;

    width:100%;
  }

  .mobile-btn{
    min-height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:14px 18px;

    border:2px solid rgba(255,255,255,.28);
    border-radius:18px;

    color:var(--white);
    font-size:1rem;
    font-weight:900;
    text-align:center;

    box-shadow:0 12px 28px rgba(0,0,0,.25);
    transition:
      transform .18s ease,
      filter .18s ease;
  }

  .mobile-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.06);
  }

  .mobile-btn.red,
  .red{
    background:var(--red);
  }

  .mobile-btn.green,
  .green{
    background:var(--green);
  }

  /* Δεύτερο χειρόγραφο σλόγκαν */
  .mobile-dreams{
    margin:4px 0 0;

    font-size:clamp(1.35rem,6vw,1.95rem);
    line-height:1.25;

    transform:rotate(-1.5deg);
  }

  .mobile-dreams em{
    color:var(--yellow);
    font-style:normal;

    text-decoration:underline;
    text-decoration-thickness:4px;
    text-underline-offset:7px;
  }

  /* Διακοσμητικά σύμβολα */
  .doodle{
    position:absolute;
    z-index:1;

    opacity:.14;
    font-weight:700;
    pointer-events:none;
  }

  .d1{
    left:-10px;
    top:25px;
    font-size:6rem;
  }

  .d2{
    right:12px;
    top:55px;
    font-size:2rem;
  }

  .d3{
    left:12px;
    top:48%;
    font-size:5rem;
  }

  .d4{
    right:-20px;
    top:32%;
    font-size:8rem;
  }

  /* =====================================================
     ΚΙΤΡΙΝΗ ΕΝΟΤΗΤΑ
     ===================================================== */

  .mobile-yellow{
    width:100%;

    display:grid;
    grid-template-columns:1fr;
    gap:16px;

    padding:22px 18px;

    background:
      linear-gradient(
        180deg,
        #ffd51e,
        #f7c30d
      );

    color:var(--ink);
    text-align:center;
  }

  .mobile-yellow div{
    display:grid;
    gap:5px;
  }

  .mobile-yellow small{
    font-weight:800;
  }

  .mobile-yellow strong{
    font-size:2rem;
  }

  .mobile-yellow span{
    font-weight:700;
    line-height:1.45;
  }

  .mobile-yellow a{
    justify-self:center;

    padding:13px 22px;

    border-radius:999px;

    background:var(--navy);
    color:var(--white);

    font-weight:900;
  }

  /* =====================================================
     ΛΕΥΚΗ ΕΝΟΤΗΤΑ
     ===================================================== */

  .mobile-white{
    width:100%;

    display:grid;
    grid-template-columns:1fr;
    gap:16px;

    padding:24px 16px 30px;

    background:var(--white);
    color:var(--ink);
  }

  .mobile-white h2{
    margin:0 0 4px;
    text-align:center;
    font-size:clamp(1.3rem,5.5vw,1.8rem);
  }

  .mobile-white article{
    padding:18px;

    border-radius:18px;

    background:var(--white);
    text-align:center;

    box-shadow:0 8px 28px rgba(3,26,63,.12);
  }

  .mobile-white article div{
    font-size:2.4rem;
  }

  .mobile-white h3{
    margin:8px 0 6px;
  }

  .mobile-white p{
    margin:0;
    line-height:1.5;
  }

  /* =====================================================
     ΣΤΑΤΙΣΤΙΚΑ
     ===================================================== */

  .mobile-stats{
    width:100%;

    display:grid;
    grid-template-columns:1fr;
    gap:14px;

    padding:22px 16px;

    background:var(--navy);
    color:var(--white);

    text-align:center;
  }

  .mobile-stats div{
    display:grid;
    gap:4px;
  }

  .mobile-stats strong{
    color:var(--yellow);
    font-size:2rem;
  }

  /* =====================================================
     FOOTER ΚΙΝΗΤΟΥ
     ===================================================== */

  .mobile-footer{
    width:100%;

    display:grid;
    grid-template-columns:1fr;
    gap:22px;

    padding:24px 18px;

    background:var(--white);
    color:var(--ink);

    text-align:center;
  }

  .mobile-footer h3{
    margin:0 0 8px;
  }

  .mobile-footer p,
  .mobile-footer a{
    display:block;
    margin:6px 0;
  }

  .mobile-footer a{
    font-weight:700;
  }

  .socials{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
  }

  .socials a{
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:var(--navy);
    color:var(--white);

    font-size:1.5rem;
    font-weight:900;
  }
}

/* =====================================================
   ΠΟΛΥ ΜΙΚΡΑ ΚΙΝΗΤΑ
   ===================================================== */

@media (max-width:420px){

  .mobile-hero{
    padding-left:14px;
    padding-right:14px;
  }

  .mobile-logo-image{
    width:96vw;
  }

  .mobile-hand{
    font-size:1.4rem;
  }

  .mobile-dreams{
    font-size:1.3rem;
  }

  .mobile-btn{
    font-size:.95rem;
  }
}