body {
        font-family: "Cairo Play", sans-serif;
        background: #0d0d0d;
        color: white;
        font-weight: 200;
    }

    h1 {
        font-weight: 200;
    }
    
    .brush {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        padding: 10px 20px; /* bigger padding so brush fully covers behind */
        border-radius: 6px;
        opacity: 0;
        font-weight: 800;
        display: inline-block;
    }

    /* Bigger, fuller brush strokes */
    .brush-servers {
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='300' height='90' viewBox='0 0 300 90'>\
<path fill='%23FF6B6B' d='M15 45 Q80 5 160 30 T285 35 Q220 85 150 70 T15 45Z'/>\
</svg>");
    }

    .brush-devops {
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='300' height='90' viewBox='0 0 300 90'>\
<path fill='%234ECDC4' d='M15 45 Q90 8 180 32 T285 40 Q220 88 120 75 T15 45Z'/>\
</svg>");
    }

    .brush-stress {
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='300' height='90' viewBox='0 0 300 90'>\
<path fill='%23FFD93D' d='M15 45 Q70 12 150 28 T280 40 Q210 90 130 76 T15 45Z'/>\
</svg>");
    }