.detail-card{position:relative;transition:transform .22s ease,background .22s ease,box-shadow .22s ease,color .22s ease}
.detail-card:hover{z-index:2;transform:translateY(-7px);background:color-mix(in srgb,var(--accent) 38%,#071216);color:#fff;box-shadow:0 22px 50px color-mix(in srgb,var(--accent) 22%,rgba(0,0,0,.38))}
.detail-card:hover>span,.detail-card:hover h3{color:#fff}
.detail-card:hover .output-mark i{background:#fff}
.detail-open{margin-top:18px;padding:0 0 5px;border:0;border-bottom:1px solid color-mix(in srgb,var(--accent) 65%,transparent);background:none;color:var(--accent);font:800 10px monospace;cursor:pointer}
.detail-card:hover .detail-open{color:color-mix(in srgb,var(--accent) 35%,#fff);border-color:color-mix(in srgb,var(--accent) 55%,#fff)}
.detail-open b{margin-left:8px}
.detail-dialog{position:fixed;inset:0;width:min(620px,calc(100% - 32px));max-height:min(78vh,680px);margin:auto;padding:42px;border:1px solid color-mix(in srgb,var(--accent) 72%,#fff);border-radius:24px;background:color-mix(in srgb,var(--accent) 30%,#071216);color:#fff;box-shadow:0 35px 100px rgba(0,0,0,.5);overflow:auto}
.detail-dialog::backdrop{background:rgba(4,13,17,.76);backdrop-filter:blur(10px)}
.detail-dialog .overline{color:color-mix(in srgb,var(--accent) 48%,#fff)}
.detail-dialog h2{font-size:clamp(32px,5vw,54px);line-height:1;letter-spacing:-.05em;margin:22px 0;color:#fff}
.detail-dialog p{font-size:17px;line-height:1.7;color:rgba(255,255,255,.8)}
.detail-close{position:absolute;right:18px;top:16px;width:38px;height:38px;border:1px solid color-mix(in srgb,var(--accent) 55%,#fff);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:25px;cursor:pointer}
@media(max-width:650px){.detail-dialog{padding:34px 25px}
.detail-card:hover{transform:translateY(-3px)}
}
.detail-card{cursor:pointer}
.detail-card:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.detail-open{display:inline-block;pointer-events:none}
.detail-visual{overflow:hidden;margin:4px 0 8px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:14px;background:#061419}
.detail-visual svg{display:block;width:100%;height:auto;max-height:245px}
.detail-sample-label{display:block;margin:0 0 24px;color:rgba(255,255,255,.52);font:700 8px monospace;letter-spacing:.13em;text-transform:uppercase}
.detail-why{margin-top:24px;padding:20px;border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);border-radius:14px;background:rgba(255,255,255,.055)}
.detail-why>b{display:block;color:color-mix(in srgb,var(--accent) 42%,#fff);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.detail-why p{margin:9px 0 0;font-size:14px;line-height:1.65}
.detail-dialog{max-height:min(88vh,820px)}
.use-detail-card{position:relative;cursor:pointer;transition:transform .22s ease,background .22s ease,box-shadow .22s ease,color .22s ease,padding .22s ease}
.use-detail-card:hover,.use-detail-card:focus-visible{z-index:1;transform:translateX(8px) translateY(-2px);padding-left:14px;padding-right:12px;background:color-mix(in srgb,var(--accent) 30%,#071216);color:#fff;box-shadow:0 16px 38px rgba(0,0,0,.28)}
.use-detail-card:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 40%,#fff);outline-offset:3px}
.use-detail-card:hover h3,.use-detail-card:focus-visible h3,.use-detail-card:hover>span,.use-detail-card:focus-visible>span{color:#fff}
.use-detail-card h3:after{content:"View details";display:block;max-height:0;margin-top:0;overflow:hidden;color:color-mix(in srgb,var(--accent) 28%,#fff);font:800 9px/1.2 monospace;letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateY(5px);transition:max-height .22s ease,margin .22s ease,opacity .22s ease,transform .22s ease}
.use-detail-card:hover h3:after,.use-detail-card:focus-visible h3:after{max-height:14px;margin-top:6px;opacity:1;transform:translateY(0)}
.use-detail-card>b{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(255,255,255,.4);border-radius:50%;transition:transform .22s ease,background .22s ease,color .22s ease}
.use-detail-card:hover>b,.use-detail-card:focus-visible>b{transform:translate(4px,-4px) rotate(8deg);background:#fff;color:color-mix(in srgb,var(--accent) 55%,#071216)}
@media(max-width:650px){.use-detail-card:hover,.use-detail-card:focus-visible{transform:translateX(4px) translateY(-2px)}}
.method-detail-card{position:relative;min-height:155px;padding:25px 58px 25px 22px;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:var(--panel);cursor:pointer;overflow:hidden;transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease}
.method-detail-card:after{content:"↗";position:absolute;right:20px;top:20px;display:grid;place-items:center;width:32px;height:32px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:50%;color:var(--accent);transition:transform .22s ease,background .22s ease,color .22s ease}
.method-detail-card:hover,.method-detail-card:focus-visible{transform:translateY(-7px);border-color:color-mix(in srgb,var(--accent) 65%,#fff);background:color-mix(in srgb,var(--accent) 28%,#071216);box-shadow:0 22px 46px color-mix(in srgb,var(--accent) 18%,rgba(0,0,0,.4))}
.method-detail-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.method-detail-card:hover:after,.method-detail-card:focus-visible:after{transform:translate(4px,-4px) rotate(8deg);background:var(--accent);color:#071216}
.service-method .method-detail-card>p{padding:0;border:0;background:none;color:var(--muted)}
.method-detail-card>span{display:block;margin-top:16px;color:var(--accent);font:800 9px monospace;letter-spacing:.12em;text-transform:uppercase;opacity:.65;transform:translateY(3px);transition:opacity .22s ease,transform .22s ease}
.method-detail-card:hover>span,.method-detail-card:focus-visible>span{opacity:1;transform:translateY(0)}