/* ============================================================
   AIC Engineering & Technology — design-system.css
   Ενιαίο σύστημα: tokens + components για όλες τις σελίδες.
   Κανόνας: κάθε χρώμα, απόσταση, μέγεθος, easing → από token.
   ============================================================ */

/* ---------- 1. FONTS — Inter variable, self-hosted ---------- */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/inter-greek-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0370-03FF,U+1F00-1FFF;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FB01-FB02;
}

/* ---------- 2. TOKENS ---------- */
:root{
  /* Χρώμα */
  --bg:#08080A;
  --surface:#101014;
  --surface-2:#17171C;
  --text:#ECECEC;
  --text-muted:#9FA0A8;
  --text-faint:#7C7D85;          /* τριτεύον — AA σε --bg */
  --border:#26262C;
  --border-bright:#34343C;
  --accent:#F4F4F6;              /* πλατινέ λευκό — CTA, links, focus, glows ΜΟΝΟ */
  --accent-bright:#FFFFFF;
  --accent-ink:#08080A;          /* κείμενο πάνω σε accent */
  --accent-glow:rgba(236,236,238,.14);
  --accent-glow-soft:rgba(236,236,238,.07);
  --grad-metal:linear-gradient(112deg,#ECECEC,#C2C3C9 52%,#888A92);
  --hairline:linear-gradient(90deg,transparent,var(--border) 18%,var(--border) 82%,transparent);

  /* Τυπογραφία — κλίμακα ~1.25, βάρη variable */
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-display:clamp(2.75rem,6vw,4.5rem);
  --fs-h2:clamp(1.75rem,3vw,2.25rem);
  --fs-h3:clamp(1.125rem,1rem + .6vw,1.375rem);
  --fs-body:1.0625rem;
  --fs-small:.9375rem;
  --fs-label:.8125rem;
  --w-display:750;
  --w-head:650;
  --w-semi:600;
  --w-med:520;
  --w-body:420;
  --lh-display:1.02;
  --lh-head:1.12;
  --lh-body:1.65;
  --ls-display:-.035em;
  --ls-head:-.025em;
  --ls-body:-.008em;
  --ls-label:.08em;

  /* Απόσταση — 8px scale */
  --s-05:4px; --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px;
  --s-5:40px; --s-6:48px; --s-8:64px; --s-10:80px; --s-12:96px;
  --gutter:clamp(24px,5vw,40px);
  --sec-pad:clamp(80px,12vh,160px);
  --sec-pad-s:clamp(64px,9vh,120px);
  --maxw:1180px;

  /* Ακτίνες */
  --r-s:8px; --r-m:16px; --r-l:24px; --r-pill:999px;

  /* Elevation — ελαφρύτερες επιφάνειες, όχι βαριές σκιές */
  --elev-hover:0 16px 40px rgba(0,0,0,.35);

  /* Κίνηση */
  --ease-entrance:cubic-bezier(.23,1,.32,1);
  --ease-interaction:cubic-bezier(.32,.72,0,1);
  --dur-reveal:560ms;
  --dur-fast:180ms;
  --reveal-shift:24px;
}

/* ---------- 3. BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:var(--font);
  font-size:var(--fs-body);
  font-weight:var(--w-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
svg{display:block}
img{max-width:100%}
h1,h2,h3,h4{font-weight:var(--w-head);letter-spacing:var(--ls-head);line-height:var(--lh-head);text-wrap:balance}
p{text-wrap:pretty}
::selection{background:rgba(236,236,238,.26);color:#08080A}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-s)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:fixed;left:-999px;top:0;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:var(--r-s);z-index:300}
.skip:focus{left:12px;top:12px}

/* Λεπτό scrollbar */
html{scrollbar-width:thin;scrollbar-color:var(--border-bright) var(--bg)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-pill);border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--border-bright)}

/* Grain — ενιαίο, αδιόρατο, compositor-cheap */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll reveals */
.js [data-reveal]{opacity:0;transform:translateY(var(--reveal-shift));transition:opacity var(--dur-reveal) var(--ease-entrance),transform var(--dur-reveal) var(--ease-entrance)}
.js [data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1!important;transform:none!important;transition:none}
  *{scroll-behavior:auto!important}
}

/* ---------- 4. NAV ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;height:64px;z-index:100;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,backdrop-filter .3s;
}
.nav[data-scrolled="true"]{
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom-color:var(--border);
}
.nav-in{max-width:var(--maxw);margin-inline:auto;height:100%;padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.brand{display:inline-flex;align-items:center;gap:.6em}
.brand .mark{height:22px;color:var(--text)}
.brand .sub{font-size:.56rem;font-weight:var(--w-med);letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);line-height:1.2}
.brand .sub b{display:block;color:var(--text-muted);font-weight:var(--w-semi);letter-spacing:.14em}
.nav-links{display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-label);font-weight:var(--w-med);color:var(--text-muted)}
.nav-links a{position:relative;padding:var(--s-05) 0;white-space:nowrap;transition:color var(--dur-fast) var(--ease-interaction)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--text);transition:right .3s var(--ease-interaction)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{right:0}
.nav-cta{font-size:var(--fs-label);padding:10px 18px}
.langbtn{background:none;border:1px solid var(--border);color:var(--text-muted);font:inherit;font-size:.74rem;font-weight:var(--w-semi);letter-spacing:.06em;padding:7px 12px;border-radius:var(--r-pill);cursor:pointer;min-height:32px;transition:border-color var(--dur-fast) var(--ease-interaction),color var(--dur-fast) var(--ease-interaction)}
.langbtn:hover{color:var(--text);border-color:var(--border-bright)}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;flex-direction:column;justify-content:center;gap:5px}
.burger span{display:block;width:20px;height:1.5px;background:var(--text);margin:0 auto;transition:transform .3s var(--ease-interaction),opacity .3s}
.nav[data-open="true"] .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav[data-open="true"] .burger span:nth-child(2){opacity:0}
.nav[data-open="true"] .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- 5. BUTTONS ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-size:var(--fs-body);font-weight:var(--w-med);padding:13px 26px;min-height:44px;
  border-radius:var(--r-pill);cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-interaction),color var(--dur-fast) var(--ease-interaction),
             border-color var(--dur-fast) var(--ease-interaction),box-shadow .22s var(--ease-interaction),
             transform var(--dur-fast) var(--ease-interaction);
}
.btn-primary{background:var(--accent);color:var(--accent-ink);font-weight:var(--w-semi)}
.btn-primary:hover{background:var(--accent-bright);box-shadow:0 8px 28px var(--accent-glow)}
.btn-primary:active{transform:translateY(1px)}
.btn-outline{border-color:var(--border-bright);color:var(--text)}
.btn-outline:hover{background:var(--surface);border-color:var(--text-faint)}
.btn-ghost{color:var(--text);padding-inline:var(--s-05)}
.btn-ghost .arw{display:inline-block;color:var(--accent);transition:transform .2s var(--ease-interaction)}
.btn-ghost:hover .arw{transform:translateX(6px)}

/* ---------- 6. ΛΟΓΟΤΥΠΟ (hero lockup) ---------- */
.logo{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.logo .mark{color:var(--text)}
.logo .sub{font-weight:var(--w-med);letter-spacing:.42em;text-transform:uppercase;color:var(--text-muted);font-size:clamp(.6rem,1.4vw,.9rem);margin-top:clamp(14px,2vw,24px)}
.logo .rule{height:1px;background:var(--grad-metal);margin-top:clamp(16px,2.4vw,26px);width:clamp(180px,38vw,360px);opacity:.85}
.logo .site{font-size:.78rem;letter-spacing:.16em;color:var(--text-muted);margin-top:14px;font-weight:var(--w-med);text-transform:lowercase}
.draw path{stroke-dasharray:var(--len,800);stroke-dashoffset:var(--len,800)}
.anim .draw.go path{animation:draw 1.5s var(--ease-entrance) forwards}
.draw.go path:nth-child(2){animation-delay:.18s}
.draw.go path:nth-child(3){animation-delay:.3s}
.draw.go path:nth-child(4){animation-delay:.42s}
@keyframes draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.draw path{stroke-dasharray:none;stroke-dashoffset:0}}

/* ---------- 7. HERO (αρχική) ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;padding:128px 0 var(--s-8);overflow:clip}
.hero-bp{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.hero-bp svg{width:100%;height:100%}
.hero .veil{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(110% 70% at 50% 6%,var(--accent-glow-soft),transparent 62%);
}
.hero-in{position:relative;z-index:2;width:100%}
.hero-grid{display:grid;gap:clamp(28px,4.5vw,44px);align-items:center;text-align:center}
.hero-logo{justify-self:center}
.hero-logo .mark{height:clamp(72px,15vw,148px)}
.hero h1{font-size:var(--fs-display);font-weight:var(--w-display);letter-spacing:var(--ls-display);line-height:var(--lh-display);max-width:18ch;margin-inline:auto}
.hero h1 .grad{background:var(--grad-metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:var(--fs-h3);font-weight:var(--w-body);color:var(--text-muted);max-width:62ch;margin:var(--s-3) auto 0}
.hero-cta{display:flex;gap:var(--s-2);justify-content:center;flex-wrap:wrap;margin-top:var(--s-5)}
.hero-meta{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap;margin-top:var(--s-6);font-size:var(--fs-label);font-weight:var(--w-med);color:var(--text-faint);letter-spacing:var(--ls-label);text-transform:uppercase}
.hero-meta span{display:inline-flex;align-items:center;gap:9px}
.hero-meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--text-faint)}

/* ---------- 8. MARQUEE ---------- */
.marquee{
  position:relative;overflow:hidden;padding-block:var(--s-3);background:var(--surface);
  border-block:1px solid transparent;
  border-image:var(--hairline) 1;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;gap:var(--s-8);width:max-content;white-space:nowrap;will-change:transform}
@media(prefers-reduced-motion:no-preference){.marquee-track{animation:scrollx 35s linear infinite}}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee b{font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:var(--w-semi);letter-spacing:var(--ls-head);color:var(--text)}
.marquee i{color:var(--text-faint);font-style:normal}
@keyframes scrollx{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- 9. SECTIONS ---------- */
.sec{padding-block:var(--sec-pad);position:relative}
.sec::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hairline)}
.hero + .sec::before,.marquee + .sec::before{display:none}
.sec-2{background:var(--surface)}
.eyebrow{font-size:var(--fs-label);font-weight:var(--w-semi);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--s-2);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:var(--s-3);height:1px;background:var(--text-muted);opacity:.6}
h2{font-size:var(--fs-h2)}
.sec-head{max-width:760px;margin-bottom:clamp(40px,6vh,72px)}
.sec-head .lead{font-size:var(--fs-h3);font-weight:var(--w-body);color:var(--text-muted);margin-top:var(--s-2)}

/* ---------- 10. CHIPS ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-top:var(--s-2)}
.chip{
  font-size:.72rem;font-weight:var(--w-med);color:var(--text-muted);
  background:var(--surface);border:1px solid var(--border);
  padding:var(--s-05) 12px;border-radius:var(--r-pill);letter-spacing:.01em;
  transition:border-color var(--dur-fast) var(--ease-interaction),color var(--dur-fast) var(--ease-interaction),background var(--dur-fast) var(--ease-interaction);
}
.chip:hover,.tile:hover .chip,.card:hover .chip{border-color:var(--border-bright);color:var(--text);background:var(--surface-2)}

/* ---------- 11. ΚΑΡΤΕΣ / GRIDS ---------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s-2)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.tile,.card{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-l);padding:var(--s-4);overflow:hidden;
  transition:transform var(--dur-fast) var(--ease-interaction),border-color var(--dur-fast) var(--ease-interaction),
             background var(--dur-fast) var(--ease-interaction),box-shadow .22s var(--ease-interaction);
}
.sec-2 .tile,.sec-2 .card{background:var(--surface-2)}
.tile::after,.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .22s var(--ease-interaction);background:radial-gradient(130% 90% at 50% -10%,rgba(236,236,236,.07),transparent 60%)}
.tile:hover,.card:hover{transform:translateY(-3px);border-color:var(--border-bright);background:var(--surface-2);box-shadow:var(--elev-hover)}
.sec-2 .tile:hover,.sec-2 .card:hover{background:var(--surface)}
.tile:hover::after,.card:hover::after{opacity:1}
.ico{width:48px;height:48px;border-radius:var(--r-m);display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);margin-bottom:var(--s-3);transition:border-color var(--dur-fast) var(--ease-interaction)}
.sec-2 .ico{background:var(--surface)}
.ico svg{width:24px;height:24px;stroke:var(--text);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-fast) var(--ease-interaction)}
.tile:hover .ico,.card:hover .ico{border-color:var(--border-bright)}
.tile:hover .ico svg,.card:hover .ico svg{transform:translateY(-1px)}
.tile h3,.card h3{font-size:var(--fs-h3);margin:0 0 10px}
.tile p,.card p{color:var(--text-muted);font-size:var(--fs-small);line-height:1.6}
.card .ico{margin-bottom:var(--s-3)}

/* Ευρετήριο υπηρεσιών (αρχική) */
.idxgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px)}
.idxcat{font-size:var(--fs-label);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--ls-label);margin-bottom:var(--s-2);font-weight:var(--w-semi)}
.idxlink{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-2);border:1px solid var(--border);border-radius:var(--r-m);margin-bottom:var(--s-1);color:var(--text-muted);font-weight:var(--w-body);background:var(--surface);transition:transform var(--dur-fast) var(--ease-interaction),border-color var(--dur-fast) var(--ease-interaction),background var(--dur-fast) var(--ease-interaction),color var(--dur-fast) var(--ease-interaction)}
.idxlink:hover{transform:translateX(4px);border-color:var(--border-bright);background:var(--surface-2);color:var(--text)}
.idxlink .ic{width:40px;height:40px;flex:0 0 40px;border-radius:var(--r-s);display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);transition:border-color var(--dur-fast) var(--ease-interaction)}
.idxlink .ic svg{width:20px;height:20px;stroke:var(--text);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.idxlink:hover .ic{border-color:var(--border-bright)}
.idxlink .lbl{flex:1}
.idxlink .ar{color:var(--accent);transition:transform var(--dur-fast) var(--ease-interaction)}
.idxlink:hover .ar{transform:translateX(4px)}
@media(max-width:760px){.idxgrid{grid-template-columns:1fr}}

/* ---------- 12. ΔΙΑΔΙΚΑΣΙΑ 01–04 ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2);position:relative}
.steps::before{content:"";position:absolute;left:2%;right:2%;top:56px;height:1px;background:var(--hairline);z-index:0}
.step{
  position:relative;z-index:1;padding:var(--s-4) var(--s-3);border:1px solid var(--border);
  border-radius:var(--r-l);background:var(--surface);overflow:hidden;
  transition:transform var(--dur-fast) var(--ease-interaction),border-color var(--dur-fast) var(--ease-interaction),background var(--dur-fast) var(--ease-interaction);
}
.sec-2 .step{background:var(--surface-2)}
.step:hover{transform:translateY(-3px);border-color:var(--border-bright)}
.step .num{
  position:absolute;top:2px;right:14px;z-index:0;
  font-size:clamp(64px,7vw,92px);font-weight:var(--w-display);letter-spacing:var(--ls-display);
  line-height:1;color:transparent;background:none;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(236,236,236,.14);
  user-select:none;pointer-events:none;
}
@supports not (-webkit-text-stroke:1px #fff){.step .num{color:rgba(236,236,236,.08);-webkit-text-fill-color:rgba(236,236,236,.08)}}
.step h3{position:relative;z-index:1;font-size:var(--fs-h3);margin:var(--s-6) 0 var(--s-1)}
.step p{position:relative;z-index:1;color:var(--text-muted);font-size:var(--fs-small);line-height:1.6}

/* ---------- 13. TEAMS ---------- */
.teams{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
.team{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-m);padding:var(--s-3);transition:transform var(--dur-fast) var(--ease-interaction),border-color var(--dur-fast) var(--ease-interaction)}
.team:hover{transform:translateY(-2px);border-color:var(--border-bright)}
.team .role{display:flex;align-items:center;gap:10px;font-weight:var(--w-med);letter-spacing:var(--ls-head);margin-bottom:10px}
.team .role .d{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent-glow)}
.team p{color:var(--text-muted);font-size:var(--fs-small);line-height:1.6}

/* ---------- 14. SIGNATURE ---------- */
.sig{display:grid;grid-template-columns:1fr;gap:clamp(36px,6vw,72px)}
.sig-aside{align-self:start}
.sig-aside .lead{font-size:var(--fs-h3);font-weight:var(--w-body);color:var(--text-muted);margin-top:var(--s-3);max-width:38ch}
.sig-list{position:relative;padding-left:34px}
.sig-line{position:absolute;left:8px;top:6px;bottom:6px;width:2px;overflow:hidden}
.sig-line svg{height:100%;width:2px}
.sig-line path{stroke:var(--border-bright);stroke-width:2;fill:none}
.sig-item{position:relative;padding:18px 0;border-bottom:1px solid var(--border)}
.sig-item::before{content:"";position:absolute;left:-33px;top:25px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--text-faint);transition:border-color var(--dur-fast) var(--ease-interaction),box-shadow var(--dur-fast) var(--ease-interaction)}
.sig-item:hover::before{border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow)}
.sig-item strong{display:block;font-size:var(--fs-body);font-weight:var(--w-med);letter-spacing:var(--ls-head)}
.sig-item span{color:var(--text-faint);font-size:var(--fs-small)}
@media(min-width:900px){
  .sig{grid-template-columns:.85fr 1.15fr}
  .sig-aside{position:sticky;top:120px}
  .sig-list{columns:2;column-gap:var(--s-6)}
  .sig-item{break-inside:avoid}
  .sig-line{display:none}
}

/* ---------- 15. SPLIT + PANELS ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,86px);align-items:center}
.split .copy h2{margin-bottom:var(--s-3)}
.split .copy p{color:var(--text-muted);max-width:480px}
.feat{list-style:none;margin-top:var(--s-4)}
.feat li{display:flex;gap:var(--s-2);align-items:flex-start;padding:var(--s-2) 0;border-top:1px solid var(--border)}
.feat li:last-child{border-bottom:1px solid var(--border)}
.feat .k{font-size:.74rem;font-weight:var(--w-semi);letter-spacing:.04em;color:var(--text-muted);padding-top:3px;min-width:48px;text-transform:uppercase}
.feat .v strong{display:block;font-weight:var(--w-med);margin-bottom:2px}
.feat .v span{color:var(--text-faint);font-size:var(--fs-small)}
.panel{aspect-ratio:1/1;border-radius:var(--r-l);position:relative;overflow:hidden;border:1px solid var(--border);background:linear-gradient(150deg,var(--surface),var(--surface-2))}
.panel.bright{background:linear-gradient(150deg,var(--surface-2),var(--surface));border-color:var(--border-bright)}
.panel .glow{position:absolute;top:-30%;right:-30%;width:90%;height:90%;background:radial-gradient(closest-side,var(--accent-glow),transparent 65%)}
.panel svg.deco{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.panel .stat{position:absolute;left:var(--s-4);bottom:var(--s-4);z-index:2;color:var(--text)}
.panel .stat b{display:block;font-size:clamp(2.6rem,5vw,3.8rem);font-weight:var(--w-display);letter-spacing:var(--ls-display);line-height:1}
.panel .stat em{font-style:normal;font-size:var(--fs-body);color:var(--text-muted)}
.panel .deco-en,.panel .deco-sec{opacity:.8}
.deco-sec .pulse{animation:gpulse 2.4s ease-in-out infinite}
.deco-en .eb{transform-box:fill-box;transform-origin:left center;animation:ebin .55s var(--ease-entrance) backwards}
.deco-en .eb2{animation-delay:.07s}.deco-en .eb3{animation-delay:.14s}.deco-en .eb4{animation-delay:.21s}.deco-en .eb5{animation-delay:.28s}.deco-en .eb6{animation-delay:.35s}
@keyframes ebin{from{transform:scaleX(.03);opacity:0}}
@keyframes gpulse{0%,100%{opacity:.45}50%{opacity:1}}
.deco-sec .ring{transform-box:view-box;transform-origin:200px 215px;animation:radar 3.2s ease-out infinite}
.deco-sec .ring.r2{animation-delay:1.06s}.deco-sec .ring.r3{animation-delay:2.13s}
@keyframes radar{0%{transform:scale(.3);opacity:.6}80%{opacity:0}100%{transform:scale(1.75);opacity:0}}
.panel .rec{position:absolute;top:18px;left:20px;z-index:3;display:inline-flex;align-items:center;gap:7px;font-size:.62rem;font-weight:700;letter-spacing:.18em;color:var(--text);opacity:.92}
.panel .rec i{width:9px;height:9px;border-radius:50%;background:#FF3B3B;box-shadow:0 0 10px #FF3B3B;animation:blink 1.4s steps(1,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.12}}
.panel .scan{position:absolute;left:var(--s-1);right:var(--s-1);top:0;height:2px;z-index:2;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(236,236,236,.5),transparent);animation:scanline 3.6s linear infinite}
@keyframes scanline{0%{transform:translateY(6px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(460px);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .deco-en .eb,.deco-sec .pulse,.deco-sec .ring,.panel .rec i{animation:none}
  .deco-sec .ring.r2,.deco-sec .ring.r3{opacity:0}
  .panel .scan{display:none}
}

/* ---------- 16. BAND (τελικό CTA) ---------- */
.band{text-align:center;position:relative;overflow:hidden;background:radial-gradient(70% 90% at 50% 0%,var(--accent-glow-soft),transparent 64%),var(--bg)}
.band h2{margin-bottom:var(--s-2)}
.band p{color:var(--text-muted);max-width:580px;margin:0 auto var(--s-4);font-size:var(--fs-h3)}

/* ---------- 17. FACTS + CREDS (credentials band) ---------- */
/* flex+grow: οι μισογεμάτες σειρές γεμίζουν το πλάτος — πουθενά κενές τρύπες */
.facts{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-bottom:clamp(40px,6vh,64px)}
.fact{flex:1 1 148px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-05);text-align:center;padding:var(--s-3) var(--s-2);border:1px solid var(--border);border-radius:var(--r-m);background:var(--surface-2);transition:border-color var(--dur-fast) var(--ease-interaction),background var(--dur-fast) var(--ease-interaction),transform var(--dur-fast) var(--ease-interaction)}
.fact:hover{border-color:var(--border-bright);transform:translateY(-2px)}
.fact b{font-weight:var(--w-head);letter-spacing:var(--ls-head);color:var(--text);font-size:var(--fs-h3);line-height:1.1}
.fact span{color:var(--text-faint);font-size:.72rem;text-transform:uppercase;letter-spacing:var(--ls-label)}
.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2)}
@media(max-width:1000px){.creds{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.creds{grid-template-columns:1fr}}
.cred{padding:var(--s-4) var(--s-3);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-m);transition:border-color var(--dur-fast) var(--ease-interaction),transform var(--dur-fast) var(--ease-interaction)}
.cred:hover{border-color:var(--border-bright);transform:translateY(-2px)}
.cred .big{font-size:1.55rem;font-weight:var(--w-display);letter-spacing:var(--ls-head);background:var(--grad-metal);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
.cred strong{display:block;font-weight:var(--w-med);margin-bottom:var(--s-05)}
.cred span{color:var(--text-faint);font-size:var(--fs-small)}

/* ---------- 18. FAQ ---------- */
.faq{max-width:840px;display:grid;gap:var(--s-1)}
.sec .faq{margin-inline:auto}
.faq details{border:1px solid var(--border);border-radius:var(--r-m);background:var(--surface);padding:0 var(--s-3);transition:border-color var(--dur-fast) var(--ease-interaction),background var(--dur-fast) var(--ease-interaction)}
.sec-2 .faq details{background:var(--surface-2)}
.faq details[open]{border-color:var(--border-bright)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s-3) 0;font-weight:var(--w-med);font-size:var(--fs-body);display:flex;justify-content:space-between;gap:var(--s-2);align-items:center;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.4rem;font-weight:var(--w-body);line-height:1;transition:transform .2s var(--ease-interaction)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--text-muted);padding:0 0 var(--s-3);max-width:70ch}

/* ---------- 19. ΦΟΡΜΑ (Επικοινωνία) ---------- */
.contact{text-align:center;overflow:hidden}
.sec.contact::after{content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:920px;height:520px;border-radius:50%;background:radial-gradient(closest-side,var(--accent-glow-soft),transparent 70%);pointer-events:none}
.contact .wrap{position:relative;z-index:1}
.contact h2{font-size:var(--fs-display);font-weight:var(--w-display);letter-spacing:var(--ls-display);margin-bottom:var(--s-2)}
.contact .lead{font-size:var(--fs-h3);color:var(--text-muted);max-width:560px;margin:0 auto var(--s-6)}
.form{max-width:620px;margin-inline:auto;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);padding:clamp(26px,4vw,40px)}
.field{margin-bottom:var(--s-2)}
.field label{display:block;font-size:var(--fs-label);font-weight:var(--w-med);color:var(--text-muted);margin-bottom:var(--s-1)}
.field input,.field textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-s);
  padding:14px 16px;min-height:44px;color:var(--text);font-family:inherit;font-size:var(--fs-body);
  transition:border-color var(--dur-fast) var(--ease-interaction),box-shadow var(--dur-fast) var(--ease-interaction);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-faint)}
.field input:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(236,236,238,.16)}
.field textarea{resize:vertical;min-height:130px}
.form .btn-primary{width:100%;justify-content:center;margin-top:var(--s-1);padding:15px}
.hp{position:absolute;left:-9999px}
.form-note{font-size:var(--fs-label);color:var(--text-faint);margin-top:var(--s-2);text-align:center}
.form-note a{color:var(--text-muted);transition:color var(--dur-fast) var(--ease-interaction)}
.form-note a:hover{color:var(--text)}
.form-err{color:#FF8A8A;font-size:.86rem;text-align:center;margin-top:12px;min-height:1em}
.form-msg{display:none;text-align:center;padding:var(--s-5) var(--s-2);font-size:var(--fs-h3);font-weight:var(--w-med);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);max-width:620px;margin-inline:auto}
.form-msg .chk{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--accent);margin-bottom:var(--s-2);box-shadow:0 0 32px var(--accent-glow)}
.form-msg .chk svg{width:26px;height:26px;stroke:var(--accent-ink);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 20. FOOTER ---------- */
footer{background:#050507;color:var(--text-faint);padding-block:var(--s-8) var(--s-4);font-size:var(--fs-small);border-top:1px solid var(--border)}
.f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s-5);margin-bottom:var(--s-5)}
.f-brand p{max-width:330px;line-height:1.6;margin-top:var(--s-2);color:var(--text-faint)}
.f-col h3,.f-col h4{color:var(--text);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;margin-bottom:var(--s-2);font-weight:var(--w-semi)}
.f-col a{display:block;padding:6px 0;transition:color var(--dur-fast) var(--ease-interaction)}
.f-col a:hover{color:var(--text)}
.f-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-2);border-top:1px solid var(--border);padding-top:var(--s-3);font-size:.82rem}
.f-bottom a:hover{color:var(--text)}
.f-legal{margin-top:var(--s-4);text-align:center;color:var(--text-faint);font-size:.72rem;line-height:1.7;letter-spacing:.06em}
.f-legal i{font-style:normal;opacity:.55;margin-inline:.45em}

/* ---------- 21. ΥΠΟΣΕΛΙΔΕΣ (guides/services) ---------- */
.crumb{padding-top:88px;font-size:var(--fs-label);color:var(--text-faint)}
.crumb a{transition:color var(--dur-fast) var(--ease-interaction)}
.crumb a:hover{color:var(--text)}
.crumb span{color:var(--text-muted)}
.phero{padding:var(--s-3) 0 var(--s-1);position:relative;overflow:hidden}
.phero .veil{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(110% 70% at 50% 0%,var(--accent-glow-soft),transparent 60%)}
.phero::before{content:"";position:absolute;top:-130px;right:-90px;width:480px;height:480px;border-radius:50%;background:radial-gradient(closest-side,var(--accent-glow-soft),transparent 72%);pointer-events:none;z-index:0}
.phero-in{position:relative;z-index:2}
.phero h1{font-size:clamp(2.25rem,5vw,3.5rem);font-weight:var(--w-display);letter-spacing:var(--ls-display);line-height:var(--lh-display);max-width:20ch}
.phero h1 .grad{background:var(--grad-metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.answer{font-size:var(--fs-h3);font-weight:var(--w-body);color:var(--text-muted);max-width:60ch;margin:var(--s-3) 0 0;border-left:2px solid var(--accent);padding-left:var(--s-3)}
.phero-cta{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-4)}
.prose{max-width:760px}
.prose h2{margin:0 0 var(--s-2)}
.prose h3{font-size:var(--fs-h3);margin:var(--s-4) 0 10px}
.prose p{color:var(--text-muted);margin:0 0 var(--s-2)}
.prose strong{color:var(--text);font-weight:var(--w-semi)}
.prose ul{list-style:none;margin:var(--s-1) 0 var(--s-2)}
.prose ul li{position:relative;padding:var(--s-1) 0 var(--s-1) 26px;color:var(--text-muted);border-bottom:1px solid var(--border)}
.prose ul li::before{content:"";position:absolute;left:2px;top:17px;width:7px;height:7px;border-radius:50%;background:var(--text-faint)}
.callout{border:1px solid var(--border-bright);background:var(--surface-2);border-radius:var(--r-m);padding:var(--s-3);color:var(--text-muted)}
.callout strong{color:var(--text)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-small);border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden}
.tbl caption{caption-side:bottom;color:var(--text-faint);font-size:.78rem;padding-top:10px;text-align:left}
.tbl th,.tbl td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--border)}
.tbl thead th{background:var(--surface-2);color:var(--text);font-weight:var(--w-semi);letter-spacing:.02em}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody td{color:var(--text-muted)}
.tbl tbody td:first-child{color:var(--text);font-weight:var(--w-med)}
.wrapx{overflow-x:auto}
.escale{display:grid;gap:6px;max-width:440px}
.escale .row{display:flex;align-items:center;gap:12px}
.escale .bar{height:26px;border-radius:6px;display:flex;align-items:center;padding-left:12px;color:#0A0A0A;font-weight:700;font-size:.82rem;letter-spacing:.02em}
.escale .lab{color:var(--text-faint);font-size:.78rem}
.cols-2a{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,72px);align-items:start}
@media(max-width:860px){.cols-2a{grid-template-columns:1fr}}
.trust{display:flex;flex-wrap:wrap;gap:var(--s-1);justify-content:center;margin-top:var(--s-4)}
.trust .t{display:inline-flex;align-items:center;gap:var(--s-1);padding:var(--s-1) var(--s-2);border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);font-size:var(--fs-label);color:var(--text-muted)}
.trust .t b{color:var(--text);font-weight:var(--w-semi)}
.updated{color:var(--text-faint);font-size:.8rem;margin-top:var(--s-4)}

/* ---------- 22. ΕΙΚΟΝΕΣ — ενιαία μεταχείριση ---------- */
.ph{position:relative;margin:0;border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/9}
.ph img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) contrast(1.02) brightness(.82)}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,8,10,.18),rgba(8,8,10,.42))}
.shot{position:relative;margin:0 0 var(--s-1);border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/9}
.shot img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) contrast(1.02) brightness(.82)}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,8,10,.18),rgba(8,8,10,.42))}
.aboutshot{position:relative;margin:0;border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/9}
.aboutshot img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) contrast(1.02) brightness(.7)}
.aboutshot::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,8,10,.18),rgba(8,8,10,.42))}
@media(max-width:860px){.aboutshot{order:-1;max-width:480px;margin-inline:auto;width:100%}}

/* ---------- 23. ΕΜΠΕΙΡΙΑ (xp) ---------- */
.xp{position:relative;overflow:hidden;background:var(--bg)}
.xp .xpbg{position:absolute;inset:0;opacity:.3;z-index:0;filter:grayscale(.25) contrast(1.05)}
.xp::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,8,10,.78),rgba(8,8,10,.55)),radial-gradient(90% 70% at 70% 10%,transparent,rgba(8,8,10,.6))}
.xp .wrap{position:relative;z-index:2}
.xpstats{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,64px);margin-top:var(--s-5)}
.xpstats div{min-width:120px}
.xpstats b{display:block;font-size:clamp(2rem,5vw,3.2rem);font-weight:var(--w-display);letter-spacing:var(--ls-head);background:var(--grad-metal);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.05}
.xpstats span{color:var(--text-faint);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.06em}

/* ---------- 24. UTILITIES (8px scale) ---------- */
.u-mt-1{margin-top:var(--s-1)}.u-mt-2{margin-top:var(--s-2)}.u-mt-3{margin-top:var(--s-3)}.u-mt-4{margin-top:var(--s-4)}
.u-center{text-align:center;margin-inline:auto}
.u-jcenter{justify-content:center}
.u-maxw-64{max-width:640px}.u-maxw-78{max-width:780px}.u-maxw-84{max-width:840px}
.u-ml-1{margin-left:var(--s-1)}
.u-fs-small{font-size:var(--fs-small)}
.u-faint{color:var(--text-faint)}
.u-muted-note{font-size:var(--fs-small);color:var(--text-muted)}

/* ---------- 25. RESPONSIVE ---------- */
@media(max-width:1000px){
  .bento,.grid-3,.grid-4,.teams,.steps{grid-template-columns:repeat(2,1fr)}
  .steps::before{display:none}
}
@media(max-width:860px){
  .nav-links{position:fixed;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);padding:var(--s-1) var(--gutter) var(--s-3);border-bottom:1px solid var(--border);transform:translateY(-135%);transition:transform .4s var(--ease-entrance)}
  .nav-links a{padding:var(--s-2) 0;font-size:1.05rem;border-bottom:1px solid var(--border);color:var(--text)}
  .nav-links a::after{display:none}
  .nav-links .nav-cta{margin-top:var(--s-2);width:100%;border-bottom:0;font-size:1rem;color:var(--accent-ink)}
  .nav > .nav-in > .nav-cta{display:none}
  .nav[data-open="true"] .nav-links{transform:translateY(0)}
  .burger{display:flex}
  .langbtn{margin-left:auto}
  .split{grid-template-columns:1fr;gap:var(--s-5)}
  .split .panel{order:-1;max-width:430px;margin-inline:auto;width:100%}
  .f-top{grid-template-columns:1fr 1fr}
  .f-brand{grid-column:1/-1}
}
@media(max-width:560px){
  .bento,.grid-3,.grid-4,.teams,.steps{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
  .hero-cta,.phero-cta{flex-direction:column}
  .btn-ghost{width:auto}
}
@media(pointer:coarse){
  .langbtn{min-height:44px;min-width:44px}
  .nav-links a,.f-col a{min-height:44px;display:flex;align-items:center}
  .f-col a{display:flex}
}
@view-transition{navigation:auto}