:root {
    --site-primary: #1f4e79;
    --site-dark: #13293d;
    --site-bg: #f5f7fa;
    --site-card: #ffffff;
    --site-text: #1f2937;
    --site-muted: #5f6b7a;
}

body {
    background: var(--site-bg);
    color: var(--site-text);
    font-family: Arial, Helvetica, sans-serif;
}

/* HERO */
.hero-section {
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(31,78,121,0.95), rgba(19,41,61,0.90));
    color: #fff;
    padding: 2.5rem 1.5rem;
    box-shadow: 0 12px 35px rgba(0,0,0,0.10);
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
}

.hero-text {
    color: rgba(255,255,255,0.9);
}

/* CARDS */
.section-card {
    border-radius: 1.25rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.section-title {
    color: var(--site-primary);
    font-weight: 700;
}

.soft-muted {
    color: var(--site-muted);
}

/* GALLERY */
.gallery-card {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0,0,0,0.06);
    transition: 0.2s;
}

.gallery-card:hover {
    transform: translateY(-4px);
}

.gallery-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/* COUNTER */
.hit-counter {
    background: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: inline-block;
    font-weight: bold;
    color: var(--site-primary);
}

/* MOBILE */
@media (max-width: 768px) {
    .hero-section {
        padding: 2rem 1rem;
        border-radius: 1rem;
    }

    .gallery-card img {
        height: 220px;
    }
}

.site-gallery-image {
    height: 250px;
    object-fit: cover;
    display: block;
}

.gallery-card img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

@media (max-width: 767.98px) {
    .site-gallery-image,
    .gallery-card img {
        height: 210px;
    }
}