/* ionaszaro.com — brand tokens + signal grid
   Επαναχρησιμοποιήσιμο. Το dot grid είναι καθαρό CSS, χωρίς εικόνα:
   κλιμακώνεται σε κάθε ανάλυση, δεν φορτώνει αρχείο, δεν θολώνει σε retina. */

:root {
  --signal: #145DF8;
  --signal-hover: #2E70FF;

  --bg: #060A14;
  --surface: #0E1526;
  --surface-2: #16203A;
  --border: #22304F;

  --text: #F0F5FF;
  --subtext: #8C97B2;
  --muted: #46536F;

  --radius: 14px;
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* signal grid */
  --grid-gap: 26px;
  --grid-dot: rgba(120, 152, 235, 0.20);
}

/* Το φόντο: πλέγμα κουκκίδων + απαλή λάμψη στο κέντρο ώστε να μη διαβάζεται επίπεδο.
   Δύο layers, το glow πάντα πάνω από το grid ώστε οι κουκκίδες να σβήνουν προς το κέντρο. */
.signal-bg {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 42%, rgba(20, 93, 248, 0.10), transparent 70%),
    radial-gradient(circle, var(--grid-dot) 1px, transparent 1.4px);
  background-size: 100% 100%, var(--grid-gap) var(--grid-gap);
  background-position: center, center;
}

/* Παραλλαγή για πυκνότερο πλέγμα σε μικρές επιφάνειες (κάρτες, headers) */
.signal-bg--tight { --grid-gap: 18px; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--signal); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--signal); color: #fff; border: 0;
  border-radius: 999px; padding: 13px 26px;
  font: 600 15px/1 var(--font); cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.btn:hover { background: var(--signal-hover); }
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; border-radius: 12px; padding: 15px; font-size: 16px; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--subtext);
}
.field input {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px;
  padding: 14px 15px; font: 400 15px/1.2 var(--font); color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field input::placeholder { color: var(--muted); }
.field input:focus {
  outline: 0; border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(20, 93, 248, .22);
}