/* =========================
   HERO / HEADER BACKGROUND
========================= */
.hero {
  position: relative;

  /* κρατάμε ακριβώς τη λογική που σου αρέσει */
  min-height: min(2000svh, 62.25vw);

  /* αλλά ΔΕΝ το κλειδώνουμε */
  height: auto;

  overflow: hidden;

  color: var(--white);


  background:
    radial-gradient(
      ellipse 55% 75% at -12% 5%,
      rgba(145, 0, 255, 0.72) 0%,
      rgba(115, 0, 210, 0.42) 28%,
      rgba(60, 0, 110, 0.18) 52%,
      rgba(12, 2, 31, 0) 74%
    );
}

.hero-stars {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0.18;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.85);
  animation: star-twinkle 3.6s ease-in-out infinite;
}

.star--1 {
  top: 12%;
  left: 7%;
  animation-delay: -0.4s;
  animation-duration: 3.2s;
}

.star--2 {
  top: 18%;
  left: 24%;
  width: 2px;
  height: 2px;
  animation-delay: -1.2s;
  animation-duration: 4.4s;
}

.star--3 {
  top: 8%;
  left: 42%;
  animation-delay: -2.3s;
  animation-duration: 3.8s;
}

.star--4 {
  top: 24%;
  left: 58%;
  width: 2px;
  height: 2px;
  animation-delay: -0.8s;
  animation-duration: 5.1s;
}

.star--5 {
  top: 11%;
  right: 19%;
  animation-delay: -1.9s;
  animation-duration: 3.5s;
}

.star--6 {
  top: 31%;
  right: 7%;
  width: 2px;
  height: 2px;
  animation-delay: -2.7s;
  animation-duration: 4.8s;
}

.star--7 {
  top: 46%;
  left: 11%;
  width: 2px;
  height: 2px;
  animation-delay: -1.6s;
  animation-duration: 3.1s;
}

.star--8 {
  top: 56%;
  left: 32%;
  animation-delay: -0.3s;
  animation-duration: 4.2s;
}

.star--9 {
  top: 42%;
  left: 48%;
  width: 2px;
  height: 2px;
  animation-delay: -2.4s;
  animation-duration: 5.4s;
}

.star--10 {
  top: 62%;
  right: 17%;
  animation-delay: -1.1s;
  animation-duration: 3.7s;
}

.star--11 {
  top: 72%;
  right: 5%;
  width: 2px;
  height: 2px;
  animation-delay: -3s;
  animation-duration: 4.5s;
}

.star--12 {
  top: 79%;
  left: 19%;
  animation-delay: -0.7s;
  animation-duration: 3.4s;
}

.star--13 {
  top: 83%;
  left: 54%;
  width: 2px;
  height: 2px;
  animation-delay: -2.1s;
  animation-duration: 5.2s;
}

.star--14 {
  top: 68%;
  left: 72%;
  animation-delay: -1.4s;
  animation-duration: 3.9s;
}

.star--15 {
  top: 37%;
  left: 84%;
  width: 2px;
  height: 2px;
  animation-delay: -2.8s;
  animation-duration: 4.7s;
}

@keyframes star-twinkle {
  0%,
  100% {
    opacity: 0.12;
    transform: scale(0.75);
  }

  45% {
    opacity: 0.9;
    transform: scale(1.35);
  }

  60% {
    opacity: 0.32;
    transform: scale(0.9);
  }
}


/* =========================
   HERO
========================= */


.hero {
  position: relative;

  height: min(100svh, 62.25vw);
  max-height: none;

  overflow: hidden;

  color: var(--white);

  background:
    radial-gradient(
      ellipse 55% 75% at -12% 5%,
      rgba(145, 0, 255, 0.72) 0%,
      rgba(115, 0, 210, 0.42) 28%,
      rgba(60, 0, 110, 0.18) 52%,
      rgba(12, 2, 31, 0) 74%
    );
}


  /* Το content παραμένει 50 / 50,
     αλλά η εικόνα βγαίνει από το grid */

.hero-content {
  position: static;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    45%;

  column-gap:
    clamp(28px, 3.5vw, 65px);

  width: 100%;

  height: auto;

  padding:
    20px
    0
    50px;
}


.hero-copy {
  position: relative;

  z-index: 3;

  width: auto;
  max-width: 700px;

  margin:
    clamp(10px, 6vw, 80px)
    0
    60px
    10vw;

  align-self: start;

  min-width: 0;
}


.hero-copy h1 {
  margin: 0px;
  font-size: clamp(20px, 3.4vw, 60px);
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.hero-copy h1 span {
  color: rgba(202, 127, 255, 1);
}

/* Απόσταση title → subtitle: 38px */

.hero-subtitle {
  margin: 2.3vw 0 0;
  color: var(--text-muted);
  font-size: clamp(10px, 1.5vw, 25px);
  font-weight: 500;
  letter-spacing: 0.1cap;
  line-height: 1.60;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Απόσταση subtitle → button: 60px */

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: clamp(180px, 20vw, 285px);
  height: clamp(20px, 5vw, 52px);
  margin-top: clamp(40px, 3.4vw, 60px);
  margin-bottom: clamp(-30px, 1.5vw, 30px);
  
  border-radius: 999px;
  border: 0.01px solid rgba(202, 127, 255, 1);
  border-width: 2px;
  color: #FFFFFF;
  background:rgba(71, 8, 82, 0.5);
  box-shadow: 0 12px 30px rgba(225, 32, 255, 0.16);
  font-size: clamp(10px, 1.5vw, 14px);
  font-weight: 800;
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.hero-cta:hover {
  box-shadow: 0 10px 40px rgba(225, 32, 255, 0.28);
  transform: translateY(-3px);
}

.hero-cta span {
  font-size: 21px;
  line-height: 1;
}

/* =========================
   HERO VISUAL
========================= */
 .hero-visual {
    position: absolute;
    
    z-index: 1;

    top: 0;
    right: 0;
    bottom: 0px;

    display: block;

    width: 45%;
    height: auto;
  }

.hero-frame {
    position: absolute;

    inset: 0;
    
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* αφαιρούμε το card look */
    aspect-ratio: auto;

    border-radius: 0;

    background: none;

    box-shadow: none;
  }


.hero-frame__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  /*
    Η εικόνα παραμένει κανονική μέχρι περίπου 78%
    και μετά χάνεται σταδιακά μέσα στο background.
  */

  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 75%,
    rgba(0, 0, 0, 0.92) 83%,
    rgba(0, 0, 0, 0.68) 88%,
    rgba(0, 0, 0, 0.35) 94%,
    transparent 100%
  );

  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 75%,
    rgba(0, 0, 0, 0.92) 83%,
    rgba(0, 0, 0, 0.68) 88%,
    rgba(0, 0, 0, 0.35) 94%,
    transparent 100%
  );
}




@media (max-width: 1150px) {
.hero-copy {
  position: center;

  z-index: 3;

  width: auto;
  max-width: 700px;

  margin:
    3vw
    0
    0
    10vw;

  align-self: start;
  padding-left:0px;
  min-width: 0;
}
}


/* =========================================
   HERO — MOBILE
   ≤ 750px
========================================= */

@media (max-width: 750px) {
  
    .star--6 {display:none;}
    .star--10 {display:none;}
    .star--11 {display:none;}

    
    .hero-stars {
    position: absolute;
    inset: 0;

    z-index: 3;

    pointer-events: none;
  }

  .hero {
    position: relative;

    width: 100%;

    min-height: 0.9svh;
    height: auto;

    overflow: hidden;
  }


  /* =========================
     FULL BACKGROUND IMAGE
  ========================= */



.site-header {
  position: absolute;

  z-index: 5;

  top: 0;
  left: 0;

  width: 100%;

  background: transparent;
}

  /* =========================
   IMAGE — FULL HERO MOBILE
========================= */

.hero-visual {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 130%;
  height: 100%;

  z-index: 1;
}

.hero-frame {
  position: absolute;

  inset: 0;

  width: 130%;
  height: 100%;

  max-width: none;
  max-height: none;

  aspect-ratio: auto;

  border-radius: 0;
}

.hero-frame__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

  /* ελαφρύ layer για να διαβάζονται τα γράμματα */

  .hero-visual::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
      linear-gradient(
        to bottom,
        rgba(55, 10, 140, 0.22) 0%,
        rgba(12, 2, 31, 0.38) 50%
      );

    pointer-events: none;
  }


  /* =========================
     CONTENT
  ========================= */

  .hero-content {
    position: relative;

    z-index: 2;

    display: flex;

    width: 100%;

    min-height: 90svh;

    margin: 0;

    padding:
      0px
      24px
      70px;

    flex-direction: column;
    align-items: center;
    justify-content: center;
  }


  /* =========================
     COPY
  ========================= */

  .hero-copy {
    width: 100%;
    max-width: 520px;

    margin: 0 auto;

    padding:0 20px 0;

    text-align: center;
  }


  .hero-copy h1 {
    max-width: 500px;

    margin: 23vw auto 0px;

    font-size: 5.5vw;

    line-height: 1.1;


    text-align: center;
        text-shadow:
      0 2px 8px rgba(0, 0, 0, 0.55),
      0 6px 24px rgba(69, 69, 69, 0.35);
  }


  .hero-subtitle {
    max-width: 520px;

    margin:
      5vw
      auto
      0;

    color:white;

    font-size: 2.8vw;

    line-height: 1.6;

    letter-spacing: normal;

    text-align: center;
        text-shadow:
      0 2px 8px rgba(0, 0, 0, 0.55),
      0 6px 24px rgba(0, 0, 0, 0.35);
  }


  /* =========================
     CTA
  ========================= */

  .hero-cta {
    display: inline-flex;

    width: 100%;
    max-width: 275px;

    height: 52px;

    margin:
      13vw
      auto
      0;

    font-size: 13px;
  }


}