@charset "utf-8";
/* ============================================================
   godirectstay.gr — Design System
   Ένα αρχείο. Mobile-first. Χωρίς build step.
   1 tokens · 2 reset · 3 τυπογραφία · 4 layout · 5 κοινά
   6 header · 7 hero · 8 υπολογιστής · 9 κάρτες/bento · 10 έργα
   11 πλαίσια συσκευών · 12 πριν/μετά · 13 βήματα · 14 τιμές
   15 faq · 16 φόρμα · 17 footer · 18 cookie · 19 landing
   20 animation · 21 reduced-motion · 22 print
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --bg:#0B0D11;
  --surface:#13161C;
  --surface-2:#1B1F27;
  --line:#272C36;
  --text:#ECEEF2;
  --muted:#949BA8;
  --accent:#35D08A;
  --accent-dk:#26B074;
  --on-accent:#06120C;
  --alert:#FF6B5A;

  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular','Cascadia Mono',Consolas,monospace;

  --r:8px;
  --r-sm:6px;
  --pad:20px;
  --maxw:1200px;
  --maxw-narrow:820px;

  --sec-y:64px;
  --gap:16px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.28s;

  --hdr-h:64px;
}
@media (min-width:768px){ :root{ --sec-y:88px; --pad:32px; --gap:20px; } }
@media (min-width:1024px){ :root{ --sec-y:112px; --hdr-h:76px; } }
@media (min-width:1280px){ :root{ --sec-y:130px; --pad:40px; --gap:24px; } }

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr-h) + 12px);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.7;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* λεπτή υφή θορύβου — inline data-URI, χωρίς εξωτερικό αρχείο */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; }
li{ list-style:none; }
figure{ margin:0; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }

/* ---------- 3. ΤΥΠΟΓΡΑΦΙΑ ---------- */
h1,h2,h3,h4,h5,h6{
  margin:0;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.05;
  text-wrap:balance;
}
h1{ font-size:clamp(36px,5.5vw,68px); }
h2{ font-size:clamp(28px,3.6vw,44px); }
h3{ font-size:clamp(20px,2.1vw,26px); letter-spacing:-.02em; line-height:1.2; }
h4{ font-size:18px; letter-spacing:-.015em; line-height:1.3; }
h5,h6{ font-size:16px; letter-spacing:-.01em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
strong,b{ font-weight:700; }
small{ font-size:13px; line-height:1.55; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-dk); text-decoration:underline; text-underline-offset:3px; }

.eyebrow{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 14px;
  line-height:1.4;
}
.lead{ font-size:19px; line-height:1.65; color:var(--muted); }
@media (min-width:768px){ .lead{ font-size:20px; } }
.muted{ color:var(--muted); }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.accent{ color:var(--accent); }
.nowrap{ white-space:nowrap; }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 4. LAYOUT ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
  position:relative;
  z-index:1;
}
.wrap--narrow{ max-width:var(--maxw-narrow); }
.section{ padding-block:var(--sec-y); position:relative; }
.section--tight{ padding-block:calc(var(--sec-y) * .62); }
.section--line{ border-top:1px solid var(--line); }
.sec-head{ max-width:760px; margin-bottom:44px; }
.sec-head p{ margin-top:18px; }
@media (min-width:1024px){ .sec-head{ margin-bottom:56px; } }

.split{ display:grid; gap:32px; }
@media (min-width:1024px){
  .split{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:56px; align-items:start; }
  .split--40-60{ grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); }
  .split--even{ grid-template-columns:1fr 1fr; }
}
.grid{ display:grid; gap:var(--gap); }
.grid--1{ max-width:760px; }
@media (min-width:768px){ .grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:900px){ .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--on-accent);
  padding:12px 20px; border-radius:0 0 var(--r) 0; font-weight:700;
}
.skip-link:focus{ left:0; text-decoration:none; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* ---------- 5. ΚΟΙΝΑ ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px;
  padding:13px 22px;
  border-radius:var(--r);
  border:1px solid transparent;
  font-size:16px; font-weight:700; letter-spacing:-.01em;
  cursor:pointer;
  text-align:center;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform .18s var(--ease);
  text-decoration:none;
}
.btn:hover{ text-decoration:none; }
.btn--primary{ background:var(--accent); color:var(--on-accent); }
.btn--primary:hover{ background:var(--accent-dk); color:var(--on-accent); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn--sm{ min-height:42px; padding:10px 16px; font-size:15px; }
.btn--wide{ width:100%; }
@media (min-width:520px){ .btn--wide{ width:auto; } }
.btn:active{ transform:translateY(1px); }
.btn svg{ width:16px; height:16px; flex:none; }

.btn-row{ display:flex; flex-direction:column; gap:12px; }
@media (min-width:520px){ .btn-row{ flex-direction:row; flex-wrap:wrap; align-items:center; } }

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:26px 24px;
  transition:border-color var(--dur) var(--ease);
}
.card:hover{ border-color:#3A414F; }
.card h3{ margin-bottom:12px; }
.card p{ color:var(--muted); font-size:16px; }
.card__num{
  display:inline-block;
  font-family:var(--mono); font-size:12px; font-weight:700;
  color:var(--accent); letter-spacing:.12em;
  margin-bottom:14px;
}
.card__icon{ color:var(--accent); margin-bottom:16px; }
.card__icon svg{ width:26px; height:26px; }

.notice{
  border:1px solid var(--accent);
  border-radius:var(--r);
  background:rgba(53,208,138,.055);
  padding:24px 22px;
}
.notice h3{ margin-bottom:10px; font-size:19px; }
.notice p{ color:var(--text); font-size:16px; }
@media (min-width:768px){ .notice{ padding:30px 32px; } }

.tag{
  display:inline-block;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
  border:1px solid var(--line); color:var(--muted); background:var(--surface-2);
}
.tag--accent{ border-color:var(--accent); color:var(--accent); background:rgba(53,208,138,.08); }

.checklist li{
  position:relative;
  padding-left:30px;
  margin-bottom:12px;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
}
.checklist li::before{
  content:"";
  position:absolute; left:0; top:.5em;
  width:14px; height:8px;
  border-left:1.5px solid var(--accent);
  border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg);
}
.checklist li:last-child{ margin-bottom:0; }

/* Κάρτες ορολογίας — πλήρες πλάτος, 1 στήλη σε κινητό, 2 από tablet.
   Ίσο ύψος: τα κελιά του grid τεντώνουν από μόνα τους. */
.glossary-block{ margin-top:44px; }
.glossary-intro{
  max-width:70ch; margin:0 0 24px;
  font-size:17px; color:var(--text);
  padding-left:16px; border-left:2px solid var(--accent);
}
.glossary{ display:grid; gap:var(--gap); margin:0; }
@media (min-width:768px){ .glossary{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.glossary > .card{ display:flex; flex-direction:column; }
.glossary dt{ font-weight:700; font-size:17px; letter-spacing:-.015em; margin-bottom:10px; }
.glossary dd{ margin:0; color:var(--muted); font-size:16px; line-height:1.65; }

/* ---------- 6. HEADER ---------- */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(11,13,17,.88);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
/* Το header χρειάζεται περισσότερο πλάτος από τη στήλη περιεχομένου:
   λογότυπο + 7 στοιχεία μενού + τηλέφωνο + CTA + γλώσσα δεν χωράνε σε
   1200px. Μέχρι τα 1400px της οθόνης παραμένουν ευθυγραμμισμένα. */
.hdr .wrap{ max-width:1400px; }
.hdr__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:var(--hdr-h);
}
@media (min-width:1240px){ .hdr__bar{ gap:12px; } }
.logo{
  font-weight:800; font-size:19px; letter-spacing:-.045em;
  color:var(--text); text-decoration:none; white-space:nowrap;
}
.logo:hover{ color:var(--text); text-decoration:none; }
.logo b{ color:var(--accent); font-weight:800; }

/* Επτά στοιχεία μενού + τηλέφωνο + CTA + γλώσσα δεν χωράνε άνετα κάτω από
   1240px — εκεί κάτω πάμε σε burger. Στα 1280 χωράνε με 14px/18px. */
.nav{ display:none; }
@media (min-width:1240px){
  .nav{ display:flex; align-items:center; gap:15px; }
  .nav a{
    color:var(--muted); font-size:14px; font-weight:500; text-decoration:none;
    padding:6px 0; position:relative; white-space:nowrap;
    transition:color var(--dur) var(--ease);
  }
  .nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--accent); transform:scaleX(0); transform-origin:left;
    transition:transform var(--dur) var(--ease);
  }
  .nav a:hover,.nav a[aria-current="page"]{ color:var(--text); }
  .nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
}
@media (min-width:1440px){
  .nav{ gap:20px; }
  .nav a{ font-size:15px; }
}
.hdr__right{ display:flex; align-items:center; gap:10px; }
@media (min-width:1240px){ .hdr__right{ gap:8px; } }
.hdr__tel{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--text); font-weight:700; font-size:15px; text-decoration:none;
  font-family:var(--mono); letter-spacing:-.02em; white-space:nowrap;
  padding:8px 4px; min-height:44px;
}
.hdr__tel svg{ width:16px; height:16px; color:var(--accent); flex:none; }
.hdr__tel:hover{ color:var(--accent); text-decoration:none; }
.hdr__tel span{ display:none; }
@media (min-width:640px){ .hdr__tel span{ display:inline; } }
@media (min-width:1240px){ .hdr__tel{ font-size:14px; gap:6px; padding:8px 2px; } }
.hdr__cta{ display:none; }
@media (min-width:1240px){
  /* Μία σειρά πάντα, και ίδιο ύψος με τον επιλογέα γλώσσας δίπλα. */
  .hdr__cta{
    display:inline-flex;
    white-space:nowrap;
    min-height:44px;
    padding:10px 13px;
    font-size:14px;
    letter-spacing:-.015em;
  }
}
@media (min-width:1440px){ .hdr__cta{ padding:10px 17px; } }

.lang{ position:relative; display:inline-flex; align-items:center; }
.lang select{
  appearance:none; -webkit-appearance:none;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--text);
  font-size:14px; font-weight:500;
  padding:10px 34px 10px 12px;
  min-height:44px;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease);
}
.lang select:hover{ border-color:var(--accent); }
.lang__arrow{
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  width:13px; height:13px; color:var(--muted); pointer-events:none;
}

.burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
  cursor:pointer; color:var(--text);
}
@media (min-width:1240px){ .burger{ display:none; } }
.burger svg{ width:20px; height:20px; }
.burger__x{ display:none; }
.burger[aria-expanded="true"] .burger__x{ display:block; }
.burger[aria-expanded="true"] .burger__m{ display:none; }

.mnav{
  display:none;
  border-top:1px solid var(--line);
  padding:14px var(--pad) 30px;
  max-height:calc(100vh - var(--hdr-h));
  max-height:calc(100dvh - var(--hdr-h));
  overflow-y:auto;
  background:var(--bg);
}
.mnav[data-open="true"]{ display:block; }
@media (min-width:1240px){ .mnav{ display:none !important; } }
.mnav__link{
  display:block; padding:14px 2px; font-size:17px; font-weight:500;
  color:var(--text); text-decoration:none; border-bottom:1px solid var(--line);
}
.mnav__link:hover{ color:var(--accent); text-decoration:none; }
.mnav__link[aria-current="page"]{ color:var(--accent); }
.mnav__foot{ margin-top:22px; display:grid; gap:12px; }

/* ---------- 7. HERO ---------- */
.hero{
  position:relative;
  padding-block:52px calc(var(--sec-y) * .8);
  overflow:hidden;
}
@media (min-width:768px){ .hero{ padding-block:76px var(--sec-y); } }
@media (min-width:1024px){ .hero{ padding-block:100px var(--sec-y); } }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero__bg::before{
  content:""; position:absolute; inset:0;
  opacity:.04;
  background-image:radial-gradient(var(--text) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
}
.mesh{
  position:absolute; z-index:0; pointer-events:none;
  width:min(1100px,150vw); aspect-ratio:1/.62;
  left:50%; top:-22%;
  transform:translateX(-50%);
  opacity:.085;
  background:
    radial-gradient(38% 46% at 24% 34%,var(--accent) 0%,transparent 62%),
    radial-gradient(34% 40% at 74% 22%,var(--accent-dk) 0%,transparent 60%),
    radial-gradient(30% 34% at 56% 70%,#2E9CFF 0%,transparent 62%);
  filter:blur(30px);
}
.hero__inner{ position:relative; z-index:1; max-width:900px; }
.hero h1{ margin-bottom:22px; }
.hero .lead{ max-width:640px; margin-bottom:32px; }
.hero .btn-row{ margin-bottom:28px; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:8px 22px;
  font-size:14px; color:var(--muted);
  padding-top:26px; border-top:1px solid var(--line);
  max-width:660px;
}
.hero__meta span{ display:inline-flex; align-items:center; gap:8px; }
.hero__meta span::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none;
}

/* ---------- 8. ΥΠΟΛΟΓΙΣΤΗΣ ---------- */
.calc{ position:relative; overflow:hidden; }
.calc .mesh{ top:auto; bottom:-34%; opacity:.06; }
.calc__grid{ display:grid; gap:20px; }
@media (min-width:1024px){
  .calc__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); gap:28px; align-items:start; }
}
.calc__panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:22px 20px;
}
@media (min-width:768px){ .calc__panel{ padding:30px; } }

.field{ margin-bottom:22px; }
.field:last-child{ margin-bottom:0; }
.field__top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px; }
.field__label{ font-size:15px; font-weight:500; color:var(--text); }
.field__val{
  font-family:var(--mono); font-size:15px; font-weight:700; color:var(--accent);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.field__hint{ font-size:13px; color:var(--muted); margin-top:6px; }

input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:34px; background:transparent; cursor:pointer; margin:0; display:block;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:4px; border-radius:999px;
  background:linear-gradient(90deg,var(--accent) var(--fill,50%),var(--line) var(--fill,50%));
}
input[type="range"]::-moz-range-track{ height:4px; border-radius:999px; background:var(--line); }
input[type="range"]::-moz-range-progress{ height:4px; border-radius:999px; background:var(--accent); }
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; margin-top:-9px;
  border-radius:50%; background:var(--text);
  border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--accent);
  transition:transform .16s var(--ease);
}
input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--text);
  border:2px solid var(--bg); box-shadow:0 0 0 1px var(--accent);
}
input[type="range"]:hover::-webkit-slider-thumb{ transform:scale(1.12); }
input[type="range"]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 3px var(--accent); }
input[type="range"]:focus-visible{ outline:none; }

.calc__result{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  overflow:hidden;
}
.calc__headline{
  padding:26px 22px 24px;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
@media (min-width:768px){ .calc__headline{ padding:32px 30px 30px; } }
.calc__headline > p{ font-size:14px; color:var(--muted); margin:0 0 8px; }
.calc__big{
  display:block;
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(36px,8vw,60px);
  line-height:1.02;
  letter-spacing:-.045em;
  color:var(--alert);
  font-variant-numeric:tabular-nums;
}
.calc__big-sub{ display:block; font-size:14px; color:var(--muted); margin-top:12px; font-family:var(--font); letter-spacing:0; line-height:1.5; }
.calc__block{ padding:22px; border-bottom:1px solid var(--line); }
@media (min-width:768px){ .calc__block{ padding:26px 30px; } }
.calc__block h3{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.calc__rows{ display:grid; gap:11px; margin:0; }
.calc__row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; font-size:15px; }
.calc__row dt{ color:var(--muted); }
.calc__row dd{ margin:0; font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
.calc__gain .calc__row dd{ color:var(--accent); font-weight:700; }
.calc__payback{
  margin:0; padding:20px 22px;
  border-bottom:1px solid var(--line);
  background:rgba(53,208,138,.055);
  font-size:16px;
}
@media (min-width:768px){ .calc__payback{ padding:22px 30px; } }
.calc__payback b{ color:var(--accent); font-family:var(--mono); font-variant-numeric:tabular-nums; }
.calc__cta{ padding:22px; display:grid; gap:14px; }
@media (min-width:768px){ .calc__cta{ padding:24px 30px; } }
.calc__disclaimer{ font-size:13px; color:var(--muted); margin:0; }

.ticker{
  margin-top:20px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  padding:22px;
  text-align:center;
}
@media (min-width:768px){ .ticker{ padding:28px 30px; margin-top:24px; } }
.ticker p{ margin:0; font-size:15px; color:var(--muted); }
.ticker__num{
  display:block;
  font-family:var(--mono); font-weight:700;
  font-size:clamp(30px,6.2vw,44px);
  line-height:1.1; letter-spacing:-.04em;
  color:var(--alert);
  font-variant-numeric:tabular-nums;
  margin:10px 0 4px;
}
.ticker small{ color:var(--muted); display:block; margin-top:6px; }

/* ---------- 9. ΚΑΡΤΕΣ / BENTO ---------- */
.bento{ display:grid; gap:var(--gap); }
@media (min-width:768px){ .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){
  .bento{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .bento > *{ grid-column:span 2; }
  .bento--3 > *:nth-child(1){ grid-column:span 3; }
  .bento--3 > *:nth-child(2){ grid-column:span 3; }
  .bento--3 > *:nth-child(3){ grid-column:span 6; }
  .bento--4 > *:nth-child(1){ grid-column:span 4; }
  .bento--4 > *:nth-child(2){ grid-column:span 2; }
  .bento--4 > *:nth-child(3){ grid-column:span 2; }
  .bento--4 > *:nth-child(4){ grid-column:span 4; }
  .bento--3 > *:nth-child(3),
  .bento--4 > *:nth-child(1),
  .bento--4 > *:nth-child(4){ padding:32px 30px; }
  .bento--3 > *:nth-child(3) h3{ font-size:clamp(22px,2.4vw,30px); }
}
.bento .card{ display:flex; flex-direction:column; }

.stats{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (min-width:600px){ .stats{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .stats--4{ grid-template-columns:repeat(4,1fr); } .stats--3{ grid-template-columns:repeat(3,1fr); } }
.stat{ background:var(--surface); padding:26px 24px; }
.stat__v{ display:block; font-family:var(--mono); font-weight:700; font-size:clamp(28px,3.4vw,38px); letter-spacing:-.04em; color:var(--accent); font-variant-numeric:tabular-nums; }
.stat__l{ display:block; margin-top:8px; font-size:15px; color:var(--muted); line-height:1.5; }

.quote{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; display:flex; flex-direction:column; gap:16px; }
.quote blockquote{ margin:0; font-size:17px; line-height:1.65; }
.quote figcaption{ font-size:14px; color:var(--muted); border-top:1px solid var(--line); padding-top:16px; margin-top:auto; }
.quote figcaption b{ color:var(--text); display:block; font-size:15px; margin-bottom:3px; }
.placeholder-flag{
  display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--muted); border:1px dashed var(--line); padding:3px 8px; border-radius:var(--r-sm);
  align-self:flex-start;
}

/* ---------- 10. ΕΡΓΑ ---------- */
.works{ display:grid; gap:24px; }
@media (min-width:900px){ .works--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:640px){ .works--1{ max-width:520px; } }
@media (min-width:900px){ .works--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.work{
  display:flex; flex-direction:column; gap:16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 18px 24px;
  position:relative;
  transition:border-color var(--dur) var(--ease);
}
.work:hover,.work:focus-within{ border-color:var(--accent); }
.work__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.work__title{ font-size:19px; }
.work__title a{ color:var(--text); text-decoration:none; }
.work__title a::after{ content:""; position:absolute; inset:0; border-radius:var(--r); }
.work__title a:hover{ text-decoration:none; }
.work:hover .work__title a{ color:var(--accent); }
.work__kind{ font-size:14px; color:var(--muted); margin-top:6px; }
.work__desc{ font-size:15px; color:var(--muted); margin:0; }
.work__note{ font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:14px; margin:0; }
.work__more{ font-size:14px; font-weight:700; color:var(--accent); display:inline-flex; align-items:center; gap:8px; margin-top:auto; }
.work__more svg{ width:14px; height:14px; transition:transform var(--dur) var(--ease); }
.work:hover .work__more svg{ transform:translateX(4px); }

/* ---------- 11. ΠΛΑΙΣΙΑ ΣΥΣΚΕΥΩΝ ---------- */
.device{ --dev-radius:10px; position:relative; }
.device__chrome{
  border:1px solid var(--line);
  border-radius:var(--dev-radius);
  background:var(--surface-2);
  overflow:hidden;
}
.device__bar{
  display:flex; align-items:center; gap:6px;
  padding:9px 12px;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.device__dot{ width:8px; height:8px; border-radius:50%; background:var(--line); flex:none; }
.device__url{
  margin-left:8px; flex:1 1 auto; min-width:0;
  height:18px; border-radius:999px; background:var(--bg);
  border:1px solid var(--line);
  font-family:var(--mono); font-size:9px; line-height:16px; color:var(--muted);
  padding:0 8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.device__screen{
  position:relative;
  background:var(--bg);
  aspect-ratio:16/10;
  overflow:hidden;
}
.device__screen img{ width:100%; height:auto; display:block; }
.device--phone{ --dev-radius:20px; max-width:190px; }
.device--phone .device__bar{ display:none; }
.device--phone .device__screen{ aspect-ratio:9/19; }
.device--phone .device__chrome{ border-width:6px; border-color:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line); }

.device--scroll .device__screen img{ transition:transform 5.5s linear; }
.device--scroll.is-playing .device__screen img{ transform:translateY(-46%); }

@media (min-width:1024px){
  .tilt{ perspective:1200px; }
  .tilt .device__chrome{
    transform:rotateY(-5deg) rotateX(1.5deg);
    transition:transform .5s var(--ease);
  }
  .tilt:hover .device__chrome,.tilt:focus-within .device__chrome{ transform:rotateY(0) rotateX(0); }
}
.shot-pair{ display:grid; gap:18px; align-items:end; }
@media (min-width:640px){ .shot-pair{ grid-template-columns:minmax(0,1fr) 170px; } }

/* Placeholder όσο λείπει το screenshot: σκούρο φόντο, διακριτικές
   διαγώνιες και ένα μικρό εικονίδιο εικόνας. Καμία διαδρομή αρχείου. */
.device__screen--empty{
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 9px, rgba(148,155,168,.05) 9px 10px),
    var(--surface);
  color:var(--line);
}
.device__screen--empty svg{ width:34px; height:34px; opacity:.9; }
.device--phone .device__screen--empty svg{ width:24px; height:24px; }

/* ---------- 12. ΠΡΙΝ / ΜΕΤΑ ---------- */
.ba{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--surface);
  touch-action:pan-y;
  -webkit-user-select:none; user-select:none;
}
.ba__pane{ position:relative; aspect-ratio:16/10; }
.ba__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__after{ position:absolute; inset:0; overflow:hidden; clip-path:inset(0 0 0 var(--pos,50%)); }
.ba__label{
  position:absolute; top:12px; z-index:3;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(11,13,17,.86); border:1px solid var(--line); color:var(--text);
  padding:5px 10px; border-radius:999px;
}
.ba__label--b{ left:12px; }
.ba__label--a{ right:12px; color:var(--accent); border-color:var(--accent); }
.ba__handle{
  position:absolute; top:0; bottom:0; z-index:4;
  left:var(--pos,50%);
  width:2px; background:var(--accent);
  transform:translateX(-1px);
}
.ba__grip{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:var(--bg); border:1px solid var(--accent); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.ba__grip svg{ width:20px; height:20px; }
.ba__range{
  position:absolute; inset:0; z-index:5;
  width:100%; height:100%;
  opacity:0; cursor:ew-resize; margin:0;
}
.ba:focus-within .ba__grip{ box-shadow:0 0 0 3px rgba(53,208,138,.45); }

/* ---------- 13. ΒΗΜΑΤΑ ---------- */
.steps{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (min-width:768px){ .steps--4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .steps--4{ grid-template-columns:repeat(4,1fr); } }
.step{ background:var(--surface); padding:26px 24px; display:flex; flex-direction:column; gap:12px; }
.step__k{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--accent); text-transform:uppercase; }
.step h3{ font-size:19px; }
.step p{ font-size:15px; color:var(--muted); margin:0; }

.sticky-steps{ display:grid; gap:24px; }
@media (min-width:1024px){
  .sticky-steps{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:60px; align-items:start; }
  .sticky-steps__visual{ position:sticky; top:calc(var(--hdr-h) + 40px); }
}
.sticky-steps__visual{ display:none; }
@media (min-width:1024px){ .sticky-steps__visual{ display:block; } }
.sticky-steps__list{ display:grid; gap:20px; }
.sticky-step{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); padding:26px 24px;
  transition:border-color var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.sticky-step h3{ margin-bottom:10px; }
.sticky-step p{ color:var(--muted); font-size:16px; margin:0; }
@media (min-width:1024px){
  .js .sticky-step{ opacity:.45; }
  .js .sticky-step.is-active{ opacity:1; border-color:var(--accent); }
}
.sticky-panel{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:34px 30px; min-height:330px;
  display:flex; flex-direction:column; justify-content:center; gap:14px;
}
.sticky-panel__k{ font-family:var(--mono); font-size:68px; font-weight:700; letter-spacing:-.05em; color:var(--accent); line-height:1; }
.sticky-panel__t{ font-size:26px; }
.sticky-panel__d{ color:var(--muted); font-size:16px; margin:0; }

/* ---------- 14. ΤΙΜΕΣ ---------- */
.plans{ display:grid; gap:20px; }
@media (min-width:1024px){ .plans{ grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; } }
.plan{
  position:relative;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 24px; display:flex; flex-direction:column; gap:20px;
  transition:border-color var(--dur) var(--ease);
}
.plan:hover{ border-color:#3A414F; }
.plan--featured{ border-color:var(--accent); }
.plan--featured:hover{ border-color:var(--accent); }

/* Η ετικέτα κάθεται ΠΑΝΩ στο περίγραμμα και το διακόπτει, αντί να
   σπρώχνει το περιεχόμενο προς τα κάτω. Έτσι και τα τρία πακέτα
   ξεκινούν από το ίδιο ύψος. */
.plan__flag{
  position:absolute;
  top:0; left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  white-space:nowrap;
  background:var(--bg);
  z-index:1;
}
.plan__name{ font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.plan--featured .plan__name{ color:var(--accent); }
.plan__price{ font-family:var(--mono); font-weight:700; font-size:clamp(32px,4vw,42px); letter-spacing:-.04em; line-height:1; }
.plan__price small{ display:block; font-family:var(--font); font-size:14px; font-weight:400; color:var(--muted); letter-spacing:0; margin-top:10px; line-height:1.5; }
.plan__for{ font-size:15px; color:var(--muted); margin:0; padding-bottom:20px; border-bottom:1px solid var(--line); }
.plan__inherit{ font-size:14px; color:var(--accent); font-weight:700; margin:0; }
.plan .btn{ margin-top:auto; }

.addons{ display:grid; gap:20px; margin-top:26px; }
@media (min-width:900px){ .addons{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.addon{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px; }
.addon h3{ font-size:20px; }
.addon__price{ font-family:var(--mono); font-weight:700; font-size:26px; letter-spacing:-.03em; color:var(--accent); margin:10px 0 14px; display:block; }

/* Δύο ισότιμες επιλογές τιμής, ίδιο μέγεθος και βάρος. */
.addon__options{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden;
  margin:14px 0 18px;
}
.addon__options > div{ background:var(--surface-2); padding:16px 16px 14px; }
.addon__options strong{
  display:block;
  font-family:var(--mono); font-weight:700; font-size:clamp(19px,2vw,23px);
  letter-spacing:-.035em; color:var(--accent); line-height:1.1;
}
.addon__options span{ display:block; margin-top:7px; font-size:13px; color:var(--muted); line-height:1.4; }
.addon p{ font-size:15px; color:var(--muted); }

.payterms{
  margin-top:26px; padding:20px 22px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface-2);
  font-size:16px;
}
.payterms b{ color:var(--text); }

/* ---------- 15. FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:22px 2px;
  font-size:17px; font-weight:700; letter-spacing:-.015em; line-height:1.4;
  transition:color var(--dur) var(--ease);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--accent); }
.faq__ic{ flex:none; width:18px; height:18px; margin-top:4px; color:var(--accent); transition:transform var(--dur) var(--ease); }
.faq__item[open] .faq__ic{ transform:rotate(45deg); }
.faq__a{ padding:0 2px 24px; max-width:72ch; }
.faq__a p{ color:var(--muted); font-size:16px; }

/* ---------- 16. ΦΟΡΜΑ ---------- */
.contact-grid{ display:grid; gap:28px; }
@media (min-width:1024px){ .contact-grid{ grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:48px; align-items:start; } }
.form{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 20px;
}
@media (min-width:768px){ .form{ padding:32px 30px; } }
.form__grid{ display:grid; gap:18px; }
@media (min-width:640px){ .form__grid--2{ grid-template-columns:1fr 1fr; } }
.form__row{ display:flex; flex-direction:column; gap:8px; }
.form__row label{ font-size:14px; font-weight:500; }
.form__req{ color:var(--accent); }
.form input[type="text"],.form input[type="tel"],.form input[type="email"],.form input[type="number"],.form input[type="url"],.form select,.form textarea{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:13px 14px;
  min-height:48px;
  font-size:16px;
  color:var(--text);
  transition:border-color var(--dur) var(--ease);
}
.form textarea{ min-height:120px; resize:vertical; line-height:1.6; }
.form select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949BA8' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px;
  padding-right:40px;
}
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--accent); outline:none; }
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.form [aria-invalid="true"]{ border-color:var(--alert); }
.form__err{ font-size:13px; color:var(--alert); }
.form__err:empty{ display:none; }
.form__foot{ margin-top:24px; display:grid; gap:14px; }
.form__note{ font-size:13px; color:var(--muted); margin:0; }
.form__ok{
  border:1px solid var(--accent); border-radius:var(--r);
  background:rgba(53,208,138,.07);
  padding:22px; margin-top:20px;
}
.form__ok h3{ color:var(--accent); font-size:19px; margin-bottom:8px; }
.form__ok p{ margin:0; font-size:16px; }
.form__ok[hidden]{ display:none; }
/* Μήνυμα αποτυχίας αποστολής — το μόνο άλλο σημείο με χρώμα σφάλματος. */
.form__fail{
  border:1px solid var(--alert); border-radius:var(--r);
  background:rgba(255,107,90,.07);
  padding:22px; margin-top:20px;
}
.form__fail h3{ color:var(--alert); font-size:19px; margin-bottom:8px; }
.form__fail p{ margin:0; font-size:16px; }
.form__fail[hidden]{ display:none; }
fieldset{ border:0; padding:0; margin:0; }
legend{ padding:0; font-size:14px; font-weight:500; margin-bottom:8px; }

.contact-aside{ display:grid; gap:20px; }
.contact-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; }
.contact-card h3{ font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.contact-card p{ font-size:15px; color:var(--muted); }
.tel-big{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-weight:700;
  font-size:clamp(24px,4.4vw,30px); letter-spacing:-.03em;
  color:var(--text); text-decoration:none;
  min-height:52px;
}
.tel-big:hover{ color:var(--accent); text-decoration:none; }
.tel-big svg{ width:22px; height:22px; color:var(--accent); flex:none; }
.mailto{ font-size:17px; word-break:break-word; }

/* ---------- 17. FOOTER ---------- */
.ftr{ border-top:1px solid var(--line); padding-block:52px 32px; position:relative; z-index:1; }
.ftr__grid{ display:grid; gap:32px; }
@media (min-width:768px){ .ftr__grid{ grid-template-columns:1.4fr 1fr 1fr; gap:40px; } }
@media (min-width:1024px){ .ftr__grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; } }
.ftr h2{ font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.ftr ul{ display:grid; gap:10px; }
.ftr a{ color:var(--muted); font-size:15px; text-decoration:none; }
.ftr a:hover{ color:var(--accent); }
.ftr__brand p{ color:var(--muted); font-size:15px; margin-top:14px; max-width:40ch; }
.ftr__legal{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; align-items:center;
  font-size:13px; color:var(--muted);
}
.ftr__legal ul{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.ftr__legal a{ font-size:13px; }
.ftr__id{ font-family:var(--mono); font-size:12px; }

/* ---------- 18. COOKIE ---------- */
.cookie{
  position:fixed; z-index:120; left:12px; right:12px; bottom:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:20px;
  display:grid; gap:16px;
  max-width:560px;
}
@media (min-width:768px){ .cookie{ left:24px; bottom:24px; right:auto; padding:24px; } }
.cookie[hidden]{ display:none; }
.cookie p{ font-size:14px; color:var(--muted); margin:0; }
.cookie__btns{ display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- 19. LANDING ---------- */
.hdr--lp .hdr__bar{ justify-content:space-between; }

/* ---------- 20. ANIMATION ---------- */
.js [data-reveal]{ opacity:0; transform:translateY(18px); will-change:opacity,transform; }
.js [data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:var(--d,0s);
  will-change:auto;
}
.tr__line{ display:block; overflow:hidden; }
.tr__inner{ display:block; }
@media (min-width:1024px){
  .js .tr:not(.tr--hero) .tr__inner{ transform:translateY(105%); }
  .js .tr:not(.tr--hero).is-in .tr__inner{ transform:none; transition:transform .8s var(--ease); }
  .js .tr:not(.tr--hero).is-in .tr__line:nth-child(2) .tr__inner{ transition-delay:.09s; }
  .js .tr:not(.tr--hero).is-in .tr__line:nth-child(3) .tr__inner{ transition-delay:.18s; }
  .js .tr:not(.tr--hero).is-in .tr__line:nth-child(4) .tr__inner{ transition-delay:.27s; }
  .mesh{ animation:meshDrift 26s var(--ease) infinite alternate; }
}

/* Hero: κίνηση εισόδου με καθαρό CSS, χωρίς αναμονή για JavaScript.
   Έτσι το κείμενο του h1 γίνεται ορατό στο πρώτο render και το LCP
   δεν σέρνεται πίσω από το κατέβασμα του main.js. */
@keyframes heroRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes heroLine{ from{ transform:translateY(105%); } to{ transform:none; } }
.hero__inner > *{ animation:heroRise .5s var(--ease) both; }
.hero__inner > *:nth-child(2){ animation-delay:.04s; }
.hero__inner > *:nth-child(3){ animation-delay:.09s; }
.hero__inner > *:nth-child(4){ animation-delay:.14s; }
.hero__inner > *:nth-child(5){ animation-delay:.19s; }
@media (min-width:1024px){
  .tr--hero .tr__inner{ animation:heroLine .65s var(--ease) both; }
  .tr--hero .tr__line:nth-child(2) .tr__inner{ animation-delay:.07s; }
  .tr--hero .tr__line:nth-child(3) .tr__inner{ animation-delay:.14s; }
  .tr--hero .tr__line:nth-child(4) .tr__inner{ animation-delay:.21s; }
}
@keyframes meshDrift{
  from{ transform:translateX(-50%) translateY(0) scale(1); }
  to{ transform:translateX(-48%) translateY(26px) scale(1.06); }
}
/* Custom cursor — μόνο πάνω από τις κάρτες έργων. Τη θέση και το scale
   τα οδηγεί το JS με lerp· εδώ ελέγχουμε μόνο την εμφάνιση. */
.cursor{
  position:fixed; z-index:130; top:0; left:0;
  padding:9px 15px; border-radius:999px;
  background:var(--accent); color:var(--on-accent);
  font-size:12px; font-weight:700; white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%) scale(.8);
  transition:opacity .2s var(--ease);
}
.cursor.is-on{ opacity:1; }
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .magnetic{ transition:transform .22s var(--ease),background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease); }
  .work--cursor,.work--cursor a,.work--cursor *{ cursor:none; }
}

/* ---------- 21. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .js .tr .tr__inner{ transform:none !important; }
  .hero__inner > *,.tr--hero .tr__inner{ animation:none !important; opacity:1 !important; transform:none !important; }
  .mesh{ animation:none !important; }
  .device--scroll .device__screen img{ transition:none !important; transform:none !important; }
  .cursor{ display:none !important; }
  .tilt .device__chrome{ transform:none !important; }
}

/* ---------- 22. PRINT ---------- */
@media print{
  .hdr,.mnav,.cookie,.cursor,.ba__range{ display:none !important; }
  body{ background:#fff; color:#000; }
  body::before{ display:none; }
}