/* =========================================================
   MilkEVs — στυλ δημόσιας σελίδας
   Τα χρώματα αλλάζουν από τις μεταβλητές στο :root.
   ========================================================= */

:root {
  --purple: #410078;   /* τίτλοι, logo */
  --blue:   #005580;   /* έμφαση στον τίτλο */
  --violet: #8522b1;   /* hover, ετικέτες */
  --ink:    #182446;   /* κείμενο */
  --muted:  #596079;   /* δευτερεύον κείμενο */
  --mint:   #009d8a;   /* κουμπί συμμετοχής */
  --line:   #eee4f5;   /* γραμμές, περιγράμματα */
  --soft:   #fbf8ff;   /* απαλό φόντο ενοτήτων */
  --radius: 24px;
  --font-body:  "Inter", "Segoe UI", Arial, sans-serif;
  --font-title: "Nunito Sans", "Inter", Arial, sans-serif;
}

/* ---------- Βάση ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; } /* οι σύνδεσμοι # σταματούν κάτω από την κεφαλίδα */
body { margin: 0; color: var(--ink); font-family: var(--font-body); background: #fff; line-height: 1.55; }
img { max-width: 100%; display: block; }
p { margin-top: 0; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--font-title); line-height: 1.13; color: var(--purple); }
h1 { font-size: clamp(2.1rem, 3.5vw, 3.5rem); letter-spacing: -.03em; margin: 0 0 20px; }
h2 { font-size: clamp(1.8rem, 3vw, 2.65rem); margin: 0 0 15px; }

.container { width: min(1180px, 92%); margin: auto; }

.eyebrow { font-size: 12px; letter-spacing: .14em; color: #9b44b6; font-weight: 800; text-transform: uppercase; }
.note { font-size: 13px; color: var(--muted); }

/* ---------- Κουμπιά ---------- */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: 28px; padding: 13px 23px; cursor: pointer;
  background: linear-gradient(100deg, #9121ad, #49008b); color: #fff;
  text-decoration: none; font-weight: 800; box-shadow: 0 7px 18px #67008825;
}
.cta:hover { filter: brightness(1.1); }
.cta.alt { background: linear-gradient(100deg, #09b79d, #007f86); }

/* ---------- Κεφαλίδα ---------- */
.header { position: sticky; top: 0; z-index: 10; background: #fffefef5; backdrop-filter: blur(14px); border-bottom: 1px solid #eee7f6; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-symbol { height: 49px; width: 45px; }
.brand-word { font-family: var(--font-title); font-weight: 900; font-size: 28px; letter-spacing: -1px; color: var(--purple); }
.brand-word span { color: var(--blue); }
.brand small { display: block; color: #46536e; font-size: 10px; line-height: 1.15; font-weight: 600; }
.navlinks { display: flex; align-items: center; gap: 23px; }
.navlinks a { color: var(--ink); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.navlinks a:hover { color: var(--violet); }
.lang { border: 1px solid #e2c9f3; background: #fff; border-radius: 30px; padding: 7px 11px; color: var(--purple); cursor: pointer; font-weight: 800; }
.menu { display: none; background: #fff; border: 0; font-size: 25px; color: var(--purple); cursor: pointer; }

/* ---------- Κεντρική εικόνα ----------
   Η εικόνα assets/hero.jpg καλύπτει όλο το πλάτος:
   μητέρα αριστερά, κυστίδια δεξιά, κείμενο στη μέση. */
.hero { position: relative; overflow: hidden; background: #f7f3ff; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-grid { position: relative; display: grid; grid-template-columns: 36% minmax(0, 50%) 1fr; align-items: center; min-height: clamp(420px, 32vw, 560px); }
.hero-copy { grid-column: 2; padding: 56px 0 72px; }
.hero-copy h1 em { font-style: normal; color: #0b5ea8; } /* μπλε τμήμα του τίτλου */
.hero-copy p { font-size: 18px; max-width: 520px; }
.hero-cta { margin-top: 14px; }   /* απόσταση κουμπιού από το κείμενο */

/* ---------- Πεδία ---------- */
.features { padding: 24px 0 29px; border-bottom: 1px solid #f1e9f9; }
.feature-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.feature { display: flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 700; }
.feature-icon { flex: 0 0 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; }
.feature-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* ένα χρώμα της παλέτας για κάθε εικονίδιο (από την κεντρική εικόνα) */
.feature:nth-child(1) .feature-icon { background: #efe4ff; color: #7a2fc0; }  /* μωβ */
.feature:nth-child(2) .feature-icon { background: #ffe4f1; color: #c2338a; }  /* φούξια */
.feature:nth-child(3) .feature-icon { background: #e2efff; color: #1f6fd1; }  /* μπλε */
.feature:nth-child(4) .feature-icon { background: #ddf5ef; color: #0f9a83; }  /* πράσινο-τιρκουάζ */
.feature:nth-child(5) .feature-icon { background: #ffeadf; color: #e0703f; }  /* πορτοκαλί-κοραλί */

/* ---------- Ενότητες ---------- */
section.content { padding: 85px 0; }
.soft { background: var(--soft); }
/* «Τι είναι» και «Συμμετοχή» έχουν το ίδιο πλέγμα: κείμενο αριστερά, εικόνα/κουτί δεξιά, στις ίδιες θέσεις */
.intro-grid, .participate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.vesicle-img { width: min(340px, 75%); margin: auto; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 72%); mask-image: radial-gradient(circle, #000 58%, transparent 72%); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: 0 12px 34px #38105c0b; }
.card .number { font-size: 31px; color: #a866d1; }

/* ---------- Συμμετοχή ---------- */
.participate { padding: 80px 0; background: linear-gradient(110deg, #fceaf2, #f4edff 65%, #e9f9f5); }
.panel { position: relative; background: #fff; border-radius: 28px; padding: 30px; box-shadow: 0 12px 38px #4d1d6a16; }
.panel-art { position: absolute; right: 18px; top: -46px; width: 96px; border-radius: 50%; mix-blend-mode: multiply; }
.panel h3 { margin-top: 0; padding-right: 90px; }

/* ---------- Συχνές ερωτήσεις ---------- */
.faq details { border-bottom: 1px solid #e8dff0; padding: 17px 0; }
.faq summary { cursor: pointer; font-weight: 800; color: var(--purple); }
.faq details p { padding-top: 12px; margin: 0; }

/* ---------- Υποσέλιδο ---------- */
.footer { background: #f1e7f8; padding: 34px 0; color: #463457; }
.footer-grid { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.footer a { color: var(--purple); }

/* ---------- Tablet / κινητό ---------- */
@media (max-width: 900px) {
  .menu { display: block; }
  .navlinks { display: none; position: absolute; top: 77px; left: 0; right: 0; padding: 24px; background: #fff; flex-direction: column; box-shadow: 0 12px 20px #1a003019; }
  .navlinks.open { display: flex; }

  /* η εικόνα πάει πάνω (δείχνει τη μητέρα) και το κείμενο από κάτω */
  .hero-bg { position: relative; height: 260px; object-position: 12% center; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { grid-column: 1; padding: 28px 0 55px; }

  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .intro-grid, .participate-grid, .cards { grid-template-columns: 1fr; }
  .footer-grid { display: block; }
  .footer-grid > div + div { margin-top: 16px; }
}

@media (max-width: 520px) {
  .brand small { display: none; }
  .hero-bg { height: 220px; }
  .hero-copy p { font-size: 16px; }
  .feature { font-size: 12px; }
  .feature-icon { flex-basis: 43px; height: 43px; }
  .feature-icon svg { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }