:root{
    --ClientColor: #1F7A72;
    --ProtocolColor: #B8791A;
    --ServerColor: #BF5A24;
    --DatabaseColor: #3C5AA6;
    --InfrastructureColor: #2E7D46;
    --SecurityColor: #B23A3A;
    --ArchitectureColor: #7A4FA0;

    --ink: #13262D;
    --muted: #4C6169;
    --surface: #FFFFFF;
    --bg: #EAF1F1;
    --radius: 14px;
    --shadow: 0 10px 24px rgba(19, 38, 45, 0.10);
}

*, *::before, *::after{
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 40px clamp(12px, 1.5vw, 16px);
    color: var(--ink);
    background:
    radial-gradient(rgba(19, 38, 45, 0.10) 1.4px, transparent 1.4px) 0 0 / 26px 26px,
    var(--bg);
}

h1, h2{
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    margin: 0 0 12px;
}

p{
    font-family: "Source Sans 3", sans-serif;
    font-size: clamp(16px, 1vw + 0.9rem, 20px);
    line-height: 1.5;
    color: var(--muted);
    margin: 0;
}

header{
    max-width: 1200px;
    margin: 0 auto 40px;
}

header h1{
    font-size: clamp(28px, 3vw + 1rem, 44px);
    color: var(--ink);
    animation: fade-in-up .6s .1s ease both;
}

header > p{
    max-width: 640px;
    margin: 12px 0 0;
    animation: fade-in-up .6s .2s ease both;
}

.eyebrow{
    display: inline-block;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ClientColor);
    background: rgba(31, 122, 114, 0.10);
    padding: 6px 14px;
    border-radius: 999px;
    margin: 0 0 16px;
    animation: fade-in-up .5s ease both;
}

section{
    max-width: 1200px;
    margin: 0 auto 40px;
}

section figure{
    margin: 0;
}

section img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    animation: scale-in .7s .1s ease both;
    transition: transform .3s ease;
}

section img:hover{
    transform: scale(1.015);
}

section figcaption{
    font-family: "Source Sans 3", sans-serif;
    font-size: clamp(15px, 1vw + 0.8rem, 18px);
    color: var(--muted);
    line-height: 1.5;
    margin-top: 16px;
}

main{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.card{
    --accent: var(--ClientColor);
    flex: 1 1 300px;
    max-width: 380px;
    background: var(--surface);
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 3px solid var(--accent);
    opacity: 0;
    transform: translateY(16px);
    animation: fade-in-up .5s ease forwards;
    transition: transform .25s ease, box-shadow .25s ease;
}

.card:hover,
.card:focus-within{
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.card h2{
    color: var(--accent);
    font-size: 19px;
    margin-bottom: 8px;
}

.card p{
    font-size: 14px;
    line-height: 1.45;
}

.card:nth-child(1){ animation-delay: .05s; }
.card:nth-child(2){ animation-delay: .12s; }
.card:nth-child(3){ animation-delay: .19s; }
.card:nth-child(4){ animation-delay: .26s; }
.card:nth-child(5){ animation-delay: .33s; }
.card:nth-child(6){ animation-delay: .40s; }
.card:nth-child(7){ animation-delay: .47s; }

#Client{ --accent: var(--ClientColor); }
#Protocols{ --accent: var(--ProtocolColor); }
#Server{ --accent: var(--ServerColor); }
#Database{ --accent: var(--DatabaseColor); }
#Infrastructure{ --accent: var(--InfrastructureColor); }
#Security{ --accent: var(--SecurityColor); }
#Architecture{ --accent: var(--ArchitectureColor); }


@keyframes fade-in-up{
    from{
        opacity: 0;
        transform: translateY(16px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scale-in{
    from{
        opacity: 0;
        transform: scale(.98);
    }
    to{
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 640px){
    body{
        padding: 28px 16px;
    }
    .card{
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}