:root {
  --primary: #0e6fff;
  --secondary: #465bd6;
  --tertiary: #d4e9ff;
  --success: #117720;
  --text: #1a1f2e;
  --text-muted: #545a86;
  --bg: #ffffff;
  --bg-alt: #f3f4f4;
  --border: #e1e1e1;
  --radius: 16px;
  --max-width: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--text);
}

.brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a:not(.btn) {
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.95rem;
}

.nav-links a:not(.btn):hover {
  color: var(--primary);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle svg {
  width: 26px;
  height: 26px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  box-shadow: 0 8px 20px rgba(14, 111, 255, 0.25);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(14, 111, 255, 0.32);
}

.btn-ghost {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--tertiary);
}

.btn-ghost:hover {
  border-color: var(--primary);
}

/* Hero */
.hero {
  padding: 88px 0 96px;
  background: radial-gradient(circle at 15% 20%, var(--tertiary), transparent 55%),
    radial-gradient(circle at 85% 0%, #eef4ff, transparent 45%);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tertiary);
  color: var(--secondary);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1.2;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}

.hero h1 .accent {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p.lead {
  font-size: 1.15rem;
  color: var(--text-muted);
  margin: 0 0 32px;
  max-width: 52ch;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 28px;
}

.hero-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.hero-note svg {
  width: 18px;
  height: 18px;
  color: var(--success);
  flex-shrink: 0;
}

/* Sections */
section {
  padding: 88px 0;
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.section-head .eyebrow {
  margin-bottom: 16px;
}

.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.section-head p {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin: 0;
}

/* Feature grid */
.features {
  background: var(--bg-alt);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--border);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(20, 40, 90, 0.08);
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.feature-icon svg {
  width: 24px;
  height: 24px;
  color: var(--primary);
}

.feature-card h3 {
  font-size: 1.1rem;
  margin: 0 0 10px;
}

.feature-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* About — a prose block, so it reads as an explanation rather than another
   grid of cards. Sits on the plain background between the two tinted sections
   (features above, contact below). */
.about .section-head {
  margin-bottom: 40px;
}

.about-body {
  max-width: 780px;
  margin: 0 auto;
}

.about-body p {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin: 0 0 18px;
}

.about-body p:last-child {
  margin-bottom: 0;
}

/* Emphasis lifts to the full text colour so the key phrases carry weight
   against the muted body. */
.about-body strong {
  color: var(--text);
  font-weight: 600;
}

/* How it works */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: 8px;
}

.step .step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-weight: 700;
  margin-bottom: 20px;
}

.step h3 {
  font-size: 1.1rem;
  margin: 0 0 10px;
}

.step p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* Contact — mirrors the app's contact page: the business identity card beside
   the email channel, in the app's 7/5 split. */
.contact {
  background: var(--bg-alt);
}

.contact-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 24px;
  align-items: start;
}

.contact-aside {
  display: grid;
  gap: 24px;
}

.contact-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.contact-card h3 {
  font-size: 1.1rem;
  margin: 0 0 20px;
}

.contact-card > p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
}

.contact-details {
  display: grid;
  gap: 20px;
  margin: 0;
}

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  /* Lets long values (email, address) shrink and wrap instead of pushing the
     card wider than its column. */
  min-width: 0;
}

.contact-row > div {
  min-width: 0;
}

.contact-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--tertiary);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-icon svg {
  width: 20px;
  height: 20px;
}

.contact-details dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-details dd {
  margin: 2px 0 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.contact-details dd a {
  color: var(--primary);
  text-decoration: none;
}

.contact-details dd a:hover {
  text-decoration: underline;
}

.contact-btn {
  width: 100%;
  margin-top: 24px;
}

.contact-btn svg {
  width: 20px;
  height: 20px;
}

.contact-tips ul {
  margin: 0;
  padding-left: 20px;
}

.contact-tips li {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.contact-tips li:last-child {
  margin-bottom: 0;
}

/* Τρόποι χρήσης — δύο κάρτες ίδιου ύψους· η προτεινόμενη ξεχωρίζει με
   περίγραμμα στο χρώμα του brand, όχι με διαφορετικό μέγεθος. */
.usage {
  background: var(--bg-alt);
}

.usage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  /* Οι δύο κάρτες διαφέρουν πολύ σε μήκος κειμένου· με stretch η δεύτερη
     έμενε με ~300px κενό στη βάση. Κάθε κάρτα παίρνει το ύψος της. */
  align-items: start;
}

.usage-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.usage-card-featured {
  border-color: var(--primary);
  box-shadow: 0 12px 28px rgba(14, 111, 255, 0.1);
}

.usage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.usage-head h3 {
  font-size: 1.15rem;
  margin: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  background: var(--tertiary);
  color: var(--secondary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.usage-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0 0 14px;
}

.usage-list {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0 0 14px;
  padding-left: 20px;
}

.usage-list li {
  margin-bottom: 8px;
}

.usage-note {
  font-size: 0.88rem !important;
  padding-left: 14px;
  border-left: 2px solid var(--border);
}

/* Το κουμπί καρφιτσώνεται στη βάση, ώστε οι δύο κάρτες να ευθυγραμμίζονται
   παρά τη διαφορά στο μήκος του κειμένου. */
.usage-btn {
  margin-top: auto;
  align-self: flex-start;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 820px;
  margin: 32px auto 0;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.notice svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--primary);
  margin-top: 2px;
}

.notice strong {
  color: var(--text);
}

/* Video — 16:9 μέσω aspect-ratio, ώστε να μη χρειάζεται padding hack.
   Ένα video, κεντραρισμένο και περιορισμένο στα 760px ώστε να μη γιγαντώνεται
   ο player σε desktop. Το grid μένει, ώστε ένα δεύτερο video να μπορεί να
   προστεθεί αργότερα αλλάζοντας μόνο τις στήλες. */
.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 760px;
  margin: 0 auto;
}

.video-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  /* Ουδέτερο φόντο: το Cookiebot μπλοκάρει το iframe μέχρι τη συγκατάθεση, και
     ένα μαύρο πλαίσιο θα φαινόταν σαν σφάλμα. */
  background: var(--bg-alt);
}

/* Εμφανίζεται μόνο όταν το script εντοπίσει μπλοκαρισμένο iframe. */
.video-fallback {
  display: none;
}

.video-frame.is-blocked {
  position: relative;
}

.video-frame.is-blocked .video-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}

.video-fallback p {
  margin: 0;
  max-width: 42ch;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.video-fallback a {
  color: var(--primary);
  font-size: 0.9rem;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-item h3 {
  font-size: 1.05rem;
  margin: 20px 0 8px;
}

.video-item p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* Final CTA */
.cta-band {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: 24px;
  padding: 64px 40px;
  text-align: center;
  color: #fff;
  margin: 0 24px;
  max-width: calc(var(--max-width) - 48px);
  margin: 0 auto;
}

.cta-band h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 14px;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 46ch;
  margin: 0 auto 32px;
}

.cta-band .btn-primary {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.cta-band .btn-primary:hover {
  transform: translateY(-2px);
}

/* Footer — mirrors the app bar on app.tosxoleio.gr: brand and copyright on the
   left, the legal documents stacked opposite. The copyright sits on three lines
   rather than one so its block matches the height of the three stacked links. */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 8px 0 16px;
  background: var(--bg);
}

.footer-inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto;
}

.footer-brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.footer-copy {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.footer-copy a {
  color: inherit;
  text-decoration: none;
}

.footer-copy a:hover {
  text-decoration: underline;
}

.footer-legal {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

.footer-legal a {
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.footer-legal a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 900px) {
  .feature-grid,
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid,
  .usage-grid {
    grid-template-columns: 1fr;
  }
}

/* Το nav καταρρέει σε burger πολύ νωρίτερα από την υπόλοιπη σελίδα: πέντε links
   συν το CTA δεν χωρούν σε μία σειρά κάτω από ~990px — τα links τυλίγονταν σε
   δεύτερη γραμμή και το header μεγάλωνε από 80px σε 105px. Το gap παραμένει
   32px· η μείωσή του θα κέρδιζε μόλις 60px, που δεν δικαιολογεί την αλλαγή. */
@media (max-width: 1000px) {
  .nav-links {
    position: fixed;
    inset: 68px 16px auto 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(20, 40, 90, 0.15);
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-toggle {
    display: block;
  }
}

@media (max-width: 640px) {
  .feature-grid,
  .steps {
    grid-template-columns: 1fr;
  }

  section {
    padding: 64px 0;
  }

  .cta-band {
    padding: 48px 24px;
  }

  .contact-card,
  .usage-card {
    padding: 22px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .footer-legal {
    align-items: flex-start;
    text-align: left;
    /* Narrow enough that the longer titles wrap. Open the gap up so the space
       between two links reads as larger than the space between one link's own
       wrapped lines. */
    gap: 10px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #eef1f8;
    --text-muted: #a7afc7;
    --bg: #10131c;
    --bg-alt: #161a26;
    --border: #262b3a;
    --tertiary: #1b2740;
  }

  .site-header {
    background: rgba(16, 19, 28, 0.85);
  }

  .hero {
    background: radial-gradient(circle at 15% 20%, #16233f, transparent 55%),
      radial-gradient(circle at 85% 0%, #131a2c, transparent 45%);
  }

  .feature-card,
  .contact-card,
  .usage-card,
  .nav-links {
    background: #161a26;
  }

  .notice {
    background: #161a26;
  }

  .btn-ghost {
    color: #7db0ff;
  }
}

/* Legal pages — generated by `scripts/build-legal-pages.mjs` from the same
   source text the app renders in its modal. */
.legal {
  max-width: 820px;
  padding-top: 56px;
  padding-bottom: 72px;
}

.legal h1 {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.25;
  margin: 0 0 8px;
}

.legal h2 {
  font-size: 1.25rem;
  margin: 40px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.legal h3 {
  font-size: 1.02rem;
  margin: 26px 0 8px;
}

/* Soft line breaks in the source document are meaningful (address blocks,
   contact details) — keep them, as the app does. */
.legal p,
.legal li {
  color: var(--text-muted);
  white-space: pre-line;
}

.legal p {
  margin: 0 0 14px;
}

.legal ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal li {
  margin-bottom: 8px;
}

.legal a {
  color: var(--primary);
}

.legal-updated {
  font-size: 0.9rem;
  margin-bottom: 28px !important;
}

.legal-callout {
  background: var(--bg-alt);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px;
  color: var(--text) !important;
  font-weight: 600;
}

.legal-contact {
  font-weight: 700;
}

.legal-table-wrap {
  overflow-x: auto;
  margin-bottom: 18px;
}

.legal-table-wrap table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}

.legal-table-wrap th,
.legal-table-wrap td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  white-space: pre-line;
}