/* Landing „nowa odsłona NaszeZoo.pl" — stary (zielony) branding sklepu na Shoperze.
   Zero zależności: systemowe fonty, czysty CSS. */
:root {
  --green: #066b34;
  --green-dark: #024f24;
  --green-tint: #e9f3ec;
  --orange: #e8590c;
  --ink: #23272b;
  --muted: #5d6570;
  --line: #e5e7ea;
  --bg: #ffffff;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

.topbar {
  padding: 18px clamp(16px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}
.logo {
  font-size: 26px;
  font-weight: 800;
  color: var(--green);
  text-decoration: none;
  letter-spacing: -0.3px;
}
.logo-tld { color: var(--green-dark); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(16px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 5vw, 64px) clamp(16px, 6vw, 72px) 8px;
  max-width: 1440px;
  margin: 0 auto;
}
.hero-text h1 {
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.8px;
  margin: 0 0 18px;
}
.accent { color: var(--orange); }
.brand { color: var(--green); }
.lead { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; color: var(--ink); margin: 0 0 14px; }
.thanks { font-weight: 700; font-size: clamp(15px, 1.4vw, 18px); margin: 0 0 22px; }

.signup { margin: 0 0 16px; }
.signup-row { display: flex; flex-wrap: wrap; gap: 10px; }
#email {
  flex: 1 1 260px;
  min-width: 220px;
  padding: 13px 16px;
  font-size: 15px;
  border: 1.5px solid #cfd4da;
  border-radius: 8px;
  outline: none;
}
#email:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(6, 107, 52, 0.12); }
#wyslij {
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--green);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
#wyslij:hover { background: var(--green-dark); }
#wyslij:disabled { opacity: 0.6; cursor: default; }
/* pułapka na boty — poza ekranem, nie display:none (niektóre boty to wykrywają) */
#www { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-msg { min-height: 20px; margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.form-msg.ok { color: var(--green); }
.form-msg.err { color: #c62828; }
.legal { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin: 8px 0 0; max-width: 560px; }

.contact {
  display: inline-block;
  padding: 12px 22px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--green);
  border: 1.5px solid var(--green);
  border-radius: 8px;
  text-decoration: none;
}
.contact:hover { background: var(--green-tint); }

.hero-visual { position: relative; min-height: 300px; }
.blob {
  position: absolute;
  inset: 8% 0 4% 6%;
  background: var(--green-tint);
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
}
.photo {
  position: relative;
  width: 100%;
  max-height: 460px;
  object-fit: contain;
  filter: drop-shadow(0 18px 32px rgba(2, 79, 36, 0.14));
}
.doodle { position: absolute; color: rgba(6, 107, 52, 0.25); user-select: none; }
.doodle-paw { top: 4%; right: 6%; font-size: 34px; transform: rotate(18deg); }
.doodle-heart { top: 14%; left: 2%; font-size: 30px; transform: rotate(-14deg); }

.usp {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  padding: 10px clamp(16px, 6vw, 72px) 46px;
  max-width: 1440px;
  margin: 0 auto;
}
.usp-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 14.5px;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(35, 39, 43, 0.06);
}
.usp-icon { width: 22px; height: 22px; color: var(--green); flex: none; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-visual { order: -1; min-height: 220px; }
  .photo { max-height: 300px; }
  .only-wide { display: none; }
}