/**
 * "Co otrzymujesz" - jasna sekcja z naglowkiem i tekstem ktory rozswietla sie
 * slowo-po-slowie w miare naturalnego przewijania sekcji przez ekran (bez pina).
 * Mechanika scrolla 1:1 z manifesto.css/.js, paleta odwrocona (ciemny tekst na
 * jasnym tle zamiast bialy na czarnym).
 */

.what-you-get {
    background: #f5f2ec;
    padding-block: clamp(80px, 12vw, 160px);
}

.what-you-get__inner {
    max-width: 1120px;
    margin-inline: auto;
    text-align: center;
    padding-inline: var(--space-4, 1.5rem);
}

.what-you-get__heading {
    margin: 0.6em 0 0;
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 0.95;
    font-size: clamp(3.5rem, 9.5vw, 8rem);
    color: #17171a;
}

.what-you-get__body {
    margin: clamp(32px, 5vw, 56px) 0 0;
    font-family: var(--font-heading, 'Poppins'), sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    font-size: clamp(2.1rem, 4.6vw, 3.8rem);
}

.what-you-get__word {
    display: inline-block;
    color: rgba(10, 10, 10, 0.22);
    transition: color 0.4s ease;
}
.what-you-get__word.is-lit {
    color: #17171a;
}

/* "design" - po zapaleniu kolor brandu zamiast czerni. */
.what-you-get__word--brand.is-lit {
    color: #cc00a6;
}

/* "polaczone w jedno" / "ktore sprzedaja" - cienka pochyla (ten sam kontrast
   typograficzny co frazy thin w sekcji about-crew). */
.what-you-get__word--thin {
    font-weight: 300;
    font-style: italic;
}

/* "Twoj pomysl" - po zapaleniu gradient brandu. Kolor przygaszenia musi byc
   KRYJACY (nie polprzezroczysty jak zwykle slowa), bo przy
   background-clip:text polprzezroczystosc przepuszczalaby gradient przed
   czasem (lekcja z about-crew). #c7c5c0 = jasnosc rgba(10,10,10,.22) na tle
   #f5f2ec. */
.what-you-get__word--accent {
    background: linear-gradient(100deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: #c7c5c0;
}

.what-you-get__word--accent.is-lit {
    color: transparent;
}

/* Podswietlenie frazy "bez chaosu" - tlo w gradiencie marki, tekst bialy
   (prosba usera). box-decoration-break: clone - gdy fraza zlamie sie na dwie
   linie, kazda dostaje swoje zaokraglenie zamiast jednego rozciagnietego. */
.what-you-get__highlight {
    display: inline;
    padding: .04em .28em .14em;
    border-radius: 14px;
    background: linear-gradient(100deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Slowa NA podswietleniu - przygaszone bielą (nie czernia jak reszta, bo tlo
   jest ciemne), po zapaleniu pelna biel. */
.what-you-get__word--onhighlight {
    color: rgba(255, 255, 255, .35);
}

.what-you-get__word--onhighlight.is-lit {
    color: #ffffff;
}

/* Inline ikony (pioro/monitor/megafon) - rozswietlanie przez opacity,
   rozmiar wzgledem fontu naglowka. */
.what-you-get__icon {
    opacity: .25;
    transition: opacity .4s ease;
}

.what-you-get__icon.is-lit {
    opacity: 1;
}

.what-you-get__icon img {
    display: inline-block;
    width: .85em;
    height: .85em;
    vertical-align: -.06em;
}

@media (max-width: 767px) {
    .what-you-get__body { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}

@media (prefers-reduced-motion: reduce) {
    .what-you-get__word { color: #17171a; }
    .what-you-get__word--brand { color: #cc00a6; }
    .what-you-get__word--accent { color: transparent; }
    .what-you-get__word--onhighlight { color: #ffffff; }
    .what-you-get__icon { opacity: 1; }
}