/* ── Νέα μέρη της σελίδας (βίντεο, «γιατί», δίπλα-δίπλα, αντικατάσταση)
   ── και οι εναλλακτικές παλέτες χρωμάτων.
   Η μπάρα χρωμάτων κάτω-κάτω είναι ΜΟΝΟ για προεπισκόπηση και φεύγει πριν το live. */

/* ============ ΒΙΝΤΕΟ ΜΕ ΧΡΟΝΟΜΕΤΡΟ ============ */
.clip{padding:70px 0; background:linear-gradient(180deg,#fff,var(--cool))}
.clip__in{display:grid; grid-template-columns:.95fr 1.05fr; gap:46px; align-items:center}
.clip__steps{list-style:none; counter-reset:c; margin:22px 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.clip__steps li{display:flex; align-items:center; gap:10px; background:var(--lime-soft); color:var(--ink);
  border-radius:999px; padding:.45rem 1rem .45rem .45rem; font-size:.94rem; font-weight:600}
.clip__steps span{width:26px; height:26px; border-radius:50%; background:var(--lime); color:var(--on-accent);
  display:grid; place-items:center; font-weight:800; font-size:.85rem}
.clip__note{font-size:.93rem; color:#7d8a80; margin:0}

.video{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(160deg,var(--bg-alt),#fff); box-shadow:var(--shadow)}
.video__in{aspect-ratio:16/9; display:grid; place-items:center; text-align:center; padding:24px}
.video__play{width:78px; height:78px; border-radius:50%; background:var(--lime); display:grid; place-items:center;
  box-shadow:0 12px 28px rgba(24,36,26,.25); margin-bottom:16px; transition:transform .15s ease}
.video:hover .video__play{transform:scale(1.06)}
.video__play svg{width:30px; height:30px; margin-left:5px}
.video__t{color:var(--ink); font-weight:800; font-size:1.1rem; margin:0}
.video__s{font-size:.88rem; margin:.4em 0 0; color:#7d8a80; max-width:38ch}
.video__timer{position:absolute; right:14px; top:14px; background:var(--ink); color:#fff;
  font-weight:800; font-size:.9rem; padding:.35rem .8rem; border-radius:999px; letter-spacing:.03em}

/* ============ ΓΙΑΤΙ ΤΟ ΧΡΕΙΑΖΕΣΤΕ ============ */
.why{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px 26px; box-shadow:var(--shadow); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease}
.why::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--warn)}
.why:hover{transform:translateY(-3px); box-shadow:0 22px 46px rgba(24,36,26,.14)}
.why__n{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px;
  background:var(--cool); color:var(--lime); font-weight:800; font-size:.95rem; margin-bottom:14px}
.why h3{font-size:1.14rem; margin-bottom:.45em}
.why p{margin:0; font-size:.97rem}
.why__k{margin-top:14px !important; padding-top:12px; border-top:1px dashed var(--line);
  font-weight:700; color:var(--ink); font-size:.92rem !important}

/* ============ ΔΙΠΛΑ-ΔΙΠΛΑ ============ */
.vs{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow)}
.vs__head,.vs__row{display:grid; grid-template-columns:1fr 1.25fr 1.25fr; align-items:stretch}
.vs__head{background:var(--bg-alt); border-bottom:2px solid var(--line)}
.vs__head span{padding:16px 20px; font-weight:800; color:var(--ink); font-size:1.02rem; display:flex; align-items:baseline; gap:8px}
.vs__head em{font-style:normal; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#8b988f; font-weight:600}
.vs__head .vs__c--new{background:var(--ink); color:#fff}
.vs__head .vs__c--new em{color:var(--lime)}
.vs__row{border-top:1px solid var(--line)}
.vs__row:nth-child(even){background:#f8fafd}
.vs__l{padding:16px 20px; font-weight:700; color:var(--ink); font-size:.93rem; display:flex; align-items:center}
.vs__c{padding:16px 20px; display:flex; gap:11px; align-items:center; font-size:.97rem}
.vs__c i{flex:0 0 22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-weight:800; font-size:.8rem}
.vs__c--old{color:#7e8a80}
.vs__c--old i{background:#e8edf4; color:#8493aa}
.vs__c--new{color:var(--ink); font-weight:600; background:#f7fafd}
.vs__c--new i{background:var(--lime); color:var(--on-accent)}
.vs__row:last-child .vs__c--new{border-bottom-right-radius:var(--radius)}

/* ============ ΑΝΤΙΚΑΤΑΣΤΑΣΗ ============ */
.pitch{background:#fff; border:1px solid var(--line); border-left:5px solid var(--lime); border-radius:var(--radius); padding:34px; box-shadow:var(--shadow)}
.pitch h3{font-size:1.25rem; margin-bottom:.7em}
.pitch__l{list-style:none; padding:0; margin:0 0 20px}
.pitch__l li{position:relative; padding:11px 0 11px 34px; border-bottom:1px solid var(--line); font-size:1rem}
.pitch__l li:last-child{border-bottom:0}
.pitch__l li::before{content:"✓"; position:absolute; left:0; top:9px; width:22px; height:22px; border-radius:50%;
  background:var(--lime); color:var(--on-accent); display:grid; place-items:center; font-size:.78rem; font-weight:800}
.pitch__f{font-size:.94rem; color:#7d8a80; border-left:3px solid var(--lime-soft); padding-left:14px}

/* ============ responsive των νέων μερών ============ */
@media (max-width:1000px){
  .clip__in{grid-template-columns:1fr; gap:28px}
  .vs__head,.vs__row{grid-template-columns:1fr}
  .vs__head span:first-child{display:none}
  .vs__l{background:var(--bg-alt); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; padding:10px 20px}
  .vs__c{padding:12px 20px}
  .vs__head .vs__c--new{border-radius:0}
}
@media (max-width:600px){
  .clip{padding:52px 0}
  .pitch{padding:24px}
}


/* ============ FAQ — ξεχωριστή απάντηση ============ */
.faq details[open] summary{border-bottom:1px solid var(--line); background:var(--cool)}
.faq p{padding:18px 22px 20px !important; margin:0; font-size:1rem !important; color:var(--ink);
  background:#fff; border-left:4px solid var(--lime)}
.faq details[open]{border-color:var(--lime)}


/* ============ σήμα «Powered by Aineas» (κάτω δεξιά στο υποσέλιδο) ============ */
.foot{position:relative}
.powered{position:absolute; right:24px; bottom:20px; display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:999px;
  padding:7px 14px 7px 8px; color:#e7edf6; font-size:.84rem; font-weight:600; letter-spacing:.01em}
.powered img{width:22px; height:auto; flex:0 0 22px; display:block}
@media (max-width:900px){
  .powered{position:static; margin:18px auto 0; display:flex; width:max-content}
}


/* ============ φωτογραφίες προϊόντος ============ */
.shot{position:relative; isolation:isolate}

/* Φως LED πίσω ΜΟΝΟ από τη συσκευή του hero.
   Τρία επικαλυπτόμενα ακτινωτά φώτα σε διαφορετικά σημεία = ακανόνιστο σχήμα,
   χωρίς κύκλο/ορθογώνιο και χωρίς όρια· σβήνει μόνο του και μένει τοπικό. */
.hero .shot::before{content:""; position:absolute; inset:-16% -10% -20%; z-index:-1;
  background:
    radial-gradient(40% 48% at 30% 40%, rgba(224,54,42,.60), transparent 72%),
    radial-gradient(32% 40% at 68% 34%, rgba(255,132,64,.45), transparent 74%),
    radial-gradient(48% 42% at 54% 74%, rgba(224,54,42,.34), transparent 76%);
  filter:blur(58px); opacity:.85;
  animation:drift 20s ease-in-out infinite alternate}

@keyframes drift{
  from{transform:translate3d(-2%,-1.5%,0) scale(1)}
  to{transform:translate3d(2.5%,1.5%,0) scale(1.09)}
}

/* κομμένο φόντο — η συσκευή κάθεται απευθείας στη σελίδα */
.shot__img{display:block; width:100%; height:auto;
  filter:drop-shadow(0 22px 26px rgba(18,35,61,.22));
  transition:transform .4s cubic-bezier(.2,.7,.25,1), filter .4s ease}

/* έρχεται μπροστά όταν πας από πάνω */
.shot:hover .shot__img{transform:scale(1.07); filter:drop-shadow(0 30px 34px rgba(18,35,61,.28))}
.hero .shot:hover::before{opacity:1}



@media (prefers-reduced-motion:reduce){
  .hero .shot::before{animation:none}
  .shot__img{transition:none}
}

.vsshot{margin:0 0 34px; text-align:center}
.vsshot img{display:block; width:100%; height:auto; border-radius:var(--radius);
  box-shadow:0 26px 60px rgba(18,35,61,.16)}
.vsshot figcaption{margin-top:12px; font-size:.9rem; color:#7b8798; font-style:italic}


/* σε μικρές οθόνες το φως μαζεύεται, να μη σπρώχνει τη σελίδα πλάγια */
@media (max-width:760px){
  .hero .shot::before{inset:-8% -4% -12%; filter:blur(40px)}
}


/* ============ σήματα συμβατότητας στο hero ============ */
.compat{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; padding:0}
.compat span{display:inline-flex; align-items:center; gap:7px; background:var(--tint);
  border:1px solid #f3d3d0; color:var(--accent-ink); border-radius:999px;
  padding:.34rem .85rem; font-size:.82rem; font-weight:700; letter-spacing:.01em}
.compat span::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--lime)}


/* ============ βήματα: μεγάλος αριθμός + ετικέτα «Βήμα ν» ============ */
.steps__n{flex:0 0 52px !important; height:52px !important; font-size:1.45rem !important;
  box-shadow:0 8px 18px rgba(224,54,42,.28)}
.steps__l{display:block; font-size:1rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lime); margin-bottom:6px}
.steps li{gap:18px !important; padding:24px !important}
.steps h3{font-size:1.18rem !important}


/* ============ μετάβαση: παλιό WebBox ➜ theSolarlink. ============ */
.shot{padding:0}
.swap{display:grid; grid-template-columns:29% 20px 1fr; align-items:center}
.swap__old{width:112%; max-width:none; height:auto; align-self:center;
  filter:saturate(.6) drop-shadow(0 14px 18px rgba(18,35,61,.18));
  transition:transform .4s ease, opacity .4s ease}
.swap__arrow{justify-self:center; font-size:1.5rem; font-weight:800; color:var(--lime);
  animation:nudge 2.6s ease-in-out infinite}
.swap__new{width:126%; max-width:none; height:auto; position:relative; z-index:1; margin-left:-22%}
.shot:hover .swap__old{transform:translateX(-6px)}

.swap__tag{position:absolute; left:0; top:0; z-index:2; background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:999px; padding:.32rem .85rem;
  font-size:.75rem; font-weight:800; box-shadow:0 8px 20px rgba(18,35,61,.12)}
.swap__names{display:grid; grid-template-columns:29% 20px 1fr; margin:6px 0 0; font-size:.8rem}
.swap__names span{text-align:center; color:#8b98a5; font-weight:600}
.swap__names b{grid-column:3; text-align:center; color:var(--lime); font-weight:800}

@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){ .swap__arrow{animation:none} }
@media (max-width:900px){
  .swap{grid-template-columns:34% 26px 1fr}
  .swap__names{grid-template-columns:34% 26px 1fr; font-size:.72rem}
  .swap__tag{display:none}
}


/* ============ επιλογή γλώσσας ============ */
.lang{display:inline-flex; gap:2px; margin-left:auto; border:1px solid var(--line); border-radius:999px; padding:3px}
.lang a{display:inline-block; padding:.28rem .6rem; border-radius:999px; font-size:.78rem; font-weight:800;
  color:#8494a8; text-decoration:none; letter-spacing:.04em}
.lang a:hover{color:var(--ink)}
.lang a.lang--on{background:var(--ink); color:#fff}
.nav__links{margin-left:0 !important}
@media (max-width:1000px){ .lang{margin-left:auto} }


/* ============ nav σε μικρές οθόνες (η μπάρα γλωσσών χρειάζεται χώρο) — nav mobile fix ============ */
@media (max-width:760px){
  .nav__in{flex-wrap:wrap; height:auto; padding:10px 0; gap:10px}
  .nav__tel{display:none}
  .logo__t b{font-size:1.05rem}
  .lang{margin-left:auto}
  .nav .btn--sm{padding:.45rem .9rem; font-size:.84rem}
}


/* ============ νομική σημείωση σημάτων (4η στήλη υποσέλιδου, δίπλα στους ΣΥΝΔΕΣΜΟΥΣ) ============ */
.tm{margin:0; font-size:inherit; line-height:1.62; color:inherit; max-width:none}
.tm sup{font-size:.75em}
@media (max-width:900px){ .tm{margin-bottom:18px; max-width:none} }