.detail-hero { display:grid; grid-template-columns:1.2fr .8fr; gap:40px; padding:64px clamp(24px,7vw,120px) 96px; overflow:hidden; }
.back-link { display:inline-block; font:11px 'DM Mono',monospace; color:#a5a5a5; text-decoration:none; margin-bottom:48px; }
.back-link:hover { color:var(--white); }
.detail-page h1 { font-size:clamp(48px,5.6vw,86px); }
.detail-name { font:10px 'DM Mono',monospace; letter-spacing:.12em; color:#a5a5a5; margin-bottom:20px; }
/* Product constellation: one dominant mark, three connected business areas. */
.system-map { position:relative; align-self:center; justify-self:center; width:100%; max-width:540px; aspect-ratio:520/560; min-width:0; isolation:isolate; }
.map-scene { position:absolute; inset:0; }
.system-map .fragment-field { inset:-5%; background-size:150px 150px; mask-image:radial-gradient(ellipse at 50% 46%,transparent 34%,#0009 65%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse at 50% 46%,transparent 34%,#0009 65%,transparent 78%); }
.map-aura { position:absolute; inset:13% 3% 15% 0; border-radius:50%; background:radial-gradient(ellipse at 54% 58%,#36a8ff12,transparent 65%); animation:map-breathe 7s ease-in-out infinite; }
.map-orbits { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.map-track { stroke:#f3f3f02c; stroke-width:1; }
.map-track-outer { stroke:#f3f3f019; }
.map-track-inner { stroke:#f3f3f00e; stroke-dasharray:2 10; }
.map-pulse { stroke:#36a8ff; stroke-width:.7; opacity:0; transform-origin:260px 254px; animation:map-ripple 7s ease-out infinite; }
.map-connections { stroke:#f3f3f036; stroke-width:1; }
.map-flow { stroke:var(--blue); stroke-width:1.25; stroke-linecap:round; }
.map-flow path { stroke-dasharray:12 140; stroke-dashoffset:152; animation:map-transfer 6s linear infinite; }
.map-flow path:nth-child(2) { animation-delay:-2s; }
.map-flow path:nth-child(3) { animation-delay:-4s; }
.map-satellite { transform-origin:260px 254px; animation:map-orbit 20s linear infinite; }
.map-satellite path { stroke:var(--blue); stroke-width:1.25; opacity:.5; }
.map-satellite circle { fill:var(--blue); }
.map-satellite .map-satellite-halo { opacity:.08; }
.map-satellite-secondary { animation-duration:32s; animation-direction:reverse; }
.map-satellite-secondary circle { fill:#f3f3f0; opacity:.55; }
.map-core { position:absolute; left:50%; top:45.4%; width:34%; max-width:164px; transform:translate(-50%,-50%); text-align:center; animation:core-float 7s ease-in-out infinite; }
.map-core::before { content:''; position:absolute; inset:-20% -40%; z-index:-1; border-radius:50%; background:radial-gradient(ellipse,#080808 20%,#080808cc 40%,transparent 72%); }
.map-core img { display:block; width:100%; height:auto; margin:0 auto 24px; filter:drop-shadow(0 12px 24px #0008); transition:filter .6s ease; }
.map-core span { display:block; font:10px/1.65 'DM Mono',monospace; letter-spacing:.23em; color:#d7d7d4; }
.map-node { position:absolute; width:32%; max-width:152px; padding:13px 14px; border:1px solid #ffffff25; background:linear-gradient(125deg,#181818f5,#0b0b0bf0); box-shadow:0 10px 28px #0004; animation:map-node-float 8s ease-in-out infinite; transition:border-color .5s ease; }
.map-node::after { content:''; position:absolute; bottom:-1px; left:14px; width:32px; height:1px; background:var(--blue); transform-origin:left; animation:map-node-signal 9s ease-in-out infinite; }
.map-node-meta { display:block; white-space:nowrap; font:8px/1.5 'DM Mono',monospace; letter-spacing:.035em; color:#969696; }
.map-node-meta b { color:var(--blue); font-weight:400; }
.map-node-title { display:block; margin-top:6px; font-size:13px; font-weight:600; letter-spacing:-.02em; }
.node-one { top:10%; left:0; }
.node-two { top:49%; right:0; animation-delay:-2.6s; }
.node-three { bottom:17%; left:2%; animation-delay:-5.3s; }
.node-two::after { animation-delay:-3s; }
.node-three::after { animation-delay:-6s; }
.map-caption { position:absolute; bottom:1%; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:12px; margin:0; font:8px/1.6 'DM Mono',monospace; letter-spacing:.11em; color:#929292; }
.map-caption span { width:22px; height:1px; background:linear-gradient(90deg,var(--blue),#36a8ff22); }
@media(hover:hover) { .system-map:hover .map-core img { filter:drop-shadow(0 5px 28px #36a8ff22); }.system-map:hover .map-node { border-color:#ffffff45; } }
.detail-strip { display:flex; justify-content:center; align-items:center; gap:40px; padding:28px 24px; border-block:1px solid #292929; color:#a5a5a5; font:11px 'DM Mono',monospace; }.detail-strip i { color:var(--blue); }
.detail-section { padding:100px clamp(24px,7vw,120px); }.detail-section h2 { font-size:clamp(36px,4.5vw,66px); letter-spacing:-.06em; line-height:1.05; margin:0 0 40px; }
.features { background:#f3f3f0; color:#111; }.features .eyebrow { color:#666; }.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; }.feature { padding:32px 0; border-top:1px solid #c9c9c5; }.feature>span { font:9px 'DM Mono',monospace; color:#656565; }.feature h3 { margin:24px 0 14px; font-size:20px; letter-spacing:-.035em; }.feature p { color:#555; font-size:14px; line-height:1.75; margin:0; }
.workflow { display:grid; grid-template-columns:1fr 1fr; gap:64px; }.section-intro { font-size:15px; line-height:1.75; color:#a5a5a5; max-width:530px; }.workflow-steps { list-style:none; padding:0; margin:0; }.workflow-steps li { display:flex; gap:24px; border-top:1px solid #303030; padding:26px 0; }.workflow-steps li>span { font:11px 'DM Mono',monospace; color:var(--blue); }.workflow-steps h3 { font-size:18px; margin-bottom:12px; }.workflow-steps p,.query-grid p { font-size:14px; line-height:1.75; color:#a5a5a5; margin:0; }
.quick-queries { background:#111; border-block:1px solid #292929; }.query-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }.query-grid article { border-top:1px solid #353535; padding-top:28px; }.keyword-list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }.keyword-list span { padding:10px 14px; border:1px solid #424242; font:11px 'DM Mono',monospace; color:var(--white); transition:border-color .25s,transform .25s; }.keyword-list span:hover { border-color:var(--blue); transform:translateY(-3px); }.query-grid h3 { font-size:20px; }
.faq-list { margin-top:40px; }.faq-list details { border-top:1px solid #333; padding:24px 0; }.faq-list details:last-child { border-bottom:1px solid #333; }.faq-list summary { cursor:pointer; font-size:17px; line-height:1.6; padding-right:16px; }.faq-list summary::marker { color:var(--blue); }.faq-list summary:focus-visible { outline:2px solid var(--blue); outline-offset:6px; }.faq-list p { max-width:760px; margin:20px 0 0; color:#a5a5a5; font-size:15px; line-height:1.8; }.faq-list details[open] p { animation:rise .45s both; }
@keyframes map-orbit { to { transform:rotate(360deg); } }
@keyframes core-float { 0%,100% { transform:translate(-50%,-50%); } 50% { transform:translate(-50%,calc(-50% - 8px)); } }
@keyframes map-node-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@keyframes map-breathe { 0%,100% { opacity:.45; transform:scale(.9); } 50% { opacity:1; transform:scale(1.08); } }
@keyframes map-ripple { 0% { transform:scale(.75); opacity:0; } 20% { opacity:.18; } 85%,100% { transform:scale(1.48); opacity:0; } }
@keyframes map-transfer { 0% { stroke-dashoffset:152; opacity:0; } 12%,60% { opacity:.7; } 82%,100% { stroke-dashoffset:0; opacity:0; } }
@keyframes map-node-signal { 0%,38%,100% { opacity:.2; transform:scaleX(.5); } 12%,24% { opacity:.85; transform:scaleX(1); } }
@media(max-width:1000px) { .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.detail-hero { gap:20px; }.workflow { gap:32px; } }
@media(max-width:1000px) and (min-width:761px) { .map-node { padding:11px 9px; }.map-node-meta { font-size:7px; } }
@media(max-width:760px) { .detail-hero { grid-template-columns:1fr; padding-top:36px; padding-bottom:60px; }.system-map { max-width:480px; margin-top:36px; }.back-link { margin-bottom:36px; }.detail-section { padding-block:72px; }.feature-grid,.workflow,.query-grid { grid-template-columns:1fr; }.detail-strip { gap:12px; flex-wrap:wrap; font-size:9px; } }
@media(max-width:400px) { .map-node { padding:10px 8px; }.map-node-meta { font-size:7px; }.map-node-title { font-size:12px; }.map-core img { margin-bottom:16px; }.map-core span { font-size:9px; letter-spacing:.16em; }.map-caption { font-size:7px; gap:8px; letter-spacing:.04em; } }
@media(max-width:360px) { .map-node-meta { letter-spacing:0; } }
@media(prefers-reduced-motion:reduce) { .map-core,.map-node,.map-node::after,.map-aura,.map-satellite,.map-pulse,.map-flow path,.faq-list details[open] p { animation:none; }.map-flow,.map-pulse { display:none; } }