/* ============================================
   EzCar — style.css (ΚΟΙΝΟ για όλες τις σελίδες)
   Εδώ ΜΟΝΟ: γραμματοσειρές, χρώματα, h1–h4, p, κουμπιά,
   header / μενού (desktop + κινητό), footer και τα κοινά components.
   Οι γραμματοσειρές φορτώνονται ΜΙΑ φορά από το includes/head.php.
   Τα στυλ των επιμέρους σελίδων είναι στο css/custom.css.
   ============================================ */
/* ============================================
   EzCar — Light Green SaaS Template 2026
   Inspired by Foton SaaS · content by gocars structure
   ============================================ */
/* ── Eyebrow / pill ── */
/* ── Buttons ── */
/* ══════════ TOP BAR ══════════ */
/* ══════════ HEADER ══════════ */
/* ══════════ HERO (home) ══════════ */
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-24px) scale(1.08)}}
/* Hero visual — app mock */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
/* ══════════ PAGE HERO (inner pages) ══════════ */
/* Hero stat chips */
.pg-chip b{font-weight:600!important;display:block;font-family:var(--f-display);font-size:1.25rem;color:var(--ink);line-height:1.1}
/* ══════════ SPECS / HIGHLIGHTS ══════════ */
/* ══════════ LOGO CAROUSEL (marquee) ══════════ */
@keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ══════════ SECTIONS ══════════ */
/* Feature grid */
/* ══════════ ALTERNATING FEATURE ROWS ══════════ */
/* notification mock */
/* price list mock */
/* dashboard mock (software page) */
/* ══════════ METRICS (animated progress rings) ══════════ */
/* ══════════ FEATURE TABS ══════════ */
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* ══════════ CAPABILITIES LIST (software) ══════════ */
/* ══════════ CLIENTS ══════════ */
/* ══════════ BENEFITS ══════════ */
/* ══════════ DEMO / FORM CTA ══════════ */
/* form states / alerts */
/* ══════════ CONTACT ══════════ */
/* ══════════ FINAL CTA ══════════ */
/* ── CTA (light, minimal) ── */
/* ══════════ FEATURES PAGE ══════════ */
/* soft accent wash that appears on hover */
/* big watermark number */
/* ══════════ CLIENT CARDS ══════════ */
/* ══════════ TESTIMONIALS ══════════ */
/* ══════════ FOOTER ══════════ */
.footer{position:relative;overflow:hidden;background:var(--surface);border-top:1px solid var(--line);padding:72px 0 0}
.footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--green) 22%,var(--lime) 50%,var(--green) 78%,transparent)
}
.fglow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.fglow-a{width:520px;height:520px;top:-240px;left:-160px;background:radial-gradient(circle,rgba(161,202,66,.30),transparent 65%)}
.fglow-b{width:560px;height:560px;top:-260px;right:-180px;background:radial-gradient(circle,rgba(61,92,125,.14),transparent 65%)}
.fgrid2{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:52px}
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.fchips span{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-full);background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);font-family:var(--f-display);font-weight:700;
  font-size:.76rem;color:var(--navy)
}
.fchips i{font-size:.7rem;color:var(--green)}
.socials a{
  border:1px solid var(--line);box-shadow:var(--shadow-sm);width:40px;height:40px;border-radius:11px;
  background:var(--tint);color:var(--green-700);display:grid;place-items:center;transition:.3s var(--ease)
}
.socials a:hover{border-color:transparent;box-shadow:var(--glow);background:var(--navy);color:#fff;transform:translateY(-3px)}
.footer h4{position:relative;padding-bottom:12px;font-family:var(--f-display);font-size:1rem;color:var(--ink);margin-bottom:18px}
.footer h4::after{
  content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--green),var(--lime))
}
.flinks a{position:relative;padding-left:18px;font-size:.92rem;color:var(--body);display:inline-flex;align-items:center;gap:8px;transition:.25s}
.flinks a::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;
  border-radius:var(--r-full);background:var(--green);transition:.3s var(--ease)
}
.flinks a:hover::before{width:15px;background:linear-gradient(90deg,var(--green),var(--lime))}
.flinks .ext i{font-size:.62rem;color:var(--muted);margin-left:6px;transition:.3s var(--ease)}
.flinks .ext:hover i{color:var(--green-700)}
.fcontact .fi{
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;width:38px;height:38px;border-radius:11px;
  flex-shrink:0;background:var(--tint);color:var(--green);display:grid;place-items:center;font-size:.85rem
}
.fcontact .fi::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.28),transparent 55%)}
.fcontact:nth-of-type(2) .fi{background:linear-gradient(140deg,var(--green),var(--green-600));color:var(--navy)}
.fcontact:nth-of-type(3) .fi{background:linear-gradient(140deg,var(--coral),#ff6f4a)}
.fcontact strong{margin-bottom:1px;display:block;font-family:var(--f-display);color:var(--ink);font-size:.9rem}
.fbottom{
  position:relative;border-top:1px solid var(--line);padding:22px 0;display:flex;
  justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.84rem;
  color:var(--muted)
}
.fmade{
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:var(--r-full);background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);font-family:var(--f-display);font-weight:700;
  font-size:.78rem;color:var(--navy)
}
.fmade i{color:var(--coral);animation:fheart 1.8s ease-in-out infinite}
@keyframes fheart{0%,100%{transform:scale(1)}12%{transform:scale(1.28)}24%{transform:scale(1)}}
.fbot-links{display:inline-flex;gap:18px}
.fbot-links a{color:var(--muted);transition:.25s}
.fbot-links a:hover{color:var(--green-700)}
.fmark{
  position:relative;pointer-events:none;user-select:none;text-align:center;font-family:var(--f-display);
  font-weight:800;letter-spacing:-.045em;line-height:.78;font-size:clamp(5.5rem,19vw,16rem);color:transparent;
  -webkit-text-stroke:2px rgba(36,62,90,.08);margin:6px 0 -.30em
}
@media(max-width:560px){
  .fbottom{flex-direction:column;text-align:center}
  .fmark{-webkit-text-stroke-width:1.5px}
}
/* scroll top */
/* body lock for mobile menu */
/* reveal */
/* ══════════ RESPONSIVE ══════════ */
/* ═══════════ index3 — Foton SaaS Home layout ═══════════ */
/* ── Hero: σταθερό φόντο-φωτογραφία, κείμενο κέντρο ── */
.hero3{position:relative;overflow:visible}
.hero3-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  animation:kburns 24s ease-in-out infinite alternate;will-change:transform
}
.hero3-head{position:relative;z-index:2;text-align:center;padding-top:0px;max-width:860px}
.hero3-head h1{color:#fff;margin:22px 0 18px;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero3-head h1 .grad{
  filter:drop-shadow(0 2px 14px rgba(161,202,66,.35));
  background:linear-gradient(110deg,var(--green) 0%,var(--lime) 32%,#eaffc2 50%,var(--lime) 68%,var(--green) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  animation:gradShine 4.5s linear 1.4s infinite
}
.hero3-head .lead{color:rgba(255,255,255,.88);max-width:600px;margin:0 auto 34px}
.hero3-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.eyebrow.glass{
  color:#eaf5d6;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px)
}
.eyebrow.glass i{color:var(--green)}
.btn-glass{
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.btn-glass:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)}
/* entrance εμφάνιση στο load (τίτλος + κάρτες ανεβαίνουν σταδιακά) */
[data-load]{opacity:0;transform:translateY(46px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
body.loaded [data-load]{opacity:1;transform:none}
body.loaded [data-load="1"]{transition-delay:.05s}
body.loaded [data-load="2"]{transition-delay:.15s}
/* οι κάρτες μπαίνουν με το ξεχωριστό CSS `translate` (GPU) — δεν αγγίζει ποτέ το transform των θέσεων */
.scard{
  opacity:0;translate:0 110px;animation:cardIn 1.15s var(--ease) both;will-change:transform,translate;
  position:absolute;left:50%;top:0;width:min(620px,72%);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 40px 90px rgba(17,31,46,.35);
  transition:transform 1.15s var(--ease),filter 1.15s var(--ease),box-shadow 1.15s var(--ease)
}
.scard.pos-c{animation-delay:.45s}
.scard.pos-l{animation-delay:.62s}
.scard.pos-r{animation-delay:.78s}
@keyframes cardIn{to{opacity:1;translate:0 0}}
/* ── Στοίβα screenshots: μεγάλη μπροστά, δύο πίσω — εναλλάσσονται μόνες τους ── */
.stack{position:relative;z-index:3;max-width:980px;margin:44px auto -140px;height:392px!important;padding:0 28px;perspective:1400px}
.scard-body{position:relative;aspect-ratio:16/10.6;overflow:hidden;background:var(--surface)}
.scard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.scard .mockfall{display:none}
.scard.noimg img{display:none}
.scard.noimg .mockfall{display:block;position:absolute;inset:0}
.pos-c{
  z-index:3;transform:translateX(-50%) translateY(0) scale(1) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition-timing-function:cubic-bezier(.3,1.32,.32,1)
}
.pos-l{transform:translateX(-96%) translateY(9%) scale(.8);z-index:1;filter:brightness(.9) saturate(.9)}
.pos-r{transform:translateX(-4%) translateY(9%) scale(.8);z-index:1;filter:brightness(.9) saturate(.9)}
.pos-l,.pos-r{box-shadow:0 26px 60px rgba(17,31,46,.28)}
.stack:hover .pos-c{box-shadow:0 48px 110px rgba(17,31,46,.4)}
/* mock extra γραφικά (κύμα, δαχτυλίδι) */
.mf-wave{position:relative;margin-top:18px}
.mf-wave svg{width:100%;height:86px;display:block;border-radius:12px}
.wv-chip{
  position:absolute;top:-8px;right:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:8px 14px;box-shadow:var(--shadow-md);text-align:center
}
.wv-chip b{font-family:var(--f-display);font-weight:800;color:var(--ink);display:block;line-height:1.05;font-size:1.05rem}
.wv-chip small{color:var(--muted);font-size:.68rem}
.mf-ring{
  display:flex;align-items:center;gap:14px;margin-top:16px;padding:12px 16px;border:1px solid var(--line-2);
  border-radius:14px;background:var(--tint-2)
}
.mf-ring svg{width:58px;height:58px;flex-shrink:0}
.mf-ring b{font-family:var(--f-display);font-weight:800;color:var(--ink);font-size:1.1rem}
.mf-ring small{color:var(--muted)}
/* shared browser-frame bar + chips + mock pieces */
.shot-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-2);background:var(--tint-2)}
.shot-bar .dots{display:flex;gap:6px}
.shot-bar .dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.shot-bar .dots i:first-child{background:var(--coral)}
.shot-bar .dots i:nth-child(2){background:var(--lime)}
.shot-bar .dots i:last-child{background:var(--green)}
.shot-url{
  font-size:.75rem;color:var(--muted);background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-full);padding:4px 14px;font-family:var(--f-display);font-weight:600
}
.mockfall{padding:22px 24px 26px}
.mf-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.mf-h b{font-family:var(--f-display);font-weight:800;color:var(--ink);font-size:1.02rem}
.chip{
  font-family:var(--f-display);font-weight:700;font-size:.72rem;color:var(--green-700);background:var(--tint);
  border:1px solid var(--line);border-radius:var(--r-full);padding:4px 12px
}
.chip.ok{color:#3d6b1f;background:#e9f6d4;border-color:#d3ecac}
.mf-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.mf-cal i{font-style:normal;font-size:.68rem;color:var(--muted);text-align:center;font-family:var(--f-display);font-weight:700}
.mf-cal b{height:34px;border-radius:9px;background:var(--tint-2);border:1px solid var(--line-2)}
.mf-cal b.s{background:var(--tint)}
.mf-cal b.g{background:linear-gradient(135deg,var(--green),var(--lime));border-color:transparent}
.mf-cal b.c{background:var(--coral-soft);border-color:#ffd6c8}
.mf-fleet{display:grid;gap:10px}
.mf-car{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line-2);border-radius:14px;background:var(--tint-2)}
.mc-ic{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:.85rem;
  flex-shrink:0;background:linear-gradient(135deg,var(--green),var(--green-600))
}
.mc-ic.n{background:linear-gradient(135deg,var(--navy-400),var(--navy))}
.mc-ic.c{background:linear-gradient(135deg,var(--coral),#e06a48)}
.mf-car b{font-family:var(--f-display);font-weight:700;color:var(--ink);font-size:.9rem;display:block;line-height:1.2}
.mf-car small{color:var(--muted);font-size:.74rem}
.mf-car em{margin-left:auto;font-style:normal;font-size:.7rem}
.mf-car em.ok{color:var(--green-600)}
.mf-car em.bk{color:var(--coral)}
.mf-inv{display:grid;gap:10px;margin-bottom:16px}
.mf-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line-2);border-radius:12px}
.mf-row span{height:9px;border-radius:6px;background:var(--tint);flex:1;max-width:60%}
.mf-row span.w2{max-width:44%}
.mf-row span.w3{max-width:52%}
.mf-row em{
  margin-left:auto;font-style:normal;font-family:var(--f-display);font-weight:700;font-size:.7rem;
  border-radius:var(--r-full);padding:3px 11px
}
.mf-row em.ok{color:#3d6b1f;background:#e9f6d4}
.mf-row em.pd{color:#c0492a;background:var(--coral-soft)}
.mf-bars{display:flex;align-items:flex-end;gap:10px;height:96px}
.mf-bars.tall{height:150px}
.mf-bars i{flex:1;height:var(--h);border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,var(--lime),var(--green));opacity:.9}
.mf-bars i:nth-child(even){background:linear-gradient(180deg,#c9d8e8,var(--navy-400));opacity:.5}
.chip-float .ic{
  background:linear-gradient(135deg,var(--green),var(--lime));width:38px;height:38px;border-radius:11px;
  display:grid;place-items:center;font-size:.95rem;color:#fff
}
.chip-float strong{font-weight:800;display:block;font-family:var(--f-display);font-size:1.05rem;color:var(--ink);line-height:1.1}
.cf-1{bottom:-24px;top:6%;left:-8%;animation:float 6s ease-in-out infinite}
.cf-2{top:30px;bottom:8%;right:-6%;animation:float 8s ease-in-out infinite}
@keyframes cfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* ── Responsive ── */
@media(max-width:1024px){
  .hero3-head{padding-top:64px}
  .stack{height:420px;margin-bottom:-130px}
  .scard{width:min(580px,80%)}
}
@media(max-width:640px){
  .hero3-bg{border-radius:32px}
  .hero3-head{padding-top:52px}
  .hero3-head h1{font-size:clamp(1.9rem,8vw,2.5rem)}
  .hero3-head h1 br{display:none}
  /* στο κινητό ο τίτλος σπάει μόνος του φυσικά */
  .hero3-head .lead{font-size:.95rem;margin-bottom:26px;padding:0 6px}
  .hero3-actions{flex-direction:column;align-items:stretch;padding:0 10px}
  .hero3-actions .btn{width:100%;justify-content:center}
  .hero3-actions .btn-lg{padding:15px 24px}
  .stack{height:330px;margin:36px auto -100px}
  .scard{width:90%}
  .pos-l{transform:translateX(-78%) translateY(10%) scale(.82)}
  .pos-r{transform:translateX(-22%) translateY(10%) scale(.82)}
  .shot-url{max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cf-1{bottom:-16px}
}
@media(prefers-reduced-motion:reduce){
  [data-load],.scard{transition:none!important;animation:none!important}
  [data-load]{opacity:1;transform:none}
  .scard{opacity:1;translate:none}
  .cf-1,.cf-2,.mgi{animation:none}
  .frow-visual[data-anim]{transform:none}
  .hero3-bg,.sg1,.sg2,.eyebrow i,.hero3-head h1 .grad,.cta3::before,.cta3::after{animation:none!important}
  .pos-c .mf-bars i,.pos-c .mf-cal b,.pos-c .mf-car,.pos-c .mf-row,.pos-c .mf-ring svg circle:last-child,.pos-c .wv-chip,.frow-visual.in .cal .d,.frow-visual.in .notif .n,.frow-visual.in .plist .bar i{
    animation:none!important;opacity:1;transform:none
  }
  .hub-ring,.beam .pulse{animation:none!important}
  .c6-glow,.peek .mgi{animation:none!important}
}
/* ── Μετά το hero: το brands καθαρίζει τη στοίβα που «πατάει» πάνω του ── */
/* ── Υποδοχές γραφικών στις εναλλασσόμενες σειρές ──
   Όταν υπάρχει η εικόνα (img/rows/row-1..3.jpg) εμφανίζεται αυτή·
   μέχρι τότε εμφανίζεται το ενσωματωμένο mock. */
.gslot>img{
  display:block;width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:var(--r-lg);
  border:1px solid var(--line);box-shadow:var(--shadow-lg);background:var(--surface)
}
.gslot .mock{display:none}
.gslot.noimg>img{display:none}
.gslot.noimg .mock{display:block}
/* ── Foton-style εμφάνιση γραφικών στις σειρές ──
   Το γραφικό γλιστράει από το πλάι με ελαφρύ scale/κλίση,
   και μετά ξεπροβάλλει το μικρό floating στοιχείο που αιωρείται. */
.frow-visual{position:relative}
.frow-visual[data-anim]{transition:opacity 1s var(--ease),transform 1.25s cubic-bezier(.22,1.18,.32,1)}
.frow-visual[data-anim="left"]{transform:translateX(-70px) translateY(22px) rotate(-1.5deg) scale(.96)}
.frow-visual[data-anim="right"]{transform:translateX(70px) translateY(22px) rotate(1.5deg) scale(.96)}
.mini-g{
  position:absolute;opacity:0;transform:translateY(42px) scale(.7);
  transition:opacity .55s var(--ease) .55s,transform .85s cubic-bezier(.34,1.56,.44,1) .55s;z-index:3
}
.frow-visual.in .mini-g{opacity:1;transform:none}
.mgi{
  display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:12px 18px;box-shadow:var(--shadow-md);
  animation:cfFloat 5.5s ease-in-out 1.8s infinite
}
.mgi .ic{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--navy);
  background:linear-gradient(135deg,var(--green),var(--lime));font-size:.95rem;flex-shrink:0
}
.mgi .ic.n{background:linear-gradient(135deg,var(--navy-400),var(--navy));color:#fff}
.mgi strong{font-family:var(--f-display);font-weight:800;color:var(--ink);display:block;line-height:1.15;font-size:.95rem}
.mgi small{color:var(--muted);font-size:.74rem;white-space:nowrap}
.mg-1{bottom:-20px;right:-14px}
.mg-2{top:-18px;right:-12px}
.mg-3{bottom:-20px;left:-14px}
@media(max-width:640px){
  .mg-1{right:-6px}
  .mg-2{right:-4px}
  .mg-3{left:-6px}
  .mgi{padding:10px 14px}
}
/* ════════════ WOW PASS — τα εγκεκριμένα treatments στο Foton layout ════════════ */
/* Ken Burns στο φόντο του hero */
@keyframes kburns{from{transform:scale(1)}to{transform:scale(1.09)}}
/* Τίτλος: λέξη-λέξη είσοδος + lime shine στο .grad */
.hero3-head h1 .w{display:inline-block;opacity:0;transform:translateY(32px) rotate(3deg);transition:opacity .8s var(--ease),transform .8s var(--ease)}
body.loaded .hero3-head h1 .w{opacity:1;transform:none}
@keyframes gradShine{from{background-position:180% 0}to{background-position:-40% 0}}
body.loaded [data-load="3"]{transition-delay:.6s}
body.loaded [data-load="4"]{transition-delay:.75s}
body.loaded [data-load="5"]{transition-delay:-0.7s}
/* Trust pill σε glass πάνω στη φωτογραφία */
.hero3-trust{
  display:inline-flex!important;margin-top:32px;padding:12px 24px 12px 14px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.24);border-radius:var(--r-full);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);color:rgba(255,255,255,.82);font-size:.88rem;text-align:left
}
.hero3-trust strong{color:#fff}
.hero3-trust .avatars span{border-color:rgba(255,255,255,.6)}
/* Aurora πίσω από τη στοίβα + 3D tilt στη μπροστινή κάρτα */
.stk-glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
.sg1{width:420px;height:420px;left:6%;top:-8%;background:rgba(161,202,66,.35);animation:aurA 13s ease-in-out infinite alternate}
.sg2{width:360px;height:360px;right:5%;bottom:-14%;background:rgba(61,92,125,.35);animation:aurB 16s ease-in-out infinite alternate}
@keyframes aurA{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,26px) scale(1.15)}}
@keyframes aurB{from{transform:translate(0,0) scale(1)}to{transform:translate(-46px,-20px) scale(1.12)}}
/* Eyebrow: παλλόμενη κουκκίδα */
.eyebrow i{animation:eyePulse 2.4s ease-in-out infinite;font-size:.6rem;color:var(--green)}
@keyframes eyePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}
/* Λωρίδα προόδου scroll (όπως στο features.php) */
.pgbar{
  position:fixed;left:0;top:0;height:3px;width:0;z-index:1200;
  background:linear-gradient(90deg,var(--green),var(--lime));border-radius:0 3px 3px 0
}
/* Feature cards: gradient περίγραμμα στο hover */
.fcard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;
  background:linear-gradient(140deg,var(--green),var(--lime) 40%,transparent 75%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask-composite:exclude;opacity:0;transition:opacity .45s var(--ease);pointer-events:none
}
.fcard:hover::after{opacity:1}
/* Σειρές: γυρτά γραφικά με χρωματιστές λάμψεις πίσω τους */
.frow-visual::before{
  content:"";position:absolute;width:70%;height:70%;border-radius:50%;filter:blur(70px);z-index:0;left:15%;
  top:15%;background:rgba(161,202,66,.3)
}
.frow.rev .frow-visual::before{background:rgba(61,92,125,.26)}
.gslot{position:relative;z-index:1}
.frow-visual .mini-g{position:absolute;z-index:3}
.frow .gslot{transform:rotate(-1.2deg);transition:transform .6s var(--ease)}
.frow.rev .gslot{transform:rotate(1.2deg)}
.frow-visual:hover .gslot{transform:rotate(0deg) translateY(-4px)}
/* Metrics v2: gradient δαχτυλίδια με badge, gradient αριθμούς και pill ετικέτες */
.metrics{position:relative;overflow:hidden;padding:110px 0;background:var(--surface)}
.mtx-glow{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:760px;height:420px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(161,202,66,.14),transparent);
  filter:blur(30px);pointer-events:none
}
.metrics .wrap{position:relative}
.meter:hover{border:none;transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#d7e8b4}
.metrics .ring{width:158px;height:158px}
.metrics .ring svg{overflow:visible}
.metrics .track{stroke:var(--tint);stroke-width:10}
.metrics .prog{stroke-width:10;transition:stroke-dashoffset 1.6s var(--ease)}
.meter.m1 .prog{transition-delay:.1s}
.meter.m2 .prog{transition-delay:.28s}
.meter.m3 .prog{transition-delay:.46s}
.meter.m4 .prog{transition-delay:.64s}
.rbadge{
  position:absolute;left:50%;top:-9px;transform:translateX(-50%);z-index:2;width:44px;height:44px;
  border-radius:50%;display:grid;place-items:center;font-size:.95rem;color:#fff;
  border:4px solid var(--surface);box-shadow:var(--shadow-md);transition:.4s var(--ease)
}
.meter:hover .rbadge{transform:translateX(-50%) scale(1.12) rotate(8deg)}
.meter.m1 .rbadge{background:linear-gradient(135deg,var(--navy-400),var(--navy))}
.meter.m2 .rbadge{background:linear-gradient(135deg,var(--green),var(--lime));color:var(--navy)}
.meter.m3 .rbadge{background:linear-gradient(135deg,var(--coral),#ff6f4a)}
.meter.m4 .rbadge{background:linear-gradient(135deg,var(--green-600),var(--green));color:var(--navy)}
.metrics .ring-c b{
  font-size:2.05rem;background:linear-gradient(135deg,var(--navy),var(--navy-400));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
}
.meter.m2 .ring-c b,.meter.m4 .ring-c b{
  background:linear-gradient(135deg,var(--green-700),var(--green));-webkit-background-clip:text;
  background-clip:text
}
.meter.m3 .ring-c b{background:linear-gradient(135deg,#e06a48,var(--coral));-webkit-background-clip:text;background-clip:text}
.metrics .meter-l{
  margin-top:18px;background:var(--tint);border:1px solid var(--line);border-radius:var(--r-full);
  padding:9px 18px;font-family:var(--f-display);font-weight:700;font-size:.85rem;color:var(--ink);
  transition:.4s var(--ease)
}
.meter:hover .meter-l{background:var(--surface);box-shadow:var(--shadow-sm);border-color:#d7e8b4}
.meter.m1 .meter-l i{color:var(--navy-400)}
.meter.m2 .meter-l i{color:var(--green-600)}
.meter.m3 .meter-l i{color:var(--coral)}
.meter.m4 .meter-l i{color:var(--green-700)}
@media(max-width:640px){
  .metrics .ring{width:132px;height:132px}
  .metrics .ring-c b{font-size:1.7rem}
}
/* Tabs: segmented pill με navy ενεργό */
.tabs-nav{
  width:fit-content;max-width:100%;margin-top:0;margin-right:auto;margin-left:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-full);padding:7px;box-shadow:var(--shadow-sm);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px
}
.tab-btn{
  box-shadow:none;display:inline-flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:600;
  font-size:.92rem;padding:11px 22px;border-radius:var(--r-full);cursor:pointer;transition:.3s var(--ease);
  background:var(--surface);border:1px solid var(--line);color:var(--body)
}
.tab-btn:hover{background:var(--tint);transform:none;box-shadow:none;border-color:#cfe3a8;color:var(--green-700)}
/* CTA: aurora drift */
.cta3::before{
  animation:aurA 15s ease-in-out infinite alternate;content:"";position:absolute;width:480px;height:480px;
  border-radius:50%;filter:blur(90px);background:rgba(191,221,114,.22);top:-140px;left:50%;
  transform:translateX(-55%);z-index:0;pointer-events:none
}
.cta3::after{
  animation:aurB 18s ease-in-out infinite alternate;content:"";position:absolute;width:360px;height:360px;
  border-radius:50%;filter:blur(90px);background:rgba(161,202,66,.13);bottom:-140px;right:6%;z-index:0;
  pointer-events:none
}
@media(max-width:640px){
  .hero3-trust{margin-top:26px;font-size:.8rem}
  .frow .gslot,.frow.rev .gslot{transform:none}
}
/* ════ Ζωντανά γραφικά: το περιεχόμενο του mock παίζει κάθε φορά που η κάρτα έρχεται μπροστά ════ */
/* μπάρες γραφήματος: ψηλώνουν από το μηδέν */
.pos-c .mf-bars i{transform-origin:bottom;animation:barGrow .9s var(--ease) both}
.pos-c .mf-bars i:nth-child(1){animation-delay:.55s}
.pos-c .mf-bars i:nth-child(2){animation-delay:.63s}
.pos-c .mf-bars i:nth-child(3){animation-delay:.71s}
.pos-c .mf-bars i:nth-child(4){animation-delay:.79s}
.pos-c .mf-bars i:nth-child(5){animation-delay:.87s}
.pos-c .mf-bars i:nth-child(6){animation-delay:.95s}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* ημερολόγιο: οι κρατήσεις «γεμίζουν» διαδοχικά */
.pos-c .mf-cal b.g,.pos-c .mf-cal b.c{animation:cellPop .5s cubic-bezier(.34,1.5,.5,1) both}
.pos-c .mf-cal b.g:nth-of-type(1),.pos-c .mf-cal b.c:nth-of-type(1){animation-delay:.55s}
.pos-c .mf-cal b:nth-child(10){animation-delay:.6s}
.pos-c .mf-cal b:nth-child(11){animation-delay:.66s}
.pos-c .mf-cal b:nth-child(13){animation-delay:.72s}
.pos-c .mf-cal b:nth-child(16){animation-delay:.78s}
.pos-c .mf-cal b:nth-child(17){animation-delay:.84s}
.pos-c .mf-cal b:nth-child(18){animation-delay:.9s}
.pos-c .mf-cal b:nth-child(21){animation-delay:.96s}
.pos-c .mf-cal b:nth-child(24){animation-delay:1.02s}
.pos-c .mf-cal b:nth-child(26){animation-delay:1.08s}
.pos-c .mf-cal b:nth-child(27){animation-delay:1.14s}
@keyframes cellPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
/* λίστες (στόλος / τιμολόγια): γλιστρούν μέσα μία-μία */
.pos-c .mf-car,.pos-c .mf-row{animation:rowIn .6s var(--ease) both}
.pos-c .mf-car:nth-child(1),.pos-c .mf-row:nth-child(1){animation-delay:.55s}
.pos-c .mf-car:nth-child(2),.pos-c .mf-row:nth-child(2){animation-delay:.68s}
.pos-c .mf-car:nth-child(3),.pos-c .mf-row:nth-child(3){animation-delay:.81s}
@keyframes rowIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
/* δαχτυλίδι πληρότητας: γεμίζει */
.pos-c .mf-ring svg circle:last-child{stroke-dasharray:160 214;stroke-dashoffset:160;animation:ringFill 1.1s var(--ease) .7s both}
@keyframes ringFill{to{stroke-dashoffset:0}}
/* chip κύματος: αναπηδά */
.pos-c .wv-chip{animation:cellPop .55s cubic-bezier(.34,1.56,.5,1) 1.05s both}
/* ── Ίδια ζωή στα γραφικά των τριών σειρών όταν εμφανίζονται ── */
.frow-visual .cal .d{opacity:1}
.frow-visual.in .cal .d.book,.frow-visual.in .cal .d.coral{animation:cellPop .5s cubic-bezier(.34,1.5,.5,1) both}
.frow-visual.in .cal .d.book:nth-child(odd){animation-delay:.6s}
.frow-visual.in .cal .d.book:nth-child(even){animation-delay:.75s}
.frow-visual.in .cal .d.coral{animation-delay:.9s}
.frow-visual.in .notif .n{opacity:0;animation:rowIn .6s var(--ease) both}
.frow-visual.in .notif .n:nth-child(1){animation-delay:.55s}
.frow-visual.in .notif .n:nth-child(2){animation-delay:.72s}
.frow-visual.in .notif .n:nth-child(3){animation-delay:.89s}
.frow-visual.in .plist .bar i{transform-origin:left;animation:barX 1s var(--ease) both}
.frow-visual.in .plist .pr:nth-child(1) .bar i{animation-delay:.6s}
.frow-visual.in .plist .pr:nth-child(2) .bar i{animation-delay:.75s}
.frow-visual.in .plist .pr:nth-child(3) .bar i{animation-delay:.9s}
@keyframes barX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* ════ FEATURES TEASER — μεταφορά του showcase από το features-5 ════ */
.tease{--acc:var(--green);--acc2:var(--green-600);--ink-on:var(--navy)}
/* ── Showcase: λίστα αριστερά, βίντεο δεξιά ── */
.xshow{display:grid;grid-template-columns:minmax(290px,1fr) minmax(360px,1.25fr);gap:36px;align-items:start}
.xshow.rev .xsh-stage{order:-1}
.xshow.rev .xsh-item.on{transform:translateX(-4px)}
.xsh-list{display:flex;flex-direction:column;gap:10px}
.xsh-item{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)
}
.xsh-item:hover{border-color:color-mix(in srgb,var(--acc) 30%,#fff)}
.xsh-item.on{
  border-color:color-mix(in srgb,var(--acc) 45%,#fff);
  box-shadow:0 16px 40px color-mix(in srgb,var(--acc) 14%,rgba(36,62,90,.08));transform:translateX(4px)
}
.xsh-head{display:flex;width:100%;align-items:center;gap:13px;padding:15px 18px;background:none;border:none;cursor:pointer;text-align:left}
.xsh-ic{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;font-size:.85rem;
  color:var(--ink-on);background:linear-gradient(140deg,var(--acc),var(--acc2));
  box-shadow:0 6px 14px color-mix(in srgb,var(--acc) 30%,transparent);transition:transform .35s var(--ease)
}
.xsh-item.on .xsh-ic{transform:rotate(-5deg) scale(1.06)}
.xsh-title{flex:1;font-family:var(--f-display);font-weight:700;font-size:.97rem;color:var(--ink);line-height:1.3}
.xsh-ch{font-size:.75rem;color:var(--muted);transition:transform .35s var(--ease)}
.xsh-item.on .xsh-ch{transform:rotate(180deg);color:var(--acc2)}
.xsh-body{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.xsh-item.on .xsh-body{max-height:520px}
.xsh-body-in{padding:0 18px 17px 67px}
.xsh-body-in p{font-size:.88rem;line-height:1.6;color:var(--body);margin:0 0 14px}
.xsh-body-in .xtags{padding-top:0;border-top:none}
/* Το σταθερό πλαίσιο του βίντεο */
.xsh-stage{position:sticky;top:150px}
.xsh-media{
  position:relative;aspect-ratio:16/11;border-radius:22px;overflow:hidden;
  background:linear-gradient(140deg,color-mix(in srgb,var(--acc) 15%,#fff),var(--tint));
  border:1px solid var(--line);box-shadow:0 30px 70px color-mix(in srgb,var(--acc) 13%,rgba(36,62,90,.12));
  display:grid;place-items:center
}
.xsh-media img,.xsh-media video,.xsh-media-m img,.xsh-media-m video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease
}
.xsh-media img.show,.xsh-media video.show,.xsh-media-m img.show,.xsh-media-m video.show{opacity:1}
.xsh-ph{
  width:58px;height:58px;border-radius:50%;z-index:1;background:#fff;display:grid;place-items:center;
  color:var(--acc2);font-size:1.25rem;box-shadow:0 12px 30px rgba(36,62,90,.16)
}
.xsh-media.loading::after,.xsh-media-m.loading::after{
  content:"";position:absolute;inset:0;margin:auto;z-index:2;width:36px;height:36px;border-radius:50%;
  border:3px solid rgba(36,62,90,.14);border-top-color:var(--lime);animation:xspin .7s linear infinite
}
@keyframes xspin{to{transform:rotate(360deg)}}
/* Κινητό: accordion με το βίντεο μέσα στο ανοιχτό στοιχείο */
.xsh-media-m{display:none}
@media(max-width:900px){
  .xshow{grid-template-columns:1fr;gap:0}
  .xsh-stage{display:none}
  .xsh-body-in{padding:0 16px 16px 16px}
  .xsh-media-m{
    display:grid;place-items:center;position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;
    background:linear-gradient(140deg,color-mix(in srgb,var(--acc) 15%,#fff),var(--tint));
    border:1px solid var(--line)
  }
}
/* ── Browser frame γύρω από το βίντεο ── */
.xframe{
  background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 30px 70px color-mix(in srgb,var(--acc) 13%,rgba(36,62,90,.14))
}
.xframe-top{
  display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fbfcfd,#f4f7fa)
}
.fd{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.fd.r{background:#ff6f61}
.fd.y{background:#f7c948}
.fd.g{background:var(--lime)}
.xframe-url{
  margin-left:10px;display:inline-flex;align-items:center;gap:7px;font-family:var(--f-display);
  font-weight:600;font-size:.72rem;color:var(--muted);background:#fff;border:1px solid var(--line);
  border-radius:99px;padding:5px 14px
}
.xframe-url i{font-size:.6rem;color:#7fa72c}
.xframe .xsh-media{border:none;border-radius:0;box-shadow:none;aspect-ratio:16/10}
.xfloat{
  position:absolute;right:-14px;bottom:24px;z-index:3;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-display);font-weight:700;font-size:.78rem;color:var(--navy);background:#fff;
  border:1px solid var(--line);border-radius:99px;padding:10px 16px;box-shadow:0 14px 34px rgba(36,62,90,.16);
  transition:opacity .22s ease
}
.xfloat i{color:#7fa72c;font-size:.9rem}
.xshow.rev .xfloat{right:auto;left:-14px}
/* ── Autoplay progress μέσα στο ενεργό στοιχείο ── */
.xshow.auto .xsh-item.on::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;
  transform:scaleX(0);background:linear-gradient(90deg,var(--acc),var(--acc2));
  animation:xprog 6.5s linear infinite
}
@keyframes xprog{to{transform:scaleX(1)}}
/* προσαρμογές για την αρχική */
.tease .xshow{margin-top:8px}
.tease .xsh-stage{position:sticky;top:110px}
/* teaser: υπόλοιπες κατηγορίες + CTA προς features.php */
.tease-more{text-align:center;margin-top:52px}
.tm-lead{font-size:1.02rem;color:var(--body);margin-bottom:18px}
.tm-lead b{font-family:var(--f-display);color:var(--ink)}
.tm-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-bottom:30px}
.tm-chips a{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:700;
  font-size:.83rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-full);padding:9px 16px;transition:.3s var(--ease)
}
.tm-chips a span{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  font-size:.68rem;background:var(--tint);color:var(--green-700)
}
.tm-chips a:hover{transform:translateY(-3px);border-color:#d7e8b4;box-shadow:var(--shadow-sm)}
.tm-chips a:hover span{background:var(--green);color:var(--navy)}
/* ════ BENEFITS «duo»: δύο πλευρές συνδεδεμένες σε έναν κόμβο EzCar ════ */
.bene2{position:relative}
.bene2::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(36,62,90,.06) 1px,transparent 1.5px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 55%,#000 30%,transparent 90%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 55%,#000 30%,transparent 90%)
}
.bene2 .wrap{position:relative}
.duo{display:grid;grid-template-columns:1fr 170px 1fr;align-items:center}
/* ── Πάνελ ── */
.duo-col{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:36px 34px;box-shadow:var(--shadow-sm);
  transition:box-shadow .5s var(--ease),border-color .5s var(--ease)
}
.duo-col:hover{box-shadow:var(--shadow-md)}
.duo-col.pro{background:linear-gradient(165deg,var(--tint),var(--tint-2));border-color:#d3e6ab;overflow:hidden}
.duo-col.pro::before{
  content:"";position:absolute;width:240px;height:240px;border-radius:50%;left:-80px;top:-90px;
  background:rgba(161,202,66,.3);filter:blur(60px)
}
.duo-col.pro>*{position:relative}
.duo-head{display:flex;align-items:center;gap:16px;margin-bottom:22px;padding-bottom:20px;border-bottom:1px dashed var(--line)}
.duo-head h3{font-size:1.32rem;margin:0}
.duo-head .sub{
  font-family:var(--f-display);font-weight:600;font-size:.8rem;color:var(--green-700);display:inline-flex;
  align-items:center;gap:7px;margin-top:3px
}
.duo-head .sub i{font-size:.5rem}
.duo-av{
  width:54px;height:54px;border-radius:17px;flex-shrink:0;display:grid;place-items:center;font-size:1.15rem;
  color:var(--navy);background:linear-gradient(135deg,var(--green),var(--lime));box-shadow:var(--glow)
}
.duo-av.c{background:linear-gradient(135deg,var(--navy-400),var(--navy));color:#fff;box-shadow:0 14px 34px rgba(36,62,90,.3)}
.duo-col.cli .duo-head .sub{color:var(--navy-400)}
.duo-col.cli .duo-head .sub i{color:var(--navy-400)}
/* items: γέρνουν προς τον κόμβο στο hover */
.bene2 .bitem{padding:15px 12px;border-top:none;border-radius:14px;border:1px solid transparent;transition:.35s var(--ease)}
.duo-col.pro .bitem:hover{background:rgba(255,255,255,.75);border-color:#d7e8b4;transform:translateX(5px)}
.duo-col.cli .bitem:hover{background:var(--tint-2);border-color:var(--line);transform:translateX(-5px)}
.bene2 .bitem:hover .bic{background:linear-gradient(135deg,var(--green),var(--lime));color:var(--navy);transform:rotate(-6deg) scale(1.08)}
.bene2 .bic{transition:.35s var(--ease)}
.duo-col.cli .bic{background:#eef3f8;color:var(--navy-400)}
/* θύρες σύνδεσης στα πάνελ */
.duo-port{
  position:absolute;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:3px solid var(--green);box-shadow:0 0 0 4px rgba(161,202,66,.18)
}
.duo-port.pr{right:-7px}
.duo-port.pl{left:-7px}
/* ── Κόμβος + γραμμές ροής ── */
.duo-mid{position:relative;height:100%;min-height:200px;display:grid;place-items:center}
.hub{
  position:relative;z-index:2;display:grid;place-items:center;gap:2px;width:96px;height:96px;
  border-radius:50%;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md);
  opacity:0;scale:.5;transition:opacity .6s var(--ease) .35s,scale .7s cubic-bezier(.34,1.56,.5,1) .35s
}
.duo-mid.in .hub{opacity:1;scale:1}
.hub i{font-size:1.3rem;color:var(--green-600)}
.hub b{font-family:var(--f-display);font-weight:800;font-size:.78rem;color:var(--ink);letter-spacing:.01em}
.hub-ring{
  position:absolute;inset:-1px;border-radius:50%;border:2px solid rgba(161,202,66,.55);
  animation:hubPing 3s var(--ease) infinite;pointer-events:none
}
@keyframes hubPing{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(1.55);opacity:0}}
.beam{
  position:absolute;top:50%;height:2px;margin-top:-1px;width:0;opacity:0;
  background:repeating-linear-gradient(90deg,var(--line) 0 9px,transparent 9px 16px);
  transition:width .8s var(--ease) .6s,opacity .4s ease .6s
}
.beam.bl{right:calc(50% + 46px)}
.beam.br{left:calc(50% + 46px)}
.duo-mid.in .beam{width:calc(50% - 40px);opacity:1}
.beam .pulse{
  position:absolute;top:50%;margin-top:-4px;width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px rgba(161,202,66,.8);opacity:0
}
.duo-mid.in .beam.bl .pulse{animation:flowL 2.6s linear 1.5s infinite}
.duo-mid.in .beam.br .pulse{animation:flowR 2.6s linear 2.8s infinite}
@keyframes flowL{0%{right:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{right:100%;opacity:0}}
@keyframes flowR{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
/* ── Responsive: κάθετη ροή ── */
@media(max-width:1024px){
  .duo{grid-template-columns:1fr}
  .duo-col{max-width:560px;margin:0 auto;width:100%}
  .duo-mid{min-height:150px;order:0}
  .duo-col.pro{order:-1}
  .duo-col.cli{order:1}
  .duo-port{display:none}
  .beam{
    width:2px!important;height:0;margin-top:0;margin-left:-1px;top:auto;
    background:repeating-linear-gradient(180deg,var(--line) 0 9px,transparent 9px 16px);
    transition:height .8s var(--ease) .6s,opacity .4s ease .6s
  }
  .beam.bl{right:auto;left:50%;top:0}
  .beam.br{left:50%;bottom:0}
  .duo-mid.in .beam{height:calc(50% - 60px);opacity:1}
  .beam .pulse{left:50%;margin-left:-4px;margin-top:0}
  .duo-mid.in .beam.bl .pulse{animation:flowU 2.6s linear 1.5s infinite}
  .duo-mid.in .beam.br .pulse{animation:flowD 2.6s linear 2.8s infinite}
  @keyframes flowU{0%{bottom:0;top:auto;opacity:0}12%{opacity:1}88%{opacity:1}100%{bottom:100%;top:auto;opacity:0}}
  @keyframes flowD{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
}
@media(max-width:640px){
  .duo-col{padding:26px 20px}
  .duo-head h3{font-size:1.15rem}
}
/* ════ FINAL CTA — φωτεινό premium πάνελ με peek κάρτες ════ */
.cta6{padding:70px 0 90px}
.cta6-wrap{position:relative;max-width:940px;margin:0 auto}
.cta6-panel{
  position:relative;overflow:hidden;border-radius:28px;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);padding:54px 40px 48px;text-align:center;isolation:isolate
}
.cta6-panel::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;
  background:linear-gradient(140deg,var(--green),var(--lime) 30%,transparent 60%,transparent 78%,var(--lime));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask-composite:exclude;pointer-events:none;opacity:.65
}
.c6-glow{position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none;z-index:0}
.c6-glow.ga{width:340px;height:340px;left:-100px;top:-120px;background:rgba(161,202,66,.22);animation:aurA 14s ease-in-out infinite alternate}
.c6-glow.gb{width:300px;height:300px;right:-90px;bottom:-110px;background:rgba(61,92,125,.14);animation:aurB 17s ease-in-out infinite alternate}
.cta6 .cta3-inner{position:relative;z-index:1;max-width:620px;margin:0 auto}
.cta6 h2{font-size:clamp(1.85rem,3.4vw,2.6rem);margin:14px 0 12px}
.cta6 .cta3-inner p{font-size:1.02rem;margin-bottom:26px}
.cta6 .cta3-btns{margin-bottom:22px}
.cta6 .btn-lg{padding:14px 26px;font-size:.92rem}
.cta6 .cta3-trust span{font-size:.82rem;padding:8px 14px}
/* peek κάρτες: ξεπροβάλλουν πίσω από τις πάνω γωνίες */
.peek{position:absolute;z-index:2;pointer-events:none}
.peek .mgi{animation:cfFloat 5.5s ease-in-out infinite;box-shadow:var(--shadow-md)}
.pk-l{left:-26px;top:-24px;transform:rotate(-7deg)}
.pk-r{right:-26px;top:-24px;transform:rotate(6deg)}
.pk-r .mgi{animation-delay:1.4s}
/* είσοδος: πάνελ ανεβαίνει, οι peek κάρτες ξεπηδούν μετά */
.cta6-wrap[data-anim]{transform:translateY(42px) scale(.98)}
.cta6-wrap[data-anim].in{transform:none}
.cta6-wrap .peek{opacity:0;translate:0 22px;transition:opacity .55s var(--ease) .45s,translate .75s cubic-bezier(.34,1.56,.44,1) .45s}
.cta6-wrap.in .peek{opacity:1;translate:0 0}
.cta6-wrap.in .pk-r{transition-delay:.6s}
@media(max-width:900px){
  .pk-l{left:-8px}
  .pk-r{right:-8px}
}
@media(max-width:640px){
  .cta6{padding:56px 0 72px}
  .cta6-panel{padding:44px 20px 40px;border-radius:22px}
  .peek{top:-18px}
  .peek .mgi{padding:9px 13px}
  .peek strong{font-size:.85rem}
}
/* ════ BRANDS v2: pills με gradient μονογράμματα + νησί ════ */
.brands .brand{
  display:inline-flex;align-items:center;gap:13px;flex-shrink:0;background:var(--surface);
  border:1px solid var(--line);border-radius:18px;padding:13px 22px 13px 14px;margin-right:16px;
  box-shadow:var(--shadow-sm);transition:.35s var(--ease)
}
.brands .brand:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#d7e8b4}
.bmono{
  width:44px;height:44px;border-radius:13px;flex-shrink:0;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:.92rem;color:#fff;letter-spacing:.01em;
  position:relative;overflow:hidden
}
.bmono::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 48%)}
.bmono.g1{background:linear-gradient(135deg,var(--green),var(--green-600));color:var(--navy)}
.bmono.g2{background:linear-gradient(135deg,var(--navy-400),var(--navy))}
.bmono.g3{background:linear-gradient(135deg,var(--coral),#e06a48)}
.bmono.g4{background:linear-gradient(135deg,var(--lime),var(--green));color:var(--navy)}
.bmono.g5{background:linear-gradient(135deg,var(--navy),#16283c)}
.bmono.g6{background:linear-gradient(135deg,#ffa588,var(--coral))}
.bmono.g7{background:linear-gradient(135deg,var(--green-600),var(--green-700))}
.bmono.g8{background:linear-gradient(135deg,var(--green),var(--navy-400))}
.brands .brand b{font-family:var(--f-display);font-weight:700;font-size:.95rem;color:var(--ink);line-height:1.2;white-space:nowrap}
.brands .brand b span{display:flex;align-items:center;gap:5px;font-weight:600;font-size:.74rem;color:var(--muted)}
.brands .brand b span i{font-size:.62rem;color:var(--green-600)}
/* ════ SPECS v2: κάρτες με badge-εικονίδιο στην κορυφή (όπως τα rings) ════ */
.specs-head{text-align:center;margin-bottom:24px}
.specs-head h2{margin-top:14px;font-size:clamp(1.6rem,2.8vw,2.3rem)}
.spec-row{gap:18px;display:grid;grid-template-columns:repeat(4,1fr)}
.spec{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;margin-top:30px;
  box-shadow:var(--shadow-sm);transition:.45s var(--ease);text-align:center;padding:8px 28px;
  position:relative
}
.spec:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);border-color:#d7e8b4}
.spec+.spec::before{
  display:none;content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(21,49,31,.12),transparent)
}
.spec .spec-ic{
  position:absolute;top:-28px;left:50%;transform:translateX(-50%);margin:0;width:56px;height:56px;
  border-radius:50%;display:grid;place-items:center;border:4px solid var(--tint);box-shadow:var(--shadow-md);
  overflow:hidden;transition:.4s var(--ease)
}
.spec .spec-ic::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.38),transparent 48%)}
.spec b{margin-top:2px;font-family:var(--f-display);font-weight:700;color:var(--ink);font-size:1.1rem;display:block;margin-bottom:6px}
/* ============================================
   EzCar — Light Green SaaS Template 2026
   Inspired by Foton SaaS · content by gocars structure
   ============================================ */
:root{
  --bg:#f7faf1;--surface:#ffffff;--tint:#eef7dd;--tint-2:#f4faea;--green:#a1ca42;--green-600:#87ae2f;
  --green-700:#54701d;--lime:#bfdd72;--navy:#243e5a;--navy-600:#1b2f45;--navy-400:#3d5c7d;--coral:#ff8b6b;
  --coral-soft:#ffe6dc;--ink:#243e5a;--body:#4f6580;--muted:#8ba0b5;--line:#e3ecdb;--line-2:#eef5e6;
  --shadow-sm:0 2px 10px rgba(36,62,90,.06);--shadow-md:0 18px 44px rgba(36,62,90,.10);
  --shadow-lg:0 30px 70px rgba(36,62,90,.14);--glow:0 14px 34px rgba(161,202,66,.34);
  --f-head:'Geom',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --f-display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--r-sm:12px;--r-md:18px;
  --r-lg:26px;--r-xl:34px;--r-full:999px;--ease:cubic-bezier(.16,1,.3,1);--wrap:1200px
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--f-body);color:var(--body);background:var(--bg);line-height:1.7;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;max-width:100%;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility
}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--ink);line-height:1.08;letter-spacing:0;font-weight:700}
h1{font-size:clamp(2.5rem,5.5vw,3.2rem);font-weight:500}
h2{font-size:clamp(2.1rem,4.2vw,3.4rem);font-weight:500}
h3{font-size:clamp(1.25rem,2.2vw,1.7rem);font-weight:700}
p{font-size:1.05rem}
.lead{font-size:clamp(1.05rem,1.5vw,1.02rem);color:var(--body)}
.grad{
  background:linear-gradient(120deg,var(--green),var(--lime));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent
}
h1 .grad,h2 .grad{font-weight:inherit}
/* ── Eyebrow / pill ── */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:700;font-size:.8rem;
  letter-spacing:.02em;color:var(--green-700);background:var(--tint);border:1px solid var(--line);
  padding:8px 16px;border-radius:var(--r-full)
}
.eyebrow.coral{color:#c0492a;background:var(--coral-soft);border-color:#ffd6c8}
.eyebrow.coral i{color:var(--coral)}
/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:none;font-family:var(--f-display);
  font-weight:700;font-size:.95rem;padding:15px 30px;border-radius:var(--r-full);transition:.35s var(--ease);
  white-space:nowrap
}
.btn i{font-size:.82rem;transition:transform .3s var(--ease)}
.btn:hover i{transform:translateX(3px)}
.btn-primary{background:var(--green);color:var(--navy);box-shadow:var(--glow)}
.btn-primary:hover{background:var(--navy);color:#fff;transform:translateY(-3px);box-shadow:0 18px 38px rgba(36,62,90,.28)}
.btn-soft{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.btn-soft:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#cfe3a8}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid #cfe3a8}
.btn-ghost:hover{background:var(--tint);transform:translateY(-3px)}
.btn-lg{padding:17px 36px;font-size:1rem}
/* ══════════ TOP BAR ══════════ */
.topbar{background:var(--surface);border-bottom:1px solid var(--line);font-size:.82rem;color:var(--muted);position:relative;z-index:60}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:42px}
.topbar a{color:var(--muted);display:inline-flex;align-items:center;gap:7px;transition:.25s}
.topbar a:hover{color:var(--green-700)}
.topbar i{color:var(--green);font-size:.72rem}
.tb-left{display:flex;align-items:center;gap:8px}
.tb-right{display:flex;gap:6px}
.lang{padding:3px 11px;border-radius:var(--r-full);font-weight:600;font-family:var(--f-display);font-size:.74rem;color:var(--muted)}
.lang.active{background:var(--tint);color:var(--green-700)}
/* ══════════ HEADER ══════════ */
.header{position:sticky;top:0;background:rgb(255 255 255);border-bottom:1px solid transparent;transition:.4s var(--ease);z-index:1000}
.header.scrolled{background:rgb(255 255 255 / 0%);border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--f-display);font-weight:800;font-size:1.5rem;color:var(--ink);letter-spacing:-.03em}
.logo-mark{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;font-size:1rem;
  background:linear-gradient(135deg,var(--navy),var(--navy-600));box-shadow:0 10px 24px rgba(36,62,90,.28)
}
.logo span{color:#6b8c24}
.nav{display:flex;align-items:center;gap:4px}
.nav a{
  font-family:var(--f-display);font-weight:600;font-size:.95rem;color:var(--body);padding:9px 15px;
  border-radius:var(--r-full);transition:.25s var(--ease);position:relative
}
.nav a:hover{color:var(--green-700);background:var(--tint)}
.nav a.active{color:var(--green-700)}
.nav a.active:not(.btn){background:var(--tint)}
.nav-cta{margin-left:12px}
.nav a.nav-cta{color:var(--navy)}
.nav a.nav-cta:hover{color:#fff;background:var(--navy)}
.nav-cta.active{background:var(--navy)!important;color:#fff!important}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
.nav-backdrop{
  position:fixed;inset:0;background:rgba(21,49,31,.4);backdrop-filter:blur(3px);opacity:0;visibility:hidden;
  transition:.35s var(--ease);z-index:999
}
.nav-backdrop.show{opacity:1;visibility:visible}
/* ══════════ HERO (home) ══════════ */
.hero{position:relative;padding:76px 0 90px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:2}
.blob{position:absolute;border-radius:50%;filter:blur(60px);z-index:0;pointer-events:none}
.blob-a{width:520px;height:520px;background:rgba(191,221,114,.20);top:-140px;right:-120px;animation:drift 18s ease-in-out infinite}
.blob-b{width:400px;height:400px;background:rgba(161,202,66,.14);bottom:-160px;left:-140px;animation:drift 22s ease-in-out infinite reverse}
.blob-c{width:260px;height:260px;background:rgba(255,139,107,.12);top:38%;left:44%;animation:drift 15s ease-in-out infinite}
.hero-copy h1{margin:22px 0}
.hero-copy .lead{max-width:520px;margin-bottom:34px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-trust{display:flex;align-items:center;gap:16px;margin-top:34px;color:var(--muted);font-size:.9rem}
.hero-trust .avatars{display:flex}
.hero-trust .avatars span{
  width:34px;height:34px;border-radius:50%;border:2.5px solid var(--bg);margin-left:-10px;display:grid;
  place-items:center;color:#fff;font-family:var(--f-display);font-weight:700;font-size:.75rem
}
.hero-trust .avatars span:first-child{margin-left:0}
.a1{background:var(--green)}
.a2{background:var(--lime)}
.a3{background:#ff8b6b}
.a4{background:#3d5c7d}
.hero-trust strong{color:var(--ink);font-family:var(--f-display)}
/* Hero visual — app mock */
.hero-visual{position:relative}
.mock{
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
  border:1px solid var(--line);overflow:hidden;position:relative;z-index:2;
  animation:float 7s ease-in-out infinite
}
.mock-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line-2);background:var(--tint-2)}
.mock-bar .dots{display:flex;gap:6px}
.mock-bar .dots i{width:11px;height:11px;border-radius:50%;display:block}
.mock-bar .dots i:nth-child(1){background:#ff8b6b}
.mock-bar .dots i:nth-child(2){background:#ffcf5c}
.mock-bar .dots i:nth-child(3){background:var(--lime)}
.mock-url{
  margin-left:6px;flex:1;background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 12px;
  font-size:.72rem;color:var(--muted);font-family:var(--f-body)
}
.mock-body{padding:22px}
.mock-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.mock-h b{font-family:var(--f-display);color:var(--ink);font-size:1.05rem}
.mock-h .chip{
  font-size:.72rem;font-weight:700;font-family:var(--f-display);color:var(--green-700);background:var(--tint);
  padding:5px 12px;border-radius:var(--r-full)
}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.cal .d{
  aspect-ratio:1;border-radius:9px;background:var(--tint-2);border:1px solid var(--line-2);display:grid;
  place-items:center;font-size:.78rem;font-weight:600;color:var(--muted);font-family:var(--f-display)
}
.cal .d.book{background:linear-gradient(135deg,var(--green),var(--green-600));color:#fff;border-color:transparent;box-shadow:var(--glow)}
.cal .d.soft{background:var(--tint);color:var(--green-700);border-color:var(--line)}
.cal .d.coral{background:var(--coral-soft);color:#c0492a;border-color:#ffd6c8}
.mock-foot{display:flex;gap:10px;margin-top:18px}
.mock-foot .row{flex:1;height:9px;border-radius:6px;background:var(--line-2)}
.mock-foot .row.g{background:linear-gradient(90deg,var(--green),var(--lime));width:60%;flex:none}
.chip-float{
  position:absolute;z-index:3;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-md);padding:13px 17px;display:flex;align-items:center;gap:11px
}
.chip-float small{font-size:.72rem;color:var(--muted)}
.cf-1 .ic{background:linear-gradient(135deg,var(--green),var(--green-600))}
.cf-2 .ic{background:linear-gradient(135deg,var(--coral),#ff6f4a)}
/* ══════════ PAGE HERO (inner pages) ══════════ */
.pg-hero{position:relative;overflow:hidden;padding:70px 0 64px;text-align:center}
.pg-hero .wrap{position:relative;z-index:2}
.crumb{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:600;
  font-size:.82rem;color:var(--muted);margin-bottom:16px
}
.crumb a{color:var(--green-700)}
.crumb a:hover{text-decoration:underline}
.crumb .sep{font-size:.6rem;opacity:.6}
.pg-hero h1{font-size:2.3rem;margin-bottom:14px}
.pg-hero .eyebrow{margin-bottom:18px}
.pg-hero .lead{max-width:600px;margin:0 auto}
/* Hero stat chips */
.pg-chips{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.pg-chip{
  display:flex;align-items:center;gap:13px;padding:14px 22px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 6px 22px rgba(36,62,90,.06);
  transition:.35s var(--ease)
}
.pg-chip:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#cfe3a8}
.pg-chip .pi{
  width:44px;height:44px;border-radius:13px;flex-shrink:0;display:grid;place-items:center;color:#fff;
  font-size:1rem;background:linear-gradient(140deg,var(--navy),var(--navy-600))
}
.pg-chip:nth-child(2) .pi{background:linear-gradient(140deg,var(--green),var(--green-600));color:var(--navy)}
.pg-chip:nth-child(3) .pi{background:linear-gradient(140deg,var(--coral),#ff6f4a)}
.pg-chip span{font-size:.8rem;color:var(--muted);font-family:var(--f-display);font-weight:500}
/* ══════════ SPECS / HIGHLIGHTS ══════════ */
.specs{background:var(--tint);padding:70px 0}
.spec-ic{
  width:66px;height:66px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;color:#fff;
  font-size:1.45rem;box-shadow:var(--glow);transition:transform .4s var(--ease)
}
.spec:hover .spec-ic{transform:translateY(-5px) scale(1.05)}
.spec:nth-child(1) .spec-ic{background:linear-gradient(135deg,var(--navy),var(--navy-600))}
.spec:nth-child(2) .spec-ic{background:linear-gradient(135deg,var(--green),var(--green-600));color:var(--navy)}
.spec:nth-child(3) .spec-ic{background:linear-gradient(135deg,var(--coral),#ff6f4a)}
.spec:nth-child(4) .spec-ic{background:linear-gradient(135deg,var(--navy-400),var(--navy))}
.spec span{font-size:.9rem;color:var(--body)}
/* ══════════ LOGO CAROUSEL (marquee) ══════════ */
.brands{padding:64px 0 70px;overflow:hidden;background:var(--surface)}
.brands-head{text-align:center;max-width:660px;margin:0 auto 48px;padding:0 28px}
.brands-head h2{margin:14px 0 12px;font-size:clamp(1.75rem,3vw,2.6rem)}
.brands-head .lead{font-size:1.02rem}
.logo-marquee{
  position:relative;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}
.logo-track{display:flex;align-items:center;width:max-content;animation:logoScroll 40s linear infinite}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.brand{
  display:flex;align-items:center;gap:14px;margin-right:18px;padding:16px 26px 16px 18px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);white-space:nowrap;
  box-shadow:0 6px 22px rgba(36,62,90,.05);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)
}
.brand:hover{border-color:#cfe3a8;box-shadow:var(--shadow-md);transform:translateY(-4px)}
.brand .bmark{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--navy),var(--navy-600));color:#fff;font-size:1.1rem;
  box-shadow:0 10px 24px rgba(36,62,90,.26)
}
.brand b{font-family:var(--f-display);font-weight:700;color:var(--ink);font-size:1.06rem;letter-spacing:-.01em;line-height:1.15}
.brand span{display:block;font-size:.74rem;color:var(--muted);font-weight:500;font-family:var(--f-body)}
@media(prefers-reduced-motion:reduce){
  .logo-track{animation:none;flex-wrap:wrap;justify-content:center;gap:14px;width:100%}
  .brand{margin-right:0}
  .logo-marquee{-webkit-mask:none;mask:none}
}
/* ══════════ SECTIONS ══════════ */
.section{padding:110px 0}
.section.alt{background:var(--surface)}
.section.mint{background:var(--tint)}
.head{max-width:660px;margin:0 auto 64px;text-align:center}
.head h2{margin:16px 0 14px}
.head .lead{color:var(--body)}
/* Feature grid */
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.fgrid.cols-3{grid-template-columns:repeat(3,1fr)}
.fcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 28px;
  box-shadow:0 6px 24px rgba(36,62,90,.05);transition:.4s var(--ease);position:relative;overflow:hidden
}
.fcard:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:#d7e8b4}
.fcard .fico{
  width:60px;height:60px;border-radius:18px;display:grid;place-items:center;font-size:1.4rem;
  margin-bottom:22px;background:var(--tint);color:var(--green);transition:.4s var(--ease)
}
.fcard.accent .fico{background:var(--coral-soft);color:var(--coral)}
.fcard:hover .fico{background:linear-gradient(135deg,var(--green),var(--green-600));color:#fff;box-shadow:var(--glow)}
.fcard.accent:hover .fico{background:linear-gradient(135deg,var(--coral),#ff6f4a)}
.fcard h3{font-size:1.2rem;margin-bottom:9px}
.fcard p{font-size:.94rem;color:var(--body)}
/* ══════════ ALTERNATING FEATURE ROWS ══════════ */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:56px 0}
.frow.rev .frow-visual{order:2}
.frow.rev .frow-copy{order:1}
.frow-copy h2{margin:16px 0 16px}
.frow-copy>p{margin-bottom:26px;max-width:480px}
.checks{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.check{display:flex;gap:14px;align-items:flex-start}
.check .ci{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  background:var(--tint);color:var(--green);font-size:.75rem
}
.check b{font-family:var(--f-display);color:var(--ink);display:block;font-size:1rem}
.check span{font-size:.9rem;color:var(--muted)}
.vcard{position:relative}
.vcard::before{
  content:"";position:absolute;inset:-24px;border-radius:40px;z-index:0;
  background:radial-gradient(circle at 30% 30%,rgba(191,221,114,.20),transparent 60%), radial-gradient(circle at 70% 70%,rgba(161,202,66,.14),transparent 60%)
}
.vcard .mock{animation:none}
/* notification mock */
.notif{display:flex;flex-direction:column;gap:12px}
.notif .n{display:flex;gap:12px;align-items:center;padding:13px 14px;border:1px solid var(--line-2);border-radius:14px;background:var(--tint-2)}
.notif .n .ni{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;color:#fff;font-size:.9rem}
.notif .n b{font-family:var(--f-display);color:var(--ink);font-size:.92rem;display:block;line-height:1.2}
.notif .n small{font-size:.76rem;color:var(--muted)}
.notif .n .t{margin-left:auto;font-size:.7rem;color:var(--muted);font-family:var(--f-display)}
.ng{background:linear-gradient(135deg,var(--navy),var(--navy-600))}
.no{background:linear-gradient(135deg,var(--coral),#ff6f4a)}
.nl{background:linear-gradient(135deg,var(--green),var(--green-600));color:var(--navy)}
/* price list mock */
.plist{display:flex;flex-direction:column;gap:10px}
.plist .pr{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line-2);border-radius:13px}
.plist .pr .car{width:40px;height:40px;border-radius:11px;background:var(--tint);color:var(--green);display:grid;place-items:center}
.plist .pr b{font-family:var(--f-display);color:var(--ink);font-size:.92rem}
.plist .pr .price{margin-left:auto;font-family:var(--f-display);font-weight:800;color:var(--green-700)}
.plist .pr .price small{font-weight:500;color:var(--muted);font-size:.72rem}
.plist .pr .bar{width:60px;height:8px;border-radius:5px;background:var(--line-2);overflow:hidden}
.plist .pr .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--lime))}
/* dashboard mock (software page) */
.dash{display:flex;flex-direction:column;gap:14px}
.dash .drow{display:flex;gap:12px}
.dash .kpi{flex:1;background:var(--tint-2);border:1px solid var(--line-2);border-radius:13px;padding:14px}
.dash .kpi small{font-size:.7rem;color:var(--muted);font-family:var(--f-display);font-weight:600}
.dash .kpi b{display:block;font-family:var(--f-display);font-size:1.3rem;color:var(--ink);margin-top:3px}
.dash .kpi.g{background:linear-gradient(135deg,var(--green),var(--green-600));border-color:transparent}
.dash .kpi.g small,.dash .kpi.g b{color:#fff}
.dash .chart{display:flex;align-items:flex-end;gap:8px;height:100px;padding:0 2px}
.dash .chart span{flex:1;border-radius:6px 6px 0 0;background:var(--tint);position:relative}
.dash .chart span::after{
  content:"";position:absolute;inset:auto 0 0 0;height:var(--h,40%);border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,var(--lime),var(--green))
}
/* ══════════ METRICS (animated progress rings) ══════════ */
.meters{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.meter{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px 24px 34px;
  text-align:center;box-shadow:0 6px 24px rgba(36,62,90,.05);transition:.4s var(--ease)
}
.ring{position:relative;width:150px;height:150px;margin:0 auto 22px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .track{fill:none;stroke:var(--tint);stroke-width:9}
.ring .prog{
  fill:none;stroke-width:9;stroke-linecap:round;stroke-dasharray:326.726;stroke-dashoffset:326.726;
  transition:stroke-dashoffset 1.5s var(--ease)
}
.ring-c{position:absolute;inset:0;display:grid;place-items:center}
.ring-c b{font-family:var(--f-display);font-weight:800;font-size:1.95rem;color:var(--ink);line-height:1;letter-spacing:-.02em}
.meter-l{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--f-display);
  font-weight:600;font-size:.98rem;color:var(--body)
}
.meter-l i{font-size:.95rem}
.m1 .prog{stroke:var(--green)}
.m1 .meter-l i{color:var(--green-600)}
.m2 .prog{stroke:var(--navy-400)}
.m2 .meter-l i{color:var(--navy-400)}
.m3 .prog{stroke:var(--coral)}
.m3 .meter-l i{color:var(--coral)}
.m4 .prog{stroke:var(--navy)}
.m4 .meter-l i{color:var(--navy)}
/* ══════════ FEATURE TABS ══════════ */
.tab-btn i{font-size:.8rem;color:var(--green)}
.tab-btn.active{background:var(--navy);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(36,62,90,.26)}
.tab-btn.active i{color:var(--green)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fade .5s var(--ease)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.titem{
  display:flex;gap:15px;padding:24px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:0 6px 24px rgba(36,62,90,.05);transition:.35s var(--ease)
}
.titem:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#d7e8b4}
.titem .ti{
  width:44px;height:44px;border-radius:13px;flex-shrink:0;display:grid;place-items:center;
  background:var(--tint);color:var(--green);font-size:1rem
}
.titem h4{font-family:var(--f-display);color:var(--ink);font-size:1rem;margin-bottom:4px}
.titem p{font-size:.86rem;color:var(--muted);line-height:1.55}
/* ══════════ CAPABILITIES LIST (software) ══════════ */
.cap-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cap{
  display:flex;align-items:center;gap:13px;padding:16px 20px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);transition:.3s var(--ease);font-weight:600;
  font-family:var(--f-display);color:var(--ink);font-size:.96rem
}
.cap:hover{border-color:#cfe3a8;transform:translateX(5px);box-shadow:var(--shadow-sm)}
.cap i{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;
  background:var(--tint);color:var(--green);font-size:.7rem
}
/* ══════════ CLIENTS ══════════ */
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.logo-pill{
  display:flex;align-items:center;gap:11px;padding:16px 26px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-full);font-family:var(--f-display);font-weight:700;
  color:var(--ink);transition:.35s var(--ease)
}
.logo-pill i{color:var(--green)}
.logo-pill:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:#cfe3a8}
.logo-pill span{font-size:.72rem;color:var(--muted);font-weight:500;font-family:var(--f-body)}
.note{text-align:center;margin-top:26px;color:var(--muted);font-size:.82rem;font-style:italic}
/* ══════════ BENEFITS ══════════ */
.bene{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.bcol{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:44px}
.bcol.pro{background:linear-gradient(160deg,var(--tint-2),var(--surface))}
.bcol h3{font-size:1.4rem;margin-bottom:4px}
.bcol .sub{
  font-family:var(--f-display);font-weight:600;font-size:.82rem;color:var(--green-700);margin-bottom:26px;
  display:inline-flex;align-items:center;gap:7px
}
.bcol .sub i{font-size:.5rem}
.bitem{display:flex;gap:15px;padding:16px 0;border-top:1px solid var(--line-2)}
.bitem:first-of-type{border-top:none}
.bitem .bic{
  width:44px;height:44px;border-radius:13px;flex-shrink:0;display:grid;place-items:center;
  background:var(--tint);color:var(--green);font-size:1rem
}
.bitem h4{font-family:var(--f-display);color:var(--ink);font-size:1.02rem;margin-bottom:3px}
.bitem p{font-size:.9rem;color:var(--body)}
/* ══════════ DEMO / FORM CTA ══════════ */
.demo .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.demo-copy h2{margin:16px 0 18px}
.demo-copy .lead{margin-bottom:26px}
.demo-list{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.demo-list .di{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:600;color:var(--ink)}
.demo-list .di i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--green);color:var(--navy);font-size:.7rem}
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:38px;box-shadow:var(--shadow-md)}
.form h3{margin-bottom:6px}
.form>p{font-size:.92rem;margin-bottom:24px;color:var(--muted)}
.fg{margin-bottom:15px}
.fg label{display:block;font-family:var(--f-display);font-weight:600;font-size:.85rem;color:var(--ink);margin-bottom:6px}
.fg .req{color:var(--coral);margin-left:2px}
.fg input,.fg textarea{
  width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;font-family:var(--f-body);
  font-size:.95rem;color:var(--ink);background:var(--tint-2);transition:.25s;outline:none
}
.fg input:focus,.fg textarea:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 4px rgba(161,202,66,.10)}
.fg textarea{resize:vertical;min-height:90px}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fg-check{display:flex;align-items:flex-start;gap:10px;margin-bottom:20px}
.fg-check input{width:17px;height:17px;margin-top:3px;accent-color:var(--green);flex-shrink:0}
.fg-check label{font-size:.85rem;color:var(--body);font-family:var(--f-body);font-weight:400}
.fg-check a{color:var(--green-700);font-weight:600}
/* form states / alerts */
.field-error{display:block;color:#c0392b;font-size:.76rem;margin-top:5px;font-family:var(--f-display);font-weight:600}
.fg input.is-error,.fg textarea.is-error{border-color:#e8917d;background:#fff;box-shadow:0 0 0 4px rgba(255,139,107,.12)}
.form-alert{display:flex;gap:12px;align-items:flex-start;padding:15px 18px;border-radius:14px;margin-bottom:22px;font-size:.92rem;line-height:1.5}
.form-alert i{font-size:1.05rem;margin-top:1px}
.form-alert strong{font-family:var(--f-display);display:block;margin-bottom:2px}
.form-alert.success{background:var(--tint);border:1px solid #cfe3a8;color:var(--green-700)}
.form-alert.success i{color:var(--green)}
.form-alert.error{background:var(--coral-soft);border:1px solid #ffd0c1;color:#b23b1f}
.form-alert.error i{color:var(--coral)}
/* ══════════ CONTACT ══════════ */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:start}
.contact-info{background:linear-gradient(160deg,var(--tint-2),var(--surface));border:1px solid var(--line);border-radius:var(--r-xl);padding:40px}
.contact-info h3{margin-bottom:6px}
.contact-info>p{font-size:.94rem;color:var(--body);margin-bottom:28px}
.c-row{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line-2)}
.c-row:first-of-type{border-top:none}
.c-ico{
  width:44px;height:44px;border-radius:13px;flex-shrink:0;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--green);font-size:.95rem
}
.c-row strong{display:block;font-family:var(--f-display);color:var(--ink);font-size:.95rem;margin-bottom:2px}
.c-row span,.c-row a{font-size:.9rem;color:var(--body)}
.c-row a:hover{color:var(--green-700)}
.map-ph{
  width:100%;height:340px;border-radius:var(--r-xl);overflow:hidden;position:relative;
  background:linear-gradient(135deg,var(--tint),var(--tint-2));border:1px solid var(--line);display:grid;
  place-items:center
}
.map-ph i{font-size:1.1rem;margin-right:8px;color:var(--green)}
.map-ph span{font-family:var(--f-display);font-weight:600;color:var(--green-700);display:flex;align-items:center}
/* ══════════ FINAL CTA ══════════ */
.final{padding:0 0 110px}
.final-card{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(135deg,var(--green-700),var(--green));border-radius:var(--r-xl);
  padding:80px 40px;box-shadow:var(--shadow-lg)
}
/* ── CTA (light, minimal) ── */
.cta3{position:relative;overflow:hidden;padding:120px 0;background:linear-gradient(180deg,var(--tint-2),var(--bg))}
.cta3-inner{position:relative;z-index:1;max-width:760px;margin:0 auto;text-align:center}
.cta3-inner h2{font-size:clamp(2.2rem,4.6vw,3.5rem);margin:18px 0 16px}
.cta3-inner p{font-size:1.12rem;color:var(--body);max-width:560px;margin:0 auto 34px}
.cta3-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.cta3-trust{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta3-trust span{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:600;font-size:.9rem;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:10px 18px;
  border-radius:var(--r-full);box-shadow:var(--shadow-sm)
}
.cta3-trust i{
  width:20px;height:20px;border-radius:50%;background:var(--green);color:var(--navy);display:grid;
  place-items:center;font-size:.55rem;flex-shrink:0
}
.final-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 15% 20%,rgba(191,221,114,.30),transparent 45%),radial-gradient(circle at 85% 85%,rgba(255,255,255,.12),transparent 40%)
}
.final-card>*{position:relative;z-index:1}
.final-card h2{color:#fff;margin-bottom:14px}
.final-card p{color:rgba(255,255,255,.9);max-width:520px;margin:0 auto 32px;font-size:1.1rem}
.final-card .btn-primary{background:#fff;color:var(--green-700);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.final-card .btn-primary:hover{background:#fff;color:var(--green-600)}
.final-card .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.final-card .btn-ghost:hover{background:rgba(255,255,255,.12)}
.final-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* ══════════ FEATURES PAGE ══════════ */
.xnav{
  position:sticky;top:74px;z-index:40;padding:16px 0;
  background:linear-gradient(180deg,rgba(246,250,243,.95),rgba(246,250,243,.75));backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px)
}
.xnav .wrap{display:flex;justify-content:center}
.xnav-bar{
  display:flex;gap:5px;padding:6px;max-width:100%;overflow-x:auto;scrollbar-width:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);
  box-shadow:0 8px 28px rgba(36,62,90,.09)
}
.xnav-bar::-webkit-scrollbar{display:none}
.xnav-bar a{
  white-space:nowrap;font-family:var(--f-display);font-weight:600;font-size:.88rem;color:var(--body);
  padding:10px 20px;border-radius:var(--r-full);transition:.25s var(--ease)
}
.xnav-bar a:hover{color:var(--green-700);background:var(--tint)}
.xnav-bar a.active{background:var(--navy);color:#fff;box-shadow:0 8px 20px rgba(36,62,90,.26)}
.xcat{padding:96px 0;scroll-margin-top:150px;--acc:var(--green);--acc2:var(--green-600);--ink-on:var(--navy)}
.xcat.alt{background:var(--surface)}
.xcat.mint{background:var(--tint)}
.xcat.c-lime{--acc:var(--lime);--acc2:#7fa72c;--ink-on:var(--navy)}
.xcat.c-coral{--acc:var(--coral);--acc2:#ff6f4a;--ink-on:#fff}
.xcat.c-deep{--acc:var(--navy);--acc2:var(--navy-600);--ink-on:#fff}
.xcat.c-teal{--acc:#3d5c7d;--acc2:#243e5a;--ink-on:#fff}
.xcat-head{max-width:660px;margin:0 auto 56px;text-align:center}
.xcat-head .eyebrow{color:var(--acc2);background:color-mix(in srgb,var(--acc) 12%,#fff);border-color:color-mix(in srgb,var(--acc) 22%,#fff)}
.xcat-head .eyebrow i{color:var(--acc)}
.xcat-head h2{margin:14px 0 12px}
.xcount{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--f-display);font-weight:700;
  font-size:.82rem;color:var(--acc2);background:#fff;border:1px solid color-mix(in srgb,var(--acc) 22%,#fff);
  padding:8px 18px;border-radius:var(--r-full);
  box-shadow:0 4px 14px color-mix(in srgb,var(--acc) 12%,transparent)
}
.xcount i{font-size:.6rem;color:var(--acc)}
.xgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.xcard{
  position:relative;display:flex;flex-direction:column;isolation:isolate;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 28px 28px;
  box-shadow:0 6px 24px rgba(36,62,90,.05);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
  overflow:hidden
}
/* soft accent wash that appears on hover */
.xcard::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--acc) 13%,transparent),transparent 62%)
}
.xcard:hover::before{opacity:1}
/* big watermark number */
.xnum{
  position:absolute;top:6px;right:14px;z-index:-1;font-family:var(--f-display);font-weight:800;
  font-size:4.6rem;line-height:1;letter-spacing:-.04em;color:color-mix(in srgb,var(--acc) 12%,#fff);
  transition:.45s var(--ease)
}
.xcard:hover .xnum{color:color-mix(in srgb,var(--acc) 20%,#fff);transform:translateY(-3px)}
.xcard:hover{
  transform:translateY(-7px);box-shadow:0 26px 56px color-mix(in srgb,var(--acc) 16%,rgba(36,62,90,.10));
  border-color:color-mix(in srgb,var(--acc) 32%,#fff)
}
.xic{
  position:relative;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;
  font-size:1.3rem;color:var(--ink-on);margin-bottom:20px;
  background:linear-gradient(140deg,var(--acc),var(--acc2));
  box-shadow:0 12px 26px color-mix(in srgb,var(--acc) 38%,transparent);transition:transform .45s var(--ease)
}
.xic::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 55%)}
.xcard:hover .xic{transform:translateY(-3px) rotate(-4deg) scale(1.05)}
.xcard h4{font-family:var(--f-display);font-weight:700;font-size:1.14rem;color:var(--ink);margin-bottom:10px;line-height:1.25;padding-right:8px}
.xcard p{font-size:.9rem;color:var(--body);margin-bottom:20px;flex:1}
.xtags{display:flex;flex-wrap:wrap;gap:7px;padding-top:16px;border-top:1px dashed var(--line)}
.xtag{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-size:.72rem;
  font-weight:600;color:var(--acc2);background:color-mix(in srgb,var(--acc) 9%,#fff);
  border:1px solid color-mix(in srgb,var(--acc) 18%,#fff);padding:5px 12px;border-radius:var(--r-full)
}
.xtag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--acc);flex-shrink:0}
/* ══════════ CLIENT CARDS ══════════ */
.ccards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.ccard{
  position:relative;display:flex;align-items:center;gap:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:16px 20px;text-align:left;
  box-shadow:0 4px 18px rgba(36,62,90,.05);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  overflow:hidden
}
.ccard::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(90% 120% at 0% 50%,rgba(161,202,66,.10),transparent 62%)
}
.ccard:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(36,62,90,.11);border-color:#cfe3a8}
.ccard:hover::before{opacity:1}
.ccard>*{position:relative;z-index:1}
.cmark{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;color:#fff;
  font-size:1.1rem;background:linear-gradient(140deg,var(--navy),var(--navy-600));
  box-shadow:0 8px 20px rgba(36,62,90,.26);transition:transform .4s var(--ease)
}
.ccard:nth-child(4n/**/+2) .cmark{
  background:linear-gradient(140deg,var(--green),var(--green-600));color:var(--navy);
  box-shadow:0 8px 20px rgba(161,202,66,.32)
}
.ccard:nth-child(4n/**/+3) .cmark{background:linear-gradient(140deg,var(--coral),#ff6f4a);box-shadow:0 8px 20px rgba(255,139,107,.30)}
.ccard:nth-child(4n/**/+4) .cmark{background:linear-gradient(140deg,var(--navy-400),var(--navy));box-shadow:0 8px 20px rgba(61,92,125,.30)}
.ccard:hover .cmark{transform:scale(1.07)}
.ccard b{display:block;font-family:var(--f-display);font-weight:700;font-size:1rem;color:var(--ink);line-height:1.2;margin-bottom:2px}
.ccard .loc{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}
.ccard .loc i{font-size:.62rem;color:var(--green)}
/* ══════════ TESTIMONIALS ══════════ */
.tgrid2{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 30px;box-shadow:0 6px 24px rgba(36,62,90,.05);transition:.4s var(--ease);display:flex;
  flex-direction:column
}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#cfe3a8}
.tquote{font-family:var(--f-display);font-size:2.4rem;line-height:1;color:var(--tint);margin-bottom:-6px}
.tstars{display:flex;gap:3px;margin-bottom:14px;color:#f5b942;font-size:.82rem}
.tcard p{font-size:.95rem;color:var(--body);font-style:italic;margin-bottom:22px;flex:1}
.tauthor{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line-2)}
.tav{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;color:#fff;
  font-family:var(--f-display);font-weight:700;font-size:.85rem;
  background:linear-gradient(140deg,var(--navy),var(--navy-600))
}
.tcard:nth-child(2) .tav{background:linear-gradient(140deg,var(--green),var(--green-600));color:var(--navy)}
.tcard:nth-child(3) .tav{background:linear-gradient(140deg,var(--coral),#ff6f4a)}
.tauthor b{display:block;font-family:var(--f-display);font-size:.95rem;color:var(--ink);line-height:1.2}
.tauthor span{font-size:.8rem;color:var(--muted)}
/* ══════════ FOOTER ══════════ */
.footer .logo{margin-bottom:16px}
.fbrand p{font-size:.92rem;color:var(--body);margin-bottom:20px;max-width:300px}
.socials{display:flex;gap:9px}
.flinks li{margin-bottom:11px}
.flinks a i{font-size:.6rem;color:var(--green)}
.flinks a:hover{color:var(--green-700);transform:translateX(3px)}
.fcontact{display:flex;gap:12px;margin-bottom:16px}
.fcontact span,.fcontact a{font-size:.86rem;color:var(--body)}
.fcontact a:hover{color:var(--green-700)}
.fbottom a{color:var(--muted)}
.fbottom a:hover{color:var(--green-700)}
/* scroll top */
.totop{
  position:fixed;bottom:26px;right:26px;z-index:80;width:50px;height:50px;border-radius:50%;border:none;
  cursor:pointer;background:var(--navy);color:#fff;font-size:1rem;display:grid;place-items:center;
  box-shadow:var(--glow);opacity:0;visibility:hidden;transform:translateY(14px);transition:.4s var(--ease)
}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--green);color:var(--navy);transform:translateY(-3px)}
/* body lock for mobile menu */
body.nav-lock{overflow:hidden}
/* reveal */
[data-anim]{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-anim].in{opacity:1;transform:none}
[data-anim="left"]{transform:translateX(-40px)}
[data-anim="right"]{transform:translateX(40px)}
[data-anim="left"].in,[data-anim="right"].in{transform:none}
[data-stagger]>*{transition-delay:calc(var(--i,0)*.08s)}
/* ══════════ RESPONSIVE ══════════ */
@media(max-width:1024px){
  .fgrid,.fgrid.cols-3{grid-template-columns:repeat(2,1fr)}
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .meters{grid-template-columns:repeat(2,1fr);gap:20px}
  .fgrid2{grid-template-columns:1fr 1fr}
  .xgrid{grid-template-columns:repeat(2,1fr)}
  .tgrid2{grid-template-columns:1fr}
}
@media(max-width:860px){
  .topbar{display:none}
  .nav{
    inset:0 0 0 auto;flex-direction:column;align-items:stretch;z-index:55;position:absolute;top:100%;left:0;
    right:0;bottom:auto;width:auto;max-height:calc(100dvh - 74px);
    padding:10px 14px calc(16px + env(safe-area-inset-bottom,0px));gap:2px;visibility:hidden;opacity:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateY(-14px);
    background:radial-gradient(460px 220px at 108% -60px, rgba(161,202,66,.18), transparent 62%), linear-gradient(180deg,var(--tint-2),#fff 34%);
    border-radius:0 0 22px 22px;box-shadow:0 26px 60px rgba(36,62,90,.24);
    transition:transform .4s cubic-bezier(.22,1,.3,1), opacity .3s var(--ease), visibility 0s .4s
  }
  .nav-cta{margin:12px 0 0}
  .burger{display:flex;z-index:56}
  .header.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .header.menu-open .burger span:nth-child(2){opacity:0}
  .header.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero .wrap{grid-template-columns:1fr;gap:70px}
  .hero-copy{text-align:center}
  .hero-copy .lead{margin-left:auto;margin-right:auto}
  .hero-actions,.hero-trust{justify-content:center}
  .frow,.frow.rev{grid-template-columns:1fr;gap:48px}
  .frow.rev .frow-visual,.frow.rev .frow-copy{order:0}
  .frow-copy{text-align:center}
  .frow-copy>p{margin-left:auto;margin-right:auto}
  .checks{max-width:400px;margin-left:auto;margin-right:auto}
  .check{text-align:left}
  .bene{grid-template-columns:1fr}
  .demo .wrap{grid-template-columns:1fr;gap:44px}
  .demo-copy{text-align:center}
  .demo-list{max-width:340px;margin:0 auto}
  .cap-list{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .spec-row{grid-template-columns:repeat(2,1fr);row-gap:44px}
  .spec:nth-child(3)::before{display:none}
  .cta3{padding:90px 0}
  .cta3-trust span{font-size:.84rem;padding:9px 14px}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .section{padding:80px 0}
  .fgrid,.fgrid.cols-3,.tgrid{grid-template-columns:1fr}
  .xgrid{grid-template-columns:1fr}
  .meters{grid-template-columns:1fr}
  .fgrid2{grid-template-columns:1fr}
  .frow2{grid-template-columns:1fr}
  .chip-float{display:none}
  .final-card{padding:56px 24px}
  .spec-row{grid-template-columns:1fr;row-gap:40px}
  .spec+.spec::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
  [data-anim]{opacity:1!important;transform:none!important}
}
.tb-left>i{color:var(--green);font-size:.72rem}
.tb-left a{color:var(--green-700);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* ── Χωρίς οριζόντιο scroll σε ΚΑΜΙΑ οθόνη ──
   clip: κόβει ό,τι ξεχειλίζει στα πλάγια (glows, κάρτες, watermarks)
   χωρίς να χαλάει το sticky header ή τα sticky panels */
/* παλιότεροι browsers */
@supports(overflow:clip){
  html,body{overflow-x:clip}
}
section,footer,.topbar{overflow-x:clip}
img,video,svg,iframe{max-width:100%}
/* ─────────────────────────────────────────────
   Mobile menu — fix & styling
   1) Το backdrop-filter στο .header μεταφέρεται σε ::before
      (αλλιώς μπερδεύει το positioning του .nav)
   2) Dropdown: το μενού ξεδιπλώνεται ΚΑΤΩ από το header,
      σε όλο το πλάτος — όχι από το πλάι. Λευκό panel με
      mint αύρα, lime hairline στην κάτω ακμή, icon squircles,
      staggered είσοδος, langs στο κάτω μέρος
   ───────────────────────────────────────────── */
.header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
/* Στο desktop: κρυφά τα mobile-only στοιχεία */
.nav-brand,.nav-langs,.header-spacer{display:none}
.nav .nav-ico{display:none}
/* Link «Παρουσίαση» — ξεχωρίζει με lime pill «20′» */
.nav a.nav-demo{display:inline-flex;align-items:center;gap:7px}
.nav-demo .lbl-m{display:none}
.nav-free{
  font-family:var(--f-display);font-size:.64rem;font-weight:800;line-height:1;padding:4px 7px;
  border-radius:999px;background:linear-gradient(135deg,var(--green),var(--green-600));color:var(--navy);
  box-shadow:0 4px 10px rgba(161,202,66,.35)
}
@media(max-width:1150px) and (min-width:861px){
  .nav a{padding:9px 11px;font-size:.9rem}
  .nav-cta{margin-left:6px}
}
@media(max-width:860px){
  /* Κινητό: το header μένει ΠΑΝΤΑ καρφωμένο πάνω (fixed, όχι sticky —
     το sticky «σπάει» αν κάποιο wrapper της σελίδας έχει overflow).
     Έτσι το burger είναι πάντα στο χέρι, όσο κάτω κι αν είσαι. */
  .header{position:fixed!important;top:0;left:0;right:0;width:100%}
  .header-spacer{display:block;height:74px}
  /* Το panel κρέμεται από το header (absolute μέσα του),
     οπότε ακολουθεί το sticky header και στο scroll */
  .nav.open{visibility:visible;opacity:1;transform:none;transition:transform .4s cubic-bezier(.22,1,.3,1), opacity .25s var(--ease), visibility 0s}
  .nav::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
    background:linear-gradient(90deg,var(--green),var(--lime) 55%,transparent);border-radius:0 0 22px 22px
  }
  /* Το brand δεν χρειάζεται εδώ — το logo φαίνεται ήδη στο header από πάνω */
  .nav-brand{display:none}
  /* Links με icon squircles */
  .nav a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:12px;font-size:.9rem}
  .nav .nav-ico{
    display:grid;place-items:center;width:32px;height:32px;border-radius:10px;flex:none;
    background:var(--tint);color:var(--green-700);font-size:.78rem;transition:.3s var(--ease)
  }
  .nav a:not(.btn):hover{background:var(--surface)}
  .nav a.active{background:var(--surface);color:var(--ink);box-shadow:0 8px 22px rgba(36,62,90,.09)}
  .nav a.active .nav-ico{background:linear-gradient(135deg,var(--green),var(--green-600));color:#fff;box-shadow:0 8px 18px rgba(161,202,66,.42)}
  /* Παρουσίαση: πλήρης ετικέτα στο κινητό */
  .nav a.nav-demo{display:flex}
  .nav-demo .lbl-d{display:none}
  .nav-demo .lbl-m{display:inline}
  .nav-demo .nav-free{margin-left:auto}
  /* CTA: full-width, ξεχωρίζει από τα links */
  .nav a.nav-cta{margin:12px 0 0;justify-content:center;gap:9px;padding:12px;border-radius:12px;font-size:.9rem}
  /* Γλώσσες στο κάτω μέρος (το topbar κρύβεται στο κινητό) */
  .nav-langs{display:flex;gap:8px;margin-top:12px;padding-top:14px;border-top:1px dashed var(--line)}
  .nav-langs a{
    flex:0 0 auto;justify-content:center;gap:0;padding:6px 16px;border-radius:999px;font-size:.76rem;
    font-weight:700;color:var(--muted);background:var(--tint)
  }
  .nav-langs a.active{background:var(--navy);color:#fff;box-shadow:0 8px 18px rgba(36,62,90,.28)}
  /* Staggered είσοδος των items από πάνω, ακολουθώντας το ξεδίπλωμα */
  .nav>*{opacity:0;transform:translateY(-10px);transition:opacity .3s var(--ease),transform .35s var(--ease)}
  .nav.open>*{opacity:1;transform:none}
  .nav.open>*:nth-child(1){transition-delay:.04s}
  .nav.open>*:nth-child(2){transition-delay:.07s}
  .nav.open>*:nth-child(3){transition-delay:.1s}
  .nav.open>*:nth-child(4){transition-delay:.13s}
  .nav.open>*:nth-child(5){transition-delay:.16s}
  .nav.open>*:nth-child(6){transition-delay:.19s}
  .nav.open>*:nth-child(7){transition-delay:.22s}
  .nav.open>*:nth-child(8){transition-delay:.25s}
  .nav.open>*:nth-child(9){transition-delay:.28s}
}
/* ─────────────────────────────────────────────
   Mega menu «Χαρακτηριστικά»
   Desktop/tablet: ΟΡΙΖΟΝΤΙΟ, άκρη-άκρη στην οθόνη —
            κατηγορίες σε σειρά πάνω, τα χαρακτηριστικά
            της κατηγορίας από κάτω (αλλάζουν με hover)
   Κινητό:  tap → κατηγορίες → tap → χαρακτηριστικά
   ───────────────────────────────────────────── */
/* Header πάνω από το fixed .xnav (z 900) του features */
.nav a.dd-trigger{display:inline-flex;align-items:center;gap:7px}
.dd-chev{font-size:.62rem;opacity:.7;transition:transform .35s var(--ease)}
.nav-dd.open .dd-chev{transform:rotate(180deg)}
.dd-n{
  font-family:var(--f-display);font-size:.66rem;font-weight:700;padding:2px 8px;border-radius:999px;
  background:var(--tint);color:var(--green-700);line-height:1.5
}
/* ════ DESKTOP + TABLET ════
   Full-width panel κάτω από το header
   Μεγάλη οθόνη: 8 κατηγορίες σε μία σειρά, σε φαρδύ πλαίσιο (έως 1600px)
   Μικρότερο desktop / tablet: 4 στήλες σε 2 σειρές */
@media(min-width:861px){
  .header .wrap{position:static}
  /* το menu μετριέται από όλο το header */
  .nav-dd{position:static}
  .dd-mob{display:none}
  .dd-menu{
    position:absolute;top:calc(100% - 18px);left:0;right:0;z-index:5;padding-top:18px;visibility:hidden;
    opacity:0;pointer-events:none;transform:translateY(6px);
    transition:opacity .2s var(--ease),transform .3s var(--ease),visibility 0s .2s
  }
  .nav-dd.open .dd-menu{
    visibility:visible;opacity:1;pointer-events:auto;transform:none;
    transition:opacity .22s var(--ease),transform .3s var(--ease),visibility 0s
  }
  @media(hover:hover){
    .nav-dd:hover .dd-menu{
      visibility:visible;opacity:1;pointer-events:auto;transform:none;
      transition:opacity .22s var(--ease),transform .3s var(--ease),visibility 0s .06s
    }
    .nav-dd:hover .dd-chev{transform:rotate(180deg)}
    .nav-dd:hover>a.dd-trigger{color:var(--green-700);background:var(--tint)}
  }
  .dd-panel{
    --gx2:max(28px, calc((100% - 1600px) / 2 + 28px));background:#fff;border-top:1px solid var(--line-2);
    border-bottom:1px solid var(--line);box-shadow:0 28px 50px -18px rgba(36,62,90,.22)
  }
  /* ── Όλες οι κατηγορίες ΔΙΠΛΑ-ΔΙΠΛΑ σε μία σειρά (8 στήλες, χωρίς πλαίσια) ── */
  .dd-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0 30px;padding:22px var(--gx2) 20px}
  .dd-col{min-width:0}
  .nav .dd-chead{
    display:flex;align-items:center;gap:9px;position:relative;padding:0 0 10px;margin:0 0 8px;min-height:46px;
    border-radius:0;background:none;box-shadow:none;border-bottom:1px solid var(--line-2);
    font-family:var(--f-display);font-size:.86rem;font-weight:700;color:var(--ink);line-height:1.25;
    white-space:normal
  }
  .dd-chead::after{
    content:"";position:absolute;left:0;bottom:-1px;width:22px;height:2px;border-radius:2px;
    background:var(--green);transition:width .3s var(--ease)
  }
  .dd-col:hover .dd-chead::after{width:100%}
  .nav .dd-chead:hover{background:none;color:var(--green-700)}
  .dd-cico{
    display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:var(--tint);
    color:var(--green-700);font-size:.72rem;transition:.25s var(--ease)
  }
  .dd-col:hover .dd-cico{background:linear-gradient(135deg,var(--green),var(--green-600));color:var(--navy)}
  .dd-chead .dd-n{display:none}
  .dd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
  .nav .dd-f{
    display:block;padding:6px 8px;margin:0 -8px;border-radius:7px;font-size:.82rem;font-weight:500;
    color:var(--body);line-height:1.35;background:none
  }
  .nav .dd-f:hover{background:var(--tint-2);color:var(--green-700)}
  .dd-list .dd-fi{display:none}
  /* «+ N ακόμη»: κρυφά τα επιπλέον χαρακτηριστικά μέχρι να πατηθεί */
  .dd-list li.dd-extra{display:none}
  .dd-col.more-open li.dd-extra{display:block;animation:ddMore .3s var(--ease)}
  @keyframes ddMore{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .dd-more{
    display:inline-flex;align-items:center;gap:6px;margin:4px 0 0 -6px;padding:4px 8px;border:0;
    border-radius:999px;background:var(--tint);color:var(--green-700);cursor:pointer;font-family:inherit;
    font-size:.74rem;font-weight:700;line-height:1.2;transition:.2s var(--ease)
  }
  .dd-more i{font-size:.6rem;transition:transform .3s var(--ease)}
  .dd-more:hover{background:var(--green);color:var(--navy)}
  .dd-col.more-open .dd-more i{transform:rotate(45deg)}
  /* ── Κάτω μπάρα (στοιχισμένη με το grid) ── */
  .dd-foot{
    display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px var(--gx2);
    background:var(--tint-2);border-top:1px solid var(--line-2);font-size:.8rem;color:var(--muted)
  }
  .dd-foot b{color:var(--ink);font-weight:700}
  .nav .dd-all{display:inline-flex;align-items:center;gap:7px;padding:0;background:none;font-size:.82rem;font-weight:700;color:var(--green-700)}
  .nav .dd-all:hover{background:none;color:var(--navy)}
  .dd-all i{font-size:.7rem;transition:transform .25s var(--ease)}
  .dd-all:hover i{transform:translateX(3px)}
}
/* Πολύ μεγάλη οθόνη: λίγο περισσότερος αέρας */
@media(min-width:1800px){
  .dd-grid{gap:0 40px;padding-top:26px;padding-bottom:24px}
}
/* Κάτω από 1400px οι 8 στήλες στριμώχνονται → 4 δίπλα-δίπλα σε 2 σειρές */
@media(max-width:1399px) and (min-width:861px){
  .dd-grid{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:22px}
  .nav .dd-chead{min-height:0}
}
/* ════ ΚΙΝΗΤΟ ════
   Ίδια «γλώσσα» με το desktop: squircle εικονίδιο + όνομα κατηγορίας
   με lime γραμμή από κάτω, απλά links χωρίς πλαίσια, «+» που γίνεται × */
@media(max-width:860px){
  .dd-desk{display:none}
  .nav a.dd-trigger{display:flex}
  .dd-chev{
    margin-left:auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
    background:var(--tint);color:var(--green-700);opacity:1;font-size:.6rem
  }
  .nav-dd.open>a.dd-trigger{background:var(--surface);color:var(--ink)}
  /* ανοιγοκλείσιμο με grid-rows (ομαλό ύψος) */
  .dd-menu,.dd-mbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
  .nav-dd.open .dd-menu,.dd-mcat.open .dd-mbody{grid-template-rows:1fr}
  .dd-mob,.dd-mlist{overflow:hidden;min-height:0}
  /* κλειστό = και μη προσβάσιμο με Tab (όχι «κρυφά» links) */
  .dd-mob{visibility:hidden;transition:visibility 0s .4s}
  .nav-dd.open .dd-mob{visibility:visible;transition:visibility 0s}
  .dd-mbody{visibility:hidden;transition:grid-template-rows .4s var(--ease),visibility 0s .4s}
  .dd-mcat.open .dd-mbody{visibility:visible;transition:grid-template-rows .4s var(--ease),visibility 0s}
  .dd-mob-in{padding:4px 0 6px 12px;display:flex;flex-direction:column}
  /* Κατηγορία = ίδιο στυλ με την κεφαλίδα στήλης του desktop */
  .dd-mhead{
    display:flex;align-items:center;gap:9px;width:100%;position:relative;padding:9px 4px 8px 0;border:0;
    border-bottom:1px solid var(--line-2);border-radius:0;background:none;cursor:pointer;text-align:left;
    font-family:var(--f-display);font-size:.84rem;font-weight:700;color:var(--ink);
    -webkit-tap-highlight-color:transparent
  }
  .dd-mhead::after{
    content:"";position:absolute;left:0;bottom:-1px;width:22px;height:2px;border-radius:2px;
    background:var(--green);transition:width .35s var(--ease)
  }
  .dd-mcat.open .dd-mhead::after{width:100%}
  .dd-mcat.open .dd-mhead{color:var(--green-700)}
  .dd-ico{
    display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:7px;font-size:.6rem;
    background:var(--tint);color:var(--green-700);transition:.3s var(--ease)
  }
  .dd-mcat.open .dd-ico{background:linear-gradient(135deg,var(--green),var(--green-600));color:var(--navy)}
  .dd-cat-n{flex:1}
  .dd-mhead .dd-n{display:none}
  .dd-mch{
    display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:999px;
    background:var(--tint);color:var(--green-700);font-size:.52rem;
    transition:transform .3s var(--ease),background .3s var(--ease)
  }
  .dd-mcat.open .dd-mch{transform:rotate(45deg);background:var(--green);color:var(--navy)}
  /* Χαρακτηριστικά: απλά links, στοιχισμένα με το όνομα της κατηγορίας */
  .dd-mlist{display:flex;flex-direction:column;gap:0}
  .dd-mcat.open .dd-mlist{padding:4px 0 6px}
  .nav .dd-mlist .dd-f{
    display:block;padding:6px 10px 6px 31px;border-radius:8px;font-family:inherit;font-size:.8rem;
    font-weight:500;color:var(--body);line-height:1.3;background:none
  }
  .nav .dd-mlist .dd-f:hover,.nav .dd-mlist .dd-f:active{background:var(--tint-2);color:var(--green-700)}
  .dd-mlist .dd-fi{display:none}
  /* «Όλα τα χαρακτηριστικά» = ίδιο με την κάτω μπάρα του desktop */
  .nav a.dd-mall{
    display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:9px 12px;
    border-radius:10px;background:var(--tint-2);font-size:.8rem;font-weight:700;color:var(--green-700)
  }
  .dd-mall i{font-size:.64rem;transition:transform .25s var(--ease)}
  .dd-mall:active i{transform:translateX(3px)}
}
/* Μετά από κλικ σε link το μενού κλείνει, ακόμη κι αν ο κέρσορας είναι ακόμα από πάνω */
.nav-dd.no-hover .dd-menu{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
/* «Λάμψη» στο χαρακτηριστικό όπου οδήγησε το μενού (σελίδα Χαρακτηριστικά) */
.xsh-item.dd-hit{animation:ddHit 1.6s var(--ease)}
@keyframes ddHit{0%,100%{box-shadow:0 0 0 0 rgba(161,202,66,0)}25%{box-shadow:0 0 0 4px rgba(161,202,66,.45)}}
@media(prefers-reduced-motion:reduce){
  .dd-menu,.dd-mbody,.dd-chev,.dd-mch,.dd-ico{transition:none!important}
  .dd-pane.on,.dd-pane.on .dd-f{animation:none!important}
}