/* ════════════════════════════════════════════════════════════════
   🔴 ΓΙΑΤΙ ΟΛΟΙ ΟΙ ΠΑΛΙΟΙ ΚΑΝΟΝΕΣ ΕΙΝΑΙ `body.nq-home:not(.nq-demo5)`

   Ο Agent 2 προσθεσε ρυθμιση «Αρχικη σελιδα του site». Οταν επιλεγει η ΝΕΑ
   αρχικη, το <body> παιρνει **και** `nq-home` (επειδη ειναι η αρχικη) **και**
   `nq-demo5`. Τοτε οι 252 κανονες της ΠΑΛΙΑΣ αρχικης ξυπναγαν πανω στη νεα.
   Μετρημενο απο τον Agent 2 στα 1440, ιδια σελιδα σε δυο διευθυνσεις:
       nq-sec-scope-extra   766 στο «/»   εναντι  269 στο slug   (+497)
       nq-sec-scope-banner  241            εναντι  230           (+11)
       skinset-default-parts 89            εναντι    0           (+89)

   ΤΟ `:not(.nq-demo5)` ΕΙΝΑΙ Η ΣΩΣΤΗ ΛΥΣΗ ΚΑΙ ΟΧΙ Η ΜΕΤΑΚΟΜΙΣΗ ΣΕ ΑΛΛΗ ΚΛΑΣΗ:
   η παλια αρχικη κραταει ΑΚΡΙΒΩΣ ο,τι ειχε (δεν εχει `nq-demo5`), και καθε
   νεα σελιδα του Demo 5 εξαιρειται αυτοματα — χωρις να χρειαστει να θυμηθει
   κανεις να προσθεσει κατι.
   ⚠️ Η ειδικοτητα ολων τους ανεβηκε κατα ΜΙΑ κλαση (π.χ. 0,2,1 -> 0,3,1).
   Μεταξυ τους η σειρα δεν αλλαζει, αφου ανεβηκαν ΟΛΟΙ μαζι. Αν ομως καποιος
   απο αυτους εχανε πριν απο εξωτερικο κανονα, τωρα μπορει να κερδιζει.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   🔴 ΤΟ SCOPE ΤΟΥ ΑΡΧΕΙΟΥ ΕΙΝΑΙ `body.nq-demo5`, ΟΧΙ ΤΟ SLUG (2026-09-07)

   ΓΙΑΤΙ: οι ζωνες αυτης της σελιδας (hero, made-corfu, studio-story,
   project-contact) ξαναχρησιμοποιουνται σε «Σχετικα» και «Υπηρεσιες». Η κλαση
   `nq-page-<slug>` παραγεται απο το slug, οποτε καθε νεα σελιδα εχει ΑΛΛΗ και
   κανενας κανονας δεν θα επιανε εκει.

   ΤΟ `nq-demo5` ΕΡΧΕΤΑΙ ΑΠΟ ΠΕΔΙΟ «Κλαση σωματος» ανα σελιδα (Manager) και
   ΣΥΝΥΠΑΡΧΕΙ με το slug:
     <body class="nq-front nq-page-nea-arxiki-demo5 nq-demo5">

   ΔΕΝ ΞΕΚΛΕΙΔΩΘΗΚΑΝ ΟΙ ΚΛΑΣΕΙΣ ΕΝΤΕΛΩΣ, ΚΑΙ ΕΙΝΑΙ ΣΗΜΑΝΤΙΚΟ: μετρηθηκαν
   **8 κλασεις** που υπαρχουν ΚΑΙ στο legacy `body.nq-home` CSS του ιδιου
   αρχειου — .nq-scope-head · .nq-scope-extra · .nq-scope-list ·
   .nq-scope-card-head · .nq-story-scroll-host · .nq-cta-scroll-rail--story /
   __fill / __dot. Χωρις scope θα συγκρουονταν με την παλια αρχικη.

   ΓΙΑ ΕΞΑΙΡΕΣΗ ΜΙΑΣ ΣΕΛΙΔΑΣ: γραψε `body.nq-page-<slug> .x { … }` — ιδια
   ειδικοτητα (0,2,1), οποτε ΠΡΕΠΕΙ να μπει ΜΕΤΑ τον κοινο κανονα στο αρχειο.
   ════════════════════════════════════════════════════════════════ */

#nq-home-proof {
  --wb-ink: #080d1a;
  --wb-ink-soft: #0e1527;
  --wb-paper: #f7f7fa;
  --wb-white: #fff;
  --wb-text: #0d1321;
  --wb-muted: #667085;
  --wb-line: #dfe3ea;
  --wb-accent: var(--nq-accent, #5548f7);
  color: var(--wb-text);
  background: var(--wb-white);
}

body.nq-home:not(.nq-demo5) .nq-signal-footer-slot,
body.nq-home:not(.nq-demo5) .nq-signal-footer-slot > .pb-row-box,
body.nq-home:not(.nq-demo5) .nq-signal-footer-slot .pb-row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.nq-home:not(.nq-demo5) .nq-signal-footer-slot .nq-signal {
  --bg: #f4f3f8;
  --ink: #111522;
  --muted: #858b9a;
  --accent: #665ff4;
  border-color: rgba(18, 22, 35, .12);
}

body.nq-home:not(.nq-demo5) .nq-signal-footer-slot .nq-signal__intro {
  border-color: rgba(91, 83, 213, .16);
  background:
    linear-gradient(120deg, #ebe9ff 0%, #f1f0fa 58%, #f7f6fa 100%);
}

body.nq-home:not(.nq-demo5) .nq-signal-footer-slot .nq-signal__eyebrow {
  color: #5d55dc;
}

body.nq-home:not(.nq-demo5) .nq-signal-footer-slot .nq-signal__title {
  color: #111522;
}

body.nq-home:not(.nq-demo5) .nq-signal-footer-slot .nq-signal__word.is-outline {
  color: #8f95a3;
}

body.nq-home:not(.nq-demo5) .nq-signal-footer-slot .nq-signal__word.is-place {
  color: #665ff4;
}

body.nq-home:not(.nq-demo5) .nq-signal-footer-slot .nq-signal__dot {
  background: #665ff4;
  box-shadow:
    0 0 0 5px rgba(102, 95, 244, .1),
    0 0 16px rgba(102, 95, 244, .24);
}

.nq-home-container {
  width: min(calc(100% - 40px), var(--nq-max, 1320px));
  margin-inline: auto;
}

.nq-home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--wb-accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.nq-home-eyebrow::before {
  width: 28px;
  height: 1px;
  background: currentColor;
  content: "";
}

.nq-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: end;
  margin-bottom: clamp(52px, 7vw, 92px);
}

.nq-section-head h2,
.nq-proof-copy h2,
.nq-faq-intro h2 {
  margin: 0;
  color: inherit;
  font-size: clamp(38px, 5.25vw, 72px);
  font-weight: 760;
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.nq-section-head h2 em,
.nq-home-cta h2 em {
  color: var(--wb-accent);
  font-style: normal;
}

/* Typographic hierarchy for the services statement. */
body #nq-services-title > span {
  font-size: .9em;
}

body #nq-services-title > em {
  font-size: 1.06em;
}

/* Keep the highlighted homepage statement slightly quieter than its lead-in. */
body .nq-cta-statement h2 strong {
  font-size: .92em;
}

/* CTA scroll rail — the divider is drawn as the section travels through the
   viewport, with the dot marking the active end of the line. */
body.nq-home:not(.nq-demo5) .nq-cta-statement,
body.nq-home:not(.nq-demo5) .nq-story-scroll-host {
  --cta-line-progress: 0;
}

body.nq-home:not(.nq-demo5) .nq-story-scroll-host {
  position: relative !important;
}

body.nq-home:not(.nq-demo5) .nq-cta-statement__copy {
  border-right: 0 !important;
}

body.nq-home:not(.nq-demo5) .nq-cta-scroll-rail {
  position: absolute;
  z-index: 4;
  top: 9%;
  bottom: 9%;
  left: calc(50% + 78px);
  width: 18px;
  pointer-events: none;
}

body.nq-home:not(.nq-demo5) .nq-cta-scroll-rail--story {
  top: 7%;
  bottom: 7%;
  left: 40%;
  transform: translateX(-50%);
}

body.nq-home:not(.nq-demo5) .nq-cta-scroll-rail__fill {
  position: absolute;
  top: 0;
  left: 8px;
  width: 2px;
}

body.nq-home:not(.nq-demo5) .nq-cta-scroll-rail__fill {
  height: calc(var(--cta-line-progress) * 100%);
  background: linear-gradient(180deg, #8d86ff 0%, var(--nq-accent, #5548f7) 100%);
  box-shadow: 0 0 16px rgba(111, 101, 255, .34);
  transition: height 90ms linear;
}

body.nq-home:not(.nq-demo5) .nq-cta-scroll-rail__dot {
  position: absolute;
  top: calc(var(--cta-line-progress) * 100% - 8px);
  left: 1px;
  width: 15px;
  height: 15px;
  border: 4px solid #7770ff;
  border-radius: 50%;
  background: #0a0d17;
  box-shadow:
    0 0 0 5px rgba(119, 112, 255, .1),
    0 0 22px rgba(119, 112, 255, .4);
  transition: top 90ms linear;
}

@media (max-width: 991.98px) {
  body.nq-home:not(.nq-demo5) .nq-cta-scroll-rail {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.nq-home:not(.nq-demo5) .nq-cta-scroll-rail__fill,
  body.nq-home:not(.nq-demo5) .nq-cta-scroll-rail__dot {
    transition: none;
  }
}

.nq-section-head > p,
.nq-proof-copy > p,
.nq-faq-intro > p {
  max-width: 48ch;
  margin: 0;
  color: var(--wb-muted);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.75;
}

/* Selected work */
.nq-portfolio {
  padding: clamp(92px, 10vw, 150px) 0;
  background:
    linear-gradient(180deg, rgba(85, 72, 247, .035), transparent 260px),
    var(--wb-white);
}

.nq-projects {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(52px, 7vw, 96px) 28px;
}

.nq-project {
  grid-column: span 6;
  min-width: 0;
}

.nq-project-featured {
  grid-column: 1 / -1;
}

.nq-project:nth-child(4) {
  grid-column: 2 / span 5;
}

.nq-project:nth-child(5) {
  grid-column: 7 / span 5;
  margin-top: clamp(50px, 7vw, 100px);
}

.nq-project-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #e8ebf2;
  color: #fff;
}

.nq-project-featured .nq-project-media {
  aspect-ratio: 16 / 8.3;
}

.nq-project-media picture,
.nq-project-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.nq-project-media img {
  object-fit: cover;
  object-position: top center;
  transition: transform .7s cubic-bezier(.2, .65, .2, 1), filter .4s ease;
}

.nq-project-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 56%, rgba(5, 8, 18, .55));
  opacity: .38;
  transition: opacity .3s ease;
  content: "";
}

.nq-project-index {
  position: absolute;
  left: 20px;
  bottom: 16px;
  z-index: 2;
  color: rgba(255, 255, 255, .8);
  font-size: 11px;
  letter-spacing: .14em;
}

.nq-project-arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: rgba(8, 13, 26, .4);
  font-size: 18px;
  backdrop-filter: blur(8px);
  transition: color .25s ease, background-color .25s ease, transform .25s ease;
}

.nq-project-media:hover img {
  transform: scale(1.025);
}

.nq-project-media:hover::after {
  opacity: .72;
}

.nq-project-media:hover .nq-project-arrow {
  color: var(--wb-ink);
  background: #fff;
  transform: rotate(45deg);
}

.nq-project-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  padding-top: 18px;
}

.nq-project-meta span,
.nq-project-meta small {
  display: block;
  color: var(--wb-muted);
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.nq-project-meta h3 {
  margin: 7px 0 0;
  font-size: clamp(22px, 2.1vw, 32px);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.nq-home-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 68px;
}

.nq-text-link {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 8px;
  color: var(--wb-text);
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  font-weight: 720;
  text-decoration: none;
}

.nq-text-link span {
  color: var(--wb-accent);
  transition: transform .2s ease;
}

.nq-text-link:hover span {
  transform: translate(4px, -2px);
}

/* Studio proof */
.nq-studio-proof {
  position: relative;
  overflow: hidden;
  padding: clamp(82px, 9vw, 132px) 0;
  color: #eef1f8;
  background:
    radial-gradient(circle at 0 20%, rgba(85, 72, 247, .26), transparent 29%),
    radial-gradient(circle at 100% 90%, rgba(41, 91, 220, .18), transparent 31%),
    var(--wb-ink);
}

.nq-studio-proof::after {
  position: absolute;
  right: -2vw;
  bottom: -4vw;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .055);
  font-size: clamp(100px, 18vw, 300px);
  font-weight: 800;
  line-height: .7;
  letter-spacing: -.08em;
  content: "WBBOX";
  pointer-events: none;
}

.nq-proof-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(480px, 1.15fr);
  gap: clamp(60px, 9vw, 130px);
  align-items: center;
}

.nq-proof-copy h2 {
  color: #fff;
  font-size: clamp(38px, 4.5vw, 64px);
}

.nq-proof-copy > p {
  margin: 28px 0 34px;
  color: rgba(232, 235, 243, .66);
}

.nq-text-link-light {
  color: #fff;
}

.nq-proof-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-left: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(85, 72, 247, 0);
  transition: box-shadow .9s cubic-bezier(.22, .61, .36, 1);
}

.nq-proof-facts.is-viewport-centered {
  box-shadow:
    0 34px 78px rgba(0, 0, 0, .38),
    0 0 58px rgba(85, 72, 247, .18);
}

.nq-proof-facts div {
  min-height: 174px;
  padding: clamp(24px, 3vw, 38px);
  border-right: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.nq-proof-facts dt {
  margin-bottom: 22px;
  color: #fff;
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 760;
  line-height: .9;
  letter-spacing: -.055em;
}

.nq-proof-facts dd {
  margin: 0;
  color: rgba(232, 235, 243, .58);
  font-size: 13px;
  line-height: 1.55;
}

/* Capabilities: editorial rows, no generic cards */
.nq-capabilities {
  padding: clamp(92px, 10vw, 148px) 0;
  background: var(--wb-paper);
}

.nq-section-head-compact {
  grid-template-columns: minmax(0, 1fr);
}

.nq-capability-list {
  border-top: 1px solid var(--wb-line);
}

.nq-capability-list a {
  display: grid;
  grid-template-columns: 64px minmax(250px, .9fr) minmax(280px, 1.1fr) 40px;
  gap: 28px;
  align-items: center;
  padding: 30px 4px;
  color: var(--wb-text);
  border-bottom: 1px solid var(--wb-line);
  text-decoration: none;
  transition: color .25s ease, padding .25s ease;
}

.nq-capability-list a > span {
  color: var(--wb-accent);
  font-size: 11px;
  letter-spacing: .14em;
}

.nq-capability-list h3 {
  margin: 0;
  font-size: clamp(22px, 2.35vw, 34px);
  line-height: 1.1;
  letter-spacing: -.04em;
}

.nq-capability-list p {
  max-width: 48ch;
  margin: 0;
  color: var(--wb-muted);
  font-size: 15px;
  line-height: 1.65;
}

.nq-capability-list b {
  justify-self: end;
  font-size: 19px;
  font-weight: 400;
  transition: transform .25s ease;
}

.nq-capability-list a:hover {
  color: var(--wb-accent);
  padding-inline: 12px;
}

.nq-capability-list a:hover b {
  transform: rotate(45deg);
}

/* FAQ */
.nq-home-faq {
  padding: clamp(88px, 9vw, 136px) 0;
  background: var(--wb-white);
}

.nq-faq-layout {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(60px, 10vw, 150px);
  align-items: start;
}

.nq-faq-intro {
  position: sticky;
  top: 110px;
}

.nq-faq-intro h2 {
  font-size: clamp(38px, 4.3vw, 60px);
}

.nq-faq-intro > p {
  margin-top: 24px;
}

.nq-faq-list {
  border-top: 1px solid var(--wb-line);
}

.nq-faq-list details {
  border-bottom: 1px solid var(--wb-line);
}

.nq-faq-list summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  color: var(--wb-text);
  cursor: pointer;
  font-size: clamp(17px, 1.55vw, 20px);
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
}

.nq-faq-list summary::-webkit-details-marker {
  display: none;
}

.nq-faq-list summary span {
  flex: none;
  color: var(--wb-accent);
  font-size: 27px;
  font-weight: 400;
  transition: transform .2s ease;
}

.nq-faq-list details[open] summary span {
  transform: rotate(45deg);
}

.nq-faq-list details p {
  max-width: 62ch;
  margin: -5px 50px 28px 0;
  color: var(--wb-muted);
  font-size: 15px;
  line-height: 1.75;
}

/* Final CTA */
.nq-home-cta {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 8vw, 120px) 0 clamp(64px, 8vw, 110px);
  background: var(--wb-white);
  box-shadow: none;
}

.nq-home-cta-in {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: clamp(52px, 7vw, 96px);
  color: #e8ebf3;
  background:
    radial-gradient(circle at 8% 15%, rgba(85, 72, 247, .42), transparent 31%),
    radial-gradient(circle at 94% 90%, rgba(46, 98, 220, .28), transparent 34%),
    var(--wb-ink);
  box-shadow: none;
}

.nq-home-cta .nq-home-container {
  position: relative;
  isolation: isolate;
}

.nq-home-cta .nq-home-container::before {
  content: "";
  position: absolute;
  right: 3%;
  bottom: -3px;
  left: 3%;
  z-index: 0;
  height: 10px;
  border-radius: 50%;
  background: rgba(8, 10, 20, .52);
  filter: blur(5px);
  pointer-events: none;
}

.nq-home-cta .nq-home-container::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -27px;
  left: -30px;
  z-index: 0;
  height: 34px;
  background: linear-gradient(
    to bottom,
    rgba(8, 10, 20, .34) 0,
    rgba(8, 10, 20, .17) 42%,
    rgba(8, 10, 20, 0) 100%
  );
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
  filter: blur(7px);
  pointer-events: none;
}

.nq-home-cta-kicker {
  display: block;
  margin-bottom: 24px;
  color: #b3baff;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.nq-home-cta h2 {
  position: relative;
  z-index: 1;
  max-width: 12ch;
  margin: 0 0 28px;
  color: #fff;
  font-size: clamp(46px, 7vw, 92px);
  font-weight: 760;
  line-height: .92;
  letter-spacing: -.06em;
}

.nq-home-cta p {
  position: relative;
  z-index: 1;
  max-width: 52ch;
  margin: 0 0 34px;
  color: rgba(232, 235, 243, .7);
  font-size: 16px;
  line-height: 1.7;
}

.nq-home-cta-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 16px 22px;
  border-radius: 999px;
  color: #fff;
  background: var(--wb-accent);
  font-size: 14px;
  font-weight: 720;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease;
}

.nq-home-cta-btn:hover {
  color: #fff;
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.nq-home-cta-mark {
  position: absolute;
  right: -2%;
  bottom: -12%;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .08);
  font-size: clamp(100px, 18vw, 240px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.08em;
  pointer-events: none;
}

/* Editorial pull quotes */
.nq-proof-quote span {
  color: var(--wb-accent);
  font-family: Georgia, serif;
  font-size: 86px;
  line-height: .72;
}

.nq-proof-quote {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  max-width: 620px;
  margin: 38px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.nq-proof-quote span {
  font-size: 58px;
}

.nq-proof-quote p {
  margin: 0;
  color: rgba(232, 235, 243, .82);
  font-size: clamp(18px, 1.55vw, 23px);
  font-weight: 560;
  line-height: 1.45;
  letter-spacing: -.02em;
}

@media (max-width: 991.98px) {
  .nq-section-head,
  .nq-proof-layout,
  .nq-faq-layout {
    grid-template-columns: 1fr;
  }

  .nq-section-head {
    gap: 26px;
  }

  .nq-project:nth-child(4),
  .nq-project:nth-child(5) {
    grid-column: span 6;
    margin-top: 0;
  }

  .nq-proof-layout,
  .nq-faq-layout {
    gap: 52px;
  }

  .nq-faq-intro {
    position: static;
  }

  .nq-capability-list a {
    grid-template-columns: 50px minmax(220px, .9fr) minmax(240px, 1.1fr) 30px;
    gap: 18px;
  }
}

@media (max-width: 767.98px) {
  .nq-home-container {
    width: min(calc(100% - 32px), var(--nq-max, 1320px));
  }

  .nq-home-cta .nq-home-container::after {
    right: -10px;
    bottom: -21px;
    left: -10px;
    height: 28px;
    filter: blur(5px);
  }

  .nq-project,
  .nq-project-featured,
  .nq-project:nth-child(4),
  .nq-project:nth-child(5) {
    grid-column: 1 / -1;
  }

  /* ΜΙΑ ΣΤΗΛΗ ΣΤΗΝ ΠΡΑΓΜΑΤΙΚΟΤΗΤΑ, ΟΧΙ ΜΟΝΟ ΣΤΗΝ ΟΨΗ.
     Το πλέγμα κρατούσε τις 12 στήλες και σε κινητό· άλλαζε μόνο το span των
     καρτών σε `1 / -1`. Οι στήλες μηδένιζαν (minmax(0,1fr)) αλλά τα ΚΕΝΑ όχι:
     11 κενά × 46px = 506px, μέσα σε container 328px — δηλαδή κάθε κάρτα έβγαινε
     506px φαρδιά και η αρχική είχε 162px οριζόντια κύλιση σε κινητό.
     Με μία στήλη το column-gap δεν έχει τι να χωρίσει και το πλάτος κλειδώνει. */
  .nq-projects {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .nq-project-media,
  .nq-project-featured .nq-project-media {
    aspect-ratio: 4 / 3;
  }

  .nq-project-meta small {
    display: none;
  }

  .nq-home-action {
    justify-content: flex-start;
    margin-top: 48px;
  }

  .nq-proof-facts div {
    min-height: 145px;
    padding: 24px 20px;
  }

  .nq-capability-list a {
    grid-template-columns: 36px 1fr 24px;
    gap: 14px;
    padding: 24px 0;
  }

  .nq-capability-list p {
    grid-column: 2 / -1;
    padding-right: 20px;
  }

  .nq-capability-list b {
    grid-column: 3;
    grid-row: 1;
  }

  .nq-home-cta-in {
    margin-inline: -16px;
    padding: 54px 22px 62px;
  }

  .nq-home-cta-btn {
    justify-content: center;
    width: 100%;
  }

}

@media (max-width: 479.98px) {
  .nq-proof-facts {
    grid-template-columns: 1fr;
  }

  .nq-proof-facts div {
    min-height: 0;
  }
}

/* Primary services intro — editorial statement and three working pillars. */
body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head--editorial {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important;
  align-items: center !important;
  column-gap: clamp(72px, 9vw, 164px) !important;
  padding-top: clamp(68px, 7vw, 108px) !important;
  padding-bottom: clamp(58px, 6vw, 86px) !important;
  overflow: hidden;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head--editorial::after {
  content: "";
  position: absolute;
  top: 18px;
  right: -8px;
  width: clamp(110px, 12vw, 190px);
  height: clamp(110px, 12vw, 190px);
  border: 1px solid rgba(84, 72, 247, .11);
  border-radius: 50%;
  transform: translate(42%, -24%);
  pointer-events: none;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__statement,
body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__aside {
  position: relative;
  z-index: 1;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  color: var(--nq-accent, #5548f7);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__eyebrow::before {
  content: "";
  width: 38px;
  height: 1px;
  background: currentColor;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__eyebrow span {
  color: #8b91a0;
  font-variant-numeric: tabular-nums;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head--editorial h2 {
  max-width: 720px !important;
  margin: 0 !important;
  color: #080b14 !important;
  font-size: clamp(40px, 3.55vw, 58px) !important;
  font-weight: 760 !important;
  line-height: 1.01 !important;
  letter-spacing: -.046em !important;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head--editorial h2 > span,
body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head--editorial h2 > em {
  display: block !important;
  font-size: inherit !important;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head--editorial h2 > em {
  margin-top: 8px;
  color: var(--nq-accent, #655cff) !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-style: italic !important;
  line-height: 1.01 !important;
  letter-spacing: -.048em !important;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__aside {
  padding: 0 0 4px 28px;
  border-left: 1px solid rgba(8, 11, 20, .18);
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__lead {
  max-width: 460px !important;
  margin: 0 0 32px !important;
  color: #525b6c !important;
  font-size: clamp(16px, 1.18vw, 19px) !important;
  line-height: 1.65 !important;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__lead strong {
  display: block;
  margin-bottom: 5px;
  color: #101522;
  font-size: 1.08em;
  font-weight: 780;
  letter-spacing: -.018em;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__principles {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(8, 11, 20, .18);
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__principles li {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid rgba(8, 11, 20, .13);
  color: #101522;
  font-size: 13px;
  font-weight: 760;
  letter-spacing: .035em;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__principles span {
  color: var(--nq-accent, #5548f7);
  font-size: 10px;
  letter-spacing: .12em;
}

@media (max-width: 991.98px) {
  body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head--editorial {
    grid-template-columns: 1fr !important;
    row-gap: 44px !important;
  }

  body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
    gap: 36px;
    padding: 28px 0 0 !important;
    border-top: 1px solid rgba(8, 11, 20, .18);
    border-left: 0;
  }

  body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__lead {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 767.98px) {
  body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head--editorial {
    row-gap: 34px !important;
    padding-top: 64px !important;
    padding-bottom: 44px !important;
  }

  body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head--editorial::after {
    top: 24px;
    right: 0;
    width: 104px;
    height: 104px;
  }

  body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__eyebrow {
    margin-bottom: 22px;
  }

  body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head--editorial h2 {
    max-width: 520px !important;
    font-size: clamp(34px, 9.5vw, 44px) !important;
    line-height: 1.03 !important;
    letter-spacing: -.043em !important;
  }

  body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head--editorial h2 > em {
    margin-top: 8px;
    letter-spacing: -.055em !important;
  }

  body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__aside {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-top: 24px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nq-project-media img,
  .nq-project-media::after,
  .nq-project-arrow,
  .nq-text-link span,
  .nq-capability-list a,
  .nq-capability-list b,
  .nq-faq-list summary span,
  .nq-home-cta-btn {
    transition: none;
  }

  .nq-proof-facts {
    transition: none;
  }
}

/* Services — low, lateral contact shadows make the upright panels feel grounded
   without drawing a literal supporting surface. */
body.nq-home:not(.nq-demo5) .nq-services-prime .nq-service-row {
  box-shadow:
    -30px 30px 34px -35px rgba(10, 12, 20, .34),
     30px 30px 34px -35px rgba(10, 12, 20, .34),
      0 34px 22px -25px rgba(10, 12, 20, .38) !important;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-service-row:nth-child(2) {
  box-shadow:
    -28px 28px 32px -36px rgba(10, 12, 20, .22),
     28px 28px 32px -36px rgba(10, 12, 20, .22),
      0 32px 22px -26px rgba(10, 12, 20, .25) !important;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-service-row:hover {
  box-shadow:
    -34px 34px 38px -36px rgba(10, 12, 20, .38),
     34px 34px 38px -36px rgba(10, 12, 20, .38),
      0 40px 28px -26px rgba(10, 12, 20, .43) !important;
}

/* Services heading — controlled editorial hierarchy instead of three equally
   loud display lines. */
body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head:not(.nq-services-prime__head--editorial) h2 {
  max-width: 900px !important;
  font-size: clamp(48px, 4.25vw, 68px) !important;
  line-height: .98 !important;
  letter-spacing: -.048em !important;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head:not(.nq-services-prime__head--editorial) h2 > span:first-child {
  margin-bottom: 7px !important;
  font-size: .79em !important;
  line-height: 1.04 !important;
  letter-spacing: -.042em !important;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head:not(.nq-services-prime__head--editorial) h2 > em {
  font-size: 1.02em !important;
  line-height: .95 !important;
  letter-spacing: -.045em !important;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head:not(.nq-services-prime__head--editorial) .nq-services-prime__closer {
  gap: 16px !important;
  margin-top: 24px !important;
  font-size: .66em !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
}

body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head:not(.nq-services-prime__head--editorial) .nq-services-prime__closer::before {
  flex-basis: 38px !important;
}

@media (max-width: 767.98px) {
  body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head:not(.nq-services-prime__head--editorial) h2 {
    font-size: clamp(39px, 11.5vw, 54px) !important;
    letter-spacing: -.042em !important;
  }

  body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head:not(.nq-services-prime__head--editorial) h2 > span:first-child {
    font-size: .76em !important;
  }

  body.nq-home:not(.nq-demo5) .nq-services-prime .nq-services-prime__head:not(.nq-services-prime__head--editorial) .nq-services-prime__closer {
    margin-top: 18px !important;
    font-size: .62em !important;
  }
}

/* Workflow — asymmetric editorial composition in the Webbox visual language. */
body.nq-home:not(.nq-demo5) .nq-wf--editorial {
  padding: clamp(72px, 8vw, 120px) 0 !important;
  background: #f3f1ec !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-in {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(330px, 38%) minmax(0, 62%) !important;
  grid-template-rows: auto auto 1fr;
  width: min(calc(100% - 40px), 1460px) !important;
  min-height: 680px;
  margin-inline: auto !important;
  padding: clamp(58px, 5vw, 82px) 0 0 !important;
  overflow: hidden;
  background: linear-gradient(90deg, #0a0e1b 0 38%, #f8f7f3 38% 100%);
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-eyebrow,
body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-title,
body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-lead {
  position: relative;
  z-index: 1;
  grid-column: 1;
  width: min(72%, 380px);
  margin-right: auto !important;
  margin-left: clamp(34px, 4vw, 68px) !important;
  text-align: left !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  color: #918bff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-title {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  color: #f7f7fb !important;
  font-size: clamp(43px, 4vw, 64px) !important;
  font-weight: 760 !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-lead {
  margin-top: 0 !important;
  color: #a8adbb;
  font-size: 15px;
  line-height: 1.72;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-steps {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: block !important;
  align-self: stretch;
  margin: 0 !important;
  padding: 0 clamp(30px, 4vw, 70px) 0 clamp(36px, 4vw, 72px) !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-steps::before,
body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step::before,
body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step::after,
body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-dot > span {
  display: none !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step {
  position: relative;
  display: grid !important;
  grid-template-columns: 72px minmax(180px, .7fr) minmax(250px, 1fr) 54px;
  align-items: center;
  gap: clamp(18px, 2.2vw, 38px);
  width: 100% !important;
  min-height: 145px;
  margin: 0 !important;
  padding: 20px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(11, 15, 28, .14) !important;
  text-align: left !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step:first-child {
  border-top: 1px solid rgba(11, 15, 28, .14) !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-label {
  display: none !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-no {
  grid-column: 1;
  grid-row: 1;
  position: static !important;
  color: rgba(84, 72, 247, .22) !important;
  font-size: 42px !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  letter-spacing: -.06em;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  color: #0d1220 !important;
  font-size: clamp(21px, 1.7vw, 27px) !important;
  font-weight: 740 !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step p {
  grid-column: 3;
  grid-row: 1;
  max-width: 34ch;
  margin: 0 !important;
  color: #646c7b !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-dot {
  grid-column: 4;
  grid-row: 1;
  position: static !important;
  display: grid !important;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  border: 1px solid rgba(85, 72, 247, .24) !important;
  border-radius: 50% !important;
  background: #eeecff !important;
  color: #5548f7 !important;
  place-items: center;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-dot i {
  display: grid !important;
  width: 18px !important;
  height: 18px !important;
  color: inherit !important;
  place-items: center;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-dot svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}

@media (max-width: 1099.98px) {
  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step {
    grid-template-columns: 58px minmax(155px, .65fr) minmax(210px, 1fr) 48px;
    gap: 18px;
  }
}

@media (max-width: 899.98px) {
  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-in {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto 1fr;
    padding-top: 54px !important;
    background: linear-gradient(180deg, #0a0e1b 0 310px, #f8f7f3 310px 100%);
  }

  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-eyebrow,
  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-title,
  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-lead {
    grid-column: 1;
    width: min(calc(100% - 64px), 560px);
    margin-left: 32px !important;
  }

  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-title {
    font-size: clamp(39px, 8vw, 56px) !important;
  }

  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-steps {
    grid-column: 1;
    grid-row: 4;
    margin-top: 58px !important;
    padding: 0 32px 30px !important;
  }
}

@media (max-width: 639.98px) {
  body.nq-home:not(.nq-demo5) .nq-wf--editorial {
    padding-block: 56px !important;
  }

  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-in {
    width: min(calc(100% - 24px), 1460px) !important;
    min-height: 0;
    background: linear-gradient(180deg, #0a0e1b 0 330px, #f8f7f3 330px 100%);
  }

  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step {
    grid-template-columns: 48px 1fr 44px;
    min-height: 0;
    padding: 28px 0 !important;
  }

  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step h3 {
    grid-column: 2;
    align-self: end;
  }

  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step p {
    grid-column: 2 / span 2;
    grid-row: 2;
    margin-top: 9px !important;
  }

  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-dot {
    grid-column: 3;
    width: 40px !important;
    height: 40px !important;
  }
}

/* Website scope v2 — open checklist layout, without oversized cards. */
body.nq-home:not(.nq-demo5) .nq-scope-layout {
  display: block;
  margin-top: 0;
}

body.nq-home:not(.nq-demo5) .nq-scope-head {
  border-bottom: 0;
}

body.nq-home:not(.nq-demo5) .nq-scope-core,
body.nq-home:not(.nq-demo5) .nq-scope-extra {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  column-gap: clamp(42px, 6vw, 96px);
  padding: clamp(40px, 4vw, 58px) 0;
  border: 0;
}

body.nq-home:not(.nq-demo5) .nq-scope-core {
  grid-template-rows: auto 1fr;
  border-top: 0;
  background: transparent;
}

body.nq-home:not(.nq-demo5) .nq-scope-extra {
  grid-template-rows: auto 1fr;
  margin-top: 24px;
  padding-right: clamp(30px, 4vw, 58px);
  padding-left: clamp(30px, 4vw, 58px);
  color: #161a28;
  background:
    radial-gradient(circle at 100% 0%, rgba(102, 95, 244, .13), transparent 34%),
    #ebe9f7;
}

body.nq-home:not(.nq-demo5) .nq-scope-card-head {
  display: block;
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
}

body.nq-home:not(.nq-demo5) .nq-scope-card-head h3,
body.nq-home:not(.nq-demo5) .nq-scope-extra .nq-scope-card-head h3 {
  max-width: 280px;
  margin-top: 18px !important;
  color: #111522 !important;
  font-size: clamp(25px, 2.1vw, 32px) !important;
  line-height: 1.06 !important;
  text-align: left;
}

body.nq-home:not(.nq-demo5) .nq-scope-priority {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 18px;
  border: 1px solid rgba(85, 72, 247, .18);
  overflow: hidden;
  background: transparent;
}

body.nq-home:not(.nq-demo5) .nq-scope-priority span {
  min-height: 58px;
  padding: 19px 14px;
  background: transparent;
}

body.nq-home:not(.nq-demo5) .nq-scope-list {
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 28px;
}

body.nq-home:not(.nq-demo5) .nq-scope-list li {
  min-height: 47px;
  padding: 14px 10px 13px 25px;
}

body.nq-home:not(.nq-demo5) .nq-scope-list li::before {
  top: 19px;
  left: 1px;
  width: 7px;
  height: 4px;
  border: 0;
  border-bottom: 1.5px solid #645cf1;
  border-left: 1.5px solid #645cf1;
  border-radius: 0;
  transform: rotate(-45deg);
}

body.nq-home:not(.nq-demo5) .nq-scope-extra > p {
  grid-column: 1;
  grid-row: 2;
  max-width: 30ch;
  margin: 24px 0 0 !important;
  color: #686d7b;
}

body.nq-home:not(.nq-demo5) .nq-scope-list--extra {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.nq-home:not(.nq-demo5) .nq-scope-list--extra li {
  border-color: rgba(20, 24, 39, .12);
  color: #292e3d;
}

body.nq-home:not(.nq-demo5) .nq-scope-list--extra li::before {
  top: 15px;
  width: 9px;
  height: 9px;
  border: 0;
  background:
    linear-gradient(#645cf1, #645cf1) 50% 0 / 1px 100% no-repeat,
    linear-gradient(#645cf1, #645cf1) 0 50% / 100% 1px no-repeat;
  transform: none;
}

body.nq-home:not(.nq-demo5) .nq-scope-list--extra a span {
  color: #5548f7;
}

@media (max-width: 1099.98px) {
  body.nq-home:not(.nq-demo5) .nq-scope-core,
  body.nq-home:not(.nq-demo5) .nq-scope-extra {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  body.nq-home:not(.nq-demo5) .nq-scope-list,
  body.nq-home:not(.nq-demo5) .nq-scope-list--extra {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  body.nq-home:not(.nq-demo5) .nq-scope-core,
  body.nq-home:not(.nq-demo5) .nq-scope-extra {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }

  body.nq-home:not(.nq-demo5) .nq-scope-card-head,
  body.nq-home:not(.nq-demo5) .nq-scope-priority,
  body.nq-home:not(.nq-demo5) .nq-scope-list,
  body.nq-home:not(.nq-demo5) .nq-scope-extra > p,
  body.nq-home:not(.nq-demo5) .nq-scope-list--extra {
    grid-column: 1;
    grid-row: auto;
  }

  body.nq-home:not(.nq-demo5) .nq-scope-card-head h3,
  body.nq-home:not(.nq-demo5) .nq-scope-extra .nq-scope-card-head h3,
  body.nq-home:not(.nq-demo5) .nq-scope-extra > p {
    max-width: 560px;
  }

  body.nq-home:not(.nq-demo5) .nq-scope-extra > p {
    margin-top: 0 !important;
  }
}

@media (max-width: 539.98px) {
  body.nq-home:not(.nq-demo5) .nq-scope-priority,
  body.nq-home:not(.nq-demo5) .nq-scope-list,
  body.nq-home:not(.nq-demo5) .nq-scope-list--extra {
    grid-template-columns: 1fr;
  }
}

/* Scope polish: one uninterrupted surface, without decorative rules. */
body.nq-home:not(.nq-demo5) .nq-scope-head {
  border-bottom: 0;
}

body.nq-home:not(.nq-demo5) .nq-scope-layout {
  margin-top: 0;
}

body.nq-home:not(.nq-demo5) .nq-scope-core,
body.nq-home:not(.nq-demo5) .nq-scope-extra {
  border-top: 0;
  border-bottom: 0;
}

body.nq-home:not(.nq-demo5) .nq-scope-priority {
  overflow: hidden;
  background: #efedff;
}

body.nq-home:not(.nq-demo5) .nq-scope-priority span {
  background: transparent;
}

/* Workflow horizontal variant — preserve the original compact four-column
   information architecture while replacing the generic timeline styling. */
body.nq-home:not(.nq-demo5) .nq-wf--editorial {
  padding: 72px 0 !important;
  background: #f7f6f2 !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-in {
  display: block !important;
  width: min(calc(100% - 40px), 1460px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible;
  background: transparent !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-eyebrow,
body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-title,
body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-lead {
  width: min(100%, 680px) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-eyebrow {
  justify-content: center;
  margin-bottom: 16px !important;
  color: #5b53e6 !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-eyebrow::before {
  display: none;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-title {
  margin-bottom: 18px !important;
  color: #0c111e !important;
  font-size: clamp(40px, 3.8vw, 58px) !important;
  line-height: 1 !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-lead {
  margin-bottom: 0 !important;
  color: #697080 !important;
  font-size: 15px;
  line-height: 1.65;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-steps {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 48px !important;
  padding: 0 !important;
  border-top: 1px solid rgba(12, 17, 30, .14);
  border-bottom: 1px solid rgba(12, 17, 30, .14);
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step,
body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step:first-child {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0 !important;
  height: 286px !important;
  min-height: 286px;
  padding: 30px clamp(24px, 2.2vw, 38px) 34px !important;
  border: 0 !important;
  border-right: 1px solid rgba(12, 17, 30, .12) !important;
  text-align: left !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step:last-child {
  border-right: 0 !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-label {
  display: block !important;
  order: 1;
  margin: 0 0 34px !important;
  color: #6a63ec !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-label::first-letter {
  text-transform: uppercase;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-dot {
  position: absolute !important;
  top: 24px !important;
  right: clamp(24px, 2.2vw, 38px) !important;
  width: 42px !important;
  height: 42px !important;
  background: #eeecff !important;
  order: 2;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-dot i {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-no {
  position: static !important;
  display: block;
  order: 3;
  margin: 0 0 16px !important;
  color: rgba(85, 72, 247, .25) !important;
  font-size: 50px !important;
  line-height: .9 !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step h3 {
  order: 4;
  margin: 0 0 12px !important;
  color: #0d1220 !important;
  font-size: 22px !important;
  line-height: 1.08 !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step p {
  order: 5;
  max-width: 29ch;
  margin: 0 !important;
  color: #656d7d !important;
  font-size: 14px !important;
  line-height: 1.62 !important;
}

@media (max-width: 899.98px) {
  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step:nth-child(2) {
    border-right: 0 !important;
  }

  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step:nth-child(-n+2) {
    border-bottom: 1px solid rgba(12, 17, 30, .12) !important;
  }
}

@media (max-width: 559.98px) {
  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-in {
    width: min(calc(100% - 24px), 1460px) !important;
  }

  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-steps {
    grid-template-columns: 1fr;
  }

  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step,
  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step:nth-child(2) {
    height: auto !important;
    min-height: 235px;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(12, 17, 30, .12) !important;
  }

  body.nq-home:not(.nq-demo5) .nq-wf--editorial .nq-wf-step:last-child {
    border-bottom: 0 !important;
  }
}

/* Website scope — replaces the temporary workflow content with a clear
   included/optional service specification. */
body.nq-home:not(.nq-demo5) .nq-wf--scope {
  padding: clamp(68px, 6vw, 88px) 0 !important;
  background: #f6f4ef !important;
}

body.nq-home:not(.nq-demo5) .nq-wf--scope .nq-wf-in {
  display: block !important;
  width: min(calc(100% - 40px), 1460px) !important;
  margin-inline: auto !important;
  padding: 0 !important;
}

body.nq-home:not(.nq-demo5) .nq-scope-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  align-items: end;
  column-gap: clamp(54px, 8vw, 150px);
  row-gap: 0;
  padding-bottom: clamp(38px, 4vw, 54px);
  border-bottom: 1px solid rgba(12, 17, 30, .16);
}

body.nq-home:not(.nq-demo5) .nq-scope-eyebrow {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
  color: #5b53e6;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.nq-home:not(.nq-demo5) .nq-scope-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
}

body.nq-home:not(.nq-demo5) .nq-scope-head h2 {
  grid-column: 1;
  margin: 0 !important;
  color: #0a0e19 !important;
  font-size: clamp(38px, 3.6vw, 56px) !important;
  font-weight: 770 !important;
  line-height: .94 !important;
  letter-spacing: -.06em !important;
}

body.nq-home:not(.nq-demo5) .nq-scope-head h2 em {
  color: #625af1;
  font-style: italic;
}

body.nq-home:not(.nq-demo5) .nq-scope-head > p {
  grid-column: 2;
  grid-row: 1 / span 2;
  max-width: 47ch;
  margin: 0 0 5px !important;
  color: #626a79;
  font-size: 16px;
  line-height: 1.72;
}

body.nq-home:not(.nq-demo5) .nq-scope-head > p strong {
  color: #171c29;
  font-weight: 760;
}

body.nq-home:not(.nq-demo5) .nq-scope-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(330px, .72fr);
  gap: 24px;
  margin-top: 24px;
}

body.nq-home:not(.nq-demo5) .nq-scope-core,
body.nq-home:not(.nq-demo5) .nq-scope-extra {
  padding: clamp(32px, 3.5vw, 52px);
  border: 1px solid rgba(12, 17, 30, .14);
}

body.nq-home:not(.nq-demo5) .nq-scope-core {
  background: #fbfaf7;
}

body.nq-home:not(.nq-demo5) .nq-scope-extra {
  color: #f7f7fb;
  background:
    radial-gradient(circle at 100% 0%, rgba(90, 79, 229, .26), transparent 38%),
    #0b0f1c;
}

body.nq-home:not(.nq-demo5) .nq-scope-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 32px;
}

body.nq-home:not(.nq-demo5) .nq-scope-card-head > span {
  color: #665ff4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.nq-home:not(.nq-demo5) .nq-scope-card-head h3 {
  max-width: 410px;
  margin: 0 !important;
  color: #111522 !important;
  font-size: clamp(25px, 2.2vw, 34px) !important;
  font-weight: 740 !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
  text-align: right;
}

body.nq-home:not(.nq-demo5) .nq-scope-extra .nq-scope-card-head h3 {
  color: #f7f7fb !important;
}

body.nq-home:not(.nq-demo5) .nq-scope-priority {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 22px;
  border-top: 1px solid rgba(85, 72, 247, .24);
  border-bottom: 1px solid rgba(85, 72, 247, .24);
}

body.nq-home:not(.nq-demo5) .nq-scope-priority span {
  min-height: 68px;
  padding: 22px 18px;
  border-right: 1px solid rgba(85, 72, 247, .2);
  color: #332c9e;
  background: #efedff;
  font-size: 13px;
  font-weight: 760;
  text-align: center;
}

body.nq-home:not(.nq-demo5) .nq-scope-priority span:last-child {
  border-right: 0;
}

body.nq-home:not(.nq-demo5) .nq-scope-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

body.nq-home:not(.nq-demo5) .nq-scope-list li {
  position: relative;
  min-height: 50px;
  padding: 15px 24px 14px 27px;
  border-bottom: 1px solid rgba(12, 17, 30, .1);
  color: #353c4a;
  font-size: 13px;
  font-weight: 620;
  line-height: 1.45;
}

body.nq-home:not(.nq-demo5) .nq-scope-list li::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 3px;
  width: 6px;
  height: 6px;
  border: 2px solid #6b63f4;
  border-radius: 50%;
}

body.nq-home:not(.nq-demo5) .nq-scope-extra > p {
  margin: 0 0 26px !important;
  color: #a9afbd;
  font-size: 14px;
  line-height: 1.7;
}

body.nq-home:not(.nq-demo5) .nq-scope-list--extra {
  grid-template-columns: 1fr;
}

body.nq-home:not(.nq-demo5) .nq-scope-list--extra li {
  padding-right: 0;
  border-color: rgba(255, 255, 255, .11);
  color: #e4e6ed;
}

body.nq-home:not(.nq-demo5) .nq-scope-list--extra li::before {
  border-color: #8e87ff;
}

body.nq-home:not(.nq-demo5) .nq-scope-list--extra a {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: inherit;
  text-decoration: none;
}

body.nq-home:not(.nq-demo5) .nq-scope-list--extra a span {
  color: #8e87ff;
}

@media (max-width: 991.98px) {
  body.nq-home:not(.nq-demo5) .nq-scope-head,
  body.nq-home:not(.nq-demo5) .nq-scope-layout {
    grid-template-columns: 1fr;
  }

  body.nq-home:not(.nq-demo5) .nq-scope-head > p {
    grid-column: 1;
    grid-row: auto;
  }

  body.nq-home:not(.nq-demo5) .nq-scope-list--extra {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639.98px) {
  body.nq-home:not(.nq-demo5) .nq-wf--scope .nq-wf-in {
    width: min(calc(100% - 24px), 1460px) !important;
  }

  body.nq-home:not(.nq-demo5) .nq-scope-head h2 {
    font-size: clamp(39px, 11vw, 54px) !important;
  }

  body.nq-home:not(.nq-demo5) .nq-scope-core,
  body.nq-home:not(.nq-demo5) .nq-scope-extra {
    padding: 28px 22px;
  }

  body.nq-home:not(.nq-demo5) .nq-scope-card-head {
    display: block;
  }

  body.nq-home:not(.nq-demo5) .nq-scope-card-head h3 {
    margin-top: 14px !important;
    text-align: left;
  }

  body.nq-home:not(.nq-demo5) .nq-scope-priority,
  body.nq-home:not(.nq-demo5) .nq-scope-list,
  body.nq-home:not(.nq-demo5) .nq-scope-list--extra {
    grid-template-columns: 1fr;
  }

  body.nq-home:not(.nq-demo5) .nq-scope-priority span {
    border-right: 0;
    border-bottom: 1px solid rgba(85, 72, 247, .18);
  }

  body.nq-home:not(.nq-demo5) .nq-scope-priority span:last-child {
    border-bottom: 0;
  }
}

/* Final cascade for the approved open checklist variant. */
body.nq-home:not(.nq-demo5) .nq-scope-layout {
  display: block;
  margin-top: 0;
}

body.nq-home:not(.nq-demo5) .nq-scope-head {
  border-bottom: 0;
}

body.nq-home:not(.nq-demo5) .nq-scope-core,
body.nq-home:not(.nq-demo5) .nq-scope-extra {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  column-gap: clamp(42px, 6vw, 96px);
  padding: clamp(40px, 4vw, 58px) 0;
  border: 0;
}

body.nq-home:not(.nq-demo5) .nq-scope-core {
  grid-template-rows: auto 1fr;
  border-top: 0;
  background: transparent;
}

body.nq-home:not(.nq-demo5) .nq-scope-extra {
  grid-template-rows: auto 1fr;
  margin-top: 24px;
  padding-right: clamp(30px, 4vw, 58px);
  padding-left: clamp(30px, 4vw, 58px);
  color: #161a28;
  background: radial-gradient(circle at 100% 0%, rgba(102, 95, 244, .13), transparent 34%), #ebe9f7;
}

body.nq-home:not(.nq-demo5) .nq-scope-extra .nq-scope-card-head {
  grid-row: 1 / span 2;
}

body.nq-home:not(.nq-demo5) .nq-scope-card-head {
  display: block;
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
}

body.nq-home:not(.nq-demo5) .nq-scope-card-head h3,
body.nq-home:not(.nq-demo5) .nq-scope-extra .nq-scope-card-head h3 {
  max-width: 280px;
  margin-top: 18px !important;
  color: #111522 !important;
  font-size: clamp(25px, 2.1vw, 32px) !important;
  line-height: 1.06 !important;
  text-align: left;
}

body.nq-home:not(.nq-demo5) .nq-scope-priority {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 18px;
  gap: 14px;
  border: 0;
  overflow: visible;
  background: transparent;
}

body.nq-home:not(.nq-demo5) .nq-scope-priority span {
  min-height: 58px;
  padding: 19px 14px;
  border: 1px solid rgba(85, 72, 247, .2);
  background: #f5f3ff;
}

body.nq-home:not(.nq-demo5) .nq-scope-priority span:nth-child(2) {
  background: #f2f6ff;
}

body.nq-home:not(.nq-demo5) .nq-scope-priority span:nth-child(3) {
  background: #f7f3fb;
}

body.nq-home:not(.nq-demo5) .nq-scope-priority span:last-child {
  border-right: 1px solid rgba(85, 72, 247, .2);
}

body.nq-home:not(.nq-demo5) .nq-scope-list {
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 28px;
}

body.nq-home:not(.nq-demo5) .nq-scope-list li {
  min-height: 47px;
  padding: 14px 10px 13px 25px;
}

body.nq-home:not(.nq-demo5) .nq-scope-list li::before {
  top: 19px;
  left: 1px;
  width: 7px;
  height: 4px;
  border: 0;
  border-bottom: 1.5px solid #645cf1;
  border-left: 1.5px solid #645cf1;
  border-radius: 0;
  transform: rotate(-45deg);
}

body.nq-home:not(.nq-demo5) .nq-scope-extra > p {
  grid-column: 2;
  grid-row: 1;
  max-width: none;
  margin: 0 0 20px !important;
  color: #686d7b;
  font-size: 13px;
  line-height: 1.5;
  /* 🔴 ΟΧΙ `nowrap` (ιδιοκτήτης 2026-08-24: «αυτό το κείμενο μας χαλάει τη
     σελίδα — το έκανα display:none και έφυγε η scroll bar»).
     ΜΕΤΡΗΜΕΝΟ: με nowrap η πρόταση έπιανε 549px σε ΜΙΑ γραμμή, και επειδή
     ο γονιός είναι grid, η στήλη έπαιρνε πλάτος ΑΠΟ ΑΥΤΗΝ
     (grid-template-columns: 230px 549px). Σε παράθυρο 955px η ενότητα
     γινόταν 915px και έσπρωχνε τη σελίδα πλατύτερα από την οθόνη.
     Το κείμενο σπάει κανονικά — δεν υπάρχει λόγος να μείνει σε μία γραμμή. */
}

body.nq-home:not(.nq-demo5) .nq-scope-list--extra {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.nq-home:not(.nq-demo5) .nq-scope-list--extra li {
  border-color: rgba(20, 24, 39, .12);
  color: #292e3d;
}

body.nq-home:not(.nq-demo5) .nq-scope-list--extra li::before {
  top: 15px;
  width: 9px;
  height: 9px;
  border: 0;
  background: linear-gradient(#645cf1, #645cf1) 50% 0 / 1px 100% no-repeat, linear-gradient(#645cf1, #645cf1) 0 50% / 100% 1px no-repeat;
  transform: none;
}

@media (max-width: 1099.98px) {
  body.nq-home:not(.nq-demo5) .nq-scope-core,
  body.nq-home:not(.nq-demo5) .nq-scope-extra {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  body.nq-home:not(.nq-demo5) .nq-scope-list,
  body.nq-home:not(.nq-demo5) .nq-scope-list--extra {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  body.nq-home:not(.nq-demo5) .nq-scope-core,
  body.nq-home:not(.nq-demo5) .nq-scope-extra {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }

  body.nq-home:not(.nq-demo5) .nq-scope-card-head,
  body.nq-home:not(.nq-demo5) .nq-scope-priority,
  body.nq-home:not(.nq-demo5) .nq-scope-list,
  body.nq-home:not(.nq-demo5) .nq-scope-extra > p,
  body.nq-home:not(.nq-demo5) .nq-scope-list--extra {
    grid-column: 1;
    grid-row: auto;
  }

  body.nq-home:not(.nq-demo5) .nq-scope-extra > p {
    margin-top: 0 !important;
    white-space: normal;
  }
}

@media (max-width: 539.98px) {
  body.nq-home:not(.nq-demo5) .nq-scope-priority,
  body.nq-home:not(.nq-demo5) .nq-scope-list,
  body.nq-home:not(.nq-demo5) .nq-scope-list--extra {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   WEBBOX REDESIGN — ΖΩΝΗ HERO
   Πηγή: Demo 5. Επιπεδωμένο, ΜΗΔΕΝ !important, μόνο απόγονοι, μηδέν .pb-*

   ΔΕΝ περιέχει: χρώματα .nq-btn-primary/.nq-btn-ghost (δεμένα σε tokens
   στο modules/hero.css), το βελάκι (μπήκε ως <svg> μέσα στο <a>), και τα
   letter-spacing h1/eyebrow (επιλογή του modules/hero.css).

   SCOPE: body.nq-demo5 — ΠΡΟΣΩΡΙΝΟ. Όταν η σελίδα γίνει
   η επίσημη αρχική: find/replace σε nq-home.
   ═══════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-hero-eyebrow {
  color: #aaa7ff;
}
body.nq-demo5 .nq-hero-eyebrow::before {
  background-color: #aaa7ff;
  border-color: #aaa7ff;
}
body.nq-demo5 .nq-hero-eyebrow::after {
  background-color: #aaa7ff;
  border-color: #aaa7ff;
}
body.nq-demo5 .nq-hero-cta {
  margin-top: 16px;
}

@media (max-width:576px) {
  body.nq-demo5 .nq-hero-cta {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  body.nq-demo5 .nq-hero-cta .nq-btn {
    width: auto;
    min-width: 220px;
    max-width: calc(100% - 32px);
    margin-inline: auto;
  }
}

@media (max-width:767px) {
  body.nq-demo5 .nq-hero-badge {
    display: none;
  }
  body.nq-demo5 .nq-hero video {
    object-position: 62% center;
    visibility: hidden;
  }
  body.nq-demo5 .nq-hero {
    background-color: transparent;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ΤΙΤΛΟΣ HERO — ελαφρυ ανοιγμα γραμματων (αιτημα ιδιοκτητη)
   Το modules/hero.css δινει -2.24px (-0.035em) που σφιγγει πολυ τα
   ελληνικα. Το demo οριζει `normal`. Βαζουμε μικρο θετικο.
   Ειδικοτητα 0,2,1 εναντι 0,1,1 του module — κερδιζει χωρις !important.
   ═══════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-hero h1 {
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════════
   [ADAPT] builder DOM — ΚΟΥΜΠΙΑ HERO

   ΒΕΛΑΚΙ: το mockup χρησιμοποιει τον ΧΑΡΑΚΤΗΡΑ "→" σε βαρος 850,
   οχι εικονιδιο. Το Button block βγαζει <i class="nq-btn-ico fe
   fe-arrow-right"> — αλλο σχημα (Feather, λεπτο stroke). Αποφαση
   ιδιοκτητη: να ειναι ΙΔΙΟ με το mockup. Κρυβουμε το εικονιδιο και
   βαζουμε τον χαρακτηρα.
   ΣΗΜΕΙΩΣΗ: το ::after δεν ειναι επεξεργασιμο απο τον builder. Αν
   χρειαστει να αλλαζει, η εναλλακτικη ειναι εικονιδιο με το ιδιο
   σχημα στη βιβλιοθηκη + ρυθμιση «θεση = δεξια».

   flex-direction:row — το nq-ico-left/right του block το γυριζει σε
   row-reverse· το επαναφερουμε ωστε το ::after να παει ΔΕΞΙΑ.

   ΚΕΝΟ: καθε κουμπι ειναι σε δικο του div.B_button (inline-block),
   οποτε το gap:12px του mockup δεν υπαρχει — μετρηθηκε κενο 0.

   Μετρημενο: πλατος 183px (demo 179, αποκλιση 2%) · κενο 12px · ενα
   βελακι δεξια, χαρακτηρας "→" βαρος 850, οπως το demo.
   ═══════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-hero .nq-btn {
  flex-direction: row;
}
body.nq-demo5 .nq-hero .nq-btn .nq-btn-ico {
  display: none;
}
body.nq-demo5 .nq-hero .nq-btn.nq-var-solid::after {
  content: "→";
  font-size: 15px;
  font-weight: 850;
  line-height: 1;
  transition: transform .25s ease;
}
body.nq-demo5 .nq-hero .nq-btn.nq-var-solid:hover::after {
  transform: translateX(2px);
}
body.nq-demo5 .nq-hero .nq-button + .nq-button {
  margin-left: 12px;
}

/* Το letter-spacing των eyebrow μεταφερθηκε στο 15-theme.css —
   ισχυει πλεον σε ΟΛΟ το site, οχι μονο εδω (αποφαση ιδιοκτητη 2026-09-05).
   Μια πηγη ανα στοιχειο. */


/* ═══════════════════════════════════════════════════════════════════
   [ADAPT] builder DOM — HOVER ΚΟΥΜΠΙΩΝ HERO  (Π4 του Almyra)

   ΤΟ ΠΡΟΒΛΗΜΑ, μετρημένο στους κανόνες του CSSOM:
   Το Button block δίνει κλάση nq-fx-fade, που φτιάχνει overlay
   ::before με background-color: rgb(11,94,215) — ΜΠΛΕ — και
       .nqce-button .nq-fx-fade:hover::before { opacity: 1 }
   Στο hover το overlay σκεπάζει το κουμπί: γίνεται μπλε ΚΑΙ κρύβει
   το βελάκι (::after χωρίς z-index, το overlay από πάνω).
   Επιπλέον το .btn:hover του Bootstrap αλλάζει τα χρώματα.

   Το mockup ΔΕΝ έχει fill hover πουθενά — μόνο μικρή κίνηση.

   ΜΟΝΙΜΗ ΛΥΣΗ: ρύθμιση «Effect = None» στο ίδιο το Button block,
   οπότε ο πρώτος κανόνας εδώ αφαιρείται.
   ═══════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-hero .nq-btn.nq-fx-fade::before {
  display: none;
}
body.nq-demo5 .nq-hero .nq-btn.nq-var-solid:hover {
  background-color: var(--nq-accent);
  border-color: var(--nq-accent);
  color: var(--nq-on-accent);
}

/* ═══════════════════════════════════════════════════════════════════
   ΛΩΡΙΔΑ ΛΟΓΟΤΥΠΩΝ ΚΑΤΩ ΑΠΟ ΤΟ HERO

   ΠΡΟΣΟΧΗ: υλοποιηθηκε με το block **image_slider** (Swiper), οχι με το
   στατικο grid του demo. Οι κλασεις ειναι αλλες:
       .nq-logo-marquee  (el_class)  →  .swiper  →  .swiper-wrapper
         →  .nqsli-slide  →  img.nqsli-img
   Το προηγουμενο μπλοκ που ειχα γραψει για .nq-hero-clients/-client
   ΑΦΑΙΡΕΘΗΚΕ — δεν ειχε κανενα στοχο (0 στοιχεια στο DOM).

   Οι τιμες ειναι του demo, μετρημενες στο αποδοθεν:
       καρτα 164×78 · radius 14 · gradient #080a12 → #03040a
       σκια 0 10px 26px rgba(0,0,0,.3) · padding 10px 15px
       εικονα max-height 58 · object-fit contain

   ΤΟ ΠΛΑΤΟΣ ΜΕΣΩ CSS ΕΙΝΑΙ ΣΩΣΤΟ ΕΔΩ: με slidesPerView:'auto' ο Swiper
   διαβαζει το πλατος του slide απο το CSS. Μετρημενο: 122/234/30/264 →
   **164 παντου**.

   ΤΟ ΚΕΝΟ ΜΕΤΑΞΥ ΚΑΡΤΩΝ ΕΙΝΑΙ ΡΥΘΜΙΣΗ, ΟΧΙ CSS: ειναι το `spaceBetween`
   του Swiper, που γραφεται inline ως margin-right. Ηταν 56px — μετρηθηκε
   το demo στα **18px** και μπηκε στο πεδιο «Κενο μεταξυ slides (px)»
   του block. ΜΗΝ το γραψεις σε CSS — ο Swiper υπολογιζει θεσεις με το
   δικο του νουμερο και η κινηση ξεσυγχρονιζεται.
   */
body.nq-demo5 .nq-logo-marquee .nqsli-slide {
  width: 164px;
  flex: 0 0 164px;
  height: 78px;
  padding: 10px 15px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 14px;
  /* ΧΩΡΙΣ ΚΑΡΤΑ — ΜΟΝΟ ΤΟ ΛΟΓΟΤΥΠΟ (ιδιοκτητης, 2026-09-07): «στα panels βγαλε
     τελειως το bg να φαινεται μονο το logo».
     ΗΤΑΝ: `background: linear-gradient(145deg, #080a12 0%, #03040a 100%)` και
     `box-shadow: 0 10px 26px rgba(0,0,0,.3)`. Εφυγαν ΚΑΙ ΤΑ ΔΥΟ: μονο το
     background θα αφηνε τη σκια να ζωγραφιζει ενα φαντασμα καρτας γυρω απο το
     τιποτα — ορατο πανω στο μαυρο ως θολο σκουρο τετραγωνο.

     ΤΙ ΜΕΝΕΙ ΚΑΙ ΓΙΑΤΙ: το `width/height/padding` κραταει το ΒΗΜΑ της κυλισης
     (164px + κενο) — χωρις αυτο αλλαζει η ταχυτητα και το mask των ακρων. Το
     `border-radius` μενει αβλαβες: με `overflow: hidden` κοβει μονο τις γωνιες
     ενος κουτιου που πλεον ειναι διαφανο, και τα λογοτυπα ειναι κεντραρισμενα
     με max-height 58 σε υψος 78, αρα δεν φτανουν εκει.

     ΤΟ «SELECTED PROJECTS» ΔΕΝ ΕΙΝΑΙ SLIDE και δεν επηρεαζεται — ειναι η
     ετικετα της ζωνης, αλλο στοιχειο. Αν χρειαστει να φυγει και το δικο της
     φοντο, ειναι ξεχωριστος κανονας. */
}
body.nq-demo5 .nq-logo-marquee .nqsli-img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 58px;
  object-fit: contain;
}

/* ── ΤΙΤΛΟΣ «SELECTED PROJECTS» ────────────────────────────────────────
   Η λωριδα ειναι ΔΙΚΗ ΤΗΣ ενοτητα και η στηλη κραταει την κλαση
   .nq-hero-clients, ωστε να επαναχρησιμοποιηθει το grid του modules/hero.css
   (154px για την ετικετα + 10px + το υπολοιπο για τον slider).

   ΕΔΩ ΥΠΗΡΧΑΝ ΕΠΤΑ ΔΗΛΩΣΕΙΣ ΑΝΤΙΣΤΑΘΜΙΣΗΣ — ΞΗΛΩΘΗΚΑΝ 2026-09-06.
   Το hero.css ειχε ολο το ΠΑΛΙΟ σχεδιο της λωριδας (αιωρουμενη μεσα στο hero:
   position absolute, bottom -108px, opacity 0 περιμενοντας μια κλαση .is-visible
   απο JS που δεν τρεχει εδω, και λευκο φοντο + padding κατω απο 768). Ολα αυτα
   χτυπουσαν τη ΔΙΚΗ ΜΑΣ στηλη επειδη μοιραζεται την κλαση. Με εντολη του
   ιδιοκτητη ο Agent 2 τα εσβησε απο την πηγη, οποτε δεν χρειαζεται πια τιποτα.

   🔴 ΤΙ ΕΜΕΙΝΕ ΖΩΝΤΑΝΟ ΣΤΟ hero.css ΚΑΙ ΔΕΝ ΠΡΕΠΕΙ ΝΑ ΣΒΗΣΤΕΙ:
   `.nq-hero-clients { display: grid; grid-template-columns: 154px minmax(0,1fr);
   gap: 10px; align-items: end }`. Αυτο ειναι που βαζει την ετικετα ΔΙΠΛΑ στον
   slider. Μοιαζε νεκρο μαζι με τα υπολοιπα· αν φυγει, στοιβαζονται. */

/* Ο τιτλος ειναι Text Block: div.row.B_Textblock > div.B_wrapper.
   Το .row φερνει αρνητικα περιθωρια και το `.row > *` 12px padding —
   τα μηδενιζουμε ωστε το padding της καρτας να ειναι οντως 16px.
   Μετρημενο στο demo: 11px/800, ls .22px, καρτα 154x78, radius 14,
   πλαισιο rgba(170,167,255,.28), φοντο #10121f + SVG (cover),
   σκια 0 13px 30px rgba(0,0,0,.2).
   Το hero.css εχει παλαιοτερες τιμες (9px, ls .16em, χωρις SVG). */
body.nq-demo5 .nq-hero-clients-label {
  margin: 0;
  font-size: 11px;
  letter-spacing: .02em;
  /* ΧΩΡΙΣ ΚΑΡΤΑ — ΜΟΝΟ ΤΟ ΚΕΙΜΕΝΟ (ιδιοκτητης, 2026-09-07): «απο τον slider με
     τα logos, αριστερα στο SELECTED, να φυγουν ολα τα bg και τα border».
     Ιδια μεταχειριση με τα slides των λογοτυπων, που καθαρισαν στον προηγουμενο
     γυρο — η ετικετα ηταν το τελευταιο κουτι που ειχε μεινει.

     ΗΤΑΝ: φοντο #10121f + selected-projects-bg.svg (cover), περιγραμμα
     rgba(170,167,255,.28), σκια 0 13px 30px rgba(0,0,0,.2).

     🔴 ΤΡΙΑ ΜΗΔΕΝΙΣΜΑΤΑ ΚΑΙ ΟΧΙ ΕΝΑ, ΓΙΑΤΙ ΟΙ ΤΙΜΕΣ ΕΡΧΟΝΤΑΙ ΑΠΟ ΔΥΟ ΑΡΧΕΙΑ:
     εδω οριζονταν `background-color`, `background-image`, `border-color` και
     `box-shadow`, αλλα το `modules/hero.css` δινει ΑΝΕΞΑΡΤΗΤΑ
     `border: 1px solid`, `border-radius: 14px`, `background: linear-gradient`
     και δικη του σκια. Σβησιμο μονο των δικων μας δηλωσεων θα ΞΕΣΚΕΠΑΖΕ τις
     τιμες του hero.css — δηλαδη θα εμενε γκρι-μπλε καρτα με περιγραμμα, αντι
     για τιποτα. Γι' αυτο γραφονται ΡΗΤΑ μηδενικα, που τις νικουν και τις δυο.

     ΤΟ border-radius ΔΕΝ ΠΕΙΡΑΖΕΤΑΙ: χωρις φοντο και περιγραμμα δεν εχει τι να
     στρογγυλεψει, και το κειμενο δεν κοβεται. */
  background: none;
  border: 0;
  box-shadow: none;
}
body.nq-demo5 .nq-hero-clients-label .B_wrapper {
  width: auto;
  padding-inline: 0;
}

/* Σβησιμο στα ακρα της λωριδας, οπως στο demo (18px εκατερωθεν). */
body.nq-demo5 .nq-logo-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

/* Η ΚΙΝΗΣΗ ΝΑ ΜΗΝ ΣΚΑΛΩΝΕΙ.
   Ο Swiper κανει ΕΝΑ βημα ανα slide (speed 4200ms, delay 0) και το
   .swiper-free-mode > .swiper-wrapper του δινει `ease-out` — αρα καθε βημα
   επιταχυνει και επιβραδυνει, και φαινεται σαν να σταματαει και να ξεκιναει.
   Το demo ειναι CSS marquee με `linear`, μετρημενο: 61 px/δευτ.
   Εδω αρκει το timing: με linear τα διαδοχικα βηματα ενωνονται σε συνεχη ροη.
   Ειδικοτητα: ο κανονας του Swiper ειναι (0,2,0), αυτος (0,3,0) — χωρις !important.

   ΕΚΚΡΕΜΕΙ ΡΥΘΜΙΣΗ (δεν λυνεται με CSS): 164px καρτα + 18px κενο = 182px ανα
   βημα / 4200ms = 43 px/δευτ, ενω το demo τρεχει 61. Για να ταιριαξει θελει
   «Ταχυτητα (ms)» 4200 -> **3000** στο block. Ζητηθηκε απο τον Agent 2. */
body.nq-demo5 .nq-logo-marquee .swiper-wrapper {
  transition-timing-function: linear;
}

/* ═══════════════════════════════════════════════════════════════════
   ΖΩΝΗ: made-corfu — «Φτιαγμενο στην Κερκυρα»
   Πηγη: Demo 5, μετρημενο 2026-09-05 στα 1920.

   ΠΡΑΓΜΑΤΙΚΗ ΔΟΜΗ (μετρημενη, οχι υποθεση):
     .pb-row-box.nq-made-corfu
       > .pb-row.row > .pb-col.nq-made-corfu__inner
           > div.nqah.nq-made-corfu__head  (adv_heading: sub + h2 — 2026-09-06)
           > hr.my-3                                                   (διαχωριστικο)
           > div.row.B_Textblock.nq-made-corfu__lead    > .B_wrapper   (κειμενο)

   ΤΙ ΔΕΝ ΓΡΑΦΩ ΕΔΩ, ΕΠΙΤΗΔΕΣ:
   · background #000 — ερχεται απο τη σελιδα/Skin. Δεν καρφωνουμε χρωμα.
   · color στον h2 — το demo εχει #fff, το θεμα δινει #f4f4f7 (--nq-text).
     Κραταμε το token: η διαφορα ειναι αοριστη και το χρωμα ανηκει στο Skin.

   ΔΥΟ ΠΡΟΣΑΡΜΟΓΕΣ ΣΤΗ ΔΟΜΗ:
   1) Το demo εχει <p> για το κειμενο· το Text Block βγαζει div.B_wrapper.
      Γι' αυτο ο επιλογεας ειναι .nq-made-corfu__lead, οχι `p`.
   2) Καθε Text Block ειναι .row: φερνει margin 0 -12px και το `.row > *`
      δινει 12px padding στο .B_wrapper. Οπου περιοριζουμε πλατος
      (eyebrow, lead) τα μηδενιζουμε, αλλιως το max-width βγαινει 24px μικροτερο.
      (Στον __title δεν χρειαζεται: ειναι συμμετρικα και το κεντραρισμα μενει σωστο.)

   ΤΟ ΔΙΑΧΩΡΙΣΤΙΚΟ: στο demo ειναι <svg> 210x14 — γραμμη με γαλαζιο ντεγκραντε
   που σβηνει στα ακρα, και απο κατω η ιδια γραμμη θολωμενη (blur 2.8, opacity .55).
   Εδω ειναι <span class="nq-made-corfu__separator"> (ο Agent 2 εβγαλε το
   [vc_separator] που εφερνε `my-3` με !important). Το αναπαραγουμε με
   gradient + ::before θολωμενο — ιδιο αποτελεσμα, χωρις νεο asset.
   ΤΟ span ΕΙΝΑΙ INLINE: χρειαζεται ρητο display:block, αλλιως βγαινει 0x0.

   ΣΥΝΕΙΔΗΤΗ ΑΠΟΚΛΙΣΗ ΑΠΟ ΤΟ DEMO (ζητηθηκε 2026-09-05): το demo εχει
   18px πανω/κατω και αδιαφανη γραμμη. Ο ιδιοκτητης ζητησε πιο αερατο και
   πιο διακριτικο: 30px εκατερωθεν, height 2px και opacity .3 (τιμες που
   εδωσε ο ιδιος).
   ═══════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-made-corfu {
  padding-inline: 24px;
  text-align: center;
}
body.nq-demo5 .nq-made-corfu__inner {
  max-width: calc(920px + var(--bs-gutter-x));
  margin-inline: auto;
}

body.nq-demo5 .nq-made-corfu h2 {
  margin: 0;
  font-size: 62px;
  font-weight: 700;
  line-height: 1;
}

body.nq-demo5 .nq-made-corfu__separator {
  display: block;
  position: relative;
  width: min(210px, 48vw);
  height: 2px;
  margin: 30px auto 0;
  opacity: .3;
  background: linear-gradient(90deg, rgba(142, 220, 255, 0) 0%, #b9f6ff 50%, rgba(142, 220, 255, 0) 100%);
}
body.nq-demo5 .nq-made-corfu__separator::before {
  content: "";
  position: absolute;
  inset: -2px 0;
  background: inherit;
  filter: blur(2.8px);
  opacity: .55;
}

body.nq-demo5 .nq-made-corfu__lead {
  max-width: 820px;
  margin: 30px auto 0;
  color: #c8c8d2;
  font-size: clamp(18px, 1.65vw, 23px);
  font-weight: 400;
  line-height: 1.6;
}

body.nq-demo5 .nq-made-corfu__lead .B_wrapper {
  width: auto;
  padding-inline: 0;
}

@media (max-width: 640px) {
  body.nq-demo5 .nq-made-corfu h2 {
    font-size: clamp(36px, 10.5vw, 48px);
    line-height: 1.08;
  }
  body.nq-demo5 .nq-made-corfu__lead {
    margin-top: 24px;
    font-size: 17px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ΖΩΝΗ: services-prime — τρεις καρτες υπηρεσιων
   Πηγη: Demo 5, μετρημενο 2026-09-05 στα 1920. ΜΗΔΕΝ !important.

   ΠΡΑΓΜΑΤΙΚΗ ΔΟΜΗ (μετρημενη):
     .nq-services-prime > .row > .pb-col.nq-services-prime__inner
       > .nq-service-row.nq-service-row--1|--2|--3      ← Η ΚΑΡΤΑ (row-box)
           > .row > .pb-col.nq-service-row__inner
               > .nq-service-row__num    (Text Block)
               > .nq-service-row__title  (Text Block > h3)
               > .nq-service-row__tags   (Text Block)
               > .nq-service-row__copy   (Text Block)
               > .nq-service-row__arrow  (Text Block, «↗»)

   ΤΡΕΙΣ ΔΟΜΙΚΕΣ ΔΙΑΦΟΡΕΣ ΑΠΟ ΤΟ DEMO — και πως λυθηκαν:
   1) Στο demo οι τρεις καρτες ειναι grid 3 στηλων μεσα σε .__list.
      Εδω ειναι τρεις ΞΕΧΩΡΙΣΤΕΣ ενθετες γραμμες, στοιβαγμενες καθετα.
      Λυση: η ΣΤΗΛΗ .__inner γινεται το grid — τα τρια row-box γινονται
      τα τρια κελια. Καμια αλλαγη δομης δεν χρειαστηκε.
   2) Στο demo τα __tags ειναι ΜΕΣΑ στο __title (που εχει min-height 195).
      Εδω ειναι αδελφος. Γι' αυτο ΔΕΝ βαζουμε min-height στο __title —
      θα εσπρωχνε τα tags 150px χαμηλοτερα. Το ισο υψος το κραταει το
      min-height: 430px της καρτας + το stretch του grid.
   3) Στο demo η καρτα ειναι <a>. Ο builder δεν κανει γραμμη σε anchor,
      οποτε ειναι <div>. Το hover δουλευει το ιδιο· ο συνδεσμος εκκρεμει.

   ΔΥΟ ΠΑΓΙΔΕΣ ΤΟΥ BUILDER ΠΟΥ ΟΥΔΕΤΕΡΟΠΟΙΟΥΝΤΑΙ:
   · .pb-row / .pb-col ειναι position:relative. Το __num ειναι absolute
     και θα αγκυρωνοταν στη ΣΤΗΛΗ, οχι στην καρτα — γι' αυτο τα καναμε
     `position: static`. (Ιδια παγιδα με το Almyra: αγκυρωση σε λαθος γονεα.)
     ΔΕΥΤΕΡΟ ΣΤΡΩΜΑ: το `g-3` της ενδιαμεσης γραμμης δινει margin-top -16px
     στη γραμμη και +16px στη στηλη, και η γραμμη ερχεται με
     `align-items: flex-start` — αρα η στηλη ΔΕΝ τεντωνεται στο υψος της
     καρτας και το `margin-top: auto` του βελους δεν εχει ελευθερο χωρο να
     το σπρωξει κατω (μετρηθηκε: στηλη 217px μεσα σε καρτα 430px). Γι' αυτο
     μηδενιζουμε τα περιθωρια ΚΑΙ τεντωνουμε τη στηλη.

     ΤΟ ΤΕΝΤΩΜΑ: η γραμμη ερχοταν με INLINE `align-items:flex-start`. Ο Agent 2
     το ελυσε ΣΤΗΝ ΠΗΓΗ (PageBuilder.php: το inline μπαινει στο else οταν το
     «Equal height» ειναι κλειστο) βαζοντας equal_height="1" — το inline εφυγε.
     Το `align-self: stretch` ΜΕΝΕΙ σκοπιμα: ειναι μια ειλικρινης δηλωση
     («αυτη η στηλη γεμιζει την καρτα») που κρατα το βελος στον πατο ακομη κι
     αν καποιος ξανακλεισει τη ρυθμιση. Δεν ειναι παρακαμψη, ειναι το layout.
     ΓΙΑ ΚΑΘΕ ΝΕΑ ΓΡΑΜΜΗ ΠΟΥ ΠΡΕΠΕΙ ΝΑ ΤΕΝΤΩΝΕΤΑΙ: ζητα equal_height="1".

     ΤΡΙΤΟ ΣΤΡΩΜΑ — ΤΟ PADDING ΤΗΣ ΣΤΗΛΗΣ: το frontend.css του PageBuilder
     εχει `.pb-row.row > .pb-col { padding-inline: 12px }`, ειδικοτητα (0,3,0).
     Ενας κανονας `body.x .nq-service-row__inner` ειναι (0,2,1) και ΧΑΝΕΙ —
     οι κλασεις μετρανε πριν τα στοιχεια. Γι' αυτο ο επιλογεας γραφεται
     `.nq-service-row .nq-service-row__inner` (0,3,1). ΤΟ ΙΔΙΟ ΘΑ ΙΣΧΥΕΙ ΣΕ
     ΚΑΘΕ ΖΩΝΗ που χρειαζεται να μηδενισει το padding μιας στηλης.

     ΠΡΟΣΟΧΗ ΣΤΗΝ ΕΙΔΙΚΟΤΗΤΑ: καθε Text Block εχει ΚΑΙ αυτο κλαση `row`.
     Ενας κανονας `.nq-service-row .row` ειναι (0,3,1) και νικαει το
     `.nq-service-row__num` που ειναι (0,2,1) — δηλαδη ξανακανει static
     ακριβως αυτο που θελουμε absolute. Γι' αυτο ο μηδενισμος γινεται με
     ΠΑΙΔΙ (`> .row`), ωστε να πιανει μονο το ενδιαμεσο στρωμα.
   · καθε Text Block ειναι .row: -12px περιθωρια + 12px padding στο
     .B_wrapper. Μηδενιζονται, αλλιως το κειμενο βγαινει 24px στενοτερο.

   ΑΠΛΟΠΟΙΗΣΗ ΠΟΥ ΕΓΙΝΕ ΣΥΝΕΙΔΗΤΑ: στο demo η καρτα 2 εχει περιγραμμα
   rgba(255,255,255,.13) αντι #1c1c1c — διαφορα αοριστη πανω σε μαυρο
   (≈#212121 vs #1c1c1c) και προϊον της δικης του στοιβας !important.
   Κραταμε ΕΝΑ περιγραμμα και για τις τρεις.

   ΚΑΘΕΤΕΣ ΑΠΟΣΤΑΣΕΙΣ = clamp(), ΟΧΙ ΣΤΑΘΕΡΕΣ ΤΙΜΕΣ ΜΕ MEDIA QUERIES
   (κανονας του ιδιοκτητη, 2026-09-05). Οι τιμες ΑΝΤΙΓΡΑΦΟΝΤΑΙ απο το
   mockup, δεν τις υπολογιζουμε ξανα:
     gap των καρτων  clamp(28px, 3vw, 44px)  ← .nq-services-prime__list
   Το κατω κενο της ενοτητας ζει στο .nq-sec-services — βλ. «ΚΑΘΕΤΟΣ ΡΥΘΜΟΣ»
   στο τελος του αρχειου.
   Γι' αυτο το media query στα 1100px αλλαζει ΜΟΝΟ τον αριθμο στηλων —
   το κενο το ρυθμιζει ηδη μονο του το clamp.

   ΕΚΚΡΕΜΕΙ: τα εικονιδια. Στο demo καθε καρτα εχει
   span.nq-service-row__icon > img (70x70 λιλα κουτι, εικονιδιο 65x64).
   Το ζητησα απο τον Agent 2 ως Single Image αναμεσα σε __num και __title.
   Τα SVG ανεβηκαν ηδη στο theme/assets/demo5/. Το CSS τους ειναι
   γραμμενο πιο κατω και θα πιασει μολις μπει το στοιχειο.
   ═══════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   ΟΙ ΤΡΕΙΣ ΚΑΡΤΕΣ — ΞΑΝΑΓΡΑΦΤΗΚΑΝ 2026-09-06

   ΔΥΟ ΑΛΛΑΓΕΣ ΕΓΙΝΑΝ ΜΑΖΙ ΑΠΟ ΤΟΝ AGENT 2:
   1. Τα εξι blocks καθε καρτας (num, icon, title, tags, copy, arrow) εγιναν
      ΕΝΑ Info Box. Ολες οι κλασεις .nq-service-row__num/-icon/-title/-tags/
      -copy/-arrow ΕΞΑΦΑΝΙΣΤΗΚΑΝ και αντικατασταθηκαν απο .nq-ib-*.
   2. Οι τρεις καρτες ηταν ΤΡΕΙΣ σειρες με μια στηλη· εγιναν ΜΙΑ σειρα με
      τρεις στηλες.

   🔴 ΠΟΙΟ ΣΤΟΙΧΕΙΟ ΕΙΝΑΙ Η ΚΑΡΤΑ — ΑΛΛΑΞΕ.
   ΠΡΙΝ: η καρτα ηταν η `.nq-service-row` (καθε σειρα = μια καρτα).
   ΤΩΡΑ: η `.nq-service-row` ειναι Η ΣΕΙΡΑ που τυλιγει και τις τρεις, και η
   καρτα ειναι η ΣΤΗΛΗ `.nq-service-row__inner`. Ολα τα οπτικα (φοντο,
   περιγραμμα, radius, σκια, min-height, padding, η μπαρα του hover)
   μετακομισαν εκει. Αν μεινουν στη σειρα, βλεπεις ΕΝΑ κουτι γυρω απο τρεις
   καρτες αντι για τρια κουτια.

   ΤΟ GRID ΕΦΥΓΕ ΑΠΟ ΤΟ `__inner`: εχει πλεον ΕΝΑ παιδι (τη σειρα), οποτε το
   `repeat(3, 1fr)` στριμωχνε τη σειρα στο ενα τριτο — μετρηθηκε: στηλες 111px
   αντι 403. Το grid παει στη ΣΕΙΡΑ.

   ΤΟ ΚΕΝΟ ΤΩΝ ΚΑΡΤΩΝ ΔΕΝ ΜΠΟΡΕΙ ΝΑ ΕΙΝΑΙ ΤΟ GUTTER ΤΗΣ ΣΕΙΡΑΣ: το gutter
   ειναι padding ΤΩΝ ΣΤΗΛΩΝ, δηλαδη ΜΕΣΑ στην καρτα — το φοντο της θα απλωνοταν
   στο κενο. Γι' αυτο το padding των στηλων μηδενιζεται και το κενο το δινει
   `gap` του grid.
   ΕΙΔΙΚΟΤΗΤΑ: το frontend.css εχει `.pb-row.row > .pb-col { padding-inline:
   12px }` (0,3,0). Ο επιλογεας μας γραφεται με `>` και `.pb-col` ωστε να βγει
   (0,3,1) — οι κλασεις ισοβαθμουν και κερδιζει το επιπλεον στοιχειο.

   ΤΙ ΕΡΧΕΤΑΙ ΑΠΟ ΤΑ ΠΕΔΙΑ ΤΟΥ BLOCK ΚΑΙ ΔΕΝ ΞΑΝΑΓΡΑΦΕΤΑΙ ΕΔΩ:
   το πλακιδιο 70x70 (radius 21, φοντο #aaa7ff, padding 2.5), η εικονα 65px,
   και η διαταξη «top-left» (flex column, align-items flex-start).
   ════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-service-row > .row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px);
  margin: 0;
}
/* 🔴 ΤΟ PADDING ΤΗΣ ΚΑΡΤΑΣ ΓΡΑΦΕΤΑΙ ΕΔΩ, ΟΧΙ ΠΑΡΑΚΑΤΩ.
   Πρωτη προσπαθεια: `padding-inline: 0` εδω και `padding: 34px 34px 30px` στον
   κανονα `.nq-service-row__inner`. ΑΠΕΤΥΧΕ — ο εδω κανονας ειναι πιο ειδικος
   (0,3,1 εναντι 0,2,1) και μηδενιζε το οριζοντιο padding της ιδιας της καρτας:
   μετρηθηκε `34px 0px 30px`, ο τιτλος 401px αντι 335 και το βελακι 1px απο το
   δεξι χειλος. Το padding πρεπει να μπει στον ΙΔΙΟ κανονα που κερδιζει.
   Χρειαζεται (0,4,1) για να νικησει το `.pb-row.row > .pb-col { padding-inline:
   12px }` (0,3,0) του frontend.css. */
body.nq-demo5 .nq-service-row > .row > .nq-service-row__inner {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  padding: 34px 34px 30px;
  /* ΔΟΘΗΚΕ ΑΥΤΟΥΣΙΟ ΑΠΟ ΤΟΝ ΙΔΙΟΚΤΗΤΗ (2026-09-07) — καμια τιμη δεν υπηρχε
     πριν, ειναι προσθηκη.
     ⚠️ ΙΣΧΥΕΙ ΚΑΙ ΣΤΗΝ ΕΝΕΡΓΗ ΚΑΤΑΣΤΑΣΗ, ΕΠΙΤΗΔΕΣ: η καρτα εχει `:hover`
     (οθονη) και `.is-inview` (κινητο, απο τον observer). Με σκετο .9 το
     «αναμμα» γινεται πανω σε καρτα που ΠΑΡΑΜΕΝΕΙ ξεθωριασμενη. Η φυσικη
     αναγνωση θα ηταν .9 στην ηρεμια και 1 στην ενεργη, ΑΛΛΑ ΔΕΝ ΖΗΤΗΘΗΚΕ —
     και το opacity επηρεαζει ΟΛΟ το στοιχειο, αρα μια αυθαιρετη προσθηκη θα
     αλλαζε και το πως διαβαζεται το κειμενο στο hover. Εκκρεμει απαντηση· αν
     ερθει, προστιθεται κανονας για `:hover, .is-inview` με `opacity: 1`. */
  opacity: .9;
}
/* Η ΣΕΙΡΑ ΔΕΝ ΕΙΝΑΙ ΚΑΡΤΑ ΠΙΑ — μηδενιζεται ο,τι της ειχε μεινει. */
body.nq-demo5 .nq-service-row {
  position: static;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* ── Η ΚΑΡΤΑ ────────────────────────────────────────────────────────── */
body.nq-demo5 .nq-service-row__inner {
  position: relative;
  display: flex;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid #1c1c1c;
  border-radius: 20px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: -18px 24px 34px -30px rgba(255, 255, 255, .08),
              18px 26px 38px -30px rgba(105, 94, 255, .22),
              0 28px 24px -24px rgba(120, 110, 255, .18);
  transition: transform .42s cubic-bezier(.2, .75, .2, 1), border-color .32s ease, box-shadow .32s ease;
}
body.nq-demo5 .nq-service-row--1 {
  background-image: url("../assets/demo5/panel-wave-soft.svg");
}
body.nq-demo5 .nq-service-row--2 {
  background-image: url("../assets/demo5/panel-grid-subtle.svg");
}
body.nq-demo5 .nq-service-row--3 {
  background-image: url("../assets/demo5/panel-corner-lines.svg");
}
/* ΣΤΟ HOVER Η ΛΑΜΨΗ ΔΥΝΑΜΩΝΕΙ, ΔΕΝ ΑΝΤΙΚΑΘΙΣΤΑΤΑΙ.
   Ειχα βαλει `0 32px 74px rgba(8,10,20,.3)` — μια ΣΚΟΥΡΑ σκια, που πανω σε
   μαυρο φοντο ειναι αορατη: φαινοταν σαν να ΧΑΝΕΤΑΙ η σκια στο hover.
   Το mockup κραταει τα ιδια τρια στρωματα και ανεβαζει μονο τις τιμες. */
/* ═══════════════════════════════════════════════════════════════════
   Η ΚΛΑΣΗ .is-inview ΑΝΑΒΕΙ ΤΟ ΙΔΙΟ ΑΚΡΙΒΩΣ ΣΤΥΛ ΜΕ ΤΟ HOVER (2026-09-07)
   Ζητηθηκε: οταν η καρτα μπαινει στο viewport, να παιζει το animation του
   hover — και ΟΛΑ ΤΑ ΜΕΡΗ ΜΑΖΙ.

   ΓΙΑΤΙ ΚΛΑΣΗ ΚΑΙ ΟΧΙ ΞΕΧΩΡΙΣΤΟΙ ΚΑΝΟΝΕΣ: η κλαση μπαινει ΔΙΠΛΑ στο `:hover`
   στον ιδιο κανονα, οποτε οι τιμες γραφονται ΜΙΑ φορα. Καθε μελλοντικη αλλαγη
   στο hover ακολουθει αυτοματα και το in-view — δεν μπορουν να ξεσυγχρονιστουν.

   ΟΛΑ ΜΑΖΙ: τα τεσσερα μερη (καρτα, μωβ λωριδα, εικονιδιο, βελακι) εχουν ηδη
   δικο τους `transition` και ξεκινουν την ΙΔΙΑ στιγμη — τη στιγμη που μπαινει
   η κλαση. Διαρκειες: καρτα .42s, λωριδα .42s, εικονιδιο .32s, βελακι .28s.

   ΠΡΟΗΓΟΥΜΕΝΗ ΕΚΔΟΧΗ, ΞΗΛΩΘΗΚΕ: το ειχα κανει με `animation-timeline: view()`,
   δηλαδη scroll-driven, οπου η προοδος δενεται στη θεση της καρτας. Δουλευε
   (επαληθευτηκε: ViewTimeline και στα τεσσερα μερη), αλλα η κινηση ΑΚΟΛΟΥΘΟΥΣΕ
   το δαχτυλο αντι να παιζει μονη της, και καθε μερος χρειαζοταν δικα του
   keyframes — αντιγραφο των τιμων του hover, με κινδυνο να ξεμεινει πισω.

   🔴 ΤΟ JS ΠΡΕΠΕΙ ΝΑ ΒΑΖΕΙ ΤΗΝ ΚΛΑΣΗ ΜΟΝΟ ΚΑΤΩ ΑΠΟ 768px. Δεν μπαινει media
   query εδω επειδη οι κανονες ειναι κοινοι με το hover, που ΠΡΕΠΕΙ να δουλευει
   σε ολα τα πλατη. Στην οθονη υπαρχει πραγματικο ποντικι· αν η κλαση εμπαινε
   και εκει, οι καρτες θα εμεναν μονιμα «πατημενες». */
body.nq-demo5 .nq-service-row__inner:hover,
body.nq-demo5 .nq-service-row__inner.is-inview {
  transform: translateY(-8px);
  box-shadow: -20px 27px 38px -30px rgba(255, 255, 255, .1),
              20px 29px 42px -29px rgba(105, 94, 255, .3),
              0 32px 28px -24px rgba(120, 110, 255, .24);
}
/* Η μπαρα που «τρεχει» στην κορυφη της καρτας στο hover: 4px, ντεγκραντε
   #706cff -> #a5a0ff, scaleX(0) -> 1 με αγκυρα αριστερα. Δουλευει επειδη η
   καρτα ειναι position:relative + overflow:hidden.
   ΤΟ BORDER ΔΕΝ ΑΛΛΑΖΕΙ ΣΤΟ HOVER: ζητηθηκε ρητα (2026-09-05). */
body.nq-demo5 .nq-service-row__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 4px;
  background: linear-gradient(90deg, #706cff, #a5a0ff);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .42s cubic-bezier(.2, .75, .2, 1);
}
body.nq-demo5 .nq-service-row__inner:hover::before,
body.nq-demo5 .nq-service-row__inner.is-inview::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  body.nq-demo5 .nq-service-row__inner,
  body.nq-demo5 .nq-service-row__inner::before,
  body.nq-demo5 .nq-service-row__card .nq-ib-icon,
  body.nq-demo5 .nq-service-row__card .nq-ib-readmore {
    transition: none;
  }
}

/* ── ΤΟ INFO BOX ΜΕΣΑ ΣΤΗΝ ΚΑΡΤΑ ───────────────────────────────────────
   Το block βγαζει: span.nq-ib-num (absolute) · span.nq-ib-icon-box >
   span.nq-ib-icon > img.nq-ib-img · div.nq-ib-body > h3.nq-ib-title +
   span.nq-ib-tags + div.nq-ib-desc > p + a.nq-ib-readmore.

   ΤΟ `gap: 16px` ΤΟΥ BLOCK ΜΗΔΕΝΙΖΕΤΑΙ: οι αποστασεις του mockup ειναι
   ανισες (34 κατω απο το εικονιδιο, 17 κατω απο τον τιτλο, 24-34 πανω απο
   το κειμενο). Με ενιαιο gap δεν βγαινουν — μπαινουν ως margin.

   ΤΟ ΒΕΛΑΚΙ ΕΙΝΑΙ ΜΕΣΑ ΣΤΟ .nq-ib-body, ΟΧΙ ΑΔΕΛΦΟΣ ΤΟΥ. Γι' αυτο το body
   γινεται flex column που γεμιζει την καρτα — αλλιως το `margin-top: auto`
   δεν εχει ελευθερο χωρο να το σπρωξει στον πατο. */
body.nq-demo5 .nq-service-row__card {
  flex: 1;
  gap: 0;
  width: 100%;
}
/* 🔴 ΚΑΘΕ ΚΑΝΟΝΑΣ ΣΕ .nq-ib-* ΘΕΛΕΙ ΤΟ SCOPE ΤΗΣ ΚΑΡΤΑΣ.
   Το Info Box ΔΕΝ ειναι πια αποκλειστικο των καρτων υπηρεσιων — το
   χρησιμοποιει και η ζωνη made-features, και θα μπουν κι αλλες.
   Ο κανονας `.nq-ib-readmore` χωρις scope ειναι (0,2,1) και νικουσε το
   `.nqce-info_box .nq-ib-readmore { display: none }` (0,2,0) του block:
   εβγαινε κυκλακι 46x46 με βελακι σε καρτες που ΔΕΝ εχουν καθολου συνδεσμο
   (link_type: none). Μετρηθηκε ζωντανα στα made-features.
   Με το scope, ο κανονας του block ξαναδουλευει μονος του. */
body.nq-demo5 .nq-service-row__card .nq-ib-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
}

/* Ο αριθμος ειναι ηδη absolute top:0 right:0 μεσα στην καρτα, και η καρτα
   εχει padding 34/34 — αρα πεφτει ακριβως εκει που τον θελει το mockup
   (34 απο πανω, 32 δεξια). Μενει μονο η τυπογραφια. */
/* ΤΡΕΙΣ ΔΙΑΦΟΡΕΣ ΑΠΟ ΤΟ MOCKUP, ολες μετρημενες (2026-09-06):
   · opacity .55 — το βαζει το ιδιο το Info Box στον αριθμο· το mockup τον
     θελει ΠΛΗΡΩΣ αδιαφανη. Αυτο ειναι που τον εκανε να μοιαζει ξεθωριασμενος.
   · line-height 11px (ημουν εγω με `1`) — το mockup εχει 16.5, δηλαδη 1.5.
     Δεν ειναι μονο υψος κουτιου: το γλυφο καθεται ~3px χαμηλοτερα.
   · letter-spacing .44px — ερχεται απο τον καθολικο κανονα του 15-theme.css
     για τους λιλα υπερτιτλους. Ο αριθμος ΔΕΝ ειναι υπερτιτλος· το mockup τον
     εχει `normal`. */
body.nq-demo5 .nq-service-row__card .nq-ib-num {
  color: #aaa7ff;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.5;
  letter-spacing: normal;
  opacity: 1;
}

body.nq-demo5 .nq-service-row__card .nq-ib-icon-box {
  margin-bottom: 34px;
}
body.nq-demo5 .nq-service-row__card .nq-ib-icon {
  box-shadow: 0 15px 36px rgba(232, 255, 87, .12);
  transition: transform .32s cubic-bezier(.2, .75, .2, 1), box-shadow .32s ease;
}
body.nq-demo5 .nq-service-row__inner:hover .nq-ib-icon,
body.nq-demo5 .nq-service-row__inner.is-inview .nq-ib-icon {
  transform: translateY(-4px) rotate(-3deg) scale(1.035);
  box-shadow: 0 20px 42px rgba(81, 73, 216, .3);
}

body.nq-demo5 .nq-service-row__card .nq-ib-title {
  margin: 0 0 17px;
  font-size: clamp(28px, 2.15vw, 32px);
  font-weight: 600;
  line-height: 1.02;
}
/* Ο τιτλος τυλιγεται σε <a> ακομη κι οταν δεν εχει συνδεσμο. */
body.nq-demo5 .nq-service-row__card .nq-ib-title-a {
  color: inherit;
  text-decoration: none;
}
body.nq-demo5 .nq-service-row--2 .nq-ib-title {
  font-size: clamp(24px, 2.15vw, 30px);
  white-space: nowrap;
}
body.nq-demo5 .nq-service-row__card .nq-ib-tags {
  display: block;
  margin: 0;
  color: #aaa7ff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .3px;
  text-transform: uppercase;
}
/* ΣΥΝΕΙΔΗΤΗ ΑΠΟΚΛΙΣΗ (ζητηθηκε 2026-09-05): το mockup εχει 24px αποσταση
   απο τα tags· ο ιδιοκτητης το θελει λιγο πιο χαμηλα. Ανεβηκε σε 34px στα
   μεγαλα, με clamp ωστε σε μικρες οθονες να ξαναπεσει στα 24 του mockup. */
body.nq-demo5 .nq-service-row__card .nq-ib-desc {
  max-width: 38ch;
  margin: clamp(24px, 1.8vw, 34px) 0 0;
  color: rgba(238, 240, 249, .68);
  font-size: 15.5px;
  line-height: 1.7;
}
body.nq-demo5 .nq-service-row__card .nq-ib-desc p {
  margin: 0;
  color: inherit;
  font: inherit;
}

/* Το βελακι: κυκλος με το SVG του demo. Το block το βγαζει ως <a> με
   προεπιλογη `color:#2563eb; font-weight:600` — γι' αυτο εβγαινε μπλε
   κειμενο. Το κειμενο κρυβεται με font-size 0· το σχημα το δινει το SVG.

   ΧΩΡΙΣ ΠΕΡΙΓΡΑΜΜΑ. Ειχα βαλει `border: 1px solid rgba(232,255,87,.46)` και
   εβγαινε κιτρινωπο δαχτυλιδι. Λαθος αναγνωση της μετρησης: το mockup δινει
   `border: 0px none rgba(232,255,87,.46)` — υπαρχει border-COLOR αλλα
   border-WIDTH ΜΗΔΕΝ, αρα ΚΑΝΕΝΑ περιγραμμα.

   ΣΤΟ HOVER ΜΟΝΟ ΓΥΡΙΖΕΙ: το mockup γραφει `background-color:
   var(--demo4-lime)` αλλα η μεταβλητη ΔΕΝ οριζεται πουθενα, αρα η δηλωση
   ειναι ακυρη και αγνοειται. Οταν την «διορθωσα» με πραγματικο #e8ff57
   βγηκε κιτρινο δαχτυλιδι που δεν υπαρχει στο mockup. */
body.nq-demo5 .nq-service-row__card .nq-ib-readmore {
  display: grid;
  place-items: center;
  align-self: flex-end;
  width: 46px;
  height: 46px;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url("../assets/demo5/arrow-purple.svg") no-repeat 50% 50% / 100% 100%;
  color: transparent;
  font-size: 0;
  text-decoration: none;
  transition: transform .28s ease;
}
body.nq-demo5 .nq-service-row__inner:hover .nq-ib-readmore,
body.nq-demo5 .nq-service-row__inner.is-inview .nq-ib-readmore {
  transform: rotate(45deg);
}

@media (max-width: 1100px) {
  body.nq-demo5 .nq-service-row > .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  /* ΤΟ ΚΕΝΟ ΑΝΑΜΕΣΑ ΣΤΙΣ ΚΑΡΤΕΣ ΕΙΝΑΙ 42px ΣΤΟ ΚΙΝΗΤΟ, ΟΧΙ 28.
     Το `clamp(28px, 3vw, 44px)` δινει σωστα 44 στα 1920, αλλα σε πλατος 392 το
     3vw ειναι 11.7 και πεφτει στο ΔΑΠΕΔΟ των 28. Το mockup εκει δινει **42**
     (μετρημενο: `.nq-services-prime__list { gap: 42px }` στα 392) — δηλαδη το
     δικο μας δαπεδο ηταν πολυ χαμηλο και οι καρτες κολλουσαν.
     Οταν η στηλη ειναι ΜΙΑ, το gap ειναι μονο καθετο, οποτε γραφεται σκετο. */
  body.nq-demo5 .nq-service-row > .row {
    grid-template-columns: minmax(0, 1fr);
    /* 42 → 60 με αιτημα του ιδιοκτητη (2026-09-07). Τα 42 ηταν μετρηση του
       mockup· η νεα τιμη ειναι δικη του επιλογη και αποκλινει σκοπιμα. */
    gap: 60px;
  }
  body.nq-demo5 .nq-service-row > .row > .nq-service-row__inner {
    min-height: 360px;
    padding: 28px 25px 24px;
  }
  body.nq-demo5 .nq-service-row__card .nq-ib-desc {
    margin-top: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ΖΩΝΗ: studio-story — «Η Διαδικασια μας»
   Πηγη: Demo 5, μετρημενο 2026-09-05 στα 1920. ΜΗΔΕΝ !important.

   ΠΡΑΓΜΑΤΙΚΗ ΔΟΜΗ (μετρημενη):
     .nq-studio-story.nq-story-scroll-host
       > .row > .pb-col.nq-story-content
           .nq-story__head          (adv_heading: sub + h3 — 2026-09-06)
           .nq-story-list           (raw)  3x article.nq-story-item
                                            (span.nq-story-index + h3)
           .nq-story-lead-title     (TB > h3)
           .nq-story-lead           (TB)
       > .nq-cta-scroll-rail--story (span __fill + span __dot)

   ΤΙ ΛΕΙΠΕΙ ΑΚΟΜΗ ΚΑΙ ΓΙ' ΑΥΤΟ ΔΕΝ ΓΡΑΦΤΗΚΕ Η ΔΙΣΤΗΛΗ ΔΙΑΤΑΞΗ:
   Στο demo η ζωνη ειναι grid δυο στηλων — αριστερα .nq-story-stage με
   φωτογραφια (518px) και δεξια το κειμενο (778px, padding 0 0 108px 165px),
   με τη ραγα καθετα αναμεσα τους (absolute, left 570). Εδω υπαρχει ΜΟΝΟ η
   στηλη κειμενου· η φωτογραφια δεν εχει ανεβει. Αν εγραφα τωρα το grid, θα
   εμενε μια ΚΕΝΗ στηλη στο μισο πλατος. Ζητηθηκε απο τον Agent 2 — μολις
   μπει, προστιθενται το grid, το padding-left και η ραγα, ΧΩΡΙΣ να αλλαξει
   τιποτα απο οσα γραφονται εδω.

   ΣΥΝΕΙΔΗΤΗ ΑΠΟΚΛΙΣΗ: στο demo ο τιτλος του καθε βηματος εχει
   `line-height: 4.8px` σε γραμματοσειρα 24px (δηλαδη .2) — το κειμενο
   ξεχειλιζει απο το κουτι του. Ειναι σφαλμα του mockup, οχι σχεδιαστικη
   επιλογη: το αντιγραφουμε ΩΣ line-height 1, που δινει σωστο κουτι.
   Κοστος: καθε βημα ψηλοτερο κατα ~5px (76 αντι 71).

   ΚΑΘΕΤΕΣ ΑΠΟΣΤΑΣΕΙΣ: clamp() οπου το mockup εχει clamp
   (.nq-story-lead-title). Για τον υπερτιτλο το mockup δινει 70px στα 1920
   και 40px κατω απο 640 — τα ενωνουμε σε clamp αντι για media query.
   ═══════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-story-content .B_wrapper {
  width: auto;
  padding-inline: 0;
}

/* Η ΕΠΙΚΕΦΑΛΙΔΑ ΤΗΣ ΣΤΗΛΗΣ. Τα περιθωρια ηταν πανω στον παλιο υπερτιτλο
   (`margin: clamp(40px,3.6vw,70px) 0 12px`) και στον τιτλο (`0 0 34px`).
   Τωρα ειναι ενα block, οποτε μαζευονται στο hook. Το πανω περιθωριο ειναι
   αυτο που ευθυγραμμιζει το κειμενο με τη φωτογραφια της διπλανης στηλης —
   δεν ειναι αποσταση μεταξυ ενοτητων, γι' αυτο επιτρεπεται εδω. */
body.nq-demo5 .nq-story__head {
  margin: clamp(40px, 3.6vw, 70px) 0 34px;
}

body.nq-demo5 .nq-story-list {
  border-top: 1px solid rgba(255, 255, 255, .16);
}
body.nq-demo5 .nq-story-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
body.nq-demo5 .nq-story-index {
  color: #8d89ff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}
body.nq-demo5 .nq-story-item h3 {
  margin: 0;
  font-size: clamp(19px, 1.5vw, 24px);
  font-weight: 300;
  line-height: 1;
}

body.nq-demo5 .nq-story-lead-title {
  margin: clamp(42px, 4.5vw, 48px) 0 15px;
}
body.nq-demo5 .nq-story-lead-title h3 {
  margin: 0;
  color: #e1e1e1;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
}
body.nq-demo5 .nq-story-lead {
  margin: 0 0 clamp(40px, 4vw, 64px);
  color: #a5a8b3;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════════
   ΚΑΘΕΤΟΣ ΡΥΘΜΟΣ ΤΗΣ ΣΕΛΙΔΑΣ — μια θεση, ολες οι αποστασεις

   ΚΑΝΟΝΑΣ ΤΟΥ ΙΔΙΟΚΤΗΤΗ (2026-09-05), ΤΡΙΑ ΣΚΕΛΗ:
   1. Το κενο μπαινει ΠΑΝΤΑ στο **κατω** μερος. ΠΟΤΕ padding-top, ποτε
      margin-top. Καθε ενοτητα «σπρωχνει» την επομενη, δεν τραβιεται.
   2. Γραφεται με clamp(min, Xvw, max) — οχι σταθερες τιμες με media query.
   3. **margin-bottom, ΟΧΙ padding-bottom.** Το padding ειναι ΜΕΣΑ στο κουτι:
      αν η ενοτητα παρει φοντο, το φοντο απλωνεται σε ολο το κενο. Με margin
      το κενο ειναι ΕΞΩ και μενει καθαρο. Το ΟΡΙΖΟΝΤΙΟ padding μενει padding.

   ΓΙΑΤΙ ΤΟ MARGIN ΜΠΑΙΝΕΙ ΣΤΟ **SECTION** ΚΑΙ ΟΧΙ ΣΤΗ ΖΩΝΗ:
   Δοκιμαστηκε πρωτα στη ζωνη (.pb-row-box) και ΔΕΝ ΠΕΡΑΣΕ. Δυο κανονες με
   !important το μηδενιζουν και δεν νικιουνται με ειδικοτητα:
     · Bootstrap  .mb-3 { margin-bottom: 1rem !important }
     · frontend.css του PageBuilder:
       .pb-section > .pb-row.row:last-child, … { margin-bottom: 0 !important }
   Μετρηθηκε: 0px αντι 168px. Στα ΙΔΙΑ τα section δεν υπαρχει κανενας κανονας
   margin (ελεγχθηκε ολο το CSSOM) — αρα εκει το margin περναει καθαρα,
   χωρις ουτε ενα !important.

   ΟΙ ΤΙΜΕΣ: το mockup μοιραζει το κενο σε padding-bottom του προηγουμενου +
   κενο + padding-top του επομενου. Τα ΑΘΡΟΙΣΑ στο κατω, ωστε το οπτικο
   αποτελεσμα να μεινει ιδιο. Μετρημενα στα 1920:
     made-corfu    32 + 136 (πανω των services)        = 168
     services      170 + 84 (κενο)                     = 254
     design-intro  88 + 100 (margin του story)         = 188
     studio-story  0 + 72 (πανω των made-features)     = 72
     made-features 20 + 24 (margin του scope-extra)    = 44
     scope-extra   31 + 64 (πανω του scope-head)       = 95
     portfolio     150 + 56 (πανω της μπαρας)           = 206
     scope-banner  32 + 136 (πανω του faq)              = 168

   🔴 ΔΙΟΡΘΩΣΗ 2026-09-06 — ΕΙΧΑ ΜΕΤΡΗΣΕΙ ΛΑΘΟΣ ΚΑΙ ΤΑ ΔΥΟ.
   Ειχα γραψει portfolio 150 και scope-banner 232, δηλαδη η μπαρα ητανε 56px
   ψηλα και ειχε 63px παραπανω απο κατω — φαινοταν «κολλημενη» στο slideshow.
   Ξαναμετρηθηκε στο mockup, κενο προς κενο:
     τελος portfolio  →  αρχη καρτας   206   (ειχαμε 150)
     τελος καρτας     →  αρχη faq      168   (ειχαμε 231)
   Τα 56 που ελειπαν ειναι το padding-top του section της μπαρας στο mockup,
   που δεν το ειχα αντιγραψει επειδη ο κανονας λεει «η αποσταση παει κατω».
   Σωστο — αλλα τοτε πρεπει να ΠΡΟΣΤΕΘΕΙ στο κατω της προηγουμενης, οχι να
   χαθει. Αυτο ειναι το λαθος που εκανα.
     home-faq      136 (δικο του, τελευταιο)           = 136
   Το min καθε clamp ειναι ~65% του max — οση αναλογια εχουν και τα clamp
   του ιδιου του mockup (120/170, 82/136).

   ΚΑΘΕ ΖΩΝΗ ΕΧΕΙ ΠΛΕΟΝ ΔΙΚΟ ΤΗΣ SECTION. Το nq-sec-scope περιειχε τεσσερις
   (design-intro, studio-story, made-features, scope-extra) και δεν μπορουσαν
   να χωριστουν μεταξυ τους — ο Agent 2 το εσπασε (2026-09-05). Ολος ο ρυθμος
   ειναι τωρα margin-bottom σε section· μηδεν padding-bottom, μηδεν !important.
   ΓΙΑ ΚΑΘΕ ΝΕΑ ΖΩΝΗ: ζητα δικο της section με pt=0 pb=0 και κλαση nq-sec-*.
   ═══════════════════════════════════════════════════════════════════ */
/* Η ενοτητα της λωριδας λογοτυπων. ΔΕΝ εχει κλαση nq-sec-* και το ID της
   ειναι ακυρο (εχει κενο μεσα), οποτε τη διαλεγουμε απο το ΠΕΡΙΕΧΟΜΕΝΟ της.
   ΤΟ MARGIN ΠΑΕΙ ΣΤΟ SECTION, ΟΧΙ ΣΤΗ ΣΤΗΛΗ: δοκιμαστηκε στη στηλη και ητανε
   λαθος — το κενο εμπαινε ΜΕΣΑ στο section, το μεγαλωνε και κατεβαζε το ορια
   του. Το κενο πρεπει να ειναι ΑΝΑΜΕΣΑ στις δυο ενοτητες.
   Μετρημενο στο demo: απο το κατω της λωριδας ως τον υπερτιτλο του
   made-corfu = 173px. Ειχαμε 38, αρα λειπουν 135. */
body.nq-demo5 .pb-section:has(.nq-logo-marquee) {
  margin-bottom: clamp(88px, 7vw, 135px);
}
/* ΣΤΟ ΚΙΝΗΤΟ Η ΛΩΡΙΔΑ ΛΟΓΟΤΥΠΩΝ ΦΕΥΓΕΙ ΟΛΟΚΛΗΡΗ — αιτημα του ιδιοκτητη
   (2026-09-06): «στο mobile το σβηνεις το slider με τα logos, ολο αυτο το
   section». Κρυβεται η ΕΝΟΤΗΤΑ, οχι μονο ο swiper: ετσι φευγει μαζι και ο
   τιτλος «SELECTED PROJECTS» και το margin-bottom της, χωρις να μεινει κενο.
   Το οριο ειναι 767.98 ωστε να συμπιπτει με το σημειο που το hero.css γυριζει
   σε κινητο — η λωριδα εξαφανιζεται ακριβως οταν αλλαζει το hero.
   🔴 Το `display: none` σημαινει οτι ο Swiper αρχικοποιειται σε στοιχειο
   μηδενικου πλατους. Δεν εχει σημασια οσο μενει κρυφο, αλλα αν ποτε
   ξαναεμφανιστει με JS θα χρειαστει `swiper.update()`. */
@media (max-width: 767.98px) {
  body.nq-demo5 .pb-section:has(.nq-logo-marquee) {
    display: none;
  }
  /* ΜΕ ΤΗ ΛΩΡΙΔΑ ΚΡΥΜΜΕΝΗ, ΤΟ HERO ΑΚΟΥΜΠΑΕΙ ΣΤΟ made-corfu.
     Το κενο ως τον υπερτιτλο «ΚΑΤΑΣΚΕΥΗ ΙΣΤΟΣΕΛΙΔΩΝ» επεφτε στα 80px — μονο το
     padding-bottom του hero. Μπαινει ΚΑΤΩ απο το hero, οπως ο κανονας.

     Η ΤΙΜΗ ΕΙΝΑΙ ΤΟΥ MOCKUP, ΜΕΤΡΗΜΕΝΗ (2026-09-07). Πρωτα ειχα βαλει 48px
     «με το ματι» και εβγαινε κενο 128. Στο mockup στα 392 το ιδιο κενο —
     απο το τελος του «ΛΕΥΚΙΜΜΗ · ΚΑΒΟΣ · ΚΕΡΚΥΡΑ» ως τον υπερτιτλο — ειναι
     **154px**, δηλαδη ελειπαν 26.
     🔴 ΚΑΙ ΤΟ MOCKUP ΚΡΥΒΕΙ ΤΗ ΛΩΡΙΔΑ ΣΤΟ ΚΙΝΗΤΟ: μετρηθηκε
     `.nq-hero-clients { display: none }` κατω απο 768. Δηλαδη το αιτημα του
     ιδιοκτητη να φυγει ηταν ηδη η συμπεριφορα του mockup — απλως εμεις δεν την
     ειχαμε αντιγραψει. Εκει το κενο το δινει το `padding: 78px 22px 28px` του
     made-corfu συν τα 64 του hero. */
  body.nq-demo5 .nq-sec-hero {
    margin-bottom: 111px;
  }
}
body.nq-demo5 .nq-sec-made-corfu {
  margin-bottom: clamp(165px, 13.125vw, 252px);
}
body.nq-demo5 .nq-sec-services {
  margin-bottom: clamp(240px, 19.8vw, 381px);
}
body.nq-demo5 .nq-sec-design-intro {
  margin-bottom: clamp(180px, 14.7vw, 282px);
}
body.nq-demo5 .nq-sec-studio-story {
  margin-bottom: clamp(72px, 5.625vw, 108px);
}
/* ΣΥΝΕΙΔΗΤΗ ΑΠΟΚΛΙΣΗ (ζητηθηκε 2026-09-05): μεγαλυτερο κενο ΚΑΤΩ απο τη
   γραμμη/κουκκιδα. Το mockup δινει 25px. Ο ιδιοκτητης ορισε max 60px
   (2026-09-05)· min και vw κλιμακωθηκαν αναλογα ωστε να μεινει clamp.
   ΠΡΟΣΟΧΗ ΓΙΑΤΙ ΑΛΛΑΖΕΙ ΕΔΩ ΚΑΙ ΟΧΙ ΣΤΗ ΡΑΓΑ: η ραγα ειναι absolute
   αγκυρωμενη στη ΖΩΝΗ, οποτε δεν μετακινειται οταν μεγαλωνει το margin του
   SECTION — μεγαλωνει μονο η αποσταση ως την επομενη ενοτητα. Αν το πειραζαμε
   στο `bottom` της ραγας, θα κουνιοταν ΚΑΙ το πανω κενο (τα 39px). */
body.nq-demo5 .nq-sec-made-features {
  margin-bottom: clamp(63px, 4.695vw, 90px);
}
body.nq-demo5 .nq-sec-scope-extra {
  margin-bottom: clamp(142.5px, 11.175vw, 180px);
}
body.nq-demo5 .nq-sec-portfolio {
  margin-bottom: clamp(201px, 16.095vw, 309px);
}
body.nq-demo5 .nq-sec-scope-banner {
  margin-bottom: clamp(165px, 13.125vw, 252px);
}
body.nq-demo5 .nq-sec-faq {
  margin-bottom: clamp(132px, 10.5vw, 204px);
}

body.nq-demo5 .nq-scope-extra {
  padding-inline: clamp(16px, 2vw, 24px);
}
/* ΤΟ ΜΟΝΟ ΚΑΘΕΤΟ PADDING-TOP ΤΗΣ ΣΕΛΙΔΑΣ — ΚΑΙ ΕΙΝΑΙ ΣΩΣΤΟ.
   Ο κανονας «ποτε padding-top» αφορα την αποσταση ΜΕΤΑΞΥ ενοτητων, ωστε ενα
   φοντο να μην απλωνεται στο κενο. Εδω ισχυει το αντιθετο: η μπαρα ΕΙΝΑΙ
   καρτα με δικο της φοντο, και τα 64px ειναι ο αερας ΜΕΣΑ της. Χωρις αυτα το
   κειμενο κολλαει στο πανω χειλος.
   Δοκιμαστηκε πρωτα με σκετο min-height + κεντραρισμα, ΧΩΡΙΣ padding: δινει
   γραμμες 51/51 αντι για 46.47/55.53 του mockup, δηλαδη ο υπερτιτλος ανεβαινει
   ~62px ψηλοτερα. Το mockup βγαινει ΑΚΡΙΒΩΣ με 64px padding + min-height 230:
   102px περιεχομενο, οι δυο γραμμες παιρνουν 76 απο το κουμπι που τις γεφυρωνει
   και μοιραζονται τα υπολοιπα 26 εξ ισου.

   🔴 ΤΟ min-height ΜΟΝΟ ΤΟΥ ΔΕΝ ΑΡΚΕΙ. Στο mockup το grid ειναι πανω
   ΣΤΗΝ ΙΔΙΑ την καρτα, οποτε οι γραμμες του τεντωνονται στα 102. Εδω μεσολαβουν
   δυο κουτια (.pb-row.row → .pb-col), που εχουν υψος περιεχομενου (76) και
   αφηνουν το grid να μαζευτει στην κορυφη — μετρηθηκε: γραμμες 33.47/42.53 και
   ολα ~13px ψηλοτερα. Γι' αυτο η καρτα γινεται flex column και η γραμμη
   `flex: 1`: η αλυσιδα του υψους φτανει ως το grid και οι γραμμες τεντωνουν. */
body.nq-demo5 .nq-scope-head {
  display: flex;
  flex-direction: column;
  min-height: 230px;
  padding-block: clamp(36px, 3.35vw, 64px);
  padding-inline: clamp(42px, 5vw, 72px);
}

/* Δυο ΠΑΛΙΟΙ κανονες χωρις scope στο ιδιο αρχειο εβαζαν καθετο padding:
     .nq-home-faq  { padding: clamp(88px, 9vw, 136px) 0 }
     .nq-portfolio { padding: clamp(92px,10vw,150px) 0 }
   Δηλαδη 136 και 150 ΚΑΙ ΠΑΝΩ ΚΑΙ ΚΑΤΩ, μεσα στο κουτι. Δεν τους σβηνω —
   μπορει να τους χρησιμοποιουν αλλες σελιδες — αλλα εδω ο ρυθμος ζει στα
   section. Τους μηδενιζουμε ρητα. */
body.nq-demo5 .nq-home-faq,
body.nq-demo5 .nq-portfolio {
  padding-block: 0;
}

/* ΖΩΝΗ: portfolio — «Επιλεγμενα εργα»
   Οι καρτες ερχονται απο theme/parts/home-portfolio.php και ειναι ΟΙ ΙΔΙΕΣ
   με της /erga (.nq-project κ.λπ.) — εγκεκριμενο component, ΔΕΝ το ξαναγραφω
   ουτε φτιαχνω δευτερη οψη. Εδω μονο η επικεφαλιδα και η αποσταση του πλεγματος.
   Το demo το δειχνει ως carousel· εδω ειναι πλεγμα, οπως ηδη τα δειχνει η /erga.
   Αν ζητηθει carousel, γινεται με scroll-snap πανω στο .nq-portfolio-grid. */
/* Η επικεφαλιδα ειναι ΚΕΝΤΡΑΡΙΣΜΕΝΗ. Στο mockup υπαρχει <header> που ειναι
   flex column με align-items:center· εδω τα στοιχεια ειναι απλα αδελφια μεσα
   στη στηλη, οποτε το ιδιο αποτελεσμα με text-align + margin auto.
   ΕΚΚΡΕΜΕΙ: ο υπερτιτλος «Portfolio» (λιλα, με παυλα 34px) δεν υπαρχει στο
   markup μας — ζητηθηκε απο τον Agent 2. Οταν μπει με κλαση .nq-story-eyebrow
   θα παρει αυτοματα το στυλ που εχει ηδη γραφτει για τις αλλες ζωνες.
   ΤΟ text-align ΜΟΝΟ ΤΟΥ ΔΕΝ ΑΡΚΕΙ: το Text Block ειναι `.row`, δηλαδη flex,
   και το .B_wrapper ειναι `width: auto` — μαζευει στο πλατος του κειμενου και
   καθεται στην ΑΡΧΗ του flex. Το κεντραρισμα του ΚΟΥΤΙΟΥ θελει
   justify-content· το text-align κεντραρει μονο το κειμενο ΜΕΣΑ του. */
/* Ο υπερτιτλος «Portfolio» χρησιμοποιει ΤΗΝ ΙΔΙΑ κλαση .nq-story-eyebrow με
   τις ζωνες story — οπως ακριβως το mockup. Κληρονομει ετσι το λιλα, το βαρος
   και την παυλα, χωρις διπλοτυπο. ΔΥΟ ΟΜΩΣ ΔΙΑΦΕΡΟΥΝ ΕΔΩ:
     · κεντραρισμα (στις ζωνες story ειναι αριστερα)
     · μηδεν περιθωριο απο πανω — ο βασικος κανονας εχει clamp(40,3.6vw,70)
       γιατι εκει ο υπερτιτλος ξεκιναει τη στηλη· εδω τον δινει η ενοτητα.
   Γι' αυτο ο κανονας ειναι δεμενος στο .nq-portfolio και δεν αγγιζει τις αλλες. */
/* Το κεντραρισμα κληρονομειται απο το `text-align: center` της ζωνης και
   μετρηθηκε σωστο (ta: center στο .nqah-main). Δεν ξαναγραφεται. */
body.nq-demo5 .nq-portfolio h2 {
  margin: 0;
  font-size: clamp(28px, 2.4vw, 38.4px);
  font-weight: 700;
  line-height: 1.02;
}
/* Η ΓΡΑΜΜΗ ΚΑΤΩ ΑΠΟ ΤΟ ΚΕΙΜΕΝΟ ΥΠΑΡΧΕΙ — ειναι `border-bottom` της ΙΔΙΑΣ της
   παραγραφου, οχι του <header> ουτε του carousel. Ειχα ελεγξει heading,
   carousel, viewport και ζωνη, ειχα βρει μηδεν και ειχα πει οτι δεν υπαρχει.
   Ελεγχος που δεν καλυπτει ΟΛΑ τα στοιχεια δεν ειναι αποδειξη απουσιας. */
body.nq-demo5 .nq-portfolio-intro {
  max-width: 1120px;
  margin: 24px auto 0;
  padding-bottom: 42px;
  border-bottom: 1px solid rgba(170, 167, 255, .24);
  text-align: center;
  color: #d1d1da;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
}
body.nq-demo5 .nq-portfolio .B_wrapper {
  width: auto;
  padding-inline: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   studio-story, ΜΕΡΟΣ Β' — διστηλη διαταξη, φωτογραφια, CTA, ραγα
   Μπηκε αφου ο Agent 2 προσθεσε την αριστερη στηλη και τον συνδεσμο.
   Μετρημενο στο demo, 1920.

   ΔΟΜΗ ΤΩΡΑ:
     .nq-studio-story
       > .row
           > .pb-col.nq-story-stage    (Single Image .nq-story-stage__img)
           > .pb-col.nq-story-content  (κειμενο + a.nq-story-link)
       > .nq-cta-scroll-rail--story    (span __fill + span __dot)

   ΑΝΑΛΟΓΙΑ ΣΤΗΛΩΝ: το demo δινει minmax(320px,.9fr) / minmax(480px,1.35fr)
   = 518/778 στα 1296. Ο builder εδωσε 1/3 + 2/3 (432/864) — το grid του
   γονεα τα σκεπαζει, οποτε τα Bootstrap πλατη δεν ενοχλουν.

   Η ΡΑΓΑ: absolute στα 570px του demo, δηλαδη 52px μεσα στη στηλη κειμενου.
   Γραφεται ως calc(40% + 52px) ωστε να ακολουθει την αναλογια των στηλων
   αντι για καρφωτο pixel.

   Η ΚΙΝΗΣΗ ΤΗΣ ΡΑΓΑΣ ερχεται απο το theme/js/home-sections.js — βλ. σχολιο
   στους κανονες της ραγας πιο κατω.
   ═══════════════════════════════════════════════════════════════════ */
/* ΤΟ GRID ΠΑΕΙ ΣΤΟ `.row`, ΟΧΙ ΣΤΗ ΖΩΝΗ. Η ζωνη εχει ΔΥΟ παιδια: τη γραμμη
   και τη ραγα. Αν γινει αυτη grid, η γραμμη πιανει την πρωτη στηλη (518px)
   και η ραγα τη δευτερη — μετρηθηκε: το κειμενο στριμωχτηκε στα 542.
   Οι δυο στηλες ειναι παιδια της ΓΡΑΜΜΗΣ. */
body.nq-demo5 .nq-studio-story {
  position: relative;
}
body.nq-demo5 .nq-studio-story > .row {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(480px, 1.35fr);
  margin-inline: 0;
}
/* ΠΑΓΙΔΑ: οι στηλες ειναι Bootstrap (col-lg-4 / col-lg-8) με width σε
   ΠΟΣΟΣΤΟ. Μεσα σε grid το ποσοστο μετριεται πανω στο ΚΕΛΙ, οχι στη γραμμη:
   33.33% του 518 = 172px. Μετρηθηκε 181 αντι 518. Τις γυριζουμε σε 100%. */
body.nq-demo5 .nq-studio-story .nq-story-stage,
body.nq-demo5 .nq-studio-story .nq-story-content {
  width: 100%;
  max-width: 100%;
}
body.nq-demo5 .nq-studio-story .nq-story-stage {
  display: flex;
  overflow: hidden;
  padding: 0;
}
body.nq-demo5 .nq-story-stage__img {
  width: 100%;
}
/* 🔴 ΠΛΑΤΟΣ 100%, ΟΧΙ 90% — ΑΛΛΑΓΗ 2026-09-07.
   Ο ιδιοκτητης ειχε δωσει ο ιδιος `width: 90%` (2026-09-05) και τωρα ζητησε να
   μεγαλωσει και να κεντραριστει «οπως το branding» του design-intro.
   Επαληθευτηκε στο mockup στα 1920: η φωτογραφια ειναι **518x789, δηλαδη 100%
   της στηλης**, με `object-fit: contain` και κεντραρισμενη — δεν ειναι 90%.
   Με 90% η εικονα καθοταν ΑΡΙΣΤΕΡΑ και αφηνε ορατο μαυρο 51px στα δεξια, γιατι
   η στηλη ειναι flex χωρις κεντραρισμα. Το `margin-inline: auto` μενει ως
   δικλειδα αν καποτε ξαναμπει ποσοστο. */
body.nq-demo5 .nq-story-stage__img img {
  width: 100%;
  height: 100%;
  margin-inline: auto;
  object-fit: contain;
}
body.nq-demo5 .nq-studio-story .nq-story-content {
  padding: 0 0 clamp(64px, 6.5vw, 108px) clamp(32px, 8.5vw, 165px);
}

/* Το CTA: καψουλα με περιγραμμα και γεματο κυκλο για το βελος.
   ΧΩΡΙΣ margin-top. Το mockup εχει κανονα `margin-top: clamp(64px,5vw,82px)`
   αλλα ΑΚΥΡΩΝΕΤΑΙ πιο κατω στη στοιβα του — η τελικη computed τιμη ειναι 0.
   Ολο το κενο το δινει το margin-bottom του lead (64px). Ειχα αντιγραψει τον
   κανονα αντι για την τελικη τιμη και βγηκε 146px αντι 64. Ιδιο λαθος με το
   χρωμα των κουμπιων του design-intro: μετρα το ΤΕΛΙΚΟ, οχι τον κανονα. */
/* ΤΟ ΚΟΥΜΠΙ ΕΓΙΝΕ BUTTON BLOCK — βλ. «ΤΑ ΕΞΙ ΚΟΥΜΠΙΑ» στο τέλος του αρχείου. */

body.nq-demo5 .nq-cta-scroll-rail--story {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(40% + 52px);
  width: 18px;
}
/* Η ραγα ΚΙΝΕΙΤΑΙ. Το theme/js/home-sections.js γραφει τη μεταβλητη
   --cta-line-progress (0..1) στο .nq-story-scroll-host καθως κανεις scroll.
   Ειχα γραψει `top: 96px` και fill με `top:0; bottom:0` — δηλαδη ΣΤΑΘΕΡΕΣ
   τιμες: η μεταβλητη εφτανε κανονικα αλλα κανεις δεν την διαβαζε, οποτε
   τιποτα δεν κουνιοταν. Οι παλιοι κανονες που την διαβαζουν ειναι κλειδωμενοι
   σε `body.nq-home` και δεν ισχυουν εδω.
   Το -8px ειναι το μισο της κουκκιδας (15px), για να κεντραρεται στο σημειο
   της προοδου αντι να κρεμεται απο κατω — ετσι το κανει και το mockup.
   Η αρχικη τιμη 0 ειναι ΑΠΑΡΑΙΤΗΤΗ: χωρις αυτην το calc ειναι ακυρο στο
   πρωτο καρε, πριν προλαβει να τρεξει το JS. */
body.nq-demo5 .nq-story-scroll-host {
  --cta-line-progress: 0;
}
body.nq-demo5 .nq-cta-scroll-rail__fill {
  position: absolute;
  top: 0;
  left: 8px;
  width: 2px;
  height: calc(var(--cta-line-progress) * 100%);
  background: #282828;
}
body.nq-demo5 .nq-cta-scroll-rail__dot {
  position: absolute;
  top: calc(var(--cta-line-progress) * 100% - 8px);
  /* 🔴 ΕΠΑΝΗΛΘΕ ΣΤΗΝ ΑΡΧΙΚΗ ΤΙΜΗ — ΜΗΝ ΤΗΝ ΞΑΝΑΠΕΙΡΑΞΕΙΣ «ΓΙΑ ΚΕΝΤΡΑΡΙΣΜΑ».
     Ιστορικο, γιατι εγινε ολοκληρος κυκλος πανω σε λαθος στοχο (2026-09-07):
     το «το κυκλακι δεν ειναι σωστα κεντραρισμενο, θελει πιο αριστερα» το
     διαβασα ως θεση της ΚΟΥΚΚΙΔΑΣ ΜΕΣΑ στη ραγα και την πηγα 1px → -1px → 1.5px
     → -3px. Ο ιδιοκτητης διευκρινισε: «δεν εννοουσα αυτο, φερ' το πισω, ηταν
     σωστο· η κουκκιδα με τη γραμμη — ολοκληρο το nq-cta-scroll-rail εννοουσα».
     Δηλαδη το ζητουμενο ηταν να μετακινηθει ΟΛΗ Η ΡΑΓΑ, που εγινε χωριστα με
     το `left: calc(55% - 26px)` στο τελος του αρχειου.

     Η σχεση κουκκιδας-γραμμης ηταν εξαρχης σωστη, και ειναι σχεδον ακριβως
     κεντραρισμενη: γραμμη left 8px πλατος 2 → κεντρο 9.0· κουκκιδα left 1px
     πλατος 15 → κεντρο 8.5. Αποκλιση 0.5px, αοριστη. */
  left: 1px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #aaa7ff;
  box-shadow: 0 0 0 5px rgba(119, 112, 255, .1);
}

@media (max-width: 991px) {
  /* 🔴 ΗΤΑΝ ΛΑΘΟΣ ΣΤΟΧΟΣ ΚΑΙ ΕΣΠΑΓΕ ΟΛΟ ΤΟ ΚΙΝΗΤΟ.
     Ο κανονας εδειχνε στη ΖΩΝΗ (.nq-studio-story), που δεν ειναι grid — το
     grid ειναι στη ΓΡΑΜΜΗ. Αρα δεν επιανε τιποτα και η γραμμη κρατουσε
     `minmax(320px,.9fr) minmax(480px,1.35fr)`, δηλαδη ΕΛΑΧΙΣΤΟ 800px.
     Μετρημενο σε πλατος 404: document.scrollWidth = 812, δηλαδη ολη η σελιδα
     κυλουσε οριζοντια στο διπλασιο πλατος. */
  body.nq-demo5 .nq-studio-story > .row {
    grid-template-columns: minmax(0, 1fr);
  }
  body.nq-demo5 .nq-studio-story .nq-story-content {
    padding-left: 0;
  }
  body.nq-demo5 .nq-cta-scroll-rail--story {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ΖΩΝΗ: design-intro — «Κατασκευη Ιστοσελιδων»
   Πηγη: Demo 5. Οι τιμες διαβαστηκαν απο τους ΚΑΝΟΝΕΣ του mockup, οχι απο
   computed geometry: η καρτελα του demo ειχε innerWidth 0 και καθε τιμη σε
   vw θα εβγαινε λαθος. Οι κανονες ειναι η πηγη — τα clamp μπαινουν αυτουσια.

   ΠΡΑΓΜΑΤΙΚΗ ΔΟΜΗ (μετρημενη στη σελιδα μας):
     .nq-design-intro > .row
       > .pb-col.nq-design-intro__lead   (col-lg-8)
           .nq-design-intro__head    (adv_heading: sub + h2 — 2026-09-06)
           .nq-design-intro__quote   (TB > blockquote)
           .nq-design-intro__copy    (TB — ΚΕΙΜΕΝΟ, οχι <p>)
       > .pb-col.nq-design-intro__media  (col-lg-4, Single Image)

   ΤΡΕΙΣ ΠΡΟΣΑΡΜΟΓΕΣ:
   1) Το mockup εχει .nq-design-intro__columns ως grid 8fr/4fr με gap
      clamp(42px,7vw,112px). Εδω το ρολο του παιζει η ΓΡΑΜΜΗ: το Bootstrap
      δινει ηδη 8/4 αλλα με gutter 24px — πολυ στενο. Κανουμε τη γραμμη grid.
   2) Οι στηλες ειναι Bootstrap με πλατος σε ΠΟΣΟΣΤΟ. Μεσα σε grid το ποσοστο
      μετριεται πανω στο ΚΕΛΙ, οχι στη γραμμη — ιδια παγιδα με το studio-story.
      Γι' αυτο width: 100%.
   3) Το __copy στο mockup ειναι <p> μεσα σε wrapper· εδω το Text Block βγαζει
      div. Ο επιλογεας ειναι η κλαση, οχι το `p`.

   ΤΙ ΔΕΝ ΓΡΑΦΩ:
   · padding-top στις στηλες (το mockup εχει clamp(18px,1.8vw,26px) στο
     __columns) — ο κανονας του ιδιοκτητη λεει ποτε padding-top. Ο αερας απο
     πανω ερχεται απο το margin-bottom του .nq-sec-services.
   · χρωμα σε h2/blockquote — το mockup δινει #fff, το θεμα #f4f4f7. Κραταμε
     το token· το χρωμα ανηκει στο Skin.

   ΤΟ ΧΡΩΜΑ ΤΩΝ ΚΟΥΜΠΙΩΝ ΕΙΝΑΙ ΛΙΛΑ, ΟΧΙ ΛΕΥΚΟ. Το ειχα γραψει #fff επειδη
   διαβασα τον κανονα του mockup ΚΟΜΜΕΝΟ στους 230 χαρακτηρες — η τιμη
   `color: rgb(255, 255…` ηταν η αρχη μιας αλυσιδας που τελικα καταληγει σε
   rgb(170,167,255). Η τελικη computed τιμη ειναι η αληθεια, οχι το κειμενο
   ενος κανονα. Ιδιο και το βαρος: 400, οχι το 300 που κληρονομουσε.

   ΕΚΚΡΕΜΕΙ: τα δυο κουμπια (.nq-design-intro__actions με δυο
   a.nq-design-intro__cta). Δεν υπαρχουν στη σελιδα — ο Agent 2 δεν τα εβαλε
   γιατι στο mockup δειχνουν σε corfuwebdesign.com. Ζητηθηκαν. Το CSS τους
   ειναι ηδη γραμμενο πιο κατω και θα πιασει μολις μπουν.
   ═══════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-design-intro > .row {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(42px, 7vw, 112px);
  align-items: start;
  margin-inline: 0;
}
body.nq-demo5 .nq-design-intro .nq-design-intro__lead,
body.nq-demo5 .nq-design-intro .nq-design-intro__media {
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
}
body.nq-demo5 .nq-design-intro .B_wrapper {
  width: auto;
  padding-inline: 0;
}

/* Το κενο ως το blockquote ηταν στο `.nq-design-intro__title`. Χωρις αυτο η
   επικεφαλιδα κολλαγε στο αποφθεγμα — μετρηθηκε 0px. */
body.nq-demo5 .nq-design-intro__head {
  margin-bottom: clamp(24px, 2.5vw, 34px);
}
body.nq-demo5 .nq-design-intro h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.02;
}

body.nq-demo5 .nq-design-intro__quote {
  margin: 0;
}
body.nq-demo5 .nq-design-intro blockquote {
  margin: 0;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  font-weight: 200;
  line-height: 1.48;
}

body.nq-demo5 .nq-design-intro__copy {
  max-width: 820px;
  margin: clamp(24px, 2.4vw, 34px) 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(1.08rem, 1.35vw, 1.25rem);
  line-height: 1.48;
}
body.nq-demo5 .nq-design-intro__copy a {
  color: #aaa7ff;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid #484848;
}
body.nq-demo5 .nq-design-intro__copy a:hover {
  color: #ffffff;
}

body.nq-demo5 .nq-design-intro__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 22px;
}

/* Τα δυο κουμπια — γραμμενα εκ των προτερων, βλ. «ΕΚΚΡΕΜΕΙ» παραπανω. */
body.nq-demo5 .nq-design-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 28px;
}
/* ΤΑ ΔΥΟ CTA ΕΓΙΝΑΝ BUTTON BLOCK — βλ. «ΤΑ ΕΞΙ ΚΟΥΜΠΙΑ» στο τέλος. */

@media (max-width: 991px) {
  body.nq-demo5 .nq-design-intro > .row {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ΤΑ ΔΥΟ ΚΟΥΜΠΙΑ ΣΤΟ ΚΙΝΗΤΟ: ΙΔΙΟ ΠΛΑΤΟΣ, ΒΕΛΗ ΣΤΗΝ ΙΔΙΑ ΚΑΘΕΤΗ.
   Χωρις πλατος τα δυο κουμπια παιρνουν το μεγεθος του κειμενου τους —
   μετρηθηκαν 255 και 243 — οποτε τα βελακια τους καθονταν σε ΔΙΑΦΟΡΕΤΙΚΟ x
   και το ματι το διαβαζε ως «το πανω εχει περισσοτερο κενο στο τελος».
   Το mockup τα κανει **και τα δυο 260px** με `space-between`, ωστε το βελος να
   καρφωνεται δεξια και στα δυο. Μετρημενο στα 392.

   ΤΟ ΠΛΑΤΟΣ ΕΠΕΣΕ ΣΕ 248 ΚΑΙ ΤΟ gap ΣΕ 14 — ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-07):
   με 260 και gap 22 το κενο αναμεσα στο κειμενο και τον κυκλο ηταν πολυ μεγαλο.
   🔴 ΤΟ `space-between` ΑΓΝΟΕΙ ΤΟ `gap` — το gap ειναι ΕΛΑΧΙΣΤΟ, οχι
   σταθερο: ολο το περισσευμα του πλατους πεφτει αναμεσα στα δυο παιδια. Με 248
   μετρηθηκαν κενα **37 και 27**, δηλαδη ΧΕΙΡΟΤΕΡΑ. Το πλατος πρεπει να ειναι
   οσο ΑΚΡΙΒΩΣ χρειαζεται το φαρδυτερο κουμπι:
     padding 24 + κειμενο 153 + gap 14 + κυκλος 38 + padding 6 = **235**
   Ετσι το φαρδυτερο κλεινει στα 14 και το στενοτερο κραταει τη διαφορα των
   δυο κειμενων (143 εναντι 153), που ειναι το ελαχιστο δυνατο οσο τα δυο
   κουμπια πρεπει να εχουν ΙΔΙΟ πλατος για να ευθυγραμμιζονται τα βελη. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-design-intro__btn .nq-btn {
    width: 235px;
    gap: 14px;
    justify-content: space-between;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ΖΩΝΗ: made-features — τρεις στηλες με εικονιδιο και τιτλο
   Πηγη: Demo 5, μετρημενο στα 1920 σε ΚΑΘΑΡΗ καρτελα.

   ΔΟΜΗ (απο 2026-09-06): .nq-made-features > .row > 3x .pb-col.nq-made-feature
                            > .nq-made-feature__box  (Info Box)
                                > span.nq-ib-icon-box > img.nq-ib-img (88px)
                                > div.nq-ib-body > h3.nq-ib-title
   ═══════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-made-features > .row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 5.4vw, 104px);
  margin-inline: 0;
}
/* ΚΕΝΤΡΑΡΙΣΜΕΝΑ, ΟΧΙ ΑΡΙΣΤΕΡΑ. Μετρημενο στο mockup: το εικονιδιο ξεκιναει
   στο 134 μεσα σε στηλη 363 — δηλαδη (363-94)/2, ακριβως στο κεντρο. Ο τιτλος
   εχει 21px περιθωριο εκατερωθεν και κεντραρισμενο κειμενο. Τα δικα μας ηταν
   ολα κολλημενα στο 0.
   ΠΡΟΣΟΧΗ ΣΤΟ .B_wrapper: ΕΔΩ ΔΕΝ το κανουμε `width: auto` οπως στις αλλες
   ζωνες. Το Text Block ειναι flex· με width:auto το wrapper μαζευει στο πλατος
   του κειμενου και το text-align:center δεν εχει τιποτα να κεντραρει. */
body.nq-demo5 .nq-made-features .nq-made-feature {
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
  text-align: center;
}
body.nq-demo5 .nq-made-features .B_wrapper {
  padding-inline: 0;
}
/* ΤΑ ΕΙΚΟΝΙΔΙΑ ΕΙΝΑΙ SVG, ΟΧΙ ΓΡΑΜΜΑΤΟΣΕΙΡΑ.
   Το mockup τα δινει ως Material Design Icons (mdi-palette / mdi-responsive /
   mdi-speedometer) στα 88px. Η γραμματοσειρα ΔΕΝ φορτωνεται στο frontend·
   υπαρχει μονο στον χωρο του admin και θα κοστιζε 109KB woff2 για ΤΡΙΑ σχηματα.
   Αντ' αυτου εξηγαγα τα τρια glyph απο το materialdesignicons-webfont.svg και
   τα εκανα αυτονομα SVG (~1,8KB το καθενα, 5,4KB συνολικα αντι 109KB).
   Η μετατροπη: τα glyph μιας SVG font ειναι y-up με αρχη τη βαση, οποτε καθε
   path τυλιχτηκε σε `translate(0 448) scale(1 -1)` — ascent 448, units-per-em
   512, δηλαδη κουτι 512x512.
   Μπαινουν ως mask, οχι ως background: ετσι το ΧΡΩΜΑ μενει στο CSS και
   ακολουθει το currentColor, οπως θα εκανε και η γραμματοσειρα.
   Το κουτι του mockup μετρηθηκε 94x94 (τα 88 ειναι το font-size της
   γραμματοσειρας του· το κουτι του inline-flex βγαινει 94). Ο ιδιοκτητης
   ομως το οριοθετησε στα 88x88 (2026-09-05) — συνειδητη αποκλιση. */
/* ΤΑ ΤΡΙΑ ΧΑΡΑΚΤΗΡΙΣΤΙΚΑ ΕΓΙΝΑΝ INFO BOX (2026-09-06).
   ΠΡΙΝ: Raw HTML εικονιδιο + Text Block τιτλος ανα στηλη.
   ΤΩΡΑ: ενα Info Box `.nq-made-feature__box` ανα στηλη.

   ΤΙ ΣΒΗΣΤΗΚΕ: ολο το μπλοκ των `.nq-made-feature__icon` (+ --palette,
   --responsive, --speed). Ηταν μασκες SVG με `background-color: #aaa7ff`,
   ωστε το χρωμα να μενει στο CSS. Πλεον τα τρια SVG εχουν `fill="#aaa7ff"`
   ΜΕΣΑ ΤΟΥΣ και μπαινουν ως <img> απο πεδιο του block — αρα ουτε μασκα ουτε
   χρωμα γραφεται εδω. Το μεγεθος (88px) το δινει το block.
   Σβηστηκε επισης το `.nq-made-feature__title` (η κλαση δεν υπαρχει).

   ΤΟ `gap: 16px` ΤΟΥ BLOCK ΜΗΔΕΝΙΖΕΤΑΙ: οι αποστασεις ειναι 28 κατω απο το
   εικονιδιο και 20 κατω απο τον τιτλο· με ενιαιο gap θα εβγαιναν 44 και 36. */
body.nq-demo5 .nq-made-feature__box {
  gap: 0;
}
body.nq-demo5 .nq-made-feature__box .nq-ib-icon-box {
  margin-bottom: 28px;
}
body.nq-demo5 .nq-made-feature__box .nq-ib-title {
  margin: 0 0 20px;
  font-size: clamp(19px, 1.55vw, 24px);
  font-weight: 700;
  line-height: 1.12;
}
body.nq-demo5 .nq-made-feature__box .nq-ib-title-a {
  color: inherit;
  text-decoration: none;
}

/* ── ΟΡΙΖΟΝΤΙΑ ΡΑΓΑ ΠΡΟΟΔΟΥ (κατω απο τα τρια χαρακτηριστικα) ──────────
   Το markup το φτιαχνει ζωντανα το theme/js/home-sections.js. ΔΕΝ ειναι η
   ιδια συναρτηση με την καθετη ραγα του studio-story:
     · η καθετη γραφει --cta-line-progress στο SECTION
     · η οριζοντια γραφει --nq-horizontal-progress ΣΤΗΝ ΙΔΙΑ ΤΗ ΡΑΓΑ
   Μη μπερδευτουν τα δυο ονοματα.

   🔴 ΤΑ calc() ΕΙΝΑΙ ΤΟ ΠΑΝ. Στην καθετη ραγα ειχα αντιγραψει `top` και
   `height` ως ΣΤΑΤΙΚΕΣ τιμες και η ραγα δεν κουνιοταν καθολου, παρ' οτι το JS
   εγραφε κανονικα τη μεταβλητη. Εδω το __fill και το __dot ΠΡΕΠΕΙ να κρατησουν
   το calc με τη μεταβλητη. Η αρχικη τιμη 0 ειναι απαραιτητη, αλλιως το calc
   ειναι ακυρο στο πρωτο καρε πριν τρεξει το JS.

   Το `- 15px` σε καθε calc ειναι το πλατος της κουκκιδας: ετσι στο 100% η
   κουκκιδα σταματα με τη δεξια της ακρη στο τερμα, αντι να βγει εκτος. */
/* ΤΟ bottom ΕΙΝΑΙ -27px, ΟΧΙ -7px ΟΠΩΣ ΤΟ MOCKUP — ΚΑΙ ΕΙΝΑΙ ΣΩΣΤΟ.
   Στο mockup η ζωνη εχει `padding-bottom: 20px`, οποτε το -7 πεφτει 20px πιο
   κατω απο τον τιτλο απ' οτι σε εμας: εμεις ΔΕΝ εχουμε καθετο padding σε ζωνη
   (ο ρυθμος ζει σε margin των section, καταπ τον κανονα του ιδιοκτητη).
   Μετρημενο: mockup 39px πανω απο τη γραμμη / 25px κατω. Εμεις με -7 βγαζαμε
   19 / 45 — ιδιο συνολο, λαθος μοιρασια. Με -27 βγαινει ακριβως 39 / 25.
   Δηλαδη δεν αντιγραφουμε τον ΑΡΙΘΜΟ του mockup αλλα το ΑΠΟΤΕΛΕΣΜΑ του, γιατι
   το κουτι στο οποιο αγκυρωνεται ειναι διαφορετικο.

   ΤΟ ΠΛΑΤΟΣ ΕΙΝΑΙ 100%, ΟΧΙ `min(1420px, calc(100% - 48px))`. Ο κανονας του
   mockup λεει το δευτερο, ΑΛΛΑ ακυρωνεται πιο κατω στη στοιβα του: η τελικη
   μετρημενη τιμη ειναι 1296px, δηλαδη ΟΛΟ το πλατος της ζωνης. Με τον γραμμενο
   κανονα εβγαινε 1248 και η γραμμη ξεκινουσε 24px μεσα. Τριτη φορα που η
   στοιβα του mockup λεει αλλα απο το αποτελεσμα της. */
body.nq-demo5 .nq-section-horizontal-rail {
  --nq-horizontal-progress: 0;
  position: absolute;
  z-index: 5;
  bottom: -27px;
  left: 0;
  width: 100%;
  height: 15px;
  pointer-events: none;
}
body.nq-demo5 .nq-section-horizontal-rail__track {
  position: absolute;
  top: 7px;
  right: 0;
  left: 0;
  height: 1px;
  background: transparent;
}
body.nq-demo5 .nq-section-horizontal-rail__fill {
  position: absolute;
  top: 7px;
  left: 0;
  width: calc(var(--nq-horizontal-progress) * (100% - 15px) + 7.5px);
  height: 1px;
  background: #282828;
  will-change: width;
}
body.nq-demo5 .nq-section-horizontal-rail__dot {
  position: absolute;
  top: 0;
  left: calc(var(--nq-horizontal-progress) * (100% - 15px));
  width: 15px;
  height: 15px;
  border: 3px solid #aaa7ff;
  border-radius: 50%;
  background: #aaa7ff;
  box-shadow: 0 0 0 5px rgba(170, 167, 255, .1), 0 0 20px rgba(170, 167, 255, .3);
  opacity: 0;
  transition: opacity .28s ease;
  will-change: left, opacity;
}
body.nq-demo5 .nq-section-horizontal-rail.is-rail-active .nq-section-horizontal-rail__dot {
  opacity: 1;
}

@media (max-width: 640px) {
  body.nq-demo5 .nq-section-horizontal-rail {
    width: calc(100% - 40px);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.nq-demo5 .nq-section-horizontal-rail__dot {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ΖΩΝΗ: scope-extra — «Οταν το Site χρειαζεται περισσοτερα»
   Δομη: .nq-scope-extra > .row
           > .pb-col.nq-scope-extra__content  (τιτλος + λιστα 8 στοιχειων)
           > .pb-col.nq-scope-extra__media    (εικονα)
   Στο mockup: grid 776/388 με gap 84, η λιστα 2 στηλες με gap 50,
   και η εικονα τετραγωνη 250 με radius 24, κεντραρισμενη καθετα.
   ═══════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-scope-extra > .row {
  display: grid;
  grid-template-columns: minmax(0, 776fr) minmax(0, 388fr);
  gap: 0 clamp(40px, 4.4vw, 84px);
  align-items: center;
  margin-inline: 0;
}
body.nq-demo5 .nq-scope-extra .nq-scope-extra__content {
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
}
/* Η φωτογραφια ειναι ΜΙΚΡΗ: 250x250, κολλημενη δεξια, κατακορυφα κεντραρισμενη.
   Ειχα βαλει width:100% και γεμιζε ολη τη στηλη (388px). Μετρημενο στο mockup:
   250px, justify-self:end, align-self:center, radius 24. */
/* Η εικονα κατεβαινει 40px. ΤΟ align-self:center ΔΕΝ ΑΡΚΕΙ ΕΔΩ: μετρημενο,
   στο mockup το κειμενο ειναι 270 και η εικονα 250, οποτε περισσευει χωρος·
   στα δικα μας το κειμενο ειναι 248 και η εικονα 250 — η ΕΙΚΟΝΑ ειναι η
   ψηλοτερη, οριζει το υψος της γραμμης και δεν μενει τιποτα να κεντραρωθει.
   Μετρημενη θεση στο mockup: 40px κατω απο την κορυφη του κειμενου.
   Ο ιδιοκτητης το κατεβασε σε 26px (2026-09-05)· min και vw κλιμακωθηκαν
   αναλογα ωστε να μεινει clamp. */
body.nq-demo5 .nq-scope-extra .nq-scope-extra__media {
  justify-self: end;
  align-self: start;
  width: min(250px, 100%);
  max-width: 100%;
  margin-top: clamp(16px, 1.35vw, 26px);
  padding-inline: 0;
}
body.nq-demo5 .nq-scope-extra .B_wrapper {
  width: auto;
  padding-inline: 0;
}
/* Καθε Text Block ειναι ΚΑΙ αυτο `.row`, αρα κουβαλαει τα -12px περιθωρια του
   Bootstrap. Ειχα μηδενισει μονο την ενδιαμεση γραμμη (`> .row`), οποτε η
   λιστα ξεκινουσε στα 12px αντι στα 24 — 12px πιο αριστερα απ' οσο πρεπει. */
body.nq-demo5 .nq-scope-extra__content > .row {
  margin-inline: 0;
}
/* 22px κατω, οχι 15 του mockup — ορισε ο ιδιοκτητης (2026-09-05). */
body.nq-demo5 .nq-scope-card-head {
  margin: 0 0 22px;
}
body.nq-demo5 .nq-scope-card-head h3 {
  margin: 0;
  color: #aaa7ff;
  font-size: 16px;
  font-weight: 740;
  line-height: 1.06;
  text-align: left;
}
body.nq-demo5 .nq-scope-list ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 2.6vw, 50px);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.nq-demo5 .nq-scope-list li {
  position: relative;
  min-height: 50px;
  padding: 15px 42px 14px 27px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  color: #b3b2b2;
  font-size: 16px;
  font-weight: 400;
}
/* Το σημαδι της λιστας ειναι ενα μικρο «+»: δυο γραμμες 1px, καθετη και
   οριζοντια, φτιαγμενες με δυο ντεγκραντε στο ιδιο κουτι 9x9.

   ΤΟ top ΕΙΝΑΙ 22.5px, ΟΧΙ 26.5px ΟΠΩΣ ΤΟ MOCKUP — ΣΚΟΠΙΜΑ.
   Μετρημενο: το κεντρο της πρωτης γραμμης κειμενου ειναι στα 27px απο την
   κορυφη του li (padding-top 15 + μιση line-height 12). Με top 26.5 το κεντρο
   της κουκκιδας πεφτει στα 31 — 4px χαμηλοτερα, και φαινεται ασυμμετρο.
   Το ιδιο σφαλμα υπαρχει ΚΑΙ στο mockup (27 vs 31): δεν το αντιγραφουμε.
   22.5 = 27 - 4.5 (μισο υψος της κουκκιδας) → ακριβες κεντραρισμα. */
body.nq-demo5 .nq-scope-list li::before {
  content: "";
  position: absolute;
  top: 22.5px;
  left: 0;
  width: 9px;
  height: 9px;
  background-image: linear-gradient(#aaa7ff, #aaa7ff), linear-gradient(#aaa7ff, #aaa7ff);
  background-size: 1px 100%, 100% 1px;
  background-position: 50% 0, 0 50%;
  background-repeat: no-repeat;
}
body.nq-demo5 .nq-scope-extra__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 24px;
}

/* ═══════════════════════════════════════════════════════════════════
   ΖΩΝΗ: scope-head — η μπαρα «E-shops & Συστηματα Κρατησεων»
   Στο mockup: grid 798/262 με gap 92, κατακορυφα κεντραρισμενο.
   ΤΟ ΚΑΘΕΤΟ PADDING ΤΟΥ MOCKUP (64px) ΔΕΝ ΑΝΤΙΓΡΑΦΕΤΑΙ: η μπαρα δεν εχει
   ουτε φοντο ουτε περιγραμμα (μετρηθηκε: border-width 0), αρα τα 64px ειναι
   καθαρη αποσταση — και ο κανονας λεει οτι η αποσταση ζει στο margin-bottom
   της προηγουμενης ενοτητας. Την δινει ηδη το .nq-sec-portfolio.
   ═══════════════════════════════════════════════════════════════════ */
/* ΤΟ GRID ΠΑΕΙ ΣΤΗ ΣΤΗΛΗ, ΟΧΙ ΣΤΗ ΓΡΑΜΜΗ: η γραμμη εχει ΕΝΑ παιδι (τη στηλη),
   οποτε ενα grid εκει θα αφηνε τη δευτερη στηλη κενη και θα στριμωχνε τα παντα
   αριστερα — ακριβως το ιδιο λαθος που εκανα στο studio-story. Τα τρια
   στοιχεια ειναι παιδια της ΣΤΗΛΗΣ: υπερτιτλος + τιτλος αριστερα, κειμενο
   δεξια σε ολο το υψος. */
/* Η ΜΟΒ ΒΑΘΜΙΔΑ ΤΗΣ ΜΠΑΡΑΣ.
   Ο γραμμενος κανονας του mockup λεει
     radial-gradient(at 0% 0%, #5a3cb2 0%, #16045e 100%) !important
   δηλαδη ΑΔΙΑΦΑΝΑ χρωματα. Η ΤΕΛΙΚΗ computed τιμη ομως ειναι ΗΜΙΔΙΑΦΑΝΗ:
     rgba(90,60,178,.27) -> rgba(22,4,94,.48)
   Αντιγραφουμε το αποτελεσμα, οχι το κειμενο του κανονα — τεταρτη φορα σημερα
   που η στοιβα του mockup λεει αλλα απο οσα δειχνει.
   Η διαφανεια εχει σημασια: αφηνει το μαυρο της σελιδας να περναει, γι' αυτο
   η μπαρα δενει αντι να μοιαζει με κολλημενο πλακακι.

   ΤΟ .nq-scope-extra ΔΕΝ ΠΑΙΡΝΕΙ ΤΙΠΟΤΑ: οι δυο radial-gradient που φαινονται
   στους κανονες του mockup ακυρωνονται πιο κατω — η τελικη τιμη ειναι
   background-image: none πανω σε μαυρο. Οποτε ειναι ηδη σωστο. */
body.nq-demo5 .nq-scope-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 40px 0;
  background-image: radial-gradient(at 0% 0%, rgba(90, 60, 178, .27) 0%, rgba(22, 4, 94, .48) 100%);
  box-shadow: 0 24px 58px rgba(45, 22, 105, .22);
}
/* Η ΥΦΗ-ΚΥΜΑ. Ειναι το ιδιο art-abstr-003.svg του mockup (1118 bytes).
   🔴 z-index: -1 ΜΑΖΙ με isolation: isolate στον γονια. Το isolate
   φτιαχνει stacking context, ωστε το -1 να μεινει ΜΕΣΑ στην καρτα: ζωγραφιζεται
   πανω απο τη βαθμιδα της αλλα κατω απο το κειμενο. Χωρις το isolate θα εβγαινε
   πισω απο ολοκληρη τη σελιδα και δεν θα φαινοταν καθολου.
   Το filter δεν ειναι διακοσμητικο: το svg ειναι εγχρωμο· χωρις το grayscale
   βαφει τη μπαρα. Οι τιμες ειναι οι computed του mockup (.1 / grayscale 1 /
   brightness .75) — οχι το κειμενο των κανονων, που λεει opacity .35. */
body.nq-demo5 .nq-scope-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: url("../assets/demo5/art-abstr-003.svg") center / cover repeat;
  opacity: .1;
  filter: grayscale(1) brightness(.75);
  pointer-events: none;
}
body.nq-demo5 .nq-scope-head > .row {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
}
body.nq-demo5 .nq-scope-head > .row {
  margin-inline: 0;
}
/* Το `align-self: stretch` ειναι ο τελευταιος κρικος της αλυσιδας του υψους:
   η .pb-row.row ερχεται με `align-items: flex-start` απο τον builder, οποτε η
   στηλη εμενε 76px μεσα σε γραμμη 102px και το grid δεν ειχε τι να τεντωσει.
   Το align-self στο παιδι νικαει το align-items του γονια — μετρημενο. */
body.nq-demo5 .nq-scope-head .nq-scope-head__inner {
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 clamp(40px, 4.8vw, 92px);
  align-items: center;
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
}
body.nq-demo5 .nq-scope__head {
  grid-column: 1;
}
/* Η ΠΑΡΑΓΡΑΦΟΣ ΔΕΞΙΑ ΚΡΥΒΕΤΑΙ. Δεν ειναι δικη μου αποφαση: το ιδιο το mockup
   την εχει στο DOM με `display: none !important` και στη θεση της βαζει το
   κουμπι. Το κειμενο μενει στη βαση — αν ξαναχρειαστει, σβηνεται αυτος ο
   κανονας και επανερχεται. */
body.nq-demo5 .nq-scope-lead {
  display: none;
}
body.nq-demo5 .nq-scope-btn {
  grid-column: 2;
  grid-row: 1 / -1;
  place-self: center end;
}
body.nq-demo5 .nq-scope-head .B_wrapper {
  width: auto;
  padding-inline: 0;
}
body.nq-demo5 .nq-scope-head h2 {
  margin: 0;
  font-size: clamp(26px, 1.85vw, 35px);
  font-weight: 500;
  line-height: 1.08;
}
body.nq-demo5 .nq-scope-lead {
  max-width: 420px;
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
}

/* ΤΟ ΚΟΥΜΠΙ «Μαθε περισσοτερα». Το markup το εβαλε ο Agent 2 αυτουσιο απο το
   mockup (μονη αλλαγη το href → /ypiresies). Πριν απο αυτους τους κανονες το
   svg δεν ειχε μεγεθος και επαιρνε 798x798 — η καρτα φουσκωνε στα 958px.

   ΟΙ ΤΙΜΕΣ ΤΟΥ ΚΟΥΜΠΙΟΥ ΤΙΣ ΕΔΩΣΕ Ο ΙΔΙΟΚΤΗΤΗΣ (2026-09-06), δεν ειναι του
   mockup: padding 10/14/10/22, φοντο #a7c8eb, κειμενο #0c042d, 18px. Το mockup ειχε
   padding 19/30, #d7d7d7, #080808, 16px — ΜΗΝ το «διορθωσεις» πισω σε αυτο.
   Το βελακι μενει στου mockup: 36x36 · padding 9 · κυκλος #aaa7ff · inset 1px
   λευκο 22%.
   Το `stroke="currentColor"` του path σημαινει οτι το βελακι παιρνει το `color`
   του svg — γι' αυτο μπαινει color, οχι fill.
   Το `flex: 0 0 36px` ειναι απαραιτητο: αλλιως το flex item συρρικνωνεται. */

/* ═══════════════════════════════════════════════════════════════════
   ΖΩΝΗ: home-faq — «Καθαρες απαντησεις»
   Στο mockup ειναι ΔΥΟ ΣΤΗΛΕΣ: αριστερα η επικεφαλιδα (412px), δεξια οι
   ερωτησεις (733px), gap 150. Εδω ολα ειναι σε ΜΙΑ στηλη, το ενα κατω απο
   το αλλο. Δεν χρειαζεται αλλαγη δομης: κανουμε τη στηλη grid και τοποθετουμε
   ρητα — τα τρια της επικεφαλιδας αριστερα, η λιστα δεξια σε ολο το υψος.

   Το accordion ειναι native <details>: δεν θελει JS. Κρυβουμε τον προεπιλεγμενο
   δεικτη (και με list-style και με το -webkit- ψευδοστοιχειο, γιατι το Safari
   δεν ακουει το πρωτο) και βαζουμε δικο μας «+» που γινεται «×» στο ανοιγμα.
   ═══════════════════════════════════════════════════════════════════ */
/* 🔴 ΓΙΑΤΙ ΥΠΑΡΧΕΙ ΤΟ `1fr` ΣΤΗΝ ΤΡΙΤΗ ΓΡΑΜΜΗ.
   Στο mockup η επικεφαλιδα ειναι ΕΝΑ κουτι (.nq-faq-intro) και τα τρια της
   στοιχεια καθονται κολλητα. Εδω ειναι τρια ξεχωριστα Text Blocks, δηλαδη
   τρεις ΓΡΑΜΜΕΣ του grid — και η λιστα δεξια, που τις γεφυρωνει και ειναι
   374px ψηλη, τις φουσκωνε ωστε να τη χωρεσουν: ο υπερτιτλος, ο τιτλος και το
   κειμενο ξεχωριζαν με τεραστια κενα. Το `align-content: start` ΔΕΝ το λυνει,
   γιατι δεν τεντωνεται το πλεγμα αλλα οι ιδιες οι γραμμες.
   Με `auto auto 1fr` ολο το περισσευμα πεφτει στην ΤΡΙΤΗ γραμμη· οι δυο πρωτες
   μενουν στο υψος του περιεχομενου τους και το `align-self: start` κραταει το
   κειμενο στην κορυφη της τριτης. */
body.nq-demo5 .nq-home-faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 412fr) minmax(0, 733fr);
  grid-template-rows: auto auto 1fr;
  gap: 0 clamp(48px, 7.8vw, 150px);
  align-content: start;
}
body.nq-demo5 .nq-home-faq__head,
body.nq-demo5 .nq-home-faq__lead {
  align-self: start;
}
body.nq-demo5 .nq-home-faq .B_wrapper {
  width: auto;
  padding-inline: 0;
}
body.nq-demo5 .nq-home-faq__head,
body.nq-demo5 .nq-home-faq__lead {
  grid-column: 1;
}
body.nq-demo5 .nq-faq-list {
  grid-column: 2;
  grid-row: 1 / span 3;
}
body.nq-demo5 .nq-home-faq h2 {
  margin: 0;
  font-size: clamp(28px, 2.4vw, 38.4px);
  font-weight: 760;
  line-height: .98;
}
/* Το `max-width: 34ch` που ειχα βαλει εκοβε τη γραμμη στα ~255px και το κειμενο
   τυλιγοταν πολυ νωριτερα απο το mockup. Εκει το max-width ειναι 498px, δηλαδη
   ΔΕΝ πιανει ποτε — το πλατος το οριζει η στηλη (412). */
body.nq-demo5 .nq-home-faq__lead {
  max-width: 498px;
  margin: 24px 0 0;
  color: #a5a8b3;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
}

body.nq-demo5 .nq-faq-item {
  border-bottom: 1px solid #1c1c1c;
}
/* ΤΟ ΚΑΘΕΤΟ padding ΤΩΝ ΕΡΩΤΗΣΕΩΝ ΠΗΓΕ 28 → 20 (ιδιοκτητης, 2026-09-07).
   🔴 ΑΠΟΚΛΙΝΕΙ ΑΠΟ ΤΟ MOCKUP ΣΤΗΝ ΟΘΟΝΗ. Μετρημενο ζωντανα στο
   http://127.0.0.1:4184/Demo%205/ στα 1920: `padding: 28px 0px`. Δηλαδη τα 28
   ΔΕΝ ηταν δικη μας επιλογη — ηταν αντιγραφη. Η αλλαγη μπηκε ρητα ζητουμενη
   και ΧΩΡΙΣ media query, οπως δοθηκε, αρα ισχυει και στην οθονη.
   Αν χρειαστει να επιστρεψει η οθονη στα 28, μπαινει media query εδω. */
body.nq-demo5 .nq-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font-size: clamp(17px, 1.25vw, 20px);
  font-weight: 400;
  list-style: none;
  cursor: pointer;
}
body.nq-demo5 .nq-faq-item summary::-webkit-details-marker {
  display: none;
}
/* ΤΟ «+». Στο mockup ειναι πραγματικο <span> μεσα στο summary με
   `font-size: 27px; font-weight: 400; transition: transform .2s` και
   line-height 36.45 (=1.35). Ειχα βαλει 24/300/1 — εβγαινε πιο μικρο και πιο
   λεπτο. Εδω μενει ψευδοστοιχειο (δεν εχουμε το span στο markup), αλλα με τις
   τιμες του mockup. */
body.nq-demo5 .nq-faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  color: #aaa7ff;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.35;
  transition: transform .2s ease;
}
body.nq-demo5 .nq-faq-item[open] summary::after {
  transform: rotate(45deg);
}
body.nq-demo5 .nq-faq-answer p {
  max-width: 568px;
  margin: -5px 50px 28px 0;
  color: #a5a8b3;
  font-size: 15px;
  line-height: 1.75;
}

@media (max-width: 991px) {
  body.nq-demo5 .nq-made-features > .row,
  body.nq-demo5 .nq-scope-extra > .row,
  body.nq-demo5 .nq-scope-head > .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  body.nq-demo5 .nq-home-faq__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  body.nq-demo5 .nq-faq-list {
    grid-column: 1;
    grid-row: auto;
  }
  body.nq-demo5 .nq-scope-list ul {
    grid-template-columns: minmax(0, 1fr);
  }
  body.nq-demo5 .nq-scope-head {
    min-height: 0;
  }
  body.nq-demo5 .nq-scope-head .nq-scope-head__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  body.nq-demo5 .nq-scope-btn {
    grid-column: 1;
    grid-row: auto;
    place-self: start;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ΔΥΟ ΖΩΝΕΣ ΤΟΥΡΙΣΜΟΥ / HOSTING
   Προστεθηκαν αργοτερα (2026-09-05) — το mockup τις παραγει μεσω του
   nq-reversed-story-section-script και ειχαν αρχικα προσπεραστει.

   ΚΛΗΡΟΝΟΜΟΥΝ ΗΔΗ: και οι δυο χρησιμοποιουν τις κλασεις του studio-story
   (.nq-story-eyebrow / -process-title / -list / -item / -lead-title / -lead /
   -link). Οι κανονες τους ΔΕΝ ειναι δεμενοι σε ζωνη, οποτε πιανουν αυτουσιοι.
   Εδω γραφεται ΜΟΝΟ η διαταξη των στηλων.

   ① pre-hosting — εικονα ΑΡΙΣΤΕΡΑ, κειμενο ΔΕΞΙΑ.
      Mockup: grid 509/763, align-items center, κειμενο padding 0 0 56px 108px.
   ② hosting-story — ΑΝΤΕΣΤΡΑΜΜΕΝΗ: κειμενο ΑΡΙΣΤΕΡΑ, εικονα ΔΕΞΙΑ.
      Mockup: grid 778/518, κειμενο padding 0 165px 108px 0 — δηλαδη η εσοχη
      αλλαζει πλευρα. Ο builder εβαλε τη στηλη κειμενου ΠΡΩΤΗ στο DOM, οποτε
      αρκει να αντιστραφουν τα πλατη· δεν χρειαζεται `order` ουτε `direction`.

   ΔΕΝ ΕΧΕΙ ΡΑΓΑ Η ΑΝΤΕΣΤΡΑΜΜΕΝΗ: το mockup βαζει και σε αυτην, αλλα το δικο
   μας JS δενει μονο την ΠΡΩΤΗ .nq-studio-story. Αν ζητηθει, θελει αλλαγη στο JS
   (querySelectorAll) — δεν λυνεται απο εδω. Μεχρι τοτε ο κανονας της ραγας δεν
   πιανει τιποτα σε αυτη τη ζωνη, που ειναι σωστο.
   ═══════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-pre-hosting-section > .row {
  display: grid;
  grid-template-columns: minmax(0, 509fr) minmax(0, 763fr);
  align-items: center;
  margin-inline: 0;
}
body.nq-demo5 .nq-pre-hosting-section .nq-pre-hosting-section__media,
body.nq-demo5 .nq-pre-hosting-section .nq-story-content {
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
}
/* ΤΟ ΚΑΤΩ ΚΕΝΟ ΟΡΙΣΤΗΚΕ ΣΤΑ 60px (ιδιοκτητης, 2026-09-07).
   Ηταν `clamp(34px, 2.9vw, 56px)` — 34 στο κινητο, 56 στην οθονη. Το ζητουμενο
   ελεγε min 60 με max 56· ενα clamp με min μεγαλυτερο του max επιστρεφει ΠΑΝΤΑ
   το min, οποτε γραφεται σκετο 60px αντι για clamp που μπερδευει. ΣΥΝΕΠΕΙΑ:
   στην οθονη το κενο πηγε 56 → 60 (+4px). Η ΑΡΙΣΤΕΡΗ εσοχη μενει clamp — ειναι
   η μετρηση του mockup (108px στην οθονη, 24px στο κινητο). */
body.nq-demo5 .nq-pre-hosting-section .nq-story-content {
  padding: 0 0 60px clamp(24px, 5.6vw, 108px);
}
/* Η εικονα κατεβαινει λιγο. Μετρημενο στο mockup: ξεκιναει 29px κατω απο την
   κορυφη της γραμμης, ενω το κειμενο στο 0 — εκει η εικονα ειναι 437 σε γραμμη
   494, οποτε «περισσευει» χωρος και κεντραρεται. Εδω η δικη μας εικονα ειναι
   τετραγωνη και ΟΡΙΖΕΙ το υψος της γραμμης (519), αρα δεν περισσευει τιποτα να
   κεντραρωθει και κολλαει στο 0. Το διορθωνουμε με ρητο περιθωριο. */
body.nq-demo5 .nq-pre-hosting-section .nq-pre-hosting-section__media {
  margin-top: clamp(16px, 1.5vw, 29px);
}
/* Η εικονα ΔΕΝ γεμιζει τη στηλη. Μετρημενο στο mockup: κελι 509, εικονα 437,
   κενο 72 ως το κειμενο — δηλαδη η εικονα πιανει το 86% του κελιου (437/509).
   Ειχα βαλει width:100% και εβγαινε 519 με ΜΗΔΕΝ κενο, γι' αυτο εδειχνε
   μεγαλυτερη και κολλητη στο κειμενο. Το γραφουμε ως ποσοστο ωστε να κραταει
   την αναλογια σε καθε πλατος, αντι για καρφωτα 437px. */
body.nq-demo5 .nq-pre-hosting-section__img img {
  display: block;
  width: 84%;
  height: auto;
  border-radius: 24px;
}

body.nq-demo5 .nq-studio-story--reverse > .row {
  grid-template-columns: minmax(480px, 1.35fr) minmax(320px, .9fr);
}
body.nq-demo5 .nq-studio-story--reverse .nq-story-content {
  padding: 0 clamp(32px, 8.5vw, 165px) clamp(64px, 6.5vw, 108px) 0;
}
/* Η ραγα της ΑΝΤΕΣΤΡΑΜΜΕΝΗΣ ζωνης. Το οριο των στηλων εδω ειναι στο 60%
   (κειμενο 60% αριστερα, εικονα 40% δεξια), οχι στο 40% οπως στην κανονικη.
   ΔΕΝ ειναι απλο καθρεφτισμα: μετρημενο στο mockup, η κανονικη καθεται 52px
   ΜΕΤΑ το οριο και η αντεστραμμενη 26px ΠΡΙΝ απο αυτο — 570 και 752 σε ζωνη
   1296. Αντιγραφουμε τις δυο μετρησεις, δεν υποθετουμε συμμετρια. */
body.nq-demo5 .nq-studio-story--reverse .nq-cta-scroll-rail--story {
  left: calc(60% - 26px);
}
/* Η εικονα της αντεστραμμενης ειναι ΜΙΚΡΟΤΕΡΗ απο τη στηλη της: μετρημενο στο
   mockup, 456 σε στηλη 518 = 88%. ΜΟΝΟ εδω — στην πρωτη ζωνη η εικονα πιανει
   ολο το πλατος (100%), οποτε ο κανονας ειναι δεμενος στο --reverse. */
/* ΔΕΞΙΑ ΣΤΟΙΧΙΣΗ ΜΕ margin, ΟΧΙ ΜΕ text-align: το block Single Image βγαζει
   `div.B_single_image … text-center` και το Bootstrap γραφει
   `.text-center { text-align: center !important }` — δεν νικιεται. Το
   `margin-left: auto` σε στοιχειο block ειναι αλλη ιδιοτητα, δεν συγκρουεται
   καθολου μαζι του, και δινει το ιδιο αποτελεσμα χωρις !important.
   ΘΕΛΕΙ ΟΜΩΣ ΚΑΙ `display: block`: το img ερχεται `display: inline`, και σε
   inline στοιχειο το `margin: auto` υπολογιζεται ΜΗΔΕΝ — γι' αυτο η πρωτη
   προσπαθεια δεν το κουνησε καθολου (μετρηθηκε 31px και απο τις δυο πλευρες,
   δηλαδη ακομη κεντραρισμενο).
   ΤΟ -21px ΕΙΝΑΙ ΤΟΥ MOCKUP: εκει η εικονα ΞΕΦΕΥΓΕΙ 21px δεξια απο τη στηλη
   της και κοβεται απο το overflow:hidden — μετρημενο, δεν ειναι ατυχημα.
   Με margin-left:auto το υπολοιπο κενο απορροφαται αριστερα. */
body.nq-demo5 .nq-studio-story--reverse .nq-story-stage__img img {
  display: block;
  width: 88%;
  margin-left: auto;
  margin-right: -21px;
}
/* Η εικονα κατεβαινει: κεντραρεται καθετα αντι να κολλαει στην κορυφη.
   Στο mockup η εικονα ειναι 694 σε ζωνη 789 — γεματη, οποτε το «που καθεται»
   δεν τιθεται. Η δικη μας ειναι τετραγωνη και βγαινει 456 σε ζωνη 806, αρα
   αφηνει 350px κενο που ολο πηγαινε απο κατω. Κεντραρισμα αντι για καρφωτο
   περιθωριο: προσαρμοζεται μονο του αν αλλαξει το υψος του κειμενου.
   ΧΡΕΙΑΖΕΤΑΙ ΚΑΙ `align-self: stretch`: η γραμμη ερχεται με inline
   `align-items: flex-start` (ρυθμιση «Equal height» κλειστη), οποτε η στηλη
   δεν τεντωνοταν και εμενε 456 — οσο η ιδια η εικονα. Χωρις τεντωμα δεν
   υπαρχει ελευθερος χωρος και το κεντραρισμα δεν κανει τιποτα. Ιδια παγιδα
   με τις καρτες υπηρεσιων· η λυση ειναι παλι στο ΠΑΙΔΙ, χωρις !important. */
body.nq-demo5 .nq-studio-story--reverse .nq-story-stage {
  align-self: stretch;
  align-items: center;
  justify-content: flex-end;
}
/* Λιγο πιο κατω απο το κεντρο, ζητηθηκε (2026-09-05). ΠΡΟΣΟΧΗ ΣΤΟ ΜΙΣΟ:
   σε flex container με `align-items: center` το περιθωριο ΔΕΝ μετακινει το
   στοιχειο κατα ολη του την τιμη — το κεντραρισμα ξαναμοιραζει τον ελευθερο
   χωρο, οποτε η μετατοπιση ειναι η ΜΙΣΗ. Ο ιδιοκτητης ορισε -100px
   (2026-09-06), δηλαδη ανεβασμα 50px απο το κεντρο. */
body.nq-demo5 .nq-studio-story--reverse .nq-story-stage__img {
  margin-top: -100px;
}

/* Καθετος ρυθμος των δυο νεων ενοτητων — ιδια λογικη με ολες τις αλλες:
   margin-bottom στο SECTION, με clamp, τιμες απο το mockup.
     scope-extra   31 (δικο του) + 112 (margin-top του pre-hosting)  = 143
     pre-hosting   0 + 130 (margin-top της αντεστραμμενης)           = 130 */
body.nq-demo5 .nq-sec-pre-hosting {
  margin-bottom: clamp(129px, 10.155vw, 195px);
}
body.nq-demo5 .nq-sec-hosting-story {
  margin-bottom: clamp(111px, 8.745vw, 168px);
}

@media (max-width: 991px) {
  body.nq-demo5 .nq-pre-hosting-section > .row,
  body.nq-demo5 .nq-studio-story--reverse > .row {
    grid-template-columns: minmax(0, 1fr);
  }
  body.nq-demo5 .nq-pre-hosting-section .nq-story-content,
  body.nq-demo5 .nq-studio-story--reverse .nq-story-content {
    padding-inline: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PORTFOLIO — CAROUSEL (αντικατεστησε το πλεγμα καρτων, 2026-09-05)
   Το markup και η λογικη ειναι αυτουσια του mockup· η κινηση γινεται στο
   theme/js/home-sections.js (initPortfolioCarousel).

   ΔΟΜΗ:
     .nq-portfolio-carousel
       .nq-portfolio-viewport            ← ΤΟ ΠΑΡΑΘΥΡΟ, overflow hidden
         .nq-portfolio-track             ← κυλαει με translate3d απο το JS
           article.nq-portfolio-slide ×10  (flex: 0 0 100%)
             .row > .col-lg-4 .nq-portfolio-info
                  > .col-lg-8 .nq-portfolio-media-col > button.nq-portfolio-visual
       .nq-portfolio-controls  (prev · μετρητης · next)

   🔴 ΔΥΟ ΣΗΜΕΙΑ ΠΟΥ ΣΠΑΝΕ ΑΝ ΞΕΧΑΣΤΟΥΝ:
   1) Το .nq-portfolio-visual ΠΡΕΠΕΙ να εχει σταθερο υψος ΚΑΙ overflow:hidden.
      Η εικονα ειναι πανυψηλη (μετρημενη στο mockup: 848x5309) και το JS την
      κυλαει με transform ΜΕΣΑ σε αυτο το παραθυρο. Χωρις τα δυο, ξεχειλιζει
      και σπρωχνει ολη τη σελιδα.
   2) Ειναι <button>. Θελει μηδενισμο των προεπιλογων του φυλλομετρητη
      (border, padding, background, font) αλλιως εμφανιζεται ως κουμπι.

   Το radius `34px 0` σημαινει 34 πανω-αριστερα και κατω-δεξια, 0 στις αλλες
   δυο γωνιες — ετσι το ειχε μετρηθει στο mockup, δεν ειναι τυπογραφικο λαθος.
   ═══════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-portfolio-carousel {
  position: relative;
  margin-top: clamp(44px, 3.65vw, 70px);
}
body.nq-demo5 .nq-portfolio-viewport {
  position: relative;
  overflow: hidden;
}
/* Η ΟΡΙΖΟΝΤΙΑ ΤΑΧΥΤΗΤΑ ΕΙΝΑΙ ΡΥΘΜΙΣΗ ΤΟΥ ΙΔΙΟΚΤΗΤΗ. Το JS γραφει τη
   --nq-portfolio-speed-x πανω στο .nq-portfolio-carousel απο το πεδιο
   «Ταχυτητα αριστερα-δεξια» του block. Αν το transition δεν τη διαβαζε, η
   ρυθμιση δεν θα εκανε τιποτα. Το 950ms ειναι το fallback του mockup, για την
   περιπτωση που το JS δεν προλαβει ή το πεδιο μεινει κενο. Η καμπυλη μενει
   του mockup — ρυθμιζεται μονο η διαρκεια. */
body.nq-demo5 .nq-portfolio-track {
  display: flex;
  transition: transform var(--nq-portfolio-speed-x, 950ms) cubic-bezier(.22, .72, .18, 1);
}
body.nq-demo5 .nq-portfolio-slide {
  flex: 0 0 100%;
  min-width: 0;
}

body.nq-demo5 .nq-portfolio-info {
  padding: 20px 24px 0;
}
body.nq-demo5 .nq-portfolio-number {
  display: block;
  margin: 0 0 24px;
  color: #aaa7ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}
body.nq-demo5 .nq-portfolio-info h3 {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1.02;
}
/* Προαιρετικα technologies. Σημερα ειναι κενα σε ολα τα εργα και το template
   δεν βγαζει καν το στοιχειο· γραφεται εκ των προτερων ωστε να μην εμφανιστει
   αστυλωτο αν ο ιδιοκτητης συμπληρωσει καποιο. ΔΕΝ ειναι εφευρεση: ειναι οι
   ιδιες τιμες με τα .nq-service-row__tags — ιδια εννοια, ενα στυλ. */
body.nq-demo5 .nq-portfolio-tags {
  display: block;
  margin: 14px 0 0;
  color: #aaa7ff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .3px;
  text-transform: uppercase;
}
body.nq-demo5 .nq-portfolio-info p {
  max-width: 36ch;
  margin: 28px 0 0;
  color: #a5a8b3;
  font-size: 17px;
  line-height: 1.75;
}
body.nq-demo5 .nq-portfolio-site-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin: 36px 0 0;
  padding: 0 0 8px;
  border-bottom: 1px solid #aaa7ff;
  color: #aaa7ff;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

/* Το παραθυρο της εικονας — βλ. σημειο 1 & 2 παραπανω. */
body.nq-demo5 .nq-portfolio-visual {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(320px, 42.5vw, 544px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 34px 0 34px 0;
  background: #101016;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
/* ΤΟ ΣΚΟΥΡΟ ΕΠΙΣΤΡΩΜΑ ΠΑΝΩ ΑΠΟ ΤΗΝ ΕΙΚΟΝΑ. Χωρις αυτο τα screenshots των
   πελατων ειναι φωτεινα και «ξενα» πανω στο μαυρο της σελιδας.

   ΡΥΘΜΙΖΕΤΑΙ ΑΠΟ ΤΟΝ ΙΔΙΟΚΤΗΤΗ. Οι τιμες δεν ειναι καρφωτες — ζουν σε
   μεταβλητες πανω στο .nq-portfolio-carousel και μπορουν να αλλαχθουν απο
   οπουδηποτε πιο «κοντα» στο στοιχειο (Custom CSS του block, της ενοτητας ή
   της σελιδας) ΧΩΡΙΣ να πειραχτει αυτο το αρχειο:

     --nq-slide-veil        το χρωμα, ως «R G B» (κενα, οχι κομματα)
     --nq-slide-veil-top    διαφανεια στην κορυφη      0 = καθολου, 1 = αδιαφανο
     --nq-slide-veil-bottom διαφανεια στον πατο
     --nq-slide-veil-tint   ενταση της ελαφριας μοβ αποχρωσης· 0 τη σβηνει

   ΠΑΝΩ ΑΠΟ ΟΛΑ ΑΥΤΑ: το πεδιο «Slider opacity» του block (Agent 2). Οταν εχει
   τιμη, το block εκπεμπει inline στο .nq-portfolio-carousel:
       --nq-veil: rgba(...)
   και τοτε ΚΑΙ ΤΑ ΔΥΟ stops της καθετης βαθμιδας γινονται αυτη η μια τιμη —
   δηλαδη επιπεδο πεπλο που ΑΝΤΙΚΑΘΙΣΤΑ τη βαθμιδα. Οταν το πεδιο ειναι κενο η
   μεταβλητη ΔΕΝ εκπεμπεται καθολου (mustache `{{#veil}}`), το var() πεφτει στο
   fallback και δεν αλλαζει τιποτα οπτικα.
   🔴 Κενη custom property (`--nq-veil: ;`) ΔΕΝ πεφτει στο fallback — θα
   εσβηνε τη βαθμιδα αντι να την αφησει. Γι' αυτο μπαινει υπο συνθηκη.

   Οι προεπιλογες ειναι ΑΚΡΙΒΩΣ οι μετρημενες τιμες του mockup.
   Το χρωμα γραφεται χωρις rgb() ωστε η ιδια τιμη να χρησιμοποιηθει με
   διαφορετικη διαφανεια σε καθε στρωμα — συνταξη `rgb(R G B / A)`.

   ΤΕΧΝΙΚΑ: θελει `position: relative` στο κουμπι (μπηκε παραπανω) και
   `pointer-events: none`, αλλιως το επιστρωμα τρωει το κλικ της παυσης. */
body.nq-demo5 .nq-portfolio-carousel {
  --nq-slide-veil: 8 8 12;
  --nq-slide-veil-top: .2;
  --nq-slide-veil-bottom: .32;
  --nq-slide-veil-tint: 1;
}
body.nq-demo5 .nq-portfolio-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(var(--nq-veil, rgb(var(--nq-slide-veil) / var(--nq-slide-veil-top))),
                    var(--nq-veil, rgb(var(--nq-slide-veil) / var(--nq-slide-veil-bottom)))),
    linear-gradient(90deg,
                    rgb(11 8 24 / calc(.1 * var(--nq-slide-veil-tint))),
                    rgb(0 0 0 / calc(.08 * var(--nq-slide-veil-tint))));
  pointer-events: none;
}
body.nq-demo5 .nq-portfolio-scroll-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Τα χειριστηρια καθονται κατω απο τη ΣΤΗΛΗ ΤΗΣ ΕΙΚΟΝΑΣ, οχι στο κεντρο της
   γραμμης: το mockup τα σπρωχνει κατα το πλατος της στηλης κειμενου (1/3). */
body.nq-demo5 .nq-portfolio-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 28px 0 0 33.333%;
}
/* ΤΟ ΠΕΡΙΓΡΑΜΜΑ ΕΙΝΑΙ 2px ΜΕ ΑΠΟΦΑΣΗ ΤΟΥ ΙΔΙΟΚΤΗΤΗ (2026-09-07), ηταν 1px.
   Το κουμπι ειναι border-box, αρα το 40x40 ΔΕΝ αλλαζει — παχαινει μονο η
   γραμμη προς τα μεσα. Αλλαγμενο ΣΤΟΝ ΙΔΙΟ κανονα, οχι με δευτερο απο κατω:
   ενα override θα εσπαγε το hover, που αλλαζει μονο `border-color` και
   κληρονομει παχος και στυλ απο εδω. */
body.nq-demo5 .nq-portfolio-controls button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: transparent;
  color: #aaa7ff;
  font-size: 16px;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
body.nq-demo5 .nq-portfolio-controls button:hover {
  border-color: #aaa7ff;
  color: #ffffff;
}
body.nq-demo5 .nq-portfolio-counter {
  color: #737582;
  font-size: 11px;
  letter-spacing: .08em;
}
body.nq-demo5 .nq-portfolio-counter strong {
  color: #f4f4f7;
  font-weight: 600;
}

@media (max-width: 991px) {
  body.nq-demo5 .nq-portfolio-controls {
    margin-left: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ΚΙΝΗΤΟ — ΤΑ ΠΛΑΪΝΑ ΠΕΡΙΘΩΡΙΑ ΤΟΥ HERO (2026-09-06)
   Η ενοτητα του hero εχει `padding: 72px 0 64px` — ΜΗΔΕΝ οριζοντιο. Μεσα της
   τα Text Blocks ειναι `div.row.B_Textblock` με `margin: 0 -12px` (το κανονικο
   αρνητικο περιθωριο του Bootstrap), που αλλου το απορροφα το padding της
   στηλης — εδω η στηλη .nq-hero-in εχει padding 0.
   Μετρημενο σε πλατος 404: .nq-hero-sub και .nq-hero-where βγαιναν
   L=-12 R=401 σε ορατο πλατος 389, δηλαδη κομμενα ΚΑΙ απο τις δυο μεριες.
   Ο τιτλος γλυτωνε μονο επειδη εχει δικα του margin.
   Μηδενιζεται το αρνητικο περιθωριο και μπαινει πραγματικος αερας. */
@media (max-width: 767px) {
  body.nq-demo5 .nq-hero-in > .row.B_Textblock {
    margin-inline: 0;
    padding-inline: 20px;
  }
  /* ΤΑ ΔΥΟ ΚΟΥΜΠΙΑ ΤΟΥ HERO. Στο mockup η .nq-hero-cta ειναι
     `flex; flex-direction: column; gap: 12px` και καθε κουμπι 220x50
     κεντραρισμενο — μετρημενο σε πλατος 380. Εδω δεν υπαρχει περιβλημα: τα δυο
     B_button ειναι αδελφια inline-block, οποτε καθονταν διπλα-διπλα (176 + 155)
     και το δευτερο κουβαλουσε `margin-left: 12px`. Τα κανουμε block 220px με
     margin: auto — ιδιο αποτελεσμα χωρις να χρειαστει νεο markup. */
  body.nq-demo5 .nq-hero-in > .B_button {
    display: block;
    width: 220px;
    margin: 0 auto;
  }
  body.nq-demo5 .nq-hero-in > .B_button + .B_button {
    margin: 12px auto 0;
  }
  body.nq-demo5 .nq-hero-in > .B_button > .nq-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════════════
   ΤΑ ΕΞΙ ΚΟΥΜΠΙΑ ΕΓΙΝΑΝ BUTTON BLOCK (2026-09-06)

   ΔΟΜΗ — Η ΚΛΑΣΗ ΜΑΣ ΕΙΝΑΙ ΣΤΟ WRAPPER, ΤΟ ΚΟΥΜΠΙ ΕΙΝΑΙ ΜΕΣΑ:
     div.B_button.nq-button.<η κλαση μας>
       > a.nq-btn            ← ΤΟ ΟΠΤΙΚΟ ΚΟΥΜΠΙ
           > i.nq-btn-ico    ← ΠΡΑΓΜΑΤΙΚΟ στοιχειο, οχι ψευδοστοιχειο
           > span.nq-btn-t
   Γι' αυτο καθε κανονας γραφεται `.<κλαση> .nq-btn`, ποτε σκετο.

   🔴 ΤΟ <i> ΕΙΝΑΙ ΠΡΩΤΟ ΣΤΟ DOM ΑΝ ΚΑΙ ΦΑΙΝΕΤΑΙ ΔΕΞΙΑ.
   Το `.nq-ico-right` το φερνει δεξια με `flex-direction: row-reverse`.
   ΠΟΤΕ `:last-child` για το βελακι — θα πιασει το κειμενο.

   ΤΙ ΕΡΧΕΤΑΙ ΑΠΟ ΠΕΔΙΑ ΚΑΙ ΔΕΝ ΞΑΝΑΓΡΑΦΕΤΑΙ ΕΔΩ:
   χρωματα, περιγραμμα, pill, padding, μεγεθος γραμματοσειρας, ο κυκλος και το
   φοντο του εικονιδιου, και το `color: #fff` στο hover των story.
   ΤΑ HOVER ΤΩΝ ΧΡΩΜΑΤΩΝ ΕΙΝΑΙ ΣΚΟΠΙΜΑ ΚΛΕΙΣΤΑ στο block (`hover_effect: none`,
   `hover_bg = bg_color`) — ετσι το κιτρινο του mockup, που ο ιδιοκτητης
   απερριψε ρητα, ΔΕΝ μπορει να επανελθει απο ρυθμιση.

   ΤΙ ΔΙΟΡΘΩΝΕΤΑΙ ΕΔΩ, ΓΙΑΤΙ ΔΕΝ ΥΠΑΡΧΕΙ ΠΕΔΙΟ:
   · gap: το `.nq-btn` εχει καρφωτο `.5rem` = 8px. Ηταν 22 και 26.
   · height: το block δινει σταθερο `height: 50px`. Ηταν 48 και 58.
     🔴 Ειναι ΥΨΟΣ, οχι padding: μετρηθηκε `height: 50px` computed, με το
     εικονιδιο των 36px να ΞΕΦΕΥΓΕΙ απο το padding box στο scope-more.
   · font-weight: το block βγαζει 600 παντου. Τα intro/story θελουν 400.
   · τα hover της κινησης και του περιγραμματος.
   · το inset δαχτυλιδι του βελους στο scope-more.
   ════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-design-intro__btn .nq-btn,
body.nq-demo5 .nq-story-btn .nq-btn {
  height: 48px;
  gap: 22px;
  font-weight: 400;
  transition: border-color .25s ease;
}
body.nq-demo5 .nq-design-intro__btn .nq-btn:hover,
body.nq-demo5 .nq-story-btn .nq-btn:hover {
  border-color: #aaa7ff;
}
/* Η περιστροφη ειναι ΜΟΝΟ στα design-intro. Τα story ειχαν παντα σκετη
   αλλαγη περιγραμματος και χρωματος — το ειχα αναφερει λαθος ως «ιδια». */
body.nq-demo5 .nq-design-intro__btn .nq-btn-ico {
  transition: transform .25s ease;
}
body.nq-demo5 .nq-design-intro__btn .nq-btn:hover .nq-btn-ico {
  transform: translateX(3px) rotate(45deg);
}

body.nq-demo5 .nq-scope-btn .nq-btn {
  height: 58px;
  gap: 26px;
  transition: transform .25s ease;
}
/* ΜΟΝΟ ΑΝΑΣΗΚΩΜΑ, ΚΑΜΙΑ ΑΛΛΑΓΗ ΧΡΩΜΑΤΟΣ — ρητο αιτημα του ιδιοκτητη
   (2026-09-06): «δεν θελω κιτρινο hover». Η αναδραση μενει στο ανασηκωμα και
   στο βελακι, που ανοιγει απο #aaa7ff σε #c0beff. */
body.nq-demo5 .nq-scope-btn .nq-btn:hover {
  transform: translateY(-2px);
}
/* ΧΩΡΙΣ ΔΑΧΤΥΛΙΔΙ ΓΥΡΩ ΑΠΟ ΤΟΝ ΚΥΚΛΟ (ιδιοκτητης, 2026-09-07).
   Ηταν `box-shadow: inset 0 0 0 1px rgba(255,255,255,.22)`, δικος μας κανονας.
   ΔΕΝ ΗΤΑΝ BORDER: μετρηθηκε `border: 0px none` στο εικονιδιο — το «περιγραμμα»
   που φαινοταν ηταν παντα αυτη η εσωτερικη σκια, οποτε δεν χρειαστηκε αλλαγη
   στον Manager. (Αλλο πραγμα το περιγραμμα του ΚΟΥΜΠΙΟΥ, που ειναι inline απο
   το block και εκκρεμει στον Agent 2.)
   Το transition μενει: το hover εξακολουθει να ανοιγει το φοντο σε #c0beff. */
body.nq-demo5 .nq-scope-btn .nq-btn-ico {
  transition: transform .25s ease, background-color .25s ease;
}
/* ΤΟ ΒΕΛΟΣ ΓΥΡΙΖΕΙ 45 ΜΟΙΡΕΣ ΚΑΙ ΔΕΙΧΝΕΙ ΠΑΝΩ-ΔΕΞΙΑ (ιδιοκτητης, 2026-09-07).
   Το εικονιδιο ειναι `fe fe-arrow-right` (Feather, U+E911) — δειχνει δεξια.
   Το -45deg το φερνει πανω-δεξια· το +45 θα το εστελνε κατω-δεξια.

   🔴 Η ΠΕΡΙΣΤΡΟΦΗ ΜΠΑΙΝΕΙ ΣΤΟ <i>, ΟΧΙ ΣΤΟ ::before. Το <i> ειναι ΚΑΙ
   ο κυκλος (φοντο + border-radius 50% + inset ring), αλλα ο κυκλος ειναι
   ΑΝΑΛΛΟΙΩΤΟΣ στην περιστροφη — τιποτα δεν φαινεται να γερνει. Ετσι μενει ενας
   κανονας αντι για δυο, και το κεντρο περιστροφης ειναι εξ ορισμου το κεντρο
   του κυκλου.

   🔴 ΤΟ hover ΞΑΝΑΓΡΑΦΕΙ ΤΗΝ ΠΕΡΙΣΤΡΟΦΗ ΕΠΙΤΗΔΕΣ. Το `transform` ειναι
   ΜΙΑ ιδιοτητα: το `translateX(2px)` του hover θα ΑΚΥΡΩΝΕ το rotate και το
   βελος θα πεταγοταν οριζοντιο μολις ακουμπουσε ο δεικτης. Καθε μελλοντικη
   αλλαγη στο transform αυτου του κουμπιου πρεπει να ξαναγραφει το rotate. */
/* 🔴 Η ΠΕΡΙΣΤΡΟΦΗ ΕΦΥΓΕ ΑΠΟ ΤΟ <i> ΚΑΙ ΠΗΓΕ ΣΤΟ ::before.
   Πρωτη εκδοχη: rotate πανω στο <i>. Δουλευε, αλλα ΕΚΛΕΙΝΕ ΤΟΝ ΔΡΟΜΟ για το
   επομενο αιτημα («το βελος λιγο αριστερα»): οταν ο γονιος ειναι γυρισμενος
   45°, καθε μετατοπιση παιδιου — translate Η padding — ακολουθει τους
   ΓΥΡΙΣΜΕΝΟΥΣ αξονες, οποτε ενα «αριστερα» βγαινει διαγωνιο πανω-αριστερα.
   Με την περιστροφη στο ::before, το <i> (δηλαδη ο κυκλος) μενει ισιο, και το
   `translateX(...) rotate(...)` μεσα στο ιδιο transform εφαρμοζεται με τη
   σειρα που γραφεται: πρωτα η οριζοντια μετατοπιση σε ΚΑΝΟΝΙΚΟΥΣ αξονες,
   μετα η περιστροφη γυρω απο το νεο κεντρο. Η σειρα ΔΕΝ αντιστρεφεται. */
body.nq-demo5 .nq-scope-btn .nq-btn-ico::before {
  display: block;
  transform: rotate(-45deg);
}
/* Το hover μετακινει τον ΚΥΚΛΟ, οχι το βελος — αρα μενει στο <i> και δεν
   συγκρουεται πια με την περιστροφη. */
body.nq-demo5 .nq-scope-btn .nq-btn:hover .nq-btn-ico {
  transform: translateX(2px);
  background: #c0beff;
}
/* ΚΙΝΗΤΟ — ΟΠΤΙΚΟ ΣΠΡΩΞΙΜΟ 1.5px ΑΡΙΣΤΕΡΑ ΚΑΙ 1.5px ΠΑΝΩ (ιδιοκτητης,
   2026-09-07, σε δυο διαδοχικα αιτηματα).
   ΔΕΝ ΥΠΑΡΧΕΙ ΓΕΩΜΕΤΡΙΚΟ ΛΑΘΟΣ ΝΑ ΔΙΟΡΘΩΘΕΙ — μετρηθηκε: ο κυκλος ειναι
   ακριβως 32.00×32.00 (36.00×36.00 στην οθονη), το padding 9px συμμετρικο, και
   το μελανι του glyph, μετρημενο σε canvas στα 72px, πεφτει 0.5px απο το
   κεντρο του advance και 1px απο το κεντρο του line box — δηλαδη 0.13px και
   0.25px στα 18px. Ειναι κεντραρισμενο.
   Το αιτημα ειναι ΟΠΤΙΚΟ: το βελος εχει ουρα αριστερα και βαρια κεφαλη δεξια,
   οποτε το γεωμετρικο κεντρο δεν συμπιπτει με το κεντρο βαρους — κλασικη
   περιπτωση οπτικης διορθωσης. Γι' αυτο η τιμη ειναι δεκαδικη και μικρη.
   ΜΟΝΟ ≤767.98, οπως ζητηθηκε: εκει ο κυκλος ειναι 32 με glyph 18, δηλαδη
   πιο γεματος απο την οθονη (36 με 18), και η αποκλιση φαινεται περισσοτερο. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-scope-btn .nq-btn-ico::before {
    transform: translate(-1.5px, -1.5px) rotate(-45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
body.nq-demo5 .nq-design-intro__btn .nq-btn,
body.nq-demo5 .nq-design-intro__btn .nq-btn-ico,
body.nq-demo5 .nq-story-btn .nq-btn,
body.nq-demo5 .nq-scope-btn .nq-btn,
body.nq-demo5 .nq-scope-btn .nq-btn-ico {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   ΚΙΝΗΤΟ — ΤΑ ΠΛΑΪΝΑ ΠΕΡΙΘΩΡΙΑ ΤΟΥ ΠΕΡΙΕΧΟΜΕΝΟΥ (2026-09-06)

   Ο ιδιοκτητης ειδε οτι τα κενα αριστερα/δεξια ειναι πιο μικρα απο το mockup.
   Μετρηθηκαν ΚΑΙ ΤΑ ΔΥΟ σε πλατος 392 (viewport περιεχομενου 377), εσοχη απο
   καθε πλευρα — δικο μας / mockup:

     hero τιτλος            20 / 12   (δικο μας πιο φαρδυ, μενει)
     Φτιαγμενο στην Κερκυρα 36 / 34   ✓
     καρτα υπηρεσιας        12 / 24   ← λειπουν 12
     design-intro           12 / 24   ← λειπουν 12
     Η Διαδικασια μας       12 / 12   ✓
     λιστα scope-extra      28 / 36   ← λειπουν 8
     κειμενο portfolio      12 / 24   ← λειπουν 12
     εικονα portfolio       12 / 12   ✓
     μπαρα scope            12 / 12   ✓
     FAQ                    12 / 24   ← λειπουν 12

   🔴 ΓΙΑΤΙ ΔΕΝ ΜΠΗΚΕ ΕΝΑ ΓΕΝΙΚΟ PADDING ΣΤΟ .container:
   Το mockup ΔΕΝ εχει ενιαια εσοχη. Ο βασικος container ειναι στα 12 —
   ακριβως οσο και ο δικος μας — και τα ΚΕΙΜΕΝΑ προσθετουν αλλα 12 μεσα σε
   καθε ζωνη, ενω τα ΚΟΥΤΙΑ και οι ΕΙΚΟΝΕΣ (μπαρα, slide, story) μενουν στα 12.
   Ενα καθολικο `padding-inline: 24px` θα διορθωνε τεσσερις ζωνες και θα
   χαλαγε τρεις που ηδη ταιριαζουν. Γι' αυτο η διορθωση ειναι ανα ζωνη.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
/* 🔴 ΤΟ PADDING ΜΠΑΙΝΕΙ ΣΤΗ ΓΡΑΜΜΗ, ΟΧΙ ΣΤΗ ΣΤΗΛΗ.
     Η αλυσιδα του Bootstrap ειναι: .container +12 → .pb-row.row −12 → .pb-col
     +12. Το αθροισμα ειναι 12, οχι 24. Πρωτη μου προσπαθεια ηταν
     `padding-inline: 12px` στη ΣΤΗΛΗ — δηλαδη ΑΚΡΙΒΩΣ η τιμη που ειχε ηδη,
     οποτε δεν αλλαξε τιποτα (μετρηθηκε ξανα 12). Στη ΓΡΑΜΜΗ, που ειναι στο −12,
     τα 12 δινουν 0 και μετα η στηλη προσθετει τα δικα της 12 → 24. */
  body.nq-demo5 .nq-design-intro > .row,
  body.nq-demo5 .nq-service-row > .row {
    padding-inline: 12px;
  }
  body.nq-demo5 .nq-home-faq > .row {
    padding-inline: 12px;
  }
  /* Το κειμενο του portfolio ειναι κεντραρισμενο με `margin: auto`, οποτε η
     εσοχη μπαινει ως max-width — αλλιως το `border-bottom` του θα εμενε στα 12
     ενω το κειμενο θα πηγαινε στα 24. */
  body.nq-demo5 .nq-portfolio-intro {
    max-width: calc(100% - 24px);
  }
  body.nq-demo5 .nq-scope-list ul {
    padding-inline: 8px;
  }
}

/* ════════════════════════════════════════════════════════════════
   ΤΑ ΤΕΣΣΕΡΑ ΒΗΜΑΤΑ ΩΣ INFO BOX — «Σχετικα» (2026-09-07)

   Στην ΑΡΧΙΚΗ τα ιδια βηματα ειναι Raw HTML: `.nq-story-list >
   article.nq-story-item > span.nq-story-index + h3`. Στο «Σχετικα» ο
   ιδιοκτητης ζητησε πραγματικα blocks, οποτε ειναι τεσσερα Info Box με κλαση
   `.nq-story-step` και `box_style: left-heading`.
   ΔΥΟ ΣΕΤ ΚΑΝΟΝΩΝ ΓΙΑ ΤΗΝ ΙΔΙΑ ΟΨΗ, ΠΡΟΣΩΡΙΝΑ: οταν μετατραπουν και της
   αρχικης σε Info Box (συμφωνημενο με τον Agent 2), σβηνονται τα
   `.nq-story-list` / `.nq-story-item` / `.nq-story-index` και μενει μονο αυτο.

   🔴 ΤΡΙΑ ΚΕΛΙΑ ΠΡΕΠΕΙ ΝΑ ΚΡΥΦΤΟΥΝ, ΑΛΛΙΩΣ ΣΠΑΕΙ ΤΟ GRID.
   Το block βγαζει ΠΑΝΤΑ πεντε παιδια: num, icon-box, body (`display: contents`,
   αρα ο τιτλος/desc/readmore μπαινουν ΚΑΤΕΥΘΕΙΑΝ στο grid), και overlay.
   Με δυο στηλες, το κενο icon-box θα επιανε το δευτερο κελι και ο τιτλος θα
   επεφτε στη ΔΕΥΤΕΡΗ γραμμη, κατω απο τον αριθμο. Μετρημενο: icon-box 0x6,
   desc 614x0 — αορατα αλλα ΥΠΑΡΚΤΑ κελια. */
body.nq-demo5 .nq-story-step {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
body.nq-demo5 .nq-story-step:first-child {
  border-top: 1px solid rgba(255, 255, 255, .16);
}
body.nq-demo5 .nq-story-step .nq-ib-icon-box,
body.nq-demo5 .nq-story-step .nq-ib-desc,
body.nq-demo5 .nq-story-step .nq-ib-readmore {
  display: none;
}
/* 🔴 Ο ΑΡΙΘΜΟΣ ΕΙΝΑΙ `position: absolute` ΑΠΟ ΤΟ BLOCK (top:0 right:0) —
   ετσι τον θελουν οι καρτες υπηρεσιων, οπου καθεται στην πανω δεξια γωνια.
   Εδω πρεπει να μπει ΜΕΣΑ στο grid, στην πρωτη στηλη. Χωρις `position: static`
   βγαινε στο δεξι ακρο της γραμμης (μετρηθηκε x=602 αντι 0) και ο τιτλος
   κρατουσε μονος του και τα δυο κελια. */
body.nq-demo5 .nq-story-step .nq-ib-num {
  position: static;
  color: #8d89ff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  opacity: 1;
  letter-spacing: normal;
}
body.nq-demo5 .nq-story-step .nq-ib-title {
  margin: 0;
  font-size: clamp(19px, 1.5vw, 24px);
  font-weight: 300;
  line-height: 1;
}
body.nq-demo5 .nq-story-step .nq-ib-title-a {
  color: inherit;
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════
   ΖΩΝΗ: project-contact — «Ξεκινατε νεο project;»
   Saved Block (id 29), ΚΟΙΝΟ σε «Σχετικα» και «Υπηρεσιες». Πηγη: Demo 5
   about-us.html, μετρημενο σε iframe 1440 μεσα στο ιδιο origin του mockup.

   🔴 ΔΟΜΙΚΗ ΔΙΑΦΟΡΑ ΠΟΥ ΑΛΛΑΖΕΙ ΤΟ GRID:
   Στο mockup το shell εχει ΔΥΟ παιδια — ενα <header> που τυλιγει υπερτιτλο,
   τιτλο, παραγραφο και τηλεφωνο, και τη <form>. Εδω ΔΕΝ υπαρχει wrapper: ο
   ιδιοκτητης ζητησε πραγματικα blocks, οποτε τα τρια πρωτα ειναι ΞΕΧΩΡΙΣΤΑ
   παιδια (adv_heading + δυο Text Block) και το shell εχει ΤΕΣΣΕΡΑ παιδια.
   Αρα: τρεις γραμμες στην πρωτη στηλη, και η φορμα γεφυρωνει ολες τις γραμμες
   στη δευτερη.

   🔴 ΤΟ gap ΕΙΝΑΙ ΜΟΝΟ ΟΡΙΖΟΝΤΙΟ. Το mockup εχει `gap: clamp(64,8vw,126)`
   και στους δυο αξονες, αλλα εκει τα τρια κειμενα ειναι ΜΕΣΑ στο <header>, οποτε
   το καθετο gap δεν τα αγγιζει. Εδω ειναι ξεχωριστες γραμμες: με καθετο gap θα
   εμπαιναν 126px αναμεσα σε υπερτιτλο, παραγραφο και τηλεφωνο. Το καθετο κενο
   το δινουν τα margin τους, οπως ακριβως στο mockup.

   ΤΟ ΜΟΝΟ ΣΗΜΕΙΟ ΠΟΥ ΕΜΕΙΝΕ RAW HTML ΕΙΝΑΙ Η ΦΟΡΜΑ — δεν υπαρχει στοιχειο
   φορμας στη βιβλιοθηκη (ο Agent 2 ελεγξε και τα 33). Οι κλασεις της ομως ειναι
   ΑΚΡΙΒΩΣ του mockup, οποτε οι κανονες περνανε αυτουσιοι.
   ════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-project-contact {
  padding: clamp(86px, 8vw, 128px) 0 clamp(96px, 9vw, 142px);
  border-top: 1px solid rgba(255, 255, 255, .11);
  background: #000000;
  color: #ffffff;
  scroll-margin-top: 96px;
}
body.nq-demo5 .nq-project-contact,
body.nq-demo5 .nq-project-contact * {
  box-sizing: border-box;
}
body.nq-demo5 .nq-project-contact > .container > .pb-row-box > .pb-row.row {
  margin-inline: 0;
}
body.nq-demo5 .nq-project-contact__shell {
  display: grid;
  grid-template-columns: minmax(270px, .78fr) minmax(0, 1.45fr);
  grid-template-rows: auto auto 1fr;
  gap: 0 clamp(64px, 8vw, 126px);
  align-items: start;
  width: 100%;
  max-width: 100%;
  padding: 0;
}
body.nq-demo5 .nq-project-contact__head,
body.nq-demo5 .nq-project-contact__lead,
body.nq-demo5 .nq-project-contact__direct {
  grid-column: 1;
  align-self: start;
}
body.nq-demo5 .nq-project-contact__form {
  grid-column: 2;
  grid-row: 1 / -1;
}
/* Τα δυο Text Block ειναι `.row`, δηλαδη κουβαλανε τα αρνητικα περιθωρια του
   Bootstrap και 12px padding στο wrapper. Μηδενιζονται, αλλιως το κειμενο και
   η γραμμη του τηλεφωνου ξεφευγουν 12px αριστερα απο τον τιτλο. */
body.nq-demo5 .nq-project-contact .B_wrapper {
  width: auto;
  padding-inline: 0;
}

/* Ο τιτλος. Το `max-width: 9ch` ειναι του mockup και κλιμακωνεται με τη
   γραμματοσειρα, οποτε δουλευει σε καθε μεγεθος. */
/* 🔴 Η ΤΥΠΟΓΡΑΦΙΑ ΑΥΤΟΥ ΤΟΥ ΤΙΤΛΟΥ ΓΡΑΦΕΤΑΙ ΕΔΩ, ΟΧΙ ΣΤΟ BLOCK.
   Τα πεδια του Advanced Heading δεχονται ΜΟΝΟ px, οποτε ο Agent 2 προσεγγισε
   το `clamp(48px, 5vw, 72px)` με τρια σκαλοπατια (72 / 50 / 48). Το clamp ομως
   ΡΕΕΙ: στα 1280 δινει 64px ενω το σκαλοπατι δινει 72 — **8px διαφορα σε ενα
   απο τα πιο συνηθισμενα πλατη laptop**. Ιδιο θεμα με το letter-spacing: το
   `-0.045em` κλιμακωνεται, το `-3.2px` ειναι σωστο μονο στα 72 (στα 48 βγαινει
   1px πιο σφιχτο), και το `line-height: 0.98` εναντι σταθερου `70px`.
   Τα τρια πανε μαζι — αν γραφτει το ενα, πρεπει και τα τρια.

   ΕΙΔΙΚΟΤΗΤΑ: ο κανονας του block ειναι `.nqce-adv_heading[data-nqah-ms]
   .nqah-h` (0,3,0)· ο δικος μας (0,3,1) κερδιζει.
   ⚠️ ΟΣΟ ΥΠΑΡΧΕΙ ΑΥΤΟΣ Ο ΚΑΝΟΝΑΣ, ΤΑ ΠΕΔΙΑ ΜΕΓΕΘΟΥΣ ΤΟΥ BLOCK ΓΙ' ΑΥΤΟΝ
   ΤΟΝ ΤΙΤΛΟ ΔΕΝ ΚΑΝΟΥΝ ΤΙΠΟΤΑ. Μενουν ως δικλειδα αν σβηστει το CSS.
   (Δουλευει επειδη το μεγεθος και το υψος γραμμης ερχονται ως custom properties
   `--nqah-ms` / `--nqah-ml` μεσα απο κανονα, οχι ως inline δηλωσεις.)

   🔴 ΤΟ letter-spacing ΕΙΝΑΙ ΑΚΟΜΗ ΑΔΡΑΝΕΣ. Σε αντιθεση με τα αλλα δυο,
   γραφεται INLINE στο h2 (`letter-spacing: -3.2px`), οποτε το `-0.045em` εδω
   ΔΕΝ πιανει — μετρηθηκε -3.2px σε ολα τα πλατη. Σωστο στα 72px, αλλα στα 48
   του κινητου βγαινει ~1px πιο σφιχτο απο το mockup. Ζητηθηκε απο τον Agent 2
   να αδειασει το πεδιο· μολις αδειασει, ο κανονας ζωντανευει μονος του. */
body.nq-demo5 .nq-project-contact__head .nqah-h {
  max-width: 9ch;
  font-size: clamp(48px, 5vw, 72px);
  line-height: .98;
  letter-spacing: -.045em;
}
body.nq-demo5 .nq-project-contact__lead {
  max-width: 350px;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, .64);
  font-size: 16px;
  line-height: 1.65;
}
body.nq-demo5 .nq-project-contact__direct {
  display: block;
  max-width: 350px;
  margin: clamp(42px, 5vw, 66px) 0 0;
  padding-top: 23px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
body.nq-demo5 .nq-project-contact__direct span {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, .46);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.nq-demo5 .nq-project-contact__phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #aaa7ff;
  font-size: 20px;
  font-weight: 750;
  text-decoration: none;
}
body.nq-demo5 .nq-project-contact__phone::after {
  content: "\2197";
  font-size: 15px;
  transition: transform .2s ease;
}
body.nq-demo5 .nq-project-contact__phone:hover::after {
  transform: translate(3px, -3px);
}

/* ── Η ΦΟΡΜΑ ───────────────────────────────────────────────────────── */
body.nq-demo5 .nq-project-contact__form {
  display: grid;
  min-width: 0;
  padding-left: clamp(42px, 5vw, 76px);
  border-left: 1px solid rgba(255, 255, 255, .13);
}
body.nq-demo5 .nq-project-contact__services {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
body.nq-demo5 .nq-project-contact__services legend {
  margin: 0 0 17px;
  padding: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.3;
}
body.nq-demo5 .nq-project-contact__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.nq-demo5 .nq-project-contact__choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
body.nq-demo5 .nq-project-contact__choice:hover {
  border-color: rgba(170, 167, 255, .75);
}
/* Το `:has(input:checked)` βαφει ΟΛΟ το pill οταν τσεκαρεται το κρυφο input. */
body.nq-demo5 .nq-project-contact__choice:has(input:checked) {
  border-color: #8d89ff;
  background: #8d89ff;
  color: #080a12;
}
body.nq-demo5 .nq-project-contact__choice input {
  appearance: none;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
body.nq-demo5 .nq-project-contact__choice input:checked {
  border-color: #080a12;
  background: #080a12;
  box-shadow: inset 0 0 0 3px #8d89ff;
}
body.nq-demo5 .nq-project-contact__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 34px;
  min-width: 0;
  margin: 44px 0 38px;
}
body.nq-demo5 .nq-project-contact__field {
  display: block;
  min-width: 0;
}
body.nq-demo5 .nq-project-contact__field > span {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, .48);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .09em;
  line-height: 1.3;
  text-transform: uppercase;
}
body.nq-demo5 .nq-project-contact__field input,
body.nq-demo5 .nq-project-contact__field textarea {
  display: block;
  width: 100%;
  outline: 0;
  color: #ffffff;
  font: inherit;
  transition: border-color .2s ease, background-color .2s ease;
}
/* ΤΑ ΠΕΔΙΑ ΕΙΝΑΙ ΜΟΝΟ ΜΙΑ ΓΡΑΜΜΗ ΑΠΟ ΚΑΤΩ, χωρις κουτι και χωρις φοντο. */
body.nq-demo5 .nq-project-contact__field input {
  height: 40px;
  padding: 0 0 11px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .32);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.nq-demo5 .nq-project-contact__field input:focus {
  border-bottom-color: #aaa7ff;
}
body.nq-demo5 .nq-project-contact__message textarea {
  min-height: 126px;
  padding: 17px 18px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 2px;
  background: rgba(255, 255, 255, .024);
  box-shadow: none;
  resize: vertical;
}
body.nq-demo5 .nq-project-contact__message textarea:focus {
  border-color: #aaa7ff;
  background: rgba(170, 167, 255, .035);
}
body.nq-demo5 .nq-project-contact__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 28px;
}
body.nq-demo5 .nq-project-contact__privacy {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 470px;
  margin: 0;
  color: rgba(255, 255, 255, .55);
  font-size: 11px;
  line-height: 1.5;
  cursor: pointer;
}
body.nq-demo5 .nq-project-contact__privacy input {
  appearance: none;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1px solid #8d89ff;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}
body.nq-demo5 .nq-project-contact__privacy input:checked {
  background: #8d89ff;
  box-shadow: inset 0 0 0 3px #000000;
}
body.nq-demo5 .nq-project-contact__privacy a {
  color: #aaa7ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.nq-demo5 .nq-project-contact__submit {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 50px;
  padding: 0 23px;
  border: 1px solid #8d89ff;
  border-radius: 999px;
  background: #8d89ff;
  color: #080a12;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}
body.nq-demo5 .nq-project-contact__submit:hover {
  transform: translateY(-2px);
  background: #aaa7ff;
}
body.nq-demo5 .nq-project-contact :focus-visible {
  outline: 2px solid #aaa7ff;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
body.nq-demo5 .nq-project-contact__phone::after,
body.nq-demo5 .nq-project-contact__choice,
body.nq-demo5 .nq-project-contact__field input,
body.nq-demo5 .nq-project-contact__field textarea,
body.nq-demo5 .nq-project-contact__submit {
    transition: none;
  }
}

/* ── Responsive: τα σημεια θραυσης του mockup ────────────────────────── */
@media (max-width: 991.98px) {
  body.nq-demo5 .nq-project-contact__shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 0;
  }
  body.nq-demo5 .nq-project-contact__form {
    grid-column: 1;
    grid-row: auto;
    margin-top: 58px;
    padding: 48px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .13);
    border-left: 0;
  }
  body.nq-demo5 .nq-project-contact__head .nqah-h {
    max-width: 13ch;
  }
  body.nq-demo5 .nq-project-contact__lead,
  body.nq-demo5 .nq-project-contact__direct {
    max-width: 560px;
  }
}
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-project-contact {
    padding: 72px 0 94px;
  }
  body.nq-demo5 .nq-project-contact__head .nqah-h {
    max-width: 11ch;
  }
  body.nq-demo5 .nq-project-contact__details {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  body.nq-demo5 .nq-project-contact__actions {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 575.98px) {
  body.nq-demo5 .nq-project-contact__choices {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  body.nq-demo5 .nq-project-contact__choice {
    width: 100%;
    justify-content: flex-start;
  }
  body.nq-demo5 .nq-project-contact__submit {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════
   ΖΩΝΗ: services-list — «Οι Υπηρεσιες Μας» (σελιδα Υπηρεσιες)
   Πηγη: Demo 5 ypiresies.html, μετρημενο σε iframe 1440.

   ΚΑΘΕ ΥΠΗΡΕΣΙΑ ΕΙΝΑΙ ΕΝΑ INFO BOX. Στο mockup η `.nq-svc` εχει ΔΥΟ παιδια:
   `figure.nq-svc-media` και `div.nq-svc-copy` (που περιεχει νουμερο, τιτλο,
   κειμενο, λιστα και κουμπι). Εδω το block δινει ΤΡΙΑ ξεχωριστα παιδια:
     span.nq-ib-num · span.nq-ib-icon-box (η φωτογραφια) · div.nq-ib-body

   🔴 ΓΙΑΤΙ ΟΙ ΓΡΑΜΜΕΣ ΕΙΝΑΙ `1fr auto auto 1fr` ΚΑΙ ΟΧΙ `auto auto`:
   Το νουμερο και το σωμα ειναι ΞΕΧΩΡΙΣΤΑ κελια, ενω στο mockup ειναι μαζι μεσα
   στο ενα `.nq-svc-copy` που καθεται ΚΕΝΤΡΑΡΙΣΜΕΝΟ καθετα (μετρηθηκε y=55 σε
   κελι 464). Με δυο μονο γραμμες, η φωτογραφια που τις γεφυρωνει μοιραζει το
   περισσευμα ΑΝΑΜΕΣΑ τους — δηλαδη θα ανοιγε τεραστιο κενο αναμεσα στο «01»
   και τον τιτλο. Με δυο κενες γραμμες `1fr` πανω και κατω, το περισσευμα παει
   ΕΞΩ απο το ζευγαρι και το ζευγαρι μενει κεντραρισμενο, οπως το mockup.
   ════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-services-list,
body.nq-demo5 .nq-services-list * {
  box-sizing: border-box;
}
body.nq-demo5 .nq-services-list {
  padding: clamp(34px, 4vw, 58px) 0 clamp(88px, 9vw, 140px);
  color: #f4f4f7;
}
body.nq-demo5 .nq-services-list > .row {
  margin-inline: 0;
}
body.nq-demo5 .nq-services-list__inner {
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
}

body.nq-demo5 .nq-svc {
  display: grid;
  grid-template-columns: minmax(280px, .95fr) minmax(0, 1.05fr);
  grid-template-rows: 1fr auto auto 1fr;
  gap: 0 clamp(56px, 9vw, 140px);
  padding: clamp(70px, 7vw, 106px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
body.nq-demo5 .nq-svc:first-child {
  padding-top: 0;
}
body.nq-demo5 .nq-svc--no-border {
  border-bottom: 0;
}
/* Η φωτογραφια γεφυρωνει ολες τις γραμμες και κεντραρεται. Το `min(82%, 500px)`
   ειναι του mockup — η εικονα ΔΕΝ πιανει ολη τη στηλη. */
body.nq-demo5 .nq-svc .nq-ib-icon-box {
  grid-column: 1;
  grid-row: 1 / -1;
  place-self: center;
  width: min(82%, 500px);
  margin: 0;
}
body.nq-demo5 .nq-svc .nq-ib-icon {
  display: block;
  width: 100%;
}
body.nq-demo5 .nq-svc .nq-ib-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* Ο αριθμος ειναι `position: absolute` απο το block — τον επαναφερουμε στη ροη,
   οπως και στα βηματα του «Σχετικα». Εδω ειναι μικρη ετικετα με παυλα μπροστα,
   οχι το μεγαλο νουμερο των αλλων σελιδων του mockup. */
body.nq-demo5 .nq-svc .nq-ib-num {
  position: static;
  display: flex;
  grid-column: 2;
  grid-row: 2;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: #aaa7ff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: normal;
  opacity: 1;
  text-transform: uppercase;
}
body.nq-demo5 .nq-svc .nq-ib-num::before {
  content: "";
  flex: 0 0 34px;
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
body.nq-demo5 .nq-svc .nq-ib-body {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
}
body.nq-demo5 .nq-svc .nq-ib-title {
  max-width: none;
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.02;
  text-align: left;
}
body.nq-demo5 .nq-svc .nq-ib-title-a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
body.nq-demo5 .nq-svc .nq-ib-title-a:hover,
body.nq-demo5 .nq-svc .nq-ib-title-a:focus-visible {
  color: #aaa7ff;
}
body.nq-demo5 .nq-svc .nq-ib-desc {
  margin-top: 24px;
  padding: 0;
}
body.nq-demo5 .nq-svc .nq-ib-desc > p {
  max-width: 50ch;
  margin: 0;
  color: rgba(244, 244, 247, .7);
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.65;
}
/* Οι ετικετες κατω απο το κειμενο: χωρισμενες με καθετη γραμμη, ΟΧΙ pills. */
body.nq-demo5 .nq-svc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
body.nq-demo5 .nq-svc-list li {
  padding: 0 18px;
  border-left: 1px solid rgba(200, 201, 209, .32);
  color: #c8c9d1;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .07em;
  line-height: 1.35;
  text-transform: uppercase;
}
body.nq-demo5 .nq-svc-list li:first-child {
  padding-left: 0;
  border-left: 0;
}
/* Το κουμπι ειναι το ιδιο pill με τα υπολοιπα της σελιδας. Ο κανονας του
   `.nq-ib-readmore` ειναι δεμενος στην καρτα υπηρεσιων της αρχικης, οποτε εδω
   χρειαζεται δικος του — αλλιως βγαινει με τα defaults του block (μπλε, 600). */
body.nq-demo5 .nq-svc .nq-ib-readmore {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: fit-content;
  min-height: 48px;
  margin-top: 34px;
  padding: 0 6px 0 24px;
  border: 2px solid #484848;
  border-radius: 999px;
  background: transparent;
  color: #aaa7ff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  transition: border-color .25s ease, color .25s ease;
}
body.nq-demo5 .nq-svc .nq-ib-readmore:hover,
body.nq-demo5 .nq-svc .nq-ib-readmore:focus-visible {
  border-color: #aaa7ff;
  color: #aaa7ff;
}

@media (max-width: 767.98px) {
  body.nq-demo5 .nq-services-list {
    padding-top: 22px;
  }
  body.nq-demo5 .nq-svc {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 30px;
    /* ΚΑΤΩ ΑΠΟΣΤΑΣΗ 64 → 110 (ιδιοκτητης, 2026-09-08: «μεγαλυτερο
       margin-bottom στο mobile»). ΜΕΤΡΗΜΕΝΟ στα 390: απο το κουμπι «Μαθε
       περισσοτερα» ως την εικονα της επομενης υπηρεσιας ηταν 129px
       (64 κατω + 64 πανω + 1 του διαχωριστικου) — γινεται 175.

       ΓΙΑΤΙ padding ΚΑΙ ΟΧΙ margin, παρα τη διατυπωση: η αποσταση αναμεσα σε
       δυο υπηρεσιες ειναι ΗΔΗ padding εδω, και το διαχωριστικο ζει στο ιδιο
       στοιχειο. Με margin θα εμπαινε ΕΞΩ απο το περιγραμμα, δηλαδη η γραμμη
       θα κολλουσε στο κουμπι αντι να μεινει στη μεση του κενου.

       ΤΟ ΠΑΝΩ 64 ΜΕΝΕΙ, ΚΑΙ Η ΠΡΩΤΗ ΚΑΡΤΑ ΔΕΝ ΕΠΗΡΕΑΖΕΤΑΙ: εχει δικο της
       `padding-top: 0` πιο κατω, που δεν το αγγιζει αυτη η συντομογραφια. */
    padding: 64px 0 110px;
  }
  body.nq-demo5 .nq-svc .nq-ib-icon-box {
    grid-column: 1;
    grid-row: 1;
    width: min(88%, 500px);
  }
  body.nq-demo5 .nq-svc .nq-ib-num {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 12px;
  }
  body.nq-demo5 .nq-svc .nq-ib-body {
    grid-column: 1;
    grid-row: 3;
  }
  body.nq-demo5 .nq-svc .nq-ib-title {
    max-width: 15ch;
  }
  body.nq-demo5 .nq-svc .nq-ib-desc {
    margin-top: 20px;
  }
  body.nq-demo5 .nq-svc-list li {
    padding: 0 12px;
  }
}

/* ════════════════════════════════════════════════════════════════
   ΖΩΝΗ: process-slider — «Η Διαδικασια» (σελιδα Υπηρεσιες)
   Τεσσερις διαφανειες στοιβαγμενες στο ΙΔΙΟ κελι· φαινεται μονο η `.is-active`.
   Η εναλλαγη γινεται απο inline JS της σελιδας (ο Agent 2 περασε τον κωδικα
   του mockup): κουμπια, μετρητης, βελη πληκτρολογιου.

   🔴 ΟΙ ΔΙΑΦΑΝΕΙΕΣ ΚΡΥΒΟΝΤΑΙ ΜΕ visibility + opacity, ΟΧΙ display.
   Ετσι κραταν τη θεση τους στο grid και το υψος του panel δεν αναπηδα σε καθε
   αλλαγη. Το `pointer-events: none` εμποδιζει το κλικ σε κρυφο περιεχομενο.
   ════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-process-slider,
body.nq-demo5 .nq-process-slider * {
  box-sizing: border-box;
}
/* ΤΟ ΠΑΝΩ PADDING ΕΠΕΣΕ ΣΤΑ 30 (ιδιοκτητης, 2026-09-08, δοθηκε ως κανονας):
   `clamp(96px, 10vw, 156px)` → `clamp(30px, 10vw, 30px)`. Ισο min και max
   σημαινει σταθερα 30px — το `10vw` στη μεση δεν παιζει ρολο, μενει ως ιχνος
   της αρχικης μορφης. Ηρθε αμεσως μετα το `mb="129"` στο απο πανω section:
   το κενο μεταφερθηκε απο το padding της ζωνης στο περιθωριο του section, ωστε
   να ρυθμιζεται απο τον builder. Το κατω padding και το border-top μενουν.
   ⚠️ ΤΟ ΚΙΝΗΤΟ ΔΕΝ ΑΛΛΑΖΕΙ: ο κανονας στη γραμμη ~5540 δινει `76px 0 96px`. */
body.nq-demo5 .nq-process-slider {
  /* ΚΑΤΩ PADDING (ιδιοκτητης, 2026-09-08, δοθηκε ως κανονας):
     `clamp(110px, 11vw, 172px)` → `clamp(115px, 15vw, 264px)`.
     Στα 1440 βγαινει 216px (ηταν 158), στα 1760+ κουμπωνει στα 264. */
  padding: clamp(30px, 10vw, 30px) 0 clamp(115px, 15vw, 264px);
  /* Η ΓΡΑΜΜΗ ΕΦΥΓΕ (ιδιοκτητης, 2026-09-08, δοθηκε ως κανονας): `1px` → `0px`.
     Μενει ως `0px solid` οπως δοθηκε, ωστε να ξαναναβει με μια τιμη. */
  border-top: 0px solid rgba(255, 255, 255, .14);
  color: #ffffff;
}
body.nq-demo5 .nq-process-slider > .row {
  margin-inline: 0;
}
body.nq-demo5 .nq-process-slider__inner {
  display: grid;
  /* ΔΕΞΙΑ ΣΤΗΛΗ ΛΙΓΟ ΠΛΑΤΥΤΕΡΗ (ιδιοκτητης, 2026-09-08): `.85fr` → `1fr`.
     ΜΕΤΡΗΜΕΝΟ στα 1440: αριστερα 657 / δεξια 486 → 611 / 532 (+46px στη δεξια).
     Το `gap` ΔΕΝ πειραχτηκε — το πλατος βγαινει απο τη σχεση των fr, οχι απο
     το κενο· μικρωμα του gap θα εσφιγγε τις δυο στηλες αντι να μεγαλωσει η μια. */
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr);
  gap: clamp(64px, 9vw, 144px);
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
}
body.nq-demo5 .nq-process-slider__head {
  grid-column: 1;
  align-self: start;
}
body.nq-demo5 .nq-process-slider__panel {
  grid-column: 2;
  min-width: 0;
}
body.nq-demo5 .nq-process-slider__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 70px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .72);
}
body.nq-demo5 .nq-process-slider__count {
  color: #aaa7ff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
body.nq-demo5 .nq-process-slider__controls {
  display: flex;
  gap: 14px;
}
body.nq-demo5 .nq-process-slider__controls button {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid #aaa7ff;
  border-radius: 50%;
  background: transparent;
  color: #aaa7ff;
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease, transform .22s ease;
}
body.nq-demo5 .nq-process-slider__controls button:hover,
body.nq-demo5 .nq-process-slider__controls button:focus-visible {
  transform: translateY(-2px);
  background: #aaa7ff;
  color: #090a10;
  outline: none;
}
body.nq-demo5 .nq-process-slider__controls i {
  font-size: 23px;
  line-height: 1;
}
body.nq-demo5 .nq-process-slider__slides {
  display: grid;
  padding-top: clamp(28px, 3vw, 42px);
}
body.nq-demo5 .nq-process-slide {
  grid-area: 1 / 1;
  transform: translateY(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .32s ease, transform .32s ease, visibility .32s ease;
}
body.nq-demo5 .nq-process-slide.is-active {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* ΔΟΘΗΚΕ ΩΣ ΚΑΝΟΝΑΣ ΑΠΟ ΤΟΝ ΙΔΙΟΚΤΗΤΗ (2026-09-08). Πιανει ΟΛΟ το slide —
     τιτλο ΚΑΙ παραγραφους — γιατι το `font-weight` κληρονομειται. Ο τιτλος
     εχει δικο του βαρος πιο κατω (`.nq-process-slide h3`) και δεν επηρεαζεται·
     αλλαζουν δηλαδη οι παραγραφοι. */
  font-weight: 600;
}
body.nq-demo5 .nq-process-slide h3 {
  margin: 0 0 24px;
  color: #ffffff;
  font-size: clamp(28px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.04;
}
body.nq-demo5 .nq-process-slide p {
  max-width: 58ch;
  margin: 0 0 16px;
  color: rgba(244, 244, 247, .76);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.58;
}

@media (prefers-reduced-motion: reduce) {
  body.nq-demo5 .nq-process-slide,
  body.nq-demo5 .nq-process-slider__controls button,
  body.nq-demo5 .nq-svc .nq-ib-readmore,
  body.nq-demo5 .nq-svc .nq-ib-title-a {
    transition: none;
  }
}
@media (max-width: 900px) {
  body.nq-demo5 .nq-process-slider__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 58px;
  }
  body.nq-demo5 .nq-process-slider__head,
  body.nq-demo5 .nq-process-slider__panel {
    grid-column: 1;
  }
}
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-process-slider {
    padding: 76px 0 96px;
  }
  body.nq-demo5 .nq-process-slider__inner {
    gap: 42px;
  }
  body.nq-demo5 .nq-process-slider__controls button {
    width: 46px;
    height: 46px;
  }
}

/* ════════════════════════════════════════════════════════════════
   ΤΟ ΔΙΑΚΟΣΜΗΤΙΚΟ ΤΟΥ ΚΑΛΩΔΙΟΥ (σελιδα Υπηρεσιες)
   Στατικο inline SVG αναμεσα στο lead των «Υπηρεσιων Μας» και τη λιστα.
   Ελεγχθηκε πριν μπει: **καμια animation, κανενα will-change, καμια transition**
   σε κανεναν απο τους 15 κανονες — αρα ΔΕΝ χρειαζεται `prefers-reduced-motion`,
   δεν υπαρχει κινηση να μειωθει. Τα τρια gaussian blur κοστιζουν μια φορα στο
   paint, οχι συνεχως.

   🔴 ΤΑ `url(#…)` ΔΕΙΧΝΟΥΝ ΣΕ id ΤΟΥ ΙΔΙΟΥ ΤΟΥ SVG.
   Επτα defs: nq-usb-mouse-cable · -shell · -plug · -wheel · -cable-glow ·
   -shadow · -led-glow. Επαληθευτηκε οτι ο scoper του Raw HTML ΔΕΝ τα μετονομαζει
   και δεν τα διπλασιαζει. Αν ποτε αλλαξουν, το σχεδιο βγαινει ΑΧΡΩΜΟ και μοιαζει
   με σφαλμα CSS ενω δεν ειναι — κοιτα πρωτα τα id.
   ════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-usb-mouse-separator {
  width: min(100%, 1200px);
  margin: clamp(56px, 7vw, 96px) auto 0;
  opacity: .3;
}
body.nq-demo5 .nq-usb-mouse-separator svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
body.nq-demo5 .nq-usb-mouse-separator__wire,
body.nq-demo5 .nq-usb-mouse-separator__glow {
  fill: none;
  stroke: url("#nq-usb-mouse-cable");
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
body.nq-demo5 .nq-usb-mouse-separator__wire {
  stroke-width: 2;
}
body.nq-demo5 .nq-usb-mouse-separator__glow {
  stroke-width: 10;
  opacity: .14;
  filter: url("#nq-usb-mouse-cable-glow");
}
body.nq-demo5 .nq-usb-mouse-separator__usb-metal {
  fill: #0b111a;
  stroke: #68c7ff;
  stroke-width: 1.5;
}
body.nq-demo5 .nq-usb-mouse-separator__usb-body {
  fill: url("#nq-usb-mouse-plug");
  stroke: #7f90ff;
  stroke-width: 1.7;
}
body.nq-demo5 .nq-usb-mouse-separator__usb path {
  fill: none;
  stroke: #8992a6;
  stroke-width: 1.2;
  stroke-linecap: round;
}
body.nq-demo5 .nq-usb-mouse-separator__mouse-shadow {
  fill: #3956ff;
  opacity: .12;
  filter: url("#nq-usb-mouse-shadow");
}
body.nq-demo5 .nq-usb-mouse-separator__mouse-shell {
  fill: url("#nq-usb-mouse-shell");
  stroke: url("#nq-usb-mouse-cable");
  stroke-width: 2;
}
body.nq-demo5 .nq-usb-mouse-separator__mouse-highlight {
  fill: none;
  stroke: #d1d5ff;
  stroke-width: 1;
  opacity: .33;
}
body.nq-demo5 .nq-usb-mouse-separator__mouse-seam {
  fill: none;
  stroke: #858ca0;
  stroke-width: 1.3;
  opacity: .72;
}
body.nq-demo5 .nq-usb-mouse-separator__mouse-slot {
  fill: #06070b;
  stroke: #667086;
  stroke-width: 1;
}
body.nq-demo5 .nq-usb-mouse-separator__mouse-wheel {
  fill: url("#nq-usb-mouse-wheel");
  stroke: #c0b4ff;
  stroke-width: .8;
}
body.nq-demo5 .nq-usb-mouse-separator__mouse-led {
  fill: #8574ff;
  filter: url("#nq-usb-mouse-led-glow");
}

/* ════════════════════════════════════════════════════════════════
   ΖΩΝΗ studio-story — ΔΥΟ ΔΙΟΡΘΩΣΕΙΣ ΣΤΟΙΧΙΣΗΣ (2026-09-07)

   1) ΤΟ ΕΝΩΜΕΝΟ TEXT BLOCK ΕΒΓΑΙΝΕ 12px ΕΞΩ ΚΑΙ ΑΠΟ ΤΙΣ ΔΥΟ ΜΕΡΙΕΣ.
   Ο τιτλος «Εξατομικευμενες Λυσεις» και το κειμενο του μπηκαν σε ΕΝΑ Text Block
   (`.nq-story-lead-group`). Ως `.row` κουβαλα `margin: 0 -12px`, οποτε
   μετρηθηκε L=0 W=377 ενω ΟΛΑ τα αδερφια του — επικεφαλιδα, λιστα, κουμπι —
   ειναι L=12 W=353. Στο mockup ειναι 12..12 οπως τα υπολοιπα.
   Ο ιδιοκτητης το ειδε ως «τα padding αριστερα δεξια στα section».

   2) Η ΣΤΗΛΗ ΤΟΥ ΑΡΙΘΜΟΥ ΕΙΝΑΙ 44px ΣΤΟ ΚΙΝΗΤΟ, ΟΧΙ 56.
   Μετρημενο στο mockup στα 392: `grid-template-columns: 44px 309px`. Με 56 οι
   τιτλοι των βηματων εβγαιναν στα 68 αντι 56 — 12px πιο δεξια απο το mockup.
   ════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-story-lead-group {
  margin-inline: 0;
}
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-story-item {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  /* 🔴 ΣΥΝΕΙΔΗΤΗ ΑΠΟΚΛΙΣΗ ΑΠΟ ΤΟ MOCKUP — ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-07).
     Το mockup εχει τις ζωνες story στα **12px** απο καθε πλευρα, ενω ολες οι
     γειτονικες ζωνες (design-intro, καρτες υπηρεσιων, portfolio, FAQ) ειναι στα
     **24**. Δηλαδη η ασυνεπεια υπαρχει ΚΑΙ στο mockup. Ο ιδιοκτητης το ειδε ως
     «κολλαει δεξια και αριστερα» — και εχει δικιο: καθως κυλας τη σελιδα, αυτη
     η ζωνη πεταγεται 12px πιο εξω απο ολες τις αλλες.
     Τα 12px εδω προστιθενται στα 12 του container και δινουν 24, ιδια με τις
     υπολοιπες. ΜΗΝ το «διορθωσεις» πισω στο mockup. */
  body.nq-demo5 .nq-studio-story > .row,
  body.nq-demo5 .nq-pre-hosting-section > .row {
    padding-inline: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════
   ΚΙΝΗΤΟ — Η ΦΩΤΟΓΡΑΦΙΑ ΤΗΣ ΖΩΝΗΣ «Η ΔΙΑΔΙΚΑΣΙΑ ΜΑΣ» ΦΕΥΓΕΙ (2026-09-07)

   ΔΕΝ ΕΙΝΑΙ ΔΙΚΗ ΜΑΣ ΑΠΟΦΑΣΗ — ΕΙΝΑΙ ΤΟΥ MOCKUP. Μετρημενο στα 392:
     `@media (max-width: 720px) body.nq-front.nq-home
        .nq-studio-story:not(.nq-studio-story--reverse) > .nq-story-stage
        { display: none !important }`
   Δηλαδη στο κινητο το mockup ΚΡΥΒΕΙ τη φωτογραφια αυτης της ζωνης και αφηνει
   μονο το κειμενο. Εμεις τη δειχναμε — 296x296 πανω απο την επικεφαλιδα.
   Ο ιδιοκτητης το ειδε ως «στο mobile φευγει».

   🔴 ΜΟΝΟ Η ΜΗ-ΑΝΤΕΣΤΡΑΜΜΕΝΗ. Το `:not(--reverse)` ειναι του ιδιου του
   mockup: η αντεστραμμενη ζωνη κραταει τη φωτογραφια της. Μην το γενικευσεις.

   ΤΟ ΑΡΝΗΤΙΚΟ ΠΕΡΙΘΩΡΙΟ ΤΗΣ ΑΝΤΕΣΤΡΑΜΜΕΝΗΣ ΜΗΔΕΝΙΖΕΤΑΙ ΕΔΩ: το
   `margin-right: -21px` υπαρχει για να κοβεται η εικονα στο δεξι χειλος της
   ΣΤΗΛΗΣ στο desktop. Σε μια στηλη κινητου την εσπρωχνε στα 3px απο το χειλος
   της οθονης (μετρηθηκε L=84 R=3). Στο κινητο κεντραρεται.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  body.nq-demo5 .nq-studio-story:not(.nq-studio-story--reverse) > .row > .nq-story-stage {
    display: none;
  }
  /* ΤΑ ΤΡΙΑ ΧΑΡΑΚΤΗΡΙΣΤΙΚΑ ΦΕΥΓΟΥΝ ΚΙ ΑΥΤΑ ΣΤΟ ΚΙΝΗΤΟ — ΤΟΥ MOCKUP:
     `@media (max-width: 720px) body.nq-front.nq-home #nq-made-features
        { display: none !important }`
     Κρυβεται ΟΛΟ το section, οχι μονο η ζωνη, ωστε να φυγει μαζι και το
     `margin-bottom: 42px` του. Φευγει και η οριζοντια ραγα, που ζει ΜΕΣΑ στη
     ζωνη — το ιδιο κανει και το mockup. */
  body.nq-demo5 .nq-sec-made-features {
    display: none;
  }
}
@media (max-width: 991px) {
  body.nq-demo5 .nq-studio-story--reverse .nq-story-stage__img img {
    width: 100%;
    margin-inline: auto;
  }
}

/* ════════════════════════════════════════════════════════════════
   ΚΙΝΗΤΟ — ΤΟ ΚΕΝΟ ΑΠΟ ΤΟ ΚΟΥΜΠΙ ΩΣ ΤΟ «Οταν το Site χρειαζεται περισσοτερα»
   Μετρημενο και στα δυο σε πλατος 392, απο το ΚΑΤΩ του κουμπιου ως το ΠΑΝΩ
   της επικεφαλιδας:
       δικο μας  112     mockup  93
   Το κενο βγαινει απο δυο κομματια, και ΤΑ ΔΥΟ ηταν μεγαλυτερα:
       padding-bottom του .nq-story-content   64  εναντι  54
       margin-bottom του section              48  εναντι  39
   Και τα δυο πεφτουν στις τιμες του mockup. Το section κραταει το clamp του
   στο desktop — αλλαζει ΜΟΝΟ κατω απο 768. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-studio-story .nq-story-content {
    padding-bottom: 54px;
  }
  body.nq-demo5 .nq-sec-studio-story {
    margin-bottom: 58.5px;
  }
}

/* ΚΙΝΗΤΟ — Η ΦΩΤΟΓΡΑΦΙΑ ΤΟΥ «Οταν το Site χρειαζεται περισσοτερα» ΚΕΝΤΡΑΡΕΤΑΙ.
   Στο desktop η στηλη της εχει `justify-self: end` και πλατος 250 — σωστο, ειναι
   μικρη εικονα κολλητα δεξια. Σε ΜΙΑ στηλη κινητου το `end` την εσπρωχνε στη
   δεξια ακρη: μετρηθηκε **L=99 R=28** σε πλατος 377, δηλαδη 71px περισσοτερο
   κενο αριστερα. Ο ιδιοκτητης ζητησε να κεντραριστει «οπως το branding» του
   design-intro, που ειναι L=24 R=24 W=329.

   ΚΑΙ ΠΙΟ ΜΕΓΑΛΟ ΚΕΝΟ ΑΠΟ ΤΗ ΛΙΣΤΑ (αιτημα ιδιοκτητη): το `margin-top` ηταν
   16px και το ορατο κενο απο το τελευταιο στοιχειο της λιστας 48. Στα 48px
   margin το κενο γινεται 80. Ισχυει ΜΟΝΟ κατω απο 992 — στο desktop η εικονα
   ειναι διπλα στη λιστα, οχι απο κατω, οποτε δεν εχει νοημα εκει. */
@media (max-width: 991px) {
  body.nq-demo5 .nq-scope-extra .nq-scope-extra__media {
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    margin-top: 48px;
  }
}

/* ΚΙΝΗΤΟ — Η ΦΩΤΟΓΡΑΦΙΑ «Ξενοδοχεια, B&B, Βιλες» ΚΕΝΤΡΑΡΕΤΑΙ, ΔΕΝ ΜΕΓΑΛΩΝΕΙ.
   Ρητο αιτημα ιδιοκτητη (2026-09-07): «στο ιδιο μεγεθος, απλως να κεντραριστει».
   Το `width: 84%` ΜΕΝΕΙ — το ειχε ζητησει ο ιδιος. Το προβλημα ηταν οτι το
   υπολοιπο 16% εμενε ΟΛΟ δεξια: μετρηθηκε L=12 R=68 σε στηλη 353, δηλαδη η
   εικονα κολλουσε αριστερα. Με `margin-inline: auto` το κενο μοιραζεται. */
@media (max-width: 991px) {
  body.nq-demo5 .nq-pre-hosting-section__img img {
    margin-inline: auto;
  }
}

/* ΚΙΝΗΤΟ — ΤΟ ΚΕΝΟ ΚΑΤΩ ΑΠΟ ΤΗ ΦΩΤΟΓΡΑΦΙΑ ΤΟΥ scope-extra.
   Μετρημενα τα κενα αναμεσα στις ενοτητες σε πλατος 392:
     hero 74 · made-corfu 110 · services 160 · design-intro **120** ·
     studio-story 39 · **scope-extra 95** · pre-hosting 86 · hosting 74 ·
     portfolio 134 · scope-banner 110
   Ο ιδιοκτητης εδειξε ως αναφορα το κενο κατω απο τη φωτογραφια του
   design-intro (120) και ζητησε το scope-extra να γινει ιδιο — ηταν 95,
   δηλαδη 25px μικροτερο, και φαινοταν στριμωγμενο επειδη και πανω και κατω
   απο αυτο υπαρχει φωτογραφια. Ισχυει ΜΟΝΟ στο κινητο. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-sec-scope-extra {
    margin-bottom: 180px;
  }
}

/* ΚΕΝΟ ΠΑΝΩ ΑΠΟ ΚΑΘΕ ΕΙΚΟΝΑ SINGLE IMAGE — ζητηθηκε 2026-09-07.
   Ο ιδιοκτητης εδωσε `.nqce-single_image .figure-img { padding-top: 35px }`.

   ΧΩΡΙΣ !important: μετρηθηκε `padding-top: 0px` computed και ΚΑΝΕΝΑΣ κανονας
   δεν οριζει padding στο .figure-img (το Bootstrap δινει μονο margin-bottom
   και line-height). Η αρχικη τιμη δεν χρειαζεται νικη ειδικοτητας.

   ΣΚΟΠΑΡΙΣΜΕΝΟ ΣΤΟ body.nq-demo5: η κλαση .nqce-single_image ειναι του custom
   element, αρα ασκοπαριστη θα επιανε ΚΑΘΕ Single Image ολου του site — και την
   παλια αρχικη. Ετσι πιανει τις τρεις σελιδες Demo 5 και μονο.

   ΤΟ padding ΜΕΓΑΛΩΝΕΙ ΤΟ ΥΨΟΣ: το <img> ειναι border-box, οποτε το πλατος
   (84% / 88% οπου οριζεται) δεν αλλαζει, αλλα το συνολικο υψος +35 και η
   εικονα ζωγραφιζεται 35px χαμηλοτερα. Επηρεαζονται και οι πεντε εικονες της
   αρχικης: design-intro, studio-story, scope-extra, pre-hosting, hosting-story. */
body.nq-demo5 .nqce-single_image .figure-img {
  padding-top: 35px;
}

/* 🔴 ΔΥΟ ΕΙΚΟΝΕΣ ΕΧΟΥΝ ΚΛΕΙΔΩΜΕΝΗ ΑΝΑΛΟΓΙΑ ΚΑΙ ΤΟ padding ΤΙΣ ΕΚΟΒΕ.
   Μετρημενο: design-intro και scope-extra ερχονται με `aspect-ratio: 1 / 1`
   απο ρυθμιση του block. Σε border-box με κλειδωμενη αναλογια, το padding ΔΕΝ
   μεγαλωνει το κουτι — τρωει το περιεχομενο. Με `object-fit: cover` που εχουν
   και οι δυο, αυτο σημαινει ΚΟΨΙΜΟ της φωτογραφιας:
     design-intro  συνολικο υψος 395 → 395, εικονα 395 → 360
     scope-extra   συνολικο υψος 250 → 250, εικονα 250 → 215
   Οι αλλες τρεις (aspect-ratio: auto) μεγαλωσαν κανονικα κατα 35:
     studio-story 518→553 · pre-hosting 436→471 · hosting-story 456→491

   Για τις δυο κλειδωμενες, το ιδιο οπτικο αποτελεσμα το δινει το ΠΕΡΙΘΩΡΙΟ:
   κατεβαζει την εικονα 35px χωρις να πειραξει ουτε το τετραγωνο ουτε το καδρο. */
body.nq-demo5 .nq-design-intro__img .figure-img,
body.nq-demo5 .nq-scope-extra__img .figure-img {
  padding-top: 0;
  margin-top: 35px;
}

/* 🔴 ΤΟ -100px ΤΗΣ ΑΝΤΕΣΤΡΑΜΜΕΝΗΣ ΖΩΝΗΣ ΕΙΝΑΙ ΜΟΝΟ ΓΙΑ ΟΘΟΝΗ.
   Ζητηθηκε (2026-09-07) «μεγαλυτερο κενο μεταξυ κουμπι και φωτογραφια» στο
   hosting-story. Δεν ελειπε αποσταση — ΥΠΗΡΧΕ ΕΠΙΚΑΛΥΨΗ.

   Το `margin-top: -100px` στο .nq-story-stage__img ειναι αντισταθμιση του
   ΚΑΘΕΤΟΥ ΚΕΝΤΡΑΡΙΣΜΑΤΟΣ σε πλεγμα δυο στηλων: εκει ανεβαζει την εικονα 50px
   απο το κεντρο (σε flex με align-items:center η μετατοπιση ειναι η μιση).
   Στο κινητο ομως το πλεγμα γινεται ΜΙΑ στηλη (κανονας ≤991), αρα δεν υπαρχει
   κεντραρισμα να αντισταθμιστει — το -100 απλα τραβαει τη φωτογραφια πανω,
   ΜΕΣΑ στο κουμπι. Μετρημενο στα 392:
     κουμπι bottom 7214 · στηλη εικονας top 7268 · κουτι εικονας top 7168
     αρα η φωτογραφια ξεκιναγε 11px ΠΑΝΩ απο το κατω μερος του κουμπιου.
   Φαινοταν σαν μικρο κενο μονο επειδη το `object-fit: contain` αφηνει διαφανη
   περιοχη γυρω απο το σχεδιο — το κενο ηταν του αρχειου, οχι της διαταξης.

   Με μηδενισμο, το κενο γινεται 54px ως το κουτι + 35px padding = 89px ως τη
   φωτογραφια. Το -100 μενει ακεραιο στην οθονη. */
@media (max-width: 991px) {
  body.nq-demo5 .nq-studio-story--reverse .nq-story-stage__img {
    margin-top: 0;
  }
}

/* 🔴 PORTFOLIO — ΜΙΑ ΜΕΓΑΛΗ ΠΕΡΙΓΡΑΦΗ ΜΕΓΑΛΩΝΕΙ ΚΑΙ ΤΑ ΔΕΚΑΤΕΣΣΕΡΑ SLIDES.
   Ο ιδιοκτητης ανεφερε οτι το carousel φαινεται πολυ ψηλο στο κινητο.
   Η εικονα ΔΕΝ ειναι μεγαλυτερη — ειναι ΜΙΚΡΟΤΕΡΗ (visual 320 εναντι 343 του
   mockup). Ψηλοτερο ειναι το SLIDE, και ο λογος ειναι το κειμενο.

   Ο .nq-portfolio-track ειναι flex, οποτε καθε slide παιρνει το υψος του πιο
   ψηλου. Οι περιγραφες ερχονται απο τα excerpt των Εργων και ποικιλλουν:
   μετρημενες παραγραφοι στα 390 (line-height 29.75) — 89px = 3 σειρες σε 10
   slides, αλλα 149 / 179 / 208 (5, 6, 7 σειρες) σε τεσσερα. Η ψηλοτερη σειρα
   βγαινει 719 και η κοντοτερη 564: **155px διαφορα**, που πληρωνεται ως κενο
   κατω απο ΟΛΕΣ τις εικονες. Το mockup δεν το δειχνει γιατι εχει σταθερα,
   κοντα κειμενα.

   ΤΟ ΟΡΙΟ ΤΩΝ 4 ΣΕΙΡΩΝ ΔΕΝ ΕΙΝΑΙ ΑΥΘΑΙΡΕΤΟ — δοκιμαστηκαν ολες στα 390:
     τωρα (6+) carousel 763 / slide 695
     clamp 3        674 / 606   (19px ΚΑΤΩ απο το mockup)
     clamp 4        704 / 636   ← 11px πανω, το πιο κοντινο
     clamp 5        734 / 666
     mockup         693 / 625
   Οι 4 σειρες δινουν τη μικροτερη αποκλιση ΚΑΙ κραταν περισσοτερο κειμενο.

   ΩΣ ΤΑ 991, ΟΧΙ ΜΟΝΟ ΚΙΝΗΤΟ: στα 768 ισχυει το ιδιο (σειρες 726 και 571).
   Στα 992 το slide γινεται διστηλο και ΟΛΕΣ οι σειρες βγαινουν 470 — την
   ταση την οριζει η εικονα, οχι το κειμενο, οποτε εκει ο κανονας περισσευει.

   ΕΝΑΛΛΑΚΤΙΚΗ ΧΩΡΙΣ CSS: να κονταινουν τα τεσσερα μεγαλα excerpt στα Εργα
   (Cruises Corfu 235 χαρ., Παιχνιδοχωρος 222, Almyra Yachts 160, +1 με 151).
   Τοτε ο κανονας δεν χρειαζεται καθολου. */
@media (max-width: 991.98px) {
  body.nq-demo5 .nq-portfolio-info p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* 🔴 ΤΟ min-height ΛΥΝΕΙ ΤΟ ΝΕΚΡΟ ΚΕΝΟ ΚΑΤΩ ΑΠΟ ΤΗΝ ΕΙΚΟΝΑ.
       Ζητηθηκε (2026-09-07) «τα κουμπια να ερθουν κατω απο τη φωτογραφια,
       μικρυνε το κενο». Το κενο εικονα→κουμπια ηταν 58 στο κινητο και 28 στην
       οθονη — 30 απο αυτα ηταν ΝΕΚΡΟΣ ΧΩΡΟΣ μεσα στο viewport, οχι περιθωριο.

       ΜΕ ΤΟ line-clamp ΟΙ ΠΕΡΙΓΡΑΦΕΣ ΕΧΟΥΝ ΜΟΝΟ ΔΥΟ ΥΨΗ: 89 (3 σειρες) η 119
       (4 σειρες) — μετρημενο σε 360/375/390/430/600/767, με σταθερα 17px και
       line-height 29.75. Ο τιτλος ειναι ΠΑΝΤΑ 18. Αρα ολη η διασπορα ειναι
       **ακριβως μια σειρα, 30px**, και τοσο ακριβως ηταν και το νεκρο κενο:
       ο flex track τεντωνει τα 14 slides στο ψηλοτερο, και οσα εχουν 3σειρη
       περιγραφη πληρωνουν τη διαφορα ως κενο ΚΑΤΩ απο την εικονα — που πλεον
       δεν μπορει να το απορροφησει, εχει σταθερη αναλογια 4:5.

       Με ολες τις περιγραφες κλειδωμενες στις 4 σειρες η διασπορα γινεται 0
       και το κενο πεφτει στα 28 — ΙΔΙΟ με την οθονη, χωρις να πειραχτει το
       `margin-top: 28px` των controls, που ειναι μετρηση του mockup.

       ΤΟ `align-items: flex-start` ΣΤΟΝ TRACK ΔΕΝ ΤΟ ΛΥΝΕΙ — δοκιμαστηκε
       ζωντανα: το slide επεσε 755 → 725, αλλα ο track και το viewport εμειναν
       755 και το κενο εμεινε 58. Σε flex ΣΕΙΡΑ το υψος του δοχειου το οριζει
       το ψηλοτερο παιδι ασχετα με το align-items· το νεκρο κενο απλα
       μετακομιζει απο το slide στο viewport.

       ΤΟ 4lh ΕΙΝΑΙ ΤΟ ΣΩΣΤΟ, ΤΟ 119px ΕΙΝΑΙ ΤΟ ΔΙΧΤΥ: η μοναδα `lh` θελει
       Safari 16.4+. Οπου δεν υποστηριζεται μενει το 119, που ειναι η ιδια
       τιμη (4 × 29.75) οσο το line-height δεν αλλαζει. */
    min-height: 119px;
    min-height: 4lh;
  }
}

/* PORTFOLIO — ΚΑΤΑΚΟΡΥΦΗ (PORTRAIT) ΕΙΚΟΝΑ ΣΤΟ ΚΙΝΗΤΟ (ιδιοκτητης, 2026-09-07).

   ΓΙΑΤΙ ΔΕΝ ΓΙΝΟΤΑΝ ΠΟΤΕ ΚΑΤΑΚΟΡΥΦΗ: το παραθυρο εχει
   `height: clamp(320px, 42.5vw, 544px)`. Στα 390 το 42.5vw δινει 166, αρα
   κολλαει ΠΑΝΤΑ στο δαπεδο των 320. Με πλατος 351 (μετρημενο) η αναλογια
   βγαινει 351×320 — σχεδον ΤΕΤΡΑΓΩΝΟ. Οσο μικραινει η οθονη τοσο πιο πλατια
   δειχνει, γιατι το υψος ειναι καρφωτο ενω το πλατος συρρικνωνεται.

   Η ΛΥΣΗ ΕΙΝΑΙ ΑΝΑΛΟΓΙΑ, ΟΧΙ ΜΕΓΑΛΥΤΕΡΟ ΔΑΠΕΔΟ: με `aspect-ratio` το υψος
   ακολουθει το πλατος σε καθε συσκευη. Μετρημενες επιλογες σε πλατος 351:
     4/5 → 439 · 3/4 → 468 · 2/3 → 527 · 5/6 → 421 · 1/1 → 351
   Μπηκε πρωτα 3/4 (468). Ο ιδιοκτητης το ειδε και ζητησε ενα σκαλι πιο
   χαμηλα, οχι επιστροφη στο παλιο — αρα 4/5 (439, −29px).

   🔴 ΤΟ `height: auto` ΕΙΝΑΙ ΑΠΑΡΑΙΤΗΤΟ — χωρις αυτο το clamp των 320px
   παραμενει και το aspect-ratio αγνοειται (ρητο υψος νικαει την αναλογια).
   Το `overflow: hidden` ΜΕΝΕΙ: η εικονα ειναι πανυψηλη και το JS την κυλαει
   με transform μεσα σε αυτο το παραθυρο (βλ. σημειο 1 πιο πανω).

   ΠΑΡΕΝΕΡΓΕΙΑ: ψηλοτερο παραθυρο = ψηλοτερο slide. Στα 390 το slide πηγαινει
   636 → 755 και το carousel 704 → 823. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-portfolio-visual {
    height: auto;
    aspect-ratio: 4 / 5;
  }
}

/* ΚΙΝΗΤΟ — Η ΠΕΡΙΓΡΑΦΗ ΤΟΥ ΕΡΓΟΥ ΚΡΥΒΕΤΑΙ ΕΝΤΕΛΩΣ (ιδιοκτητης, 2026-09-07):
   μενουν ο μετρητης «01 / 14», ο τιτλος και ο συνδεσμος «Δες το site».

   ΤΕΧΝΟΛΟΓΙΕΣ ΔΕΝ ΥΠΑΡΧΟΥΝ ΣΕ ΑΥΤΟ ΤΟ SLIDESHOW. Το block portfolio_slider
   εχει πεδιο `tags` ανα slide αλλα ΔΕΝ το ρενταρει — δεν υπαρχει στοιχειο να
   κρυφτει. Οι «τεχνολογιες» που φαινονται αλλου ειναι τα .nq-ib-tags των
   καρτων υπηρεσιων, αλλη ζωνη.

   ΤΟ display: none, ΟΧΙ visibility: hidden — το δευτερο κρατaει τον χωρο και
   δεν θα ελυνε τιποτα.

   \U0001f534 ΕΡΧΕΤΑΙ ΜΕΤΑ ΤΟ ΜΠΛΟΚ ΤΩΝ ≤991.98 ΚΑΙ ΓΙ' ΑΥΤΟ ΝΙΚΑΕΙ: ιδιος
   ακριβως selector, ιδια ειδικοτητα — αποφασιζει η σειρα. Αν κατεβει το ενα
   πιο πανω απο το αλλο, το `display: -webkit-box` ξαναεμφανιζει το κειμενο.
   Το line-clamp ΜΕΝΕΙ γιατι στα 768–991 η περιγραφη εξακολουθει να φαινεται. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-portfolio-info p {
    display: none;
  }
}

/* ΚΙΝΗΤΟ — ΤΟ ΚΕΝΟ ΤΙΤΛΟΥ → «Δες το site» (ιδιοκτητης, 2026-09-07).
   Το `margin-top: 36px` του συνδεσμου ηταν σωστο ΟΣΟ αναμεσα τους καθοταν η
   περιγραφη: χωριζε δυο μπλοκ κειμενου. Τωρα που η περιγραφη κρυβεται στο
   κινητο, ο συνδεσμος κρεμοταν 36px κατω απο τον τιτλο χωρις λογο.
   Μετρημενος ο ρυθμος της στηλης στα 390: μετρητης → τιτλος 24, τιτλος →
   συνδεσμος 36. Πηγαινει 16, ωστε το κενο ΚΑΤΩ απο τον τιτλο να ειναι
   μικροτερο απο το κενο ΠΑΝΩ του και ο συνδεσμος να δενει με τον τιτλο.
   ΜΟΝΟ ≤767.98: απο 768 και πανω η περιγραφη υπαρχει και τα 36 στεκουν. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-portfolio-site-link {
    margin-top: 16px;
  }
}

/* ΚΙΝΗΤΟ — ΤΙΤΛΟΣ ΑΡΙΣΤΕΡΑ ΚΑΙ «Δες το site» ΤΕΡΜΑ ΔΕΞΙΑ, ΣΤΗΝ ΙΔΙΑ ΓΡΑΜΜΗ
   (ιδιοκτητης, 2026-09-07). Πριν ησαν το ενα κατω απο το αλλο.

   ΓΙΑΤΙ GRID ΚΑΙ ΟΧΙ FLEX: ο μετρητης «01 / 14» ειναι ΑΔΕΛΦΟΣ των δυο, οχι
   γονιος τους. Με flex θα επεφταν και τα τρια στην ιδια σειρα. Το grid
   επιτρεπει στον μετρητη να πιασει ολο το πλατος (1 / -1) και να μεινει πανω,
   και βαζει τιτλο + συνδεσμο στη ΔΕΥΤΕΡΗ σειρα, σε δυο στηλες.

   🔴 Η ΔΕΥΤΕΡΗ ΣΕΙΡΑ ΕΧΕΙ ΚΑΤΩΤΑΤΟ ΥΨΟΣ 37px ΓΙΑ ΣΟΒΑΡΟ ΛΟΓΟ.
   Η στηλη του τιτλου στενευει (216px στα 390 αντι για 327), οποτε οι μακρυοι
   τιτλοι τυλιγονται σε δευτερη σειρα: 18px οι περισσοτεροι, 37px ο «Gerasimos
   Apartments Marathias», και στα 360 τρεις ακομη. Ο flex track τεντωνει ολα τα
   slides στο ψηλοτερο, αρα ΚΑΘΕ διαφορα υψους ξαναγεννα τον νεκρο χωρο κατω
   απο τη φωτογραφια — το ιδιο ακριβως προβλημα που μολις λυθηκε με την
   περιγραφη. Με σταθερη σειρα 37 (= 2 × 18.36 line-height) το κουτι ειναι
   παντα ιδιο, ο μονογραμμος τιτλος **κεντραρεται** μεσα του (align-self) και
   πεφτει στην ιδια οπτικη γραμμη με τον συνδεσμο.
   Το `-webkit-line-clamp: 2` κλειδωνει το ανω οριο: χωρις αυτο, στα 360 ενας
   τιτλος πηγαινε σε ΤΡΕΙΣ σειρες (55px) και η διαφορα επεστρεφε.

   ΤΟ «ΤΕΡΜΑ ΔΕΞΙΑ» ΕΙΝΑΙ ΤΟ ΟΡΙΟ ΤΟΥ ΚΕΙΜΕΝΟΥ, ΟΧΙ ΤΗΣ ΟΘΟΝΗΣ: ο συνδεσμος
   ευθυγραμμιζεται με τη δεξια εσοχη των 24px, οσο ακριβως ειναι και η αριστερη
   εσοχη του τιτλου. Μετρημενο στα 390: τιτλος αρχιζει στο 24, συνδεσμος
   τελειωνει στο 351 = 375 − 24.

   ΜΟΝΟ ≤767.98: απο 768 και πανω η περιγραφη εμφανιζεται ξανα αναμεσα τους
   και η στηλη ξαναγινει κανονικη στοιβα. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-portfolio-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(37px, auto);
    column-gap: 16px;
  }
  body.nq-demo5 .nq-portfolio-number {
    grid-column: 1 / -1;
  }
  body.nq-demo5 .nq-portfolio-info h3 {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body.nq-demo5 .nq-portfolio-site-link {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    margin-top: 0;
  }
}

/* ΚΙΝΗΤΟ — ΤΟ ΚΕΝΟ ΜΕΤΡΗΤΗ «01 / 14» → ΤΙΤΛΟΥ (ιδιοκτητης, 2026-09-07).
   Το `margin-bottom: 24px` του μετρητη ειναι η τιμη ΟΛΩΝ των πλατων. Στο
   κινητο ομως ο τιτλος καθεται ΚΕΝΤΡΑΡΙΣΜΕΝΟΣ σε σειρα 37px (βλ. τον κανονα
   της ιδιας γραμμης πιο πανω), οποτε οταν ειναι μονοσειρος προστιθενται ~9px
   κενου απο το κεντραρισμα: το ΟΠΤΙΚΟ κενο εβγαινε 33, οχι 24 — μετρημενο.
   Γι' αυτο εδειχνε μεγαλυτερο απ' οσο ελεγε η τιμη. Πηγε πρωτα 14 (~23
   οπτικα) και μετα, με δευτερο αιτημα, **6** — δηλαδη ~15 οπτικα στα
   μονοσειρα ονοματα και 6 στα δισειρα. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-portfolio-number {
    margin-bottom: 6px;
  }
}

/* ΚΙΝΗΤΟ — ΟΙ ΠΛΑΪΝΕΣ ΕΣΟΧΕΣ ΜΕΣΑ ΣΤΟ BANNER (ιδιοκτητης, 2026-09-07).
   Η καρτα εχει `padding-inline: clamp(42px, 5vw, 72px)`. Στα 390 το 5vw δινει
   19.5, αρα κολλαει στο ΔΑΠΕΔΟ των 42 — τιμη φτιαγμενη για την οθονη, οπου η
   καρτα ειναι πλατια. Σε στενη οθονη τα 42+42 τρωνε 84px απο το κειμενο.
   Παει 24, οσο ακριβως ειναι η εσοχη του κειμενου σε ΟΛΕΣ τις αλλες ζωνες της
   σελιδας στο κινητο (portfolio, story, pre-hosting, faq) — ετσι το banner
   ευθυγραμμιζεται μαζι τους αντι να ειναι πιο μεσα.
   ΜΟΝΟ ≤767.98: πανω απο εκει το clamp δουλευει κανονικα και δεν πειραζεται. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-scope-head {
    padding-inline: 24px;
  }
}

/* ΚΙΝΗΤΟ — ΟΛΟ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ BANNER ΚΕΝΤΡΑΡΙΣΜΕΝΟ (ιδιοκτητης,
   2026-09-07): eyebrow, τιτλος και κουμπι.

   ΔΥΟ ΞΕΧΩΡΙΣΤΑ ΠΡΑΓΜΑΤΑ, ΓΙ' ΑΥΤΟ ΔΥΟ ΚΑΝΟΝΕΣ:
   · `text-align: center` κεντραρει ΤΟ ΚΕΙΜΕΝΟ μεσα στα κουτια του (eyebrow,
     τιτλος). Κληρονομειται, οποτε αρκει μια φορα στο __inner.
   · ΤΟ ΚΟΥΜΠΙ ΔΕΝ ΠΙΑΝΕΤΑΙ ΑΠΟ ΤΟ text-align: ειναι στοιχειο του grid και η
     θεση του οριζεται απο `place-self: start` (κανονας των ≤991). Το
     text-align θα κεντραρε μονο το κειμενο ΜΕΣΑ στο κουμπι, οχι το κουμπι.
     Θελει ρητο `place-self: center`.

   ΜΟΝΟ ≤767.98: στην οθονη η καρτα ειναι πλεγμα δυο στηλων (κειμενο αριστερα,
   κουμπι δεξια) και το κεντραρισμα θα εσπαγε τη σχεση των δυο. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-scope-head .nq-scope-head__inner {
    text-align: center;
  }
  /* 🔴 ΤΟ .nqah ΚΟΒΕΙ ΤΗΝ ΚΛΗΡΟΝΟΜΙΑ — ΜΕΤΡΗΜΕΝΟ, ΟΧΙ ΥΠΟΘΕΣΗ.
     Το `text-align` στο __inner εβγαινε `center` κανονικα, αλλα ο τιτλος
     εμενε αριστερα: αναμεσα τους μεσολαβει η ριζα του Advanced Heading
     (`div.nqah`) που οριζει ΔΙΚΟ ΤΗΣ `text-align: left`. Το text-align
     κληρονομειται, αρα ΣΤΑΜΑΤΑΕΙ σε οποιονδηποτε προγονο το ξαναοριζει.
     Η αλυσιδα ειναι: __inner (center) → .nqah (left ✗) → .nqah-main → h2.
     Με το .nqah σε center, κεντραρονται ΚΑΙ το eyebrow ΚΑΙ ο τιτλος — ειναι
     και τα δυο παιδια του ιδιου block. */
  body.nq-demo5 .nq-scope-head .nqah {
    text-align: center;
  }
  /* ΤΟ ΚΟΥΜΠΙ ΘΕΛΕΙ ΚΑΙ ΤΑ ΔΥΟ. Το `place-self` κεντραρει το ΚΟΥΤΙ του μεσα
     στο grid· το `text-align` κεντραρει το ΚΟΥΜΠΙ μεσα στο κουτι. Με μονο το
     πρωτο εμενε αριστερα (μετρημενο 24 / 71), γιατι το wrapper κραταει ολο το
     πλατος και η κλαση `nq-al-left` του block το στοιχιζει αριστερα. */
  /* 🔴 ΤΟ ΚΕΝΤΡΑΡΙΣΜΑ ΓΙΝΕΤΑΙ ΜΕ margin: auto, ΟΧΙ ΜΕ justify-self.
     Το `place-self: center` ΕΦΑΡΜΟΖΕΤΑΙ — μετρηθηκε `justify-self: center`
     computed — αλλα ΔΕΝ μετακινησε το κουμπι: το wrapper εμενε στην αρχη της
     γραμμης (36..292 μεσα σε γραμμη 36..339), δηλαδη αριστ 24 / δεξ 71.
     Τα περιθωρια ηταν κανονικα 0, οποτε δεν επροκειτο για auto-margin που
     νικαει το justify-self. Με `margin-inline: auto` βγηκε 48 / 48 αμεσως.
     Κραταμε ΚΑΙ τα δυο: το place-self κανει το κουτι shrink-to-fit (256 αντι
     303) — χωρις αυτο, το margin: auto δεν θα ειχε τι να μοιρασει. */
  body.nq-demo5 .nq-scope-btn {
    place-self: center;
    margin-inline: auto;
    text-align: center;
  }
}

/* ΚΙΝΗΤΟ — ΤΟ ΚΟΥΜΠΙ ΤΟΥ BANNER ΜΙΚΡΑΙΝΕΙ ΑΡΚΕΤΑ (ιδιοκτητης, 2026-09-07).
   Μετρημενο πριν: 256×58, γραμματα 18/600, gap 26, κυκλος 36, padding
   10px 14px 10px 22px. Ειναι το μεγεθος της ΟΘΟΝΗΣ, οπου η καρτα ειναι 1116
   πλατια· σε καρτα 351 επιανε τα 3/4 του πλατους και κυριαρχουσε.

   ΟΛΑ ΤΑ ΜΕΓΕΘΗ ΜΙΚΡΑΙΝΟΥΝ ΜΑΖΙ, ΟΧΙ ΜΟΝΟ ΤΟ ΥΨΟΣ: αν εμενε το font 18 και
   ο κυκλος 36 μεσα σε υψος 46, το κουμπι θα εδειχνε στριμωγμενο αντι για
   μικροτερο. Η αναλογια κρατιεται — καθε τιμη περιπου στο 80% της αρχικης.

   ΤΟ padding ΕΙΝΑΙ ΑΣΥΜΜΕΤΡΟ ΕΠΙΤΗΔΕΣ (18 αριστερα, 8 δεξια): ο κυκλος
   καθεται σχεδον στην ακρη, οπως ακριβως και στην οθονη (22 / 14). Δεν ειναι
   λαθος — αν γινει συμμετρικο, το βελακι απομακρυνεται απο το χειλος.

   ΜΟΝΟ ≤767.98. Το hover και τα χρωματα δεν αγγιζονται. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-scope-btn .nq-btn {
    height: 46px;
    gap: 12px;
    padding: 6px 8px 6px 18px;
    font-size: 15px;
  }
  body.nq-demo5 .nq-scope-btn .nq-btn-ico {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }
}

/* ΤΟ ΦΟΝΤΟ ΚΑΙ ΤΟ ΠΕΡΙΓΡΑΜΜΑ ΤΟΥ ΚΟΥΜΠΙΟΥ ΤΟΥ BANNER ΖΟΥΝ ΣΤΟ BLOCK.
   Ειχα γραψει εδω `background-color: #544781` και `border: 0` (2026-09-07).
   Ο Agent 2 τα μετεφερε στα πεδια: `bg_color: #544781` με `hover_bg` ιδιο, και
   το `__design` του block αδειασε ({}), οποτε ΔΕΝ υπαρχει πια inline border να
   νικηθει. Οι δικοι μου κανονες ΞΗΛΩΘΗΚΑΝ ως διπλογραφη.
   ΑΝ ΞΑΝΑΕΜΦΑΝΙΣΤΕΙ ΠΕΡΙΓΡΑΜΜΑ, ΜΗΝ ΤΟ ΓΡΑΨΕΙΣ ΕΔΩ: ερχεται inline απο το
   block και δεν νικιεται χωρις !important — η διορθωση ειναι στον Manager.
   Ομοιως το χρωμα κειμενου (`title_color`) ειναι πεδιο, οχι CSS. */

/* ΚΙΝΗΤΟ — ΚΕΝΟ ΤΙΤΛΟΥ → ΠΕΡΙΓΡΑΦΗΣ ΣΤΟ FAQ (ιδιοκτητης, 2026-09-07).
   Μετρημενο πριν: 56px στα 390, ενω στην οθονη ειναι 24. ΔΥΟ ΠΗΓΕΣ, οχι μια:
     · `margin: 24px 0 0` του ιδιου του lead — ισχυει παντου
     · `row-gap: 32px` του πλεγματος .nq-home-faq__inner ΜΟΝΟ στο κινητο
       (στην οθονη το row-gap ειναι 0· εκει οι δυο καθονται σε διαφορετικες
       στηλες και η αποσταση ερχεται μονο απο το margin)
   Μηδενιζεται το margin και μενει το row-gap: 56 → 32.

   🔴 ΓΙΑΤΙ ΔΕΝ ΠΕΙΡΑΖΩ ΤΟ row-gap: το ιδιο κενο χωριζει και την
   περιγραφη απο τη ΛΙΣΤΑ των ερωτησεων. Μικραινοντας το, θα κολλαγε η λιστα.
   Αν χρειαστει να παει κατω απο 32, θελει ξεχωριστη τιμη ανα σειρα. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-home-faq__lead {
    margin-top: 0;
  }
  /* ΔΕΥΤΕΡΟ ΠΕΡΑΣΜΑ: ο μηδενισμος του margin το πηγε 56 → 32 και ζητηθηκε κι
     αλλο. Τα 32 ειναι πλεον ΟΛΑ row-gap, οποτε πεφτει σε 18.
     ΤΟ row-gap ΧΩΡΙΖΕΙ ΚΑΙ ΤΗ ΛΙΣΤΑ ΑΠΟ ΤΗΝ ΠΕΡΙΓΡΑΦΗ: σκετη μειωση θα
     κολλαγε τις ερωτησεις. Γι' αυτο η λιστα παιρνει πισω τη διαφορα (18 + 14
     = 32) και μενει ακριβως εκει που ηταν. Μετρημενο: τιτλος→περιγραφη 18,
     περιγραφη→λιστα 32. */
  body.nq-demo5 .nq-home-faq__inner {
    row-gap: 18px;
  }
  body.nq-demo5 .nq-faq-list {
    margin-top: 14px;
  }
}

/* ΚΙΝΗΤΟ — ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ HERO ΑΝΕΒΑΙΝΕΙ 12px (ιδιοκτητης, 2026-09-07):
   ζητηθηκε ο υποτιτλος «WEB DESIGN · ΛΕΥΚΙΜΜΗ ΚΕΡΚΥΡΑΣ» λιγο πιο πανω.

   🔴 ΑΠΟΚΛΙΝΕΙ ΑΠΟ ΤΟ MOCKUP ΕΠΙΤΗΔΕΣ. Μετρηθηκε ζωντανα στα 390 και στα δυο:
     mockup   ενοτητα top 65 · padding-top 72 · υποτιτλος top 146
     δικο μας ενοτητα top 65 · padding-top 72 · υποτιτλος top 146
   Δηλαδη ημασταν ΑΚΡΙΒΩΣ πανω στο mockup — δεν διορθωνεται λαθος, αλλαζει
   προτιμηση. Γι' αυτο γραφεται εδω ως override και ΔΕΝ πειραζεται η βαση.

   ΑΝΕΒΑΙΝΕΙ ΟΛΟ ΤΟ ΜΠΛΟΚ, ΟΧΙ ΜΟΝΟ Ο ΥΠΟΤΙΤΛΟΣ: μειωση του padding-top
   μετακινει μαζι τιτλο, κειμενο και κουμπια, ωστε οι μεταξυ τους αποστασεις
   να μεινουν ιδιες. Αν χρειαστει να ανεβει ΜΟΝΟ ο υποτιτλος — δηλαδη να
   ΜΕΓΑΛΩΣΕΙ το κενο του με τον τιτλο — αυτο ΔΕΝ γινεται με αρνητικο
   margin-top (θα τραβουσε και τα απο κατω), θελει `position: relative` με
   `top`, που δεν πειραζει τη ροη.

   ΤΟ padding-bottom ΔΕΝ ΑΓΓΙΖΕΤΑΙ: το κατω κενο του hero το οριζει το
   `margin-bottom: 74px` της ενοτητας, μετρημενο απο το mockup. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-hero {
    padding-top: 60px;
  }
}

/* ΚΙΝΗΤΟ — ΜΟΝΟ Ο ΥΠΟΤΙΤΛΟΣ ΤΟΥ HERO ΑΝΕΒΑΙΝΕΙ (ιδιοκτητης, 2026-09-07).
   Η προηγουμενη μειωση του padding-top ανεβασε ΟΛΟ το μπλοκ μαζι, οποτε η
   σχεση υποτιτλου-τιτλου εμεινε ιδια και δεν φανηκε. Εδω ανεβαινει ΜΟΝΟ αυτος.

   🔴 `position: relative` + `top`, ΟΧΙ αρνητικο margin-top: το margin θα
   τραβουσε πανω και τον τιτλο και ολα τα απο κατω, δηλαδη θα ξαναεκανε το ιδιο
   πραγμα. Το relative μετακινει ΜΟΝΟ το ζωγραφισμα, η ροη μενει αθικτη — αρα
   μεγαλωνει πραγματικα το κενο υποτιτλου → τιτλου. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-hero-eyebrow {
    position: relative;
    top: -16px;
  }
}

/* ΚΙΝΗΤΟ — Η ΕΙΣΑΓΩΓΗ «Custom ιστοσελιδες…» ΚΑΤΕΒΑΙΝΕΙ 12px (ιδιοκτητης,
   2026-09-07). Ιδια τεχνικη με τον υποτιτλο πιο πανω: `position: relative`
   με `top`, ωστε να μετακινηθει ΜΟΝΟ αυτη. Με `margin-top` θα κατεβαιναν μαζι
   και τα δυο κουμπια απο κατω, που δεν ζητηθηκε.
   Μετρημενα κενα πριν, στα 390: τιτλος → εισαγωγη 24, εισαγωγη → κουμπια 64. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-hero-sub {
    position: relative;
    top: 12px;
  }
}

/* ΚΙΝΗΤΟ — ΤΑ ΔΥΟ ΚΟΥΜΠΙΑ ΤΟΥ HERO ΚΑΤΕΒΑΙΝΟΥΝ 16px (ιδιοκτητης, 2026-09-07).
   Η εισαγωγη κατεβηκε 12 και «εφαγε» το κενο της με τα κουμπια (36 → 24).
   Με 16 εδω, το κενο εισαγωγης → κουμπιων γινεται 40, δηλαδη λιγο μεγαλυτερο
   απ' οσο ηταν αρχικα.

   ΤΑ ΚΟΥΜΠΙΑ ΔΕΝ ΕΧΟΥΝ ΔΙΚΗ ΤΟΥΣ ΚΛΑΣΗ ΖΩΝΗΣ — ειναι σκετα `.nqce-button`
   μεσα στο `.nq-hero-in`, οποτε ο selector τα πιανει ως ΑΜΕΣΑ παιδια του.
   Το `>` ειναι σκοπιμο: κραταει τον κανονα δεμενο στο hero και δεν διαρρεει
   σε τυχον κουμπι που μπει αργοτερα πιο βαθια.

   Ιδια τεχνικη με τα δυο απο πανω: `position: relative` + `top`, ωστε το υψος
   του hero να μεινει 615 και να μη μετακινηθει η επομενη ενοτητα. ΠΡΟΣΟΧΗ:
   αυτο τρωει απο το κατω padding των 64px — αν ζητηθει μεγαλυτερη μετακινηση,
   απο ~40px και πανω θα χρειαστει και αυξηση του padding-bottom. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-hero-in > .nqce-button {
    position: relative;
    top: 16px;
  }
}

/* ΚΙΝΗΤΟ — «Λευκιμμη · Καβος · Κερκυρα» ΚΑΤΕΒΑΙΝΕΙ 20px (ιδιοκτητης,
   2026-09-07).

   🔴 ΔΕΝ ΕΙΝΑΙ ΜΟΝΟ ΑΙΣΘΗΤΙΚΟ — ΕΛΥΣΕ ΕΠΙΚΑΛΥΨΗ. Τα δυο κουμπια κατεβηκαν
   16px με `position: relative`, που ΔΕΝ αλλαζει τη ροη: ο χωρος τους εμεινε
   εκει που ηταν, οποτε το κατω κουμπι ζωγραφιζοταν 16px ΠΑΝΩ σε αυτη τη
   γραμμη. Μετρημενο: κατω κουμπι bottom 557, γραμμη top 541.
   Τα 20 εδιναν πισω τα 16 της επικαλυψης + 4 αερα· ζητηθηκε ακομη πιο κατω,
   αρα **40**. Κενο κουμπι → γραμμη 64, και μενουν 40px ως το κατω οριο του
   hero — δηλαδη υπαρχει περιθωριο για αλλα ~30px πριν χρειαστει αυξηση του
   `padding-bottom`, γιατι το relative ΔΕΝ μεγαλωνει την ενοτητα.

   🔴 ΚΑΘΕ ΝΕΑ ΜΕΤΑΚΙΝΗΣΗ ΤΩΝ ΚΟΥΜΠΙΩΝ ΘΕΛΕΙ ΤΗΝ ΙΔΙΑ ΕΔΩ. Οσο τα τρια
   στοιχεια του hero μετακινουνται με relative, οι μεταξυ τους αποστασεις ΔΕΝ
   προσαρμοζονται μονες τους — καθε τιμη ειναι ανεξαρτητη και η επομενη πρεπει
   να ακολουθει. Αν αρχισουν να πολλαπλασιαζονται, το σωστο ειναι να γινει το
   `.nq-hero-in` flex column με `gap` ανα ζευγος αντι για relative μετατοπισεις. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-hero-where {
    position: relative;
    top: 40px;
  }
}

/* ΤΟ HOVER ΤΟΥ «Μάθε για εμάς» ΣΤΟ HERO (ιδιοκτητης, 2026-09-07).

   🔴 ΤΙ ΕΦΤΑΙΓΕ: το block δινει `--nqb-hc: #080808` (σχεδον μαυρο κειμενο) και
   `--nqb-hbg: #aaa7ff` (ανοιχτο μωβ φοντο) — ζευγαρι που διαβαζεται ΜΟΝΟ αν
   μπει και το φοντο. Στην παραλλαγη `nq-var-outline` ομως το φοντο ΜΕΝΕΙ
   διαφανο (μετρημενο: `rgba(0,0,0,0)` και στις δυο καταστασεις), οποτε στο
   hover εμενε μαυρο κειμενο πανω στο μαυρο της σελιδας και το κουμπι εδειχνε
   αδειο. Δεν ηταν λαθος τιμη, ηταν ασυμβατος συνδυασμος.

   ΓΙΑΤΙ ΝΙΚΑΕΙ ΑΥΤΟΣ Ο ΚΑΝΟΝΑΣ ΕΝΩ ΤΟ ΠΕΡΙΓΡΑΜΜΑ ΤΟΥ ΑΛΛΟΥ ΚΟΥΜΠΙΟΥ ΔΕΝ
   ΝΙΚΟΥΣΕ: εκει το `border` ηταν γραμμενο INLINE πανω στο <a>. Εδω το inline
   οριζει μονο ΜΕΤΑΒΛΗΤΕΣ (`--nqb-hc`), και η ιδιοτητα `color` μπαινει απο
   κανονα φυλλου υφους. Μια custom property δεν «κλειδωνει» την ιδιοτητα που
   την καταναλωνει — αρκει μεγαλυτερη ειδικοτητα, χωρις !important.

   ΟΙ ΤΙΜΕΣ ΕΙΝΑΙ ΤΟΥ ΥΠΑΡΧΟΝΤΟΣ ΣΥΣΤΗΜΑΤΟΣ, οχι καινουριες: ιδιο hover με τα
   αλλα outline κουμπια της σελιδας (design-intro, story) — περιγραμμα #aaa7ff
   και κειμενο #ffffff. Ετσι δεν μπαινει τριτη συμπεριφορα hover στο site. */
body.nq-demo5 .nq-hero .nq-btn.nq-var-outline:hover {
  border-color: #aaa7ff;
  color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════
   ΣΤΑΘΕΡΟ VIDEO ΦΟΝΤΟ ΣΕ ΟΛΗ ΤΗ ΣΕΛΙΔΑ, ΜΟΝΟ ΣΤΟ ΚΙΝΗΤΟ (2026-09-07)
   Αντιγραφη της υλοποιησης του mockup, μετρημενη κανονα-προς-κανονα στα 390.

   🔴 ΤΟ HERO VIDEO ΔΕΝ ΜΠΟΡΕΙ ΝΑ ΓΙΝΕΙ ΤΟ ΣΤΑΘΕΡΟ. Εχει INLINE στυλ απο το
   block: `position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
   z-index:0`. Το inline νικαει καθε κανονα χωρις !important — δοκιμαστηκε
   ζωντανα: με `position: fixed` σε media query, το computed εμεινε `absolute`.
   Γι' αυτο, οπως ΚΑΙ ΣΤΟ MOCKUP, χρειαζεται ΔΕΥΤΕΡΟ <video> παιδι του <body>:
     <video class="nq-mobile-fixed-page-video" autoplay muted loop playsinline
            preload="metadata" aria-hidden="true">
       <source src="/uploads/visual-hooks-bg-3.mp4" type="video/mp4">
     </video>
   ΧΩΡΙΣ inline στυλ — αλλιως ξαναπεφτουμε στο ιδιο τοιχο. Ζητηθηκε απο Agent 2.

   ΤΟ HERO VIDEO ΚΡΥΒΕΤΑΙ ΣΤΟ ΚΙΝΗΤΟ και ηδη κρυβεται (`visibility: hidden` πιο
   πανω) — ιδιο με το mockup. Το σταθερο καλυπτει ολο το viewport, αρα καλυπτει
   και την περιοχη του hero· δυο video θα επαιζαν το ιδιο αρχειο δυο φορες.

   ΟΙ ΤΙΜΕΣ ΕΙΝΑΙ ΤΟΥ MOCKUP, οχι δικες μου: opacity .88 (εναντι .82 του hero),
   brightness 1.15 / saturate 1.05 / contrast 1.03, object-position 62% center.
   Το σταθερο ειναι ΠΙΟ ΦΩΤΕΙΝΟ απο το hero επειδη περναει κατω απο κειμενο σε
   ολη τη σελιδα, οχι μονο πισω απο τον τιτλο.

   ΤΟ transform: translateZ(0) ΕΙΝΑΙ ΤΟΥ MOCKUP και μενει: ζηταει δικο του
   layer στην GPU, ωστε το σταθερο video να μη ξαναζωγραφιζεται σε καθε frame
   της κυλισης. Σε στοιχειο που ειναι ΤΟ ΙΔΙΟ fixed δεν σπαει τιποτα — το
   transform χαλαει το fixed μονο οταν μπαινει σε ΠΡΟΓΟΝΟ.
   ═══════════════════════════════════════════════════════════════════ */
body.nq-demo5 .nq-mobile-fixed-page-video {
  display: none;
}
@media (max-width: 767px) {
  body.nq-demo5 .nq-mobile-fixed-page-video {
    position: fixed;
    inset: 0;
    z-index: 0;
    /* 🔴 ΤΟ VIDEO ΒΓΗΚΕ ΤΕΛΕΙΩΣ ΑΠΟ ΤΟ ΚΙΝΗΤΟ (ιδιοκτητης, 2026-09-07):
       «βγαλε τελειως το video απο το mobile». Ηταν `display: block`.
       ΟΛΟΣ Ο ΥΠΟΛΟΙΠΟΣ ΚΑΝΟΝΑΣ ΜΕΝΕΙ ΕΠΙΤΗΔΕΣ ΑΔΡΑΝΗΣ: θεση, διαστασεις,
       opacity και φιλτρα ειναι ρυθμισμενα μετα απο τεσσερις γυρους
       (.88 → .5 → .32 → .2). Αν ζητηθει να επιστρεψει, αλλαζει ΜΙΑ λεξη εδω
       και ολα ειναι στη θεση τους. Σβησιμο του κανονα θα εχανε τη ρυθμιση. */
    display: none;
    width: 100vw;
    height: 100dvh;
    object-fit: cover;
    /* ΤΟ ΚΑΔΡΟ ΜΕΤΑΚΙΝΕΙΤΑΙ ΔΕΞΙΑ (ιδιοκτητης, 2026-09-07): 62% → 45%.
       🔴 ΤΟ ΠΟΣΟΣΤΟ ΔΟΥΛΕΥΕΙ ΑΝΤΙΣΤΡΟΦΑ ΑΠ' ΟΣΟ ΦΑΙΝΕΤΑΙ. Με `object-fit:
       cover` το `object-position` λεει ΠΟΙΟ σημειο της πηγης καρφωνεται στο
       κεντρο του κουτιου: 0% = αριστερη ακρη, 100% = δεξια. Αρα ΜΕΓΑΛΥΤΕΡΟ
       ποσοστο σερνει την εικονα ΑΡΙΣΤΕΡΑ (δειχνει πιο δεξια κομματια της), και
       ΜΙΚΡΟΤΕΡΟ τη σπρωχνει ΔΕΞΙΑ.
       ΔΙΑΔΡΟΜΗ ΤΗΣ ΤΙΜΗΣ: 62 (mockup) → 45 → **78**. Το 45 ηταν παρανοηση
       δικη μου: ο ιδιοκτητης εννοουσε να ερθει η ΕΙΚΟΝΑ αριστερα ωστε να
       αποκαλυφθει περισσοτερο απο το βιντεο, δηλαδη ΑΥΞΗΣΗ. */
    object-position: 78% center;
    /* ΑΧΝΟΤΕΡΟ ΑΠΟ ΤΟ MOCKUP, ΜΕ ΑΠΟΦΑΣΗ ΤΟΥ ΙΔΙΟΚΤΗΤΗ (2026-09-07): το mockup
       εχει .88 — εδω .5. Το mockup δεν ειναι πλεον κριτηριο, αλλα η αρχικη
       τιμη μενει γραμμενη ωστε να ξερουμε ποσο απεχουμε και να μπορει να
       επιστρεψει με μια λεξη. */
    /* ΔΙΑΔΡΟΜΗ ΤΗΣ ΤΙΜΗΣ: .88 (mockup) → .5 → **.32**, ολα με αιτημα του
       ιδιοκτητη. Το τριτο σκαλι μπηκε ΑΦΟΥ προστεθηκαν τα σωματιδια απο πανω:
       στο κινητο η συνθεση ειναι πλεον video + κουκκιδες + σωματιδια, οποτε το
       ιδιο opacity διαβαζεται πιο «γεματο» απ' οσο οταν το video ηταν μονο του.
       Αλλαξε ΜΟΝΟ το opacity και οχι το brightness, ωστε να κρινει τη διαφορα
       με μια μεταβλητη· αν βγει λασπωμενο αντι για αχνο, η επομενη βιδα ειναι
       το `brightness` πιο κατω.
       ΤΕΤΑΡΤΟ ΣΚΑΛΙ: .32 → **.2**, ζητηθηκε ξανα με τα ιδια λογια. Σε αυτο το
       επιπεδο το video λειτουργει ως υφη, οχι ως εικονα — διακρινεται η κινηση
       του αλλα οχι το περιεχομενο του. Κατω απο ~.15 πρακτικα εξαφανιζεται και
       το σωστο ειναι να σβηστει, οχι να κατεβει αλλο. */
    opacity: .2;
    /* ΠΙΟ ΔΙΑΚΡΙΤΙΚΟ, ΧΩΡΙΣ ΑΣΠΡΟΥΣ ΤΟΝΟΥΣ (ιδιοκτητης, 2026-09-07).
       Το mockup ΑΝΕΒΑΖΕΙ τη φωτεινοτητα: `brightness(1.15) saturate(1.05)
       contrast(1.03)`. Αυτο ακριβως εβγαζε τα ασπρα — το 1.15 σπρωχνει τα
       ανοιχτα σημεια του βιντεο προς το λευκο, και μαλιστα ΠΡΙΝ εφαρμοστει το
       opacity, οποτε δεν αρκουσε το χαμηλωμα της διαφανειας.
       Τωρα κατεβαινει κατω απο το 1 και ξεπλενεται ο κορεσμος. */
    filter: brightness(.72) saturate(.85) contrast(.98);
    pointer-events: none;
    transform: translateZ(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.nq-demo5 .nq-mobile-fixed-page-video {
    display: none;
  }
}

/* ΤΑ ΔΥΟ ΑΔΙΑΦΑΝΗ ΦΟΝΤΑ ΠΟΥ ΕΚΡΥΒΑΝ ΤΟ VIDEO ΓΙΝΟΝΤΑΙ ΔΙΑΦΑΝΑ ΣΤΟ ΚΙΝΗΤΟ.
   Το σταθερο video ειναι `z-index: 0` κατω απο ολο το περιεχομενο, οποτε
   φαινεται ΜΟΝΟ οπου το περιεχομενο ειναι διαφανο. Σαρωθηκαν και οι δυο
   σελιδες στα 390 για καθε στοιχειο με αδιαφανο φοντο μεγαλυτερο απο 200×60:

     mockup     header 375×65 · sticky header 375×66 (.8) · οι εικονες του
                portfolio 351×343. ΤΙΠΟΤΑ ΑΛΛΟ — ουτε ενοτητα ουτε υποσελιδο.
     δικο μας   τα ιδια, ΣΥΝ δυο: `nq-sec-pre-hosting` rgb(8,9,16) 375×946
                και το υποσελιδο rgb(0,0,0) 375×674 (z-index 2).

   Αυτα τα δυο ειναι δικες μας προσθηκες που το mockup δεν εχει, και ειναι
   ακριβως ο λογος που το video θα σταματαγε στη μεση της σελιδας.
   ΟΠΤΙΚΑ ΣΤΟ DESKTOP ΔΕΝ ΑΛΛΑΖΕΙ ΤΙΠΟΤΑ — ο κανονας ειναι μονο ≤767. Και στο
   κινητο η διαφορα χωρις video ειναι αμελητεα: το `body` ειναι ηδη μαυρο, και
   το rgb(8,9,16) απεχει 8 μοναδες απο το μαυρο. */
/* ΤΟ ΥΠΟΣΕΛΙΔΟ ΚΡΑΤΑΕΙ ΤΟ ΦΟΝΤΟ ΤΟΥ — ΑΠΟΦΑΣΗ ΙΔΙΟΚΤΗΤΗ (2026-09-07).
   Εδω υπηρχε κανονας που εκανε διαφανα το `nq-sec-pre-hosting` και το
   υποσελιδο, ωστε το σταθερο video να φαινεται ως το τελος της σελιδας — οπως
   στο mockup, που δεν εχει φοντο σε κανενα απο τα δυο. ΞΗΛΩΘΗΚΕ ΟΛΟΚΛΗΡΟΣ:

   · pre-hosting: ΔΕΝ χρειαζεται πια. Ο Agent 2 καθαρισε το inline
     `background-color:#080910` απο τη ρυθμιση της ενοτητας (Block 31), αρα το
     φοντο ειναι ηδη διαφανο απο την πηγη και το video περναει απο κατω του.
   · υποσελιδο: ο ιδιοκτητης το θελει ΟΠΩΣ ΕΙΝΑΙ, με τη φωτογραφια φοντου
     (inline `background-image` απο το skin). Ο κανονας μενει σβηστος ΕΠΙΤΗΔΕΣ:
     αν καποτε αλλαξει το skin και φυγει το inline, ενας ξεχασμενος κανονας θα
     εκανε το υποσελιδο διαφανο στο κινητο χωρις να το εχει ζητησει κανεις.

   ΣΥΝΕΠΕΙΑ, ΚΑΤΑΓΕΓΡΑΜΜΕΝΗ: το σταθερο video φαινεται ως την αρχη του
   υποσελιδου και σταματαει εκει. Ειναι επιλογη, οχι σφαλμα. */

/* 🔴 Ο HEADER ΠΡΕΠΕΙ ΝΑ ΠΑΡΕΙ z-index, ΑΛΛΙΩΣ ΤΟΝ ΣΚΕΠΑΖΕΙ ΤΟ VIDEO.
   Ζητηθηκε (2026-09-07): «ο header στο mobile κρυβεται».

   ΓΙΑΤΙ: το σταθερο video ειναι `z-index: 0` — ΘΕΤΙΚΟ, οχι auto — και ζει
   ΜΕΣΑ στο <main>, δηλαδη ΠΙΟ ΚΑΤΩ στο DOM απο τον <header>. Ο header ηταν
   `position: relative; z-index: auto`. Στο επιπεδο 0 της ζωγραφικης, τα
   στοιχεια με `auto` και με `0` μπαινουν στην ΙΔΙΑ ομαδα και η σειρα τους
   κρινεται απο τη ΘΕΣΗ ΣΤΟ ΔΕΝΤΡΟ. Το video ερχεται αργοτερα, αρα ζωγραφιζεται
   ΠΑΝΩ στον header — με opacity .88, δηλαδη τον εσβηνε σχεδον τελειως.

   ΤΟ elementFromPoint ΔΕΝ ΤΟ ΕΔΕΙΧΝΕ: το video εχει `pointer-events: none`,
   οποτε ο ελεγχος επιστρεφε κανονικα το λογοτυπο (IMG) ενω οπτικα ηταν απο
   κατω. Οταν υπαρχει διαφορα «το βλεπω αλλα δεν το πιανει», φταιει σχεδον
   παντα το pointer-events — η ζωγραφικη και το hit-testing ειναι αλλα δυο.

   ΤΟ 1000 ΕΙΝΑΙ ΤΟΥ MOCKUP: εκει ο header ειναι `z-index: 1000` και η sticky
   μπαρα 950 — τιμες που ηδη εχουμε στη sticky. Δεν εφευρισκουμε κλιμακα.

   ΓΡΑΦΕΤΑΙ ΕΔΩ ΚΑΙ ΟΧΙ ΣΤΟ header-1.css: το προβλημα το δημιουργει ΤΟ VIDEO
   ΤΗΣ DEMO 5, οχι ο header. Ο header ειναι κοινο part ολου του site — δεν
   αλλαζουμε τη στοιβαξη του για ολα τα sites λογω μιας σελιδας. */
body.nq-demo5 > header.pb-section {
  z-index: 1000;
}

/* ΚΙΝΗΤΟ — ΤΟ ΦΟΝΤΟ ΤΩΝ ΚΑΡΤΩΝ ΥΠΗΡΕΣΙΩΝ ΣΤΟ 80% (ιδιοκτητης, 2026-09-07),
   ωστε να περναει απο πισω το σταθερο video.

   🔴 ΓΙΑΤΙ ΔΕΝ ΜΠΑΙΝΕΙ ΣΚΕΤΟ `opacity: .8` ΣΤΗΝ ΚΑΡΤΑ: το opacity επηρεαζει
   ΟΛΟ το στοιχειο — θα εσβηνε και το εικονιδιο, τον τιτλο, τις ετικετες και
   την περιγραφη. Ζητηθηκε ΤΟ ΦΟΝΤΟ, οχι η καρτα.

   🔴 ΓΙΑΤΙ ΔΕΝ ΜΠΑΙΝΕΙ ΑΛΦΑ ΣΤΟ ΧΡΩΜΑ: το φοντο ΔΕΝ ειναι χρωμα. Μετρημενο:
   `background-color: rgba(0,0,0,0)` και ολη η οψη ερχεται απο ΕΙΚΟΝΑ SVG
   (panel-wave-soft / panel-grid-subtle / panel-corner-lines). Σε εικονα δεν
   ρυθμιζεται διαφανεια απο CSS.

   🔴 ΤΟ ::before ΕΙΝΑΙ ΗΔΗ ΠΙΑΣΜΕΝΟ — ΜΗΝ ΤΟ ΞΑΝΑΧΡΗΣΙΜΟΠΟΙΗΣΕΙΣ.
   Πρωτη εκδοχη εβαλε εκει το φοντο και ΕΣΒΗΣΕ τη μωβ γραμμη της κορυφης:
   `::before` = 4px λωριδα `linear-gradient(90deg,#706cff,#a5a0ff)`, z-index 2,
   `inset: 0 0 424px 0`. Το `::after` ηταν ελευθερο (`content: none`) και
   χρησιμοποιειται τωρα. Πριν βαλεις οτιδηποτε σε ψευδοστοιχειο αυτης της
   καρτας, ΜΕΤΡΗΣΕ και τα δυο.

   · `background-image: none` στην καρτα — αλλιως θα ζωγραφιζε ΚΑΙ αυτη απο
     κατω σε 100% και το στρωμα απο πανω δεν θα αλλαζε τιποτα.
   · `z-index: -1` για να μεινει ΠΙΣΩ απο το περιεχομενο. Τα παιδια ειναι
     στατικα· ενα στρωμα με z-index 0 θα τα ΣΚΕΠΑΖΕ.
   · `isolation: isolate` ΜΑΖΙ με το -1 — ιδια παγιδα με τη μπαρα
     .nq-scope-head: χωρις stacking context το -1 δραπετευει πισω απο ΟΛΟΥΣ
     τους προγονους και θα επεφτε πισω ακομη και απο το σταθερο video.
   · Οι τρεις εικονες γραφονται ρητα: μολις μηδενισουμε την εικονα στην καρτα,
     ενα `background: inherit` θα κληρονομουσε `none`. */
@media (max-width: 767px) {
  body.nq-demo5 .nq-service-row__inner {
    isolation: isolate;
    background-image: none;
  }
  body.nq-demo5 .nq-service-row__inner::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .8;
    pointer-events: none;
  }
  body.nq-demo5 .nq-service-row--1::after {
    background-image: url("../assets/demo5/panel-wave-soft.svg");
  }
  body.nq-demo5 .nq-service-row--2::after {
    background-image: url("../assets/demo5/panel-grid-subtle.svg");
  }
  body.nq-demo5 .nq-service-row--3::after {
    background-image: url("../assets/demo5/panel-corner-lines.svg");
  }
}

/* ΚΙΝΗΤΟ — ΤΟ HOVER ΤΩΝ ΚΑΡΤΩΝ ΜΠΑΙΝΕΙ ΚΑΙ ΒΓΑΙΝΕΙ ΠΙΟ ΓΡΗΓΟΡΑ
   (ιδιοκτητης, 2026-09-07): «να μην κραταει τοσο πολυ στο scroll».

   Οι διαρκειες περιπου ΥΠΟΔΙΠΛΑΣΙΑΖΟΝΤΑΙ:
     καρτα     .42s → .2s      μωβ λωριδα .42s → .2s
     εικονιδιο .32s → .18s     βελακι     .28s → .16s

   🔴 ΜΟΝΟ ΣΤΟ ΚΙΝΗΤΟ, ΕΠΙΤΗΔΕΣ. Οι ιδιοι κανονες εξυπηρετουν και το κανονικο
   `:hover` με ποντικι στην οθονη, που ειναι εγκεκριμενο και δεν ζητηθηκε να
   αλλαξει. Εκει η αργη, «βαρια» κινηση ειναι σωστη γιατι την ελεγχει ο
   χρηστης· στο κινητο την ελεγνει η κυλιση και μια αργη κινηση προλαβαινει να
   φαινεται σαν να «κολλαει».

   ΤΟ ΙΔΙΟ ΙΣΧΥΕΙ ΚΑΙ ΓΙΑ ΤΗΝ ΕΠΑΝΑΦΟΡΑ: το transition ειναι αμφιδρομο, οποτε
   δεν χρειαζεται ξεχωριστος κανονας για το «βγαινει» — φευγει στον ιδιο χρονο.

   Η ΖΩΝΗ ΕΝΕΡΓΟΠΟΙΗΣΗΣ ΔΕΝ ΕΙΝΑΙ ΕΔΩ: το «ποτε» το οριζει το rootMargin του
   IntersectionObserver στο home-sections.js — ζητηθηκε στενοτερη ζωνη γυρω απο
   το κεντρο. Αυτο το αρχειο οριζει μονο το «ποσο γρηγορα». */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-service-row__inner {
    transition: transform .2s cubic-bezier(.2, .75, .2, 1), border-color .2s ease, box-shadow .2s ease;
  }
  body.nq-demo5 .nq-service-row__inner::before {
    transition: transform .2s cubic-bezier(.2, .75, .2, 1);
  }
  body.nq-demo5 .nq-service-row__card .nq-ib-icon {
    transition: transform .18s cubic-bezier(.2, .75, .2, 1), box-shadow .18s ease;
  }
  body.nq-demo5 .nq-service-row__card .nq-ib-readmore {
    transition: transform .16s ease;
  }
}

/* ══════════════════════════════════════════════════════════════════
   ΤΟ ΣΤΑΤΙΚΟ ΦΟΝΤΟ ΤΗΣ ΖΩΝΗΣ pre-hosting ΞΗΛΩΘΗΚΕ ΟΡΙΣΤΙΚΑ (2026-09-07)
   «βγαλε το bg απο το section και να το παιρνει μονο απο το javascript»
   ══════════════════════════════════════════════════════════════════

   ΜΗΝ ΤΟ ΞΑΝΑΒΑΛΕΙΣ. Το χρωμα το δινει πλεον ΑΠΟΚΛΕΙΣΤΙΚΑ το δυναμικο στρωμα
   `.wbx-particles-tone` (40-base.css), που οδηγειται απο την κλαση
   `wbx-bg-tone` πανω στο ιδιο το Block και βαφει ΟΛΟ το φοντο #080910 οσο η
   ζωνη βρισκεται στο κατω μισο της οθονης.

   🔴 ΓΙΑΤΙ ΕΠΡΕΠΕ ΝΑ ΦΥΓΕΙ — Η ΔΙΑΓΝΩΣΗ ΑΞΙΖΕΙ ΝΑ ΜΕΙΝΕΙ:
   Ο ιδιοκτητης ανεφερε οτι στο κινητο «δεν αλλαζε τιποτα». Δεν ηταν σφαλμα του
   εφε. Η ενοτητα ειναι 375×946, δηλαδη ΨΗΛΟΤΕΡΗ απο την οθονη· οταν εμπαινε
   στο κατω μισο γεμιζε σχεδον ολο το ορατο με ΑΚΡΙΒΩΣ ΤΟ ΙΔΙΟ χρωμα που εβαφε
   το δυναμικο στρωμα. Το εφε δουλευε — εβαφε μαυρο πανω σε μαυρο. Στην οθονη
   μολις που φαινοταν, γιατι εμενε λιγο φοντο γυρω και πανω απο την ενοτητα.

   ΙΣΤΟΡΙΚΟ ΤΗΣ ΤΙΜΗΣ, ΓΙΑ ΝΑ ΜΗ ΞΑΝΑΓΙΝΕΙ Ο ΚΥΚΛΟΣ:
   ① Ηταν INLINE στη ρυθμιση της ενοτητας (Block 31).
   ② Το ζητησα απο τον Agent 2 να φυγει, ωστε να περναει το σταθερο video στο
      κινητο — αλλα ΔΕΝ ειπα «μονο στο κινητο», και εφυγε απο παντου.
   ③ Το ξαναεγραψα εδω με `min-width: 768px` (οθονη μονο).
   ④ Ζητηθηκε παντου, εφυγε το media query.
   ⑤ ΤΩΡΑ: φευγει τελειως, το αναλαμβανει το JS.

   ΤΟ ΠΑΛΙΟ ΠΡΟΒΛΗΜΑ ΦΟΡΗΤΟΤΗΤΑΣ ΛΥΘΗΚΕ ΚΙΟΛΑΣ: εδω ο κανονας ηταν δεμενος
   στο `body.nq-demo5`, αρα το Block 31 εχανε το φοντο του οπου αλλου κι αν
   χρησιμοποιουνταν. Πλεον το χρωμα ταξιδευει ΜΕ ΤΟ BLOCK, μεσω της κλασης του.
   ══════════════════════════════════════════════════════════════════ */

/* ΣΤΟΙΒΑΞΗ: VIDEO (κατω) → ΣΩΜΑΤΙΔΙΑ → ΠΕΡΙΕΧΟΜΕΝΟ (2026-09-07, επιβεβαιωμενο
   απο τον ιδιοκτητη).

   🔴 ΤΟ ΠΡΟΒΛΗΜΑ ΠΟΥ ΛΥΝΕΙ ΑΥΤΟΣ Ο ΚΑΝΟΝΑΣ, ΓΡΑΜΜΕΝΟ ΟΛΟΚΛΗΡΟ:
   Το `.wbx-particles` ειναι παιδι του <body>, ΠΡΩΤΟ στο DOM, `z-index: 0`.
   Το video ζει στο `.nq-sec-bgvideo`, που ερχεται ΜΕΤΑ. Το <main> ειναι
   `position: static; z-index: auto`, αρα ΔΕΝ φτιαχνει stacking context και οι
   ενοτητες συμμετεχουν ΑΠΕΥΘΕΙΑΣ στο root. Εκει, ολα τα `z-index: auto/0`
   ζωγραφιζονται με ΣΕΙΡΑ ΔΕΝΤΡΟΥ — αρα η ενοτητα του video επεφτε ΠΑΝΩ απο τα
   σωματιδια, ακριβως το αντιθετο απο το ζητουμενο.

   ΓΙΑΤΙ ΔΕΝ ΛΥΝΕΤΑΙ ΜΕ ΑΥΞΗΣΗ ΤΟΥ z-index ΤΩΝ ΣΩΜΑΤΙΔΙΩΝ: αν τα σωματιδια
   πηγαιναν σε 1, θα ανεβαιναν ΚΑΙ πανω απο ολο το κειμενο, που ειναι κι αυτο
   στο επιπεδο 0. Και αν το <main> επαιρνε z-index για να ξανανεβει, θα ανεβαινε
   ΜΑΖΙ ΤΟΥ και το video — ειναι μεσα του — και θα γυρναγαμε στην αρχη.
   Το μονο σημειο που σπαει τον κυκλο ειναι να ΚΑΤΕΒΕΙ η ενοτητα του video.

   ΤΟ -1 ΔΕΝ ΤΟ ΚΡΥΒΕΙ ΠΙΣΩ ΑΠΟ ΤΗ ΣΕΛΙΔΑ: τα αρνητικα z-index ζωγραφιζονται
   ΠΑΝΩ απο το φοντο του καμβα (το μαυρο του body) και κατω απο τα υπολοιπα.
   Σειρα που προκυπτει: μαυρο → video → σωματιδια → ενοτητες.

   ΤΟ fixed ΤΟΥ VIDEO ΔΕΝ ΧΑΛΑΕΙ: το `z-index` φτιαχνει stacking context, ΟΧΙ
   containing block. Το fixed σπαει μονο απο `transform`/`filter`/`perspective`/
   `will-change` σε προγονο — κανενα δεν υπαρχει εδω, μετρημενο. */
body.nq-demo5 .nq-sec-bgvideo {
  position: relative;
  z-index: -1;
}

/* Η ΦΩΤΟΓΡΑΦΙΑ ΤΟΥ scope-extra ΚΟΛΛΑΕΙ ΣΤΗΝ ΚΟΡΥΦΗ (ιδιοκτητης, 2026-09-07):
   «μονο σε αυτη τη φωτογραφια, μην πειραξεις αλλη».

   🔴 ΤΟ ΚΕΝΟ ΕΙΧΕ ΔΥΟ ΠΗΓΕΣ, ΟΧΙ ΜΙΑ. Μετρημενες πριν:
     .nq-scope-extra__media  margin-top  19.44px (1440) · 16px (1024) · 48px (≤991)
     .figure-img μεσα του    margin-top  35px σε ΚΑΘΕ πλατος
   Συνολο πανω απο την εικονα ~54px στην οθονη. Μηδενισμος μονο του ενος θα
   αφηνε το αλλο και θα εμοιαζε «δεν επιασε».

   🔴 ΤΟ ΔΕΥΤΕΡΟ ΕΙΝΑΙ ΚΟΙΝΟΣ ΚΑΝΟΝΑΣ — ΓΙ' ΑΥΤΟ ΞΑΝΑΓΡΑΦΕΤΑΙ ΣΚΟΠΑΡΙΣΜΕΝΑ.
   Τα 35px ερχονται απο τον κανονα που εξυπηρετει ΔΥΟ εικονες μαζι:
     `.nq-design-intro__img .figure-img, .nq-scope-extra__img .figure-img`
   (οι δυο με κλειδωμενη αναλογια, που επαιρναν margin αντι για padding ωστε να
   μην κοβονται). Αν πειραζοταν εκεί, θα ανεβαινε ΚΑΙ η φωτογραφια του
   design-intro — ακριβως αυτο που απαγορευτηκε. Ο κανονας πιο κατω αφορα ΜΟΝΟ
   το scope-extra και αφηνει το design-intro στα 35px του.

   ΓΙΑΤΙ ΠΙΑΝΕΙ ΧΩΡΙΣ ΝΑ ΑΝΕΒΕΙ Η ΕΙΔΙΚΟΤΗΤΑ: ιδιοι ακριβως selectors με τους
   αρχικους, αλλα ΠΙΟ ΚΑΤΩ στο αρχειο. Τα media query ΔΕΝ προσθετουν ειδικοτητα,
   οποτε ενας κανονας εκτος media query που ερχεται αργοτερα νικαει και το
   `@media (max-width: 991px)` των 48px. */
body.nq-demo5 .nq-scope-extra .nq-scope-extra__media {
  margin-top: 0;
}
body.nq-demo5 .nq-scope-extra__img .figure-img {
  margin-top: 0;
}

/* Η ΚΟΥΚΚΙΔΑ ΤΗΣ ΚΑΘΕΤΗΣ ΡΑΓΑΣ ΚΡΥΒΕΤΑΙ ΩΣΠΟΥ ΝΑ ΞΕΚΙΝΗΣΕΙ Η ΚΙΝΗΣΗ
   (ιδιοκτητης, 2026-09-07): «το κυκλακι που κατεβαινει να μην εμφανιζεται αν
   δεν εχει ξεκινησει το animation».

   ΤΙ ΕΦΤΑΙΓΕ: η θεση της κουκκιδας ειναι
   `top: calc(var(--cta-line-progress) * 100% - 8px)`. Πριν την κυλιση η
   μεταβλητη ειναι 0, αρα η κουκκιδα καθεται καρφωμενη στην ΚΟΡΥΦΗ της ραγας
   και φαινεται μονιμα — δεν ηταν σφαλμα θεσης, ηταν ελλειψη ελεγχου ΟΡΑΤΟΤΗΤΑΣ.

   Η ΣΗΜΑΙΑ ΥΠΑΡΧΕΙ ΗΔΗ, ΔΕΝ ΧΡΕΙΑΣΤΗΚΕ JS: η `bindScrollDivider` γραφει την
   κλαση `is-rail-active` στη ραγα, με ακριβως αυτο το νοημα —
     ραγα story:  `sectionProgress > 0 && sectionProgress < 1`
     οι υπολοιπες: `rect.top <= triggerLine` (μισο viewport)
   Ο ιδιος μηχανισμος δουλευε ηδη για την ΟΡΙΖΟΝΤΙΑ ραγα· απλα δεν ειχε
   μεταφερθει στην καθετη του demo5. Οι παλιοι κανονες που το εκαναν ειναι
   κλειδωμενοι σε `body.nq-home:not(.nq-demo5)`.

   🔴 opacity ΚΑΙ ΟΧΙ display/visibility. Το `is-rail-active` μπαινει και
   βγαινει συνεχως καθως κυλας· με `display` η εμφανιση θα ηταν αποτομη και δεν
   θα μπορουσε να γινει fade. Το opacity κραταει και τη θεση, ωστε η κουκκιδα
   να συνεχιζει να ακολουθει το progress οσο ξεθωριαζει.

   🔴 ΤΟ prefers-reduced-motion ΔΕΝ ΧΑΛΑΕΙ: εκει το JS βαζει ΕΠΙΤΗΔΕΣ
   `--cta-line-progress: 1` ΚΑΙ `is-rail-active`, ωστε να μενει η τελικη
   στατικη εικονα. Επειδη ο ελεγχος μας κρεμεται απο την ΙΔΙΑ κλαση, η κουκκιδα
   παραμενει ορατη εκει. Αν κρυβοταν με οποιοδηποτε αλλο κριτηριο, θα εσβηνε.

   ΜΟΝΟ Η ΚΟΥΚΚΙΔΑ, ΟΧΙ Η ΓΡΑΜΜΗ: ζητηθηκε ρητα «το κυκλακι». Το `__fill`
   μεγαλωνει με το progress, αρα στο 0 εχει ουτως ή αλλως μηδενικο υψος. */
body.nq-demo5 .nq-cta-scroll-rail__dot {
  opacity: 0;
  transition: opacity .25s ease;
}
body.nq-demo5 .nq-cta-scroll-rail.is-rail-active .nq-cta-scroll-rail__dot {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  body.nq-demo5 .nq-cta-scroll-rail__dot {
    transition: none;
  }
}

/* Η ΛΩΡΙΔΑ ΛΟΓΟΤΥΠΩΝ ΔΕΝ ΠΑΙΡΝΕΙ ΦΟΝΤΟ — ΔΟΚΙΜΑΣΤΗΚΕ ΚΑΙ ΑΦΑΙΡΕΘΗΚΕ ΤΗΝ ΙΔΙΑ
   ΜΕΡΑ (2026-09-07). Μπηκε `background-color: #000` ωστε να μη φαινονται τα
   σωματιδια απο πισω της, και ο ιδιοκτητης ζητησε να φυγει. Τα σωματιδια
   περνανε πλεον και απο τη λωριδα, σκοπιμα.
   ΑΝ ΞΑΝΑΖΗΤΗΘΕΙ: το φοντο παει στην ΕΝΟΤΗΤΑ, οχι στο `.nq-logo-marquee` — η
   λωριδα εχει `mask-image` που σβηνει 18px σε καθε ακρη, οποτε φοντο πανω της
   κοβεται και μενουν δυο διαφανα παραθυρακια στις ακρες. */

/* ΤΑ ΕΝΤΟΝΑ ΛΕΥΚΑ ΦΕΥΓΟΥΝ ΑΠΟ ΤΟ VIDEO ΤΟΥ HERO (ιδιοκτητης, 2026-09-07).

   ΠΡΙΝ, απο το `modules/hero.css`:
     opacity: .82 · filter: brightness(.98) saturate(.98) contrast(1.02)
   Το `contrast(1.02)` ΑΝΟΙΓΕΙ τα ανοιχτα σημεια — σπρωχνει τους τονους προς τα
   δυο ακρα, και στο συγκεκριμενο πλανο τα ανοιχτα ηταν ηδη κοντα στο λευκο.
   Μαζι με brightness σχεδον 1, τα λευκα εβγαιναν καμμενα.

   ΤΩΡΑ: brightness κατω απο 1, ελαφρυς αποκορεσμος, ΚΑΙ contrast κατω απο 1
   ωστε να μαζευτουν τα ακρα αντι να ανοιξουν. Ιδια λογικη με το σταθερο video
   του κινητου, οπου το ιδιο προβλημα λυθηκε με τον ιδιο τροπο.

   ΓΡΑΦΕΤΑΙ ΕΔΩ ΚΑΙ ΟΧΙ ΣΤΟ hero.css: εκει ο κανονας ειναι `.nq-hero video`
   ΧΩΡΙΣ scope σελιδας και εξυπηρετει καθε σελιδα με hero. Το αιτημα αφορα τη
   Demo 5. Ειδικοτητα (0,2,1) εναντι (0,1,1) — περναει χωρις !important.

   ΔΕΝ ΜΠΑΙΝΕΙ MEDIA QUERY: στο κινητο το ιδιο video ειναι ηδη
   `visibility: hidden` (κανονας ≤767 πιο πανω), αρα ο κανονας δεν εχει που να
   φανει εκτος desktop/tablet — ενα media query θα ηταν θορυβος.

   ΤΟ opacity ΜΕΝΕΙ .82 ΕΠΙΤΗΔΕΣ: ειναι μετρημενη τιμη και υπαρχει για να μην
   καταπινει το video το σημα WEBBOX, που ειναι περιγραμμα 7%. Αν τα λευκα
   ειναι ακομη εντονα, η επομενη βιδα ειναι το brightness, ΟΧΙ το opacity —
   το opacity ξεθωριαζει ολο το πλανο, το brightness μονο τους τονους. */
/* ΔΕΥΤΕΡΗ ΕΚΔΟΧΗ (ιδιοκτητης, 2026-09-07): opacity .82 → **.22**, και το
   φιλτρο ΕΠΙΣΤΡΕΦΕΙ στις αρχικες τιμες του `modules/hero.css`.

   ΤΟ ΦΙΛΤΡΟ ΔΕΝ ΞΑΝΑΓΡΑΦΕΤΑΙ ΕΔΩ — ΑΦΑΙΡΕΘΗΚΕ Η ΠΑΡΑΚΑΜΨΗ ΜΟΥ. Ειχα βαλει
   `brightness(.78) saturate(.88) contrast(.96)` για να μαζεψω τα καμμενα λευκα.
   Με opacity .22 το προβλημα λυνεται στη ριζα του: το πλανο ειναι πλεον τοσο
   αχνο που δεν εχει εντονους τονους να μαζευτουν. Σβηνοντας την παρακαμψη,
   ισχυει αυτουσιο το `brightness(.98) saturate(.98) contrast(1.02)` του
   hero.css — που ειναι ακριβως αυτο που ζητηθηκε — και μενει ΕΝΑ σημειο
   αληθειας για το φιλτρο αντι για δυο.

   ΤΟ opacity ΓΡΑΦΕΤΑΙ ΕΔΩ ΚΑΙ ΟΧΙ ΣΤΟ hero.css: εκει ο κανονας ειναι
   `.nq-hero video` ΧΩΡΙΣ scope σελιδας και εξυπηρετει καθε σελιδα με hero.
   Ειδικοτητα (0,2,1) εναντι (0,1,1) — περναει χωρις !important.

   ΙΣΤΟΡΙΚΟ ΤΗΣ ΤΙΜΗΣ: τα .82 δεν ηταν αυθαιρετα — υπηρχαν ωστε το video να μη
   καταπινει το σημα WEBBOX του φοντου, που ειναι περιγραμμα 7%. Στα .22 ο
   κινδυνος αυτος εκλεινε ακομη πιο ασφαλως. */
body.nq-demo5 .nq-hero video {
  opacity: .22;
}

/* ΦΟΝΤΟ ΚΕΦΑΛΙΔΑΣ (ιδιοκτητης, 2026-09-07). Ηταν rgb(11, 15, 26), μετρημενο.
   Το #060608 ειναι πρακτικα μαυρο και δενει με το `--wbx-particles-bg: #000`
   που μολις μπηκε — η κεφαλιδα επαψε να ξεχωριζει ως πιο μπλε λωριδα πανω απο
   ενα πλεον καθαρα μαυρο φοντο.

   🔴 Ο SELECTOR ΠΙΑΝΕΙ ΠΕΡΙΣΣΟΤΕΡΑ ΑΠΟ ΟΣΑ ΔΕΙΧΝΕΙ. Το `nq-front` ΔΕΝ ειναι
   κλαση της Demo 5 — ειναι «αυτη ειναι η αρχικη». Μετρημενες οι κλασεις του
   body εδω: `nq-front nq-page-nea-arxiki-demo5 nq-demo5`. Αρα ο κανονας ισχυει
   σε ΟΠΟΙΑ σελιδα ειναι ορισμενη ως αρχικη, οχι μονο σε αυτη. Δοθηκε ετσι και
   εφαρμοζεται ετσι· αν χρειαστει να περιοριστει, προστιθεται `.nq-demo5`. */
/* 🔴 ΓΙΑΤΙ `header.pb-section` ΚΑΙ ΟΧΙ ΣΚΕΤΟ `header`, ΟΠΩΣ ΔΟΘΗΚΕ:
   Στο `40-base.css` υπαρχει ΗΔΗ ΤΑΥΤΟΣΗΜΟΣ κανονας
     `body.nq-front > header { background: var(--nq-header-bg) }`
   με ΙΔΙΑ ειδικοτητα (0,1,2). Σε ισοπαλια αποφασιζει η σειρα φορτωσης, και το
   40-base.css φορτωνεται ΜΕΤΑ το 20-home.css — αρα ο κανονας οπως δοθηκε
   εχανε. Μετρημενο: computed εμενε rgb(11, 15, 26).
   Η κεφαλιδα ειναι ουτως η αλλως `header.pb-section`, οποτε η προσθηκη της
   κλασης ΔΕΝ αλλαζει στοχο — ανεβαζει μονο την ειδικοτητα σε (0,2,2).
   ΔΕΝ αλλαζω τη μεταβλητη `--nq-header-bg`: τη διαβαζουν ΚΑΙ το πανελ του
   κινητου μενου ΚΑΙ τα υπομενου στο header-1.css. Θα αλλαζε τρια πραγματα
   ενω ζητηθηκε ενα. */
body.nq-front > header.pb-section {
  background: #060608;
}

/* ΚΙΝΗΤΟ — ΤΡΙΠΛΑΣΙΟ ΚΕΝΟ ΑΝΑΜΕΣΑ ΣΤΗ ΛΙΣΤΑ ΚΑΙ ΤΗ ΦΩΤΟΓΡΑΦΙΑ ΤΟΥ
   scope-extra (ιδιοκτητης, 2026-09-07): «μεγαλωσε 3 φορες, προσοχη μονο στο
   mobile».

   ΜΕΤΡΗΜΕΝΟ ΠΡΙΝ, στα 390: κατω της λιστας 5173 → κορυφη εικονας 5205 = **32px**.
   Στοχος 3 × 32 = 96, αρα προστιθενται **64**.

   🔴 ΤΟ 32 ΔΕΝ ΕΡΧΟΤΑΝ ΑΠΟ ΕΔΩ — ΓΙ' ΑΥΤΟ ΠΡΟΣΤΙΘΕΤΑΙ ΑΝΤΙ ΝΑ ΠΟΛΛΑΠΛΑΣΙΑΖΕΤΑΙ:
   και το `.nq-scope-extra__media` και η ιδια η εικονα ειχαν `margin-top: 0`
   (μετρημενο). Τα 32 τα εδινε η ροη — το κατω περιθωριο της λιστας. Δεν υπηρχε
   τιμη να τριπλασιαστει· ο μονος τροπος ειναι ρητη προσθηκη.

   🔴 ΔΕΝ ΣΥΓΚΡΟΥΕΤΑΙ ΜΕ ΤΟ «Η ΕΙΚΟΝΑ ΚΟΛΛΑΕΙ ΣΤΗΝ ΚΟΡΥΦΗ» (ιδιο αιτημα,
   προηγουμενος γυρος): εκει ζητηθηκε να μηδενιστει το πανω κενο ΣΤΗΝ ΟΘΟΝΗ,
   οπου η εικονα καθεται ΔΙΠΛΑ στη λιστα και το κενο ηταν πανω-πανω στη στηλη
   της. Στο κινητο η εικονα πεφτει ΚΑΤΩ απο τη λιστα, οποτε το «πανω κενο»
   ειναι εντελως αλλο πραγμα: ειναι η αποσταση απο τη λιστα. Ο μηδενισμος μενει
   ακεραιος στην οθονη — αυτος ο κανονας ειναι μονο ≤767.98. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-scope-extra .nq-scope-extra__media {
    margin-top: 64px;
  }
}

/* ΚΙΝΗΤΟ — ΤΟ ΣΗΜΑ «WEBBOX» ΤΟΥ HERO ΚΡΥΒΕΤΑΙ (ιδιοκτητης, 2026-09-07).
   Ειναι το `<span class="nq-hero-mark">`, το τεραστιο περιγραμμα-λεξη πισω απο
   τον τιτλο. Στο κινητο εβγαινε στα 120px (το δαπεδο του
   `clamp(120px, 20vw, 300px)`) και δεν το ηθελε.

   `display: none` ΚΑΙ ΟΧΙ `opacity: 0`: το στοιχειο κινειται με parallax απο
   το JS του theme. Με μηδενικη διαφανεια θα συνεχιζε να ζωγραφιζεται και να
   δεχεται `translate3d` σε καθε καρε — 120px κειμενο που δεν φαινεται. Με
   `display: none` δεν ζωγραφιζεται καθολου· το JS συνεχιζει να γραφει transform
   σε κρυφο στοιχειο, που ειναι ακινδυνο.
   ΔΕΝ ΧΑΛΑΕΙ ΤΗ ΔΙΑΤΑΞΗ: ειναι `position: absolute`, αρα ηδη εκτος ροης.

   🔴 ΤΟ `z-index: 2` ΤΟΥ ΣΗΜΑΤΟΣ ΚΑΙ ΤΟ `z-index: 3` ΤΟΥ `.nq-hero-in` ΕΙΝΑΙ
   ΖΕΥΓΑΡΙ (hero.css:262) — υπαρχουν για να μη βυθιστει το κειμενο κατω απο το
   βιντεο. Εδω κρυβεται ΜΟΝΟ το σημα· κανενα απο τα δυο z-index δεν πειραζεται.
   Οποιος «καθαρισει» το δευτερο ως περιττο, θα ριξει το κειμενο πισω απο το
   βιντεο σε ΟΛΑ τα πλατη.

   ΣΚΟΠΑΡΙΣΜΕΝΟ ΣΤΗ DEMO 5: το `hero.css` ειναι κοινο module και εξυπηρετει
   καθε σελιδα με hero. Το αιτημα αφορα αυτο το site. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-hero-mark {
    display: none;
  }
}

/* ΣΕΛΙΔΑ «ΣΧΕΤΙΚΑ» — ΚΕΝΟ ΚΑΤΩ ΑΠΟ ΤΟ HERO (ιδιοκτητης, 2026-09-07):
   «κατω απο το hero δεν εχουμε το σωστο κενο με το section ΤΟ ΟΡΑΜΑ ΜΑΣ».

   ΜΕΤΡΗΜΕΝΟ ΠΡΙΝ, στα 1440: `margin-bottom: 0` και κενο μεταξυ των δυο
   ενοτητων **ακριβως 0** — ακουμπανε. Ο,τι χωριζε τα δυο κειμενα ηταν μονο το
   `padding-bottom: 96px` του ιδιου του hero, και επειδη η επομενη ενοτητα
   αλλαζει φοντο, η κολληση φαινοταν ως σκληρο οριο.

   ΤΟ ΚΙΝΗΤΟ ΗΤΑΝ ΗΔΗ ΣΩΣΤΟ: εκει ισχυει ο κανονας `.nq-sec-hero` των ≤767.98
   με 111px, και δεν αναφερθηκε προβλημα. Γι' αυτο ο κανονας ειναι ≥768 — δεν
   αγγιζει κατι που ηδη δουλευει.

   Η ΤΙΜΗ ΕΙΝΑΙ Ο ΡΥΘΜΟΣ ΤΗΣ ΙΔΙΑΣ ΤΗΣ ΣΕΛΙΔΑΣ, οχι νεα επιλογη: ειναι το ιδιο
   `clamp(165px, 13.125vw, 252px)` που εχει η επομενη ενοτητα (made-corfu),
   δηλαδη 189px στα 1440. Ετσι οι δυο πρωτες αποστασεις της σελιδας γινονται
   ισες αντι για 0 και 189.

   🔴 ΣΚΟΠΑΡΙΣΜΕΝΟ ΣΤΗ ΣΕΛΙΔΑ, ΟΧΙ ΣΤΟ nq-demo5: στην ΑΡΧΙΚΗ το hero εχει
   ΕΠΙΤΗΔΕΣ `margin-bottom: 0` στην οθονη, γιατι απο κατω του ερχεται η λωριδα
   λογοτυπων που φερνει δικο της κενο (μετρημενο: 30px + το δικο της margin).
   Κανονας σε επιπεδο `nq-demo5` θα προσθετε 189px κενο εκει που δεν λειπει. */
/* ΠΡΟΣΤΕΘΗΚΕ Η «ΥΠΗΡΕΣΙΕΣ» (ιδιοκτητης, 2026-09-08): «μεγαλυτερο κενο απο το
   hero, ιδιο με τη σελιδα Σχετικα». Μετρημενο πριν στα 1280: mb 0, κενο 0 —
   ακριβως το ιδιο συμπτωμα με τη «Σχετικα». Μπαινει στον ΙΔΙΟ κανονα αντι για
   αντιγραφο, ωστε οι δυο σελιδες να μη μπορουν ποτε να ξεσυγχρονιστουν.
   Η ΑΡΧΙΚΗ ΜΕΝΕΙ ΕΞΩ και εδω, για τον λογο που εξηγειται παραπανω. */
@media (min-width: 768px) {
  body.nq-page-nea-sxetika-demo5 .nq-sec-hero,
  body.nq-page-nea-ypiresies-demo5 .nq-sec-hero {
    margin-bottom: clamp(165px, 13.125vw, 252px);
  }
}


/* nq-sec: Υπηρεσίες · Η τρίτη κάρτα κρύβεται κάτω από 1100px
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-08): «σε αυτή την ανάλυση και κάτω θέλω να φύγει
   αυτό το πάνελ» — η κάρτα «Web Hosting», που είναι η ΤΡΙΤΗ της σειράς
   (`nq-service-row--3`).

   ΤΟ ΟΡΙΟ ΤΩΝ 1100 ΔΕΝ ΕΙΝΑΙ ΤΥΧΑΙΟ: στα 1100 το πλέγμα πέφτει από τρεις
   στήλες σε δύο (βλ. `@media (max-width: 1100px)` παραπάνω σε αυτό το αρχείο).
   Με τρεις κάρτες σε δύο στήλες, η τρίτη έμενε μόνη της σε δεύτερη σειρά.
   Κρύβοντάς την, οι δύο πρώτες γεμίζουν ακριβώς μία σειρά.

   ΓΙ' ΑΥΤΟ `display: none` ΚΑΙ ΟΧΙ `visibility`/`opacity`: το ζητούμενο είναι
   να ΜΗΝ πιάνει χώρο — αλλιώς θα έμενε το κενό της. */
/* 🔴 ΕΥΡΟΣ, ΟΧΙ ΟΡΙΟ: η καρτα κρυβεται ΜΟΝΟ αναμεσα σε 721 και 1100
   (ιδιοκτητης 2026-09-08: «κατω απο 720 θελω να την επαναφερεις»).
   Γραμμενο ως ΕΝΑ media query με δυο ακρα, και οχι ως «κρυψε στα 1100 και
   ξαναδειξε στα 720»: με δυο κανονες θα επρεπε να μαντεψουμε ΠΟΙΑ ηταν η
   αρχικη τιμη του `display` για να την επαναφερουμε — εδω δεν χανεται ποτε.

   ΓΙΑΤΙ ΥΠΑΡΧΕΙ ΤΟ ΚΕΝΟ: στα 1100 το πλεγμα πεφτει σε δυο στηλες και η τριτη
   καρτα εμενε μονη της σε δευτερη σειρα. Κατω απο 720 οι καρτες γινονται μια
   στηλη, οποτε η τριτη δεν περισσευει πια — μπαινει στη σειρα σαν τις αλλες.

   ⚠️ `body.nq-home`: το `nq-demo5` το φοράνε ΟΛΕΣ οι σελιδες του νεου site. */
@media (min-width: 721px) and (max-width: 1100px) {
  body.nq-demo5.nq-home .nq-service-row__inner.nq-service-row--3 {
    display: none;
  }
}


/* nq-sec: Story · Η ράγα στο όριο των στηλών κάτω από 1100px
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-08): «η κουκκίδα να μετακινηθεί πιο αριστερά για
   να είναι στη μέση των columns».

   ΜΕΤΡΗΜΕΝΟ ΣΤΑ 1024: ζώνη 37→973, στήλες 37→411 και 411→973, δηλαδή το όριο
   πέφτει στο 411 — ακριβώς στο 40% της ζώνης. Η ράγα ήταν 463→481 (κέντρο
   472), δηλαδή 61px δεξιότερα από το όριο.

   ΓΙΑΤΙ `40% - 9px` ΚΑΙ ΟΧΙ ΣΤΑΘΕΡΟ ΝΟΥΜΕΡΟ: το 40% ΕΙΝΑΙ το όριο των στηλών
   σε κάθε πλάτος, και το 9 είναι το μισό του πλάτους της ράγας (18px). Έτσι η
   ράγα κεντράρεται στο όριο ό,τι κι αν γίνει με την οθόνη, χωρίς νέα μέτρηση.
   Το `+52px` της μεγάλης οθόνης μένει ανέγγιχτο: εκεί η διάταξη διαφέρει. */
@media (max-width: 1100px) {
  /* ⚠️ ΤΡΙΑ ΕΠΙΠΕΔΑ ΠΕΡΙΟΡΙΣΜΟΥ, ΚΑΙ ΤΑ ΤΡΙΑ ΧΡΕΙΑΖΟΝΤΑΙ:
       `nq-home`            → μονο η αρχικη (το `nq-demo5` το εχουν ΟΛΕΣ οι σελιδες)
       `nq-sec-studio-story`→ μονο ΑΥΤΗ η ζωνη
       `max-width: 1100px`  → μονο σε αυτο το ευρος

     🔴 ΧΩΡΙΣ ΤΟ ΔΕΥΤΕΡΟ ΕΣΠΑΣΕ ΚΑΤΙ ΑΛΛΟ: η σελιδα εχει ΔΥΟ ραγες με το ιδιο
     modifier — «Η Διαδικασια μας» (studio-story) και «Ταχυτατη & Ασφαλης
     Φιλοξενια» (hosting-story). Ο πρωτος κανονας τις μετακινησε ΚΑΙ ΤΙΣ ΔΥΟ,
     ενω η μετρηση ειχε γινει μονο πανω στην πρωτη. Η δευτερη εχει αλλη διαταξη
     (εικονα δεξια αντι αριστερα), αρα αλλο σωστο σημειο. */
  body.nq-demo5.nq-home .nq-sec-studio-story .nq-cta-scroll-rail--story {
    left: calc(43% - 9px);
  }
}

/* ΣΕΛΙΔΑ «ΣΧΕΤΙΚΑ» — Η ΡΑΓΑ ΤΗΣ ΑΝΤΕΣΤΡΑΜΜΕΝΗΣ ΖΩΝΗΣ ΠΙΟ ΑΡΙΣΤΕΡΑ
   (ιδιοκτητης, 2026-09-07): `left: calc(60% - 26px)` → `calc(55% - 26px)`.

   🔴 ΣΚΟΠΑΡΙΣΜΕΝΟ ΣΤΗ ΣΕΛΙΔΑ, ΜΕ ΡΗΤΗ ΕΝΤΟΛΗ: «προσοχη μην πειραχτουν οι
   αλλες σελιδες, μονο για αυτη τη σελιδα αυτη η αλλαγη». Ο κανονας οπως
   δοθηκε ηταν γραμμενος σε `body.nq-demo5`, που πιανει ΚΑΙ την αρχικη ΚΑΙ τις
   υπηρεσιες — οπου η ιδια ραγα ειναι ρυθμισμενη στο 60% απο μετρηση του
   mockup. Αλλαχθηκε σε `body.nq-page-nea-sxetika-demo5`.

   ΓΙΑΤΙ ΠΕΡΝΑΕΙ ΧΩΡΙΣ ΝΑ ΑΝΕΒΕΙ Η ΕΙΔΙΚΟΤΗΤΑ: ιδιος αριθμος κλασεων με τον
   βασικο κανονα (0,4,0) — αποφασιζει η ΣΕΙΡΑ, και αυτος ερχεται πιο κατω στο
   αρχειο. Αν καποτε μετακινηθει πιο πανω, θα σταματησει σιωπηλα να ισχυει.

   ΤΟ `- 26px` ΜΕΝΕΙ ΑΝΕΠΑΦΟ: ειναι η αποσταση της ραγας απο το οριο των
   στηλων, μετρημενη στο mockup (26px ΠΡΙΝ το οριο στην αντεστραμμενη ζωνη,
   ενω στην κανονικη ειναι 52px ΜΕΤΑ). Αλλαζει μονο το ποσοστο. */
body.nq-page-nea-sxetika-demo5 .nq-studio-story--reverse .nq-cta-scroll-rail--story {
  left: calc(55% - 26px);
}


/* nq-sec: Made features · Τρεις στήλες και κάτω από 991
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-08): «αυτά δεν μπορούν να είναι στην ίδια γραμμή
   κάτω από 986;» — τα τρία εικονίδια με τίτλο (Custom Σχεδιασμός / Responsive
   ιστοσελίδες / Γρήγορη φόρτωση).

   ΤΙ ΤΑ ΕΡΙΧΝΕ ΣΕ ΜΙΑ ΣΤΗΛΗ: ο κανόνας στη γραμμή ~4135, μέσα σε
   `@media (max-width: 991px)`, που βάζει `grid-template-columns: minmax(0,1fr)`
   σε ΤΡΕΙΣ ζώνες μαζί — made-features, scope-extra, scope-head.
   Δεν τον πείραξα: οι άλλες δύο ζώνες τον χρειάζονται.

   ΤΟ gap ΜΙΚΡΑΙΝΕΙ ΜΑΖΙ: με τρεις στήλες σε στενή οθόνη, το κενό των 32px
   έτρωγε όλο τον χώρο των λέξεων. Εδώ κλιμακώνεται με το πλάτος.

   ⚠️ ΣΕ ΠΟΛΥ ΣΤΕΝΕΣ ΟΘΟΝΕΣ (~360px) ΟΙ ΤΡΕΙΣ ΣΤΗΛΕΣ ΣΤΕΝΕΥΟΥΝ: κάθε τίτλος
   πέφτει σε 2-3 σειρές. Είναι το τίμημα του «στην ίδια γραμμή» και έγινε με
   ρητή εντολή· αν φανεί σφιχτό, ο καθαρός τρόπος είναι κατώφλι (π.χ. τρεις
   στήλες μόνο πάνω από 576px), όχι μικρότερα γράμματα. */
@media (max-width: 991px) {
  body.nq-demo5.nq-home .nq-made-features > .row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 2.4vw, 28px);
  }
}

/* ΣΕΛΙΔΑ «ΣΧΕΤΙΚΑ» — Η ΦΩΤΟΓΡΑΦΙΑ ΤΗΣ ΑΝΤΕΣΤΡΑΜΜΕΝΗΣ ΖΩΝΗΣ ΦΕΥΓΕΙ ΚΑΤΩ ΑΠΟ 991
   (ιδιοκτητης, 2026-09-07). Ειναι το `about-us-planning.webp` — το μαυρο
   σημειωματαριο με τα wireframes.

   ΚΡΥΒΕΤΑΙ Η ΣΤΗΛΗ, ΟΧΙ ΜΟΝΟ Η ΕΙΚΟΝΑ. Μετρημενο στα 991: η `.nq-story-stage`
   εχει ΕΝΑ μονο παιδι (το Single Image), `padding: 0` και `min-height: auto` —
   αρα δεν κρυβει τιποτα αλλο και δεν αφηνει κενο. Αν κρυβοταν μονο η εικονα, η
   στηλη θα εμενε ως αδειο κελι του πλεγματος.

   🔴 ΠΟΙΑ ΑΠΟ ΤΙΣ ΔΥΟ: η σελιδα εχει ΔΥΟ `.nq-story-stage-photo` —
   `about-us-planning.webp` στην ΑΝΤΕΣΤΡΑΜΜΕΝΗ ζωνη και `about-us-team.webp`
   στην κανονικη. Ο selector ειναι δεμενος στο `--reverse` ωστε η δευτερη να
   μεινει ανεπαφη. Σκετο `.nq-story-stage` θα τις εκρυβε και τις δυο.

   ΚΑΙ ΣΚΟΠΑΡΙΣΜΕΝΟ ΣΤΗ ΣΕΛΙΔΑ: η αρχικη εχει κι αυτη αντεστραμμενη ζωνη με
   δικη της φωτογραφια (hosting-visual), που ΔΕΝ ζητηθηκε να φυγει. */
@media (max-width: 991px) {
  body.nq-page-nea-sxetika-demo5 .nq-studio-story--reverse .nq-story-stage {
    display: none;
  }
}


/* nq-sec: Σχετικά · Μικρότερο κενό κάτω από τον τίτλο
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-08), σελιδα «Σχετικα».
   ΜΕΤΡΗΜΕΝΟ: το «Δίπλα στην επιχείρησή σας» ξεκινουσε 82px κατω απο τον τιτλο
   «Λύσεις σε πραγματικές ανάγκες». Τα 48 απο αυτα ερχονται απο το
   `margin-top` του `.nq-story-lead-title` — τα υπολοιπα ειναι το line-height
   του ιδιου του τιτλου και δεν πειραζονται.

   ⚠️ ΔΕΜΕΝΟ ΣΤΗ ΣΕΛΙΔΑ, ΟΧΙ ΣΤΟ ΘΕΜΑ: το `.nq-story-lead-title` υπαρχει ΚΑΙ
   στην αρχικη (ζωνη studio-story). Χωρις το `body.nq-page-nea-sxetika-demo5`
   η αλλαγη θα μετακινουσε και εκει το κειμενο, χωρις να το ζητησει κανεις. */
body.nq-page-nea-sxetika-demo5 .nq-story-lead-title {
  margin-top: 10px;   /* ΔΙΑΔΡΟΜΗ: 48 (αρχικο) -> 24 -> 10 */
}


/* nq-sec: Δύο κλάσεις-εργαλεία για ενότητες (ιδιοκτητης 2026-09-08)
   Μπαινουν απο τον Manager στο πεδιο «Κλαση» του section και δουλευουν ΟΠΟΥ
   κι αν μπουν — δεν ειναι δεμενες σε σελιδα.

   ΓΙΑΤΙ ΧΡΕΙΑΣΤΗΚΑΝ: η σελιδα «Σχετικα» εχει ΔΥΟ ενοτητες με ΙΔΙΑ κλαση
   (`nq-sec-story`) — μια για το «Webbox Studio» και μια για το «Πως Δουλευουμε».
   Ο ιδιοκτητης ηθελε αλλαγη μονο στην πρωτη. Χωρις διακριτη κλαση, καθε κανονας
   θα επιανε και τις δυο· με `:nth-child` θα εσπαγε μολις μπει νεα ενοτητα.

   `wbx-no-rail`  → καθολου γραμμη με την κουκκιδα σε αυτη την ενοτητα.
   `wbx-gap-lg`   → μεγαλυτερο κενο προς την επομενη ενοτητα.
                    ΜΟΝΟ κατω αποσταση, οπως ο κανονας του project. */
.wbx-no-rail .nq-cta-scroll-rail {
  display: none;
}
.wbx-gap-lg {
  margin-bottom: clamp(120px, 9.4vw, 180px) !important;
}


/* nq-sec: Σχετικά · Η ράγα του «Πώς Δουλεύουμε» πιο αριστερά κάτω από 1200
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-08): «κατω απο 1200 στην ιδια σελιδα και μονο για
   αυτη τη σελιδα, το section (πως δουλευουμε) θελω να μεταφερεις τη γραμμη πιο
   αριστερα».

   ΜΕΤΡΗΜΕΝΟ στα 1100 πριν την αλλαγη: ζωνη 75→1011, οριο στηλων στα 449
   (εικονα 40% | κειμενο 60%), ραγα 501→519. Δηλαδη η ραγα κρεμοταν 52px ΜΕΤΑ
   το οριο — σωστο στα πλατη του mockup, αλλα σε στενοτερη οθονη κολλαει πανω
   στο κειμενο. Νεα θεση: κεντραρισμενη ΠΑΝΩ στο οριο (449), δηλαδη
   `40% - 9px` οπου 9 = το μισο του πλατους της ραγας (18px).

   🔴 ΔΥΟ ΠΕΡΙΟΡΙΣΜΟΙ, ΚΑΙ ΟΙ ΔΥΟ ΑΠΑΡΑΙΤΗΤΟΙ:
   `body.nq-page-nea-sxetika-demo5` → ρητη εντολη «μονο για αυτη τη σελιδα».
     Το `nq-demo5` το εχουν ΟΛΕΣ οι σελιδες, το `nq-sec-story` υπαρχει και
     αλλου — χωρις αυτο μετακινουνται και οι ραγες αρχικης/υπηρεσιων.
   `.wbx-rail-left` → η σελιδα εχει ΔΥΟ ενοτητες `nq-sec-story` με ιδιες
     κλασεις. Η κλαση μπαινει απο τον Manager μονο σε αυτη που το ζητησε ο
     ιδιοκτητης, ωστε ο κανονας να μη διαλεγει με `:nth-child` (θα εσπαγε
     μολις μπει νεα ενοτητα αναμεσα τους). */
@media (max-width: 1200px) {
  body.nq-page-nea-sxetika-demo5 .wbx-rail-left .nq-cta-scroll-rail--story {
    left: calc(40% - 9px);
  }
}


/* nq-sec: Εταιρικη ταυτοτητα · Η ραγα της «Διαδικασιας» πιο αριστερα κατω απο 1400
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-10): «κατω 1400 μετακινησε το rail με κυκλακι
   πιο αριστερα».

   ΜΕΤΡΗΜΕΝΟ στα 1920 πριν την αλλαγη: ζωνη 1296, οριο στηλων στα 518.4
   (εικονα 40% | κειμενο 60%), ραγα 570.4 → 588.4. Κρεμοταν 52px ΜΕΤΑ το οριο.
   Στα 1400 ο container πεφτει απο 1320 σε 1140, δηλαδη η ζωνη γινεται 1116
   και η στηλη του κειμενου 670 αντι 778 — τα 52px ομως ΜΕΝΟΥΝ 52px, οποτε η
   ραγα πλησιαζει αναλογικα το κειμενο. Νεα θεση: 47px αριστεροτερα,
   δηλαδη με το κεντρο της ραγας 14px ΜΕΤΑ το οριο αντι για 61px.
   Η «Σχετικα» στα 1200 παει πιο αριστερα (`40% - 9px`, πανω στο οριο).

   ΓΙΑΤΙ ΦΤΑΝΕΙ ΤΟ body.nq-page-etairiki-taytotita ΧΩΡΙΣ .wbx-rail-left:
   η σελιδα εχει ΜΙΑ μονο ραγα (μετρημενο: 1 στοιχειο .nq-cta-scroll-rail--story).
   Στη «Σχετικα» χρειαστηκε η κλαση επειδη εκει υπαρχουν δυο ενοτητες
   nq-sec-story με ιδιες κλασεις. Αν μπει δευτερη ραγα εδω, θελει κλαση.

   1399.98 και οχι 1400: ειναι το κατωφλι xxl του Bootstrap. Με `1400px` +
   `min-width:1400px` αλλου μενει κενο στα κλασματικα πλατη (π.χ. 1399.5 με
   zoom του browser). */
@media (max-width: 1399.98px) {
  body.nq-page-etairiki-taytotita .nq-cta-scroll-rail--story {
    /* +5px: το κεντρο της ραγας πεφτει 14px ΜΕΤΑ το οριο των στηλων, αντι για
       ακριβως πανω του. Αιτημα ιδιοκτητη «λιγο πιο δεξια, πολυ λιγο» — απο τα
       61px της βασικης θεσης εμειναν 14. */
    left: calc(40% + 5px);
  }
}


/* nq-sec: Εταιρικη ταυτοτητα · Ο τιτλος του slider σε ΜΙΑ γραμμη κατω απο 767
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-10): «κατω απο 767px τιτλος μια γραμμη»
   (φαινοταν «Διαφημιστικα / Φυλλαδια» σε δυο).

   ΔΥΟ ΑΙΤΙΕΣ, ΟΧΙ ΜΙΑ:
   1. `max-width: 12ch` — εκοβε τον τιτλο στους ~12 χαρακτηρες ανεξαρτητα
      απο το ποσο χωρο εχει. Το «Διαφημιστικα» μονο του ειναι 12.
   2. Το μεγεθος. ΜΕΤΡΗΜΕΝΟ με canvas measureText στην πραγματικη
      γραμματοσειρα (Averta 750, letter-spacing -.035em), σε πλατος
      κειμενου 279px στα 375 (slide 100vw-44, padding 26+26):
        Λογοτυπο                 χωραει μεχρι 62px
        Διαφημιστικα Φυλλαδια    μεχρι 25px
        Εντυπο Υλικο Επιχειρησης  μεχρι 23px  ← ο μακρυτερος
      Η τιμη που ισχυε ηταν clamp(32px,10vw,44px) = 37.5px στα 375.

   ΓΙΑΤΙ 5.6vw: το διαθεσιμο πλατος ειναι 100vw-96, δηλαδη μεγαλωνει
   ΤΑΧΥΤΕΡΑ απο το vw. Αν χωραει στα 320, χωραει σε ολο το ευρος:
     320 → 17.9px  (ο μακρυτερος θελει 18.6)
     375 → 21.0px  (θελει 23)
     767 → 42.9px  (θελει 56)

   ΧΩΡΙΣ white-space: nowrap ΕΠΙΤΗΔΕΣ: αν μπει αυριο μακρυτερος
   τιτλος, θα σπασει σε δυο γραμμες αντι να κοπεί απο το overflow:hidden.

   ΤΟΠΙΚΑ, ΟΧΙ ΣΤΟ BLOCK: ρητη εντολη ιδιοκτητη «μονο για αυτη τη
   σελιδα». Αν αλλαζα το CSS του ce brand_showcase, θα αλλαζε το block
   παντου οπου μπει στο μελλον. Η ειδικοτητα εδω ειναι (0,2,2)
   εναντι (0,2,1) του block — κερδιζει χωρις !important. */
@media (max-width: 767.98px) {
  body.nq-page-etairiki-taytotita .nq-brand-showcase__copy h2 {
    max-width: none;
    font-size: clamp(16px, 5.6vw, 44px);
  }
  /* Το κειμενο απλωνει σε ολο το πλατος: το block το κραταει σε 32ch, που
     στα 375 ειναι ~250px ενω διαθεσιμα υπαρχουν 279. Αιτημα ιδιοκτητη. */
  body.nq-page-etairiki-taytotita .nq-brand-showcase__copy p {
    max-width: 100%;
  }

  /* ΜΙΚΡΟΤΕΡΗ ΦΩΤΟΓΡΑΦΙΑ ΜΕ ΤΗΝ ΑΝΑΛΟΓΙΑ ΤΗΣ, ΚΕΝΤΡΑΡΙΣΜΕΝΗ
     Για το κεντραρισμα αρκεί το `margin-inline:auto` — η εικονα ειναι block.
     Τιτλος και κειμενο ΜΕΝΟΥΝ αριστερα (ρητο αιτημα ιδιοκτητη).
     ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-10).

     ΤΙ ΕΚΑΝΕ ΠΡΙΝ: το block δινει στη διαφανεια `grid-template-rows: auto 390px`
     και στη figure σταθερο υψος 390 με `object-fit: cover`. Οι τρεις εικονες
     ειναι 1024x1536 (αναλογια 0.667) ενω η ζωνη στα 375 ειναι 331x390
     (αναλογια 0.85) — το cover τις μεγαλωνε σε 331x496 και ΕΚΟΒΕ 106px υψος.

     ΤΩΡΑ: υψος `auto` παντου και πλατος 78%, οποτε η αναλογια κρατιεται μονη
     της χωρις object-fit. Στα 375: 258x387 — ολοκληρη η εικονα, σχεδον στο
     ιδιο υψος με πριν αλλα χωρις κοψιμο. Το `max-width` κοβει τη φορα προς τα
     πανω ωστε στα 767 να μη γινει τεραστια. */
  /* Το block δινει `padding: 34px 26px 38px`. Το κατω κενο φευγει ωστε το
     κειμενο να ακουμπαει τη φωτογραφια. Ειδικοτητα (0,2,1) εναντι (0,2,0). */
  body.nq-page-etairiki-taytotita .nq-brand-showcase__copy {
    padding: 34px 26px 0;
  }
  body.nq-page-etairiki-taytotita .nq-brand-showcase__slide {
    grid-template-rows: auto auto;
  }
  body.nq-page-etairiki-taytotita .nq-brand-showcase__slide figure {
    height: auto;
    background: none;
  }
  body.nq-page-etairiki-taytotita .nq-brand-showcase__slide img {
    width: 78%;
    max-width: 330px;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
  }

  /* ΜΕΓΑΛΥΤΕΡΟ ΚΕΝΟ ΚΑΤΩ ΑΠΟ ΤΗ «ΔΙΑΔΙΚΑΣΙΑ» ΣΤΟ ΚΙΝΗΤΟ
     ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-10).

     ΓΙΑΤΙ ΗΤΑΝ ΜΙΚΡΟ: το `.wbx-gap-lg` ειναι clamp(120px, 9.4vw, 180px). Στα
     375 το 9.4vw βγαινει 35px, αρα πεφτει στο ΔΑΠΕΔΟ των 120 — δηλαδη στο
     κινητο η ενοτητα εχει 120px ενω στον υπολογιστη 180. Το clamp κανει το
     αντιθετο απο το ζητουμενο εδω: μικραινει ακριβως εκει που το περιεχομενο
     στοιβαζεται καθετα και θελει περισσοτερη αναπνοη.

     ΓΙΑΤΙ ΘΕΛΕΙ !important: το `.wbx-gap-lg` το εχει. Χωρις αυτο ο κανονας
     χανει ανεξαρτητα απο ειδικοτητα. Μεταξυ των important κερδιζει αυτος εδω,
     (0,2,1) εναντι (0,1,0). */
  body.nq-page-etairiki-taytotita .nq-sec-story {
    margin-bottom: 180px !important;
  }
}


/* nq-sec: Σχετικά · Η φωτογραφία του «Πώς Δουλεύουμε» μένει ΚΑΙ στο κινητό
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-08): «σε αναλυση κατω απο 721 να μην εξαφανιζεται
   αυτη η εικονα, να μενει και στο mobile».

   ΤΙ ΤΗΝ ΕΚΡΥΒΕ: ο κανονας στη γραμμη ~5690 —
     `@media (max-width:720px) body.nq-demo5
        .nq-studio-story:not(.nq-studio-story--reverse) > .row > .nq-story-stage
        { display: none }`
   Ηρθε απο το mockup της ΑΡΧΙΚΗΣ, οπου η ζωνη «Η Διαδικασια μας» πραγματι
   μενει χωρις φωτογραφια στο κινητο. Το `nq-demo5` ομως το εχουν ΟΛΕΣ οι
   σελιδες, οποτε επιανε και τη «Σχετικα».

   ΓΙΑΤΙ ΔΕΝ ΠΕΙΡΑΧΤΗΚΕ Ο ΑΡΧΙΚΟΣ ΚΑΝΟΝΑΣ: στην αρχικη η συμπεριφορα ειναι η
   εγκεκριμενη — αν του εβαζα `body.nq-home` θα ισχυε για την αρχικη αλλα θα
   αλλαζε σιωπηλα και τις «Υπηρεσιες», που δεν το ζητησε κανεις. Αντ' αυτου
   γινεται ΑΚΥΡΩΣΗ, σκοπαρισμενη με κλαση που μπαινει απο τον Manager.

   `wbx-keep-stage` → «κρατα τη φωτογραφια της ζωνης και στο κινητο».

   ΕΙΔΙΚΟΤΗΤΑ: ο κανονας που ακυρωνεται ειναι (0,4,0) — το `:not()` μετραει με
   την ειδικοτητα του ορισματος του. Εδω βγαινουν (0,5,0), οποτε κερδιζει
   ΑΝΕΞΑΡΤΗΤΑ απο τη σειρα στο αρχειο, ακομα κι αν καποτε μετακινηθει.
   Το `flex` δεν ειναι τυχαιο: ειναι η αρχικη τιμη της `.nq-story-stage`
   (γραμμη ~3387) — με `block` θα εχανε το κεντραρισμα της εικονας. */
@media (max-width: 720px) {
  body.nq-page-nea-sxetika-demo5 .wbx-keep-stage
    .nq-studio-story:not(.nq-studio-story--reverse) > .row > .nq-story-stage {
    display: flex;
  }
}


/* nq-sec: Εταιρικη ταυτοτητα · Η φωτογραφια της «Διαδικασιας» μενει στο κινητο
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-10): «κατω απο 721 να μην σβηνεται η φωτογραφια».

   ΙΔΙΟ ΠΡΟΒΛΗΜΑ ΜΕ ΤΗ «ΣΧΕΤΙΚΑ» (2026-09-08). Την κρυβει ο κανονας
   της γραμμης ~5725, μεσα σε `@media (max-width: 720px)`:
     `body.nq-demo5 .nq-studio-story:not(.nq-studio-story--reverse)
        > .row > .nq-story-stage { display: none }`
   Ηρθε απο το mockup της ΑΡΧΙΚΗΣ, οπου η ζωνη οντως μενει χωρις
   φωτογραφια στο κινητο — αλλα το `nq-demo5` το εχουν ΟΛΕΣ οι σελιδες.
   Γι' αυτο γινεται ΑΚΥΡΩΣΗ εδω και δεν πειραζεται ο αρχικος.

   ΓΙΑΤΙ ΔΕΝ ΧΡΕΙΑΖΕΤΑΙ ΚΛΑΣΗ `wbx-keep-stage` ΟΠΩΣ ΣΤΗ «ΣΧΕΤΙΚΑ»:
   εκει υπαρχουν ΔΥΟ ζωνες `.nq-studio-story` και επρεπε να ξεχωριστει η
   μια. ΕΔΩ ΜΕΤΡΗΘΗΚΕ: 1 `.nq-studio-story`, 0 reverse, 1 `.nq-story-stage`.
   Αν μπει δευτερη ζωνη στη σελιδα, θα χρειαστει και εδω κλαση.

   ΔΙΠΛΗ ΚΛΑΣΗ ΣΤΟ body: με μονη την κλαση σελιδας η ειδικοτητα βγαινει
   ΑΚΡΙΒΩΣ ιδια με του κανονα που ακυρωνουμε (0,5,1) — θα αποφασιζε η
   σειρα στο αρχειο, δηλαδη θα εσπαγε αν μετακινουσε καποτε ο κανονας.
   Η επαναληψη της κλασης την ανεβαζει σε (0,6,1) — κερδιζει παντα.

   `flex` και οχι `block`: ειναι η αρχικη τιμη της `.nq-story-stage`
   (γραμμη ~3387) — με `block` χανεται το κεντραρισμα της εικονας.
   Επαληθευμενο στο computed: display = flex. */
@media (max-width: 720px) {
  body.nq-page-etairiki-taytotita.nq-page-etairiki-taytotita
    .nq-studio-story:not(.nq-studio-story--reverse) > .row > .nq-story-stage {
    display: flex;
  }
}


/* nq-sec: Υπηρεσίες · Φεύγει το κάτω padding της λίστας υπηρεσιών
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-08): «το Digital marketing section για κάποιο λόγο
   παιρνει ενα padding bottom, θελω να το αφαιρεσεις αλλα να σιγουρευτεις οτι
   δεν θα επηρεασει αλλη σελιδα».

   ΤΟ ΕΒΑΖΕ Ο ΚΑΝΟΝΑΣ ΤΗΣ ΓΡΑΜΜΗΣ ~5205:
     `body.nq-demo5 .nq-services-list { padding: clamp(34px,4vw,58px) 0
                                                 clamp(88px,9vw,140px) }`
   Το «Digital marketing» ειναι η ΤΕΛΕΥΤΑΙΑ υπηρεσια της λιστας, οποτε το κατω
   padding της ΛΙΣΤΑΣ φαινεται σαν να ανηκει σε αυτο.

   ΓΙΑΤΙ ΑΚΥΡΩΣΗ ΚΑΙ ΟΧΙ ΑΛΛΑΓΗ ΤΟΥ ΑΡΧΙΚΟΥ: ο αρχικος ειναι σε `nq-demo5`,
   που το εχουν ΟΛΕΣ οι σελιδες. ΜΕΤΡΗΘΗΚΕ (2026-09-08) οτι σημερα η
   `.nq-services-list` υπαρχει σε ΜΙΑ μονο σελιδα — Υπηρεσιες: 1 στιγμιοτυπο,
   αρχικη: 0, Σχετικα: 0 — αρα η αλλαγη στον αρχικο δεν θα εσπαγε τιποτα
   ΣΗΜΕΡΑ. Θα εσπαγε ομως την πρωτη φορα που θα μπει η ιδια λιστα σε νεα
   σελιδα, σιωπηλα. Ο ιδιοκτητης ζητησε ρητα εγγυηση για τις αλλες σελιδες.

   ΔΙΠΛΗ ΚΛΑΣΗ `.x.x`: ανεβαζει την ειδικοτητα σε (0,3,0) εναντι (0,2,0) του
   αρχικου, ωστε να κερδιζει ΑΝΕΞΑΡΤΗΤΑ απο τη σειρα στο αρχειο — και χωρις
   `!important`, που θα εμποδιζε καθε μελλοντικη ρυθμιση απο τον builder.
   Πιανει και το κινητο: ο κανονας των ≤767.98 αγγιζει μονο το padding-top. */
body.nq-page-nea-ypiresies-demo5 .nq-services-list.nq-services-list {
  padding-bottom: 0;
}


/* nq-sec: Υπηρεσίες · Το «Μάθε περισσότερα» αποκτά τον κύκλο με το βέλος
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-08): «αυτά τα κουμπιά θέλουν ένα padding δεξιά,
   φαίνονται λάθος, και λείπει το κυκλάκι» — με δειγμα το εγκεκριμενο
   «Μίλησέ μας».

   ΕΝΑ ΑΙΤΙΟ, ΟΧΙ ΔΥΟ: το `padding: 0 6px 0 24px` ΔΕΝ ειναι λαθος — ειναι
   ακριβως το padding του εγκεκριμενου κουμπιου, και τα 6px δεξια ειναι το
   περιθωριο ΓΥΡΩ απο τον κυκλο των 38px. Χωρις τον κυκλο, το κειμενο κολλαει
   6px απο το περιγραμμα. Μολις μπει ο κυκλος, το padding γινεται σωστο μονο
   του — γι' αυτο δεν πειραχτηκε καμια τιμη padding.

   ΓΙΑΤΙ ΨΕΥΔΟΣΤΟΙΧΕΙΟ ΕΝΩ ΤΟ ΕΓΚΕΚΡΙΜΕΝΟ ΚΟΥΜΠΙ ΕΧΕΙ ΠΡΑΓΜΑΤΙΚΟ <i>:
   αυτο ΔΕΝ ειναι Button block — ειναι ο συνδεσμος «read more» του info_box,
   που το template του βγαζει σκετο `<a class="nq-ib-readmore">{{readmore_text}}</a>`
   χωρις υποδοχη εικονιδιου. Το να μπει <i> θα σημαινε αλλαγη στο ιδιο το
   custom element, δηλαδη σε ΚΑΘΕ info_box του site — δυσαναλογο ρισκο για ενα
   βελακι. Το ψευδοστοιχειο δινει το ιδιο ακριβως αποτελεσμα, τοπικα.

   ΟΙ ΤΙΜΕΣ ΕΙΝΑΙ ΜΕΤΡΗΜΕΝΕΣ ΠΑΝΩ ΣΤΟ ΕΓΚΕΚΡΙΜΕΝΟ ΚΟΥΜΠΙ, οχι επιλεγμενες:
   `i.nq-btn-ico.nq-bico-circle.fe.fe-arrow-right` = 38x38, radius 50%,
   bg #aaa7ff, color rgb(9,10,16), font-size 22px, font-family feather,
   display grid κεντραρισμενο. Το `\e911` ειναι ο κωδικος του `fe-arrow-right`
   στη γραμματοσειρα feather (διαβασμενος απο το ιδιο το CSS της).

   ΓΙΑΤΙ ΔΕΝ ΜΠΗΚΕ ΚΛΕΙΔΩΜΑ ΣΕ ΣΕΛΙΔΑ: το `.nq-svc` ζει ΜΟΝΟ μεσα στη
   `.nq-services-list`, που μετρηθηκε (2026-09-08) σε ΜΙΑ σελιδα — Υπηρεσιες 1,
   αρχικη 0, Σχετικα 0. Αρα σημερα δεν αγγιζει τιποτα αλλο. Και αν αυριο η ιδια
   λιστα μπει σε νεα σελιδα, το κουμπι ΠΡΕΠΕΙ να εχει τον κυκλο και εκει — ειναι
   διορθωση του component, οχι ρυθμιση της σελιδας. Γι' αυτο καθεται διπλα στον
   κανονα `.nq-svc .nq-ib-readmore` (γραμμη ~5338) και οχι σε page scope. */
body.nq-demo5 .nq-svc .nq-ib-readmore::after {
  content: "\e911";
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #aaa7ff;
  color: #090a10;
  font-family: feather;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}


/* nq-sec: Υπηρεσίες · Οι τρεις υπηρεσίες στο κινητό — τίτλος και κενό
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-08): «κατω απο 768 τα τρια blocks δεν εμφανιζουν
   σωστα τιτλο/υποτιτλο, εχουν μεγαλο κενο μεταξυ τους» + ρητη οδηγια
   `.nq-ib-title { max-width: 20ch }` στην ιδια αναλυση.

   ── ΤΟ ΚΕΝΟ, ΜΕΤΡΗΜΕΝΟ ──────────────────────────────────────────
   Αποσταση απο το «01» ως τον τιτλο:   desktop 12px  ·  390px  42px
   Η ζωνη ειναι grid τριων γραμμων στο κινητο (εικονα / αριθμος / σωμα) με
   `gap: 30px`. Στο desktop ο αριθμος και ο τιτλος ειναι σε ΓΕΙΤΟΝΙΚΑ κελια
   χωρις να μεσολαβει το gap των γραμμων· στο κινητο το gap μπαινει ΑΝΑΜΕΣΑ
   τους και προσθετει 30 στα 12. Δεν ηταν επιλογη — ηταν παρενεργεια της
   αλλαγης διαταξης.

   Η ΛΥΣΗ ΚΡΑΤΑΕΙ ΚΑΙ ΤΑ ΔΥΟ ΚΕΝΑ: `row-gap: 0` + `margin-top: 30px` στον
   αριθμο — εικονα→αριθμος μενει 30, αριθμος→τιτλος πεφτει στα 12.

   🔴 ΓΙΑΤΙ 0 ΚΑΙ ΟΧΙ 12: πρωτη προσπαθεια ηταν `row-gap: 12px`, με τη λογικη
   «θελω 12, βαζω 12». Μετρηθηκε 24. Η γραμμη του αριθμου ειναι 26.4px ψηλη ενω
   ο ιδιος ο αριθμος 14 — τα υπολοιπα 12.4 (line-height) καθονται ΚΑΤΩ απο
   αυτον και μετρανε ηδη ως κενο. Το gap ερχεται ΕΠΙΠΛΕΟΝ. Το σωστο κενο
   υπηρχε ηδη· επρεπε απλως να μη μπει τιποτα πανω του.

   ── Ο ΤΙΤΛΟΣ ────────────────────────────────────────────────────
   `max-width: 20ch` οπως δοθηκε. Το `ch` δενει το σπασιμο της γραμμης στο
   πλατος του «0» της ιδιας της γραμματοσειρας, οποτε ο τιτλος σπαει στο ιδιο
   σημειο ανεξαρτητα απο το πλατος της οθονης — γι' αυτο δεν μπηκε px.

   ΕΜΒΕΛΕΙΑ: `.nq-svc`, οπως και οι υπολοιποι κανονες αυτου του component
   (γραμμη ~5338) και οπως το εδωσε ο ιδιοκτητης. Μετρημενο (2026-09-08):
   `.nq-svc` υπαρχει σε ΜΙΑ σελιδα — Υπηρεσιες 3, αρχικη 0, Σχετικα 0. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-svc {
    row-gap: 0;
  }
  body.nq-demo5 .nq-svc .nq-ib-num {
    margin-top: 30px;
  }
  body.nq-demo5 .nq-svc .nq-ib-title {
    max-width: 20ch;
  }
}


/* nq-sec: Υπηρεσίες · Η ζώνη «Η Διαδικασία» γίνεται ΑΝΟΙΧΤΗ
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-08): «μονο σε αυτη τη σελιδα και μονο σε αυτο το
   section θελω να αλλαζει το background svg σε λευκο με γκρι αχνες τελειες,
   και τα κειμενα που ειναι λευκα να γινουν μαυρα».

   🔴 ΤΟ ΠΛΕΓΜΑ ΚΟΥΚΚΙΔΩΝ ΔΕΝ ΕΙΝΑΙ ΤΗΣ ΕΝΟΤΗΤΑΣ — ΕΙΝΑΙ ΚΑΘΟΛΙΚΟ.
   Ζει στο `.wbx-particles::before` (40-base.css), ενα `position: fixed`
   στρωμα σε ΟΛΟ το viewport, κοινο για καθε ενοτητα καθε σελιδας. Δεν υπαρχει
   τροπος να βαφτει «μονο εδω»: αλλαγη του `--wbx-dot-color` θα αλλαζε το φοντο
   ΟΛΟΥ του site οσο η ενοτητα ειναι στο κεντρο. Γι' αυτο η ενοτητα ΖΩΓΡΑΦΙΖΕΙ
   ΤΟ ΔΙΚΟ ΤΗΣ φοντο απο πανω: ιδιο βημα 18px, ιδιο σχημα κουκκιδας, ωστε να
   διαβαζεται ως η ιδια υφη σε ανοιχτη εκδοχη — οχι ως αλλο μοτιβο.

   ΤΟ `z-index: 1` ΔΕΝ ΕΙΝΑΙ ΔΙΑΚΟΣΜΗΤΙΚΟ: το καθολικο στρωμα ειναι
   `position: fixed; z-index: 0`, δηλαδη ΤΟΠΟΘΕΤΗΜΕΝΟ. Ενα απλο (στατικο)
   section ζωγραφιζεται ΚΑΤΩ απο τοποθετημενο στοιχειο ιδιου επιπεδου, οσο
   αδιαφανες φοντο κι αν του βαλεις. Χωρις το z-index το λευκο θα εμενε
   αορατο κατω απο τις κουκκιδες.

   ΤΑ ΜΩΒ ΜΕΝΟΥΝ ΜΩΒ: το αιτημα ελεγε «τα κειμενα που ειναι ΛΕΥΚΑ». Ο υπερτιτλος
   «ΠΩΣ ΔΟΥΛΕΥΟΥΜΕ», η παυλα του και ο μετρητης «01 / 04» ειναι #aaa7ff και δεν
   αγγιζονται — μετρημενα ενα προς ενα πριν την αλλαγη.

   ΓΙΑΤΙ ΚΛΑΣΗ ΚΑΙ ΟΧΙ id: η σελιδα εχει ενα `.nq-sec-process`, αλλα η κλαση
   `wbx-light` μπαινει/βγαινει απο τον Manager χωρις κωδικα και δουλευει και σε
   αλλη ενοτητα αν χρειαστει. Το `body.nq-page-nea-ypiresies-demo5` μπροστα
   ειναι η ρητη εντολη «μονο σε αυτη τη σελιδα». */
/* ⛔ ΕΔΩ ΗΤΑΝ ΤΟ ΛΑΘΟΣ, ΚΑΤΑΓΡΑΦΕΤΑΙ ΓΙΑ ΝΑ ΜΗΝ ΞΑΝΑΓΙΝΕΙ (2026-09-08):
   η πρωτη υλοποιηση εβαζε `background: #fff` + δικες της κουκκιδες ΣΤΟ ΙΔΙΟ ΤΟ
   section, με `z-index: 1` για να σκεπασει το καθολικο στρωμα. Λειτουργουσε,
   αλλα ηταν ΚΟΥΤΙ: ακαριαιο κοψιμο στα ορια της ενοτητας, χωρις μεταβαση.
   Ο ιδιοκτητης: «η μεταβαση να γινεται smooth σε ΟΛΟ το bg του body svg —
   το καναμε και στην αρχικη, Τουρισμος στην Κερκυρα».
   Ο σωστος δρομος ηταν ο ηδη υπαρχων μηχανισμος τονου (`--wbx-bg-tone`):
   μια μεταβλητη 0..1 που την εξομαλυνει το JS και βαφει το ΚΑΘΟΛΙΚΟ στρωμα.
   Η λευκη εκδοχη ζει τωρα στο `--wbx-bg-light` (40-base.css + particles.js).
   ΜΕΝΟΥΝ εδω μονο τα χρωματα των κειμενων, που ΕΙΝΑΙ της ενοτητας. */
/* ── ΤΑ ΚΕΙΜΕΝΑ ────────────────────────────────────────────────── */
body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slider,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqah-h,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slider h3,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slider__toolbar {
  color: #0b0b0f;
}
/* Τα κειμενα ΣΚΟΥΡΑΙΝΟΥΝ ΜΑΖΙ ΜΕ ΤΟ ΦΟΝΤΟ, δεν πεταγονται. Το 1.1s ειναι το
   ιδιο με το `transition: --wbx-dot-color` του `.wbx-particles` (40-base.css),
   ωστε κειμενο, κουκκιδες και φοντο να κινουνται ως ενα πραγμα.
   Το `prefers-reduced-motion` το σβηνει, οπως καθε αλλη κινηση. */
/* 🔴 ΕΔΩ ΗΤΑΝ ΤΟ `*` ΚΑΙ ΕΣΠΑΓΕ ΤΑ ΒΕΛΑΚΙΑ ΤΟΥ SLIDER (2026-09-09).
   Ο κανόνας ήταν γραμμένος `… .nq-process-slider *`, δηλαδή ΚΑΘΕ απόγονος —
   μαζί και τα `.swiper-wrapper` / `.swiper-slide`.

   ΤΙ ΑΚΡΙΒΩΣ ΓΙΝΟΤΑΝ: το Swiper βάζει INLINE `transition-duration: 320ms` και
   περιμένει το `transitionend` του **transform/opacity** για να θεωρήσει ότι
   τελείωσε η μετάβαση. Το inline όμως ορίζει μόνο τη ΔΙΑΡΚΕΙΑ — τη ΛΙΣΤΑ των
   ιδιοτήτων την έδινε αυτός ο κανόνας, και ήταν `color, border-color`. Άρα το
   transform/opacity δεν έκανε ποτέ transition, το `transitionend` δεν ερχόταν,
   και το Swiper έμενε για πάντα `animating: true`: το ΠΡΩΤΟ κλικ δούλευε, τα
   επόμενα αγνοούνταν. Μετρήθηκε `0→1→1→1`.

   ΜΑΘΗΜΑ: ποτέ `transition` με `*` μέσα σε ζώνη που περιέχει βιβλιοθήκη η
   οποία στηρίζεται σε transitionend. Απαριθμούμε τα στοιχεία που αλλάζουν
   χρώμα — είναι λίγα και γνωστά. */
body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slide h3,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slide p,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slider__toolbar,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst-name,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst-quote,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst-quote p,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqah-h,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqah-line {
  transition: color 1.1s ease, border-color 1.1s ease;
}
@media (prefers-reduced-motion: reduce) {
  body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slide h3,
  body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slide p,
  body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slider__toolbar,
  body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst-name,
  body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst-quote,
  body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst-quote p,
  body.nq-page-nea-ypiresies-demo5 .wbx-light .nqah-h,
  body.nq-page-nea-ypiresies-demo5 .wbx-light .nqah-line {
    transition: none;
  }
}
body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slider p {
  color: rgba(11, 11, 15, .72);   /* ηταν rgba(244,244,247,.76) — ιδια σχεση με το φοντο */
}
/* Οι γραμμες ηταν λευκες με χαμηλο alpha· γινονται μαυρες με το ιδιο. */
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqah-line,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slider__toolbar {
  border-color: rgba(0, 0, 0, .16);
}

/* ── ΤΑ ΜΩΒ ΓΙΝΟΝΤΑΙ ΓΚΡΙ (ιδιοκτητης, 2026-09-08) ────────────────
   «αλλαξε και τα subtitle, 01/04 και κουμπια απο #aaa7ff σε #707070 οταν
   αλλαζεις τα χρωματα του section».

   ΑΝΑΘΕΩΡΗΣΗ ΠΡΟΗΓΟΥΜΕΝΗΣ ΑΠΟΦΑΣΗΣ, ΚΑΤΑΓΡΑΦΕΤΑΙ: στην πρωτη υλοποιηση ειχα
   αφησει τα μωβ ανεπαφα, επειδη το αιτημα ελεγε «τα κειμενα που ειναι ΛΕΥΚΑ».
   Σωστο κατα γραμμα, λαθος στο αποτελεσμα — το #aaa7ff ειναι φτιαγμενο για
   σκουρο φοντο και πανω στο λευκο εβγαινε ξεπλυμενο.

   ΤΑ ΤΕΣΣΕΡΑ ΣΗΜΕΙΑ, ΜΕΤΡΗΜΕΝΑ ΕΝΑ ΠΡΟΣ ΕΝΑ ΠΡΙΝ ΓΡΑΦΤΕΙ Ο ΚΑΝΟΝΑΣ — γιατι
   το καθενα κουβαλαει το χρωμα σε ΑΛΛΗ ιδιοτητα και ενα σκετο `color` θα
   αφηνε τα μισα μωβ:
     .nqah-sub                    → color
     .nqah-dash                   → color ΚΑΙ background-color (ειναι μπαρα)
     .nq-process-slider__count    → color
     .__controls button           → color ΚΑΙ border-color (1px κυκλος)

   Το `currentColor` του βελους μεσα στα κουμπια ακολουθει το `color`, οποτε
   δεν χρειαζεται δικος του κανονας. */
/* 🔴 ΤΟ ΥΠΕΡΤΙΤΛΟ ΚΑΙ Η ΠΑΥΛΑ ΔΕΝ ΑΛΛΑΖΟΥΝ ΜΕ ΚΑΝΟΝΑ — ΕΧΟΥΝ INLINE STYLE.
   Μετρημενο ζωντανα, το `adv_heading` του builder βγαζει πανω στο στοιχειο:
     .nqah-sub   style="…color: var(--nq-accent-2)…"
     .nqah-dash  style="…background: var(--nq-accent-2)…"
   (μπηκε απο τα πεδια `s_color` / `s_dash_color`). Το inline νικαει καθε
   κανονα φυλλου στυλ — η πρωτη εκδοχη αυτου του μπλοκ εγραφε `color: #707070`
   και ΔΕΝ επιασε: μετρηθηκε 170,167,255 ενω ο μετρητης και τα κουμπια ειχαν
   ηδη γινει γκρι.

   Η ΛΥΣΗ ΔΕΝ ΕΙΝΑΙ `!important` — ειναι Η ΙΔΙΑ Η ΜΕΤΑΒΛΗΤΗ. Το inline δεν
   κουβαλαει χρωμα, κουβαλαει ΑΝΑΦΟΡΑ σε μεταβλητη· ξαναοριζοντας την πανω στην
   ενοτητα, το inline λυνεται σε γκρι μονο του. Ετσι ο builder παραμενει
   κυριαρχος (αν αυριο μπει αλλο `s_color`, θα ισχυσει), ενω το `!important` θα
   κλειδωνε το χρωμα στον κωδικα.

   ΓΙΑΤΙ ΕΙΝΑΙ ΑΣΦΑΛΕΣ ΕΔΩ: η μεταβλητη ξαναοριζεται ΣΤΗΝ ΕΝΟΤΗΤΑ, οχι στη
   ριζα — ισχυει μονο για τους απογονους της. Ελεγχθηκε οτι μεσα σε αυτη τη
   ζωνη το `--nq-accent-2` το χρησιμοποιουν ΜΟΝΟ αυτα τα δυο. */
body.nq-page-nea-ypiresies-demo5 .wbx-light {
  --nq-accent-2: #707070;
}
body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slider__count,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slider__controls button {
  color: #707070;
}
body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slider__controls button {
  border-color: #707070;
}
/* Ιδιος χρονος με τα υπολοιπα, ωστε να γυρνανε ολα μαζι. */
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqah-sub,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqah-dash,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slider__count,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slider__controls button {
  transition: color 1.1s ease, background-color 1.1s ease, border-color 1.1s ease;
}
@media (prefers-reduced-motion: reduce) {
  body.nq-page-nea-ypiresies-demo5 .wbx-light .nqah-sub,
  body.nq-page-nea-ypiresies-demo5 .wbx-light .nqah-dash,
  body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slider__count,
  body.nq-page-nea-ypiresies-demo5 .wbx-light .nq-process-slider__controls button {
    transition: none;
  }
}


/* nq-sec: Υπηρεσίες · Ο τίτλος «Η Διαδικασία» στη μεγάλη κλίμακα
   ΔΟΘΗΚΕ ΩΣ ΚΑΝΟΝΑΣ (ιδιοκτητης, 2026-09-08):
     `.nqce-adv_heading[data-nqah-ml] .nqah-h { max-width:9ch;
        font-size:clamp(48px,5vw,72px); line-height:.98; letter-spacing:-.045em }`

   🔴 Ο ΕΠΙΛΟΓΕΑΣ ΑΛΛΑΞΕ, ΟΙ ΤΙΜΕΣ ΟΧΙ. Το `[data-nqah-ml]` ΔΕΝ ξεχωριζει
   τιποτα: μετρηθηκε ζωντανα σε ΚΑΘΕ adv_heading — Υπηρεσιες 3/3, Σχετικα 4/4,
   αρχικη 8/8. Ο κανονας οπως δοθηκε θα αλλαζε 15 τιτλους σε τρεις σελιδες,
   μαζι με τα hero («Οι Υπηρεσιες Μας», «Φτιαγμενο στην Κερκυρα»). Ρωτηθηκε ο
   ιδιοκτητης και επιβεβαιωσε: ΜΟΝΟ «Η Διαδικασια».

   ΟΙ ΙΔΙΕΣ ΔΗΛΩΣΕΙΣ ΥΠΑΡΧΟΥΝ ΗΔΗ στη γραμμη ~4889, για το
   `.nq-project-contact__head` — απο εκει προηλθαν. ΔΕΝ ενοποιηθηκαν σε κοινο
   κανονα επιτηδες: ειναι δυο ΑΝΕΞΑΡΤΗΤΕΣ αποφασεις σχεδιασης που τυχαινει να
   συμπιπτουν σημερα. Κοινος επιλογεας θα εδενε τη μοιρα τους — αλλαγη στο ενα
   θα μετακινουσε σιωπηλα το αλλο.

   ΤΟ `.wbx-light` ΣΤΟΝ ΕΠΙΛΟΓΕΑ κανει διπλη δουλεια: κλειδωνει στην ενοτητα
   (η σελιδα εχει τρια adv_heading) και ανεβαζει την ειδικοτητα πανω απο τον
   βασικο κανονα του component. */
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqah-h {
  max-width: 9ch;
  font-size: clamp(48px, 5vw, 72px);
  line-height: .98;
  letter-spacing: -.045em;
}


/* nq-sec: Υπηρεσίες · Η εικόνα κάθε υπηρεσίας μικρότερη και κεντραρισμένη στο κινητό
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-08): «μονο για mobile `.nqce-info_box .nq-ib-img
   { max-width: 70% }` αλλα να ειναι κεντραρισμενες στη μεση της οθονης».

   🔴 Ο ΕΠΙΛΟΓΕΑΣ ΣΤΕΝΕΨΕ ΣΕ `.nq-svc`. Το `.nqce-info_box .nq-ib-img` οπως
   δοθηκε πιανει ΚΑΙ ΤΗΝ ΑΡΧΙΚΗ: μετρηθηκαν 6 τετοιες εικονες εκει (εικονιδια
   65x65 μεσα σε `.nq-ji-shape-custom`) — θα ειχαν γινει 70% σιωπηλα. Το
   `.nq-svc` ζει μονο σε αυτη τη σελιδα (μετρημενο: Υπηρεσιες 3, αρχικη 0,
   Σχετικα 0), οποτε η αλλαγη μενει εκει που ζητηθηκε.

   ΔΥΟ ΔΗΛΩΣΕΙΣ ΧΡΕΙΑΖΟΝΤΑΙ, ΟΧΙ ΜΙΑ. Η αλυσιδα ειναι
     .nqce-info_box (327) > .nq-ib-icon-box (288) > .nq-ji-shape-simple > img
   Το `.nq-ib-icon-box` ειναι 288 και ξεκιναει 20px μεσα απο την καρτα, δηλαδη
   ΔΕΝ ειναι κεντραρισμενο το ιδιο. Σκετο `margin-inline: auto` στην εικονα θα
   την κεντραρε μεσα σε ΑΥΤΟ, οχι στην καρτα — μετατοπισμενη κατα 20px. Γι'
   αυτο το κουτι γινεται πρωτα πληρους πλατους.

   ⚠️ ΤΟ ΚΕΝΤΡΟ ΕΙΝΑΙ ΤΗΣ ΚΑΡΤΑΣ, ΟΧΙ ΤΗΣ ΟΘΟΝΗΣ — ΚΑΙ ΕΙΝΑΙ ΤΟ ΣΩΣΤΟ.
   Η ιδια η καρτα καθεται 24px απο αριστερα και 39 απο δεξια στα 390 (κληρονομια
   του `.nq-services-list__inner`), αρα το κεντρο της ειναι 187.5 ενω της οθονης
   195. Κεντραρισμα στην ΟΘΟΝΗ θα εβγαζε την εικονα 7.5px δεξιοτερα απο τον
   τιτλο και το κειμενο της ιδιας καρτας — θα φαινοταν στραβη σε σχεση με αυτα
   που εχει απο κατω. Αν ποτε ζητηθει απολυτο κεντραρισμα, το σωστο ειναι να
   διορθωθει η ασυμμετρια της ΚΑΡΤΑΣ, οχι να μετακινηθει η εικονα μονη της. */
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-svc .nq-ib-icon-box {
    width: 100%;
  }
  body.nq-demo5 .nq-svc .nq-ib-img {
    max-width: 70%;
    margin-inline: auto;
  }
}


/* nq-sec: Υπηρεσίες · Η «Διαδικασία» πέρασε σε block (ιδιοκτήτης, 2026-09-09)
   Η ζώνη είναι πλέον ΔΥΟ ΣΤΟΙΧΕΙΑ μέσα στο `.nq-process-slider__inner`:
     [adv_heading]  αριστερά (1.15fr)   ·   [testimonials, mode panel]  δεξιά (1fr)
   Δηλαδή ΑΚΡΙΒΩΣ η δομή για την οποία γράφτηκε το grid — γι' αυτό δεν
   χρειάζεται κανένας κανόνας διάταξης εδώ.

   ΤΟ RAW HTML ΑΦΑΙΡΕΘΗΚΕ. Ό,τι έδειχνε ζει τώρα στο block· το script που το
   κινούσε (page asset, 1023 chars, `data-process-*`) έμεινε στη σελίδα και
   πλέον δεν βρίσκει στοιχεία — αδρανές, ασφαλές να σβηστεί από τα Assets.
   Αντίγραφό του: scratchpad/proc-script-BACKUP.js */

/* ── ΤΑ ΧΡΩΜΑΤΑ ΤΟΥ ΝΕΟΥ ΠΑΝΕΛ ΣΤΗ ΛΕΥΚΗ ΖΩΝΗ ───────────────────
   Οι κανονες του `wbx-light` πιο πανω ειναι γραμμενοι για τα
   `.nq-process-slider__*` του Raw HTML. Το block βγαζει ΑΛΛΕΣ κλασεις
   (`.nqtst-*` + τα swiper), αρα δεν τα επιανε τιποτα: ΜΕΤΡΗΘΗΚΕ ο τιτλος
   **λευκος πανω σε λευκο**, δηλαδη αορατος. Ιδιες τιμες με τις αντιστοιχες
   του Raw HTML, ωστε οι δυο εκδοχες να μη διαφερουν οσο συνυπαρχουν. */
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst-name {
  color: #0b0b0f;
}
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst-quote {
  color: rgba(11, 11, 15, .72);
}
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst .swiper-pagination,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst .swiper-button-prev,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst .swiper-button-next {
  color: #707070;
}
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst .swiper-button-prev,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst .swiper-button-next {
  border-color: #707070;
}
/* ΤΟ HOVER ΤΩΝ ΚΟΥΜΠΙΩΝ ΜΕΣΑ ΣΤΗ ΛΕΥΚΗ ΖΩΝΗ.
   Το block δίνει μωβ γέμισμα (#aaa7ff) στο hover — σωστό στο σκούρο, ΛΑΘΟΣ
   εδώ: τα κουμπιά είναι ήδη γκρι #707070 κατ' αίτημα, και ένα μωβ γέμισμα θα
   έσπαγε τη γκρίζα παλέτα της ζώνης. Ίδια κίνηση (ανασήκωμα 2px), γκρίζο
   γέμισμα. */
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst .swiper-button-prev:hover,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst .swiper-button-next:hover,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst .swiper-button-prev:focus-visible,
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst .swiper-button-next:focus-visible {
  background: #707070;
  color: #ffffff;
}
/* Η ΟΡΙΖΟΝΤΙΑ ΓΡΑΜΜΗ ΚΑΤΩ ΑΠΟ ΤΗ ΜΠΑΡΑ.
   🔴 ΕΙΝΑΙ ΨΕΥΔΟΣΤΟΙΧΕΙΟ, ΟΧΙ ΤΟ WRAPPER. Ο κανόνας εδώ έδειχνε στο
   `.swiper-wrapper`, εκεί που ήταν η γραμμή στην ΠΡΩΤΗ εκδοχή του panel mode.
   Όταν ξαναγράφτηκε το CSS (για να μην πειράζουμε το `display` του `.swiper`),
   η γραμμή μετακόμισε στο `.swiper::before` και αυτός ο κανόνας έμεινε να
   δείχνει στο κενό: μέσα στη λευκή ζώνη η γραμμή έμενε ΛΕΥΚΗ ΣΕ ΛΕΥΚΟ, δηλαδή
   αόρατη. Το ίδιο ίχνος με τη γνωστή παγίδα του project: το `*` δεν πιάνει
   ψευδοστοιχεία — ούτε τα πιάνει κανόνας γραμμένος για άλλο στοιχείο. */
body.nq-page-nea-ypiresies-demo5 .wbx-light .nqtst .swiper::before {
  border-top-color: rgba(0, 0, 0, .16);
}


/* nq-sec: Υπηρεσίες · Η «Διαδικασία» σε ΔΥΟ ΠΡΑΓΜΑΤΙΚΕΣ ΣΤΗΛΕΣ
   ΔΟΜΗ ΤΟΥ ΙΔΙΟΚΤΗΤΗ (2026-09-09) — να ΜΗΝ αλλάξει:
     [vc_row .nq-process-slider]
       [vc_column 1/2 .nq-process-slider__inner]  adv_heading
       [vc_column 1/2]                            testimonials (mode: panel)

   🔴 ΤΙ ΕΣΠΑΓΕ: η κλάση `nq-process-slider__inner` κουβαλάει απο παλιά
     `body.nq-demo5 .nq-process-slider__inner { display:grid;
        grid-template-columns: 1.15fr 1fr; width:100%; max-width:100% }`
   Γράφτηκε όταν η ζώνη ήταν ΜΙΑ στήλη που έκανε η ίδια το grid. Τώρα κάθεται
   σε `col-lg-6`, και το `width:100%` νικάει το 50% του Bootstrap: ΜΕΤΡΗΘΗΚΕ η
   αριστερή στήλη **1116px** — όλο το πλάτος — και το Testimonials τυλιγόταν
   ΑΠΟ ΚΑΤΩ (87→621). Αυτό έδειχνε το «άδειο πάνελ», όχι τα κουμπιά.

   ΔΕΝ ΠΕΙΡΑΖΩ ΤΟΝ ΠΑΛΙΟ ΚΑΝΟΝΑ: το `.nq-process-slider__inner` μπορεί να
   ζήσει και ως μονή στήλη σε άλλη σελίδα. Ακυρώνεται ΜΟΝΟ όταν είναι
   πραγματική στήλη γραμμής (`.pb-col`), που είναι ακριβώς η νέα δομή.

   ΟΙ ΑΝΑΛΟΓΙΕΣ ΕΙΝΑΙ ΟΙ ΑΡΧΙΚΕΣ, ΟΧΙ 50/50: το grid έδινε 1.15fr / 1fr,
   δηλαδή μετρημένα 522 / 454 σε ζώνη 1116 → 53.5% / 46.5%. Με σκέτο Bootstrap
   θα έβγαινε 558/558 και το πάνελ θα ήταν πλατύτερο απ' ό,τι σχεδιάστηκε. */
@media (min-width: 992px) {
  body.nq-page-nea-ypiresies-demo5 .nq-sec-process .pb-row > .pb-col.nq-process-slider__inner {
    display: block;
    flex: 0 0 auto;
    width: 53.5%;
    max-width: 53.5%;
  }
  body.nq-page-nea-ypiresies-demo5 .nq-sec-process .pb-row > .pb-col.nq-process-slider__inner ~ .pb-col {
    flex: 0 0 auto;
    width: 46.5%;
    max-width: 46.5%;
  }
}


/* nq-sec: Εταιρική ταυτότητα · Η ΔΕΥΤΕΡΗ παράγραφος της ζώνης «Τι σχεδιάζουμε»
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-09): σύγκριση με το mockup — η δεύτερη παράγραφος
   έβγαινε 16px/24 ενώ το mockup τη θέλει 18px/28.8 και πιο ξεθωριασμένη.

   ΓΙΑΤΙ ΔΕΝ ΥΠΗΡΧΕ: η κλάση `nq-made-corfu__brand-copy` δεν είχε κανόνα στο
   θέμα — η «Σχετικά» έχει ΜΙΑ παράγραφο σε αυτή τη ζώνη (`__lead`), οπότε
   δεύτερη δεν χρειάστηκε ποτέ. Η νέα σελίδα είναι η πρώτη με δύο.

   ΤΙΜΕΣ ΑΠΟ ΤΟ MOCKUP: `font-size: clamp(18px, 1.65vw, 18px)` (δηλαδή σταθερά
   18), `font-weight: 300`, `line-height: 1.6`, ίδιο πλάτος και χρώμα με το lead.

   🔴 ΤΟ `margin-top` ΕΙΝΑΙ 30 ΚΑΙ ΟΧΙ 18 ΤΟΥ MOCKUP: ακολουθεί το `__lead` του
   θέματος, που ο ιδιοκτήτης είχε ζητήσει ρητά πιο αέρινο (2026-09-05). Δύο
   διαφορετικά κενά στην ίδια στοίβα θα φαινόταν λάθος.

   ΤΟ `.B_wrapper` ΜΗΔΕΝΙΖΕΤΑΙ όπως και στο lead: κάθε Text Block είναι `.row`
   με margin -12px και `.row > *` βάζει 12px padding — χωρίς αυτό το max-width
   βγαίνει 24px μικρότερο. */
body.nq-demo5 .nq-made-corfu__brand-copy {
  max-width: 820px;
  margin: 30px auto 0;
  color: #c8c8d2;
  font-size: clamp(18px, 1.65vw, 18px);
  font-weight: 300;
  line-height: 1.6;
}
body.nq-demo5 .nq-made-corfu__brand-copy .B_wrapper {
  padding-inline: 0;
}
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-made-corfu__brand-copy {
    margin-top: 24px;
    font-size: 16px;
  }
}


/* nq-sec: Εταιρική ταυτότητα · Η κυματιστή γραμμή στο τέλος της ζώνης
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-09): λείπει το μεγάλο διακοσμητικό του mockup.

   ΔΥΟ ΔΙΑΦΟΡΕΤΙΚΑ ΔΙΑΧΩΡΙΣΤΙΚΑ ΣΤΗΝ ΙΔΙΑ ΖΩΝΗ — μην τα μπερδέψεις:
     `.nq-made-corfu__separator`        μικρό, 210x2, ΚΑΤΩ ΑΠΟ ΤΟΝ ΤΙΤΛΟ.
                                        Είναι <span> + gradient, χωρίς αρχείο.
     `.nq-made-corfu__brand-separator`  μεγάλο, 1200x48, ΣΤΟ ΤΕΛΟΣ της ζώνης.
                                        Είναι SVG αρχείο — έχει ΚΑΜΠΥΛΗ, που
                                        δεν βγαίνει με gradient όπως το μικρό.

   ΓΙΑΤΙ ΕΞΩΤΕΡΙΚΟ ΑΡΧΕΙΟ ΚΑΙ ΟΧΙ INLINE: το SVG έχει `<linearGradient id=…>`
   και `<filter id=…>`. Inline σε σελίδα, τα id είναι ΚΑΘΟΛΙΚΑ — αν μπει η ίδια
   ζώνη δεύτερη φορά (ή σε άλλη ενότητα), τα διπλά id σπάνε σιωπηλά το ένα από
   τα δύο. Ως αρχείο, το κάθε <img> έχει δικό του έγγραφο και δικό του χώρο id.

   ΤΙΜΕΣ ΑΠΟ ΤΟ MOCKUP: πλάτος `min(100%, 1200px)`, ύψος 48, πάνω κενό
   `clamp(64px, 7vw, 100px)`. Το `preserveAspectRatio="none"` του αρχείου
   επιτρέπει να τεντώνεται σε πλάτος χωρίς να ψηλώνει. */
body.nq-demo5 .nq-made-corfu__brand-separator {
  display: block;
  width: min(100%, 1200px);
  margin: clamp(64px, 7vw, 100px) auto 0;
}
/* 🔴 ΤΟ `single_image` ΓΡΑΦΕΙ INLINE `style="height:auto"` ΣΤΗΝ ΕΙΚΟΝΑ.
   Το inline νικάει κάθε κανόνα φύλλου στυλ, οπότε ένα `height: 48px` εδώ ΔΕΝ
   έπιανε — μετρήθηκε 300x185. Η λύση δεν είναι `!important` (θα κλείδωνε το
   ύψος και σε κάθε άλλη χρήση): δόθηκαν `width="1200" height="48"` ΣΤΟ ΙΔΙΟ
   ΤΟ ΑΡΧΕΙΟ SVG. Χωρίς αυτά ο browser δίνει σε SVG το προεπιλεγμένο 300x150,
   και το `height:auto` το κρατούσε σε αυτή την αναλογία.

   ΤΟ `.nq-si-box` ΕΙΝΑΙ inline-block: μαζευόταν στο πλάτος της εικόνας (300px)
   και την κεντράριζε — γι' αυτό η γραμμή φαινόταν μικρή στη μέση αντί να
   πιάνει όλο το πλάτος. */
body.nq-demo5 .nq-made-corfu__brand-separator .nq-si-box {
  display: block;
  width: 100%;
}
body.nq-demo5 .nq-made-corfu__brand-separator img {
  display: block;
  width: 100%;
  /* ΡΗΤΗ ΑΝΑΛΟΓΙΑ, ΩΣΤΕ ΤΟ ΥΨΟΣ ΝΑ ΜΗΝ ΕΞΑΡΤΑΤΑΙ ΑΠΟ ΤΟ ΑΡΧΕΙΟ: με σκέτο
     `height:auto` (που το επιβάλλει inline το single_image) ο browser βγάζει το
     ύψος από τις εγγενείς διαστάσεις του SVG. Αν κάποτε ξαναγραφτεί το αρχείο
     χωρίς `width`/`height`, το προεπιλεγμένο 300x150 θα το έκανε ξανά κοντό και
     χοντρό. Με το `aspect-ratio` η γραμμή μένει 1200:48 ό,τι κι αν γίνει. */
  /* 🔴 ΥΨΟΣ ΜΕ min/max ΚΑΙ ΟΧΙ `height`: το `single_image` γραφει INLINE
     `style="height:auto"` και το inline νικαει καθε `height` του φυλλου στυλ.
     Τα `min-height`/`max-height` ειναι ΑΛΛΕΣ ιδιοτητες — δεν συγκρουονται με
     το inline, και μαζι κλειδωνουν το υψος στα 48 χωρις `!important`.

     ΓΙΑΤΙ ΕΧΕΙ ΣΗΜΑΣΙΑ: το SVG ειναι `preserveAspectRatio="none"`, δηλαδη
     ΤΕΝΤΩΝΕΤΑΙ. Με `height:auto` σε πλατος 920 το υψος επεφτε στα ~37 και το
     κυμα πλακωνε τοσο που φαινοταν ΙΣΙΑ ΓΡΑΜΜΗ. Το αρχειο ειναι ακριβως το
     ιδιο με του mockup (ιδια `d` των path) — μονο το υψος εφταιγε. */
  min-height: 48px;
  max-height: 48px;
}


/* nq-sec: Εταιρική ταυτότητα · Το banner «Branding»
   ΥΛΙΚΟ ΑΠΟ ΤΟΝ ΙΔΙΟΚΤΗΤΗ (zip, 2026-09-09): index.html + style.css + εικόνα
   φόντου + εικονίδιο. Οι τιμές είναι ΤΟΥ ΥΛΙΚΟΥ, μεταφερμένες στη δομή του
   builder — δεν επιλέχθηκε τίποτα με το μάτι.

   ΤΙ ΑΛΛΑΞΕ ΣΕ ΣΧΕΣΗ ΜΕ ΤΟ ΥΛΙΚΟ, ΚΑΙ ΓΙΑΤΙ:
   1) ΓΡΑΜΜΑΤΟΣΕΙΡΑ: το style.css φορτώνει Poppins. ΔΕΝ μπήκε — το site τρέχει
      Averta παντού και μια δεύτερη οικογένεια σε ένα μόνο banner θα χτυπούσε.
   2) ΔΟΜΗ: το υλικό έχει <section> με δύο παιδιά. Εδώ η γραμμή του builder
      είναι το banner και οι δύο στήλες τα παιδιά — γι' αυτό το grid πάει στο
      `.pb-row` (η κλάση της γραμμής προσγειώνεται στο `.pb-row-box`).
   3) Η εικόνα φόντου έγινε WebP: 1.26 MB → 31 KB, ίδιες διαστάσεις.

   ΤΟ ΠΛΑΤΟΣ ΕΥΘΥΓΡΑΜΜΙΖΕΤΑΙ ΜΕ ΤΗ ΣΕΛΙΔΑ (αίτημα 2026-09-09): αρνητικό
   περιθώριο -12px που ακυρώνει το padding του `.container`, ώστε το banner να
   φτάνει ακριβώς εκεί που φτάνει και η μπάρα του showcase. */
/* ═══ BANNER «BRANDING» — ΠΑΚΕΤΟ PURE SVG (ιδιοκτήτης, 2026-09-09) ═══
   Αρχεία: branding-banner-bg.svg (viewBox 1600x340) + branding-icon.svg (300x300)

   ΓΙΑΤΙ SVG ΚΑΙ ΟΧΙ ΕΙΚΟΝΑ: το προηγούμενο branding-bg.png ήταν
   1672x941 (αναλογία 1.78) με τα φωτεινά κύματα στις ΑΚΡΕΣ. Σε banner
   ~4.7:1 το cover έδειχνε μόνο τη μαύρη μέση. Το νέο είναι σχεδιασμένο
   ΑΠΕΥΘΕΙΑΣ σε 1600x340 — στην αναλογία που το χρειαζόμαστε — και ως
   διάνυσμα δεν χάνει ποιότητα σε καμία ανάλυση.

   ΑΝΤΙΣΤΟΙΧΙΣΗ ΜΕ ΤΗ ΔΟΜΗ ΤΟΥ BUILDER:
     .wbx-brand-stage      -> το section
     .wbx-brand-banner     -> η γραμμή (.pb-row-box.branding-banner)
     .wbx-brand-bg <img>   -> background-image του banner (object-fit:fill == 100% 100%)
     .wbx-brand-inner      -> το .pb-row (grid)
     .wbx-brand-icon-shell -> η 1η στήλη
     .wbx-brand-copy       -> η 2η στήλη */
body.nq-demo5 .nq-brand-showcase-intro {
  position: relative;
  isolation: isolate;
}
/* Ο χώρος του καθρέφτη μπαίνει στο .container: ο builder γράφει INLINE
   padding-bottom:0px στο section από το πεδίο pb, και το inline νικάει. */
body.nq-demo5 .nq-brand-showcase-intro > .container {
  padding-bottom: 125px;
}
body.nq-demo5 .nq-brand-showcase-intro::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 5%;
  right: 5%;
  top: calc(100% - 124px);
  height: 86px;
  pointer-events: none;
  background: radial-gradient(ellipse at top,
    rgba(140, 116, 255, .26) 0%,
    rgba(77, 112, 255, .11) 35%,
    rgba(6, 6, 8, 0) 72%);
  filter: blur(16px);
}
body.nq-demo5 .nq-brand-showcase-intro::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 4%;
  right: 4%;
  top: calc(100% - 126px);
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(89, 202, 255, .18) 14%,
    rgba(140, 116, 255, .88) 50%,
    rgba(107, 76, 255, .28) 86%,
    transparent 100%);
  box-shadow:
    0 0 8px rgba(140, 116, 255, .60),
    0 0 24px rgba(77, 112, 255, .26);
  opacity: 0.3;
}

body.nq-demo5 .branding-banner {
  /* ΤΟ `position: relative` ΕΦΥΓΕ ΑΛΛΑ ΤΟ ΣΤΟΙΧΕΙΟ ΜΕΝΕΙ ΤΟΠΟΘΕΤΗΜΕΝΟ:
     το δινει το `.pb-row-box { position: relative }` του builder. Χωρις καποιο
     απο τα δυο, το `z-index: 2` πιο κατω δεν θα ειχε καμια ισχυ. */
  z-index: 2;
  margin-inline: -12px;
  min-height: 270px;
  overflow: hidden;
  border: 1px solid rgb(140 116 255 / 29%);
  border-radius: 45px;
  background: #05041a url("../assets/demo5/branding-banner-bg.svg") center / 100% 100% no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 0 46px rgba(107, 76, 255, .08),
    0 0 0 1px rgba(77, 112, 255, .055),
    0 0 16px rgba(107, 76, 255, .22),
    0 18px 48px rgba(0, 0, 0, .52);
}

/* ── ΚΑΘΡΕΦΤΗΣ ΠΟΥ ΔΟΥΛΕΥΕΙ ΚΑΙ ΣΤΟΝ FIREFOX ────────────────────────
   Ένα πραγματικό αντίγραφο του banner, αναποδογυρισμένο με scaleY(-1)
   και σβησμένο με mask-image — και τα δύο τα υποστηρίζουν ΟΛΟΙ οι
   browsers. Έτσι Chrome και Firefox δείχνουν το ΙΔΙΟ πράγμα, αντί για
   δύο διαφορετικές τεχνικές με διαφορετικό αποτέλεσμα.

   ΓΙΑΤΙ height:0 ΚΑΙ overflow:visible: ο χώρος του καθρέφτη υπάρχει ήδη
   ως padding-bottom στο .container. Αν ο καθρέφτης έπιανε κανονικό ύψος
   στη ροή, θα μεγάλωνε το section και οι δύο γραμμές του «πατώματος»
   (top: calc(100% - 126px)) θα έφευγαν από τη θέση τους. Χωρίς κόψιμο
   σβήνει μόνος του, όπως ακριβώς και το box-reflect. */
/* Η ΚΛΑΣΗ ΓΡΑΦΕΤΑΙ ΔΥΟ ΦΟΡΕΣ — ΚΑΙ ΕΙΝΑΙ ΑΠΑΡΑΙΤΗΤΟ.
   Με μια, ο κανονας ειναι (0,2,0), ΙΔΙΟΣ με το `body.nq-demo5 .branding-banner`
   του @media (max-width:700px) πιο κατω. Ισοπαλια ειδικοτητας -> κερδιζει
   ο ΤΕΛΕΥΤΑΙΟΣ, δηλαδη το media query. Αποτελεσμα: κατω απο 700 το banner
   ξαναεπαιρνε το -webkit-box-reflect ΜΑΖΙ με τον καθρεφτη του JS — δυο
   ειδωλα, και το δευτερο ΑΚΛΙΠΑΡΙΣΤΟ (474px στο κινητο), που επεφτε πανω
   στο επομενο section. Η επαναληψη το κανει (0,3,0) και κερδιζει παντου.

   ΟΧΙ none: ο Chrome το απορριπτει ως ακυρη τιμη (CSS.supports=false). */
body.nq-demo5 .branding-banner--has-mirror.branding-banner--has-mirror {
  -webkit-box-reflect: unset;
}
body.nq-demo5 .branding-banner-mirror {
  position: relative;
  z-index: 2;
  /* ΚΛΕΙΔΩΜΕΝΟ ΥΨΟΣ, ΟΧΙ height:0.
     Στο 150px απο τα 309px του banner (48.5%) το mask ειναι ηδη στο .02 —
     αορατο. Το overflow:hidden ομως εγγυαται οτι ο καθρεφτης ΔΕΝ μπορει να
     πεσει πανω στο επομενο section, ακομη κι αν καποιος browser αγνοησει
     το mask. Το ισοποσο αρνητικο margin-bottom το κρατα εκτος ροης, ωστε
     να μη μετακινηθουν οι δυο γραμμες του «πατωματος» του section. */
  height: 150px;
  margin-top: -8px;
  margin-bottom: -150px;
  margin-inline: -12px;
  overflow: hidden;
  pointer-events: none;
}
body.nq-demo5 .branding-banner-mirror > .branding-banner--mirror {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  margin: 0;
  transform: scaleY(-1);
  /* Το αντιγραφο κληρονομει το box-reflect του banner: χωρις αυτο, ο Chrome
     ζωγραφιζει καθρεφτη ΤΟΥ ΚΑΘΡΕΦΤΗ. Και το mask δεν πρεπει να επαναλαμβανεται,
     αλλιως βαφει και τα pixel που πεφτουν εξω απο το border-box. */
  -webkit-box-reflect: unset;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  /* ΤΟ MASK ΓΡΑΦΕΤΑΙ ΑΝΑΠΟΔΑ (to top): εφαρμόζεται ΠΡΙΝ το scaleY(-1),
     οπότε το τοπικό κάτω άκρο καταλήγει οπτικά πάνω. Οι τιμές είναι
     οι ίδιες με του box-reflect πιο πάνω. */
  /* Το mask κουβαλαει ΚΑΙ την ενταση (.24 στην κορυφη) ΚΑΙ την καμπυλη
     σβησιματος — ακριβως οι τιμες του box-reflect. Το opacity ως εφεδρικο
     μπαινει πιο κατω, σε @supports, ΜΟΝΟ οπου λειπει το mask. */
  /* ΣΕ PIXEL, ΟΧΙ ΣΕ ΠΟΣΟΣΤΑ — ΑΥΤΟ ΗΤΑΝ ΤΟ ΛΑΘΟΣ.
     Το mask εφαρμοζεται στο ΑΝΤΙΓΡΑΦΟ, που εχει το υψος του banner. Με
     ποσοστα το σβησιμο δενοταν σε αυτο: στον υπολογιστη το banner ειναι
     272px και το 73% εβγαινε 199px, αλλα στο κινητο ειναι 472px και το 58%
     εβγαινε 274px — δηλαδη ο καθρεφτης ηθελε 274px για να σβησει ενω ο
     χωρος κατω απο το banner ειναι 74px. Ετσι κοβοταν απoτομα και ξεφευγε
     απο το section. Σε px το σβησιμο ειναι ΤΟ ΙΔΙΟ σε καθε αναλυση. */
  -webkit-mask-image: linear-gradient(to top,
    rgba(0, 0, 0, .32) 0,
    rgba(0, 0, 0, .18) 22px,
    rgba(0, 0, 0, .095) 47px,
    rgba(0, 0, 0, .028) 77px,
    rgba(0, 0, 0, 0) 110px);
  mask-image: linear-gradient(to top,
    rgba(0, 0, 0, .32) 0,
    rgba(0, 0, 0, .18) 22px,
    rgba(0, 0, 0, .095) 47px,
    rgba(0, 0, 0, .028) 77px,
    rgba(0, 0, 0, 0) 110px);
}
/* ΕΦΕΔΡΙΚΟ ΓΙΑ BROWSER ΧΩΡΙΣ mask-image.
   Εκει το αντιγραφο θα εβγαινε ατοφιο (opacity 1) και θα επεφτε πανω στο
   επομενο section. Με το opacity μενει διακριτικο, και το overflow:hidden
   του κουτιου το κοβει ουτως η αλλως στα 150px. */
@supports not (mask-image: linear-gradient(#000, transparent)) {
  body.nq-demo5 .branding-banner-mirror > .branding-banner--mirror {
    opacity: .32;
  }
}
/* Το backdrop-filter στο αντίγραφο είναι σκέτο κόστος: σε διαφάνεια .24
   κανείς δεν βλέπει το θόλωμα, αλλά ο browser το υπολογίζει κάθε frame. */
body.nq-demo5 .branding-banner--mirror .branding-banner__icon-wrap {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.nq-demo5 .branding-banner > .pb-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: center;
  gap: clamp(34px, 4vw, 62px);
  margin-inline: 0;
  padding: clamp(22px, 2.2vw, 28px) clamp(38px, 4.4vw, 62px);
}
body.nq-demo5 .branding-banner > .pb-row > .pb-col {
  flex: none;
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
}
/* Το γυάλινο κουτί. Ο επιλογέας περνάει και από το .pb-col γιατί ο
   κανόνας των στηλών πιο πάνω δίνει width:100% με ειδικότητα (0,3,0). */
/* ΧΩΡΙΣ ΔΙΚΟ ΤΟΥ ΠΕΡΙΓΡΑΜΜΑ — ΜΟΝΟ ΕΝΑ ΤΕΤΡΑΓΩΝΟ.
   Το SVG ζωγραφιζει ηδη το γυαλινο πανελ (rect 30..270, rx 44) με gradient
   περιγραμμα και φωτοστεφανο. Οταν το κουτι του builder εβαζε ΚΑΙ δικο του
   border + background, φαινονταν δυο ομοκεντρα τετραγωνα. Εδω μενει μονο ως
   κουτι διαστασης/κεντραρισματος. */
body.nq-demo5 .branding-banner > .pb-row > .pb-col.branding-banner__icon-wrap {
  width: clamp(180px, 15vw, 214px);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
}
/* ΤΟ 88% ΜΠΑΙΝΕΙ ΜΙΑ ΦΟΡΑ. Το single_image βγάζει
   div.B_single_image > figure > span.nq-si-box > img — αν το ποσοστό μπει και
   στη ρίζα και στο εσωτερικό, πολλαπλασιάζεται (88% x 88% = 77%). */
/* ΕΞΩ ΑΠΟ ΤΟΝ ΥΠΟΛΟΓΙΣΜΟ ΤΟΥ ΥΨΟΥΣ.
   Το SVG κραταει 10% περιθωριο γυρω απο το πανελ (rect 30..270 σε 300), αρα
   το ορατο πανελ βγαινει στο 80% του πλατους εδω. Η απολυτη θεση μενει: ετσι
   το υψος του banner το οριζει ΜΟΝΟ το κουτι των 222px και δεν αλλαζει οταν
   πειραζουμε το μεγεθος του εικονιδιου. */
body.nq-demo5 .branding-banner__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  transform: translate(-50%, -50%);
}
/* ΕΞΑΙΡΕΣΗ ΑΠΟ ΤΟ ΚΕΝΟ ΤΩΝ SINGLE IMAGE.
   Πιο πανω υπαρχει ο κανονας .nqce-single_image .figure-img με padding-top 35px
   (ζητηθηκε 2026-09-07 για ΟΛΕΣ τις εικονες της σελιδας). Επιανε και το
   εικονιδιο του banner: το κουτι εβγαινε 222x231 αντι για 222x222 και το «Aa»
   καθοταν 35px χαμηλα — μετρημενο, οχι εντυπωση. Ιδια ειδικοτητα (0,3,1),
   κερδιζει η σειρα. */
body.nq-demo5 .branding-banner__icon .figure-img {
  padding-top: 0;
}
body.nq-demo5 .branding-banner__icon .nq-si-box,
body.nq-demo5 .branding-banner__icon figure {
  display: block;
  width: 100%;
  margin: 0;
}
body.nq-demo5 .branding-banner__icon img {
  display: block;
  width: 100%;
}
/* ΓΙΑΤΙ ΧΡΕΙΑΖΕΤΑΙ margin-top ΚΑΙ ΔΕΝ ΑΡΚΕΙ ΤΟ align-items:center:
   ο builder γραφει INLINE style="align-items:flex-start" στη γραμμη (το
   βγαζει η PageBuilder.php οταν το «Equal height» ειναι κλειστο), και το
   inline νικαει το stylesheet. Ετσι η στηλη του κειμενου κολλαγε στην κορυφη:
   29px πανω / 87px κατω. Τα 28px το φερνουν στο κεντρο (57/59). */
body.nq-demo5 .branding-banner__content {
  position: relative;
  z-index: 2;
  margin-top: 28px;
  max-width: 820px;
}
body.nq-demo5 .branding-banner__eyebrow {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 24px;
  color: #f2f0ff;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.21em;
  line-height: 1;
}
body.nq-demo5 .branding-banner__line {
  width: 92px;
  height: 1px;
  background: linear-gradient(90deg, #aaa7ff 0%, #6b4cff 72%, transparent 100%);
  box-shadow: 0 0 8px rgba(107, 76, 255, .50);
}
body.nq-demo5 .branding-banner__text p {
  max-width: 860px;
  margin: 0;
  color: rgba(239, 237, 252, .82);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -.018em;
  line-height: 1.56;
}
body.nq-demo5 .branding-banner__content .B_wrapper {
  padding-inline: 0;
}

@media (max-width: 992px) {
  body.nq-demo5 .nq-brand-showcase-intro > .container { padding-bottom: 105px; }
  body.nq-demo5 .nq-brand-showcase-intro::before { top: calc(100% - 104px); }
  body.nq-demo5 .nq-brand-showcase-intro::after  { top: calc(100% - 106px); }
  /* Ο διαθεσιμος χωρος εδω ειναι 105-8 = 97px. */
  body.nq-demo5 .branding-banner-mirror {
    height: 130px;
    margin-bottom: -130px;
  }
  body.nq-demo5 .branding-banner {
    min-height: clamp(238px, 31vw, 300px);
    border-radius: 36px;
  }
  body.nq-demo5 .branding-banner > .pb-row {
    grid-template-columns: 225px minmax(0, 1fr);
    gap: 30px;
    padding: 26px 36px;
  }
  body.nq-demo5 .branding-banner > .pb-row > .pb-col.branding-banner__icon-wrap {
    width: 176px;
  }
  body.nq-demo5 .branding-banner__eyebrow { margin-bottom: 18px; font-size: 13px; }
  body.nq-demo5 .branding-banner__text p {
    font-size: clamp(18px, 2.2vw, 22px);
    line-height: 1.54;
  }
}
@media (max-width: 700px) {
  body.nq-demo5 .nq-brand-showcase-intro > .container { padding-bottom: 82px; }
  body.nq-demo5 .nq-brand-showcase-intro::before { top: calc(100% - 81px); height: 62px; filter: blur(13px); }
  body.nq-demo5 .nq-brand-showcase-intro::after  { top: calc(100% - 83px); }
  body.nq-demo5 .branding-banner {
    margin-inline: 0;
    min-height: auto;
    border-radius: 28px;
    -webkit-box-reflect: below 6px linear-gradient(to bottom,
      rgba(255, 255, 255, .17) 0%,
      rgba(255, 255, 255, .075) 25%,
      rgba(255, 255, 255, 0) 58%);
  }
  body.nq-demo5 .branding-banner-mirror {
    height: 110px;
    margin-top: -10px;
    margin-bottom: -110px;
    margin-inline: 0;
  }
  body.nq-demo5 .branding-banner-mirror > .branding-banner--mirror {
    -webkit-mask-image: linear-gradient(to top,
      rgba(0, 0, 0, .24) 0,
      rgba(0, 0, 0, .11) 26px,
      rgba(0, 0, 0, 0) 75px);
    mask-image: linear-gradient(to top,
      rgba(0, 0, 0, .24) 0,
      rgba(0, 0, 0, .11) 26px,
      rgba(0, 0, 0, 0) 75px);
  }
  @supports not (mask-image: linear-gradient(#000, transparent)) {
    body.nq-demo5 .branding-banner-mirror > .branding-banner--mirror {
      opacity: .24;
    }
  }
  body.nq-demo5 .branding-banner > .pb-row {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 24px 34px;
  }
  body.nq-demo5 .branding-banner > .pb-row > .pb-col.branding-banner__icon-wrap {
    width: 154px;
    justify-self: start;
  }
  body.nq-demo5 .branding-banner__eyebrow {
    gap: 15px;
    margin-bottom: 16px;
    font-size: 12px;
    letter-spacing: .25em;
  }
  body.nq-demo5 .branding-banner__line { width: 62px; }
  body.nq-demo5 .branding-banner__text p {
    max-width: none;
    padding-bottom: 35px;
    font-size: 18px;
    line-height: 1.52;
  }
}


/* ── ΤΟ BANNER ΕΥΘΥΓΡΑΜΜΙΖΕΤΑΙ ΜΕ ΤΗ ΣΕΛΙΔΑ ΚΑΤΩ ΑΠΟ 576 ──────────────
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-10): «κατω απο 576 χαλανε τα κενα στο banner,
   κολλαει αριστερα δεξια πιο πολυ απο οσο πρεπει στη σελιδα».

   ΜΕΤΡΗΜΕΝΟ στα 375 (clientWidth, ΧΩΡΙΣ το scrollbar) πριν την αλλαγη:
     banner      L=12  R=12
     accordion   L=24  R=24   <- ο ρυθμος της σελιδας
     τιτλος slider L=26
   Κατω απο 576 το Bootstrap δινει στον container πλατος 100% με padding 12px,
   ενω απο 576 και πανω τον κλειδωνει στα 540 — γι' αυτο το προβλημα εμφανιζεται
   ΜΟΝΟ κατω απο εκει. Το banner ειναι το μονο στοιχειο που πιανει ολο τον
   container, οποτε κολλαγε στα 12px ενω ολα τα αλλα καθονται στα 24.

   Τα 12px margin το φερνουν σε L=R=24, δηλαδη ΑΚΡΙΒΩΣ στο πλατος του accordion
   (327px). Ο καθρεφτης παιρνει το ιδιο, αλλιως θα εβγαινε πιο φαρδυς απο το
   banner που καθρεφτιζει. */


/* nq-sec: Εταιρικη ταυτοτητα · Μικροτερο κενο πανω απο το banner
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-10): «μικρυνε λιγο το κενο του banner
   με το πανω section».

   ΤΟ ΚΕΝΟ ΑΝΗΚΕΙ ΣΤΟ ΠΑΝΩ SECTION, ΟΧΙ ΣΤΟ BANNER. ΜΕΤΡΗΜΕΝΟ:
   το `#section-bi-showcase` (ο slider) εχει margin-bottom 180px απο το
   `.wbx-gap-lg`, και το padding-top του banner section ειναι 0. Αρα το
   πειραζουμε απο την ΚΑΤΩ πλευρα της πανω ενοτητας — ποτε
   padding-top/margin-top, οπως οριζει ο κανονας του εργου.

   ΘΕΛΕΙ !important: το `.wbx-gap-lg` το εχει. Μεταξυ των important
   κερδιζει αυτος εδω, (0,2,1) εναντι (0,1,0). Σκοπαρισμενο στη
   σελιδα ΚΑΙ στην ενοτητα: το `.wbx-gap-lg` το χρησιμοποιουν και αλλες
   ενοτητες της σελιδας — αυτες μενουν στα 180. */
body.nq-page-etairiki-taytotita .nq-sec-brand-showcase {
  margin-bottom: 130px !important;
}

@media (max-width: 575.98px) {
  body.nq-demo5 .branding-banner,
  body.nq-demo5 .branding-banner-mirror {
    margin-inline: 12px;
  }
  /* Το εσωτερικο κενο ηταν 24px (κληρονομια απο το block των 700). Με το
     banner πλεον στενοτερο κατα 24px, τα κειμενα ερχονταν πολυ κοντα στο
     περιγραμμα. Στα 30px το κειμενο στα 375 πιανει 282px αντι 294 — 12px
     λιγοτερα, αλλα με ορατη αναπνοη δεξια κι αριστερα. */
  body.nq-demo5 .branding-banner > .pb-row {
    padding: 30px 30px 34px;
  }
  /* ΓΙΑΤΙ ΤΟ PADDING ΔΕΝ ΕΠΙΑΝΕ ΟΛΟΚΛΗΡΟ: τα δυο ce (adv_heading, textblock)
     βγαινουν με κλαση `row` του Bootstrap, που δινει
     `margin-inline: calc(-.5 * var(--bs-gutter-x))` = -12px. ΜΕΤΡΗΜΕΝΟ: με
     padding 30px το κειμενο καθοταν στα 19px απο το περιγραμμα, οχι 30.
     Μηδενιζοντας το, τα 30px ειναι πραγματικα 30.
     ΜΟΝΟ ΕΔΩ: στα μεγαλα πλατη η μετατοπιση των -12px ειναι μερος της
     εγκεκριμενης εικονας — δεν την πειραζουμε. */
  body.nq-demo5 .branding-banner__content > .row {
    margin-inline: 0;
  }
}


/* ═══ ΔΙΔΥΜΟΙ ΚΑΝΟΝΕΣ ΓΙΑ ΤΗ ΣΕΛΙΔΑ /kataskeyi-istoselidon ══════════
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-10): «να εχει δικη της class ωστε να
   δινουμε styling μονο για αυτη τη σελιδα — αποσυνδεσε τες τελειως».

   Η σελιδα 40 ειναι αντιγραφο της 39 με ΜΕΤΟΝΟΜΑΣΜΕΝΕΣ κλασεις:
     branding-banner*         -> ki-banner*
     nq-brand-showcase-intro  -> ki-showcase-intro
     nq-sec-brand-showcase    -> ki-sec-showcase
     nq-sec-brand-intro       -> ki-sec-intro
     nq-sec-made-corfu        -> ki-sec-vision
     nq-sec-story             -> ki-sec-story
     nq-sec-hero              -> ki-sec-hero
     section-bi-*             -> section-ki-*   (el_id)
     nq-page-etairiki-...     -> nq-page-kataskeyi-...

   ΤΙ ΔΕΝ ΑΠΟΣΥΝΔΕΘΗΚΕ:
   - Οι δυο τελευταιες ενοτητες ερχονται απο ΚΟΙΝΑ blocks (nq_block 31/29).
     Ένα block ειναι το ιδιο αντικειμενο οπουδηποτε μπει.
   - Οι κλασεις των ce (nq-brand-showcase, nq-accordion, nqce-*,
     nq-studio-story, nq-cta-scroll-rail) βγαινουν απο τα templates.

   Οι τιμες ειναι ΑΥΤΟΥΣΙΕΣ — η σελιδα δειχνει οπως η 39 σημερα.
   ══════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  body.nq-demo5 .ki-sec-hero {
  margin-bottom: 111px;

  }
}
body.nq-demo5 .ki-sec-vision {
margin-bottom: clamp(165px, 13.125vw, 252px);
}
@media (min-width: 768px) {
  body.nq-page-nea-sxetika-demo5 .ki-sec-hero,
  
  body.nq-page-nea-ypiresies-demo5 .ki-sec-hero {
  margin-bottom: clamp(165px, 13.125vw, 252px);

  }
}
@media (max-width: 1399.98px) {
  body.nq-page-kataskeyi-istoselidon .nq-cta-scroll-rail--story {
  /* +5px: το κεντρο της ραγας πεφτει 14px ΜΕΤΑ το οριο των στηλων, αντι για
  ακριβως πανω του. Αιτημα ιδιοκτητη «λιγο πιο δεξια, πολυ λιγο» — απο τα
  61px της βασικης θεσης εμειναν 14. */
  left: calc(40% + 5px);

  }
}
@media (max-width: 767.98px) {
  body.nq-page-kataskeyi-istoselidon .nq-brand-showcase__copy h2 {
  max-width: none;
  font-size: clamp(16px, 5.6vw, 44px);

  }
  body.nq-page-kataskeyi-istoselidon .nq-brand-showcase__copy p {
  max-width: 100%;

  }
  body.nq-page-kataskeyi-istoselidon .nq-brand-showcase__copy {
  padding: 34px 26px 0;

  }
  body.nq-page-kataskeyi-istoselidon .nq-brand-showcase__slide {
  grid-template-rows: auto auto;

  }
  body.nq-page-kataskeyi-istoselidon .nq-brand-showcase__slide figure {
  height: auto;
  background: none;

  }
  body.nq-page-kataskeyi-istoselidon .nq-brand-showcase__slide img {
  width: 78%;
  max-width: 330px;
  height: auto;
  margin-inline: auto;
  object-fit: contain;

  }
  body.nq-page-kataskeyi-istoselidon .ki-sec-story {
  margin-bottom: 180px !important;

  }
}
@media (max-width: 720px) {
  body.nq-page-kataskeyi-istoselidon.nq-page-kataskeyi-istoselidon
    .nq-studio-story:not(.nq-studio-story--reverse) > .row > .nq-story-stage {
  display: flex;

  }
}
body.nq-demo5 .ki-showcase-intro {
position: relative;
isolation: isolate;
}
body.nq-demo5 .ki-showcase-intro > .container {
padding-bottom: 125px;
}
body.nq-demo5 .ki-showcase-intro::before {
content: "";
position: absolute;
z-index: 0;
left: 5%;
right: 5%;
top: calc(100% - 124px);
height: 86px;
pointer-events: none;
background: radial-gradient(ellipse at top,
rgba(140, 116, 255, .26) 0%,
rgba(77, 112, 255, .11) 35%,
rgba(6, 6, 8, 0) 72%);
filter: blur(16px);
}
body.nq-demo5 .ki-showcase-intro::after {
content: "";
position: absolute;
z-index: 1;
left: 4%;
right: 4%;
top: calc(100% - 126px);
height: 2px;
pointer-events: none;
background: linear-gradient(90deg,
transparent 0%,
rgba(89, 202, 255, .18) 14%,
rgba(140, 116, 255, .88) 50%,
rgba(107, 76, 255, .28) 86%,
transparent 100%);
box-shadow:
0 0 8px rgba(140, 116, 255, .60),
0 0 24px rgba(77, 112, 255, .26);
opacity: 0.3;
}
body.nq-demo5 .ki-banner {
/* ΤΟ `position: relative` ΕΦΥΓΕ ΑΛΛΑ ΤΟ ΣΤΟΙΧΕΙΟ ΜΕΝΕΙ ΤΟΠΟΘΕΤΗΜΕΝΟ:
το δινει το `.pb-row-box { position: relative }` του builder. Χωρις καποιο
απο τα δυο, το `z-index: 2` πιο κατω δεν θα ειχε καμια ισχυ. */
z-index: 2;
margin-inline: -12px;
min-height: 270px;
overflow: hidden;
border: 1px solid rgb(140 116 255 / 29%);
border-radius: 45px;
background: #05041a url("../assets/demo5/branding-banner-bg.svg") center / 100% 100% no-repeat;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .14),
inset 0 0 46px rgba(107, 76, 255, .08),
0 0 0 1px rgba(77, 112, 255, .055),
0 0 16px rgba(107, 76, 255, .22),
0 18px 48px rgba(0, 0, 0, .52);
}
body.nq-demo5 .ki-banner--has-mirror.ki-banner--has-mirror {
-webkit-box-reflect: unset;
}
body.nq-demo5 .ki-banner-mirror {
position: relative;
z-index: 2;
/* ΚΛΕΙΔΩΜΕΝΟ ΥΨΟΣ, ΟΧΙ height:0.
Στο 150px απο τα 309px του banner (48.5%) το mask ειναι ηδη στο .02 —
αορατο. Το overflow:hidden ομως εγγυαται οτι ο καθρεφτης ΔΕΝ μπορει να
πεσει πανω στο επομενο section, ακομη κι αν καποιος browser αγνοησει
το mask. Το ισοποσο αρνητικο margin-bottom το κρατα εκτος ροης, ωστε
να μη μετακινηθουν οι δυο γραμμες του «πατωματος» του section. */
height: 150px;
margin-top: -8px;
margin-bottom: -150px;
margin-inline: -12px;
overflow: hidden;
pointer-events: none;
}
body.nq-demo5 .ki-banner-mirror > .ki-banner--mirror {
position: absolute;
top: 0;
left: 0;
right: 0;
width: auto;
margin: 0;
transform: scaleY(-1);
/* Το αντιγραφο κληρονομει το box-reflect του banner: χωρις αυτο, ο Chrome
ζωγραφιζει καθρεφτη ΤΟΥ ΚΑΘΡΕΦΤΗ. Και το mask δεν πρεπει να επαναλαμβανεται,
αλλιως βαφει και τα pixel που πεφτουν εξω απο το border-box. */
-webkit-box-reflect: unset;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
/* ΤΟ MASK ΓΡΑΦΕΤΑΙ ΑΝΑΠΟΔΑ (to top): εφαρμόζεται ΠΡΙΝ το scaleY(-1),
οπότε το τοπικό κάτω άκρο καταλήγει οπτικά πάνω. Οι τιμές είναι
οι ίδιες με του box-reflect πιο πάνω. */
/* Το mask κουβαλαει ΚΑΙ την ενταση (.24 στην κορυφη) ΚΑΙ την καμπυλη
σβησιματος — ακριβως οι τιμες του box-reflect. Το opacity ως εφεδρικο
μπαινει πιο κατω, σε @supports, ΜΟΝΟ οπου λειπει το mask. */
/* ΣΕ PIXEL, ΟΧΙ ΣΕ ΠΟΣΟΣΤΑ — ΑΥΤΟ ΗΤΑΝ ΤΟ ΛΑΘΟΣ.
Το mask εφαρμοζεται στο ΑΝΤΙΓΡΑΦΟ, που εχει το υψος του banner. Με
ποσοστα το σβησιμο δενοταν σε αυτο: στον υπολογιστη το banner ειναι
272px και το 73% εβγαινε 199px, αλλα στο κινητο ειναι 472px και το 58%
εβγαινε 274px — δηλαδη ο καθρεφτης ηθελε 274px για να σβησει ενω ο
χωρος κατω απο το banner ειναι 74px. Ετσι κοβοταν απoτομα και ξεφευγε
απο το section. Σε px το σβησιμο ειναι ΤΟ ΙΔΙΟ σε καθε αναλυση. */
-webkit-mask-image: linear-gradient(to top,
rgba(0, 0, 0, .32) 0,
rgba(0, 0, 0, .18) 22px,
rgba(0, 0, 0, .095) 47px,
rgba(0, 0, 0, .028) 77px,
rgba(0, 0, 0, 0) 110px);
mask-image: linear-gradient(to top,
rgba(0, 0, 0, .32) 0,
rgba(0, 0, 0, .18) 22px,
rgba(0, 0, 0, .095) 47px,
rgba(0, 0, 0, .028) 77px,
rgba(0, 0, 0, 0) 110px);
}
@supports not (mask-image: linear-gradient(#000, transparent)) {
  body.nq-demo5 .ki-banner-mirror > .ki-banner--mirror {
  opacity: .32;

  }
}
body.nq-demo5 .ki-banner--mirror .ki-banner__icon-wrap {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
body.nq-demo5 .ki-banner > .pb-row {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
align-items: center;
gap: clamp(34px, 4vw, 62px);
margin-inline: 0;
padding: clamp(22px, 2.2vw, 28px) clamp(38px, 4.4vw, 62px);
}
body.nq-demo5 .ki-banner > .pb-row > .pb-col {
flex: none;
width: 100%;
max-width: 100%;
padding-inline: 0;
}
body.nq-demo5 .ki-banner > .pb-row > .pb-col.ki-banner__icon-wrap {
width: clamp(180px, 15vw, 214px);
aspect-ratio: 1;
justify-self: center;
display: grid;
place-items: center;
}
body.nq-demo5 .ki-banner__icon {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 100%;
transform: translate(-50%, -50%);
}
body.nq-demo5 .ki-banner__icon .figure-img {
padding-top: 0;
}
body.nq-demo5 .ki-banner__icon .nq-si-box,

body.nq-demo5 .ki-banner__icon figure {
display: block;
width: 100%;
margin: 0;
}
body.nq-demo5 .ki-banner__icon img {
display: block;
width: 100%;
}
body.nq-demo5 .ki-banner__content {
position: relative;
z-index: 2;
margin-top: 28px;
max-width: 820px;
}
body.nq-demo5 .ki-banner__eyebrow {
display: flex;
align-items: center;
gap: 22px;
margin: 0 0 24px;
color: #f2f0ff;
font-size: 30px;
font-weight: 600;
letter-spacing: 0.21em;
line-height: 1;
}
body.nq-demo5 .ki-banner__line {
width: 92px;
height: 1px;
background: linear-gradient(90deg, #aaa7ff 0%, #6b4cff 72%, transparent 100%);
box-shadow: 0 0 8px rgba(107, 76, 255, .50);
}
body.nq-demo5 .ki-banner__text p {
max-width: 860px;
margin: 0;
color: rgba(239, 237, 252, .82);
font-size: 22px;
font-weight: 300;
letter-spacing: -.018em;
line-height: 1.56;
}
body.nq-demo5 .ki-banner__content .B_wrapper {
padding-inline: 0;
}
@media (max-width: 992px) {
  body.nq-demo5 .ki-showcase-intro > .container {
  padding-bottom: 105px;
  }
  body.nq-demo5 .ki-showcase-intro::before {
  top: calc(100% - 104px);
  }
  body.nq-demo5 .ki-showcase-intro::after {
  top: calc(100% - 106px);
  }
  body.nq-demo5 .ki-banner-mirror {
  height: 130px;
  margin-bottom: -130px;

  }
  body.nq-demo5 .ki-banner {
  min-height: clamp(238px, 31vw, 300px);
  border-radius: 36px;

  }
  body.nq-demo5 .ki-banner > .pb-row {
  grid-template-columns: 225px minmax(0, 1fr);
  gap: 30px;
  padding: 26px 36px;

  }
  body.nq-demo5 .ki-banner > .pb-row > .pb-col.ki-banner__icon-wrap {
  width: 176px;

  }
  body.nq-demo5 .ki-banner__eyebrow {
  margin-bottom: 18px; font-size: 13px;
  }
  body.nq-demo5 .ki-banner__text p {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.54;

  }
}
@media (max-width: 700px) {
  body.nq-demo5 .ki-showcase-intro > .container {
  padding-bottom: 82px;
  }
  body.nq-demo5 .ki-showcase-intro::before {
  top: calc(100% - 81px); height: 62px; filter: blur(13px);
  }
  body.nq-demo5 .ki-showcase-intro::after {
  top: calc(100% - 83px);
  }
  body.nq-demo5 .ki-banner {
  margin-inline: 0;
  min-height: auto;
  border-radius: 28px;
  -webkit-box-reflect: below 6px linear-gradient(to bottom,
  rgba(255, 255, 255, .17) 0%,
  rgba(255, 255, 255, .075) 25%,
  rgba(255, 255, 255, 0) 58%);

  }
  body.nq-demo5 .ki-banner-mirror {
  height: 110px;
  margin-top: -10px;
  margin-bottom: -110px;
  margin-inline: 0;

  }
  body.nq-demo5 .ki-banner-mirror > .ki-banner--mirror {
  -webkit-mask-image: linear-gradient(to top,
  rgba(0, 0, 0, .24) 0,
  rgba(0, 0, 0, .11) 26px,
  rgba(0, 0, 0, 0) 75px);
  mask-image: linear-gradient(to top,
  rgba(0, 0, 0, .24) 0,
  rgba(0, 0, 0, .11) 26px,
  rgba(0, 0, 0, 0) 75px);

  }
}
@media (max-width: 700px) {
  @supports not (mask-image: linear-gradient(#000, transparent)) {
    body.nq-demo5 .ki-banner-mirror > .ki-banner--mirror {
    opacity: .24;

    }
  }
}
@media (max-width: 700px) {
  body.nq-demo5 .ki-banner > .pb-row {
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 28px 24px 34px;

  }
  body.nq-demo5 .ki-banner > .pb-row > .pb-col.ki-banner__icon-wrap {
  width: 154px;
  justify-self: start;

  }
  body.nq-demo5 .ki-banner__eyebrow {
  gap: 15px;
  margin-bottom: 16px;
  font-size: 12px;
  letter-spacing: .25em;

  }
  body.nq-demo5 .ki-banner__line {
  width: 62px;
  }
  body.nq-demo5 .ki-banner__text p {
  max-width: none;
  padding-bottom: 35px;
  font-size: 18px;
  line-height: 1.52;

  }
}
body.nq-page-kataskeyi-istoselidon .ki-sec-showcase {
margin-bottom: 130px !important;
}
@media (max-width: 575.98px) {
  body.nq-demo5 .ki-banner,
  
  body.nq-demo5 .ki-banner-mirror {
  margin-inline: 12px;

  }
  body.nq-demo5 .ki-banner > .pb-row {
  padding: 30px 30px 34px;

  }
  body.nq-demo5 .ki-banner__content > .row {
  margin-inline: 0;

  }
}


/* ═══ ΔΙΔΥΜΟΙ ΚΑΝΟΝΕΣ ΓΙΑ ΤΗ ΣΕΛΙΔΑ C:/Program Files/Git/digital-marketing ══════════
   Αντιγραφο της «Εταιρικης ταυτοτητας» με δικες του κλασεις, ωστε οι
   σελιδες να αποκλινουν χωρις η μια να σπαει την αλλη:
     branding-banner*  ->  dm-banner*        nq-sec-story  ->  dm-sec-story
     nq-brand-showcase-intro -> dm-showcase-intro
     nq-sec-brand-showcase   -> dm-sec-showcase
     nq-sec-brand-intro      -> dm-sec-intro
     nq-sec-made-corfu       -> dm-sec-vision
     nq-sec-hero             -> dm-sec-hero
     section-bi-*            -> section-dm-*   (el_id)
     nq-page-etairiki-...    -> nq-page-digital-marketing

   Το branding-banner-bg.svg ΔΕΝ μετονομαζεται: ειναι asset, οχι κλαση.
   Δεν αποσυνδεονται τα κοινα blocks (nq_block 31/29) ουτε οι κλασεις που
   παραγουν τα ce (nq-brand-showcase, nq-accordion, nqce-*, nq-studio-story,
   nq-cta-scroll-rail) — ερχονται απο τα templates.
   ══════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  body.nq-demo5 .dm-sec-hero {
  margin-bottom: 111px;

  }
}
body.nq-demo5 .dm-sec-vision {
margin-bottom: clamp(165px, 13.125vw, 252px);
}
@media (min-width: 768px) {
  body.nq-page-nea-sxetika-demo5 .dm-sec-hero,
  
  body.nq-page-nea-ypiresies-demo5 .dm-sec-hero {
  margin-bottom: clamp(165px, 13.125vw, 252px);

  }
}
@media (max-width: 1399.98px) {
  body.nq-page-digital-marketing .nq-cta-scroll-rail--story {
  /* +5px: το κεντρο της ραγας πεφτει 14px ΜΕΤΑ το οριο των στηλων, αντι για
  ακριβως πανω του. Αιτημα ιδιοκτητη «λιγο πιο δεξια, πολυ λιγο» — απο τα
  61px της βασικης θεσης εμειναν 14. */
  left: calc(40% + 5px);

  }
}
@media (max-width: 767.98px) {
  body.nq-page-digital-marketing .nq-brand-showcase__copy h2 {
  max-width: none;
  font-size: clamp(16px, 5.6vw, 44px);

  }
  body.nq-page-digital-marketing .nq-brand-showcase__copy p {
  max-width: 100%;

  }
  body.nq-page-digital-marketing .nq-brand-showcase__copy {
  padding: 34px 26px 0;

  }
  body.nq-page-digital-marketing .nq-brand-showcase__slide {
  grid-template-rows: auto auto;

  }
  body.nq-page-digital-marketing .nq-brand-showcase__slide figure {
  height: auto;
  background: none;

  }
  body.nq-page-digital-marketing .nq-brand-showcase__slide img {
  width: 78%;
  max-width: 330px;
  height: auto;
  margin-inline: auto;
  object-fit: contain;

  }
  body.nq-page-digital-marketing .dm-sec-story {
  margin-bottom: 180px !important;

  }
}
@media (max-width: 720px) {
  body.nq-page-digital-marketing.nq-page-digital-marketing
    .nq-studio-story:not(.nq-studio-story--reverse) > .row > .nq-story-stage {
  display: flex;

  }
}
body.nq-demo5 .dm-showcase-intro {
position: relative;
isolation: isolate;
}
body.nq-demo5 .dm-showcase-intro > .container {
padding-bottom: 125px;
}
body.nq-demo5 .dm-showcase-intro::before {
content: "";
position: absolute;
z-index: 0;
left: 5%;
right: 5%;
top: calc(100% - 124px);
height: 86px;
pointer-events: none;
background: radial-gradient(ellipse at top,
rgba(140, 116, 255, .26) 0%,
rgba(77, 112, 255, .11) 35%,
rgba(6, 6, 8, 0) 72%);
filter: blur(16px);
}
body.nq-demo5 .dm-showcase-intro::after {
content: "";
position: absolute;
z-index: 1;
left: 4%;
right: 4%;
top: calc(100% - 126px);
height: 2px;
pointer-events: none;
background: linear-gradient(90deg,
transparent 0%,
rgba(89, 202, 255, .18) 14%,
rgba(140, 116, 255, .88) 50%,
rgba(107, 76, 255, .28) 86%,
transparent 100%);
box-shadow:
0 0 8px rgba(140, 116, 255, .60),
0 0 24px rgba(77, 112, 255, .26);
opacity: 0.3;
}
body.nq-demo5 .dm-banner {
/* ΤΟ `position: relative` ΕΦΥΓΕ ΑΛΛΑ ΤΟ ΣΤΟΙΧΕΙΟ ΜΕΝΕΙ ΤΟΠΟΘΕΤΗΜΕΝΟ:
το δινει το `.pb-row-box { position: relative }` του builder. Χωρις καποιο
απο τα δυο, το `z-index: 2` πιο κατω δεν θα ειχε καμια ισχυ. */
z-index: 2;
margin-inline: -12px;
min-height: 270px;
overflow: hidden;
border: 1px solid rgb(140 116 255 / 29%);
border-radius: 45px;
background: #05041a url("../assets/demo5/branding-banner-bg.svg") center / 100% 100% no-repeat;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .14),
inset 0 0 46px rgba(107, 76, 255, .08),
0 0 0 1px rgba(77, 112, 255, .055),
0 0 16px rgba(107, 76, 255, .22),
0 18px 48px rgba(0, 0, 0, .52);
}
body.nq-demo5 .dm-banner--has-mirror.dm-banner--has-mirror {
-webkit-box-reflect: unset;
}
body.nq-demo5 .dm-banner-mirror {
position: relative;
z-index: 2;
/* ΚΛΕΙΔΩΜΕΝΟ ΥΨΟΣ, ΟΧΙ height:0.
Στο 150px απο τα 309px του banner (48.5%) το mask ειναι ηδη στο .02 —
αορατο. Το overflow:hidden ομως εγγυαται οτι ο καθρεφτης ΔΕΝ μπορει να
πεσει πανω στο επομενο section, ακομη κι αν καποιος browser αγνοησει
το mask. Το ισοποσο αρνητικο margin-bottom το κρατα εκτος ροης, ωστε
να μη μετακινηθουν οι δυο γραμμες του «πατωματος» του section. */
height: 150px;
margin-top: -8px;
margin-bottom: -150px;
margin-inline: -12px;
overflow: hidden;
pointer-events: none;
}
body.nq-demo5 .dm-banner-mirror > .dm-banner--mirror {
position: absolute;
top: 0;
left: 0;
right: 0;
width: auto;
margin: 0;
transform: scaleY(-1);
/* Το αντιγραφο κληρονομει το box-reflect του banner: χωρις αυτο, ο Chrome
ζωγραφιζει καθρεφτη ΤΟΥ ΚΑΘΡΕΦΤΗ. Και το mask δεν πρεπει να επαναλαμβανεται,
αλλιως βαφει και τα pixel που πεφτουν εξω απο το border-box. */
-webkit-box-reflect: unset;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
/* ΤΟ MASK ΓΡΑΦΕΤΑΙ ΑΝΑΠΟΔΑ (to top): εφαρμόζεται ΠΡΙΝ το scaleY(-1),
οπότε το τοπικό κάτω άκρο καταλήγει οπτικά πάνω. Οι τιμές είναι
οι ίδιες με του box-reflect πιο πάνω. */
/* Το mask κουβαλαει ΚΑΙ την ενταση (.24 στην κορυφη) ΚΑΙ την καμπυλη
σβησιματος — ακριβως οι τιμες του box-reflect. Το opacity ως εφεδρικο
μπαινει πιο κατω, σε @supports, ΜΟΝΟ οπου λειπει το mask. */
/* ΣΕ PIXEL, ΟΧΙ ΣΕ ΠΟΣΟΣΤΑ — ΑΥΤΟ ΗΤΑΝ ΤΟ ΛΑΘΟΣ.
Το mask εφαρμοζεται στο ΑΝΤΙΓΡΑΦΟ, που εχει το υψος του banner. Με
ποσοστα το σβησιμο δενοταν σε αυτο: στον υπολογιστη το banner ειναι
272px και το 73% εβγαινε 199px, αλλα στο κινητο ειναι 472px και το 58%
εβγαινε 274px — δηλαδη ο καθρεφτης ηθελε 274px για να σβησει ενω ο
χωρος κατω απο το banner ειναι 74px. Ετσι κοβοταν απoτομα και ξεφευγε
απο το section. Σε px το σβησιμο ειναι ΤΟ ΙΔΙΟ σε καθε αναλυση. */
-webkit-mask-image: linear-gradient(to top,
rgba(0, 0, 0, .32) 0,
rgba(0, 0, 0, .18) 22px,
rgba(0, 0, 0, .095) 47px,
rgba(0, 0, 0, .028) 77px,
rgba(0, 0, 0, 0) 110px);
mask-image: linear-gradient(to top,
rgba(0, 0, 0, .32) 0,
rgba(0, 0, 0, .18) 22px,
rgba(0, 0, 0, .095) 47px,
rgba(0, 0, 0, .028) 77px,
rgba(0, 0, 0, 0) 110px);
}
@supports not (mask-image: linear-gradient(#000, transparent)) {
  body.nq-demo5 .dm-banner-mirror > .dm-banner--mirror {
  opacity: .32;

  }
}
body.nq-demo5 .dm-banner--mirror .dm-banner__icon-wrap {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
body.nq-demo5 .dm-banner > .pb-row {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
align-items: center;
gap: clamp(34px, 4vw, 62px);
margin-inline: 0;
padding: clamp(22px, 2.2vw, 28px) clamp(38px, 4.4vw, 62px);
}
body.nq-demo5 .dm-banner > .pb-row > .pb-col {
flex: none;
width: 100%;
max-width: 100%;
padding-inline: 0;
}
body.nq-demo5 .dm-banner > .pb-row > .pb-col.dm-banner__icon-wrap {
width: clamp(180px, 15vw, 214px);
aspect-ratio: 1;
justify-self: center;
display: grid;
place-items: center;
}
body.nq-demo5 .dm-banner__icon {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 100%;
transform: translate(-50%, -50%);
}
body.nq-demo5 .dm-banner__icon .figure-img {
padding-top: 0;
}
body.nq-demo5 .dm-banner__icon .nq-si-box,

body.nq-demo5 .dm-banner__icon figure {
display: block;
width: 100%;
margin: 0;
}
body.nq-demo5 .dm-banner__icon img {
display: block;
width: 100%;
}
body.nq-demo5 .dm-banner__content {
position: relative;
z-index: 2;
margin-top: 28px;
max-width: 820px;
}
body.nq-demo5 .dm-banner__eyebrow {
display: flex;
align-items: center;
gap: 22px;
margin: 0 0 24px;
color: #f2f0ff;
font-size: 30px;
font-weight: 600;
letter-spacing: 0.21em;
line-height: 1;
}
body.nq-demo5 .dm-banner__line {
width: 92px;
height: 1px;
background: linear-gradient(90deg, #aaa7ff 0%, #6b4cff 72%, transparent 100%);
box-shadow: 0 0 8px rgba(107, 76, 255, .50);
}
body.nq-demo5 .dm-banner__text p {
max-width: 860px;
margin: 0;
color: rgba(239, 237, 252, .82);
font-size: 22px;
font-weight: 300;
letter-spacing: -.018em;
line-height: 1.56;
}
body.nq-demo5 .dm-banner__content .B_wrapper {
padding-inline: 0;
}
@media (max-width: 992px) {
  body.nq-demo5 .dm-showcase-intro > .container {
  padding-bottom: 105px;
  }
  body.nq-demo5 .dm-showcase-intro::before {
  top: calc(100% - 104px);
  }
  body.nq-demo5 .dm-showcase-intro::after {
  top: calc(100% - 106px);
  }
  body.nq-demo5 .dm-banner-mirror {
  height: 130px;
  margin-bottom: -130px;

  }
  body.nq-demo5 .dm-banner {
  min-height: clamp(238px, 31vw, 300px);
  border-radius: 36px;

  }
  body.nq-demo5 .dm-banner > .pb-row {
  grid-template-columns: 225px minmax(0, 1fr);
  gap: 30px;
  padding: 26px 36px;

  }
  body.nq-demo5 .dm-banner > .pb-row > .pb-col.dm-banner__icon-wrap {
  width: 176px;

  }
  body.nq-demo5 .dm-banner__eyebrow {
  margin-bottom: 18px; font-size: 13px;
  }
  body.nq-demo5 .dm-banner__text p {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.54;

  }
}
@media (max-width: 700px) {
  body.nq-demo5 .dm-showcase-intro > .container {
  padding-bottom: 82px;
  }
  body.nq-demo5 .dm-showcase-intro::before {
  top: calc(100% - 81px); height: 62px; filter: blur(13px);
  }
  body.nq-demo5 .dm-showcase-intro::after {
  top: calc(100% - 83px);
  }
  body.nq-demo5 .dm-banner {
  margin-inline: 0;
  min-height: auto;
  border-radius: 28px;
  -webkit-box-reflect: below 6px linear-gradient(to bottom,
  rgba(255, 255, 255, .17) 0%,
  rgba(255, 255, 255, .075) 25%,
  rgba(255, 255, 255, 0) 58%);

  }
  body.nq-demo5 .dm-banner-mirror {
  height: 110px;
  margin-top: -10px;
  margin-bottom: -110px;
  margin-inline: 0;

  }
  body.nq-demo5 .dm-banner-mirror > .dm-banner--mirror {
  -webkit-mask-image: linear-gradient(to top,
  rgba(0, 0, 0, .24) 0,
  rgba(0, 0, 0, .11) 26px,
  rgba(0, 0, 0, 0) 75px);
  mask-image: linear-gradient(to top,
  rgba(0, 0, 0, .24) 0,
  rgba(0, 0, 0, .11) 26px,
  rgba(0, 0, 0, 0) 75px);

  }
}
@media (max-width: 700px) {
  @supports not (mask-image: linear-gradient(#000, transparent)) {
    body.nq-demo5 .dm-banner-mirror > .dm-banner--mirror {
    opacity: .24;

    }
  }
}
@media (max-width: 700px) {
  body.nq-demo5 .dm-banner > .pb-row {
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 28px 24px 34px;

  }
  body.nq-demo5 .dm-banner > .pb-row > .pb-col.dm-banner__icon-wrap {
  width: 154px;
  justify-self: start;

  }
  body.nq-demo5 .dm-banner__eyebrow {
  gap: 15px;
  margin-bottom: 16px;
  font-size: 12px;
  letter-spacing: .25em;

  }
  body.nq-demo5 .dm-banner__line {
  width: 62px;
  }
  body.nq-demo5 .dm-banner__text p {
  max-width: none;
  padding-bottom: 35px;
  font-size: 18px;
  line-height: 1.52;

  }
}
body.nq-page-digital-marketing .dm-sec-showcase {
margin-bottom: 130px !important;
}
@media (max-width: 575.98px) {
  body.nq-demo5 .dm-banner,
  
  body.nq-demo5 .dm-banner-mirror {
  margin-inline: 12px;

  }
  body.nq-demo5 .dm-banner > .pb-row {
  padding: 30px 30px 34px;

  }
  body.nq-demo5 .dm-banner__content > .row {
  margin-inline: 0;

  }
}


/* ═══ ΕΝΟΤΗΤΑ «ΥΠΗΡΕΣΙΕΣ» ΓΙΑ ΤΗ /kataskeyi-istoselidon ════════════
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-10): «αναμεσα απο αυτα τα δυο θελω ενα νεο
   section ιδιο με την αρχικη — αλλαξε classes να ειναι αυτονομο».

   Οι τρεις καρτες (Web Development / E-shop / Web Hosting) αντιγραφηκαν
   απο το #section-xoeyoy της αρχικης με μετονομασμενες κλασεις:
     nq-sec-services   -> ki-sec-services
     nq-services-prime -> ki-services-prime
     nq-service-row    -> ki-service-row
     section-xoeyoy    -> section-ki-services

   ΓΙΑΤΙ ΕΠΡΕΠΕ ΝΑ ΜΕΤΟΝΟΜΑΣΤΕΙ ΚΑΙ ΓΙΑ ΕΝΑΝ ΑΚΟΜΗ ΛΟΓΟ:
   το home-sections.js ψαχνει `.nq-services-prime` και ΕΓΧΕΕΙ ενα ολοκληρο
   editorial header με ΚΑΡΦΩΤΟ κειμενο της αρχικης («Τι κανουμε», «Ακουμε
   πρωτα...»). Με τη μετονομασια αυτο δεν μπορει να συμβει εδω.

   ΤΟ ΕΦΕ ΤΩΝ ΚΑΡΤΩΝ ΔΙΑΤΗΡΗΘΗΚΕ: το `mountServiceCardsInView()` αναβει τις
   καρτες με `is-inview` ΜΟΝΟ κατω απο 768px. Ο επιλογεας του επεκταθηκε
   ωστε να πιανει και το `.ki-service-row__inner`.
   ══════════════════════════════════════════════════ */
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head--editorial {
position: relative;
display: grid !important;
grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important;
align-items: center !important;
column-gap: clamp(72px, 9vw, 164px) !important;
padding-top: clamp(68px, 7vw, 108px) !important;
padding-bottom: clamp(58px, 6vw, 86px) !important;
overflow: hidden;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head--editorial::after {
content: "";
position: absolute;
top: 18px;
right: -8px;
width: clamp(110px, 12vw, 190px);
height: clamp(110px, 12vw, 190px);
border: 1px solid rgba(84, 72, 247, .11);
border-radius: 50%;
transform: translate(42%, -24%);
pointer-events: none;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__statement,

body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__aside {
position: relative;
z-index: 1;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__eyebrow {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 28px;
color: var(--nq-accent, #5548f7);
font-size: 11px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__eyebrow::before {
content: "";
width: 38px;
height: 1px;
background: currentColor;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__eyebrow span {
color: #8b91a0;
font-variant-numeric: tabular-nums;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head--editorial h2 {
max-width: 720px !important;
margin: 0 !important;
color: #080b14 !important;
font-size: clamp(40px, 3.55vw, 58px) !important;
font-weight: 760 !important;
line-height: 1.01 !important;
letter-spacing: -.046em !important;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head--editorial h2 > span,

body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head--editorial h2 > em {
display: block !important;
font-size: inherit !important;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head--editorial h2 > em {
margin-top: 8px;
color: var(--nq-accent, #655cff) !important;
font-family: inherit !important;
font-weight: 700 !important;
font-style: italic !important;
line-height: 1.01 !important;
letter-spacing: -.048em !important;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__aside {
padding: 0 0 4px 28px;
border-left: 1px solid rgba(8, 11, 20, .18);
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__lead {
max-width: 460px !important;
margin: 0 0 32px !important;
color: #525b6c !important;
font-size: clamp(16px, 1.18vw, 19px) !important;
line-height: 1.65 !important;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__lead strong {
display: block;
margin-bottom: 5px;
color: #101522;
font-size: 1.08em;
font-weight: 780;
letter-spacing: -.018em;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__principles {
display: grid;
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid rgba(8, 11, 20, .18);
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__principles li {
display: grid;
grid-template-columns: 42px 1fr;
align-items: center;
min-height: 48px;
border-bottom: 1px solid rgba(8, 11, 20, .13);
color: #101522;
font-size: 13px;
font-weight: 760;
letter-spacing: .035em;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__principles span {
color: var(--nq-accent, #5548f7);
font-size: 10px;
letter-spacing: .12em;
}
@media (max-width: 991.98px) {
  body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head--editorial {
  grid-template-columns: 1fr !important;
  row-gap: 44px !important;

  }
  body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
  gap: 36px;
  padding: 28px 0 0 !important;
  border-top: 1px solid rgba(8, 11, 20, .18);
  border-left: 0;

  }
  body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__lead {
  margin-bottom: 0 !important;

  }
}
@media (max-width: 767.98px) {
  body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head--editorial {
  row-gap: 34px !important;
  padding-top: 64px !important;
  padding-bottom: 44px !important;

  }
  body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head--editorial::after {
  top: 24px;
  right: 0;
  width: 104px;
  height: 104px;

  }
  body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__eyebrow {
  margin-bottom: 22px;

  }
  body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head--editorial h2 {
  max-width: 520px !important;
  font-size: clamp(34px, 9.5vw, 44px) !important;
  line-height: 1.03 !important;
  letter-spacing: -.043em !important;

  }
  body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head--editorial h2 > em {
  margin-top: 8px;
  letter-spacing: -.055em !important;

  }
  body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__aside {
  grid-template-columns: 1fr;
  gap: 26px;
  padding-top: 24px !important;

  }
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-service-row {
box-shadow:
-30px 30px 34px -35px rgba(10, 12, 20, .34),
30px 30px 34px -35px rgba(10, 12, 20, .34),
0 34px 22px -25px rgba(10, 12, 20, .38) !important;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-service-row:nth-child(2) {
box-shadow:
-28px 28px 32px -36px rgba(10, 12, 20, .22),
28px 28px 32px -36px rgba(10, 12, 20, .22),
0 32px 22px -26px rgba(10, 12, 20, .25) !important;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-service-row:hover {
box-shadow:
-34px 34px 38px -36px rgba(10, 12, 20, .38),
34px 34px 38px -36px rgba(10, 12, 20, .38),
0 40px 28px -26px rgba(10, 12, 20, .43) !important;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head:not(.ki-services-prime__head--editorial) h2 {
max-width: 900px !important;
font-size: clamp(48px, 4.25vw, 68px) !important;
line-height: .98 !important;
letter-spacing: -.048em !important;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head:not(.ki-services-prime__head--editorial) h2 > span:first-child {
margin-bottom: 7px !important;
font-size: .79em !important;
line-height: 1.04 !important;
letter-spacing: -.042em !important;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head:not(.ki-services-prime__head--editorial) h2 > em {
font-size: 1.02em !important;
line-height: .95 !important;
letter-spacing: -.045em !important;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head:not(.ki-services-prime__head--editorial) .ki-services-prime__closer {
gap: 16px !important;
margin-top: 24px !important;
font-size: .66em !important;
line-height: 1.05 !important;
letter-spacing: -.035em !important;
}
body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head:not(.ki-services-prime__head--editorial) .ki-services-prime__closer::before {
flex-basis: 38px !important;
}
@media (max-width: 767.98px) {
  body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head:not(.ki-services-prime__head--editorial) h2 {
  font-size: clamp(39px, 11.5vw, 54px) !important;
  letter-spacing: -.042em !important;

  }
  body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head:not(.ki-services-prime__head--editorial) h2 > span:first-child {
  font-size: .76em !important;

  }
  body.nq-home:not(.nq-demo5) .ki-services-prime .ki-services-prime__head:not(.ki-services-prime__head--editorial) .ki-services-prime__closer {
  margin-top: 18px !important;
  font-size: .62em !important;

  }
}
body.nq-demo5 .ki-service-row > .row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(28px, 3vw, 44px);
margin: 0;
}
body.nq-demo5 .ki-service-row > .row > .ki-service-row__inner {
width: 100%;
max-width: 100%;
margin-top: 0;
padding: 34px 34px 30px;
/* ΔΟΘΗΚΕ ΑΥΤΟΥΣΙΟ ΑΠΟ ΤΟΝ ΙΔΙΟΚΤΗΤΗ (2026-09-07) — καμια τιμη δεν υπηρχε
πριν, ειναι προσθηκη.
⚠️ ΙΣΧΥΕΙ ΚΑΙ ΣΤΗΝ ΕΝΕΡΓΗ ΚΑΤΑΣΤΑΣΗ, ΕΠΙΤΗΔΕΣ: η καρτα εχει `:hover`
(οθονη) και `.is-inview` (κινητο, απο τον observer). Με σκετο .9 το
«αναμμα» γινεται πανω σε καρτα που ΠΑΡΑΜΕΝΕΙ ξεθωριασμενη. Η φυσικη
αναγνωση θα ηταν .9 στην ηρεμια και 1 στην ενεργη, ΑΛΛΑ ΔΕΝ ΖΗΤΗΘΗΚΕ —
και το opacity επηρεαζει ΟΛΟ το στοιχειο, αρα μια αυθαιρετη προσθηκη θα
αλλαζε και το πως διαβαζεται το κειμενο στο hover. Εκκρεμει απαντηση· αν
ερθει, προστιθεται κανονας για `:hover, .is-inview` με `opacity: 1`. */
opacity: .9;
}
body.nq-demo5 .ki-service-row {
position: static;
display: block;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
body.nq-demo5 .ki-service-row__inner {
position: relative;
display: flex;
min-height: 430px;
overflow: hidden;
border: 1px solid #1c1c1c;
border-radius: 20px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
box-shadow: -18px 24px 34px -30px rgba(255, 255, 255, .08),
18px 26px 38px -30px rgba(105, 94, 255, .22),
0 28px 24px -24px rgba(120, 110, 255, .18);
transition: transform .42s cubic-bezier(.2, .75, .2, 1), border-color .32s ease, box-shadow .32s ease;
}
body.nq-demo5 .ki-service-row--1 {
background-image: url("../assets/demo5/panel-wave-soft.svg");
}
body.nq-demo5 .ki-service-row--2 {
background-image: url("../assets/demo5/panel-grid-subtle.svg");
}
body.nq-demo5 .ki-service-row--3 {
background-image: url("../assets/demo5/panel-corner-lines.svg");
}
body.nq-demo5 .ki-service-row__inner:hover,

body.nq-demo5 .ki-service-row__inner.is-inview {
transform: translateY(-8px);
box-shadow: -20px 27px 38px -30px rgba(255, 255, 255, .1),
20px 29px 42px -29px rgba(105, 94, 255, .3),
0 32px 28px -24px rgba(120, 110, 255, .24);
}
body.nq-demo5 .ki-service-row__inner::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
height: 4px;
background: linear-gradient(90deg, #706cff, #a5a0ff);
transform: scaleX(0);
transform-origin: left center;
transition: transform .42s cubic-bezier(.2, .75, .2, 1);
}
body.nq-demo5 .ki-service-row__inner:hover::before,

body.nq-demo5 .ki-service-row__inner.is-inview::before {
transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  body.nq-demo5 .ki-service-row__inner,
  
  body.nq-demo5 .ki-service-row__inner::before,
  
  body.nq-demo5 .ki-service-row__card .nq-ib-icon,
  
  body.nq-demo5 .ki-service-row__card .nq-ib-readmore {
  transition: none;

  }
}
body.nq-demo5 .ki-service-row__card {
flex: 1;
gap: 0;
width: 100%;
}
body.nq-demo5 .ki-service-row__card .nq-ib-body {
display: flex;
flex: 1;
flex-direction: column;
width: 100%;
}
body.nq-demo5 .ki-service-row__card .nq-ib-num {
color: #aaa7ff;
font-size: 11px;
font-weight: 850;
line-height: 1.5;
letter-spacing: normal;
opacity: 1;
}
body.nq-demo5 .ki-service-row__card .nq-ib-icon-box {
margin-bottom: 34px;
}
body.nq-demo5 .ki-service-row__card .nq-ib-icon {
box-shadow: 0 15px 36px rgba(232, 255, 87, .12);
transition: transform .32s cubic-bezier(.2, .75, .2, 1), box-shadow .32s ease;
}
body.nq-demo5 .ki-service-row__inner:hover .nq-ib-icon,

body.nq-demo5 .ki-service-row__inner.is-inview .nq-ib-icon {
transform: translateY(-4px) rotate(-3deg) scale(1.035);
box-shadow: 0 20px 42px rgba(81, 73, 216, .3);
}
body.nq-demo5 .ki-service-row__card .nq-ib-title {
margin: 0 0 17px;
font-size: clamp(28px, 2.15vw, 32px);
font-weight: 600;
line-height: 1.02;
}
body.nq-demo5 .ki-service-row__card .nq-ib-title-a {
color: inherit;
text-decoration: none;
}
body.nq-demo5 .ki-service-row--2 .nq-ib-title {
font-size: clamp(24px, 2.15vw, 30px);
white-space: nowrap;
}
body.nq-demo5 .ki-service-row__card .nq-ib-tags {
display: block;
margin: 0;
color: #aaa7ff;
font-size: 12px;
font-weight: 800;
line-height: 1.5;
letter-spacing: .3px;
text-transform: uppercase;
}
body.nq-demo5 .ki-service-row__card .nq-ib-desc {
max-width: 38ch;
margin: clamp(24px, 1.8vw, 34px) 0 0;
color: rgba(238, 240, 249, .68);
font-size: 15.5px;
line-height: 1.7;
}
body.nq-demo5 .ki-service-row__card .nq-ib-desc p {
margin: 0;
color: inherit;
font: inherit;
}
body.nq-demo5 .ki-service-row__card .nq-ib-readmore {
display: grid;
place-items: center;
align-self: flex-end;
width: 46px;
height: 46px;
margin: auto 0 0;
padding: 0;
border: 0;
border-radius: 50%;
background: url("../assets/demo5/arrow-purple.svg") no-repeat 50% 50% / 100% 100%;
color: transparent;
font-size: 0;
text-decoration: none;
transition: transform .28s ease;
}
body.nq-demo5 .ki-service-row__inner:hover .nq-ib-readmore,

body.nq-demo5 .ki-service-row__inner.is-inview .nq-ib-readmore {
transform: rotate(45deg);
}
@media (max-width: 1100px) {
  body.nq-demo5 .ki-service-row > .row {
  grid-template-columns: repeat(2, minmax(0, 1fr));

  }
}
@media (max-width: 720px) {
  body.nq-demo5 .ki-service-row > .row {
  grid-template-columns: minmax(0, 1fr);
  /* 42 → 60 με αιτημα του ιδιοκτητη (2026-09-07). Τα 42 ηταν μετρηση του
  mockup· η νεα τιμη ειναι δικη του επιλογη και αποκλινει σκοπιμα. */
  gap: 60px;

  }
  body.nq-demo5 .ki-service-row > .row > .ki-service-row__inner {
  min-height: 360px;
  padding: 28px 25px 24px;

  }
  body.nq-demo5 .ki-service-row__card .nq-ib-desc {
  margin-top: 20px;

  }
}
body.nq-demo5 .ki-sec-services {
margin-bottom: clamp(240px, 19.8vw, 381px);
}
@media (max-width: 767.98px) {
  body.nq-demo5 .nq-design-intro > .row,
  
  body.nq-demo5 .ki-service-row > .row {
  padding-inline: 12px;

  }
}
@media (max-width: 767px) {
  body.nq-demo5 .ki-service-row__inner {
  isolation: isolate;
  background-image: none;

  }
  body.nq-demo5 .ki-service-row__inner::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .8;
  pointer-events: none;

  }
  body.nq-demo5 .ki-service-row--1::after {
  background-image: url("../assets/demo5/panel-wave-soft.svg");

  }
  body.nq-demo5 .ki-service-row--2::after {
  background-image: url("../assets/demo5/panel-grid-subtle.svg");

  }
  body.nq-demo5 .ki-service-row--3::after {
  background-image: url("../assets/demo5/panel-corner-lines.svg");

  }
}
@media (max-width: 767.98px) {
  body.nq-demo5 .ki-service-row__inner {
  transition: transform .2s cubic-bezier(.2, .75, .2, 1), border-color .2s ease, box-shadow .2s ease;

  }
  body.nq-demo5 .ki-service-row__inner::before {
  transition: transform .2s cubic-bezier(.2, .75, .2, 1);

  }
  body.nq-demo5 .ki-service-row__card .nq-ib-icon {
  transition: transform .18s cubic-bezier(.2, .75, .2, 1), box-shadow .18s ease;

  }
  body.nq-demo5 .ki-service-row__card .nq-ib-readmore {
  transition: transform .16s ease;

  }
}
@media (min-width: 721px) and (max-width: 1100px) {
  body.nq-demo5.nq-home .ki-service-row__inner.ki-service-row--3 {
  display: none;

  }
}


/* ── ΤΑ ΒΕΛΑΚΙΑ ΤΩΝ ΚΑΡΤΩΝ ΦΕΥΓΟΥΝ (/kataskeyi-istoselidon) ─────────
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-09-10): «αφαιρεσε τελειως τα κουμπια».

   ΓΙΑΤΙ ΔΕΝ ΕΦΤΑΝΕ ΤΟ `link_type: none`: το template του ce `info_box`
   βγαζει το `<a class="nq-ib-readmore">` ΧΩΡΙΣ συνθηκη — δεν ειναι
   τυλιγμενο σε {{#link_type}}, οπως ειναι π.χ. το {{#tags}}. Οποτε η
   ρυθμιση «No Link» αλλαζει μονο το href, οχι την υπαρξη του κουμπιου.
   Μετρημενο μετα την αλλαγη: `A.nq-ib-readmore` με «↗» ακομη εκει.

   ΓΙΑΤΙ ΔΕΝ ΠΕΙΡΑΧΤΗΚΕ ΤΟ TEMPLATE: το `info_box` το χρησιμοποιουν και
   αλλες σελιδες — μια αλλαγη εκει θα εσβηνε τα βελακια παντου.
   Ο κανονας ειναι δεμενος στο ki-service-row, αρα ΜΟΝΟ σε αυτη τη σελιδα. */
body.nq-demo5 .ki-service-row .nq-ib-readmore {
  display: none;
}

/* ── ΟΙ ΚΑΡΤΕΣ ΥΠΗΡΕΣΙΩΝ: EYEBROW + ΑΡΙΘΜΗΜΕΝΑ ΒΗΜΑΤΑ ──────────────
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-10-01) με mockup. Αντικατεστησε τη λιστα με ✓,
   που ηταν `<ul class="ki-card-list">` — ο παλιος κανονας αφαιρεθηκε γιατι
   δεν υπαρχει πλεον τετοιο markup σε καμια καρτα.

   ΧΡΩΜΑ ΚΕΙΜΕΝΩΝ (ιδιοκτητης, 2026-10-01): «τα χρωματα στα κειμενα δεν ειναι
   ιδια» — ολα τα κειμενα της καρτας (τιτλος, περιγραφη, βηματα) ΛΕΥΚΑ. Πριν
   η περιγραφη ηταν σκοπιμα θαμπη (.68 του .nq-ib-desc) για ιεραρχια· ο
   ιδιοκτητης την ΑΝΕΤΡΕΨΕ. Το χρωμα ΔΕΝ μπαινει στο `li`/`p` χωριστα: το `p`
   εχει `color: inherit`, αρα το .nq-ib-desc τα καλυπτει ολα (βλ. κανονα
   `body.nq-page-kataskeyi-istoselidon` παρακατω — ΜΟΝΟ αυτη η σελιδα).

   ΟΙ ΑΡΙΘΜΟΙ ΒΓΑΙΝΟΥΝ ΑΠΟ CSS COUNTER, ΔΕΝ ΕΙΝΑΙ ΓΡΑΜΜΕΝΟΙ ΣΤΟ ΚΕΙΜΕΝΟ:
   το `decimal-leading-zero` δινει 01, 02, 03… μονο του, οποτε αν προστεθει ή
   αφαιρεθει σημειο απο τον builder η αριθμηση παραμενει σωστη. Γραμμενη στο
   περιεχομενο θα ξεχαρβαλωνε σιωπηλα. */
/* 🔴 SCOPE ΣΕΛΙΔΑΣ, ΟΧΙ `body.nq-demo5` — ΡΗΤΟ ΑΙΤΗΜΑ ΤΟΥ ΙΔΙΟΚΤΗΤΗ
   (2026-10-01): «προσοχη δεν θελω να αλαξει το style των cards σε αλλη σελιδα».
   Ο κανονας `.nq-ib-desc` πιο πανω ειναι `body.nq-demo5 …` (0,3,1)· αυτος εδω
   ειναι (0,4,1) επειδη το body εχει ΚΑΙ τις δυο κλασεις — ετσι κερδιζει
   ανεξαρτητα απο τη σειρα στο αρχειο (με μονο το page class θα ηταν ισοπαλια
   (0,3,1) και θα κρεμοταν απο το ποιος ειναι πιο κατω).

   ΚΕΝΟ ΜΩΒ ΓΡΑΜΜΗ → ΠΕΡΙΓΡΑΦΗ (ιδιοκτητης, 2026-10-01: «μικρινε το κενο»):
   ΜΕΤΡΗΘΗΚΕ αρχικα 51px = 17 (margin-bottom του .nq-ib-title) + 34 (margin-top
   του .nq-ib-desc). Τα δυο margins ΔΕΝ συμπτυσσονται (ο .nq-ib-body ειναι
   flex column). Πηγε 51 → 29 → 17 με διαδοχικα «μικρινε το κενο», και τελικα
   ο ιδιοκτητης εδωσε ΡΗΤΗ τιμη: 24px. Βλ. την προδιαγραφη παρακατω (title
   margin-bottom 0 + desc margin-top 24px). */
body.nq-demo5.nq-page-kataskeyi-istoselidon .ki-service-row__card .nq-ib-desc {
  margin-top: 24px;
  color: #BFC0CD;
  font-size: 16px;
  line-height: 1.65;
}
/* ΠΡΟΔΙΑΓΡΑΦΗ ΙΔΙΟΚΤΗΤΗ (2026-10-01) — ΟΛΑ ΜΕΤΡΗΘΗΚΑΝ ΖΩΝΤΑΝΑ ΙΣΑ ΜΕ ΤΙΣ ΤΙΜΕΣ:
   · ΤΙΤΛΟΣ 30px / 700 / line-height 1.15. margin-bottom 0: το κενο γραμμη →
     περιγραφη ειναι ΤΩΡΑ ΜΟΝΟ το margin-top του .nq-ib-desc (24px), οχι αθροισμα.
   · ΜΩΒ ΓΡΑΜΜΗ (::after του τιτλου) 36x2px. Το margin-top 14px δεν αλλαζει.
   · ΠΕΡΙΓΡΑΦΗ 16px / 1.65 / #BFC0CD. ΑΝΕΤΡΕΠΕ το προηγουμενο «ολα λευκα»:
     τωρα η περιγραφη ειναι σκοπιμα πιο απαλη, και μονο το <strong> ειναι
     #F2F2F7 / 600. Το χρωμα μπαινει στο .nq-ib-desc και το <p> το κληρονομει
     (εχει `color: inherit`).
   · ΥΠΟΤΙΤΛΟΣ 11px / 600 / letter-spacing .16em, margin 28px πανω και 16px
     κατω (μεχρι την πρωτη γραμμη της λιστας).
   · ΛΙΣΤΑ: κειμενο 16px / 400 / #E4E4EC, line-height 1.4, padding-block 13px,
     grid `24px minmax(0,1fr)` (το `1fr` της προδιαγραφης ισοδυναμει οπτικα,
     αλλα το minmax(0,…) δεν αφηνει μακρια ασπαστη λεξη να σπρωξει τη στηλη) με column-gap 14px. ΑΡΙΘΜΟΙ 13px, #A69BF5, σταθερη στηλη
     24px (απο το πρωτο track του grid, οχι width στο ::before).
   · ΔΙΑΧΩΡΙΣΤΙΚΑ 1px solid rgba(180,185,215,.12) ΜΟΝΟ ΑΝΑΜΕΣΑ στα στοιχεια:
     ΟΧΙ πανω απο το πρωτο, ΟΧΙ κατω απο το τελευταιο (πριν ειχε border-bottom).
   · ΚΑΝΕΝΑ ΣΤΑΘΕΡΟ ΥΨΟΣ — ουτε height ουτε min-height ουτε overflow. Στο κινητο
     ο τιτλος ξεμπλοκαρεται απο το `white-space: nowrap` του ki-service-row--2,
     ωστε να αναδιπλωνεται φυσικα χωρις να μικρυνει το μεγεθος.
   Ειδικοτητα (0,4,x)/(0,5,x) vs (0,3,x) των γενικων κανονων: κερδιζουν
   ανεξαρτητα απο τη σειρα και πανω απο τα υπαρχοντα mobile padding/margin.
   ΜΟΝΟ αυτη η σελιδα («δεν θελω να αλαξει το style των cards σε αλλη σελιδα»). */
body.nq-demo5.nq-page-kataskeyi-istoselidon .ki-service-row__card .nq-ib-title {
  margin-bottom: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
}
body.nq-demo5.nq-page-kataskeyi-istoselidon .ki-service-row__card .nq-ib-title::after {
  width: 36px;
  height: 2px;
}
body.nq-demo5.nq-page-kataskeyi-istoselidon .ki-service-row__card .nq-ib-desc strong {
  color: #F2F2F7;
  font-weight: 600;
}
body.nq-demo5.nq-page-kataskeyi-istoselidon .ki-service-row__card .nq-ib-desc p.ki-card-eyebrow {
  margin: 28px 0 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
}
body.nq-demo5.nq-page-kataskeyi-istoselidon .ki-service-row__card .ki-card-steps li {
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 14px;
  padding-block: 13px;
  border-top: 1px solid rgba(180, 185, 215, .12);
  color: #E4E4EC;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}
body.nq-demo5.nq-page-kataskeyi-istoselidon .ki-service-row__card .ki-card-steps li:first-child {
  border-top: 0;
}
body.nq-demo5.nq-page-kataskeyi-istoselidon .ki-service-row__card .ki-card-steps li:last-child {
  border-bottom: 0;
}
body.nq-demo5.nq-page-kataskeyi-istoselidon .ki-service-row__card .ki-card-steps li::before {
  color: #A69BF5;
  font-size: 13px;
}
@media (max-width: 767.98px) {
  body.nq-demo5.nq-page-kataskeyi-istoselidon .ki-service-row__card .nq-ib-title {
    white-space: normal;
  }
}
/* (0,4,2): ο κανονας `.nq-ib-desc p { margin:0; font:inherit }` ειναι (0,3,2)
   και πιανει και αυτο το <p>. Το `font: inherit` ειναι SHORTHAND — επαναφερει
   και το font-size στα 15.5px της περιγραφης. Μετρημενο: 15.5px αντι 11px. */
body.nq-demo5 .ki-service-row__card .nq-ib-desc p.ki-card-eyebrow {
  margin: 24px 0 2px;
  color: var(--nq-accent-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1;
}
body.nq-demo5 .ki-service-row__card .ki-card-steps {
  counter-reset: kistep;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.nq-demo5 .ki-service-row__card .ki-card-steps li {
  counter-increment: kistep;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
  color: var(--nq-fg);
  font-size: 14.5px;
  line-height: 1.4;
}
body.nq-demo5 .ki-service-row__card .ki-card-steps li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
body.nq-demo5 .ki-service-row__card .ki-card-steps li::before {
  content: counter(kistep, decimal-leading-zero);
  color: var(--nq-accent-2);
  font-size: 12.5px;
  font-weight: 700;
  /* tabular-nums: αλλιως το 01 και το 11 εχουν διαφορετικο πλατος και η
     στηλη του κειμενου κουνιεται ανα γραμμη. */
  font-variant-numeric: tabular-nums;
}
/* Η κοντη γραμμη τονου κατω απο τον τιτλο, οπως στο mockup. */
body.nq-demo5 .ki-service-row__card .nq-ib-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin-top: 14px;
  background: var(--nq-accent-2);
}
@media (max-width: 767.98px) {
  body.nq-demo5 .ki-service-row__card .nq-ib-desc p.ki-card-eyebrow { margin-top: 18px; }
  body.nq-demo5 .ki-service-row__card .ki-card-steps li { padding: 9px 0; }
}

/* ── /kataskeyi-istoselidon · ΧΩΡΙΣ ΦΟΝΤΟ ΠΙΣΩ ΑΠΟ ΤΙΣ ΦΩΤΟΓΡΑΦΙΕΣ ΤΟΥ SLIDER ──
   ΑΙΤΗΜΑ ΙΔΙΟΚΤΗΤΗ (2026-10-01): «δεν πρεπει να υπαρχει bg χρωμα πισω απο
   τις φωτογραφιες». [figure-xoris-fonto-kataskeyi]

   Το block brand_showcase δινει στο figure `background: #111217` (0,2,1).
   Υπηρχε ηδη ακυρωση για αυτη τη σελιδα, αλλα ΜΟΝΟ μεσα σε
   @media (max-width: 767.98px) — γι' αυτο στον υπολογιστη εμενε το γκρι
   ορθογωνιο. Εδω ισχυει σε ΟΛΑ τα πλατη.

   ΜΟΝΟ ΓΙΑ ΑΥΤΗ ΤΗ ΣΕΛΙΔΑ: δυο κλασεις στο body → (0,3,2), κερδιζει τον
   κανονα του block ανεξαρτητα απο τη σειρα. Η «Εταιρικη ταυτοτητα» κραταει το
   φοντο της. */
body.nq-demo5.nq-page-kataskeyi-istoselidon .nq-brand-showcase__slide figure {
  background: none;
}

/* ── /kataskeyi-istoselidon · ΟΙ ΦΩΤΟΓΡΑΦΙΕΣ ΤΟΥ SLIDER ΧΩΡΑΝΕ ΟΛΟΚΛΗΡΕΣ ──
   [slider-contain-kataskeyi] — 2026-10-01

   ΓΙΑΤΙ contain ΚΑΙ ΟΧΙ cover: οι εικονες ειναι 3:4 (800x1067), διαφανεις,
   με συσκευες που φτανουν σχεδον στην ακρη. Το πλαισιο ειναι πιο ψηλολιγνο
   (1:1.45 στα 1920 ως 1:1.80 στα 768), οποτε το cover του block εκοβε τα
   πλαγια. ΜΕΤΡΗΜΕΝΟ: διαφανο περιθωριο 2.5-9.4% ανα πλευρα, κοψιμο 4-13% —
   οι συσκευες κοβονταν σχεδον σε καθε πλατος (01 και 02 ακομη και στα 1920).
   Με contain φαινεται ολοκληρη η συνθεση· το κενο που μενει πανω-κατω ειναι
   αορατο, γιατι η εικονα ειναι διαφανης και το figure δεν εχει πια φοντο.

   ΜΟΝΟ ΓΙΑ ΑΥΤΗ ΤΗ ΣΕΛΙΔΑ: (0,3,2) εναντι (0,2,1) του block. Η «Εταιρικη
   ταυτοτητα» κραταει το cover, γιατι εκει οι φωτογραφιες γεμιζουν το πλαισιο. */
body.nq-demo5.nq-page-kataskeyi-istoselidon .nq-brand-showcase__slide img {
  object-fit: contain;
  object-position: center;
}