/* family · sections/hero.css
   B01 — hero: оверлей, фоновый слайдер, табы, инпут ИИ, бейдж метро */

/* ============ hero.css ============ */
.hero-overlay{background:linear-gradient(180deg,rgba(20,32,26,.5) 0%,rgba(20,32,26,.82) 80%,var(--pine) 100%);}
.hero-slide-bg{background:repeating-linear-gradient(45deg,#2A4A3C 0 16px,#234034 16px 32px);}
.hero-swiper{position:absolute;inset:0;z-index:0;}
.hero-swiper .swiper-slide{overflow:hidden;}
.hero-overlay{z-index:1;}
.hero-tab{font-size:.92rem;color:rgba(255,255,255,.68);cursor:pointer;transition:color .2s ease,border-color .2s ease;padding-bottom:.3rem;border-bottom:1px solid transparent;}
.hero-tab:hover{color:#fff;}
.hero-tab.is-active{color:#fff;border-bottom-color:var(--brass-light);}
/* тёмное стекло вместо белой SaaS-таблетки — вписано в фотографию, а не наклеено поверх */
.ai-input{backdrop-filter:blur(10px);background:rgba(20,32,26,.55);border:1px solid rgba(227,178,100,.3);}
.ai-input-field{color:#fff;}
/* Tailwind CDN не резолвит opacity-модификатор на CSS-переменной — задаём явной rgba, контраст ~4.8:1 на тёмном стекле */
.ai-input-field::placeholder{color:rgba(255,255,255,.68);}

/* факт-бейдж вместо мелкого tracked-лейбла над заголовком */
.hero-proof-chip{display:inline-flex;align-items:center;gap:.55rem;padding:.5rem 1rem .5rem .75rem;border-radius:999px;
  background:rgba(30,58,47,.55);backdrop-filter:blur(4px);border:1px solid rgba(227,178,100,.4);
  color:#fff;font-size:.85rem;line-height:1.2;}
.hero-proof-chip svg{flex:none;color:var(--brass-light);}

/* доминирующий заголовок: один фокус, без остатка бренд-префикса */
.hero-title{font-size:clamp(2.75rem,4.2vw + 1.2rem,4.75rem);line-height:.98;letter-spacing:-.02em;}

/* точка-разделитель между словами в заголовке — кружок кодом, не символ:
   vertical-align:middle центрует его именно по x-height строчных букв */
.hero-title .dot-sep{display:inline-block;width:.22em;height:.22em;border-radius:50%;
  background:currentColor;vertical-align:middle;margin:0 .22em;}

/* цена как отдельный стат, а не хвост предложения */
.hero-price{font-family:'Bitter',serif;font-weight:600;font-size:clamp(1.75rem,1.4vw + 1.35rem,2.35rem);
  line-height:1;color:var(--brass-light);}
.hero-price-note{color:rgba(255,255,255,.78);font-size:.95rem;}
.hero-price-note.has-note-logo{display:inline-flex;align-items:center;gap:.5rem;}
.hero-price-note.has-note-logo::after{content:'';flex:none;width:100px;height:20px;
  background-image:var(--note-logo);background-size:contain;background-repeat:no-repeat;background-position:center;}

/* тихая вторая CTA — контраст к латунной первичной, тот же тап-таргет что у .btn */
.btn.hero-cta-quiet{background:transparent;color:rgba(255,255,255,.82);border:1px solid transparent;}
.btn.hero-cta-quiet:hover{color:#fff;}


/* ---- animate: один поставленный вход героя ----
   Фотография на месте сразу, поднимается только текст: плашка → заголовок → цена → поиск → кнопки → вкладки.
   Это единственная постановочная анимация на странице; остальные блоки просто проявляются при прокрутке. */
#heroInner>*{animation:hero-rise .6s var(--ease-out-quart) both;}
#heroInner>*:nth-child(1){animation-delay:.06s;}
#heroInner>*:nth-child(2){animation-delay:.14s;}
#heroInner>*:nth-child(3){animation-delay:.22s;}
#heroInner>*:nth-child(4){animation-delay:.30s;}
#heroInner>*:nth-child(5){animation-delay:.38s;}
#heroInner>*:nth-child(6){animation-delay:.46s;}

@media (prefers-reduced-motion: reduce){
  #heroInner>*{animation:none;}
}