@import url('https://fonts.googleapis.com/css2?family=Tektur:wght@400..900&display=swap');
#app {
  background: var(--color-background);
}
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--padding-container-main);
  @media (max-width: 560px) {
    padding: var(--padding-container-mobile);
  }
}
.home {
  position: relative;
}
div img {
  width: 100%;
  overflow: hidden;
}

.hero-form,
.final-form {
  padding: 18px;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  background: var(--gradient-surface);
  background-size: cover, cover;
  background-position: center, center;
}
.form-card {
  background: var(--surface-card);
  color: var(--text-strong);
  border: 1px solid var(--border-subtle);
}

.form-card h3,
.form-card .form-title {
  color: var(--text-strong);
}

.form-card p,
.form-card .form-sub {
  color: var(--text-muted);
}

.form-card label {
  color: var(--text-muted);
  font-weight: 600;
}

.form-card input {
  background: var(--input-bg);
  color: var(--text-strong);
  border: 1px solid var(--input-border);
}

.form-card input::placeholder {
  color: var(--text-muted);
}

.form-card input:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring);
  border-color: transparent;
}

/* ===== ОТСТУПЫ МЕЖДУ БЛОКАМИ =====
   Корневые классы всех блоков конструктора. Без отступа блоки с фоном
   (градиент/картинка) стоят вплотную друг к другу. */
.intro,
.intro-img,
.intro-only-form,
.Img-back,
.steps,
.compound-cards,
.ticker,
.Img-list-block,
.vertical-card,
.list-block,
.numbre,
.textimg,
.cards,
.image-block,
.cols,
.text-block,
.calc-section,
.faq {
  margin: 0 auto;
  
  max-width: 1440px;
  
  @media (max-width: 768px) {
    margin-bottom: 50px;
  }
}

/* ===== КНОПКИ БЛОКОВ (BtnOne / BtnTwo) ===== */
.block_btns {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-title {
width: 100%;
text-align: center;
font-size: 18px;
@media (max-width: 768px) {
font-size: 16px;
}
}
.block-btn {
  padding: 10px 24px;
  background: var(--color-accent);
  color: var(--btn-text);
  border: none;
  border-radius: var(--btn-border-radius);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  min-width: 200px;
  text-align: center;
}

.text-accent {
  color: var(--color-accent);
  font-size: 0.7em;
  margin-right: 1em;
}


.custom_corner {
  /* Тонкая общая рамка (опционально) */
  border: 1px solid #7fa6d96e;
  padding: 40px;
  position: relative;

  /* Цвет уголков */
  --corner-color: #7FA6D9;
  --corner-size: 20px;
  --corner-thickness: 2px;

  /* Рисуем 4 уголка: 8 линий (по 2 на каждый угол) */
  background-image: 
    /* 1. Левый верхний */
    linear-gradient(var(--corner-color), var(--corner-color)), /* горизонталь */
    linear-gradient(var(--corner-color), var(--corner-color)), /* вертикаль */
    /* 2. Правый верхний */
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)),
    /* 3. Левый нижний */
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)),
    /* 4. Правый нижний */
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color));

  background-repeat: no-repeat;
  
  /* Размеры линий: (длина уголка) (толщина) и наоборот */
  background-size: 
    var(--corner-size) var(--corner-thickness), var(--corner-thickness) var(--corner-size),
    var(--corner-size) var(--corner-thickness), var(--corner-thickness) var(--corner-size),
    var(--corner-size) var(--corner-thickness), var(--corner-thickness) var(--corner-size),
    var(--corner-size) var(--corner-thickness), var(--corner-thickness) var(--corner-size);

  /* Позиции линий: прижимаем к 4 углам */
  background-position: 
    /* Левый верхний */
    top left, top left,
    /* Правый верхний */
    top right, top right,
    /* Левый нижний */
    bottom left, bottom left,
    /* Правый нижний */
    bottom right, bottom right;
    
  /* Если у вас есть общая рамка, сдвигаем градиенты внутрь на её толщину */
  background-origin: border-box;
}
.custom_corner2 {
  /* Тонкая общая рамка (опционально) */
  border: 1px solid #0B1F3A;
  padding: 40px;
  position: relative;

  /* Цвет уголков */
  --corner-color: #0B1F3A;
  --corner-size: 20px;
  --corner-thickness: 2px;

  /* Рисуем 4 уголка: 8 линий (по 2 на каждый угол) */
  background-image: 
    /* 1. Левый верхний */
    linear-gradient(var(--corner-color), var(--corner-color)), /* горизонталь */
    linear-gradient(var(--corner-color), var(--corner-color)), /* вертикаль */
    /* 2. Правый верхний */
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)),
    /* 3. Левый нижний */
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color)),
    /* 4. Правый нижний */
    linear-gradient(var(--corner-color), var(--corner-color)),
    linear-gradient(var(--corner-color), var(--corner-color));

  background-repeat: no-repeat;
  
  /* Размеры линий: (длина уголка) (толщина) и наоборот */
  background-size: 
    var(--corner-size) var(--corner-thickness), var(--corner-thickness) var(--corner-size),
    var(--corner-size) var(--corner-thickness), var(--corner-thickness) var(--corner-size),
    var(--corner-size) var(--corner-thickness), var(--corner-thickness) var(--corner-size),
    var(--corner-size) var(--corner-thickness), var(--corner-thickness) var(--corner-size);

  /* Позиции линий: прижимаем к 4 углам */
  background-position: 
    /* Левый верхний */
    top left, top left,
    /* Правый верхний */
    top right, top right,
    /* Левый нижний */
    bottom left, bottom left,
    /* Правый нижний */
    bottom right, bottom right;
    
  /* Если у вас есть общая рамка, сдвигаем градиенты внутрь на её толщину */
  background-origin: border-box;
}
.custom-accent {
  color: var(--color-accent);
}