/* «Επιχειρησιακά συστήματα» landing (page-epixeirisiaka-systimata.php). Square look like the rest of the site.
   Every drawing is pure CSS and loops; .sy-anim pauses it until systems.js marks it .is-on (on screen).
   Reduced motion / «χωρίς κίνηση»: no loops, each drawing shows its finished state. */

.sy-anim, .sy-anim * { animation-play-state: paused; }
.sy-anim.is-on, .sy-anim.is-on * { animation-play-state: running; }

/* ---------- Hero hub ---------- */
.sy-hero .lp-hero__inner { align-items: center; }
.sy-hub { position: relative; margin: 0; aspect-ratio: 560 / 430; container-type: size; }
.sy-hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.sy-hub__lines path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 5 5; }
.sy-hub__core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; display: grid; gap: 10px; width: 30cqw; padding: 16px; background: var(--navy); color: #fff; box-shadow: 0 24px 40px -24px rgba(10, 37, 64, .6); animation: sy-core 6s infinite; }
.sy-hub__core b { font: 700 26px/1 var(--font-h); letter-spacing: .02em; }
.sy-hub__rows { display: grid; gap: 6px; }
.sy-hub__rows i { height: 6px; background: rgba(255, 255, 255, .18); position: relative; overflow: hidden; }
.sy-hub__rows i::after { content: ""; position: absolute; inset: 0; background: #8DB2F2; transform-origin: left; transform: scaleX(.3); animation: sy-row 6s infinite; }
.sy-hub__rows i:nth-child(2)::after { animation-delay: -2s; }
.sy-hub__rows i:nth-child(3)::after { animation-delay: -4s; }
.sy-hub__live { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #B9C9E4; }
.sy-hub__live em { width: 7px; height: 7px; background: #3DD68C; animation: sy-blink 2s infinite; }
.sy-hub__node { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: -50% -50%; z-index: 2; display: grid; grid-template-columns: 30px auto; column-gap: 9px; align-items: center; width: max-content; max-width: 34cqw; padding: 9px 12px 9px 9px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 22px -16px rgba(10, 37, 64, .4); animation: sy-node 6s infinite; animation-delay: calc(var(--k) * 1s); }
.sy-hub__node svg { grid-row: span 2; width: 30px; height: 30px; padding: 6px; background: var(--bg-tint); color: var(--blue); transition: background .3s, color .3s; }
.sy-hub__node b { font-size: 14px; color: var(--navy); line-height: 1.2; }
.sy-hub__node small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.sy-hub__dot { position: absolute; left: 0; top: 0; z-index: 1; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--blue); opacity: 0; animation: sy-out 6s infinite; animation-delay: calc(var(--k) * 1s - .9s); }
.sy-hub__dot--in { animation-name: sy-in; }
@keyframes sy-out {
	0% { opacity: 0; transform: translate(50cqw, 50cqh); }
	3% { opacity: 1; }
	9% { transform: translate(calc(var(--x) * 1cqw), 50cqh); }
	15% { opacity: 1; transform: translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqh)); }
	18%, 100% { opacity: 0; transform: translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqh)); }
}
@keyframes sy-in {
	0% { opacity: 0; transform: translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqh)); }
	3% { opacity: 1; }
	9% { transform: translate(calc(var(--x) * 1cqw), 50cqh); }
	15% { opacity: 1; transform: translate(50cqw, 50cqh); }
	18%, 100% { opacity: 0; transform: translate(50cqw, 50cqh); }
}
@keyframes sy-node { 0%, 8%, 100% { border-color: var(--line); } 1%, 6% { border-color: var(--blue); } }
@keyframes sy-core { 0%, 100% { outline: 0 solid rgba(13, 91, 221, .0); } 5% { outline: 6px solid rgba(13, 91, 221, .18); } 12% { outline: 12px solid rgba(13, 91, 221, 0); } }
@keyframes sy-row { 0%, 100% { transform: scaleX(.3); } 50% { transform: scaleX(.85); } }
@keyframes sy-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- System rows ---------- */
.sy-list .section-head { max-width: 720px; }
.sy-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); }
.sy-row:first-of-type { margin-top: clamp(24px, 4vw, 48px); }
.sy-row--flip .sy-row__copy { order: 2; }
.sy-row__k { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-weight: 600; color: var(--blue); }
.sy-row__k span { font-variant-numeric: tabular-nums; color: var(--muted); }
.sy-row h3 { margin: 0 0 14px; font: 700 clamp(26px, 2.6vw, 34px)/1.15 var(--font-h); color: var(--navy); }
.sy-row__copy > p { color: var(--text); font-size: 17px; line-height: 1.7; margin: 0; }
.sy-row__pts { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.sy-row__pts li { display: flex; align-items: center; gap: 10px; color: var(--navy); font-weight: 500; }
.sy-row__pts svg { flex: none; width: 18px; height: 18px; color: var(--blue); }
.sy-art { position: relative; padding: clamp(20px, 3vw, 36px); background: var(--bg-alt); border: 1px solid var(--line); container-type: inline-size; }

/* shared window */
.sy-win { position: relative; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 44px -30px rgba(10, 37, 64, .45); }
.sy-win__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #F7F9FC; }
.sy-win__bar i { width: 8px; height: 8px; background: var(--line-strong); }
.sy-win__bar span { margin-left: 8px; font-size: 12px; color: var(--muted); }

/* 01 ERP: KPIs, a bar chart that breathes, order rows whose status moves along */
.sy-erp { padding: 16px; display: grid; gap: 8px; }
.sy-erp__kpis { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; margin-bottom: 6px; }
.sy-erp__kpis > span { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); }
.sy-erp__kpis small { font-size: 11px; color: var(--muted); }
.sy-erp__kpis b { font: 700 22px/1 var(--font-h); color: var(--navy); font-variant-numeric: tabular-nums; }
.sy-erp__chart { display: flex !important; align-items: end; gap: 5px; }
.sy-erp__chart i { flex: 1; height: 100%; background: var(--blue); transform-origin: bottom; transform: scaleY(.4); animation: sy-bar 4.8s var(--ease) infinite; animation-delay: calc(var(--b) * -.6s); }
.sy-erp__chart i:nth-child(odd) { background: #8DB2F2; }
@keyframes sy-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(.95); } }
.sy-erp__row { display: grid; grid-template-columns: 52px 1fr auto 92px; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); font-size: 13px; color: var(--text); }
.sy-erp__row b { color: var(--navy); font-variant-numeric: tabular-nums; }
.sy-erp__row span:not(.sy-chip) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sy-erp__row em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--navy); }
.sy-chip { height: 22px; overflow: hidden; }
.sy-chip > span { display: grid; animation: sy-chip 7.5s infinite; animation-delay: calc(var(--r) * -1.9s); }
.sy-chip i { display: grid; place-items: center; height: 22px; font-style: normal; font-size: 11px; font-weight: 600; }
.sy-chip i:nth-child(1) { background: var(--bg-tint); color: var(--blue); }
.sy-chip i:nth-child(2) { background: #FFF4E0; color: var(--warn); }
.sy-chip i:nth-child(3) { background: #E3F4EC; color: var(--ok); }
@keyframes sy-chip { 0%, 28% { transform: translateY(0); } 33%, 61% { transform: translateY(-22px); } 66%, 95% { transform: translateY(-44px); } 100% { transform: translateY(0); } }

/* 02 PDA: the beam reads the barcode, the line lands on the screen, stock ticks up */
.sy-pda { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; min-height: 300px; }
.sy-pda__box { justify-self: center; display: grid; gap: 6px; justify-items: center; width: min(190px, 100%); padding: 22px 16px 16px; background: #E9D9BF; border: 1px solid #D4BF9C; box-shadow: inset 0 14px 0 -6px #DCC8A6; }
.sy-pda__code { position: relative; width: 100%; height: 56px; background: #fff repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px, #111 8px 11px, transparent 11px 12px); background-clip: content-box; padding: 6px 8px; overflow: hidden; }
.sy-pda__code::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #E5484D; box-shadow: 0 0 8px 1px rgba(229, 72, 77, .7); opacity: 0; animation: sy-laser 4s infinite; }
.sy-pda__box small { font-size: 11px; letter-spacing: .08em; color: #5A4A30; font-variant-numeric: tabular-nums; }
.sy-pda__box em { font-style: normal; font-size: 12px; font-weight: 700; color: #5A4A30; }
.sy-pda__beam { width: clamp(30px, 8cqw, 70px); height: 26px; background: linear-gradient(90deg, rgba(229, 72, 77, .45), rgba(229, 72, 77, 0)); clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%); transform: scaleX(-1); opacity: 0; animation: sy-beam 4s infinite; }
@keyframes sy-laser { 0%, 18% { opacity: 0; transform: translateY(-14px); } 22% { opacity: 1; } 34% { opacity: 1; transform: translateY(14px); } 38%, 100% { opacity: 0; transform: translateY(14px); } }
@keyframes sy-beam { 0%, 18% { opacity: 0; } 22%, 34% { opacity: 1; } 38%, 100% { opacity: 0; } }
.sy-pda__dev { justify-self: center; position: relative; display: grid; gap: 10px; width: min(170px, 100%); padding: 14px 12px 16px; background: #1B2230; box-shadow: inset 0 0 0 1px #2E3747, 0 24px 40px -24px rgba(10, 37, 64, .7); }
.sy-pda__head { position: absolute; left: -10px; top: 26px; width: 10px; height: 34px; background: #2E3747; }
.sy-pda__scr { display: grid; gap: 8px; align-content: start; min-height: 170px; padding: 12px 10px; background: #fff; font-size: 12px; }
.sy-pda__scr > b { font-size: 12px; color: var(--navy); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.sy-pda__item { display: grid; grid-template-columns: 14px 1fr auto; gap: 6px; align-items: center; padding: 7px 6px; background: var(--bg-tint); color: var(--navy); font-weight: 600; opacity: 0; transform: translateY(8px); animation: sy-item 4s var(--ease) infinite; }
.sy-pda__item svg { width: 14px; height: 14px; color: var(--ok); }
.sy-pda__item em { font-style: normal; color: var(--muted); font-weight: 500; }
@keyframes sy-item { 0%, 36% { opacity: 0; transform: translateY(8px); } 44%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.sy-pda__stock { display: flex; justify-content: space-between; align-items: center; margin-top: auto; color: var(--muted); }
.sy-pda__n { height: 18px; overflow: hidden; font: 700 16px/18px var(--font-h); color: var(--navy); }
.sy-pda__n > span { display: grid; animation: sy-n 4s infinite; }
.sy-pda__n i { font-style: normal; height: 18px; font-variant-numeric: tabular-nums; }
@keyframes sy-n { 0%, 44% { transform: translateY(0); } 50%, 94% { transform: translateY(-18px); color: var(--ok); } 100% { transform: translateY(0); } }
.sy-pda__keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sy-pda__keys i { height: 12px; background: #2E3747; }
.sy-pda__keys i:nth-child(2) { background: #E5A33A; }

/* 03 CRM: the deal card walks across the board, gets won; a reminder pops in */
.sy-crm { --st: calc((100cqw - 48px) / 3 + 10px); position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; min-height: 250px; container-type: inline-size; }
.sy-crm__col { display: grid; align-content: start; gap: 8px; padding: 10px; background: #F7F9FC; border-top: 2px solid var(--line-strong); }
.sy-crm__col:last-of-type { border-top-color: var(--ok); }
.sy-crm__col b { font-size: 12px; color: var(--navy); }
.sy-crm__col i { height: 46px; background: #fff; border: 1px solid var(--line); }
.sy-crm__col i:nth-of-type(2) { height: 30px; opacity: .6; }
.sy-crm__card { position: absolute; left: 24px; top: 48px; z-index: 1; display: grid; gap: 3px; width: calc((100cqw - 48px) / 3 - 20px); padding: 9px 10px; background: #fff; border: 1px solid var(--blue); box-shadow: 0 14px 24px -14px rgba(10, 37, 64, .5); animation: sy-deal 8s var(--ease) infinite; }
.sy-crm__card b { font-size: 12.5px; color: var(--navy); line-height: 1.25; }
.sy-crm__card small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.sy-crm__card em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.sy-crm__won { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--ok); opacity: 0; animation: sy-won 8s infinite; }
.sy-crm__won svg { width: 12px; height: 12px; }
@keyframes sy-deal {
	0%, 18% { transform: translate(0, 0); }
	26% { transform: translate(var(--st), -8px) rotate(2deg); }
	30%, 52% { transform: translate(var(--st), 0); }
	60% { transform: translate(calc(var(--st) * 2), -8px) rotate(-2deg); }
	64%, 92% { transform: translate(calc(var(--st) * 2), 0); border-color: var(--ok); }
	100% { transform: translate(0, 0); }
}
@keyframes sy-won { 0%, 64% { opacity: 0; } 68%, 92% { opacity: 1; } 100% { opacity: 0; } }
.sy-toast { position: absolute; right: -14px; bottom: -18px; display: grid; grid-template-columns: 28px auto; column-gap: 10px; align-items: center; padding: 10px 14px 10px 10px; background: var(--navy); color: #fff; box-shadow: 0 18px 30px -16px rgba(10, 37, 64, .7); opacity: 0; transform: translateY(10px); animation: sy-toast 8s var(--ease) infinite; }
.sy-toast svg { grid-row: span 2; width: 28px; height: 28px; padding: 6px; background: rgba(255, 255, 255, .12); color: #8DB2F2; }
.sy-toast b { font-size: 13px; }
.sy-toast small { font-size: 12px; color: #B9C9E4; }
@keyframes sy-toast { 0%, 34% { opacity: 0; transform: translateY(10px); } 38%, 56% { opacity: 1; transform: none; } 60%, 100% { opacity: 0; transform: translateY(-6px); } }

/* 04 Invoice: lines fill in, myDATA stamp lands with its ΜΑΡΚ, the email leaves */
.sy-inv { position: relative; display: grid; place-items: center; min-height: 320px; }
.sy-inv__doc { position: relative; display: grid; gap: 9px; width: min(300px, 86%); padding: 22px 22px 26px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--navy); box-shadow: 0 26px 44px -30px rgba(10, 37, 64, .55); }
.sy-inv__doc > b { font: 700 14px/1.2 var(--font-h); color: var(--navy); letter-spacing: .02em; }
.sy-inv__doc > small { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.sy-inv__ln { display: grid; grid-template-columns: 1fr 48px; gap: 16px; }
.sy-inv__ln i { height: 8px; background: var(--bg-alt); position: relative; overflow: hidden; }
.sy-inv__ln i::after { content: ""; position: absolute; inset: 0; background: var(--line-strong); transform-origin: left; transform: scaleX(0); animation: sy-ln 7s var(--ease) infinite; animation-delay: calc(var(--l) * .25s); }
.sy-inv__ln i + i::after { background: var(--navy-2); }
@keyframes sy-ln { 0% { transform: scaleX(0); } 12%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.sy-inv__sum { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.sy-inv__sum b { font: 700 18px/1 var(--font-h); color: var(--navy); }
.sy-inv__mark { position: absolute; right: -22px; top: 46%; display: grid; grid-template-columns: 26px auto; gap: 8px; align-items: center; padding: 8px 12px 8px 8px; background: #fff; border: 2px solid var(--ok); color: var(--ok); opacity: 0; transform: scale(1.25) rotate(-4deg); animation: sy-stamp 7s cubic-bezier(.3, 1.4, .5, 1) infinite; }
.sy-inv__mark svg { width: 26px; height: 26px; }
.sy-inv__mark b { display: block; font-size: 13px; }
.sy-inv__mark small { display: block; font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; }
@keyframes sy-stamp { 0%, 30% { opacity: 0; transform: scale(1.25) rotate(-4deg); } 36%, 92% { opacity: 1; transform: rotate(-4deg); } 100% { opacity: 0; transform: rotate(-4deg); } }
.sy-inv__mail { position: absolute; left: 0; bottom: 8px; display: grid; grid-template-columns: 28px auto; gap: 10px; align-items: center; padding: 10px 14px 10px 10px; background: var(--navy); color: #fff; opacity: 0; animation: sy-mail 7s var(--ease) infinite; }
.sy-inv__mail svg { width: 28px; height: 28px; padding: 6px; background: rgba(255, 255, 255, .12); color: #8DB2F2; }
.sy-inv__mail b { display: block; font-size: 13px; }
.sy-inv__mail small { display: block; font-size: 11px; color: #B9C9E4; }
@keyframes sy-mail { 0%, 50% { opacity: 0; transform: translate(-12px, 8px); } 56%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translate(24px, 0); } }

/* ---------- End band ---------- */
.sy-end { padding-block: clamp(72px, 9vw, 120px); background: var(--bg-alt); border-top: 1px solid var(--line); }
.sy-end .wrap { display: grid; justify-items: center; gap: 14px; text-align: center; }
.sy-end .wrap > p { color: var(--muted); font-size: 18px; margin: 0 0 12px; }
.sy-end .fd-cta-wrap { width: min(760px, 100%); margin-top: 0; }
.sy-end .fd-cta { width: 100%; }
.sy-end .fd-cta-arrow { display: none !important; }


/* ---------- Systems band (template-parts/systems-band.php): home + site / e-shop landing pages ---------- */
.sy-band { background: var(--bg-alt); border-block: 1px solid var(--line); }
.sy-band__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.sy-band__list { list-style: none; margin: 26px 0 28px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sy-band__list a { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: center; height: 100%; padding: 12px; background: #fff; border: 1px solid var(--line); transition: border-color .2s; }
.sy-band__list a:hover { border-color: var(--blue); }
.sy-band__list svg { grid-row: span 2; width: 34px; height: 34px; padding: 7px; background: var(--bg-tint); color: var(--blue); }
.sy-band__list b { color: var(--navy); font-size: 15px; }
.sy-band__list span { color: var(--muted); font-size: 13px; line-height: 1.35; }

/* ---------- Hero ideas 07–09 (page-hero-sections.php) ---------- */
.syh { position: relative; padding: clamp(48px, 6vw, 88px) 0; background: var(--bg-alt); border-bottom: 1px solid var(--line); overflow: hidden; }
.syh__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px 56px; align-items: center; }
.syh__center { display: grid; justify-items: center; text-align: center; }
.syh__tag { margin: 0 0 16px; font-weight: 600; font-size: 14px; color: var(--blue); }
.syh__t { margin: 0; font: 700 clamp(34px, 4.3vw, 56px)/1.1 var(--font-h); color: var(--navy); }
.syh__center .syh__t { max-width: 900px; }
.syh__lead { max-width: 560px; margin: 18px 0 0; font-size: 19px; line-height: 1.6; color: var(--text); }
.syh__cta { grid-column: 1 / -1; display: grid; justify-items: center; gap: 18px; margin-top: 12px; }
.syh__cta .offer-points { justify-content: center; }

/* 08: one order's path */
.syf { position: relative; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; max-width: 1000px; margin: clamp(36px, 5vw, 56px) 0 clamp(28px, 4vw, 44px); padding: 0; container-type: inline-size; }
.syf::before { content: ""; position: absolute; left: 10%; right: 10%; top: 34px; height: 2px; background: var(--line-strong); }
.syf__tok { position: absolute; left: 10%; top: 30px; z-index: 1; width: 10px; height: 10px; margin-left: -5px; background: var(--blue); box-shadow: 0 0 0 5px rgba(13, 91, 221, .15); animation: syf-run 7.5s linear infinite; }
@keyframes syf-run { 0% { transform: translateX(0); opacity: 0; } 3% { opacity: 1; } 90% { transform: translateX(80cqw); opacity: 1; } 96%, 100% { transform: translateX(80cqw); opacity: 0; } }
.syf__s { position: relative; z-index: 2; display: grid; justify-items: center; gap: 8px; padding: 0 6px; }
.syf__s > span { display: grid; place-items: center; width: 68px; height: 68px; background: #fff; border: 1px solid var(--line); color: var(--navy); animation: syf-on 7.5s infinite; animation-delay: calc(var(--k) * 1.6875s); }
.syf__s svg { width: 28px; height: 28px; }
.syf__s b { margin-top: 6px; color: var(--navy); font-size: 16px; }
.syf__s small { color: var(--muted); font-size: 13px; }
@keyframes syf-on { 0% { background: #fff; color: var(--navy); border-color: var(--line); } 2%, 18% { background: var(--blue); color: #fff; border-color: var(--blue); } 26%, 100% { background: #fff; color: var(--navy); border-color: var(--line); } }

/* 09: four systems taking turns */
.syt__tabs { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 8px; margin-top: 28px; }
.syt__tabs button { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 14px 12px; background: #fff; border: 1px solid var(--line); color: var(--navy); font: 600 14px/1.2 var(--font-b); cursor: pointer; overflow: hidden; }
.syt__tabs button svg { width: 18px; height: 18px; color: var(--blue); }
.syt__tabs button i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.syt__tabs button[aria-pressed="true"] { border-color: var(--blue); }
.syt__tabs button[aria-pressed="true"] i { animation: syt-time var(--syt, 6s) linear forwards; }
.syt__tabs.is-held button[aria-pressed="true"] i { animation: none; transform: none; }
@keyframes syt-time { to { transform: scaleX(1); } }
.syt__stage { display: grid; }
.syt__pane { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s, transform .45s var(--ease), visibility 0s .35s; }
.syt__pane.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .45s var(--ease); }

/* the «Χρειάζεστε κάτι πιο απλό;» box right after the grey end band needs air above it */
.sy-explore { padding-top: clamp(56px, 7vw, 96px); }

/* ---------- Narrow ---------- */
@media (max-width: 1080px) {
	.sy-hub { max-width: 620px; margin-inline: auto; width: 100%; }
}
@media (max-width: 900px) {
	.sy-band__grid, .syh__grid { grid-template-columns: minmax(0, 1fr); }
	.sy-row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.sy-row--flip .sy-row__copy { order: 0; }
}
@media (max-width: 600px) {
	.sy-band__list { grid-template-columns: 1fr; }
	.syf__s > span { width: 46px; height: 46px; }
	.syf__s svg { width: 20px; height: 20px; }
	.syf::before { top: 23px; }
	.syf__tok { top: 19px; }
	.syf__s b { font-size: 12px; }
	.syf__s small { display: none; }
	.syt__tabs { grid-template-columns: 1fr 1fr; }
	.syh__lead { font-size: 17px; }
	.sy-hub { aspect-ratio: 360 / 400; }
	.sy-hub__core { width: 32cqw; padding: 10px; gap: 7px; }
	.sy-hub__core b { font-size: 18px; }
	.sy-hub__live { display: none; }
	.sy-hub__node { grid-template-columns: 1fr; justify-items: center; row-gap: 4px; max-width: 28cqw; padding: 8px 6px; text-align: center; }
	.sy-hub__node svg { grid-row: auto; width: 26px; height: 26px; padding: 5px; }
	.sy-hub__node b { font-size: 12px; }
	.sy-hub__node small { display: none; }
	.sy-erp { padding: 10px; }
	.sy-erp__row { grid-template-columns: 44px 1fr 78px; font-size: 12px; }
	.sy-erp__row em { display: none; }
	.sy-pda { grid-template-columns: 1fr; gap: 0; min-height: 0; }
	.sy-pda__beam { justify-self: center; width: 26px; height: 34px; clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%); transform: none; }
	.sy-pda__head { display: none; }
	.sy-crm { --st: calc((100cqw - 32px) / 3 + 6px); gap: 6px; padding: 10px; }
	.sy-crm__col { padding: 6px; }
	.sy-crm__col b { font-size: 11px; }
	.sy-crm__card { left: 16px; top: 40px; width: calc((100cqw - 32px) / 3 - 12px); padding: 7px; }
	.sy-crm__card small { display: none; }
	.sy-toast { right: -8px; }
	.sy-inv__mark { right: -10px; }
}

/* ---------- Reduced motion: finished states, nothing loops ---------- */
@media (prefers-reduced-motion: reduce) {
	.sy-anim *, .sy-anim { animation: none !important; }
}
.a11y-nomotion .sy-anim *, .a11y-nomotion .sy-anim { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
	.sy-hub__dot { opacity: 0; }
	.sy-pda__item, .sy-crm__won, .sy-inv__mark, .sy-inv__mail { opacity: 1; transform: none; }
	.sy-inv__ln i::after, .sy-hub__rows i::after { transform: none; }
	.sy-pda__n > span { transform: translateY(-18px); }
	.sy-chip > span { transform: translateY(calc(min(var(--r), 2) * -22px)); }
	.sy-toast { display: none; }
}
.a11y-nomotion .sy-pda__item, .a11y-nomotion .sy-crm__won, .a11y-nomotion .sy-inv__mark, .a11y-nomotion .sy-inv__mail { opacity: 1; transform: none; }
.a11y-nomotion .sy-inv__ln i::after, .a11y-nomotion .sy-hub__rows i::after { transform: none; }
.a11y-nomotion .sy-pda__n > span { transform: translateY(-18px); }
.a11y-nomotion .sy-toast { display: none; }
@media (prefers-reduced-motion: reduce) { .syf__tok { display: none; } .syt__tabs button i { display: none; } }
.a11y-nomotion .syf__tok, .a11y-nomotion .syt__tabs button i { display: none; }