/* =========================================================================
   Climaster — style strony
   Kolory, czcionki i zaokrąglenia zmienisz w bloku :root poniżej.
   Reszta pliku idzie sekcjami w kolejności, w jakiej widać je na stronie.
   ========================================================================= */

:root {
  /* Kolory marki */
  --sky:   oklch(68% .17 240);
  --navy:  oklch(27% .09 260);
  --sun:   oklch(78% .16 65);
  --gradient-brand: linear-gradient(135deg, oklch(27% .09 260), oklch(55% .19 250) 55%, oklch(72% .15 230));

  /* Kolory interfejsu */
  --background: oklch(100% 0 0);
  --foreground: oklch(24% .07 260);
  --primary: oklch(58% .19 248);
  --primary-foreground: oklch(99% 0 0);
  --muted: oklch(97% .015 240);
  --muted-foreground: oklch(55.4% .046 257.417);
  --card: oklch(100% 0 0);
  --border: oklch(92.9% .013 255.508);
  --ring: oklch(55.1% .027 264.364);

  --radius: .875rem;
  --shadow-soft: 0 20px 50px -20px var(--navy);
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);

  --font-sans: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Montserrat, var(--font-sans);

  --max-width: 72rem;   /* szerokość treści */
  --gutter: 1rem;       /* margines od krawędzi ekranu */
}

/* --- reset ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, p, ul, figure, fieldset, legend { margin: 0; padding: 0; }
ul { list-style: none; }
fieldset { border: 0; min-width: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
/* Reguła autora bije domyślną z przeglądarki, więc [hidden] trzeba powtórzyć tutaj. */
[hidden] { display: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }

:is(a, button, input, textarea, [role="tab"]):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- typografia wspólna ------------------------------------------------ */

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; }

.section-title {
  font-size: 1.875rem;
  font-weight: 900;
  text-align: center;
}
.section-lead {
  margin: .75rem auto 0;
  max-width: 32rem;
  text-align: center;
  color: var(--muted-foreground);
}

/* --- nagłówek ---------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 85%, transparent);
  backdrop-filter: blur(8px);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .75rem;
}

.logo { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.logo img { height: 2.5rem; width: auto; flex-shrink: 0; }
.logo-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -.025em;
}
.logo-text .clima { color: var(--sky); }
.logo-text .ster  { color: var(--navy); }

.site-nav { display: none; gap: 2rem; font-size: .875rem; font-weight: 600; }
.site-nav a:hover { color: var(--primary); }

.btn-call {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}
.btn-call .label-long { display: none; }

/* --- hero -------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; }
.hero > picture img,
.hero > img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  /* Kadr trzyma się prawej górnej części zdjęcia — tam jest montowana
     jednostka. Przy domyślnym wyśrodkowaniu na telefonie zostawały
     same plecy montera. */
  object-position: 72% 22%;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-brand);
  opacity: .9;
}
.hero-content {
  position: relative;
  padding-block: 5rem;
  color: var(--primary-foreground);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  border: 1px solid color-mix(in oklab, var(--primary-foreground) 30%, transparent);
  border-radius: 9999px;
  padding: .25rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.badge svg { width: .875rem; height: .875rem; }

.hero h1 {
  max-width: 42rem;
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.25;
}
.hero-lead {
  margin-top: 1.25rem;
  max-width: 36rem;
  font-size: 1.125rem;
  opacity: .9;
}

.hero-actions {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.btn-primary, .btn-outline {
  border-radius: 9999px;
  padding: .75rem 1.75rem;
  text-align: center;
  font-weight: 700;
  transition: filter .15s, background-color .15s;
}
.btn-primary {
  background: var(--sun);
  color: var(--navy);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-outline { border: 1px solid color-mix(in oklab, var(--primary-foreground) 50%, transparent); }
.btn-outline:hover { background: color-mix(in oklab, var(--primary-foreground) 10%, transparent); }

/* --- pasek atutów ------------------------------------------------------ */

.perks {
  position: relative;
  z-index: 10;
  margin-top: -2.5rem;
}
.perks-grid {
  display: grid;
  gap: 1rem;
  border-radius: 1rem;
  background: var(--card);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}
.perk { display: flex; align-items: flex-start; gap: .75rem; }
.perk-icon {
  display: grid;
  place-items: center;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  border-radius: .75rem;
  background: var(--muted);
  color: var(--primary);
}
.perk-icon svg { width: 1.25rem; height: 1.25rem; }
.perk-title { font-weight: 700; }
.perk-text { font-size: .875rem; color: var(--muted-foreground); }

/* --- usługi ------------------------------------------------------------ */

.services { padding-block: 5rem; scroll-margin-top: 5rem; }
.services-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
}
.service-card {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  padding: 2rem;
  transition: transform .2s, box-shadow .2s;
}
.service-card:hover {
  transform: translateY(-.25rem);
  box-shadow: var(--shadow-soft);
}
.service-icon {
  display: grid;
  place-items: center;
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 1rem;
  background: var(--gradient-brand);
  color: var(--primary-foreground);
}
.service-icon svg { width: 1.75rem; height: 1.75rem; }
.service-card h3 {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  font-weight: 800;
}
.service-card p { margin-top: .5rem; color: var(--muted-foreground); }

/* --- o mnie ------------------------------------------------------------ */

.about {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 5rem;
  color: var(--primary-foreground);
}
.about > picture img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.about-overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-brand);
  opacity: .85;
}
.about .wrap { position: relative; padding-block: 5rem; }
.about-content { max-width: 42rem; }
.about h2 { font-size: 1.875rem; font-weight: 900; }
.about p { margin-top: 1rem; opacity: .9; }
.about ul { margin-top: 1.5rem; font-weight: 600; }
.about li + li { margin-top: .5rem; }

/* --- kontakt ----------------------------------------------------------- */

.contact {
  background: var(--gradient-brand);
  color: var(--primary-foreground);
  scroll-margin-top: 5rem;
}
.contact .wrap { padding-block: 5rem; text-align: center; }
.contact h2 { font-size: 1.875rem; font-weight: 900; }
.contact-lead { margin: .75rem auto 0; max-width: 28rem; opacity: .9; }

.contact-cards {
  margin: 2.5rem auto 0;
  display: grid;
  gap: 1rem;
  max-width: 48rem;
}
.contact-card {
  border-radius: 1rem;
  background: color-mix(in oklab, var(--primary-foreground) 10%, transparent);
  padding: 1.5rem;
  transition: background-color .15s;
}
a.contact-card:hover { background: color-mix(in oklab, var(--primary-foreground) 15%, transparent); }
.contact-card svg { margin-inline: auto; width: 1.5rem; height: 1.5rem; }
.contact-card div { margin-top: .75rem; font-weight: 700; word-break: break-word; }

/* --- formularz --------------------------------------------------------- */

.contact-form {
  margin: 3rem auto 0;
  max-width: 42rem;
  text-align: left;
}
.contact-form fieldset > * + * { margin-top: 1.25rem; }
.contact-form legend { margin-bottom: .75rem; font-weight: 600; }
.contact-form fieldset:disabled { opacity: .6; }

.topic-tabs {
  display: grid;
  /* Na telefonie cztery tematy nie mieszczą się w rzędzie — idą 2x2. */
  grid-template-columns: repeat(2, 1fr);
  gap: .25rem;
  border-radius: .5rem;
  background: var(--muted);
  padding: .25rem;
  color: var(--muted-foreground);
}
.topic-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 2.5rem;
  padding-inline: .5rem;
  border: 0;
  border-radius: .375rem;
  background: transparent;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.topic-tabs button svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.topic-tabs button[aria-selected="true"] {
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-card);
}

.field-row { display: grid; gap: 1.25rem; }
.field label {
  display: block;
  margin-bottom: .5rem;
  font-size: .875rem;
  font-weight: 600;
}
.field input, .field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: .375rem;
  background: var(--background);
  color: var(--foreground);
  padding: .75rem;
  font-size: .875rem;
  outline: none;
}
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 0;
}
.field textarea {
  min-height: 24rem;
  resize: vertical;
  line-height: 1.625;
}
.field-error { margin-top: .5rem; font-size: .875rem; color: var(--sun); }

.honeypot { display: none; }

.form-note {
  font-size: .75rem;
  line-height: 1.625;
  color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 3rem;
  width: 100%;
  border: 0;
  border-radius: .375rem;
  background: var(--sun);
  color: var(--navy);
  padding-inline: 2rem;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background-color .15s;
}
.btn-submit:hover:not(:disabled) { background: color-mix(in oklab, var(--sun) 90%, transparent); }
.btn-submit:disabled { cursor: not-allowed; opacity: .5; }
.btn-submit svg { width: 1rem; height: 1rem; }
.spinner { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ekran po wysłaniu */
.form-sent {
  margin: 3rem auto 0;
  max-width: 42rem;
  border-top: 1px solid color-mix(in oklab, var(--primary-foreground) 30%, transparent);
  padding-block: 2.5rem;
  text-align: center;
}
.form-sent svg { margin-inline: auto; width: 2.5rem; height: 2.5rem; color: var(--sun); }
.form-sent h3 { margin-top: 1rem; font-size: 1.5rem; font-weight: 700; }
.form-sent p { margin-top: .75rem; }
.btn-secondary {
  margin-top: 1.5rem;
  border: 0;
  border-radius: .375rem;
  background: oklch(96.8% .007 247.896);
  color: oklch(20.8% .042 265.755);
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
}

/* --- stopka ------------------------------------------------------------ */

.site-footer {
  background: var(--navy);
  padding-block: 1.5rem;
  text-align: center;
  font-size: .875rem;
  color: color-mix(in oklab, var(--primary-foreground) 70%, transparent);
}
.site-footer .credit { margin-top: .5rem; font-size: .75rem; }
.site-footer .credit strong { color: var(--primary-foreground); font-weight: 600; }

/* --- większe ekrany ---------------------------------------------------- */

@media (min-width: 640px) {
  .topic-tabs { grid-template-columns: repeat(4, 1fr); }
  .hero-actions { flex-direction: row; }
  .perks-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-cards { grid-template-columns: repeat(3, 1fr); }
  .field-row { grid-template-columns: repeat(2, 1fr); }
  .btn-submit { width: auto; }
  .btn-call .label-long { display: inline; }
  .btn-call .label-short { display: none; }
}

@media (min-width: 768px) {
  .site-nav { display: flex; }
  .hero-content { padding-block: 8rem; }
  .hero-overlay { opacity: .8; }
  .hero > picture img { object-position: center 28%; }
  .hero h1 { font-size: 3.75rem; }
  .section-title, .about h2, .contact h2 { font-size: 2.25rem; }
  .about-overlay { opacity: .8; }
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}