/* ============================================================================
   marketing.css — общий каркас маркетинговых страниц нового дизайна 4gen
   (пакет A). Только то, что повторяется между страницами; постраничные стили
   остаются в шаблонах конкретных страниц.
   Источник: models-catalog.html (канон), сверено с index/pricing/contacts/
   assistants/model. Требует site-theme.css (токены, кнопки, модалки).
   ========================================================================== */

/* ===================== SITE NAV ===================== */
nav.site{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--border);}
nav.site .inner{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1180px; margin:0 auto;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Unbounded'; font-weight:600; font-size:17px; text-decoration:none; color:inherit;}
.nav-links{display:flex; align-items:center; gap:28px; font-size:14px; color:var(--muted);}
.nav-links a:hover{color:var(--ink);}
.nav-links a.nav-highlight{color:var(--red); font-weight:600;}
.mobile-menu a.nav-highlight{color:var(--red); font-weight:600;}
/* акцент на входе в продукт: AI Studio — пилюля в фирменном стиле (контурная, чтобы не спорить с основным CTA) */
.nav-links a.nav-studio{padding:7px 14px; border-radius:100px; border:1px solid color-mix(in srgb, var(--red) 40%, transparent); color:var(--red); font-weight:600;}
.nav-links a.nav-studio:hover{background:color-mix(in srgb, var(--red) 8%, transparent); color:var(--red);}
.mobile-menu a.nav-studio{color:var(--red); font-weight:600;}
/* текущий раздел в меню — нейтральный жирный (красный закреплён за .nav-studio) */
.nav-links a.nav-active{color:var(--ink); font-weight:600;}
.mobile-menu a.nav-active{color:var(--ink); font-weight:600;}
.nav-cta{display:flex; align-items:center; gap:14px;}
.theme-btn{
  width:36px; height:36px; border-radius:100px; border:1px solid var(--border-strong);
  background:transparent; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.theme-btn svg{width:16px; height:16px;}
.theme-btn .moon{display:none;}
[data-theme="dark"] .theme-btn .sun{display:none;}
[data-theme="dark"] .theme-btn .moon{display:block;}

.menu-btn{display:none; width:36px; height:36px; border-radius:100px; border:1px solid var(--border-strong); background:transparent; color:var(--ink); align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.menu-btn svg{width:18px; height:18px;}
.menu-btn .menu-close{display:none;}
.menu-btn.open .menu-open{display:none;}
.menu-btn.open .menu-close{display:block;}
.mobile-menu{display:none; flex-direction:column; padding:8px 32px 22px; border-top:1px solid var(--border);}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:13px 2px; font-size:15px; color:var(--ink); border-bottom:1px solid var(--border);}
.mobile-menu .mm-actions{display:flex; gap:10px; margin-top:16px;}
.mobile-menu .mm-actions .btn{flex:1; white-space:normal;}
@media (min-width:901px){ .mobile-menu{display:none !important;} }

/* Авторизованный вариант шапки — .user-chip из макета v2 cabinet.html:
   аватар-градиент с первой буквой email + сам email, клик ведёт в кабинет. */
.user-chip{display:flex; align-items:center; gap:9px; padding:5px 14px 5px 5px; border-radius:100px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:500; transition:border-color .15s ease;}
.user-chip:hover{border-color:var(--border-strong);}
.user-avatar{width:28px; height:28px; border-radius:50%; background-image:linear-gradient(120deg, var(--red), var(--orange)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Unbounded'; font-weight:600; font-size:12px; flex-shrink:0;}
/* страховка на длинные email — в макете нет (там короткий gen@gen.com) */
.user-chip .user-email{max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ===================== PAGE WRAP / HEADER =====================
   Расхождение макетов: верхний отступ .page-wrap отличается по страницам
   (44px в models-catalog, 30px в pricing/contacts/assistants, 36px в model).
   Взят канон models-catalog; страницы при желании переопределяют у себя. */
.page-wrap{max-width:1100px; margin:0 auto; padding:44px 32px 90px;}

.page-header{margin-bottom:26px;}
.page-header h1{font-size:clamp(21px,3vw,27px); margin-bottom:6px;}
.page-header p{color:var(--muted); font-size:13.5px; max-width:520px;}

/* ===================== SEARCH ===================== */
.search-box{position:relative; margin-bottom:22px;}
.search-box svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted-2);}
.search-box input{
  width:100%; padding:12px 14px 12px 42px; border-radius:12px; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--ink); font-size:14px;
}
.search-box input:focus{outline:2px solid var(--red); outline-offset:-1px;}

/* ===================== CATEGORY TABS ===================== */
.cat-tabs{display:flex; gap:6px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border);}
.cat-tab{padding:9px 17px; border-radius:100px; border:1px solid var(--border); background:var(--bg); color:var(--muted); font-size:13.5px; font-weight:500;}
.cat-tab:hover{border-color:var(--border-strong);}
.cat-tab.active{border-color:transparent; background-image:linear-gradient(120deg, var(--red), var(--orange)); color:#fff;}

/* ===================== PROVIDER FILTER / SECTIONS ===================== */
.provider-filter{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px;}
.provider-chip{display:flex; align-items:center; gap:7px; padding:7px 13px; border-radius:100px; border:1px solid var(--border); background:var(--bg); color:var(--muted); font-size:12.5px; font-weight:500;}
.provider-chip:hover{border-color:var(--border-strong);}
.provider-chip .pdot{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
.provider-chip.active{border-color:var(--border-strong); background:var(--surface-2); color:var(--ink);}

.provider-section{margin-bottom:34px;}
.provider-section-head{display:flex; align-items:baseline; gap:9px; margin-bottom:14px;}
.provider-section-head h2{font-size:14.5px; font-weight:600;}
.provider-section-head .psh-count{font-family:'JetBrains Mono'; font-size:11px; color:var(--muted);}

/* ===================== MODEL CARDS =====================
   Общие для models-catalog / pricing / model. Расхождение макетов: в pricing
   у .model-card нет position:relative и cursor:pointer — взят канон
   models-catalog (совпадает с model.html). */
.model-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:12px;}
.model-card{
  position:relative; padding:20px; border-radius:16px; border:1px solid var(--border); background:var(--surface);
  cursor:pointer; transition:border-color .15s ease; display:flex; flex-direction:column; gap:13px;
}
.model-card:hover{border-color:var(--border-strong);}
.mc-top{display:flex; align-items:flex-start; gap:12px;}
.mc-badge{
  width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-family:'Unbounded'; font-weight:600; font-size:15px; color:#fff;
}
.mc-name-row{flex:1; min-width:0; padding-top:3px;}
.mc-name-row h3{font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:7px; flex-wrap:wrap;}
.mc-desc{font-size:12.5px; color:var(--muted); line-height:1.55; flex:1;}
.mc-bottom{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.mc-tag{font-family:'JetBrains Mono'; font-size:10.5px; color:var(--muted); border:1px solid var(--border); padding:4px 9px; border-radius:100px; white-space:nowrap;}
.model-info-link{position:relative; font-size:12px; color:var(--red); font-weight:500; display:flex; align-items:center; gap:4px; flex-shrink:0;}
.model-info-link::after{content:''; position:absolute; inset:-13px -8px;}
.model-info-link:hover{opacity:.75;}
.model-info-link svg{width:11px; height:11px;}

.catalog-empty{text-align:center; padding:70px 20px; color:var(--muted); font-size:13.5px;}

/* ===================== PAGE FOOTER ===================== */
/* Футер — полноширинная полоса с внутренним контейнером той же ширины, что
   .page-wrap: его можно рендерить из base_site без внешней обёртки. */
.page-footer{border-top:1px solid var(--border); margin-top:48px;}
.page-footer .pf-inner{max-width:1100px; margin:0 auto; padding:26px 32px 30px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
.page-footer .pf-brand{display:flex; align-items:center; gap:10px;}
.page-footer .pf-tagline{font-size:12.5px; color:var(--muted); max-width:280px;}
.page-footer .pf-links{display:flex; gap:22px; font-size:13px; color:var(--muted); flex-wrap:wrap;}
.page-footer .pf-links a:hover{color:var(--muted);}
.page-footer .pf-copy{font-size:12.5px; color:var(--muted);}

/* ===================== LEGACY PAGES =====================
   Секция для «перекрашиваемых» старых страниц (user/, offer/ и т.п.):
   контентная колонка на токенах нового дизайна. В макетах её нет — базовая
   скромная вёрстка, добавлена в рамках пакета A. */
.legacy-page{max-width:900px; margin:0 auto; padding:44px 32px 90px;}
.legacy-page h1{font-size:clamp(21px,3vw,27px); margin-bottom:14px;}
.legacy-page h2{font-size:18px; margin:26px 0 10px;}
.legacy-page h3{font-size:15px; margin:20px 0 8px;}
.legacy-page p{margin-bottom:12px;}
.legacy-page p, .legacy-page li{font-size:14px; color:var(--ink);}
.legacy-page ul, .legacy-page ol{margin:0 0 14px 20px;}
.legacy-page a{color:var(--red);}
.legacy-page a:hover{opacity:.8;}
.legacy-page hr{border:none; border-top:1px solid var(--border); margin:24px 0;}

.legacy-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px 24px; margin-bottom:16px;}
.legacy-card h2:first-child, .legacy-card h3:first-child{margin-top:0;}

.legacy-page table{width:100%; border-collapse:collapse; margin-bottom:16px; font-size:13.5px;}
.legacy-page th{font-family:'JetBrains Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:500; text-align:left;}
.legacy-page th, .legacy-page td{padding:10px 12px; border-bottom:1px solid var(--border);}
.legacy-page tr:hover td{background:var(--surface);}

.legacy-page label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px;}
.legacy-page input[type="text"], .legacy-page input[type="email"], .legacy-page input[type="password"],
.legacy-page input[type="number"], .legacy-page textarea, .legacy-page select{
  width:100%; background:var(--surface); border:1px solid var(--border-strong); border-radius:8px;
  padding:11px 13px; color:var(--ink); font-size:14px; margin-bottom:14px;
}
.legacy-page input:focus, .legacy-page textarea:focus, .legacy-page select:focus{outline:2px solid var(--red); outline-offset:1px;}

/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  .nav-links{display:none;}
  .menu-btn{display:flex;}
}
@media (max-width:860px){
  .page-wrap{padding:34px 20px 70px;}
  .legacy-page{padding:34px 20px 70px;}
  .model-grid{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .cat-tabs{overflow-x:auto; padding-bottom:14px;}
  .provider-filter{overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px;}
  .provider-chip{white-space:nowrap;}
  .page-footer .pf-inner{flex-direction:column; align-items:flex-start; padding:26px 20px 30px;}
}
@media (max-width:360px){
  .btn.nav-cta-btn{padding:10px 14px;}
  .btn.nav-cta-btn .cta-extra{display:none;}
}
@media (max-width:480px){
  nav.site .inner{padding:14px 18px;}
  .nav-cta{gap:8px;}
  .nav-signin{display:none;}
  .user-chip{padding:5px; gap:0;}
  .user-email{display:none;}
  .mobile-menu{padding:8px 18px 20px;}
}
/* мобильные зоны нажатия (макет v2): иконки шапки не меньше 40px,
   ссылки футера с вертикальным отступом без сдвига вёрстки */
@media (max-width:768px){
  .theme-btn, .menu-btn{width:40px; height:40px;}
  .pf-links a{display:inline-block; padding:7px 6px; margin:0 -6px;}
}