/* Deskhub — κοινό φύλλο στύλ για όλες τις σελίδες.
   Γράψε ΕΔΩ, όχι μέσα στα HTML. */
:root {
    --brand: #1B4F8A;        /* ίδιο μπλε με το fysiodesk.gr — μία οικογένεια */
    --brand-dark: #143D6B;
    --brand-soft: #F0F7FF;
    --ink: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;
    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --ok: #16a34a;
    --radius: 16px;
    --maxw: 1080px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: 76px; } /* offset για το sticky header στα anchor links */
  section { scroll-margin-top: 76px; }
  body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

  /* ---------- Header ---------- */
  header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,0.82);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  .logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; line-height: 1.05; }
  .logo .mark {
    width: 30px; height: 30px; border-radius: 9px;
    background: linear-gradient(135deg, var(--brand), #2C6FB0);
    display: grid; place-items: center; color: #fff; font-size: 16px;
  }
  .nav-cta {
    background: var(--brand); color: #fff; font-weight: 600; font-size: 14px;
    padding: 9px 16px; border-radius: 10px; transition: background .15s; white-space: nowrap;
  }
  .nav a { white-space: nowrap; }
  .nav-cta:hover { background: var(--brand-dark); }

  /* ---------- Hero ---------- */
  .hero { padding: 84px 0 64px; text-align: center; background:
      radial-gradient(60% 60% at 50% 0%, var(--brand-soft) 0%, transparent 70%); }
  .badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff; border: 1px solid var(--line); color: var(--muted);
    font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; margin-bottom: 24px;
  }
  .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
  h1 {
    font-size: clamp(32px, 5.5vw, 56px); line-height: 1.1; letter-spacing: -0.03em;
    font-weight: 900; max-width: 820px; margin: 0 auto 20px;
  }
  h1 .grad { background: linear-gradient(120deg, var(--brand), #2C6FB0); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .sub { font-size: clamp(16px, 2.2vw, 20px); color: var(--muted); max-width: 640px; margin: 0 auto 34px; }
  .hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .btn {
    display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px;
    padding: 14px 26px; border-radius: 12px; cursor: pointer; border: none; transition: transform .12s, background .15s, box-shadow .15s;
  }
  .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 24px -8px rgba(27,79,138,.55); }
  .btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); }
  .btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
  .btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

  /* Trust badges κάτω από το hero CTA */
  .trust { display: flex; gap: 10px 22px; justify-content: center; flex-wrap: wrap; margin-top: 30px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
  .trust span { display: inline-flex; align-items: center; gap: 6px; }

  /* ---------- Product shot (πρόγραμμα ClassDesk) ---------- */
  .shot-sec { padding: 24px 0 72px; }
  .shot { max-width: 940px; margin: 0 auto; background: #f1f5f9; border: 1px solid var(--line); border-radius: 16px; padding: 10px; box-shadow: 0 30px 60px -30px rgba(15,23,42,.3); }
  .shot-bar { display: flex; align-items: center; gap: 6px; padding: 2px 4px 10px; }
  .shot-bar .dot2 { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
  .shot-url { flex: 1; display: flex; justify-content: center; }
  .shot-url span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 16px; font-size: 12.5px; color: var(--muted); }
  .shot-app { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
  .shot-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
  .shot-title { font-size: 15px; font-weight: 700; }
  .shot-sub { font-size: 12px; color: #94a3b8; }
  .pillb { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
  .pillb.pr { background: var(--brand-soft); color: var(--brand); }
  .pillb.gh { border: 1px solid var(--line); color: var(--muted); }
  .tt-scroll { overflow-x: auto; }
  .tt { min-width: 680px; }
  .tt-days { display: flex; }
  .tt-days .dh { flex: 1; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 6px 0; }
  .tt-grid { display: flex; }
  .tt-gut { width: 42px; position: relative; height: 336px; flex-shrink: 0; }
  .tt-gut i { position: absolute; right: 8px; font-style: normal; font-size: 11px; color: #94a3b8; }
  .dayc { flex: 1; position: relative; height: 336px; border-left: 1px solid #f1f5f9; background-image: linear-gradient(#f1f5f9 1px, transparent 1px); background-size: 100% 56px; }
  .ev { position: absolute; border: 1px solid; border-radius: 7px; padding: 5px 7px; font-size: 11px; line-height: 1.4; overflow: hidden; }
  .ev b { display: block; font-weight: 700; font-size: 11.5px; }
  .ev-a { background: #ecfdf5; border-color: #a7f3d0; color: #047857; } .ev-a b { color: #065f46; }
  .ev-g { background: #f5f3ff; border-color: #ddd6fe; color: #7c3aed; } .ev-g b { color: #5b21b6; }
  .ev-th { background: #F0F7FF; border-color: #bfdbfe; color: #1B4F8A; } .ev-th b { color: #16406F; }
  .ev-ex { background: #fffbeb; border-color: #fde68a; color: #b45309; } .ev-ex b { color: #92400e; }
  /* Ακυρωμένο μάθημα: σβήνει οπτικά αλλά ΔΕΝ εξαφανίζεται — αυτό ακριβώς πουλάει
     η σελίδα των ιδιαιτέρων, ότι η ακύρωση μένει καταγραμμένη χωρίς να χρεωθεί. */
  .ev-off { background: #f8fafc; border-color: #e2e8f0; color: #94a3b8; }
  .ev-off b { color: #94a3b8; text-decoration: line-through; }
  .tt-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; padding-left: 42px; font-size: 12.5px; color: var(--muted); }
  .tt-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; font-style: normal; vertical-align: -1px; }

  /* ---------- Section ---------- */
  section { padding: 72px 0; }
  .eyebrow { color: var(--brand); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; text-align: center; margin-bottom: 10px; }
  .h2 { font-size: clamp(26px, 3.5vw, 36px); font-weight: 800; letter-spacing: -0.02em; text-align: center; margin-bottom: 12px; }
  .lead { color: var(--muted); text-align: center; max-width: 560px; margin: 0 auto 48px; font-size: 17px; }

  /* ---------- Social proof (ζωντανά, δοκιμασμένα προϊόντα) ---------- */
  .proof-live { display: inline-flex; align-items: center; gap: 7px; background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; }
  .proof-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: proofpulse 2s infinite; }
  @keyframes proofpulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
  .proof-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; max-width: 900px; margin: 0 auto; }
  .proof-pillar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; text-align: center; }
  .proof-pillar .pi { font-size: 30px; margin-bottom: 10px; }
  .proof-pillar h4 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 7px; }
  .proof-pillar p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }

  /* ---------- Products ---------- */
  .products { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .product {
    border: 1px solid var(--line); border-radius: var(--radius); padding: 30px;
    background: var(--bg); transition: transform .15s, box-shadow .15s, border-color .15s;
    display: flex; flex-direction: column;
  }
  .product:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(15,23,42,.25); }
  .product .icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; margin-bottom: 16px; }
  .product h3 { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
  .product .tag { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
  .product ul { list-style: none; margin: 0 0 22px; flex: 1; }
  .product li { color: var(--muted); font-size: 15px; padding: 4px 0 4px 26px; position: relative; }
  .product li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
  .product .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
  .btn-sm { padding: 11px 18px; font-size: 15px; border-radius: 10px; }
  .product .alt { font-weight: 700; color: var(--brand); font-size: 14.5px; }
  .fysio .icon { background: #ecfdf5; }
  .edu .icon { background: #F0F7FF; }
  .soon {
    border: 1px dashed var(--line); border-radius: var(--radius); padding: 30px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted);
    grid-column: 1 / -1; background: var(--bg-soft);
  }
  .soon strong { color: var(--ink); }

  /* ---------- Πώς ξεκινάς ---------- */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .step { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: #fff; position: relative; }
  .step .num {
    width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff;
    display: grid; place-items: center; font-weight: 800; font-size: 17px; margin-bottom: 14px;
  }
  .step h4 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
  .step p { color: var(--muted); font-size: 14.5px; }

  /* ---------- Why ---------- */
  .why { background: var(--bg-soft); }
  .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .feature { text-align: center; padding: 8px; }
  .feature .fi { font-size: 30px; margin-bottom: 12px; }
  .feature h4 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
  .feature p { color: var(--muted); font-size: 15px; }

  /* ---------- FAQ ---------- */
  .faq { max-width: 720px; margin: 0 auto; }
  .faq details {
    border: 1px solid var(--line); border-radius: 12px; padding: 0; margin-bottom: 12px;
    background: #fff; overflow: hidden;
  }
  .faq summary {
    cursor: pointer; font-weight: 700; font-size: 16px; padding: 18px 22px;
    list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--muted); transition: transform .15s; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details p { color: var(--muted); font-size: 15px; padding: 0 22px 18px; }

  /* ---------- Waitlist ---------- */
  .waitlist { background: linear-gradient(135deg, var(--brand), #2C6FB0); color: #fff; }
  .waitlist .h2, .waitlist .eyebrow { color: #fff; }
  .waitlist .eyebrow { opacity: .85; }
  .waitlist .lead { color: rgba(255,255,255,.85); }
  .form-card {
    background: #fff; color: var(--ink); border-radius: 20px; padding: 32px;
    max-width: 540px; margin: 0 auto; box-shadow: 0 30px 60px -24px rgba(0,0,0,.4);
  }
  .field { margin-bottom: 16px; text-align: left; }
  .field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
  .field input, .field select, .field textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
    font-size: 15px; font-family: inherit; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s;
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
  }
  .field textarea { resize: vertical; min-height: 72px; }
  .form-card .btn-primary { width: 100%; justify-content: center; margin-top: 6px; }
  .hp { position: absolute; left: -9999px; opacity: 0; }
  #formMsg { margin-top: 14px; font-size: 15px; font-weight: 600; display: none; }
  #formMsg.ok { display: block; color: var(--ok); }
  #formMsg.err { display: block; color: #dc2626; }

  /* ---------- Footer ---------- */
  footer { padding: 40px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
  .foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
  .foot a { color: var(--muted); }
  .foot a:hover { color: var(--brand); }
  .foot .links { display: flex; gap: 18px; flex-wrap: wrap; }

  @media (max-width: 760px) {
    .products, .features, .steps { grid-template-columns: 1fr; }
    .hero { padding: 60px 0 48px; }
    section { padding: 56px 0; }
    .hide-m { display: none; }
  }

  /* Πολύ μικρές οθόνες: στα 375px το λογότυπο ακουμπούσε το «Σύνδεση» (κενό 0px)
     και διαβαζόταν «DeskhubΣύνδεση» — η μπάρα ήθελε 387px σε πλάτος 375.
     Μικραίνουμε λογότυπο, σύνδεσμο και κουμπί αντί να κρύψουμε τη Σύνδεση,
     που τη χρειάζονται οι υπάρχοντες πελάτες. */
  @media (max-width: 430px) {
    .logo { font-size: 17px; gap: 7px; }
    .logo .mark { width: 26px; height: 26px; font-size: 14px; border-radius: 8px; }
    .nav a { font-size: 13px; }
    .nav-cta { font-size: 13px; padding: 8px 12px; }
    /* Με την προσθήκη του ☰ η μπάρα ζητούσε 409px σε οθόνη 375: το κουμπί
       έβγαινε ΕΞΩ από την οθόνη. Η «Σύνδεση» φεύγει από τη μπάρα και πάει μέσα
       στο μενού — την ψάχνουν υπάρχοντες πελάτες, όχι επισκέπτες, και υπάρχει
       και στο footer. Ό,τι κρύβεται εδώ το μαζεύει μόνο του το menu.js. */
    .navlinks { gap: 10px; }
    .navlinks .navlogin { display: none; }
    /* Το margin-left:auto που έσπρωχνε την ομάδα δεξιά καθόταν πάνω στη
       «Σύνδεση». Μόλις εκείνη κρύφτηκε, λογότυπο-κουμπί-☰ στοιβάχτηκαν όλα
       αριστερά με 69px κενό δεξιά. Το auto περνάει στο επόμενο ορατό. */
    .navlinks .nav-cta { margin-left: auto; }
    .navtoggle { width: 36px; height: 36px; font-size: 17px; }
    .nav { gap: 10px; }
  }

  /* ═══════ Προσθήκες 6/9/2026: μενού σε ενότητες, footer σε στήλες,
     άρθρα, σελίδες ανά κάθετη αγορά, φόρμα παρουσίασης ═══════ */

  /* Ιεραρχία επικεφαλίδων: .feature στυλίζει h4· τα h3 πρέπει να δείχνουν ίδια. */
  .feature h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
  .wrap .lead[style*="left"] { max-width: 760px; }

  /* ---------- Μενού ---------- */
  /* Δύο ομάδες, δύο ρόλοι: αριστερά η πλοήγηση (πού πάω), δεξιά η δράση
     (σύνδεση / ζήτα παρουσίαση). Το .navlinks απλώνεται σε όλο τον χώρο και το
     margin-left:auto στη «Σύνδεση» σπρώχνει αυτήν και ό,τι έρχεται μετά δεξιά. */
  .navlinks { display: flex; gap: 16px; align-items: center; flex: 1; justify-content: flex-start; }
  .navlinks .navlogin { margin-left: auto; }

  /* ---------- Μενού κινητού (assets/menu.js) ----------
     Το κουμπί υπάρχει ΜΟΝΟ κάτω από 760px — ακριβώς εκεί που το .hide-m
     κρύβει τους συνδέσμους ενοτήτων. Πάνω από αυτό δεν εμφανίζεται καν, οπότε
     δεν χρειάζεται το JS να ξέρει για μεγέθη οθόνης. */
  .navtoggle { display: none; }
  @media (max-width: 760px) {
    .navtoggle {
      display: inline-flex; align-items: center; justify-content: center;
      width: 40px; height: 40px; padding: 0; flex: 0 0 auto;
      border: 1px solid var(--line); border-radius: 10px; background: #fff;
      color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer;
      transition: border-color .15s, color .15s;
    }
    .navtoggle:hover, .navtoggle[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); }
  }
  .navpanel {
    position: fixed; left: 0; right: 0; z-index: 49; display: none;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -22px rgba(15,23,42,.55);
    padding: 6px 0 10px;
    max-height: calc(100vh - 140px); overflow-y: auto;
  }
  .navpanel.open { display: block; }
  .navpanel a {
    display: block; padding: 14px 22px; font-weight: 600; font-size: 16px;
    color: var(--ink); border-bottom: 1px solid var(--bg-soft);
  }
  .navpanel a:last-child { border-bottom: none; }
  .navpanel a:active { background: var(--bg-soft); }
  /* Ασφάλεια: αν κάποιος μεγαλώσει το παράθυρο με το πλαίσιο ανοιχτό πριν
     προλάβει το resize handler, το CSS το κλείνει έτσι κι αλλιώς. */
  @media (min-width: 761px) { .navpanel { display: none !important; } }
  .nav { gap: 20px; }
  .navlinks a { font-weight: 600; font-size: 14px; color: var(--muted); }
  .navlinks a:hover { color: var(--brand); }
  /* Το .navlinks a είναι πιο ειδικό από το .nav-cta και του έκλεβε το λευκό:
     γκρι κείμενο σε μπλε κουμπί. Το ξαναδίνουμε ρητά. */
  .navlinks a.nav-cta { color: #fff; }
  .navlinks a.nav-cta:hover { color: #fff; }
  .navlinks a.navon { color: var(--ink); }
  .navlinks .navlogin { color: var(--muted); }

  /* ---------- Footer σε στήλες ---------- */
  footer { padding: 54px 0 34px; }
  .foot-cols {
    display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 30px 24px;
    padding-bottom: 30px; border-bottom: 1px solid var(--line);
  }
  .foot-cols h4 { font-size: 13px; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
  .foot-cols a { display: block; color: var(--muted); font-size: 14px; padding: 4px 0; }
  .foot-cols a:hover { color: var(--brand); }
  .foot-brand .logo { font-size: 18px; margin-bottom: 10px; }
  .foot-brand p { color: var(--muted); font-size: 14px; max-width: 260px; }
  .foot-contact { margin-top: 10px; font-weight: 600; }
  /* Το .foot-cols a είναι display:block — έκανε το «·» ανάμεσα σε τηλέφωνο και
     email να μένει ολομόναχο σε δική του γραμμή, σαν τυπογραφικό λάθος. */
  .foot-contact a { display: inline; }
  .foot-contact a { color: var(--brand); }
  .foot-base { padding-top: 22px; color: var(--muted); font-size: 13.5px; }
  @media (max-width: 900px) {
    .foot-cols { grid-template-columns: 1fr 1fr; }
    .foot-brand { grid-column: 1 / -1; }
  }
  @media (max-width: 480px) { .foot-cols { grid-template-columns: 1fr; gap: 22px; } }

  /* ---------- Λίστα άρθρων ---------- */
  .posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
  .post {
    display: flex; flex-direction: column; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 26px; background: #fff;
    transition: transform .15s, box-shadow .15s, border-color .15s;
  }
  .post:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(15,23,42,.25); border-color: #cbd5e1; }
  .post .kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .chip { background: var(--brand-soft); color: var(--brand); font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
  .post .mins { color: #94a3b8; font-size: 12.5px; font-weight: 600; }
  .post h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 8px; }
  .post p { color: var(--muted); font-size: 15px; flex: 1; margin-bottom: 16px; }
  .post .more { font-weight: 700; color: var(--brand); font-size: 14.5px; }
  .post.feat { border-color: #bfdbfe; background: linear-gradient(180deg, var(--brand-soft) 0%, #fff 55%); }

  /* ---------- Άρθρο ---------- */
  .crumb { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
  .crumb a { color: var(--muted); }
  .crumb a:hover { color: var(--brand); }
  .art-head { padding: 44px 0 10px; }
  .art-head h1 { font-size: clamp(28px, 4.4vw, 44px); text-align: left; margin: 0 0 16px; max-width: 780px; }
  .art-head .standfirst { font-size: 18px; color: var(--muted); max-width: 720px; }
  .art-meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 20px; color: #94a3b8; font-size: 13.5px; font-weight: 600; }
  .art { max-width: 720px; margin: 0 auto; padding: 8px 0 72px; }
  .art h2 { font-size: clamp(21px, 2.8vw, 27px); font-weight: 800; letter-spacing: -0.015em; margin: 42px 0 12px; }
  .art h3 { font-size: 18.5px; font-weight: 700; margin: 28px 0 8px; }
  .art p { font-size: 17px; line-height: 1.72; margin-bottom: 16px; color: #1e293b; }
  .art ul, .art ol { margin: 0 0 18px 22px; }
  .art li { font-size: 17px; line-height: 1.68; margin-bottom: 9px; color: #1e293b; }
  .art a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
  .art strong { font-weight: 700; color: var(--ink); }
  .art .note {
    border-left: 3px solid var(--brand); background: var(--brand-soft);
    border-radius: 0 12px 12px 0; padding: 18px 20px; margin: 24px 0;
  }
  .art .note p { margin: 0; font-size: 16px; }
  .art .note p + p { margin-top: 10px; }
  .art .warn { border-left-color: #f59e0b; background: #fffbeb; }
  .art table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15.5px; }
  .art th, .art td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
  .art th { background: var(--bg-soft); font-weight: 700; }
  .art .tscroll { overflow-x: auto; }
  .checklist { list-style: none; margin-left: 0; }
  .checklist li { padding-left: 30px; position: relative; }
  .checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 800; }
  .art-end { border-top: 1px solid var(--line); margin-top: 44px; padding-top: 28px; }
  .art-end h3 { margin-top: 0; }
  .next { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
  .next a { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; text-decoration: none; font-weight: 700; font-size: 15.5px; color: var(--ink); }
  .next a:hover { border-color: var(--brand); color: var(--brand); }
  .next span { display: block; font-weight: 600; font-size: 12.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
  @media (max-width: 620px) { .next { grid-template-columns: 1fr; } }

  /* ---------- Σελίδες ανά κάθετη αγορά ---------- */
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .split h2 { text-align: left; }
  .split .lead { text-align: left; margin-left: 0; max-width: none; }
  .ticks { list-style: none; }
  .ticks li { position: relative; padding: 7px 0 7px 30px; font-size: 16px; color: #334155; }
  .ticks li::before { content: "\2713"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
  @media (max-width: 760px) { .split { grid-template-columns: 1fr; gap: 26px; } }

  /* ---------- Φόρμα παρουσίασης ---------- */
  .demo { background: linear-gradient(135deg, var(--brand), #2C6FB0); color: #fff; }
  .demo .h2, .demo .eyebrow { color: #fff; }
  .demo .eyebrow { opacity: .85; }
  .demo .lead { color: rgba(255,255,255,.9); max-width: 620px; }
  .demo-card { background: #fff; color: var(--ink); border-radius: 20px; padding: 32px; max-width: 640px; margin: 0 auto; box-shadow: 0 30px 60px -24px rgba(0,0,0,.4); }
  .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  @media (max-width: 560px) { .frow { grid-template-columns: 1fr; } }
  .fhint { font-size: 13px; color: var(--muted); margin-top: -8px; margin-bottom: 16px; }
  .demo-note { color: rgba(255,255,255,.85); font-size: 13.5px; text-align: center; margin-top: 18px; }
  .demo-note a { color: #fff; text-decoration: underline; }

  /* ---------- Κοντές οθόνες + μπάρα κλήσης ----------
     Η μπάρα κλήσης κρατάει ~80px στο κάτω μέρος. Σε iPhone SE (375x667) το κύριο
     κουμπί του hero έπεφτε ΠΙΣΩ από τη μπάρα: μετρημένα 44px στο /classdesk/ και
     38px στα /kentra-xenon-glosson/. Ο επισκέπτης έβλεπε μισό κουμπί στο άνοιγμα.
     Σφίγγουμε το hero μόνο σε κοντές οθόνες — αλλού μένει όπως είναι. */
  @media (max-width: 760px) and (max-height: 720px) {
    .hero { padding-top: 22px; padding-bottom: 34px; }
    .hero .badge, .hero .eyebrow { margin-bottom: 12px; }
    .hero h1 { margin-bottom: 12px; font-size: clamp(26px, 7vw, 34px); }
    .hero .sub { margin-bottom: 18px; font-size: 15.5px; }
    .hero .trust { margin-top: 18px; }
  }
  /* Μέσα στη μπλε ενότητα το btn-primary ήταν μπλε σε μπλε — εξαφανιζόταν, ενώ
     το δευτερεύον (λευκό) τραβούσε όλο το βλέμμα. Αντιστρέφουμε τους ρόλους. */
  .demo .btn-primary { background: #fff; color: var(--brand); box-shadow: 0 12px 30px -14px rgba(0,0,0,.5); }
  .demo .btn-primary:hover { background: #F0F7FF; color: var(--brand-dark); }
  .demo .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
  .demo .btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }

  /* ═══════ Λογότυπο & δεύτερο κουμπί μενού (6/9/2026) ═══════ */
  /* Το σήμα ήταν το emoji 🗂️ — δηλαδή ΟΧΙ το λογότυπό μας: κάθε συσκευή το
     ζωγράφιζε αλλιώς. Τώρα είναι το ίδιο λογότυπο με το Instagram (Deskhub)
     και με το Play Store (ClassDesk, στις σελίδες προϊόντος). Το SVG έρχεται
     έτοιμο με το σχήμα του, οπότε το παλιό μπλε πλαίσιο πρέπει να φύγει —
     αλλιώς οι γωνίες του ξεπρόβαλλαν πίσω από τον κύκλο. */
  .logo img.mark { background: none; border-radius: 0; display: block; }

  /* «από τη Deskhub»: κρατάει τη σύνδεση με την εταιρεία χωρίς να κλέβει το
     όνομα του προϊόντος. Κάθεται δίπλα στο όνομα, πατημένο στη βάση του — έτσι
     η μπάρα μένει 64px· από κάτω θα την ψήλωνε. Σε στενές οθόνες φεύγει:
     εκεί μετράει μόνο το ClassDesk. */
  .logo .byline {
    font-size: 10.5px; font-weight: 600; color: var(--muted);
    letter-spacing: 0; line-height: 1; align-self: flex-end; margin: 0 0 4px -3px;
  }
  @media (max-width: 560px) { .logo .byline { display: none; } }

  /* Δύο ξεχωριστές προθέσεις, δύο κουμπιά: «κλείσε παρουσίαση» (θέλω να μου το
     δείξουν) και «εγγραφή» (ξέρω τι θέλω). Ένα κουμπί τα μπέρδευε. */
  .navlinks a.nav-ghost {
    border: 1px solid var(--line); color: var(--ink);
    padding: 8px 14px; border-radius: 10px; transition: border-color .15s, color .15s;
  }
  .navlinks a.nav-ghost:hover { border-color: var(--brand); color: var(--brand); }
  /* Κάτω από 900px το μενού δεν χωράει και τα δύο κουμπιά· μένει το «Εγγραφή»
     και η παρουσίαση φτάνει από τη μπάρα του κινητού (assets/callbar.js). */
  /* Μετρημένο: με δύο κουμπιά το μενού θέλει ~990px· στα 901-1005 ξεχείλιζε 25px. */
  @media (max-width: 1010px) { .hide-s { display: none; } }

  /* ═══════ Hero σε δύο στήλες (6/9/2026) ═══════ */
  /* Ο επισκέπτης βλέπει τι αγοράζει πριν διαβάσει τι είναι. Δεξιά μπαίνει το
     πρόγραμμα μιας πραγματικής μέρας — φτιαγμένο με HTML, όχι στιγμιότυπο
     οθόνης: διαβάζεται σε κάθε μέγεθος και δεν παλιώνει με κάθε αλλαγή του UI. */
  .hero-split { display: grid; grid-template-columns: 1.02fr 1fr; gap: 46px; align-items: center; text-align: left; }
  /* Σε μισό πλάτος ο τίτλος των 56px έσπαγε σε 5 σειρές και άφηνε το «του»
     μόνο του στην τελευταία. Λίγο μικρότερος, χωράει σε τρεις. */
  .hero-split h1 { margin: 0 0 18px; max-width: none; font-size: clamp(30px, 4.2vw, 46px); }
  .hero-split .sub { margin: 0 0 28px; max-width: 560px; }
  .hero-split .hero-cta, .hero-split .trust { justify-content: flex-start; }

  /* Το τηλέφωνο κρέμεται 34px έξω από την κάρτα (right:-34px). Χωρίς αυτό το
     περιθώριο η κάρτα ακουμπούσε στο δεξί άκρο του .wrap και το τηλέφωνο έβγαινε
     12px έξω από την οθόνη σε iPad landscape και στενά παράθυρα (981-1103px):
     οριζόντιο σκρολ και λευκή λωρίδα δεξιά. Τώρα το περιθώριο = η προεξοχή. */
  .hero-shot { position: relative; padding-bottom: 26px; margin-right: 34px; }
  .hero-win {
    background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    box-shadow: 0 30px 60px -28px rgba(15,23,42,.45);
  }
  .hero-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: #fff; }
  .hero-bar .hdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .hdot.r { background: #f87171; } .hdot.y { background: #fbbf24; } .hdot.g { background: #34d399; }
  .hero-url { margin-left: 12px; font-size: 12.5px; color: var(--muted); }
  .hero-body { padding: 16px 18px 20px; }
  .hero-day { font-size: 15px; font-weight: 800; color: var(--brand); margin-bottom: 12px; }
  .hero-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
  .hero-tbl th {
    text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: #94a3b8; padding: 0 8px 8px; border-bottom: 1px solid var(--line);
  }
  .hero-tbl td { padding: 9px 8px; color: #475569; border-bottom: 1px solid #f1f5f9; }
  .hero-tbl td b { display: block; color: var(--ink); font-weight: 700; }
  .hero-tbl .ar { text-align: right; }
  .hero-tbl tr.on td { background: var(--brand-soft); }
  .hero-tbl tr.on td:first-child { font-weight: 800; color: var(--brand); border-radius: 8px 0 0 8px; }
  .hero-tbl tr.on td:last-child { border-radius: 0 8px 8px 0; }
  .pill {
    display: inline-block; margin-top: 4px; background: #dcfce7; color: #166534;
    font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  }

  /* Το κινητό: η ίδια μέρα στην τσέπη του καθηγητή. Κρέμεται έξω από την κάρτα,
     γι' αυτό το .hero-shot έχει padding-bottom — αλλιώς θα έκοβε το footer από πάνω. */
  .hero-phone {
    position: absolute; right: -34px; bottom: -6px; width: 122px; background: #fff;
    border: 5px solid #0f172a; border-radius: 18px; padding: 8px 7px; font-size: 10px;
    box-shadow: 0 18px 34px -16px rgba(15,23,42,.5);
  }
  .ph-day { font-size: 10px; font-weight: 800; color: var(--brand); margin-bottom: 5px; }
  .ph-item { border-left: 3px solid var(--brand); background: var(--brand-soft); border-radius: 0 6px 6px 0; padding: 4px 6px; margin-bottom: 4px; line-height: 1.35; }
  .ph-item b { display: inline-block; margin-right: 4px; color: var(--brand); }
  .ph-item span { display: block; color: var(--muted); font-size: 9px; }

  @media (max-width: 980px) {
    .hero-split { grid-template-columns: 1fr; gap: 34px; text-align: center; }
    .hero-split .sub { margin-left: auto; margin-right: auto; }
    .hero-split .hero-cta, .hero-split .trust { justify-content: center; }
    .hero-tbl { font-size: 12.5px; }
    /* Στοιβαγμένο, η κάρτα πιάνει όλο το πλάτος: το -34px θα έβγαινε έξω από την
       οθόνη και θα εμφάνιζε οριζόντιο σκρολ. */
    .hero-phone { right: -4px; }
    .hero-shot { margin-right: 0; }
  }
  /* Σε στενές οθόνες το τηλέφωνο σκέπαζε τη στήλη «Καθηγητής» — φεύγει, και το
     πρόγραμμα μένει ολόκληρο ευανάγνωστο. */
  @media (max-width: 620px) {
    .hero-phone { display: none; }
    .hero-shot { padding-bottom: 0; }
    .hero-tbl th:nth-child(3), .hero-tbl td:nth-child(3) { display: none; }
  }