:root {
  --color-black: #0f1720;
  --color-white: #ffffff;
  --color-text-dark: #1a2a3a;
  --color-text-muted: #5a6b7c;
  --color-text-hover: #243447;

  --color-accent: #5b9bd5;
  --color-accent-hover: #4a89c3;
  --color-accent-soft: #bde0f5;
  --color-accent-light: #e8f4fb;

  --color-warm: #fdb863;
  --color-warm-hover: #f0a74a;
  --color-warm-soft: #ffe8cc;

  --color-cutout: #f5f9fc;
  --color-surface: #ffffff;
  --color-consult-bg: #f0f6fb;
  --color-border: #d7e6f2;
  --color-border-strong: #9bbbd2;
  --color-border-light: #eef5fa;

  --font-headline: "Montserrat", Arial, sans-serif;
  --font-text: "Manrope", Arial, sans-serif;
  --font-size-h1: clamp(1.875rem, 1.5rem + 1.8vw, 3rem);
  --font-size-h2: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  --font-weight-h1: 600;
  --font-weight-h2: 600;
  --font-size-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --font-size-body-sm: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);

  --container-width: 75rem;
  /* 15–20px side gutters */
  --section-padding-inline: clamp(0.9375rem, 1.2vw, 1.25rem);
  /* Единый вертикальный ритм между всеми секциями */
  --section-gap: 6rem;
  --section-fade: var(--section-gap);
  --section-heading-width: 42rem;
  --header-offset: 4.75rem;

  --page-gradient-top: #ffffff;
  --page-gradient-mid: #f5f9fc;
  --page-gradient-soft: #eaf3fa;
  --page-gradient-warm: #fef8f1;
  --page-gradient-end: #f0f6fb;

  --radius-sm: 0.4375rem; /* 7px */
  --radius-md: 0.625rem; /* 10px */
  --radius-lg: 0.8125rem; /* 13px */
  --radius-xl: 1.25rem;
  --radius-button: 0.625rem;

  --transition-base: 0.2s ease;

  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(91, 155, 213, 0.18);
  --glass-logo-bg: rgba(26, 42, 58, 0.78);
  --glass-nav-bg: rgba(26, 42, 58, 0.78);
  --shadow-soft: 0 0.75rem 2rem rgba(26, 42, 58, 0.08);
  --header-dropdown-gap: 0.5rem;

  --page-shell-width: min(
    100% - (var(--section-padding-inline) * 2),
    var(--container-width)
  );
}

@media (min-width: 48rem) {
  :root {
    --header-offset: 6.75rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --header-offset: 7.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.site-access {
  min-width: 20rem;
  min-height: 100vh;
  margin: 0;
  color: var(--color-text-dark);
  font-family: var(--font-text), system-ui, sans-serif;
  font-size: var(--font-size-body);
  background:
    radial-gradient(ellipse at 15% 12%, rgba(189, 224, 245, 0.55), transparent 38%),
    radial-gradient(ellipse at 88% 88%, rgba(253, 184, 99, 0.16), transparent 32%),
    linear-gradient(145deg, var(--page-gradient-top), var(--page-gradient-end));
}

.site-access__main {
  display: grid;
  min-height: 100vh;
  padding: 1.5rem;
  place-items: center;
}

.site-access__card {
  width: min(100%, 28rem);
  padding: clamp(1.5rem, 6vw, 3rem);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(0.75rem);
}

.site-access__title {
  margin: 0;
  color: var(--color-text-dark);
  font-family: var(--font-headline), system-ui, sans-serif;
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2rem);
  font-weight: var(--font-weight-h1);
  line-height: 1.2;
  text-wrap: balance;
}

.site-access__description {
  margin: 0.875rem 0 1.75rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.site-access__form,
.site-access__field {
  display: grid;
  gap: 0.875rem;
}

.site-access__field {
  gap: 0.5rem;
}

.site-access__label {
  color: var(--color-text-dark);
  font-size: var(--font-size-body-sm);
  font-weight: 600;
}

.site-access__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  outline: none;
  color: var(--color-text-dark);
  background: var(--color-white);
  font: inherit;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.site-access__input:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.2rem rgba(91, 155, 213, 0.2);
}

.site-access__error {
  margin: 0;
  color: #a83232;
  font-size: var(--font-size-body-sm);
}

.site-access__submit {
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: var(--radius-button);
  color: var(--color-white);
  background: var(--color-accent);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.site-access__submit:hover {
  background: var(--color-accent-hover);
}

.site-access__submit:focus-visible {
  outline: 0.2rem solid var(--color-text-dark);
  outline-offset: 0.2rem;
}

.site-access__submit:active {
  transform: translateY(1px);
}

@media (max-width: 30rem) {
  .site-access__main {
    padding: 1rem;
  }
}