/* ============================================================
   PREMIUM REFINEMENT — Qozhan Consulting (главная страница)
   Подключается ТОЛЬКО на index.html.
   Палитра и структура не меняются — меняется лишь «подача»:
   воздух, единая мягкая иерархия теней, деликатные золотые
   акценты и выверенные микровзаимодействия.
   Опора: skill ui-ux-pro-max (elevation-consistent, whitespace-
   balance, weight-hierarchy, duration 150–300ms, transform-only).
   ============================================================ */

:root{
  /* мягкая «дорогая» иерархия теней (без жёстких чёрных) */
  --sh-soft: 0 1px 2px rgba(11,37,69,.04), 0 6px 18px -10px rgba(11,37,69,.12);
  --sh-lift: 0 2px 6px rgba(11,37,69,.05), 0 26px 52px -26px rgba(11,37,69,.22);
}

/* — единый фирменный синий #0B2545 на всех страницах — */
:root{ --accent:#0B2545; --ink:#0B2545; --gold:#0B2545 }

/* — hero = РОВНО один экран: фиксированная высота 100vh + контент по центру,
     чтобы при первом скролле сразу начиналась следующая секция и фото
     не «продолжалось» под фолдом. cover подрезает фото под формат экрана. — */
.hero{height:100vh;min-height:0;padding:90px 0 56px;display:flex;align-items:center;overflow:hidden}
.hero>.wrap{width:100%}
.hero-bg{background-size:cover;background-repeat:no-repeat;background-position:center top}
/* Узкие окна: снимок ЦЕЛИКОМ (2560×1280 = 2:1 → высота ровно 50vw),
   текст правее орнамента и компактнее — как на внутренних страницах. */
@media(max-width:1400px){
  /* aspect-ratio, а не 50vw (vw включает полосу прокрутки → лишняя синяя полоска) */
  /* Отступы симметричны — текст ровно по центру снимка (как на внутренних страницах) */
  .hero{aspect-ratio:2/1;height:auto;min-height:0;padding:88px 0;display:flex;align-items:center}
  .hero-bg{background-size:100% auto;background-position:center top}
  .hero .wrap{padding-left:max(32px,12.5vw);padding-right:34px}
  .hero .display{font-size:clamp(23px,3.05vw,40px);line-height:1.14;max-width:20ch}
  .hero .eyebrow{font-size:11px;letter-spacing:.14em;margin-bottom:12px}
  .hero p.lead{font-size:clamp(13px,1.5vw,17px);line-height:1.5;margin-top:14px;max-width:44ch}
  /* компактные кнопки — блок гарантированно помещается в полосу и не задевает шапку */
  .hero-actions{margin-top:16px;gap:12px}
  .hero .btn{padding:12px 22px;font-size:14px}
}
/* Ниже 940px: текст ПОВЕРХ картинки (как на десктопе). cover заполняет блок,
   показываем тёмную левую часть кадра, сверху — затемняющая вуаль. */
@media(max-width:940px){
  .hero{aspect-ratio:auto;height:auto;min-height:500px;display:flex;align-items:center;padding:96px 0}
  /* Ориентир кадра — правее, чтобы был виден орёл (солнце, горы, здания) */
  .hero-bg{background-size:cover;background-position:82% center}
  .hero::after{content:"";position:absolute;inset:0;z-index:0;
    background:linear-gradient(103deg,rgba(8,24,46,.82) 0%,rgba(8,24,46,.55) 46%,rgba(8,24,46,.18) 100%)}
  .hero .wrap{padding-left:26px;padding-right:26px}
  .hero .display{font-size:clamp(27px,6.6vw,38px);line-height:1.14;max-width:20ch}
  .hero p.lead{font-size:clamp(15px,3.8vw,18px);line-height:1.5;max-width:46ch}
  .hero-actions{margin-top:22px}
}

/* — на тёмном фоне героя эйрбоу делаем золотым (оттенок орнамента на фоне) — */
.hero .eyebrow{color:#E5B563}
.hero .eyebrow::before{background:#E5B563}

/* — больше воздуха: премиум живёт в пространстве — */
.section{padding:138px 0}
.section-sm{padding:60px 0}

/* — заголовки увереннее — */
.h2{letter-spacing:-.015em;line-height:1.1}

/* — деликатная золотая засечка перед эйрбоу-надписью
     (inline-block, чтобы не ломать центрирование блоков) — */
.eyebrow::before{display:none}

/* — карточки услуг: left-selection bar + selection ring + иконка на hover — */
.card{position:relative;overflow:hidden;box-shadow:var(--sh-soft);transition:background .25s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.card::before{content:"";position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--ease)}
.card .ico{transition:background .3s var(--ease),color .3s var(--ease)}
.card:hover{background:rgba(11,37,69,.028);border-color:var(--accent);box-shadow:var(--sh-lift)}
.card:hover::before{transform:scaleY(1)}
.card:hover .ico{background:var(--accent);color:#fff}

/* — превью блога: мягкий подъём картинки — */
.post .thumb{box-shadow:var(--sh-soft)}
.post:hover .thumb{box-shadow:var(--sh-lift)}

/* — логотипы клиентов: всё в ОДНУ строку, по центру, все видны целиком — */
.client-row{flex-wrap:nowrap;overflow-x:auto;justify-content:center;gap:18px}
.client-logo{width:148px;height:64px}
.trust-title{margin-bottom:46px}

/* — кнопки: мягкий «дорогой» объём у основной, ghost — без тени — */
.btn{box-shadow:0 12px 30px -16px rgba(11,37,69,.45)}
.btn-ghost,.hero .btn-ghost{box-shadow:none}

/* — форма контактов: премиум-фокус с тёплым золотым кольцом — */
.fld input,.fld textarea,.fld select{border-radius:12px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.fld input:focus,.fld textarea:focus,.fld select:focus{box-shadow:0 0 0 3px rgba(11,37,69,.16)}

/* — деликатнее на мобайле — */
@media(max-width:680px){
  .section{padding:90px 0}
  .eyebrow::before{width:20px}
}