@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&family=Space+Mono:wght@400;700&display=swap');
:root{--bg:#07080c;--white:#f7f5f2;--muted:rgba(247,245,242,.62);--line:rgba(255,255,255,.13);--cyan:#52c9f3;--violet:#9880ff;--pink:#ed579f;--lime:#b2dc4a;--orange:#ff9d39}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--white);font-family:Manrope,Arial,sans-serif}.container{width:min(1140px,calc(100% - 48px));margin:auto}.section{position:relative;isolation:isolate;overflow:hidden;padding:118px 0}.kicker{display:inline-flex;align-items:center;gap:9px;margin:0 0 27px;color:rgba(255,255,255,.58);font:700 10px/1 'Space Mono',monospace;letter-spacing:.13em}.kicker:before{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);content:""}h1,h2,h3,h4,p{margin-top:0}h1,h2{position:relative;margin-bottom:32px;font:500 clamp(60px,8vw,112px)/.81 'Playfair Display',Georgia,serif;letter-spacing:-.06em}h1 em,h2 em{font-style:italic;background:linear-gradient(105deg,#60d8ef,#9992ff,#ef75b8);-webkit-background-clip:text;background-clip:text;color:transparent}.ambient{position:absolute;z-index:-1;width:530px;height:530px;border-radius:50%;filter:blur(88px);opacity:.26;pointer-events:none}.ambient--blue{top:-190px;left:-180px;background:#2098d4}.ambient--pink{right:-170px;bottom:-240px;background:#cb397f}.ambient--violet{top:-190px;right:-180px;background:#8552ce}.ambient--orange{bottom:-210px;left:10%;background:#f28a28}
.hero{position:relative;display:grid;min-height:720px;place-items:center;overflow:hidden;background:#06070a}.hero:before{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,8,.36),rgba(5,6,8,.72)),url('../img/Resurs-1-2-4.jpg') center bottom/cover no-repeat;content:""}.hero:after{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 13%,rgba(0,0,0,.1) 52%,rgba(0,0,0,.7));content:""}.hero__wave{position:absolute;z-index:1;bottom:-28%;left:50%;width:min(1300px,150vw);height:420px;transform:translateX(-50%) rotate(-5deg);border-radius:47% 53% 45% 55%;background:linear-gradient(105deg,rgba(41,185,240,.58),rgba(36,113,207,.62) 41%,rgba(239,223,55,.48) 54%,rgba(125,82,195,.48) 67%,rgba(229,70,114,.45));filter:blur(30px);opacity:.78}.hero__content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:64px 0 56px;text-align:center}.hero__logo{width:min(645px,88vw);height:auto;mix-blend-mode:screen;filter:drop-shadow(0 15px 26px rgba(0,0,0,.62))}.hero__title-art{width:min(430px,76vw);height:auto;margin-top:9px;filter:drop-shadow(0 4px 13px rgba(0,0,0,.62))}.hero__copy{max-width:465px;margin:40px 0 27px;color:rgba(255,255,255,.75);font:500 18px/1.58 'Playfair Display',Georgia,serif}.hero__link{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font:700 10px 'Space Mono',monospace;letter-spacing:.09em;text-transform:uppercase}.hero__link span{display:grid;width:28px;height:28px;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:16px}
.statement{padding-bottom:104px;background:linear-gradient(180deg,#090a10,#07080c)}.statement__grid{display:grid;grid-template-columns:1.35fr .8fr;gap:48px;align-items:end}.lead{max-width:660px;margin:0;color:rgba(255,255,255,.85);font:500 clamp(24px,3vw,35px)/1.28 'Playfair Display',Georgia,serif}.note{padding:20px 0 3px 22px;border-left:2px solid var(--pink)}.note span{display:block;margin-bottom:17px;color:var(--pink);font:700 10px 'Space Mono',monospace}.note p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}.index-line{display:flex;align-items:center;gap:26px;margin-top:55px;padding:23px 27px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(100deg,rgba(30,63,78,.5),rgba(55,27,70,.48));box-shadow:inset 0 1px rgba(255,255,255,.07)}.index-line b{font:500 clamp(44px,6vw,72px)/1.3 'Playfair Display',Georgia,serif;background:linear-gradient(100deg,var(--cyan),var(--violet),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}.index-line span{color:rgba(255,255,255,.65);font:700 11px/1.55 'Space Mono',monospace;letter-spacing:.05em;text-transform:uppercase}
.reasons{background:#07080c}.stripe{position:absolute;z-index:-1;width:115vw;height:230px;border-radius:50%;filter:blur(26px);opacity:.48;pointer-events:none}.stripe--one{top:22%;left:-11%;transform:rotate(-19deg);background:linear-gradient(90deg,rgba(36,192,235,.2),rgba(80,160,239,.52),rgba(248,225,59,.51),rgba(244,84,119,.25))}.stripe--two{right:-20%;bottom:1%;transform:rotate(14deg);background:linear-gradient(90deg,rgba(182,223,65,.1),rgba(41,181,233,.42),rgba(129,99,204,.43),rgba(236,54,131,.33))}.reason-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.reason{position:relative;min-height:243px;padding:27px 24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,rgba(22,25,35,.82),rgba(8,9,13,.78));overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.07)}.reason:before{position:absolute;top:24px;bottom:24px;left:0;width:4px;border-radius:4px;content:""}.reason--cyan:before{background:var(--cyan);box-shadow:0 0 14px var(--cyan)}.reason--lime:before{background:var(--lime);box-shadow:0 0 14px var(--lime)}.reason--pink:before{background:var(--pink);box-shadow:0 0 14px var(--pink)}.reason span{display:block;margin-bottom:38px;font:700 10px 'Space Mono',monospace;letter-spacing:.08em}.reason--cyan span{color:var(--cyan)}.reason--lime span{color:var(--lime)}.reason--pink span{color:var(--pink)}.reason h3{margin-bottom:12px;font:500 33px/.9 'Playfair Display',Georgia,serif}.reason p{margin:0;color:var(--muted);font-size:13px;line-height:1.67}.callout{margin-top:18px;padding:24px 28px;border:1px solid rgba(157,137,255,.28);border-radius:17px;background:linear-gradient(100deg,rgba(24,46,60,.61),rgba(54,26,69,.58))}.callout span{display:block;margin-bottom:10px;color:var(--cyan);font:700 10px 'Space Mono',monospace;letter-spacing:.12em}.callout p{margin:0;font:500 clamp(25px,3vw,37px)/1.14 'Playfair Display',Georgia,serif}.callout em{font-style:italic;color:#f494c5}
.formats{background:linear-gradient(180deg,#08090e,#06070b)}.formats__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.format-card{position:relative;min-height:398px;padding:30px;overflow:hidden;border:1px solid var(--line);border-radius:19px;background:linear-gradient(135deg,rgba(25,47,61,.84),rgba(8,10,14,.8));box-shadow:inset 0 1px rgba(255,255,255,.08)}.format-card--curd{background:linear-gradient(135deg,rgba(61,29,66,.8),rgba(8,11,15,.85))}.format-card__copy{position:relative;z-index:2}.format-card p{margin-bottom:18px;color:rgba(255,255,255,.62);font:700 10px 'Space Mono',monospace;letter-spacing:.1em}.format-card strong{display:block;font:500 clamp(84px,10vw,132px)/1.3 'Playfair Display',Georgia,serif;background:linear-gradient(110deg,var(--cyan),var(--violet),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}.format-card small{font-size:.46em}.format-card span{display:block;margin-top:18px;color:rgba(255,255,255,.72);font:700 10px/1.5 'Space Mono',monospace;letter-spacing:.06em;text-transform:uppercase}.format-card img{position:absolute;z-index:1;right:-8%;bottom:-1%;width:75%;filter:drop-shadow(0 25px 19px rgba(0,0,0,.58));transition:transform .3s ease}.format-card:hover img{transform:translateY(-8px) rotate(-2deg)}
.catalog{padding-bottom:125px;background:#06070a}.catalog__wave{position:absolute;z-index:-1;top:-170px;right:-15%;width:80%;height:590px;border-radius:48%;transform:rotate(-26deg);background:linear-gradient(100deg,rgba(42,187,239,.34),rgba(98,113,225,.42),rgba(246,218,53,.3),rgba(235,76,119,.32));filter:blur(51px);opacity:.52}.catalog-title{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-top:62px;padding-bottom:17px;border-bottom:1px solid var(--line)}.catalog-title--curd{margin-top:78px}.catalog-title h3{margin:0;font:500 clamp(36px,4vw,59px)/.86 'Playfair Display',Georgia,serif}.catalog-title span{color:var(--muted);font:700 16px 'Space Mono',monospace;letter-spacing:.07em;text-transform:uppercase}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:20px}.product{position:relative;display:flex;flex-direction:column;min-height:416px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:rgba(8,10,14,.78);transition:transform .24s ease,border-color .24s ease}.product:hover{transform:translateY(-7px);border-color:rgba(255,255,255,.31)}.product:before{position:absolute;top:-34%;left:2%;width:96%;height:68%;border-radius:50%;filter:blur(49px);opacity:.52;content:""}.product--vanilla:before{background: #52c9f3;},.product--pistachio:before{background:#b9d635}.product--cherry:before,.product--raspberry:before{background:#ec3b62}.product--berry:before,.product--pomegranate:before{background:#ed3688}.product--natural:before{background:#1fbce8}.product--strawberry:before{background:#ef5b34}.product--peach:before{background:#ff973d}.product img{position:relative;z-index:1;width:93%;height:240px;margin:11px auto 0;object-fit:contain;filter:drop-shadow(0 18px 16px rgba(0,0,0,.5))}.product__info{position:relative;z-index:2;min-height:165px;margin-top:auto;padding:18px 19px 15px;border-top:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(10,12,16,.42),rgba(6,7,10,.94))}.product__info p{margin-bottom:6px;color:rgba(255,255,255,.51);font:700 12px 'Space Mono',monospace;letter-spacing:.06em;text-transform:uppercase}.product h4{margin:0 0 15px;font:500 29px/.92 'Playfair Display',Georgia,serif}.product dl{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0;padding-top:11px;border-top:1px solid rgba(255,255,255,.1)}.product dt{color:rgba(255,255,255,.46);font:700 16px 'Space Mono',monospace;letter-spacing:.04em;text-transform:uppercase}.product dd{margin:5px 0 0;color:#fff;font:600 20px 'Space Mono',monospace}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:88px;padding:20px max(24px,calc((100% - 1140px)/2));border-top:1px solid var(--line);background:#06070b;color:rgba(255,255,255,.52);font:700 9px 'Space Mono',monospace;letter-spacing:.06em}footer img{width:145px;height:auto}footer a{color:#fff;text-decoration:none}
@media(max-width:850px){.section{padding:83px 0}.statement__grid,.reason-list{grid-template-columns:1fr}.statement__grid{gap:27px}.reason{min-height:175px}.reason span{margin-bottom:22px}.products{grid-template-columns:repeat(2,1fr)}.format-card{min-height:340px}}
@media(max-width:560px){.container{width:min(100% - 28px,1140px)}.hero{min-height:610px}.hero__content{padding:50px 0}.hero__copy{font-size:16px;margin:35px 0 24px}.hero__wave{bottom:-16%;width:180vw;height:280px}.section{padding:68px 0}h1,h2{margin-bottom:25px;font-size:60px;line-height:.84}.kicker{margin-bottom:20px;font-size:9px}.lead{font-size:26px}.index-line{align-items:flex-start;flex-direction:column;gap:12px;margin-top:35px;padding:20px}.index-line b{font-size:56px}.index-line span{font-size:9px}.reason-list{gap:11px}.reason{min-height:145px;padding:19px 18px 18px 22px}.reason h3{margin-bottom:8px;font-size:29px}.reason p{font-size:12px}.callout{padding:20px}.callout p{font-size:27px}.formats__grid{grid-template-columns:1fr;gap:12px}.format-card{min-height:304px;padding:23px}.format-card strong{font-size:94px}.catalog-title{align-items:flex-start;flex-direction:column;gap:9px;margin-top:43px}.catalog-title--curd{margin-top:58px}.products{grid-template-columns:1fr;gap:12px}.product{min-height:393px}.product img{height:220px}.catalog{padding-bottom:78px}footer{align-items:flex-start;flex-direction:column;padding:24px 14px}}
/* ==================================================
   КАТАЛОГ: ТЕКСТ НАКЛАДЫВАЕТСЯ НА НИЗ ИЗОБРАЖЕНИЯ
   ================================================== */

.product {
    position: relative;
    display: block;
    height: 510px;
    min-height: 510px;
    overflow: hidden;
}

/* Фото занимает всю высоту карточки */
.product > img {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 60%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center top;
    filter: none;
}

/*
  Информационный блок лежит поверх картинки.
  top: 300px — точка, где начинается текст на ПК.
  Она перекрывает белую часть изображения.
*/
.product__info {
    position: absolute;
    z-index: 3;
    top: 300px;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 0;
    margin: 0;
    padding: 22px 20px 17px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(
        180deg,
        rgba(7, 8, 12, 0.78) 0%,
        rgba(7, 8, 12, 0.94) 18%,
        #07080c 100%
    );
}

/* Мягкий переход от изображения к текстовой панели */
.product__info::before {
    position: absolute;
    top: -42px;
    right: 0;
    left: 0;
    height: 43px;
    content: "";
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(7, 8, 12, 0.78) 100%
    );
}

/* Контент всегда выше декоративного перехода */
.product__info p,
.product__info h4,
.product__info dl {
    position: relative;
    z-index: 1;
}

/* Факты закреплены снизу — одинаковая высота в карточках */
.product__info dl {
    position: absolute;
    right: 20px;
    bottom: 17px;
    left: 20px;
}

/* Телефон */
@media (max-width: 560px) {
    .product {
        height: 420px;
        min-height: 420px;
    }

    /*
      Текст начинается прямо на белой области
      фонового изображения, как на вашем примере.
    */
    .product__info {
        top: 245px;
        padding: 17px 17px 14px;
    }

    .product__info::before {
        top: -34px;
        height: 35px;
    }

    .product__info dl {
        right: 17px;
        bottom: 14px;
        left: 17px;
    }

    .product h4 {
        margin-bottom: 10px;
        font-size: 27px;
    }
}
/* ==================================================
   HERO — ВОЗВРАТ ОРИГИНАЛЬНОЙ ФИРМЕННОЙ ЛИНИИ
   ================================================== */

.hero {
    position: relative;
    display: grid;
    min-height: 390px;
    overflow: hidden;
    place-items: center;
    background: #050607;
    text-align: center;
}

/* Убираем новую CSS-имитацию волны */
.hero__wave {
    display: none;
}

/*
  Возвращаем исходное размещение фирменного изображения.
  Если файл на сервере PNG — оставляйте .png.
*/
.hero::before {
    position: absolute;
    z-index: 0;
    top: 188px;
    right: 0;
    left: 0;
    height: 860px;
    content: "";
    background-image: url("../img/Resurs-1-2-4.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: min(1180px, 132vw) auto;
    opacity: 1;
}

/* Убираем наложенные затемнения новой версии */
.hero::after {
    display: none;
}

/* Контент остаётся над исходным фирменным фоном */
.hero__content {
    position: relative;
    z-index: 1;
    min-height: 0;
    padding: 38px 0 54px;
}

/* Лого в прежней пропорции */
.hero__logo {
    width: min(570px, 100%);
    margin: 0 auto 18px;
    mix-blend-mode: normal;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
}

/* Надпись «Сырков и творога» в прежней пропорции */
.hero__title-art {
    width: min(540px, 92vw);
    margin: 0 auto;
    filter: drop-shadow(0 4px 13px rgba(0, 0, 0, 0.45));
}

/*
  Если на старой главной не было описания и ссылки,
  лучше скрыть их: именно они меняют идеальную композицию.
*/
.hero__copy,
.hero__link {
    display: none;
}
/* ==================================================
   HERO: ПК — отдельные logo + text + фирменная линия.
   MOBILE — единый hero.png + меняющийся logo.
   ================================================== */

/* На ПК hero.png не показывается */
.hero__art-mobile,
.hero__art {
    display: none;
}

/* ПК: остаются отдельные logo и text.png */
@media (min-width: 621px) {
    .hero__logo {
        position: relative;
        z-index: 2;
        display: block;
        width: min(570px, 100%);
        height: auto;
        margin: 0 auto 18px;
        transition: opacity 160ms ease;
    }

    .hero__title-art,
    .hero__text-image,
    .hero__text-image--desktop {
        position: relative;
        z-index: 2;
        display: block;
        width: min(540px, 92vw);
        height: auto;
        margin: 0 auto;
    }
}

/* Телефон: hero.png — основа, отдельный text.png скрыт */
@media (max-width: 620px) {
    .hero {
        position: relative;
        display: block;
        min-height: 540px;
        overflow: hidden;
        background: #050607;
    }

    .hero::before,
    .hero::after {
        display: none;
    }

    .hero__content {
        position: relative;
        min-height: 540px;
        padding: 0;
    }

    /*
      Готовое мобильное изображение:
      в нём уже есть надпись «Новая линейка...»,
      «Сырков и творога» и фирменная волна.
    */
    .hero__art-mobile,
    .hero__art {
        position: absolute;
        z-index: 0;
        top: 60px;
        left: 50%;
        display: block;
        width: 400px;
        max-width: none;
        height: auto;
        transform: translateX(-50%);
    }

    /*
      text.png на мобильном НЕ нужен:
      его текст уже нарисован внутри hero.png.
    */
    .hero__title-art,
    .hero__text-image,
    .hero__text-image--desktop {
        display: none !important;
    }

    /*
      Но меняющийся логотип нужен:
      main.js меняет src именно у #heroLogo.
    */
    #heroLogo,
    .hero__logo {
        position: absolute;
        z-index: 2;
        top: 52px;
        left: 50%;
        display: block !important;
        width: min(360px, 78vw);
        height: auto;
        margin: 0;
        transform: translateX(-50%);
        transition: opacity 160ms ease;
    }

    .hero__copy,
    .hero__link {
        display: none;
    }
}
/* ==================================================
   БЛОК ПРЕИМУЩЕСТВ: ШЕСТЬ КАРТОЧЕК
   ================================================== */

.reason-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* Новые цветовые акценты */

.reason--violet::before {
    background: var(--violet);
    box-shadow: 0 0 14px var(--violet);
}

.reason--violet span {
    color: var(--violet);
}

.reason--orange::before {
    background: var(--orange);
    box-shadow: 0 0 14px var(--orange);
}

.reason--orange span {
    color: var(--orange);
}

.reason--blue::before {
    background: #4fa9ff;
    box-shadow: 0 0 14px #4fa9ff;
}

.reason--blue span {
    color: #4fa9ff;
}

/* Планшеты: две колонки */

@media (max-width: 850px) {
    .reason-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Телефон: одна колонка */

@media (max-width: 560px) {
    .reason-list {
        grid-template-columns: 1fr;
        gap: 11px;
    }
}