/* Minimalne, lekkie style dla landing page */
:root{
  --bg: #F0EAD6; /* kościana biel (eggshell) */
  --text: #0b0b0b;
  --muted: #4b4336;
  --accent: #0b0b0b;
  --focus: #eadf9b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background-color:var(--bg);
  /* mobile-first: use 1.png on small devices and render it smaller so background shows */
  background-image: url('1.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: scroll;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.center{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.card{
  width:100%;
  max-width:520px;
  text-align:center;
  transform:translateY(-6vh);
}
.brand{margin:0;font-size:28px;letter-spacing:0.2px}
.lead{color:#ffffff;margin:0 0 8px;font-size:13px;line-height:1.35;text-shadow:0 8px 24px rgba(0,0,0,0.22)}
.logo-wrap{display:flex;justify-content:center;margin-bottom:8px}
.logo{max-width:260px;width:60vw;height:auto;display:block;filter: drop-shadow(0 6px 14px rgba(0,0,0,0.28));}
.release{font-family:'Rokkitt', serif;color:#ffffff;font-size:14px;margin-bottom:18px;text-shadow:0 6px 14px rgba(0,0,0,0.18)}
.form{display:flex;gap:10px;align-items:center;justify-content:center}
.form{display:flex;gap:6px;align-items:stretch;justify-content:flex-start;width:100%;max-width:420px;margin:0 auto}
/* slim input: remove border stroke, keep blurred translucent background */
.form input{flex:1;padding:6px 8px;border:none;border-radius:4px;font-size:13px;background:rgba(255,255,255,0.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--text);min-height:32px;min-width:0}
.form input:focus{outline: none; box-shadow: none;}
.form input::placeholder{color:rgba(11,11,11,0.45)}
.btn{padding:0 10px;border-radius:4px;background:#111;color:#fff;border:0;cursor:pointer;font-weight:700;letter-spacing:0.6px;display:inline-flex;align-items:center;justify-content:center;min-height:32px;min-width:64px;font-size:13px}
.btn:active{transform:translateY(1px)}
.message{margin-top:14px;color:var(--text);min-height:1.2em}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;border:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:420px){
  /* keep button to the right on narrow screens; scale fields down */
  .form{flex-direction:row;gap:6px;padding:0 8px}
  input[type="email"]{font-size:13px;min-height:32px}
  .btn{min-height:32px;min-width:56px;padding:0 8px;font-size:13px}
}

/* desktop: switch to a different background image */
@media (min-width: 768px) {
  body {
    background-image: url('3.jpg');
    background-size: cover;
  }
  /* increase logo size on desktop (approx. x2) */
  .logo{ max-width:520px; filter: drop-shadow(0 12px 30px rgba(0,0,0,0.45)); position:relative; z-index:2 }
}
