.hook-demo { display: flex; align-items: center; gap: 20px; margin: 0 0 1rem; }

.service {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem;
    border: 2px solid transparent;
    border-radius: 14px;
    transition: border-color 0.3s;
}

.service .viz-badge { width: 68px; height: 68px; border-radius: 16px; }
.service .viz-badge svg { width: 34px; height: 34px; }

.arrow-container { width: 110px; position: relative; height: 20px; }
.hook-line { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }

#hook-arrow {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    background: #F59E0B;
    box-shadow: 0 0 10px color-mix(in srgb, #F59E0B 70%, transparent);
    transform: translateX(0);
    transition: transform 0.5s;
}