/* ==========================================================================
   Home page (front-page.php): intro, big hero, «Φτιάχνουμε» fly-through, layered process.
   Loaded after the ERP layer (inc/home.php). Square corners, blue + navy, system/ERP fonts.
   Nothing here pins or hijacks the scroll: motion runs on its own while a section is on screen.
   ========================================================================== */

:root { --e-out: cubic-bezier(.23, 1, .32, 1); --e-io: cubic-bezier(.77, 0, .175, 1); }

/* The hero waits behind the intro, then rises when it lifts. */
.intro-on .hx [data-split] .w > span { transform: translateY(100%); }
.intro-on .hx [data-reveal] { opacity: 0; transform: translateY(18px); }
.intro-on .hx .fd-cta-wrap, .intro-on .hx .fd-cta-arrow path, .intro-on .hx__dot { animation-play-state: paused; }

/* ---------- Hero ---------- */
.hx { position: relative; isolation: isolate; overflow: hidden; background: #fff; padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 5vw, 72px); }
.hx__grid { position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: linear-gradient(#E9EEF5 1px, transparent 1px), linear-gradient(90deg, #E9EEF5 1px, transparent 1px);
	background-size: 64px 64px; background-position: -1px -1px;
	mask-image: radial-gradient(ellipse 70% 80% at 70% 30%, #000 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 30%, #000 10%, transparent 75%); }
.hx__wrap { position: relative; z-index: 1; }
/* our live sites on the right, tilted in depth, cascading behind the heading */
.hx__shots { position: absolute; z-index: 0; right: -56px; top: -6px; width: min(490px, 34vw); height: 320px; perspective: 1400px; }
/* the heading sits over the cards but lets the pointer through, so hovering the cards works */
.hx__title { position: relative; z-index: 1; pointer-events: none; }
.hx__row { position: relative; z-index: 1; }
.hx__shot { position: absolute; margin: 0; width: 72%; aspect-ratio: 16 / 10.6; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -28px rgba(10, 37, 64, .5);
	left: calc((2 - var(--i)) * 14%); top: calc(var(--i) * 40px); transform: rotateY(-16deg) rotateX(4deg); transform-origin: 0 50%; transition: transform .5s var(--e-out);
	animation: hx-shot-in .9s var(--e-out) both, hx-float 7s ease-in-out infinite; animation-delay: calc(.55s + var(--i) * .12s), calc(var(--i) * -2.3s); }
.hx__bar { display: flex; gap: 5px; padding: 7px 10px; background: #F3F6FA; border-bottom: 1px solid var(--line); }
.hx__bar i { width: 7px; height: 7px; background: var(--line-strong); }
.hx__shot img { width: 100%; height: calc(100% - 22px); object-fit: cover; object-position: top; }
@keyframes hx-shot-in { from { opacity: 0; scale: .92; } }
/* hover: the front card stays, the two behind slide out to the right so each site shows (no mouse tracking) */
@media (hover: hover) and (pointer: fine) {
	.hx__shots:hover .hx__shot { transform: translateX(calc((2 - var(--i)) * 58px)) translateY(calc((2 - var(--i)) * -14px)) rotateY(-4deg) scale(.86); }
}
@keyframes hx-float { 50% { translate: 0 -8px; } }
.intro-on .hx__shot { animation-play-state: paused; }
/* narrower screens: the cards sit in the flow under the heading (projects always in the hero) */
@media (max-width: 1240px) {
	.hx__shots { position: relative; right: auto; top: auto; width: min(100%, 620px); height: auto; aspect-ratio: 16 / 9.4; margin: 22px 0 0 auto; }
	.hx__shot { top: calc(var(--i) * 12%); }
}
.hx__tag { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 15px; font-weight: 500; }
.hx__tag .ico { color: var(--blue); }
.hx__title { margin-top: 18px; font-size: clamp(50px, 8vw, 128px); line-height: .94; letter-spacing: -.03em; font-weight: 700; color: var(--navy); max-width: 16ch; }
.hx__title .hl { color: var(--blue); }
.hx__dot { display: inline-block; width: .17em; height: .17em; margin-left: .05em; background: var(--blue); vertical-align: baseline; transform: scale(0); animation: hx-dot .45s cubic-bezier(.34, 1.56, .64, 1) .75s forwards; }
@keyframes hx-dot { to { transform: none; } }
.hx__row { margin-top: clamp(28px, 3.4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px); gap: clamp(28px, 5vw, 80px); align-items: end; }
.hx__lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.4; color: var(--navy); font-weight: 500; max-width: 22ch; }
.hx__chips { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.hx__chips li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text); }
.hx__chips .ico { width: 30px; height: 30px; padding: 7px; background: var(--bg-tint); color: var(--blue); }
.hx .offer-band .fd-cta-wrap { width: 100%; justify-items: stretch; }
.hx .fd-cta-arrow { display: none !important; }

/* ---------- «Φτιάχνουμε» fly-through ---------- */
.fly { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(620px, 100svh, 900px); display: grid; grid-template-rows: 1fr auto; color: #fff;
	background: radial-gradient(ellipse 60% 55% at 50% 50%, #2A74EE 0%, #0D5BDD 45%, #0A47AF 100%); }
.fly__stage { position: absolute; inset: 0; z-index: -1; perspective: 900px; perspective-origin: 50% 50%; pointer-events: none; }
.fly__cam { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--p, 0) * 240px)); }
.fly__it { position: absolute; left: var(--x); top: var(--y); opacity: 0; will-change: transform, opacity;
	animation: fly-in 10s linear var(--d) infinite; animation-play-state: paused; }
.fly.is-on .fly__it { animation-play-state: running; }
.fly__it--shot { width: clamp(150px, 20vw, 320px); aspect-ratio: 16 / 10; background: #0A2540; box-shadow: 0 30px 60px -20px rgba(4, 18, 40, .55); }
.fly__it--shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fly__it--ic { display: grid; place-items: center; width: clamp(54px, 5.6vw, 84px); aspect-ratio: 1; background: #fff; color: var(--blue); box-shadow: 0 20px 40px -18px rgba(4, 18, 40, .5); }
.fly__it--ic .ico { width: 44%; height: 44%; }
.fly__it--px { width: 12px; height: 12px; background: rgba(255, 255, 255, .55); }
.fly__it--px:nth-child(even) { background: #0A2540; }
@keyframes fly-in {
	0% { transform: translate(-50%, -50%) translateZ(-1500px); opacity: 0; }
	12% { opacity: 1; }
	82% { opacity: 1; }
	100% { transform: translate(-50%, -50%) translateZ(560px); opacity: 0; }
}
.fly__copy { position: relative; z-index: 2; align-self: center; text-align: center; padding-block: 64px 24px; }
.fly__copy::before { content: ""; position: absolute; inset: 10% 15%; z-index: -1; background: radial-gradient(closest-side, rgba(13, 91, 221, .9), rgba(13, 91, 221, 0)); pointer-events: none; } /* keeps the words readable over passing shots */
.fly__title { color: #fff; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 6px; font-weight: 700; container-type: inline-size; }
.fly__lead { font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; color: #fff; letter-spacing: -.01em; text-shadow: 0 2px 16px rgba(4, 18, 40, .35); }
/* Capped at 13.4cqi so the longest word («αυτοματισμούς», ~7.15em in Geologica) always fits the column; a word wider
   than the column would push the grid to the right and the title would sit off-centre. */
.fly__words { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; white-space: nowrap; font-size: min(clamp(54px, 10.5vw, 168px), 13.4cqi); line-height: 1; letter-spacing: -.035em; text-shadow: 0 4px 0 rgba(4, 18, 40, .18), 0 14px 44px rgba(4, 18, 40, .45); }
.fly__w { grid-area: 1 / 1; opacity: 0; animation: fly-word 10s var(--e-out) calc(var(--i) * 2.5s) infinite; animation-play-state: paused; }
.fly.is-on .fly__w { animation-play-state: running; }
@keyframes fly-word { /* each word holds ~2.1s; the next one starts as it leaves, so the middle is never empty */
	0% { opacity: 0; transform: scale(.55); filter: blur(10px); }
	3% { opacity: 1; transform: scale(1); filter: blur(0); }
	23% { opacity: 1; transform: scale(1.04); filter: blur(0); }
	27% { opacity: 0; transform: scale(1.7); filter: blur(8px); }
	100% { opacity: 0; transform: scale(1.7); }
}
.fly__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fly__cap { margin-top: 18px; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; color: #fff; text-shadow: 0 2px 14px rgba(4, 18, 40, .4); }
.fly__live { position: relative; z-index: 2; background: rgba(10, 71, 175, .6); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-block: 22px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 15px; }
.fly__live-l { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .92); }
.fly__live-l b, .lx__live b { width: 8px; height: 8px; background: #3DDC97; box-shadow: 0 0 0 4px rgba(61, 220, 151, .2); }
.fly__live ul { display: flex; flex-wrap: wrap; gap: 8px 26px; list-style: none; margin: 0; padding: 0; font-weight: 600; }
.fly__live a { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .5); padding-bottom: 2px; transition: border-color .2s; }
.fly__live a:hover { border-color: #fff; }
.fly__pause { display: inline-grid; place-items: center; width: 40px; height: 40px; background: transparent; border: 1px solid rgba(255, 255, 255, .45); color: #fff; cursor: pointer; transition: background .2s, transform .16s var(--e-out); }
.fly__pause:hover { background: rgba(255, 255, 255, .12); }
.fly__pause:active { transform: scale(.97); }
.fly__pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fly__pause svg { width: 16px; height: 16px; fill: currentColor; }
.fly__pause .is-play, .fly.is-paused .fly__pause .is-pause { display: none; }
.fly.is-paused .fly__pause .is-play { display: block; }
.fly.is-paused .fly__it, .fly.is-paused .fly__w { animation-play-state: paused !important; }

/* ---------- Process: layers that build the site ---------- */
.lx { position: relative; overflow: hidden; background: #0A2540; color: #D3DEF0; padding: clamp(72px, 8vw, 120px) 0; }
.lx .section-title { color: #fff; font-size: clamp(36px, 4.4vw, 60px); }
.lx .section-title .hl { color: #8DB2F2; }
.lx__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.lx__eyebrow { color: #8DB2F2; font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.lx__lead { margin-top: 16px; font-size: clamp(18px, 1.5vw, 21px); color: #D3DEF0; max-width: 34ch; }
.lx__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .45); padding-bottom: 2px; transition: border-color .2s; }
.lx__more:hover { border-color: #fff; }
.lx__steps { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; }
.lx__step { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .35s var(--e-out), transform .45s var(--e-out), visibility 0s .35s; }
.lx__step.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lx__n { font-size: 14px; font-weight: 600; color: #8DB2F2; font-variant-numeric: tabular-nums; }
.lx__step h3 { margin-top: 8px; color: #fff; font-size: clamp(44px, 5.4vw, 76px); line-height: 1; letter-spacing: -.03em; }
.lx__step p { margin-top: 16px; font-size: clamp(17px, 1.35vw, 19px); max-width: 30ch; }
.lx__pills { display: flex; gap: 8px; margin-top: 32px; }
.lx__pills button { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; background: transparent; color: #D3DEF0; border: 1px solid rgba(211, 222, 240, .28); cursor: pointer; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background .2s, color .2s, border-color .2s, transform .16s var(--e-out); }
.lx__pills button .ico { width: 18px; height: 18px; }
.lx__pills button:hover { border-color: rgba(211, 222, 240, .6); color: #fff; }
.lx__pills button:active { transform: scale(.97); }
.lx__pills button[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--navy); }
.lx__pills button:focus-visible { outline: 2px solid #8DB2F2; outline-offset: 2px; }
/* timer bar under each step button: fills while that step is shown, stays full once done */
.lx__pills { padding-bottom: 10px; }
.lx__timer { position: absolute; left: -1px; right: -1px; bottom: -9px; height: 3px; background: rgba(211, 222, 240, .18); overflow: hidden; }
.lx__timer::after { content: ""; position: absolute; inset: 0; background: #4D8DF7; transform-origin: 0 50%; transform: scaleX(0); }
.lx__pills button.is-done .lx__timer::after { transform: none; }
.lx__pills button.is-run .lx__timer::after { animation: lx-timer 2.6s linear forwards; }
.lx.is-held .lx__timer::after { animation-play-state: paused; }
.lx:not(.is-auto) .lx__timer { background: transparent; }
@keyframes lx-timer { to { transform: none; } }

.lx__stage { position: relative; height: clamp(360px, 40vw, 560px); perspective: 2000px; }
.lx__iso { position: absolute; left: 50%; top: 58%; width: min(440px, 80%); aspect-ratio: 16 / 10; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(56deg) rotateZ(-38deg); }
.lx__l { position: absolute; inset: 0; transform: translateZ(calc(var(--z) * 74px)); border: 1.5px dashed rgba(211, 222, 240, .32); background: rgba(211, 222, 240, .03);
	transition: transform .7s var(--e-out), background .5s, border-color .5s, box-shadow .5s, opacity .5s; }
.lx__l > :not(.lx__tag) { opacity: .16; transition: opacity .5s; }
.lx__tag { position: absolute; right: 0; top: -26px; font-size: 12px; font-weight: 600; color: rgba(211, 222, 240, .55); white-space: nowrap; transition: color .4s; }
/* built: every layer up to the current one is solid; the current one lifts and glows */
.lx__l.is-built { border-style: solid; border-color: rgba(211, 222, 240, .4); background: #12345C; }
.lx__l.is-built > :not(.lx__tag) { opacity: .7; }
.lx__l.is-cur { transform: translateZ(calc(var(--z) * 74px + 36px)); border-color: #4D8DF7; background: #fff; box-shadow: 0 0 0 1px #4D8DF7, 0 0 60px rgba(77, 141, 247, .45); }
.lx__l.is-cur > :not(.lx__tag) { opacity: 1; }
.lx__l.is-cur .lx__tag { color: #fff; }
/* layer contents */
.lx__chat { position: absolute; inset: 14% 12%; display: grid; align-content: start; gap: 10px; }
.lx__chat i { display: block; height: 16%; min-height: 18px; width: 62%; background: #D3DEF0; }
.lx__chat i.me { justify-self: end; background: #0D5BDD; width: 54%; }
.lx__chat i.short { width: 30%; }
.lx__wire { position: absolute; inset: 10%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto 1fr; gap: 8px; }
.lx__wire i { display: block; border: 1.5px dashed #8C9DB3; }
.lx__wire .bar { grid-column: 1 / -1; height: 14px; }
.lx__wire .line { grid-column: 1 / 3; height: 10px; }
.lx__wire .btn { grid-column: 1; height: 18px; }
.lx__wire .box { background: linear-gradient(to top right, transparent calc(50% - 1px), #8C9DB3 50%, transparent calc(50% + 1px)); }
.lx__code { position: absolute; inset: 12% 10%; display: grid; align-content: start; gap: 9px; }
.lx__code i { display: block; height: 9px; width: var(--w); margin-left: calc(var(--o, 0) * 7%); background: #4D8DF7; }
.lx__code i:nth-child(3n) { background: #3DDC97; }
.lx__code i:nth-child(4n) { background: #8C9DB3; }
.lx__l--3.is-cur, .lx__l--3.is-built { background: #0A2540; }
.lx__l--4 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lx__live { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: #fff; color: var(--navy); font-size: 11px; font-weight: 700; }

/* ---------- Shorter sections (less text, more icons) ---------- */
.svc__text { font-size: 16px; color: var(--text); }
.hw__lead { max-width: 52ch; }
.hw__points li { display: block; padding: 0; }
.hw__points li::before { content: none; }
.hw__pt { position: relative; display: grid; grid-template-columns: 56px 1fr; align-items: center; width: 100%; padding: 16px 0; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.hw__pt > .ico { grid-row: span 2; width: 40px; height: 40px; padding: 10px; background: var(--bg-tint); color: var(--blue); transition: background .25s, color .25s; }
.hw__pt b { color: var(--navy); font-size: 17px; }
.hw__pt span { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin-top: 2px; }
.hw__pt[aria-pressed="true"] > .ico { background: var(--blue); color: #fff; }
.hw__pt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* timer bar on the bottom line of the active point */
.hw__timer { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: var(--blue); }
.hw__pt.is-run .hw__timer { animation: lx-timer 3.2s linear forwards; }
.hw.is-held .hw__timer { animation-play-state: paused; }
.hw__pt[aria-pressed="true"]:not(.is-run) .hw__timer { transform: none; }

/* the drawing (template-parts/order-flow.php): notes of what we find → one plan → the plan running */
.hw-map--flow { padding-bottom: 28px; }
.of__cap { display: grid; }
.of__cap b { grid-area: 1 / 1; font: inherit; opacity: 0; transition: opacity .35s; }
.hw:not([data-step]) .of__cap [data-s="0"], .hw[data-step="0"] .of__cap [data-s="0"], .hw[data-step="1"] .of__cap [data-s="1"], .hw[data-step="2"] .of__cap [data-s="2"] { opacity: 1; }
.of { position: relative; aspect-ratio: 5 / 4; container-type: size; }
.of__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transition: opacity .4s; }
.of__lines path { fill: none; stroke: #B9C6D8; stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke .4s; }
.hw[data-step="1"] .of__lines, .hw[data-step="2"] .of__lines { opacity: 1; transition-delay: .45s; }
.hw[data-step="2"] .of__lines path { stroke: var(--blue); }
.of__c { position: absolute; left: 0; top: 0; z-index: 1; display: grid; width: 42%; height: 18%; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 28px -20px rgba(10, 37, 64, .45);
	transform: translate(calc(var(--x0) * 1cqw), calc(var(--y0) * 1cqh)) rotate(var(--r0));
	transition: transform .75s var(--e-out) calc(var(--i) * 60ms), border-color .4s, box-shadow .4s; }
.hw[data-step="1"] .of__c, .hw[data-step="2"] .of__c { transform: translate(calc(var(--x1) * 1cqw), calc(var(--y1) * 1cqh)); box-shadow: none; }
.hw[data-step="2"] .of__c { border-color: #C9D6EA; }
.hw[data-step="2"] .of__c--in { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.of__f { grid-area: 1 / 1; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; padding: 0 14px; transition: opacity .35s; }
.of__f .ico { width: 34px; height: 34px; padding: 8px; background: #EEF1F5; color: var(--muted); transition: background .3s, color .3s; }
.of__f b { font-size: 14.5px; line-height: 1.3; font-weight: 600; color: var(--navy); }
.of__f--a b { color: #3E4C5E; }
.of__f--b { opacity: 0; }
.of__f--b .ico { background: var(--bg-tint); color: var(--blue); }
.hw[data-step="1"] .of__f--a, .hw[data-step="2"] .of__f--a { opacity: 0; }
.hw[data-step="1"] .of__f--b, .hw[data-step="2"] .of__f--b { opacity: 1; transition-delay: .25s; }
.hw[data-step="2"] .of__f--b .ico { background: var(--blue); color: #fff; }
.of__ok { position: absolute; right: -1px; top: -1px; display: grid; place-items: center; width: 20px; height: 20px; background: #12805C; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .3s var(--e-out); }
.of__ok .ico { width: 12px; height: 12px; }
.hw[data-step="2"] .of__ok { opacity: 1; transform: none; transition-delay: calc(.5s + var(--i) * 150ms); }
/* the order travelling from the e-shop card to each of the others */
.of__dot { position: absolute; left: 45%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--blue); opacity: 0; }
.hw[data-step="2"] .of__dot { animation: of-run 2.6s var(--e-io) calc(.4s + var(--k) * .18s) infinite; }
.hw.is-held .of__dot { animation-play-state: paused; }
@keyframes of-run {
	0% { left: 45%; top: 50%; opacity: 0; }
	8% { opacity: 1; }
	30% { left: 50%; top: 50%; }
	62% { left: 50%; top: var(--y); }
	86% { left: 55%; top: var(--y); opacity: 1; }
	100% { left: 55%; top: var(--y); opacity: 0; }
}

/* ---------- Phones / tablets ---------- */
@media (max-width: 980px) {
	.hx__row { grid-template-columns: 1fr; align-items: start; }
	.hx__lead { max-width: none; }
	.hx__chips { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
	.lx__grid { grid-template-columns: 1fr; }
	.lx__stage { order: -1; height: clamp(300px, 70vw, 440px); }
	.lx__steps { margin-top: 28px; }
}
@media (max-width: 600px) {
	.hx__title { font-size: clamp(46px, 13vw, 64px); }
	.fly { min-height: 560px; }
	.fly__it--shot { width: 42vw; }
	/* phones: solid strip; «Τρέχουν live» and a small pause on one line, ends apart; names, then the link */
	.fly__live { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 12px; padding-block: 14px 16px; font-size: 14px; background: #0A3F9E; }
	.fly__live-l { grid-column: 1; grid-row: 1; }
	.fly__live .fly__pause { grid-column: 2; grid-row: 1; width: 32px; height: 32px; }
	.fly__live .fly__pause svg { width: 12px; height: 12px; }
	.fly__live ul { grid-column: 1 / -1; gap: 4px 16px; font-weight: 500; }
	.fly__live a { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
	.fly__copy { padding-block: 48px 16px; }
	.lx__pills button span { display: none; }
	.lx__pills button { padding: 0; width: 48px; justify-content: center; }
}

/* ---------- Reduced motion: still pictures, everything readable ---------- */
@media (prefers-reduced-motion: reduce) {
	.hx__dot { animation: none; transform: none; }
	.hx__shot { animation: none; }
	.fly__it { animation: none; opacity: .9; transform: translate(-50%, -50%) translateZ(-500px); }
	.fly__words { display: none; }
	.fly__sr { position: static; width: auto; height: auto; clip-path: none; white-space: normal; font-size: clamp(40px, 6vw, 88px); line-height: 1.05; letter-spacing: -.03em; max-width: 16ch; }
	.lx__step, .lx__l { transition: none; }
	.of__c, .of__f, .of__lines { transition: none; }
	.of__dot { display: none; }
}
/* same for the site's own «χωρίς κίνηση» switch (a11y.js) */
html.a11y-nomotion .hx__dot { animation: none; transform: none; }
html.a11y-nomotion .hx__shot { animation: none !important; }
html.a11y-nomotion .fly__it { animation: none; opacity: .9; transform: translate(-50%, -50%) translateZ(-500px); }
html.a11y-nomotion .fly__words { display: none; }
html.a11y-nomotion .fly__sr { position: static; width: auto; height: auto; clip-path: none; white-space: normal; font-size: clamp(40px, 6vw, 88px); line-height: 1.05; letter-spacing: -.03em; max-width: 16ch; }
html.a11y-nomotion .lx__step, html.a11y-nomotion .lx__l { transition: none; }
html.a11y-nomotion .of__c, html.a11y-nomotion .of__f, html.a11y-nomotion .of__lines { transition: none; }
html.a11y-nomotion .of__dot { display: none; }
html.a11y-nomotion .fly__it { animation: none !important; }

/* ==========================================================================
   /hero-sections (page-hero-sections.php): hero ideas, each with the free-design card
   ========================================================================== */
.hs-intro { padding-block: 48px 32px; }
.hs-intro__t { font-size: clamp(34px, 4vw, 52px); }
.hs-intro p { margin-top: 10px; color: var(--muted); font-size: 18px; }
.hs-label { background: var(--navy); color: #D3DEF0; }
.hs-label .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-block: 14px; font-size: 15px; }
.hs-label b { color: #8DB2F2; font-variant-numeric: tabular-nums; }
.hs-label span { color: #fff; font-weight: 600; }
.hs-label em { font-style: normal; color: #A9BBD6; }

/* 02 fly-through as hero */
.fly--hero .fly__words { font-size: min(clamp(56px, 11vw, 176px), 13.4cqi); }
.fly__cta { margin: 28px auto 0; width: min(720px, 100%); text-align: left; }
.fly__cta .fd-cta-wrap { width: 100%; justify-items: stretch; }
.fly__cta .fd-cta-arrow { display: none !important; }

/* «με πλέγμα» versions: a square grid between the background and the text/form */
.fly__gridlay, .hf__gridlay { position: absolute; inset: 0; pointer-events: none; background-size: 64px 64px; background-position: center; }
.fly__gridlay { z-index: 1; background-image: linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px); }
.hf__gridlay { z-index: 0; background-image: linear-gradient(rgba(10, 37, 64, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 37, 64, .1) 1px, transparent 1px); }
.hf--grid { background: #EEF2F8; }
.hf--grid { isolation: isolate; }
.hf--grid .hf__fan { z-index: 1; } /* the grid sits behind the cards, not over them */
.hf--grid .hf__copy { position: relative; z-index: 2; }

/* 05: the film strip of 04 rolls at the very back of a fly-through, under a blue wash, then the grid of 02β */
.fly__film { position: absolute; inset: -14% -10%; display: grid; align-content: center; gap: 18px; transform: rotate(-6deg); }
.fly__wash { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 50% 48%, rgba(13, 91, 221, .96) 0%, rgba(13, 91, 221, .86) 50%, rgba(10, 71, 175, .7) 100%); }
.fly--film .fly__copy::before { display: none; } /* the wash already keeps the middle readable */
.fly--film.is-paused .hm__track { animation-play-state: paused; }

/* 03 fanned cards */
.hf { position: relative; overflow: hidden; background: var(--bg-alt); padding: clamp(48px, 6vw, 96px) 0; }
.hf__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hf__t { margin-top: 16px; font-size: clamp(44px, 5.6vw, 84px); line-height: .98; letter-spacing: -.03em; }
.hf__lead { margin-top: 18px; font-size: clamp(18px, 1.5vw, 21px); color: var(--navy); font-weight: 500; }
.hf__cta { margin-top: 28px; }
.hf__cta .fd-cta-wrap { width: 100%; justify-items: stretch; }
.hf__cta .fd-cta-arrow { display: none !important; }
.hf__fan { position: relative; height: clamp(320px, 34vw, 480px); }
.hf__card { position: absolute; left: 50%; top: 50%; width: min(78%, 460px); aspect-ratio: 16 / 10.6; background: #fff; box-shadow: 0 30px 60px -24px rgba(10, 37, 64, .45); border: 1px solid var(--line);
	transform: translate(-50%, -50%) translateX(calc(var(--i) * 9%)) translateY(calc(var(--i) * -6%)) rotate(calc(var(--i) * 6deg)); transition: transform .5s var(--e-out); }
.hf__card:nth-child(2) { z-index: 2; }
.hf__bar { display: flex; gap: 5px; padding: 7px 9px; border-bottom: 1px solid var(--line); background: #F3F6FA; }
.hf__bar i { width: 7px; height: 7px; background: var(--line-strong); }
.hf__card img { width: 100%; height: calc(100% - 22px); object-fit: cover; object-position: top; }
.hf__fan:hover .hf__card { transform: translate(-50%, -50%) translateX(calc(var(--i) * 34%)) translateY(calc(var(--i) * -4%)) rotate(calc(var(--i) * 9deg)); }
.hf__chip { position: absolute; z-index: 3; display: grid; place-items: center; width: 58px; height: 58px; background: var(--blue); color: #fff; box-shadow: 0 16px 30px -14px rgba(13, 91, 221, .7); animation: hf-float 5s ease-in-out infinite; }
.hf__chip .ico { width: 24px; height: 24px; }
.hf__chip--a { left: 4%; top: 12%; }
.hf__chip--b { right: 2%; top: 30%; background: var(--navy); animation-delay: -1.6s; }
.hf__chip--c { left: 14%; bottom: 6%; background: #fff; color: var(--blue); animation-delay: -3.2s; }
@keyframes hf-float { 50% { transform: translateY(-10px); } }

/* 04 film strip: three rows of our sites roll non-stop behind the heading and the form */
.hm { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: clamp(640px, 92svh, 900px); background: #0A2540; color: #D3DEF0; padding: clamp(56px, 6vw, 96px) 0; }
.hm__rows { position: absolute; inset: -12% -8%; z-index: -2; display: grid; align-content: center; gap: 18px; transform: rotate(-6deg); }
.hm__row { overflow: hidden; }
.hm__track { display: flex; gap: 18px; width: max-content; animation: hm-roll 80s linear infinite; }
.hm__row--1 .hm__track { animation-direction: reverse; animation-duration: 95s; }
.hm__row--2 .hm__track { animation-duration: 70s; }
.hm__track img { width: clamp(300px, 30vw, 440px); height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
@keyframes hm-roll { to { transform: translateX(-50%); } }
.hm.is-paused .hm__track { animation-play-state: paused; }
.hm__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(ellipse 52% 60% at 50% 50%, rgba(10, 37, 64, .94) 0%, rgba(10, 37, 64, .82) 55%, rgba(10, 37, 64, .45) 100%); }
.hm__copy { display: grid; justify-items: center; text-align: center; }
.hm__t { color: #fff; font-size: clamp(46px, 6.6vw, 104px); line-height: .96; letter-spacing: -.03em; max-width: 14ch; }
.hm__t .hl { color: #8DB2F2; }
.hm__lead { margin-top: 16px; font-size: clamp(18px, 1.5vw, 21px); }
.hm__cta { margin-top: 28px; width: min(720px, 100%); text-align: left; }
.hm__cta .fd-cta-wrap { width: 100%; justify-items: stretch; }
.hm__cta .fd-cta-arrow { display: none !important; }
.hm__pause { position: absolute; right: 20px; bottom: 20px; z-index: 1; }
.hm .fly__pause .is-play, .hm.is-paused .fly__pause .is-pause { display: none; }
.hm.is-paused .fly__pause .is-play { display: block; }

@media (max-width: 980px) {
	.hf__grid { grid-template-columns: 1fr; }
	.hf__fan { order: -1; height: clamp(240px, 60vw, 380px); }
}
@media (prefers-reduced-motion: reduce) {
	.hf__chip, .hm__track { animation: none; }
	.hm__pause { display: none; }
}
html.a11y-nomotion .hm__pause { display: none; }
html.a11y-nomotion .hm__track { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .hm__track { animation: none; } }
.hf__cta .fd-cta__art { display: none; } /* narrow column: card without its drawing */

/* ==========================================================================
   /load-animations (page-load-animations.php): intro ideas, each in a small copy of the hero.
   .is-play on .ld restarts it (home.js). Sizes in cqw so every stage scales the same.
   ========================================================================== */
.ld-intro { padding-block: 48px 24px; }
.ld-intro p { margin-top: 10px; color: var(--muted); font-size: 18px; }
.ld-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; padding-bottom: 96px; }
.ld__head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; margin-bottom: 14px; }
.ld__head b { color: var(--blue); font-variant-numeric: tabular-nums; font-size: 15px; padding-top: 3px; }
.ld__head h2 { font-size: 22px; }
.ld__head p { margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.ld__again { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; background: #fff; border: 1px solid var(--line-strong); color: var(--navy); font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color .2s, transform .16s var(--e-out); }
.ld__again:hover { border-color: var(--blue); color: var(--blue); }
.ld__again:active { transform: scale(.97); }
.ld__stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; border: 1px solid var(--line); background: #fff; }
/* the mini page */
.ld__page { position: absolute; inset: 0; padding: 0 6cqw; background: #fff linear-gradient(#EEF2F7 1px, transparent 1px) 0 0 / 5cqw 5cqw; }
.ld__nav { display: flex; align-items: center; gap: 2.4cqw; height: 9cqw; border-bottom: 1px solid var(--line); margin: 0 -6cqw; padding: 0 6cqw; background: #fff; }
.ld__nav svg { width: 3.6cqw; height: 3.6cqw; }
.ld__nav i { width: 7cqw; height: .9cqw; background: #C9D4E2; }
.ld__nav i:first-of-type { margin-left: auto; }
.ld__nav em { width: 11cqw; height: 3.4cqw; background: var(--blue); }
.ld__title { margin-top: 7cqw; font: 700 8.6cqw/1 var(--font-h); letter-spacing: -.03em; color: var(--navy); max-width: 70cqw; }
.ld__title span { display: inline-block; }
.ld__title span:last-child { color: var(--blue); }
.ld__card { display: flex; align-items: center; gap: 2cqw; width: 52cqw; margin-top: 5cqw; padding: 2cqw; border: 1px solid var(--line); background: #fff; }
.ld__card i { width: 7cqw; height: 7cqw; background: var(--blue); }
.ld__card span { flex: 1; height: 3.4cqw; border: 1px solid var(--line-strong); }
/* the page rises once the loader leaves: --at is when (per idea) */
.ld.is-play .ld__title span { animation: ld-rise .7s var(--e-out) both; animation-delay: calc(var(--at) + var(--i) * 60ms); }
.ld.is-play .ld__card { animation: ld-rise .7s var(--e-out) both; animation-delay: calc(var(--at) + .3s); }
@keyframes ld-rise { from { opacity: 0; transform: translateY(2.4cqw); } }
.ld__fx { position: absolute; inset: 0; pointer-events: none; }
.ld:not(.is-play) .ld__fx { opacity: 0; }
.ld__mark { width: 11cqw; height: 11cqw; overflow: visible; }

/* 01 mark (the live one) */
.ld[data-ld="mark"] { --at: 1.75s; }
.ld__panel { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 3.4cqw; background: #fff; }
.ld__bar { width: 15cqw; height: 2px; background: #E3E9F2; overflow: hidden; }
.ld__bar i { display: block; height: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }
.ld.is-play .ld__sq { transform-origin: 32px 32px; animation: intro-sq .5s var(--e-out) both; }
.ld.is-play .ld__d { clip-path: inset(100% 0 0 0); animation: intro-d .5s var(--e-out) .28s forwards; }
.ld.is-play .ld__c { transform-origin: 58px 58px; transform: scale(0); animation: intro-c .32s cubic-bezier(.34, 1.56, .64, 1) .62s forwards; }
.ld.is-play .ld__bar i { animation: intro-bar 1.1s var(--e-io) .25s forwards; }
.ld.is-play[data-ld="mark"] .ld__panel { animation: ld-up .7s var(--e-io) 1.35s forwards; }
@keyframes ld-up { to { transform: translateY(-100%); } }
@keyframes intro-sq { from { transform: scale(0); } }
@keyframes intro-d { to { clip-path: inset(0 0 0 0); } }
@keyframes intro-c { to { transform: scale(1); } }
@keyframes intro-bar { to { transform: scaleX(1); } }

/* 02 pixels */
.ld[data-ld="pixels"] { --at: 1.3s; }
.ld__px { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(6, 1fr); }
.ld__px i { background: var(--blue); }
.ld__px i:nth-child(7n) { background: #0A47AF; }
.ld.is-play .ld__px i { animation: ld-px .45s var(--e-io) both; animation-delay: calc(.7s + (var(--x) + var(--y)) * 40ms); }
@keyframes ld-px { to { transform: scale(0); } }
.ld__fx--pixels .ld__mark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.ld__fx--pixels .ld__sq { fill: #fff; }
.ld__fx--pixels .ld__d { fill: var(--blue); }
.ld.is-play .ld__fx--pixels .ld__mark { animation: ld-fade .3s ease .5s forwards; }
.ld.is-play .ld__fx--pixels .ld__sq, .ld.is-play .ld__fx--pixels .ld__d, .ld.is-play .ld__fx--pixels .ld__c { animation: none; clip-path: none; transform: none; }
@keyframes ld-fade { to { opacity: 0; transform: scale(.8); } }

/* 03 counter */
.ld[data-ld="count"] { --at: 1.75s; }
.ld__half { position: absolute; left: 0; right: 0; height: 50%; background: #fff; }
.ld__half--t { top: 0; } .ld__half--b { bottom: 0; }
.ld__line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }
.ld__count { position: absolute; left: 6cqw; bottom: 4cqw; display: flex; align-items: flex-end; gap: 2.4cqw; }
.ld__count .ld__mark { width: 8cqw; height: 8cqw; margin-bottom: 1.6cqw; }
.ld__num { font: 700 16cqw/1 var(--font-h); color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.ld.is-play .ld__line { animation: ld-line 1.2s var(--e-io) forwards, ld-fade .2s ease 1.3s forwards; }
.ld.is-play .ld__count { animation: ld-fade .25s ease 1.25s forwards; }
.ld.is-play .ld__half--t { animation: ld-up .7s var(--e-io) 1.35s forwards; }
.ld.is-play .ld__half--b { animation: ld-down .7s var(--e-io) 1.35s forwards; }
@keyframes ld-line { to { transform: scaleX(1); } }
@keyframes ld-down { to { transform: translateY(100%); } }

/* 04 words */
.ld[data-ld="words"] { --at: 1.75s; }
.ld__panel--navy { background: var(--navy); }
.ld__word { grid-area: 1 / 1; font: 700 12cqw/1 var(--font-h); color: #fff; letter-spacing: -.03em; opacity: 0; }
.ld__word:last-child { color: #8DB2F2; }
.ld.is-play .ld__word { animation: ld-word .32s var(--e-out) both; animation-delay: calc(.15s + var(--i) * .3s); }
.ld.is-play .ld__word:last-child { animation: ld-word-last .5s var(--e-out) both; animation-delay: 1.05s; }
@keyframes ld-word { 0% { opacity: 0; transform: scale(.85); } 30%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ld-word-last { from { opacity: 0; transform: scale(.85); } to { opacity: 1; } }
.ld.is-play[data-ld="words"] .ld__panel { animation: ld-wipe .6s var(--e-io) 1.45s forwards; }
@keyframes ld-wipe { to { clip-path: inset(0 0 100% 0); } }
.ld__panel--navy { clip-path: inset(0 0 0 0); }

/* 05 window */
.ld[data-ld="window"] { --at: .9s; }
.ld__hole { position: absolute; left: 50%; top: 50%; width: 10cqw; height: 10cqw; translate: -50% -50%; box-shadow: 0 0 0 100cqw var(--blue); transform: scale(0); }
.ld.is-play .ld__hole { animation: ld-hole 1.3s var(--e-io) .2s forwards; }
/* the mark sits in the window's place, then the window opens from it */
.ld__fx--window .ld__mark { position: absolute; left: 50%; top: 50%; width: 10cqw; height: 10cqw; translate: -50% -50%; }
.ld__fx--window .ld__sq { fill: #fff; }
.ld__fx--window .ld__d { fill: var(--blue); }
.ld.is-play .ld__fx--window .ld__mark { animation: ld-fade .3s ease .75s forwards; }
.ld.is-play .ld__fx--window .ld__sq, .ld.is-play .ld__fx--window .ld__d, .ld.is-play .ld__fx--window .ld__c { animation: none; clip-path: none; transform: none; }
@keyframes ld-hole { 0%, 50% { transform: scale(1); } 100% { transform: scale(14); } }
.ld__hole { transform: scale(1); }

/* 06 blinds */
.ld[data-ld="blinds"] { --at: 1.2s; }
.ld__fx--blinds { display: grid; grid-template-columns: repeat(5, 1fr); }
.ld__blind { background: var(--blue); }
.ld__blind:nth-child(even) { background: #0A47AF; }
.ld.is-play .ld__blind { animation: ld-up .55s var(--e-io) both; animation-delay: calc(.75s + var(--i) * 70ms); }
.ld__fx--blinds .ld__mark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.ld__fx--blinds .ld__sq { fill: #fff; }
.ld__fx--blinds .ld__d { fill: var(--blue); }
.ld.is-play .ld__fx--blinds .ld__mark { animation: ld-fade .25s ease .6s forwards; }
.ld.is-play .ld__fx--blinds .ld__sq, .ld.is-play .ld__fx--blinds .ld__d, .ld.is-play .ld__fx--blinds .ld__c { animation: none; clip-path: none; transform: none; }

@media (max-width: 860px) { .ld-list { grid-template-columns: 1fr; } }

/* home hero (02β): hold the fly-through until the intro lifts, so it starts fresh in front of the visitor */
.intro-on .fly--hero .fly__w, .intro-on .fly--hero .fly__it { animation-play-state: paused; }

/* ---------- Projects (home): cards stack while you scroll. Each card sticks a little lower than the one
   before; the next one slides over it and the covered one eases back (home.js sets --cover). No pinning:
   the page keeps scrolling. Only where a card fits the screen (wide + tall enough). ---------- */
@media (min-width: 900px) and (min-height: 700px) {
	.projects .pstack { gap: 40px; padding-bottom: 8px; }
	.projects .pcard { position: sticky; top: calc(var(--header-h) + 20px + var(--n, 0) * 18px); transform-origin: 50% 0;
		transform: scale(calc(1 - var(--cover, 0) * .05)); box-shadow: 0 -18px 40px -26px rgba(10, 37, 64, .35); will-change: transform; }
	.projects .pcard:nth-child(2) { --n: 1; }
	.projects .pcard:nth-child(3) { --n: 2; }
	.projects .pcard:nth-child(4) { --n: 3; }
	.projects .pcard:nth-child(5) { --n: 4; }
	.projects .pcard > * { transition: opacity .2s; opacity: calc(1 - var(--cover, 0) * .35); }
}

/* free-design card in the centred heroes: fill the slot so it sits exactly in the middle (it kept a 620px width) */
.fly__cta .fd-cta, .hm__cta .fd-cta, .hf__cta .fd-cta, .hx .fd-cta { width: 100%; }
.fly__cta, .hm__cta { margin-inline: auto; }

@media (max-width: 600px) {
	.of { aspect-ratio: 10 / 12; }
	.of__c { width: 44%; }
	.of__f { grid-template-columns: 26px 1fr; gap: 8px; padding: 0 8px; }
	.of__f .ico { width: 26px; height: 26px; padding: 6px; }
	.of__f b { font-size: 12px; }
}