/* ===== Base / Mobile First ===== */
:root {
    --bg-page: #F1F1F4;
    --bg-section: #D7D7E0;
    --bg-dark: #0B0B0E;

    --brand: #22222C;
    --text-main: #22222C;
    --text-muted: #6F6F90;

    --border-subtle: #47475C;
}

/* Reset / Base */
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    background: var(--bg-page);
    color: var(--text-main);
}

/* Header */
header {
    background:
        radial-gradient(
            80% 60% at 50% 0%,
            rgba(111, 111, 144, 0.55),
            var(--brand)
        );
    color: #fff;
    padding: 2rem 1rem;
    text-align: center;
    box-shadow: inset 0 -40px 60px rgba(0, 0, 0, 0.25);
}

header p {
    margin-top: 0.75rem;
}

.site-logo {
    width: 80vw;
    max-width: 400px;
}

/* Utility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* Sections */
section {
    padding: 2rem 1rem;
}

section:not(.cta) {
    border-bottom: 1px solid var(--border-subtle);
}

h2 {
    margin-top: 0;
    font-size: 1.4rem;
}

/* Buttons */
.header-cta {
    display: inline-block;
    margin-top: 1.25rem;
    padding: 0.75rem 1.25rem;
    background: var(--border-subtle);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

/* Images */
.service-images {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.service-images img {
    width: 45%;
    border-radius: 4px;
}

/* Lists */
.services ul,
.why ul {
    list-style: none;
    padding: 0;
}

.services li,
.why li {
    display: flex;
    padding: 0.5rem 0;
}

.services li::before,
.why li::before {
    content: "✔";
    margin-right: 0.5rem;
    color: var(--brand);
}

/* Why section ordering */
.why {
    display: flex;
    flex-direction: column;
}

.why-image img {
    width: 60%;
    max-width: 500px;
}

.why-content { order: 1; }
.why-image   { order: 2; }

/* Connect */
.connect {
    background: var(--bg-section);
    text-align: center;
}

.connect h2 {
    margin-bottom: 0.25rem;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.social-links a {
    display: inline-flex;
    padding: 0.4rem;
    text-decoration: none;
}

.social-links img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

/* Footer */
footer {
    background: var(--brand);
    color: #BDBDCC;
    text-align: center;
    padding: 1.25rem;
    font-size: 0.85rem;
}

/* Desktop */
@media (min-width: 768px) {

    section {
        max-width: 900px;
        margin: auto;
        padding: 3rem 1.5rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    .services {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
    }

    .service-images img {
        width: 48%;
        max-width: 420px;
    }

    .why {
        flex-direction: row;
        gap: 2rem;
        align-items: flex-start;
    }

    .why-image img {
        width: 60%;
        max-width: 500px;
    }

    .why-content { order: 2; }
    .why-image   { order: 1; }
}

/* Hover */
@media (hover: hover) {
    .header-cta:hover {
        background: #333;
    }

    .social-links a:hover img {
        transform: scale(1.08);
    }

    .social-links img {
        transition: transform 0.15s ease;
    }
}