.page-service-detail .hero__trust {
    margin-top: var(--space-6);
    max-width: 36rem;
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-inverse);
    color: #c4d0e0;
    font-size: 0.95rem;
}

.page-service-detail .sd-compact {
    padding: clamp(3.3rem, 5.8vw, 5.4rem) 0;
}

.sd-copy {
    margin-top: var(--space-5);
    max-width: 42rem;
    color: var(--text-secondary);
    font-size: var(--fs-lg);
}

.sd-visual {
    min-width: 0;
    padding: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(18, 28, 46, 0.94), rgba(10, 16, 28, 0.9));
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sd-flow,
.sd-layers,
.sd-hub,
.sd-trio,
.sd-surround {
    display: grid;
    gap: 0.5rem;
}

.sd-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: relative;
}

.sd-flow li,
.sd-layers li,
.sd-hub li,
.sd-trio li,
.sd-surround li,
.sd-hub__core {
    display: grid;
    place-items: center;
    min-height: 2.7rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--border-inverse);
    color: #d5deea;
    font-family: var(--font-display);
    font-size: 0.82rem;
    text-align: center;
}

.sd-flow li.is-current,
.sd-layers li:nth-child(3),
.sd-hub__core,
.sd-trio li:nth-child(2) {
    border-color: var(--border-accent);
    color: var(--color-cyan-300);
    background: rgba(26, 167, 196, 0.1);
}

.sd-hub__core {
    margin: 0.55rem 0;
    min-height: 4.2rem;
    font-weight: var(--fw-semibold);
}

.sd-layers {
    gap: 0.45rem;
}

.sd-trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sd-surround {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.65rem;
}

.sd-list,
.sd-related {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.sd-list li,
.sd-related a {
    padding: 0.85rem 1rem 0.85rem 0;
    border-top: 1px solid var(--border-subtle);
    color: var(--color-navy-900);
    font-family: var(--font-display);
}

.sd-related a {
    display: block;
    color: var(--color-blue-600);
    text-decoration: none;
}

.sd-related a:hover {
    color: var(--color-cyan-500);
}

.sd-cases {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-10);
}

.sd-cases h3 {
    margin-bottom: var(--space-3);
}

.sd-cases p {
    color: var(--text-secondary);
}

.sd-approach {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.sd-approach li {
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-inverse);
}

.sd-approach span {
    display: inline-block;
    margin-bottom: 0.65rem;
    color: var(--color-cyan-300);
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
}

.sd-approach h3 {
    margin-bottom: 0.4rem;
    color: var(--color-white);
}

.sd-approach p {
    color: #c2cedc;
}

@media (max-width: 1024px) {
    .sd-flow,
    .sd-cases,
    .sd-approach,
    .sd-list,
    .sd-related {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .sd-flow,
    .sd-trio,
    .sd-surround,
    .sd-cases,
    .sd-approach,
    .sd-list,
    .sd-related {
        grid-template-columns: 1fr;
    }
}
