/* =====================================================================
   Humera · v13 · Οι λύσεις μας
   Ίδια tokens με την αρχική (Manrope, ανοιχτό φόντο, ember/ink). Η σελίδα έχει τρεις σκηνές:
   1) οι τέσσερις μικρές ομάδες ως επιλογές, 2) η σκηνή λύσης με διάγραμμα που χτίζεται,
   3) οι μορφές συνεργασίας ως μία γραμμή χρόνου που αλλάζει ρυθμό.
   ===================================================================== */

/* ---------- 1. Εισαγωγή + επιλογές ---------- */
.sx-hero { padding: clamp(150px, 24vh, 230px) 0 0; }
.sx-hero__top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); column-gap: clamp(32px, 6vw, 96px); align-items: end; }
.sx-hero .lead { max-width: 30rem; padding-bottom: .5em; }
.sx-picks { display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(48px, 8vh, 80px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.sx-picks li + li { border-left: 1px solid var(--hair); }
.sx-pick { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px; padding: 22px clamp(14px, 1.6vw, 24px) 24px; text-decoration: none; color: var(--ink); height: 100%; }
.sx-pick::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--ember); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.sx-pick:hover::after, .sx-pick:focus-visible::after { transform: none; }
.sx-pick__fig { grid-column: 1 / -1; width: 120px; height: 84px; margin-bottom: 14px; }
.sx-pick__fig svg { width: 100%; height: 100%; overflow: visible; }
.sx-pick__n { grid-row: 2; font-size: .74rem; font-weight: 700; letter-spacing: .12em; color: var(--ember-deep); padding-top: .25em; }
.sx-pick__t { grid-row: 2; font-size: 1.12rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.sx-pick__w { grid-column: 2; font-size: .86rem; color: var(--ink-2); margin-top: 6px; }
/* διακριτικά παιχνιδιάρικο: στο hover τα ανθρωπάκια της ομάδας κάνουν ένα μικρό «σήκωμα», ένα-ένα */
.sx-pick .pp { transition: transform .35s var(--ease); transition-delay: var(--d); transform-box: fill-box; }
.sx-pick:hover .pp { transform: translateY(-4px); }
.sx-pick .ln { stroke-dashoffset: 0; }

/* ---------- 2. Σκηνή λύσης ---------- */
.sx-stage { padding-top: var(--sec); scroll-margin-top: 80px; }
.sx-panel { position: relative; background: var(--white); border-radius: 40px; padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px) clamp(28px, 3vw, 44px);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 50px 100px -60px rgba(14,26,60,.35); }
.sx-tabs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 5px; border-radius: 999px; background: var(--bg-1); }
.sx-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; background: none; padding: 13px 14px; border-radius: 999px;
  font: 600 .92rem var(--f); color: var(--ink-2); cursor: pointer; transition: color .3s; white-space: nowrap; }
.sx-tab span { font-size: .72rem; letter-spacing: .1em; color: var(--ember-deep); transition: color .3s; }
.sx-tab[aria-selected="true"] { color: #fff; }
.sx-tab[aria-selected="true"] span { color: #F2A27C; }
.sx-tab:focus-visible { outline: 2px solid var(--ember-deep); outline-offset: 2px; }
.sx-tabs__ink { position: absolute; left: 0; top: 5px; bottom: 5px; width: 0; border-radius: 999px; background: var(--ink); transition: transform .45s var(--ease), width .45s var(--ease); }

.sx-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(32px, 4vw, 56px) clamp(14px, 2.4vw, 40px) 0; }
.sx-copy { display: grid; }
.sx-pane { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translate3d(calc(var(--dir, 1) * 28px), 0, 0);
  transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s linear .45s; }
.sx-pane.out { transform: translate3d(calc(var(--dir, 1) * -28px), 0, 0); }
.sx-pane.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease) .12s, transform .55s var(--ease) .12s, visibility 0s; }
.sx-pane:focus-visible { outline: none; }
.sx-pane__w { margin: 0 0 14px; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-deep); }
.sx-pane__n { margin: 0; font-weight: 300; font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; scroll-margin-top: 120px; }
.sx-pane__h { margin: 22px 0 0; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.sx-pane p:not([class]) { margin: 14px 0 0; color: var(--ink-2); line-height: 1.7; }

/* λεπτομέρειες κάτω από τη σκηνή: αλλάζουν ύψος ομαλά */
.sx-more { position: relative; margin: clamp(28px, 4vw, 48px) clamp(14px, 2.4vw, 40px) 0; transition: height .45s var(--ease); overflow: hidden; }
.sx-more__b { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 64px); padding-top: 26px; border-top: 1px solid var(--hair);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.sx-more__b.on { position: relative; opacity: 1; visibility: visible; transition: opacity .45s .18s, visibility 0s; }
.sx-more h3 { margin: 0 0 10px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.sx-more p { margin: 0; color: var(--ink-2); line-height: 1.7; }
.sx-more p + p { margin-top: 14px; }
.sx-close { color: var(--ink) !important; font-weight: 500; }
.sx-facts { margin: 0; padding: 0; list-style: none; }
.sx-facts li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--hair); color: var(--ink); font-weight: 500; }
.sx-facts li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); transform: translateY(-2px); }
.sx-next { display: flex; justify-content: flex-end; margin: 22px clamp(14px, 2.4vw, 40px) 0; }
.sx-next button { border: 1px solid var(--hair); background: var(--white); color: var(--ink); font: 600 .9rem var(--f); padding: 11px 18px; border-radius: 999px; cursor: pointer; transition: border-color .2s, transform .3s var(--ease); }
.sx-next button:hover { border-color: var(--ink); transform: translateX(3px); }

/* ---------- Τα διαγράμματα ---------- */
.sx-vis { position: relative; aspect-ratio: 600 / 480; --px: 0px; --py: 0px; }
.dg { position: absolute; inset: 0; visibility: hidden; display: flex; flex-direction: column; }
.dg.is-shown { visibility: visible; }
.dg__plane { position: relative; width: 100%; aspect-ratio: 600 / 420; transform: translate3d(var(--px), var(--py), 0); transition: transform .5s var(--ease); }
.dg__plane svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dg__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.dg [data-s] { opacity: 0; transition: opacity .45s var(--ease), transform .55s var(--ease); transition-delay: var(--d, 0ms); }
.dg.is-on [data-s] { opacity: 1; }
.dg:not(.is-on) [data-s], .dg:not(.is-on) .mv { transition-delay: 0s !important; transition-duration: .15s !important; }
.dg .pp { transform: translateY(6px); transform-box: fill-box; }
.dg.is-on .pp { transform: none; }
.dg .mv { transform: translate(var(--dx), var(--dy)); transition: transform .9s var(--ease) var(--m); }
.dg.is-on .mv { transform: none; }
.ln { fill: none; stroke: rgba(14,26,60,.3); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.dg .ln { transition: stroke-dashoffset .8s var(--ease) var(--d), opacity .3s var(--d); }
.dg.is-on .ln { stroke-dashoffset: 0; }
.ln--or { stroke: var(--ember); stroke-width: 1.6; }
.ln--thin { stroke-width: 1.2; }
.ln--dash { stroke-dasharray: .012 .012; stroke-dashoffset: 0; }
.bx { fill: rgba(255,255,255,.96); stroke: rgba(14,26,60,.14); stroke-width: 1; vector-effect: non-scaling-stroke; transform: scale(.96); transform-box: fill-box; transform-origin: center; }
.dg.is-on .bx { transform: none; }
.bx--card { fill: var(--bg-0); }
.bx--zone { fill: rgba(208,89,39,.045); stroke: rgba(208,89,39,.55); stroke-dasharray: 5 5; }
.bx--app { fill: #0E1A3C; stroke: none; }
.bar { fill: rgba(208,89,39,.75); transform: scaleY(.2); transform-box: fill-box; transform-origin: bottom; }
.dg.is-on .bar { transform: none; }
.chip { position: absolute; transform: translate(-50%, -50%) translateY(8px); white-space: nowrap; padding: 7px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1.2;
  background: var(--white); color: var(--ink); border: 1px solid var(--hair); box-shadow: 0 8px 18px -12px rgba(14,26,60,.35); text-align: center; }
.dg.is-on .chip { transform: translate(-50%, -50%); }
.chip--out { background: var(--ink); color: #fff; border-color: var(--ink); white-space: normal; }
.chip--step { background: var(--ember); color: #fff; border-color: var(--ember); }
.chip--tag { background: var(--bg-0); }
.dg__foot .chip { position: static; transform: translateY(8px); }
.dg.is-on .dg__foot .chip { transform: none; }
.dg__cap, .dg__lab, .dg__app { position: absolute; transform: translate(-50%, -50%); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.dg__cap--lock { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--white); color: var(--ember-deep); }
.dg__cap--lock svg { width: 13px; height: 13px; }
.dg__lab { letter-spacing: .08em; font-size: .7rem; }
.dg__app { color: #fff; font-size: .82rem; letter-spacing: .02em; text-transform: none; }

/* ---------- 3. Μορφές συνεργασίας ---------- */
.sx-formats { padding-top: var(--sec); }
.fm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.fm-seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-edge); }
.fm-seg button { border: 0; background: none; padding: 11px 16px; border-radius: 999px; font: 600 .88rem var(--f); color: var(--ink-2); cursor: pointer; transition: background .3s, color .3s; white-space: nowrap; }
.fm-seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.fm-track { margin-top: clamp(36px, 6vh, 64px); }
.fm-track svg { width: 100%; height: auto; overflow: visible; display: block; }
.fm-axis { stroke: rgba(14,26,60,.14); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.fm-goal { stroke: var(--ember); stroke-width: 2; vector-effect: non-scaling-stroke; transform-origin: 140px 70px; transform: scaleX(0); transition: transform .9s var(--ease); }
.fm-ng { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; transform-origin: 60px 104px; transform: scaleX(0); transition: transform 1.1s var(--ease) .2s; }
.fm-goallab, .fm-nglab { font: 700 13px var(--f); letter-spacing: .12em; text-transform: uppercase; fill: var(--ink-2); opacity: 0; transition: opacity .5s .4s; }
.fm-dot { fill: var(--ember); transition: transform .8s var(--ease), opacity .5s var(--ease); }
.fm-caps { display: grid; margin-top: 18px; }
.fm-cap { grid-area: 1 / 1; margin: 0; max-width: 46rem; color: var(--ink-2); line-height: 1.7; font-size: clamp(1rem, .96rem + .2vw, 1.1rem); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .45s var(--ease); }
.fm-cap b { color: var(--ink); font-weight: 600; }
.fm-cap.on { opacity: 1; transform: none; transition-delay: .1s; }
.fm-note { margin: clamp(40px, 6vh, 64px) 0 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 300; line-height: 1.4; letter-spacing: -.015em; max-width: 34ch; color: var(--ink); }

/* ---------- Κινητό ---------- */
@media (max-width: 900px) {
  .sx-hero { padding-top: 120px; }
  .sx-hero__top { grid-template-columns: 1fr; }
  .sx-hero .lead { margin-top: 20px; padding: 0; }
  .sx-picks { grid-template-columns: 1fr 1fr; margin-top: 36px; }
  .sx-picks li:nth-child(3) { border-left: 0; }
  .sx-picks li:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .sx-pick { padding: 18px 12px 20px; }
  .sx-pick__fig { width: 96px; height: 67px; }
  .sx-pick__t { font-size: .98rem; }
  .sx-pick__w { grid-column: 1 / -1; font-size: .8rem; }
  .sx-panel { border-radius: 28px; padding: 10px 10px 24px; }
  .sx-tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-radius: 22px; }
  .sx-tabs::-webkit-scrollbar { display: none; }
  .sx-tab { flex: none; padding: 11px 14px; font-size: .84rem; }
  .sx-body { grid-template-columns: 1fr; padding: 22px 8px 0; row-gap: 22px; }
  .sx-vis { order: -1; aspect-ratio: 600 / 520; }
  .chip { font-size: .7rem; padding: 6px 9px; }
  .dg__cap, .dg__lab { font-size: .6rem; }
  .sx-more { margin: 26px 8px 0; }
  .sx-more__b { grid-template-columns: 1fr; row-gap: 22px; }
  .sx-next { margin: 18px 8px 0; }
  .fm-seg { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .fm-seg button { padding: 10px 12px; font-size: .8rem; }
  .fm-goallab, .fm-nglab { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .dg [data-s], .dg .mv, .dg .pp, .dg .ln, .bx, .bar, .chip, .sx-pane, .sx-more, .sx-more__b, .fm-dot, .fm-goal, .fm-ng, .fm-cap, .sx-tabs__ink { transition: none !important; }
}

/* ---------- Οπτικός έλεγχος #1: το διάγραμμα παίρνει δικό του «δάπεδο» και περισσότερη παρουσία ---------- */
@media (min-width: 901px) { .sx-body { grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); align-items: start; } }
.sx-copy { padding-top: clamp(12px, 3vw, 40px); }
.sx-vis::before { content: ''; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 600 / 420; border-radius: 30px;
  background: radial-gradient(120% 90% at 50% 40%, #FFFFFF 0%, var(--bg-0) 62%, var(--bg-1) 100%); border: 1px solid rgba(14,26,60,.06); }
.dg__plane { padding: 0; }
.chip { font-size: .86rem; padding: 8px 14px; }
.dg__foot { margin-top: 16px; }
.ln { stroke-width: 1.6; }
.ln--or { stroke-width: 2; }
.chip--out { background: var(--ink); color: #fff; border-color: var(--ink); white-space: nowrap; }
.chip--out br { display: inline; }

@media (max-width: 900px) {
  .sx-copy { padding-top: 0; }
  .sx-vis::before { border-radius: 20px; }
  .chip { font-size: .68rem; padding: 6px 9px; }
  .dg__foot { gap: 5px; margin-top: 12px; }
  .chip--out { font-size: .66rem; }
}
.dg__cap--lock svg { flex: none; }

/* =====================================================================
   v14 · άνοιγμα της σελίδας: τίτλος + χάρτης επιλογών σε μία σύνθεση
   Στο κέντρο «ο οργανισμός σας», γύρω του οι τέσσερις ομάδες. Κάθε ομάδα είναι και το visual και η επιλογή.
   ===================================================================== */
.sx-hero { padding: clamp(112px, 15vh, 140px) 0 0; }
.sx-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); align-items: center; }
.sx-hero__text h1 { margin: 0; max-width: 17ch; }
.sx-hero__text .lead { margin-top: 24px; max-width: 32rem; padding: 0; }
.sx-map { position: relative; aspect-ratio: 7 / 5; border-radius: 34px;
  background: radial-gradient(70% 70% at 50% 50%, #FFFFFF 0%, var(--bg-0) 70%, rgba(242,237,231,0) 100%); }
.sx-map__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sx-map__lines line { stroke: rgba(14,26,60,.16); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 3 5; transition: stroke .35s; }
.sx-map__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--hair); font-size: .875rem; font-weight: 600; color: var(--ink); white-space: nowrap; box-shadow: 0 10px 24px -16px rgba(14,26,60,.35); }
.sx-map__center i { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); }
.sx-map .sx-picks { position: absolute; inset: 0; display: block; margin: 0; padding: 0; list-style: none; border: 0; }
.sx-map .sx-picks li { position: absolute; border: 0 !important; }
.sx-node--tl { left: 4%; top: 6%; } .sx-node--tr { right: 4%; top: 6%; } .sx-node--bl { left: 4%; bottom: 6%; } .sx-node--br { right: 4%; bottom: 6%; }
.sx-map .sx-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 22px; height: auto; max-width: 15.5rem;
  transition: background .3s, box-shadow .3s, transform .4s var(--ease); }
.sx-node--tr .sx-pick, .sx-node--br .sx-pick { align-items: flex-end; text-align: right; }
.sx-map .sx-pick::after { display: none; }
.sx-map .sx-pick:hover, .sx-map .sx-pick:focus-visible { background: var(--white); box-shadow: 0 18px 40px -26px rgba(14,26,60,.45); transform: translateY(-2px); }
.sx-map .sx-pick:focus-visible { outline: 2px solid var(--ember-deep); outline-offset: 2px; }
.sx-map .sx-pick__fig { width: 108px; height: 76px; margin: 0; }
.sx-pick__txt { display: grid; gap: 3px; }
.sx-map .sx-pick__n { font-size: .8125rem; font-weight: 600; color: var(--ember-deep); padding: 0; }
.sx-map .sx-pick__t { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.sx-map .sx-pick__w { font-size: .875rem; color: var(--ink-2); margin: 0; }
/* η γραμμή προς την ομάδα που δείχνεις γίνεται πορτοκαλί, οι άλλες ομάδες υποχωρούν λίγο */
.sx-map:has(.sx-node--tl .sx-pick:is(:hover, :focus-visible)) line[data-l="0"],
.sx-map:has(.sx-node--tr .sx-pick:is(:hover, :focus-visible)) line[data-l="1"],
.sx-map:has(.sx-node--bl .sx-pick:is(:hover, :focus-visible)) line[data-l="2"],
.sx-map:has(.sx-node--br .sx-pick:is(:hover, :focus-visible)) line[data-l="3"] { stroke: var(--ember); stroke-dasharray: none; }
.sx-map:has(.sx-pick:hover) .sx-node:not(:has(.sx-pick:hover)) .sx-pick { opacity: .55; }
.sx-map .sx-pick { opacity: 1; }
.sx-stage { padding-top: clamp(56px, 8vh, 96px); }

@media (max-width: 900px) {
  .sx-hero { padding-top: 92px; }
  .sx-hero__grid { grid-template-columns: 1fr; row-gap: 28px; }
  .sx-hero__text h1 { max-width: none; }
  .sx-map { aspect-ratio: auto; display: grid; padding: 12px; border-radius: 26px; background: radial-gradient(90% 70% at 50% 50%, #FFFFFF 0%, var(--bg-0) 75%); }
  .sx-map__lines { display: none; }
  .sx-map__center { position: static; transform: none; justify-self: center; margin: 4px 0 10px; grid-row: 1; }
  .sx-map .sx-picks { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .sx-map .sx-picks li { position: static; }
  .sx-map .sx-pick, .sx-node--tr .sx-pick, .sx-node--br .sx-pick { align-items: flex-start; text-align: left; max-width: none; padding: 12px; background: rgba(255,255,255,.7); }
  .sx-map .sx-pick__fig { width: 84px; height: 59px; }
  .sx-map .sx-pick__t { font-size: .95rem; }
  .sx-map .sx-pick__w { font-size: .8rem; }
  /* στο κινητό ο τίτλος της λύσης έρχεται πριν από το διάγραμμα, ώστε να φαίνεται μόλις φτάσεις στο πλαίσιο */
  .sx-vis { order: 0; }
  .sx-stage { padding-top: 48px; }
}
/* v14 διόρθωση: τα παλιά grid-row των επιλογών δεν ισχύουν μέσα στον χάρτη */
.sx-map .sx-pick__txt > * { grid-row: auto; grid-column: auto; }
.sx-map .sx-pick__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sx-map .sx-pick__n { order: 0; } .sx-map .sx-pick__t { order: 1; } .sx-map .sx-pick__w { order: 2; margin-top: 2px; }
.sx-node--tr .sx-pick__txt, .sx-node--br .sx-pick__txt { align-items: flex-end; }
@media (max-width: 900px) {
  .sx-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sx-map .sx-picks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sx-map .sx-pick { min-width: 0; }
  .sx-node--tr .sx-pick__txt, .sx-node--br .sx-pick__txt { align-items: flex-start; }
}
/* v14: ο τίτλος του ανοίγματος σπάει στο νόημα (3 γραμμές στο desktop) */
@media (min-width: 901px) {
  .sx-hero__grid { grid-template-columns: minmax(0, 5.8fr) minmax(0, 6.2fr); }
  .sx-hero__text h1 { max-width: none; font-size: clamp(2.125rem, 1.3rem + 1.75vw, 2.875rem); }
}
@media (min-width: 901px) {
  .sx-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .sx-hero__text h1 { font-size: clamp(2rem, 1.2rem + 1.6vw, 2.5rem); }
}
@media (min-width: 901px) { .sx-hero__text h1 { font-size: clamp(1.875rem, 1.1rem + 1.4vw, 2.25rem); } }

/* =====================================================================
   v14 · τελική σύνθεση ανοίγματος: ο τίτλος στο κέντρο του χάρτη, οι τέσσερις λύσεις γύρω του
   ===================================================================== */
.sx-hero .sx-hero__grid { display: block; }
.sx-hero .sx-map { position: relative; aspect-ratio: auto; background: radial-gradient(48% 62% at 50% 50%, #FFFFFF 0%, var(--bg-0) 72%, rgba(242,237,231,0) 100%); }
.sx-hero .sx-hero__text { text-align: center; }
.sx-hero .sx-hero__text .eyebrow { margin-bottom: 18px; }
.sx-hero .sx-hero__text h1 { margin: 0 auto; }
.sx-hero .sx-hero__text .lead { margin: 22px auto 0; max-width: 36rem; }
@media (min-width: 1200px) {
  .sx-hero { padding-top: clamp(104px, 13vh, 128px); }
  .sx-hero .sx-map { min-height: clamp(540px, 66vh, 640px); display: grid; place-items: center; border-radius: 40px; }
  .sx-hero .sx-hero__text { position: relative; z-index: 1; width: min(56%, 700px); padding: 24px 0; }
  .sx-hero .sx-hero__text h1 { font-size: clamp(2.125rem, 1.2rem + 1.3vw, 2.5rem); }
  .sx-hero .sx-map .sx-picks { position: absolute; inset: 0; }
  .sx-hero .sx-map .sx-pick { max-width: 15rem; }
  .sx-node--tl { left: 2.5%; top: 5%; } .sx-node--tr { right: 2.5%; top: 5%; } .sx-node--bl { left: 2.5%; bottom: 5%; } .sx-node--br { right: 2.5%; bottom: 5%; }
}
@media (max-width: 1199px) {
  .sx-hero { padding-top: 104px; }
  .sx-hero .sx-map { display: grid; gap: 28px; background: none; padding: 0; }
  .sx-hero .sx-map__lines { display: none; }
  .sx-hero .sx-hero__text h1 { font-size: clamp(1.875rem, 1.2rem + 2vw, 2.5rem); }
  .sx-hero .sx-map .sx-picks { position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px; border-radius: 28px; background: radial-gradient(90% 90% at 50% 50%, #FFFFFF 0%, var(--bg-0) 80%); }
  .sx-hero .sx-map .sx-picks li { position: static; }
  .sx-hero .sx-map .sx-pick, .sx-hero .sx-node--tr .sx-pick, .sx-hero .sx-node--br .sx-pick { align-items: flex-start; text-align: left; max-width: none; padding: 14px; background: rgba(255,255,255,.7); height: 100%; }
  .sx-hero .sx-node--tr .sx-pick__txt, .sx-hero .sx-node--br .sx-pick__txt { align-items: flex-start; }
}
@media (max-width: 760px) {
  .sx-hero { padding-top: 92px; }
  .sx-hero .sx-hero__text { text-align: left; }
  .sx-hero .sx-hero__text .lead { margin-left: 0; }
  .sx-hero .sx-map .sx-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 3. Μορφές συνεργασίας (v17): τρεις ρυθμοί πάνω στον ίδιο χρόνο ---------- */
.fx-head { max-width: 40rem; }
.fx-board { position: relative; margin-top: clamp(32px, 5vh, 56px); padding: clamp(8px, 1.4vw, 16px) clamp(20px, 3vw, 44px); border-radius: 28px;
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); }
.fx-axis, .fx-row { display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px); }
.fx-axis { padding: 18px 0 2px; }
.fx-axis span { grid-column: 2; position: relative; display: block; font-size: var(--s-label, .8125rem); color: var(--tx-3, var(--ink-3)); padding-bottom: 10px; }
.fx-axis span::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(14,26,60,.22), rgba(14,26,60,.22) 96%, transparent); }
.fx-axis span::before { content: '→'; position: absolute; right: 0; top: 0; }
.fx-row { align-items: center; padding: clamp(20px, 3vh, 30px) 0; border-top: 1px solid var(--hair); transition: opacity .4s var(--ease); }
.fx-axis + .fx-row { border-top: 0; }
.fx-txt h3 { margin: 0; font-family: var(--f-t, var(--f)); font-size: clamp(1.25rem, 1.1rem + .45vw, 1.5rem); font-weight: 400; line-height: 1.2; letter-spacing: -.016em; color: var(--ink); }
.fx-txt p { margin: 10px 0 0; font-size: .9375rem; line-height: 1.55; color: var(--tx-2, var(--ink-2)); max-width: 34ch; }
.fx.has-focus .fx-row:not(:hover) { opacity: .42; }

.fx-lane { position: relative; width: 100%; }
.fx-lane svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-tag { position: absolute; transform: translateY(-50%); white-space: nowrap; font-size: .75rem; line-height: 1.2; color: var(--ink); }
.fx-tag--soft { color: var(--tx-3, var(--ink-3)); }
.fx-tag--end { transform: translate(-50%, -50%); color: var(--ember-deep); }
.fx-b { fill: rgba(255,255,255,.72); stroke: rgba(14,26,60,.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fx-b--echo { fill: none; stroke-dasharray: 3 5; stroke: rgba(14,26,60,.2); }
.fx-mod { fill: var(--ink); }
.fx-mod--opt { fill: rgba(14,26,60,.1); }
.fx-thread { fill: none; stroke: var(--ember); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fx-goal { fill: none; stroke: var(--ember); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.fx-goal--in { fill: var(--ember); stroke: none; }
.fx-band { fill: rgba(14,26,60,.055); }
.fx-lit { opacity: 0; }

/* εμφάνιση: όλα περιμένουν την «κεφαλή χρόνου» να περάσει από τη θέση τους (--x = 0…1) */
.fx-b, .fx-p, .fx-mod, .fx-goal, .fx-band, .fx-tag { opacity: 0; transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--x, 0) * 1.6s + .15s); }
.fx-p { transform: translateY(5px); transform-box: fill-box; }
.fx.is-on :is(.fx-b, .fx-p, .fx-mod, .fx-goal, .fx-band, .fx-tag) { opacity: 1; }
.fx.is-on .fx-p { transform: none; }
.fx.is-on .fx-p--echo { opacity: 1; }
.fx.is-on .fx-thread { stroke-dashoffset: 0; transition: stroke-dashoffset 1.9s var(--ease) .5s; }
.fx-lane::after { content: ''; position: absolute; top: -6px; bottom: -6px; left: 0; width: 1px; background: var(--ember); opacity: 0; pointer-events: none; }
.fx.is-on:not(.is-still) .fx-lane::after { animation: fxHead 1.9s var(--ease) .1s 1 both; }
@keyframes fxHead { 0% { opacity: 0; transform: translateX(0); } 8% { opacity: .7; } 85% { opacity: .5; } 100% { opacity: 0; transform: translateX(var(--lw, 0)); } }

/* ήσυχη κίνηση μόνο όσο η ενότητα φαίνεται */
.fx-one .fx-lit { animation: fxLit 9s ease-in-out infinite; animation-delay: calc(var(--i) * -0.53s); animation-play-state: paused; }
.fx.is-live .fx-one .fx-lit { animation-play-state: running; }
@keyframes fxLit { 0%, 70%, 100% { opacity: 0; } 78%, 88% { opacity: 1; } }
.fx-mod--opt { animation: fxAll 11s ease-in-out infinite 3s; animation-play-state: paused; }
.fx.is-live .fx-mod--opt { animation-play-state: running; }
@keyframes fxAll { 0%, 55%, 100% { fill: rgba(14,26,60,.1); } 64%, 86% { fill: rgba(14,26,60,.55); } }

@media (max-width: 1023px) {
  .fx-axis, .fx-row { grid-template-columns: minmax(0, 1fr); }
  .fx-axis { display: none; }
  .fx-row { row-gap: 18px; padding: 26px 0 20px; }
  .fx-axis + .fx-row { border-top: 0; }
  .fx-txt p { max-width: 52ch; }
}
@media (max-width: 759px) {
  .fx-board { padding: 4px 18px 12px; border-radius: 22px; }
  .fx-txt p { max-width: none; }
  .fx-tag { font-size: .6875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-b, .fx-p, .fx-mod, .fx-goal, .fx-band, .fx-tag, .fx-thread { transition: none !important; animation: none !important; }
  .fx-lane::after { display: none; }
}
.fx-time { stroke: rgba(14,26,60,.1); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }

.fx-tag--band { color: var(--ink); font-size: .8125rem; }
.fx-thread { stroke-width: 1.4; }
.fx-tag--endR { transform: translate(calc(-100% + 9px), -50%); }