:root {
    --accent: #5772A2;
    --dark: #5772A2;
    --muted: #6b7280;
    --bg: #f0e9dc; /*#f7fafc;*/
    --card: #ffffff;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--dark);
    line-height: 1.5
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 18px 50px;
    margin: 0 auto;
    background: var(--bg);
    border-radius: 10px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px
}

.logo {
    height: 68px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff
}

.logotext {
    font-size:13px;
    /*display:inline-block;*/
    vertical-align:bottom;
    color:#5772A2;
    margin-bottom:0px;
    font-weight:600;
}

.foto {
    height: 80px;
    border-radius: 6px;
}

nav a {
    margin-left: 18px;
    color: var(--dark);
    text-decoration: none;
    font-weight: 600;
    padding: 2px 5px 5px 5px;
}

    nav a:hover {
        margin-left: 18px;
        background-color: var(--dark);
        color: white !important;
        text-decoration: none;
        font-weight: 600;
        border-radius: 5px;
        border: 2px solid var(--dark);
        padding: 2px 5px 5px 5px;
    }

.hero {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 28px;
    align-items: center;
    margin: 18px 0;
}

    .hero .lead {
        background: var(--card);
        padding:28px;
        border-radius: 10px;
        box-shadow: 0 6px 18px rgba(15,23,32,0.06);
        margin-top:10px;
    }

.kpis {
    display: flex;
    gap: 12px;
    margin-top: 18px
}

.kpi {
    background: linear-gradient(180deg,#fff, #f4f7fb);
    padding: 12px;
    border-radius: 8px;
    flex: 1;
    text-align: center;
}

.services {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
    margin: 24px 0
}

.service {
    background: var(--card);
    padding: 18px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(15,23,32,0.04)
}

h1, h2, h3 {
    margin: 8px 0
}

.projects {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
    margin: 16px 0
}

.project {
    background: var(--card);
    padding: 14px;
    border-radius: 8px;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.about {
    display: flex;
    gap: 18px;
    align-items: center;
    margin: 18px 0
}

.team {
    display: flex;
    gap: 12px;
    text-align: center
}

.member {
    background: var(--card);
    padding: 12px;
    border-radius: 8px;
    flex: 1;
    text-align: center
}

.gotop {
    text-decoration: none;
    font-size: 10px;
    padding-left: 20px;
    color: var(--muted);
    padding-top:18px;
}

    .gotop:hover {
        text-decoration: none;
        font-size: 10px;
        padding-left: 20px;
        color: var(--accent);
        font-weight:600;
    }

footer {
    border-top: 1px solid #e6edf3;
    padding: 18px 18px 18px 50px;
    margin-top: 28px;
    color: var(--muted);
    font-size: 14px;
    background: var(--bg);
    border-radius: 10px;
}

.card {
    /*background: var(--card);*/
    background: linear-gradient(180deg,#fff, #f0e9dc);
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(15,23,32,0.04);
    margin: 10px;
    border: none !important;
}

form label {
    display: block;
    margin: 8px 0 6px;
    font-weight: 600
}

input, textarea, select {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #dbe7f5;
    background: #fff
}

button {
    background: var(--accent);
    color: #fff;
    padding: 10px 14px;
    border-radius: 5px !important;
    border: 2px solid var(--accent) !important;
    /*font-weight: 700;*/
    cursor: pointer
}

    button:hover {
        background: #fff;
        color: var(--accent);
        padding: 10px 14px;
        border-radius: 5px;
        border:2px solid var(--accent);
        font-weight: 700;
        cursor: pointer;
    }

.muted {
    color: var(--muted)
}

@media (max-width:920px) {
    .hero {
        grid-template-columns: 1fr
    }

    .projects, .services {
        grid-template-columns: repeat(2,1fr)
    }
}

.contact {
    display:grid;
    grid-template-columns:1fr 360px;
    gap:16px;
}

@media (max-width:660px) {
    nav {
        display: none
    }

    .projects, .services {
        grid-template-columns: 1fr
    }

    .contactOnMob {
        display:block;
    }

    .contact {
        display:block;
    }

    .kpismall {
        font-size:12px;
    }

}

a {
    color: #5772A2 !important;
    /*text-decoration: none !important;*/
}