/* ============================================================================
   LEXPREMISE — page-home.css
   Стили, специфичные для главной страницы.
   Подключать ПОСЛЕ chrome.css.
   ============================================================================ */

/* =========================== HERO ========================================= */
.hero { background: var(--c-primary); color: var(--c-text-on-dark); padding: clamp(56px,10vw,112px) 0 clamp(48px,8vw,96px); position: relative; overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-7); align-items: center; }
.hero__text { display: grid; gap: var(--sp-5); }
.hero h1 { color: #fff; font-size: var(--fs-h1); }
.hero .lead { color: var(--c-on-dark-soft); max-width: 52ch; }
.hero__visual { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-5); text-align: right; }
.hero__big { font-family: var(--font-head); font-weight: 700; font-size: clamp(5rem, 3rem + 8vw, 8rem); line-height: .85; letter-spacing: -.04em; color: var(--c-accent); }
.hero__big sup { font-size: .4em; vertical-align: super; }
.hero__sub { color: var(--c-on-dark-soft); font-size: var(--fs-sm); max-width: 28ch; text-align: right; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* =========================== ЛОГО-ПОЛОСА (авто-скролл) =================== */
.logostrip-section { border-bottom: 1px solid var(--c-line); padding: var(--sp-6) 0; overflow: hidden; background: var(--c-surface); }
.logostrip-track { display: flex; align-items: center; gap: clamp(40px, 6vw, 80px); width: max-content; }
.logostrip-track--scroll {
  animation: strip-scroll 28s linear infinite;
}
@keyframes strip-scroll { to { transform: translateX(-50%); } }
.logostrip-track:hover { animation-play-state: paused; }
.logostrip-track img { height: 52px; width: auto; object-fit: contain; filter: grayscale(1) contrast(.7); opacity: .65; transition: all var(--dur-2) var(--ease); }
.logostrip-track img:hover { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .logostrip-track--scroll { animation: none; } }

/* =========================== КТО МЫ ====================================== */
.whowe { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--sp-7); align-items: start; }
.whowe__text { display: grid; gap: var(--sp-5); }
.whowe__text p { max-width: var(--measure); }
.whowe__tags { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.employer-tag { display: inline-flex; align-items: center; gap: .5em; font-size: var(--fs-sm); font-weight: 600; color: var(--c-primary); padding: 10px 18px; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface); transition: all var(--dur-1) var(--ease); }
.employer-tag:hover { border-color: var(--c-accent); background: var(--c-accent-100); }

/* =========================== КАРТА УСЛУГ ================================= */
.services-map { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
.services-col h3 { margin-bottom: var(--sp-5); }
.svc { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line); align-items: start; }
.svc:last-child { border-bottom: none; }
.svc__ic { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--c-accent-100); display: grid; place-items: center; color: var(--c-accent-600); margin-top: 2px; }
.svc__ic svg { width: 20px; height: 20px; }
.svc h4 { font-size: var(--fs-body); margin-bottom: 2px; }
.svc p { font-size: var(--fs-sm); color: var(--c-text-soft); }

/* =========================== ПРОЕКТЫ ===================================== */
.projects { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.project-card { border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-line); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.project-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.project-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.project-card__body { padding: var(--sp-5); display: grid; gap: var(--sp-2); }
.project-card__name { font-weight: 700; font-size: var(--fs-h4); color: var(--c-primary); }
.project-card__nums { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.project-card__stat { display: grid; gap: 2px; }
.project-card__stat b { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 700; color: var(--c-accent); line-height: 1; letter-spacing: -.01em; }
.project-card__stat span { font-size: var(--fs-xs); color: var(--c-text-soft); }

/* =========================== СТАТЬИ-ПРЕВЬЮ ============================== */
.articles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.article-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.article-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.article-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.article-card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex-grow: 1; gap: var(--sp-3); }
.article-card__cat { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-accent-600); }
.article-card h4 { font-size: var(--fs-h4); }
.article-card p { font-size: var(--fs-sm); color: var(--c-text-soft); }
.article-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: .5em; font-weight: 600; font-size: var(--fs-sm); color: var(--c-primary); }
.article-card__link svg { width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
.article-card:hover .article-card__link svg { transform: translateX(4px); }

/* =========================== ГАРАНТИИ ==================================== */
.guarantees { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
.guarantee { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-3); }
.guarantee__ic { width: 40px; height: 40px; border-radius: 50%; background: var(--c-accent-100); display: grid; place-items: center; color: var(--c-accent-600); }
.guarantee__ic svg { width: 20px; height: 20px; }
.guarantee h4 { font-size: var(--fs-body); margin-bottom: 2px; }
.guarantee p { font-size: var(--fs-sm); color: var(--c-text-soft); }

/* =========================== ФИНАЛЬНЫЙ CTA ============================== */
.final-cta { text-align: center; }
.final-cta h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.final-cta .lead { color: var(--c-on-dark-soft); max-width: 50ch; margin-inline: auto; margin-top: var(--sp-3); }
.final-cta .btn { margin-top: var(--sp-6); }

/* =========================== АДАПТИВ HOME ================================ */
@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { align-items: flex-start; text-align: left; flex-direction: row; gap: var(--sp-5); }
  .hero__sub { text-align: left; }
  .projects { grid-template-columns: repeat(2, 1fr); }
  .articles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .whowe { grid-template-columns: 1fr; }
  .services-map { grid-template-columns: 1fr; }
  .guarantees { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .hero__big { font-size: clamp(3.4rem, 2rem + 7vw, 5rem); }
  .projects { grid-template-columns: 1fr; }
  .articles { grid-template-columns: 1fr; }
}