/* ========================================
   电路巡检机器人产品页
   延续温控模块的暖米色与金棕纸感，增加克制的空间层次
   ======================================== */

.robot-hero {
    min-height: auto;
    padding-bottom: 68px;
}

.robot-project-mark {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border: 1px solid rgba(192, 137, 43, 0.2);
    border-radius: 999px;
    color: var(--color-accent-d);
    background: rgba(255, 253, 248, 0.7);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.robot-scene {
    --scene-rx: 0deg;
    --scene-ry: 0deg;
    --scene-x: 0px;
    --scene-y: 0px;
    --scene-back-x: 0px;
    --scene-back-y: 0px;
    --scene-mid-x: 0px;
    --scene-mid-y: 0px;
    --scene-label-x: 0px;
    --scene-label-y: 0px;
    position: relative;
    width: min(100%, 590px);
    aspect-ratio: 1.12 / 1;
    perspective: 1100px;
    transform-style: preserve-3d;
    transform: rotateX(var(--scene-rx)) rotateY(var(--scene-ry));
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    isolation: isolate;
}

.robot-scene-glow {
    position: absolute;
    inset: 5% 4% 8%;
    border-radius: 48%;
    background:
        radial-gradient(circle at 32% 30%, rgba(228, 170, 110, 0.42), transparent 38%),
        radial-gradient(circle at 72% 66%, rgba(192, 137, 43, 0.30), transparent 44%);
    filter: blur(34px);
    transform: translate3d(var(--scene-back-x), var(--scene-back-y), -60px);
    opacity: 0.78;
}

.robot-scene-grid {
    position: absolute;
    inset: 3% 1% 4%;
    border-radius: 32px;
    background-image:
        linear-gradient(rgba(156, 111, 29, 0.085) 1px, transparent 1px),
        linear-gradient(90deg, rgba(156, 111, 29, 0.085) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: radial-gradient(ellipse at center, #000 36%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 36%, transparent 78%);
    transform: translate3d(var(--scene-back-x), var(--scene-back-y), -30px);
}

.robot-scene-plate {
    position: absolute;
    inset: 15% 5% 12% 7%;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255, 253, 248, 0.84), rgba(245, 237, 222, 0.54));
    box-shadow:
        0 30px 70px rgba(80, 56, 20, 0.16),
        inset 0 0 0 1px rgba(74, 58, 30, 0.07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translate3d(var(--scene-mid-x), var(--scene-mid-y), 10px) rotate(-2deg);
}

.robot-scene-photo {
    position: absolute;
    inset: 20% 1% 18% 10%;
    margin: 0;
    overflow: hidden;
    border: 7px solid rgba(255, 253, 248, 0.94);
    border-radius: 23px;
    background: #e9e1d3;
    box-shadow: 0 28px 56px rgba(42, 33, 23, 0.22);
    transform: translate3d(var(--scene-x), var(--scene-y), 50px) rotate(1.5deg);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.robot-scene-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.robot-scene-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 58%, rgba(31, 24, 17, 0.62));
}

.robot-scene-photo figcaption {
    position: absolute;
    z-index: 2;
    left: 18px;
    bottom: 15px;
    color: #fffaf0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.robot-float-tag {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    color: var(--text-primary);
    background: rgba(255, 253, 248, 0.86);
    box-shadow: 0 10px 30px rgba(80, 56, 20, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transform: translate3d(var(--scene-label-x), var(--scene-label-y), 75px);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.robot-float-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(192, 137, 43, 0.15);
}

.robot-float-tag-lidar { top: 11%; right: 0; }
.robot-float-tag-ai { left: 1%; bottom: 22%; }
.robot-float-tag-cloud { right: 3%; bottom: 7%; }

.robot-spec-text {
    font-size: clamp(16px, 1.8vw, 23px);
}

/* 能力卡片：只增加光斑和轻微景深，不改变原卡片结构 */
.robot-capability-card {
    --spot-x: 50%;
    --spot-y: 0%;
    isolation: isolate;
}

.robot-capability-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(320px circle at var(--spot-x) var(--spot-y), rgba(228, 170, 110, 0.17), transparent 60%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.robot-capability-card:hover::before { opacity: 1; }

/* 图片演示 */
.robot-demo-window {
    box-shadow: 0 28px 65px rgba(80, 56, 20, 0.17);
    transform: translateZ(0);
}

.robot-demo-state {
    margin-left: auto;
    padding: 4px 9px;
    border: 1px solid rgba(192, 137, 43, 0.22);
    border-radius: 999px;
    color: var(--color-accent-d);
    background: rgba(192, 137, 43, 0.07);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.robot-demo-screen {
    min-height: 430px;
    padding: 0;
    overflow: hidden;
    background: #201b16;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.robot-demo-screen.is-switching {
    opacity: 0.35;
    transform: scale(0.985);
}

.robot-demo-media {
    position: relative;
    display: block;
    width: 100%;
    min-height: 430px;
    overflow: hidden;
    border: 0;
    color: inherit;
    background: #201b16;
    cursor: zoom-in;
    text-align: left;
}

.robot-demo-backdrop,
.robot-demo-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.robot-demo-backdrop {
    object-fit: cover;
    filter: blur(28px) saturate(0.8);
    opacity: 0.36;
    transform: scale(1.12);
}

.robot-demo-main {
    z-index: 1;
    object-fit: contain;
    padding: 20px;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.robot-demo-media:hover .robot-demo-main { transform: scale(1.025); }

.robot-demo-vignette {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(25, 21, 16, 0.08) 45%, rgba(25, 21, 16, 0.78));
}

.robot-demo-caption {
    position: absolute;
    z-index: 3;
    left: 24px;
    right: 24px;
    bottom: 21px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    color: #fffaf0;
}

.robot-demo-caption strong {
    display: block;
    font-size: 17px;
    margin-bottom: 3px;
}

.robot-demo-caption span {
    display: block;
    max-width: 470px;
    color: rgba(255, 250, 240, 0.72);
    font-size: 12px;
    line-height: 1.55;
}

.robot-demo-zoom {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(25, 21, 16, 0.32);
    font-size: 11px;
    backdrop-filter: blur(8px);
}

.robot-demo-zoom svg { width: 14px; height: 14px; }

/* 架构与流程 */
.robot-workflow-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: 52px;
    align-items: center;
}

.robot-architecture-media {
    position: relative;
    display: block;
    width: 100%;
    padding: 14px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-radius: 24px;
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
    cursor: zoom-in;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.robot-architecture-media:hover {
    transform: translateY(-5px) rotateX(1deg) rotateY(-1deg);
    border-color: rgba(192, 137, 43, 0.25);
    box-shadow: var(--shadow-lg);
}

.robot-architecture-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.robot-architecture-media span {
    position: absolute;
    right: 26px;
    bottom: 24px;
    padding: 7px 11px;
    border: 1px solid rgba(74, 58, 30, 0.1);
    border-radius: 999px;
    color: var(--text-secondary);
    background: rgba(255, 253, 248, 0.88);
    font-size: 11px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
}

.robot-flow-layers {
    display: flex;
    flex-direction: column;
    gap: 12px;
    perspective: 900px;
}

.robot-flow-layer {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 16px;
    align-items: start;
    padding: 19px 20px;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    background: rgba(255, 253, 248, 0.9);
    box-shadow: 0 10px 25px rgba(80, 56, 20, 0.05);
    transform: translateX(0);
    transition: transform 0.35s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.robot-flow-layer:hover {
    transform: translateX(5px) translateY(-2px);
    border-color: rgba(192, 137, 43, 0.27);
    box-shadow: var(--shadow-md);
}

.robot-flow-layer:nth-child(2) { margin-left: 9px; background: rgba(255, 253, 248, 0.87); }
.robot-flow-layer:nth-child(3) { margin-left: 18px; background: rgba(255, 253, 248, 0.84); }
.robot-flow-layer:nth-child(4) { margin-left: 27px; background: rgba(255, 253, 248, 0.81); }

.robot-flow-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(192, 137, 43, 0.18);
    border-radius: 12px;
    color: var(--color-accent-d);
    background: rgba(192, 137, 43, 0.08);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
}

.robot-flow-layer h3 {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.robot-flow-layer p {
    color: var(--text-secondary);
    font-size: 13.5px;
    line-height: 1.6;
}

/* 研发历程 */
.robot-journey { grid-template-columns: repeat(3, 1fr); }

.robot-stage-status {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.robot-stage-status.is-complete {
    color: #537257;
    background: rgba(83, 114, 87, 0.1);
    border: 1px solid rgba(83, 114, 87, 0.16);
}

.robot-stage-status.is-progress {
    color: var(--color-accent-d);
    background: rgba(192, 137, 43, 0.1);
    border: 1px solid rgba(192, 137, 43, 0.18);
}

.robot-stage-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}

.robot-stage-tags span {
    padding: 4px 9px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    color: var(--text-tertiary);
    background: var(--bg-soft);
    font-family: var(--font-mono);
    font-size: 10px;
}

.robot-progress-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
    margin-top: 28px;
    padding: 22px 24px;
    border: 1px solid rgba(192, 137, 43, 0.18);
    border-radius: 16px;
    background: rgba(255, 253, 248, 0.72);
}

.robot-progress-note strong {
    color: var(--color-accent-d);
    font-size: 13px;
    white-space: nowrap;
}

.robot-progress-note p {
    color: var(--text-secondary);
    font-size: 13.5px;
    line-height: 1.7;
}

.robot-evidence-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 18px;
    margin-top: 22px;
}

.robot-evidence-card {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 18px;
    background: #2a2117;
    box-shadow: var(--shadow-sm);
    cursor: zoom-in;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.robot-evidence-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.robot-evidence-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(32, 27, 22, 0.78));
}

.robot-evidence-card img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.robot-evidence-card:hover img { transform: scale(1.035); }

.robot-evidence-card > span {
    position: absolute;
    z-index: 2;
    left: 20px;
    right: 20px;
    bottom: 17px;
    color: #fffaf0;
    text-align: left;
}

.robot-evidence-card strong { display: block; font-size: 15px; }
.robot-evidence-card small { color: rgba(255, 250, 240, 0.7); font-size: 11px; }

.robot-cta-tag {
    color: var(--color-accent-d) !important;
    background: rgba(192, 137, 43, 0.1) !important;
    border-color: rgba(192, 137, 43, 0.25) !important;
}

/* 图片预览 */
.robot-lightbox {
    width: min(92vw, 1180px);
    max-width: none;
    padding: 18px;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: #fffaf0;
    background: rgba(31, 25, 19, 0.94);
    box-shadow: 0 35px 110px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.robot-lightbox::backdrop {
    background: rgba(31, 25, 19, 0.68);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.robot-lightbox img {
    display: block;
    width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 12px;
    background: #17130f;
}

.robot-lightbox p {
    padding: 14px 4px 0;
    color: rgba(255, 250, 240, 0.78);
    font-size: 13px;
}

.robot-lightbox-close {
    position: absolute;
    z-index: 2;
    top: -14px;
    right: -14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    color: #fffaf0;
    background: #2a2117;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
}

.robot-lightbox-close svg { width: 17px; height: 17px; }

@media (max-width: 1024px) {
    .robot-scene { max-width: 650px; margin: 0 auto; }
    .robot-workflow-grid { grid-template-columns: 1fr; gap: 34px; }
    .robot-flow-layers { max-width: 760px; width: 100%; margin: 0 auto; }
}

@media (max-width: 900px) {
    .robot-journey { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .robot-hero { padding-bottom: 48px; }
    .robot-project-mark { font-size: 10px; }
    .robot-scene { width: 108%; margin-left: -4%; aspect-ratio: 1 / 1; }
    .robot-scene-photo { inset: 22% 3% 20% 8%; border-width: 5px; }
    .robot-float-tag { padding: 7px 10px; font-size: 10px; }
    .robot-float-tag-lidar { right: 2%; }
    .robot-float-tag-ai { left: 2%; bottom: 18%; }
    .robot-float-tag-cloud { bottom: 6%; }
    .robot-spec-text { font-size: 15px; }
    .robot-demo-screen,
    .robot-demo-media { min-height: 320px; }
    .robot-demo-main { padding: 10px; }
    .robot-demo-caption { left: 16px; right: 16px; bottom: 15px; }
    .robot-demo-caption span { max-width: 230px; }
    .robot-demo-zoom span { display: none; }
    .robot-flow-layer { transform: none; }
    .robot-flow-layer:hover { transform: translateY(-2px); }
    .robot-progress-note { grid-template-columns: 1fr; gap: 7px; }
    .robot-evidence-grid { grid-template-columns: 1fr; }
    .robot-evidence-card,
    .robot-evidence-card img { min-height: 190px; }
    .robot-lightbox { width: 94vw; padding: 10px; }
}

@media (hover: none), (pointer: coarse) {
    .robot-scene,
    .robot-scene > * { transform: none; }
    .robot-architecture-media:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .robot-scene,
    .robot-scene > *,
    .robot-demo-screen,
    .robot-demo-main,
    .robot-flow-layer,
    .robot-architecture-media {
        transition: none !important;
        transform: none !important;
    }
}