:root {
  --cyan: #30e8ef;
  --purple: #9a5cff;
  --bg: #050815;
  --panel: #0d1225;
  --line: #283152;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background:
    radial-gradient(circle at 75% 5%, #24227655, transparent 32%), var(--bg);
  color: #f8f7ff;
  font-family: Inter, system-ui, sans-serif;
}
header {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(22px, 6vw);
  border-bottom: 1px solid var(--line);
}
header > a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  text-decoration: none;
  font-size: 23px;
  font-weight: 900;
}
header > a img {
  width: 45px;
  border-radius: 13px;
}
header span,
.hero h1 span {
  color: var(--cyan);
}
header nav {
  display: flex;
  gap: 25px;
}
header nav a,
footer a {
  color: #b1b7ce;
  text-decoration: none;
}
.hero {
  min-height: 650px;
  padding: 70px max(24px, 7vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.hero > div > p:first-child,
.areas > p,
.language > div > p:first-child {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.22em;
}
.hero h1 {
  font-size: clamp(55px, 8vw, 105px);
  line-height: 0.9;
  margin: 18px 0;
}
.hero > div > p:not(:first-child) {
  max-width: 650px;
  color: #b2b8cc;
  font-size: 18px;
  line-height: 1.7;
}
.hero > div > div {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.hero img {
  width: 100%;
  border: 1px solid #413a7b;
  border-radius: 26px;
  box-shadow: 0 30px 90px #0009;
}
.areas {
  padding: 90px max(24px, 7vw);
  background: #080b18;
}
.areas h2,
.language h2 {
  font-size: clamp(38px, 5vw, 64px);
}
.areas > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}
.areas article {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}
.areas article b {
  color: var(--purple);
  font-size: 28px;
}
.areas article p,
.language p {
  color: #9fa8bf;
  line-height: 1.7;
}
.areas article a {
  color: var(--cyan);
  text-decoration: none;
  font-weight: 800;
}
.language {
  padding: 90px max(24px, 8vw);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
.language > div {
  max-width: 750px;
}
footer {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 38px;
  border-top: 1px solid var(--line);
}
@media (max-width: 850px) {
  header nav a:not(:last-child) {
    display: none;
  }
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .areas > div {
    grid-template-columns: 1fr 1fr;
  }
  .language {
    display: block;
  }
}
@media (max-width: 520px) {
  .areas > div {
    grid-template-columns: 1fr;
  }
  .hero h1 {
    font-size: 52px;
  }
}