/* dao/static/css/main.css */

/* ===============================
   Base / Reset
   =============================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  padding-top:var(--nav-height,64px);
  padding-bottom: var(--footer-height, 48px);
  font-family:inherit;
  color:inherit;
  background:inherit;
  transition:opacity .18s ease;
}
/* Soft page transition */
body.x-fade-out{opacity:.15;filter:blur(2px);}

/* [ИЗМЕНЕНО] FIX 3: Блокировка скролла страницы при открытом чате */
html.lock,
body.lock {
  overflow: hidden;
  height: 100%; 
}

a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto}
button,input,textarea,select{font:inherit;color:inherit}
.container{width:min(100%,1120px);margin:0 auto;padding:0 1rem}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;padding:.5rem 1rem;border-radius:var(--radius-control,12px)}

/* ===============================
   Header / Navigation
   =============================== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000}

/* === [ИЗМЕНЕНИЕ 1] L-C-R макет для .nav-container === */
.nav-container{
    display:flex;
    align-items:center;
    justify-content: space-between; /* Лого слева, остальное справа */
    
    /* [ИСПРАВЛЕНО] 
       УДАЛЕНА СТРОКА 'min-height'. 
       Теперь высота шапки управляется ТОЛЬКО padding'ом.
    */
    
    /* [ИСПРАВЛЕНО] 
       Установлены минимальные отступы для ПК (0.25rem = ~4px). 
       Можете увеличить это значение.
    */
    padding: 0.1rem 1rem;
}

/* === [ИЗМЕНЕНИЕ 2] Стили для логотипа === */
.nav-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-brand__img {
  display: block;
  height: 32px; 
  width: auto;
}
/* === [КОНЕЦ ИЗМЕНЕНИЯ 2] === */


/* === [ИЗМЕНЕНИЕ 3] Блок .nav теперь центрирует контент === */
.nav{
    display: flex;
    flex-grow: 1; /* Занимает все центральное пространство */
    justify-content: center; /* Центрирует .nav__list */
    align-items: center;
    flex-wrap: nowrap; 
    gap: 1rem;
    position: relative;
}

/* 2. Ссылки (десктоп) */
.nav__list{
    display: flex;
    flex-wrap: nowrap; 
    justify-content: center;
    gap: 0.4rem 0.5rem;
    list-style:none;
    margin:0;
    padding:0;
}

.nav__item{display:flex}

.nav__link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.4rem .4rem;
    border-radius:var(--radius-pill,50px);
    font-size:.9rem;
    font-weight:600;
    line-height:1;
    border:1px solid transparent;
    transition: all .15s ease;
}

/* === [ИЗМЕНЕНИЕ 4] Новый блок для правых элементов ПК === */
.nav__actions-desktop {
  display: flex;
  align-items: center;
  flex-shrink: 0; /* Не сжиматься */
}

/* 3. Блок "Действия" (смена языка) */
.nav__actions {
    display: block; 
    flex-shrink: 0; 
    position: relative; 
}

/* Стили ЛЕЙАУТА для нового селектора */
.lang-selector__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    border: 0;
    background: transparent;
    padding: .4rem .7rem; 
    border-radius: var(--radius-pill, 999px);
}
.lang-selector__icon {
    font-size: 1rem; 
    line-height: 1;
    text-shadow: 0 0 0 var(--color-text);
}
.lang-selector__current {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1;
}
.lang-selector__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    padding: 0.5rem;
    z-index: 1300;
}
.lang-selector__menu[hidden] { 
    display: none; 
}
.lang-selector__item {
    display: block;
    padding: .6rem .8rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}


/* 4. Чип "Текущий раздел" (УДАЛЕН) */
.nav__current{
  display:none;
}

/* Header CTA (desktop) */
.button--cta-header{
  padding:.5rem 1.25rem;
  min-height:38px;
  font-size:.9rem;
  font-weight:700;
  border-radius:var(--radius-pill,999px);
  background:var(--color-primary);
  color:var(--cta-text,#fff);
  box-shadow:var(--button-shadow,0 10px 20px rgba(0,168,232,.2));
}
.button--cta-header:hover{filter:saturate(1.05) brightness(1.02)}
.button--cta-header:focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 2px var(--ring-strong,rgba(23,92,225,.35));
}


/* === [ИЗМЕНЕНИЕ 5] Адаптивное меню: Текстовая кнопка === */

/* 1. Стили для кнопки "Меню" (замена .nav__burger) */
.nav__menu-toggle {
  display: none; /* Скрыт по умолчанию */
  margin-left: auto; /* Прижимаем вправо */
  padding: .5rem .9rem;
  border: 1px solid var(--color-border);
  background: var(--surface);
  color: var(--color-text);
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  line-height: 1;
  font-size: 0.9rem;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.nav__menu-toggle:hover {
  background: var(--surface-elev);
}
.nav__menu-toggle[aria-expanded="true"] {
  background: var(--color-accent);
  color: var(--color-primary);
}


/* 2. Адаптация (880px - точка из theme.css) */
@media (max-width: 880px) {
  /* .nav-container остается space-between */
  .nav-container {
    /* [ИСПРАВЛЕНО] 
       Установлены минимальные отступы для МОБИЛЬНЫХ (0.25rem). 
       Можете увеличить это значение.
       Боковые отступы .75rem для отступа от краев.
    */
    padding: 0.1rem .35rem; 
  }
  
  /* [ИСПРАВЛЕНО] Скрываем .nav (ссылки) и .nav__actions-desktop (язык) */
  .nav {
    display: none;
  }
  .nav__actions-desktop {
    display: none;
  }

  /* [ИСПРАВЛЕНО] Показываем кнопку "Меню" */
  .nav__menu-toggle {
    display: inline-flex; 
  }
}

@media (min-width: 881px) {
  /* [ИСПРАВЛЕНО] Показываем элементы ПК */
  .nav {
    display: flex;
  }
  .nav__actions-desktop {
    display: flex;
  }
  
  /* [ИСПРАВЛЕНО] Скрываем кнопку "Меню" на ПК */
  .nav__menu-toggle {
    display: none;
  }
}
/* === [КОНЕЦ ИЗМЕНЕНИЯ 5] === */


/* ===============================
   Hero
   =============================== */
.hero{
  min-height: calc(100vh - var(--nav-height,64px));
  display:flex;
  align-items:flex-start;
  justify-content:center;
  background:transparent; /* не конфликтуем с фоном страницы */
  padding:0;
}
.hero--minimal{padding-top:.6rem}
/* Home-only: double the top padding */
#home.hero.hero--minimal{padding-top:1.2rem}
.hero--page{padding-top:clamp(3rem,7vw,5rem)}
.hero--tall{min-height: calc(100vh - var(--nav-height,64px))}

/* <<< ТУТ БЫЛО 100svh — СДЕЛАНО 100vh >>> */
/* Fix: Переключаем на min-height, чтобы не ломать мобилку */
#home.hero{min-height: calc(100vh - var(--nav-height,64px))}
#podpiska-hero.hero{min-height: calc(100vh - var(--nav-height,64px))}

.hero__inner{display:flex;flex-direction:column;gap:1rem;text-align:center;align-items:center}
.hero__inner--lg{gap:.6rem}

#home .hero__inner{min-height:100%;flex:1;padding-bottom: var(--hero-bottom-gap,24px)}
#podpiska-hero .hero__inner{min-height:100%;flex:1;padding-bottom: var(--hero-bottom-gap,24px)}

.hero__heading{margin:0;font-weight:800;font-size:clamp(2.3rem,6vw,3.4rem);line-height:1.08;letter-spacing:.01em}
.hero__lead{margin:0;max-width:38rem;font-size:1.05rem}
.hero__lead--wide{max-width:42rem}
.hero__buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.hero__buttons--stack{flex-direction:column;width:100%;align-items:center}
.hero__buttons--stack .button{width:min(var(--cta-max-width,480px),100%)}
.brand-top{display:grid;justify-items:center;margin-top:0;margin-bottom:0}
.brand-svg,.brand-png{width:108px;height:auto}
@media (min-width:900px){.brand-svg,.brand-png{width:128px}}
/* Home-only: double brand logo size */
#home .brand-svg, #home .brand-png{width:216px}
@media (min-width:900px){
  #home .brand-svg, #home .brand-png{width:256px}
}
.hero__title{margin:0 auto 0;max-width:32rem}
.hero__title-line{display:block;font-weight:800;font-size:clamp(2rem,6vw,3rem);line-height:1.08}
.hero__title-line--sub{font-size:clamp(1.8rem,5vw,2.6rem)}
.hero__bullets{list-style:none;margin:1.25rem auto 0;padding:0;display:grid;gap:.75rem;max-width:36rem;text-align:left}
.hero__bullet{display:flex;align-items:center;gap:.55rem;font-size:1rem;line-height:1.35}
.hero__bullet::before{
  content:"";width:18px;height:18px;flex:0 0 18px;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.285 6.708a1 1 0 0 1 0 1.414l-9.192 9.192a1 1 0 0 1-1.414 0L3.715 11.54a1 1 0 1 1 1.414-1.414l5.243 5.243 8.485-8.485a1 1 0 0 1 1.428-.176z"/></svg>') no-repeat center / contain;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.285 6.708a1 1 0 0 1 0 1.414l-9.192 9.192a1 1 0 0 1-1.414 0L3.715 11.54a1 1 0 1 1 1.414-1.414l5.243 5.243 8.485-8.485a1 1 0 0 1 1.428-.176z"/></svg>') no-repeat center / contain;
  background: var(--brand,#175ce1);
}

/* ===============================
   Sections / Cards / Lists
   =============================== */
.section-include{margin:clamp(2rem,5vw,3.75rem) auto;padding:clamp(2rem,5vw,3.5rem) 0}
.section-include .container{display:grid;gap:clamp(1.25rem,3vw,1.75rem)}
.section-title{margin:0;font-size:clamp(2rem,5vw,2.6rem);font-weight:700;text-align:left}
.section-include--tight{padding:clamp(1.5rem,4vw,2.5rem) 0}
.section-include--cta .hero__buttons{margin-top:1rem}
.section-include > .container > .note{margin:0;max-width:42rem;font-size:1.05rem}
.cards{display:grid;gap:clamp(1rem,3vw,1.5rem)}
.cards--grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{display:flex;flex-direction:column;gap:1rem;padding:1.75rem}
.card h3{margin:0}
.card p{margin:0}
.list{margin:0;padding-left:1.1rem;display:grid;gap:.35rem}
.list--columns{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;padding-left:0;list-style:none}
.list--columns li{flex:1 1 240px;margin:0}
.faq{border-radius:var(--radius-card,24px);padding:1rem 1.25rem;margin-bottom:.75rem}
.faq summary{cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}

/* ===============================
   Buttons & Chips
   =============================== */
.button{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.6rem;min-height:46px;
  font-weight:600;border:none;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.button--pill{border-radius:var(--radius-pill,999px)}
.button--lg{min-height:54px;font-size:1.02rem}
.button:disabled{opacity:.6;cursor:not-allowed}
.button:hover:not(:disabled){transform:translateY(-1px)}
.button--ghost,.button--outline{background:transparent}

/* ===============================
   Page-specific blocks
   =============================== */
.modules .cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.integration__grid{display:grid;gap:1.5rem}
@media (min-width:900px){.integration__grid{grid-template-columns:repeat(3,1fr)}}
.integration__step{border-radius:var(--radius-card,24px);padding:1.5rem}
.integration__step strong{display:block;margin-bottom:.45rem}
.confidence__list{display:grid;gap:.75rem;padding:0;list-style:none}
.confidence__item{border-radius:var(--radius-card,24px);padding:1.2rem 1.5rem;display:grid;gap:.25rem}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(1rem,3vw,1.5rem)}
.plan-card{display:flex;flex-direction:column;gap:.85rem;border-radius:var(--radius-card,24px);padding:1.75rem}
.plan-card .price{margin:0;font-size:1.8rem;font-weight:700}
.plan-card ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.plan-card footer{margin-top:auto}
.contact-grid{display:grid;gap:1rem;margin-top:1.5rem}
@media (min-width:720px){.contact-grid{grid-template-columns:repeat(3,1fr)}}
.contact-card{border-radius:var(--radius-card,24px);padding:1.5rem;display:grid;gap:.4rem}
.note{text-align:left;font-size:1rem}
.note--center{text-align:center}
.list--check{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.list--check li{display:flex;align-items:flex-start;gap:.5rem}
.list--check li::before{content:"";width:14px;height:14px;margin-top:.3rem;border-radius:50%;flex:0 0 14px;background: var(--brand,#175ce1)}

/* ===============================
   Utilities
   =============================== */
section[id]{scroll-margin-top:calc(var(--nav-height,64px) + 12px)}

/* ===== Desktop nav centering & tighter height (OLD BLOCK REMOVED) ===== */

/* Hover lift for interactive cards */
.card:hover,
.plan-card:hover,
.confidence__item:hover,
.integration__step:hover,
.contact-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-card,0 10px 25px rgba(0,134,184,.07));
  transition:transform .2s ease, box-shadow .2s ease;
}

@media (prefers-reduced-motion: reduce){
  .card:hover,
  .plan-card:hover,
  .confidence__item:hover,
  .integration__step:hover,
  .contact-card:hover{
    transform:none;
    box-shadow:var(--shadow-card,0 10px 25px rgba(0,134,184,.07));
  }
}