/* ==========================================================================
   INSA modern skin — layout/theme only.
   Does NOT change colours (INSA blue/white/ink), logo, photos or copy.
   Applied as a cascade layer over the Bitrix24.Sites markup.
   ========================================================================== */

:root {
  --insa-blue: #027cb5;
  --insa-blue-600: #026a9c;
  --insa-ink: #12222d;
  --insa-paper: #ffffff;
  --insa-mist: #f5f7f9;
  --insa-line: rgba(18, 34, 45, 0.08);
  --insa-radius: 1rem;
  --insa-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --insa-shadow-md: 0 10px 30px rgba(16, 24, 40, 0.10);
  --insa-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--insa-ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container { max-width: 1200px; }

/* ---- Typography: modern scale, same content ------------------------------ */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: Oswald, Roboto, sans-serif;
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-wrap: balance;
  margin-bottom: 0.6em;
}
h1, .h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h2, .h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3, .h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
p, .g-font-size-default { text-wrap: pretty; }

/* ---- Section rhythm ------------------------------------------------------ */
main > section, .landing-block.landing-block-node-img {
  padding-top: clamp(2.75rem, 6vw, 5rem);
  padding-bottom: clamp(2.75rem, 6vw, 5rem);
}
main > section.g-pt-auto { padding-top: 0; }
main > section.g-pb-auto { padding-bottom: 0; }

/* ---- Sticky glass header (keeps the brand blue) ------------------------- */
.u-header.u-header--sticky .u-header__section {
  backdrop-filter: saturate(1.5) blur(12px);
  -webkit-backdrop-filter: saturate(1.5) blur(12px);
}
.u-header.u-header--sticky {
  box-shadow: 0 10px 30px rgba(8, 30, 50, 0.16);
}
.u-header .navbar { padding-top: 0.35rem; padding-bottom: 0.35rem; }
.u-header .u-header__logo-img,
.u-header img[class*="logo"] { max-height: 54px; width: auto; }
.u-header .nav-link {
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 0.45rem 0.85rem !important;
  transition: background 0.15s var(--insa-ease);
}
.u-header .nav-link:hover { background: rgba(255, 255, 255, 0.16); color: #ffffff !important; }

/* ---- Buttons: pill, soft shadow ----------------------------------------- */
.btn,
.landing-block a.btn,
.landing-block .btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.7rem 1.4rem;
  box-shadow: var(--insa-shadow-sm);
  transition: transform 0.18s var(--insa-ease), box-shadow 0.2s var(--insa-ease), background 0.18s var(--insa-ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--insa-shadow-md); }
.btn-primary { background-color: var(--insa-blue); border-color: var(--insa-blue); }
.btn-primary:hover { background-color: var(--insa-blue-600); border-color: var(--insa-blue-600); }

/* ---- Cards: rounded, soft shadow, hover lift ---------------------------- */
.card {
  border: 1px solid var(--insa-line);
  border-radius: var(--insa-radius);
  box-shadow: var(--insa-shadow-sm);
  overflow: hidden;
  transition: transform 0.25s var(--insa-ease), box-shadow 0.25s var(--insa-ease);
  background-clip: padding-box;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--insa-shadow-md); }
.card img { transition: transform 0.5s var(--insa-ease); }
.card:hover img { transform: scale(1.03); }

/* ---- Media -------------------------------------------------------------- */
img { max-width: 100%; height: auto; }
.landing-block img { border-radius: 0.5rem; }

/* ---- Footer ------------------------------------------------------------- */
footer.landing-block,
.landing-block.u-footer {
  background: #0f1b26 !important;
  color: #cbd5e1;
}
footer.landing-block a { color: #e2e8f0; }
footer.landing-block a:hover { color: #ffffff; }

/* ---- Motion preferences ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}