/* ═══════════════════════════════════════════════════════════════
   wd-kinisi.css — κίνηση πρώτης οθόνης της Web Design (14/10/2026)
   Σχέδιο → πραγματική σελίδα → η ίδια σελίδα στο κινητό.
   Χωρίς JS / με μειωμένη κίνηση: φαίνεται απευθείας το τελικό καρέ.
═══════════════════════════════════════════════════════════════ */
.wdk { margin: 0; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.wdk-svg { display: block; width: 100%; height: auto; overflow: visible; }

.wdk-grid-minor { stroke: rgba(96,165,250,.06); }
.wdk-grid-major { stroke: rgba(96,165,250,.12); }
.wdk-lbl { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 10px; letter-spacing: 1.5px; fill: rgba(147,197,253,.75); }
.wdk-lbl-dim { fill: rgba(147,197,253,.55); }

.wdk-frame { fill: rgba(8,15,30,.85); stroke: rgba(96,165,250,.45); stroke-width: 1; }
.wdk-bar { fill: rgba(15,29,56,.95); }
.wdk-dot { fill: rgba(147,197,253,.35); }
.wdk-url { font-family: var(--font-mono, monospace); font-size: 8px; letter-spacing: .5px; fill: rgba(147,197,253,.7); }

.wdk-wire { fill: none; stroke: #60a5fa; stroke-width: 1; vector-effect: non-scaling-stroke; }
.wdk-dimline { stroke: #60a5fa; stroke-width: 1; }
.wdk-dimtick { stroke: #60a5fa; stroke-width: 1.2; }
.wdk-dimval { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 1px; fill: #93c5fd; text-anchor: middle; }
.wdk-ok .wdk-dimline, .wdk-ok .wdk-dimtick { stroke: #22c55e; }
.wdk-ok .wdk-dimval { fill: #4ade80; }
.wdk-badge-t { font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: 1px; fill: #4ade80; }

/* τελικό καρέ (χωρίς JS) */
.wdk-desk { opacity: 0; }
.wdk-wires { opacity: 0; }

/* στοιχεία ελέγχου */
.wdk-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wdk-tab, .wdk-again {
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 1px;
  color: #93c5fd; background: rgba(15,29,56,.6); border: 1px solid rgba(96,165,250,.3);
  padding: 7px 12px; border-radius: 3px; cursor: pointer; min-height: 32px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.wdk-tab:hover, .wdk-again:hover { border-color: rgba(96,165,250,.7); color: #dbeafe; }
.wdk-tab[aria-pressed="true"] { background: #2563eb; border-color: #2563eb; color: #fff; }
.wdk-again { margin-left: auto; }
.wdk-tab:focus-visible, .wdk-again:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.wdk-cap { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .5px; line-height: 1.6; color: rgba(191,219,254,.72); margin: 0; }

/* πριν ξεκινήσει το σενάριο: κρυφή σκηνή (κλάση από τη <head>, επιστροφή σε 2,5 s) */
html.wdk-js:not(.wdk-on) .wdk-scene { opacity: 0; }
html.wdk-js:not(.wdk-on) .wdk-ctrl { opacity: 0; }

@media (max-width: 960px) {
  .wdk-again { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.wdk-js .wdk-scene, html.wdk-js .wdk-ctrl { opacity: 1 !important; }
}

/* ορατή ημερομηνία ενημέρωσης (GEO) */
.wds-upd { margin: 28px 0 0; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 1px; color: rgba(191,219,254,.6); }

/* η σκηνή χωρά στην πρώτη οθόνη μαζί με τα κουμπιά */
.wdk-wrap { justify-content: center; }
.wdk-svg { max-height: min(60vh, 540px); }
/* ο τίτλος μένει μέσα στη στήλη του (δεν μπαίνει στη σκηνή) */
@media (min-width: 961px) { .wd-page .wd-page-title { font-size: clamp(44px, 4.4vw, 64px); } }

/* κινητό: η σκηνή πιάνει όλο το πλάτος· τα κείμενα του SVG ≥ 11 px στο τελικό μέγεθος */
@media (max-width: 640px) {
  .wdk-svg { max-height: none; }
  .wdk-lbl { font-size: 19px; letter-spacing: 1px; }
  .wdk-dimval { font-size: 22px; }
  .wdk-badge-t { font-size: 19px; letter-spacing: .5px; }
  .wdk-badge .wdk-lbl-dim { display: none; }
  .wdk-url { font-size: 12px; }
}

/* κείμενα πρώτης οθόνης (14/10/2026): μία πρόταση, τιμή σε δική της γραμμή, 4 σημεία σε κανονική γραμματοσειρά */
.wd-page .wd-page-desc { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.78); margin-bottom: 14px; max-width: 30em; }
.wd-page-price { font-size: 15px; color: rgba(255,255,255,.62); margin: 0 0 26px; }
.wd-page-price strong { color: #fff; font-weight: 600; }
.wd-page .wd-page-features { grid-template-columns: 1fr; gap: 9px; margin-bottom: 32px; }
.wd-page .wd-page-features li { font-family: inherit; font-size: 15px; letter-spacing: 0; line-height: 1.4; color: rgba(255,255,255,.82); align-items: flex-start; }
.wd-page .wd-page-features li::before { content: '✓'; font-size: 13px; color: #4ade80; margin-top: 1px; }
@media (max-width: 960px) {
  .wd-page .wd-page-desc { font-size: 17px; margin-inline: auto; }
  .wd-page-price { order: 4; text-align: center; }
  .wd-page .wd-page-features { grid-template-columns: 1fr; width: auto; justify-self: center; align-self: center; gap: 10px; }
}

/* ═══ Πρώτη οθόνη v2 (15/10/2026): μήνυμα, δύο κουμπιά, τέσσερις υπηρεσίες σε απλή γλώσσα ═══ */
.wd-page { flex-direction: column; justify-content: center; }
.wdk-dim { display: none; }                                  /* χωρίς τεχνικές ενδείξεις στη σκηνή */
.wdk-badge-t { font-family: inherit; font-size: 13px; letter-spacing: .3px; font-weight: 600; }

.wdh-eyebrow { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #6fa8ff; margin: 0 0 18px; }
.wd-page .wd-page-title span, .wd-page .wd-page-title { text-wrap: balance; }
.wd-page .wd-page-desc { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: rgba(255,255,255,.82); max-width: 26em; margin: 4px 0 30px; }
.wd-page-cta { align-items: center; }
.wdh-phone { display: inline-flex; align-items: center; gap: 8px; }

/* τέσσερις υπηρεσίες */
.wdh-svcs { position: relative; z-index: 2; list-style: none; margin: 0 auto; padding: 0 56px 56px; width: 100%; max-width: 1400px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.wdh-svc { display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px 20px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(20,38,74,.72), rgba(10,20,42,.72)); border: 1px solid rgba(96,165,250,.16);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s; }
.wdh-svc:hover { transform: translateY(-3px); border-color: rgba(96,165,250,.45); }
.wdh-ic { flex: none; width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(37,99,235,.16); border: 1px solid rgba(96,165,250,.28); }
.wdh-ic svg { width: 22px; height: 22px; fill: none; stroke: #93c5fd; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wdh-tx { display: flex; flex-direction: column; gap: 4px; }
.wdh-tx strong { font-size: 15.5px; font-weight: 600; color: #fff; line-height: 1.3; }
.wdh-tx span { font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.66); }
.wdh-svc:last-child .wdh-ic { background: rgba(34,197,94,.14); border-color: rgba(74,222,128,.35); }
.wdh-svc:last-child .wdh-ic svg { stroke: #4ade80; }

/* η είσοδος των καρτών και των εικονιδίων ζει στο wd-xoro.css (ρήμα «build» + χάραξη εικονιδίων) */

@media (max-width: 1100px) { .wdh-svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .wdh-eyebrow { order: 0; text-align: center; letter-spacing: 2px; }
  .wd-page .wd-page-desc { order: 2; text-align: center; margin-inline: auto; }
  .wd-page .wd-page-cta { order: 2; justify-content: center; margin-bottom: 8px; }
  .wdh-svcs { padding: 0 16px 40px; grid-template-columns: 1fr; gap: 10px; }
  .wdh-svc { padding: 14px 14px 16px; }
}
@media (min-width: 961px) {
  .wd-page .wd-page-inner { grid-template-columns: minmax(400px, 540px) 1fr; padding-top: 48px; padding-bottom: 36px; }
  .wd-page .wd-page-cta { flex-wrap: nowrap; }
}
.wd-page .wd-page-title { background: linear-gradient(100deg, #fff 0%, #fff 45%, #9cc8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }

/* 16/10/2026: ό,τι έμεινε από το v3 — μόνο στατική διάταξη· η κίνηση είναι στο wd-xoro.css */
.wdk-badge { display: none; }   /* χωρίς επιγραφή δίπλα στο κινητό */
.wdo-card { position: relative; }