/* Explain: Custom component styles for components like buttons, headers, and links. - */
.eyebrow {
    font-weight: 800;
}

.site-header {
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--surface-color) 95%, transparent);
    backdrop-filter: blur(18px);
}

.icon-orb {
    display: inline-flex;
    height: 3.25rem;
    width: 3.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mint-color) 74%, var(--surface-color));
    color: var(--primary-color);
}

/* Global Button Hover Enhancements */
.btn {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease !important;
}
.btn:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--primary-color) 40%, transparent);
}
.btn:active {
    transform: scale(0.98) translateY(0);
}

/* Specific offset for sticky header targets */
#services,
#team,
#gallery,
#calculator,
#faq {
    scroll-margin-top: 6rem;
}