/* shared/tokens */
:root {
  color-scheme:light;
  --paper:#f4f6f9;
  --ink:#19252f;
  --blue:#2366df;
  --muted:#65717e;
  --line:#dce2e9;
  --pointer-x:0;
  --pointer-y:0;
  --scroll:0;
}

:root {
  --section-space:112px;
}

@media(max-width:900px) {
:root {
  --section-space:80px;
}
}

@media(max-width:640px) {
:root {
  --section-space:65px;
}
}

/* shared/base */
* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
}

a,
button {
  -webkit-tap-highlight-color:transparent;
}

a:focus-visible,
button:focus-visible {
  outline:3px solid #2366df;
  outline-offset:5px;
}

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

.skip-link {
  position:absolute;
  top:10px;
  left:12px;
  background:#fff;
  padding:12px;
  z-index:99;
  transform:translateY(-160%);
}

.skip-link:focus {
  transform:none;
}

.site-shell {
  max-width:1800px;
  margin:auto;
  padding:0 4.4vw;
  overflow:hidden;
}

.brand {
  display:inline-flex;
  gap:10px;
  align-items:center;
  flex:none;
  font-size:29px;
  letter-spacing:-1.35px;
  font-weight:600;
  color:#273644;
}

.brand img {
  width:43px;
  height:48px;
  object-fit:contain;
}

.brand picture {display:flex;align-items:center;flex:none}

.brand-number {
  font-weight:400;
  color:#2679ce;
}

.label-line {
  width:29px;
  height:1px;
  background:#658fae;
  position:relative;
  margin-bottom:5px;
}

.label-line:after {
  content:"";
  position:absolute;
  right:0;
  top:-2px;
  width:5px;
  height:5px;
  border:1px solid #658fae;
  border-radius:50%;
  background:var(--paper);
}

.label-note {
  font-size:11px;
  letter-spacing:0;
  color:#7d8b98;
}

.caption-mark {
  font-size:24px;
  font-weight:200;
  color:#597794;
}

@media(min-width:1600px) {
.site-shell {
  padding:0 75px;
}
.label-note {
  font-size:13px;
}
}

@media(max-width:640px) {
.site-shell {
  padding:0 23px;
}
.brand {
  font-size:25px;
  gap:7px;
  letter-spacing:-1.3px;
}
.brand img {
  width:32px;
  height:39px;
}
.label-line {
  width:20px;
  margin-bottom:2px;
}
.label-note {
  display:none;
}
}

@media(max-width:360px) {
.site-shell {
  padding:0 17px;
}
.brand {
  font-size:23px;
}
}

.site-shell {
  overflow:clip;
}

.label-note {
  font-size:12px;
}

@media(prefers-reduced-motion:reduce) {
html {
  scroll-behavior:auto;
}
a,
button {
  transition:none!important;
}
}

[hidden] {
  display:none!important;
}

#main,
#team,
#prices,
#contacts {
  scroll-margin-top:125px;
}

.content-section {
  padding:var(--section-space) 0;
}

.section-index {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  letter-spacing:1.1px;
  color:#6b7d8e;
  margin-bottom:44px;
}

h2,
h3,
p {
  overflow-wrap:break-word;
}

.content-section h2 {
  font-size:clamp(36px,3.55vw,62px);
  line-height:1.09;
  letter-spacing:-.045em;
  font-weight:500;
  margin:0 0 25px;
}

.content-section h2 span {
  color:var(--blue);
}

.content-section p {
  font-size:17px;
  line-height:1.65;
  color:var(--muted);
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:38px;
}

.section-heading h2 {
  margin:0;
}

.section-heading>p {
  font-size:16px;
  max-width:440px;
  margin:0 0 4px;
}

@media(max-width:900px) {
.section-index {
  margin-bottom:32px;
}
.section-heading {
  gap:25px;
}
.section-heading>p {
  font-size:15px;
  max-width:310px;
}
}

@media(max-width:640px) {
#main,
#team,
#prices,
#contacts {
  scroll-margin-top:103px;
}
.content-section h2 {
  font-size:36px;
  letter-spacing:-1.45px;
}
.section-index {
  font-size:10px;
  letter-spacing:.6px;
  margin-bottom:30px;
}
.section-index>span:last-child {
  font-size:11px;
  letter-spacing:0;
  text-align:right;
  max-width:145px;
}
.section-heading {
  display:block;
  margin-bottom:27px;
}
.section-heading>p {
  max-width:none;
  font-size:15px;
  margin:20px 0 0;
}
.section-heading>p br {
  display:none;
}
}

@media(max-width:360px) {
.content-section h2 {
  font-size:31px;
}
.section-index>span:last-child {
  max-width:120px;
}
}

/* shared/buttons */
.primary-action {
  display:inline-flex;
  align-items:center;
  gap:32px;
  font-size:14px;
  font-weight:550;
  letter-spacing:.1px;
  padding:8px 9px 8px 22px;
  min-height:53px;
  background:var(--ink);
  color:white;
  border-radius:5px;
  transition:background .25s,transform .25s;
  box-shadow:0 6px 18px #19252f10;
}

.primary-action:hover {
  background:var(--blue);
  color:white;
  transform:translateY(-2px);
}

.action-icon {
  display:grid;
  place-items:center;
  background:#ffffff16;
  font-size:23px;
  font-weight:300;
  border-radius:3px;
  width:37px;
  height:37px;
}

@media(min-width:1600px) {
.primary-action {
  font-size:16px;
  padding-left:25px;
  min-height:58px;
}
}

@media(max-width:1150px) {
.primary-action {
  gap:18px;
}
}

@media(max-width:640px) {
.primary-action {
  font-size:12px;
  gap:21px;
  padding-left:16px;
  min-height:49px;
}
.action-icon {
  width:32px;
  height:32px;
  font-size:22px;
}
}

@media(max-width:360px) {
.primary-action {
  gap:12px;
}
}

@media(max-width:640px) {
.primary-action {
  font-size:14px;
  gap:12px;
}
}

@media(max-width:360px) {
.primary-action {
  font-size:12px;
  gap:10px;
}
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:25px;
  padding:10px 0;
  border-bottom:1px solid #b6c4d2;
  font-size:15px;
  font-weight:500;
}

.text-link span {
  font-size:20px;
}

button.primary-action, button.text-link { cursor:pointer; font-family:inherit; }
button.primary-action { border:0; }
button.text-link { border-top:0; border-right:0; border-left:0; background:transparent; color:inherit; }
