/* --- Palette & grid variables (as on JPG) --- */
  :root{
    --frame:1920;
    --margin:50px;
    --gutter:24px;
    --bg:#F7F6F7;
    --dark:#0C0D0C;
    --accent:#FFDA1D;
    --accent-2:#E9FF7A;
    --muted:#828182;
    --card:#FFFFFF;
    --radius:20px;
    --container:1200px;
  }

.layout {
  display: grid;
  grid-template-columns: 2fr 1fr; /* контент + сайдбар */
  gap: 24px;
}

.content-wrap.full-width {
  grid-column: 1 / -1; /* растягиваем на всю ширину */
}

.with-sidebar {
  grid-column: auto;
}

.sidebar-second {
  grid-column: auto;
}
.content-wrap.with-sidebar {
  background: #fff;
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 12px 40px rgba(2, 6, 23, 0.04);
}
.path-node .content-wrap {
  background: #fff;
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 12px 40px rgba(2, 6, 23, 0.04);
}
.sidebar-second {
    max-width: 465px;
   }

.sidebar-second .block { background: #fff;
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 12px 40px rgba(2, 6, 23, 0.04);
    margin-bottom: 24px;
  }

  /* Fallback font stack; replace with Excon via @font-face if available */
  body{
    margin:0;
    font-family: "Excon","Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background:var(--bg);
    color:var(--dark);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
    word-break: auto-phrase;
  }

.path-frontpage .view-frontpage {display: none;}

  /* Container matching frame + margins */
  .frame{
    max-width:var(--frame)px;
    margin:0 auto;
    padding-left:var(--margin);
    padding-right:var(--margin);
    max-width: 1420px;
  }

  /* 12-column grid helper */
  .cols{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap:var(--gutter);
  }
  .col-12{ grid-column: span 12; }
  .col-8{ grid-column: span 8; }
  .col-6{ grid-column: span 6; }
  .col-4{ grid-column: span 4; }
  .col-3{ grid-column: span 3; }

  /* NAV */
  header.site{ padding:22px 0; }
  header {
   /* background: #fff;
    border-bottom: 1px solid #ddd; */
    position: relative;
    margin-top: 16px;
    box-shadow: 0 12px 40px rgba(2, 6, 23, 0.04);
    border-radius: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
}
/*  main {
  margin-top: 16px;
  display: inherit;
} */

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

.nav-left, .nav-right {
    display: flex;
    gap: 20px;
}

.nav-left a, .nav-right a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.logo {
    flex: 0 0 auto;
}

.logo img {
    height: 60px;
}

/* Центрирование лого на десктопе */
.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.nav-wrapper .logo {
    margin: 0 40px;
}

/* Мобильная версия */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.hamburger span {
    display: block;
    height: 3px;
    width: 25px;
    background: #333;
    border-radius: 3px;
}

/* Выпадающее меню */
.mobile-menu {
    display: none;
    flex-direction: column;
    background: #fff;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    border-top: 1px solid #ddd;
    z-index: 99;
}

.mobile-menu a {
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
}

/* Адаптив */
@media (max-width: 768px) {
    .nav-left, .nav-right {
        display: none;
    }
    .nav-wrapper {
        justify-content: flex-start;
    }
    .nav-wrapper .logo {
        margin: 0;
    }
    .hamburger {
        display: flex;
    }
}
  .pill{ background:#fff; border-radius:999px; padding:8px 14px; color:var(--muted); box-shadow:0 6px 18px rgba(2,6,23,0.04); border:0; cursor:pointer; font-weight:600; }
  .brand{
    display:flex; align-items:center; gap:12px;
  }
  .brand .logo{
    width:44px; height:44px; border-radius:50%; background:var(--accent); display:grid; place-items:center; font-weight:800; box-shadow:0 8px 26px rgba(0,0,0,0.12);
  }
  .brand .title{ font-weight:800; text-transform:lowercase; letter-spacing:0.6px; }

  /* HERO */
  .hero{ margin:8px 0 28px; padding: 70px 0px;}
  .hero .left{
    padding-top:6px;
  }
  .kicker{ display:inline-block; color:var(--muted); font-weight:700; padding:6px 12px; border-radius:999px; font-size: 24px;}
  .hero  .kicker {font-size: 24px;
    text-transform: uppercase;
    color: #000;
    font-weight: 900;
    background: #fff;
    border-radius: 0px;
    padding: 10px;
    border-radius: 12px;
    margin-bottom: 10px;}
  .hero h1{
    font-size: clamp(44px, 8vw, 128px);
    line-height:0.9;
    margin:10px 0;
    font-weight:900;
    letter-spacing:-0.02em;
    color:var(--dark);
  }
  .hero .lead{ color:var(--muted); max-width:56ch; margin-bottom:18px; font-size:1.05rem; }

  .hero-actions{ display:flex; gap:12px; margin-top:16px; }
  .hero h1 {font-size: clamp(34px, 2vw, 100px);}
  .hero h1 {padding: 15px 10px 10px 10px;
    display: table-cell;
    margin-bottom: 10px;
    color: #fff;
    border-radius: 12px;}
  .btn{
    padding:12px 18px; border-radius:999px; border:0; font-weight:800; cursor:pointer;
  }
  .btn-primary{ background:var(--accent); color:#000; box-shadow:0 18px 48px rgba(255,218,29,0.12); }
  .btn-secondary{ background:#fff; color:var(--dark); box-shadow:0 8px 20px rgba(2,6,23,0.06); }

  /* hero right with floating card & acct stats */
  .hero-right{ position:relative; min-height:260px; }
  .hero-right img {max-width: 90%;
    margin-top: -100px;}
  .float-card{
    width:340px; height:220px; border-radius:18px;
    background:linear-gradient(140deg,#fff,#f4f6f7);
    box-shadow: 0 40px 100px rgba(2,10,30,0.12);
    position:absolute; right:0; top:18px;
    transform: rotate(-14deg);
    padding:18px; display:flex; flex-direction:column; justify-content:space-between;
    transition: transform .45s cubic-bezier(.2,.9,.2,1);
  }
  .float-card:hover{ transform: rotate(-8deg) translateY(-6px); }
  .float-top{ display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-weight:700; }
  .float-num{ font-size:1.05rem; font-weight:900; letter-spacing:1.6px; }
  .hero-stats{ position:absolute; left:0; bottom:0; display:flex; gap:16px; width:100%; justify-content:flex-start; align-items:center; }
  .stat{ background:var(--card); border-radius:12px; padding:12px 16px; box-shadow:0 8px 30px rgba(2,6,23,0.04); }
  .stat .big{ font-weight:900; font-size:1.18rem; }
  .stat .label{ color:var(--muted); font-size:0.9rem; }

  /* CONTENT containers */
  .section{ margin-bottom:36px; }

  /* Controls: search + chips + sort */
  .controls{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:6px 0 18px; }
  .search{
    display:flex; align-items:center; gap:10px; padding:12px 14px; background:#fff; border-radius:14px; min-width:420px; box-shadow:0 6px 18px rgba(2,6,23,0.04);
  }
  .search input{ border:0; outline:0; background:transparent; font-size:0.95rem; width:100%; }
  .chips{ display:flex; gap:10px; align-items:center; }
  .chip{ padding:8px 12px; background:#fff; border-radius:999px; border:1px solid rgba(0,0,0,0.04); color:var(--muted); cursor:pointer; font-weight:700; }
  .chip.active{ background:var(--accent-2); color:#000; border-color:transparent; }

  /* Grid of MFO cards (each span 4 cols -> 3 per row desktop) */
  .catalog{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; margin-top: 20px; }
  .card-visual{
    background:var(--card); padding:18px; border-radius:16px; box-shadow:0 18px 48px rgba(2,6,23,0.04);
    display:flex; flex-direction:column; gap:12px; transition: transform .18s ease, box-shadow .18s ease;
  }
  .card-visual:hover{ transform: translateY(-8px); box-shadow:0 30px 90px rgba(2,6,23,0.08); }
  .card-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .card-line1 {display:flex;gap:12px;align-items:center;}
  .logo-square{padding: 5px; width:106px; height:60px; border-radius:12px; display:grid; place-items:center; font-weight:900; background: linear-gradient(135deg, #eef6ff, #e6f0ff);}
  .title a { font-weight:900; font-size:1.02rem; color: #000; text-decoration: none;}
  .title {
    font-weight: 900;
    font-size: 1.02rem;
}
  .tag{ padding:6px 10px; border-radius:10px; font-weight:800; color:var(--accent); background: rgba(255,218,29,0.06); border:1px solid rgba(255,218,29,0.12); }
  .do-summa {font-weight:900}
  .desc{ color:var(--muted); min-height:92.8px; }
  .features{ display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-weight:700; }
  .card-bottom{ display:flex; justify-content:space-between; align-items:center; gap:12px; }

  .apply{ background:var(--accent); color:#000; padding:10px 14px; border-radius:10px; font-weight:900; border:0; cursor:pointer; text-decoration: none;}

  /* Two-column feature block like in JPG: left big card + right bright card */
  .two-col{ display:grid; grid-template-columns: 2fr 1fr; gap:24px; align-items:start; }
  .big-card{ background:#fff; border-radius:18px; padding:22px; box-shadow:0 18px 60px rgba(2,6,23,0.04); }
  .bright-card{ background:var(--accent-2); border-radius:18px; padding:22px; color:#000; box-shadow:0 12px 40px rgba(2,6,23,0.06); }

  /* FAQ */
  .faq-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}
 .layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}
  .faq-wrap{ background:#fff; border-radius:20px; padding:26px; box-shadow:0 12px 40px rgba(2,6,23,0.04); }
  .faq-list{ display:grid; gap:12px; }
  details{ background:transparent; padding:12px; border-radius:12px; }
  summary{ list-style:none; font-weight:800; cursor:pointer; }
  .faq-item{ display:flex; gap:12px; align-items:flex-start; }
  .num{ width:44px; height:44px; border-radius:50%; background:var(--accent-2); display:grid; place-items:center; font-weight:900; }
  .sumar {display:flex;align-items:center;gap:12px}
#block-stop-views-block-faq-block-1 .view, .view-content {gap: 0px;}
.diana {border-radius: 12px;
    margin-top: 10px;
    max-height: 440px;
    width: 100%;
    object-fit: cover;
    object-position: top;}

  /* CTA dark strip */
  .cta-dark{ background:var(--dark); color:#fff; border-radius:20px; padding:28px; display:flex; justify-content:space-between; align-items:center; gap:16px; box-shadow:0 30px 80px rgba(2,6,23,0.3); }
  .cta-dark .cta-left h2{ margin:0; font-size:1.6rem; }
  .cta-dark .cta-left p{ margin:6px 0 0; color:rgba(255,255,255,0.78); }



.page-node-type-mfo .field--name-field-logo {margin-left: inherit;}





  /* Footer spacing */
  footer{ padding:40px 0; color:var(--muted); text-align:center; }

  /* Responsive */
  @media (max-width:1100px){
    .catalog{ grid-template-columns: repeat(2, 1fr); }
    .two-col{ grid-template-columns: 1fr; }
    .hero h1{ font-size: clamp(34px, 10vw, 72px); }
  }
  @media (max-width:680px){
    .frame{ padding-left:20px; padding-right:20px; }
    .hero h1{ font-size:36px; }
    .catalog{ grid-template-columns: 1fr; }
    .controls{ flex-direction:column; align-items:stretch; gap:12px; }
    .float-card{ position:static; transform:none; width:100%; margin-top:16px; }
    .hero-stats{ position:static; display:flex; gap:12px; margin-top:12px; }
    .nav-right{ display:none; }
  }
@media (max-width: 768px) {
  .faq-layout {
    grid-template-columns: 1fr; /* одна колонка */
  }
  .layout {
    grid-template-columns: 1fr; /* одна колонка */
  }
    .catalog {
    grid-template-columns: 1fr; /* только одна колонка */
  }
  .faq-wrap,
  aside {
    width: 100%; /* на всю ширину */
  }
.col-6 {
   grid-column: span 12;
  }
.hero {padding: 10px 0px;
    margin-bottom: 0px;} 
.hero-right {display: none;}
.card-top {display: contents;}

}
  /* small utilities */
  .muted{ color:var(--muted); }
  .mb-12{ margin-bottom:12px; }
  .mb-20{ margin-bottom:20px; }


#block-stop-strokanavigacii {margin-bottom: 0px; padding: 10px;}
.breadcrumb__link {font-size: 12px; color: #7b7878; font-weight: 500;}
.breadcrumb__item {font-size: 12px;
    color: #3e3a3a;
    font-weight: 500;}

  .page-title {font-size: 28px; line-height: 1.4;}

#block-stop-vebforma {margin-bottom: 0px;}
#block-stop-vebforma textarea {min-height: 100px;}
#block-stop-views-block-faq-block-1 {margin-bottom: 30px;}
#block-stop-diana-2 {background: var(--accent-2);}
#block-stop-views-block-blok-mfo-na-glavnoy-block-1 h2 {margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 900;
    color: #000;}


  .text-content p, .cke_editable p {margin-bottom: 0px;}



  .btn-container {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
  }

  /* Information Icon */
  .info-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #0073e6;
    padding: 0;
    display: flex;
    align-items: center;
  }

  
  /* --- Стили для JS-модалки --- */

/* Фон-затемнение */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  
  /* Анимация появления */
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Контентная часть окна */
.popup-content {
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  position: relative;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  cursor: default; /* Возвращаем обычный курсор */
  
  /* Анимация появления */
  animation: scaleUp 0.3s ease;
}

@keyframes scaleUp {
  from { transform: scale(0.9); opacity: 0.5; }
  to { transform: scale(1); opacity: 1; }
}

/* Кнопка "закрыть" (крестик) */
.popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  font-size: 1.5rem;
  color: #333;
  
  /* Сбрасываем стили кнопки */
  border: none;
  background: none;
  padding: 0;
}

/* Делаем триггер-кнопку похожей на иконку */
.info-icon.js-popup-trigger {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit; /* Наследуем цвет текста */
}

.popup-content h4 {
    margin: 0px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #c0c0c0;
    color: #3e3a3a;
}
.popup-info-grid .info-item {
  margin-bottom: 5px;
}

.fa-circle-info:before, .fa-info-circle:before {
  color: #b1adad;
}



#block-stop-podvalinfa-2 .field--name-body {
  line-height: 1.7;
}