/* ΝΕΟ ενοποιημένο σχέδιο — δομή από το Α, παλέτα από το Γ αλλά σε ανοιχτό φόντο.
   Σκούρο μόνο σε δύο λωρίδες (αριθμοί + επικοινωνία). */

:root{
  --lime:#e0362a;          /* τονισμός — κόκκινο */
  --lime-d:#c22a1f;
  --lime-soft:#fdeceb;
  --ink:#12233d;           /* τίτλοι / σκούρες λωρίδες — βαθύ μπλε */
  --ink-2:#1c3355;
  --body:#4e5b70;
  --line:#dfe5ee;
  --bg:#ffffff;
  --bg-alt:#eef3fa;
  --tint:#fdf1f0;          /* απαλό κόκκινο — μόνο σε μικρές λεπτομέρειες */
  --cool:#eef3fa;          /* ψυχρό γκρι-μπλε για φόντα ενοτήτων */
  --warn:#c22a1f;
  --on-accent:#ffffff;   /* κείμενο πάνω στο χρώμα τονισμού */
  --accent-ink:#b0281d;  /* σκούρα απόχρωση του τονισμού, για κείμενο σε ανοιχτό */
  --radius:16px;
  --shadow:0 16px 40px rgba(24,36,26,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--body);
  font:16.5px/1.68 "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink); margin:0 0 .5em; line-height:1.16; letter-spacing:-.02em; font-weight:800}
p{margin:0 0 1em}
a{color:var(--accent-ink)}
img,svg{max-width:100%}
ul{margin:0 0 1em; padding-left:1.15rem}

.wrap{width:100%; max-width:1160px; margin:0 auto; padding:0 22px}
.wrap--mid{max-width:900px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  background:var(--lime); color:var(--on-accent); border:2px solid var(--lime); border-radius:999px;
  padding:.8rem 1.5rem; font:800 1rem/1.15 inherit; text-decoration:none; cursor:pointer; transition:transform .12s ease}
.btn:hover{background:var(--lime-d); border-color:var(--lime-d)}
.btn--lg{padding:1rem 1.9rem; font-size:1.08rem}
.btn--sm{padding:.5rem 1.1rem; font-size:.9rem}
.btn--full{width:100%}
.btn__i{width:19px; height:19px; flex:0 0 19px; color:currentColor}
.btn__i--r{width:17px; height:17px; flex:0 0 17px; opacity:.75}
.btn--out{background:transparent; color:var(--ink); border-color:#c9d6bf}
.btn--out:hover{background:var(--lime-soft); border-color:var(--lime)}
.dark .btn--out{color:#fff; border-color:rgba(255,255,255,.35)}
.dark .btn--out:hover{background:rgba(255,255,255,.12); border-color:#fff}

.ph{background:#fff3cf; border-bottom:1px dashed #d9a521; padding:0 .25em; border-radius:3px; color:#7a5405}
.ph--sm{font-size:.55em; font-weight:600; vertical-align:middle}
.dark .ph{background:rgba(168,216,26,.18); border-bottom-color:rgba(168,216,26,.6); color:#dff0a8}

/* ---------- μπάρα σύγκρισης σχεδίων ---------- */
.topnote{background:var(--ink); color:#c8d6c0; font-size:.82rem; text-align:center; padding:7px 16px}
.topnote a{color:var(--lime); text-decoration:none; font-weight:700; margin-left:10px}
.topnote a:hover{text-decoration:underline}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav__in{display:flex; align-items:center; gap:24px; height:72px}
.nav__links{display:flex; gap:22px; margin-left:auto}
.nav__links a{color:var(--body); text-decoration:none; font-size:.94rem}
.nav__links a:hover{color:var(--ink)}
.nav__tel{display:flex; flex-direction:column; line-height:1.15; text-decoration:none}
.nav__tel span{font-size:.68rem; letter-spacing:.12em; color:#8b988f; text-transform:uppercase}
.nav__tel b{color:var(--ink); font-size:1.05rem}

/* λογότυπο */
.logo{display:flex; align-items:center; gap:10px; text-decoration:none}
.logo__m{width:38px; height:38px; flex:0 0 38px}
.logo__t{line-height:1.1}
.logo__t b{display:block; color:var(--ink); font-size:1.16rem; font-weight:800; letter-spacing:-.01em}
.logo__t span{display:block; font-size:.63rem; letter-spacing:.18em; color:#8b988f; text-transform:uppercase}

/* ---------- hero ---------- */
.hero{overflow:visible; background:
    radial-gradient(58% 74% at 82% 6%,rgba(224,54,42,.10),transparent 60%),
    radial-gradient(60% 75% at 2% 100%,rgba(18,35,61,.07),transparent 62%),
    linear-gradient(180deg,var(--cool),#fff 62%);
  border-bottom:1px solid var(--line); padding:64px 0 72px; overflow:hidden}
.hero__in{display:grid; grid-template-columns:.82fr 1.42fr; gap:30px; align-items:center}
.eyebrow{display:inline-block; background:#fff; border:1px solid var(--line); color:var(--accent-ink); border-radius:999px;
  padding:.32rem .9rem; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.3rem)}
.hero h1 em{font-style:normal; color:var(--lime)}
.hero__lead{font-size:1.14rem; color:#3d4a41; max-width:44ch; margin-bottom:18px}
.hero__lead b{color:var(--ink)}
.hl{list-style:none; padding:0; margin:0 0 28px; max-width:46ch}
.hl li{display:flex; gap:12px; align-items:flex-start; padding:11px 14px; margin-bottom:8px; border-radius:12px;
  background:rgba(255,255,255,.72); border:1px solid var(--line); font-size:1rem}
.hl li:last-child{margin-bottom:0}
.hl svg{flex:0 0 26px; width:26px; height:26px; margin-top:1px}
.hl b{color:var(--ink)}
.hero__acts{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.hero__acts small{display:block; font-size:.82rem; color:#7d8a80}

/* εικόνα προϊόντος */
@media (min-width:1100px){ .hero .shot{margin-right:-56px} }
.shot{position:relative}
.shot__cap{text-align:center; font-size:.78rem; color:#8b988f; font-style:italic; margin-top:8px}
.badge{position:absolute; right:6%; top:4%; background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow); border-radius:12px; padding:10px 14px; font-size:.82rem; line-height:1.3}
.badge b{display:block; color:var(--ink); font-size:1.05rem}

/* ---------- λωρίδα αριθμών ---------- */
.kpi{background:var(--ink); color:#c8d6c0}
.kpi__in{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; padding:30px 22px}
.kpi b{display:block; color:var(--lime); font-size:2rem; font-weight:800; line-height:1; letter-spacing:-.03em}
.kpi span{display:block; font-size:.88rem; margin-top:8px}

/* ---------- ενότητες ---------- */
.sec{padding:76px 0}
.sec--alt{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.h2{font-size:clamp(1.6rem,3vw,2.2rem); text-align:center}
.sub{text-align:center; max-width:64ch; margin:0 auto 44px; font-size:1.04rem}
.h2--l,.sub--l{text-align:left}
.sub--l{margin-left:0}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center}

.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow)}
.card--warn{border-top:4px solid var(--warn)}
.card h3{font-size:1.12rem}
.card p{margin:0; font-size:.97rem}

/* πώς δουλεύει */
.flow{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:36px; overflow-x:auto}
.fl-b rect{fill:var(--bg-alt); stroke:#c9d6e6; stroke-width:1.5}
.fl-b--hi rect{fill:#fff; stroke:var(--lime); stroke-width:2.5}
.fl-t{font:800 15px/1 sans-serif; fill:var(--ink)}
.fl-s{font:400 12px/1 sans-serif; fill:#66756b}
.fl-a path{stroke:#b3c3a8; stroke-width:2; fill:none; stroke-linecap:round}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.steps li{display:flex; gap:14px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px}
.steps__n{flex:0 0 36px; height:36px; border-radius:50%; background:var(--lime); color:var(--on-accent); display:grid; place-items:center; font-weight:800}
.steps h3{font-size:1.05rem; margin-bottom:.3em}
.steps p{margin:0; font-size:.95rem}

/* χαρακτηριστικά */
.feats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.feat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.feat svg{width:34px; height:34px; margin-bottom:12px}
.feat h3{font-size:1.02rem; margin-bottom:.3em}
.feat p{margin:0; font-size:.93rem}

/* επισκευή ή αντικατάσταση */
.roads{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start}
.road{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px}
.road--hi{border:2px solid var(--lime); box-shadow:var(--shadow)}
.road__tag{position:absolute; top:-13px; left:26px; background:var(--lime); color:var(--on-accent); font-size:.72rem;
  font-weight:800; letter-spacing:.06em; padding:.25rem .8rem; border-radius:999px}
.road h3{font-size:1.2rem}
.road__w{font-weight:700; color:var(--ink); margin-bottom:.4em; font-size:.95rem}
.road ul{margin:0 0 16px; padding-left:1.1rem; font-size:.96rem}
.road li{margin-bottom:.35em}
.road__note{font-size:.88rem; color:#6f7d73; border-left:3px solid var(--lime-soft); padding-left:12px; margin-bottom:20px}

/* σύγκριση */
.cmp{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.cmp__c{border-radius:var(--radius); padding:26px; border:1px solid var(--line); background:#fff}
.cmp__c--new{background:var(--ink); border-color:var(--ink); color:#c8d6c0}
.cmp__h{display:flex; align-items:baseline; gap:10px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.cmp__c--new .cmp__h{border-bottom-color:rgba(255,255,255,.15)}
.cmp__h b{font-size:1.15rem; color:var(--ink)}
.cmp__c--new .cmp__h b{color:#fff}
.cmp__h span{font-size:.78rem; color:#8b988f; letter-spacing:.08em; text-transform:uppercase}
.cmp ul{list-style:none; margin:0; padding:0}
.cmp li{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:.95rem; align-items:flex-start}
.cmp__c--new li{border-bottom-color:rgba(255,255,255,.12)}
.cmp li:last-child{border-bottom:0}
.cmp li i{flex:0 0 20px; font-style:normal; font-weight:800}
.cmp__c--old li i{color:var(--warn)}
.cmp__c--new li i{color:var(--lime)}
.cmp li u{text-decoration:none; color:#8b988f; display:block; font-size:.85rem}
.cmp__c--new li u{color:#95a68d}

/* τεχνικά — κάρτες αντί για πίνακα */
.specs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.spec{background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; display:flex; gap:14px}
.spec svg{flex:0 0 28px; width:28px; height:28px; margin-top:2px}
.spec b{display:block; color:var(--ink); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:5px}
.spec span{font-size:.95rem; line-height:1.5}
.specnote{text-align:center; font-size:.84rem; color:#7d8a80; margin-top:22px}

/* διάταξη πίσω όψης με ετικέτες */
.ports{display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:center}
.portlist{list-style:none; padding:0; margin:0}
.portlist li{display:flex; gap:12px; padding:14px 16px; margin-bottom:8px; border-radius:12px;
  background:#fff; border:1px solid var(--line); font-size:.96rem}
.portlist li:last-child{margin-bottom:0}
.portlist em{flex:0 0 28px; height:28px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center;
  font-style:normal; font-weight:800; font-size:.82rem}
.portlist b{color:var(--ink); display:block}

/* FAQ */
.faq{max-width:840px; margin:0 auto}
.faq details{background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:12px; overflow:hidden}
.faq details[open]{border-color:var(--lime); box-shadow:var(--shadow)}
.faq summary{cursor:pointer; padding:18px 22px; font-weight:700; color:var(--ink); list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:0 0 28px; height:28px; border-radius:50%; background:var(--cool);
  color:var(--lime); display:grid; place-items:center; font-size:1.2rem; font-weight:800; line-height:1}
.faq details[open] summary::after{content:"–"; background:var(--lime); color:var(--on-accent)}
.faq p{padding:0 22px 20px; margin:0; font-size:.97rem}

/* ---------- επικοινωνία ---------- */
.cta{background:var(--ink); color:#c8d6c0; padding:76px 0}
.cta h2{color:#fff}
.cta .sub{color:#a9baa1}
.callbox{display:grid; grid-template-columns:.9fr 1.1fr; gap:34px; align-items:start}
.phone{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius:var(--radius); padding:30px; text-align:center}
.phone__l{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#95a68d; margin-bottom:8px}
.phone__n{display:block; color:#fff; font-size:clamp(1.7rem,4vw,2.5rem); font-weight:800; text-decoration:none; letter-spacing:-.02em}
.phone__n2{display:block; color:var(--lime); font-size:1.25rem; font-weight:700; text-decoration:none; margin-top:4px}
.phone__h{font-size:.9rem; margin:12px 0 18px}
.phone__alt{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.form{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius:var(--radius); padding:26px}
.form__t{color:#fff; font-weight:700; margin-bottom:16px}
.form label{display:block; margin-bottom:14px; font-size:.85rem; color:#a9baa1}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form input,.form select,.form textarea{width:100%; margin-top:6px; padding:.72rem .85rem; border-radius:10px;
  border:1px solid rgba(255,255,255,.22); background:#fff; color:var(--ink); font:inherit; font-size:.95rem}
.form textarea{resize:vertical}
.chk{display:flex !important; gap:10px; align-items:flex-start; font-size:.85rem !important}
.chk input{width:auto; margin-top:4px}
.okmsg{text-align:center; color:var(--lime); font-weight:700; margin-top:14px}
.okmsg em{color:#95a68d; font-weight:400; font-size:.85em}

/* ---------- footer ---------- */
.foot{background:#0c1a2f; color:#93a5c0; padding:44px 0 22px; font-size:.92rem}
.foot__in{display:grid; grid-template-columns:1.35fr .8fr .9fr 1.5fr; gap:26px}
.foot__b{color:#fff; font-size:.76rem; letter-spacing:.14em; margin-bottom:.7em}
.foot a{color:#c9d7ea; text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot__cp{text-align:center; margin:32px 0 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); font-size:.78rem; color:#68789a}

@media (max-width:1000px){
  .hero__in,.grid2,.roads,.cmp,.ports,.callbox{grid-template-columns:1fr}
  .feats,.specs{grid-template-columns:1fr 1fr}
  .kpi__in{grid-template-columns:1fr 1fr}
  .grid3,.steps{grid-template-columns:1fr}
  .nav__links{display:none}
  .foot__in{grid-template-columns:1fr}
}
@media (max-width:600px){
  .sec{padding:54px 0}
  .feats,.specs,.form__row{grid-template-columns:1fr}
  .kpi__in{grid-template-columns:1fr; gap:16px}
  .hero__acts{flex-direction:column; align-items:stretch}
  .hero__acts .btn{width:100%}
}