:root{
  --primary:#1f60ff;
  --primary-600:#234ee4;
  --bg:#f7f8fb;
  --text:#1a1a1a;
  --muted:#5b6370;
  --card:#ffffff;

  /* Accent για tiles */
  --tile-accent:#ffd24d;
  --tile-accent-hover:#ffcc33;
}

/* reset/basics */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}
img{max-width:100%;height:auto;display:block}
.container{width:min(1200px,92%);margin:0 auto}
.flex{display:flex;gap:16px}
.center-v{align-items:center}
.between{justify-content:space-between}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:960px){.grid-3{grid-template-columns:1fr}}
.small{font-size:.9rem;color:var(--muted)}

/* ===== Hero cover ===== */
.hero-cover{
  position:relative;
  min-height:58vh;
  display:flex;
  align-items:center;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  isolation:isolate;
}
.hero-cover::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 400px at 20% 10%, rgba(31,96,255,.25), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  z-index:-1;
}
.hero-cover.slim{ min-height:34vh }
.hero-cover .display{
  font-size:clamp(32px,6vw,56px);
  color:#fff;
  margin:0 0 8px;
  letter-spacing:.2px;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}
.hero-cover .sub{
  color:#eef2ff;
  max-width:64ch;
  font-size:1.1rem;
}

/* ===== Why Us ===== */
.why-us{
  background: linear-gradient(180deg,#eaf3ff 0%, #f7f9ff 100%);
  border-top:1px solid #e5ecfb;
  border-bottom:1px solid #e5ecfb;
}
.why-title{
  text-align:center;
  font-size:clamp(24px,4vw,36px);
  letter-spacing:.06em;
  margin:0 0 22px;
}
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
@media (max-width:960px){ .why-grid{grid-template-columns:1fr} }
.feature{
  background:var(--card);
  border:1px solid #e8ebf2;
  border-radius:18px;
  padding:20px;
  box-shadow:0 8px 28px rgba(0,0,0,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.feature:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 40px rgba(0,0,0,.08);
}
.feature h3{
  margin:10px 0 6px;
  font-size:1.02rem;
}
.feature p{
  color:var(--muted);
  margin:0;
}
.feature .icon{
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background: radial-gradient(120% 120% at 20% 20%, #e9eeff 0, #dfe8ff 60%, #d6e0ff 100%);
  color:var(--primary);
  box-shadow:inset 0 0 0 1px rgba(31,96,255,.15), 0 6px 16px rgba(31,96,255,.18);
}

/* ===== Tiles (improved) ===== */
.image-layouts{
  background:linear-gradient(180deg,#fff 0%,#f7f8fb 100%);
  position:relative;
  isolation:isolate;
}

.tiles-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:960px){
  .tiles-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .tiles-grid{grid-template-columns:1fr}
}

/* Κάρτα tile */
.tile{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:20px;

  /* μπλε glow + απαλή γραμμή */
  background:radial-gradient(circle at 20% 20%, rgba(31,96,255,.10) 0%, rgba(0,0,0,0) 60%);
  border:1px solid rgba(31,96,255,.18);

  box-shadow:
    0 24px 48px rgba(0,0,0,.20),
    0 2px 8px rgba(31,96,255,.28);

  aspect-ratio:16/9;

  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tile:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:
    0 32px 64px rgba(0,0,0,.28),
    0 4px 14px rgba(31,96,255,.4);
  border-color:rgba(31,96,255,.4);
}

/* background φωτογραφία */
.tile-img{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:saturate(1.05) contrast(1.03);
  transition:transform .35s ease;
}
.tile:hover .tile-img{
  transform:scale(1.06);
}

/* overlay επάνω από τη φωτογραφία (gradient + tint) */
.tile::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(100% 60% at 20% 15%, rgba(31,96,255,.38) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(
      to bottom,
      rgba(8,12,28,.65) 0%,
      rgba(8,12,28,.45) 40%,
      rgba(8,12,28,.20) 65%,
      rgba(8,12,28,0)   100%
    );
}

/* κάτω "γυάλινο" box */
.tile-body{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:2;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;

  padding:16px 16px 14px;
  border-radius:16px;

  background:rgba(15,23,42,.45);
  backdrop-filter:blur(6px) saturate(1.2);
  -webkit-backdrop-filter:blur(6px) saturate(1.2);

  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 16px 32px rgba(0,0,0,.45),
    0 0 20px rgba(31,96,255,.5);
}

/* τίτλος μέσα στο tile */
.tile-title{
  flex:1 1 auto;
  color:#fff;
  font-weight:800;
  letter-spacing:.03em;
  line-height:1.25;
  font-size:clamp(.8rem, .4vw + .7rem, .9rem);
  text-transform:uppercase;

  text-shadow:
    0 2px 8px rgba(0,0,0,.6),
    0 0 2px rgba(0,0,0,.9);

  position:relative;
  padding-left:10px;
}
.tile-title::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:4px;
  border-radius:2px;
  background:linear-gradient(
    180deg,
    var(--primary) 0%,
    var(--primary-600) 100%
  );
  box-shadow:0 0 8px rgba(31,96,255,.6);
}

/* κουμπί ghost */
.btn.ghost{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:.75rem;
  line-height:1;
  text-decoration:none;

  color:#fff;
  background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 70%),
             linear-gradient(90deg,var(--primary) 0%,var(--primary-600) 100%);
  border:1px solid rgba(255,255,255,.4);

  box-shadow:
    0 10px 24px rgba(0,0,0,.45),
    0 0 12px rgba(31,96,255,.8);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn.ghost:hover{
  transform:translateY(-2px);
  box-shadow:
    0 16px 32px rgba(0,0,0,.6),
    0 0 16px rgba(31,96,255,1);
}

/* Cards */
.section{padding:54px 0}
.sec-title{ font-size:clamp(20px,3.4vw,28px); margin:0 0 14px;}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  background:var(--card);
  border:1px solid #e8ebf2;
  border-radius:16px;
  padding:18px;
  transition:transform .2s ease, box-shadow .2s ease
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,.08)
}
.card h3{margin:6px 0 8px}
.card p{color:var(--muted)}
.card-badge{
  display:inline-block;
  font-size:.8rem;
  padding:4px 8px;
  border-radius:999px;
  background:#e9eeff;
  color:#1f3fff;
  margin-bottom:8px
}
@media (max-width:960px){.cards{grid-template-columns:1fr}}

/* KPIs */
.kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.kpi{
  background:var(--card);
  border:1px solid #e8ebf2;
  border-radius:16px;
  padding:22px 16px;
  text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.04)
}
.kpi-num{
  font-weight:800;
  font-size:clamp(22px,4vw,32px);
  color:#1e2a55
}
.kpi-label{
  color:var(--muted);
  margin-top:6px
}

/* Map section */
.map-section .map-frame{
  border:1px solid #e8ebf2;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}
.map-section .map-frame iframe{
  width:100%;
  height:420px;
  border:0;
  filter:saturate(1.05) contrast(1.02);
}

/* Contact form */
.form{
  background:var(--card);
  border:1px solid #e8ebf2;
  border-radius:16px;
  padding:18px
}
.form .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.form .row > div{
  display:flex;
  flex-direction:column
}
.form label{
  font-weight:600;
  margin-bottom:6px
}
.form input,.form textarea{
  border:1px solid #d9deea;
  border-radius:10px;
  padding:10px;
  font:inherit
}
.form textarea{min-height:120px}
.form input:focus,.form textarea:focus{
  outline:none;
  border-color:#b9c6ff;
  box-shadow:0 0 0 4px rgba(31,96,255,.12)
}
@media (max-width:960px){
  .form .row{grid-template-columns:1fr}
}

/* Footer */
.site-footer{
  background:#dee7fa;
  border-top:1px solid #e8ebf2;
  padding:32px 0
}
.site-footer h4{margin:0 0 10px}
.site-footer .map-embed iframe{
  width:100%;
  height:200px;
  border:0;
  border-radius:12px
}
.site-footer .print{
  margin-top:16px;
  color:var(--muted)
}

/* Modal (γενικό) */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.modal.show{
  display:flex;
  animation:fadeIn .18s ease-out
}
@keyframes fadeIn{
  from{opacity:.5}
  to{opacity:1}
}
.modal-dialog{
  position:relative;
  width:min(680px,92%);
  background:var(--card);
  border:1px solid #e8ebf2;
  border-radius:16px;
  padding:20px 18px;
  box-shadow:0 22px 64px rgba(0,0,0,.28);
}
.modal h3{
  margin:0 0 8px;
  font-size:1.25rem
}
.modal p{
  color:var(--text);
  line-height:1.6;
  margin:0 0 12px
}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px
}
.modal-close{
  position:absolute;
  top:10px;
  right:12px;
  width:36px;
  height:36px;
  border-radius:10px;
  background:#f2f4ff;
  color:#1d2b6d;
  border:1px solid #dfe5ff;
  font-size:20px;
  line-height:34px;
  text-align:center;
  cursor:pointer;
}
.modal-close:hover{background:#e9eeff}

/* Segmented controls */
.segmented{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  background:#f0f3fa;
  border:1px solid #e4e9f6;
  border-radius:12px;
  padding:6px;
  margin:8px 0 16px;
}
.seg-btn{
  appearance:none;
  background:transparent;
  border:1px solid transparent;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  color:#445;
}
.seg-btn.is-active{
  background:#fff;
  border-color:#cfd6f4;
  color:#1a1a1a;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.contact-panels{ margin-top:4px }
.contact-panel.is-hidden{ display:none }

/* Iframe wrapper */
.iframe-wrap{
  position:relative;
  height:min(100vh, 920px);
  border:1px solid #e8ebf2;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  background:linear-gradient(180deg,#fff 0,#f7f8fb 100%);
}
.iframe-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0
}
.iframe-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  text-align:center;
  color:#445;
  background: repeating-linear-gradient(45deg, #f5f7ff, #f5f7ff 10px, #eef2ff 10px, #eef2ff 20px);
}
.iframe-wrap.loaded .iframe-fallback{ display:none }
.iframe-wrap.failed .iframe-fallback,
.iframe-wrap.maybe-blocked .iframe-fallback{ display:flex }

/* Diplomas grid */
.svc-grid{
  --gap: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:var(--gap);
}
@media (max-width: 1024px){ .svc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){  .svc-grid{ grid-template-columns: 1fr; } }
.svc-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  min-height:190px;
  color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  transform:translateZ(0);
  transition:transform .18s ease, box-shadow .18s ease;
}
.svc-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(0,0,0,.12);
}
.svc-inner{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  height:100%;
  padding:22px;
  gap:8px;
  background: radial-gradient(110% 110% at 100% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 50%);
}
.svc-title{
  font-weight:800;
  letter-spacing:.2px;
  line-height:1.2;
  font-size: clamp(1.05rem, 1vw + .9rem, 1.25rem);
  margin: 4px 0 0;
  color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.15);
}
.svc-desc{
  margin:0;
  color:#f3f7ff;
  opacity:.96;
}
.svc-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  color:#fff;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(1px);
}
.svc-btn{
  align-self:flex-start;
  border-color: rgba(255,255,255,.75);
  color:#fff;
  backdrop-filter: blur(2px);
}
.svc-btn:hover{
  background: rgba(255,255,255,.16);
}
.svc-card.g1{
  background-image: linear-gradient(135deg,#4f46e5 0%, #06b6d4 100%);
}
.svc-card.g2{
  background-image: linear-gradient(135deg,#0ea5e9 0%, #22c55e 100%);
}
.svc-card.g3{
  background-image: linear-gradient(135deg,#f97316 0%, #ef4444 100%);
}

/* ===================================================================== */
/* =================== Topbar PRO — Glass / CTA / Mega ================= */
/* ===================================================================== */

:root{
  --nav-shadow:0 24px 48px rgba(0,0,0,.18);
  --nav-radius:14px;
}

.topbar.pro{
  position:sticky;
  top:0;
  z-index:1400;
  background:var(--nav-bg);
  color:var(--nav-fg);
  border-bottom:1px solid var(--nav-border);
  backdrop-filter:blur(12px) saturate(1.25);
  -webkit-backdrop-filter:blur(12px) saturate(1.25);
  transition:box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.topbar.pro.is-stuck{
  background:var(--nav-bg-solid);
  box-shadow:0 18px 44px rgba(0,0,0,.18);
  border-color:rgba(15,23,42,.12);
}

.topbar.pro .container.nav-row{
  width:min(1200px,92%);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:70px;
}
.topbar.pro .logo img{
  height:48px;
  display:block;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));
  transition:transform .15s ease;
}
.topbar.pro .logo:hover img{
  transform:translateY(-1px) scale(1.02);
}

/* nav (desktop) */
.topbar.pro .nav{ display:block }
.topbar.pro .nav-list{
  display:flex;
  align-items:center;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
}
.topbar.pro .nav-item{ position:relative }

/* Desktop nav links */
.topbar.pro .nav-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  line-height:1.2;
  color:var(--nav-fg);
  background:transparent;
  position:relative;
  transition:background .15s ease, color .15s ease;
}
.topbar.pro .nav-link::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:4px;
  height:2px;
  border-radius:2px;
  background:var(--primary);
  box-shadow:0 0 8px rgba(31,96,255,.6);
  opacity:0;
  transform:scaleX(.4);
  transform-origin:left center;
  transition:opacity .15s ease, transform .15s ease;
}
.topbar.pro .nav-link:hover{
  background:var(--nav-link-hover-bg);
  color:var(--nav-link-hover-fg);
}
.topbar.pro .nav-link:hover::after{
  opacity:1;
  transform:scaleX(1);
}

.topbar.pro .caret{
  width:0;
  height:0;
  margin-left:4px;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid currentColor;
  opacity:.85;
  transition:transform .18s ease;
}
.topbar.pro .has-sub.open .caret{ transform:rotate(180deg) }

/* ========================= */
/* DROPDOWN (desktop styles) — Minimal / Airy */
/* ========================= */

.topbar.pro .dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width:520px;
  max-width:700px;
  display:none;

  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:20px;

  box-shadow:0 32px 64px rgba(0,0,0,.08);
  background-image:none;

  animation:ddFade .16s ease both;
  z-index:2000;
}
@keyframes ddFade{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:none}
}

/* show dropdown on hover desktop */
@media (hover:hover){
  .topbar.pro .has-sub:hover > .dropdown,
  .topbar.pro .has-sub:focus-within > .dropdown{
    display:block;
  }
}

/* layout μέσα στο dropdown: links (2fr) + promos (1fr) */
.topbar.pro .dropdown-inner{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:24px;
}

/* links container */
.topbar.pro .dropdown-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

/* link row */
.topbar.pro .dropdown-list a{
  display:block;
  width:100%;
  border-radius:10px;
  border:1px solid transparent;
  background:#fff;
  padding:12px 14px;
  color:#0f172a;
  text-decoration:none;
  font-weight:600;
  font-size:.9rem;
  line-height:1.35;
  box-shadow:none;
  transition:
    background .12s ease,
    border-color .12s ease,
    box-shadow .12s ease,
    color .12s ease;
}
.topbar.pro .dropdown-list a:hover{
  background:#f8faff;
  border-color:rgba(31,96,255,.35);
  box-shadow:0 6px 16px rgba(31,96,255,.15);
  color:#0a2a8a;
}

/* μικρό περιγραφικό */
.topbar.pro .dropdown-list a .subtext{
  display:block;
  font-size:.78rem;
  font-weight:400;
  color:#6b7280;
  line-height:1.4;
  margin-top:4px;
}

/* promos δεξιά */
.topbar.pro .dropdown-promos{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.topbar.pro .promo-card{
  display:flex;
  flex-direction:column;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  background:#fdfdfd;
  box-shadow:0 16px 32px rgba(0,0,0,.06);
  padding:16px;
  text-decoration:none;
  color:#0f172a;
  transition:box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}
.topbar.pro .promo-card:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 40px rgba(0,0,0,.08);
  border-color:rgba(31,96,255,.35);
}

/* εναλλακτική promo (πορτοκαλί) */
.topbar.pro .promo-card.alt{
  background:#fffdf6;
  border:1px solid rgba(255,183,0,.4);
  box-shadow:0 16px 32px rgba(255,183,0,.15);
}

/* badge */
.topbar.pro .promo-badge{
  display:inline-block;
  align-self:flex-start;
  font-size:.7rem;
  font-weight:700;
  line-height:1.2;
  color:#713f12;
  background:#fff9c2;
  border:1px solid #fde047;
  border-radius:999px;
  padding:3px 8px;
  margin-bottom:6px;
  box-shadow:none;
}
.topbar.pro .promo-card.alt .promo-badge{
  color:#7a1d00;
  background:#fff4e6;
  border:1px solid rgba(255,140,0,.4);
}

/* promo texts */
.topbar.pro .promo-title{
  font-size:.9rem;
  font-weight:600;
  line-height:1.3;
  color:#0f172a;
  margin:0 0 4px;
}
.topbar.pro .promo-desc{
  font-size:.8rem;
  line-height:1.4;
  color:#4b5563;
  margin:0 0 10px;
}
.topbar.pro .promo-cta{
  font-size:.8rem;
  font-weight:600;
  color:#1f60ff;
  line-height:1.3;
  text-decoration:underline;
  text-underline-offset:2px;
}
.topbar.pro .promo-card.alt .promo-cta{
  color:#b45309;
}

/* ========================= */
/* Actions δεξιά (CTA & γλώσσα) */
/* ========================= */

.topbar.pro .actions{
  display:flex;
  align-items:center;
  gap:16px;
}

/* Τηλέφωνο / CTA */
.topbar.pro .btn-call{
  display:inline-flex;
  align-items:center;
  gap:6px;

  background:linear-gradient(90deg,var(--primary) 0%,var(--primary-600) 100%);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:.8rem;
  line-height:1;

  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--primary-600);

  box-shadow:
    0 10px 22px rgba(31,96,255,.35),
    0 0 14px rgba(31,96,255,.7);

  transition:transform .12s ease, box-shadow .12s ease;
}
.topbar.pro .btn-call:hover{
  transform:translateY(-1px);
  box-shadow:
    0 14px 28px rgba(31,96,255,.45),
    0 0 18px rgba(31,96,255,.9);
}
.topbar.pro .call-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#4ade80;
  box-shadow:0 0 8px #4ade80;
}

/* Γλώσσα */
.topbar.pro .lang-switch{
  display:flex;
  align-items:center;
  gap:4px;
  background:rgba(15,23,42,.05);
  border:1px solid rgba(15,23,42,.12);
  border-radius:999px;
  padding:4px 8px;
  font-weight:600;
  font-size:.8rem;
  line-height:1;
  color:var(--nav-muted);
}
.topbar.pro .lang-switch a{
  text-decoration:none;
  color:var(--nav-muted);
  padding:4px 6px;
  border-radius:8px;
  line-height:1.1;
  transition:background .12s ease,color .12s ease,box-shadow .12s ease;
}
.topbar.pro .lang-switch a.active{
  background:var(--primary);
  color:#fff;
  box-shadow:0 8px 18px rgba(31,96,255,.4);
}
.topbar.pro .lang-switch a:not(.active):hover{
  background:rgba(0,0,0,.04);
  color:var(--nav-fg);
}

/* ========================= */
/* hamburger / mobile nav    */
/* ========================= */

.topbar.pro .hamburger{
  appearance:none;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:8px;
  border-radius:10px;
  display:none;

  background:rgba(15,23,42,.05);
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.topbar.pro .hamburger span{
  display:block;
  width:22px;
  height:2px;
  border-radius:2px;
  background:var(--nav-fg);
  transition:transform .18s ease, opacity .18s ease;
}
.topbar.pro .hamburger.is-open span:nth-child(1){
  transform:translateY(4px) rotate(45deg);
}
.topbar.pro .hamburger.is-open span:nth-child(2){
  opacity:0;
}
.topbar.pro .hamburger.is-open span:nth-child(3){
  transform:translateY(-4px) rotate(-45deg);
}

/* backdrop */
.topbar.pro .nav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  display:none;
  z-index:1450;
}
.topbar.pro .nav.open ~ .nav-backdrop{
  display:block;
}
body.nav-open{ overflow:hidden }

/* ========================= */
/* MOBILE / TABLET OVERRIDES */
/* ========================= */

@media (max-width:1024px){
  .topbar.pro .hamburger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .topbar.pro .nav{
    position:fixed;
    right:0;
    top:70px; /* ίδιο με το ύψος του header */
    width:min(360px, 86vw);

    /* << βασικό fix για το ύψος >> */
    height:calc(100vh - 70px);
    height:calc(100dvh - 70px); /* mobile browsers πιο σωστά */
    min-height:calc(100vh - 70px);
    max-height:calc(100vh - 70px);

    /* scroll μέσα στο panel */
    overflow-y:auto;
    overflow-x:hidden;

    /* αισθητικά */
    background:var(--mb-bg);
    background-image:var(--mb-bg-gradient);
    border-left:1px solid var(--mb-border);
    box-shadow:
      -24px 0 48px rgba(0,0,0,.32),
      0 0 80px rgba(31,96,255,.4);

    /* off-canvas συμπεριφορά */
    transform:translateX(100%);
    transition:transform .22s ease;
    z-index:1500;

    /* λίγο “μαξιλαράκι” κάτω για να μην κολλάει σε home indicator σε iPhone */
    padding:16px 14px calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .topbar.pro .nav.open{
    transform:none;
  }

  .topbar.pro .nav-list{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .topbar.pro .nav-link{
    width:100%;
    justify-content:space-between;
    padding:14px 12px;
    border-radius:12px;

    background:rgba(255,255,255,.5);
    border:1px solid rgba(0,0,0,.04);
    box-shadow:0 8px 22px rgba(0,0,0,.06);

    color:var(--nav-fg);
  }
  .topbar.pro .nav-link::after{
    display:none;
  }

  /* dropdown ως accordion */
  .topbar.pro .dropdown{
    position:static;
    display:none;
    width:100%;
    min-width:100%;
    max-width:100%;
    box-shadow:none;
    border:0;
    border-radius:10px;
    padding:10px 0 0;
    background:var(--mb-dd-bg);
    background-image:none;
  }
  .topbar.pro .has-sub.open > .dropdown{
    display:block;
  }

  .topbar.pro .has-sub > .sub-toggle{
    width:100%;
    justify-content:space-between;
  }

  .topbar.pro .dropdown-inner{
    display:block;
  }

  .topbar.pro .dropdown-list{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin:10px 0 0;
    padding:0;
  }

  .topbar.pro .dropdown-list a{
    background:#fff;
    border-radius:10px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 6px 14px rgba(0,0,0,.05);
    font-size:.9rem;
  }

  .topbar.pro .dropdown-list a .subtext{
    font-size:.75rem;
  }

  .topbar.pro .dropdown-promos{
    margin-top:12px;
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }

  .topbar.pro .promo-card,
  .topbar.pro .promo-card.alt{
    border-radius:12px;
    box-shadow:0 10px 22px rgba(0,0,0,.15);
    transform:none;
  }
  .topbar.pro .promo-card:hover,
  .topbar.pro .promo-card.alt:hover{
    transform:none;
    box-shadow:0 12px 28px rgba(0,0,0,.2);
  }
}


/* ========================= */
/* Themes                    */
/* ========================= */

.topbar.pro.theme-light{
  --nav-bg:rgba(255,255,255,.6);
  --nav-bg-solid:#ffffff;

  --nav-fg:#0f172a;
  --nav-muted:#6b7280;
  --nav-border:rgba(15,23,42,.08);

  --nav-link-hover-bg:rgba(31,96,255,.08);
  --nav-link-hover-fg:#0a2a8a;

  --dd-bg:#ffffff;
  --dd-fg:#0f172a;
  --dd-border:#e9edf4;
  --dd-link:#0f172a;
  --dd-hover-bg:#eef3ff;
  --dd-hover-fg:#0a41ff;

  --mb-bg:#ffffff;
  --mb-border:#e9edf4;
  --mb-dd-bg:#f7f8fc;

  --mb-bg-gradient:radial-gradient(circle at 0% 0%, #ffffff 0%, #eef3ff 70%);
}

.topbar.pro.theme-dark{
  --nav-bg:rgba(15,23,42,.6);
  --nav-bg-solid:linear-gradient(180deg,#0f172a,#111827);

  --nav-fg:#e5e7eb;
  --nav-muted:#9ca3af;
  --nav-border:rgba(255,255,255,.10);

  --nav-link-hover-bg:rgba(255,255,255,.08);
  --nav-link-hover-fg:#ffffff;

  --dd-bg:#0b1220;
  --dd-fg:#e5e7eb;
  --dd-border:rgba(255,255,255,.10);
  --dd-link:#e8ecf4;
  --dd-hover-bg:rgba(96,165,250,.15);
  --dd-hover-fg:#ffffff;

  --mb-bg:#0b1220;
  --mb-border:rgba(255,255,255,.10);
  --mb-dd-bg:#0f172a;

  --mb-bg-gradient:radial-gradient(circle at 0% 0%, rgba(15,23,42,1) 0%, rgba(17,24,39,1) 70%);
}

/* =========================
   Section themes & band
   ========================= */
:root{
  /* Section palette (ήπιες αποχρώσεις) */
  --sec-a: #ffffff;
  --sec-b: #f7f9ff;
  --sec-c: #f5f7fb;
  --sec-d: #eef3ff;

  /* Διαγώνια πλατιά γραμμή */
  --band-start: rgba(31,96,255,.12);
  --band-end:   rgba(31,96,255,0);
  --band-angle: -6deg;
}

/* Βασικό section (κρατά το περιεχόμενο πάνω από διακοσμητικά) */
.section{
  position: relative;
  background: var(--sec-a);
  isolation: isolate;
}

/* Utility backgrounds */
.section.bg-a{ background: var(--sec-a); }
.section.bg-b{ background: var(--sec-b); }
.section.bg-c{ background: var(--sec-c); }
.section.bg-d{ background: var(--sec-d); }

/* Διαγώνια πλατιά γραμμή (band) */
.section.band{ overflow: hidden; }
.section.band::before{
  content:"";
  position: absolute;
  left: -10%; right: -10%;
  top: -42px;
  height: 160px;
  background: linear-gradient(90deg, var(--band-start), var(--band-end));
  transform: skewY(var(--band-angle));
  pointer-events: none;
  z-index: 0;
}
/* Περιεχόμενο πάντα πάνω από το band */
.section .container{ position: relative; z-index: 1; }

/* Μαλακότερη παραλλαγή band */
.section.band.soft::before{
  background: linear-gradient(90deg, rgba(31,96,255,.08), rgba(31,96,255,.03));
}
/* Κεντραρισμένο band */
.section.band.center::before{
  top: 50%;
  transform: translateY(-50%) skewY(var(--band-angle));
  height: 220px;
}

/* Διακριτικός διαχωριστής μεταξύ sections */
.section + .section{ border-top: 1px solid #e9edf4; }

/* Αυτόματη εναλλαγή φόντου */
.sections-alt > .section:nth-child(odd){  background: var(--sec-a); }
.sections-alt > .section:nth-child(even){ background: var(--sec-b); }

/* 3-χρωμη εναλλαγή */
.sections-alt-3 > .section:nth-child(3n+1){ background: var(--sec-a); }
.sections-alt-3 > .section:nth-child(3n+2){ background: var(--sec-b); }
.sections-alt-3 > .section:nth-child(3n){   background: var(--sec-c); }

/* Διακριτική "λοξή" σκιά στο πάνω μέρος κάθε section */
.section::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:42px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
  z-index:0;
}

/* =========================
   Global Primary CTA Button
   ========================= */
a.btn.primary, .btn.primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-radius:12px;
  font-weight:800;
  line-height:1;
  text-decoration:none;

  background:var(--primary);
  color:#fff;
  border:1px solid var(--primary-600);

  box-shadow:0 8px 22px rgba(31,96,255,.25);
  transition:background .12s ease, border-color .12s ease,
             box-shadow .12s ease, transform .12s ease;
}
a.btn.primary:hover, .btn.primary:hover{
  background:var(--primary-600);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(31,96,255,.35);
}
a.btn.primary:active, .btn.primary:active{
  transform:translateY(0);
  box-shadow:0 6px 16px rgba(31,96,255,.24);
}
a.btn.primary:focus-visible, .btn.primary:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(31,96,255,.25), 0 8px 22px rgba(31,96,255,.25);
}
a.btn.primary:visited{ color:#fff; }

/* Προαιρετικά μεγέθη */
.btn.primary.sm{
  padding:10px 12px;
  border-radius:10px;
}
.btn.primary.lg{
  padding:14px 18px;
  font-size:1.05rem;
}

@media (prefers-reduced-motion:reduce){
  a.btn.primary, .btn.primary{ transition:none }
}

/* =========================================================
   Promo Banner — Επικυρωμένες Μεταφράσεις
   ========================================================= */
.promo-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1px solid #e8ebf2;
  border-radius:16px;
  padding:18px 20px;
  background:linear-gradient(180deg,#6b8fe3 0%,#f7f9ff 100%);
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}
.promo-text{ max-width:820px }
.promo-badge{
  display:inline-block;
  font-weight:800;
  letter-spacing:.02em;
  font-size:.8rem;
  padding:4px 8px;
  border-radius:999px;
  background:#e9eeff;
  color:#0a2a8a;
  border:1px solid #cfd6f4;
  margin-bottom:6px;
}
.promo-title{
  margin:4px 0 8px;
  font-size:clamp(18px,1.1vw + 1rem,24px)
}
.promo-text p{
  margin:0;
  color:var(--muted)
}
.promo-cta{ flex-shrink:0 }

.promo-banner.pulse{
  animation:promoPulse 2.2s ease-in-out infinite;
}
@keyframes promoPulse{
  0%,100%{
    box-shadow:0 10px 28px rgba(31,96,255,.22);
    border-color:rgba(31,96,255,.26)
  }
  50%{
    box-shadow:0 16px 40px rgba(31,96,255,.36);
    border-color:rgba(31,96,255,.40)
  }
}

@media (max-width:820px){
  .promo-banner{
    flex-direction:column;
    align-items:flex-start
  }
  .promo-cta .btn.primary{
    width:100%;
    justify-content:center
  }
}

@media (prefers-reduced-motion:reduce){
  .promo-banner.pulse{ animation:none }
}

/* ===== Related: Featured + List (τιρκουάζ/πράσινο) ===== */
.related-featured{
  --rel-grad: linear-gradient(135deg,#06b6d4 0%, #22c55e 100%);
  --rel-fg:#ffffff;
  --rel-muted:#eafff8;
  background:#f5fbff;
  border-top:1px solid #e5f2ff;
}
.related-featured .rel-wrap{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:18px;
}
@media (max-width:960px){
  .related-featured .rel-wrap{ grid-template-columns:1fr }
}

.rel-hero{
  position:relative;
  border-radius:18px;
  padding:22px;
  color:var(--rel-fg);
  background:var(--rel-grad);
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}
.rel-hero h3{
  margin:0 0 8px
}
.rel-hero p{
  margin:0 0 14px;
  color:var(--rel-muted)
}

/* Κάνε το primary κουμπί λευκό/πράσινο ΜΟΝΟ μέσα στο related */
.related-featured .rel-hero .btn.primary{
  background:#fff;
  color:#065f46;
  border-color:#ffffff;
  box-shadow:0 8px 22px rgba(34,197,94,.25);
}
.related-featured .rel-hero .btn.primary:hover{
  background:#f8fdfb;
  color:#064e3b;
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(34,197,94,.35);
}

.rel-list{
  background:#fff;
  border:1px solid #e8ebf2;
  border-radius:18px;
  padding:14px;
}
.rel-item{
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:12px;
  text-decoration:none;
  color:inherit;
}
.rel-item:hover{ background:#f6fbff }
.rel-thumb{
  width:56px;
  height:56px;
  border-radius:12px;
  overflow:hidden;
  background:#eaf8ff;
  flex:0 0 auto;
  background-size:cover;
  background-position:center;
}
.rel-item h4{
  margin:0 0 4px;
  font-size:1rem
}
.rel-item .small{
  margin:0;
  color:var(--muted)
}

/* === Related: Featured with Photo variant === */
.related-featured .rel-hero.photo{
  padding:0;
  min-height:240px;
  display:flex;
  align-items:flex-end;
  background-size:cover;
  background-position:center;
  position:relative;
  color:#fff;
}
.related-featured .rel-hero.photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.58));
}
.related-featured .rel-hero.photo .inner{
  position:relative;
  z-index:1;
  padding:22px;
}
.related-featured .rel-hero.photo h3{
  margin:0 0 8px;
  color:#fff
}
.related-featured .rel-hero.photo p{
  margin:0 0 14px;
  color:#eaf2ff
}

/* Λευκό CTA μόνο μέσα στο photo hero */
.related-featured .rel-hero.photo .btn.primary{
  background:#ffffff;
  color:#0b3d31;
  border-color:#ffffff;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.related-featured .rel-hero.photo .btn.primary:hover{
  background:#f7fffb;
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(0,0,0,.22);
}