/* Первый экран: картинка целиком (душ справа, небо слева), текст как на anespa.johnnykole.com — прямо на небе слева */
.an-hero{position:relative;background:linear-gradient(180deg,#8fbde0 0%,#cfe3f2 55%,#fff 82%);font-family:'Lora',Georgia,serif;color:#111827}
.an-hero__in{position:relative;max-width:1400px;margin:0 auto}
.an-hero__bg{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)} /* на широком экране края картинки плавно уходят в небо фона */
.an-hero__grid{position:absolute;inset:0;padding:0 0 0 6%;display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box}
.an-hero__text{width:min(560px,44%)}
.an-hero .badge{display:inline-block;background:#1E3A2F;color:#fff;font:600 12px/1 -apple-system,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border-radius:999px;margin-bottom:12px}
.an-hero h1{font-family:'Lora',Georgia,serif;font-size:clamp(34px,4vw,56px);line-height:1.1;font-weight:700;color:#1E3A2F;margin:0 0 8px}
.an-hero .sub{font-size:22px;line-height:1.4;color:#1E3A2F;margin:0 0 12px}
.an-hero .lead{font-size:18px;line-height:1.5;color:#2b332e;margin:0 0 12px}
.an-hero .ticks{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:6px}
.an-hero .ticks li{position:relative;padding-left:28px;font-size:18px;line-height:1.5;color:#2b332e}
.an-hero .ticks li::before{content:"✓";position:absolute;left:0;color:#1E3A2F;font-weight:700}
.an-hero .btn{display:inline-block;background:#1E3A2F;color:#fff !important;text-decoration:none;font-weight:600;font-size:17px;padding:16px 32px;border-radius:6px;transition:background .2s}
.an-hero .btn:hover{background:#5A4130} /* при наведении тёмно-коричневая, как на Kangen */
@media (max-width:1200px){
  .an-hero{background:#fff}
  .an-hero__bg{-webkit-mask-image:none;mask-image:none}
  .an-hero__grid{position:static;padding:24px 20px 32px;display:block}
  .an-hero__text{width:auto;text-shadow:none}
  .an-hero .btn{display:block;text-align:center}
}

/* Блоки 2 и 3 — как на anespa.johnnykole.com: фото + текст, затем «Что внутри картриджа» */
.an-sec{font-family:'Lora',Georgia,serif;color:#111827}
.an-wrap{max-width:1120px;margin:0 auto;padding:0 20px;box-sizing:border-box}
.an-sec h2{font-family:'Lora',Georgia,serif;font-size:clamp(26px,3.4vw,36px);line-height:1.23;font-weight:700;color:#000;margin:0 0 20px} /* как заголовки разделов на Kangen */
.an-media{padding:64px 0}
.an-media__grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.an-media__img img{display:block;width:100%;height:auto;border-radius:14px}
.an-media__txt p{font-size:16px;line-height:1.6;color:#2b332e;margin:0}
.an-media__txt p+p{margin-top:12px}
.an-feats{background:#f8f4ee;padding:64px 0}
.an-feats h2{text-align:center}
.an-feats__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.an-feat{background:#fff;border-radius:12px;padding:24px;border:1px solid rgba(30,58,47,.12)}
.an-feat .an-feat__k{font:600 12px/1 -apple-system,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#1E3A2F;margin:0 0 8px}
.an-feat h3{font-family:'Lora',Georgia,serif;font-size:20px;line-height:1.25;font-weight:600;color:#1E3A2F;margin:0 0 8px}
.an-feat p{font-size:16px;line-height:1.6;color:#2b332e;margin:0}
@media (max-width:820px){
  .an-media,.an-feats{padding:44px 0}
  .an-media__grid,.an-feats__grid{grid-template-columns:1fr;gap:24px}
  .an-sec h2{font-size:24px;margin-bottom:16px}
  .an-feat h3{font-size:19px}
  .an-media__txt p,.an-feat p{font-size:15px}
}

/* Сертификации — текстом и значками вдвое меньше прежней картинки, чтобы были чёткими */
.an-cert{padding:56px 0;text-align:center}
.an-cert h2{text-align:center}
.an-cert p{max-width:900px;margin:0 auto 28px;font-size:18px;line-height:1.6;color:#2b332e}
.an-cert__badges{display:flex;justify-content:center;flex-wrap:wrap;gap:28px}
.an-cert__badges img{width:75px;height:75px}
@media (max-width:420px){.an-cert__badges{gap:14px}.an-cert__badges img{width:64px;height:64px}}

/* Подвал — бутылочный вместо синего */
#rec2053061271,#rec2053061271 .t389{background-color:#1E3A2F !important}

/* Шрифты всей страницы — как на Kangen: Lora, заголовки разделов 36/700, текст 18/300, карточки 20/600 и 16/400 */
#rec2052882631 .t-section__title,#rec2052882631 .t-section__title *{font-family:'Lora',Georgia,serif !important;font-size:36px !important;line-height:1.23 !important;font-weight:700 !important;color:#000 !important}
#rec2052882631 .t-section__descr,#rec2052882631 .t-section__descr *{font-family:'Lora',Georgia,serif !important;font-size:18px !important;line-height:27.9px !important;font-weight:300 !important;color:#000 !important}
#rec2052882631 .t-card__title,#rec2052882631 .t-card__title *{font-family:'Lora',Georgia,serif !important;font-size:20px !important;line-height:1.25 !important;font-weight:600 !important;color:#1E3A2F !important}
#rec2052882631 .t-card__descr,#rec2052882631 .t-card__descr *{font-family:'Lora',Georgia,serif !important;font-size:16px !important;line-height:1.6 !important;font-weight:400 !important;color:#2b332e !important}
#rec2052882661 .t486__title,#rec2052882661 .t486__title *{font-family:'Lora',Georgia,serif !important}
#rec2053061271 .t389__typo{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,system-ui,sans-serif !important;font-weight:400 !important;color:rgba(240,239,234,.78) !important} /* подвал как на Kangen */
@media (max-width:640px){
  #rec2052882631 .t-section__title,#rec2052882631 .t-section__title *{font-size:28px !important}
  #rec2052882631 .t-section__descr,#rec2052882631 .t-section__descr *{font-size:17px !important;line-height:26px !important}
  .an-sec h2{font-size:28px}
}

/* Горячий источник Футамата — фото справа, как у Евгения */
.an-media--rev .an-media__img{order:2}
@media (max-width:820px){.an-media--rev .an-media__img{order:0}}

/* Технические характеристики — две детали душа и аккуратная таблица */
.an-spec{background:#131211;padding:64px 0} /* как нижняя полоса сайтов */
.an-spec h2{text-align:center;margin-bottom:32px;color:#fff}
.an-spec__grid{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:stretch;max-width:900px;margin:0 auto}
.an-spec__pics{display:flex;flex-direction:column;gap:16px} /* две детали душа одна под другой */
.an-spec__pics img{display:block;width:100%;height:auto;border-radius:12px;background:#fff}
.an-spec__table{display:flex;flex-direction:column;border-radius:12px;border:1px solid rgba(255,255,238,.16);overflow:hidden} /* таблица по высоте как обе картинки */
.an-spec__row{flex:1;display:grid;grid-template-columns:1fr 1.3fr;gap:16px;align-items:center;padding:12px 22px;font-size:16px;line-height:1.5;color:rgba(255,255,238,.75)}
.an-spec__row+.an-spec__row{border-top:1px solid rgba(255,255,238,.12)}
.an-spec__row b{font-weight:600;color:#fff}
@media (max-width:820px){
  .an-spec{padding:44px 0}
  .an-spec__grid{grid-template-columns:1fr;gap:24px}
  .an-spec__pics{flex-direction:row}
  .an-spec__pics img{width:calc(50% - 8px)}
  .an-spec__row{grid-template-columns:1fr;gap:2px;padding:12px 16px;font-size:15px}
}

/* Блок 2: видео и фото «водопроводная вода / с Anespa DX» после описания. Колонки в пропорции кадров — одинаковая высота */
.an-compare{display:grid;grid-template-columns:.563fr 1.133fr;gap:32px;max-width:1100px;margin:36px auto 72px;padding:0 20px;box-sizing:border-box}
.an-compare__item{margin:0;display:flex;flex-direction:column}
.an-compare__item_p{order:-1} /* фото слева, видео справа */
.an-compare__item video,.an-compare__item img{display:block;width:100%;height:auto;border-radius:12px;background:#fff}
.an-compare__lab{order:-1;display:flex;align-items:flex-end;min-height:2.6em;margin:0 0 8px;font:600 13px/1.3 -apple-system,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#1E3A2F}
.an-compare__lab span{flex:1;text-align:center}
@media (max-width:820px){
  .an-compare{grid-template-columns:1fr;margin:24px auto 48px;gap:24px}
  .an-compare__item_p{max-width:420px;margin:0 auto;width:100%}
}

/* Блок 2: карточки по центру, иконки — белый знак в круге с бутылочным градиентом */
#rec2052882631 .t649__col{text-align:center}
#rec2052882631 .t649__textwrapper{background:#f8f4ee;border-radius:16px;padding:32px 26px 30px;height:100%;box-sizing:border-box;text-align:center}
#rec2052882631 .an-ico{width:84px;height:84px;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#3d6b57 0%,#1E3A2F 55%,#122a20 100%);box-shadow:0 10px 24px rgba(30,58,47,.28),inset 0 1px 0 rgba(255,255,255,.18)}
#rec2052882631 .an-ico svg{width:42px;height:42px}
#rec2052882631 .t-card__title,#rec2052882631 .t-card__descr{text-align:center !important}
@media (min-width:961px){
  #rec2052882631 .t-card__container{display:flex;flex-wrap:wrap}
  #rec2052882631 .t649__col{display:flex;float:none}
  #rec2052882631 .t649__textwrapper{flex:1}  /* три карточки одной высоты */
}

/* Подписи «Фото» и «Видео» над сравнением */
.an-compare__kind{order:-2;margin:0 0 6px;text-align:center;font:700 15px/1.3 -apple-system,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#1E3A2F} /* тем же шрифтом, что подписи под ними */
/* Плашка Enagic и кнопка в первом блоке — как на emGuarde: бутылочный градиент */
.an-hero .badge{background:linear-gradient(145deg,#3d6b57 0%,#1E3A2F 55%,#122a20 100%);color:#fff;box-shadow:0 4px 12px rgba(30,58,47,.3),inset 0 1px 0 rgba(255,255,255,.18)}
.an-hero .btn{background:linear-gradient(145deg,#3d6b57 0%,#1E3A2F 55%,#122a20 100%);box-shadow:0 8px 20px rgba(30,58,47,.28),inset 0 1px 0 rgba(255,255,255,.18)}
.an-hero .btn:hover{background:linear-gradient(145deg,#4a7e67 0%,#0B5D3B 55%,#1E3A2F 100%)}

/* Кнопки: градиент заметнее — светлый бутылочный слева, тёмный справа */
.an-hero .btn{background:linear-gradient(100deg,#5a937a 0%,#2c5442 45%,#1E3A2F 70%,#0f2219 100%)}
.an-hero .btn:hover{background:linear-gradient(100deg,#6aa78b 0%,#337059 45%,#0B5D3B 70%,#173a2a 100%)}

/* Кнопка «Заказать» после сертификатов — как кнопка внизу emGuarde: горчичная, тёмный текст, по центру, со скруглением */
#rec2264349751 .t944__buttonwrapper{display:flex;justify-content:center}
#rec2264349751 .t-btnflex.t-btnflex_type_button{width:auto !important;max-width:none !important;height:auto !important;display:inline-block !important;background:#c8a96a !important;color:#000 !important;border-radius:6px !important;padding:15px 30px !important;font-family:'Lora',Georgia,serif !important;font-weight:600 !important;font-size:17px !important;line-height:1.6 !important;transition:background .2s}
#rec2264349751 .t-btnflex.t-btnflex_type_button:hover{background:#b0904f !important}
#rec2264349751 .t-btnflex__text{font:inherit !important;color:inherit !important}
#rec2264349751 .t-btnflex__icon{display:none !important}
/* Кнопка «Заказать» ближе к сертификатам */
.an-cert{padding-bottom:56px} /* сверху от кнопки столько же, сколько снизу до подвала */
#rec2264349751{padding-top:0 !important;padding-bottom:56px !important}

/* Первый блок: фон тёмный (небо на фото затемнено), текст светлый */
.an-hero{background:#161a14;color:#f0efea}
.an-hero h1{color:#fff}
.an-hero .sub{color:#a9cbb6}
.an-hero .lead,.an-hero .ticks li{color:rgba(255,255,238,.85)}
.an-hero .ticks li::before{color:#a9cbb6}
@media (max-width:820px){.an-hero{background:#161a14}}
@media (min-width:821px){.an-hero__text{width:min(500px,38%)}} /* текст не заходит на шланг */

/* Первый блок как у emGuarde: небо (затемнено слева под текст), прибор справа, текст светлый */
.an-hero--sky{background:linear-gradient(90deg,rgba(14,20,17,.82) 0%,rgba(14,20,17,.6) 38%,rgba(14,20,17,.1) 70%,rgba(14,20,17,0) 100%),url(../images/anespa-sky-bg.jpg) center/cover no-repeat #4d6e86}
.an-hero--sky .an-hero__wrap{max-width:1120px;margin:0 auto;padding:56px 20px;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;box-sizing:border-box}
.an-hero--sky .an-hero__text{width:auto;max-width:540px}
.an-hero--sky h1{font-size:clamp(44px,7vw,72px);font-weight:600;line-height:1.2;color:#fff;margin:0 0 14px}
.an-hero--sky .sub{width:fit-content;font-size:20px;font-weight:600;margin:-6px 0 16px;background:linear-gradient(135deg,#d6ecdf 0%,#9cc7ad 50%,#6fa588 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.an-hero--sky .lead{font-size:19px;line-height:1.6;color:rgba(255,255,238,.88);margin:0 0 18px}
.an-hero--sky .ticks li{font-size:17px;color:#ffffee}
.an-hero--sky .ticks li::before{color:#a9cbb6}
.an-hero--sky .an-hero__prod img{display:block;width:100%;max-width:520px;height:auto;margin:0 auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.25))}
@media (max-width:820px){
  .an-hero--sky{background:linear-gradient(180deg,rgba(14,20,17,.25) 0%,rgba(14,20,17,.75) 45%,rgba(14,20,17,.85) 100%),url(../images/anespa-sky-bg.jpg) center/cover no-repeat #4d6e86}
  .an-hero--sky .an-hero__wrap{grid-template-columns:1fr;padding:32px 16px 40px}
  .an-hero--sky .an-hero__prod{order:-1}
  .an-hero--sky .an-hero__prod img{max-width:300px}
}
.an-hero--sky .an-hero__prod img{max-width:500px}
@media (min-width:821px){.an-hero--sky{background:linear-gradient(90deg,rgba(14,20,17,.85) 0%,rgba(14,20,17,.7) 45%,rgba(14,20,17,.15) 75%,rgba(14,20,17,0) 100%),url(../images/anespa-sky-bg.jpg) center/cover no-repeat #4d6e86}}
@media (min-width:821px){.an-hero--sky{background:linear-gradient(90deg,rgba(14,20,17,.93) 0%,rgba(14,20,17,.82) 38%,rgba(14,20,17,.25) 55%,rgba(14,20,17,0) 68%),url(../images/anespa-sky-bg.jpg) center/cover no-repeat #4d6e86}} /* слева темнее, справа прибор и небо без затемнения */
/* Первый блок на одобренной картинке: голубое небо и прибор справа как есть, слева тёмная заливка под текст */
@media (min-width:821px){
  .an-hero--sky{background:linear-gradient(90deg,rgba(14,20,17,.94) 0%,rgba(14,20,17,.85) 34%,rgba(14,20,17,.3) 46%,rgba(14,20,17,0) 56%),url(../images/anespa-hero-sky.jpg?v=5) right center/cover no-repeat #8fbde0}
  .an-hero--sky .an-hero__wrap{min-height:600px}
  .an-hero--sky .an-hero__prod{visibility:hidden}
}
@media (min-width:821px){.an-hero--sky{background-size:auto,auto 100%;background-position:0 0,right center}}
@media (min-width:821px) and (max-width:1199px){.an-hero--sky{background-size:auto,auto 78%;background-position:0 0,right bottom}}
@media (min-width:821px){.an-hero--sky .an-hero__text{max-width:470px}}
@media (min-width:821px){.an-hero--sky{background-image:linear-gradient(90deg,rgba(14,20,17,.94) 0%,rgba(14,20,17,.85) 40%,rgba(14,20,17,.3) 52%,rgba(14,20,17,0) 62%),url(../images/anespa-hero-sky.jpg?v=5)}} /* затемнение чуть правее */
@media (min-width:821px){.an-hero--sky{background-image:linear-gradient(90deg,rgba(14,20,17,.98) 0%,rgba(14,20,17,.95) 40%,rgba(14,20,17,.45) 52%,rgba(14,20,17,0) 62%),url(../images/anespa-hero-sky.jpg?v=5)}} /* затемнение плотнее */