.hero {
    padding: 72px 0 32px;
}

.hero__content {
    display: grid;
    gap: 18px;
}

.hero__title {
    max-width: 10ch;
    font-family: var(--display-font);
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
}

.hero__lead {
    max-width: 58ch;
    color: var(--ink-muted);
    font-size: 1.08rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero__panel {
    display: grid;
    gap: 16px;
    align-content: start;
}

.material-card,
.hero__note,
.cta-banner {
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow-soft);
}

.material-card {
    min-height: 140px;
    color: white;
    display: flex;
    align-items: end;
    font-family: var(--display-font);
    font-size: 1.5rem;
}

.material-card--wood {
    background:
        linear-gradient(160deg, rgba(43, 23, 8, 0.15), rgba(17, 17, 17, 0.2)),
        linear-gradient(120deg, #7b4b27, #ba7a47);
}

.material-card--resin {
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(4, 23, 29, 0.35)),
        linear-gradient(120deg, #19838d, #38d7cf);
}

.hero__note {
    background: rgba(255, 250, 244, 0.85);
    border: 1px solid var(--line);
    color: var(--ink-muted);
}

.section-highlight {
    background: linear-gradient(180deg, rgba(27, 166, 160, 0.08), rgba(255, 255, 255, 0));
}