/* ── μπλοκ 0 ── */

/* ==========================================================================
   tonypanopoulos.gr
   Τυπογραφία: Syne (τίτλοι) + Geologica (κείμενο) — και οι δύο με ΠΛΗΡΗ ελληνικά.
   Χρώμα: ζεστό off-white χαρτί, γραφή σε ζεστό ανθρακί, τόνος βαθύ πράσινο-μπλε
          (το νερό της Διώρυγας) — ένας τόνος, πουθενά αλλού.
   ========================================================================== */

:root{
  --paper:#F9F9F9;
  --paper-2:#FFFFFF;
  --paper-3:#ECEFF3;
  --ink:#0A2540;
  --ink-2:#5C6B7A;
  --line:#DCE2E8;
  --accent:#E28743;
  --accent-2:#C97430;
  --accent-ink:#A85B1B;
  --accent-tint:#FAE7D5;
  --on-accent:#0A2540;
  --panel:#0A2540;

  --f-display:"Inter","Helvetica Neue",Arial,sans-serif;
  --f-body:"Inter","Helvetica Neue",Arial,sans-serif;

  --t-tiny:.8rem;
  --t-xxs:.9rem;
  --t-xs:1rem;
  --t-s:clamp(1.02rem,.99rem + .14vw,1.125rem);
  --t-m:clamp(1.15rem,1.08rem + .3vw,1.35rem);
  --t-l:clamp(1.3rem,1.16rem + .6vw,1.62rem);
  --t-xl:clamp(1.5rem,1.25rem + 1.05vw,1.95rem);
  --t-xxl:clamp(1.75rem,1.35rem + 1.7vw,2.33rem);
  --t-g:clamp(2.1rem,1.5rem + 2.5vw,2.81rem);
  --t-xg:clamp(2.6rem,1.6rem + 4.4vw,5.2rem);

  --container:1600px;
  --gutter:clamp(1.25rem,.85rem + 2vw,3.75rem);
  --head-h:clamp(68px,60px + 2vw,96px);
  --sec:clamp(4rem,2.2rem + 7.5vw,9rem);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#081420;
    --paper-2:#0E2032;
    --paper-3:#15293D;
    --ink:#E9EEF4;
    --ink-2:#94A6B7;
    --line:#1D3448;
    --accent:#E8945A;
    --accent-2:#F2AB79;
    --accent-ink:#F0A160;
    --accent-tint:#33261A;
    --on-accent:#0A1520;
    --panel:#0E2032;
  }
}
:root[data-theme="dark"]{
    --paper:#081420;
    --paper-2:#0E2032;
    --paper-3:#15293D;
    --ink:#E9EEF4;
    --ink-2:#94A6B7;
    --line:#1D3448;
    --accent:#E8945A;
    --accent-2:#F2AB79;
    --accent-ink:#F0A160;
    --accent-tint:#33261A;
    --on-accent:#0A1520;
    --panel:#0E2032;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:var(--t-s);font-weight:400;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.15;margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}picture{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.u{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.lbl{font-family:var(--f-body);font-size:var(--t-tiny);font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--accent);color:var(--on-accent);padding:.7rem 1.1rem}

/* ---------------- κεφαλίδα ---------------- */
.hdr{
  position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.hdr__in{display:flex;align-items:center;gap:1rem;height:var(--head-h)}
.brand{display:flex;align-items:center;gap:.6rem;line-height:1.05;text-decoration:none;color:var(--ink)}
.brand__mark{
  display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:9px;
  background:var(--ink);color:var(--paper);
  font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:-.03em;line-height:1;
}
.brand__txt{display:grid;gap:.16rem;min-width:0}
.brand__n{font-family:var(--f-display);font-weight:800;font-size:var(--t-m);letter-spacing:-.02em;white-space:nowrap}
.brand__t{display:none;font-size:.62rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
@media (min-width:560px){.brand__t{display:block}}
@media (max-width:400px){.brand__mark{width:34px;height:34px;font-size:17px;border-radius:8px}}
.brand em{font-style:normal;color:var(--accent-ink)}
.nav{display:none;margin-left:auto;gap:clamp(1.1rem,.4rem + 1.5vw,2.4rem)}
.nav a{font-size:var(--t-xxs);color:var(--ink-2);padding:.3rem 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.hdr__end{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.nav + .hdr__end{margin-left:clamp(1rem,.4rem + 1.5vw,2.4rem)}

.lang{
  display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  font-family:var(--f-body);font-size:.72rem;font-weight:400;letter-spacing:.1em;cursor:pointer;
  background:transparent;padding:0;color:var(--ink-2);flex:none;text-decoration:none;
}
.lang span{padding:.32rem .6rem;transition:background .2s,color .2s}
.lang span[data-on="true"]{background:var(--accent);color:var(--on-accent)}

.tgl{
  display:inline-grid;place-items:center;flex:none;
  width:32px;height:32px;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--ink-2);
  transition:border-color .2s,color .2s;
}
.tgl:hover{border-color:var(--accent);color:var(--accent-ink)}
.tgl svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.tgl .ic-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tgl .ic-sun{display:none}
  :root:not([data-theme="light"]) .tgl .ic-moon{display:inline}
}
:root[data-theme="dark"] .tgl .ic-sun{display:none}
:root[data-theme="dark"] .tgl .ic-moon{display:inline}

.hdr .cta{display:none}
@media (min-width:900px){ .nav{display:flex} .hdr .cta{display:inline-flex} }

/* ---------------- κουμπιά ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.82rem 1.5rem;border-radius:4px;border:1px solid var(--accent);
  background:var(--accent);color:var(--on-accent);cursor:pointer;
  font-family:var(--f-body);font-size:var(--t-xxs);font-weight:400;letter-spacing:.01em;
  transition:background .2s,border-color .2s,color .2s;
}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn--sm{padding:.55rem 1.1rem;font-size:.8rem}
.btn--line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--line:hover{background:transparent;border-color:var(--accent);color:var(--accent-ink)}
.btn svg{width:13px;height:13px;flex:none}

/* ---------------- τμήματα ---------------- */
.sec{padding-block:var(--sec)}
.sec + .sec{border-top:1px solid var(--line)}
#philosophy{border-top:0}
.sec__head{display:grid;gap:1.1rem;margin-bottom:clamp(2.2rem,1.2rem + 3vw,4rem)}
.sec__head h2{font-size:var(--t-g)}
.sec__head p{color:var(--ink-2);max-width:60ch;font-size:var(--t-m);font-weight:400}
.sec__meta{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}

/* ---------------- ήρωας ---------------- */
.hero{padding-block:clamp(3.2rem,1.5rem + 8vw,8rem) clamp(3rem,1.5rem + 5vw,6rem)}
.hero h1{font-size:var(--t-xg);font-weight:700;letter-spacing:-.005em;margin:1.4rem 0 0;max-width:16ch}
.hero h1 em,.sec__head h2 em{
  font-style:normal;color:var(--ink);
  background:var(--accent-tint);
  padding:.02em .14em .06em;margin-inline:-.06em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.hero__tag{margin-top:1rem;font-family:var(--f-display);font-weight:600;font-size:var(--t-xl);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.hero__tag em{font-style:normal;background:var(--accent-tint);padding:.02em .14em .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero__lede{margin-top:1.5rem;max-width:56ch;font-size:var(--t-m);font-weight:400;color:var(--ink-2)}
.hero__grid{display:grid;gap:clamp(2.4rem,1.2rem + 4vw,4rem);align-items:center}
.hero__ph{margin:0}
.hero__ph img{display:block;width:100%;height:auto;border-radius:2px;background:var(--paper-3)}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(2.6rem,1rem + 4.5vw,5rem)}
  .hero h1{font-size:clamp(2.2rem,1.2rem + 2.4vw,3.4rem);max-width:17ch}
  .hero__lede{max-width:44ch}
  .hero__ph img{max-height:min(74vh,660px);object-fit:cover;object-position:50% 12%}
}
@media (max-width:899px){
  .hero__ph{margin-top:.6rem}
  .hero__ph img{max-height:62vh;object-fit:cover;object-position:50% 10%}
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.4rem}

.counts{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 1.5rem;margin-top:clamp(3rem,1.5rem + 5vw,5.5rem);padding-top:2.4rem;border-top:1px solid var(--line)}
.count b{display:block;font-family:var(--f-display);font-weight:600;font-size:var(--t-xxl);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.count span{display:block;margin-top:.6rem;font-size:var(--t-xxs);font-weight:400;color:var(--ink-2);max-width:20ch}
@media (min-width:760px){ .counts{grid-template-columns:repeat(4,1fr)} }

/* ---------------- κυλιόμενη ταινία ---------------- */
.marquee{background:var(--accent-tint);border-block:1px solid var(--line);overflow:hidden;padding-block:1.05rem}
.marquee__track{display:flex;width:max-content;gap:0;animation:slide 46s linear infinite}
.marquee__grp{display:flex;gap:0;flex:none}
.marquee__item{
  font-family:var(--f-display);font-weight:500;font-size:var(--t-m);letter-spacing:0;
  color:var(--accent-ink);white-space:nowrap;padding-inline:1.5rem;display:flex;align-items:center;gap:1.5rem;
}
.marquee__item::after{content:"";width:5px;height:5px;background:var(--accent);border-radius:50%;opacity:.55}
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee:hover .marquee__track{animation-play-state:paused}

/* ---------------- γκαλερί έργων ---------------- */
.gal{display:grid;gap:clamp(2rem,1rem + 3vw,3.6rem) clamp(1.1rem,.6rem + 1.4vw,1.9rem);grid-template-columns:1fr}
@media (min-width:820px){ .gal{grid-template-columns:1fr 1fr} .gal__it:nth-child(4n+2),.gal__it:nth-child(4n+3){margin-top:clamp(2rem,1rem + 4vw,5rem)} }

.gal__it{display:block}
.gal__it[hidden]{display:none}
.shot{
  position:relative;overflow:hidden;background:var(--paper-3);
  border:1px solid var(--line);aspect-ratio:660/412;border-radius:2px;
}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,.84,.44,1)}
.gal__it:hover .shot img{transform:scale(1.035)}
.shot__ph{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:600;font-size:2.4rem;color:var(--ink-2);letter-spacing:-.02em;
}
.shot__go{
  position:absolute;right:1rem;bottom:1rem;
  display:flex;align-items:center;gap:.45rem;
  background:var(--paper);color:var(--ink);border:1px solid var(--line);
  border-radius:2px;padding:.4rem .85rem;font-size:.74rem;letter-spacing:.04em;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;
}
.gal__it:hover .shot__go,.gal__it:focus-visible .shot__go{opacity:1;transform:translateY(0)}
.shot__go svg{width:10px;height:10px}

.gal__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;margin-top:1.15rem}
.gal__meta h3{font-size:var(--t-xl);font-weight:600;letter-spacing:0}
.gal__tag{font-size:var(--t-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.gal__desc{margin-top:.5rem;font-size:var(--t-xxs);font-weight:400;color:var(--ink-2);max-width:52ch}
@media (hover:hover) and (min-width:820px){
  .gal__desc{
    margin-top:0;opacity:0;max-height:0;overflow:hidden;
    transition:opacity .35s ease,max-height .45s cubic-bezier(.16,.84,.44,1),margin-top .45s cubic-bezier(.16,.84,.44,1);
  }
  .gal__it:hover .gal__desc,.gal__it:focus-visible .gal__desc,.gal__it:focus-within .gal__desc{
    opacity:1;max-height:9em;margin-top:.5rem;
  }
}
.gal__url{margin-top:.55rem;font-size:.76rem;letter-spacing:.03em;color:var(--ink-2)}
.gal__it:hover .gal__url{color:var(--accent-ink)}

.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:clamp(2rem,1rem + 2.5vw,3rem)}
.galmore{display:flex;justify-content:center;margin-top:clamp(2.2rem,1.2rem + 2.5vw,3.4rem)}
.ph__text{font-size:var(--t-m);font-weight:400;color:var(--ink-2);max-width:62ch}
.fbtns{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}
.fbtns__or{font-size:var(--t-tiny);color:var(--ink-2)}
.esim{margin-top:1.1rem;padding:.9rem 1.1rem;border-left:3px solid var(--accent);background:var(--panel);color:#FFFFFF;font-size:var(--t-tiny);line-height:1.6;border-radius:0 3px 3px 0}.esim__go{display:inline-block;margin-left:.35rem;color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:2px}.esim__go:hover{color:#fff}
.esim b{color:#FFFFFF}
.esim a{color:#FFFFFF}
.esim b{font-weight:500;letter-spacing:.05em}
.esim a{text-decoration:underline;text-underline-offset:2px;color:#FFFFFF}
.chip{
  border:1px solid var(--line);background:transparent;color:var(--ink-2);border-radius:4px;
  padding:.4rem 1rem;cursor:pointer;font-family:var(--f-body);font-size:.82rem;font-weight:400;
  transition:color .2s,border-color .2s,background .2s;
}
.chip:hover{color:var(--ink);border-color:var(--ink-2)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---------------- υπηρεσίες ---------------- */
.srv{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media (min-width:700px){ .srv{grid-template-columns:1fr 1fr} }
@media (min-width:1180px){ .srv{grid-template-columns:repeat(3,1fr)} }
.srv__it{padding:clamp(1.6rem,1rem + 1.5vw,2.4rem) 0;border-bottom:1px solid var(--line)}
@media (min-width:700px){
  .srv__it{padding-inline:clamp(1.2rem,.6rem + 1.5vw,2.2rem);border-right:1px solid var(--line)}
  .srv__it:nth-child(2n){border-right:0}
  .srv__it:nth-child(2n+1){padding-left:0}
}
@media (min-width:1180px){
  .srv__it:nth-child(2n){border-right:1px solid var(--line)}
  .srv__it:nth-child(2n+1){padding-left:clamp(1.2rem,.6rem + 1.5vw,2.2rem)}
  .srv__it:nth-child(3n){border-right:0}
  .srv__it:nth-child(3n+1){padding-left:0}
}
.srv__it h3{font-size:var(--t-m);margin-bottom:1rem}
.srv__it ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.srv__it li{font-size:var(--t-xxs);font-weight:400;color:var(--ink-2);display:flex;gap:.65rem;line-height:1.5}
.srv__it li::before{content:"";flex:none;width:5px;height:5px;margin-top:.55rem;background:var(--accent);border-radius:50%}

/* ---------------- διαδικασία ---------------- */
.steps{display:grid;gap:clamp(1.8rem,1rem + 2.5vw,3rem);grid-template-columns:1fr}
@media (min-width:820px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{border-top:2px solid var(--accent);padding-top:1.3rem}
.step b{font-family:var(--f-display);font-weight:600;font-size:var(--t-xxs);letter-spacing:.16em;color:var(--accent-ink);display:block;margin-bottom:.9rem}
.step h3{font-size:var(--t-l);margin-bottom:.7rem}
.step p{color:var(--ink-2);font-weight:400;font-size:var(--t-xxs)}

/* ---------------- ποιος είμαι ---------------- */
.about{display:grid;gap:clamp(2rem,1rem + 4vw,4.5rem);grid-template-columns:1fr}
@media (min-width:1000px){ .about{grid-template-columns:1.4fr 1fr} }
.about__lead{font-family:var(--f-display);font-weight:500;font-size:var(--t-xl);line-height:1.22;letter-spacing:-.02em;margin-bottom:1.6rem}
.about__body{display:grid;gap:1.1rem;max-width:62ch;color:var(--ink-2);font-weight:400}
.rules{list-style:none;margin:1.2rem 0 0;padding:0}
.rules li{padding:1.05rem 0;border-top:1px solid var(--line);font-size:var(--t-xxs);font-weight:400;display:flex;gap:.9rem}
.rules li::before{content:"";flex:none;width:6px;height:6px;margin-top:.5rem;border:1px solid var(--accent);transform:rotate(45deg)}

/* ---------------- επικοινωνία ---------------- */
.contact{display:grid;gap:clamp(2rem,1rem + 4vw,4.5rem);grid-template-columns:1fr}
@media (min-width:1000px){ .contact{grid-template-columns:1.25fr .75fr} }
form{display:grid;gap:1.1rem}
.frow{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:640px){ .frow{grid-template-columns:1fr 1fr} }
.fld{display:grid;gap:.45rem}
.fld label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.fld input,.fld select,.fld textarea{
  font-family:var(--f-body);font-size:var(--t-xxs);font-weight:400;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:.65rem 0;width:100%;transition:border-color .2s;
}
.fld textarea{resize:vertical;min-height:110px;line-height:1.6}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-bottom-color:var(--ink-2)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--accent)}
.fld select{cursor:pointer;background:var(--paper);color:var(--ink)}
.fld select option{background:var(--paper);color:var(--ink)}
.hp{position:absolute;left:-9999px}
.fnote{font-size:.8rem;font-weight:400;color:var(--ink-2);max-width:54ch}
.fnote[data-state="sent"]{color:var(--accent-ink)}

.cinfo{display:grid;align-content:start}
.cinfo__it{padding:1.2rem 0;border-top:1px solid var(--line)}
.cinfo__it:first-child{border-top:0;padding-top:0}
.cinfo dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.4rem}
.cinfo dd{margin:0;font-size:var(--t-s);font-weight:400}
.cinfo dd a{border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.cinfo dd a:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}

/* ---------------- υποσέλιδο ---------------- */
.band{background:var(--accent);overflow:hidden;padding-block:.95rem}
.band__track{display:flex;width:max-content;animation:bandroll 26s linear infinite}
.band__item{display:flex;align-items:center;gap:1.6rem;padding-inline:.8rem;white-space:nowrap;color:var(--on-accent)}
.band__big{font-family:var(--f-display);font-weight:700;font-size:var(--t-l);letter-spacing:-.02em}
.band__small{font-size:var(--t-tiny);letter-spacing:.2em;text-transform:uppercase;opacity:.8}
@keyframes bandroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.band:hover .band__track{animation-play-state:paused}

.ftr{background:var(--panel);color:#C9D3DD;border-top:0;padding-block:clamp(2.6rem,1.6rem + 3vw,4rem) 2rem;font-size:.82rem;font-weight:400}
.ftr__grid{display:grid;gap:2.4rem;align-items:start}
@media (min-width:820px){.ftr__grid{grid-template-columns:1fr 1.2fr 1fr;align-items:center}}
.ftr__nav{display:grid;gap:.55rem;justify-items:start}
.ftr__nav a{color:#C9D3DD;text-decoration:none;transition:color .2s}
.ftr__nav a:hover,.ftr__nav a:focus-visible{color:var(--accent)}
.ftr__say{font-family:var(--f-display);font-weight:700;font-size:var(--t-xl);line-height:1.15;letter-spacing:-.02em;color:#FFFFFF}
@media (min-width:820px){.ftr__say{text-align:center}}
.ftr__say em{font-style:normal;color:var(--accent)}
.ftr__end{display:grid;gap:.7rem;justify-items:start}
@media (min-width:820px){.ftr__end{justify-items:end}}
.ftr__end .lbl{color:#8FA0B0}
.ftr__mail{color:#C9D3DD;text-decoration:none;border-bottom:1px solid #2A3F55;padding-bottom:2px;transition:color .2s,border-color .2s}
.ftr__mail:hover,.ftr__mail:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}
.ftr__in{display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:baseline;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid #1D3448;color:#8FA0B0}

.soc{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.soc a{display:inline-grid;place-items:center;width:20px;height:20px;color:#C9D3DD;text-decoration:none;transition:color .2s,transform .2s}
.soc a svg{width:18px;height:18px;fill:currentColor}
.soc a:hover,.soc a:focus-visible{color:var(--accent);transform:translateY(-2px)}
.ftr .demo{margin-left:auto;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}

/* pillars */
.pil{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.pil__it{padding:clamp(1.9rem,1.1rem + 2vw,3rem) 0;border-bottom:1px solid var(--line);display:grid;gap:.7rem;align-content:start}
.pil__n{font-family:var(--f-display);font-weight:600;font-size:var(--t-tiny);letter-spacing:.2em;color:var(--accent-ink)}
.pil__it h3{font-family:var(--f-display);font-weight:600;font-size:var(--t-xl);line-height:1.15;letter-spacing:0}
.pil__role{font-size:var(--t-tiny);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.pil__d{font-size:var(--t-s);font-weight:400;color:var(--ink-2);max-width:46ch}
.pil__also{margin-top:.55rem;font-size:var(--t-tiny);color:var(--ink-2)}
.pil__also a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .2s,border-color .2s}
.pil__also a:hover{color:var(--accent-ink);border-bottom-color:var(--accent-ink)}
.pil__go{justify-self:start;margin-top:.4rem;font-size:var(--t-xxs);color:var(--accent-ink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s}
.pil__go span{display:inline-block;margin-left:.35em;transition:transform .2s}
.pil__go:hover{border-bottom-color:var(--accent)}
.pil__go:hover span{transform:translate(2px,-2px)}
@media (min-width:820px){
  .pil{grid-template-columns:1fr 1fr}
  .pil__it{padding-inline:clamp(1.4rem,.6rem + 1.8vw,2.6rem);border-right:1px solid var(--line)}
  .pil__it:first-child{padding-left:0}
  .pil__it:last-child{border-right:0}
}

/* ---------------- εμφάνιση με το σκρολ ---------------- */
.rv{opacity:0;transform:translateY(12px);transition:opacity .42s ease-out,transform .42s cubic-bezier(.16,.84,.44,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  .marquee__track{animation:none}
  *{transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}
html{scroll-behavior:smooth}
section{scroll-margin-top:calc(var(--head-h) + 8px)}
section:focus,main:focus{outline:none}

/* ── μπλοκ 1 ── */

/* ==========================================================================
   ΤΑΞΙΔΙΩΤΙΚΕΣ ΕΝΟΤΗΤΕΣ — 12/09/2026
   Μόνο μεταβλητές του σάιτ, ώστε να ακολουθούν μόνες τους ανοιχτό/σκούρο θέμα.
   ========================================================================== */

/* ---------------- quiz ---------------- */
.qz__box{max-width:56rem;padding:clamp(1.3rem,1rem + 1.4vw,2.2rem);
  border:1px solid var(--line);border-radius:14px;background:var(--paper-2)}
.qz__bar{height:6px;border-radius:999px;background:var(--paper-3);overflow:hidden}
.qz__fill{display:block;height:100%;width:0;background:var(--accent);border-radius:999px;transition:width .3s ease}
.qz__step{margin:.85rem 0 0;font-size:var(--t-tiny);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.qz__fs{border:0;margin:0;padding:0;min-width:0}
.qz__leg{display:block;padding:0;margin:.45rem 0 1.15rem;
  font-family:var(--f-display);font-weight:700;font-size:var(--t-l);line-height:1.2;color:var(--ink)}
.qz__opts{display:grid;gap:.6rem}
.qz__opt{position:relative;display:flex;align-items:center;gap:.75rem;min-height:52px;
  padding:.7rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--paper);
  color:var(--ink);font-size:var(--t-xxs);line-height:1.45;cursor:pointer;
  transition:border-color .2s,background .2s}
.qz__opt:hover{border-color:var(--accent);background:var(--accent-tint)}
.qz__opt.is-on{border-color:var(--accent);background:var(--accent-tint)}
.qz__opt input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.qz__opt:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.qz__dot{flex:none;width:21px;height:21px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-size:.68rem;font-weight:700;color:var(--ink-2);background:var(--paper-2)}
.qz__opt.is-on .qz__dot{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.qz__nav{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:1.3rem}
.qz__skip{min-height:44px;padding:.5rem .2rem;border:0;background:none;cursor:pointer;
  font:inherit;font-size:var(--t-tiny);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.qz__skip:hover{color:var(--accent-ink)}
.qz__res h3{font-size:var(--t-l);margin:.3rem 0 .6rem}
.qz__pick{margin:0;color:var(--ink-2);font-size:var(--t-tiny);line-height:1.7}
.qz__ctas{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
.qz__more{margin:1.1rem 0 0;font-size:var(--t-tiny);color:var(--ink-2)}
.qz__more a{color:var(--accent-ink);border-bottom:1px solid var(--line);padding-bottom:1px}
.qz__more a:hover{border-bottom-color:var(--accent)}
.qz__share{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1rem;
  padding-top:1rem;border-top:1px solid var(--line)}
.qz__link{flex:1 1 14rem;min-width:0;min-height:44px;padding:.55rem .8rem;
  border:1px dashed var(--line);border-radius:8px;background:var(--paper);color:var(--ink-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;
  text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.qz__copy{min-height:44px;padding:.55rem 1rem;border-radius:8px;border:1px solid var(--line);
  background:var(--paper-2);color:var(--ink);font:inherit;font-size:var(--t-xxs);font-weight:600;cursor:pointer;
  transition:border-color .2s,background .2s}
.qz__copy:hover{border-color:var(--accent);background:var(--accent-tint)}

/* ---------------- πώς ταξιδεύεις μαζί μου ---------------- */
.wy__grid{display:grid;gap:clamp(1rem,.6rem + 1.2vw,1.5rem);grid-template-columns:1fr}
@media (min-width:760px){.wy__grid{grid-template-columns:1fr 1fr}}
.wy__card{display:flex;flex-direction:column;gap:.35rem;
  padding:clamp(1.3rem,1rem + 1vw,1.9rem);border:1px solid var(--line);border-radius:14px;
  background:var(--paper-2);color:var(--ink);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.wy__card:hover{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 10px 30px -18px rgba(10,37,64,.45)}
.wy__ico{width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:10px;
  background:var(--accent-tint);font-size:1.3rem;line-height:1}
.wy__card h3{margin:.85rem 0 0;font-family:var(--f-display);font-size:var(--t-m);font-weight:700}
.wy__card p{margin:.3rem 0 0;color:var(--ink-2);font-size:var(--t-xxs);line-height:1.6;flex:1 1 auto}
.wy__go{margin-top:1.05rem;align-self:flex-start;color:var(--accent-ink);
  font-size:var(--t-xxs);font-weight:600;border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .2s}
.wy__card:hover .wy__go{border-bottom-color:var(--accent)}

/* cross-promo: μία γραμμή, δύο σύνδεσμοι, χωρίς κάρτα */
.xp{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;
  margin-top:clamp(1.2rem,.9rem + 1vw,1.8rem);padding:1rem 1.2rem;
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
  background:var(--paper-3);font-size:var(--t-xxs);color:var(--ink-2);line-height:1.6}
.xp a{color:var(--accent-ink);font-weight:600;border-bottom:1px solid var(--line);padding-bottom:1px}
.xp a:hover{border-bottom-color:var(--accent)}
.xp__sep{color:var(--line)}

/* ---------------- επόμενες αναχωρήσεις ---------------- */
.dp__grid{display:grid;gap:clamp(1rem,.6rem + 1.2vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.dp__card{display:flex;flex-direction:column;overflow:hidden;color:var(--ink);
  border:1px solid var(--line);border-radius:14px;background:var(--paper-2);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.dp__card:hover{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 10px 30px -18px rgba(10,37,64,.45)}
.dp__ph{position:relative;margin:0}
/* Χαμηλή λωρίδα αντί για τετράγωνη φωτογραφία: τρεις κάρτες με ψηλές εικόνες
   έτρωγαν τρεις οθόνες κινητού μόνες τους (ρητό παράπονο Tony, 12/09). */
.dp__ph img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--paper-3)}

.dp__when{position:absolute;left:.7rem;top:.7rem;padding:.3rem .6rem;border-radius:7px;
  background:var(--accent);color:var(--on-accent);font-size:var(--t-tiny);font-weight:700;letter-spacing:.02em}
.dp__body{display:grid;gap:.45rem;align-content:start;padding:clamp(1rem,.85rem + .6vw,1.35rem)}
.dp__body h3{font-family:var(--f-display);font-size:var(--t-m);font-weight:700;line-height:1.25}
.dp__meta{margin:0;font-size:var(--t-tiny);color:var(--ink-2)}
.dp__price{margin:.25rem 0 0;font-family:var(--f-display);font-size:var(--t-l);font-weight:700;color:var(--ink)}
.dp__price small{font-family:var(--f-body);font-size:var(--t-tiny);font-weight:400;color:var(--ink-2)}
.dp__note{margin:clamp(1.1rem,.9rem + .8vw,1.6rem) 0 0;font-size:var(--t-tiny);color:var(--ink-2)}
.dp__note a{color:var(--accent-ink);border-bottom:1px solid var(--line);padding-bottom:1px}
.dp__note a:hover{border-bottom-color:var(--accent)}

/* ---------------- ταξιδιωτικές ιστορίες ---------------- */
.st__grid{display:grid;gap:clamp(1.2rem,.8rem + 1.4vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr))}
.st__card{display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:14px;background:var(--paper-2)}
.st__card--lead{grid-column:1/-1}
.st__wrap{display:flex;flex-direction:column;height:100%;color:inherit}
.st__card:hover{border-color:var(--accent)}
.st__ph{margin:0}
.st__ph img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--paper-3)}
.st__body{padding:clamp(1.3rem,1rem + 1vw,2rem);display:grid;gap:.65rem;align-content:start}
.st__kicker{margin:0;font-size:var(--t-tiny);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.st__body h3{font-family:var(--f-display);font-size:var(--t-l);font-weight:700;line-height:1.2}
.st__card--lead .st__body h3{font-size:var(--t-xl)}
.st__body p{margin:0;color:var(--ink-2);font-size:var(--t-xxs);line-height:1.7}
.st__body .st__ex{color:var(--ink);font-size:var(--t-m);font-weight:400;line-height:1.5}
.st__by{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;
  font-size:var(--t-tiny);color:var(--ink-2)}
.st__by b{font-weight:600;color:var(--ink)}
.st__by time{color:var(--ink-2)}
.st__go{justify-self:start;margin-top:.3rem;color:var(--accent-ink);font-size:var(--t-xxs);
  font-weight:600;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s}
.st__go:hover{border-bottom-color:var(--accent)}
.st__soon{align-self:flex-start;padding:.2rem .55rem;border-radius:999px;
  background:var(--paper-3);color:var(--ink-2);font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.st__card--soon{opacity:.82}
.st__card--soon .st__ph img{filter:grayscale(1)}
@media (min-width:880px){
  .st__card--lead{flex-direction:row;align-items:stretch}
  .st__card--lead .st__ph{flex:0 0 44%;position:relative;align-self:stretch;min-height:260px}
  .st__card--lead .st__ph img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .st__card--lead .st__body{flex:1 1 auto;align-content:center}
}

/* ---------------- About: στατιστικό + social ---------------- */
.ab__stat{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;
  margin:1.6rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:var(--t-xxs);color:var(--ink-2)}
.ab__stat b{font-family:var(--f-display);font-weight:700;color:var(--ink)}
.ab__soc{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-top:1.2rem}
.ab__soc a{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;
  border:1px solid var(--line);background:var(--paper-2);color:var(--ink-2);
  transition:border-color .2s,color .2s,background .2s}
.ab__soc a:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-tint)}
.ab__soc svg{width:17px;height:17px;fill:currentColor}

/* ---------------- κριτικές Google ---------------- */
.gr__score{display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem}
.sec__head .gr__score{font-size:var(--t-xxs);color:var(--ink-2)}
.gr__score b{font-family:var(--f-display);font-size:var(--t-xl);font-weight:700;color:var(--ink);line-height:1}
.gr__stars{color:var(--accent-ink);letter-spacing:.1em}
.gr__grid{display:grid;gap:clamp(1rem,.6rem + 1.2vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.gr__card{display:flex;flex-direction:column;gap:.65rem;margin:0;
  padding:clamp(1.15rem,.95rem + .8vw,1.6rem);border:1px solid var(--line);
  border-radius:14px;background:var(--paper-2)}
.gr__card .gr__stars{font-size:var(--t-xxs)}
.gr__txt{margin:0;color:var(--ink-2);font-size:var(--t-xxs);line-height:1.7;flex:1 1 auto}
.gr__who{font-size:var(--t-tiny);font-weight:600;color:var(--ink)}
.gr__all{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  margin-top:clamp(1.3rem,1rem + 1vw,1.9rem);color:var(--accent-ink);
  font-size:var(--t-xxs);font-weight:600;border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .2s}
.gr__all:hover{border-bottom-color:var(--accent)}

/* ---------------- συχνές ερωτήσεις ---------------- */
.fq{max-width:60rem;border-top:1px solid var(--line)}
.fq details{border-bottom:1px solid var(--line)}
.fq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:60px;padding:1.05rem 0;cursor:pointer;list-style:none;
  font-family:var(--f-display);font-size:var(--t-m);font-weight:600;color:var(--ink)}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";flex:none;width:1.6rem;height:1.6rem;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;color:var(--accent-ink);
  font-family:var(--f-body);font-size:1rem;font-weight:400;line-height:1}
.fq details[open] summary::after{content:"−";border-color:var(--accent)}
.fq summary:hover{color:var(--accent-ink)}
.fq summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.fq__a{margin:0;padding:0 0 1.35rem;max-width:70ch;color:var(--ink-2);font-size:var(--t-xxs);line-height:1.75}
.fq__a a{color:var(--accent-ink);border-bottom:1px solid var(--line);padding-bottom:1px}
.fq__a a:hover{border-bottom-color:var(--accent)}

/* ---------------- πόροι ταξιδιού ---------------- */
.rs__grid{display:grid;gap:clamp(.8rem,.5rem + 1vw,1.15rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.rs__it{display:flex;align-items:flex-start;gap:.85rem;padding:1.05rem 1.15rem;
  border:1px solid var(--line);border-radius:12px;background:var(--paper-2);color:var(--ink);
  transition:border-color .2s,background .2s}
.rs__it:hover{border-color:var(--accent);background:var(--accent-tint)}
.rs__ico{flex:none;font-size:1.25rem;line-height:1.3}
.rs__it b{display:block;font-family:var(--f-display);font-size:var(--t-xxs);font-weight:700}
.rs__it span{display:block;margin-top:.15rem;color:var(--ink-2);font-size:var(--t-tiny);line-height:1.55}

/* ---------------- μπλοκ επιχειρήσεων ---------------- */
.bz__box{display:grid;gap:.85rem;justify-items:start;max-width:56rem;
  padding:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0;background:var(--paper-3)}
.bz__box h2{font-family:var(--f-display);font-size:var(--t-xl);font-weight:700}
.bz__box p{margin:0;color:var(--ink-2);font-size:var(--t-xxs);line-height:1.7;max-width:60ch}
.bz__box .btn{margin-top:.4rem}

/* ---------------- προσαρμογές υπαρχόντων ---------------- */
.pil--one{grid-template-columns:1fr}
@media (min-width:820px){
  .pil--one{grid-template-columns:1fr}
  .pil--one .pil__it{padding-inline:0;border-right:0}
}
.about--solo{grid-template-columns:1fr}
@media (min-width:1000px){.about--solo{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .wy__card,.dp__card,.qz__fill{transition:none}
  .wy__card:hover,.dp__card:hover{transform:none}
}

/* ── μπλοκ 2 ── */

.tv{background:var(--paper-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.tv{--tv-ink:#9E5619}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tv{--tv-ink:var(--accent-ink)}}[data-theme="dark"] .tv{--tv-ink:var(--accent-ink)}[data-theme="light"] .tv{--tv-ink:#9E5619}
.tv__eyebrow{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .9rem;
  font-size:var(--t-tiny);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tv-ink)}
.tv__eyebrow::before{content:"";width:1.6rem;height:2px;background:var(--accent);border-radius:2px}
.tv__lead{max-width:62ch;margin:.9rem 0 0;color:var(--ink-2);font-size:var(--t-s);line-height:1.65}
.tv__sub{max-width:60ch;margin:.6rem 0 0;color:var(--ink-2);font-size:var(--t-xxs);line-height:1.6}.tv__grid{display:grid;gap:clamp(1rem,.6rem + 1.2vw,1.6rem);margin-top:clamp(2rem,1.4rem + 2vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.tv__card{display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--line);
  border-radius:14px;padding:clamp(1.35rem,1rem + 1vw,1.9rem);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.tv__card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 30px -18px rgba(10,37,64,.45)}
.tv__ico{width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:10px;
  background:var(--accent-tint);color:var(--accent-ink);font-size:1.3rem;line-height:1}
.tv__name{margin:1rem 0 .35rem;font-family:var(--f-display);font-size:var(--t-m);font-weight:700;color:var(--ink)}
.tv__what{margin:0;color:var(--ink-2);font-size:var(--t-xxs);line-height:1.6;flex:1 1 auto}
.tv__go{display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;margin-top:1.15rem;
  min-height:44px;padding:.6rem 1.05rem;border-radius:9px;background:var(--panel);color:#fff;
  font-size:var(--t-xxs);font-weight:600;text-decoration:none;transition:background .2s ease}
.tv__go:hover{background:var(--accent-2)}
.tv__go:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* Ο κωδικός eSIM: ΔΕΝ είναι σύνδεσμος συνεργάτη αλλά ΚΩΔΙΚΟΣ — πληρώνει μόνο αν ο
   πελάτης τον θυμηθεί τη στιγμή της πληρωμής, σε ΑΛΛΟ σάιτ. Γι' αυτό είναι μεγάλος,
   ευανάγνωστος και αντιγράφεται με ένα πάτημα (στο κινητό κανείς δεν τον ξαναγράφει). */
.tv__code{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.1rem}
.tv__codeval{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.05rem;
  font-weight:700;letter-spacing:.06em;color:var(--ink);background:var(--paper-3);
  border:1px dashed var(--accent);border-radius:8px;padding:.5rem .85rem}
.tv__copy{min-height:44px;padding:.55rem 1rem;border-radius:8px;border:1px solid var(--line);
  background:var(--paper-2);color:var(--ink);font:inherit;font-size:var(--t-xxs);font-weight:600;cursor:pointer;
  transition:border-color .2s ease,background .2s ease}
.tv__copy:hover{border-color:var(--accent);background:var(--accent-tint)}
.tv__copy:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tv__tag{display:inline-block;margin-left:.5rem;padding:.15rem .5rem;border-radius:999px;
  background:var(--accent-tint);color:var(--tv-ink);font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.tv__disc{margin:clamp(1.6rem,1.2rem + 1vw,2.2rem) 0 0;padding-top:1.1rem;border-top:1px solid var(--line);
  max-width:78ch;color:var(--ink-2);font-size:var(--t-tiny);line-height:1.6}
@media (prefers-reduced-motion:reduce){.tv__card{transition:none}.tv__card:hover{transform:none}}

/* ── μπλοκ 3 ── */

#tpc-top,#tpc-fab,#tpc-panel{
  position:fixed;right:20px;
  font-family:var(--f-body),"Inter","Helvetica Neue",Arial,sans-serif;
}

/* ── επιστροφή στην κορυφή ── */
#tpc-top{
  bottom:88px;width:46px;height:46px;z-index:900;
  display:grid;place-items:center;padding:0;
  border:1px solid var(--line);border-radius:50%;
  background:var(--ink);color:var(--paper);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s,background .2s;
}
#tpc-top.is-on{opacity:1;visibility:visible;transform:translateY(0)}
#tpc-top:hover{background:var(--accent-ink)}
#tpc-top:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#tpc-top:active{transform:translateY(1px) scale(.96)}
#tpc-top svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.tpc-open #tpc-top{opacity:0;visibility:hidden}

/* ── κουμπί επικοινωνίας (λογότυπο tp) ── */
#tpc-fab{
  bottom:20px;width:56px;height:56px;z-index:901;
  display:grid;place-items:center;padding:0;
  border:0;border-radius:50%;
  background:var(--accent);color:var(--on-accent);cursor:pointer;
  box-shadow:0 6px 20px rgba(10,37,64,.28);
  transition:background .2s ease,transform .2s ease;
}
#tpc-fab:hover{background:var(--accent-2)}
#tpc-fab:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#tpc-fab:active{transform:scale(.95)}
#tpc-fab .tpc-mark{
  font-family:var(--f-display),"Inter","Helvetica Neue",Arial,sans-serif;
  font-weight:700;font-size:21px;letter-spacing:-.03em;line-height:1;
}
#tpc-fab .tpc-x{display:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
html.tpc-open #tpc-fab .tpc-mark{display:none}
html.tpc-open #tpc-fab .tpc-x{display:block}

/* ── ο πίνακας ── */
#tpc-panel{
  bottom:88px;z-index:902;
  width:min(340px,calc(100vw - 40px));
  /* το 560px είναι για να μην πιάνει ολόκληρη την οθόνη σε υπολογιστή όταν
     ανοίγει απάντηση· σε κινητό κόβει πάντα το viewport, όχι το 560 */
  max-height:min(560px,calc(100vh - 118px));overflow-y:auto;overscroll-behavior:contain;
  background:var(--paper-2);color:var(--ink);
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 46px rgba(10,37,64,.22);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:100% 100%;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
html.tpc-open #tpc-panel{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

#tpc-head{padding:16px 18px 12px;border-bottom:1px solid var(--line)}
#tpc-head h2{margin:0;font-size:1.02rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
#tpc-sub{margin:.28rem 0 0;font-size:.8rem;color:var(--ink-2);line-height:1.45}

.tpc-body{padding:14px 18px 18px;display:grid;gap:8px}

.tpc-act{
  display:flex;align-items:center;gap:.7rem;
  padding:.62rem .8rem;border-radius:8px;text-decoration:none;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font-size:.88rem;line-height:1.3;
  transition:border-color .18s,background .18s;
}
.tpc-act:hover{border-color:var(--accent);background:var(--accent-tint)}
.tpc-act:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tpc-act svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tpc-act b{display:block;font-weight:600}
.tpc-act small{display:block;font-size:.76rem;color:var(--ink-2);font-weight:400}
.tpc-act--go{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tpc-act--go:hover{background:var(--accent-2);border-color:var(--accent-2)}
.tpc-act--go small{color:var(--on-accent);opacity:.8}

.tpc-hr{margin:6px 0 2px;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.tpc-chips{display:flex;flex-wrap:wrap;gap:6px}
.tpc-chip{
  padding:.36rem .7rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font-family:inherit;font-size:.79rem;line-height:1.3;
  transition:border-color .18s,background .18s;
}
.tpc-chip:hover{border-color:var(--accent)}
.tpc-chip[aria-pressed="true"]{background:var(--accent-tint);border-color:var(--accent);font-weight:600}
.tpc-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#tpc-ans{
  margin:0;padding:.7rem .8rem;border-radius:8px;
  background:var(--paper-3);border:1px solid var(--line);
  font-size:.83rem;line-height:1.55;color:var(--ink);
}
#tpc-ans[hidden]{display:none}
/* Ο σύνδεσμος κρατά το χρώμα του κειμένου (13,5:1) και ξεχωρίζει από την
   υπογράμμιση — το --accent-ink πάνω στο --paper-3 έβγαινε μόνο 4,36:1. */
#tpc-ans a{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px;text-decoration-color:var(--accent)}
#tpc-ans a:hover{text-decoration-color:var(--accent-2)}

@media (max-width:480px){
  #tpc-top,#tpc-fab,#tpc-panel{right:16px}
  #tpc-fab{width:52px;height:52px;bottom:16px}
  #tpc-fab .tpc-mark{font-size:19px}
  #tpc-top{width:42px;height:42px;bottom:78px}
  #tpc-panel{bottom:78px;width:calc(100vw - 32px);max-height:calc(100vh - 104px)}
}
@media (prefers-reduced-motion:reduce){
  #tpc-top,#tpc-fab,#tpc-panel{transition-duration:.01ms}
}

/* ── μπλοκ 4 ── */

/* ─────────────────────────────────────────────────────────────
   (α) ΤΑ ΓΕΜΑΤΑ ΚΟΥΜΠΙΑ: ΛΕΥΚΑ ΓΡΑΜΜΑΤΑ

   Λευκά γράμματα πάνω στο παλιό #E28743 έβγαζαν μόλις 2,70:1 — δηλαδή
   ΧΕΙΡΟΤΕΡΑ απ' ό,τι πριν. Για να είναι τα γράμματα λευκά ΚΑΙ ευανάγνωστα,
   το πορτοκαλί των γεμάτων κουμπιών βαθαίνει: ίδια απόχρωση (26°), ίδιος
   κορεσμός, πιο σκούρο. Το ανοιχτό --accent μένει ως έχει για γραμμές,
   κουκκίδες και τόνους — αλλάζει ΜΟΝΟ ό,τι έχει γράμματα από πάνω.
   ───────────────────────────────────────────────────────────── */
:root{
  --accent-solid:#AF5A1B;    /* λευκά γράμματα → 4,89:1 */
  --accent-solid-2:#944C17;  /* hover          → 6,33:1 */
  --on-accent:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --accent-solid:#B15719;  /* λευκά γράμματα → 4,96:1 */
    --accent-solid-2:#964A15;/* hover          → 6,41:1 */
    --on-accent:#FFFFFF;
  }
}
:root[data-theme="dark"]{
  --accent-solid:#B15719;
  --accent-solid-2:#964A15;
  --on-accent:#FFFFFF;
}

/* Το :not(.btn--line) είναι απαραίτητο: αλλιώς αυτός ο κανόνας, επειδή είναι
   μεταγενέστερος με ίδια ειδικότητα, θα έβαφε και τα περιγράμματα κουμπιά. */
.btn:not(.btn--line){
  background:var(--accent-solid);
  border-color:var(--accent-solid);
  color:var(--on-accent);
}
.btn:not(.btn--line):hover{
  background:var(--accent-solid-2);
  border-color:var(--accent-solid-2);
}

.lang span[data-on="true"]{background:var(--accent-solid);color:var(--on-accent)}
.skip:focus{background:var(--accent-solid);color:var(--on-accent)}
.band{background:var(--accent-solid)}
.band__item{color:var(--on-accent)}
.tv__go:hover{background:var(--accent-solid-2)}

#tpc-fab{background:var(--accent-solid);color:var(--on-accent)}
#tpc-fab:hover{background:var(--accent-solid-2)}
.tpc-act--go{background:var(--accent-solid);border-color:var(--accent-solid);color:var(--on-accent)}
.tpc-act--go:hover{background:var(--accent-solid-2);border-color:var(--accent-solid-2)}
/* το opacity .8 έριχνε τη δεύτερη γραμμή κάτω από το όριο — 0.92 την κρατά πάνω */
.tpc-act--go small{color:var(--on-accent);opacity:.92}

/* ─────────────────────────────────────────────────────────────
   (β) ΣΤΕΝΕΣ ΟΘΟΝΕΣ (320–374px): η κεφαλίδα έβγαινε έξω

   Το «Tony Panopoulos.» έχει white-space:nowrap και έσπρωχνε το ΕΛ/EN και
   το κουμπί θέματος εκτός οθόνης — 50px οριζόντιο τράβηγμα στα 320px,
   26px στα 344px, 11px στα 360px. Δεν κόβω το όνομα: μικραίνω τα κενά
   και τη γραμματοσειρά της κεφαλίδας μόνο κάτω από 375px.
   ───────────────────────────────────────────────────────────── */
@media (max-width:374px){
  :root{--gutter:14px}
  .hdr__in{gap:.5rem}
  .brand{gap:.45rem;min-width:0}
  .brand__n{font-size:.98rem;letter-spacing:-.03em}
  .hdr__end{gap:.4rem}
  .lang{font-size:.68rem;letter-spacing:.06em}
  .lang span{padding:.32rem .42rem}
  .tgl{width:30px;height:30px}
}


/* ══════════ ΝΕΟ 12/09/2026: πλοήγηση πολλών σελίδων ══════════ */
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.sec__more{margin:clamp(1.2rem,.9rem + 1vw,1.8rem) 0 0;display:flex;justify-content:flex-start}
.sec__more a{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  padding:.6rem 1.1rem;border:1px solid var(--line);border-radius:9px;
  color:var(--ink);font-size:var(--t-xxs);font-weight:600;text-decoration:none;
  transition:border-color .2s ease,background .2s ease}
.sec__more a:hover{border-color:var(--accent);background:var(--accent-tint)}
.sec__more a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* Ο τίτλος της κάθε εσωτερικής σελίδας: μικρή αναπνοή κάτω από την κεφαλίδα. */
.pg__head{padding-top:clamp(1.4rem,1rem + 2vw,2.6rem)}

/* ══════════ ΛΙΓΟΤΕΡΟ ΚΕΝΟ ΑΝΑΜΕΣΑ ΣΤΙΣ ΕΝΟΤΗΤΕΣ ══════════
   Μετρήθηκε 12/09: στην αρχική σε desktop το 25% της σελίδας ήταν ΚΕΝΟΣ ΧΩΡΟΣ
   (1.419px από 5.764px), με κενά 287px ανάμεσα σε κάθε ενότητα.
   Αιτία: --sec έφτανε τα 9rem (144px) ΚΑΙ πάνω ΚΑΙ κάτω σε κάθε ενότητα, άρα
   288px μεταξύ τους. Είχε νόημα όσο η σελίδα ήταν μία και οι ενότητες έπρεπε
   να «αναπνέουν»· με έξι σύντομες σελίδες απλώς κουράζει.
   Νέο: ~111px σε desktop, ~72px σε κινητό. */
:root{--sec:clamp(2.25rem,1.5rem + 2.2vw,3.5rem)}

/* Ο ήρωας είχε 128px κενό από πάνω — μετρημένο κενό 189px κάτω από την
   κεφαλίδα πριν φανεί οτιδήποτε. Μαζεύεται στα ~68px. */
.hero{padding-block:clamp(2rem,1rem + 3.6vw,4.5rem) clamp(1.75rem,1rem + 2.4vw,3.25rem)}

/* ══════════ ΚΥΛΙΟΜΕΝΗ ΛΩΡΙΔΑ (εκδρομές & άρθρα) ══════════
   Με πλέγμα, 10 εκδρομές = τέσσερις σειρές = τρεις οθόνες κινητού μόνο αυτές.
   Με λωρίδα, οι ίδιες 10 πιάνουν ΜΙΑ σειρά και ο επισκέπτης σέρνει.
   Δουλεύει και χωρίς JavaScript: είναι απλό οριζόντιο scroll με μαγνήτη. */
.sl{position:relative}
.sl__track{
  --sl-gap:clamp(1rem,.6rem + 1.2vw,1.5rem);
  display:flex;
  gap:var(--sl-gap);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* το «σήκωμα» της κάρτας στο πέρασμα του ποντικιού χρειάζεται αέρα,
     αλλιώς το overflow το κόβει στη μέση */
  padding:6px 2px 10px;
  margin:-6px -2px -10px;
  /* οι κάρτες δεν κολλάνε στην άκρη της οθόνης στο κινητό */
  scroll-padding-inline:2px;
}
.sl__track::-webkit-scrollbar{display:none}
/* Οι κάρτες υπολογίζονται ώστε να ΓΕΜΙΖΟΥΝ τη σειρά: 1 σε κινητό, 2 σε
   tablet, 3 σε laptop, 4 σε μεγάλη οθόνη. Με σταθερό πλάτος έμενε κενό
   δεξιά και η λωρίδα φαινόταν μισοάδεια (ρητό παράπονο Tony, 12/09). */
.sl__track > *{
  flex:0 0 min(80vw,22rem);
  scroll-snap-align:start;
  min-width:0;
}
@media (min-width:620px){ .sl__track > *{flex-basis:calc((100% - var(--sl-gap)) / 2)} }
@media (min-width:980px){ .sl__track > *{flex-basis:calc((100% - 2 * var(--sl-gap)) / 3)} }
@media (min-width:1280px){ .sl__track > *{flex-basis:calc((100% - 3 * var(--sl-gap)) / 4)} }

/* Η κύρια κάρτα άρθρου έπιανε ΟΛΟ το πλάτος στο πλέγμα· μέσα στη λωρίδα
   πιάνει δύο θέσεις, ώστε να κρατά τον ρυθμό της σειράς. Χωρίς το
   grid-column:auto μένει 1/-1 και σπάει η λωρίδα. */
.sl__track .st__card--lead{grid-column:auto;flex:0 0 min(88vw,30rem)}
@media (min-width:620px){ .sl__track .st__card--lead{flex-basis:100%} }
@media (min-width:980px){ .sl__track .st__card--lead{flex-basis:calc((100% - 2 * var(--sl-gap)) / 3 * 2 + var(--sl-gap))} }
@media (min-width:1280px){ .sl__track .st__card--lead{flex-basis:calc((100% - 3 * var(--sl-gap)) / 4 * 2 + var(--sl-gap))} }

.sl__nav{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.9rem}
.sl__btn{
  width:44px;height:44px;display:grid;place-items:center;flex:none;
  border:1px solid var(--line);border-radius:10px;background:var(--paper-2);
  color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s,opacity .2s;
}
.sl__btn:hover:not(:disabled){border-color:var(--accent);background:var(--accent-tint)}
.sl__btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sl__btn:disabled{opacity:.32;cursor:default}
.sl__btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.sl__nav[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.sl__track{scroll-behavior:auto}}

/* ══════════ «ΕΠΙΣΤΡΟΦΗ ΣΤΗΝ ΚΟΡΥΦΗ» = ΑΕΡΟΠΛΑΝΟ ΠΟΥ ΑΝΕΒΑΙΝΕΙ ══════════
   Ήταν σκέτο βελάκι. Τώρα: πορτοκαλί κουμπί με λευκό αεροπλάνο στραμμένο
   προς τα πάνω — ίδια γλώσσα με το σήμα.
   Το πορτοκαλί είναι το ΣΚΟΥΡΟ (--accent-solid): λευκά γράμματα/σχήματα
   πάνω στο ανοιχτό #E28743 δίνουν μόλις 2,7:1. */
#tpc-top{background:var(--accent-solid);border-color:var(--accent-solid);color:#FFFFFF}
#tpc-top:hover{background:var(--accent-solid-2);border-color:var(--accent-solid-2)}
#tpc-top svg{fill:#FFFFFF;stroke:none;width:19px;height:19px}

/* ══════════ ΜΕΝΟΥ ΣΕ ΚΙΝΗΤΟ ══════════
   🔴 Το .nav είναι display:none κάτω από 900px. Όσο το σάιτ ήταν ΜΙΑ σελίδα
   δεν πείραζε (οι σύνδεσμοι ήταν άγκυρες προς τα κάτω). Με ΠΟΛΛΕΣ σελίδες
   σημαίνει ότι σε κινητό και tablet ΔΕΝ ΥΠΑΡΧΕΙ ΚΑΜΙΑ ΠΛΟΗΓΗΣΗ.
   Γι' αυτό μπαίνει κουμπί μενού — εμφανίζεται ΜΟΝΟ κάτω από 900px. */
.hdr__burger{
  display:grid;place-items:center;flex:none;width:42px;height:42px;padding:0;
  border:1px solid var(--line);border-radius:10px;background:var(--paper-2);
  color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s;
}
.hdr__burger:hover{border-color:var(--accent);background:var(--accent-tint)}
.hdr__burger:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.hdr__burger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.hdr__burger .ic-x{display:none}
.hdr__burger[aria-expanded="true"] .ic-bars{display:none}
.hdr__burger[aria-expanded="true"] .ic-x{display:block}
@media (min-width:900px){ .hdr__burger{display:none} }

/* 🔑 Το κουμπί μενού προσθέτει ~48px στη σειρά της κεφαλίδας. Σε οθόνες
   375–422px αυτό έβγαζε τη σελίδα 33px έξω (οριζόντια κύλιση). Η παλιά
   διόρθωση «στενής κεφαλίδας» έπιανε μόνο ως 374px.
   Λύση που ΔΕΝ μπορεί να ξανασπάσει σε κανένα πλάτος: το όνομα επιτρέπεται
   να συρρικνωθεί (min-width:0) και, στο έσχατο, να κοπεί με αποσιωπητικά —
   αντί να σπρώχνει τη σελίδα. */
@media (max-width:899px){
  .hdr__in{gap:.5rem}
  .brand{flex:0 1 auto;min-width:0;overflow:hidden}
  .brand__txt{min-width:0}
  .brand__n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hdr__end{flex:none;margin-left:auto}
  .nav + .hdr__end{margin-left:auto}
}

#tpnav{display:none;border-top:1px solid var(--line);background:var(--paper)}
#tpnav[data-open="1"]{display:block}
@media (min-width:900px){ #tpnav{display:none} }
#tpnav .tpnav__in{display:grid;padding-block:.4rem .9rem}
#tpnav a{
  display:flex;align-items:center;min-height:52px;
  color:var(--ink);font-size:var(--t-s);text-decoration:none;
  border-bottom:1px solid var(--line);
}
#tpnav a:last-child{border-bottom:0}
#tpnav a[aria-current="page"]{color:var(--accent-ink);font-weight:600}
#tpnav a:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
#tpnav .tpnav__cta{
  justify-content:center;min-height:48px;margin-top:.85rem;border-bottom:0;
  background:var(--accent-solid);color:var(--on-accent);border-radius:10px;font-weight:600;
}

/* ══════════ ΝΕΟ ΣΗΜΑ (εκδοχή 2) ══════════
   Το σήμα ήταν <span> με φόντο από CSS· τώρα είναι SVG. Οι παλιοί κανόνες
   .brand__mark / .tpc-mark ταιριάζουν ΚΑΙ στο svg (ίδια κλάση) και θα
   ζωγράφιζαν δεύτερο φόντο από πίσω — γι' αυτό μηδενίζονται ρητά. */
svg.brand__mark{background:none;border-radius:9px;display:block;width:38px;height:38px;padding:0}
@media (max-width:400px){svg.brand__mark{width:34px;height:34px;border-radius:8px}}
/* Το σήμα πιάνει ΟΛΟ το κουμπί, όχι ένα μικρό εικονίδιο στη μέση.
   Όταν ανοίγει ο πίνακας, το σήμα κρύβεται και φαίνεται το πορτοκαλί
   φόντο του κουμπιού με το «×» — έτσι η αλλαγή κατάστασης παραμένει σαφής. */
svg.tpc-mark{background:none;display:block;width:100%;height:100%;border-radius:50%;padding:0;box-shadow:none}
/* 🔑 Με το σήμα να γεμίζει το κουμπί, το κουμπί έγινε σκούρο μπλε — και στο
   ΣΚΟΥΡΟ θέμα χανόταν μέσα στο φόντο (μετρήθηκε 1,19:1). Πριν ήταν πορτοκαλί
   και ξεχώριζε από μόνο του. Το πορτοκαλί δαχτυλίδι το ξεχωρίζει σε ΚΑΘΕ θέμα
   χωρίς να κρύψει το σήμα. */
/* Το χρώμα του δαχτυλιδιού αλλάζει ανά θέμα: το σκούρο πορτοκαλί ξεχωρίζει σε
   λευκή σελίδα (5,2:1) αλλά μόλις 2,9:1 πάνω στα σκούρα πάνελ· το ανοιχτό
   κάνει το αντίστροφο. Ένα token, δύο τιμές. */
:root{--fab-ring:var(--accent-solid)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--fab-ring:var(--accent)} }
:root[data-theme="dark"]{--fab-ring:var(--accent)}
#tpc-fab{overflow:hidden;box-shadow:0 6px 20px rgba(10,37,64,.28), 0 0 0 2px var(--fab-ring)}

/* dimfix-soc 09/10/2026: στόχοι αφής 40px (ήταν 20px) χωρίς να αλλάξει η διάταξη */
.soc{gap:0;margin-left:-10px}.soc a{width:40px;height:40px}