/* ГНМЦ · Концепт 4 — базові стилі, скидання, типографія, утиліти */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-soft);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
svg{ display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; cursor:pointer; }
input,textarea,select{ font:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--blue-900);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:800;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.1rem, 4.2vw, 3.6rem); }
h2{ font-size:clamp(1.6rem, 3vw, 2.4rem); }
h3{ font-size:clamp(1.15rem, 1.6vw, 1.5rem); }
p{ margin:0 0 1em; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.1rem, 4vw, 2.5rem);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--font-head);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--blue-600);
}
.eyebrow::before{
  content:'';
  width:22px; height:3px;
  border-radius:2px;
  background:var(--yellow);
}

.section{ padding-block: clamp(3rem, 7vw, 6rem); }
.section--tight{ padding-block: clamp(2rem, 4vw, 3.2rem); }
.section--grey{ background:var(--grey-100); }
.section-head{ max-width:720px; margin-bottom: clamp(1.6rem, 4vw, 2.8rem); }
.section-head--center{ margin-inline:auto; text-align:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-head); font-weight:700; font-size:.95rem;
  padding:.9em 1.7em; border-radius:var(--radius-full);
  border:1px solid transparent; cursor:pointer;
  transition: transform var(--dur-s) var(--ease-out), box-shadow var(--dur-s), background var(--dur-s), color var(--dur-s), border-color var(--dur-s);
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--grad-blue); color:#fff; box-shadow:var(--shadow-m); }
.btn-primary:hover{ box-shadow:var(--shadow-l); transform:translateY(-2px); }
.btn-ghost{ background:#fff; color:var(--blue-700); border-color:var(--grey-300); }
.btn-ghost:hover{ border-color:var(--blue-600); color:var(--blue-700); background:var(--blue-050); }
.btn-white{ background:#fff; color:var(--blue-700); box-shadow:var(--shadow-m); }
.btn-white:hover{ transform:translateY(-2px); box-shadow:var(--shadow-l); }
.btn-outline-white{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn-outline-white:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
.btn-yellow{ background:var(--yellow); color:var(--blue-900); box-shadow:var(--shadow-m); }
.btn-yellow:hover{ background:var(--yellow-dim); transform:translateY(-2px); }
.btn-sm{ padding:.6em 1.2em; font-size:.85rem; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }

.btn svg{ width:1.05em; height:1.05em; }

.tag{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.75rem; font-weight:700; font-family:var(--font-head);
  padding:.35em .8em; border-radius:var(--radius-full);
  background:var(--blue-100); color:var(--blue-700);
  text-transform:uppercase; letter-spacing:.04em;
}
.tag--red{ background:#fdeaea; color:var(--red); }
.tag--yellow{ background:#fff7cc; color:#8a6d00; }
.tag--grey{ background:var(--grey-150); color:var(--grey-600); }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:1000;
  background:var(--blue-900); color:#fff; padding:.8em 1.4em; border-radius:var(--radius-s);
  transition: top var(--dur-s) var(--ease-out);
}
.skip-link:focus{ top:1rem; }

:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; border-radius:4px; }

.divider{ height:1px; background:var(--grey-150); border:0; margin:0; }

main{ display:block; }

.icon-mask{
  -webkit-mask-image:var(--icon); mask-image:var(--icon);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  background-color:currentColor;
  display:inline-block;
}

.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--yellow); z-index:1200; transition:width .1s linear;
}

.to-top{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:400;
  width:48px; height:48px; border-radius:50%;
  background:var(--grad-blue); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-m);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--dur-s), transform var(--dur-s), visibility var(--dur-s);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ transform:translateY(-3px); }

.loading-bar{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:2000;
  background:linear-gradient(90deg, var(--yellow), var(--blue-500));
  transform-origin:left; transform:scaleX(0);
}

@media (max-width:640px){
  .container{ padding-inline:1.1rem; }
}