@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap");

:root {
  --outer: #000000;
  --black: #000000;
  --card: #151515;
  --card-soft: #171717;
  --text: #f4f4f4;
  --muted: #898989;
  --line: rgba(255, 255, 255, 0.07);
  --green: #55d47f;
  --cyan: #10d4d8;
  --pink: #f763a6;
  --yellow: #f1d44c;
  --radius: 18px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--outer);
  color: var(--text);
  font-family: "Manrope", "Trebuchet MS", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

button {
  font: inherit;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #ffffff;
  color: #000000;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.page {
  width: min(100% - 24px, 1110px);
  min-height: calc(100vh - 48px);
  margin: 24px auto;
  padding: 14px 90px 82px;
  overflow: visible;
  background: var(--black);
}

.intro {
  position: relative;
  display: flex;
  min-height: 300px;
  align-items: center;
  overflow: visible;
  margin-bottom: 22px;
  isolation: isolate;
}

.intro-copy {
  position: relative;
  z-index: 2;
  max-width: 520px;
  padding-block: 24px;
}

.intro-kicker {
  margin: 0 0 7px;
  color: #6ba348;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.intro h1 {
  margin: 0 0 18px;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.intro-subtitle {
  margin: 0 0 17px;
  color: #777777;
  font-size: 13px;
  font-weight: 700;
}

.intro-text {
  max-width: 430px;
  margin: 0 0 22px;
  color: #858585;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

.intro-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 27px;
  border-radius: 4px;
  background: #89c763;
  color: #101010;
  font-size: 12px;
  font-weight: 800;
}

.button-arrow {
  width: 13px;
  height: 13px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFTSURBVHhe7dkxbsMwDAXQ3ICfg4GOPU6P0WNk7R26d+wROuYYGTtm7BIgU9CCgLOwjANbSita/wFcZMHSJ4IYljcbIiIiIiIiIiK6j2EYHgC8AfgE8F1QZwBHVX3xazRLRB4BfAVhikpEXv1aTQLw7jc/p1T119hYZ79WkwAcgs1XKRGBX685AHZ+47XKr9UkVX3yG69Vfq1micjzPf4I/Tqpjb+Ukw85Vf4eaS0Jv5oGLA2/igaUhE/fgNLwqRswI7y9P/ix3A2YE97mB+N5GzA3vAmu5WzAkvAmuJ6vAUvDm2BOrgaUhDfBvDwNKA1vgrk5GlAjvJm6h5/bjFrhzcR5wsHPbULN8ObaeYKqbv3cf1c7/IU7Tzh1FT6FrsOPHz36DG9uvbGtOrwBsA8C9xHeAPgIQvcR3lx7TncR/iLFc/ov2JdgP0ZERERERERETfkBqrEx3xlQlNQAAAAASUVORK5CYII=") center / contain no-repeat;
}

.intro-glow {
  position: absolute;
  top: 34px;
  right: calc((1110px - 100vw) / 2 - 90px - clamp(210px, 20vw, 350px));
  z-index: 0;
  width: clamp(420px, 40vw, 700px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(92, 165, 72, 0.68) 0%,
    rgba(62, 130, 55, 0.42) 35%,
    rgba(32, 92, 36, 0.24) 58%,
    rgba(12, 45, 18, 0.1) 74%,
    transparent 82%
  );
  filter: blur(5px);
  opacity: 0.96;
  pointer-events: none;
}

.section + .section {
  margin-top: 94px;
}

h1,
h2 {
  margin: 0 0 40px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.12;
}

.experience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.stat-card {
  display: grid;
  min-height: 202px;
  place-items: center;
  padding: 34px 22px;
  border-radius: var(--radius);
  background: var(--card);
  text-align: center;
}

.stat-card strong {
  margin-top: 26px;
  font-size: 17px;
  font-weight: 700;
}

.stat-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.stat-link strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.badge-icon {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.24), transparent 30%),
    linear-gradient(135deg, #76ef75 0%, #28d6c8 100%);
  color: #101010;
  font-size: 0;
}

.stat-icon {
  width: 46px;
  height: 46px;
}

.badge-icon::before,
.badge-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.badge-icon::before {
  width: var(--icon-size, 24px);
  height: var(--icon-size, 24px);
  background: currentColor;
  mask: var(--icon-mask) center / contain no-repeat;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
}

.badge-icon::after {
  display: none;
}

.icon-clock {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.icon-crown {
  --icon-size: 25px;
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17h16l-1-10-5 4-2-6-2 6-5-4-1 10z'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
}

.icon-shield {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6l7-3z'/%3E%3Cpath d='M12 8v7'/%3E%3C/svg%3E");
}

.icon-package {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16v11H4z'/%3E%3Cpath d='M7 5h10l3 3H4l3-3z'/%3E%3Cpath d='M12 8v11'/%3E%3C/svg%3E");
}

.icon-shirt {
  --icon-size: 25px;
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4l4 2 4-2 4 3-2 4-2-1v10H8V10l-2 1-2-4 4-3z'/%3E%3C/svg%3E");
}

.icon-code {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5'/%3E%3Cpath d='M15 7l5 5-5 5'/%3E%3C/svg%3E");
}

.icon-chat {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-7l-5 4v-4H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}

.icon-telegram {
  --icon-size: 22px;
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M21.7 4.4 18.5 19.7c-.2.9-.8 1.1-1.6.7l-4.5-3.3-2.2 2.1c-.2.2-.4.4-.8.4l.3-4.7 8.5-7.7c.4-.3-.1-.5-.6-.2L7 13.8 2.4 12.4c-1-.3-1-.9.2-1.4L20.3 4.1c.8-.3 1.5.2 1.4.3z'/%3E%3C/svg%3E");
}

.icon-vk {
  --icon-size: 24px;
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3 7.2h3c.1 3.5 1.6 5.6 3 6.1V7.2h2.8v3.5c1.4-.2 2.8-2 3.3-3.5h2.8c-.5 2.1-2.2 3.8-3.4 4.5 1.2.6 3.1 2.1 3.8 4.9h-3.1c-.6-1.6-1.9-3.1-3.4-3.3v3.3h-.3C6.8 16.6 3.5 13.4 3 7.2z'/%3E%3C/svg%3E");
}

.icon-discord {
  --icon-size: 24px;
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8.2 6.4c1-.4 2-.6 3.1-.7l.3.7c1-.1 1.9-.1 2.9 0l.3-.7c1.1.1 2.1.4 3.1.7 2 3 2.5 5.9 2.2 8.8-1.3 1-2.7 1.6-4.1 2l-.9-1.4c.5-.2 1-.4 1.4-.7-.2-.1-.3-.2-.5-.3-2.7 1.2-5.4 1.2-8.1 0-.2.1-.4.2-.5.3.5.3.9.5 1.4.7l-.9 1.4c-1.5-.4-2.8-1-4.1-2-.3-3 .3-5.9 2.2-8.8zM9.4 13.7c.7 0 1.2-.6 1.2-1.3s-.5-1.3-1.2-1.3-1.2.6-1.2 1.3.6 1.3 1.2 1.3zm5.2 0c.7 0 1.2-.6 1.2-1.3s-.5-1.3-1.2-1.3-1.2.6-1.2 1.3.5 1.3 1.2 1.3z'/%3E%3C/svg%3E");
}

.materials-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.material-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  min-height: 128px;
  padding: 32px 36px;
  border-radius: 16px;
  background: var(--card);
}

.material-icon {
  width: 48px;
  height: 48px;
  font-size: 11px;
}

.material-card strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
}

.material-card small {
  display: block;
  margin-top: 10px;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
}

.inline-arrow {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 6px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFkSURBVHhe7dmxTsMwEAbgPgIjI4/DxmKLlcdgOsM7sDP2ERh5BAS5qiMjIwtSJ1R0lSpVP0qhtgu++P8kL4mV83+KEsWZzYiIiIiIiIiI6DiiptOwkPug8ho1rbPGIq3DIJ9B5SM839xijWZdLtNZVHn/FqhwhCHdYa0mRZU5Lr7GsLsBazUpDPKGi681Lp7SCdZrTlR5xIXXGlirSUHTOS681sBazYqaro7xIMQ6rtmdEgZZYch9A6/hVk74yTQgN/wkGlAS3n0DSsO7bsBvw9v3Ax5z34BDwtt8PO66AYeGN3jObQNywhs877IBueENznHXgJLwBue5akBpeINz3TSgRniz7xo4txm1wpux/QTbaMG5TagZ3ozuJ7yka5z772qH39rdT9hcv6fwLnQdfvPTo9fw5qcvtkmHN1FliYG7CW/CIA8YupvwZuw93UX4LRfv6b9gf4LxGBERERERERE15QvbnBPsZ1ozUAAAAABJRU5ErkJggg==") center / contain no-repeat;
  vertical-align: -1px;
}

.contacts-section {
  padding-bottom: 6px;
}

.contacts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.contact-card {
  position: relative;
  display: flex;
  min-height: 208px;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px 34px 31px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: var(--card-soft);
}

.social-icon {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.contact-card strong {
  display: block;
  font-size: 18px;
  font-weight: 600;
}

.contact-card small {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.card-arrow {
  position: absolute;
  right: 34px;
  bottom: 31px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
}

.card-arrow::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFTSURBVHhe7dkxbsMwDAXQ3ICfg4GOPU6P0WNk7R26d+wROuYYGTtm7BIgU9CCgLOwjANbSita/wFcZMHSJ4IYljcbIiIiIiIiIiK6j2EYHgC8AfgE8F1QZwBHVX3xazRLRB4BfAVhikpEXv1aTQLw7jc/p1T119hYZ79WkwAcgs1XKRGBX685AHZ+47XKr9UkVX3yG69Vfq1micjzPf4I/Tqpjb+Ukw85Vf4eaS0Jv5oGLA2/igaUhE/fgNLwqRswI7y9P/ix3A2YE97mB+N5GzA3vAmu5WzAkvAmuJ6vAUvDm2BOrgaUhDfBvDwNKA1vgrk5GlAjvJm6h5/bjFrhzcR5wsHPbULN8ObaeYKqbv3cf1c7/IU7Tzh1FT6FrsOPHz36DG9uvbGtOrwBsA8C9xHeAPgIQvcR3lx7TncR/iLFc/ov2JdgP0ZERERERERETfkBqrEx3xlQlNQAAAAASUVORK5CYII=") center / contain no-repeat;
}

.toast {
  position: fixed;
  z-index: 100;
  right: 22px;
  bottom: 76px;
  max-width: min(360px, calc(100vw - 40px));
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: #151515;
  color: #ffffff;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stat-card:focus-visible,
.material-card:focus-visible,
.contact-card:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}

@media (max-width: 1134px) and (min-width: 921px) {
  .intro-glow {
    right: calc(-102px - clamp(210px, 20vw, 350px));
  }
}

@media (max-width: 920px) {
  .page {
    padding-inline: 44px;
  }

  .intro-glow {
    top: 58px;
    right: calc(-56px - clamp(180px, 28vw, 260px));
    width: clamp(360px, 56vw, 520px);
    opacity: 0.78;
  }

  .experience-grid,
  .contacts-grid {
    grid-template-columns: 1fr;
  }

  .materials-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .page {
    width: min(100% - 14px, 1110px);
    min-height: calc(100vh - 14px);
    margin-block: 7px;
    padding: 12px 18px 70px;
  }

  .intro {
    min-height: 338px;
    margin-bottom: 8px;
  }

  .intro h1 {
    font-size: 42px;
  }

  .intro-text {
    max-width: 100%;
    font-size: 13px;
  }

  .intro-glow {
    top: 20px;
    right: -195px;
    width: 340px;
    opacity: 0.52;
  }

  .section + .section {
    margin-top: 70px;
  }

  h1,
  h2 {
    margin-bottom: 26px;
    font-size: 27px;
  }

  .stat-card {
    min-height: 178px;
  }

  .material-card {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 18px;
    min-height: 112px;
    padding: 25px 22px;
  }

  .material-icon {
    width: 46px;
    height: 46px;
  }

  .contact-card {
    min-height: 186px;
    padding: 30px 28px 28px;
  }

  .card-arrow {
    right: 28px;
    bottom: 28px;
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}