.ddos-network-summary { margin-top: 24px; padding: 24px; border: 1px solid var(--cera-line, #dfe6f0); border-radius: 16px; background: var(--cera-surface, #f2f5f9); }
.ddos-network-summary h3 { font-size: 1.25rem; }
.ddos-network-summary p { margin-bottom: 12px; }
.ddos-network-summary a { color: #075cce; text-decoration: underline; text-underline-offset: 3px; }
.access-card { background: #fff; padding: clamp(20px, 4vw, 40px); border: 1px solid var(--cera-line, #dfe6f0); border-radius: 20px; margin-top: 24px; }
.access-heading { display: flex; align-items: center; gap: 16px; }
.access-heading h3 { margin: 0; }
.access-number { color: #075cce; font-size: 1.5rem; font-weight: 700; }
.access-steps { padding-left: 24px; margin-bottom: 0; }
.access-steps li { padding-left: 8px; margin: 12px 0; }
/* Access path diagrams (b8): same visual language as the network map, light theme. */
.access-diagram { margin: 28px 0 24px; }
.access-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; max-width: 760px; margin: 0 auto; padding: 44px 0 0; list-style: none; }
.access-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; text-align: center; }
.access-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border: 2px solid var(--cera-primary, #0057d9); border-radius: 50%; background: #fff; box-shadow: 0 0 0 8px #e3edff; color: var(--cera-primary, #0057d9); font-size: 1.6rem; }
.access-node-pop .access-icon { background: var(--cera-primary, #0057d9); color: #fff; }
.access-label { max-width: 100%; color: var(--cera-ink, #111e35); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.access-link { position: absolute; top: 32px; left: calc(50% + 44px); width: calc(100% - 64px); height: 20px; overflow: hidden; transform: translateY(-50%); }
.access-link::before { content: ""; position: absolute; top: 9px; left: 0; right: 8px; height: 2px; background: var(--cera-primary, #0057d9); }
.access-link::after { content: ""; position: absolute; top: 4px; right: 0; border-left: 10px solid var(--cera-primary, #0057d9); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.access-link-tunnel::before { top: 3px; height: 14px; border-block: 2px solid var(--cera-primary, #0057d9); background: transparent; }
.access-link-tunnel::after { display: none; }
.access-link-tunnel .access-packets { right: 4px; }
.access-packets { position: absolute; inset: 0 22px 0 2px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6px, #000 calc(100% - 6px), transparent); mask-image: linear-gradient(90deg, transparent, #000 6px, #000 calc(100% - 6px), transparent); }
.access-packets::before { content: ""; position: absolute; inset: 0 0 0 -36px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='20'%3E%3Cpath d='M12 4.5l10 5.5-10 5.5z' fill='%2300617d'/%3E%3C/svg%3E") repeat-x 0 0 / 36px 20px; }
.access-attack { position: absolute; z-index: 2; top: -42px; left: calc(50% + 30px); width: 2px; height: 30px; border-left: 2px dashed var(--cera-attack, #a32c00); transform: rotate(28deg); transform-origin: 50% 100%; }
.access-attack::after, .access-attack-packet { content: ""; position: absolute; left: -7px; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2 2l8 8M2 10l8-8' stroke='%23a32c00' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; }
.access-attack::after { bottom: -15px; }
.access-attack-packet { top: -6px; opacity: 0; }
.access-card.is-running .access-packets::before { animation: access-flow 1.5s linear 3; }
.access-card.is-running .access-attack-packet { animation: access-drop 1.6s ease-in 3; }
@keyframes access-flow { from { transform: translateX(0); } to { transform: translateX(36px); } }
@keyframes access-drop { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 75% { opacity: 1; transform: translateY(26px); } 100% { opacity: 0; transform: translateY(32px) scale(.6); } }
@media (max-width: 575.98px) {
 .access-path { column-gap: 12px; padding-top: 38px; }
 .access-icon { width: 52px; height: 52px; box-shadow: 0 0 0 6px #e3edff; font-size: 1.3rem; }
 .access-link { top: 26px; left: calc(50% + 32px); width: calc(100% - 52px); }
 .access-label { font-size: .9rem; }
 .access-attack { top: -36px; left: calc(50% + 24px); height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
 .access-card .access-packets::before, .access-card .access-attack-packet { animation: none; }
}