* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

body {
background: #000;
color: #fff;
font-family: Arial, sans-serif;
min-height: 100vh;
}

main {
min-height: 72vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px 20px;
text-align: center;
}

h1 {
font-size: 72px;
letter-spacing: 0.08em;
margin-bottom: 20px;
text-transform: uppercase;
}

.category {
font-size: 14px;
font-weight: bold;
letter-spacing: 0.08em;
margin-bottom: 24px;
text-transform: uppercase;
opacity: 0.8;
}

.acquisition-note {
margin: 0 0 28px;
color: #a78bfa;
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
text-align: center;
line-height: 1.8;
}

form {
width: 100%;
max-width: 500px;
}

input,
textarea {
width: 100%;
background: #000;
color: #fff;
border: 1px solid #fff;
padding: 14px;
margin-bottom: 14px;
font-size: 14px;
}

textarea {
min-height: 140px;
resize: vertical;
}

button {
width: 100%;
background: #fff;
color: #000;
border: none;
padding: 14px;
cursor: pointer;
font-size: 14px;
text-transform: uppercase;
}

.related-grid {
width: 100%;
max-width: 1600px;
margin: 120px auto 0;
padding: 0 40px;

display: grid;
grid-template-columns: repeat(5, 1fr);
column-gap: 80px;

align-items: start;

}

.related-column {
display: flex;
flex-direction: column;
gap: 36px;
}

.related-category {
width: 100%;
}

.related-category h3 {
font-size: 12px;
font-weight: bold;
letter-spacing: 0.08em;
margin-bottom: 16px;
text-transform: uppercase;
line-height: 1.4;
}

.related-category ul {
list-style: none;
}

.related-category li {
margin-bottom: 10px;
font-size: 13px;
opacity: 0.92;
}

.related-category a {
color: #fff;
text-decoration: none;
}

.related-category a:hover {
opacity: 0.7;
}

.bundle-note,
.footer-note {
width: 100%;
margin: 28px auto 24px;
text-align: center;
color: #a78bfa;
font-size: 14px;
opacity: 1;
letter-spacing: 0.03em;
}

@media (max-width: 1500px) {

.related-grid {

    grid-template-columns: repeat(4, 1fr);

}

}

@media (max-width: 1200px) {

.related-grid {

    grid-template-columns: repeat(3, 1fr);

}

}

@media (max-width: 850px) {

.related-grid {

    grid-template-columns: repeat(2, 1fr);

}

h1 {

    font-size: 42px;

}

}

@media (max-width: 520px) {

.related-grid {

    grid-template-columns: 1fr;

    gap: 0;

    padding: 0 28px;

}

.related-column {

    display: flex;

    flex-direction: column;

    gap: 54px;

}

.related-category {

    margin-bottom: 0;

}

.related-category h3 {

    margin-bottom: 22px;

}

.related-category ul {

    margin-top: 0;

}

.related-category li {

    margin-bottom: 18px;

}

h1 {

    font-size: 30px;

}

}