:root{
  --navy:#072b63;
  --navy-dark:#031a3f;
  --yellow:#ffd427;
  --red:#ef1f2f;
  --green:#35b51f;
  --orange:#f47b0c;
  --white:#ffffff;
}

*{box-sizing:border-box}

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

body{
  overflow-x:hidden;
}

.landing{
  min-height:100vh;
}

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

.approved-image{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}

/* Ενεργές περιοχές επάνω στα πραγματικά κουμπιά της μακέτας.
   Τα ποσοστά τα κρατούν στη σωστή θέση σε laptop, tablet και desktop. */
.hotspot{
  position:absolute;
  z-index:10;
  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:17.55%;
  top:45.55%;
  width:18.8%;
  height:10.5%;
}

.trial{
  left:38.35%;
  top:45.55%;
  width:21.5%;
  height:10.5%;
}

.contact{
  left:62.2%;
  top:45.55%;
  width:22.1%;
  height:10.5%;
}

.more{
  left:75.15%;
  top:66%;
  width:16.8%;
  height:6.5%;
}

.mobile-panel,
.seo-copy{
  display:none;
}

/* Πολύ μεγάλες οθόνες: η εγκεκριμένη μακέτα μεγαλώνει αναλογικά
   και παραμένει κεντραρισμένη χωρίς παραμόρφωση. */
@media (min-width:1921px){
  .approved-stage{
    max-width:none;
  }
  .approved-image{
    width:100vw;
  }
}

/* Tablet portrait και κινητά:
   κρατάμε την εγκεκριμένη εικόνα ως κεντρικό visual,
   αλλά δίνουμε πραγματικά, μεγάλα κουμπιά από κάτω για άνετη χρήση. */
@media (max-width:820px){
  .approved-stage{
    overflow:hidden;
  }

  .approved-image{
    width:165%;
    max-width:none;
    margin-left:-32.5%;
  }

  .hotspot{
    display:none;
  }

  .mobile-panel{
    display:grid;
    gap:12px;
    padding:22px 16px calc(24px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 50% 0%,rgba(36,102,190,.4),transparent 42%),
      linear-gradient(180deg,var(--navy),var(--navy-dark));
    color:var(--white);
    text-align:center;
  }

  .mobile-brand strong{
    display:block;
    color:var(--yellow);
    font-size:clamp(2rem,10vw,3.4rem);
    line-height:1;
  }

  .mobile-brand span{
    display:block;
    margin-top:6px;
    font-size:.95rem;
    text-transform:uppercase;
    letter-spacing:.06em;
  }

  .mobile-slogan{
    margin:8px 0;
    font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
    font-size:1.3rem;
    font-weight:700;
  }

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

  .mobile-branch{
    padding:14px;
    border-radius:18px;
    background:rgba(2,22,54,.78);
    border:2px solid rgba(255,212,39,.45);
  }

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

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

  .mobile-branch strong{
    margin:3px 0;
    font-size:1.45rem;
  }

  .mobile-btn{
    min-height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 18px;
    border-radius:16px;
    color:#fff;
    text-decoration:none;
    font-weight:900;
    box-shadow:0 12px 28px rgba(0,0,0,.25);
  }

  .mobile-btn.red{background:var(--red)}
  .mobile-btn.green{background:var(--green)}
  .mobile-btn.orange{background:var(--orange)}

  .seo-copy{
    display:block;
    padding:18px 18px 28px;
    background:#fff;
    color:#0a2a59;
    text-align:center;
  }

  .seo-copy h1{
    margin:0 0 10px;
    font-size:1.2rem;
  }

  .seo-copy p{
    margin:7px 0;
    line-height:1.5;
  }

  .seo-copy a{
    color:#0a2a59;
    font-weight:700;
  }
}

@media (max-width:480px){
  .approved-image{
    width:200%;
    margin-left:-50%;
  }
}

@media (prefers-reduced-motion:no-preference){
  .mobile-btn{
    transition:transform .18s ease,filter .18s ease;
  }
  .mobile-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.06);
  }
}

.mobile-layout{display:none}
@media(max-width:820px){
.approved-stage,.seo-copy{display:none!important}.mobile-layout{display:block;position:relative;overflow:hidden;color:#fff;background:radial-gradient(circle at 18% 8%,rgba(255,212,39,.10),transparent 18%),radial-gradient(circle at 80% 18%,rgba(244,123,12,.10),transparent 20%),radial-gradient(circle at 50% 18%,rgba(36,102,190,.45),transparent 38%),linear-gradient(180deg,#062e69 0%,#0b4b98 55%,#031a3f 100%)}
.mobile-hero-card{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:34px 18px 30px;text-align:center}.mobile-brand strong{display:block;color:var(--yellow);font-size:clamp(2.8rem,14vw,4.6rem);line-height:.92;text-shadow:0 4px 16px rgba(0,0,0,.28)}.mobile-brand span{display:block;margin-top:9px;font-size:clamp(.85rem,3.4vw,1.05rem);text-transform:uppercase;letter-spacing:.08em}.mobile-hand-note{margin:0 auto;font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;font-size:clamp(1.35rem,6vw,2rem);line-height:1.35;transform:rotate(-2deg);text-shadow:0 3px 10px rgba(0,0,0,.24)}.mobile-hand-note b{color:var(--yellow)}
.mobile-branch{padding:16px;border-radius:22px;background:rgba(2,22,54,.82);border:2px solid rgba(255,212,39,.50);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-weight:800}.mobile-branch strong{margin:4px 0;font-size:clamp(1.55rem,7vw,2.2rem)}.mobile-branch span{font-size:1.05rem;font-weight:700}.mobile-actions-stack{display:grid;gap:12px}.mobile-btn{min-height:58px;display:flex;align-items:center;justify-content:center;padding:14px 18px;border-radius:18px;color:#fff;text-decoration:none;font-weight:900;box-shadow:0 12px 28px rgba(0,0,0,.25);border:2px solid rgba(255,255,255,.28)}.mobile-btn.red{background:var(--red)}.mobile-btn.green{background:var(--green)}.mobile-btn.orange{background:var(--orange)}.mobile-slogan{margin:4px 0 0;font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;font-size:clamp(1.25rem,5.7vw,1.8rem);font-weight:700}.mobile-slogan em{color:var(--yellow);font-style:normal;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.mobile-doodles .md{position:absolute;z-index:1;opacity:.15;color:#fff;font-weight:700;pointer-events:none}.md1{font-size:6rem;left:-1rem;top:2rem}.md2{font-size:2rem;right:1rem;top:5rem}.md3{font-size:5rem;left:1rem;top:42%}.md4{font-size:8rem;right:-2rem;top:30%}.md5{font-size:5rem;right:1rem;bottom:6rem}.md6{font-size:5rem;left:1rem;bottom:3rem}
.mobile-yellow-strip{display:grid;gap:16px;padding:22px 18px;background:linear-gradient(180deg,#ffd51e,#f7c30d);color:#0a2a59;text-align:center}.mobile-yellow-strip div{display:grid;gap:5px}.mobile-yellow-strip small{font-weight:800}.mobile-yellow-strip strong{font-size:2rem}.mobile-yellow-strip span{font-weight:700;line-height:1.45}.mobile-yellow-strip a{justify-self:center;padding:13px 22px;border-radius:999px;background:#082b62;color:#fff;font-weight:900;text-decoration:none}
.mobile-white-strip{display:grid;gap:16px;padding:24px 16px 30px;background:#fff;color:#0a2a59}.mobile-white-strip h2{margin:0;text-align:center;font-size:1.35rem}.mobile-white-strip article{text-align:center;padding:18px;border-radius:18px;background:#fff;box-shadow:0 8px 28px rgba(3,26,63,.12)}.mobile-white-strip article div{font-size:2.4rem}.mobile-white-strip h3{margin:8px 0 6px}.mobile-white-strip p{margin:0;line-height:1.5}.mobile-contact{padding:18px;text-align:center;border-radius:16px;background:#f4f7fb;line-height:1.7}.mobile-contact a{color:#0a2a59;font-weight:800}
}


/* v2.2 — Social icons + mobile slogans matching desktop */
@media (max-width:820px){
  .mobile-hand-note,
  .mobile-slogan{
    font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
    font-style:normal;
    font-weight:700;
    letter-spacing:.01em;
    text-shadow:0 3px 10px rgba(0,0,0,.28);
  }

  .mobile-hand-note{
    transform:rotate(-3deg);
    line-height:1.35;
  }

  .mobile-hand-note b{
    color:#ffd427;
    font-weight:800;
  }

  .mobile-slogan{
    transform:rotate(-1deg);
  }

  .mobile-slogan em{
    color:#ffd427;
    font-style:normal;
    text-decoration:underline;
    text-decoration-thickness:3px;
    text-underline-offset:6px;
  }

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

  .social-link{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,.24);
    transition:transform .18s ease, filter .18s ease;
  }

  .social-link:hover{
    transform:translateY(-2px);
    filter:brightness(1.05);
  }

  .social-link svg{
    width:25px;
    height:25px;
    display:block;
  }

  .facebook-link{
    color:#1877f2;
  }

  .facebook-link svg path{
    fill:currentColor;
  }

  .instagram-link{
    color:#c13584;
  }

  .instagram-link svg circle:last-child{
    fill:currentColor;
  }
}


/* v2.3 — mobile social link reliability */
@media (max-width:820px){
  .mobile-socials{
    position:relative;
    z-index:50;
    pointer-events:auto;
  }

  .social-link{
    position:relative;
    z-index:51;
    pointer-events:auto;
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(255,255,255,.2);
  }

  .social-link svg{
    pointer-events:none;
  }
}


/* v2.4 — clickable Facebook / Instagram on desktop */
.desktop-social{
  position:absolute;
  z-index:20;
  display:block;
  border-radius:50%;
  cursor:pointer;
  outline-offset:4px;
}

.desktop-social:focus-visible{
  outline:4px solid #ffffff;
  box-shadow:0 0 0 8px rgba(255,212,39,.85);
}

/* Coordinates over the icons in the approved desktop artwork */
.desktop-facebook{
  left:72.65%;
  top:93.15%;
  width:3.15%;
  height:5.45%;
}

.desktop-instagram{
  left:76.05%;
  top:93.15%;
  width:3.15%;
  height:5.45%;
}

@media (max-width:820px){
  .desktop-social{
    display:none;
  }
}


/* v2.5 — mobile slogans visually matching the desktop artwork */
@media (max-width:820px){
  .mobile-hand-note{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    width:min(92%,430px);
    margin:0 auto 2px;
    font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
    font-size:clamp(1.45rem,6.5vw,2.15rem);
    line-height:1.15;
    font-weight:700;
    color:#fff;
    text-align:center;
    transform:rotate(-4deg);
    text-shadow:0 3px 10px rgba(0,0,0,.30);
  }

  .mobile-hand-note span{
    display:block;
  }

  .mobile-hand-note b{
    color:#ffd427;
    font-weight:800;
  }

  .mobile-hand-note::after{
    content:"";
    width:58%;
    height:4px;
    margin-top:5px;
    border-radius:999px;
    background:#ffd427;
    transform:rotate(-3deg);
  }

  .mobile-slogan{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    margin:4px auto 0;
    font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
    font-size:clamp(1.35rem,6vw,1.95rem);
    line-height:1.18;
    font-weight:700;
    color:#fff;
    text-align:center;
    transform:rotate(-1.5deg);
    text-shadow:0 3px 10px rgba(0,0,0,.28);
  }

  .mobile-slogan span,
  .mobile-slogan em{
    display:block;
  }

  .mobile-slogan em{
    color:#ffd427;
    font-style:normal;
    text-decoration:underline;
    text-decoration-thickness:4px;
    text-underline-offset:7px;
    text-decoration-color:#ffd427;
  }
}


/* v2.6 — actual mobile logo + desktop-matching slogans */
@media (max-width:820px){
  .mobile-brand{
    display:grid;
    justify-items:center;
    width:100%;
    margin:0 auto 4px;
  }

  .mobile-logo{
    width:min(96vw,620px);
    height:auto;
    max-height:170px;
    object-fit:contain;
    object-position:center;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,.25));
  }

  .mobile-hand-note{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    width:min(94%,460px);
    margin:0 auto 4px;
    font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
    font-size:clamp(1.55rem,6.7vw,2.25rem);
    line-height:1.13;
    font-weight:700;
    color:#fff;
    text-align:center;
    transform:rotate(-4deg);
    text-shadow:0 3px 10px rgba(0,0,0,.30);
  }

  .mobile-hand-note span{
    display:block;
  }

  .mobile-hand-note b{
    color:#ffd427;
    font-weight:800;
  }

  .mobile-hand-note::after{
    content:"";
    width:62%;
    height:4px;
    margin-top:6px;
    border-radius:999px;
    background:#ffd427;
    transform:rotate(-3deg);
  }

  .mobile-slogan{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    width:min(94%,500px);
    margin:6px auto 0;
    font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
    font-size:clamp(1.45rem,6.2vw,2rem);
    line-height:1.16;
    font-weight:700;
    color:#fff;
    text-align:center;
    transform:rotate(-1.5deg);
    text-shadow:0 3px 10px rgba(0,0,0,.28);
  }

  .mobile-slogan span,
  .mobile-slogan em{
    display:block;
  }

  .mobile-slogan em{
    color:#ffd427;
    font-style:normal;
    text-decoration:underline;
    text-decoration-thickness:4px;
    text-underline-offset:7px;
    text-decoration-color:#ffd427;
  }
}


/* v2.7 — official logo with 4 red balls */
.desktop-official-logo{
  position:absolute;
  z-index:30;
  left:27.2%;
  top:1.1%;
  width:45.6%;
  height:auto;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.18));
}

@media (max-width:820px){
  .desktop-official-logo{
    display:none;
  }

  .mobile-logo{
    width:min(96vw,620px);
    height:auto;
    max-height:170px;
    object-fit:contain;
    object-position:center;
  }
}