/* Self-hosted γραμματοσειρές (SIL OFL) — χωρίς κλήσεις στη Google (GDPR) */
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/manrope-greek-300-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/manrope-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manrope-greek-400-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manrope-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/manrope-greek-500-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/manrope-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-greek-600-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Didact Gothic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/didact-gothic-greek-400-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Didact Gothic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/didact-gothic-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* CATALITIS · catalitis.gr · one-page
   Γραμματοσειρές: Didact Gothic (τίτλοι) + Manrope (κείμενο) από Google Fonts. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg{max-width:100%}
[hidden]{display:none!important}
/* Type: Didact Gothic (το γεωμετρικό ύφος του λογοτύπου) για wordmark & λέξεις-κλειδιά · Manrope Light για τα μεγάλα κείμενα.
   Layout: λευκό, πολύς αέρας. Το «Α» του λογοτύπου (τρίγωνο με μετατοπισμένη μπάρα) γίνεται το γραφικό μοτίβο.
   Κίνηση ανά section: hero = σχεδίαση του Α + γραμμές που ανεβαίνουν · δήλωση = λέξεις που «ανάβουν» με το scroll ·
   ταινία = δύο σειρές αντίθετα · υπηρεσίες = γραμμές που απλώνουν · έργο = κάρτα που μεγαλώνει + κύκλος που ακολουθεί τον κέρσορα ·
   επικοινωνία = υπογράμμιση που τρέχει · footer = τεράστιο wordmark που ανεβαίνει. */
:root{
  --bg:#FFFFFF; --fg:#0A0A0A; --muted:#8C8C8C; --faint:#CFCFCF; --line:#ECECEC; --soft:#F4F4F4;
  --f:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-display:"Didact Gothic","Century Gothic","Avant Garde",Futura,"Manrope",sans-serif;
  --ease:cubic-bezier(.7,0,.2,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0A0A0A;--fg:#F4F4F4;--muted:#8C8C8C;--faint:#3A3A3A;--line:#202020;--soft:#141414;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0A0A0A;--fg:#F4F4F4;--muted:#8C8C8C;--faint:#3A3A3A;--line:#202020;--soft:#141414;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--fg);font-family:var(--f);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--fg);outline-offset:4px;border-radius:2px}
h1,h2,h3,p{margin:0}
.d{font-family:var(--f-display);font-weight:400;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.tag{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:14px}
.tag::before{content:"";width:28px;height:1px;background:currentColor}

/* ── Header ───────────────────────── */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent}
header .wrap{display:flex;justify-content:space-between;align-items:center;padding-block:26px;transition:padding .3s}
.logo{display:flex;align-items:center;color:var(--fg)}
.logo svg{display:block;width:clamp(120px,12vw,150px);height:auto;aspect-ratio:651.2/148.2;fill:currentColor}

.hello{font-size:.88rem;display:inline-flex;align-items:center;gap:10px;padding:10px 20px;border:1px solid var(--fg);border-radius:999px;position:relative;overflow:hidden;isolation:isolate}
.hello::before{content:"";position:absolute;inset:0;background:var(--fg);transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1;border-radius:inherit}
.hello:hover{color:var(--bg)}
.hello:hover::before{transform:none}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    header{animation:hdr linear both;animation-timeline:scroll(root);animation-range:0 160px}
    header .wrap{animation:hdrpad linear both;animation-timeline:scroll(root);animation-range:0 160px}
  }
}
@keyframes hdr{to{border-bottom-color:var(--line)}}
@keyframes hdrpad{to{padding-block:14px}}

/* ── Hero ─────────────────────────── */
.hero{position:relative;padding-block:clamp(64px,11vw,150px) clamp(72px,10vw,140px)}
.hero-grid{display:block}
.hero h1{font-weight:300;font-size:clamp(2.4rem,7.6vw,7rem);line-height:1.06;letter-spacing:-.035em}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln > span{display:inline-block}
.swap{display:inline-grid;vertical-align:bottom;overflow:hidden;height:1.12em;background:var(--fg);color:var(--bg);padding:0 .22em;border-radius:.14em;margin-right:.06em}
.swap span{grid-area:1/1;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.03em;font-weight:400;transform:translateY(110%)}
.swap span.on{transform:none}
.swap span.out{transform:translateY(-110%)}
.hero{padding-block:clamp(64px,10vw,140px) clamp(56px,7vw,96px)}
.creds{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-bottom:22px;margin-bottom:clamp(48px,7vw,96px);border-bottom:1px solid var(--line);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.creds ul{list-style:none;margin:0;padding:0;display:flex;gap:10px 28px;flex-wrap:wrap}
.creds li{font-family:var(--f-display);color:var(--fg);letter-spacing:.2em;font-size:.86rem}
.hero h1{max-width:13ch}
.hero-foot{margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:minmax(0,1.2fr) auto;align-items:end;gap:32px 64px;border-top:1px solid var(--fg);padding-top:28px}
.hero-foot p{color:var(--muted);font-size:1.1rem;max-width:34em}
.ctas{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:12px;background:var(--fg);color:var(--bg);padding:16px 28px;border-radius:999px;font-weight:500;transition:gap .3s var(--ease)}
.pill:hover{gap:20px}
.txt{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .4s var(--ease)}
.txt:hover{background-size:0 1px;background-position:100% 100%}
.hero > .scroll{margin-top:clamp(40px,6vw,72px)}
@media (max-width:760px){.hero-foot{grid-template-columns:1fr}}

/* Stats */
.stats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:40px;padding-block:clamp(56px,8vw,110px);border-top:1px solid var(--line)}
.stats h2{font-size:clamp(1.2rem,2vw,1.6rem);letter-spacing:.14em}
.stats dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.stats dt{font-family:var(--f-display);font-size:clamp(2.6rem,5.4vw,4.6rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.stats dd{margin:12px 0 0;color:var(--muted);font-size:.92rem;max-width:16em}
@media (max-width:900px){.stats{grid-template-columns:1fr}}
@media (max-width:560px){.stats dl{grid-template-columns:1fr;gap:24px}}
.scroll{display:inline-flex;align-items:center;gap:12px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase}
.scroll i{width:1px;height:40px;background:var(--faint);position:relative;overflow:hidden}
.scroll i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--fg)}
.mark{justify-self:end;width:100%;max-width:400px}
.mark svg{width:100%;height:auto;overflow:visible}
.mark .tri{fill:none;stroke:var(--fg);stroke-width:1.2;stroke-linecap:square}
.mark .bar{stroke:var(--fg);stroke-width:1.2}
.mark .ghost{fill:none;stroke:var(--faint);stroke-width:1}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}.mark{justify-self:start;max-width:210px;order:-1;margin-bottom:12px}}

@media (prefers-reduced-motion:no-preference){
  .ln > span{animation:rise 1s var(--ease) both}
  .ln:nth-child(2) > span{animation-delay:.12s}
  .ln:nth-child(3) > span{animation-delay:.24s}
  .hero-foot{animation:fade 1s .6s both}
  .swap span{transition:transform .75s var(--ease)}
  .mark .tri,.mark .bar{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.8s .25s var(--ease) forwards}
  .mark .bar{animation-delay:1.2s;animation-duration:.8s}
  .mark .ghost{animation:spin 60s linear infinite;transform-origin:200px 200px}
  .scroll i::after{animation:drip 2s var(--ease) infinite}
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .mark svg{animation:par linear both;animation-timeline:scroll(root);animation-range:0 700px}
  }
}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drip{0%{top:-40%}100%{top:100%}}
@keyframes par{to{transform:translateY(90px) rotate(-8deg)}}

/* ── Statement ────────────────────── */
.statement{padding-block:clamp(56px,8vw,110px) clamp(80px,11vw,150px)}
.statement .tag{margin-bottom:36px}
.statement p{font-weight:300;font-size:clamp(1.6rem,3.6vw,3.1rem);line-height:1.25;letter-spacing:-.02em;max-width:24ch}
.statement .w{color:var(--fg)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .statement .w{color:var(--faint);animation:lit linear both;animation-timeline:view();animation-range:entry 100% cover 45%}
  }
}
@keyframes lit{to{color:var(--fg)}}

/* ── Marquee ──────────────────────── */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding-block:22px;display:grid;gap:10px}
.row{white-space:nowrap;display:flex}
.track{display:inline-flex;gap:48px;padding-right:48px;flex:none}
.track span{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.14em;font-size:clamp(1.6rem,4vw,3.2rem);line-height:1.15}
.row.outline .track span{color:transparent;-webkit-text-stroke:1px var(--fg)}
.track i{font-style:normal;color:var(--faint);font-size:clamp(1.6rem,4vw,3.2rem);line-height:1.15}
@media (prefers-reduced-motion:no-preference){
  .row .track{animation:slide 40s linear infinite}
  .row.outline .track{animation-direction:reverse;animation-duration:48s}
  .marquee:hover .track{animation-play-state:paused}
}
@keyframes slide{to{transform:translateX(-100%)}}

/* ── Services ─────────────────────── */
.svc{padding-block:clamp(80px,11vw,150px)}
.svc .tag{margin-bottom:24px}
.svc-title{font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:.12em;line-height:1.2;margin-bottom:56px}
.team-head h2.svc-title{font-weight:400;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:.12em;line-height:1.2;max-width:none}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.s{position:relative;padding:34px 34px 10px 0;display:grid;gap:14px;align-content:start;min-width:0}
.s + .s{padding-left:34px}
.s::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fg);transform-origin:left}
.s + .s::after{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line)}
.s .k{font-size:.78rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.s h3{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:.1em;transition:letter-spacing .5s var(--ease)}
.s p{color:var(--muted);max-width:22em}
.s:hover h3{letter-spacing:.16em}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .s::before{animation:grow linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
    .s{animation:up linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
    .s:nth-child(2){animation-range:entry 10% cover 42%}
    .s:nth-child(3){animation-range:entry 20% cover 49%}
  }
}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes up{from{transform:translateY(48px)}to{transform:none}}
@media (max-width:760px){.svc-grid{grid-template-columns:1fr}.s,.s+.s{padding:28px 0 26px}.s+.s::after{display:none}}

/* ── Work ─────────────────────────── */
.work-wrap{padding-bottom:clamp(40px,6vw,80px)}
.work{display:block;background:var(--soft);border-radius:32px;padding:clamp(32px,6vw,84px);position:relative;overflow:hidden;cursor:pointer;min-height:clamp(340px,46vw,560px);display:flex;flex-direction:column;justify-content:space-between}
.work .top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.work .k{font-size:.78rem;color:var(--muted);letter-spacing:.2em;text-transform:uppercase}
.work h2{font-family:var(--f-display);font-weight:400;font-size:clamp(2.6rem,10vw,9rem);letter-spacing:.01em;line-height:.95}
.work p{margin-top:20px;color:var(--muted);max-width:30em}
.work .arrow{width:58px;height:58px;border-radius:50%;border:1px solid var(--fg);display:grid;place-items:center;font-size:1.3rem;transition:transform .45s var(--ease),background .3s,color .3s;flex:none}
.work:hover .arrow{transform:rotate(45deg);background:var(--fg);color:var(--soft)}
.work .bg{position:absolute;right:-6%;bottom:-18%;width:min(56%,560px);pointer-events:none;opacity:.9}
.work .bg path{fill:none;stroke:var(--faint);stroke-width:1}
.follow{position:absolute;left:0;top:0;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;background:var(--fg);color:var(--soft);display:grid;place-items:center;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;pointer-events:none;transform:translate(var(--x,50%),var(--y,50%)) scale(0);transition:transform .35s var(--ease)}
.work.hov .follow{transform:translate(var(--x),var(--y)) scale(1)}
@media (hover:none){.follow{display:none}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .work{animation:card linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    .work .bg{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes card{from{transform:scale(.9);border-radius:64px}to{transform:none;border-radius:32px}}
@keyframes drift{from{transform:translateY(60px) rotate(6deg)}to{transform:translateY(-40px) rotate(-4deg)}}

/* ── Ζώνες: μαύρη / γκρι (τοπικά tokens, full-bleed φόντο) ── */
:root{--band-dark:#0A0A0A;--band-grey:#F1F1F1;--band-grey-soft:#E4E4E4}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--band-dark:#1A1A1A;--band-grey:#121212;--band-grey-soft:#1E1E1E}}
:root[data-theme="dark"]{--band-dark:#1A1A1A;--band-grey:#121212;--band-grey-soft:#1E1E1E}
.dark{--fg:#F4F4F4;--bg:var(--band-dark);--muted:#8F8F8F;--faint:#3C3C3C;--line:#2A2A2A;--soft:#1A1A1A;background:var(--band-dark);color:var(--fg);color-scheme:dark}
.grey{--soft:var(--band-grey-soft);background:var(--band-grey)}
.wrap.dark,.wrap.grey{box-shadow:0 0 0 100vmax var(--band-bg,transparent);clip-path:inset(0 -100vmax)}
.wrap.dark{--band-bg:var(--band-dark)}
.wrap.grey{--band-bg:var(--band-grey)}
.marquee.dark{border-color:var(--band-dark)}
.work.dark{background:var(--band-dark)}
.work.dark .follow{background:#F4F4F4;color:#0A0A0A}
.work.dark:hover .arrow{color:var(--band-dark)}


/* ── Έργο: εκδοχή Δ (μικρογραφία site) ── */
.proj{--fg:#F4F4F4;--muted:#8F8F8F;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(28px,5vw,64px);align-items:center;background:var(--band-dark);color:#F4F4F4;border-radius:32px;padding:clamp(28px,5vw,72px);overflow:hidden}
.proj .k{font-size:.78rem;color:#8F8F8F;letter-spacing:.2em;text-transform:uppercase}
.proj h3{font-family:var(--f-display);font-weight:400;font-size:clamp(2.2rem,5vw,4.2rem);letter-spacing:.02em;line-height:1;margin-top:18px}
.proj .ptxt p{color:#8F8F8F;margin-top:16px;max-width:28em}
.proj .go{display:inline-flex;align-items:center;gap:14px;margin-top:28px;font-weight:500}
.proj .arrow{width:56px;height:56px;border-radius:50%;border:1px solid #F4F4F4;display:grid;place-items:center;font-size:1.25rem;flex:none;transition:transform .45s var(--ease),background .3s,color .3s}
.proj:hover .arrow{transform:rotate(45deg);background:#F4F4F4;color:#0A0A0A}
.win{background:#fff;color:#0A0A0A;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);transform:rotate(-2deg) translateY(10px);transition:transform .8s var(--ease)}
.proj:hover .win{transform:none}
.win img{display:block;width:100%;height:auto}
.win .bar{display:flex;align-items:center;gap:7px;padding:12px 14px;background:#F1F1F1;border-bottom:1px solid #E3E3E3}
.win .bar i{width:9px;height:9px;border-radius:50%;background:#D0D0D0}
.win .bar span{margin-left:10px;font-size:.72rem;color:#777;background:#fff;border-radius:999px;padding:3px 12px}
.win .site{padding:22px 24px 26px;display:grid;gap:16px}
.win .nav{display:flex;justify-content:space-between;align-items:center;gap:12px}
.win .nav .logo-svg{display:block;width:120px;height:auto;flex:none}
.win .nav em{font-style:normal;font-size:.62rem;color:#666;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.win .shero{display:grid;gap:10px;padding:18px 0 6px}
.win .shero b{font-size:clamp(1rem,2vw,1.5rem);font-weight:600;line-height:1.15;max-width:16ch}
.win .shero small{font-size:.7rem;color:#666}
.win .cta{display:inline-block;background:#125991;color:#fff;font-size:.7rem;font-weight:600;padding:8px 14px;border-radius:999px;width:max-content}
.win .rowx{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.win .rowx div{height:44px;border-radius:8px;background:#F2F4F7}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .proj{animation:card linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  }
}
@media (max-width:820px){.proj{grid-template-columns:1fr}.win{transform:none}.win .nav em{display:none}}


/* Hero v3: 3 γραμμές + μαύρος κύκλος δεξιά + μαύρη μπάντα */
.wrap.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px}
.ring{width:clamp(200px,24vw,320px);aspect-ratio:1;max-width:100%;border-radius:50%;background:var(--band-dark,#0A0A0A);color:#F4F4F4;position:relative;display:grid;place-items:center;transition:transform .6s var(--ease)}
.ring:hover{transform:scale(1.05)}
.ring,.ring:hover,.ring *{text-decoration:none!important}
.ring .ring-m{display:none}
@media (max-width:760px){.ring .ring-d{display:none}.ring .ring-m{display:block}.ring .ring-m text{font-size:10.5px}}
.ring svg{position:absolute;inset:7%;width:86%;height:86%}
.ring text{font-family:var(--f-display);font-size:12.5px;fill:#F4F4F4}
.ring .ar{font-size:clamp(1.8rem,3vw,2.6rem);transition:transform .5s var(--ease)}
.ring:hover .ar{transform:rotate(45deg)}
@media (prefers-reduced-motion:no-preference){
  .ring svg{animation:spin 24s linear infinite;transform-origin:50% 50%}
  .ring:hover svg{animation-duration:8s}
  .ring{animation:ringIn 1.1s .35s var(--ease) backwards}
}
@keyframes ringIn{from{transform:scale(.6) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
@media (max-width:760px){.wrap.hero{grid-template-columns:1fr;gap:0;position:relative}.hero h1{font-size:2.15rem}.ring{position:absolute;width:80px;right:max(20px,env(safe-area-inset-right,0px));top:calc(clamp(64px,10vw,140px) + 1.12 * 2.15rem - 40px)}.ring text{font-size:15px}.ring .ar{font-size:1.1rem}}
.hero{padding-block:clamp(64px,10vw,140px) clamp(48px,6vw,80px)}
.hero h1{max-width:none}
.morph{display:inline-block;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.03em;font-weight:400;white-space:nowrap}
.morph .ch{display:inline-block;white-space:pre}
.morph .ch.in{animation:chIn .7s var(--ease) both;animation-delay:var(--d)}
.morph .ch.out{animation:chOut .38s ease-in both;animation-delay:var(--d)}
@keyframes chIn{from{opacity:0;filter:blur(12px);transform:translateY(.28em) scale(.92)}to{opacity:1;filter:none;transform:none}}
@keyframes chOut{to{opacity:0;filter:blur(10px);transform:translateY(-.18em)}}
.hero-band .band-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 56px;align-items:center;padding-block:clamp(28px,4vw,44px) 0}
.hero-band .band-in > p{color:var(--muted);font-size:1.05rem;max-width:36em}
.hero-band .ticker{grid-column:1/-1;overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);padding-block:18px;margin-top:6px}
.hero-band .ticker div{display:inline-flex;gap:36px;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.16em;font-size:.88rem;color:var(--muted)}
.hero-band .ticker i{font-style:normal;color:var(--faint)}
@media (prefers-reduced-motion:no-preference){
  .hero-band .ticker div{animation:tslide 34s linear infinite}
  .hero-band{animation:fade 1s .5s both}
}
@keyframes tslide{to{transform:translateX(-50%)}}
@media (max-width:760px){.hero-band .band-in{grid-template-columns:1fr}}


/* ── Η εταιρεία (ενωμένη με τους αριθμούς) ── */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:40px 64px;padding-block:clamp(72px,10vw,140px)}
.about-l{display:grid;gap:22px;align-content:start}
.about-l h2{font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:.12em}
.about-r p{font-weight:300;font-size:clamp(1.3rem,2.2vw,2rem);line-height:1.35;letter-spacing:-.015em;max-width:30ch}
.about .w{color:var(--fg)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .about .w{color:var(--faint);animation:lit linear both;animation-timeline:view();animation-range:entry 100% cover 45%}
  }
}
.about dl{margin:clamp(40px,6vw,72px) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;border-top:1px solid var(--fg);padding-top:28px}
.about dt{font-family:var(--f-display);font-size:clamp(2.6rem,5.4vw,4.6rem);line-height:1;font-variant-numeric:tabular-nums}
.about dd{margin:12px 0 0;color:var(--muted);font-size:.95rem;max-width:20em}
@media (max-width:820px){.about{grid-template-columns:1fr}}
@media (max-width:480px){.about dl{grid-template-columns:1fr}}


.facts{margin-top:clamp(40px,6vw,64px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fact{border-radius:24px;padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:36px;min-height:clamp(240px,24vw,300px);transition:transform .6s var(--ease)}
.fact:hover{transform:translateY(-6px)}
.fact-dark{background:var(--band-dark,#0A0A0A);color:#F4F4F4}
.fact-grey{background:var(--band-grey,#F1F1F1);color:var(--fg)}
.fact-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.fact-n{font-family:var(--f-display);font-size:clamp(4.5rem,9vw,7.5rem);line-height:.8;font-variant-numeric:tabular-nums}
.fact-k{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;opacity:.65;padding-bottom:6px}
.fact-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.18)}
.fact-list li{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.16em;font-size:.95rem;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;transition:padding .4s var(--ease)}
.fact-list li::after{content:"→";opacity:0;transition:opacity .3s}
.fact-dark:hover .fact-list li{padding-left:6px}
.fact-dark:hover .fact-list li::after{opacity:.6}
.fact-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.fact-flow::before{content:"";position:absolute;left:5px;right:5px;top:5px;height:1px;background:color-mix(in srgb,var(--fg) 30%,transparent)}
.fact-flow li{position:relative;padding-top:24px;padding-right:6px;font-size:.8rem;font-weight:500;min-width:0}
.fact-flow li::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--band-grey,#F1F1F1);border:1px solid var(--fg);transition:background .3s}
.fact-flow li:last-child::before{background:var(--fg)}
.fact-grey:hover .fact-flow li::before{background:var(--fg)}
@media (prefers-reduced-motion:no-preference){.fact-grey:hover .fact-flow li:nth-child(2)::before{transition-delay:.1s}.fact-grey:hover .fact-flow li:nth-child(3)::before{transition-delay:.2s}.fact-grey:hover .fact-flow li:nth-child(4)::before{transition-delay:.3s}}
@media (max-width:640px){.facts{grid-template-columns:1fr}}


.facts2{margin-top:clamp(40px,6vw,64px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--fg)}
.facts2 > div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;padding:26px 24px 26px 0}
.facts2 > div + div{border-left:1px solid var(--line);padding-left:24px}
.facts2 .n{font-family:var(--f-display);font-size:clamp(4rem,8vw,6.5rem);line-height:.8;color:transparent;-webkit-text-stroke:1.2px var(--fg);transition:color .5s;font-variant-numeric:tabular-nums}
.facts2 > div:hover .n{color:var(--fg)}
.facts2 h3{font-size:1rem;letter-spacing:.16em}
.facts2 p{color:var(--muted);font-size:.9rem;margin-top:6px}
@media (max-width:640px){.facts2{grid-template-columns:1fr}.facts2>div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}}

/* ── Team ── */
.team{padding-block:clamp(80px,11vw,150px) 0}
.team.grey{padding-block:clamp(80px,11vw,140px);margin-top:clamp(40px,6vw,80px)}
.team-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:56px}
.team-head .tag{margin-bottom:24px}
.team-head h2{font-weight:300;font-size:clamp(1.3rem,2.2vw,2rem);letter-spacing:-.015em;line-height:1.35;max-width:30ch}
.team-head p{color:var(--muted);max-width:30em}
.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.person{display:grid;gap:14px;align-content:start}
.ph{aspect-ratio:4/5;max-width:100%;background:var(--soft);border-radius:18px;overflow:hidden;position:relative;display:grid;place-items:center}
.ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform .8s var(--ease)}
.ph .ini{font-family:var(--f-display);font-size:clamp(2rem,4vw,3.2rem);letter-spacing:.12em;color:var(--faint);transition:letter-spacing .6s var(--ease),color .4s}
.person:hover .ph img{transform:scale(1.05)}
.person:hover .ini{letter-spacing:.24em;color:var(--muted)}
.person h3{font-size:1.05rem;letter-spacing:.14em}
.person p{color:var(--muted);font-size:.92rem;margin-top:-8px}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .person{animation:up linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    .person:nth-child(2){animation-range:entry 8% cover 36%}
    .person:nth-child(3){animation-range:entry 16% cover 42%}
    .person:nth-child(4){animation-range:entry 24% cover 48%}
  }
}
@media (max-width:900px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}.team-head{grid-template-columns:1fr}}


/* ── Πώς δουλεύουμε ── */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:none}
.steps li{position:relative;padding:28px 28px 8px 0;display:grid;gap:12px;align-content:start;min-width:0}
.steps li + li{padding-left:28px}
.steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fg);transform-origin:left}
.steps li::after{content:"";position:absolute;left:0;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--band-grey);border:1px solid var(--fg)}
.steps li + li::after{left:28px}
.steps li:hover::after{background:var(--fg)}
.steps .n{font-family:var(--f-display);font-size:clamp(2.4rem,4.4vw,3.8rem);line-height:1;color:var(--faint);margin-top:14px;transition:color .4s}
.steps li:hover .n{color:var(--fg)}
.steps h3{font-size:1.2rem;letter-spacing:.14em}
.steps p{color:var(--muted);font-size:.95rem;max-width:22em}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .steps li::before{animation:grow linear both;animation-timeline:view();animation-range:entry 10% cover 35%}
    .steps li{animation:up linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    .steps li:nth-child(2){animation-range:entry 8% cover 36%}
    .steps li:nth-child(3){animation-range:entry 16% cover 42%}
    .steps li:nth-child(4){animation-range:entry 24% cover 48%}
  }
}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}.steps li:nth-child(3){padding-left:0}.steps li:nth-child(3)::after{left:0}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.steps li,.steps li+li{padding-left:0}.steps li+li::after{left:0}}

/* ── Contact ──────────────────────── */
.contact{padding-block:clamp(90px,12vw,170px) clamp(56px,8vw,100px)}
.contact .tag{margin-bottom:36px}
.contact h2{font-weight:300;font-size:clamp(2.2rem,6vw,5.4rem);letter-spacing:-.035em;line-height:1.05}
.talk{position:relative;display:inline-block;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.03em;font-weight:400}
.talk::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:2px;background:currentColor;transform-origin:right;transition:transform .6s var(--ease)}
.talk:hover::after{transform:scaleX(0)}
.talk .ar{display:inline-block;transition:transform .5s var(--ease)}
.talk:hover .ar{transform:translateX(.2em) rotate(-45deg)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .talk::after{animation:grow linear both;animation-timeline:view();animation-range:entry 40% cover 50%;transform-origin:left}
  }
}
.details{margin-top:72px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid var(--line);padding-top:28px;font-size:.98rem}
.details dt{color:var(--muted);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.details dd{margin:0;overflow-wrap:anywhere}
.details a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease)}
.details a:hover{background-size:100% 1px}
dl{margin:0}
@media (max-width:760px){.details{grid-template-columns:1fr;gap:20px}}

/* ── Footer ───────────────────────── */
footer{overflow:hidden}
.giant{padding:48px max(24px,env(safe-area-inset-right,0px)) 32px max(24px,env(safe-area-inset-left,0px));max-width:1240px;margin:0 auto;user-select:none}
.giant svg{display:block;width:100%;height:auto;aspect-ratio:655.2/97;fill:transparent;stroke:color-mix(in srgb,var(--fg) 78%,transparent);stroke-width:1.2px;vector-effect:non-scaling-stroke}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .giant{animation:giant linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}
@keyframes giant{from{transform:translateY(40%);letter-spacing:.2em}to{transform:none;letter-spacing:.06em}}
.fbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block:26px;font-size:.8rem;color:var(--muted);border-top:1px solid var(--line)}
.fbar a:hover{color:var(--fg)}

/* Skip link (προσβασιμότητα) */
.skip:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;clip:auto;padding:10px 16px;background:var(--fg);color:var(--bg);z-index:100;border-radius:8px}

/* Cookie banner (Consent Mode v2) */
.consent{position:fixed;z-index:60;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:560px;margin-left:auto;background:#0A0A0A;color:#F4F4F4;border-radius:20px;padding:20px 22px;display:grid;gap:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.22);font-size:.92rem;line-height:1.5}
.consent a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.consent-btns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.consent button{font:inherit;font-weight:500;border-radius:999px;padding:10px 20px;cursor:pointer;border:1px solid #F4F4F4}
.consent .c-no{background:transparent;color:#F4F4F4}
.consent .c-yes{background:#F4F4F4;color:#0A0A0A}
.consent button:focus-visible{outline:2px solid #F4F4F4;outline-offset:3px}
.c-open{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.c-open:hover{color:var(--fg)}