USP

<style>
    .trusted-section {
        width: 100%;
        padding: 80px 15px;
        background: linear-gradient(to bottom, #ffffff 0%, #f7f2f3 50%, #ffffff 100%);
        position: relative;
        overflow: hidden;
    }

    .trusted-section:before,
    .trusted-section:after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: #e7dedc;
        opacity: 0.9;
    }

    .trusted-section:before {
        top: 0;
    }

    .trusted-section:after {
        bottom: 0;
    }

    .trusted-container {
        max-width: 1200px;
        margin: 0 auto;
        text-align: center;
    }

    .trusted-title {
        font-size: 42px;
        font-weight: 500;
        letter-spacing: 0.5px;
        margin-bottom: 60px;
        color: #4c4c4c;
        font-family: Georgia, serif;
    }

    .trusted-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        align-items: center;
        justify-content: center;
    }

    .trusted-item {
        padding: 10px 20px;
        text-align: center;
        position: relative;
    }

    .trusted-item:not(:last-child):after {
        content: "";
        position: absolute;
        right: 0;
        top: 15%;
        height: 70%;
        width: 1px;
        background: #dedede;
    }

    .trusted-icon {
        width: 70px;
        height: 70px;
        margin: 0 auto 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .trusted-icon svg {
        width: 65px;
        height: 65px;
        stroke: #4c4c4c;
        stroke-width: 2;
        fill: none;
    }

    .trusted-text {
        font-size: 20px;
        color: #555;
        font-weight: 400;
        line-height: 1.4;
        font-family: Arial, sans-serif;
    }

    /* Responsive */
    @media (max-width: 1024px) {
        .trusted-title {
            font-size: 34px;
        }

        .trusted-text {
            font-size: 18px;
        }
    }

    @media (max-width: 768px) {
        .trusted-section {
            padding: 60px 15px;
        }

        .trusted-title {
            font-size: 28px;
            margin-bottom: 40px;
        }

        .trusted-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }

        .trusted-item:after {
            display: none;
        }
    }

    @media (max-width: 480px) {
        .trusted-grid {
            /* grid-template-columns: 2fr; */
            gap: 25px;
        }

        .trusted-title {
            font-size: 24px;
        }

        .trusted-text {
            font-size: 17px;
        }
    }
</style>

<div class="trusted-section">
    <div class="trusted-container">
        <div class="trusted-title">Trusted for simple routines</div>

        <div class="trusted-grid">

            <!-- Item 1 -->
            <div class="trusted-item">
                <div class="trusted-icon">
                    <svg viewBox="0 0 64 64">
                        <path d="M10 40l10-10 12 12 14-14 8 8"></path>
                        <path d="M10 44h44"></path>
                        <path d="M18 20c0 6 6 6 6 0s-6-6-6 0z"></path>
                        <path d="M34 20c0 6 6 6 6 0s-6-6-6 0z"></path>
                    </svg>
                </div>
                <div class="trusted-text">Routine-safe<br>layering</div>
            </div>

            <!-- Item 2 -->
            <div class="trusted-item">
                <div class="trusted-icon">
                    <svg viewBox="0 0 64 64">
                        <path d="M24 10h16"></path>
                        <path d="M28 10v10l-12 24c-2 4 1 10 6 10h20c5 0 8-6 6-10L36 20V10"></path>
                        <path d="M24 40h16"></path>
                    </svg>
                </div>
                <div class="trusted-text">Ingredient<br>transparency</div>
            </div>

            <!-- Item 3 -->
            <div class="trusted-item">
                <div class="trusted-icon">
                    <svg viewBox="0 0 64 64">
                        <path d="M12 44c18-18 34-18 40-14-4 12-20 28-40 14z"></path>
                        <path d="M20 38c6-6 14-10 22-10"></path>
                    </svg>
                </div>
                <div class="trusted-text">Lightweight<br>textures</div>
            </div>

            <!-- Item 4 -->
            <div class="trusted-item">
                <div class="trusted-icon">
                    <svg viewBox="0 0 64 64">
                        <path d="M16 30a16 16 0 0 1 32 0v10a8 8 0 0 1-8 8H24a8 8 0 0 1-8-8V30z"></path>
                        <path d="M16 34h-4"></path>
                        <path d="M52 34h4"></path>
                        <circle cx="42" cy="30" r="8"></circle>
                        <text x="38" y="33" font-size="8" fill="#4c4c4c">24h</text>
                    </svg>
                </div>
                <div class="trusted-text">Support within<br>24h</div>
            </div>

        </div>
    </div>
</div>