/* ── Glassmorphism ── */
.glass-nav {
    background: rgba(13, 15, 20, 0.65);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.glass-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1rem;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}

.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
}

.glass-surface {
    background: rgba(255, 255, 255, 0.015);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* ── 渐变文字 ── */
.text-gradient-primary {
    background: linear-gradient(90deg, #93c5fd, #7dd3fc, #bfdbfe, #7dd3fc, #93c5fd);
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 9s linear infinite;
}

.text-gradient-ai {
    background: linear-gradient(90deg, #c4b5fd, #a78bfa, #93c5fd, #a78bfa, #c4b5fd);
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 9s linear infinite reverse;
}

@keyframes gradient-flow {
    0%   { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* ── 背景点阵 ── */
.bg-subtle-pattern {
    background-color: #0d0f14;
    background-image: radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 28px 28px;
}

.app-body {
    background-color: #0d0f14;
}

.hero-card-blue {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.18);
}

.hero-card-purple {
    background: rgba(139, 92, 246, 0.06);
    border-color: rgba(139, 92, 246, 0.18);
}

.feature-title {
    color: #fff;
}

.diagram-shell {
    min-height: 360px;
}

.diagram-canvas {
    min-height: 300px;
}

.diagram-canvas-block {
    display: block;
}

.yolo-dimmed {
    --tw-bg-opacity: 0.5;
}

/* ── Hero 产品卡浮动 ── */
.hero-card-float-1 {
    animation: hero-float 6s ease-in-out infinite;
}

.hero-card-float-2 {
    animation: hero-float 6s ease-in-out infinite 1.8s;
}

@keyframes hero-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-6px); }
}

/* ── 核心优势卡片 stagger ── */
.core-card-animate {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.core-card-animate.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.core-card-animate:nth-child(2) { transition-delay: 0.15s; }
.core-card-animate:nth-child(3) { transition-delay: 0.30s; }

.core-icon-float {
    display: inline-block;
    animation: icon-float 4s ease-in-out infinite;
}

.core-card-animate:nth-child(2) .core-icon-float { animation-delay: 0.8s; }
.core-card-animate:nth-child(3) .core-icon-float { animation-delay: 1.6s; }

@keyframes icon-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-5px); }
}

/* ── CTA 旋转边框 ── */
.cta-outer {
    position: relative;
    border-radius: 1.75rem;
    padding: 1.5px;
    overflow: hidden;
}

.cta-spin-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220%;
    height: 220%;
    background: conic-gradient(
        transparent 30deg,
        rgba(99, 155, 235, 0.55) 80deg,
        rgba(139, 92, 246, 0.45) 155deg,
        rgba(20, 184, 166, 0.40) 210deg,
        transparent 270deg
    );
    animation: cta-spin 8s linear infinite;
    pointer-events: none;
}

@keyframes cta-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.cta-inner {
    position: relative;
    z-index: 1;
    background: rgba(18, 20, 28, 0.92);
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
    border-radius: calc(1.75rem - 1.5px);
}

/* ── 悬浮联系侧边栏 ── */
.contact-tip {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(13, 15, 20, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #cbd5e1;
    font-size: 11px;
    padding: 5px 11px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.contact-btn:hover .contact-tip { opacity: 1; }

/* ── SVG draw animation ── */
.cdc-svg-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw-path 3s ease-out forwards;
}

@keyframes draw-path {
    to { stroke-dashoffset: 0; }
}

/* ── YOLO 检测动画 ── */
.yb1 {
    stroke: #6ee7b7;
    stroke-width: 2.5;
    fill: none;
    filter: url(#yg1);
    stroke-dasharray: 640;
    animation: yolo-draw 4.2s ease-in-out infinite 0s;
}

.yb2 {
    stroke: #8b5cf6;
    stroke-width: 2.5;
    fill: none;
    filter: url(#yg2);
    stroke-dasharray: 580;
    animation: yolo-draw 4.2s ease-in-out infinite 0.9s;
}

.yb3 {
    stroke: #d4a96a;
    stroke-width: 2.5;
    fill: none;
    filter: url(#yg3);
    stroke-dasharray: 370;
    animation: yolo-draw 4.2s ease-in-out infinite 1.8s;
}
.yl1 { animation: yolo-label 4.2s ease-in-out infinite 0s; }
.yl2 { animation: yolo-label 4.2s ease-in-out infinite 0.9s; }
.yl3 { animation: yolo-label 4.2s ease-in-out infinite 1.8s; }
.yscan { animation: yolo-scan 2.8s linear infinite; }
.yfps  { animation: yolo-fps 0.8s steps(1) infinite; }

@keyframes yolo-draw {
    0%   { stroke-dashoffset: 640; opacity: 0; }
    8%   { opacity: 1; }
    45%  { stroke-dashoffset: 0; opacity: 1; }
    78%  { stroke-dashoffset: 0; opacity: 1; }
    92%  { opacity: 0; }
    100% { stroke-dashoffset: 640; opacity: 0; }
}

@keyframes yolo-label {
    0%, 22%  { opacity: 0; }
    38%, 78% { opacity: 1; }
    92%      { opacity: 0; }
    100%     { opacity: 0; }
}

@keyframes yolo-scan {
    0%   { transform: translateY(0px);   opacity: 0.18; }
    85%  { opacity: 0.08; }
    100% { transform: translateY(290px); opacity: 0; }
}

@keyframes yolo-fps {
    0%  { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Modern scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0d0f14; }
::-webkit-scrollbar-thumb { background: #2a2d38; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3e4e; }