/* ==========================================================================
   Sekcje — layout i style specyficzne dla każdej sekcji one-pagera
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Mockup przeglądarki — wielokrotnego użytku (hero, przed/po, portfolio) */
/* ---------------------------------------------------------------------- */
.mockup-browser {
  background: var(--c-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.mockup-browser__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.65rem 0.9rem;
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-border);
}

.mockup-browser__chrome span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-border);
}

.mockup-browser__url {
  margin-left: var(--sp-2);
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  padding: 0.15em 0.9em;
}

.mockup-page {
  padding: var(--sp-4);
  background: linear-gradient(180deg, var(--c-surface), var(--c-bg));
}

.mockup-page--tall { padding-bottom: var(--sp-6); }

/* Prawdziwy zrzut ekranu wgrany jako "Wyróżniony obrazek" Realizacji —
   pełna szerokość, bez wewnętrznego marginesu mockupu, żeby zdjęcie
   wypełniało ramkę przeglądarki od krawędzi do krawędzi. */
.mockup-page--screenshot {
  padding: 0;
  line-height: 0;
}

.mockup-page--screenshot img {
  width: 100%;
  height: auto;
  display: block;
}

.mockup-page__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.mockup-page__nav span {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--c-teal);
}

.mockup-page__nav i {
  width: 34px;
  height: 7px;
  border-radius: 4px;
  background: var(--c-border);
  font-style: normal;
}

.mockup-page__hero {
  padding: var(--sp-5) 0;
}

.mockup-page__hero--dev { padding-block: var(--sp-4); }

.mockup-page__line {
  height: 12px;
  border-radius: 6px;
  background: var(--c-ink);
  opacity: 0.85;
  margin-bottom: 10px;
}

.mockup-page__line--lg { width: 78%; height: 18px; }
.mockup-page__line--md { width: 55%; opacity: 0.35; margin-bottom: 18px; }

.mockup-page__pill {
  width: 120px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--c-teal);
}

.mockup-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: var(--sp-4);
}

.mockup-page__grid > div {
  height: 56px;
  border-radius: 8px;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
}

.mockup-page__grid--dense {
  grid-template-columns: repeat(3, 1fr);
}

.mockup-page__grid--gallery > div {
  height: 70px;
  background: linear-gradient(135deg, var(--c-teal-tint), var(--c-sand-tint));
  border: none;
}

/* Wersja "stara strona" — celowo przeładowana, bez hierarchii */
.mockup-page--old { background: #F3F1EC; }

.mockup-page--old .mockup-page__row {
  height: 14px;
  background: #C9C2B4;
  border-radius: 3px;
  margin-bottom: 8px;
  width: 60%;
}

.mockup-page--old .mockup-page__row--wide { width: 92%; background: #8B6B4A; opacity: 0.55; }

.mockup-page--old .mockup-page__grid > div {
  height: 34px;
  background: #E4DED0;
  border: 1px solid #D3CBB8;
  border-radius: 3px;
}

/* --- Hero --- */
.hero {
  position: relative;
  padding-top: clamp(2.5rem, 4vw, 5rem);
  padding-bottom: var(--sp-9);
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  width: 46vw;
  height: 46vw;
  max-width: 640px;
  max-height: 640px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.hero__glow--teal { background: var(--c-teal); top: -10%; right: -8%; }
.hero__glow--sand { background: var(--c-sand); bottom: -15%; left: -10%; opacity: 0.35; }

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}

.hero__inner > * { min-width: 0; }

@media (min-width: 980px) {
  .hero__inner { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}

.hero__title {
  margin-bottom: var(--sp-4);
}

.hero__lead {
  font-size: var(--fs-lg);
  color: var(--c-text-muted);
  max-width: 46ch;
  margin-bottom: var(--sp-5);
}

.hero__visual {
  position: relative;
  min-height: 380px;
  perspective: 1600px;
}

/* Wrapper niesie powolny, ciągły "oddech" (czysty CSS, kompozytor GPU,
   koszt bliski zeru) — karta w środku dostaje osobno interaktywny tilt 3D
   sterowany z JS. Rozdzielenie na dwa elementy pozwala uniknąć konfliktu
   dwóch animacji o tę samą właściwość transform na jednym węźle. */
.hero__stack-main {
  position: relative;
  z-index: 2;
  max-width: 460px;
  margin-inline: auto;
  animation: hero-float 7s ease-in-out infinite;
  animation-delay: -2s;
}

.mockup-browser--main {
  position: relative;
  transform: rotate(-1.5deg);
  transform-style: preserve-3d;
  --glare-x: 50%;
  --glare-y: 25%;
}

.mockup-browser--main::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(circle at var(--glare-x) var(--glare-y), rgba(255, 255, 255, 0.55), transparent 45%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.hero__visual.is-tilting .mockup-browser--main::before {
  opacity: 1;
}

.mockup-browser--main::after {
  content: '';
  position: absolute;
  top: -35%;
  left: -12%;
  width: 22%;
  height: 170%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  pointer-events: none;
  z-index: 6;
  transform: translateX(-40%) rotate(10deg);
  opacity: 0;
  animation: hero-shimmer 1.7s ease-in-out 1s 1 both;
}

@keyframes hero-shimmer {
  0% { transform: translateX(-40%) rotate(10deg); opacity: 0; }
  18% { opacity: 0.9; }
  55% { opacity: 0.35; }
  100% { transform: translateX(520%) rotate(10deg); opacity: 0; }
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.mockup-browser--ghost {
  position: absolute;
  z-index: 1;
  width: 78%;
  right: -4%;
  top: 14%;
  opacity: 0.55;
  filter: saturate(0.7);
  animation: hero-float-ghost 8s ease-in-out infinite;
  animation-delay: -4.5s;
}

@keyframes hero-float-ghost {
  0%, 100% { transform: translateY(0) rotate(2.5deg); }
  50% { transform: translateY(-12px) rotate(2.5deg); }
}

.hero__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-pill);
  padding: 0.6em 1.1em;
  font-size: var(--fs-xs);
  font-weight: 700;
  z-index: 3;
  animation: hero-float 6s ease-in-out infinite;
}

.hero__chip svg { width: 14px; height: 14px; color: var(--c-teal); }

.hero__chip--1 { top: 4%; left: -2%; animation-delay: -1s; }
.hero__chip--2 { bottom: 18%; right: -4%; animation-delay: -3.2s; }
.hero__chip--3 { bottom: -2%; left: 14%; animation-delay: -5s; }

@media (prefers-reduced-motion: reduce) {
  .hero__stack-main,
  .mockup-browser--ghost,
  .hero__chip {
    animation: none;
  }

  .mockup-browser--main::after {
    animation: none;
    opacity: 0;
  }
}

@media (max-width: 640px) {
  .hero__chip { display: none; }
  .mockup-browser--ghost { display: none; }
}

.hero__scroll-cue {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  color: var(--c-text-muted);
  animation: bob 2.4s ease-in-out infinite;
}

.hero__scroll-cue svg { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue { animation: none; }
}

/* --- Sekcja 2: diagnostyka (dark) --- */
.diagnosis {
  background: var(--c-dark-bg);
  color: var(--c-text-on-dark-muted);
}

.diagnosis h2 { color: var(--c-text-on-dark); }

.diagnosis .section-head__lead { color: var(--c-text-on-dark-muted); max-width: 640px; }

.diagnosis__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

.diagnosis__grid > * { min-width: 0; }

@media (min-width: 900px) {
  .diagnosis__grid { grid-template-columns: 1.1fr 0.9fr; }
}

.diagnosis__screen { position: relative; }

.diagnosis__screen .mockup-browser { box-shadow: var(--shadow-lg); }

.diagnosis__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-sand);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 5px rgba(214, 169, 123, 0.28);
  animation: pulse-pin 2.6s ease-in-out infinite;
}

.diagnosis__pin:hover,
.diagnosis__pin:focus-visible { background: var(--c-teal); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .diagnosis__pin { animation: none; }
}

.diagnosis__list li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-dark-border);
  font-size: var(--fs-lg);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--c-text-on-dark);
}

.diagnosis__list li:last-child { border-bottom: none; }

.diagnosis__num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--c-dark-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-sand);
}

/* --- Sekcja 3: wartość --- */
.value__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

.value__grid > * { min-width: 0; }

@media (min-width: 900px) {
  .value__grid { grid-template-columns: 1fr 1fr; }
}

.value__points { margin-top: var(--sp-5); }

.value__points li {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.6em 0;
  font-weight: 600;
  font-family: var(--font-display);
}

.value__points svg { width: 20px; height: 20px; color: var(--c-teal); flex-shrink: 0; }

.chatcard {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-md);
}

.chatcard__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-3);
}

.chatcard__bubbles {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
}

.chatcard__bubble {
  background: var(--c-bg-alt);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 4px;
  padding: 0.7em 1.1em;
  font-size: var(--fs-sm);
  max-width: 85%;
}

.chatcard__reply {
  align-self: flex-end;
  margin-top: 0.9rem;
  background: var(--c-teal);
  color: #fff;
  border-radius: var(--radius-md) var(--radius-md) 4px var(--radius-md);
  padding: 0.7em 1.1em;
  font-size: var(--fs-sm);
  font-weight: 600;
  width: fit-content;
  margin-left: auto;
}

/* --- Sekcja 4: usługi --- */
.service-card { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.service-card .icon-tile { margin-bottom: var(--sp-3); }
.service-card__problem { font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: 0.4em; }
.service-card h3 { font-size: var(--fs-lg); margin-bottom: 0.4em; }
.badge--inline { font-size: 0.65em; vertical-align: middle; padding: 0.25em 0.6em; margin-left: 0.4em; }

@media (prefers-reduced-motion: reduce) {
  .service-card:hover { transform: none; }
}

/* --- Sekcja 5: przed/po --- */
.compare__frame {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  cursor: ew-resize;
  user-select: none;
  /* Bez tego telefon próbuje przewinąć stronę, gdy ktoś zacznie przeciągać
     suwak palcem, zamiast oddać gest w całości naszemu JS-owi. */
  touch-action: none;
}

.mockup-browser--compare { box-shadow: none; border-radius: 0; border: none; }

/* Warstwa "przed" jest zawsze pełnowymiarowa (tak samo jak "po") —
   widoczny fragment kontrolujemy przez clip-path, nie przez szerokość,
   dzięki czemu nie trzeba znać szerokości ramki w pikselach (responsywne). */
.compare__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 50% 0 0);
}

.compare__before .mockup-browser {
  width: 100%;
  height: 100%;
}

/* Prawdziwe zrzuty ekranu "przed"/"po" mogą mieć różne proporcje —
   wymuszamy wspólny format i kadrujemy (object-fit: cover), żeby obie
   warstwy sensownie się pokrywały pod suwakiem porównania. */
.compare .mockup-page--screenshot {
  aspect-ratio: 16 / 10;
}

.compare .mockup-page--screenshot img {
  height: 100%;
  object-fit: cover;
}

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 44px;
  margin-left: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compare__handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--c-surface);
  transform: translateX(-50%);
}

.compare__handle-grip {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.compare__handle-grip svg { width: 12px; height: 12px; color: var(--c-ink); }

.compare__tag {
  position: absolute;
  top: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0.35em 0.8em;
  border-radius: var(--radius-pill);
  background: rgba(30, 42, 50, 0.65);
  color: #fff;
  backdrop-filter: blur(4px);
}

.compare__tag--before { left: var(--sp-3); }
.compare__tag--after { right: var(--sp-3); }

/* --- Sekcja 6: portfolio --- */
.portfolio-item {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  min-width: 0;
  padding-block: var(--sp-7);
  border-top: 1px solid var(--c-border);
}

.portfolio-item > * { min-width: 0; }

@media (min-width: 900px) {
  .portfolio-item { grid-template-columns: 1.2fr 0.8fr; }
  .portfolio-item--reverse .portfolio-item__visual { order: 2; }
}

.portfolio-item__visual .mockup-browser {
  transition: transform var(--dur-slow) var(--ease-out);
}

.portfolio-item__visual:hover .mockup-browser {
  transform: scale(1.015) translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-item__visual:hover .mockup-browser { transform: none; }
}

.portfolio-item__copy h3 { margin-block: 0.5em 1em; }

.portfolio-item__facts { display: flex; flex-direction: column; gap: var(--sp-3); }
.portfolio-item__facts dt { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-teal-deep); margin-bottom: 0.3em; }
.portfolio-item__facts dd { margin: 0; color: var(--c-text-muted); }

/* --- Sekcja 7: fotografia --- */
.photography { background: var(--c-dark-bg); color: var(--c-text-on-dark-muted); }
.photography h2 { color: var(--c-text-on-dark); }
.photography .section-head__lead { color: var(--c-text-on-dark-muted); max-width: 640px; }

.photography__gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.photo-frame {
  grid-column: span 2;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, rgba(52, 122, 112, 0.35), rgba(214, 169, 123, 0.25));
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  color: var(--c-text-on-dark-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
  padding: var(--sp-2);
}

.photo-frame svg { width: 30px; height: 30px; opacity: 0.8; }
.photo-frame--tall { grid-row: span 2; aspect-ratio: auto; }
.photo-frame--wide { grid-column: span 3; aspect-ratio: 16/9; }

@media (max-width: 720px) {
  .photography__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-frame, .photo-frame--wide { grid-column: span 1; }
  .photo-frame--tall { grid-row: span 1; aspect-ratio: 1; }
}

/* --- Sekcja 8: opieka --- */
.care__grid { display: grid; gap: var(--sp-6); align-items: start; min-width: 0; }
.care__grid > * { min-width: 0; }
@media (min-width: 900px) { .care__grid { grid-template-columns: 0.9fr 1.1fr; } }
.care__list li { display: flex; gap: var(--sp-3); padding-block: var(--sp-3); border-bottom: 1px solid var(--c-border); }
.care__list li:last-child { border-bottom: none; }
.care__list h4 { margin-bottom: 0.3em; }
.care__list p { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* --- Sekcja 9: o mnie --- */
.about__head {
  margin-bottom: var(--sp-6);
}

.about__head h2 {
  max-width: none;
}

.about__body {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

.about__body > * { min-width: 0; }

@media (min-width: 720px) {
  .about__body { grid-template-columns: 1fr 340px; gap: var(--sp-7); }
}

.about__text {
  font-size: var(--fs-lg);
  color: var(--c-ink-soft);
  max-width: 46ch;
}

.about__photo {
  grid-column: auto;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--c-teal-tint), var(--c-sand-tint));
  color: var(--c-teal-deep);
  margin-left: auto;
}

@media (min-width: 720px) {
  .about__photo { margin-left: 0; }
}

.about__photo svg { width: 64px; height: 64px; }

/* --- Sekcja 11: final CTA + kontakt --- */
.final-cta { position: relative; overflow: hidden; }

.final-cta__glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 60%;
  background: radial-gradient(60% 60% at 50% 0%, var(--c-teal-tint), transparent 70%);
  pointer-events: none;
}

.final-cta__title { position: relative; z-index: 1; }

.contact-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--shadow-lg);
  margin-top: var(--sp-6);
}

.contact-panel > * { min-width: 0; }

@media (min-width: 900px) {
  .contact-panel { grid-template-columns: 1.5fr 1fr; }
}

.contact-form__heading { margin-bottom: var(--sp-4); font-size: var(--fs-xl); }

.contact-panel__alt {
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-5);
}

@media (min-width: 900px) {
  .contact-panel__alt { border-top: none; border-left: 1px solid var(--c-border); padding-top: 0; padding-left: var(--sp-6); }
}

/* --- Treść z edytora WP (strony, wpisy blogowe „Porady”) ---
   base.css zeruje marginesy/listy globalnie dla layoutu komponentów;
   tutaj przywracamy czytelną typografię dla dowolnej treści z edytora. */
.page-content,
.entry-content {
  max-width: 720px;
  font-size: var(--fs-lg);
  color: var(--c-ink-soft);
}

.page-content > * + *,
.entry-content > * + * {
  margin-top: var(--sp-4);
}

.page-content h2, .entry-content h2 { font-size: var(--fs-h3); margin-top: var(--sp-7); }
.page-content h3, .entry-content h3 { font-size: var(--fs-xl); margin-top: var(--sp-6); }
.page-content ul, .entry-content ul { list-style: disc; padding-left: 1.4em; }
.page-content ol, .entry-content ol { list-style: decimal; padding-left: 1.4em; }
.page-content li, .entry-content li { margin-top: 0.4em; }
.page-content a, .entry-content a { color: var(--c-teal-deep); text-decoration: underline; text-underline-offset: 2px; }
.page-content img, .entry-content img { border-radius: var(--radius-md); }
.page-content blockquote, .entry-content blockquote {
  border-left: 3px solid var(--c-teal);
  padding-left: var(--sp-4);
  color: var(--c-text-muted);
  font-style: italic;
}

.page-content table, .entry-content table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  display: block;
  overflow-x: auto;
}

.page-content th, .entry-content th,
.page-content td, .entry-content td {
  padding: 0.7em 1em;
  border: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}

.page-content th, .entry-content th {
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--c-bg-alt);
  white-space: nowrap;
}

.page-content code, .entry-content code {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 0.15em 0.4em;
  font-size: 0.9em;
}