/* KAR SYSTEM — хаб kar.systems на шаблоне главного сайта Марины (подключается после style.css, graphite.css, system3d.css, supply.css).
   Свой здесь только экран «Направления»: тёмные карточки продуктов по её компоненту (.su-chat / .pn-dark: графит, радиус 14,
   полоса 44 px с плашкой «⧉ KAR …» — знак мятным + Unbounded 700, кружок «AI»), чипы салат/глубокий, кнопка радиус 0. */
.hd{background-color:var(--graphite);color:var(--sand);padding:var(--sp-t) var(--pad) var(--sp);border-bottom:1px solid var(--line-dk);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 .5H100M.5 0V100' stroke='%23E6E3E0' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");background-position:-1px -1px}
.hd .su-lead{max-width:60ch}
.hd-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:44px}
.hd-card{grid-column:span 2;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:#2B2829;color:var(--sand);
  box-shadow:0 0 0 1px var(--line-dk),0 40px 80px -40px rgba(0,0,0,.7);transition:box-shadow .4s,transform .4s}
.hd-card:nth-child(4),.hd-card:nth-child(5){grid-column:span 3}
.hd-card:hover{box-shadow:0 0 0 1.5px var(--mint),0 40px 80px -36px rgba(0,0,0,.8);transform:translateY(-3px)}
.hd-card .pn-bar{background:#221F20;border-bottom:1px solid var(--line-dk)}
.hd-card .pn-bar .aib{margin-left:auto}
.hd-body{flex:1;display:flex;flex-direction:column;gap:14px;padding:20px 20px 20px}
.hd-role{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.hd-text{font:500 15px/1.55 var(--f-text);color:var(--sand)}
.hd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.hd-chips .chip{font-style:normal}
.hd-go{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line-dk)}
.hd-go .mono{font-size:11px;letter-spacing:.06em;color:var(--grey)}
.hd-go .btn{min-width:180px;border-color:rgba(230,227,224,.45);color:var(--sand)}
.hd-card:hover .hd-go .btn{background:var(--mint);border-color:var(--mint);color:var(--graphite)}
.hd-card:hover .hd-go .btn .arr{transform:translateX(4px)}
.hd-shop{background:#2F3B35}
.hd-shop .hd-role{color:var(--salad)}

/* форма связи: поля, которых нет в её su6-form (select, textarea, согласие) */
.hub-form select,.hub-form textarea{font:500 15px var(--f-text);color:var(--sand);background:transparent;border:0;border-bottom:1px solid rgba(230,227,224,.3);border-radius:0;padding:8px 0;outline:none;width:100%;resize:vertical}
.hub-form select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2379EFB3' stroke-width='1.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;padding-right:20px}
.hub-form select option{color:var(--graphite);background:var(--sand)}
.hub-form select:focus,.hub-form textarea:focus{border-bottom-color:var(--mint)}
.hub-form textarea::placeholder{color:rgba(177,180,188,.5)}
.hub-form input{width:100%;min-width:0}
.hub-chk{flex-direction:row!important;align-items:flex-start;gap:10px!important;font-size:12px;line-height:1.5;color:var(--grey)}
.hub-chk input{width:16px!important;height:16px;flex:none;margin:2px 0 0;accent-color:var(--mint)}
.hub-chk a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.hub-form .kar-send{color:var(--sand)}
.su6 .su6-q{margin-top:30px}
section[id]{scroll-margin-top:var(--hdr)}

/* подвал: три колонки (связь, система, решения) и строка языков */
.hub .s5-grid{grid-template-columns:repeat(3,1fr)}
.s5-sol a{font-size:14px!important;color:var(--grey)!important}
.s5-sol a:hover{color:var(--mint)!important}
.s5-lng{display:flex;gap:10px;margin:8px 0 0;font-size:13px;letter-spacing:.06em;color:var(--grey)}
.s5-lng b{font-weight:500;color:var(--mint)}
.s5-lng a{display:inline!important;width:auto!important;font:inherit!important;color:var(--grey)!important}
.s5-lng a:hover{color:var(--mint)!important}
.s5-lng i{font-style:normal;color:var(--steel)}
.s5-note{max-width:90ch}

@media (max-width:1100px){
  .hd-grid{grid-template-columns:1fr 1fr}
  .hd-card,.hd-card:nth-child(4),.hd-card:nth-child(5){grid-column:span 1}
  .hd-card:nth-child(5){grid-column:1 / -1}
}
@media (max-width:720px){
  /* её .cells в graphite.css — три колонки для «пиксельных» фото; у контурных иллюстраций на телефоне — одна */
  .hub .cells{grid-template-columns:1fr}
  .hub .cell{min-width:0}
  .hd-grid{grid-template-columns:1fr;margin-top:30px}
  .hd-card:nth-child(5){grid-column:auto}
  .hd-go .btn{width:100%}
  .hub .s5-grid{grid-template-columns:1fr}
  .hub .s5-col+.s5-col{padding-left:0;border-left:0}
}