/* mojenovaprace.cz - splash microsite.
   Palette, typography and surfaces follow the MojeNováPráce Brand Book:
   green #16A34A, navy #272D3B, white; Inter only; flat colors, rounded
   cards, pill buttons - no gradients, no drop shadows.
   The page sits on a neutral grey per the splash design; white cards on
   light green did not give the cards enough separation. */

:root{
  --green:#16A34A;
  --green-dark:#15803D;
  --page:#F5F5F5;
  --green-tint:#F0FDF4;
  --navy:#272D3B;
  --white:#FFFFFF;

  /* Derived from the palette navy - lighter text and hairlines, no new hues. */
  --muted:rgba(39,45,59,.66);
  --faint:rgba(39,45,59,.52);
  --line:rgba(39,45,59,.10);
  --green-soft:rgba(22,163,74,.10);
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--page);
  color:var(--navy);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{letter-spacing:-.02em;line-height:1.2}

img{display:block;max-width:100%;height:auto}

a{color:inherit}

.site{max-width:768px;margin:0 auto;padding:40px 16px 40px}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero{text-align:center;display:flex;flex-direction:column;align-items:center}
.logo{width:64px;height:64px}
.wordmark{margin-top:12px;font-size:24px;font-weight:800;letter-spacing:-.02em}
.wordmark .accent{color:var(--green)}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:20px;padding:5px 14px;border-radius:999px;
  background:var(--green-soft);color:var(--green);
  font-size:14px;font-weight:600;
}
.badge svg{width:16px;height:16px;flex:none}

.hero h1{margin-top:20px;font-size:30px;font-weight:800}
.hero .lead{margin-top:16px;max-width:36rem;color:var(--muted)}

/* ── Cards ────────────────────────────────────────────────────────────── */

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
}

.section{margin-top:40px}
.section-title{text-align:center;font-size:20px;font-weight:800}

.grid{margin-top:20px;display:grid;gap:16px}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* "Jak to bude fungovat" cards. Scoped to .feature so the stat cards in the
   sibling grid keep their own, larger type. */
.feature > svg{width:24px;height:24px;color:var(--green)}
.feature h3{margin-top:12px;font-size:16px;font-weight:700}
.feature p{margin-top:4px;font-size:14px;color:var(--muted)}

/* ── Signup ───────────────────────────────────────────────────────────── */

.signup{margin-top:32px}
.signup h2{font-size:18px;font-weight:700}
.signup > p{margin-top:4px;font-size:14px;color:var(--muted)}

.signup-form{margin-top:20px;display:flex;flex-direction:column;gap:12px}
@media(min-width:640px){.signup-form{flex-direction:row}}

.signup-form input[type=email]{
  flex:1;height:48px;padding:0 16px;
  font:inherit;font-size:16px;color:var(--navy);
  background:var(--white);
  border:1px solid var(--line);border-radius:10px;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.signup-form input[type=email]::placeholder{color:var(--faint)}
.signup-form input[type=email]:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}

.btn{
  height:48px;padding:0 32px;border:0;border-radius:999px;
  background:var(--green);color:var(--white);
  font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;transition:background-color .15s;
}
.btn:hover{background:var(--green-dark)}
.btn:focus-visible{outline:2px solid var(--green-dark);outline-offset:2px}
.btn[disabled]{opacity:.6;cursor:not-allowed}

.form-note{margin-top:12px;font-size:12px;color:var(--faint)}
.form-note a{text-decoration:underline}
.form-note a:hover{color:var(--green-dark)}

.form-msg{margin-top:12px;font-size:14px;font-weight:600}
.form-msg.is-success{color:var(--green-dark)}
.form-msg.is-error{color:#B91C1C}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Promo band ────────────────────────────────────────────── */

.promo{
  margin-top:32px;padding:20px;
  background:var(--green-tint);
  border-color:rgba(22,163,74,.18);
  display:flex;gap:16px;align-items:flex-start;
}
.promo-icon{
  flex:none;display:grid;place-items:center;
  width:40px;height:40px;border-radius:999px;
  background:var(--green-soft);color:var(--green);
}
.promo-icon svg{width:20px;height:20px}
.promo h2{font-size:18px;font-weight:700}
.promo p{margin-top:4px;font-size:14px;color:var(--muted)}

/* ── Stats ────────────────────────────────────────────────────────────── */

.stat{text-align:center}
.stat-value{
  font-size:30px;font-weight:800;color:var(--green);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.stat-label{margin-top:4px;font-size:14px;color:var(--muted)}

/* ── Founder ──────────────────────────────────────────────────────────── */

.founder{margin-top:32px}
.founder h2{font-size:20px;font-weight:800}
.founder-body{margin-top:20px;display:flex;flex-direction:column;gap:20px}
@media(min-width:640px){.founder-body{flex-direction:row}}
.founder-photo{width:96px;height:96px;border-radius:999px;object-fit:cover;flex:none}
.founder h3{font-size:18px;font-weight:700}
.founder-role{font-size:14px;color:var(--muted)}
.founder-quote{margin-top:12px;font-size:14px;color:var(--muted)}
.founder-links{
  margin-top:16px;display:flex;flex-wrap:wrap;
  gap:8px 20px;font-size:14px;font-weight:600;color:var(--green);
}
.founder-links a{text-decoration:underline;text-underline-offset:2px}
.founder-links a:hover{color:var(--green-dark)}

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer{
  margin-top:40px;padding-top:24px;
  border-top:1px solid var(--line);
  text-align:center;font-size:14px;
}
.site-footer .footer-brand{font-weight:600}
.site-footer p+p{margin-top:4px;color:var(--muted)}
.site-footer a:hover{color:var(--green);text-decoration:underline}

@media(min-width:640px){
  .site{padding:64px 16px 64px}
  .hero h1{font-size:36px}
  .card{padding:32px}
  .grid .card{padding:20px}
  .promo{padding:24px}
}