html {

  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

}

.hero {

  background: linear-gradient(180deg, #EEF4E9 0%, #EEF4E9 100%);

}

.gradient {

  background: linear-gradient(180deg, #E9EFE7 0%, #FFF 100%);

}

::-webkit-scrollbar {

  width: 8px;
  background: transparent;
  z-index: 100;

}
::-webkit-scrollbar-thumb {

  border-radius: 40px;
  background: gray;
  height: 120px;
  padding: 1rem;

}

:root{
      --anim-ease: cubic-bezier(.22,.9,.35,1);
      --anim-duration: 600ms;
      --accent-glow: 0 8px 30px rgba(15,23,42,0.12);
}
.btn-anim{
  transition: transform 220ms var(--anim-ease), box-shadow 220ms var(--anim-ease), background-color 180ms;
  will-change: transform;
}
.btn-anim:active { transform: scale(.98); }
.btn-anim:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--accent-glow); }
.reveal { opacity: 0; transform: translateY(18px) scale(.995); will-change: transform, opacity; }
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); transition: opacity var(--anim-duration) var(--anim-ease), transform var(--anim-duration) var(--anim-ease); }
.reveal-image {
  --clipY: 0%;
  clip-path: polygon(0 0, 100% 0, 100% var(--clipY), 0 var(--clipY));
  transition: clip-path 700ms var(--anim-ease), opacity 700ms var(--anim-ease);
  will-change: clip-path, opacity; opacity: 0;
}
.reveal-image.is-visible { --clipY: 100%; opacity: 1; }
.float-y { will-change: transform; transform-origin: center; transition: transform 820ms var(--anim-ease); opacity: .95; }
.card-reveal {
  transform-origin: center;
  transform: translateY(20px) rotate(-1deg) scale(.995);
  opacity: 0;
  transition: transform 700ms var(--anim-ease), opacity 700ms var(--anim-ease);
}
.card-reveal.is-visible {
  transform: translateY(0) rotate(0) scale(1);
  opacity: 1; box-shadow: 0 10px 30px rgba(8,10,12,0.06);
}
.header-hidden { opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 240ms, transform 240ms; }
.navbar-hidden { transform: translateY(-100%); transition: transform 300ms var(--anim-ease); }
.pulse { transition: transform 350ms var(--anim-ease), opacity 350ms; }
.pulse:hover { transform: scale(1.08); opacity: 0.95; }
@media (prefers-reduced-motion: reduce) {
  .btn-anim, .reveal, .reveal-image, .card-reveal, .float-y {
    transition: none !important; animation: none !important;
  }
}

table tbody tr:nth-child(odd) {
  background-color: #EEF4E9; /* jasna zieleń */
}

table tbody tr:nth-child(even) {
  background-color: #F9FDF8; /* prawie białe */
}


/* ============================
   responsive.css (komplet)
   - Połóż AFTER main.css
   - Zawiera: breakpoints 1080 / 768 / 480
   - Ukrywa dekoracyjne SVG, ogranicza zdjęcia,
     poprawia footer, ukrywa #hero-dog <1080px,
     dodaje padding-top dla hero i kolor "zanah-300"
   ============================ */

/* --------- Konfigurowalne zmienne ( łatwo zmienić ) --------- */
:root{
  /* dopasuj do rzeczywistych wysokości header/navbar jeśli chcesz */
  --header-height: 48px;   /* odpowiada h-12 */
  --nav-height: 72px;      /* odpowiada h-18 (przybliżenie) */
  --hero-offset-extra: 12px; /* dodatkowy odstęp nad hero */
  --zanah-300: #E8F3E8;    /* "zanah-300" - zmień na inny hex jeśli wolisz */
  --max-hero-image-height: 480px;
}

/* animacja hamburgera */
#menu-toggle.open #menu-icon path:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
#menu-toggle.open #menu-icon path:nth-child(2) {
  opacity: 0;
}
#menu-toggle.open #menu-icon path:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}
#menu-icon path {
  transition: all 0.3s ease;
}


menu ul {

  list-style: circle !important;

}

menu ol {

  list-style: armenian !important;

}


@media (max-width: 1080px) {

  .one-col-after-1080 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .card-offer {

    height: 16rem;

  }

  .card-offer img {

    width: 48%;

  }

  .profile {
    max-height: 32px !important;
    max-width: 32px !important;
    width: auto;
  }

  .hero{

    height: 10rem;

  }

  /* 1) dekoracyjne wektory absolutne */
  svg.absolute {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* 2) ukryj hero-dog (całkowicie) */
  #hero-dog {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3) HERO SECTION - padding-top by navbar nie najeżdżał + kolor tła */
  section[aria-labelledby="hero-heading"] {
    min-height: 48vh !important;
    height: auto !important;
    /* padding-top = header + nav + extra */
    padding-top: calc(var(--header-height) + var(--nav-height) + var(--hero-offset-extra)) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 2rem !important;
    box-sizing: border-box !important;
    background-color: var(--zanah-300) !important; /* 'zanah-300' */
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  /* kontener zawartości hero -> wymus column */
  section[aria-labelledby="hero-heading"] .relative.mx-auto,
  section[aria-labelledby="hero-heading"] .relative {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100% ;
    padding: 0;
  }

  /* Tekst hero */
  section[aria-labelledby="hero-heading"] h1 {
    align-self: center;
    font-size: 2rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
    margin: 0.25rem 0 0.5rem 0 !important;
    max-width: 80% !important;
    word-break: break-word !important;
  }
  section[aria-labelledby="hero-heading"] p {
    font-size: 1rem !important;
    max-width: 64%;
    margin: 0 auto !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }

  /* CTA -> stakujemy pionowo */
  section[aria-labelledby="hero-heading"] .flex.flex-row.gap-4,
  section[aria-labelledby="hero-heading"] .flex-row.gap-4 {
    gap: 0.75rem !important;
    align-items: center !important;
    justify-content: center;
    width: 100% !important;
  }

  /* przyciski */
  section[aria-labelledby="hero-heading"] a[href^="tel:"] {

    max-width: 460px !important;
    display: inline-flex !important;
    justify-content: center !important;
  }
  section[aria-labelledby="hero-heading"] a[href$="/oferta.html"] {
    width: 180px !important;
    max-width: 90% !important;
  }

  /* obrazki bloków / kafelków usług */
  .mt-12.grid.gap-6.md\:grid-cols-3.h-64,
  .mt-12.grid,
  .grid.gap-6.md\:grid-cols-3.h-64 {

    gap: 1rem !important;
    height: auto !important;
  }

  .grid > .flex img,
  .mt-12 .flex > img,
  section .flex img,
  img.object-cover {

    object-fit: cover !important;
  }

  /* sekcja 'Czym się zajmuję?' - kolumnowy układ */
  section.flex.items-center.justify-center.h-\[560px\].bg-misc-limewash,
  section.flex.items-center.justify-center.h-\[560px\] {
    height: auto !important;
    min-height: auto !important;
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }
  section.flex.items-center.justify-center.h-\[560px\] .flex.flex-row.w-full {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  section.flex.items-center.justify-center.h-\[560px\] .w-1\/2 {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* opinie -> 1 kolumna */
  section.relative .grid.grid-cols-1.md\:grid-cols-3.gap-8 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* stopka -> 1 kolumna, poukładane */
  footer {
    position: relative !important;
    z-index: 30 !important;
  }
  footer .grid.grid-cols-1.md\:grid-cols-3.gap-12 {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  footer .grid > * {
    min-width: 0 !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  footer p, footer a {
    display: block !important;
    margin: 0.25rem 0 !important;
    word-break: break-word !important;
  }

  /* mapa (iframe) */
  iframe {
    width: 100% !important;
    height: 350px !important;
  }

  /* drobne paddingi globalne */
  .max-w-screen-xl.mx-auto {
    padding-left: 1rem !important;
    padding-right: 1rem !important;

  }

  /* jeśli header/nav zajmują więcej niż zmienne - łatwo edytowalne w :root */
}


/* ===========================
   TABLET: <= 768px - dalsze doprecyzowania
   =========================== */
@media (max-width: 768px) {

  .navbar-main {

    border-radius: 0 !important;

  }

  section[aria-labelledby="hero-heading"] .flex.flex-row.gap-4, section[aria-labelledby="hero-heading"] .flex-row.gap-4{

    flex-direction: column;

  }

  .min-h-screen {

    max-height: 640px !important;

  }

  /* hero - mniejsze rozmiary tekstu, padding */
  section[aria-labelledby="hero-heading"] {
    min-height: 55vh !important;
    padding-top: calc(var(--header-height) + var(--nav-height) + 8px) !important;
  }
  section[aria-labelledby="hero-heading"] h1 {
    font-size: 1.75rem !important;
  }
  section[aria-labelledby="hero-heading"] p {
    font-size: 0.98rem !important;
    max-width: 94% !important;
  }

  /* obrazy */
  #hero-dog {
    /* już ukryty <1080, ale w razie - ustawienia awaryjne */
    display: none !important;
  }

  .profile {
    max-height: 32px !important;
    max-width: 32px !important;
    width: auto;

  }

  footer p, footer a {
    font-size: 0.98rem !important;
  }
}

/* ===========================
   PHONE: <= 480px - final fine tuning
   =========================== */
@media (max-width: 480px) {

  .min-h-screen {

    max-height: 24rem !important;

  }

  section[aria-labelledby="hero-heading"] {
    min-height: 640px !important;
    padding-top: calc(var(--header-height) + var(--nav-height) + 6px) !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  section[aria-labelledby="hero-heading"] h1 {
    font-size: 1.4rem !important;
    line-height: 1.1 !important;
  }
  section[aria-labelledby="hero-heading"] p {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
  }

  #hero-dog {
    display: none !important;
  }

  /* obrazy kafelków jeszcze mniejsze */

  .profile  {
    max-height: 24px !important;
    max-width: 24px !important;
  }

  footer p, footer a {
    font-size: 0.95rem !important;
  }

  /* mały dolny odstęp, żeby stopka nie był przyklejona */
  body::after {
    content: "" !important;
    display: block !important;
    height: 1rem !important;
    width: 100% !important;
  }
}

/* ===== Accessibility / touch helpers ===== */
svg {
  -webkit-tap-highlight-color: transparent;
}

/* ===== Debug (odkomentuj w razie potrzeby) ===== */
/*
section[aria-labelledby="hero-heading"] { outline: 1px dashed rgba(0,0,0,0.06); }
footer .grid > * { outline: 1px dashed rgba(0,0,0,0.06); }
*/