/* Explain: Reusable streaming media cards, buttons, frames, and generic components */
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-color);
    color: var(--accent-color);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.5rem 0.8rem;
    text-transform: uppercase;
}

.agency-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
    box-shadow: var(--shadow-card);
}

.property-card {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
    box-shadow: var(--shadow-card);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.property-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-soft);
    transform: translateY(-5px);
}

.nav-link {
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.65rem 0.85rem;
    transition: background 180ms ease, color 180ms ease;
}

.nav-link:hover,
.nav-link:focus-visible {
    background: var(--surface-strong);
    color: var(--white-color);
}

.mobile-menu-panel {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--background-color);
    box-shadow: var(--shadow-card);
}

.hero-media-frame {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.contact-input {
    min-height: 3.1rem;
    border-color: var(--border-color);
    background: var(--surface-color);
    color: var(--text-color);
}

.contact-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.contact-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.3);
    outline: none;
}

.form-status {
    border-radius: 1rem;
    font-weight: 700;
    padding: 0.9rem 1rem;
}

.form-status.success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success-color);
}

.form-status.error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error-color);
}

.hero-marquee-track {
    animation: hero-marquee-scroll 30s linear infinite;
    will-change: transform;
}

.review-carousel-track {
    scrollbar-width: none;
}

.review-carousel-track::-webkit-scrollbar {
    display: none;
}

.bg-orange-50,
.bg-orange-50\/50 {
    background-color: var(--surface-strong) !important;
}

.bg-orange-100 {
    background-color: var(--surface-color) !important;
}

.bg-red-100 {
    background-color: rgba(229, 9, 20, 0.15) !important;
}

.bg-red-700 {
    background-color: var(--primary-color) !important;
}

.border-orange-100 {
    border-color: var(--border-color) !important;
}

.text-orange-100 {
    color: var(--text-muted) !important;
}

.text-orange-400,
.text-orange-500,
.text-red-800 {
    color: var(--accent-color) !important;
}

.shadow-orange-500\/25,
.shadow-orange-500\/30 {
    box-shadow: var(--shadow-soft) !important;
}

.footer-visual-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.95)),
        url('https://files.cdn-files-a.com/uploads/12269527/normal_gi-6a5b0a836f0a1.jpg?format=avif');
    background-position: center;
    background-size: cover;
    opacity: 0.3;
    pointer-events: none;
}

.footer-visual-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, var(--background-color), transparent 10%, transparent 90%, var(--background-color));
    pointer-events: none;
}

.hero-marquee-track .fa-star,
.text-yellow-400,
.text-yellow-500,
.text-yellow-300 {
    color: var(--accent-color) !important;
}

@keyframes hero-marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-marquee-track {
        animation: none;
    }
}