/* v2: układ do skanowania wzrokiem, zdjęcia, mentor */

.hero-card { max-width: none; display: grid; gap: 1.6rem; align-items: center; }
.hero-card h1 { font-size: clamp(2.6rem, 10vw, 5.2rem); line-height: 0.98; }
.hero-bullets b { font-family: var(--display); font-stretch: 85%; font-weight: 750; }
.hero-photo { margin: 0; box-shadow: 0 0 0 4px var(--grout); }
.hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 70%; }
.btn-big { font-size: 1.35rem; padding: 1.15rem 2rem; }
@media (min-width: 900px) {
  .hero-card { grid-template-columns: 1.15fr 1fr; gap: 2.4rem; }
  .hero-card h1 { font-size: clamp(3rem, 5vw, 4.8rem); }
  .hero-photo img { aspect-ratio: 4 / 5; }
}

.split { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.2fr 1fr; gap: 3rem; } }
.punches { list-style: none; padding: 0; margin: 0; }
.punches li {
  font-size: 1.12rem; line-height: 1.4; padding: 0.75rem 0 0.75rem 2.1rem; position: relative;
  border-bottom: 1px solid var(--grout);
}
.punches li::before {
  content: "✕"; position: absolute; left: 0.2rem; top: 0.72rem;
  font-family: var(--display); font-weight: 800; color: var(--warn);
}
.photo { margin: 0; box-shadow: 0 0 0 4px var(--grout); }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo.tilt { transform: rotate(1.2deg); }

.quotes-title { margin: 3rem 0 1rem; font-size: 1.3rem; }
.comments { display: grid; gap: 1rem; }
@media (min-width: 900px) { .comments { grid-template-columns: repeat(3, 1fr); } }
.comment { margin: 0; background: var(--pool); padding: 1.1rem 1.2rem 1rem 3.4rem; position: relative; border-radius: 4px; }
.comment::before {
  content: "</>"; position: absolute; left: 0.9rem; top: 1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--ink); color: var(--level); font-family: var(--code); font-size: 0.62rem;
  display: grid; place-items: center;
}
.comment p { margin: 0 0 0.4rem; font-size: 1rem; line-height: 1.45; }
.comment cite { font-style: normal; font-family: var(--display); font-stretch: 85%; font-size: 0.82rem; color: var(--ink-soft); }
.comment cite a { color: var(--ink-soft); }
.sting {
  margin: 2.2rem 0 0; font-family: var(--display); font-stretch: 80%; font-weight: 800;
  font-size: clamp(1.6rem, 4.6vw, 2.4rem); line-height: 1.1; max-width: 30ch;
}

.versus { background: var(--pool); }
.vs { display: grid; gap: 1.4rem; }
@media (min-width: 760px) { .vs { grid-template-columns: 1fr 1fr; } }
.vs-col { background: var(--tile); box-shadow: 0 0 0 4px var(--grout); padding-bottom: 1.2rem; }
.vs-col img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vs-col.now img { filter: grayscale(0.7) brightness(0.85); }
.vs-col h3 { padding: 1rem 1.2rem 0.4rem; font-size: 1.6rem; }
.vs-col.later h3 { color: #1f6b3a; }
.vs-col ul { list-style: none; margin: 0; padding: 0 1.2rem; }
.vs-col li { padding: 0.45rem 0 0.45rem 1.6rem; position: relative; font-size: 1.02rem; line-height: 1.4; }
.vs-col li::before { position: absolute; left: 0; font-weight: 800; font-family: var(--display); }
.vs-col.now li::before { content: "✕"; color: var(--warn); }
.vs-col.later li::before { content: "✓"; color: #1f6b3a; }

.lie { background: var(--ink); color: #fff; border: 0; }
.lie-quote {
  font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: clamp(2.2rem, 8vw, 4rem);
  line-height: 1; color: var(--level); text-decoration: line-through; text-decoration-thickness: 4px; margin-bottom: 0.6rem;
}
.lie h2 { color: #fff; }
.lie .lead { color: #dfe4e8; }
.lie strong { color: #fff; }

.mentor-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .mentor-grid { grid-template-columns: 1fr 1.1fr; gap: 3rem; } }
.mentor-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.mentor-photos figure { margin: 0; }
.mentor-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 0 0 4px var(--grout); }
.mentor-photos figure:first-child img { filter: grayscale(0.6); }
.mentor-photos figcaption { font-family: var(--display); font-stretch: 85%; font-weight: 700; font-size: 0.92rem; margin-top: 0.5rem; }
.story { list-style: none; padding: 0; margin: 0 0 1.2rem; border-left: 4px solid var(--level); }
.story li { padding: 0.35rem 0 0.35rem 1rem; font-size: 1.08rem; line-height: 1.45; }

.cards4 { display: grid; gap: 1rem; margin: 1.6rem 0; }
@media (min-width: 760px) { .cards4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards4 { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--tile); box-shadow: 0 0 0 4px var(--grout); padding: 1.2rem; }
.card h3 { font-size: 1.35rem; }
.card p { margin: 0; font-size: 1rem; line-height: 1.45; }
.robot { font-size: 1.1rem; margin: 0 0 1.4rem; max-width: 46rem; }

.tiles7 { list-style: none; margin: 1.6rem 0 0; display: grid; gap: 4px; background: var(--grout); padding: 4px; counter-reset: m; }
@media (min-width: 760px) { .tiles7 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tiles7 { grid-template-columns: repeat(4, 1fr); } }
.tiles7 li { background: var(--tile); padding: 1.2rem; counter-increment: m; }
.tiles7 li:not(.tile-cta)::before {
  content: counter(m); display: block; font-family: var(--display); font-stretch: 75%; font-weight: 800;
  font-size: 2.6rem; line-height: 1; color: var(--level-deep); margin-bottom: 0.4rem;
}
.tiles7 h3 { font-size: 1.25rem; }
.tiles7 p { margin: 0; font-size: 0.98rem; line-height: 1.45; }
.tiles7 .tile-cta { display: grid; place-items: center; background: var(--ink); }

.objections { display: grid; gap: 1.2rem; margin-top: 1.6rem; }
@media (min-width: 760px) { .objections { grid-template-columns: repeat(2, 1fr); } }
.obj { background: var(--tile); box-shadow: 0 0 0 4px var(--grout); }
.obj img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.obj h3 { padding: 1rem 1.2rem 0.3rem; font-size: 1.3rem; }
.obj p { padding: 0 1.2rem 1.2rem; margin: 0; font-size: 1rem; line-height: 1.45; }

.price .packages { margin-top: 1.6rem; }
.price-tag { font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 3.4rem; line-height: 1; margin: 0.2rem 0; }
.pkg ul li { margin-bottom: 0.3rem; }
.micro-row { margin: 1.2rem 0 0; font-size: 1rem; }
.stack-toggle { margin-top: 1.4rem; max-width: 40rem; }
.stack-toggle summary { cursor: pointer; font-family: var(--display); font-stretch: 85%; font-weight: 700; text-decoration: underline; }

.guarantee { position: relative; padding-top: 2.4rem; }
.stamp {
  position: absolute; top: -1.4rem; right: 1rem; width: 6.4rem; height: 6.4rem; border-radius: 50%;
  border: 4px solid #1f6b3a; color: #1f6b3a; background: var(--tile);
  display: grid; place-items: center; text-align: center;
  font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 1.3rem; line-height: 1;
  transform: rotate(-10deg);
}
.guarantee h2 { padding-right: 6rem; }
.g-line { font-family: var(--display); font-stretch: 85%; font-weight: 750; font-size: 1.2rem; }

/* Telefon: przycisk i gwarancja zaraz pod podtytułem, punkty i zdjęcie niżej. */
@media (max-width: 899px) {
  .hero-text { display: flex; flex-direction: column; }
  .hero-text h1 { order: 1; }
  .hero-text .sub { order: 2; }
  .hero-text .btn { order: 3; align-self: stretch; }
  .hero-text .cta-under { order: 4; }
  .hero-text .hero-bullets { order: 5; margin: 1.4rem 0 0; }
}

.dlg .consent { margin-top: 0.9rem; }

/* Hero: przycisk i gwarancja na pierwszym ekranie także na laptopie 1366×680 */
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.2rem; margin: 0.4rem 0 0.2rem; }
.seal { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--ink); font-size: 0.95rem; line-height: 1.35; flex: 1 1 16rem; }
.seal-badge {
  flex: none; width: 4.2rem; height: 4.2rem; border-radius: 50%; border: 3px solid #1f6b3a; color: #1f6b3a;
  display: grid; place-items: center; text-align: center; transform: rotate(-8deg);
  font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 0.95rem; line-height: 1;
}
.hero-bullets { margin-top: 1.4rem; }
@media (max-width: 899px) {
  .hero-text .hero-cta { order: 3; }
  .hero-cta .btn { flex: 1 1 100%; }
}
@media (min-width: 900px) {
  .hero-inner { padding-block: 1.6rem 2.4rem; }
  .hero-card { padding: 1.8rem 2.2rem; }
  .hero-card h1 { font-size: clamp(2.8rem, 4.4vw, 4.4rem); margin-bottom: 0.8rem; }
  .hero-card .sub { margin-bottom: 1rem; }
  .hero-photo img { aspect-ratio: 1 / 1; }
}
@media (max-width: 899px) {
  .hero-cta .btn { order: 0; }
  .hero-cta .seal { order: 1; }
  .hero-inner { padding-top: calc(clamp(52px, 9vw, 96px) + 8px); }
}

.tomek-quotes { background: var(--ink); border: 0; }
.tq { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .tq { grid-template-columns: repeat(3, 1fr); } }
.tq-card { margin: 0; background: var(--tile); display: flex; flex-direction: column; }
.tq-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.tq-card blockquote {
  margin: 0; padding: 1.2rem 1.2rem 0.6rem; font-family: var(--display); font-stretch: 85%;
  font-weight: 750; font-size: 1.35rem; line-height: 1.2; flex: 1;
}
.tq-card figcaption { padding: 0 1.2rem 1.2rem; font-size: 0.92rem; color: var(--ink-soft); }

/* Ściana: kolumny rozciągają się na całą szerokość, bez szarego pasa po prawej. */
.wall { grid-template-columns: repeat(auto-fill, minmax(var(--t), 1fr)); }
.seal { flex: 0 1 auto; }