:root {
    --primary-orange: #fbc05d;
    --light-blue: #e0f7f4;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Arial', sans-serif; color: #333; line-height: 1.6; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

.header { background: var(--primary-orange); padding: 15px 0; }
.header__container { display: flex; justify-content: space-between; align-items: center; }
.header__nav { display: flex; gap: 20px; }
.header__link { color: #333; text-decoration: none; font-size: 13px; font-weight: bold; }

.hero { 
    background-color: #fdc16e;
    background-image: url('../img/background.png'); 
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 150px 0; 
    display: flex;
    align-items: center;
}
.hero__container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.hero__content { flex: 1; }
.hero__title { 
    font-size: 5.5rem;
    color: white; 
    line-height: 0.9; 
    margin-bottom: 20px; 
}
.hero__subtitle { font-size: 18px; color: #fff; max-width: 400px; margin-bottom: 30px; }
.hero__img-float { max-width: 350px; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2)); }

.button { background: #b2ebf2; border: none; padding: 12px 50px; cursor: pointer; font-weight: bold; box-shadow: 0 4px 0 #81d4fa; }

.info { padding: 100px 0; text-align: center; }
.info__title { font-size: 28px; margin-bottom: 25px; }
.info__text { max-width: 850px; margin: 0 auto; font-size: 15px; color: #555; }

.catalog { background: var(--light-blue); padding: 80px 0; text-align: center; }
.catalog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
.card__img-bg { background: white; border-radius: 50%; width: 150px; height: 150px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; }
.card__img-bg img { width: 75%; }
.card__name { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.rules { 
    background-color: #ffd8a1;
    background-image: url('../img/bg-grid2.png'); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 99%;
    padding: 85px 0; 
    display: flex;
    align-items: center;
}

.rules__container { 
    display: flex; 
    align-items: center; 
    gap: 40px; 
    width: 100%;
}

.rules__content { 
    flex: 1; 
}

.rules__image-wrapper { 
    flex: 1; 
    text-align: right; 
}

.rules__image { 
    width: 100%; 
    max-width: 350px;
    border-radius: 0px; 
}

.footer { background: #444; color: #ccc; padding: 40px 0; font-size: 12px; }
.footer__container { display: flex; justify-content: space-between; }
.footer__links { display: flex; gap: 20px; }

.header__burger { display: none; background: none; border: none; font-size: 24px; cursor: pointer; }

@media (max-width: 768px) {
    .hero__container, .rules__container { flex-direction: column; text-align: center; }
    .catalog__grid { grid-template-columns: 1fr; }
    .header__nav { display: none; }
    .header__burger { display: block; }
    .hero__title { font-size: 3.5rem; }
}