@import url("sections/01-hero.css");
@import url("sections/02-works.css");
@import url("sections/03-problems.css");
@import url("sections/04-about.css");
@import url("sections/05-benefits.css");
@import url("sections/06-services.css");
@import url("sections/07-process.css");
@import url("sections/08-consultation.css");
@import url("sections/09-faq.css");
@import url("sections/10-contacts.css");
@import url("interactions.css");

@font-face {
  font-family: 'Unbounded';
  src: url('../assets/fonts/Unbounded.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --color-background: #141218;
  --color-surface: #24212b;
  --color-accent: #b99aff;
  --color-text: #f5f1f7;
  --color-muted: #b8afbf;
}

* {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
}

/* При открытии модального окна сохраняем ширину страницы без полосы прокрутки. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: 'Unbounded', sans-serif;
  line-height: normal;
}

h1, h2, h3, p { margin: 0; font: inherit; }
a { color: inherit; text-decoration: none; }
button { padding: 0; font: inherit; color: inherit; background: none; cursor: pointer; }
img { display: block; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

/* Сохраняем композицию оригинала; ширина меньше 1200 уменьшает весь макет. */
.site-viewport { position: relative; overflow: clip; width: min(1200px, 100%); margin-inline: auto; }
.site-canvas { width: 1200px; min-height: 5851px; transform-origin: top left; }

.project-dialog {
  width: min(760px, calc(100% - 40px));
  padding: 32px;
  border: 1px solid var(--color-accent);
  border-radius: 16px;
  background: var(--color-surface);
  color: var(--color-text);
}
.project-dialog::backdrop { background: #000b; }
.project-dialog img { width: 100%; height: auto; margin-bottom: 16px; }
.project-dialog h2 { margin-bottom: 8px; font-size: 24px; }
.project-dialog__close { position: absolute; top: 8px; right: 12px; font-size: 26px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}