:root {
  --bg: #f7f5f2;
  --surface: #ffffff;
  --text: #2f2a24;
  --muted: #6f675d;
  --border: #ddd5cb;
  --dark: #2c241d;
  --radius: 20px;
}

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

body {
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.container {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.site-header {
  background: white;
  border-bottom: 1px solid var(--border);
}

.header-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand h1 {
  font-size: 1.2rem;
  margin-bottom: 2px;
}

.brand p {
  color: var(--muted);
  font-size: 0.95rem;
}

.nav {
  display: flex;
  gap: 20px;
}

.nav a {
  text-decoration: none;
  color: var(--muted);
}

.b2b-link {
  background: var(--dark);
  color: white !important;
  padding: 8px 14px;
  border-radius: 999px;
}

.hero {
  padding: 80px 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}

.hero h2 {
  font-size: 3rem;
  line-height: 1.1;
  margin: 20px 0;
}
/* ---- DLACZEGO WARTO ---- */

.hero-card ul {
  list-style: none;
  margin-top: 20px;
  display: grid;
  gap: 14px;
}

.hero-card li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}

.hero-card li::before {
  content: "✓";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e6d2b7;
  color: #8b5e34;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.lead {
  color: var(--muted);
  margin-bottom: 24px;
}

.tag {
  display: inline-block;
  padding: 8px 14px;
  background: #ece4d9;
  border-radius: 999px;
}

.hero-card,
.product-card,
.contact-box,
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.hero-card ul {
  margin-top: 16px;
  padding-left: 20px;
}

.button-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--dark);
  color: white;
}

.btn-secondary {
  border: 1px solid var(--border);
  background: white;
  color: var(--text);
}

.products {
  padding: 80px 0;
}

.section-header {
  margin-bottom: 24px;
}

.section-header h3 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.section-header p {
  color: var(--muted);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 30px;
}

.product-image {
  width: 100%;

  height: 220px;

  object-fit: contain;

  display: block;

  margin-bottom: 16px;

  transform: scale(2.2);
}

.product-card h4 {
  margin-bottom: 10px;
}

.product-card p {
  color: var(--muted);
}

.contact-box {
  margin: 80px auto;
}

.contact-box h3 {
  margin-bottom: 16px;
}

.contact-box p {
  margin-bottom: 8px;
  color: var(--muted);
}

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.login-card {
  width: 100%;
  max-width: 420px;
}

.login-card h1 {
  margin-bottom: 10px;
}

.login-card p {
  color: var(--muted);
}

.login-card form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.login-card input {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  font-size: 1rem;
}

.back-home {
  display: inline-block;
  margin-top: 18px;
  color: var(--muted);
  text-decoration: none;
}

.back-home:hover {
  color: var(--text);
}

@media (max-width: 900px) {
  .hero-grid,
  .product-grid {
    grid-template-columns: 1fr;
  }

  .header-inner {
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 16px 0;
  }

  .hero h2 {
    font-size: 2.2rem;
  }
}

@media (max-width: 600px) {
  .nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  .button-group {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    text-align: center;
  }
}

.about_us {
  margin: 80px auto;

  background:
    linear-gradient(
      135deg,
      #f7f3ee 0%,
      #efe7de 100%
    );

  border: 1px solid var(--border);

  border-radius: 24px;

  padding: 36px;

  position: relative;

  overflow: hidden;

  box-shadow:
    0 12px 35px rgba(44, 36, 29, 0.08);
}

.about_us::after {
  content: "";

  position: absolute;

  right: -40px;
  bottom: -40px;

  width: 220px;
  height: 220px;

  background:
    radial-gradient(
      circle,
      rgba(214, 190, 160, 0.25),
      transparent 70%
    );

  border-radius: 50%;
}

/* ---- KONTAKT ---- */

.contact-box p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.contact-box p::before {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e6d2b7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Telefon */
.contact-box p:nth-of-type(1)::before {
  content: "☎";
}

/* Email */
.contact-box p:nth-of-type(2)::before {
  content: "✉";
}

/* Adres */
.contact-box p:nth-of-type(3)::before {
  content: "⌂";
}
/* ===== TŁO SEKCJI PRODUKTY ===== */

.products {
  padding: 80px 0;

  background:
    linear-gradient(
      to bottom,
      #f8f5f1,
      #f2ece5
    );
}

/* ===== KONTAKT ===== */

.contact-box {
  margin: 80px auto;

  background:
    linear-gradient(
      135deg,
      #f7f3ee 0%,
      #efe7de 100%
    );

  border: 1px solid var(--border);

  position: relative;

  overflow: hidden;
}

/* ===== OZDOBNE TŁO ===== */

.contact-box::after {
  content: "";

  position: absolute;

  right: -40px;
  bottom: -40px;

  width: 220px;
  height: 220px;

  background:
    radial-gradient(
      circle,
      rgba(214, 190, 160, 0.25),
      transparent 70%
    );

  border-radius: 50%;
}
.benefits {
  padding: 80px 0;
}

.site-footer {
  background: white;
  border-top: 1px solid var(--border);
  padding: 24px 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.95rem;
}
/* ===== POPRAWKI KOŃCOWE ===== */

.products {
  padding: 80px 0;
  background:
    linear-gradient(
      to bottom,
      #f8f5f1,
      #f2ece5
    );
}

.contact-box {
  margin: 80px auto;

  background:
    linear-gradient(
      135deg,
      #f7f3ee 0%,
      #efe7de 100%
    );

  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 36px;

  position: relative;
  overflow: hidden;

  box-shadow:
    0 12px 35px rgba(44, 36, 29, 0.08);
}

.contact-box p::before {
  content: "";
}

.hero h1,
.hero h2 {
  font-size: 3rem;
  line-height: 1.1;
  margin: 20px 0;
}

@media (max-width: 900px) {
  .hero h1,
  .hero h2 {
    font-size: 2.2rem;
  }
}
/* ===== PRODUKTY: DELIKATNE LIŚCIE ===== */

.product-card {
min-height: 320px;
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #faf7f3 0%,
      #f2ebe3 100%
    );

  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(44, 36, 29, 0.06);
}

.product-card::after {
  content: "‹ ‹ ‹";

  position: absolute;
  right: 24px;
  top: 22px;

  color: rgba(139, 94, 52, 0.18);

  font-size: 42px;
  letter-spacing: -10px;

  transform: rotate(-35deg);

  pointer-events: none;
}

.product-card::before {
  content: "";

  position: absolute;
  left: -40px;
  bottom: -40px;

  width: 160px;
  height: 160px;

  background:
    radial-gradient(
      circle,
      rgba(214, 190, 160, 0.22),
      transparent 70%
    );

  border-radius: 50%;

  pointer-events: none;
}




/* ===== PRODUKTY — TŁO BOTANICZNE PREMIUM ===== */

.product-card {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 88% 78%,
      rgba(205, 174, 132, 0.22) 0%,
      rgba(205, 174, 132, 0.14) 22%,
      transparent 42%
    ),
    radial-gradient(
      circle at 92% 26%,
      rgba(205, 174, 132, 0.18) 0%,
      rgba(205, 174, 132, 0.10) 26%,
      transparent 48%
    ),
    linear-gradient(
      90deg,
      #f6efe5 0%,
      #efe1d0 100%
    );

  border: 1px solid #d1bfae;
  border-radius: 24px;
  box-shadow: 0 14px 35px rgba(44, 36, 29, 0.12);
  padding: 28px;
}

/* miękka pionowa fala */
.product-card::before {
  content: "";

  position: absolute;
  top: -12%;
  right: 17%;

  width: 210px;
  height: 124%;

  background: rgba(255, 255, 255, 0.22);

  border-radius: 50% 0 0 50%;

  transform: rotate(7deg);

  pointer-events: none;
}

/* delikatne łodygi / kwiaty */
.product-card::after {
  content: "✶\A   ✶\A      ✶\A  ╲│╱\A   │\A   │\A  ╱│╲";

  white-space: pre;

  position: absolute;
  right: 24px;
  bottom: 26px;

  color: rgba(118, 84, 52, 0.20);

  font-size: 28px;
  line-height: 0.95;

  transform: rotate(-8deg);

  pointer-events: none;
}

/* żeby zdjęcie i tekst były nad tłem */
.product-card > * {
  position: relative;
  z-index: 1;
}






/* ===== PRODUKTY — TŁO NR 3 ===== */

.product-card {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 85% 18%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.22) 24%,
      transparent 48%
    ),
    linear-gradient(
      135deg,
      #f1e4d4 0%,
      #e7d4bf 100%
    );

  border: 1px solid #d0bba3;
  border-radius: 24px;

  box-shadow:
    0 14px 34px rgba(44, 36, 29, 0.11);

  padding: 28px;
}

/* delikatna jasna plama */
.product-card::before {
  content: "";

  position: absolute;
  right: -90px;
  top: -90px;

  width: 260px;
  height: 260px;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.32),
      transparent 70%
    );

  border-radius: 50%;
  pointer-events: none;
}

/* treść nad tłem */
.product-card > * {
  position: relative;
  z-index: 1;
}


/* ===== PRODUKTY — JASNY PREMIUM MINIMAL ===== */

.product-card {
  background:
    linear-gradient(
      135deg,
      #f6ede3 0%,
      #efe2d2 100%
    );

  border: 1px solid #dcc8b4;

  border-radius: 24px;

  padding: 28px;

  box-shadow:
    0 10px 28px rgba(44, 36, 29, 0.08);

  transition: 0.25s;
}

/* subtelny hover */

.product-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 16px 36px rgba(44, 36, 29, 0.12);
}


.product-card::before,
.product-card::after {
  display: none;
}



/* ===== PRODUKTY — SOFT LIGHT ===== */

.product-card {
  background:
    linear-gradient(
      145deg,
      #f5efe8 0%,
      #efe7de 100%
    );

  border: 1px solid rgba(210, 195, 180, 0.7);

  border-radius: 24px;

  padding: 28px;

  box-shadow:
    0 8px 22px rgba(44, 36, 29, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.35);

  transition: 0.25s;
}

/* subtelne światło */

.product-card:hover {
  transform: translateY(-3px);

  box-shadow:
    0 14px 30px rgba(44, 36, 29, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

.logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
}

/* ===== HEADER + LOGO ===== */

.brand {
  display: flex !important;

  align-items: center;

  gap: 18px;
}

.logo {
  width: 84px;
  height: 84px;

  object-fit: contain;

  flex-shrink: 0;
}

.brand h1 {
  margin-bottom: 4px;
}



/* ===== ZALETY — PREMIUM LIGHT ===== */

.benefits .product-card {
  background:
    radial-gradient(
      circle at top,
      rgba(255,255,255,0.45),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #f2e8dc,
      #ece1d3
    );

  border: 1px solid rgba(214, 196, 175, 0.65);

  border-radius: 24px;

  box-shadow:
    0 8px 22px rgba(44, 36, 29, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.35);

  transition: 0.25s;
}

.benefits .product-card:hover {
  transform: translateY(-3px);

  box-shadow:
    0 14px 30px rgba(44, 36, 29, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.4);
}


/* ===== ZALETY — PREMIUM LIGHT ===== */

#zalety .product-card {
  background:
    radial-gradient(
      circle at top,
      rgba(255,255,255,0.55),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #f2e8dc,
      #ece1d3
    ) !important;

  border: 1px solid rgba(214, 196, 175, 0.75) !important;

  box-shadow:
    0 8px 22px rgba(44, 36, 29, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.4) !important;
}


/* ===== ZALETY — OSOBNY STYL ===== */

section#zalety .product-card {
  background:
    radial-gradient(
      circle at top,
      rgba(255, 255, 255, 0.65),
      transparent 55%
    ),
    linear-gradient(
      135deg,
      #f5eee6 0%,
      #eee3d6 100%
    ) !important;

  border: 1px solid #dcc8b4 !important;

  box-shadow:
    0 10px 26px rgba(44, 36, 29, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.45) !important;
}

/* wyłącza ozdobne pseudo-tła tylko w sekcji Zalety */
section#zalety .product-card::before,
section#zalety .product-card::after {
  display: none !important;
  content: none !important;
}



.benefit-card {
  background:
    radial-gradient(
      circle at top,
      rgba(255, 255, 255, 0.65),
      transparent 55%
    ),
    linear-gradient(
      135deg,
      #f5eee6 0%,
      #eee3d6 100%
    );

  border: 1px solid #dcc8b4;
  border-radius: 24px;

  padding: 28px;

  box-shadow:
    0 10px 26px rgba(44, 36, 29, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

.benefit-card h4 {
  margin-bottom: 10px;
}

.benefit-card p {
  color: var(--muted);
}







.benefit-card {
  background:
    radial-gradient(
      circle at top,
      rgba(255,255,255,0.55),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #f5eee6 0%,
      #eee3d6 100%
    );

  border: 1px solid #dcc8b4;

  border-radius: 24px;

  padding: 28px;

  box-shadow:
    0 10px 26px rgba(44, 36, 29, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.4);

  transition: 0.25s;
}

.benefit-card:hover {
  transform: translateY(-3px);

  box-shadow:
    0 14px 30px rgba(44, 36, 29, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

.about-content {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 36px;
  align-items: start;
}

.about_us h3 {
  font-size: 2rem;
  margin: 16px 0;
}

.about_us p {
  color: var(--muted);
  margin-bottom: 14px;
}

.about-highlights {
  display: grid;
  gap: 14px;
}

.about-highlights p {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(214, 196, 175, 0.75);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0;
}

@media (max-width: 900px) {
  .about-content {
    grid-template-columns: 1fr;
  }
}


.about-credentials {
  background:
    rgba(255,255,255,0.38);

  border:
    1px solid rgba(214,196,175,0.75);

  border-radius: 20px;

  padding: 24px;
}

.about-credentials h4 {
  margin-bottom: 18px;
}

.about-credentials ul {
  list-style: none;

  display: grid;
  gap: 14px;
}

.about-credentials li {
  position: relative;

  padding-left: 28px;

  color: var(--muted);
}

.about-credentials li::before {
  content: "✓";

  position: absolute;

  left: 0;
  top: 0;

  color: #9b7550;

  font-weight: bold;
}



.about-highlights p::before {
  content: "✓";

  color: #9b7550;

  margin-right: 10px;

  font-weight: bold;
}



.about-photo {
  width: 72%;

  display: block;

  margin: 0 auto 22px;

  border-radius: 22px;

  object-fit: cover;

  box-shadow:
    0 16px 36px rgba(44,36,29,0.12);
}


/* ===== PREMIUM PRODUCT CARDS ===== */

.product-card {
  position: relative;

  overflow: hidden;

  padding: 0;

  border-radius: 26px;

  min-height: 320px;

  background: #efe6da;
}

.product-full-image {
  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;
}

/* napis */

.product-overlay {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  padding: 24px;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.55),
      transparent
    );
}

.product-overlay h4 {
  color: white;

  margin: 0;

  font-size: 1.4rem;

  font-weight: 600;
}