/* Shared band: a full-width section bounded by 1px lines, grid lines at the gutters,
   and dots where they meet the bottom line (as in the Figma landing page). */
.band {
  margin-top: 9px;
  border-block: 1px solid var(--color-line);
  background: var(--color-bg);
}
.band--alt { background: var(--color-bg-alt); }
.band__stage {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  border-inline: 0;
}
.band__stage::before,
.band__stage::after {                       /* vertical grid lines */
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 1px; background: var(--color-line);
}
.band__stage::before { left: var(--gutter); }
.band__stage::after  { right: var(--gutter); }

/* dots where the gutter lines meet the bottom line */
.hero::before, .hero::after,
.band::before, .band::after {
  content: "";
  position: absolute;
  bottom: -12px;                            /* centred in the gap between the two lines, painted above both */
  z-index: 2;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-dot);
  border: 2px solid var(--color-line);
  box-sizing: border-box;
}
.hero::before, .band::before { left:  max(calc(var(--gutter) - 7px), calc((100% - var(--container)) / 2 + var(--gutter) - 7px)); }
.hero::after,  .band::after  { right: max(calc(var(--gutter) - 7px), calc((100% - var(--container)) / 2 + var(--gutter) - 7px)); }
.band { position: relative; }
/* first section under the nav: no gap (a 9px gap would let the fixed footer show through at the top) */
.band--first { margin-top: 0; border-top: 0; }
.band .band__stage { overflow: hidden; }

/* Materials ---------------------------------------------------- */
.materials__pattern {
  position: absolute; inset: 0;
  background: url("../assets/sections/shapes-pattern.png") top left / 275px 275px;
  opacity: .4;
  pointer-events: none;
}
.materials__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--head-gap);
  padding: var(--section-y) var(--gx);   /* same top + bottom rhythm for every band */
}
.t-h2--regular { font-weight: 400; }
.materials__title { max-width: 805px; text-align: center; }
.materials__list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 24px 70px;
  margin: 0; padding: 0; list-style: none;
}
.material {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: var(--w);
}
.material__icon { position: relative; display: block; width: 61px; height: 59.5px; overflow: hidden; }
.material__icon img { position: absolute; max-width: none; }
.material__label {
  font: 400 16px/1 var(--font-ui);                       /* Figma 107:233 – 108:260: Outfit Regular 16, #555, -1% */
  letter-spacing: -0.16px;
  color: #555;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .materials__title br { display: none; }
}
@media (max-width: 599px) {
  .materials__list { gap: 24px 28px; }
}