.hexagon {
    width: 300px;
    aspect-ratio: 1.1547 / 1; /* perfect vertical hexagon */
    background: rgba(245, 245, 245, 0.9); /* slightly transparent */
    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    padding: 20px;
    color: #222;
    position: relative;
    z-index: 1;
}

/* Optional left accent border */
.hexagon::before {
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
    width: 4px;
    height: 100%;
    background-color: #f97316; /* orange accent */
    z-index: -1;
    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );
}