/* =========================================================
   INTERMIK — One-page styles
   Структура:
   1) Переменные и базовые настройки
   2) Фон и типографика
   3) Лэйаут (контейнеры/сетки)
   4) Компоненты (карточки, мини-блоки, бейджи)
   5) Контакты (правая колонка + contact-* хуки)
   6) Эффекты (hover/анимации)
   7) Intro / preloader
   8) Адаптив
========================================================= */

/* =========================
   1) Переменные / reset
========================= */
:root{
  --bg:#ffffff;
  --text:#0b1220;
  --muted:#475569;           /* серо-синий текст */
  --line:rgba(15, 23, 42, .12);

  --blue:#0b3a8a;
  --blue2:#1d4ed8;
  --red:#d7263d;
  --red2:#ff3b4f;

  --card: rgba(255,255,255,.78);
  --cardSolid:#ffffff;
  --shadow: 0 18px 60px rgba(2, 6, 23, .12);
  --radius:18px;
}

*{ box-sizing:border-box; }

html, body{ height:100%; }

/* =========================
   2) База (фон / шрифты / ссылки)
========================= */
body{
  margin:0;
  min-height:100vh;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);

  /* Фоновые "пятна" */
  background:
    radial-gradient(900px 520px at 12% 18%, rgba(11, 58, 138, .18), transparent 62%),
    radial-gradient(760px 480px at 86% 14%, rgba(215, 38, 61, .14), transparent 60%),
    radial-gradient(860px 520px at 60% 92%, rgba(29, 78, 216, .10), transparent 62%),
    radial-gradient(720px 420px at 20% 86%, rgba(255, 59, 79, .08), transparent 62%),
    var(--bg);

  /* Лёгкая анимация фона */
  animation: bgMove 22s ease-in-out infinite alternate;
}

a{ color: var(--blue2); }
a:hover{ color: var(--blue); }

/* =========================
   3) Лэйаут
========================= */
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:28px 18px 60px;
}

.top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:10px 0 24px;
}

.hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}

/* =========================
   4) Шапка / бренд / чип
========================= */
.brand{ display:flex; align-items:flex-start; gap:14px; min-width:0; }

.logo-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}

.logo-wrap img{
  height:56px;
  width:auto;
  display:block;
  filter: drop-shadow(0 8px 20px rgba(2,6,23,.10));
  transition: filter .6s ease, transform .6s ease;
}

.logo-wrap:hover img{
  filter: drop-shadow(0 0 22px rgba(29,78,216,.35));
  transform: translateY(-1px);
}

.brand-subtitle{
  font-size:14px;
  color:var(--muted);
  letter-spacing:.2px;
  line-height:1.35;
}

.chip{
  border:1px solid var(--line);
  background: rgba(255,255,255,.65);
  padding:10px 14px;
  border-radius:999px;
  color: var(--blue);
  font-size:13px;
  box-shadow: 0 10px 22px rgba(2,6,23,.08);
  backdrop-filter: blur(10px);
  white-space:nowrap;
}

/* =========================
   5) Карточки / типографика
========================= */
.card{
  border:1px solid var(--line);
  background: var(--card);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:22px;
  backdrop-filter: blur(12px);
}

.title{
  font-size:40px;
  line-height:1.05;
  margin:0 0 12px;
  letter-spacing:-.6px;
  color:#071022;
}

.subtitle{
  margin:0;
  color: var(--muted);
  font-size:15px;
  line-height:1.55;
}

/* Мини-карточки в левой колонке */
.grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}

.mini{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.75);
}

.mini b{ display:block; margin-bottom:6px; color:#0b1220; }
.mini span{ color: var(--muted); font-size:13px; line-height:1.45; }

/* Бейджи */
.badges{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  opacity:.98;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.7);
  color: var(--muted);
  font-size:12px;
}

/* =========================
   Left card additions (CTA + How we work)
========================= */

/* Второй ряд мини-блоков: 2 широких карточки */
.grid-rows{
  grid-template-columns: 1fr;
  margin-top:12px;
}

.mini-wide{
  padding:12px 14px;
}

/* CTA buttons */
.cta{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:10px 14px;
  border-radius:12px;

  font-size:13px;
  font-weight:700;

  text-decoration:none;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.75);
  color: var(--text);

  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 35px rgba(2,6,23,.10);
  border-color: rgba(29,78,216,.25);
}

.btn.primary{
  background: rgba(29,78,216,.10);
  border-color: rgba(29,78,216,.25);
  color: #0b3a8a;
}

.btn.ghost{
  background: rgba(255,255,255,.75);
  color: var(--text);
}

/* How we work */
.how{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(15,23,42,.10);
}

.how-title{
  font-size:12px;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
  color: var(--muted);
  margin-bottom:10px;
}

.how-steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}

.how-step{
  display:flex;
  align-items:center;
  gap:10px;

  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
}

.how-num{
  width:22px;
  height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:12px;
  font-weight:800;
  color: var(--blue);
  border:1px solid rgba(29,78,216,.25);
  background: rgba(29,78,216,.08);
  flex: 0 0 auto;
}

.how-text{
  font-size:12px;
  color: var(--muted);
  line-height:1.35;
  font-weight:600;
}


/* =========================
   6) Правая колонка / контакты
========================= */
.right .h2, .right h2{
  margin:0 0 10px;
  font-size:16px;
  color:#0b1220;
}

.list{ display:grid; gap:10px; }

.row{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.75);
}

/* контактный телефон row */

   .contact-item > div{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  
  .contact-item > div > a{
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  
  .contact-actions{
    flex: 0 0 auto;
    display: inline-flex;
    gap: 8px;
    white-space: nowrap;
    margin-left: auto;
    align-self: center;
  }

/* Подпись блока (Головной офис, Рынки и т.п.) */
.k{
  color: var(--muted);
  font-size:12px;
  margin-bottom:4px;
}

/* Контент внутри блока */
.v{
  font-weight:800;
  color:#0b1220;
}

/* Ссылки в контактах */
.v a{
  color: var(--blue2);
  text-decoration:none;
  border-bottom:1px dashed rgba(29,78,216,.35);
  transition: color .25s ease, border-color .25s ease;
}

.v a:hover{
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.sep{ opacity:.6; padding:0 6px; color: var(--muted); }

.footer{
  margin-top:16px;
  color: var(--muted);
  font-size:12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  opacity:.95;
}



/* -------------------------
   Contact hooks (contact-*)
------------------------- */
.contact-block{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.contact-main{
  font-weight:600;
  line-height:1.45;
}

/* Каналы связи (Telegram / WhatsApp) */
.contact-actions{
  display:inline-flex;
  gap:8px;
  margin-left:10px;
  vertical-align:middle;
}

.contact-icon{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.75);
  text-decoration:none;
}

.contact-icon:hover{
  border-color: rgba(29,78,216,.35);
  box-shadow: 0 10px 18px rgba(2,6,23,.08);
}



/* SVG внутри */
.contact-icon svg{
  width:14px;
  height:14px;
  display:block;
}

/* Адрес как ссылка (Google Maps) */
.contact-main a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(29,78,216,.25);
}

.contact-main a:hover{
  color: var(--blue);
  border-bottom-color: rgba(29,78,216,.6);
}

/* Роль (человек) */
.contact-role{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.2px;
}

/* Имя (человек) */
.contact-person-name{
  font-size:16px;
  font-weight:800;
  color:#0b1220;
  margin-bottom:6px;
}

/* Строка данных: EMAIL / ТЕЛЕФОН и т.п. */
.contact-item{
  display:flex;
  gap:10px;
  align-items:baseline;

  position:relative;
  padding-left:10px; /* место под линию-акцент */
}

/* Линия-акцент слева */
.contact-item::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  bottom:4px;
  width:2px;
  background: rgba(29, 78, 216, 0.15);
  border-radius:2px;
}

.contact-item:hover::before{
  background: rgba(29, 78, 216, 0.35);
}

/* Лейбл (EMAIL/ТЕЛЕФОН) */
.contact-item .label{
  min-width:72px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--blue);
  font-weight:600;
}

/* Значения без ссылки (если надо) */
.contact-item .value{
  font-weight:700;
  color:#0b1220;
}

/* Чуть более уверенные ссылки в contact-item */
.contact-item a{
  font-weight:600;
}

/* (Оставлено на будущее — если где-то используешь) */
.contact-person{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.contact-person .name{ font-weight:700; }

/* =========================
   7) Эффекты (hover для карточек)
========================= */
.card, .mini, .row, .badge{
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;
}

.card:hover,
.mini:hover,
.row:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 70px rgba(2,6,23,.16);
  border-color: rgba(11,58,138,.25);
}

/* Контакты чуть светлее при наведении */
.row:hover{
  background: rgba(255,255,255,.92);
}

/* =========================
   8) Анимация фона
========================= */
@keyframes bgMove{
  0%{
    background-position:
      0% 0%,
      100% 0%,
      50% 100%,
      0% 100%;
  }
  100%{
    background-position:
      6% 8%,
      94% 6%,
      52% 92%,
      4% 96%;
  }
}

/* =========================
   9) Intro / preloader
========================= */
#intro{
  position:fixed;
  inset:0;
  background:
    radial-gradient(800px 500px at 20% 20%, rgba(11,58,138,.18), transparent 60%),
    radial-gradient(700px 480px at 80% 30%, rgba(215,38,61,.16), transparent 60%),
    #ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  transition: opacity .8s ease, visibility .8s ease;
}

#intro.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none; /* скрытый слой не перехватывает клики */
}

.intro-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  animation: introFade .9s ease forwards;
}

.intro-inner img{
  height:72px;
  width:auto;
  animation: logoPop 1s ease forwards;
}

.intro-text{
  font-size:12px;
  letter-spacing:4px;
  color:#0b3a8a;
  opacity:.7;
}

.intro-line{
  width:180px;
  height:2px;
  background:rgba(11,58,138,.15);
  border-radius:2px;
  overflow:hidden;
}

.intro-line span{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, #0b3a8a, #d7263d);
  animation: loadLine 1.4s ease forwards;
}

/* Анимации интро */
@keyframes logoPop{
  0%{ transform:scale(.85); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}

@keyframes loadLine{
  from{ width:0%; }
  to{ width:100%; }
}

@keyframes introFade{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}

/* =========================
   10) Адаптив
========================= */
@media (max-width: 900px){
  .top{ flex-wrap:wrap; }
  .chip{ white-space:normal; }
  .hero{ grid-template-columns:1fr; }
  .brand-subtitle{ white-space:normal; }
}

@media (max-width: 520px){
  .wrap{ padding:18px 14px 40px; }
  .title{ font-size:30px; }
  .grid{ grid-template-columns:1fr; }
  .logo-wrap img{ height:46px; }
  .brand-subtitle{ font-size:12px; }

  /* На телефоне уменьшаем "подъём", чтобы не прыгало */
  .card:hover,
  .mini:hover,
  .row:hover{
    transform: translateY(-2px);
  }
}

@media (max-width: 420px){

  .contact-item > div{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:10px;
    min-width:0;
  }

  .contact-item > div > a[href^="tel:"]{
    flex: 1 1 100%;
    min-width: 0;

    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
    display:block;
  }

  .contact-actions{
    flex: 1 1 100%;
    display:flex;
    justify-content:flex-end;
    gap:8px;

    margin: 6px 0 0 0;
    white-space: nowrap;
  }

  .contact-icon{
    width: 26px;
    height: 26px;
  }

  .contact-icon svg{
    width: 13px;
    height: 13px;
  }
}