/* ===== 7k6836w.team — greenhouse (namespace .gh), hue 187 + 337 ==============
   Перекраска банковского шаблона greenhouse под 7К: базовый hue 187 (циан),
   второй акцент 337 по сплит-комплементарной схеме (+150 градусов).
   Шрифты: Pangolin (дисплей, кириллица есть, только вес 400) + Golos Text (текст).
   Pangolin отдаётся Google Fonts единственным весом, поэтому все заголовки идут
   на 400, а «жирные» микро-подписи и кнопки переведены на Golos Text 700 - 800:
   иначе браузер синтезирует фальшивый bold и рукописный контур плывёт.
   Порядок блоков и парадигма — как в шапке greenhouse.css банка.
   ============================================================================ */

/* @palette:start */
:root{
  --gh-h:  187;  /* базовый hue сайта */
  --gh-h2: 337;  /* сплит-комплементарный, +150 */
}
/* @palette:end */

:root{
  --gh-fd: "Pangolin", system-ui, "Segoe UI", Arial, sans-serif;
  --gh-fb: "Golos Text", system-ui, "Segoe UI", Arial, sans-serif;

  --gh-bg:     hsl(var(--gh-h) 16% 7%);
  --gh-bg2:    hsl(var(--gh-h) 14% 10%);
  --gh-panel:  hsl(var(--gh-h) 13% 13%);
  --gh-panel2: hsl(var(--gh-h) 13% 17%);
  --gh-line:   hsl(var(--gh-h) 12% 25%);
  --gh-txt:    hsl(var(--gh-h) 10% 94%);
  --gh-mut:    hsl(var(--gh-h)  9% 72%);
  --gh-acc:    hsl(var(--gh-h) 74% 60%);
  --gh-acc-d:  hsl(var(--gh-h) 66% 40%);
  --gh-acc2:   hsl(var(--gh-h2) 68% 68%);
  --gh-glass:  hsl(var(--gh-h) 45% 82% / .11);
  --gh-glass2: hsl(var(--gh-h2) 45% 82% / .07);
  --gh-r: 4px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.gh{
  margin:0;
  background:
    radial-gradient(1100px 520px at 12% -6%, hsl(var(--gh-h) 40% 24% / .38), transparent 62%),
    radial-gradient(900px 460px at 92% 4%, hsl(var(--gh-h2) 40% 24% / .24), transparent 60%),
    var(--gh-bg);
  color:var(--gh-txt);
  font-family:var(--gh-fb);
  font-size:17.5px;
  line-height:1.62;
  overflow-x:hidden;
}
.gh a{color:var(--gh-acc);text-decoration:none}
.gh a:hover{text-decoration:underline}
.gh p{margin:0 0 12px}
.gh h1,.gh h2,.gh h3{font-family:var(--gh-fd);font-weight:400;line-height:1.2;letter-spacing:0;margin:0 0 12px}
.gh h2{font-size:30px}
.gh h3{font-size:20px}
.gh-em{color:var(--gh-acc);font-weight:600}
.gh-em2{color:var(--gh-acc2);font-weight:600}
.gh-num{font-family:var(--gh-fd);font-weight:400;font-variant-numeric:tabular-nums}

/* ---------- 1. верхняя балка рамы ---------- */
.ghbar{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg, hsl(var(--gh-h) 16% 9% / .96), hsl(var(--gh-h) 16% 8% / .90));
  border-bottom:1px solid var(--gh-line);
  backdrop-filter:blur(7px);
}
.ghbar-in{
  max-width:1180px;margin:0 auto;padding:9px 18px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.ghbrand{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--gh-fd);font-weight:400;font-size:21px;letter-spacing:.01em;
}
.ghbrand-leaf{
  width:18px;height:18px;flex:0 0 18px;
  background:linear-gradient(140deg,var(--gh-acc),var(--gh-acc2));
  border-radius:0 100% 0 100%;
  transform:rotate(-12deg);
}
.ghbar-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--gh-mut);letter-spacing:.06em;text-transform:uppercase}
.ghbar-meta i{font-style:normal;color:var(--gh-txt);font-weight:700}
.ghbar-cta{
  margin-left:auto;
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  background:var(--gh-acc);color:hsl(var(--gh-h) 40% 7%)!important;
  font-weight:800;font-size:14px;letter-spacing:.03em;
  border-radius:var(--gh-r);
}
.ghbar-cta:hover{text-decoration:none;background:hsl(var(--gh-h) 80% 68%)}

.gh-wrap{max-width:1180px;margin:0 auto;padding:0 18px 40px}

/* ---------- 2. первый экран под двускатной крышей ---------- */
.ghhero{position:relative;margin:22px 0 0;padding:150px 0 0}
.ghglass{
  position:absolute;left:0;right:0;top:0;height:150px;pointer-events:none;
  clip-path:polygon(0 100%, 50% 0, 100% 100%);
  background:
    repeating-linear-gradient(90deg, transparent 0 62px, hsl(var(--gh-h) 14% 34%) 62px 64px),
    linear-gradient(180deg, var(--gh-glass) 0%, var(--gh-glass2) 55%, transparent 100%),
    linear-gradient(180deg, hsl(var(--gh-h) 22% 16%), hsl(var(--gh-h) 18% 11%));
  border-bottom:2px solid var(--gh-line);
}
.ghglass::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(102deg, transparent 26%, hsl(0 0% 100% / .10) 38%, transparent 49%,
                              transparent 62%, hsl(0 0% 100% / .06) 71%, transparent 80%);
}
.ghglass::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;
  background:linear-gradient(180deg,var(--gh-acc),hsl(var(--gh-h) 14% 30%));
}
.ghhero-in{
  position:relative;
  background:linear-gradient(180deg, hsl(var(--gh-h) 14% 12%), hsl(var(--gh-h) 14% 9%));
  border:1px solid var(--gh-line);border-top:none;
  padding:26px 26px 24px;
}
.gheyebrow{
  font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gh-acc2);margin:0 0 10px;
}
.ghh1{font-size:46px;margin:0 0 14px;max-width:20ch}
.ghlead{font-size:19px;color:var(--gh-mut);max-width:74ch;margin:0 0 18px}
.ghacts{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 20px}
.gh .ghbtn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 26px;border-radius:var(--gh-r);
  font-weight:800;font-size:16px;letter-spacing:.02em;
  border:1px solid var(--gh-line);color:var(--gh-txt);
  background:var(--gh-panel2);
}
.gh .ghbtn:hover{text-decoration:none;border-color:var(--gh-acc)}
.gh .ghbtn--main{
  /* ЛОВУШКА банка: .gh a (0-1-1) перебивает .ghbtn (0-1-0) и красит надпись
     в акцентный циан поверх акцентного градиента. Селектор держим на .gh .ghbtn,
     цвет текста — почти чёрный, оба стопа градиента светлые. */
  background:linear-gradient(140deg, hsl(var(--gh-h) 86% 70%), hsl(var(--gh-h) 78% 58%));
  border-color:transparent;color:hsl(var(--gh-h) 60% 7%);
  box-shadow:0 0 0 1px hsl(var(--gh-h) 74% 60% / .5), 0 10px 26px hsl(var(--gh-h) 74% 30% / .35);
}
.gh .ghbtn--main:hover{filter:brightness(1.07)}
.ghkpi{
  list-style:none;margin:0;padding:0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
  background:var(--gh-line);border:1px solid var(--gh-line);
}
.ghkpi li{background:hsl(var(--gh-h) 14% 11%);padding:13px 15px}
.ghkpi span{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gh-mut)}
.ghkpi .gh-num{display:block;font-size:28px;color:var(--gh-acc);margin-top:2px}

/* ---------- 3. поливочный ряд-разделитель ---------- */
.ghdrip{
  position:relative;height:26px;margin:26px 0 6px;
  display:flex;align-items:center;gap:0;
}
.ghdrip::before{
  content:"";position:absolute;left:0;right:0;top:9px;height:5px;
  background:linear-gradient(180deg, var(--gh-panel2), hsl(var(--gh-h) 12% 9%));
  border-top:1px solid var(--gh-line);border-bottom:1px solid hsl(var(--gh-h) 12% 6%);
}
.ghdrip i{position:relative;flex:1 1 0;min-width:0;height:26px}
.ghdrip i::before{
  content:"";position:absolute;left:50%;top:14px;width:3px;height:6px;margin-left:-1.5px;
  background:hsl(var(--gh-h) 12% 32%);
}
.ghdrip i::after{
  content:"";position:absolute;left:50%;top:20px;width:5px;height:6px;margin-left:-2.5px;
  border-radius:50% 50% 50% 50% / 70% 70% 30% 30%;
  background:var(--gh-acc2);opacity:.75;
}
.ghdrip-l{
  position:absolute;right:0;top:-6px;font-weight:700;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:hsl(var(--gh-h) 9% 52%);background:var(--gh-bg);padding:0 6px;
}

/* ---------- 4. секция ---------- */
.ghbay{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0;margin:0 0 26px}
.ghsensors{
  min-width:0;display:flex;flex-direction:column;gap:8px;align-items:stretch;
  padding:34px 12px 0 0;
}
.ghsens{
  display:block;border:1px solid var(--gh-line);background:hsl(var(--gh-h) 14% 10%);
  padding:7px 8px;text-align:center;
}
.ghsens-v{display:block;font-family:var(--gh-fd);font-weight:400;font-size:17px;color:var(--gh-acc2);font-style:normal}
.ghsens-l{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gh-mut);font-style:normal}
.ghbayno{
  display:block;font-family:var(--gh-fd);font-weight:400;font-size:34px;
  color:hsl(var(--gh-h) 12% 30%);text-align:center;line-height:1;padding-top:4px;
}
.ghbody{
  min-width:0;
  background:linear-gradient(180deg, hsl(var(--gh-h) 13% 11%), hsl(var(--gh-h) 13% 9%));
  border:1px solid var(--gh-line);border-top:none;
  padding:0 24px 24px;
}
.ghroof{
  position:relative;height:30px;margin:0 -24px 18px;
  clip-path:polygon(0 100%, 7% 0, 93% 0, 100% 100%);
  background:
    repeating-linear-gradient(90deg, transparent 0 54px, hsl(var(--gh-h) 14% 32%) 54px 56px),
    linear-gradient(180deg, var(--gh-glass), transparent 78%),
    linear-gradient(180deg, hsl(var(--gh-h) 20% 15%), hsl(var(--gh-h) 16% 11%));
}
.ghroof::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, transparent 34%, hsl(0 0% 100% / .09) 44%, transparent 54%);
}
.ghtag{
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gh-acc);margin:0 0 8px;
}

/* ---------- 5. стеллаж вместо карточек ---------- */
.ghrack{position:relative;margin:18px 0 6px;padding:0 12px}
.ghrack::before,.ghrack::after{
  content:"";position:absolute;top:-4px;bottom:-4px;width:7px;
  background:linear-gradient(90deg, var(--gh-panel2), hsl(var(--gh-h) 12% 9%));
  border:1px solid var(--gh-line);
}
.ghrack::before{left:0}
.ghrack::after{right:0}
.ghshelf{
  position:relative;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  padding:14px 10px 20px;
}
.ghshelf::after{
  content:"";position:absolute;left:-6px;right:-6px;bottom:2px;height:6px;
  background:linear-gradient(180deg, var(--gh-acc-d), hsl(var(--gh-h) 18% 14%));
  box-shadow:0 5px 12px hsl(var(--gh-h) 40% 4% / .55);
}
.ghshelf-tag{
  position:absolute;right:10px;bottom:10px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:hsl(var(--gh-h) 9% 54%);
}
.ghpot{
  min-width:0;background:hsl(var(--gh-h) 13% 13%);
  border:1px solid var(--gh-line);border-bottom:3px solid hsl(var(--gh-h) 30% 26%);
  padding:13px 14px 14px;
}
.ghpot h3{margin:0 0 6px;font-size:18px}
.ghpot p{margin:0;font-size:15.5px;color:var(--gh-mut)}
.ghpot-meta{
  display:flex;gap:10px;flex-wrap:wrap;margin:9px 0 0;
  font-size:12px;font-weight:700;letter-spacing:.05em;
}
.ghpot-meta span{
  border:1px solid var(--gh-line);padding:2px 7px;color:var(--gh-acc2);
  background:hsl(var(--gh-h) 14% 10%);
}

/* ---------- 6. таблицы ---------- */
.ghtable-wrap{min-width:0;overflow-x:auto;border:1px solid var(--gh-line);margin:16px 0}
.ghtable{border-collapse:collapse;width:100%;min-width:560px;font-size:15.5px}
.ghtable th,.ghtable td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--gh-line)}
.ghtable th{
  background:hsl(var(--gh-h) 14% 14%);font-weight:800;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gh-mut);
}
.ghtable tr:last-child td{border-bottom:none}
.ghtable td:first-child{color:var(--gh-txt);font-weight:700}

/* ---------- 7. лестница лояльности ---------- */
.ghsteps{display:grid;gap:8px;margin:16px 0 6px}
.ghstep{
  display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:14px;align-items:center;
  background:hsl(var(--gh-h) 13% 12%);border:1px solid var(--gh-line);
  border-left:4px solid var(--gh-acc);padding:11px 14px;
}
.ghstep-n{min-width:0}
.ghstep-n em{display:block;font-style:normal;font-family:var(--gh-fd);font-weight:400;font-size:20px}
.ghstep-n span{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gh-mut)}
.ghstep-b{min-width:0}
.ghstep-b p{margin:0;font-size:15.5px;color:var(--gh-mut)}
.ghstep-bar{
  display:block;
  height:7px;margin:7px 0 0;background:hsl(var(--gh-h) 14% 8%);border:1px solid var(--gh-line);
}
.ghstep-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gh-acc-d),var(--gh-acc))}

/* ---------- 8. парные строки «инструмент — диапазон» ---------- */
.ghlevers{
  display:grid;gap:0;margin:16px 0;background:hsl(var(--gh-h) 13% 11%);
  border:1px solid var(--gh-line);
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
}
.ghlever{
  background:hsl(var(--gh-h) 13% 11%);padding:12px 15px;min-width:0;
  box-shadow:inset -1px 0 0 var(--gh-line), inset 0 -1px 0 var(--gh-line);
}
.ghlever em{
  display:block;font-style:normal;font-family:var(--gh-fd);font-weight:400;font-size:17px;color:var(--gh-acc2);
}
.ghlever span{display:block;font-size:15px;color:var(--gh-mut);margin-top:3px}

/* ---------- 9. отзывы ---------- */
.ghquotes{
  display:grid;gap:12px;margin:16px 0 4px;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
}
.ghquote{
  min-width:0;background:hsl(var(--gh-h) 13% 12%);border:1px solid var(--gh-line);
  border-top:3px solid var(--gh-acc2);padding:14px 15px;
}
.ghquote p{margin:0 0 9px;font-size:15.5px}
.ghquote cite{
  display:block;font-style:normal;font-size:12.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gh-mut);
}

/* ---------- 10. FAQ ---------- */
.ghqa{display:grid;gap:8px;margin:16px 0 4px}
.ghq{background:hsl(var(--gh-h) 13% 12%);border:1px solid var(--gh-line);padding:13px 16px}
.ghq h3{margin:0 0 6px;font-size:18px;color:var(--gh-txt)}
.ghq p{margin:0;font-size:15.5px;color:var(--gh-mut)}

/* ---------- 11. заметка автора + подвал ---------- */
.ghnote{
  background:hsl(var(--gh-h) 13% 12%);border:1px solid var(--gh-line);
  border-left:4px solid var(--gh-acc2);padding:16px 18px;margin:16px 0 4px;
}
.ghnote p{font-size:16px}
.ghnote-sig{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--gh-mut)}
.ghfoot{
  border-top:2px solid var(--gh-line);
  background:linear-gradient(180deg, hsl(var(--gh-h) 16% 9%), hsl(var(--gh-h) 16% 6%));
  padding:26px 0 34px;
}
.ghfoot-in{max-width:1180px;margin:0 auto;padding:0 18px;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));font-size:14.5px;color:var(--gh-mut)}
.ghfoot h3{font-size:14px;font-family:var(--gh-fb);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gh-txt)}
.ghfoot-age{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:30px;
  border:1px solid var(--gh-acc);color:var(--gh-acc);font-weight:800;
  padding:0 9px;margin-right:8px;
}

/* ---------- 12. мобильный режим ---------- */
@media (max-width:900px){
  .ghh1{font-size:34px;max-width:none}
  .gh h2{font-size:25px}
  .ghlead{font-size:17.5px}
  .ghhero{padding-top:92px}
  .ghglass{height:92px}
  .ghhero-in{display:flex;flex-direction:column;padding:20px 16px}
  .gheyebrow{order:1}
  .ghh1{order:2}
  .ghacts{order:3;margin-bottom:16px}
  .ghlead{order:4}
  .ghkpi{order:5}
  .gh .ghbtn{width:100%;min-height:54px}
  .ghbar-cta{min-height:44px}
  .ghbay{grid-template-columns:minmax(0,1fr)}
  .ghsensors{flex-direction:row;align-items:center;gap:8px;padding:0 0 8px;overflow-x:auto}
  .ghsens{flex:0 0 auto;padding:5px 10px;display:flex;gap:6px;align-items:baseline}
  .ghsens-v,.ghsens-l{display:inline}
  .ghbayno{font-size:22px;padding:0;margin-left:auto}
  .ghbody{padding:0 14px 18px}
  .ghroof{margin:0 -14px 14px;height:22px}
  .ghstep{grid-template-columns:minmax(0,1fr)}
  .ghrack{padding:0 8px}
  .ghshelf{padding:12px 6px 18px}
}
@media (max-width:620px){
  /* тач-минимум 44 px: кнопка в балке и обе CTA героя держат высоту явно,
     специфичность .gh .ghbtn сохраняется и здесь */
  .gh .ghbtn{min-height:52px}
  .ghbar-cta{min-height:46px;padding:0 14px}
}
@media (max-width:420px){
  body.gh{font-size:17px}
  .ghh1{font-size:30px}
  .ghbar-meta{display:none}
}