/*
Theme Name:   All4web Child
Theme URI:    https://www.all4web.gr
Description:  Child theme του Divi για το all4web.gr — ενιαίο design system.
Author:       All4web
Template:     Divi
Version:      1.8.0
Text Domain:  all4web-child
*/

/* ==========================================================================
   ΠΩΣ ΑΝΕΒΑΖΟΥΜΕ ΑΥΤΟ ΤΟ ΑΡΧΕΙΟ

   ΜΕΣΩ cPanel File Manager ή FTP — ΟΧΙ από τον επεξεργαστή θεμάτων του
   WordPress. Ο ενσωματωμένος ελεγκτής CSS είναι παλιός και εμφανίζει
   δεκάδες ψευδή "λάθη" για σύγχρονο CSS —  color-mix(), :is(), inset,
   aspect-ratio, overflow-x: clip — και μπλοκάρει την αποθήκευση.
   Οι browsers τα εκτελούν κανονικά.

   ΠΡΟΣΟΧΗ ΣΤΙΣ ΔΙΑΔΡΟΜΕΣ ΕΙΚΟΝΩΝ
   Το site τρέχει σε υποφάκελο /. Όλες οι url() στο αρχείο ξεκινούν
   με /. Όταν πάει live στη ρίζα του domain, αφαίρεσε το /
   από κάθε url() — αναζήτηση για: /wp-content
   ========================================================================== */

/* ==========================================================================
   ΠΕΡΙΕΧΟΜΕΝΑ
   1.  Design tokens
   2.  Base & τυπογραφία
   3.  Κουμπιά
   4.  Header & πλοήγηση
   5.  Hero
   6.  Διαχωρισμός κοινού (audience fork)
   7.  Trust bar
   8.  Πλέγμα υπηρεσιών
   9.  Αριθμοί
   10. Έργα
   11. Μαρτυρία
   12. CTA & φόρμα
   13. Footer
   14. Utilities
   15. Responsive
   16. Προσβασιμότητα
   17. AI εργαλεία eshop (teaser, σελίδα καμπάνιας, demo υπολογιστής)
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   Άλλαξε ΜΟΝΟ το --a4w-brand και ενημερώνεται όλο το site.
   ========================================================================== */

:root {

  /* --- Χρώμα ------------------------------------------------------------ */

  /* Τα δύο χρώματα του λογοτύπου (έκδοση 2026). Το κίτρινο είναι πρακτικά
     ταυτόσημο με αυτό του αρχικού λογοτύπου του 2002. */
  --a4w-brand:            #031457;   /* navy — κουβαλάει όλο το interface */
  --a4w-highlight:        #FECD0C;   /* κίτρινο — τονισμός, ποτέ κείμενο */

  /* Το navy είναι σχεδόν μαύρο: τα hover states ΦΩΤΙΖΟΥΝ, δεν σκουραίνουν */
  --a4w-brand-hover:      color-mix(in srgb, var(--a4w-brand) 78%, #fff);
  --a4w-brand-soft:       color-mix(in srgb, var(--a4w-brand) 5%,  #fff);
  --a4w-brand-line:       color-mix(in srgb, var(--a4w-brand) 20%, #fff);
  --a4w-brand-ring:       color-mix(in srgb, var(--a4w-brand) 20%, transparent);

  --a4w-ink:              #0D1226;   /* τίτλοι */
  --a4w-ink-2:            #48516A;   /* σώμα κειμένου */
  --a4w-ink-3:            #767E94;   /* λεζάντες, meta */

  --a4w-surface:          #FFFFFF;
  --a4w-surface-alt:      #F4F6FB;   /* ψυχρό χαρτί, δένει με το navy */
  --a4w-surface-deep:     #050A1F;   /* footer */

  --a4w-line:             #E2E5EF;
  --a4w-line-strong:      #C5CADB;

  --a4w-success:          #12704C;
  --a4w-danger:           #96131A;

  /* --- Τυπογραφία ------------------------------------------------------- */

  /* Θέλεις sans παντού; Δώσε στο --a4w-font-display την ίδια τιμή με το -text */
  --a4w-font-display:     "Source Serif 4", Georgia, serif;
  --a4w-font-text:        "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --a4w-h1:               clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  --a4w-h2:               clamp(1.7rem, 1.25rem + 1.6vw, 2.4rem);
  --a4w-h3:               1.3125rem;
  --a4w-h4:               1.0625rem;
  --a4w-body:             1.0625rem;   /* 17px */
  --a4w-small:            0.9375rem;   /* 15px */
  --a4w-tiny:             0.8125rem;   /* 13px */

  --a4w-lh-tight:         1.18;
  --a4w-lh-body:          1.7;

  /* --- Χώρος (κλίμακα 8) ------------------------------------------------ */

  --a4w-s1:  0.5rem;
  --a4w-s2:  1rem;
  --a4w-s3:  1.5rem;
  --a4w-s4:  2rem;
  --a4w-s5:  3rem;
  --a4w-s6:  4.5rem;
  --a4w-s7:  7rem;

  /* Πλάτος της μπάρας κύλισης. Ορίζεται στο body, του οποίου το 100% είναι
     το πλάτος της σελίδας ΧΩΡΙΣ τη μπάρα, ενώ το 100vw το περιλαμβάνει.
     Χωρίς αυτή τη διόρθωση, οι ζώνες πλήρους πλάτους στοιχίζουν το
     περιεχόμενό τους 7px αριστερότερα από τις υπόλοιπες ενότητες. */

  /* Κάθετος ρυθμός ενοτήτων: padding ΑΝΑ ΠΛΕΥΡΑ κάθε ενότητας, άρα το
     κενό ανάμεσα σε δύο γειτονικές είναι το διπλάσιο (80px στο κινητό,
     ~120px σε laptop, 128px σε μεγάλη οθόνη). */
  --a4w-rhythm:           clamp(2.5rem, 1.75rem + 2.2vw, 4rem);

  --a4w-container:        1200px;
  --a4w-measure:          68ch;

  /* --- Μορφή ------------------------------------------------------------ */

  --a4w-radius:           10px;
  --a4w-radius-lg:        14px;
  --a4w-ease:             cubic-bezier(0.4, 0, 0.2, 1);
}


/* Το --a4w-sbw ΠΡΕΠΕΙ να οριστεί στο body: το 100% του body είναι το πλάτος
   της σελίδας χωρίς τη μπάρα κύλισης, οπότε η διαφορά δίνει το πλάτος της. */
body { --a4w-sbw: calc(100vw - 100%); }


/* ==========================================================================
   2. BASE & ΤΥΠΟΓΡΑΦΙΑ
   ========================================================================== */

body,
body.et-db #et-boc .et-l p {
  font-family: var(--a4w-font-text);
  font-size: var(--a4w-body);
  line-height: var(--a4w-lh-body);
  color: var(--a4w-ink-2);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2,
.et_pb_module h3, .et_pb_module h4 {
  color: var(--a4w-ink);
  line-height: var(--a4w-lh-tight);
  letter-spacing: -0.015em;
  font-weight: 600;
}

h1, h2 { font-family: var(--a4w-font-display); }
h3, h4, h5, h6 { font-family: var(--a4w-font-text); }

h1 { font-size: var(--a4w-h1); }
h2 { font-size: var(--a4w-h2); }
h3 { font-size: var(--a4w-h3); }
h4 { font-size: var(--a4w-h4); }

/* Οι επικεφαλίδες αναπνέουν στο σώμα κειμένου */
.a4w-prose > * + * { margin-top: var(--a4w-s2); }
.a4w-prose h2,
.a4w-prose h3 { margin-top: var(--a4w-s4); }
.a4w-prose p { max-width: var(--a4w-measure); }

a { color: var(--a4w-brand); text-decoration: none; transition: color .18s var(--a4w-ease); }
a:hover { color: var(--a4w-brand-hover); }

/* Πλάτος container — Divi */
.et_pb_row { width: 90%; max-width: var(--a4w-container); }

/* Δίχτυ ασφαλείας: σε Fullwidth Code module (χωρίς Row) τα blocks μας
   κεντράρονται ούτως ή άλλως, σε όποιο βάθος κι αν βρίσκονται. */
.et_pb_fullwidth_code :is(
  .a4w-hero, .a4w-fork, .a4w-trust, .a4w-services, .a4w-stats,
  .a4w-cases, .a4w-quote, .a4w-cta, .a4w-head, .a4w-jump, .a4w-group,
  .a4w-intro, .a4w-features, .a4w-steps, .a4w-plans, .a4w-faq, .a4w-faq-block,
  .a4w-showcase, .a4w-promo, .a4w-problems, .a4w-duo, .a4w-metrics
) {
  width: 90%;
  max-width: var(--a4w-container);
  margin-left: auto;
  margin-right: auto;
}

/* ...εκτός από το hero, που ορίζει μόνο του το πλάτος του */
.et_pb_fullwidth_code .a4w-hero-section .a4w-hero { width: 100%; }

/* ...και εκτός από όσα είναι ήδη μέσα σε κεντραρισμένο γονέα,
   αλλιώς θα περιορίζονταν δύο φορές και θα έβγαιναν στενότερα. */
.et_pb_fullwidth_code .a4w-group :is(.a4w-services, .a4w-head),
.et_pb_fullwidth_code .a4w-band :is(.a4w-services, .a4w-head, .a4w-quote, .a4w-intro, .a4w-features, .a4w-steps, .a4w-plans, .a4w-faq, .a4w-faq-block, .a4w-showcase, .a4w-problems, .a4w-duo, .a4w-metrics),
.et_pb_fullwidth_code .a4w-jump .a4w-jump__list {
  width: 100%;
  max-width: none;
}
.et_pb_fullwidth_code .a4w-faq-block .a4w-faq { width: 100%; max-width: none; }

/* ==========================================================================
   ΕΝΙΑΙΟΣ ΚΑΘΕΤΟΣ ΡΥΘΜΟΣ ΕΝΟΤΗΤΩΝ

   ΠΡΟΣΟΧΗ ΣΤΗ ΔΙΠΛΗ ΔΗΛΩΣΗ ΠΑΡΑΚΑΤΩ — ΔΕΝ ΕΙΝΑΙ ΠΕΡΙΤΤΗ.
   Το Divi δηλώνει `.et_pb_fullwidth_section { padding-top: 0; padding-bottom: 0 }`
   στο δικό του inline CSS, που φορτώνει ΜΕΤΑ από αυτό το αρχείο. Επειδή η
   δήλωσή του είναι εξίσου ειδική αλλά μεταγενέστερη, ένα σκέτο
   `.et_pb_section { padding: ... }` χάνει και ο ρυθμός δεν εφαρμόζεται
   ΠΟΥΘΕΝΑ — όλες οι σελίδες μας χρησιμοποιούν Fullwidth sections.
   Γι' αυτό στοχεύουμε ρητά και τις δύο κλάσεις μαζί.
   ========================================================================== */

.et_pb_section { padding: var(--a4w-rhythm) 0; }
.et_pb_section.et_pb_fullwidth_section { padding: var(--a4w-rhythm) 0; }

/* Το hero ακουμπάει το header — καμία λευκή λωρίδα από πάνω του */
.et_pb_section:first-child,
.et_pb_section.et_pb_fullwidth_section:first-child { padding-top: 0; }

.et_pb_section.a4w-section--tight,
.et_pb_section.et_pb_fullwidth_section.a4w-section--tight { padding: var(--a4w-s4) 0; }

/* ΔΙΧΤΥ ΑΣΦΑΛΕΙΑΣ: δύο ή περισσότερα Code modules στο ΙΔΙΟ Section.
   Η σωστή δομή είναι ένα module ανά Section — τότε ο παρακάτω κανόνας δεν
   ενεργοποιείται ποτέ, γιατί δεν υπάρχει αδελφό module δίπλα του. Όταν
   όμως μπουν πολλά modules μαζί σε ένα Section, το padding του Section
   μετράει μία φορά συνολικά και οι ενότητες κολλάνε η μία πάνω στην άλλη. */
.et_pb_fullwidth_code + .et_pb_fullwidth_code,
.et_pb_code + .et_pb_code {
  margin-top: calc(var(--a4w-rhythm) * 2);
}
.et_pb_row { padding: 0; }

/* Εναλλακτικό φόντο ενότητας */
.a4w-section--alt { background: var(--a4w-surface-alt); }

/* Αυτόνομη ζώνη πλήρους πλάτους — μπαίνει μέσα στο Code module,
   δεν χρειάζεται ρύθμιση στο Divi Section. */
.a4w-band {
  width: calc(100vw - var(--a4w-sbw));
  max-width: calc(100vw - var(--a4w-sbw));
  margin-left: calc(50% - 50vw + var(--a4w-sbw) / 2);
  padding: var(--a4w-s6) 5%;
}
.a4w-band--alt  { background: var(--a4w-surface-alt); }
.a4w-band--dark { background: var(--a4w-surface-deep); }

/* Το περιεχόμενο μέσα στη ζώνη κεντράρεται στο ίδιο πλάτος με τις άλλες ενότητες */
.a4w-band > * {
  width: 100%;
  max-width: var(--a4w-container);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .a4w-band { padding: var(--a4w-s5) 5%; }
}


/* ==========================================================================
   3. ΚΟΥΜΠΙΑ
   ========================================================================== */

.a4w-btn,
.et_pb_button.a4w-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--a4w-s1);
  font-family: var(--a4w-font-text);
  font-size: var(--a4w-small);
  font-weight: 500;
  line-height: 1;
  padding: 0.875rem 1.5rem;
  border-radius: var(--a4w-radius);
  border: 1px solid transparent;
  transition: background-color .18s var(--a4w-ease),
              border-color .18s var(--a4w-ease),
              color .18s var(--a4w-ease);
}

/* Το Divi προσθέτει ένα βελάκι σε κάθε κουμπί — το αφαιρούμε */
.a4w-btn.et_pb_button:after,
.a4w-btn.et_pb_button:before { display: none !important; }

.a4w-btn--primary,
.et_pb_button.a4w-btn--primary {
  background: var(--a4w-brand);
  border-color: var(--a4w-brand);
  color: #fff !important;
}
.a4w-btn--primary:hover,
.et_pb_button.a4w-btn--primary:hover {
  background: var(--a4w-brand-hover);
  border-color: var(--a4w-brand-hover);
  color: #fff !important;
}

.a4w-btn--ghost,
.et_pb_button.a4w-btn--ghost {
  background: transparent;
  border-color: var(--a4w-line-strong);
  color: var(--a4w-ink) !important;
}
.a4w-btn--ghost:hover,
.et_pb_button.a4w-btn--ghost:hover {
  border-color: var(--a4w-ink);
  background: transparent;
}

.a4w-btn--quiet {
  padding: 0;
  color: var(--a4w-brand);
  font-weight: 500;
}
.a4w-btn--quiet:hover { color: var(--a4w-brand-hover); }


/* ==========================================================================
   4. HEADER & ΠΛΟΗΓΗΣΗ
   ========================================================================== */

#main-header {
  background: var(--a4w-surface);
  border-bottom: 1px solid var(--a4w-line);
  box-shadow: none !important;
  transition: border-color .2s var(--a4w-ease);
}

/* Η κλάση προστίθεται από το divi-integration.js στο scroll */
#main-header.a4w-header--scrolled { border-bottom-color: var(--a4w-line-strong); }

#top-menu li a {
  font-family: var(--a4w-font-text);
  font-size: var(--a4w-small);
  font-weight: 500;
  color: var(--a4w-ink);
  opacity: 1;
  padding-bottom: 1.25rem;
}
#top-menu li a:hover { color: var(--a4w-brand); opacity: 1; }

#top-menu li.current-menu-item > a { color: var(--a4w-brand); }

/* Το CTA στο μενού: πρόσθεσε την κλάση a4w-nav-cta στο menu item */
#top-menu li.a4w-nav-cta > a {
  background: var(--a4w-brand);
  color: #fff;
  border-radius: var(--a4w-radius);
  padding: 0.7rem 1.15rem !important;
  line-height: 1;
}
#top-menu li.a4w-nav-cta > a:hover { background: var(--a4w-brand-hover); color: #fff; }

/* Τηλέφωνο στο header — μπαίνει ως στοιχείο μενού με κλάση a4w-header-phone-item */
#top-menu li.a4w-header-phone-item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  color: var(--a4w-ink);
  white-space: nowrap;
}
#top-menu li.a4w-header-phone-item > a::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  flex-shrink: 0;
}
#top-menu li.a4w-header-phone-item > a:hover { color: var(--a4w-brand); }

/* Απόκρυψη της αναζήτησης του Divi — δεν χρειάζεται σε site δέκα σελίδων
   και προσθέτει θόρυβο δίπλα στο CTA. */
#et_top_search { display: none; }
#et-top-navigation { padding-right: 0 !important; }


/* ==========================================================================
   5. HERO
   ========================================================================== */

.a4w-hero { padding: var(--a4w-s7) 0 var(--a4w-s6); }

/* --- Σκούρο hero με φωτογραφία πλήρους πλάτους -------------------------- */

/* Μπαίνει στο ίδιο το markup του Code module — δεν χρειάζεται κλάση στο Section.
   Σπάει σε πλήρες πλάτος ακόμα κι αν βρίσκεται μέσα σε κανονικό Row. */
.a4w-hero-section {
  width: calc(100vw - var(--a4w-sbw));
  max-width: calc(100vw - var(--a4w-sbw));
  margin-left: calc(50% - 50vw + var(--a4w-sbw) / 2);
  padding: var(--a4w-s7) 5% var(--a4w-s6);
  background-color: #000F27;              /* χρώμα της φωτογραφίας: φαίνεται όσο φορτώνει */
  background-image: url("/wp-content/uploads/2026/09/hero-background.webp");
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

/* Αποτρέπει οριζόντια μπάρα κύλισης από το 100vw */
body { overflow-x: clip; }

/* Το περιεχόμενο μέσα στο hero κεντράρεται στο ίδιο πλάτος με τις άλλες ενότητες */
.a4w-hero-section .a4w-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--a4w-container);
  margin: 0 auto;
  padding: 0;
}

/* Το κείμενο περιορίζεται στο αριστερό μισό, εκεί που η εικόνα είναι σκούρα */
.a4w-hero-section .a4w-hero > * { max-width: 46%; }
.a4w-hero-section .a4w-hero__actions { max-width: none; }

.a4w-hero-section h1,
.a4w-hero-section .a4w-hero__sub { color: #fff; }
.a4w-hero-section .a4w-hero__sub { opacity: 0.82; }

.a4w-hero-section .a4w-hero__badge {
  color: var(--a4w-highlight);
  background: rgba(255,255,255,0.08);
  border-color: rgba(254,205,12,0.35);
}

/* Το κύριο κουμπί γίνεται κίτρινο: το navy θα χανόταν στο σκούρο φόντο */
.a4w-hero-section .a4w-btn--primary {
  background: var(--a4w-highlight);
  border-color: var(--a4w-highlight);
  color: var(--a4w-brand) !important;
  font-weight: 600;
}
.a4w-hero-section .a4w-btn--primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--a4w-brand) !important;
}

.a4w-hero-section .a4w-btn--ghost {
  border-color: rgba(255,255,255,0.4);
  color: #fff !important;
}
.a4w-hero-section .a4w-btn--ghost:hover { border-color: #fff; }

/* Σε στενές οθόνες το laptop βρίσκεται κάτω από το κείμενο:
   σκουραίνουμε όλη την εικόνα ώστε να παραμείνει αναγνώσιμο. */
@media (max-width: 980px) {
  .a4w-hero-section { background-position: 72% center; }
  .a4w-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(0,15,39,0.96) 0%, rgba(0,15,39,0.82) 55%, rgba(0,15,39,0.62) 100%);
  }
  .a4w-hero-section .a4w-hero > * { max-width: 70%; }
}

@media (max-width: 767px) {
  .a4w-hero-section { padding: var(--a4w-s5) 5% var(--a4w-s4); }
  .a4w-hero-section .a4w-hero > * { max-width: 100%; }
  .a4w-hero-section::before {
    background: linear-gradient(180deg, rgba(0,15,39,0.94) 0%, rgba(0,15,39,0.86) 100%);
  }
}

/* Το header ακουμπάει σε σκούρο hero: κρατάμε λευκό header με καθαρή γραμμή */
.a4w-hero-section + * { margin-top: 0; }

.a4w-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--a4w-tiny);
  font-weight: 500;
  color: var(--a4w-brand);
  background: var(--a4w-brand-soft);
  border: 1px solid var(--a4w-brand-line);
  border-radius: 100px;
  padding: 0.4rem 0.9rem;
  margin-bottom: var(--a4w-s3);
}

.a4w-hero h1 {
  max-width: 18ch;
  margin-bottom: var(--a4w-s3);
}

.a4w-hero__sub {
  font-size: 1.1875rem;
  color: var(--a4w-ink-2);
  max-width: 54ch;
  margin-bottom: var(--a4w-s4);
}

.a4w-hero__actions { display: flex; flex-wrap: wrap; gap: var(--a4w-s2); }


/* ==========================================================================
   5b. HERO ΕΣΩΤΕΡΙΚΩΝ ΣΕΛΙΔΩΝ
   Χαμηλότερο από της αρχικής — δεν πρέπει να την ανταγωνίζεται.
   Μία κλάση για τη δομή, μία ανά σελίδα μόνο για την εικόνα.
   ========================================================================== */

.a4w-pagehero {
  width: calc(100vw - var(--a4w-sbw));
  max-width: calc(100vw - var(--a4w-sbw));
  margin-left: calc(50% - 50vw + var(--a4w-sbw) / 2);
  /* Κλιμακούμενο padding αντί για vh: το vh στα κινητά αλλάζει όταν
     εμφανίζεται/κρύβεται η μπάρα διευθύνσεων και το hero «αναπηδά». */
  padding: clamp(2.25rem, 4.5vw, 3.75rem) 5%;
  background-color: #071033;
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
  /* ΠΟΤΕ fixed: σπάει σε iOS Safari και σε Android Chrome */
  background-attachment: scroll;
  position: relative;
}

/* Σκούρο πέπλο: εξασφαλίζει αναγνωσιμότητα ό,τι κι αν δείχνει η φωτογραφία */
.a4w-pagehero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg,
    rgba(3,20,87,0.94) 0%,
    rgba(3,20,87,0.80) 45%,
    rgba(3,20,87,0.35) 100%);
}

.a4w-pagehero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--a4w-container);
  margin: 0 auto;
}

.a4w-pagehero__crumb {
  font-size: var(--a4w-tiny);
  color: var(--a4w-highlight);
  margin: 0 0 var(--a4w-s2);
}
.a4w-pagehero__crumb a { color: rgba(255,255,255,0.6); }
.a4w-pagehero__crumb a:hover { color: #fff; }

/* Η επικεφαλίδα εδώ είναι ΜΙΚΡΟΤΕΡΗ από της αρχικής.
   Η αρχική πείθει, οι εσωτερικές προσανατολίζουν. */
.a4w-pagehero h1 {
  color: #fff;
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.6rem);
  max-width: 20ch;
  margin: 0 0 var(--a4w-s2);
}

.a4w-pagehero__sub {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  max-width: 52ch;
  margin: 0;
}

/* --- Μία γραμμή ανά σελίδα: μόνο η εικόνα αλλάζει ---------------------- */

/* --- Μία γραμμή ανά σελίδα: μόνο η εικόνα αλλάζει ---------------------- */

.a4w-pagehero--ypiresies  { background-image: url("/wp-content/uploads/2026/09/hero-ypiresies.webp"); }
.a4w-pagehero--web        { background-image: url("/wp-content/uploads/2026/09/hero-web.webp"); }
.a4w-pagehero--marketing  { background-image: url("/wp-content/uploads/2026/09/hero-marketing.webp"); }
.a4w-pagehero--support    { background-image: url("/wp-content/uploads/2026/09/hero-support.webp"); }
.a4w-pagehero--diktya     { background-image: url("/wp-content/uploads/2026/09/hero-diktya.webp"); }
.a4w-pagehero--cloud      { background-image: url("/wp-content/uploads/2026/09/hero-cloud.webp"); }

/* Όλες οι εικόνες της οικογένειας έχουν ήδη σκούρα, άδεια αριστερή ζώνη
   (μετρημένη αντίθεση 16:1 έως 17:1 με λευκό κείμενο).
   Άρα ελαφρύ πέπλο — μόνο για ομοιομορφία, όχι για αναγνωσιμότητα. */
.a4w-pagehero--ypiresies::before,
.a4w-pagehero--web::before,
.a4w-pagehero--marketing::before,
.a4w-pagehero--support::before,
.a4w-pagehero--diktya::before,
.a4w-pagehero--cloud::before {
  background: linear-gradient(95deg,
    rgba(3,20,87,0.55) 0%,
    rgba(3,20,87,0.25) 45%,
    rgba(3,20,87,0.05) 100%);
}

@media (max-width: 980px) {
  .a4w-pagehero { background-position: 68% center; }
  .a4w-pagehero h1 { max-width: 24ch; }
}

@media (max-width: 767px) {
  /* 5% ώστε το κείμενο του hero να πέφτει στην ίδια κατακόρυφη με τις
     υπόλοιπες ενότητες (που παίρνουν width:90%, δηλαδή 5% ανά πλευρά) */
  .a4w-pagehero { padding: clamp(1.75rem, 6vw, 2.5rem) 5%; }
  .a4w-pagehero h1 { max-width: none; }
  .a4w-pagehero__sub { font-size: 1rem; max-width: none; }
  .a4w-pagehero::before {
    background: linear-gradient(180deg, rgba(3,20,87,0.93) 0%, rgba(3,20,87,0.85) 100%);
  }
}


/* ==========================================================================
   6. ΔΙΑΧΩΡΙΣΜΟΣ ΚΟΙΝΟΥ
   ========================================================================== */

.a4w-fork {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--a4w-s2);
}

.a4w-fork__card {
  display: block;
  background: var(--a4w-surface);
  border: 1px solid var(--a4w-line);
  border-radius: var(--a4w-radius-lg);
  padding: var(--a4w-s3);
  transition: border-color .18s var(--a4w-ease);
}
.a4w-fork__card:hover { border-color: var(--a4w-brand); }

.a4w-fork__card i,
.a4w-fork__card svg { color: var(--a4w-brand); font-size: 26px; }

.a4w-fork__card h3 { margin: var(--a4w-s2) 0 0.35rem; }
.a4w-fork__card p { color: var(--a4w-ink-2); font-size: var(--a4w-small); margin: 0; }


/* ==========================================================================
   7. TRUST BAR
   ========================================================================== */

.a4w-trust {
  display: flex;
  align-items: center;
  gap: var(--a4w-s4);
  flex-wrap: wrap;
  justify-content: center;
}

.a4w-trust__label {
  font-size: var(--a4w-tiny);
  color: var(--a4w-ink-3);
  width: 100%;
  text-align: center;
  margin-bottom: var(--a4w-s1);
}

.a4w-trust img {
  max-height: 34px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity .2s var(--a4w-ease), filter .2s var(--a4w-ease);
}
.a4w-trust img:hover { filter: grayscale(0); opacity: 1; }


/* ==========================================================================
   8. ΠΛΕΓΜΑ ΥΠΗΡΕΣΙΩΝ
   Ένα pattern, 11 φορές. Νέα υπηρεσία = ένα ακόμα <article>.
   ========================================================================== */

.a4w-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--a4w-s2);
}

.a4w-service {
  display: flex;
  flex-direction: column;
  background: var(--a4w-surface);
  border: 1px solid var(--a4w-line);
  border-radius: var(--a4w-radius-lg);
  padding: var(--a4w-s3);
  transition: border-color .18s var(--a4w-ease);
}
.a4w-service:hover { border-color: var(--a4w-line-strong); }

.a4w-service__icon {
  color: var(--a4w-brand);
  margin-bottom: var(--a4w-s3);
  line-height: 0;
}
.a4w-service__icon svg { display: block; width: 32px; height: 32px; }

.a4w-service__title { margin: 0 0 0.6rem; font-size: 1.375rem; }

/* Η μία πρόταση — το όφελος. Σκουρότερη και μεγαλύτερη από τα bullets:
   εκεί χτίζεται η ιεραρχία, όχι στη σμίκρυνση της λίστας. */
.a4w-service__lead {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--a4w-ink);
  margin: 0 0 var(--a4w-s3);
}

/* Το !important χρειάζεται: το Divi επιβάλλει list-style-type: disc
   στις λίστες μέσα σε modules και εμφανίζονται δύο κουκκίδες. */
.a4w-service__list,
.a4w-service__list li {
  list-style: none !important;
  list-style-type: none !important;
}

.a4w-service__list {
  margin: 0 0 var(--a4w-s2);
  padding: 0;
  border-top: 1px solid var(--a4w-line);
  padding-top: var(--a4w-s2);
}

.a4w-service__list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--a4w-small);
  line-height: 1.55;
  color: var(--a4w-ink-2);
  margin-bottom: 0.55rem;
}
.a4w-service__list li:last-child { margin-bottom: 0; }

.a4w-service__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--a4w-brand);
  opacity: 0.45;
}

/* Το link μπαίνει ΜΟΝΟ στις υπηρεσίες με αναλυτική σελίδα */
.a4w-service__more {
  margin-top: auto;
  padding-top: var(--a4w-s2);
  font-size: var(--a4w-small);
  font-weight: 500;
}

/* Η γέφυρα από τη βιτρίνα της αρχικής προς τον πλήρη κατάλογο */
.a4w-services__all {
  text-align: center;
  margin: var(--a4w-s4) 0 0;
}


/* ==========================================================================
   8b. HUB ΥΠΗΡΕΣΙΩΝ
   ========================================================================== */

/* Οι anchors δεν πρέπει να κρύβονται κάτω από το sticky header */
[id] { scroll-margin-top: 100px; }

/* Γρήγορη πλοήγηση — κολλάει κάτω από το header καθώς κατεβαίνεις */
.a4w-jump {
  position: sticky;
  top: 80px;
  z-index: 20;
  background: var(--a4w-surface);
  border-bottom: 1px solid var(--a4w-line);
  padding: var(--a4w-s2) 0;
  margin-bottom: var(--a4w-s5);
}

.a4w-jump__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none !important;
  list-style-type: none !important;
  margin: 0;
  padding: 0;
}
.a4w-jump__list li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0;
  padding: 0;
}

.a4w-jump__list a {
  display: inline-block;
  font-size: var(--a4w-tiny);
  font-weight: 500;
  color: var(--a4w-ink-2);
  border: 1px solid var(--a4w-line);
  border-radius: 100px;
  padding: 0.4rem 0.85rem;
  transition: border-color .15s var(--a4w-ease), color .15s var(--a4w-ease);
}
.a4w-jump__list a:hover {
  color: var(--a4w-brand);
  border-color: var(--a4w-brand);
}

/* Ομάδα υπηρεσιών */
.a4w-group { margin-bottom: var(--a4w-s6); }
.a4w-group:last-child { margin-bottom: 0; }

.a4w-group__head {
  display: flex;
  align-items: baseline;
  gap: var(--a4w-s2);
  margin-bottom: var(--a4w-s3);
  padding-bottom: var(--a4w-s2);
  border-bottom: 1px solid var(--a4w-line);
}

.a4w-group__head h2 { margin: 0; font-size: var(--a4w-h3); }

.a4w-group__count {
  font-size: var(--a4w-tiny);
  color: var(--a4w-ink-3);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .a4w-jump { position: static; margin-bottom: var(--a4w-s4); }
  [id] { scroll-margin-top: 20px; }
}


/* ==========================================================================
   8c. ΣΕΛΙΔΕΣ ΥΠΗΡΕΣΙΩΝ
   Επαναχρησιμοποιήσιμα components — ίδια σε όλες τις 5 αναλυτικές σελίδες.
   ========================================================================== */

/* --- Εισαγωγή: τίτλος αριστερά, κείμενο δεξιά ------------------------- */

.a4w-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--a4w-s5);
  align-items: start;
}

/* Ο τίτλος ταξιδεύει με το κείμενο αντί να αφήνει κενό από κάτω του */
.a4w-intro > h2,
.a4w-intro__aside {
  position: sticky;
  top: 120px;
  margin: 0;
}

.a4w-intro__aside h2 { margin: 0 0 var(--a4w-s2); }

/* Προαιρετικό στοιχείο κάτω από τον τίτλο: γεμίζει τη στήλη με ουσία */
.a4w-intro__note {
  font-size: var(--a4w-small);
  color: var(--a4w-ink-3);
  border-left: 3px solid var(--a4w-highlight);
  padding-left: var(--a4w-s2);
  margin: var(--a4w-s3) 0 0;
  max-width: 30ch;
}

.a4w-intro__body > p { margin: 0 0 var(--a4w-s2); max-width: 60ch; }
.a4w-intro__body > p:last-child { margin-bottom: 0; }
.a4w-intro__body strong { color: var(--a4w-ink); font-weight: 600; }

/* --- Τι περιλαμβάνει --------------------------------------------------- */

.a4w-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--a4w-s3) var(--a4w-s4);
}

.a4w-feature { padding-left: 2rem; position: relative; }

.a4w-feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--a4w-brand-soft);
  border: 1px solid var(--a4w-brand-line);
}
.a4w-feature::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.5rem;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--a4w-brand);
  border-bottom: 2px solid var(--a4w-brand);
  transform: rotate(-45deg);
}

.a4w-feature h3 { font-size: 1rem; margin: 0 0 0.3rem; }
.a4w-feature p { font-size: var(--a4w-small); margin: 0; color: var(--a4w-ink-2); }

/* --- Πώς δουλεύουμε ---------------------------------------------------- */

.a4w-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--a4w-s3);
  counter-reset: a4wstep;
}

.a4w-step {
  position: relative;
  padding-top: var(--a4w-s3);
  border-top: 2px solid var(--a4w-line);
}
.a4w-step::before {
  counter-increment: a4wstep;
  content: counter(a4wstep);
  position: absolute;
  top: -0.9rem;
  left: 0;
  background: var(--a4w-surface);
  padding-right: 0.6rem;
  font-family: var(--a4w-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--a4w-brand);
  line-height: 1;
}
.a4w-band--alt .a4w-step::before { background: var(--a4w-surface-alt); }

.a4w-step h3 { font-size: 1.0625rem; margin: 0 0 0.4rem; }
.a4w-step p { font-size: var(--a4w-small); margin: 0; color: var(--a4w-ink-2); }

/* --- Τρόποι συνεργασίας ------------------------------------------------ */

.a4w-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--a4w-s2);
}

.a4w-plan {
  background: var(--a4w-surface);
  border: 1px solid var(--a4w-line);
  border-radius: var(--a4w-radius-lg);
  padding: var(--a4w-s3);
}
.a4w-plan--featured { border-color: var(--a4w-brand); }

.a4w-plan__tag {
  display: inline-block;
  font-size: var(--a4w-tiny);
  font-weight: 500;
  color: var(--a4w-brand);
  background: var(--a4w-brand-soft);
  border-radius: 100px;
  padding: 0.25rem 0.7rem;
  margin-bottom: var(--a4w-s2);
}
.a4w-plan h3 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.a4w-plan__lead { font-size: var(--a4w-small); color: var(--a4w-ink-2); margin: 0 0 var(--a4w-s2); }

.a4w-plan__list,
.a4w-plan__list li { list-style: none !important; list-style-type: none !important; }
.a4w-plan__list { margin: 0; padding: 0; border-top: 1px solid var(--a4w-line); padding-top: var(--a4w-s2); }
.a4w-plan__list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--a4w-small);
  line-height: 1.55;
  color: var(--a4w-ink-2);
  margin-bottom: 0.55rem;
}
.a4w-plan__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--a4w-brand);
  opacity: 0.45;
}

/* --- Συχνές ερωτήσεις — χωρίς JavaScript ------------------------------- */

/* Δύο στήλες: τίτλος αριστερά, ερωτήσεις δεξιά.
   Αλλιώς το δεξί μισό της σελίδας μένει εντελώς άδειο. */
.a4w-faq-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  gap: var(--a4w-s5);
  align-items: start;
}
.a4w-faq-block__aside { position: sticky; top: 120px; }
.a4w-faq-block__aside h2 { margin: 0 0 var(--a4w-s2); }
.a4w-faq-block__aside p { margin: 0; color: var(--a4w-ink-2); font-size: var(--a4w-small); }

.a4w-faq { max-width: none; }

.a4w-faq details {
  border-bottom: 1px solid var(--a4w-line);
  padding: var(--a4w-s2) 0;
}
.a4w-faq details:first-of-type { border-top: 1px solid var(--a4w-line); }

.a4w-faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--a4w-font-text);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--a4w-ink);
  padding-right: 2rem;
  position: relative;
}
.a4w-faq summary::-webkit-details-marker { display: none; }

.a4w-faq summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 0.4em;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--a4w-brand);
  border-bottom: 2px solid var(--a4w-brand);
  transform: rotate(45deg);
  transition: transform .2s var(--a4w-ease);
}
.a4w-faq details[open] summary::after { transform: rotate(-135deg); }

.a4w-faq details p {
  margin: var(--a4w-s2) 0 0;
  font-size: var(--a4w-small);
  color: var(--a4w-ink-2);
  max-width: 60ch;
}

@media (max-width: 980px) {
  .a4w-intro > h2, .a4w-intro__aside,
  .a4w-faq-block__aside { position: static; }
}

@media (max-width: 767px) {
  .a4w-intro,
  .a4w-faq-block { grid-template-columns: 1fr; gap: var(--a4w-s3); }
}


/* ==========================================================================
   8d. ΕΝΟΤΗΤΑ ΜΕ ΦΩΤΟΓΡΑΦΙΑ
   Σπάει τη μονοτονία του κειμένου. Μία σε κάθε σελίδα, όχι περισσότερες.
   ========================================================================== */

/* Οι δύο στήλες ξεκινούν και τελειώνουν στην ίδια γραμμή: το stretch τις
   κάνει ισοϋψείς, αλλιώς η φωτογραφία κρέμεται πάνω και κάτω από το κείμενο. */
.a4w-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--a4w-s5);
  align-items: stretch;
}

/* Εναλλαγή πλευράς: η εικόνα δεξιά */
.a4w-showcase--flip .a4w-showcase__media { order: 2; }

/* Το κείμενο κεντράρεται κάθετα μέσα στη δική του στήλη, που έχει πλέον
   το ύψος της φωτογραφίας. align-items: flex-start ώστε το κουμπί να
   κρατήσει το φυσικό του πλάτος αντί να τεντωθεί σε όλη τη στήλη. */
.a4w-showcase__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.a4w-showcase__body > .a4w-checks { align-self: stretch; }

.a4w-showcase__media {
  position: relative;
  border-radius: var(--a4w-radius-lg);
  overflow: hidden;
  background: var(--a4w-surface-alt);
  min-height: 380px;
}
.a4w-showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Σήμα πάνω στη φωτογραφία — προαιρετικό */
.a4w-showcase__badge {
  position: absolute;
  right: var(--a4w-s2);
  bottom: var(--a4w-s2);
  background: var(--a4w-brand);
  color: #fff;
  border-radius: var(--a4w-radius);
  padding: 0.7rem 1rem;
  line-height: 1.2;
}
.a4w-showcase__badge strong {
  display: block;
  font-family: var(--a4w-font-display);
  font-size: 1.5rem;
  font-weight: 600;
}
.a4w-showcase__badge span {
  font-size: var(--a4w-tiny);
  opacity: 0.85;
}


/* --- Overlay ανά εικόνα showcase --------------------------------------- */
.a4w-showcase__media--web       { background: rgba(255,255,255,0.18); }
.a4w-showcase__media--support   { background: rgba(0,0,0,0.12); }
.a4w-showcase__media--analytics { background: rgba(255,255,255,0.12); }
.a4w-showcase__media--cloud     { background: rgba(255,255,255,0.15); }

.a4w-showcase__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.a4w-showcase__media--web::after       { background: rgba(3,20,87,0.08); }
.a4w-showcase__media--support::after   { background: rgba(0,0,0,0.08); }
.a4w-showcase__media--analytics::after { background: rgba(3,20,87,0.06); }
.a4w-showcase__media--cloud::after     { background: rgba(3,20,87,0.06); }

.a4w-showcase__body h2 { margin: 0 0 var(--a4w-s2); }
.a4w-showcase__body > p { margin: 0 0 var(--a4w-s2); color: var(--a4w-ink-2); }

/* Λίστα με τικ, σε δύο στήλες */
.a4w-checks,
.a4w-checks li { list-style: none !important; list-style-type: none !important; }
.a4w-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.65rem var(--a4w-s2);
  margin: var(--a4w-s3) 0;
  padding: 0;
}
.a4w-checks li {
  position: relative;
  padding-left: 1.9rem;
  font-size: var(--a4w-small);
  font-weight: 500;
  color: var(--a4w-ink);
  line-height: 1.4;
}
.a4w-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--a4w-brand);
}
.a4w-checks li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

@media (max-width: 900px) {
  .a4w-showcase { grid-template-columns: 1fr; gap: var(--a4w-s3); }
  .a4w-showcase--flip .a4w-showcase__media { order: 0; }
  /* Σε μία στήλη δεν υπάρχει αδελφή στήλη να δώσει ύψος στη φωτογραφία,
     οπότε το ύψος το ορίζει η αναλογία της. */
  .a4w-showcase__media { min-height: 0; aspect-ratio: 16 / 10; }
  .a4w-showcase__body { display: block; }
}


/* ==========================================================================
   9. ΑΡΙΘΜΟΙ
   ========================================================================== */

.a4w-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--a4w-s3);
  text-align: center;
}

.a4w-stat__value {
  font-family: var(--a4w-font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 600;
  color: var(--a4w-ink);
  line-height: 1;
  display: block;
}

.a4w-stat__label {
  font-size: var(--a4w-small);
  color: var(--a4w-ink-3);
  margin-top: 0.5rem;
  display: block;
}


/* ==========================================================================
   10. ΕΡΓΑ
   ========================================================================== */

.a4w-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--a4w-s2);
}

.a4w-case {
  display: block;
  background: var(--a4w-surface);
  border: 1px solid var(--a4w-line);
  border-radius: var(--a4w-radius-lg);
  overflow: hidden;
}

.a4w-case__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--a4w-surface-alt); }
.a4w-case__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.a4w-case__body { padding: var(--a4w-s3); }
.a4w-case__client { font-size: var(--a4w-tiny); color: var(--a4w-ink-3); margin: 0 0 0.35rem; }
.a4w-case__title { margin: 0 0 0.5rem; font-size: var(--a4w-h4); }
.a4w-case__result { font-size: var(--a4w-small); color: var(--a4w-ink-2); margin: 0; }


/* ==========================================================================
   11. ΜΑΡΤΥΡΙΑ
   ========================================================================== */

.a4w-quote { max-width: 44rem; margin: 0 auto; text-align: center; }

.a4w-quote__text {
  font-family: var(--a4w-font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  line-height: 1.45;
  color: var(--a4w-ink);
  margin: 0 0 var(--a4w-s3);
}

.a4w-quote__meta { font-size: var(--a4w-small); color: var(--a4w-ink-3); }
.a4w-quote__meta strong { color: var(--a4w-ink); font-weight: 500; }


/* ==========================================================================
   12. CTA & ΦΟΡΜΑ
   ========================================================================== */

.a4w-cta { background: var(--a4w-brand-soft); border-radius: var(--a4w-radius-lg); padding: var(--a4w-s5); }

.a4w-cta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--a4w-s4);
  align-items: center;
}

.a4w-cta h2 { margin: 0 0 0.5rem; }
.a4w-cta p { margin: 0; color: var(--a4w-ink-2); }

/* Πεδία φόρμας — Divi Contact Form & Contact Form 7 */
.a4w-form input[type="text"],
.a4w-form input[type="email"],
.a4w-form input[type="tel"],
.a4w-form select,
.a4w-form textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea,
.et_pb_contact_form_container .et_pb_contact p input,
.et_pb_contact_form_container .et_pb_contact p textarea {
  width: 100%;
  font-family: var(--a4w-font-text);
  font-size: var(--a4w-small);
  color: var(--a4w-ink);
  background: var(--a4w-surface) !important;
  border: 1px solid var(--a4w-line-strong) !important;
  border-radius: var(--a4w-radius) !important;
  padding: 0.8rem 1rem !important;
  transition: border-color .15s var(--a4w-ease), box-shadow .15s var(--a4w-ease);
}

.a4w-form input:focus,
.a4w-form select:focus,
.a4w-form textarea:focus,
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus,
.et_pb_contact_form_container .et_pb_contact p input:focus,
.et_pb_contact_form_container .et_pb_contact p textarea:focus {
  outline: none;
  border-color: var(--a4w-brand) !important;
  box-shadow: 0 0 0 3px var(--a4w-brand-ring);
}

/* --- Contact Form 7 ---------------------------------------------------- */

.wpcf7 form .wpcf7-form-control-wrap { display: block; }

.wpcf7 label {
  display: block;
  font-size: var(--a4w-tiny);
  font-weight: 500;
  color: var(--a4w-ink);
  margin-bottom: 1rem;
}
.wpcf7 label > .wpcf7-form-control-wrap { margin-top: 0.4rem; }

.wpcf7 .a4w-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 var(--a4w-s2);
}

.wpcf7 input[type="submit"] {
  width: 100%;
  font-family: var(--a4w-font-text);
  font-size: var(--a4w-small);
  font-weight: 500;
  background: var(--a4w-brand);
  color: #fff;
  border: 1px solid var(--a4w-brand);
  border-radius: var(--a4w-radius);
  padding: 0.875rem 1.5rem;
  cursor: pointer;
  transition: background-color .18s var(--a4w-ease);
}
.wpcf7 input[type="submit"]:hover { background: var(--a4w-brand-hover); }

/* Συγκατάθεση GDPR */
.wpcf7 .a4w-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--a4w-tiny);
  color: var(--a4w-ink-2);
  line-height: 1.5;
  margin-bottom: var(--a4w-s2);
}
.wpcf7 .a4w-consent .wpcf7-list-item { margin: 0; }
.wpcf7 .a4w-consent input[type="checkbox"] { width: auto; margin-top: 0.15rem; }

/* Μηνύματα επιτυχίας και σφάλματος */
.wpcf7 form .wpcf7-response-output {
  margin: var(--a4w-s2) 0 0;
  padding: 0.85rem 1rem;
  border-radius: var(--a4w-radius);
  border-width: 1px;
  font-size: var(--a4w-small);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--a4w-success);
  background: color-mix(in srgb, var(--a4w-success) 8%, #fff);
  color: var(--a4w-success);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--a4w-danger);
  background: color-mix(in srgb, var(--a4w-danger) 8%, #fff);
  color: var(--a4w-danger);
}
.wpcf7 .wpcf7-not-valid-tip {
  font-size: var(--a4w-tiny);
  color: var(--a4w-danger);
  margin-top: 0.3rem;
}
.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid {
  border-color: var(--a4w-danger) !important;
}

.a4w-form label {
  display: block;
  font-size: var(--a4w-tiny);
  font-weight: 500;
  color: var(--a4w-ink);
  margin-bottom: 0.4rem;
}

.a4w-form__note { font-size: var(--a4w-tiny); color: var(--a4w-ink-3); margin-top: var(--a4w-s2); }


/* ==========================================================================
   13. FOOTER
   ========================================================================== */

#main-footer { background: var(--a4w-surface-deep); }

#footer-widgets { padding: var(--a4w-s5) 0 var(--a4w-s4); }

#main-footer,
#main-footer p,
#main-footer li a { color: rgba(255,255,255,0.62); font-size: var(--a4w-small); }

#main-footer h4,
#main-footer .title {
  color: #fff;
  font-family: var(--a4w-font-text);
  font-size: var(--a4w-tiny);
  font-weight: 500;
  margin-bottom: var(--a4w-s2);
}

#main-footer li a:hover { color: #fff; }

#footer-bottom {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: var(--a4w-s2) 0;
}
#footer-info { color: rgba(255,255,255,0.45); font-size: var(--a4w-tiny); }


/* ==========================================================================
   13b. ΥΠΟΓΡΑΦΗ
   Δίχρωμη, όπως το λογότυπο. Χρήση με φειδώ.
   ========================================================================== */

.a4w-mark {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.a4w-mark::before,
.a4w-mark::after {
  content: "";
  display: block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
}

.a4w-mark::before { background: var(--a4w-brand); }
.a4w-mark::after  { background: var(--a4w-highlight); }

.a4w-mark--light::before { background: #fff; }

/* Λεπτή υπογράμμιση κάτω από επικεφαλίδα ενότητας */
.a4w-underline {
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: var(--a4w-s2);
  background: linear-gradient(
    to right,
    var(--a4w-brand) 0 60%,
    var(--a4w-highlight) 60% 100%
  );
}
.a4w-head--center .a4w-underline { margin-left: auto; margin-right: auto; }


/* ==========================================================================
   14. UTILITIES
   ========================================================================== */

.a4w-lead      { font-size: 1.1875rem; color: var(--a4w-ink-2); max-width: var(--a4w-measure); }
.a4w-center    { text-align: center; }
.a4w-measure   { max-width: var(--a4w-measure); }
.a4w-mx-auto   { margin-left: auto; margin-right: auto; }
.a4w-mb-3      { margin-bottom: var(--a4w-s3); }
.a4w-mb-4      { margin-bottom: var(--a4w-s4); }

/* Επικεφαλίδα ενότητας */
.a4w-head { max-width: 46rem; margin-bottom: var(--a4w-s4); }
.a4w-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.a4w-head h2 { margin: 0 0 var(--a4w-s2); }
.a4w-head p  { margin: 0; color: var(--a4w-ink-2); }


/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {
  :root { --a4w-s6: 3.5rem; --a4w-s7: 4.5rem; }
  .a4w-cta { padding: var(--a4w-s4); }
}

@media (max-width: 767px) {
  :root { --a4w-body: 1rem; --a4w-s6: 3rem; --a4w-s7: 3.5rem; }

  .a4w-hero { padding: var(--a4w-s5) 0 var(--a4w-s4); }
  .a4w-hero h1 { max-width: none; }
  .a4w-hero__actions { flex-direction: column; align-items: stretch; }
  .a4w-hero__actions .a4w-btn { justify-content: center; }

  .a4w-service { padding: var(--a4w-s2); }
  .a4w-trust { gap: var(--a4w-s3); }
  .a4w-trust img { max-height: 26px; }
}


/* ==========================================================================
   16. ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ
   ========================================================================== */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--a4w-brand);
  outline-offset: 3px;
  border-radius: 3px;
}

.a4w-skip-link {
  position: absolute;
  left: -9999px;
  background: var(--a4w-ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 99999;
}
.a4w-skip-link:focus { left: 1rem; top: 1rem; }

.a4w-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   17. AI ΕΡΓΑΛΕΙΑ ESHOP — teaser, σελίδα καμπάνιας, demo υπολογιστής
   Προστέθηκε 1.3.0. Χρησιμοποιείται στη σελίδα /ai-eshop/ και ως
   teaser στη σελίδα Ιστοσελίδα & Eshop.
   ========================================================================== */

/* --- 17a. TEASER: σκούρο block σε λευκή σελίδα, για να σταματάει το μάτι -- */

.a4w-promo {
  position: relative;
  background: var(--a4w-brand);
  border-radius: var(--a4w-radius-lg);
  padding: var(--a4w-s5);
  overflow: hidden;
}

/* Κίτρινη λωρίδα στην αριστερή ακμή — η ίδια γλώσσα με τα a4w-head */
.a4w-promo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--a4w-highlight);
}

.a4w-promo__tag {
  display: inline-block;
  font-size: var(--a4w-tiny);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--a4w-brand);
  background: var(--a4w-highlight);
  border-radius: 100px;
  padding: 0.3rem 0.75rem;
  margin: 0 0 var(--a4w-s2);
}

.a4w-promo h2 {
  color: #fff;
  margin: 0 0 var(--a4w-s2);
  max-width: 22ch;
}

.a4w-promo__lead {
  color: rgba(255,255,255,0.82);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 60ch;
  margin: 0 0 var(--a4w-s3);
}

/* Τα δύο εργαλεία, δίπλα-δίπλα μέσα στο teaser */
.a4w-promo__pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--a4w-s2);
  margin: 0 0 var(--a4w-s3);
}

.a4w-promo__item {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--a4w-radius);
  padding: var(--a4w-s2);
}
.a4w-promo__item h3 {
  color: #fff;
  font-family: var(--a4w-font-text);
  font-size: var(--a4w-h4);
  font-weight: 600;
  margin: 0 0 0.35rem;
}
.a4w-promo__item p {
  color: rgba(255,255,255,0.72);
  font-size: var(--a4w-small);
  line-height: 1.55;
  margin: 0;
}

.a4w-promo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a4w-s2);
  align-items: center;
}

/* Μέσα στο navy, το πρωτεύον κουμπί γίνεται κίτρινο για να ξεχωρίσει.
   Το !important είναι απαραίτητο: το βασικό .a4w-btn ορίζει ήδη color
   με !important, όπως το παρακάμπτει και το .a4w-hero-section. */
.a4w-promo .a4w-btn--primary {
  background: var(--a4w-highlight);
  color: var(--a4w-brand) !important;
  border-color: var(--a4w-highlight);
}
.a4w-promo .a4w-btn--primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--a4w-brand) !important;
}
.a4w-promo .a4w-btn--ghost {
  color: #fff !important;
  border-color: rgba(255,255,255,0.4);
}
.a4w-promo .a4w-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.08);
}


/* --- 17b. Hero σελίδας καμπάνιας ---------------------------------------- */

.a4w-pagehero--ai { background-image: url("/wp-content/uploads/2026/09/hero-ai-eshop.webp"); }
.a4w-pagehero--ai::before {
  background: linear-gradient(95deg,
    rgba(3,20,87,0.72) 0%,
    rgba(3,20,87,0.45) 45%,
    rgba(3,20,87,0.15) 100%);
}

/* Σε στενή οθόνη η εικόνα μεγεθύνεται και τα σχήματα περνούν κάτω από το
   κείμενο. Εκεί το πέπλο γίνεται σχεδόν αδιαφανές — η εικόνα μένει ως
   υπόβαθρο, όχι ως εικονογράφηση. */
@media (max-width: 980px) {
  .a4w-pagehero--ai::before {
    background: linear-gradient(95deg,
      rgba(3,20,87,0.93) 0%,
      rgba(3,20,87,0.88) 60%,
      rgba(3,20,87,0.80) 100%);
  }
}

/* Σε σελίδα διαφήμισης το κουμπί μπαίνει ΜΕΣΑ στο hero: ο επισκέπτης
   από Google/Meta πρέπει να μπορεί να μετατραπεί χωρίς να σκρολάρει. */
.a4w-pagehero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a4w-s2);
  align-items: center;
  margin: var(--a4w-s3) 0 0;
}
.a4w-pagehero__actions .a4w-btn--primary {
  background: var(--a4w-highlight);
  color: var(--a4w-brand) !important;
  border-color: var(--a4w-highlight);
}
.a4w-pagehero__actions .a4w-btn--primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--a4w-brand) !important;
}
.a4w-pagehero__actions .a4w-btn--ghost {
  color: #fff !important;
  border-color: rgba(255,255,255,0.45);
}
.a4w-pagehero__actions .a4w-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
}

/* Μικρή διευκρίνιση κάτω από τα κουμπιά — μειώνει το εμπόδιο του κλικ */
.a4w-pagehero__reassure {
  font-size: var(--a4w-tiny);
  color: rgba(255,255,255,0.65);
  margin: var(--a4w-s2) 0 0;
}


/* --- 17c. Δύο εργαλεία, αναλυτικά --------------------------------------- */

.a4w-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--a4w-s3);
}

.a4w-duo__card {
  background: var(--a4w-surface);
  border: 1px solid var(--a4w-line);
  border-radius: var(--a4w-radius-lg);
  padding: var(--a4w-s4);
  display: flex;
  flex-direction: column;
}

.a4w-duo__num {
  font-family: var(--a4w-font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--a4w-brand-line);
  margin: 0 0 var(--a4w-s2);
}

.a4w-duo__card h3 {
  font-size: var(--a4w-h3);
  margin: 0 0 var(--a4w-s1);
}

.a4w-duo__role {
  font-size: var(--a4w-tiny);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--a4w-ink-3);
  margin: 0 0 var(--a4w-s2);
}

.a4w-duo__card > p {
  color: var(--a4w-ink-2);
  margin: 0 0 var(--a4w-s2);
}

.a4w-duo__card .a4w-checks { margin-top: auto; }


/* --- 17d. Νούμερα αποτελέσματος ----------------------------------------- */

.a4w-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--a4w-s3);
}

/* Τιμή μέσα σε πλάνο — ίδια τυπογραφία με τα νούμερα αποτελέσματος */
.a4w-plan__price {
  font-family: var(--a4w-font-display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--a4w-brand);
  margin: 0 0 var(--a4w-s2);
}

.a4w-metric__value {
  font-family: var(--a4w-font-display);
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem);
  font-weight: 600;
  line-height: 1;
  color: var(--a4w-brand);
  margin: 0 0 0.4rem;
}
.a4w-metric__label {
  font-size: var(--a4w-small);
  color: var(--a4w-ink-2);
  line-height: 1.5;
  margin: 0;
}


/* --- 17e. Ζωντανός demo υπολογιστής ------------------------------------- */

/* Ο επισκέπτης πρέπει να ΔΕΙ το εργαλείο να δουλεύει, όχι να το διαβάσει.
   Αυτό είναι το κομμάτι που κάνει τη διαφορά σε καμπάνια. */

/* Όταν στη θέση της φωτογραφίας μπαίνει το εργαλείο, η θήκη δεν πρέπει
   να έχει δικό της φόντο ούτε να κόβει το περιεχόμενο. */
.a4w-showcase__media--bare {
  background: none;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}
.a4w-showcase__media--bare::after { display: none; }

.a4w-calc {
  background: var(--a4w-surface);
  border: 1px solid var(--a4w-line);
  border-radius: var(--a4w-radius-lg);
  overflow: hidden;
  max-width: 560px;
}

.a4w-calc__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--a4w-surface-alt);
  border-bottom: 1px solid var(--a4w-line);
  padding: 0.7rem var(--a4w-s2);
}
.a4w-calc__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--a4w-line-strong);
}
.a4w-calc__bar span {
  font-size: var(--a4w-tiny);
  color: var(--a4w-ink-3);
  margin-left: 0.4rem;
}

.a4w-calc__body { padding: var(--a4w-s3); }

.a4w-calc__field { margin: 0 0 var(--a4w-s2); }
.a4w-calc__field label {
  display: block;
  font-size: var(--a4w-small);
  font-weight: 500;
  color: var(--a4w-ink);
  margin: 0 0 0.4rem;
}
.a4w-calc__field select,
.a4w-calc__field input {
  width: 100%;
  font-family: inherit;
  font-size: var(--a4w-body);
  color: var(--a4w-ink);
  background: var(--a4w-surface);
  border: 1px solid var(--a4w-line-strong);
  border-radius: var(--a4w-radius);
  padding: 0.7rem 0.85rem;
}
.a4w-calc__field select:focus,
.a4w-calc__field input:focus {
  outline: none;
  border-color: var(--a4w-brand);
  box-shadow: 0 0 0 3px var(--a4w-brand-ring);
}

/* Το αποτέλεσμα: το μόνο σημείο με χρώμα brand μέσα στο εργαλείο */
.a4w-calc__out {
  background: var(--a4w-brand-soft);
  border: 1px solid var(--a4w-brand-line);
  border-radius: var(--a4w-radius);
  padding: var(--a4w-s2);
  margin: var(--a4w-s3) 0 0;
}
.a4w-calc__result {
  font-family: var(--a4w-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--a4w-brand);
  margin: 0 0 0.3rem;
}
.a4w-calc__note {
  font-size: var(--a4w-small);
  color: var(--a4w-ink-2);
  line-height: 1.5;
  margin: 0;
}

/* Η γραμμή "πρόσθεσε στο καλάθι" που θα έβλεπε ο πελάτης */
.a4w-calc__cart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a4w-s2);
  border-top: 1px dashed var(--a4w-brand-line);
  margin: var(--a4w-s2) 0 0;
  padding: var(--a4w-s2) 0 0;
}
.a4w-calc__cart strong {
  font-size: var(--a4w-small);
  color: var(--a4w-ink);
}
.a4w-calc__fake {
  font-size: var(--a4w-small);
  font-weight: 600;
  color: #fff;
  background: var(--a4w-brand);
  border-radius: var(--a4w-radius);
  padding: 0.5rem 0.9rem;
  white-space: nowrap;
}

.a4w-calc__disclaimer {
  font-size: var(--a4w-tiny);
  color: var(--a4w-ink-3);
  margin: var(--a4w-s2) 0 0;
}


/* --- 17e2. Εικονίδια στα πλέγματα χαρακτηριστικών ------------------------ */

/* Μικρό γεωμετρικό σύμβολο πάνω από κάθε χαρακτηριστικό. Inline SVG, ώστε να
   μη χρειάζεται ανέβασμα και να παραμένει ευκρινές σε κάθε οθόνη.
   Το χρώμα έρχεται από currentColor — ένα σημείο αλλαγής. */

/* Όπου μπαίνει εικονίδιο, αντικαθιστά το γενικό τικ του .a4w-feature:
   δύο σύμβολα δίπλα-δίπλα είναι θόρυβος. Οι σελίδες χωρίς εικονίδια
   κρατούν τα τικ τους — ο κανόνας ενεργοποιείται μόνο όπου υπάρχει. */
.a4w-feature:has(> .a4w-feature__icon) { padding-left: 0; }
.a4w-feature:has(> .a4w-feature__icon)::before,
.a4w-feature:has(> .a4w-feature__icon)::after { content: none; }

.a4w-feature__icon {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 0 0.85rem;
  color: var(--a4w-brand);
}
.a4w-feature__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Τα γεμίσματα ακολουθούν το χρώμα· το κίτρινο μένει σταθερό για τον τονισμό */
.a4w-feature__icon .a4w-ico-fill   { fill: currentColor; }
.a4w-feature__icon .a4w-ico-line   { fill: none; stroke: currentColor; stroke-width: 2.2;
                                     stroke-linecap: round; stroke-linejoin: round; }
.a4w-feature__icon .a4w-ico-accent { fill: var(--a4w-highlight); }
.a4w-feature__icon .a4w-ico-soft   { fill: currentColor; opacity: 0.28; }
/* Αχνή γραμμή — για δευτερεύουσες ενδείξεις μέσα στο εικονίδιο */
.a4w-feature__icon .a4w-ico-tick   { fill: none; stroke: currentColor; stroke-width: 2.2;
                                     stroke-linecap: round; opacity: 0.3; }


/* --- 17f. Τα τρία σημεία του προβλήματος, εικονογραφημένα ---------------- */

/* Οι τρεις παράγραφοι του προβλήματος γίνονται τρεις στήλες με γεωμετρική
   εικονογράφηση στο ύφος του hero. Το SVG είναι inline στο markup, ώστε να
   παίρνει τα χρώματα από τα tokens και να μη χρειάζεται ανέβασμα αρχείων. */

.a4w-problems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--a4w-s3);
}

.a4w-problem {
  display: flex;
  flex-direction: column;
}

/* Το «παράθυρο» της εικονογράφησης — ίδια γλώσσα με τα hero */
.a4w-problem__art {
  background: var(--a4w-brand);
  border-radius: var(--a4w-radius-lg);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin: 0 0 var(--a4w-s2);
}
.a4w-problem__art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.a4w-problem h3 {
  font-size: var(--a4w-h4);
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.a4w-problem p {
  font-size: var(--a4w-small);
  line-height: 1.6;
  color: var(--a4w-ink-2);
  margin: 0;
}


/* --- 17f. Mock συνομιλίας του βοηθού ------------------------------------- */

/* Ο υπολογιστής έχει ζωντανό demo· ο βοηθός χρειάζεται το δικό του δείγμα,
   αλλιώς το κύριο προϊόν της σελίδας δεν φαίνεται πουθενά. Στατικό, γιατί
   μια ψεύτικη συνομιλία που «πληκτρολογείται» μοιάζει με πραγματική. */

.a4w-chat {
  background: var(--a4w-surface);
  border: 1px solid var(--a4w-line);
  border-radius: var(--a4w-radius-lg);
  overflow: hidden;
  max-width: 460px;
}

.a4w-chat__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--a4w-brand);
  padding: 0.8rem var(--a4w-s2);
}
.a4w-chat__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--a4w-highlight);
  color: var(--a4w-brand);
  font-size: var(--a4w-tiny);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.a4w-chat__who { line-height: 1.25; }
.a4w-chat__who strong {
  display: block;
  color: #fff;
  font-size: var(--a4w-small);
  font-weight: 600;
}
.a4w-chat__who span {
  font-size: var(--a4w-tiny);
  color: rgba(255,255,255,0.7);
}

.a4w-chat__body {
  padding: var(--a4w-s2);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--a4w-surface-alt);
}

.a4w-chat__msg {
  max-width: 84%;
  font-size: var(--a4w-small);
  line-height: 1.5;
  padding: 0.65rem 0.85rem;
  border-radius: 14px;
  margin: 0;
}
/* Ο πελάτης ρωτάει από δεξιά, ο βοηθός απαντάει από αριστερά */
.a4w-chat__msg--them {
  align-self: flex-end;
  background: var(--a4w-brand);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.a4w-chat__msg--bot {
  align-self: flex-start;
  background: var(--a4w-surface);
  color: var(--a4w-ink);
  border: 1px solid var(--a4w-line);
  border-bottom-left-radius: 4px;
}

/* Κάρτα προϊόντος μέσα στη συνομιλία — εδώ φαίνεται ότι ο βοηθός πουλάει */
.a4w-chat__card {
  align-self: flex-start;
  width: 84%;
  background: var(--a4w-surface);
  border: 1px solid var(--a4w-brand-line);
  border-radius: var(--a4w-radius);
  padding: 0.7rem 0.85rem;
}
.a4w-chat__card strong {
  display: block;
  font-size: var(--a4w-small);
  color: var(--a4w-ink);
  line-height: 1.35;
}
.a4w-chat__card em {
  display: block;
  font-style: normal;
  font-size: var(--a4w-tiny);
  color: var(--a4w-ink-3);
  margin: 0.15rem 0 0.5rem;
}
.a4w-chat__card span {
  display: inline-block;
  font-size: var(--a4w-tiny);
  font-weight: 600;
  color: #fff;
  background: var(--a4w-brand);
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
}

.a4w-chat__note {
  font-size: var(--a4w-tiny);
  color: var(--a4w-ink-3);
  text-align: center;
  background: var(--a4w-surface);
  border-top: 1px solid var(--a4w-line);
  padding: 0.6rem var(--a4w-s2);
  margin: 0;
}


/* --- 17g. Responsive ----------------------------------------------------- */

@media (max-width: 767px) {
  .a4w-promo { padding: var(--a4w-s3); }
  .a4w-promo__actions .a4w-btn { width: 100%; text-align: center; }
  .a4w-pagehero__actions .a4w-btn { width: 100%; text-align: center; }
  .a4w-duo__card { padding: var(--a4w-s3); }
  .a4w-calc__cart { flex-direction: column; align-items: stretch; }
  .a4w-calc__fake { text-align: center; }
  .a4w-chat__msg { max-width: 92%; }
  .a4w-chat__card { width: 92%; }
}
/* ==========================================================================
   HOVER ΚΑΡΤΩΝ — προσθέστε στο τέλος του style.css του child theme
   Ανύψωση + σκιά στο hover. Σεβόμενο prefers-reduced-motion.
   ========================================================================== */

.a4w-service,
.a4w-feature,
.a4w-fork__card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}

.a4w-service:hover,
.a4w-feature:hover,
.a4w-fork__card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 44px -12px rgba(3, 20, 87, .28);
}

/* Η κάρτα υπηρεσιών παίρνει και πιο έντονο περίγραμμα */
.a4w-service:hover {
  border-color: var(--a4w-brand, #031457);
}

@media (prefers-reduced-motion: reduce) {
  .a4w-service,
  .a4w-feature,
  .a4w-fork__card {
    transition: none;
  }
}
/* ==========================================================================
   FOOTER — προσθέστε στο τέλος του style.css του child theme
   Χρησιμοποιεί τα tokens --a4w-brand και --a4w-highlight του site.
   ========================================================================== */

.a4w-footer {
  background: var(--a4w-brand, #031457);
  color: #E8ECF6;
  padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) 5% 1rem;
  position: relative;
  overflow: hidden;
  width: calc(100vw - var(--a4w-sbw, 0px));
  margin-left: calc(50% - 50vw + var(--a4w-sbw, 0px) / 2);
  box-sizing: border-box;
}

/* λεπτή κίτρινη γραμμή στο πάνω μέρος */
.a4w-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--a4w-highlight, #FECD0C);
}

/* διακοσμητικό γεωμετρικό σχέδιο, όπως το hero */
.a4w-footer::after {
  content: "";
  position: absolute;
  right: -80px; bottom: -80px;
  width: 280px; height: 280px;
  border: 2px solid rgba(254, 205, 12, .18);
  border-radius: 50%;
  pointer-events: none;
}

.a4w-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  position: relative;
  z-index: 1;
}

.a4w-footer__logo {
  display: block;
  width: 140px;
  max-width: 100%;
  height: auto;
  margin: 0 0 .6rem;
}

.a4w-footer__tag {
  font-size: .95rem;
  line-height: 1.6;
  color: #C9D2E6;
  margin: 0 0 1.25rem;
  max-width: 34ch;
}

.a4w-footer__cta {
  display: inline-block;
  color: var(--a4w-highlight, #FECD0C) !important;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .2s;
}
.a4w-footer__cta:hover { border-bottom-color: var(--a4w-highlight, #FECD0C); }

.a4w-footer__title {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--a4w-highlight, #FECD0C);
  font-weight: 700;
  margin: 0 0 1rem;
}

.a4w-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .3rem;
}

.a4w-footer__col a {
  color: #E8ECF6 !important;
  text-decoration: none;
  font-size: .95rem;
  transition: color .2s;
}
.a4w-footer__col a:hover { color: var(--a4w-highlight, #FECD0C) !important; }

.a4w-footer__contact li {
  font-size: .95rem;
  color: #C9D2E6;
}

.a4w-footer__bottom {
  max-width: 1200px;
  margin: clamp(1.25rem, 1rem + 1vw, 2rem) auto 0;
  padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  position: relative;
  z-index: 1;
  font-size: .85rem;
  color: #9AA7C4;
}
.a4w-footer__bottom p { margin: 0; }
.a4w-footer__bottom a {
  color: #C9D2E6 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.a4w-footer__bottom a:hover { color: var(--a4w-highlight, #FECD0C) !important; }

/* Κινητό */
@media (max-width: 980px) {
  .a4w-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  .a4w-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .a4w-footer {
    padding: 1.5rem 5% .9rem;
  }
  .a4w-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .a4w-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   FOOTER — υπερίσχυση γενικών κανόνων του θέματος (χρώματα τίτλων/κειμένου)
   ========================================================================== */
.a4w-footer h2.a4w-footer__title { color: var(--a4w-highlight, #FECD0C) !important; }
.a4w-footer .a4w-footer__tag { color: #C9D2E6 !important; }
.a4w-footer .a4w-footer__contact li { color: #E8ECF6 !important; }
.a4w-footer .a4w-footer__bottom p { color: #C9D2E6 !important; }
.a4w-footer .a4w-footer__logo { display: block; }

/* ==========================================================================
   AI ESHOP — απόσταση μεταξύ «Δύο εργαλεία» και «Δείγμα συνομιλίας» (κινητό)
   ========================================================================== */
.a4w-chat {
  margin-top: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}
@media (max-width: 600px) {
  .a4w-duo + .a4w-chat,
  .a4w-duo ~ .a4w-chat {
    margin-top: 0.75rem;
  }
}


/* Το δείγμα συνομιλίας δεν έχει φωτογραφία: το κουτί παίρνει το φυσικό του ύψος
   (χωρίς aspect-ratio ή min-height που το έκλειναν σε tablet/κινητό) */
.a4w-showcase__media--bare {
  aspect-ratio: auto;
  min-height: 0;
  height: auto;
  padding: 0;
  overflow: visible;
}
@media (max-width: 980px) {
  .a4w-showcase__media--bare { aspect-ratio: auto; min-height: 0; height: auto; }
}

/* AI eshop: μικρότερο κενό πάνω από «Το eshop δουλεύει» (μετά το hero) */
.et_pb_section:has(> .et_pb_row > .et_pb_column > .et_pb_fullwidth_code_1) {
  padding-top: clamp(1.25rem, 1rem + 1vw, 2rem) !important;
}

/* ==========================================================================
   ΚΕΙΜΕΝΟ ΣΕ ΣΚΟΥΡΑ ΦΟΝΤΑ (hero, promo): ανοιχτό χρώμα και ευανάγνωστο μέγεθος
   ========================================================================== */
.a4w-hero-section .a4w-hero__sub,
.a4w-hero-section p,
.a4w-pagehero p,
.a4w-pagehero__sub,
.a4w-promo p,
.a4w-promo li,
.a4w-promo__lead {
  color: #E4E9F5 !important;
  opacity: 1 !important;
}
.a4w-promo__item p,
.a4w-promo__item h3 {
  color: #FFFFFF !important;
}
@media (max-width: 600px) {
  .a4w-hero-section .a4w-hero__sub,
  .a4w-pagehero__sub,
  .a4w-promo__lead {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
  }
}

/* Σελίδα AI eshop: το hero και τα μπλε μπλοκ έχουν δικές τους κλάσεις χρώματος */
.a4w-pagehero--ai p,
.a4w-pagehero--ai .a4w-pagehero__sub,
.a4w-pagehero--ai .a4w-pagehero__crumb,
.a4w-pagehero--ai .a4w-pagehero__crumb a,
.et_pb_fullwidth_code_0 .a4w-pagehero p,
.et_pb_fullwidth_code_0 .a4w-pagehero__sub {
  color: #E4E9F5 !important;
  opacity: 1 !important;
}
.a4w-pagehero--ai .a4w-pagehero__sub,
.et_pb_fullwidth_code_0 .a4w-pagehero__sub {
  font-size: 1.05rem;
  line-height: 1.6;
}
.a4w-pagehero--ai .a4w-pagehero__sub {
  color: #E4E9F5 !important;
}

/* Μηνύματα πελάτη σε σκούρο μπλε φόντο: λευκό κείμενο */
.a4w-chat__msg--them,
.a4w-chat__msg--them * {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* Μπάρα «Ό,τι κάνουμε» στη σελίδα AI eshop */
.a4w-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.a4w-chip {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--a4w-line-strong, #c9d2e6);
  background: #fff;
  color: var(--a4w-brand, #031457) !important;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.a4w-chip:hover {
  background: var(--a4w-brand, #031457);
  color: #fff !important;
  border-color: var(--a4w-brand, #031457);
}

/* ==========================================================================
   SHOP BAND (αρχική): μπάρα προς το κατάστημα shop.all4web.gr
   ========================================================================== */
.a4w-shopband {
  background: var(--a4w-brand, #031457);
  color: #E4E9F5;
  border-radius: var(--a4w-radius-lg, 18px);
  margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 5%;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  position: relative;
  overflow: hidden;
}
.a4w-shopband::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--a4w-highlight, #FECD0C);
}
.a4w-shopband__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.a4w-shopband__tag {
  display: inline-block;
  background: var(--a4w-highlight, #FECD0C);
  color: var(--a4w-brand, #031457);
  font-weight: 700;
  font-size: .8rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  margin: 0 0 .75rem;
}
.a4w-shopband h2 {
  color: #fff;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  margin: 0 0 .5rem;
}
.a4w-shopband p {
  color: #E4E9F5;
  margin: 0;
  max-width: 60ch;
}
@media (max-width: 600px) {
  .a4w-shopband { margin: 2rem 5%; }
  .a4w-shopband__inner { flex-direction: column; align-items: flex-start; }
}

/* SHOP BAND: ίδιο πλάτος με τα υπόλοιπα blocks, ευανάγνωστο κείμενο, κίτρινο κουμπί */
.a4w-shopband {
  max-width: 1268px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: auto !important;
}
.a4w-shopband p,
.a4w-shopband__inner p {
  color: #E4E9F5 !important;
  opacity: 1 !important;
}
.a4w-shopband h2 {
  color: #FFFFFF !important;
}
.a4w-shopband .a4w-btn--primary,
.a4w-shopband .a4w-btn,
.a4w-shopband a.a4w-btn {
  background: var(--a4w-highlight, #FECD0C) !important;
  color: var(--a4w-brand, #031457) !important;
  border-color: var(--a4w-highlight, #FECD0C) !important;
}
.a4w-shopband .a4w-btn--primary:hover {
  background: #fff !important;
  color: var(--a4w-brand, #031457) !important;
}
@media (max-width: 600px) {
  .a4w-shopband { max-width: none !important; margin-left: 5% !important; margin-right: 5% !important; }
}

/* Μενού: το «Κατάστημα» με κίτρινη γραμμή κάτω από τον σύνδεσμο (κλάση a4w-nav-shop) */
#top-menu li.a4w-nav-shop > a,
.a4w-nav-shop > a {
  position: relative;
}
#top-menu li.a4w-nav-shop > a::after,
.a4w-nav-shop > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 3px;
  background: var(--a4w-highlight, #FECD0C);
  border-radius: 3px;
}

/* Κίτρινη γραμμή του «Κατάστημα» πιο κοντά στο κείμενο (το Divi έχει μεγάλο padding στους συνδέσμους) */
#top-menu li.a4w-nav-shop > a {
  padding-bottom: 6px !important;
}
#top-menu li.a4w-nav-shop > a::after {
  bottom: 0 !important;
  height: 3px !important;
}








/* ==========================================================================
   HERO ΔΟΚΙΜΗ v2 — προσθέστε στο ΤΕΛΟΣ του style.css του child theme
   Όλα τα ονόματα έχουν πρόθεμα a4w-hsvc / a4w-hero-test2, άρα δεν
   επηρεάζουν τις κάρτες υπηρεσιών.
   ========================================================================== */

.a4w-hero-test2 {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 4vw, 2rem);
  color: #E4E9F5;
}

.a4w-hero-test2__kicker {
  color: #FECC00 !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
}
.a4w-hero-test2 h1 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.12;
  color: #ffffff !important;
  margin: 0 0 1rem;
}
.a4w-hero-test2__lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: #E4E9F5 !important;
  margin: 0;
}

.a4w-hero-test2__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.a4w-hero-test2__btn {
  display: inline-block;
  padding: 0.85rem 1.4rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease;
}
.a4w-hero-test2__btn:hover { transform: translateY(-2px); }
.a4w-hero-test2__btn--primary { background: #FECC00; color: #031457 !important; }
.a4w-hero-test2__btn--ghost { border: 2px solid #E4E9F5; color: #ffffff !important; }

/* ---------- Γραφικό υπηρεσιών ---------- */

.a4w-hsvc {
  --hsvc-yellow: #FECC00;
  --hsvc-white: #FFFFFF;

  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(8px, 2.5vw, 30px);
  width: 100%;
  box-sizing: border-box;
  background: none;
  border: 0;
  padding: 20px 0;
}

.a4w-hsvc__item {
  flex: 1 1 0;
  min-width: 0;
  max-width: 170px;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.a4w-hsvc__circle {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid var(--hsvc-yellow);
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.a4w-hsvc__circle svg {
  width: 65%;
  height: 65%;
  fill: none;
  stroke: var(--hsvc-white);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.a4w-hsvc__circle svg .accent { stroke: var(--hsvc-yellow); }
.a4w-hsvc__circle svg .dot { fill: var(--hsvc-white); stroke: none; }

.a4w-hsvc__label {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: #FFFFFF !important;
  text-align: center;
  line-height: 1.4;
  background: none;
}

/* Βέλος προς το κατάστημα: μέσα στον κύκλο, πάντα στο κέντρο του */
.a4w-hsvc__item--shop .a4w-hsvc__circle::before {
  content: "";
  position: absolute;
  right: calc(100% + 1px);
  top: 50%;
  width: clamp(6px, 3vw, 24px);
  height: 2px;
  margin-top: -1px;
  background: var(--hsvc-yellow);
}
.a4w-hsvc__item--shop .a4w-hsvc__circle::after {
  content: "";
  position: absolute;
  right: calc(100% + 1px);
  top: 50%;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--hsvc-yellow);
}

@media (max-width: 800px) {
  .a4w-hero-test2 {
    grid-template-columns: 1fr;
    padding-top: 2.5rem;
  }
  .a4w-hsvc { gap: 8px; padding: 12px 0; }
  .a4w-hsvc__item { gap: 7px; }
  .a4w-hsvc__circle { border-width: 1.5px; }
  .a4w-hsvc__circle svg { stroke-width: 3.5; }
  .a4w-hsvc__label {
    font-size: clamp(11px, 2.8vw, 13px);
    overflow-wrap: anywhere;
  }
  .a4w-hsvc__item--shop .a4w-hsvc__circle::before { width: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .a4w-hero-test2__btn { transition: none; }
  .a4w-hero-test2__btn:hover { transform: none; }
}
/* ==========================================================================
   ΔΥΟ ΚΑΡΤΕΣ — προσθέστε στο ΤΕΛΟΣ του style.css
   Ίδιο πλέγμα, ίδιο μέγεθος τίτλου, ίδια θέση κουμπιού, εναλλαγή φόντου.
   Με πρόθεμα a4w-band2 για να μη συγκρούεται με τις παλιές κλάσεις.
   ========================================================================== */

.a4w-band2 {
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2rem);
  margin: 0;
  box-sizing: border-box;
}

/* Μηδενισμός των κενών της Divi γύρω από τις κάρτες.
   Οι ενότητες/γραμμές που περιέχουν τις κάρτες παίρνουν padding 0,
   ώστε να μην μένουν λευκά κενά ανάμεσα στο hero και στις κάρτες. */
.et_pb_section:has(.a4w-band2),
.et_pb_row:has(.a4w-band2),
.et_pb_section:has(.a4w-hero-test2) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
.et_pb_section:has(.a4w-hero-test2) {
  padding-bottom: 0 !important;
}
.et_pb_module:has(.a4w-band2),
.et_pb_code:has(.a4w-band2),
.et_pb_code:has(.a4w-hero-test2) {
  margin: 0 !important;
  padding: 0 !important;
}

.a4w-band2--light { background: #F3F5FA; }
.a4w-band2--dark  { background: #031457; }

.a4w-band2__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.a4w-band2__tag {
  display: inline-block;
  background: #FECC00;
  color: #031457 !important;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  margin: 0 0 1rem;
}

.a4w-band2 h2 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.2;
  margin: 0 0 0.9rem;
}
.a4w-band2--light h2 { color: #031457 !important; }
.a4w-band2--dark h2  { color: #ffffff !important; }

.a4w-band2__lead {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.6;
  margin: 0;
}
.a4w-band2--light .a4w-band2__lead { color: #1B2236 !important; }
.a4w-band2--dark .a4w-band2__lead  { color: #E4E9F5 !important; }

.a4w-band2__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.a4w-band2--dark .a4w-band2__actions { justify-content: flex-end; margin-top: 0; }

.a4w-band2__btn {
  display: inline-block;
  padding: 0.85rem 1.4rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease;
}
.a4w-band2__btn:hover { transform: translateY(-2px); }
.a4w-band2__btn--primary { background: #FECC00; color: #031457 !important; }
.a4w-band2--light .a4w-band2__btn--ghost {
  border: 2px solid #031457;
  color: #031457 !important;
}

/* Προσομοίωση συνομιλίας (δεξιά στήλη, πρώτη κάρτα) */
.a4w-chatdemo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: #ffffff;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 18px 40px -20px rgba(3, 20, 87, .35);
}
.a4w-chatdemo__msg {
  margin: 0;
  padding: 0.7rem 0.95rem;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 92%;
}
.a4w-chatdemo__msg--them {
  background: #E4E9F5;
  color: #1B2236 !important;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.a4w-chatdemo__msg--bot {
  background: #031457;
  color: #ffffff !important;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

@media (max-width: 800px) {
  .a4w-band2__inner { grid-template-columns: 1fr; }
  .a4w-band2--dark .a4w-band2__actions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .a4w-band2__btn { transition: none; }
  .a4w-band2__btn:hover { transform: none; }
}
/* ==========================================================================
   ΜΑΣ ΕΜΠΙΣΤΕΥΟΝΤΑΙ — μικρότερο κενό και ίδιο ύψος λογοτύπων
   Προσθέστε στο ΤΕΛΟΣ του style.css
   ========================================================================== */

/* Μείωση του κάθετου κενού της ενότητας (και του Divi wrapper της) */
.et_pb_section:has(.a4w-trust),
.et_pb_row:has(.a4w-trust) {
  padding-top: clamp(1.5rem, 3vw, 2.25rem) !important;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem) !important;
}

.a4w-trust {
  padding: 0;
  margin: 0;
  gap: clamp(1.5rem, 4vw, 3rem);
}

/* Όλα τα λογότυπα στο ίδιο ύψος */
.a4w-trust img {
  height: 40px !important;
  max-height: 40px !important;
  width: auto !important;
  max-width: 150px;
  object-fit: contain;
}

@media (max-width: 767px) {
  .a4w-trust img {
    height: 30px !important;
    max-height: 30px !important;
  }
}

/* Μικρότερο κενό κάτω από το hero των εσωτερικών σελίδων */
.et_pb_section:has(.a4w-pagehero) {
  padding-bottom: 0 !important;
}
/* Επικοινωνία: η ενότητα με το band μετά το hero δεν έχει πάνω padding */
.et_pb_section:has(.a4w-pagehero) + .et_pb_section:has(.a4w-band--alt) {
  padding-top: 0 !important;
}