:root {
    --white: #ffffff;
    --black: #000000;
    --color-box-1: #cde8a2;
    --color-box-2: #f4ef96;
    --color-box-3: #f4bebc;
    --color-box-4: #b2e2ea;
    --color-card-bg: #f0ede8;
    --color-footer: #e85d04;

    --color-pill-1: #abcb58;
    --color-pill-2: #fab324;
    --color-pill-3: #e72951;
    --color-pill-4: #6bc4c8;

    --color-sound-1: #089eaf;
    --color-sound-2: #4fa647;
    --color-sound-3: #fa8107;

    --color-play-1: #065159;
    --color-play-2: #30652b;
    --color-play-3: #a45403;
}

* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    text-align: center;
    overflow-x: hidden;
}

/* accessibility utilities */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
}

.skip-link:focus {
    position: fixed;
    top: 16px;
    left: 16px;
    width: auto;
    height: auto;
    padding: 12px 24px;
    background: var(--black);
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    outline: 3px solid var(--white);
    outline-offset: 2px;
}

:focus-visible {
    outline: 3px solid #0057b7;
    outline-offset: 3px;
    border-radius: 4px;
}

.play-btn:focus-visible,
.loop-btn:focus-visible,
.cta-inline:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 3px;
}

.footer__social:focus-visible,
.footer__links a:focus-visible,
.sound-card__label a:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 3px;
}

h1, .sounds__title {
    font-family: 'Lobster', cursive;
}

/* animations */

@keyframes sway {
    0%   { transform: rotate(0deg); }
    30%  { transform: rotate(-5deg); }
    70%  { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}

@keyframes sway-fruit {
    0%   { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
    30%  { transform: translateX(-50%) translateY(-50%) rotate(-5deg); }
    70%  { transform: translateX(-50%) translateY(-50%) rotate(5deg); }
    100% { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
}

@keyframes sway-fruit-sm {
    0%   { transform: translateX(-50%) translateY(-50%) scale(0.75) rotate(0deg); }
    30%  { transform: translateX(-50%) translateY(-50%) scale(0.75) rotate(-5deg); }
    70%  { transform: translateX(-50%) translateY(-50%) scale(0.75) rotate(5deg); }
    100% { transform: translateX(-50%) translateY(-50%) scale(0.75) rotate(0deg); }
}

@keyframes float-shake-a {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-8px); }
    80%  { transform: translateY(0); }
    83%  { transform: translateY(-4px) rotate(-2deg); }
    86%  { transform: translateY(2px) rotate(2deg); }
    89%  { transform: translateY(-3px) rotate(-1deg); }
    93%  { transform: translateY(0) rotate(0); }
    100% { transform: translateY(0); }
}

@keyframes float-shake-b {
    0%   { transform: translateY(-4px); }
    50%  { transform: translateY(4px); }
    78%  { transform: translateY(-4px); }
    82%  { transform: translateY(2px) rotate(2.5deg); }
    85%  { transform: translateY(-6px) rotate(-2.5deg); }
    88%  { transform: translateY(2px) rotate(1deg); }
    93%  { transform: translateY(-4px) rotate(0); }
    100% { transform: translateY(-4px); }
}

@keyframes float-jump-c {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-7px); }
    60%  { transform: translateY(0); }
    65%  { transform: translateY(-16px) scale(1.03); }
    70%  { transform: translateY(3px) scale(1); }
    76%  { transform: translateY(-7px); }
    82%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}

@keyframes float-shake-sound {
    0%   { transform: translateX(-50%) translateY(0); }
    40%  { transform: translateX(-50%) translateY(-7px); }
    80%  { transform: translateX(-50%) translateY(0); }
    83%  { transform: translateX(-50%) translateY(-4px) rotate(-2deg); }
    86%  { transform: translateX(-50%) translateY(2px) rotate(2deg); }
    89%  { transform: translateX(-50%) translateY(-3px) rotate(-1deg); }
    93%  { transform: translateX(-50%) translateY(0) rotate(0); }
    100% { transform: translateX(-50%) translateY(0); }
}

@keyframes float-jump-sound {
    0%   { transform: translateX(-50%) translateY(0); }
    30%  { transform: translateX(-50%) translateY(-7px); }
    60%  { transform: translateX(-50%) translateY(0); }
    65%  { transform: translateX(-50%) translateY(-16px) scale(1.03); }
    70%  { transform: translateX(-50%) translateY(3px) scale(1); }
    76%  { transform: translateX(-50%) translateY(-7px); }
    82%  { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(0); }
}

@keyframes float-product {
    0%   { transform: translateY(15%) scale(1.1); }
    40%  { transform: translateY(11%) scale(1.1); }
    80%  { transform: translateY(15%) scale(1.1); }
    83%  { transform: translateY(12%) scale(1.11) rotate(-1.5deg); }
    86%  { transform: translateY(16%) scale(1.09) rotate(1.5deg); }
    89%  { transform: translateY(11%) scale(1.1) rotate(-0.5deg); }
    93%  { transform: translateY(15%) scale(1.1) rotate(0); }
    100% { transform: translateY(15%) scale(1.1); }
}
.container {
    max-width: 1630px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 40px);
    box-sizing: border-box;
}

.hero,
.intro,
.sounds {
    position: relative;
    overflow: visible;
}

.intro .container {
    padding-top: clamp(60px, 9vw, 140px);
}

.intro__subtitle {
    font-size: clamp(22px, 3vw, 42px);
    font-weight: 300;
    margin-top: 0;
    margin-bottom: clamp(40px, 6vw, 100px);
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
}

/* decorations */

.deco {
    position: absolute;
    pointer-events: none;
}

.deco--1 {
    bottom: -5%;
    left: 2%;
    animation: float-shake-a 6s ease-in-out infinite;
}

.deco--2 {
    top: 8%;
    right: 0;
    animation: float-shake-b 5s ease-in-out infinite 0.8s;
}

.deco--3 {
    top: 50%;
    left: 0;
    animation: float-jump-c 7s ease-in-out infinite 0.4s;
}

.deco--4 {
    bottom: 45%;
    right: 0;
    transform: translateX(50%);
    animation: float-shake-a 4.5s ease-in-out infinite 1.1s;
}

.deco--5 {
    bottom: 10%;
    left: 0;
    animation: float-shake-b 5.5s ease-in-out infinite 0.2s;
}

.deco--6 {
    bottom: -4%;
    right: 0;
    animation: float-jump-c 6.5s ease-in-out infinite 1.4s;
}

.deco--7 {
    top: 50%;
    left: 0;
    animation: float-shake-a 5s ease-in-out infinite 0.6s;
}

.deco--8 {
    bottom: 10%;
    right: 0;
    animation: float-jump-c 6s ease-in-out infinite 1s;
}

.deco--9 {
    bottom: -30%;
    right: 0;
    z-index: 10;
    animation: float-shake-b 5.5s ease-in-out infinite 0.3s;
}

.hero {
    height: 80vh;
    background-image: url('images/hero.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.site-header {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    pointer-events: none;
}

.site-header__brand {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(24px, 4vw, 60px);
    box-sizing: border-box;
    pointer-events: auto;
}

.site-header__logo {
    display: block;
    max-height: 180px;
    width: auto;
}

.site-header__tagline {
    margin-top: 10px;
    line-height: 1;
    font-family: 'Lobster', cursive;
    color: #ffffff;
    text-align: right;
}

.site-header__nadziane {
    font-size: clamp(60px, 10vw, 140px);
    display: block;
}

.site-header__latem {
    font-size: clamp(50px, 8.5vw, 120px);
    display: block;
    margin-top: -6px;
}

@media (max-width: 600px) {
    .site-header {
        justify-content: center;
    }

    .site-header__brand {
        width: 100%;
        align-items: center;
        background-color: rgba(10, 40, 20, 0.45);
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .site-header__logo {
        max-width: 40%;
        max-height: none;
    }

    .site-header__tagline {
        text-align: center;
    }

    .site-header__nadziane {
        font-size: clamp(40px, 12vw, 80px);
    }

    .site-header__latem {
        font-size: clamp(34px, 10vw, 68px);
    }
}

h1 {
    font-size: clamp(40px, 5.5vw, 76px);
    margin-bottom: 0;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-sound-3);
}

h2 {
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 300;
    margin-top: 0;
}

.boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.box {
    position: relative;
    overflow: visible;
    border-radius: 30px;
    margin: 120px 40px 90px 40px;
    padding: clamp(120px, 14vw, 220px) 20px 120px;
    min-height: 200px;
    box-sizing: border-box;
}

.box__product-link {
    display: block;
    width: 100%;
}

.box__product {
    display: block;
    width: 100%;
    position: relative;
    margin-bottom: 90px;
}

.box--1 .box__product { animation: float-product 5.1s ease-in-out infinite; }
.box--2 .box__product { animation: float-product 4.6s ease-in-out infinite; }
.box--3 .box__product { animation: float-product 5.8s ease-in-out infinite; }
.box--4 .box__product { animation: float-product 4.3s ease-in-out infinite; }

.box__fruit {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 100%;
    height: auto;
}

.box--1 .box__fruit { animation: sway-fruit 8s ease-in-out infinite; }
.box--2 .box__fruit { animation: sway-fruit 9.2s ease-in-out infinite; }
.box--3 .box__fruit { animation: sway-fruit 10.5s ease-in-out infinite; }
.box--4 .box__fruit { animation: sway-fruit 8.8s ease-in-out infinite; }

.pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--white);
    border-radius: 30px;
    padding: 14px 24px;
    font-size: 20px;
    color: var(--white);
}

.pill img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.box--1 { background-color: var(--color-box-1); }
.box--2 { background-color: var(--color-box-2); }
.box--3 { background-color: var(--color-box-3); }
.box--4 { background-color: var(--color-box-4); }

.box--1 .pill { background-color: var(--color-pill-1); }
.box--2 .pill { background-color: var(--color-pill-2); }
.box--3 .pill { background-color: var(--color-pill-3); }
.box--4 .pill { background-color: var(--color-pill-4); }

.box__text-wrap {
    max-width: 75%;
    margin: 0 auto;
}

.box__text {
    font-size: clamp(14px, 1.4vw, 18px);
    line-height: 1.65;
    margin: 16px 0 20px;
}

.box__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 450px;
    border-radius: 9999px;
    padding: 13px 42px 14px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 800;
    font-size: 34px;
    margin-bottom: 24px;
    text-wrap: nowrap;
    color: #ffffff;
    text-decoration: none;
    z-index: 1;
    transition: filter 0.25s ease, transform 0.25s ease;
}

.box--1 .box__cta { background-color: var(--color-pill-1); }
.box--2 .box__cta { background-color: var(--color-pill-2); }
.box--3 .box__cta { background-color: var(--color-pill-3); }
.box--4 .box__cta { background-color: var(--color-pill-4); }

.box__cta:hover {
    filter: brightness(0.9);
    transform: translateX(-50%) translateY(-2px);
}

.box__cta-arrow {
    width: 40px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.box__cta:hover .box__cta-arrow {
    transform: translateX(10px);
}

.sounds__desc {
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto clamp(80px, 12vw, 200px);
}

.sound-card__desc {
    font-size: clamp(14px, 1.3vw, 16px);
    line-height: 1.6;
    color: var(--white);
    margin: 0;
    text-align: center;
}

.footer__col--wide {
    flex: 2;
}

.footer__block {
    margin-bottom: 48px;
}

.footer__desc {
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
    max-width: 520px;
}

.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding-top: 20px;
}

.footer__links a {
    color: var(--white);
    text-decoration: none;
    font-size: 15px;
}

.footer__links a + a::before {
    content: '|';
    margin: 0 12px;
    opacity: 0.6;
}

/* sounds section */

.sounds__title {
    font-size: clamp(68px, 8vw, 124px);
    margin-top: clamp(80px, 10vw, 160px);
    margin-bottom: 0;
    color: var(--color-sound-3);
}

.sounds__subtitle {
    font-size: clamp(25px, 3vw, 45px);
    font-weight: 300;
    margin-top: 0;
    margin-bottom: clamp(16px, 2vw, 32px);
}

.sound-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}

.sound-card-wrap {
    display: flex;
    flex-direction: column;
    position: relative;
}

.sound-card-wrap--1 .sound-card { background-color: var(--color-sound-1); }
.sound-card-wrap--2 .sound-card { background-color: var(--color-sound-2); }
.sound-card-wrap--3 .sound-card { background-color: var(--color-sound-3); }

.sound-card-wrap--1 .play-btn { background-color: var(--color-play-1); }
.sound-card-wrap--2 .play-btn { background-color: var(--color-play-2); }
.sound-card-wrap--3 .play-btn { background-color: var(--color-play-3); }

.sound-card-wrap--1 .cta-inline { color: var(--color-sound-1); }
.sound-card-wrap--2 .cta-inline { color: var(--color-sound-2); }
.sound-card-wrap--3 .cta-inline { color: var(--color-sound-3); }

.sound-card {
    border-radius: 30px;
    background-color: var(--color-card-bg);
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.sound-card__content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sound-card__img {
    position: relative;
    max-width: 100%;
    height: auto;
    margin-top: -25%;
}

.sound-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.sound-card__name {
    font-family: 'Lobster', cursive;
    font-size: clamp(34px, 3vw, 42px);
    color: var(--white);
    margin: 0;
}

.sound-card__icon {
    max-width: 220px;
    height: auto;
    object-fit: contain;
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.play-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
    background-color: var(--black);
    color: var(--white);
    border: none;
    border-radius: 999px;
    padding: 17px 20px;
    font-size: clamp(24px, 4.5vw, 66px);
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    box-sizing: border-box;
    transition: flex 0.4s cubic-bezier(.4,0,.2,1);
}

.play-btn__text {
    flex: 1;
    text-align: center;
}

.play-btn__icon {
    height: 1em;
    width: auto;
    transition: opacity 0.2s;
}

.play-btn.is-playing .play-btn__icon {
    display: none;
}

.loop-btn {
    flex: 0 0 0;
    width: 0;
    height: clamp(58px, 7vw, 100px);
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    background: transparent;
    border: 3px solid rgba(255, 255, 255, 0.7);
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: flex 0.4s cubic-bezier(.4,0,.2,1),
                width 0.4s cubic-bezier(.4,0,.2,1),
                opacity 0.3s ease 0.15s,
                background 0.2s ease,
                color 0.2s ease;
}

.loop-btn.is-visible {
    flex: 0 0 clamp(58px, 7vw, 100px);
    width: clamp(58px, 7vw, 100px);
    opacity: 1;
}

.loop-btn.is-active {
    background: var(--white);
}

.sound-card-wrap--1 .loop-btn.is-active { color: var(--color-play-1); }
.sound-card-wrap--2 .loop-btn.is-active { color: var(--color-play-2); }
.sound-card-wrap--3 .loop-btn.is-active { color: var(--color-play-3); }

.loop-btn svg {
    width: 42%;
    height: 42%;
    flex-shrink: 0;
}

.sound-card__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 16px;
    color: var(--white);
}

.cta-inline {
    display: inline-flex;
    align-items: center;
    background-color: var(--white);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 16px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    text-transform: uppercase;
}

.sound-card__label {
    margin: 12px 0 0 0;
    font-size: 14px;
    color: var(--black);
    opacity: 0.7;
}

.sound-card__label a {
    color: inherit;
    font-weight: 700;
}

/* footer */

.footer {
    background-color: var(--color-footer);
    position: relative;
    overflow: visible;
    padding-top: 280px;
    padding-bottom: 48px;
    color: var(--white);
}

.footer__wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 320px;
    display: block;
}

.footer .container {
    position: relative;
    z-index: 1;
}

.footer,
.footer * {
    text-align: left;
}

.footer__grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 5vw, 80px);
    margin-bottom: 48px;
}

.footer__heading {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 16px 0;
}

.footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer__list a {
    color: var(--white);
    text-decoration: none;
    font-size: 15px;
}

.footer__address {
    font-style: normal;
    font-size: 15px;
    line-height: 1.7;
}

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.footer__copy {
    margin: 0;
    font-size: 13px;
    opacity: 0.8;
}

.footer__socials {
    display: flex;
    align-items: center;
    gap: 18px;
}

.footer__social svg {
    width: 20px;
    height: 20px;
    fill: var(--white);
    opacity: 0.75;
    display: block;
    transition: opacity 0.2s;
}

.footer__social:hover svg {
    opacity: 1;
}

@media (min-width: 1001px) {
    .box__cta {
        font-size: 48px;
    }
}

@media (max-width: 1336px) {
    .box__fruit {
        transform: translateX(-50%) translateY(-50%) scale(0.75);
    }

    .box--1 .box__fruit { animation: sway-fruit-sm 8s ease-in-out infinite; }
    .box--2 .box__fruit { animation: sway-fruit-sm 9.2s ease-in-out infinite; }
    .box--3 .box__fruit { animation: sway-fruit-sm 10.5s ease-in-out infinite; }
    .box--4 .box__fruit { animation: sway-fruit-sm 8.8s ease-in-out infinite; }
}

@media (max-width: 1420px) {
    .deco--2 {
        display: none;
    }
}

@media (max-width: 1400px) {
    .box {
        margin: 80px 24px 60px 24px;
    }
}

@media (max-width: 1140px) {
    .pill {
        padding: 10px 16px;
        font-size: 15px;
    }

    .pill img {
        width: 22px;
        height: 22px;
    }

}

@media (max-width: 1030px) {
    .deco {
        display: none;
    }

    .sound-cards {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
        gap: 80px;
    }

    .sound-card-wrap {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .sound-card__content {
        padding: 32px 28px 36px;
        gap: 24px;
    }

    .box {
        margin: 80px 20px 60px 20px;
    }
}

@media (max-width: 909px) {
    .boxes {
        grid-template-columns: 1fr;
    }

    .box {
        margin: 60px auto 50px auto;
        max-width: 520px;
        width: calc(100% - 40px);
    }
}

@media (max-width: 1000px) {
    .box__fruit {
        max-width: 150px;
    }

    .box {
        padding-top: clamp(60px, 7vw, 110px);
    }
}

@media (max-width: 768px) {
    .hero {
        height: 50dvh;
    }

    .box {
        margin: 48px auto 40px auto;
        width: calc(100% - 32px);
        max-width: 480px;
    }

    .pills {
        flex-wrap: nowrap;
    }

    .footer__grid {
        gap: 32px;
    }

    .footer__col {
        min-width: calc(50% - 16px);
    }
}

@media (max-height: 912px) and (min-width: 601px) {
    .deco--1 {
        translate: 0 50%;
    }

    .site-header__brand {
        transform: scale(0.7) translateX(-10%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .deco,
    .box__fruit,
    .box__product {
        animation: none;
    }

    .play-btn,
    .loop-btn {
        transition: none;
    }
}

@media (max-width: 480px) {
    .box {
        width: calc(100% - 24px);
        border-radius: 20px;
        margin: 40px auto 32px auto;
    }

    .pills {
        flex-direction: column;
    }

    .pill {
        width: 100%;
        justify-content: center;
    }

    .footer__col {
        min-width: 100%;
    }

    .sound-card {
        border-radius: 20px;
    }

    .footer {
        padding-top: 180px;
    }
}

@media (max-width: 450px) {
    .box__cta {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    .footer__wave {
        display: none;
    }

    .footer {
        padding-top: 48px;
        border-radius: 0;
    }
}