/* YAS Home — витрина линейки yas.kz/home/ (и home.yas.kz, когда появится A-запись).
   Задача страницы: за пять секунд сказать «YAS делает умные устройства для дома,
   вот Gate, вот SmartBox». Продают подробно продуктовые страницы, не эта.

   Две карточки — это фотографии изделий на всю плашку с затемнением слева,
   текст лежит поверх. Поэтому все правки контраста проверять на самих фото:
   белый по светлому участку снимка читаться перестанет. */

.page-home{
  /* Янтарь — фирменный акцент YAS, зонт над обоими продуктами.
     Заливку кнопок держим темнее, иначе тёмный текст на янтаре по фото плывёт. */
  --hm-accent:#F0A64B;
  --hm-accent-soft:rgba(240,166,75,.14);
  --hm-ink:#1A1206;

  --hm-bg:#0A0C0F;
  --hm-panel:#11141A;
  --hm-line:#242932;
  --hm-text:#F5F7FA;
  --hm-muted:#A2ABB8;

  background:var(--hm-bg);
  color:var(--hm-text);
}

.page-home a{color:var(--hm-accent)}
.page-home h1,.page-home h2,.page-home h3{color:var(--hm-text)}
.page-home .lead,.page-home .muted{color:var(--hm-muted)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s-4);top:var(--s-4);z-index:20;background:var(--hm-panel);color:var(--hm-text);padding:var(--s-3) var(--s-4);border-radius:var(--r-sm)}

/* ── ШАПКА ───────────────────────────────────────────────── */
.page-home .site-header{
  background:rgba(10,12,15,.9);backdrop-filter:blur(10px);
  border-bottom-color:var(--hm-line);
}
.brand-lockup{display:flex;align-items:baseline;gap:var(--s-3);text-decoration:none;min-width:0}
.brand-lockup .brand{
  color:var(--hm-text);font-weight:var(--fw-semibold);
  font-size:var(--text-h4);letter-spacing:.06em;
}
.brand-sub{
  font-size:var(--text-body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--hm-accent);font-weight:var(--fw-regular);white-space:nowrap;
}
.site-nav{display:none;gap:var(--s-6);margin-left:auto;margin-right:var(--s-6)}
.site-nav a{
  color:var(--hm-muted);text-decoration:none;font-size:var(--text-sm);
  transition:color var(--dur-fast) var(--ease);white-space:nowrap;
}
.site-nav a:hover{color:var(--hm-text)}
@media (min-width:900px){.site-nav{display:flex}}
.page-home .header-cta{border-color:var(--hm-accent);color:var(--hm-accent)}
.page-home .header-cta:hover{background:var(--hm-accent-soft)}

/* ── КНОПКИ ──────────────────────────────────────────────── */
.page-home .btn-primary{background:var(--hm-accent);color:var(--hm-ink);font-weight:var(--fw-semibold)}
.page-home .btn-primary:hover{background:#FFC078}
.page-home .btn-ghost{
  color:var(--hm-text);border-color:rgba(245,247,250,.28);
  background:rgba(10,12,15,.45);backdrop-filter:blur(4px);
}
.page-home .btn-ghost:hover{background:rgba(245,247,250,.10);border-color:rgba(245,247,250,.5)}
.arr{transition:transform var(--dur) var(--ease);display:inline-block}
.btn-primary:hover .arr{transform:translateX(4px)}

/* ── ПЕРВЫЙ ЭКРАН ────────────────────────────────────────── */
.hm-hero{
  position:relative;overflow:hidden;text-align:center;
  padding:var(--s-9) 0 var(--s-8);
}
/* Фотоподложка первого экрана: вечерний двор, сильно притушенный.
   Сверху градиент в фон страницы, иначе снимок спорит с текстом. */
.hm-hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(10,12,15,.55) 0%, rgba(10,12,15,.86) 55%, var(--hm-bg) 100%),
    url("../home/assets/hero-bg.jpg?v=20260824") center top / cover no-repeat;
}
.hm-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 0%, rgba(240,166,75,.12), transparent 68%);
}
.hm-hero .wrap{position:relative;z-index:2}
.hm-hero>*{position:relative}
.hm-hero .eyebrow{color:var(--hm-accent);letter-spacing:.2em}
.hm-hero h1{max-width:26ch;margin:0 auto var(--s-4);font-size:clamp(1.9rem,1.05rem + 2.4vw,3rem)}
.hm-hero .lead{max-width:56ch;margin:0 auto}
@media (min-width:900px){.hm-hero{padding:var(--s-11) 0 var(--s-9)}}

/* ── ДВЕ ПАНЕЛИ С ФОТО НА ВСЮ ПЛАШКУ ─────────────────────── */
.hm-products{padding:0 0 var(--section-y-tight)}
/* Шире общего контейнера: карточка обязана быть горизонтальной, иначе
   широкое фото изделия кадрируется в вертикальную щель и продукт не виден. */
.hm-products .wrap{max-width:1560px}
.hm-grid{display:grid;gap:var(--s-6)}
.hm-grid>*{min-width:0}
@media (min-width:960px){.hm-grid{grid-template-columns:1fr 1fr;gap:var(--gutter)}}

.hm-card{
  position:relative;isolation:isolate;overflow:hidden;
  border:var(--bw) solid var(--hm-line);border-radius:18px;
  background:var(--hm-panel);
  transition:transform var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
/* фотография изделия — фон карточки */
.hm-bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  /* кадрируем так, чтобы само изделие осталось в правой половине карточки */
  object-position:center center;
  filter:brightness(1.1);
  transition:transform 700ms var(--ease);
}
.hm-card--gate .hm-bg{object-position:62% center}
.hm-card--box .hm-bg{object-position:60% center}

/* Затемнение слева. Держим ровно настолько плотным, чтобы читался текст,
   и не плотнее: правую половину карточки занимает само изделие — ради него
   человек сюда и смотрит. Проверять на самих фото, а не на глаз в коде. */
.hm-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,
      rgba(8,10,13,.92) 0%,
      rgba(8,10,13,.74) 28%,
      rgba(8,10,13,.32) 48%,
      rgba(8,10,13,.06) 70%,
      rgba(8,10,13,0) 100%),
    linear-gradient(to top, rgba(8,10,13,.5), transparent 28%);
  transition:opacity var(--dur) var(--ease);
}

/* эффект наведения: карточка приподнимается, фото наезжает, рамка загорается */
.hm-card:hover,
.hm-card:focus-within{
  transform:translateY(-6px);
  border-color:var(--hm-accent);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(240,166,75,.25);
}
.hm-card:hover .hm-bg,
.hm-card:focus-within .hm-bg{transform:scale(1.07)}
.hm-card:hover .hm-scrim,
.hm-card:focus-within .hm-scrim{opacity:.82}

.hm-body{
  padding:var(--s-6);
  display:flex;flex-direction:column;
  max-width:none;
}
@media (min-width:560px){.hm-body{padding:var(--s-7)}}
@media (min-width:960px){.hm-body{padding:var(--s-7) var(--s-8);min-height:0;max-width:min(58%,470px)}}

.hm-name{display:flex;align-items:baseline;gap:.45em;margin:0 0 var(--s-4)}
.hm-name .yas{
  font-size:var(--text-h3);font-weight:var(--fw-semibold);
  letter-spacing:.06em;color:var(--hm-text);
}
.hm-name .prod{
  font-size:var(--text-h3);font-weight:var(--fw-regular);
  letter-spacing:.1em;color:var(--hm-accent);text-transform:uppercase;
}
.hm-card h2{
  font-size:clamp(1.35rem,1.05rem + 1.1vw,1.8rem);
  line-height:1.18;margin-bottom:var(--s-4);max-width:20ch;
}
.hm-desc{
  font-size:var(--text-sm);line-height:var(--lh-lead);
  color:#D3D9E1;margin:0 0 var(--s-5);max-width:40ch;
}

/* три свойства с иконками */
.hm-feats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-3);list-style:none;margin:0 0 auto;padding:0;max-width:330px;
}
.hm-feats li{margin:0;min-width:0}
.hm-feats .ico{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:var(--bw) solid rgba(240,166,75,.45);
  color:var(--hm-accent);margin-bottom:var(--s-3);
  background:rgba(10,12,15,.5);
}
.hm-feats .ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hm-feats .cap{
  display:block;font-size:var(--text-caption);line-height:1.35;color:#C6CDD7;
  hyphens:none;
}

/* цена */
.hm-price{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,1.1rem + 1.3vw,2rem);font-weight:var(--fw-semibold);
  letter-spacing:-.01em;color:var(--hm-accent);
  margin:var(--s-6) 0 var(--s-1);
  display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;
}
.hm-stock{
  font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--fw-regular);
  color:#5FE39A;display:inline-flex;align-items:center;gap:6px;letter-spacing:0;
}
.hm-stock::before{content:"";width:7px;height:7px;border-radius:50%;background:#5FE39A}
.hm-price-cap{font-size:var(--text-caption);color:var(--hm-muted);margin:0}
.hm-card .btn-row{margin:var(--s-4) 0 0;gap:var(--s-3)}

/* Вся карточка кликается и ведёт на продуктовую страницу.
   Приём: основную ссылку «Подробнее» растягиваем невидимым слоем на всю
   плашку, а вторую кнопку поднимаем над ним — чтобы «Заказать» и
   «Совместимость» вели туда, куда написано, а не на ту же страницу.
   Точка отсчёта слоя — .hm-card, поэтому у .hm-body не должно быть
   position:relative. */
.hm-card .btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
.hm-card .btn-ghost{position:relative;z-index:2}
.hm-card{cursor:pointer}
/* Две кнопки в один ряд, как в макете: на карточке места хватает,
   если не давать им лишних полей. Ниже 960px снова переносятся. */
@media (min-width:960px){
  .hm-card .btn-row{flex-wrap:nowrap}
  .hm-card .btn{padding:0 var(--s-4);white-space:nowrap;font-size:var(--text-sm)}
}

/* ── ПОЛОСА ДОВЕРИЯ ──────────────────────────────────────── */
.hm-trust{
  border-top:var(--bw) solid var(--hm-line);
  background:var(--hm-panel);
  padding:var(--section-y-tight) 0;
}
.hm-trust-grid{
  display:grid;grid-template-columns:1fr;gap:var(--s-6);
  list-style:none;margin:0;padding:0;max-width:none;
}
.hm-trust-grid li{display:flex;gap:var(--s-4);align-items:flex-start;margin:0;min-width:0}
.hm-trust-grid .ico{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:40px;height:40px;border-radius:50%;
  border:var(--bw) solid rgba(240,166,75,.45);color:var(--hm-accent);
}
.hm-trust-grid .ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hm-trust-grid div{min-width:0}
.hm-trust-grid b{display:block;font-size:var(--text-sm);font-weight:var(--fw-semibold);margin-bottom:2px}
.hm-trust-grid span{display:block;font-size:var(--text-caption);color:var(--hm-muted);line-height:1.45}
@media (min-width:640px){.hm-trust-grid{grid-template-columns:repeat(2,1fr);gap:var(--s-7) var(--gutter)}}
@media (min-width:1040px){.hm-trust-grid{grid-template-columns:repeat(4,1fr)}}

/* ── ПОДВАЛ ──────────────────────────────────────────────── */
.page-home .site-footer{border-top-color:var(--hm-line);color:var(--hm-muted)}
.page-home .site-footer a{color:var(--hm-accent)}
.hm-footer-grid{display:grid;gap:var(--s-6)}
@media (min-width:760px){.hm-footer-grid{grid-template-columns:repeat(3,1fr)}}
.hm-footer-grid h3{font-size:var(--text-sm);color:var(--hm-text);margin-bottom:var(--s-3)}
.hm-footer-grid ul{list-style:none;margin:0;padding:0}
.hm-footer-grid li{margin-bottom:var(--s-2);font-size:var(--text-sm)}

/* ── ДВИЖЕНИЕ ОТКЛЮЧЕНО ПО НАСТРОЙКЕ СИСТЕМЫ ─────────────── */
@media (prefers-reduced-motion:reduce){
  .hm-card,.hm-bg,.hm-scrim,.arr{transition:none}
  .hm-card:hover,.hm-card:focus-within{transform:none}
  .hm-card:hover .hm-bg,.hm-card:focus-within .hm-bg{transform:none}
}