body {
    font-family: 'Inter', sans-serif;
    background-color: #faf9f5;
    color: #1b1c1a;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.hero-gradient {
    background: linear-gradient(
        105deg,
        rgba(27, 28, 26, 0.82) 0%,
        rgba(27, 28, 26, 0.62) 45%,
        rgba(27, 28, 26, 0.35) 100%
    );
}

.hero-text-shadow {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}

.hero-badge {
    background: rgba(27, 28, 26, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    backdrop-filter: blur(8px);
}

.hero-btn-outline {
    background: rgba(27, 28, 26, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.85);
    color: #ffffff;
    backdrop-filter: blur(6px);
}

.hero-btn-outline:hover {
    background: rgba(27, 28, 26, 0.75);
    border-color: #ffffff;
}

.page-hero-gradient {
    background: linear-gradient(135deg, rgba(66, 100, 71, 0.92), rgba(27, 28, 26, 0.75));
}

.landing-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.landing-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(27, 28, 26, 0.12);
}

.contact-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-field {
    width: 100%;
    height: 2.75rem;
    padding: 0 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(194, 200, 191, 0.7);
    background: #f4f4f0;
    color: #1b1c1a;
    font-size: 0.95rem;
    line-height: 1.4;
}

.contact-field:focus {
    outline: none;
    border-color: #426447;
    box-shadow: 0 0 0 3px rgba(66, 100, 71, 0.2);
    background: #ffffff;
}

.contact-field-textarea {
    height: auto;
    min-height: 10rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    resize: vertical;
}

.contact-field-error {
    border-color: #b91c1c;
    background: #fef2f2;
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 520px !important;
    }
}