/* WinKoin Cloud · winkoin.com (ανανέωση 2026, έκδοση 2).
   Ιδέα: ήσυχο εταιρικό πλέγμα σε σκούρο μπλε και λευκό. Λεπτές γραμμές 1px και εναλλασσόμενες ανοιχτές λωρίδες κρατούν
   τη δομή· γωνίες σχεδόν τετράγωνες (4px). Το μόνο «ζωντανό» στοιχείο είναι το διάγραμμα της κορυφής· δύο σκούρες
   λωρίδες (AI Call Center, επικοινωνία) δίνουν ρυθμό. Η προηγούμενη έκδοση (κάρτες, γαλάζια πλαίσια): ../site-2026-v1. */
:root {
    --navy: #0B1B44;        /* τίτλοι, σκούρες λωρίδες */
    --navy-2: #13296B;
    --blue: #2453E6;        /* κουμπιά, σύνδεσμοι, εικονίδια */
    --blue-2: #1C43C2;
    --ink: #0D1530;
    --ink-2: #3F4866;
    --ink-3: #66708A;
    --line: #D8DEEA;
    --line-2: #E7EBF3;
    --bg-2: #EEF1F7;        /* λωρίδες */
    --bg-3: #F6F8FB;
    --ok: #0F7A52;
    --ok-bg: #E3F5EC;
    --info-bg: #E4ECFB;
    --r: 4px;
    --gutter: clamp(16px, 4vw, 56px);
    --ease: cubic-bezier(.2, .7, .2, 1);
    --display: "Manrope", "Segoe UI", Arial, sans-serif;
    --body: "Commissioner", "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; color: var(--navy); font-family: var(--display); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 10px 14px; border-radius: var(--r); background: var(--navy); color: #fff; }
.skip:focus { left: 8px; }

.wrap { padding-inline: var(--gutter); }
.inner { max-width: 1360px; margin-inline: auto; }
.eyebrow { display: block; color: var(--blue); font: 700 12px var(--display); letter-spacing: .14em; text-transform: uppercase; }
.lead { color: var(--ink-2); font-size: 16.5px; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.bub { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: var(--r); background: var(--info-bg); color: var(--blue); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px; border: 1px solid var(--blue); border-radius: var(--r); background: var(--blue); color: #fff; font: 700 14.5px var(--display); cursor: pointer; transition: background .2s var(--ease), border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.btn .ic { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover { background: var(--blue-2); border-color: var(--blue-2); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(36, 83, 230, .22); }
.btn:hover .ic:last-child { transform: translateX(3px); }
.btn.outline { background: #fff; border-color: var(--line); color: var(--navy); }
.btn.outline:hover { border-color: var(--navy); background: #fff; box-shadow: none; }
.btn.wide { width: 100%; }
.st { display: inline-block; padding: 3px 8px; border-radius: 3px; font: 600 11px var(--body); font-style: normal; white-space: nowrap; }
.st.ok { background: var(--ok-bg); color: var(--ok); }
.st.i { background: var(--info-bg); color: var(--blue); }
.st.o { background: var(--bg-2); color: var(--ink-2); }
.ticks { display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: 15px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F7A52' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; }

/* Εμφάνιση με κίνηση (το .pre το βάζει μόνο το site.js, σε στοιχεία κάτω από την οθόνη) */
[data-reveal].pre { opacity: 0; transform: translateY(16px); }
[data-reveal].in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

/* Λογότυπο: WINKOIN και από κάτω —— CLOUD —— */
.logo { display: inline-grid; justify-items: center; color: var(--navy); }
.logo b { font: 800 23px/1 var(--display); letter-spacing: .3em; margin-right: -.3em; }
.logo small { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 5px; padding-left: .45em; color: var(--blue); font: 800 9.5px/1 var(--display); letter-spacing: .45em; }
.logo small::before, .logo small::after { content: ""; flex: 1; height: 1.5px; background: currentColor; }

/* ---------- Λωρίδα και κεφαλίδα ---------- */
.topbar { background: var(--navy); color: #fff; font-size: 13px; }
.topbar .inner { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 38px; }
.topbar ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 32px; align-items: center; }
.topbar li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.topbar .ic { width: 14px; height: 14px; opacity: .75; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar .hours { color: rgba(255, 255, 255, .72); }
.topbar .portal { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 3px; background: rgba(255, 255, 255, .12); font-weight: 600; }
.topbar .portal:hover { background: rgba(255, 255, 255, .2); text-decoration: none; }
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .93); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .3s var(--ease); }
.hdr.scrolled { box-shadow: 0 6px 24px rgba(11, 27, 68, .08); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.menu { display: flex; align-items: center; gap: 28px; white-space: nowrap; color: var(--ink-2); font: 600 14.5px var(--display); }
.menu a { position: relative; padding: 6px 0; transition: color .2s; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.menu a:hover, .menu a.on { color: var(--navy); }
.menu a:hover::after, .menu a.on::after { transform: scaleX(1); }
/* Μενού «Υπηρεσίες» */
.menu > li { position: relative; }
.drop > button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; color: var(--ink-2); font: 600 14.5px var(--display); cursor: pointer; }
.drop > button:hover, .drop[data-open] > button { color: var(--navy); }
.drop > button .ic { width: 16px; height: 16px; transition: transform .2s; }
.drop[data-open] > button .ic { transform: rotate(180deg); }
.drop ul { position: absolute; top: calc(100% + 14px); left: -18px; z-index: 5; display: grid; gap: 2px; width: 340px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: 0 18px 44px rgba(11, 27, 68, .14); visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.drop ul::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.drop[data-open] ul { visibility: visible; opacity: 1; transform: none; }
.drop ul a { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 4px; }
.drop ul a::after { display: none; }
.drop ul a:hover { background: var(--bg-3); }
.d-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--info-bg); color: var(--blue); }
.d-ic .ic { width: 18px; height: 18px; }
.drop ul b { display: block; color: var(--navy); font: 700 14.5px var(--display); }
.drop ul small { display: block; color: var(--ink-3); font: 400 12.5px var(--body); }
.mnav .m-sub span { display: block; padding: 18px 0 6px; color: var(--ink-3); font: 700 11.5px var(--display); letter-spacing: .14em; text-transform: uppercase; }
.mnav li a.m-in { padding-left: 14px; font-size: 16px; }
.cta { display: flex; align-items: center; gap: 18px; }
.cta .tel { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font: 700 14.5px var(--display); white-space: nowrap; }
.cta .tel .ic { color: var(--blue); }
.burger { display: none; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--navy); cursor: pointer; }
.mnav { position: fixed; inset: 0; z-index: 60; overflow-y: auto; padding: 0 var(--gutter) 28px; background: #fff; }
.mnav[hidden] { display: none; }
.mnav-top { display: flex; align-items: center; justify-content: space-between; min-height: 72px; border-bottom: 1px solid var(--line); }
.mnav-top .burger { display: grid; }
.mnav ul { margin: 0 0 24px; }
.mnav li a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line-2); color: var(--navy); font: 700 17px var(--display); }
.mnav li a .ic { color: var(--ink-3); }
.mnav .btn { margin-top: 10px; }
body.menu-open { overflow: hidden; }

/* ---------- Κορυφή ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ring { 0% { transform: scale(.92); opacity: .45; } 100% { transform: scale(1.7); opacity: 0; } }
.hero { position: relative; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #F7F9FC 0%, var(--bg-2) 100%); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(900px 500px at 78% 50%, rgba(36, 83, 230, .12), transparent 65%); }
.hero .inner { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hero .txt { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 72px var(--gutter) 60px 0; }
.hero .txt > * { animation: fadeUp .7s var(--ease) both; }
.hero .txt > :nth-child(2) { animation-delay: .08s; }
.hero .txt > :nth-child(3) { animation-delay: .16s; }
.hero .txt > :nth-child(4) { animation-delay: .24s; }
.hero .txt > :nth-child(5) { animation-delay: .32s; }
.hero .txt > :nth-child(6) { animation-delay: .4s; }
.hero .txt > :nth-child(7) { animation-delay: .48s; }
/* Συνεργάτης ΣΔΚΕ (στη θέση του eyebrow) και τα τέσσερα «μαζί με το πρόγραμμα» κάτω από τα κουμπιά (ίδιο ύφος με το .trust) */
.hbadge { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; padding: 7px 16px 7px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: 0 6px 18px rgba(11, 27, 68, .06); }
.hbadge img { width: 34px; height: auto; }
.hbadge span { display: grid; line-height: 1.25; }
.hbadge b { color: var(--navy); font: 800 13.5px var(--display); }
.hbadge small { color: var(--ink-3); font-size: 12px; }
.hplus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 560px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.hplus a { display: grid; align-content: start; gap: 8px; padding: 12px 14px 13px; border-right: 1px solid var(--line); color: var(--navy); font: 700 13px/1.25 var(--display); transition: background .25s, color .25s; }
.hplus a:last-child { border-right: 0; }
.hplus a:hover { background: var(--bg-3); color: var(--blue); }
.hplus .ic { flex: none; width: 19px; height: 19px; color: var(--blue); }
@media (max-width: 1240px) {
    .hplus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hplus a { display: flex; align-items: center; gap: 9px; padding: 11px 14px; }
    .hplus a:nth-child(2) { border-right: 0; }
    .hplus a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.hero h1 { font-size: clamp(38px, 4.4vw, 64px); }
.hero .sub { color: var(--blue); font: 700 clamp(20px, 1.8vw, 26px)/1.2 var(--display); letter-spacing: -.02em; margin-top: -6px; }
.hero .lead { max-width: 54ch; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; }
.stats { display: grid; grid-template-columns: 1.3fr 1fr 1fr; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.stats div { padding-left: 16px; border-left: 1px solid var(--line); }
.stats div:first-child { padding-left: 0; border: 0; }
.stats b { display: block; color: var(--navy); font: 800 30px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: 6px; color: var(--ink-2); font-size: 12.5px; line-height: 1.35; }
.vis { position: relative; display: flex; align-items: center; min-width: 0; padding: 48px 0 56px 48px; }
.hub { position: relative; width: 100%; max-width: 680px; margin-left: auto; animation: fadeUp .9s var(--ease) .2s both; }
.hub svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--body); }
.hub .ln { fill: none; stroke: var(--blue); stroke-width: 1.4; opacity: .3; }
.hub .pk { fill: var(--blue); }
.hub .pk.g { fill: #16A34A; }
.hub .glow { fill: var(--blue); opacity: .14; filter: blur(28px); }
.hub .core .bx { fill: var(--navy); filter: drop-shadow(0 18px 34px rgba(11, 27, 68, .32)); }
.hub .core .t { fill: #fff; font: 800 19px var(--display); letter-spacing: .14em; }
.hub .core .s { fill: #8FB0FF; font: 800 8.5px var(--display); letter-spacing: .32em; }
.hub .core .cl { stroke: #8FB0FF; stroke-width: 1.2; }
.hub .ring { fill: none; stroke: var(--blue); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ring 3.2s ease-out infinite; }
.hub .ring.r2 { animation-delay: 1.6s; }
.hub .node { transform-box: fill-box; transform-origin: center; animation: popIn .6s var(--ease) both; }
/* Οι κόμβοι είναι τα g 4–9 μέσα στο svg (πριν: γραμμές, κέντρο, κουκκίδες) */
.hub .node:nth-of-type(4) { animation-delay: .4s; } .hub .node:nth-of-type(5) { animation-delay: .48s; } .hub .node:nth-of-type(6) { animation-delay: .56s; } .hub .node:nth-of-type(7) { animation-delay: .64s; }
.hub .node:nth-of-type(8) { animation-delay: .72s; } .hub .node:nth-of-type(9) { animation-delay: .8s; } .hub .node:nth-of-type(10) { animation-delay: .88s; } .hub .node:nth-of-type(11) { animation-delay: .96s; }
.hub .node .bx { fill: #fff; stroke: var(--line); filter: drop-shadow(0 8px 18px rgba(11, 27, 68, .10)); }
.hub .node .tile { fill: var(--info-bg); }
.hub .node .ni { color: var(--blue); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hub .node .lb { fill: var(--ink); font: 700 12px var(--display); }
.hub .node .sb { fill: var(--ink-3); font-size: 10px; }
.hub .node .ok { fill: var(--ok); font-weight: 600; }
/* Φόντο με βάθος: αχνό πλέγμα από τελείες που σβήνει προς τις άκρες, και δύο σταθεροί κύκλοι γύρω από το κέντρο */
.vis::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(36, 83, 230, .2) 1px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 60% 62% at 58% 50%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 60% 62% at 58% 50%, #000 25%, transparent 100%); }
.hub .orb { fill: none; stroke: var(--blue); stroke-width: 1; opacity: .12; }
.hub .orb.o2 { stroke-dasharray: 3 6; opacity: .14; }
/* «Ζωντανό» διάγραμμα: ένα γεγονός τη φορά πάνω από το κέντρο· ανάβει το κουτί και η γραμμή του (site.js, HUB_EVENTS) */
.hub { container-type: inline-size; }
.hub .ev { position: absolute; left: 50%; top: 73.2%; display: flex; align-items: center; gap: 1.5cqw; width: 40cqw; padding: 1.4cqw 1.6cqw; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 14px 30px rgba(11, 27, 68, .14); opacity: 0; transform: translate(-50%, 8px); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; }
.hub .ev.on { opacity: 1; transform: translate(-50%, 0); }
.hub .ev-ic { display: grid; place-items: center; flex: none; width: 4.6cqw; height: 4.6cqw; border-radius: 6px; background: var(--blue); color: #fff; }
.hub .ev-ic .ic { width: 2.7cqw; height: 2.7cqw; }
.hub .ev-t { display: grid; min-width: 0; line-height: 1.25; }
.hub .ev-t b { overflow: hidden; color: var(--navy); font: 700 max(11px, 1.8cqw) var(--display); white-space: nowrap; text-overflow: ellipsis; }
.hub .ev-t small { overflow: hidden; color: var(--ink-3); font-size: max(10px, 1.55cqw); white-space: nowrap; text-overflow: ellipsis; }
.hub .ev-ok { display: grid; place-items: center; flex: none; width: 3.2cqw; height: 3.2cqw; margin-left: auto; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
.hub .ev-ok .ic { width: 2cqw; height: 2cqw; stroke-width: 3; }
.hub .ln { transition: opacity .4s, stroke-width .4s; }
.hub .ln.on { opacity: .85; stroke-width: 2.2; }
.hub .node .bx, .hub .node .tile, .hub .node .ni { transition: fill .4s, stroke .4s, color .4s; }
.hub .node.on .bx { stroke: var(--blue); }
.hub .node.on .tile { fill: var(--blue); }
.hub .node.on .ni { color: #fff; }
.hub .cap { position: absolute; left: 0; right: 0; bottom: -14px; display: flex; justify-content: center; }
.hub .cap span { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font-size: 12.5px; box-shadow: 0 8px 20px rgba(11, 27, 68, .08); }
.hub .cap b { color: var(--navy); font-family: var(--display); }

/* ---------- Πελάτες ---------- */
.partners { padding-block: 22px; border-bottom: 1px solid var(--line); background: #fff; }
.partners .inner { display: flex; align-items: center; gap: 28px; }
.partners .lbl { flex: none; max-width: 170px; padding-right: 24px; border-right: 1px solid var(--line); color: var(--ink-3); font: 700 11.5px/1.35 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.marquee { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.track { display: flex; align-items: center; gap: 60px; width: max-content; animation: marquee 40s linear infinite; }
.track .dup { display: contents; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 30px)); } }
/* Λογότυπα πάντα σε χρώμα (επιθυμία χρήστη) */
.track img { height: 36px; width: auto; max-width: none; transition: transform .3s var(--ease); }
.track img:hover { transform: translateY(-2px); }
.sdke { flex: none; display: flex; align-items: center; gap: 10px; padding-left: 24px; border-left: 1px solid var(--line); color: var(--navy); font: 700 12.5px/1.3 var(--display); max-width: 160px; }
.sdke img { width: 34px; height: auto; }

/* ---------- Γενικά για ενότητες ---------- */
.sec { padding-block: 88px; }
.sec.band { background: var(--bg-2); border-block: 1px solid var(--line); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; margin-bottom: 44px; }
.sec-head h2, .process h2, .about h2, .faq h2 { margin-top: 10px; font-size: clamp(30px, 3.3vw, 46px); }
.sec-head .side { max-width: 42ch; padding-bottom: 6px; color: var(--ink-2); font-size: 15px; }

/* ---------- Το πρόγραμμα: ενιαίο πλέγμα με γραμμές ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.svc { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px 24px 28px; border-right: 1px solid var(--line); transition: background .3s var(--ease); }
.svc:last-child { border-right: 0; }
.svc:hover { background: var(--bg-3); }
.svc h3 { margin-top: 10px; font-size: 21px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.svc > p { color: var(--ink-2); font-size: 14.5px; }
.tag { padding: 3px 7px; border-radius: 3px; background: var(--navy); color: #fff; font: 700 10px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.mini { display: flex; flex-direction: column; gap: 6px; min-height: 212px; padding: 12px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--bg-3); font-size: 12px; color: var(--ink-2); }
.mini .mh { display: flex; align-items: center; gap: 6px; justify-content: space-between; margin-bottom: 2px; color: var(--ink); font-weight: 600; }
.mini .mh .ic { width: 15px; height: 15px; color: var(--blue); margin-right: auto; }
.mini .mh span { color: var(--ink-3); font-weight: 400; }
.mini .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; border: 1px solid var(--line-2); border-radius: 3px; background: #fff; }
.mini .row span { min-width: 0; color: var(--ink); font-weight: 500; line-height: 1.25; }
.mini .row small { display: block; color: var(--ink-3); font-size: 10.5px; font-weight: 400; }
.mini .row b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini .tot { display: flex; justify-content: space-between; padding: 7px 9px; border-radius: 3px; background: var(--navy); color: #fff; font-weight: 600; }
.mini .post { margin-top: auto; padding: 7px; border-radius: 3px; background: var(--navy); color: #fff; font-weight: 600; text-align: center; font-size: 11px; }
.mini.chat .m { max-width: 90%; padding: 8px 11px; border-radius: 10px; font-size: 12px; line-height: 1.4; }
.mini.chat .u { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 3px; }
.mini.chat .a { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 3px; }
.mini.chat .row { margin-top: auto; }
.mini.chat .row + .row { margin-top: 0; }
.svc-extra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.xs { display: flex; gap: 12px; align-items: flex-start; min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-3); transition: border-color .2s, transform .2s var(--ease); }
.xs:hover { border-color: var(--blue); transform: translateY(-2px); }
.xs .ic { width: 22px; height: 22px; margin-top: 2px; color: var(--blue); }
.xs b { display: block; margin-bottom: 2px; color: var(--navy); font: 700 14.5px var(--display); }
.xs span { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }

/* ---------- Το πρόγραμμα: πλέγμα, πάνω φωτογραφίες, κάτω κείμενα ---------- */
.ind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--line); }
.ind { display: flex; flex-direction: column; min-width: 0; background: #fff; color: inherit; }
.ind.photo { position: relative; justify-content: flex-end; min-height: 380px; overflow: hidden; color: #fff; }
.ind.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.ind.photo:hover img { transform: scale(1.05); }
.ind.photo .cap { position: relative; margin-top: auto; padding: 90px 24px 24px; background: linear-gradient(180deg, rgba(11, 27, 68, 0), rgba(11, 27, 68, .9) 45%); }
.ind.photo h3 { color: #fff; font-size: 22px; }
.ind.photo p { max-width: 32ch; margin-top: 6px; color: rgba(255, 255, 255, .86); font-size: 14px; }
/* ΔΙΑΣ και myData: τα επίσημα λογότυπα σε ανοιχτό φόντο αντί για φωτογραφία */
.ind.photo.logos { background: radial-gradient(420px 300px at 50% 30%, #fff, #EEF1F7); }
.ind.photo.logos .lg-row { position: absolute; inset: 0 0 40% 0; display: flex; align-items: center; justify-content: center; gap: 28px; padding: 24px 20px; }
.ind.photo.logos .lg-row img { position: static; width: auto; object-fit: contain; image-rendering: -webkit-optimize-contrast; transition: transform .5s var(--ease); }
.ind.photo.logos .lg-row img:first-child { height: 132px; max-width: 34%; }
.ind.photo.logos .lg-row img:last-child { height: auto; width: 56%; max-height: 150px; }
.ind.photo.logos:hover .lg-row img { transform: scale(1.04); }
/* Ειδοποιήσεις: laptop με email και κινητό με SMS (σκίτσο σε CSS, όχι οθόνη του προγράμματος) */
.ind.photo.notif { background: radial-gradient(420px 320px at 50% 25%, #DCE6FD, #EEF1F7 70%); }
.dev { position: absolute; inset: 0 0 40% 0; display: flex; align-items: center; justify-content: center; padding: 18px 10px 10px; }
.lap { position: relative; width: 82%; max-width: 280px; margin: 0; transition: transform .6s var(--ease); }
.lap-scr { display: grid; gap: 4px; aspect-ratio: 16 / 10.4; padding: 6px; border: 6px solid #1E2433; border-bottom-width: 8px; border-radius: 9px 9px 0 0; background: #fff; overflow: hidden; }
.lap-base { display: block; height: 9px; margin: 0 -9%; border-radius: 0 0 9px 9px; background: linear-gradient(#C9CFDB, #A9B1C1); box-shadow: 0 10px 18px rgba(11, 27, 68, .18); }
.lap-base::after { content: ""; display: block; width: 18%; height: 3px; margin: 0 auto; border-radius: 0 0 4px 4px; background: #8E97A9; }
.mail-top { display: flex; align-items: center; gap: 3px; padding-bottom: 3px; border-bottom: 1px solid var(--line-2); }
.mail-top i { width: 4px; height: 4px; border-radius: 50%; background: #CBD3E0; }
.mail-top b { margin-left: 6px; color: var(--navy); font: 700 8px var(--display); }
.mail { display: flex; align-items: center; gap: 5px; padding: 3px 4px; border-radius: 4px; }
.mail.on { background: var(--info-bg); }
.mail > span { flex: 1; min-width: 0; }
.ol-top { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 3px 4px; border-bottom: 1px solid var(--line-2); }
.ol-top b { color: #16A34A; font: 800 9px var(--display); }
.ol-top small { color: var(--ink-3); font-size: 6.5px; }
.ol-bal { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 5px 6px; border-radius: 5px; background: var(--navy); color: #fff; }
.ol-bal small { grid-column: 1; font-size: 6px; opacity: .75; }
.ol-bal b { grid-column: 1; font: 800 11px var(--display); }
.ol-bal i { grid-column: 2; grid-row: 1 / 3; padding: 3px 5px; border-radius: 3px; background: #fff; color: var(--navy); font: 700 6px var(--display); font-style: normal; }
.mail b { display: block; overflow: hidden; color: var(--ink); font: 700 7px var(--display); white-space: nowrap; text-overflow: ellipsis; }
.mail small { display: block; overflow: hidden; color: var(--ink-3); font-size: 6.5px; white-space: nowrap; text-overflow: ellipsis; }
.mail.on small { color: var(--blue); font-weight: 600; }
.mail em { color: var(--ink-3); font-size: 6px; font-style: normal; }
.mail .av { width: 14px; height: 14px; flex: none; display: grid; place-items: center; border-radius: 3px; font-size: 5px !important; background: var(--blue); color: #fff; font: 800 7px var(--display); font-style: normal; }
.mail .av.g { background: #16A34A; }
.mob { position: absolute; right: 7%; bottom: 4%; width: 78px; transform: rotate(4deg); aspect-ratio: 9 / 18.5; padding: 4px; border-radius: 15px; background: #1E2433; box-shadow: 0 14px 28px rgba(11, 27, 68, .3); transition: transform .6s var(--ease); }
.mob-scr { display: flex; flex-direction: column; height: 100%; padding: 14px 5px 6px; border-radius: 11px; background: #F4F6FA; }
.mob-h { padding-bottom: 4px; margin-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--navy); font: 800 6.5px var(--display); text-align: center; letter-spacing: .04em; }
.sms { padding: 5px 6px; border-radius: 8px 8px 8px 2px; background: #E5E9F0; color: var(--ink); font-size: 6.3px; line-height: 1.35; }
.sms-t { margin-top: 3px; color: var(--ink-3); font-size: 5.5px; }
.ind.photo.notif:hover .lap { transform: translateY(-3px); }
.ind.photo.notif:hover .mob { transform: translateY(-6px) rotate(1deg); }
.ind.photo .tag { display: inline-block; margin-bottom: 8px; background: #fff; color: var(--navy); }
.ind.text { gap: 8px; padding: 26px 24px 28px; transition: background .3s var(--ease); }
.ind.text:hover { background: var(--bg-3); }
.ind.text .ic { width: 22px; height: 22px; margin-bottom: 6px; color: var(--blue); }
.ind.text h3 { font-size: 20px; }
.ind.text p { color: var(--ink-2); font-size: 14.5px; }
.ind.text.go { background: var(--navy); }
.ind.text.go:hover { background: var(--navy-2); }
.ind.text.go h3 { color: #fff; }
.ind.text.go p { color: rgba(255, 255, 255, .8); }
.ind .more { margin-top: auto; padding-top: 14px; color: #fff; font: 700 14px var(--display); }

/* ---------- Ένας μήνας: βήματα με κάθετες γραμμές ---------- */
.process { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.process .lead { margin: 16px 0 26px; max-width: 36ch; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.step { padding: 22px 24px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .5); transition: background .3s; }
.step:hover { background: #fff; }
.step .n { display: block; color: #C5CEE0; font: 800 46px/1 var(--display); letter-spacing: -.04em; transition: color .4s var(--ease); }
.step:hover .n { color: var(--blue); }
.step h3 { margin-top: 14px; font-size: 21px; }
.step p { margin-top: 8px; color: var(--ink-2); font-size: 14.5px; }
.step .st { margin-top: 8px; }

/* ---------- Σκούρες λωρίδες ---------- */
.dark, .contact { position: relative; overflow: hidden; background: var(--navy); color: #fff; }
.dark::before, .contact::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 420px at 85% 15%, rgba(120, 160, 255, .16), transparent 60%); }
.contact::before { background: radial-gradient(800px 500px at 10% 100%, rgba(120, 160, 255, .12), transparent 60%); }
.dark .inner, .contact .inner { position: relative; display: grid; gap: 56px; padding-block: 88px; }
.dark .inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.dark .eyebrow, .contact .eyebrow { color: #8FB0FF; }
.dark h2, .contact h2 { margin-top: 10px; color: #fff; font-size: clamp(30px, 3.3vw, 46px); }
.dark .lead, .contact .lead { margin-top: 16px; color: rgba(255, 255, 255, .78); max-width: 46ch; }
.chat { display: flex; flex-direction: column; gap: 10px; max-width: 440px; margin-top: 28px; }
.chat .lbl { color: rgba(255, 255, 255, .55); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.chat .m { max-width: 88%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.chat .u { align-self: flex-end; background: #fff; color: var(--ink); border-bottom-right-radius: 3px; }
.chat .a { align-self: flex-start; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-bottom-left-radius: 3px; }
.chat .a b { color: #9FE3C2; }
.dk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dk-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r); background: rgba(255, 255, 255, .06); transition: background .3s, transform .3s var(--ease); }
.dk-card:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); }
.dk-card .i { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 7px; background: rgba(255, 255, 255, .12); }
.dk-card h3 { color: #fff; font-size: 17px; }
.dk-card p { color: rgba(255, 255, 255, .74); font-size: 14px; }
.dk-card.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; border-color: #fff; background: #fff; color: var(--ink); }
.dk-card.wide:hover { background: #fff; }
.dk-card.wide > div { flex: 1; min-width: 0; }
.dk-card.wide small { display: block; color: var(--blue); font: 700 11px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.dk-card.wide b { display: block; color: var(--navy); font: 700 16px var(--display); }
.dk-card.wide span:not(.st):not(.av) { color: var(--ink-2); font-size: 13.5px; }
.av { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font: 800 15px var(--display); }

/* AI Call Center: κείμενο αριστερά, το popup του προγράμματος πάνω σε σκίτσο του WinKoin δεξιά */
.dk-list { display: grid; margin-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14); }
.dk-list li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.dk-list .ic { width: 20px; height: 20px; margin-top: 2px; color: #8FB0FF; }
.dk-list b { display: block; color: #fff; font: 700 15.5px var(--display); }
.dk-list span { color: rgba(255, 255, 255, .72); font-size: 14px; }
.demo-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: #8FB0FF; font: 700 15px var(--display); }
.demo-link:hover { color: #fff; }
.demo-link .ic { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.demo-link:hover .ic { transform: translateX(3px); }
.callstage { position: relative; min-height: 560px; }
.app { position: absolute; inset: 0 70px 60px 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; background: #F3F6FB; opacity: .9; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.app-top { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #E6EBF3; border-bottom: 1px solid #D5DCE8; }
.app-top i { width: 10px; height: 10px; border-radius: 50%; background: #C9D1DE; }
.app-top span { margin-left: 10px; color: #6B7590; font-size: 12px; font-weight: 600; }
.app-body { display: flex; height: 100%; }
.app-side { display: grid; align-content: start; gap: 12px; width: 150px; padding: 18px 14px; background: #fff; border-right: 1px solid #E2E8F0; }
.app-side b { height: 14px; width: 70%; margin-bottom: 8px; border-radius: 4px; background: #C7D2E6; }
.app-side span { height: 10px; border-radius: 4px; background: #E3E8F0; }
.app-side span.on { background: #BFD0FA; }
.app-main { flex: 1; padding: 20px; }
.app-main p { height: 12px; margin: 0 0 14px; border-radius: 4px; background: #E1E7F0; }
.app-main p.w40 { width: 40%; height: 16px; background: #C7D2E6; }
.app-main p.w60 { width: 60%; } .app-main p.w80 { width: 80%; }
.app-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 20px; }
.app-cards span { height: 64px; border: 1px solid #E2E8F0; border-radius: 8px; background: #fff; }
/* Αντίγραφο του skin «modern» (include/voip/skins/modern.php) */
.wkv { position: absolute; right: 0; bottom: 0; width: 340px; overflow: hidden; border: 1.5px solid #CBD5E1; border-radius: 14px; background: #fff; color: #1A1A1A; font: 14px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .08); animation: wkv-in .6s var(--ease) both; }
@keyframes wkv-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.wkv-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 10px; border-bottom: 1px solid #F0F0F0; }
.wkv-tl { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.wkv-pulse { width: 10px; height: 10px; border-radius: 50%; background: #E53935; animation: wkv-pulse 1.6s infinite; }
@keyframes wkv-pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, .7); } 70% { box-shadow: 0 0 0 10px rgba(229, 57, 53, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); } }
.wkv-tr { display: flex; align-items: center; gap: 8px; }
.wkv-tr .ic { width: 16px; height: 16px; color: #9AA3B2; }
.wkv-counter { padding: 4px 10px; border-radius: 999px; background: #E8F0FE; color: #1565C0; font-size: 12px; font-weight: 600; }
.wkv-sub { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #F5F5F5; color: #1565C0; font-weight: 700; }
.wkv-live { padding: 3px 8px; border-radius: 6px; background: #FFE5EA; color: #C62828; font-size: 11px; letter-spacing: .03em; }
.wkv-fields { padding: 4px 14px 6px; }
.wkv-fields p { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #F5F5F5; }
.wkv-fields p:last-child { border-bottom: 0; }
.wkv-fields span { color: #777; }
.wkv-fields b { max-width: 64%; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.wkv-green { padding: 4px 10px; border-radius: 999px; background: #E8F5E9; color: #2E7D32; font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .03em; }
.wkv-hist { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 10px 14px; border-top: 1px solid #F0F0F0; background: #FAFAFA; font-size: 12px; }
.wkv-hist > div { flex: 1; padding: 8px 10px; border: 1px solid #EEE; border-radius: 8px; background: #fff; }
.wkv-hist b { display: block; color: #333; font-weight: 600; }
.wkv-hist small { color: #777; font-size: 11.5px; }
.wkv-hist > span { position: absolute; right: 26px; margin-top: 9px; color: #999; font-size: 11px; }
.wkv-actions { display: flex; gap: 8px; padding: 10px 14px 12px; }
.wkv-actions span { flex: 1; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; font-weight: 600; text-align: center; }
.wkv-actions .p { background: #1565C0; color: #fff; }
.wkv-actions .s { border-color: #C5D8F3; background: #E8F0FE; color: #1565C0; }

/* Αιτήματα ενοίκων (CRMD): βήματα αριστερά, κονσόλα δεξιά (χρώματα του πραγματικού CRMD) */
.crmd { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.crmd-steps li { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.crmd-steps li:last-child { border-bottom: 1px solid var(--line); }
.crmd-steps .n { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font: 800 13px var(--display); }
.crmd-steps b { display: block; color: var(--navy); font: 700 16.5px var(--display); }
.crmd-steps span:not(.n) { color: var(--ink-2); font-size: 14.5px; }
.console { position: relative; margin: 30px 220px 90px 0; border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: 0 18px 44px rgba(11, 27, 68, .10); font-size: 13px; }
.c-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--bg-3); color: var(--ink-3); }
.c-top b { margin-right: auto; color: var(--navy); font: 800 16px var(--display); }
.c-k i { margin-left: 4px; color: var(--navy); font-style: normal; font-weight: 700; }
.c-row { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; grid-template-areas: 'id main t' 'id main s'; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.c-row:last-of-type { border-bottom: 0; }
.c-row.new { background: #FFFBEB; box-shadow: inset 3px 0 0 #F59E0B; }
.c-row.done { opacity: .7; }
.c-id { display: grid; gap: 6px; color: var(--ink-3); font: 600 11px ui-monospace, Consolas, monospace; }
.sla { height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.sla i { display: block; height: 100%; background: #22C55E; }
.sla.w i { background: #F59E0B; }
.c-main { min-width: 0; }
.c-main b { display: block; overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.c-main span { color: var(--ink-3); font-size: 12px; }
.c-main em { color: var(--blue); font-style: normal; font-weight: 600; }
.c-row .t-b, .c-row .t-a { grid-area: t; justify-self: end; }
.c-row .pill:last-child { grid-area: s; justify-self: end; }
.c-id { grid-area: id; }
.c-main { grid-area: main; }
.pill { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.t-b { background: #FFE9E9; color: #C62828; }
.t-a { background: #DBEAFE; color: #1D4ED8; }
.s-o { background: #FEF3C7; color: #92400E; }
.s-e { background: #DBEAFE; color: #1E40AF; }
.s-w { background: #F3E8FF; color: #7E22CE; }
.s-c { background: #F3F4F6; color: #4B5563; }
.pill::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.t-b::before, .t-a::before { display: none; }
/* Κινητό με αληθινές αναλογίες (19.5:9), πλαίσιο, νησίδα και γραμμή κατάστασης */
.phone { position: absolute; right: -236px; top: -20px; width: 286px; transform: scale(.86); transform-origin: top right; aspect-ratio: 286 / 600; padding: 11px; border-radius: 50px; background: linear-gradient(145deg, #2B303B, #0E1118 55%, #22262F); box-shadow: 0 0 0 1.5px #3A404C, 0 40px 80px rgba(11, 27, 68, .35), 0 12px 24px rgba(11, 27, 68, .2); }
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2A2F3A; }
.phone::before { left: -3px; top: 120px; height: 56px; box-shadow: 0 72px 0 #2A2F3A; }
.phone::after { right: -3px; top: 150px; height: 84px; }
.ph-screen { position: relative; height: 100%; overflow: hidden; border-radius: 40px; background: #F4F6FA; display: flex; flex-direction: column; }
.ph-status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 22px 0 30px; color: #0D1530; font: 600 13px var(--body); }
.ph-island { position: absolute; left: 50%; top: 10px; width: 92px; height: 26px; border-radius: 20px; background: #000; transform: translateX(-50%); }
.ph-sig { display: flex; align-items: flex-end; gap: 2px; height: 11px; margin-left: auto; margin-right: 6px; }
.ph-sig i { width: 3px; border-radius: 1px; background: #0D1530; }
.ph-sig i:nth-child(1) { height: 4px; } .ph-sig i:nth-child(2) { height: 6px; } .ph-sig i:nth-child(3) { height: 8px; } .ph-sig i:nth-child(4) { height: 11px; }
.ph-bat { position: relative; width: 22px; height: 11px; border: 1.5px solid #0D1530; border-radius: 3px; }
.ph-bat::before { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; border-radius: 1px; background: #0D1530; }
.ph-bat::after { content: ""; position: absolute; right: -4px; top: 2.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: #0D1530; }
.ph-app { display: flex; align-items: center; gap: 10px; padding: 8px 16px 12px; background: #fff; border-bottom: 1px solid #E7EBF3; }
.ph-logo { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--blue); color: #fff; font: 800 15px var(--display); }
.ph-app b { display: block; color: var(--navy); font: 700 12.5px/1.2 var(--display); }
.ph-app small { display: block; color: var(--ink-3); font-size: 10.5px; }
.ph-body { flex: 1; padding: 12px 16px 0; font-size: 12px; }
.ph-title { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; color: var(--navy); font: 800 17px var(--display); }
.ph-title .ic { width: 18px; height: 18px; transform: rotate(180deg); color: var(--blue); }
.ph-l { margin: 9px 0 4px; color: var(--ink-2); font-size: 11px; font-weight: 600; }
.ph-in { padding: 9px 11px; border: 1px solid #D5DCE8; border-radius: 10px; background: #fff; color: var(--ink); font-size: 12.5px; }
.ph-in.ta { min-height: 64px; line-height: 1.45; font-size: 12px; }
.ph-att { display: flex; gap: 8px; }
.ph-img, .ph-add { width: 58px; height: 58px; border-radius: 10px; }
.ph-img { background: #C9D3E0; }
.ph-img.a { background: radial-gradient(18px 22px at 60% 30%, rgba(80, 120, 160, .55), transparent 70%), linear-gradient(160deg, #E9E4DA, #B9B2A6 60%, #8F887C); }
.ph-img.b { background: radial-gradient(14px 30px at 40% 55%, rgba(70, 110, 150, .5), transparent 70%), linear-gradient(200deg, #DCD7CE, #A7A196 70%, #7E786E); }
.ph-add { display: grid; place-items: center; border: 1.5px dashed #B8C4D8; color: var(--blue); font-size: 22px; }
.ph-send { margin-top: 14px; padding: 11px; border-radius: 12px; background: var(--blue); color: #fff; font: 700 13px var(--display); text-align: center; }
.ph-note { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 9px; color: var(--ok); font-size: 10.5px; font-weight: 600; }
.ph-note .ic { width: 13px; height: 13px; stroke-width: 2.6; }
.ph-l.mine { margin-top: 14px; padding-top: 10px; border-top: 1px solid #E7EBF3; }
.ph-tk { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #E7EBF3; color: var(--ink); font-size: 11.5px; font-weight: 600; }
.ph-tk small { display: block; color: var(--ink-3); font-size: 10px; font-weight: 400; }
.ph-tk i { padding: 2px 8px; border-radius: 999px; background: #F3F4F6; color: #4B5563; font-size: 10px; font-style: normal; }
.ph-home { align-self: center; width: 110px; height: 4px; margin: 8px 0 8px; border-radius: 3px; background: #0D1530; }

/* ---------- Εισπράκτορες και ιστοσελίδα: δύο κελιά με γραμμή ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.duo-c { display: flex; flex-direction: column; min-width: 0; }
.duo-c + .duo-c { border-left: 1px solid var(--line); }
.duo-t { padding: 32px 32px 26px; }
.duo-t h3 { margin: 10px 0 18px; font-size: clamp(22px, 2vw, 28px); }
.note { margin-top: 14px; color: var(--ink-3); font-size: 13.5px; }
.shot { position: relative; flex: 1; min-height: 360px; margin-top: auto; overflow: hidden; border-top: 1px solid var(--line); background: var(--bg-2); }
.shot-eisp .photo { position: absolute; left: 0; top: 0; width: 56%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.shot-eisp .screen { position: absolute; top: 28px; width: 28%; border: 5px solid #fff; border-radius: 22px; box-shadow: 0 18px 44px rgba(11, 27, 68, .25); }
.shot-eisp .s1 { left: 46%; }
.shot-eisp .s2 { left: 69%; top: 64px; }
.shot-sites { display: grid; place-items: center; padding: 28px 24px 56px; }
.shot-sites img { width: 100%; max-width: 600px; filter: drop-shadow(0 18px 36px rgba(11, 27, 68, .14)); }
.ai-tag { position: absolute; right: 20px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font-size: 13px; box-shadow: 0 8px 20px rgba(11, 27, 68, .08); }
.ai-tag .ic { width: 16px; height: 16px; color: var(--blue); }
.ai-tag b { color: var(--navy); font-family: var(--display); }

/* ---------- Μετάβαση και δεδομένα: λωρίδα με τέσσερα στοιχεία ---------- */
.sec-head .side .btn { margin-top: 16px; }
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.trust > div { display: grid; gap: 4px; padding: 26px 24px; border-right: 1px solid var(--line); transition: background .3s; }
.trust > div:last-child { border-right: 0; }
.trust > div:hover { background: var(--bg-3); }
.trust .ic { width: 24px; height: 24px; margin-bottom: 10px; color: var(--blue); }
.trust b { color: var(--navy); font: 800 22px/1.1 var(--display); letter-spacing: -.02em; }
.trust span { color: var(--ink-2); font-size: 14px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.pair-c { padding: 36px; min-width: 0; }
.pair-c + .pair-c { border-left: 1px solid var(--line); }
.pair-c h2 { margin: 10px 0 22px; font-size: clamp(24px, 2.3vw, 32px); }
.rows { margin-bottom: 26px; }
.rows li { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line-2); }
.rows li:last-child { border-bottom: 1px solid var(--line-2); }
.rows .n { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font: 800 13px var(--display); }
.rows b { display: block; color: var(--navy); font: 700 16px var(--display); }
.rows span:not(.n) { color: var(--ink-2); font-size: 14.5px; }
.safe { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.safe li { display: grid; gap: 2px; padding: 18px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.safe .ic { width: 24px; height: 24px; margin-bottom: 8px; color: var(--blue); }
.safe b { color: var(--navy); font: 700 15px var(--display); }
.safe span { color: var(--ink-2); font-size: 14px; }

/* ---------- Μαρτυρίες ---------- */
/* Βαθμολογία Google δίπλα στον τίτλο των μαρτυριών· τα αστέρια γεμίζουν ως το --v (από 5) */
.grate { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink-2); font-size: 14px; transition: border-color .2s; }
.grate:hover { border-color: var(--navy); }
.grate b { color: var(--navy); font: 800 16px var(--display); }
.grate .ic { width: 15px; height: 15px; color: var(--blue); }
.stars { position: relative; display: inline-block; color: #D8DEEA; font-size: 17px; letter-spacing: 1px; line-height: 1; }
.stars::before { content: "★★★★★"; position: absolute; inset: 0; width: calc(var(--v) / 5 * 100%); overflow: hidden; color: #F5B301; white-space: nowrap; }
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.q { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 28px 26px 22px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.q:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11, 27, 68, .10); }
.q .mark { height: 22px; color: var(--line); font: 800 56px/.75 var(--display); }
.q blockquote { margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.6; }
.q figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-2); }
.q figcaption img { height: 30px; width: auto; }
.q figcaption span { padding-left: 14px; border-left: 1px solid var(--line-2); color: var(--ink-3); font-size: 12.5px; line-height: 1.4; }
.q figcaption b { display: block; color: var(--ink); font-size: 14px; }

/* ---------- Εταιρεία ---------- */
.about { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.about .lead { margin-top: 18px; max-width: 54ch; }
.tl { margin-top: 28px; }
.tl li { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); }
.tl li:last-child { border-bottom: 1px solid var(--line); }
.tl b { color: var(--navy); font: 800 18px var(--display); }
.tl span { color: var(--ink-2); font-size: 15px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.facts > div { padding: 26px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts > div:nth-child(2n) { border-right: 0; }
.facts > div b { display: block; color: var(--navy); font: 800 clamp(34px, 3.4vw, 48px)/1 var(--display); letter-spacing: -.03em; }
.facts > div span { display: block; margin-top: 8px; color: var(--ink-2); font-size: 14px; }
.facts-f { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 18px 24px; background: var(--bg-3); color: var(--ink-2); font-size: 14px; }
.facts-f img { width: 40px; height: auto; }
.facts-f b { color: var(--navy); }

/* Χάρτης πελατών (SVG από Natural Earth, χωρίς υπηρεσία χαρτών) */
.mapcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.mapcard .gmap { flex: 1; height: 100%; object-fit: contain; }
#etaireia .about { align-items: stretch; }
.map-side { margin-top: 24px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.map-side .map-f { border-top: 0; }
.map-t { display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-bottom: 1px solid var(--line); color: var(--navy); font: 700 16px var(--display); }
.map-t .ic { width: 18px; height: 18px; color: var(--blue); }
/* Ελλάδα από τελείες (μοτίβο #dg/#dn στο SVG), καμπύλες από την έδρα προς κάθε περιοχή. Σκούρα εκδοχή: .mapcard.dk */
.gmap { display: block; width: 100%; height: auto; background: radial-gradient(120% 90% at 35% 25%, #FFFFFF 0%, #EEF3FD 55%, #E3EBFB 100%); }
.gmap #dn circle { fill: #D3DBEA; }
.gmap #dg circle { fill: #6F8FE6; }
.gmap .nb { fill: url(#dn); }
.gmap .gr, .gmap .cy { fill: url(#dg); stroke: rgba(36, 83, 230, .22); stroke-width: .5; stroke-linejoin: round; }
.gmap .inset { fill: rgba(255, 255, 255, .55); stroke: #C9D5F2; stroke-dasharray: 3 3; }
.gmap .il { fill: var(--ink-3); font: 700 8px var(--display); letter-spacing: .14em; }
.gmap .arcs path { fill: none; stroke: var(--blue); stroke-width: .9; stroke-linecap: round; opacity: .42; stroke-dasharray: 2.5 3.5; animation: flow 2.4s linear infinite; animation-delay: var(--d); }
@keyframes flow { to { stroke-dashoffset: -12; } }
.gmap .pt circle { fill: var(--blue); stroke: #fff; stroke-width: 1.4; }
.gmap .pt .pl { fill: var(--blue); stroke: none; opacity: .35; transform-box: fill-box; transform-origin: center; animation: pin 2.6s ease-out infinite; }
.gmap .pt:nth-child(3n) .pl { animation-delay: .9s; } .gmap .pt:nth-child(3n+1) .pl { animation-delay: 1.7s; }
.gmap .hq circle:last-of-type { fill: var(--navy); stroke-width: 2.2; }
.gmap .hq .pl { fill: var(--navy); }
.mapcard .gmap .hq .glow { fill: url(#hqg); stroke: none; animation: none; }
.gmap .lb text { fill: var(--navy); font: 700 9.5px var(--display); paint-order: stroke; stroke: rgba(255, 255, 255, .9); stroke-width: 3px; stroke-linejoin: round; }
.gmap .lb .lb-hq { font-size: 12.5px; font-weight: 800; }
.gmap .lb .lb-s { fill: var(--blue); font-size: 7.5px; letter-spacing: .16em; }
.mapcard.dk { border-color: var(--navy); background: var(--navy); }
.mapcard.dk .map-t { border-color: rgba(255, 255, 255, .12); color: #fff; }
.mapcard.dk .map-t .ic { color: #8FB0FF; }
.mapcard.dk .gmap { background: radial-gradient(120% 90% at 35% 25%, #1A3175 0%, #0F2257 50%, #0B1B44 100%); }
.mapcard.dk .gmap #dn circle { fill: #233A7C; }
.mapcard.dk .gmap #dg circle { fill: #7F9EF0; }
.mapcard.dk .gmap .gr, .mapcard.dk .gmap .cy { stroke: rgba(143, 176, 255, .25); }
.mapcard.dk .gmap .inset { fill: rgba(255, 255, 255, .04); stroke: rgba(143, 176, 255, .35); }
.mapcard.dk .gmap .il { fill: #8FB0FF; }
.mapcard.dk .gmap .arcs path { stroke: #8FB0FF; opacity: .55; }
.mapcard.dk .gmap .pt circle { fill: #5C86FF; stroke: #0B1B44; }
.mapcard.dk .gmap .pt .pl { fill: #8FB0FF; }
.mapcard.dk .gmap .hq circle:last-of-type { fill: #fff; stroke: #5C86FF; }
.mapcard.dk .gmap .hq .pl { fill: #fff; }
.mapcard.dk .gmap .hq .glow { fill: url(#hqg); }
.mapcard.dk .gmap .lb text { fill: #fff; stroke: rgba(11, 27, 68, .85); }
.mapcard.dk .gmap .lb .lb-s { fill: #8FB0FF; }
@keyframes pin { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(3.4); opacity: 0; } }
.map-f { display: flex; align-items: center; gap: 22px; padding: 18px 22px; border-top: 1px solid var(--line); }
.map-n { display: grid; flex: none; }
.map-n b { color: var(--blue); font: 800 40px/1 var(--display); letter-spacing: -.03em; }
.map-n span { max-width: 19ch; color: var(--ink-2); font-size: 13px; line-height: 1.3; }
.map-c { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 22px; border-left: 1px solid var(--line); }
.map-c li { padding: 3px 9px; border-radius: 999px; background: var(--bg-2); color: var(--navy); font-size: 12.5px; font-weight: 600; }
.map-s { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); background: var(--bg-3); }
.map-s div { padding: 16px 22px; }
.map-s div + div { border-left: 1px solid var(--line); }
.map-s b { display: block; color: var(--navy); font: 800 24px/1.1 var(--display); letter-spacing: -.02em; }
.map-s span { color: var(--ink-2); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .gmap .pt .pl { display: none; } .gmap .arcs path { animation: none; } }

/* ---------- Ερωτήσεις: απλές γραμμές ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.faq .lead { margin-top: 16px; max-width: 34ch; }
.faq .lead a { color: var(--blue); font-weight: 600; }
.qs details { border-top: 1px solid var(--line); }
.qs details:last-child { border-bottom: 1px solid var(--line); }
.qs summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; color: var(--navy); font: 700 17px var(--display); cursor: pointer; list-style: none; transition: color .2s; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: "+"; color: var(--ink-3); font-size: 24px; font-weight: 500; line-height: 1; transition: transform .3s var(--ease); }
.qs details[open] summary::after { transform: rotate(45deg); }
.qs summary:hover { color: var(--blue); }
.qs details p { max-width: 70ch; padding: 0 0 18px; color: var(--ink-2); font-size: 15px; }

/* ---------- Επικοινωνία ---------- */
.contact .inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; }
.cinfo { display: grid; gap: 14px; margin-top: 34px; }
.cinfo li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.cinfo .ic { opacity: .8; }
.cinfo li:last-child { flex-wrap: nowrap; align-items: flex-start; }
.cinfo li:last-child .ic { margin-top: 3px; }
.cinfo b { font: 700 18px var(--display); }
.cinfo a:hover b { text-decoration: underline; text-underline-offset: 4px; }
.cinfo span { color: rgba(255, 255, 255, .72); }
.book { align-self: start; padding: 8px 30px 30px; border-radius: var(--r); background: #fff; color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.tabs { display: flex; gap: 26px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.tabs button { padding: 16px 0 13px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-3); font: 700 15px var(--display); cursor: pointer; }
.tabs button[aria-selected="true"] { border-color: var(--blue); color: var(--navy); }
.pane[hidden] { display: none; }
.pane h3 { font-size: 21px; }
.pane > p { margin: 8px 0 18px; color: var(--ink-2); font-size: 15px; }
.pane .ticks { margin-bottom: 22px; }
.fine { display: block; margin-top: 10px; color: var(--ink-3); font-size: 12.5px; text-align: center; }
form.pane { display: grid; gap: 14px; }
form.pane .fine { margin: 0; text-align: left; }
form.pane .fine a { color: var(--blue); text-decoration: underline; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
form.pane label { display: grid; gap: 6px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
form.pane input, form.pane textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; background: #fff; font-size: 15px; transition: border-color .2s, box-shadow .2s; }
form.pane textarea { min-height: 96px; resize: vertical; }
form.pane input:focus, form.pane textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36, 83, 230, .15); }
.btn[disabled] { opacity: .6; pointer-events: none; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg:empty { display: none; }
.form-msg { padding: 12px 14px; border-radius: 3px; background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.form-msg.err { background: #FDECEA; color: #8A1C12; }

/* ---------- Υποσέλιδο ---------- */
.ftr { padding-block: 56px 26px; background: #fff; }
.ftr .cols { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 36px; }
.f-brand .logo { justify-items: center; }
.f-brand p { margin-top: 16px; max-width: 30ch; color: var(--ink-2); font-size: 14px; }
.social { display: flex; gap: 8px; margin-top: 18px; }
.social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); color: var(--navy); transition: border-color .2s, color .2s; }
.social a:hover { border-color: var(--blue); color: var(--blue); }
.social .ic { width: 18px; height: 18px; }
.ftr h4 { margin-bottom: 14px; color: var(--ink); font-size: 14px; letter-spacing: 0; }
.ftr ul { display: grid; gap: 9px; color: var(--ink-2); font-size: 14px; }
.ftr ul a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.ft-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px; }
.ft-legal a:hover, .ft-legal button:hover { color: var(--navy); }
.ft-legal button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.mbar { display: none; }

/* ---------- Cookies: τρία κουμπιά ίδιου βάρους ---------- */
.cookies { position: fixed; left: 20px; bottom: 20px; z-index: 70; width: min(440px, calc(100% - 24px)); padding: 22px; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: var(--r); background: #fff; box-shadow: 0 24px 60px rgba(11, 27, 68, .22); }
.cookies[hidden] { display: none; }
.cookies h2 { font-size: 18px; letter-spacing: 0; }
.cookies > p { margin: 8px 0 10px; color: var(--ink-2); font-size: 14px; }
.cookies > p a { color: var(--blue); text-decoration: underline; }
.tg { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-2); color: var(--ink); font-weight: 600; font-size: 14px; }
.tg small { color: var(--ink-3); font-weight: 400; }
.tg input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.ck-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.ck-btns .btn { min-height: 42px; padding: 0 8px; font-size: 13px; }

/* ---------- Σελίδες κειμένου (πολιτική απορρήτου) ---------- */
.ptop { border-bottom: 1px solid var(--line); background: var(--bg-2); padding-inline: var(--gutter); }
.ptop .panel { max-width: 1360px; margin-inline: auto; padding-block: 44px 40px; }
.crumbs { margin-bottom: 14px; color: var(--ink-3); font-size: 14px; }
.crumbs a { color: var(--blue); }
.ptop h1 { font-size: clamp(32px, 3.6vw, 46px); }
.ptop p { margin-top: 10px; color: var(--ink-3); }
.wrap.legal { max-width: calc(1360px + 2 * var(--gutter)); margin-inline: auto; display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: start; padding-block: 48px 80px; }
.toc { position: sticky; top: 100px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.toc h2 { margin: 0 0 10px; color: var(--blue); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.toc ol { counter-reset: t; }
.toc a { display: flex; gap: 8px; padding: 8px 10px; border-left: 2px solid transparent; color: var(--ink-2); font-size: 14.5px; counter-increment: t; }
.toc a::before { content: counter(t) "."; color: var(--ink-3); }
.toc a:hover, .toc a.on { color: var(--navy); }
.toc a.on { border-color: var(--blue); background: var(--bg-3); }
.prose { max-width: 760px; counter-reset: s; }
.prose h2 { margin: 36px 0 10px; font-size: 22px; counter-increment: s; }
.prose h2::before { content: counter(s) ". "; color: var(--blue); }
.prose section:first-child h2 { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); font-size: 15.5px; }
.prose p, .prose ul { margin: 0 0 12px; }
.prose ul { list-style: disc; padding-left: 22px; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.who { display: flex; gap: 18px; margin: 16px 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-3); color: var(--ink); }
.who b { display: block; color: var(--navy); }
.draft { margin: 0 0 28px; padding: 12px 16px; border-left: 3px solid #B36B00; background: #FFF2DC; color: #6B4A0E; font-size: 14px; }

/* ---------- Σελίδες υπηρεσιών (ανάπτυξη εφαρμογών, Soft1) ---------- */
.phero { position: relative; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #F7F9FC 0%, var(--bg-2) 100%); }
.phero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(800px 460px at 80% 50%, rgba(36, 83, 230, .12), transparent 65%); }
.phero .inner { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px; align-items: center; }
.phero .txt { display: flex; flex-direction: column; gap: 18px; padding: 56px 0 60px; }
.phero .txt > * { animation: fadeUp .7s var(--ease) both; }
.phero .crumbs { margin: 0; color: var(--ink-3); font-size: 13.5px; }
.phero .crumbs a { color: var(--blue); }
.phero h1 { font-size: clamp(34px, 3.8vw, 54px); }
.phero .sub { margin-top: -6px; color: var(--blue); font: 700 clamp(18px, 1.6vw, 22px)/1.25 var(--display); }
.phero .lead { max-width: 56ch; }
.pvis { position: relative; min-height: 400px; display: grid; place-items: center; animation: fadeUp .9s var(--ease) .2s both; }
.pv-card { border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 24px 60px rgba(11, 27, 68, .14); font-size: 12.5px; }
.pv-web { width: min(480px, 92%); overflow: hidden; margin: 0 auto 70px 0; }
.pv-top { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #EEF1F7; }
.pv-top i { width: 9px; height: 9px; border-radius: 50%; background: #CBD3E0; }
.pv-top span { margin: 0 auto; padding: 3px 26px; border-radius: 5px; background: #fff; color: var(--ink-3); font-size: 11px; }
.pv-body { display: grid; gap: 8px; padding: 16px 18px 18px; }
.pv-h { color: var(--navy); font: 800 16px var(--display); }
.pv-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pv-kpi span { padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg-3); }
.pv-kpi small { display: block; color: var(--ink-3); font-size: 10.5px; }
.pv-kpi b { color: var(--navy); font: 800 17px var(--display); }
.pv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink); }
.pv-mob { position: absolute; right: 0; bottom: -2%; width: 188px; padding: 16px 14px; border: 6px solid #1E2433; border-radius: 22px; }
.pv-mob .pv-h { font-size: 14px; }
.pv-l { margin: 4px 0 10px; color: var(--ink-3); font-size: 11.5px; }
.pv-chip { padding: 6px 8px; border-radius: 6px; background: #FFF6E5; color: #8A5A00; font-size: 10.5px; font-weight: 600; }
.pv-btn { margin-top: 10px; padding: 8px; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 700; text-align: center; }
/* Soft1: γέφυρα δεδομένων */
.bridge { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, .8fr); align-items: center; gap: 0; width: 100%; max-width: 600px; }
.br-col { display: grid; gap: 12px; }
.br-n { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 20px rgba(11, 27, 68, .08); }
.br-n .ic { width: 22px; height: 22px; padding: 6px; box-sizing: content-box; border-radius: 6px; background: var(--info-bg); color: var(--blue); }
.br-n b { display: block; color: var(--ink); font: 700 13.5px var(--display); }
.br-n small { color: var(--ink-3); font-size: 11.5px; }
.br-mid { position: relative; display: grid; justify-items: center; gap: 2px; padding: 0 6px; text-align: center; }
.br-mid b { padding: 12px 14px; border-radius: 10px; background: var(--navy); color: #fff; font: 800 14px var(--display); letter-spacing: .12em; box-shadow: 0 14px 30px rgba(11, 27, 68, .3); }
.br-mid small { color: var(--ink-3); font-size: 11px; }
.br-line { position: absolute; top: calc(50% - 12px); left: -6px; width: 18%; height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 11px); }
.br-line.r { left: auto; right: -6px; }
.br-line i { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: flow 2s linear infinite; }
.br-line i + i { animation-delay: 1s; }
@keyframes flow { from { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { left: 100%; opacity: 0; } }
.br-erp { display: grid; justify-items: center; gap: 4px; padding: 22px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 18px 40px rgba(11, 27, 68, .14); }
.br-erp b { color: var(--navy); font: 800 26px var(--display); letter-spacing: -.02em; }
.br-erp small { margin-top: -6px; color: var(--ink-3); font-size: 11px; letter-spacing: .14em; }
.br-erp .st { margin-top: 6px; }
/* Τρεις στήλες με λίστες */
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.cols3 article { display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 32px; transition: background .3s; }
.cols3 article + article { border-left: 1px solid var(--line); }
.cols3 article:hover { background: var(--bg-3); }
.cols3 .bub { border-radius: var(--r); }
.cols3 h3 { font-size: 21px; }
.cols3 p { color: var(--ink-2); font-size: 14.5px; }
.cols3 .ticks { margin-top: 6px; }
.more-l { margin-top: auto; padding-top: 10px; color: var(--blue); font: 700 14px var(--display); }
.steps.s4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trust.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.f-h { margin-bottom: 4px; padding-top: 22px; font-size: 21px; }
@media (max-width: 980px) {
    .phero .inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .phero .txt { padding: 40px 0 16px; }
    .pvis { min-height: 0; padding: 10px 0 48px; }
    .cols3 { grid-template-columns: minmax(0, 1fr); }
    .cols3 article + article { border-left: 0; border-top: 1px solid var(--line); }
    .trust.t3 { grid-template-columns: minmax(0, 1fr); }
    .trust.t3 > div { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
    .pv-mob { display: none; }
    .pv-web { width: 100%; }
    .bridge { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .br-line { display: none; }
    .steps.s4 { grid-template-columns: minmax(0, 1fr); }
}

/* Ιστοσελίδες και eShop */
.ws-stack { position: relative; width: min(560px, 100%); padding-bottom: 40px; }
.ws-d { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 30px 70px rgba(11, 27, 68, .18); }
.ws-d img { width: 100%; }
.ws-m { position: absolute; right: -18px; bottom: 0; width: 26%; margin: 0; overflow: hidden; border: 6px solid #1E2433; border-radius: 22px; background: #fff; box-shadow: 0 24px 50px rgba(11, 27, 68, .3); }
.ws-m img { width: 100%; aspect-ratio: 300 / 560; object-fit: cover; object-position: top; }
.work { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wk { display: flex; flex-direction: column; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.wk:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11, 27, 68, .12); }
.wk.big { grid-column: span 2; grid-row: span 2; }
.work.w2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.work.w2 .wk-m { width: 17%; right: 28px; bottom: 22px; }
.wk-img { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.wk-img > img:first-child { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.wk:hover .wk-img > img:first-child { transform: scale(1.03); }
.wk.big .wk-img { flex: 1; }
.wk.big .wk-img > img:first-child { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: left top; }
.wk-m { position: absolute; z-index: 1; right: 24px; bottom: 20px; width: 20%; border: 5px solid #1E2433; border-radius: 18px; aspect-ratio: 300 / 560; object-fit: cover; object-position: top; box-shadow: 0 18px 40px rgba(11, 27, 68, .3); }
.wk figcaption { display: grid; gap: 4px; padding: 16px 20px 18px; }
.wk figcaption b { color: var(--navy); font: 700 17px var(--display); }
.wk figcaption span:last-child { color: var(--ink-2); font-size: 14px; }
.tag-c, .tag-d { justify-self: start; padding: 2px 8px; border-radius: 3px; font: 700 10.5px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.tag-c { background: var(--ok-bg); color: var(--ok); }
.tag-d { background: var(--bg-2); color: var(--ink-3); }
.trust.inc { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust.inc > div:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
.trust.inc > div:nth-child(4) { border-right: 0; }
.trust.inc > div:last-child { border-right: 0; }
.trust.inc b { font-size: 18px; }
.cols3.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
    .work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wk.big { grid-column: 1 / -1; grid-row: auto; }
    .wk.big .wk-img { aspect-ratio: 16 / 10; flex: none; }
    .trust.inc, .cols3.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trust.inc > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .trust.inc > div:nth-child(2n) { border-right: 0; }
    .cols3.c4 article + article { border-left: 0; }
    .cols3.c4 article:nth-child(2n) { border-left: 1px solid var(--line); }
    .cols3.c4 article:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
    .work, .work.w2, .trust.inc, .cols3.c4 { grid-template-columns: minmax(0, 1fr); }
    .wk.big { grid-column: auto; }
    .trust.inc > div { border-right: 0; }
    .cols3.c4 article:nth-child(2n) { border-left: 0; }
    .cols3.c4 article + article { border-top: 1px solid var(--line); }
    .ws-m { right: 0; width: 28%; }
}

/* ---------- Blog (λίστα και άρθρο· τα αρχεία στο blog/) ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn.ghost { border-color: rgba(255, 255, 255, .35); background: transparent; color: #fff; }
.btn.ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); box-shadow: none; }
.blog-top .panel { padding-block: 44px 0; }
.bt-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; align-items: end; }
.blog-top h1 { margin-top: 10px; }
.blog-top p { max-width: 60ch; }
.b-search { position: relative; display: flex; gap: 8px; }
.b-search > .ic { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--ink-3); pointer-events: none; }
.b-search input { flex: 1; min-width: 0; min-height: 46px; padding: 0 12px 0 42px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: 15px; }
.b-search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36, 83, 230, .15); }
.b-cats { display: flex; gap: 6px; margin-top: 32px; overflow-x: auto; scrollbar-width: none; }
.b-cats::-webkit-scrollbar { display: none; }
.b-cats a { flex: none; padding: 12px 14px; border-bottom: 2px solid transparent; color: var(--ink-2); font: 700 14px var(--display); white-space: nowrap; transition: color .2s, border-color .2s; }
.b-cats a:first-child { padding-left: 0; }
.b-cats a:hover { color: var(--navy); }
.b-cats a[aria-current] { border-color: var(--blue); color: var(--navy); }
.blog-list { padding-block: 56px 88px; }
.b-note { margin-bottom: 28px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-3); color: var(--ink-2); }
.b-note a { color: var(--blue); }
.b-feat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.bf-img { position: relative; min-height: 340px; overflow: hidden; background: var(--bg-2); }
.bf-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.b-feat:hover .bf-img img, .bc:hover .bc-img img { transform: scale(1.04); }
.bf-body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 40px; border-left: 1px solid var(--line); }
.bf-top { display: flex; align-items: center; gap: 12px; }
.b-feat h2 { font-size: clamp(24px, 2.2vw, 32px); }
.b-feat h2 a:hover, .bc h3 a:hover { color: var(--blue); }
.b-feat .bc-meta { margin-top: 0; }
.b-feat .btn { margin-top: auto; }
.b-h { margin: 64px 0 24px; font-size: 24px; }
.b-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bc { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; transition: border-color .25s; }
.bc:hover { border-color: #B8C3DA; }
.bc-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.bc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.bc-ph { display: grid; place-items: center; height: 100%; color: #B8C3DA; }
.bc-ph .ic { width: 40px; height: 40px; }
.bc-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 22px 22px 20px; }
.bc h3 { font-size: 19px; line-height: 1.25; }
.bc-body > p:not(.bc-meta) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); font-size: 14.5px; }
.bc-cat { align-self: flex-start; color: var(--blue); font: 700 11.5px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.bc-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: auto; padding-top: 6px; color: var(--ink-3); font-size: 13.5px; }
.bc-meta > * + *::before { content: "\00B7"; margin-right: 12px; }
.b-pages { display: flex; justify-content: center; gap: 6px; margin-top: 48px; }
.b-pages a, .b-pages span { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r); color: var(--navy); font: 700 14px var(--display); }
.b-pages a:hover { border-color: var(--navy); }
.b-pages [aria-current] { border-color: var(--navy); background: var(--navy); color: #fff; }
.b-pages .dots { border: 0; }
.b-pages .ic { width: 16px; height: 16px; }
.ic.flip { transform: scaleX(-1); }
.b-empty { padding: 64px 24px; border: 1px dashed var(--line); border-radius: var(--r); text-align: center; }
.b-empty h2 { font-size: 24px; }
.b-empty p { margin: 8px 0 20px; color: var(--ink-2); }
.b-cta .inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-block: 64px; }
.b-cta-acts { display: flex; flex-wrap: wrap; gap: 12px; }

.b-progress { position: fixed; inset: 0 0 auto; z-index: 60; height: 3px; pointer-events: none; }
.b-progress i { display: block; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.ba-head { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #F7F9FC 0%, var(--bg-2) 100%); }
.ba-in { max-width: 860px; margin-inline: auto; padding-block: 44px 48px; }
.ba-cats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 14px; }
.ba-head h1 { font-size: clamp(30px, 3.6vw, 48px); }
.ba-head .lead { margin-top: 18px; font-size: 18px; }
.ba-head .bc-meta { margin-top: 22px; padding-top: 0; }
.ba-img { max-width: calc(1080px + 2 * var(--gutter)); margin: 40px auto 0; }
.ba-img img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r); }
.ba-body { max-width: calc(760px + 2 * var(--gutter)); margin-inline: auto; padding-block: 48px 72px; }
.ba-text { color: var(--ink-2); font-size: 17px; line-height: 1.75; }
.ba-text > :first-child { margin-top: 0; }
.ba-text h2 { margin: 44px 0 14px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; }
.ba-text h3 { margin: 32px 0 10px; font-size: 21px; line-height: 1.25; }
.ba-text h4 { margin: 26px 0 8px; font-size: 18px; line-height: 1.3; }
.ba-text p { margin: 0 0 18px; }
.ba-text ul, .ba-text ol { margin: 0 0 20px; padding-left: 24px; }
.ba-text ul { list-style: disc; }
.ba-text ol { list-style: decimal; }
.ba-text li { margin-bottom: 8px; padding-left: 4px; }
.ba-text li::marker { color: var(--blue); }
.ba-text strong, .ba-text b { color: var(--ink); font-weight: 600; }
.ba-text a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.ba-text img { height: auto; margin: 28px 0; border: 1px solid var(--line); border-radius: var(--r); }
.ba-text blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--blue); color: var(--navy); font: 600 19px/1.5 var(--display); }
.ba-text table { width: 100%; margin: 24px 0; border-collapse: collapse; font-size: 15px; }
.ba-text th, .ba-text td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.ba-text th { background: var(--bg-3); color: var(--navy); }
.ba-text hr { margin: 36px 0; border: 0; border-top: 1px solid var(--line); }
.ba-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; }
.ba-share { display: flex; align-items: center; gap: 8px; }
.ba-share span { margin-right: 6px; color: var(--navy); font: 700 13px var(--display); }
.ba-share a, .ba-share button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--navy); cursor: pointer; transition: border-color .2s, color .2s; }
.ba-share a:hover, .ba-share button:hover { border-color: var(--navy); }
.ba-share button.ok { border-color: var(--ok); color: var(--ok); }
.ba-share .ic { width: 17px; height: 17px; }
.b-related .sec-head { align-items: center; }

@media (max-width: 1100px) {
    .b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bt-row, .b-feat { grid-template-columns: minmax(0, 1fr); }
    .bt-row { gap: 24px; }
    .bf-img { min-height: 0; aspect-ratio: 1200 / 630; }
    .bf-body { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
    .b-grid { grid-template-columns: minmax(0, 1fr); }
    .blog-top .panel { padding-top: 32px; }
    .b-search .btn { display: none; }
    .b-cats { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
    .bf-body { padding: 24px 20px; }
    .b-cta .inner { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 56px; }
    .ba-in { padding-block: 32px 36px; }
    .ba-head .lead { font-size: 16.5px; }
    .ba-img { margin-top: 24px; }
    .ba-body { padding-block: 32px 56px; }
    .ba-text { font-size: 16.5px; }
    .b-related .sec-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .b-related .sec-head .btn { justify-self: start; }
}

/* ---------- Μικρότερες οθόνες ---------- */
@media (max-width: 1320px) {
    .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crmd { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .crmd-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
    .crmd-steps li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
    .console { margin: 30px 250px 40px 0; }
    .menu { gap: 22px; }
    .cta .tel { display: none; }
}
@media (max-width: 1180px) {
    .menu { gap: 18px; font-size: 14px; }
    .cta .tel { display: none; }
    .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc:nth-child(2n) { border-right: 0; }
    .svc:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .svc-extra { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .quotes { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
    .ftr .cols { grid-template-columns: 1fr 1fr 1fr; }
    .f-brand { grid-column: 1 / -1; }
    .sdke { display: none; }
}
@media (max-width: 980px) {
    .menu, .cta { display: none; }
    .hdr .burger { display: grid; }
    .topbar .hours { display: none; }
    .hero .inner { grid-template-columns: minmax(0, 1fr); }
    .hero .txt { padding: 48px 0 24px; }
    .vis { padding: 8px 0 56px; }
    .hub { max-width: 640px; margin: 0 auto; }
    .sec { padding-block: 64px; }
    .sec-head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .process, .faq, .about, .dark .inner, .contact .inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .dark .inner, .contact .inner { padding-block: 64px; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .duo, .pair { grid-template-columns: minmax(0, 1fr); }
    .crmd { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .crmd-steps { grid-template-columns: minmax(0, 1fr); }
    .crmd-steps li:nth-last-child(2) { border-bottom: 0; }
    .console { margin-right: 0; }
    .console { margin: 0; }
    .phone { position: relative; right: auto; top: auto; width: min(286px, 100%); margin: 28px auto 0; transform: none; }
    .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trust > div:nth-child(2) { border-right: 0; }
    .trust > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .duo-c + .duo-c, .pair-c + .pair-c { border-left: 0; border-top: 1px solid var(--line); }
    .partners .lbl { display: none; }
    .wrap.legal { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .toc { position: static; }
}
@media (max-width: 640px) {
    body { padding-bottom: 72px; font-size: 15.5px; }
    .topbar ul li:nth-child(2) { display: none; }
    .nav { min-height: 64px; }
    .logo b { font-size: 19px; }
    .hero h1 { font-size: 36px; }
    .acts .btn { flex: 1 1 100%; }
    .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stats div { padding-left: 10px; }
    .stats b { font-size: 21px; }
    /* Στο κινητό το διάγραμμα γίνεται λίστα με τα έξι εργαλεία */
    .vis { display: none; }
    .svc-grid { grid-template-columns: minmax(0, 1fr); }
    .ind-grid { grid-template-columns: minmax(0, 1fr); }
    .ind.photo { min-height: 280px; }
    .ind.photo.logos, .ind.photo.notif { min-height: 340px; }
    .dev { bottom: 46%; }
    .lap { max-width: 250px; }
    .ind.photo.logos .lg-row { bottom: 48%; }
    .svc { border-right: 0; border-bottom: 1px solid var(--line); }
    .svc:last-child { border-bottom: 0; }
    .mini { min-height: 0; }
    .svc-extra { grid-template-columns: minmax(0, 1fr); }
    .steps { grid-template-columns: minmax(0, 1fr); }
    .step { padding: 18px 18px 20px; }
    .step .n { font-size: 36px; }
    .callstage { min-height: 0; }
    .app { display: none; }
    .wkv { position: relative; width: 100%; }
    .c-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'main s'; gap: 8px 10px; }
    .c-id, .c-row .t-b, .c-row .t-a { display: none; }
    .duo-t, .pair-c { padding: 24px 20px; }
    .shot { min-height: 300px; }
    .safe { grid-template-columns: minmax(0, 1fr); }
    .facts > div { padding: 20px 16px; }
    .map-f { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
    .map-c { padding-left: 0; border: 0; }
    .map-s div { padding: 12px 14px; }
    .map-s b { font-size: 19px; }
    .q figcaption { flex-wrap: wrap; }
    .q figcaption span { padding-left: 0; border: 0; }
    .book { padding: 4px 18px 22px; }
    .grid2 { grid-template-columns: minmax(0, 1fr); }
    .ftr .cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .ft-legal { flex-direction: column; }
    .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
    .mbar .btn { padding: 0 10px; }
    .cookies { left: 12px; bottom: 80px; padding: 18px; }
    .ck-btns { grid-template-columns: minmax(0, 1fr); }
    .who { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .track { animation: none; flex-wrap: wrap; width: auto; gap: 28px; }
    .track .dup { display: none; }
    .hub .pk { display: none; }
}

/* Χάρτης, καθαρή εκδοχή (.mapcard.cl): συμπαγής στεριά, λευκές ακτές, χωρίς καμπύλες */
.mapcard.cl .gmap { background: linear-gradient(180deg, #F6F9FE, #EDF2FB); }
.mapcard.cl .gmap .nb { fill: #E4E9F2; }
.mapcard.cl .gmap .gr, .mapcard.cl .gmap .cy { fill: #CFDCF8; stroke: #fff; stroke-width: .9; }
.mapcard.cl .gmap .inset { fill: rgba(255, 255, 255, .6); stroke: #D5DFF3; stroke-dasharray: none; }
.mapcard.cl .gmap .arcs { display: none; }
.mapcard.cl .gmap .pt circle { stroke-width: 1.6; }